1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <!-- Google tag (gtag.js) -->
vendor: 65 bytes, lines 4-5
4 5 <script async src="https://www.googletagmanager.com/gtag/js?id=
5G-WMPS4W4D9N
vendor: 13 bytes, lines 5-6
5"></script> 6
6<script> 7
vendor: 137 bytes, lines 7-11
7window.dataLayer = window.dataLayer || []; 8 function gtag(){dataLayer.push(arguments);} 9 gtag('js', new Date()); 10 11 gtag('config', '
11G-WMPS4W4D9N
vendor: 5 bytes, lines 11-12
11'); 12
12</script>
12 13 <meta charset="UTF-8"> 14 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 15 <title>Latent Particle World Models</title> 16 <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='grad1' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' style='stop-color:%2360a5fa;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23a78bfa;stop-opacity:1' /%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='25' cy='25' r='8' fill='%2360a5fa' opacity='0.9'/%3E%3Ccircle cx='75' cy='25' r='7' fill='%23a78bfa' opacity='0.9'/%3E%3Ccircle cx='50' cy='50' r='10' fill='url(%23grad1)' opacity='1'/%3E%3Ccircle cx='25' cy='75' r='6' fill='%23f472b6' opacity='0.9'/%3E%3Ccircle cx='75' cy='75' r='7' fill='%2360a5fa' opacity='0.9'/%3E%3Cline x1='25' y1='25' x2='50' y2='50' stroke='%2360a5fa' stroke-width='2' opacity='0.4'/%3E%3Cline x1='75' y1='25' x2='50' y2='50' stroke='%23a78bfa' stroke-width='2' opacity='0.4'/%3E%3Cline x1='25' y1='75' x2='50' y2='50' stroke='%23f472b6' stroke-width='2' opacity='0.4'/%3E%3Cline x1='75' y1='75' x2='50' y2='50' stroke='%2360a5fa' stroke-width='2' opacity='0.4'/%3E%3C/svg%3E"> 17 <style> 18 * { 19 margin: 0; 20 padding: 0; 21 box-sizing: border-box; 22 } 23 24 body { 25 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; 26 background: #000; 27 color: #e0e0e0; 28 overflow-x: hidden; 29 } 30 31 #particles-canvas { 32 position: fixed; 33 top: 0; 34 left: 0; 35 width: 100%; 36 height: 100%; 37 z-index: 0; 38 pointer-events: none; 39 } 40 41 .content { 42 position: relative; 43 z-index: 1; 44 } 45 46 header { 47 position: fixed; 48 top: 0; 49 width: 100%; 50 background: rgba(0, 0, 0, 0.8); 51 backdrop-filter: blur(10px); 52 padding: 1rem 2rem; 53 z-index: 100; 54 transform: translateY(-100%); 55 transition: transform 0.3s ease; 56 } 57 58 header.visible { 59 transform: translateY(0); 60 } 61 62 nav { 63 max-width: 1200px; 64 margin: 0 auto; 65 display: flex; 66 gap: 2rem; 67 justify-content: center; 68 } 69 70 nav a { 71 color: #e0e0e0; 72 text-decoration: none; 73 font-size: 0.9rem; 74 transition: color 0.3s; 75 } 76 77 nav a:hover { 78 color: #60a5fa; 79 } 80 81 /* Side Navigation */ 82 .side-nav { 83 position: fixed; 84 left: 2rem; 85 top: 50%; 86 transform: translateY(-50%); 87 z-index: 90; 88 opacity: 0; 89 transition: opacity 0.3s ease; 90 } 91 92 .side-nav.visible { 93 opacity: 1; 94 } 95 96 .side-nav-item { 97 display: block; 98 width: 8px; 99 height: 8px; 100 background: rgba(96, 165, 250, 0.3); 101 border-radius: 50%; 102 margin: 1rem 0; 103 cursor: pointer; 104 transition: all 0.3s ease; 105 position: relative; 106 } 107 108 .side-nav-item:hover, 109 .side-nav-item.active { 110 background: rgba(96, 165, 250, 0.8); 111 transform: scale(1.5); 112 } 113 114 .side-nav-item::before { 115 content: attr(data-label); 116 position: absolute; 117 left: 20px; 118 top: 50%; 119 transform: translateY(-50%); 120 background: rgba(0, 0, 0, 0.9); 121 color: #60a5fa; 122 padding: 0.3rem 0.8rem; 123 border-radius: 4px; 124 font-size: 0.75rem; 125 white-space: nowrap; 126 opacity: 0; 127 pointer-events: none; 128 transition: opacity 0.3s ease; 129 } 130 131 .side-nav-item:hover::before { 132 opacity: 1; 133 } 134 135 .hero { 136 min-height: 100vh; 137 display: flex; 138 flex-direction: column; 139 justify-content: center; 140 align-items: center; 141 text-align: center; 142 padding: 2rem; 143 } 144 145 h1 { 146 font-size: 3.5rem; 147 font-weight: 700; 148 margin-bottom: 1rem; 149 background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%); 150 -webkit-background-clip: text; 151 -webkit-text-fill-color: transparent; 152 background-clip: text; 153 line-height: 1.3; 154 } 155 156 .subtitle { 157 font-size: 1.5rem; 158 color: #b0b0b0; 159 font-weight: 400; 160 margin-bottom: 2rem; 161 line-height: 1.5; 162 } 163 164 .venue { 165 font-size: 1.2rem; 166 color: #a78bfa; 167 font-weight: 600; 168 margin-bottom: 2rem; 169 } 170 171 .authors { 172 display: flex; 173 gap: 2rem; 174 justify-content: center; 175 flex-wrap: wrap; 176 margin-bottom: 2rem; 177 font-size: 1.1rem; 178 } 179 180 .author {
181 color: #e0e0e0; 182 text-decoration: none; 183 transition: all 0.3s ease; 184 position: relative; 185 display: inline-block; 186 } 187 188 .author:hover { 189 color: #60a5fa; 190 } 191 192 .author::after { 193 content: ''; 194 position: absolute; 195 bottom: -2px; 196 left: 0; 197 width: 0; 198 height: 2px; 199 background: #60a5fa; 200 transition: width 0.3s ease; 201 } 202 203 .author:hover::after { 204 width: 100%; 205 } 206 207 .author sup { 208 font-size: 0.7em; 209 color: #a78bfa; 210 font-weight: 600; 211 margin-left: 2px; 212 } 213 214 /* Affiliations */ 215 .affiliations { 216 display: flex; 217 flex-wrap: wrap; 218 justify-content: center; 219 gap: 1.5rem; 220 margin-top: 1.5rem; 221 font-size: 0.95rem; 222 max-width: 900px; 223 margin-left: auto; 224 margin-right: auto; 225 } 226 227 .affiliation { 228 color: #909090; 229 display: flex; 230 align-items: center; 231 gap: 0.4rem; 232 } 233 234 .affiliation sup { 235 color: #a78bfa; 236 font-weight: 700; 237 font-size: 0.85em; 238 } 239 240 /* BibTeX Citation Section */ 241 .citation-section { 242 margin-top: 2rem; 243 max-width: 800px; 244 margin-left: auto; 245 margin-right: auto; 246 } 247 248 .citation-toggle { 249 display: inline-flex; 250 align-items: center; 251 gap: 0.5rem; 252 padding: 0.7rem 1.5rem; 253 background: rgba(96, 165, 250, 0.1); 254 border: 2px solid rgba(96, 165, 250, 0.3); 255 color: #60a5fa; 256 border-radius: 8px; 257 cursor: pointer; 258 font-size: 0.95rem; 259 font-weight: 600; 260 transition: all 0.3s ease; 261 } 262 263 .citation-toggle:hover { 264 background: rgba(96, 165, 250, 0.2); 265 border-color: rgba(96, 165, 250, 0.5); 266 transform: translateY(-2px); 267 } 268 269 .citation-toggle svg { 270 width: 18px; 271 height: 18px; 272 fill: #60a5fa; 273 transition: transform 0.3s ease; 274 } 275 276 .citation-toggle.active svg { 277 transform: rotate(180deg); 278 } 279 280 .citation-content { 281 max-height: 0; 282 overflow: hidden; 283 transition: max-height 0.4s ease; 284 margin-top: 0; 285 } 286 287 .citation-content.expanded { 288 max-height: 500px; 289 margin-top: 1rem; 290 } 291 292 .citation-box { 293 background: rgba(0, 0, 0, 0.6); 294 border: 1px solid rgba(96, 165, 250, 0.3); 295 border-radius: 8px; 296 padding: 1.5rem; 297 position: relative; 298 } 299 300 .citation-box pre { 301 margin: 0; 302 color: #d0d0d0; 303 font-family: 'Courier New', Courier, monospace; 304 font-size: 0.85rem; 305 line-height: 1.6; 306 overflow-x: auto; 307 white-space: pre-wrap; 308 word-wrap: break-word; 309 text-align: left; 310 } 311 312 .copy-bibtex-btn { 313 position: absolute; 314 top: 1rem; 315 right: 1rem; 316 padding: 0.5rem 1rem; 317 background: rgba(96, 165, 250, 0.2); 318 border: 1px solid rgba(96, 165, 250, 0.4); 319 color: #60a5fa; 320 border-radius: 6px; 321 cursor: pointer; 322 font-size: 0.8rem; 323 font-weight: 600; 324 transition: all 0.3s ease; 325 display: flex; 326 align-items: center; 327 gap: 0.4rem; 328 } 329 330 .copy-bibtex-btn:hover { 331 background: rgba(96, 165, 250, 0.3); 332 border-color: rgba(96, 165, 250, 0.6); 333 } 334 335 .copy-bibtex-btn svg { 336 width: 14px; 337 height: 14px; 338 fill: #60a5fa; 339 } 340 341 .copy-bibtex-btn.copied { 342 background: rgba(34, 197, 94, 0.2); 343 border-color: rgba(34, 197, 94, 0.4); 344 color: #22c55e; 345 } 346 347 .copy-bibtex-btn.copied svg { 348 fill: #22c55e; 349 } 350 351 /* Circular Icon Buttons */ 352 .links { 353 display: flex; 354 gap: 2rem; 355 margin-top: 2rem; 356 flex-wrap: wrap; 357 justify-content: center; 358 } 359 360 .icon-btn { 361 display: flex; 362 flex-direction: column; 363 align-items: center; 364 gap: 0.6rem; 365 text-decoration: none; 366 transition: all 0.3s ease; 367 } 368 369 .icon-btn-circle { 370 width: 60px; 371 height: 60px; 372 border-radius: 50%; 373 background: rgba(96, 165, 250, 0.1); 374 border: 2px solid #60a5fa; 375 display: flex; 376 align-items: center; 377 justify-content: center; 378 transition: all 0.3s ease; 379 position: relative; 380 overflow: hidden; 381 } 382 383 .icon-btn-circle::before { 384 content: ''; 385 position: absolute; 386 top: 50%; 387 left: 50%; 388 width: 0; 389 height: 0; 390 border-radius: 50%; 391 background: rgba(96, 165, 250, 0.2); 392 transform: translate(-50%, -50%); 393 transition: all 0.3s ease; 394 } 395 396 .icon-btn:hover .icon-btn-circle::before { 397 width: 100%; 398 height: 100%; 399 } 400 401 .icon-btn:hover .icon-btn-circle { 402 transform: translateY(-4px); 403 box-shadow: 0 6px 25px rgba(96, 165, 250, 0.4); 404 background: rgba(96, 165, 250, 0.15); 405 } 406 407 .icon-btn-circle svg { 408 width: 28px; 409 height: 28px; 410 fill: #60a5fa; 411 position: relative; 412 z-index: 1; 413 transition: all 0.3s ease; 414 } 415 416 .icon-btn:hover .icon-btn-circle svg { 417 transform: scale(1.1); 418 } 419 420 .icon-btn-label { 421 color: #60a5fa; 422 font-size: 0.85rem; 423 font-weight: 600; 424 transition: color 0.3s ease; 425 } 426 427 .icon-btn:hover .icon-btn-label { 428 color: #93c5fd; 429 } 430
431 /* Different colors for different button types */ 432 .icon-btn.arxiv .icon-btn-circle { 433 border-color: #f472b6; 434 background: rgba(244, 114, 182, 0.1); 435 } 436 437 .icon-btn.arxiv .icon-btn-circle svg { 438 fill: #f472b6; 439 } 440 441 .icon-btn.arxiv .icon-btn-label { 442 color: #f472b6; 443 } 444 445 .icon-btn.arxiv:hover .icon-btn-circle { 446 background: rgba(244, 114, 182, 0.15); 447 box-shadow: 0 6px 25px rgba(244, 114, 182, 0.4); 448 } 449 450 .icon-btn.arxiv:hover .icon-btn-label { 451 color: #f9a8d4; 452 } 453 454 .icon-btn.github .icon-btn-circle { 455 border-color: #a78bfa; 456 background: rgba(167, 139, 250, 0.1); 457 } 458 459 .icon-btn.github .icon-btn-circle svg { 460 fill: #a78bfa; 461 } 462 463 .icon-btn.github .icon-btn-label { 464 color: #a78bfa; 465 } 466 467 .icon-btn.github:hover .icon-btn-circle { 468 background: rgba(167, 139, 250, 0.15); 469 box-shadow: 0 6px 25px rgba(167, 139, 250, 0.4); 470 } 471 472 .icon-btn.github:hover .icon-btn-label { 473 color: #c4b5fd; 474 } 475 476 .icon-btn.video .icon-btn-circle { 477 border-color: #ef4444; 478 background: rgba(239, 68, 68, 0.1); 479 } 480 481 .icon-btn.video .icon-btn-circle svg { 482 fill: #ef4444; 483 } 484 485 .icon-btn.video .icon-btn-label { 486 color: #ef4444; 487 } 488 489 .icon-btn.video:hover .icon-btn-circle { 490 background: rgba(239, 68, 68, 0.15); 491 box-shadow: 0 6px 25px rgba(239, 68, 68, 0.4); 492 } 493 494 .icon-btn.video:hover .icon-btn-label { 495 color: #f87171; 496 } 497 498 section { 499 max-width: 1000px; 500 margin: 0 auto; 501 padding: 6rem 2rem; 502 min-height: 60vh; 503 } 504 505 h2 { 506 font-size: 2.5rem; 507 margin-bottom: 2rem; 508 color: #60a5fa; 509 text-align: center; 510 } 511 512 .abstract-text { 513 font-size: 1.1rem; 514 line-height: 1.8; 515 color: #b0b0b0; 516 text-align: center; 517 } 518 519 .architecture-content, .results-content { 520 display: grid; 521 gap: 2rem; 522 } 523 524 .placeholder { 525 background: rgba(96, 165, 250, 0.05); 526 border: 2px dashed rgba(96, 165, 250, 0.3); 527 border-radius: 12px; 528 padding: 3rem; 529 text-align: center; 530 color: #808080; 531 } 532 533 .placeholder img { 534 max-width: 100%; 535 height: auto; 536 display: block; 537 margin: 2rem auto; 538 } 539 540 .placeholder h3 { 541 margin-bottom: 1rem; 542 } 543 544 .placeholder p { 545 margin-top: 1rem; 546 text-align: left; 547 color: #909090; 548 line-height: 1.6; 549 } 550 551 .placeholder p { 552 color: #d0d0d0; 553 font-size: 1.05rem; 554 line-height: 1.6; 555 font-weight: 400; 556 margin-top: 1rem; 557 } 558 559 .dataset-section { 560 background: rgba(96, 165, 250, 0.03); 561 border: 1px solid rgba(96, 165, 250, 0.2); 562 border-radius: 16px; 563 padding: 2rem; 564 margin-bottom: 2rem; 565 transition: all 0.3s ease; 566 scroll-margin-top: 100px; 567 } 568 569 .dataset-section:hover { 570 border-color: rgba(96, 165, 250, 0.4); 571 background: rgba(96, 165, 250, 0.05); 572 } 573 574 .dataset-header { 575 margin-bottom: 1.5rem; 576 display: flex; 577 justify-content: space-between; 578 align-items: center; 579 flex-wrap: wrap; 580 gap: 1rem; 581 } 582 583 .dataset-title-group { 584 flex: 1; 585 } 586 587 .dataset-title { 588 font-size: 1.8rem; 589 color: #a78bfa; 590 margin-bottom: 0.5rem; 591 } 592 593 .dataset-description { 594 color: #909090; 595 font-size: 1rem; 596 line-height: 1.6; 597 } 598 599 /* Video Grid Layouts */ 600 .video-grid { 601 display: grid; 602 gap: 1.5rem; 603 margin-top: 1.5rem; 604 } 605 606 /* Standard 2-column layout */ 607 .video-grid.layout-2col { 608 grid-template-columns: repeat(2, 1fr); 609 } 610 611 /* Asymmetric layout: 1 wide on top, 2 below */ 612 .video-grid.layout-asymmetric { 613 grid-template-columns: repeat(2, 1fr); 614 } 615 616 .video-grid.layout-asymmetric .video-item:first-child { 617 grid-column: 1 / -1; 618 } 619 620 .video-grid.layout-asymmetric .video-item:first-child .video-placeholder { 621 aspect-ratio: 21 / 9; 622 } 623 624 .video-item { 625 background: rgba(0, 0, 0, 0.4); 626 border-radius: 12px; 627 overflow: hidden; 628 border: 1px solid rgba(96, 165, 250, 0.2); 629 transition: all 0.3s ease; 630 } 631 632 .video-item:hover { 633 border-color: rgba(96, 165, 250, 0.5); 634 transform: translateY(-2px); 635 box-shadow: 0 8px 30px rgba(96, 165, 250, 0.2); 636 } 637 638 .video-placeholder { 639 aspect-ratio: 16 / 9; 640 background: linear-gradient(135deg, rgba(96, 165, 250, 0.1) 0%, rgba(167, 139, 250, 0.1) 100%); 641 display: flex; 642 align-items: center; 643 justify-content: center; 644 color: #808080; 645 font-size: 1.2rem; 646 cursor: pointer; 647 transition: transform 0.3s ease; 648 } 649 650 .video-item:hover .video-placeholder { 651 transform: scale(1.02); 652 } 653 654 .video-placeholder img { 655 display: block; 656 width: 100%; 657 max-width: 100%; 658 height: auto; 659 transition: opacity 0.3s ease; 660 } 661 662 .video-item:hover .video-placeholder img { 663 opacity: 0.9; 664 } 665 666 .video-caption { 667 padding: 1rem; 668 color: #d0d0d0; 669 font-size: 1.05rem; 670 line-height: 1.6; 671 font-weight: 400; 672 } 673 674 .expandable-videos { 675 max-height: 0; 676 overflow: hidden; 677 transition: max-height 0.5s ease; 678 } 679 680 .expandable-videos.expanded { 681 max-height: 2000px; 682 } 683 684 .expand-btn { 685 margin-top: 1.5rem; 686 width: 100%; 687 padding: 0.8rem; 688 background: rgba(96, 165, 250, 0.1); 689 border: 1px solid rgba(96, 165, 250, 0.3); 690 color: #60a5fa; 691 border-radius: 8px; 692 cursor: pointer; 693 font-size: 1rem; 694 font-weight: 600; 695 transition: all 0.3s ease; 696 display: flex; 697 align-items: center; 698 justify-content: center; 699 gap: 0.5rem; 700 } 701 702 .expand-btn:hover { 703 background: rgba(96, 165, 250, 0.2); 704 border-color: rgba(96, 165, 250, 0.5); 705 } 706 707 .expand-btn .arrow { 708 transition: transform 0.3s ease; 709 } 710 711 .expand-btn.expanded .arrow { 712 transform: rotate(180deg); 713 } 714 715 /* External link button for datasets */ 716 .dataset-link { 717 display: inline-flex; 718 align-items: center; 719 gap: 0.5rem; 720 padding: 0.6rem 1.2rem; 721 background: rgba(96, 165, 250, 0.1); 722 border: 1px solid rgba(96, 165, 250, 0.3); 723 color: #60a5fa; 724 text-decoration: none; 725 border-radius: 8px; 726 font-size: 0.9rem; 727 font-weight: 600; 728 transition: all 0.3s ease; 729 margin-top: 1rem; 730 } 731 732 .dataset-link:hover { 733 background: rgba(96, 165, 250, 0.2); 734 border-color: rgba(96, 165, 250, 0.5); 735 transform: translateX(4px); 736 } 737 738 .dataset-link svg { 739 width: 16px; 740 height: 16px; 741 fill: #60a5fa; 742 transition: transform 0.3s ease; 743 } 744 745 .dataset-link:hover svg { 746 transform: translateX(2px); 747 } 748 749 /* Related Work Section */ 750 .related-work-section { 751 background: rgba(167, 139, 250, 0.03); 752 border: 1px solid rgba(167, 139, 250, 0.2); 753 border-radius: 16px; 754 padding: 3rem 2rem; 755 margin-top: 4rem; 756 } 757 758 .related-work-title { 759 font-size: 2rem; 760 color: #a78bfa; 761 text-align: center; 762 margin-bottom: 0.5rem; 763 } 764 765 .related-work-subtitle { 766 text-align: center; 767 color: #909090; 768 margin-bottom: 2rem; 769 font-size: 1rem; 770 } 771 772 .carousel-container { 773 position: relative; 774 overflow: visible; 775 padding: 1rem 0; 776 margin: 0 60px; 777 } 778 779 .carousel-nav-btn { 780 position: absolute; 781 top: 50%; 782 transform: translateY(-50%); 783 width: 50px; 784 height: 50px; 785 background: rgba(167, 139, 250, 0.3); 786 border: 2px solid rgba(167, 139, 250, 0.6); 787 border-radius: 50%; 788 display: flex; 789 align-items: center; 790 justify-content: center; 791 cursor: pointer; 792 z-index: 10; 793 transition: all 0.3s ease; 794 box-shadow: 0 4px 12px rgba(167, 139, 250, 0.3); 795 } 796 797 .carousel-nav-btn:hover { 798 background: rgba(167, 139, 250, 0.5); 799 border-color: rgba(167, 139, 250, 0.8); 800 transform: translateY(-50%) scale(1.15); 801 box-shadow: 0 6px 20px rgba(167, 139, 250, 0.5); 802 } 803 804 .carousel-nav-btn.left { 805 left: -60px; 806 } 807 808 .carousel-nav-btn.right { 809 right: -60px; 810 } 811 812 .carousel-nav-btn svg { 813 width: 24px; 814 height: 24px; 815 fill: #a78bfa; 816 } 817 818 .carousel-track { 819 display: flex; 820 gap: 1.5rem; 821 overflow-x: auto; 822 overflow-y: visible; 823 scroll-behavior: smooth; 824 scrollbar-width: thin; 825 scrollbar-color: rgba(167, 139, 250, 0.3) rgba(167, 139, 250, 0.05); 826 padding: 0.5rem; 827 scroll-snap-type: x mandatory; 828 } 829 830 .carousel-track::-webkit-scrollbar {
831 height: 8px; 832 } 833 834 .carousel-track::-webkit-scrollbar-track { 835 background: rgba(167, 139, 250, 0.05); 836 border-radius: 4px; 837 } 838 839 .carousel-track::-webkit-scrollbar-thumb { 840 background: rgba(167, 139, 250, 0.3); 841 border-radius: 4px; 842 } 843 844 .carousel-track::-webkit-scrollbar-thumb:hover { 845 background: rgba(167, 139, 250, 0.5); 846 } 847 848 .work-card { 849 min-width: 280px; 850 max-width: 280px; 851 background: rgba(0, 0, 0, 0.4); 852 border: 1px solid rgba(167, 139, 250, 0.3); 853 border-radius: 12px; 854 overflow: hidden; 855 transition: all 0.3s ease; 856 cursor: pointer; 857 text-decoration: none; 858 color: inherit; 859 display: flex; 860 flex-direction: column; 861 scroll-snap-align: start; 862 } 863 864 .work-card:hover { 865 transform: translateY(-4px); 866 border-color: rgba(167, 139, 250, 0.6); 867 box-shadow: 0 8px 30px rgba(167, 139, 250, 0.3); 868 } 869 870 .work-card-image { 871 aspect-ratio: 16 / 10; 872 background: linear-gradient(135deg, rgba(167, 139, 250, 0.15) 0%, rgba(96, 165, 250, 0.15) 100%); 873 display: flex; 874 align-items: center; 875 justify-content: center; 876 color: #808080; 877 font-size: 0.9rem; 878 overflow: hidden; 879 } 880 881 .work-card-image img { 882 width: 100%; 883 height: 100%; 884 object-fit: contain; 885 } 886 887 .work-card-content { 888 padding: 1.2rem; 889 flex: 1; 890 display: flex; 891 flex-direction: column; 892 } 893 894 .work-card-title { 895 color: #a78bfa; 896 font-size: 1rem; 897 font-weight: 600; 898 margin-bottom: 0.5rem; 899 line-height: 1.4; 900 } 901 902 .work-card-authors { 903 color: #808080; 904 font-size: 0.8rem; 905 margin-bottom: 0.5rem; 906 } 907 908 .work-card-venue { 909 color: #60a5fa; 910 font-size: 0.75rem; 911 font-weight: 600; 912 margin-top: auto; 913 } 914 915 /* Video Modal/Lightbox */ 916 .video-modal { 917 display: none; 918 position: fixed; 919 top: 0; 920 left: 0; 921 width: 100%; 922 height: 100%; 923 background: rgba(0, 0, 0, 0.95); 924 z-index: 1000; 925 align-items: center; 926 justify-content: center; 927 opacity: 0; 928 transition: opacity 0.3s ease; 929 } 930 931 .video-modal.active { 932 display: flex; 933 opacity: 1; 934 } 935 936 .video-modal-content { 937 max-width: 90vw; 938 max-height: 90vh; 939 position: relative; 940 animation: zoomIn 0.3s ease; 941 } 942 943 @keyframes zoomIn { 944 from { 945 transform: scale(0.8); 946 opacity: 0; 947 } 948 to { 949 transform: scale(1); 950 opacity: 1; 951 } 952 } 953 954 .video-modal-content img { 955 max-width: 100%; 956 max-height: 90vh; 957 border-radius: 12px; 958 box-shadow: 0 20px 60px rgba(96, 165, 250, 0.3); 959 border: 2px solid rgba(96, 165, 250, 0.3); 960 } 961 962 .video-modal-close { 963 position: absolute; 964 top: -40px; 965 right: 0; 966 background: rgba(96, 165, 250, 0.2); 967 border: 2px solid rgba(96, 165, 250, 0.4); 968 color: #60a5fa; 969 width: 36px; 970 height: 36px; 971 border-radius: 50%; 972 display: flex; 973 align-items: center; 974 justify-content: center; 975 cursor: pointer; 976 font-size: 1.5rem; 977 font-weight: 300; 978 transition: all 0.3s ease; 979 } 980 981 .video-modal-close:hover { 982 background: rgba(96, 165, 250, 0.3); 983 border-color: rgba(96, 165, 250, 0.6); 984 transform: rotate(90deg); 985 } 986 987 .video-modal-caption { 988 text-align: center; 989 color: #b0b0b0; 990 margin-top: 1rem; 991 font-size: 1rem; 992 } 993 994 footer { 995 text-align: center; 996 padding: 3rem 2rem; 997 color: #606060; 998 border-top: 1px solid rgba(96, 165, 250, 0.1); 999 } 1000 1001 @media (max-width: 768px) { 1002 h1 { 1003 font-size: 2rem; 1004 line-height: 1.2; 1005 } 1006 1007 .subtitle { 1008 font-size: 1rem; 1009 } 1010 1011 .venue { 1012 font-size: 1rem; 1013 } 1014 1015 .authors { 1016 font-size: 1rem; 1017 gap: 1rem; 1018 } 1019 1020 .affiliations { 1021 font-size: 0.85rem; 1022 gap: 1rem; 1023 } 1024 1025 section { 1026 padding: 4rem 1rem; 1027 } 1028 1029 h2 { 1030 font-size: 2rem; 1031 } 1032 1033 .video-grid.layout-2col, 1034 .video-grid.layout-asymmetric { 1035 grid-template-columns: 1fr; 1036 gap: 1rem; 1037 } 1038 1039 .video-grid.layout-asymmetric .video-item:first-child { 1040 grid-column: 1; 1041 } 1042 1043 .video-grid.layout-asymmetric .video-item:first-child .video-placeholder { 1044 aspect-ratio: 16 / 9; 1045 } 1046 1047 .video-caption { 1048 font-size: 0.95rem; 1049 padding: 0.8rem; 1050 } 1051 1052 .side-nav { 1053 display: none; 1054 } 1055 1056 .work-card { 1057 min-width: 240px; 1058 max-width: 240px; 1059 } 1060 1061 .icon-btn-circle { 1062 width: 50px; 1063 height: 50px; 1064 } 1065 1066 .icon-btn-circle svg { 1067 width: 24px; 1068 height: 24px; 1069 } 1070 1071 .carousel-nav-btn { 1072 display: none; 1073 } 1074 1075 .carousel-container { 1076 margin: 0; 1077 } 1078 1079 .dataset-section { 1080 padding: 1.5rem; 1081 } 1082 1083 .video-modal-content { 1084 max-width: 95vw; 1085 } 1086 1087 .video-modal-close { 1088 top: -50px; 1089 width: 40px; 1090 height: 40px; 1091 } 1092 1093 .citation-section { 1094 margin-top: 1.5rem; 1095 padding: 0 1rem; 1096 } 1097 1098 .citation-box { 1099 padding: 1rem; 1100 } 1101 1102 .citation-box pre { 1103 font-size: 0.75rem; 1104 } 1105 1106 .copy-bibtex-btn { 1107 position: static; 1108 width: 100%; 1109 margin-top: 1rem; 1110 justify-content: center; 1111 } 1112 } 1113 </style> 1114</head> 1115<body>
1116 <canvas id="particles-canvas"></canvas> 1117 1118 <div class="content"> 1119 <header id="sticky-header"> 1120 <nav> 1121 <a href="#abstract">Abstract</a> 1122 <a href="#architecture">Architecture</a> 1123 <a href="#results">Results</a> 1124 <a href="#related">Related Work</a> 1125 </nav> 1126 </header> 1127 1128 <!-- Side Navigation --> 1129 <div class="side-nav" id="side-nav"> 1130 <div class="side-nav-item" data-label="Sketchy" onclick="scrollToDataset('dataset1')"></div> 1131 <div class="side-nav-item" data-label="Bridge" onclick="scrollToDataset('dataset2')"></div> 1132 <div class="side-nav-item" data-label="Mario" onclick="scrollToDataset('dataset3')"></div> 1133 <div class="side-nav-item" data-label="LanguageTable" onclick="scrollToDataset('dataset4')"></div> 1134 <div class="side-nav-item" data-label="BAIR" onclick="scrollToDataset('dataset5')"></div> 1135 <div class="side-nav-item" data-label="PandaPush" onclick="scrollToDataset('dataset6')"></div> 1136 <div class="side-nav-item" data-label="OGBench" onclick="scrollToDataset('dataset7')"></div> 1137 </div> 1138 1139 <div class="hero"> 1140 <h1>Latent Particle World Models</h1> 1141 <p class="subtitle">Self-supervised Object-centric Stochastic Dynamics Modeling</p> 1142 <p class="venue">International Conference on Learning Representations (ICLR) 2026 Oral (Top 1.18%)</p> 1143 1144 <div class="authors"> 1145 <a href="https://taldatech.github.io" class="author">Tal Daniel<sup>1</sup></a> 1146 <a href="https://carl-qi.github.io" class="author">Carl Qi<sup>2</sup></a> 1147 <a href="https://danhrmti.github.io" class="author">Dan Haramati<sup>3</sup></a> 1148 <a href="https://lambda.ai/research" class="author">Amir Zadeh<sup>5</sup></a> 1149 <a href="https://lambda.ai/research" class="author">Chuan Li<sup>5</sup></a> 1150 <a href="https://avivt.github.io/avivt" class="author">Aviv Tamar<sup>4</sup></a> 1151 <a href="https://www.cs.cmu.edu/~dpathak/" class="author">Deepak Pathak<sup>1</sup></a> 1152 <a href="https://r-pad.github.io/" class="author">David Held<sup>1</sup></a> 1153 </div> 1154 1155 <div class="affiliations"> 1156 <div class="affiliation"><sup>1</sup>Carnegie Mellon University</div> 1157 <div class="affiliation"><sup>2</sup>UT Austin</div> 1158 <div class="affiliation"><sup>3</sup>Brown University</div> 1159 <div class="affiliation"><sup>4</sup>Technion</div> 1160 <div class="affiliation"><sup>5</sup>Lambda</div> 1161 </div> 1162 1163 <!-- BibTeX Citation Section --> 1164 <div class="citation-section"> 1165 <button class="citation-toggle" onclick="toggleCitation()" id="citationToggle"> 1166 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 1167 <path d="M7 10l5 5 5-5z"/> 1168 </svg> 1169 Cite this work 1170 </button> 1171 <div class="citation-content" id="citationContent"> 1172 <div class="citation-box"> 1173 <button class="copy-bibtex-btn" onclick="copyBibtex()" id="copyBtn"> 1174 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 1175 <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> 1176 <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path> 1177 </svg> 1178 Copy 1179 </button> 1180 <pre id="bibtexCode">@inproceedings{ 1181daniel2026latent, 1182title={Latent Particle World Models: Self-supervised Object-centric Stochastic Dynamics Modeling}, 1183author={Tal Daniel and Carl Qi and Dan Haramati and Amir Zadeh and Chuan Li and Aviv Tamar and Deepak Pathak and David Held}, 1184booktitle={The Fourteenth International Conference on Learning Representations}, 1185year={2026}, 1186url={https://openreview.net/forum?id=lTaPtGiUUc} 1187}</pre> 1188 </div> 1189 </div> 1190 </div> 1191 1192 <div class="links"> 1193 <a href="https://openreview.net/forum?id=lTaPtGiUUc" class="icon-btn"> 1194 <div class="icon-btn-circle"> 1195 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 1196 <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"/> 1197 <path d="M14 2v6h6"/> 1198 <path d="M16 13H8"/> 1199 <path d="M16 17H8"/> 1200 <path d="M10 9H8"/> 1201 </svg> 1202 </div>
1203 <span class="icon-btn-label">OpenReview</span> 1204 </a> 1205 1206 <a href="https://arxiv.org/abs/2603.04553" class="icon-btn arxiv"> 1207 <div class="icon-btn-circle"> 1208 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 1209 <path d="M9 2v2H7c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-2V2H9zm0 4h6v2H9V6zm0 4h6v2H9v-2zm0 4h4v2H9v-2z"/> 1210 <path d="M7 22h10v2H7z"/> 1211 </svg> 1212 </div> 1213 <span class="icon-btn-label">arXiv</span> 1214 </a> 1215 1216 <a href="https://github.com/taldatech/lpwm" class="icon-btn github"> 1217 <div class="icon-btn-circle"> 1218 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 1219 <path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z"/> 1220 </svg> 1221 </div> 1222 <span class="icon-btn-label">Code</span> 1223 </a> 1224 1225 <a href="https://youtu.be/aZeaCyXJjYI" class="icon-btn video"> 1226 <div class="icon-btn-circle"> 1227 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 1228 <path d="M8 5v14l11-7z"/> 1229 </svg> 1230 </div> 1231 <span class="icon-btn-label">Video</span> 1232 </a> 1233 </div> 1234 </div> 1235 1236 <section id="abstract"> 1237 <h2>Abstract</h2> 1238 <p class="abstract-text"> 1239 We introduce Latent Particle World Model (LPWM), a self-supervised object-centric world model scaled to real-world multi-object datasets and applicable in decision-making. 1240 LPWM autonomously discovers keypoints, bounding boxes, and object masks directly from video data, 1241 enabling it to learn rich scene decompositions without supervision. 1242 Our architecture is trained end-to-end purely from videos and supports 1243 flexible conditioning on actions, language, and image goals. LPWM models stochastic particle dynamics via 1244 a novel latent action module and achieves state-of-the-art results on diverse real-world and synthetic datasets. 1245 Beyond stochastic video modeling, LPWM is readily applicable to decision-making, 1246 including goal-conditioned imitation learning, as we demonstrate in the paper. 1247 </p> 1248 </section> 1249 1250 <section id="architecture"> 1251 <h2>Architecture</h2> 1252 <div class="architecture-content"> 1253 <div class="placeholder"> 1254 <h3>Latent Particle World Model (LPWM)</h3> 1255 <img src="./assets/arch_main_ltr.png"></img> 1256 <p>Left: Input frames are encoded into particle sets by the `Encoder` and decoded back to images by the `Decoder`. 1257 The `Context` module then processes the particles to sample latent actions, which are combined with the particles in the `Dynamics` module to predict 1258 next-step particle states. 1259 Right: The `Context` module models the per-particle latent action distribution. 1260 During training, we use the latent inverse dynamics head, while at inference, the latent policy is employed for sampling.</p> 1261 </div> 1262 </div> 1263 </section> 1264 1265 <section id="results"> 1266 <h2>Results</h2> 1267 1268 <div class="dataset-section" id="dataset1"> 1269 <div class="dataset-header"> 1270 <div class="dataset-title-group"> 1271 <h3 class="dataset-title">Sketchy</h3> 1272 <p class="dataset-description">Real-world robotic manipulation</p> 1273 </div> 1274 </div> 1275 1276 <div class="video-grid layout-asymmetric" id="dataset1-grid"> 1277 <div class="video-item"> 1278 <div class="video-placeholder"><img src="./assets/sketchy_particlegrid.gif"></img></div> 1279 <div class="video-caption">Particle grid: self-supervised object-centric decomposition</div> 1280 </div> 1281 <div class="video-item"> 1282 <div class="video-placeholder"><img src="./assets/sketchy_0_comp_la.gif"></div> 1283 <div class="video-caption">Latent action-conditioned video prediction comparison</div> 1284 </div> 1285 <div class="video-item"> 1286 <div class="video-placeholder"><img src="./assets/sketchy_2469_lpwm_gen_comp.gif"></div> 1287 <div class="video-caption">Stochastic video generation</div> 1288 </div> 1289 </div> 1290 1291 <div class="expandable-videos" id="dataset1-expand"> 1292 <div class="video-grid layout-2col"> 1293 <div class="video-item"> 1294 <div class="video-placeholder"><img src="./assets/sketchy_65_action_comp.gif"></div> 1295 <div class="video-caption">Action-conditioned video prediction comparison</div> 1296 </div> 1297 <div class="video-item"> 1298 <div class="video-placeholder"><img src="./assets/sketchy_2034_lpwm_gen_comp.gif"></div> 1299 <div class="video-caption">Stochastic video generation</div> 1300 </div> 1301 </div> 1302 </div> 1303 1304 <button class="expand-btn" onclick="toggleExpand('dataset1-expand', this)">
1305 Show More <span class="arrow">â¼</span> 1306 </button> 1307 1308 <a href="https://sites.google.com/view/lpwm/sketchy" class="dataset-link"> 1309 View All Videos 1310 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 1311 <path d="M5 12h14M12 5l7 7-7 7"/> 1312 </svg> 1313 </a> 1314 </div> 1315 1316 <div class="dataset-section" id="dataset2"> 1317 <div class="dataset-header"> 1318 <div class="dataset-title-group"> 1319 <h3 class="dataset-title">Bridge</h3> 1320 <p class="dataset-description">Language-conditioned real-world robotic manipulation</p> 1321 </div> 1322 </div> 1323 1324 <div class="video-grid layout-asymmetric" id="dataset2-grid"> 1325 <div class="video-item"> 1326 <div class="video-placeholder"><img src="./assets/bridge_1871_particlegrid.gif"></div> 1327 <div class="video-caption">Particle grid: self-supervised object-centric decomposition</div> 1328 </div> 1329 <div class="video-item"> 1330 <div class="video-placeholder"><img src="./assets/bridge_313_lang_comp.gif"></div> 1331 <div class="video-caption">Language-conditioned video generation comparison with patch-based VAE (DVAE)</div> 1332 </div> 1333 <div class="video-item"> 1334 <div class="video-placeholder"><img src="./assets/bridge_15_lpwm_gen_comp.gif"></div> 1335 <div class="video-caption">Stochastic language-conditioned video generation</div> 1336 </div> 1337 </div> 1338 1339 <div class="expandable-videos" id="dataset2-expand"> 1340 <div class="video-grid layout-2col"> 1341 <div class="video-item"> 1342 <div class="video-placeholder"><img src="./assets/bridge_1871_lang_comp.gif"></div> 1343 <div class="video-caption">Language-conditioned video generation comparison with patch-based VAE (DVAE)</div> 1344 </div> 1345 <div class="video-item"> 1346 <div class="video-placeholder"><img src="./assets/bridge_2069_lpwm_gen_comp.gif"></div> 1347 <div class="video-caption">Stochastic language-conditioned video generation</div> 1348 </div> 1349 </div> 1350 </div> 1351 1352 <button class="expand-btn" onclick="toggleExpand('dataset2-expand', this)"> 1353 Show More <span class="arrow">â¼</span> 1354 </button> 1355 1356 <a href="https://sites.google.com/view/lpwm/bridge" class="dataset-link"> 1357 View All Videos 1358 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 1359 <path d="M5 12h14M12 5l7 7-7 7"/> 1360 </svg> 1361 </a> 1362 </div> 1363 1364 <div class="dataset-section" id="dataset3"> 1365 <div class="dataset-header"> 1366 <div class="dataset-title-group"> 1367 <h3 class="dataset-title">Mario</h3> 1368 <p class="dataset-description">Offline expert gameplay video of Mario</p> 1369 </div> 1370 </div> 1371 1372 <div class="video-grid layout-asymmetric" id="dataset3-grid"> 1373 <div class="video-item"> 1374 <div class="video-placeholder"><img src="./assets/mario_35_particlegrid.gif"></div> 1375 <div class="video-caption">Particle grid: self-supervised object-centric decomposition</div> 1376 </div> 1377 <div class="video-item"> 1378 <div class="video-placeholder"><img src="./assets/mario_71_latentaction_comp.gif"></div> 1379 <div class="video-caption">Latent action-conditioned video prediction comparison</div> 1380 </div> 1381 <div class="video-item"> 1382 <div class="video-placeholder"><img src="./assets/mario_86_lpwm_gen_comp.gif"></div> 1383 <div class="video-caption">Stochastic video generation</div> 1384 </div> 1385 </div> 1386 1387 <div class="expandable-videos" id="dataset3-expand"> 1388 <div class="video-grid layout-2col"> 1389 <div class="video-item"> 1390 <div class="video-placeholder"><img src="./assets/mario_89_latentaction_comp.gif"></div> 1391 <div class="video-caption">Latent action-conditioned video prediction comparison</div> 1392 </div> 1393 <div class="video-item"> 1394 <div class="video-placeholder"><img src="./assets/mario_35_lpwm_gen_comp.gif"></div> 1395 <div class="video-caption">Stochastic video generation</div> 1396 </div> 1397 </div> 1398 </div> 1399 1400 <button class="expand-btn" onclick="toggleExpand('dataset3-expand', this)">
1401 Show More <span class="arrow">â¼</span> 1402 </button> 1403 1404 <a href="https://sites.google.com/view/lpwm/mario" class="dataset-link"> 1405 View All Videos 1406 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 1407 <path d="M5 12h14M12 5l7 7-7 7"/> 1408 </svg> 1409 </a> 1410 </div> 1411 1412 <div class="dataset-section" id="dataset4"> 1413 <div class="dataset-header"> 1414 <div class="dataset-title-group"> 1415 <h3 class="dataset-title">LanguageTable</h3> 1416 <p class="dataset-description">Language-conditioned real-world robotic manipulation</p> 1417 </div> 1418 </div> 1419 1420 <div class="video-grid layout-asymmetric" id="dataset4-grid"> 1421 <div class="video-item"> 1422 <div class="video-placeholder"><img src="./assets/langtable_476_particlegrid.gif"></div> 1423 <div class="video-caption">Particle grid: self-supervised object-centric decomposition</div> 1424 </div> 1425 <div class="video-item"> 1426 <div class="video-placeholder"><img src="./assets/langtable_12_lang_comp.gif"></div> 1427 <div class="video-caption">Language-conditioned video generation comparison with patch-based VAE (DVAE)</div> 1428 </div> 1429 <div class="video-item"> 1430 <div class="video-placeholder"><img src="./assets/langtable_476_lpwm_gen_comp.gif"></div> 1431 <div class="video-caption">Stochastic language-conditioned video generation</div> 1432 </div> 1433 </div> 1434 1435 <div class="expandable-videos" id="dataset4-expand"> 1436 <div class="video-grid layout-2col"> 1437 <div class="video-item"> 1438 <div class="video-placeholder"><img src="./assets/langtable_6911_lang_comp.gif"></div> 1439 <div class="video-caption">Language-conditioned video generation comparison with patch-based VAE (DVAE)</div> 1440 </div> 1441 <div class="video-item"> 1442 <div class="video-placeholder"><img src="./assets/langtable_218_lpwm_gen_comp.gif"></div> 1443 <div class="video-caption">Stochastic language-conditioned video generation</div> 1444 </div> 1445 </div> 1446 </div> 1447 1448 <button class="expand-btn" onclick="toggleExpand('dataset4-expand', this)"> 1449 Show More <span class="arrow">â¼</span> 1450 </button> 1451 1452 <a href="https://sites.google.com/view/lpwm/languagetable" class="dataset-link"> 1453 View All Videos 1454 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 1455 <path d="M5 12h14M12 5l7 7-7 7"/> 1456 </svg> 1457 </a> 1458 </div> 1459 1460 <div class="dataset-section" id="dataset5"> 1461 <div class="dataset-header"> 1462 <div class="dataset-title-group"> 1463 <h3 class="dataset-title">BAIR</h3> 1464 <p class="dataset-description">Real-world robotic manipulation</p> 1465 </div> 1466 </div> 1467 1468 <div class="video-grid layout-asymmetric" id="dataset5-grid"> 1469 <div class="video-item"> 1470 <div class="video-placeholder"><img src="./assets/bair_482_particlegrid.gif"></div> 1471 <div class="video-caption">Particle grid: self-supervised object-centric decomposition</div> 1472 </div> 1473 <div class="video-item"> 1474 <div class="video-placeholder"><img src="./assets/bair_110_latentaction_comp.gif"></div> 1475 <div class="video-caption">Latent action-conditioned video prediction comparison</div> 1476 </div> 1477 <div class="video-item"> 1478 <div class="video-placeholder"><img src="./assets/bair_570_lpwm_gen_comp.gif"></div> 1479 <div class="video-caption">Stochastic video generation</div> 1480 </div> 1481 </div> 1482 1483 <div class="expandable-videos" id="dataset5-expand"> 1484 <div class="video-grid layout-2col"> 1485 <div class="video-item"> 1486 <div class="video-placeholder"><img src="./assets/bair_966_latentaction_comp.gif"></div> 1487 <div class="video-caption">Latent action-conditioned video prediction comparison</div> 1488 </div> 1489 <div class="video-item"> 1490 <div class="video-placeholder"><img src="./assets/bair_719_lpwm_gen_comp.gif"></div> 1491 <div class="video-caption">Stochastic video generation</div> 1492 </div> 1493 </div> 1494 </div> 1495 1496 <button class="expand-btn" onclick="toggleExpand('dataset5-expand', this)">
1497 Show More <span class="arrow">â¼</span> 1498 </button> 1499 1500 <a href="https://sites.google.com/view/lpwm/bair" class="dataset-link"> 1501 View All Videos 1502 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 1503 <path d="M5 12h14M12 5l7 7-7 7"/> 1504 </svg> 1505 </a> 1506 </div> 1507 1508 <div class="dataset-section" id="dataset6"> 1509 <div class="dataset-header"> 1510 <div class="dataset-title-group"> 1511 <h3 class="dataset-title">PandaPush - Imitation Learning</h3> 1512 <p class="dataset-description">Multi-view simulated image goal-conditioned manipulation</p> 1513 </div> 1514 </div> 1515 1516 <div class="video-grid layout-asymmetric" id="dataset6-grid"> 1517 <div class="video-item"> 1518 <div class="video-placeholder"><img src="./assets/panda_49_imagiexe_comp.gif"></div> 1519 <div class="video-caption">Close-loop imagination-execution (imagined latent actions are mapped to GT actions)</div> 1520 </div> 1521 <div class="video-item"> 1522 <div class="video-placeholder"><img src="./assets/panda_65_goalcondmv_comp.gif"></div> 1523 <div class="video-caption">Image goal-conditioned stochastic generation</div> 1524 </div> 1525 <div class="video-item"> 1526 <div class="video-placeholder"><img src="./assets/panda_86_goalcondmv_comp.gif"></div> 1527 <div class="video-caption">Image goal-conditioned stochastic generation</div> 1528 </div> 1529 </div> 1530 1531 <div class="expandable-videos" id="dataset6-expand"> 1532 <div class="video-grid layout-2col"> 1533 <div class="video-item"> 1534 <div class="video-placeholder"><img src="./assets/panda_40_goalcondmv_comp.gif"></div> 1535 <div class="video-caption">Image goal-conditioned stochastic generation</div> 1536 </div> 1537 <div class="video-item"> 1538 <div class="video-placeholder"><img src="./assets/panda_43_goalcondmv_comp.gif"></div> 1539 <div class="video-caption">Image goal-conditioned stochastic generation</div> 1540 </div> 1541 </div> 1542 </div> 1543 1544 <button class="expand-btn" onclick="toggleExpand('dataset6-expand', this)"> 1545 Show More <span class="arrow">â¼</span> 1546 </button> 1547 1548 <a href="https://sites.google.com/view/lpwm/pandapush" class="dataset-link"> 1549 View All Videos 1550 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 1551 <path d="M5 12h14M12 5l7 7-7 7"/> 1552 </svg> 1553 </a> 1554 </div> 1555 1556 <div class="dataset-section" id="dataset7"> 1557 <div class="dataset-header"> 1558 <div class="dataset-title-group"> 1559 <h3 class="dataset-title">OGBench - Imitation Learning</h3> 1560 <p class="dataset-description">Simulated image goal-conditioned manipulation</p> 1561 </div> 1562 </div> 1563 1564 <div class="video-grid layout-asymmetric" id="dataset7-grid"> 1565 <div class="video-item"> 1566 <div class="video-placeholder"><img src="./assets/ogbench_44_imagiexe_comp.gif"></div> 1567 <div class="video-caption">Close-loop imagination-execution (imagined latent actions are mapped to GT actions)</div> 1568 </div> 1569 <div class="video-item"> 1570 <div class="video-placeholder"><img src="./assets/ogbench_78_imgcondgen_comp.gif"></div> 1571 <div class="video-caption">
1571Image goal-conditioned stochastic generation</div> 1572 </div> 1573 <div class="video-item"> 1574 <div class="video-placeholder"><img src="./assets/ogbench_23_imgcondgen_comp.gif"></div> 1575 <div class="video-caption">Image goal-conditioned stochastic generation</div> 1576 </div> 1577 </div> 1578 1579 <div class="expandable-videos" id="dataset7-expand"> 1580 <div class="video-grid layout-2col"> 1581 <div class="video-item"> 1582 <div class="video-placeholder"><img src="./assets/ogbench_24_imgcondgen_comp.gif"></div> 1583 <div class="video-caption">Image goal-conditioned stochastic generation</div> 1584 </div> 1585 <div class="video-item"> 1586 <div class="video-placeholder"><img src="./assets/ogbench_44_imgcondgen_comp.gif"></div> 1587 <div class="video-caption">Image goal-conditioned stochastic generation</div> 1588 </div> 1589 </div> 1590 </div> 1591 1592 <button class="expand-btn" onclick="toggleExpand('dataset7-expand', this)"> 1593 Show More <span class="arrow">â¼</span> 1594 </button> 1595 1596 <a href="https://sites.google.com/view/lpwm/ogbench-scene" class="dataset-link"> 1597 View All Videos 1598 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 1599 <path d="M5 12h14M12 5l7 7-7 7"/> 1600 </svg> 1601 </a> 1602 </div> 1603 1604 1605 <!-- Related Work Section --> 1606 <div class="related-work-section" id="related"> 1607 <h2 class="related-work-title">Enter the Particleverse</h2> 1608 <p class="related-work-subtitle">Explore other works using deep latent particles (DLP) representation</p> 1609 1610 <div class="carousel-container"> 1611 <button class="carousel-nav-btn left" onclick="scrollCarousel('left')"> 1612 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 1613 <path d="M15 18l-6-6 6-6"/> 1614 </svg> 1615 </button> 1616 <button class="carousel-nav-btn right" onclick="scrollCarousel('right')"> 1617 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 1618 <path d="M9 18l6-6-6-6"/> 1619 </svg> 1620 </button> 1621 <div class="carousel-track" id="carouselTrack"> 1622 <a href="https://taldatech.github.io/deep-latent-particles-web/" class="work-card"> 1623 <div class="work-card-image"><img src="https://raw.githubusercontent.com/taldatech/deep-latent-particles-web/main/assets/clevrer_manip_1.gif"></div> 1624 <div class="work-card-content"> 1625 <div class="work-card-title">Unsupervised Image Representation Learning with Deep Latent Particles</div> 1626 <div class="work-card-authors">Daniel et al.</div> 1627 <div class="work-card-venue">ICML 2022</div> 1628 </div> 1629 </a> 1630 1631 <a href="https://taldatech.github.io/ddlp-web/" class="work-card"> 1632 <div class="work-card-image"><img src="https://taldatech.github.io/ddlp-web/assets/images/obj3d3.gif"></div> 1633 <div class="work-card-content"> 1634 <div class="work-card-title">DDLP: Unsupervised Object-Centric Video Prediction with Deep Dynamic Latent Particles</div> 1635 <div class="work-card-authors">Daniel et al.</div> 1636 <div class="work-card-venue">TMLR 2024</div> 1637 </div> 1638 </a> 1639 1640 <a href="https://sites.google.com/view/entity-centric-rl" class="work-card"> 1641 <div class="work-card-image"><img src="https://danhrmti.github.io/files/publications/ecrl_clip.gif"></div> 1642 <div class="work-card-content"> 1643 <div class="work-card-title">Entity-Centric Reinforcement Learning for Object Manipulation from Pixels</div> 1644 <div class="work-card-authors">Haramati et al.</div> 1645 <div class="work-card-venue">ICLR 2024</div> 1646 </div> 1647 </a> 1648 1649 <a href="https://sites.google.com/view/ec-diffuser/" class="work-card"> 1650 <div class="work-card-image"><img src="https://danhrmti.github.io/files/publications/ecdiffuser_clip.gif"></div> 1651 <div class="work-card-content"> 1652 <div class="work-card-title">EC-Diffuser: Multi-object Manipulation via Entity-centric Behavior Generation</div> 1653 <div class="work-card-authors">Qi et al.</div> 1654 <div class="work-card-venue">ICLR 2025</div> 1655 </div> 1656 </a> 1657 1658 <a href="https://sites.google.com/view/hecrl" class="work-card"> 1659 <div class="work-card-image"><img src="https://danhrmti.github.io/files/publications/hecrl_clip.gif"></div> 1660 <div class="work-card-content"> 1661 <div class="work-card-title">Hierarchical Entity-centric Reinforcement Learning with Factored Subgoal Diffusion</div> 1662 <div class="work-card-authors">Haramati et al.</div> 1663 <div class="work-card-venue">ICLR 2026</div> 1664 </div> 1665 </a> 1666 1667 <a href="https://eubooks3003.github.io/3d-dlp/" class="work-card"> 1668 <div class="work-card-image"><img src="https://github.com/taldatech/taldatech.github.io/raw/main/img/3DDLP_teaser.gif"></div> 1669 <div class="work-card-content"> 1670 <div class="work-card-title">3D-DLP: Self-Supervised 3D Object-Centric Scene Representation Learning</div> 1671 <div class="work-card-authors">Zhang et al.</div> 1672 <div class="work-card-venue">ICML 2026</div> 1673 </div> 1674 </a> 1675 1676 <!--- 1677 <a href="#" class="work-card"> 1678 <div class="work-card-image">Thumbnail</div> 1679 <div class="work-card-content"> 1680 <div class="work-card-title">Contrastive Learning of Structured World Models</div> 1681 <div class="work-card-authors">Kipf et al.</div> 1682 <div class="work-card-venue">ICLR 2020</div> 1683 </div> 1684 </a> 1685 ---!> 1686 </div> 1687 </div> 1688 </div> 1689 1690 </section> 1691 1692 <footer> 1693 <p>© 2026 Tal Daniel</p> 1694 </footer> 1695 </div> 1696 1697 <!-- Video Modal/Lightbox --> 1698 <div class="video-modal" id="videoModal"> 1699 <div class="video-modal-content"> 1700 <div class="video-modal-close" onclick="closeVideoModal()">Ã</div> 1701 <img id="modalImage" src="" alt=""> 1702 <div class="video-modal-caption" id="modalCaption"></div> 1703 </div> 1704 </div> 1705 1706
1706<script> 1707 const canvas = document.getElementById('particles-canvas'); 1708 const ctx = canvas.getContext('2d'); 1709 1710 canvas.width = window.innerWidth; 1711 canvas.height = window.innerHeight; 1712 1713 const particles = []; 1714 const particleCount = 100; 1715 const mouse = { x: canvas.width / 2, y: canvas.height / 2, radius: 180 }; 1716 let time = 0; 1717 1718 function getColor(particle, mouseDistance) { 1719 const normalizedDist = Math.min(mouseDistance / 300, 1); 1720 1721 if (normalizedDist < 0.4) { 1722 const t = normalizedDist / 0.4; 1723 const r = Math.floor(236 - (236 - 167) * t); 1724 const g = Math.floor(72 + (139 - 72) * t); 1725 const b = Math.floor(153 + (250 - 153) * t); 1726 return `rgba(${r}, ${g}, ${b}, 0.7)`; 1727 } else { 1728 const t = (normalizedDist - 0.4) / 0.6; 1729 const r = Math.floor(167 - (167 - 96) * t); 1730 const g = Math.floor(139 + (165 - 139) * t); 1731 const b = 250; 1732 return `rgba(${r}, ${g}, ${b}, 0.6)`; 1733 } 1734 } 1735 1736 class Particle { 1737 constructor() { 1738 this.x = Math.random() * canvas.width; 1739 this.y = Math.random() * canvas.height; 1740 this.baseX = this.x; 1741 this.baseY = this.y; 1742 this.vx = 0; 1743 this.vy = 0; 1744 this.radius = Math.random() * 2.5 + 1; 1745 this.angle = Math.random() * Math.PI * 2; 1746 this.angleVel = (Math.random() - 0.5) * 0.02; 1747 this.orbitRadius = Math.random() * 40 + 20; 1748 } 1749 1750 update() { 1751 this.angle += this.angleVel; 1752 const targetX = this.baseX + Math.cos(this.angle) * this.orbitRadius; 1753 const targetY = this.baseY + Math.sin(this.angle) * this.orbitRadius; 1754 1755 if (mouse.x != null && mouse.y != null) { 1756 const dx = mouse.x - this.x; 1757 const dy = mouse.y - this.y; 1758 const distance = Math.sqrt(dx * dx + dy * dy); 1759 1760 if (distance < mouse.radius) { 1761 const force = (1 - distance / mouse.radius) * 0.5; 1762 this.vx += (dx / distance) * force; 1763 this.vy += (dy / distance) * force; 1764 } 1765 } 1766 1767 this.vx += (targetX - this.x) * 0.01; 1768 this.vy += (targetY - this.y) * 0.01; 1769 1770 this.x += this.vx; 1771 this.y += this.vy; 1772 1773 this.vx *= 0.92; 1774 this.vy *= 0.92; 1775 1776 this.baseX += Math.sin(time * 0.001 + this.angle) * 0.1; 1777 this.baseY += Math.cos(time * 0.001 + this.angle) * 0.1; 1778 1779 if (this.baseX < -50) this.baseX = canvas.width + 50; 1780 if (this.baseX > canvas.width + 50) this.baseX = -50; 1781 if (this.baseY < -50) this.baseY = canvas.height + 50; 1782 if (this.baseY > canvas.height + 50) this.baseY = -50; 1783 } 1784 1785 draw() { 1786 const dx = this.x - mouse.x; 1787 const dy = this.y - mouse.y; 1788 const distance = Math.sqrt(dx * dx + dy * dy); 1789 1790 ctx.beginPath(); 1791 ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); 1792 ctx.fillStyle = getColor(this, distance); 1793 ctx.fill(); 1794 1795 if (distance < mouse.radius) { 1796 const glowStrength = 1 - (distance / mouse.radius); 1797 ctx.shadowBlur = 10 * glowStrength; 1798 ctx.shadowColor = getColor(this, distance); 1799 ctx.fill(); 1800 ctx.shadowBlur = 0; 1801 } 1802 } 1803 } 1804 1805 for (let i = 0; i < particleCount; i++) { 1806 particles.push(new Particle()); 1807 } 1808 1809 function connectParticles() { 1810 for (let i = 0; i < particles.length; i++) { 1811 for (let j = i + 1; j < particles.length; j++) { 1812 const dx = particles[i].x - particles[j].x; 1813 const dy = particles[i].y - particles[j].y; 1814 const distance = Math.sqrt(dx * dx + dy * dy); 1815 1816 if (distance < 120) { 1817 const mdx1 = particles[i].x - mouse.x; 1818 const mdy1 = particles[i].y - mouse.y; 1819 const mdist1 = Math.sqrt(mdx1 * mdx1 + mdy1 * mdy1); 1820 1821 const mdx2 = particles[j].x - mouse.x; 1822 const mdy2 = particles[j].y - mouse.y; 1823 const mdist2 = Math.sqrt(mdx2 * mdx2 + mdy2 * mdy2); 1824 1825 const avgMouseDist = (mdist1 + mdist2) / 2; 1826 const normalizedDist = Math.min(avgMouseDist / 300, 1); 1827 1828 let r, g, b; 1829 if (normalizedDist < 0.4) { 1830 const t = normalizedDist / 0.4; 1831 r = Math.floor(236 - (236 - 167) * t); 1832 g = Math.floor(72 + (139 - 72) * t); 1833 b = Math.floor(153 + (250 - 153) * t); 1834 } else { 1835 const t = (normalizedDist - 0.4) / 0.6;
1836 r = Math.floor(167 - (167 - 96) * t); 1837 g = Math.floor(139 + (165 - 139) * t); 1838 b = 250; 1839 } 1840 1841 ctx.beginPath(); 1842 ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${0.2 * (1 - distance / 120)})`; 1843 ctx.lineWidth = 1; 1844 ctx.moveTo(particles[i].x, particles[i].y); 1845 ctx.lineTo(particles[j].x, particles[j].y); 1846 ctx.stroke(); 1847 } 1848 } 1849 } 1850 } 1851 1852 function animate() { 1853 ctx.clearRect(0, 0, canvas.width, canvas.height); 1854 time++; 1855 1856 particles.forEach(particle => { 1857 particle.update(); 1858 particle.draw(); 1859 }); 1860 1861 connectParticles(); 1862 1863 requestAnimationFrame(animate); 1864 } 1865 1866 animate(); 1867 1868 window.addEventListener('mousemove', (e) => { 1869 mouse.x = e.x; 1870 mouse.y = e.y; 1871 }); 1872 1873 window.addEventListener('resize', () => { 1874 canvas.width = window.innerWidth; 1875 canvas.height = window.innerHeight; 1876 }); 1877 1878 // Sticky header on scroll 1879 window.addEventListener('scroll', () => { 1880 const header = document.getElementById('sticky-header'); 1881 const sideNav = document.getElementById('side-nav'); 1882 1883 if (window.scrollY > window.innerHeight * 0.8) { 1884 header.classList.add('visible'); 1885 sideNav.classList.add('visible'); 1886 } else { 1887 header.classList.remove('visible'); 1888 sideNav.classList.remove('visible'); 1889 } 1890 1891 // Update active side nav item 1892 updateActiveSideNav(); 1893 }); 1894 1895 // Smooth scrolling 1896 document.querySelectorAll('a[href^="#"]').forEach(anchor => { 1897 anchor.addEventListener('click', function (e) { 1898 e.preventDefault(); 1899 const target = document.querySelector(this.getAttribute('href')); 1900 if (target) { 1901 target.scrollIntoView({ behavior: 'smooth', block: 'start' }); 1902 } 1903 }); 1904 }); 1905 1906 // Toggle expand/collapse for video sections 1907 function toggleExpand(sectionId, button) { 1908 const section = document.getElementById(sectionId); 1909 section.classList.toggle('expanded'); 1910 button.classList.toggle('expanded'); 1911 1912 if (button.classList.contains('expanded')) { 1913 button.innerHTML = 'Show Less <span class="arrow">â¼</span>'; 1914 } else { 1915 button.innerHTML = 'Show More <span class="arrow">â¼</span>'; 1916 } 1917 } 1918 1919 // Scroll to dataset 1920 function scrollToDataset(datasetId) { 1921 const element = document.getElementById(datasetId); 1922 if (element) { 1923 element.scrollIntoView({ behavior: 'smooth', block: 'start' }); 1924 } 1925 } 1926 1927 // Update active side nav item based on scroll position 1928 function updateActiveSideNav() { 1929 const datasets = ['dataset1', 'dataset2', 'dataset3', 'dataset4', 'dataset5', 'dataset6', 'dataset7']; 1930 const navItems = document.querySelectorAll('.side-nav-item'); 1931 1932 let activeIndex = 0; 1933 datasets.forEach((id, index) => { 1934 const element = document.getElementById(id); 1935 if (element) { 1936 const rect = element.getBoundingClientRect(); 1937 if (rect.top <= window.innerHeight / 2) { 1938 activeIndex = index; 1939 } 1940 } 1941 }); 1942 1943 navItems.forEach((item, index) => { 1944 if (index === activeIndex) { 1945 item.classList.add('active'); 1946 } else { 1947 item.classList.remove('active'); 1948 } 1949 }); 1950 } 1951 1952 // Video Modal Functions 1953 function openVideoModal(imageSrc, caption) { 1954 const modal = document.getElementById('videoModal'); 1955 const modalImage = document.getElementById('modalImage'); 1956 const modalCaption = document.getElementById('modalCaption'); 1957 1958 modalImage.src = imageSrc; 1959 modalCaption.textContent = caption; 1960 modal.classList.add('active'); 1961 1962 // Prevent body scroll when modal is open 1963 document.body.style.overflow = 'hidden'; 1964 } 1965 1966 function closeVideoModal() { 1967 const modal = document.getElementById('videoModal'); 1968 modal.classList.remove('active'); 1969 1970 // Restore body scroll 1971 document.body.style.overflow = 'auto'; 1972 } 1973 1974 // Close modal when clicking outside the image 1975 document.getElementById('videoModal').addEventListener('click', function(e) { 1976 if (e.target === this) { 1977 closeVideoModal(); 1978 } 1979 }); 1980 1981 // Close modal with Escape key 1982 document.addEventListener('keydown', function(e) { 1983 if (e.key === 'Escape') { 1984 closeVideoModal(); 1985 } 1986 }); 1987 1988 // Make all video placeholders clickable 1989 document.addEventListener('DOMContentLoaded', function() { 1990 const videoPlaceholders = document.querySelectorAll('.video-placeholder'); 1991
1992 videoPlaceholders.forEach(placeholder => { 1993 placeholder.addEventListener('click', function() { 1994 const img = this.querySelector('img'); 1995 const caption = this.nextElementSibling?.textContent || ''; 1996 1997 if (img) { 1998 openVideoModal(img.src, caption); 1999 } 2000 }); 2001 }); 2002 }); 2003 2004 // Carousel scroll function 2005 function scrollCarousel(direction) { 2006 const track = document.getElementById('carouselTrack'); 2007 const scrollAmount = 300; // Amount to scroll in pixels 2008 2009 if (direction === 'left') { 2010 track.scrollBy({ left: -scrollAmount, behavior: 'smooth' }); 2011 } else { 2012 track.scrollBy({ left: scrollAmount, behavior: 'smooth' }); 2013 } 2014 } 2015 2016 // BibTeX citation toggle 2017 function toggleCitation() { 2018 const content = document.getElementById('citationContent'); 2019 const toggle = document.getElementById('citationToggle'); 2020 2021 content.classList.toggle('expanded'); 2022 toggle.classList.toggle('active'); 2023 } 2024 2025 // Copy BibTeX to clipboard 2026 function copyBibtex() { 2027 const bibtexCode = document.getElementById('bibtexCode').textContent; 2028 const copyBtn = document.getElementById('copyBtn'); 2029 2030 navigator.clipboard.writeText(bibtexCode).then(function() { 2031 // Change button text and style to show success 2032 copyBtn.innerHTML = ` 2033 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 2034 <path d="M20 6L9 17l-5-5"/> 2035 </svg> 2036 Copied! 2037 `; 2038 copyBtn.classList.add('copied'); 2039 2040 // Reset after 2 seconds 2041 setTimeout(function() { 2042 copyBtn.innerHTML = ` 2043 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 2044 <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> 2045 <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path> 2046 </svg> 2047 Copy 2048 `; 2049 copyBtn.classList.remove('copied'); 2050 }, 2000); 2051 }, function(err) { 2052 console.error('Failed to copy text: ', err); 2053 }); 2054 } 2055 </script>
2055 2056</body> 2057</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.