-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
2049 lines (1847 loc) · 118 KB
/
Copy pathindex.html
File metadata and controls
2049 lines (1847 loc) · 118 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Trinity of Consistency as a Defining Principle for General World Models</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
scroll-behavior: smooth;
}
.section-anchor {
scroll-margin-top: 5rem;
}
/* Video Comparison Slider Styles */
.video-compare-container {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
border-radius: 0.5rem;
cursor: ew-resize;
}
.video-overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 50%;
overflow: hidden;
border-right: 2px solid white;
z-index: 10;
}
.video-compare-label {
position: absolute;
top: 10px;
padding: 4px 8px;
background: rgba(0, 0, 0, 0.7);
color: white;
font-size: 12px;
border-radius: 4px;
z-index: 20;
}
.label-left {
left: 10px;
}
.label-right {
right: 10px;
}
/* Timeline Styles */
.timeline-item:hover .timeline-content {
transform: scale(1.02);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
/* Carousel Styles */
.indicator {
transition: all 0.3s ease;
}
.carousel-3d-container {
position: relative;
width: 100%;
max-width: 900px;
height: 500px;
margin: 0 auto;
perspective: 1200px;
transform-style: preserve-3d;
}
.carousel-slide-3d {
position: absolute;
top: 50%;
left: 50%;
width: 70%;
height: auto;
aspect-ratio: 16/10;
background: white;
border-radius: 1rem;
transition: all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
opacity: 0;
z-index: 0;
transform: translate(-50%, -50%) scale(0.8);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1rem;
border: 1px solid #e5e7eb;
cursor: pointer;
overflow: hidden;
backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
/* GPU Acceleration */
transform-style: preserve-3d;
will-change: transform, opacity;
}
.carousel-slide-3d.active {
opacity: 1;
z-index: 20;
transform: translate(-50%, -50%) translateZ(0) scale(1) rotateY(0deg);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
cursor: default;
border-color: #3b82f6;
}
.carousel-slide-3d.prev {
opacity: 0.65;
z-index: 10;
/* Left side: Perspective transform */
transform: translate(-50%, -50%) translateX(-50%) translateZ(-100px) rotateY(20deg) scale(0.85);
background-color: #f9fafb;
}
.carousel-slide-3d.next {
opacity: 0.65;
z-index: 10;
/* Right side: Perspective transform */
transform: translate(-50%, -50%) translateX(50%) translateZ(-100px) rotateY(-20deg) scale(0.85);
background-color: #f9fafb;
}
/* Hover effect for side slides */
.carousel-slide-3d.prev:hover,
.carousel-slide-3d.next:hover {
opacity: 0.8;
transform: translate(-50%, -50%) translateX(var(--tx, -50%)) translateZ(-50px) rotateY(var(--ry, 20deg)) scale(0.9);
z-index: 15;
}
.carousel-slide-3d.prev:hover {
--tx: -50%;
--ry: 20deg;
}
.carousel-slide-3d.next:hover {
--tx: 50%;
--ry: -20deg;
}
/* Loader */
.slide-loader {
position: absolute;
inset: 0;
background: #f3f4f6;
display: flex;
align-items: center;
justify-content: center;
z-index: 50;
transition: opacity 0.3s;
}
/* Fallback for browsers without 3D transform support */
@media (transform-style: flat) {
.carousel-slide-3d.prev {
transform: translate(-50%, -50%) translateX(-100%) scale(0.8);
}
.carousel-slide-3d.next {
transform: translate(-50%, -50%) translateX(100%) scale(0.8);
}
}
/* Custom Scrollbar for Modal */
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* Evolution Modal Styles */
.evo-modal-backdrop {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
/* Safari support */
opacity: 0;
transition: opacity 0.3s ease;
z-index: 100;
pointer-events: auto;
/* Ensure backdrop is clickable */
}
.evo-modal-backdrop.active {
opacity: 1;
}
.evo-modal-container {
position: fixed;
inset: 0;
z-index: 101;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.evo-modal-content {
background: white;
border-radius: 1.5rem;
width: 90%;
max-width: 50rem;
height: 80vh;
max-height: 900px;
display: flex;
flex-direction: column;
overflow: hidden;
opacity: 0;
transform-origin: top left;
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.4s ease;
pointer-events: auto;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
position: relative;
/* Ensure stacking context */
z-index: 110;
/* Ensure content is above backdrop */
}
.evo-modal-content.active {
opacity: 1;
transform: translate(0, 0) scale(1) !important;
}
.evo-close-btn {
position: absolute;
top: 1.5rem;
right: 1.5rem;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
cursor: pointer;
z-index: 20;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.evo-close-btn:hover {
background: white;
transform: scale(1.1);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.evo-image-container {
height: 50%;
width: 100%;
background-color: #f8fafc;
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
border-bottom: 1px solid #e2e8f0;
}
.evo-image-container img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04));
}
.evo-text-container {
height: 50%;
width: 100%;
padding: 2.5rem;
overflow-y: auto;
background: white;
}
</style>
</head>
<body class="bg-white text-gray-800">
<!-- Header -->
<header class="sticky top-0 z-50 w-full border-b border-gray-200 bg-white/90 backdrop-blur-md">
<div class="container mx-auto px-4 h-16 flex items-center justify-between">
<a href="#" class="text-xl font-bold text-gray-900">CoW-Bench</a>
<nav class="hidden md:flex items-center space-x-6">
<a href="#home" class="hover:text-blue-600 transition-colors">Home</a>
<a href="#trinity" class="hover:text-blue-600 transition-colors">The Trinity</a>
<a href="#evolution" class="hover:text-blue-600 transition-colors">Evolution</a>
<a href="#cow-bench" class="hover:text-blue-600 transition-colors">CoW-Bench</a>
<a href="#results" class="hover:text-blue-600 transition-colors">Results</a>
<a href="#future" class="hover:text-blue-600 transition-colors">Future</a>
</nav>
<div class="flex items-center space-x-2">
<a href="https://github.com/OpenRaiser/CoW-Bench" target="_blank"
class="p-2 hover:bg-gray-100 rounded-full transition-colors">
<i data-lucide="github" class="w-5 h-5"></i>
</a>
</div>
</div>
</header>
<main>
<!-- Module 1: Hero Section -->
<section id="home" class="section-anchor pt-16 pb-12 bg-gradient-to-b from-blue-50 to-white">
<div class="container mx-auto px-4 text-center max-w-5xl">
<!-- Title -->
<h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6 leading-tight">
The Trinity of Consistency as a Defining Principle for General World Models
</h1>
<!-- Authors -->
<div
class="flex flex-wrap justify-center gap-x-4 gap-y-2 text-lg text-gray-800 mb-6 max-w-5xl mx-auto leading-relaxed">
<span class="hover:text-blue-600 transition-colors">Jingxuan Wei<sup>2</sup></span>
<span class="hover:text-blue-600 transition-colors">Siyuan Li<sup>3</sup></span>
<span class="hover:text-blue-600 transition-colors">Yuhang Xu<sup>2</sup></span>
<span class="hover:text-blue-600 transition-colors">Zheng Sun<sup>2</sup></span>
<span class="hover:text-blue-600 transition-colors">Junjie Jiang<sup>2</sup></span>
<span class="hover:text-blue-600 transition-colors">Hexuan Jin<sup>2</sup></span>
<span class="hover:text-blue-600 transition-colors">Caijun Jia<sup>2</sup></span>
<span class="hover:text-blue-600 transition-colors">Honghao He<sup>2</sup></span>
<span class="hover:text-blue-600 transition-colors">Xinglong Xu<sup>2</sup></span>
<span class="hover:text-blue-600 transition-colors">Xi Bai<sup>2</sup></span>
<span class="hover:text-blue-600 transition-colors">Chang Yu<sup>3</sup></span>
<span class="hover:text-blue-600 transition-colors">Yumou Liu<sup>5</sup></span>
<span class="hover:text-blue-600 transition-colors">Junnan Zhu<sup>2</sup></span>
<span class="hover:text-blue-600 transition-colors">Xuanhe Zhou<sup>5</sup></span>
<span class="hover:text-blue-600 transition-colors">Jintao Chen<sup>6</sup></span>
<span class="hover:text-blue-600 transition-colors">Xiaobin Hu<sup>4</sup></span>
<span class="hover:text-blue-600 transition-colors">Shancheng Pang<sup>7</sup></span>
<span class="hover:text-blue-600 transition-colors">Bihui Yu<sup>2</sup></span>
<span class="hover:text-blue-600 transition-colors">Ran He<sup>2</sup></span>
<span class="hover:text-blue-600 transition-colors">Zhen Lei<sup>2</sup></span>
<span class="hover:text-blue-600 transition-colors">Stan Z. Li<sup>3</sup></span>
<span class="hover:text-blue-600 transition-colors">Conghui He<sup>1</sup></span>
<span class="hover:text-blue-600 transition-colors">Shuicheng Yan<sup>4</sup></span>
<span class="hover:text-blue-600 transition-colors">Cheng Tan<sup>1</sup></span>
</div>
<!-- Affiliations -->
<div class="flex flex-wrap justify-center gap-x-6 gap-y-2 text-sm text-gray-500 mb-8 max-w-4xl mx-auto">
<span class="flex items-center"><sup>1</sup> Shanghai Artificial Intelligence Laboratory</span>
<span class="flex items-center"><sup>2</sup> University of Chinese Academy of Sciences</span>
<span class="flex items-center"><sup>3</sup> Westlake University</span>
<span class="flex items-center"><sup>4</sup> National University of Singapore</span>
<span class="flex items-center"><sup>5</sup> Shanghai Jiaotong University</span>
<span class="flex items-center"><sup>6</sup> Zhejiang University</span>
<span class="flex items-center"><sup>7</sup> China University of Petroleum (East China)</span>
</div>
<!-- Action Buttons -->
<div class="flex flex-wrap justify-center gap-4 mb-12">
<a href="https://arxiv.org/abs/2602.23152" target="_blank"
class="inline-flex items-center px-6 py-3 rounded-full bg-gray-900 text-white hover:bg-gray-800 transition-all shadow-lg hover:shadow-xl hover:-translate-y-0.5">
<i data-lucide="file-text" class="w-4 h-4 mr-2"></i> Paper (Arxiv)
</a>
<a href="https://huggingface.co/datasets/OpenRaiser/CoW-Bench" target="_blank"
class="inline-flex items-center px-6 py-3 rounded-full bg-yellow-400 text-gray-900 hover:bg-yellow-500 transition-all shadow-lg hover:shadow-xl hover:-translate-y-0.5 font-medium">
<span class="mr-2">🤗</span> Dataset
</a>
<a href="https://github.com/openraiser/awesome-world-model-evolution" target="_blank"
class="inline-flex items-center px-6 py-3 rounded-full bg-gray-100 text-gray-900 hover:bg-gray-200 border border-gray-300 transition-all shadow hover:shadow-md hover:-translate-y-0.5">
<i data-lucide="code" class="w-4 h-4 mr-2"></i> Code
</a>
<a href="#results"
class="inline-flex items-center px-6 py-3 rounded-full bg-blue-100 text-blue-700 hover:bg-blue-200 transition-all shadow hover:shadow-md hover:-translate-y-0.5">
<i data-lucide="bar-chart-2" class="w-4 h-4 mr-2"></i> Leaderboard
</a>
</div>
<!-- Teaser Image (Figure 1) -->
<div
class="relative max-w-4xl mx-auto rounded-2xl shadow-2xl overflow-hidden bg-white border border-gray-100 p-2">
<img src="images/other/fig_teaser.png"
alt="The Trinity of Consistency: Modal, Spatial, and Temporal" class="w-full h-auto rounded-xl">
</div>
</div>
</section>
<!-- Module 2: Abstract & The Trinity -->
<section id="trinity" class="section-anchor py-16 bg-white">
<div class="container mx-auto px-4 max-w-6xl">
<!-- Abstract -->
<div class="max-w-4xl mx-auto text-center mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-6">Why Do We Need a General World Model?</h2>
<p class="text-lg text-gray-600 leading-relaxed text-justify md:text-center">
The construction of World Models capable of learning, simulating, and reasoning about objective
physical laws constitutes a foundational challenge in the pursuit of Artificial General
Intelligence. Existing models often behave as naive physicists; we propose that a robust World
Model must be grounded in the Trinity of Consistency.
</p>
</div>
<!-- The Trinity Cards -->
<div class="grid md:grid-cols-3 gap-8">
<!-- Modal Consistency -->
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-100 hover:shadow-lg transition-shadow">
<div
class="h-48 bg-blue-100 rounded-xl mb-6 flex items-center justify-center overflow-hidden relative">
<!-- Placeholder for Interactive Visual -->
<i data-lucide="message-square" class="w-16 h-16 text-blue-500"></i>
<div class="absolute inset-0 bg-gradient-to-t from-blue-900/10 to-transparent"></div>
<span class="absolute bottom-2 right-2 text-xs font-mono bg-white/80 px-2 py-1 rounded">Text
↔ Vision</span>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-2">Modal Consistency</h3>
<p class="text-sm text-gray-500 uppercase tracking-wider mb-3 font-semibold text-blue-600">The
Interface</p>
<p class="text-gray-600">
The ability to align heterogeneous information (text, image, tactile) into a unified
semantic space, serving as the cognitive interface for instruction and feedback.
</p>
</div>
<!-- Spatial Consistency -->
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-100 hover:shadow-lg transition-shadow">
<div
class="h-48 bg-purple-100 rounded-xl mb-6 flex items-center justify-center overflow-hidden relative">
<!-- Placeholder for Interactive Visual -->
<i data-lucide="box" class="w-16 h-16 text-purple-500"></i>
<div class="absolute inset-0 bg-gradient-to-t from-purple-900/10 to-transparent"></div>
<span class="absolute bottom-2 right-2 text-xs font-mono bg-white/80 px-2 py-1 rounded">3D
Geometry</span>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-2">Spatial Consistency</h3>
<p class="text-sm text-gray-500 uppercase tracking-wider mb-3 font-semibold text-purple-600">The
Basis</p>
<p class="text-gray-600">
The capacity to construct a 3D-aware representation that respects geometry, occlusion, and
object permanence, ensuring the static plausibility of the simulated world.
</p>
</div>
<!-- Temporal Consistency -->
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-100 hover:shadow-lg transition-shadow">
<div
class="h-48 bg-orange-100 rounded-xl mb-6 flex items-center justify-center overflow-hidden relative">
<!-- Placeholder for Interactive Visual -->
<i data-lucide="clock" class="w-16 h-16 text-orange-500"></i>
<div class="absolute inset-0 bg-gradient-to-t from-orange-900/10 to-transparent"></div>
<span
class="absolute bottom-2 right-2 text-xs font-mono bg-white/80 px-2 py-1 rounded">Causality
& Physics</span>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-2">Temporal Consistency</h3>
<p class="text-sm text-gray-500 uppercase tracking-wider mb-3 font-semibold text-orange-600">The
Engine</p>
<p class="text-gray-600">
The adherence to physical laws and causal logic over time, ensuring that dynamic evolution
follows a predictable and logically sound trajectory.
</p>
</div>
</div>
</div>
</section>
<!-- Module 3: Evolution of World Models -->
<section id="evolution" class="section-anchor py-16 bg-gray-900 text-white">
<div class="container mx-auto px-4 max-w-6xl">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">Evolution of World Models</h2>
<p class="text-gray-400">From loosely coupled specialized modules toward unified general
architectures.</p>
</div>
<div class="relative">
<!-- Vertical Line (Mobile) / Horizontal Line (Desktop) -->
<div
class="absolute left-4 top-0 bottom-0 w-1 bg-gray-700 md:left-0 md:right-0 md:top-1/2 md:h-1 md:w-full md:bottom-auto">
</div>
<div class="grid md:grid-cols-3 gap-12 relative z-10">
<!-- Phase 1: Modal -->
<div class="timeline-item group pl-12 md:pl-0 md:pt-12 relative cursor-pointer"
onclick="openEvolutionModal(this.querySelector('.timeline-content'), 'phase1')">
<div
class="absolute left-2 top-0 w-5 h-5 bg-blue-500 rounded-full border-4 border-gray-900 md:left-1/2 md:-top-2.5 md:-ml-2.5 group-hover:bg-blue-400 transition-colors">
</div>
<div
class="timeline-content bg-gray-800 p-6 rounded-xl border border-gray-700 transition-transform duration-300">
<div class="text-blue-400 font-bold text-sm mb-2">PHASE 1</div>
<h3 class="text-xl font-bold mb-3">Modal Evolution</h3>
<p class="text-gray-400 text-sm mb-4">Transitioning from geometric isolation to native
unified models.</p>
<div class="flex gap-2">
<span class="px-2 py-1 bg-gray-700 rounded text-xs">Dual-Tower</span>
<span class="px-2 py-1 bg-gray-700 rounded text-xs">MM-DiT</span>
</div>
</div>
</div>
<!-- Phase 2: Spatial -->
<div class="timeline-item group pl-12 md:pl-0 md:pt-12 relative cursor-pointer"
onclick="openEvolutionModal(this.querySelector('.timeline-content'), 'phase2')">
<div
class="absolute left-2 top-0 w-5 h-5 bg-purple-500 rounded-full border-4 border-gray-900 md:left-1/2 md:-top-2.5 md:-ml-2.5 group-hover:bg-purple-400 transition-colors">
</div>
<div
class="timeline-content bg-gray-800 p-6 rounded-xl border border-gray-700 transition-transform duration-300">
<div class="text-purple-400 font-bold text-sm mb-2">PHASE 2</div>
<h3 class="text-xl font-bold mb-3">Spatial Evolution</h3>
<p class="text-gray-400 text-sm mb-4">From implicit fields and primitives to generative
priors.</p>
<div class="flex gap-2">
<span class="px-2 py-1 bg-gray-700 rounded text-xs">NeRF</span>
<span class="px-2 py-1 bg-gray-700 rounded text-xs">3DGS</span>
</div>
</div>
</div>
<!-- Phase 3: Temporal -->
<div class="timeline-item group pl-12 md:pl-0 md:pt-12 relative cursor-pointer"
onclick="openEvolutionModal(this.querySelector('.timeline-content'), 'phase3')">
<div
class="absolute left-2 top-0 w-5 h-5 bg-green-500 rounded-full border-4 border-gray-900 md:left-1/2 md:-top-2.5 md:-ml-2.5 group-hover:bg-green-400 transition-colors">
</div>
<div
class="timeline-content bg-gray-800 p-6 rounded-xl border border-gray-700 transition-transform duration-300">
<div class="text-green-400 font-bold text-sm mb-2">PHASE 3</div>
<h3 class="text-xl font-bold mb-3">Temporal Evolution</h3>
<p class="text-gray-400 text-sm mb-4">From autoregressive modeling to Diffusion
Transformers.</p>
<div class="flex gap-2">
<span class="px-2 py-1 bg-gray-700 rounded text-xs">Diffusion</span>
<span class="px-2 py-1 bg-gray-700 rounded text-xs">Transformers</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Module 4: CoW-Bench -->
<section id="cow-bench" class="section-anchor py-16 bg-gray-50">
<div class="container mx-auto px-4 max-w-6xl">
<div class="text-center mb-10">
<h2 class="text-3xl font-bold text-gray-900 mb-4">CoW-Bench: The Ultimate Test</h2>
<p class="text-gray-600 max-w-2xl mx-auto">
CoW-Bench (Consistency of World-models Benchmark) rigorously tests the model's ability to
maintain the Trinity of Consistency under complex scenarios. It includes 1,485 meticulously
constructed samples, organized into 18 fine-grained sub-tasks spanning Modal, Spatial, Temporal
dimensions and their cross-axis synergies.
</p>
<!-- Benchmark Taxonomy Figure -->
<figure class="mt-8 mb-4">
<img src="images/benchmark/UMM-Bench_Category_Distribution.png"
alt="Hierarchical Taxonomy of CoW-Bench" style="width: 60%;"
class="mx-auto rounded-lg shadow-md">
<figcaption class="mt-3 text-center text-gray-500">
<small>
<strong>Hierarchical Taxonomy of CoW-Bench.</strong>
The inner ring represents the main consistency dimensions (Modal, Space, Time), while
the outer ring details the 18 fine-grained sub-tasks. The uniform sector sizes visually
confirm the rigorously balanced distribution of the dataset.
</small>
</figcaption>
</figure>
</div>
<!-- Tabs -->
<div class="flex justify-center flex-wrap gap-2 mb-8" id="taskTabs">
<button onclick="renderGrid()"
class="px-4 py-2 rounded-full bg-blue-600 text-white font-medium shadow-sm transition-all hover:shadow-md"
data-tab="all">All Tasks</button>
<!-- Other tabs will be generated by JS -->
</div>
<!-- Task Gallery Container -->
<div id="taskGalleryContainer" class="min-h-[400px]">
<!-- Content will be injected here -->
</div>
<script>
// ==========================================
// Data Maps (Moved to top for availability)
// ==========================================
// Task Prompts Map
window.taskPrompts = {
"Subj-Attr": "Generate a fish with the same material.",
"Minor-Ctrl": "Change only the digital clock display: Simulate the digital clock transi-tioning from 12:00 to 12:30 over a few seconds. All other aspects of the image must remain completely unchanged.",
"Multi-Req": "Gray-hoodied A (backpack L) gives B a bottle (R); orange-shirt B (skateboard R) gives A a hat (L). A brown squirrel on a branch watches B. No others; no text/logos/watermarks.",
"2D-Rel": "The cat on the left moves to the left. The cat on the right moves to the right. Keep the camera fixed.",
"2D-Layed": "Slowly close the drawer. As the drawer closes, the books should gradually become occluded.",
"3D": "Move and rotate the camera to the left to display three views of the same bedroom. Ensure structural rigidity and correct occlusion relations during the perspective switches.",
"Consist": "The ceiling fan rotates continuously for five minutes, with the blades spinning smoothly and the body remaining stationary.",
"Slow-Evol": "Time lapse: An hour passes.",
"State": "Demolish a house made of building blocks.",
"Sem-SEPL": "The car with the blue roof moves to the right. The remaining three cars move to the left. Maintain vehicle identity.",
"Sem-OCCO": "Place only the apples into the bowl. The pears must remain outside the bowl and fully visible.",
"SEMV": "Static scene, 4 views, slight left camera rotation. Foreground: small 'STOP' sign. Background: book (left), pen (right). Maintain strict depth and relative spatial arrangement.",
"LOHO": "Car driving on a road with a blue side stripe. Constraint: The stripe must remain strictly static in color and position during motion.",
"ATDY": "Fixed camera, dark room. A floating sphere rotates slowly, cycling colors (Red → Orange → Green → Blue → Red) in a continuous 4-second loop, starting at Red.",
"TREV": "Smartphone with visible power button, initially black screen. Action: Press button. Result: Screen instantly wakes to lock screen. (Stay off until interaction).",
"MAZE": "A red dot moves from the bottom-left corner to the green dot in the top-right corner, generating a red path trajectory.",
"OCMO": "The camera tracks alongside a car driving to the left in a suburban environment.",
"3DLO": "Daylight balcony reveal of city skyline. Action: Camera pans back. Transition: Light shifts to twilight with twinkling lights, seamlessly merging back into the bedroom."
};
// Failure Case Images Map
window.taskFailureImages = {
"SUAT": "images/sample_analysis/failure_case_gif/M_Subj-Attr.gif",
"LCED": "images/sample_analysis/failure_case_gif/M_Minor-Ctrl.gif",
"MCON": "images/sample_analysis/failure_case_gif/M_Multi-Req.gif",
"SEPL": "images/sample_analysis/failure_case_gif/S_2D-Rel.gif",
"OCCO": "images/sample_analysis/failure_case_gif/S_2D-Layed.gif",
"MV3D": "images/sample_analysis/failure_case_gif/S_3D.gif",
"WLIN": "images/sample_analysis/failure_case_gif/T_Consist.gif",
"SLEV": "images/sample_analysis/failure_case_gif/T_Slow-Evol.gif",
"STOR": "images/sample_analysis/failure_case_gif/T_State.gif",
"Sem-SEPL": "images/sample_analysis/failure_case_gif/MS_2D-Rel.gif",
"Sem-OCCO": "images/sample_analysis/failure_case_gif/MS_2D-Layed.gif",
"SEMV": "images/sample_analysis/failure_case_gif/MS_3D-POV.gif",
"LOHO": "images/sample_analysis/failure_case_gif/MT_Prop-Cons.gif",
"ATDY": "images/sample_analysis/failure_case_gif/MT_Prop-Var.gif",
"TREV": "images/sample_analysis/failure_case_gif/MT_Event-Rsp.gif",
"MAZE": "images/sample_analysis/failure_case_gif/TS_Maze-2D.gif",
"OCMO": "images/sample_analysis/failure_case_gif/TS_Cam-Mask.gif",
"3DLO": "images/sample_analysis/failure_case_gif/TS_3D-Recon.gif"
};
// Reference Images Map
window.taskReferenceImages = {
"SUAT": "images/sample_analysis/sample_img/M_Subj-Attr.png",
"LCED": "images/sample_analysis/sample_img/M_Minor-Ctrl.png",
"MCON": "images/sample_analysis/sample_img/M_Multi-Req.png",
"SEPL": "images/sample_analysis/sample_img/S_2D-Rel.png",
"OCCO": "images/sample_analysis/sample_img/S_2D-Layed.png",
"MV3D": "images/sample_analysis/sample_img/S_3D.png",
"WLIN": "images/sample_analysis/sample_img/T_Consist.png",
"SLEV": "images/sample_analysis/sample_img/T_Slow-Evol.png",
"STOR": "images/sample_analysis/sample_img/T_State.png",
"Sem-SEPL": "images/sample_analysis/sample_img/MS_2D-Rel.png",
"Sem-OCCO": "images/sample_analysis/sample_img/MS_2D-Layed.png",
"SEMV": "images/sample_analysis/sample_img/MS_3D-POV.png",
"LOHO": "images/sample_analysis/sample_img/MT_Prop-Cons.png",
"ATDY": "images/sample_analysis/sample_img/MT_Prop-Var.png",
"TREV": "images/sample_analysis/sample_img/MT_Event-Rsp.png",
"MAZE": "images/sample_analysis/sample_img/TS_Maze-2D.png",
"OCMO": "images/sample_analysis/sample_img/TS_Cam-Mask.png",
"3DLO": "images/sample_analysis/sample_img/TS_3D-Recon.png"
};
// Success Case Images Map
window.taskSuccessImages = {
"SUAT": "images/sample_analysis/success_case_gif/M_Subj-Attr.gif",
"LCED": "images/sample_analysis/success_case_gif/M_Minor-Ctrl.gif",
"MCON": "images/sample_analysis/success_case_gif/M_Multi-Req.gif",
"SEPL": "images/sample_analysis/success_case_gif/S_2D-Rel.gif",
"OCCO": "images/sample_analysis/success_case_gif/S_2D-Layed.gif",
"MV3D": "images/sample_analysis/success_case_gif/S_3D-POV.gif",
"WLIN": "images/sample_analysis/success_case_gif/T_Consist.gif",
"SLEV": "images/sample_analysis/success_case_gif/T_Slow-Evol.gif",
"STOR": "images/sample_analysis/success_case_gif/T_State.gif",
"Sem-SEPL": "images/sample_analysis/success_case_gif/MS_2D-Rel.gif",
"Sem-OCCO": "images/sample_analysis/success_case_gif/MS_2D-Layed.gif",
"SEMV": "images/sample_analysis/success_case_gif/MS_3D-POV.gif",
"LOHO": "images/sample_analysis/success_case_gif/MT_Prop-Cons.gif",
"ATDY": "images/sample_analysis/success_case_gif/MT_Prop-Var.gif",
"TREV": "images/sample_analysis/success_case_gif/MT_Event-Rsp.gif",
"MAZE": "images/sample_analysis/success_case_gif/TS_Maze-2D.gif",
"OCMO": "images/sample_analysis/success_case_gif/TS_Cam-Mask.gif",
"3DLO": "images/sample_analysis/success_case_gif/TS_3D-Recon.gif"
};
const taskCategories = [
{
name: "Modal",
color: "bg-blue-100 text-blue-800",
btnColor: "hover:bg-blue-50 text-blue-700 border-blue-200",
activeColor: "bg-blue-600 text-white border-blue-600",
tasks: [
{ name: "Subj-Attr", abbr: "SUAT", img: "images/sample_analysis/sample_img/M_Subj-Attr.png" },
{ name: "Minor-Ctrl", abbr: "LCED", img: "images/sample_analysis/sample_img/M_Minor-Ctrl.png" },
{ name: "Multi-Req", abbr: "MCON", img: "images/sample_analysis/sample_img/M_Multi-Req.png" }
]
},
{
name: "Spatial",
color: "bg-green-100 text-green-800",
btnColor: "hover:bg-green-50 text-green-700 border-green-200",
activeColor: "bg-green-600 text-white border-green-600",
tasks: [
{ name: "2D-Rel", abbr: "SEPL", img: "images/sample_analysis/sample_img/S_2D-Rel.png" },
{ name: "2D-Layed", abbr: "OCCO", img: "images/sample_analysis/sample_img/S_2D-Layed.png" },
{ name: "3D", abbr: "MV3D", img: "images/sample_analysis/sample_img/S_3D.png" }
]
},
{
name: "Temporal",
color: "bg-orange-100 text-orange-800",
btnColor: "hover:bg-orange-50 text-orange-700 border-orange-200",
activeColor: "bg-orange-600 text-white border-orange-600",
tasks: [
{ name: "Consist", abbr: "WLIN", img: "images/sample_analysis/sample_img/T_Consist.png" },
{ name: "Slow-Evol", abbr: "SLEV", img: "images/sample_analysis/sample_img/T_Slow-Evol.png" },
{ name: "State", abbr: "STOR", img: "images/sample_analysis/sample_img/T_State.png" }
]
},
{
name: "Modal × Space",
color: "bg-indigo-100 text-indigo-800",
btnColor: "hover:bg-indigo-50 text-indigo-700 border-indigo-200",
activeColor: "bg-indigo-600 text-white border-indigo-600",
tasks: [
{ name: "2D-Rel", abbr: "Sem-SEPL", img: "images/sample_analysis/sample_img/MS_2D-Rel.png" },
{ name: "2D-Layed", abbr: "Sem-OCCO", img: "images/sample_analysis/sample_img/MS_2D-Layed.png" },
{ name: "3D-POV", abbr: "SEMV", img: "images/sample_analysis/sample_img/MS_3D-POV.png" }
]
},
{
name: "Modal × Time",
color: "bg-purple-100 text-purple-800",
btnColor: "hover:bg-purple-50 text-purple-700 border-purple-200",
activeColor: "bg-purple-600 text-white border-purple-600",
tasks: [
{ name: "Prop-Cons", abbr: "LOHO", img: "images/sample_analysis/sample_img/MT_Prop-Cons.png" },
{ name: "Prop-Var", abbr: "ATDY", img: "images/sample_analysis/sample_img/MT_Prop-Var.png" },
{ name: "Event-Rsp", abbr: "TREV", img: "images/sample_analysis/sample_img/MT_Event-Rsp.png" }
]
},
{
name: "Time × Space",
color: "bg-rose-100 text-rose-800",
btnColor: "hover:bg-rose-50 text-rose-700 border-rose-200",
activeColor: "bg-rose-600 text-white border-rose-600",
tasks: [
{ name: "Maze-2D", abbr: "MAZE", img: "images/sample_analysis/sample_img/TS_Maze-2D.png" },
{ name: "Cam-Mask", abbr: "OCMO", img: "images/sample_analysis/sample_img/TS_Cam-Mask.png" },
{ name: "3D-Recon", abbr: "3DLO", img: "images/sample_analysis/sample_img/TS_3D-Recon.png" }
]
}
];
// Initialize Buttons
const tabsContainer = document.getElementById('taskTabs');
taskCategories.forEach((cat, index) => {
const btn = document.createElement('button');
btn.className = `px-4 py-2 rounded-full font-medium border transition-all ${cat.btnColor}`;
btn.innerText = cat.name;
btn.onclick = () => renderList(index);
btn.dataset.tab = `cat-${index}`;
tabsContainer.appendChild(btn);
});
const container = document.getElementById('taskGalleryContainer');
function setActiveTab(tabId) {
const buttons = tabsContainer.querySelectorAll('button');
buttons.forEach(btn => {
if (btn.dataset.tab === tabId) {
// Apply active styles
if (tabId === 'all') {
btn.className = "px-4 py-2 rounded-full bg-blue-600 text-white font-medium shadow-sm transition-all hover:shadow-md";
} else {
const index = parseInt(tabId.split('-')[1]);
const cat = taskCategories[index];
btn.className = `px-4 py-2 rounded-full font-medium border transition-all shadow-sm ${cat.activeColor}`;
}
} else {
// Reset to default styles
if (btn.dataset.tab === 'all') {
btn.className = "px-4 py-2 rounded-full bg-white text-gray-600 hover:bg-gray-100 font-medium border border-gray-200 transition-all";
} else {
const index = parseInt(btn.dataset.tab.split('-')[1]);
const cat = taskCategories[index];
btn.className = `px-4 py-2 rounded-full font-medium border border-transparent bg-white transition-all ${cat.btnColor}`;
}
}
});
}
function renderGrid() {
setActiveTab('all');
container.innerHTML = '<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 animate-fade-in"></div>';
const grid = container.querySelector('div');
taskCategories.forEach(cat => {
cat.tasks.forEach(task => {
grid.innerHTML += `
<div class="group relative aspect-square bg-white rounded-xl overflow-hidden cursor-pointer border border-gray-200 hover:border-blue-500 transition-all hover:shadow-md" onclick="openModal('${task.name}', '${task.abbr}')">
<div class="absolute top-2 right-2 z-10">
<span class="text-[10px] font-bold px-2 py-0.5 rounded-full ${cat.color} opacity-90">${cat.name}</span>
</div>
<div class="absolute inset-0 flex items-center justify-center bg-gray-50">
<img src="${task.img}" alt="${task.name}" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-black/10 group-hover:bg-black/0 transition-colors"></div>
<i data-lucide="play-circle" class="absolute w-10 h-10 text-white opacity-0 group-hover:opacity-100 transition-all z-20"></i>
</div>
<div class="absolute bottom-0 left-0 right-0 bg-white/95 backdrop-blur-sm border-t border-gray-100 p-2.5 text-center z-10">
<div class="text-sm font-bold text-gray-900 leading-tight">${task.name}</div>
<div class="text-[10px] text-gray-500 font-mono mt-0.5">${task.abbr}</div>
</div>
</div>
`;
});
});
if (typeof lucide !== 'undefined') lucide.createIcons();
}
function renderList(catIndex) {
setActiveTab(`cat-${catIndex}`);
const cat = taskCategories[catIndex];
// Show Loading
container.innerHTML = `
<div class="flex flex-col items-center justify-center h-64 text-gray-400">
<i data-lucide="loader" class="w-10 h-10 animate-spin mb-4 text-blue-500"></i>
<p>Loading ${cat.name} tasks...</p>
</div>
`;
if (typeof lucide !== 'undefined') lucide.createIcons();
setTimeout(() => {
let html = `<div class="space-y-6 animate-fade-in">`;
cat.tasks.forEach(task => {
// Retrieve data from global maps (defined at bottom of script)
// Note: We need to ensure global maps are accessible here.
// Since this script runs before the bottom script, we might need to move maps up or access them safely.
// However, in HTML structure, bottom script runs after this.
// Solution: We will rely on window.taskPrompts etc. or move logic.
// Better: Since we can't easily move the bottom big script block, let's access them from window if available,
// or we just re-declare the access logic inside a try-catch or ensure execution order.
// Actually, standard HTML parsing executes scripts in order.
// The bottom script is where prompts are defined. We should access them lazily or assume they are ready when user clicks.
// User clicks happen after page load, so bottom script should be executed.
const prompt = (window.taskPrompts && (window.taskPrompts[task.abbr] || window.taskPrompts[task.name])) || "Prompt loading...";
const failureImg = (window.taskFailureImages && window.taskFailureImages[task.abbr]) || "";
const successImg = (window.taskSuccessImages && window.taskSuccessImages[task.abbr]) || "";
const refImg = (window.taskReferenceImages && window.taskReferenceImages[task.abbr]) || task.img;
html += `
<div class="bg-white rounded-xl border border-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow">
<div class="flex flex-col lg:flex-row gap-6">
<!-- Info Section -->
<div class="flex-1 min-w-0">
<div class="flex items-center gap-3 mb-3">
<span class="px-2.5 py-0.5 rounded-full text-xs font-bold ${cat.color}">${cat.name}</span>
<h3 class="text-xl font-bold text-gray-900">${task.name} <span class="text-gray-400 font-mono text-sm font-normal ml-2">${task.abbr}</span></h3>
</div>
<div class="bg-gray-50 rounded-lg p-4 border border-gray-100">
<span class="text-xs font-bold text-gray-400 uppercase tracking-wider block mb-1">Prompt</span>
<p class="text-gray-700 leading-relaxed text-sm">${prompt}</p>
</div>
</div>
<!-- Visuals Section -->
<div class="flex gap-4 overflow-x-auto pb-2 lg:pb-0 scrollbar-hide">
<!-- Failure -->
<div class="flex-shrink-0 w-48 relative group">
<div class="aspect-square rounded-lg bg-gray-100 overflow-hidden border border-gray-200 relative">
${failureImg ? `<img src="${failureImg}" class="w-full h-full object-fill">` : '<div class="w-full h-full flex items-center justify-center text-gray-300"><i data-lucide="image-off"></i></div>'}
<div class="absolute top-1 left-1 bg-white/90 backdrop-blur px-1.5 py-0.5 rounded text-[10px] font-bold text-red-500 shadow-sm">Failure</div>
</div>
</div>
<!-- Reference -->
<div class="flex-shrink-0 w-48 relative group">
<div class="aspect-square rounded-lg bg-gray-100 overflow-hidden border-2 border-blue-100 relative shadow-inner">
<img src="${refImg}" class="w-full h-full object-cover">
<div class="absolute top-1 left-1 bg-blue-600/90 backdrop-blur px-1.5 py-0.5 rounded text-[10px] font-bold text-white shadow-sm">Reference</div>
</div>
</div>
<!-- Success -->
<div class="flex-shrink-0 w-48 relative group">
<div class="aspect-square rounded-lg bg-gray-100 overflow-hidden border border-gray-200 relative">
${successImg ? `<img src="${successImg}" class="w-full h-full object-fill">` : '<div class="w-full h-full flex items-center justify-center text-gray-300"><i data-lucide="image-off"></i></div>'}
<div class="absolute top-1 left-1 bg-white/90 backdrop-blur px-1.5 py-0.5 rounded text-[10px] font-bold text-green-500 shadow-sm">Success</div>
</div>
</div>
</div>
</div>
</div>
`;
});
html += `</div>`;
container.innerHTML = html;
if (typeof lucide !== 'undefined') lucide.createIcons();
}, 600); // 600ms fake loading
}
// Initial Render
renderGrid();
</script>
</div>
</section>
<!-- Module 5: Evaluation Results -->
<section id="results" class="section-anchor py-16 bg-white">
<div class="container mx-auto px-4 max-w-7xl">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900 mb-4">Empirical Results & Dynamic Leaderboard</h2>
<p class="text-gray-600">Comprehensive evaluation across 18 sub-tasks reveals the current state of
World Models.</p>
</div>
<!-- Part 1: Radar Chart & Figure 2 -->
<div class="grid md:grid-cols-2 gap-8 mb-16">
<!-- Interactive Chart -->
<div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 flex flex-col">
<h3 class="text-lg font-bold mb-4 text-gray-800">Interactive Performance Analysis</h3>
<div class="flex-grow flex items-center justify-center relative aspect-square md:aspect-auto">
<canvas id="mainRadarChart"></canvas>
</div>
<p class="text-xs text-gray-400 mt-4 text-center">Click legend to toggle models</p>
</div>
<!-- Figure 2 -->
<div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 flex flex-col">
<h3 class="text-lg font-bold mb-4 text-gray-800">Overall Performance Comparison</h3>
<div class="flex-grow flex items-center justify-center bg-gray-50 rounded-xl overflow-hidden">
<img src="images/result/figure2.png" alt="Performance Comparison of Mainstream Models"
class="w-full h-full object-contain">
</div>
</div>
</div>
<!-- Part 2: Heatmaps Carousel -->
<div class="mb-16">
<h3 class="text-xl font-bold mb-6 text-gray-900">Detailed Error Analysis (Heatmaps)</h3>
<div class="relative group w-full flex flex-col items-center">
<!-- Carousel Container -->
<div class="carousel-3d-container mb-6" id="heatmapCarousel">
<!-- Slide 1: Modal -->
<div class="carousel-slide-3d" onclick="window.goToSlide(0)">
<div class="slide-loader"><i data-lucide="loader"
class="w-8 h-8 animate-spin text-blue-500"></i></div>
<div class="w-full h-[80%] bg-white overflow-hidden mb-2 relative">
<embed data-src="images/result/figure35.png" type="image/png"
class="w-full h-full lazy-embed">
<!-- Transparent overlay for drag interaction on active slide -->
<div class="absolute inset-0 bg-transparent z-10"></div>
</div>
<h4 class="text-base font-bold text-gray-800">Modal Consistency</h4>
<p class="text-xs text-gray-500 mt-1 text-center line-clamp-2">Performance distribution
across multimodal alignment tasks.</p>
</div>
<!-- Slide 2: Spatial -->
<div class="carousel-slide-3d" onclick="window.goToSlide(1)">
<div class="slide-loader"><i data-lucide="loader"
class="w-8 h-8 animate-spin text-blue-500"></i></div>
<div class="w-full h-[80%] bg-white overflow-hidden mb-2 relative">
<embed data-src="images/result/figure36.png" type="image/png"
class="w-full h-full lazy-embed">
<div class="absolute inset-0 bg-transparent z-10"></div>
</div>
<h4 class="text-base font-bold text-gray-800">Spatial Consistency</h4>
<p class="text-xs text-gray-500 mt-1 text-center line-clamp-2">Spatial reasoning
capabilities and local geometry.</p>
</div>
<!-- Slide 3: Temporal -->
<div class="carousel-slide-3d" onclick="window.goToSlide(2)">
<div class="slide-loader"><i data-lucide="loader"
class="w-8 h-8 animate-spin text-blue-500"></i></div>
<div class="w-full h-[80%] bg-white overflow-hidden mb-2 relative">
<embed data-src="images/result/figure37.png" type="image/png"
class="w-full h-full lazy-embed">
<div class="absolute inset-0 bg-transparent z-10"></div>
</div>
<h4 class="text-base font-bold text-gray-800">Temporal Consistency</h4>
<p class="text-xs text-gray-500 mt-1 text-center line-clamp-2">Temporal coherence and
long-term object permanence.</p>