PageSourceSearch

https://keh0t0.github.io/EgoX/

html keh0t0.github.io collected 2026-10-03 09:27:06 UTC 54,777 bytes, 1,190 lines download raw bytes

1<!DOCTYPE html>
2<html>
3
4<head>
5    <meta charset="utf-8">
6    <meta name="description" content="EgoX: Egocentric Video Generation from a Single Exocentric Video.">
7    <meta name="viewport" content="width=device-width, initial-scale=1">
8    <title>EgoX</title>
9    <link rel="icon" type="image/png" href="static/images/fevicon-davian.png">
10
11    <!-- Google Fonts -->
12    <link href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro" rel="stylesheet">
13
14    <!-- CSS -->
15    <link rel="stylesheet" href="./static/css/bulma.min.css">
16    <link rel="stylesheet" href="./static/css/fontawesome.all.min.css">
17    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
18    <link rel="stylesheet" href="./static/css/index.css">
19
20    <!-- MathJax -->
21    
21<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
21
22
23    
23<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
23
24    
24<script defer src="./static/js/fontawesome.all.min.js"></script>
24
25
26    <style>
27        .strong_acg {
28            color: rgb(0, 90, 190);
29            font-weight: 700
30        }
31
32        .strong_ic {
33            color: rgb(230, 34, 46);
34            font-weight: 700
35        }
36
37        .media-row {
38            display: flex;
39            justify-content: center;
40            align-items: flex-start;
41            gap: 16px;
42            max-width: 1200px;
43            margin: 20px auto 0 auto;
44            padding: 0 8px;
45            width: 100%;
46        }
47
48        .media-cell {
49            flex: 1;
50            max-width: 100%;
51            display: flex;
52            flex-direction: column;
53            align-items: center;
54        }
55
56        .media-cell img,
57        .media-cell video {
58            width: 100%;
59            height: auto;
60            object-fit: contain;
61            image-rendering: auto;
62            border-radius: 0;
63            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
64        }
65
66        /* 반응형 대응 */
67        @media screen and (max-width: 768px) {
68            .media-row {
69                flex-direction: column;
70                gap: 16px;
71            }
72
73            .media-cell {
74                width: 100% !important;
75            }
76        }
77
78        .publication-links .button {
79            text-transform: none;
80        }
81
82        .concept-overview-caption p {
83            width: 90%;
84        }
85
86        .concept-overview {
87            width: 70%;
88            margin: 0 auto;
89        }
90
91        @media screen and (max-width: 768px) {
92            .concept-overview {
93                width: 100%;
94            }
95
96            .concept-overview-caption p {
97                width: 100%;
98            }
99        }
100
101        /* Qualitative Comparison Styles */
102        .comparison-section {
103            margin: 3rem 0;
104        }
105
106        .comparison-title {
107            text-align: center;
108            margin-bottom: 2rem;
109            color: #333;
110        }
111
112        .comparison-container {
113            display: flex;
114            gap: 2rem;
115            margin: 2rem 0;
116            align-items: stretch;
117        }
118
119        .comparison-panel {
120            flex: 1;
121            background: #f8f9fa;
122            border-radius: 12px;
123            padding: 1rem;
124            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
125            /* position: sticky; */
126            /* top: 0rem; */
127        }
128
129        .comparison-item {
130            background: #f8f9fa;
131            border-radius: 12px;
132            padding: 1rem;
133            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
134            transition: transform 0.2s ease, box-shadow 0.2s ease;
135        }
136
137        .comparison-item:hover {
138            transform: translateY(-2px);
139            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
140        }
141
142        .comparison-item h4 {
143            margin-bottom: 0.5rem;
144            color: #2c3e50;
145            font-size: 1.1rem;
146            font-weight: 600;
147        }
148
149        .comparison-item video {
150            width: 100%;
151            height: auto;
152            border-radius: 8px;
153            margin-bottom: 0.5rem;
154        }
155
156        .compare-label {
157            display: inline-block;
158            padding: 0.25rem 0.75rem;
159            border-radius: 20px;
160            font-size: 0.85rem;
161            font-weight: 500;
162            margin-bottom: 0.5rem;
163            width: fit-content;
164        }
165
166        .compare-baseline {
167            background: rgb(240, 240, 240);
168            color: #4a4a4a;
169            border: 1px solid #4a4a4a;
170        }
171
172        .compare-ensemble {
173            background: #fff6dd;
174            color: #d7a309;
175            border: 1px solid #d7a309;
176        }
177
178        .compare-cfg {
179            background: #ffebec;
180            color: #dc3545;
181            border: 1px solid #dc3545;
182        }
183
184        .compare-noise {
185            background: #e6fcff;
186            color: #17a2b8;
187            border: 1px solid #17a2b8;
188        }
189
190        .compare-smoothing {
191            background: #f1fcde;
192            color: #536e26;
193            border: 1px solid #536e26;
194        }
195
196        .compare-exo {
197            background: #f0f0f0;
198            color: #555555;
199            border: 1px solid #9e9e9e;
200        }
201
202        .compare-ours {
203            background: #e6f4ff;
204            color: rgb(0, 90, 190);
205            border: 1px solid rgb(0, 90, 190);
206        }
207
208        .compare-ego-gt {
209            background: #fff6dd;
210            color: #d7a309;
211            border: 1px solid #d7a309;
212        }
213
214        /* Table separators */
215        .thick-sep td,
216        .thick-sep th {
217            border-top: 3px solid #333 !important;
218        }
219
220        .logo-row {
221            display: flex;
222            justify-content: center;
223            align-items: center;
224            gap: 2rem;
225            margin-top: 0.5rem;
226        }
227
228        .logo-row img {
229            object-fit: contain;
230        }
231
232        .logo-row img:first-child {
233            height: 55px;
234        }
235
236        .logo-row img:last-child {
237            height: 55px;
238        }
239
240        @media screen and (max-width: 768px) {
241            .logo-row {
242                /* flex-direction: column; */
243                gap: 1rem;
244            }
245
246            .logo-row img:first-child {
247                height: 42px;
248                /* width: 32%; */
249                margin-left: 0px;
250            }
251
252            .logo-row img:last-child {
253                height: 42px;
254                /* width: 25%; */
255            }
256
257        }
258
259        /* Quantitative table outer border and grid */
260        .quant-table {
261            border: 2px solid #333;
262            border-collapse: collapse;
263        }
264
265        .quant-table th,
266        .quant-table td {
267            border: 1px dotted #bbb;
268        }
269
270        /* Baseline Navigation - Teaser Section (Original Style) */
271        .baseline-nav {
272            display: flex;
273            justify-content: center;
274            gap: 0.3rem;
275            margin-bottom: 1rem;
276            flex-wrap: wrap;
277        }
278
279        .baseline-nav button {
280            padding: 0.6rem 1.2rem;
281            border: 1px solid #ddd;
282            background: white;
283            border-radius: 20px;
284            cursor: pointer;
285            font-size: 0.95rem;
286            font-weight: 600;
287            transition: all 0.2s ease;
288            white-space: nowrap;
289        }
290
291        .baseline-nav button:hover {
292            background: #f0f0f0;
293            border-color: #999;
294        }
295
296        .baseline-nav button.active {
297            color: white;
298            background: #007bff;
299            border-color: #007bff;
300        }
301
302        /* Category Navigation - Qualitative Results (New Style) */
303        .category-nav {
304            display: flex;
305            justify-content: center;
306            gap: 0.5rem;
307            margin-bottom: 1rem;
308            flex-wrap: wrap;
309        }
310
311        .category-nav button {
312            padding: 0.6rem 1.5rem;
313            border: 1.5px solid #e8e8e8;
314            background: white;
315            border-radius: 25px;
316            cursor: pointer;
317            font-size: 1rem;
318            font-weight: 500;
319            transition: all 0.2s ease;
320            white-space: nowrap;
321            color: #000;
322        }
323
324        .category-nav button:hover {
325            background: #f5f5f5;
326        }
327
328        .category-nav button.active {
329            background: #9e9e9e;
330            color: white;
331            border-color: #9e9e9e;
332        }
333
334        .baseline-content {
335            height: auto;
336        }
337
338        .baseline-item {
339            display: none;
340            height: auto;
341            text-align: center;
342        }
343
344        .baseline-item.active {
345            display: block;
346        }
347
348        .our-compare-panel video,
349        .baseline-item video {
350            width: 100%;
351            height: auto;
352            object-fit: contain;
353            border-radius: 8px;
354            margin: 0;
355            padding: 0;
356        }
357
358        /* Responsive adjustments */
359        @media screen and (max-width: 768px) {
360            .comparison-container {
361                flex-direction: column;
362                gap: 1rem;
363            }
364
365            .our-compare-panel {
366                position: static;
367            }
368
369            .baseline-nav {
370                gap: 0.25rem;
371            }
372
373            .baseline-nav button {
374                padding: 0.4rem 0.8rem;
375                font-size: 0.8rem;
376            }
377        }
378
379        /* Simulation Section Styles */
380        .simulation-section {
381            margin: 0.4rem 0;
382        }
383
384        .simulation-title {
385            text-align: center;
386            margin-bottom: 0.5rem;
387            color: #333;
388        }
389
390        .task-section {
391            margin: 0.3rem 0;
392        }
393
394        .task-title {
395            text-align: center;
396            /* margin-bottom: 2rem; */
397            margin-bottom: 0rem;
398            color: #2c3e50;
399            font-size: 1.2rem;
400            font-weight: 600;
401        }
402
403        .task-comparison {
404            display: flex;
405            gap: 0.5rem;
406            margin: 1rem 0;
407            /* align-items: flex-start; */
408            align-items: stretch;
409        }
410
411        .comparison-panel {
412            display: flex;
413            flex-direction: column;
414            align-items: center;
415            width: 100%;
416        }
417
418        .comparison-panel video {
419            width: 100%;
420            height: auto;
421            aspect-ratio: 1 / 1;
422            object-fit: contain;
423            border-radius: 8px;
424            margin: 0;
425            padding: 0;
426        }
427
428        .dexmg .comparison-panel video {
429            aspect-ratio: 16 / 9;
430        }
431
432        .comparison-panel h4 {
433            margin-bottom: 0.5rem;
434            color: #2c3e50;
435            font-size: 1.1rem;
436            font-weight: 600;
437        }
438
439        .comparison-panel .description {
440            font-size: 0.9rem;
441            color: #666;
442            line-height: 1.4;
443            text-align: center;
444            margin-top: 0.5rem;
445            /* margin-top: auto; */
446        }
447
448        .baseline-item .description {
449            margin-top: 0.1rem;
450            /* margin-top: auto; */
451        }
452
453        .compare-acg {
454            background: #e6f4ff;
455            color: rgb(0, 90, 190);
456            border: 1px solid rgb(0, 90, 190);
457        }
458
459        .compare-no-acg {
460            background: #f0f0f0;
461            /* light gray */
462            color: #555555;
463            /* dark gray text */
464            border: 1px solid #9e9e9e;
465            /* gray border */
466        }
467
468        /* Responsive for simulation section */
469        @media screen and (max-width: 768px) {
470            .task-comparison {
471                flex-direction: column;
472                gap: 1rem;
473            }
474
475            /* .comparison-panel video {
476        height: 250px;
477      } */
478        }
479
480        .custom-footer {
481            padding: 1.5rem 0;
482            background: #fafafa;
483            border-top: 1px solid #e5e5e5;
484            color: #666;
485        }
486
487        @media screen and (max-width: 768px) {
488            .custom-footer {
489                padding: 2rem 0.7rem;
490            }
491        }
492    </style>
493</head>
494
495<body>
496    <!-- 
497    <nav class="navbar" role="navigation" aria-label="main navigation">
498        <div class="navbar-brand">
499            <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
500                <span aria-hidden="true"></span>
501                <span aria-hidden="true"></span>
502                <span aria-hidden="true"></span>
503            </a>
504        </div>
505        <div class="navbar-menu">
506            <div class="navbar-start" style="flex-grow: 1; justify-content: center;">
507                <a class="navbar-item" href="">
508                    <span class="icon">
509                        <i class="fas fa-home"></i>
510                    </span>
511                </a>
512            </div>
513        </div>
514    </nav> -->
515
516    <section class="hero">
517        <div class="hero-body">
518            <div class="container is-max-desktop">
519                <div class="columns is-centered">
520                    <div class="column has-text-centered">
521                        <h1 class="title is-1 publication-title">
522                            <span
523                                style="background: linear-gradient(to right, #0056b3, #538ccd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">EgoX</span>:
524                            Egocentric Video Generation from a&nbsp;Single Exocentric Video
525                        </h1>
526                        <div class="is-size-5 publication-authors">
527                            <span class="author-block"><a href="https://keh0t0.github.io/" target="_blank"
528                                    rel="noopener noreferrer">Taewoong
529                                    Kang*<sup>1</sup></a></span>,
530                            <span class="author-block"><a href="https://kinam0252.github.io/" target="_blank"
531                                    rel="noopener noreferrer">Kinam
532                                    Kim*<sup>1</sup></a></span>,
533                            <span class="author-block"><a href="https://linkedin.com/in/dohyeon-kim-a79231347"
534                                    target="_blank" rel="noopener noreferrer">Dohyeon
535                                    Kim*<sup>2</sup></a></span>,
536                            <span class="author-block"><a href="https://pmh9960.github.io/" target="_blank"
537                                    rel="noopener noreferrer">Minho
538                                    Park<sup>1</sup></a></span>,
539                            <span class="author-block"><a href="https://junhahyung.github.io/" target="_blank"
540                                    rel="noopener noreferrer">Junha
541                                    Hyung<sup>1</sup></a></span>,
542                            <span class="author-block"><a href="https://sites.google.com/site/jaegulchoo/"
543                                    target="_blank" rel="noopener noreferrer">Jaegul Choo<sup>1</sup></a></span>
544                        </div>
545                        <div class="is-size-6 has-text-centered"
546                            style="margin-top: 0.25rem; margin-bottom: 0.25rem; color: #666;">
547                            * equal contribution
548                        </div>
549                        <div class="is-size-5 has-text-centered" style="margin-bottom: 0.75rem; color: #666;">
550                            <sup>1</sup>KAIST AI &nbsp;&nbsp; <sup>2</sup>Seoul National University
551                        </div>
552                        <div class="is-size-5 publication-authors logo-row">
553                            <!-- <img src="static/images/davian_robotics_2.png" alt="DAVIAN Robotics Logo" /> -->
554                            <img src="static/images/kaist_ai_logo.png" alt="KAIST AI Logo" />
555                            <img src="static/images/snu_ui.png" alt="SNU Logo" />
556                            <!-- <img src="static/images/snu_logo.png" alt="Seoul National University Logo" /> -->
557                        </div>
558
559                        <div class="is-size-4 has-text-centered"
560                            style="margin-top: 1.5rem; margin-bottom: 0.5rem; color: #555; font-weight: 500;">
561                            CVPR 2026
562                        </div>
563
564                        <!-- links -->
565                        <div class="column has-text-centered">
566                            <div class="publication-links">
567                                <span class="link-block">
568                                    <a href="https://arxiv.org/abs/2512.08269"
569                                        class="external-link button is-normal is-rounded is-dark">
570                                        <span class="icon">
571                                            <i class="ai ai-arxiv"></i>
572                                        </span>
573                                        <span>arXiv</span>
574                                    </a>
575                                </span>
576                                <span class="link-block">
577                                    <a href="https://github.com/DAVIAN-Robotics/EgoX"
578                                        class="external-link button is-normal is-rounded is-dark">
579                                        <span class="icon">
580                                            <i class="fab fa-github"></i>
581                                        </span>
582                                        <span>Code</span>
583                                    </a>
584                                </span>
585                            </div>
586                        </div>
587                    </div>
588                </div>
589            </div>
590        </div>
591    </section>
592
593    <!-- Teaser Section -->
594    <section class="section" id="method" style="padding-top: 0rem;">
595        <div class="container is-max-desktop">
596            <div class="columns is-centered">
597                <div class="column is-five-sixths">
598                    <!-- <h2 class="title is-3 simulation-title">Teaser</h2> -->
599                    <!-- Navigation Buttons (Outside the comparison boxes) -->
600                    <div class="baseline-group">
601                        <div class="baseline-nav" style="margin-bottom: 1rem;">
602                            <button class="baseline-btn active" data-baseline="Joker">🤡 Joker</button>
603                            <button class="baseline-btn" data-baseline="ironman">🤖 Iron Man</button>
604                            <button class="baseline-btn" data-baseline="blackwidow">🕷️ Blackwidow</button>
605                            <!-- <button class="baseline-btn" data-baseline="captain">🛡️ Captain America</button> -->
606                            <button class="baseline-btn" data-baseline="tabletennis">🏓 Table Tennis</button>
607                        </div>
608                        <div class="content" style="margin-bottom: 2rem;">
609                            <figure>
610                                <!-- Joker -->
611                                <div class="baseline-item active" id="Joker">
612                                    <div align="center">
613                                        <video controls muted loop playsinline webkit-playsinline autoplay
614                                            preload="metadata" src="static/videos/joker_infer.mp4" width="100%"
615                                            type="video/mp4"
616                                            style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
617                                        </video>
618                                    </div>
619                                    <figcaption class="is-size-6" style="margin-top: 0.5rem; color: #666;">
620                                        <strong>"The Dark Knight" - Joker</strong>
621                                    </figcaption>
622                                </div>
623                                <!-- Ironman -->
624                                <div class="baseline-item" id="ironman">
625                                    <div align="center">
626                                        <video controls muted loop playsinline webkit-playsinline autoplay
627                                            preload="metadata" src="static/videos/ironman_infer.mp4" width="100%"
628                                            type="video/mp4"
629                                            style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
630                                        </video>
631                                    </div>
632                                    <figcaption class="is-size-6" style="margin-top: 0.5rem; color: #666;">
633                                        <strong>"Iron Man" - Pepper Potts</strong>
634                                    </figcaption>
635                                </div>
636                                <!-- Hulk -->
637                                <div class="baseline-item" id="blackwidow">
638                                    <div align="center">
639                                        <video controls muted loop playsinline webkit-playsinline autoplay
640                                            preload="metadata" src="static/videos/hulk_blackwidow.mp4" width="100%"
641                                            type="video/mp4"
642                                            style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
643                                        </video>
644                                    </div>
645                                    <figcaption class="is-size-6" style="margin-top: 0.5rem; color: #666;">
646                                        <strong>"Avengers: Age of Ultron" - Hulk</strong>
647                                    </figcaption>
648                                </div>
649                                <!-- captain -->
650                                <div class="baseline-item" id="captain">
651                                    <div align="center">
652                                        <video controls muted loop playsinline webkit-playsinline autoplay
653                                            preload="metadata" src="static/videos/captain.mp4" width="100%"
654                                            type="video/mp4"
655                                            style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
656                                        </video>
657                                    </div>
658                                    <figcaption class="is-size-6" style="margin-top: 0.5rem; color: #666;">
659                                        <strong>"Captain America" - Iron Man</strong>
660                                    </figcaption>
661                                </div>
662                                <!-- tabletennis -->
663                                <div class="baseline-item" id="tabletennis">
664                                    <div align="center">
665                                        <video controls muted loop playsinline webkit-playsinline autoplay
666                                            preload="metadata" src="static/videos/tabletennis.mp4" width="100%"
667                                            type="video/mp4"
668                                            style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
669                                        </video>
670                                    </div>
671                                    <figcaption class="is-size-6" style="margin-top: 0.5rem; color: #666;">
672                                        <strong>"PARIS 2024" - Table tennis player</strong>
673                                    </figcaption>
674                                </div>
675                            </figure>
676                        </div>
677                    </div>
678
679
680                    <!-- <div class="content" style="margin-bottom: 2rem;">
681                        <figure>
682                            <div align="center">
683                                <video controls muted loop playsinline webkit-playsinline autoplay preload="metadata"
684                                    src="./assets/1_hunyuan_storm.mp4" width="100%" type="video/mp4"
685                                    style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
686                                </video>
687                            </div>
688                            <figcaption class="is-size-6" style="margin-top: 0.5rem; color: #666;">
689                                360-degree panoramic video generated by <em>SphereDiff</em>. Generation Caption is
690                                "Storm, Ocean, Storm clouds, White foam swirls, etc."
691                                <br>
692                            </figcaption>
693                        </figure>
694                    </div> -->
695
696                </div>
697            </div>
698        </div>
699    </section>
700
701    <!-- Abstract. -->
702    <section class="section" style="padding-top: 0.5rem;">
703        <div class="container is-max-desktop">
704            <div class="columns is-centered has-text-centered">
705                <div class="column is-three-fourths">
706                    <h2 class="title is-3">Abstract</h2>
707                    <div class="content has-text-justified">
708                        <p>
709                            Egocentric perception enables humans to experience and
710                            understand the world directly from their own point of view.
711                            Translating exocentric (third-person) videos into egocentric
712                            (first-person) videos opens up new possibilities for immersive
713                            understanding but remains highly challenging due to
714                            extreme camera pose variations and minimal view overlap.
715                            This task requires faithfully preserving visible content while
716                            synthesizing unseen regions in a geometrically consistent
717                            manner. To achieve this, we present <strong>EgoX</strong>, a novel framework
718                            for generating egocentric videos from a single exocentric input.
719                            <strong>EgoX</strong> leverages the pretrained spatio-temporal
720                            knowledge of large-scale video diffusion models through
721                            lightweight LoRA adaptation and introduces a unified conditioning
722                            strategy that combines exocentric and egocentric
723                            priors via width- and channel-wise concatenation. Additionally,
724                            a geometry-guided self-attention mechanism selectively
725                            attends to spatially relevant regions, ensuring geometric
726                            coherence and high visual fidelity. Our approach
727                            achieves coherent and realistic egocentric video generation
728                            while demonstrating strong scalability and robustness across unseen and in-the-wild videos.
729                        </p>
730                    </div>
731                    <!-- Thumbnail Video -->
732                    <!-- <div <figure>
733                        <img src="./static/images/teaser.png" alt="Conceptual illustration of ACG"
734                            style="height: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);" />
735                        <figcaption class="is-size-6" style="margin-top: 0.5rem; color: #666;">
736                            <strong>SphereDiff enables tuning-free 360° panorama generation via spherical latent. It is
737                                compatible with various diffusion backbones, including <a
738                                    href="https://github.com/black-forest-labs/flux" target="_blank"
739                                    rel="noopener">FLUX</a>, <a href="https://github.com/NVlabs/Sana" target="_blank"
740                                    rel="noopener">SANA</a>, and <a
741                                    href="https://github.com/Tencent-Hunyuan/HunyuanVideo" target="_blank"
742                                    rel="noopener">HunyuanVideo</a>.
743                        </figcaption>
744                        </figure>
745                    </div> -->
746                </div>
747            </div>
748        </div>
749    </section>
750
751    <!-- Motivation Section -->
752    <!-- <section class="section" id="method" style="padding-top: 2rem;">
753        <div class="container is-max-desktop">
754            <div class="columns is-centered">
755                <div class="column is-five-sixths">
756                    <h2 class="title is-3 simulation-title">Motivation</h2>
757                    <div class="content concept-overview" style="margin-bottom: 3rem;">
758                        <figure>
759                            <img src="./static/images/motivation.png" alt="Responsive image"
760                                style="height: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);" />
761                            <figcaption class="is-size-6" style="margin-top: 0.5rem; color: #666;">
762                                <strong>Motivation.</strong> Previous finetuning approaches (360 LoRA, PanFusion) often
763                                fail
764                                to generate
765                                continuous
766                                scenes near the pole due to the limited ERP dataset. The tuning-free approach
767                                (DynamicScaler) also
768                                fails to generate a seamless frame due to the ERP latent representation. However,
769                                <em>SphereDiff</em>, generates a seamless image.
770                            </figcaption>
771                        </figure>
772                    </div>
773                </div>
774            </div>
775        </div>
776    </section> -->
777
778    <!-- Method Section -->
779    <section class="section" id="method" style="padding-top: 2rem;">
780        <div class="container is-max-desktop">
781            <div class="columns is-centered">
782                <div class="column is-five-sixths">
783                    <h2 class="title is-3 simulation-title">Overall Pipeline</h2>
784                    <!-- method -->
785                    <div class="content" style="margin-bottom: 2rem;">
786                        <figure>
787                            <div style="display: inline-block; background-color: #fff; padding: 1rem; border-radius: 10px; 
788                  box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin: 0rem 0;">
789                                <img src="./static/images/egox_overview.png" alt="Method overview"
790                                    style="display: block; width: 100%; height: auto; border-radius: 8px;" />
791                            </div>
792
793                            <figcaption class="is-size-6" style="margin-top: 0.5rem; color: #666;">
794                                Given an exocentric video input, we first lift it into a 3D point cloud and render the
795                                scene from the egocentric
796                                viewpoint to obtain the egocentric prior video. The clean exocentric video latent and
797                                the egocentric prior latent are combined via width-
798                                wise and channel-wise concatenation in the latent space, and then fed into a pretrained
799                                video diffusion model equipped with the proposed
800                                geometry-guided self-attention.
801                            </figcaption>
802                        </figure>
803                    </div>
804
805                </div>
806            </div>
807        </div>
808    </section>
809
810    <!-- Method Section -->
811    <section class="section" id="method" style="padding-top: 2rem;">
812        <div class="container is-max-desktop">
813            <div class="columns is-centered">
814                <div class="column is-five-sixths">
815                    <h2 class="title is-3 simulation-title">Geometry-Guided Self-Attention</h2>
816                    <!-- method -->
817                    <div class="content" style="margin-bottom: 2rem;">
818                        <figure>
819                            <div style="display: inline-block; background-color: #fff; padding: 1rem; border-radius: 10px; 
820                  box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin: 0rem 0;">
821                                <img src="./static/images/egox_gga.png" alt="Method overview"
822                                    style="display: block; width: 100%; height: auto; border-radius: 8px;" />
823                            </div>
824
825                            <figcaption class="is-size-6" style="margin-top: 0.5rem; color: #666;">
826                                <strong>Geometry-Guided Self-Attention. </strong>3D direction similarities between
827                                egocentric queries and exocentric keys are used
828                                as an additive bias in the attention map, guiding the model to focus on geometrically
829                                aligned regions. Although the orange and red directions
830                                are the same key tokens, their directions differ due to different camera centers. The
831                                blue–red pairs have similar directions and thus receive
832                                higher scores, whereas the green–orange pairs have opposite directions and obtain lower
833                                scores.
834                            </figcaption>
835                        </figure>
836                    </div>
837
838                    <div class="content" style="margin-bottom: 2rem;">
839                        <figure>
840                            <div style="display: flex; gap: 1rem; align-items: flex-start;">
841                                <div style="flex: 0.8; display: inline-block; background-color: #fff; padding: 1rem; border-radius: 10px; 
842                  box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
843                                    <img src="./static/images/egox_gga_vis.png" alt="GGA Visualization"
844                                        style="display: block; width: 100%; height: auto; border-radius: 8px;" />
845                                </div>
846                                <div style="flex: 1.2; display: flex; flex-direction: column;">
847                                    <div style="background-color: #fff; padding: 1rem; border-radius: 10px; 
848                  box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 1rem;">
849                                        <img src="./static/images/egox_gga_stanlee.png" alt="GGA Stan Lee"
850                                            style="display: block; width: 100%; height: auto; border-radius: 8px;" />
851                                    </div>
852                                    <p class="is-size-6" style="text-align: center; color: #666; margin: 0;">
853                                        <em><strong>Attention Visualization. & GGA benefits example.</strong>
854                                            Visualization of the attention weights when querying the center token of the
855                                            egocentric view. Without GGA, the model attends to unrelated regions outside
856                                            the visible area, leading to the generation of unwanted events. With GGA,
857                                            attention is concentrated on spatially relevant regions, effectively
858                                            focusing only on the visible area and preventing unwanted event
859                                            generation.</em>
860                                    </p>
861                                </div>
862                            </div>
863                        </figure>
864                    </div>
865
866                </div>
867            </div>
868        </div>
869    </section>
870
871    <!-- Qualitative Comparison Section -->
872    <section class="section" style="padding-top: 0.5rem;">
873        <div class="container is-max-desktop">
874            <div class="columns is-centered">
875                <div class="column is-five-sixths">
876                    <h2 class="title is-3 comparison-title">Qualitative Results</h2>
877                    <!-- <div class="content has-text-centered">
878                        <p class="is-size-5" style="margin-bottom: 2rem; color: #666;">
879                            Visual comparison of different methods on real-world strawberry-picking tasks.<br>
880                            ACG produces smoother and more coherent motions than baselines, resulting in higher success
881                            rates.
882                        </p>
883                    </div> -->
884
885                    <div class="baseline-group">
886                        <div class="category-nav" style="margin-bottom: 1rem;">
887                            <button class="category-btn active" data-baseline="soccer">⚽️ Soccer</button>
888                            <button class="category-btn" data-baseline="basketball">🏀 Basketball</button>
889                            <button class="category-btn" data-baseline="cooking">🍳 Cooking</button>
890                            <button class="category-btn" data-baseline="dance">💃🏻 Dance</button>
891                            <button class="category-btn" data-baseline="covid">🧪 COVID test</button>
892                        </div>
893                        <div class="content" style="margin-bottom: 2rem;">
894                            <figure>
895                                <div
896                                    style="display: flex; justify-content: center; gap: 0; margin-bottom: 0.25rem; max-width: 100%;">
897                                    <div style="width: 46.67%; display: flex; justify-content: center;">
898                                        <span class="compare-label compare-exo">Exo view</span>
899                                    </div>
900                                    <div style="width: 26.67%; display: flex; justify-content: center;">
901                                        <span class="compare-label compare-ego-gt">Ego GT</span>
902                                    </div>
903                                    <div style="width: 26.67%; display: flex; justify-content: center;">
904                                        <span class="compare-label compare-ours">Ours</span>
905                                    </div>
906                                </div>
907
908                                <!-- Soccer -->
909                                <div class="baseline-item active" id="soccer">
910                                    <div align="center">
911                                        <video controls muted loop playsinline webkit-playsinline autoplay
912                                            preload="metadata" src="./static/videos/cmu_soccer06_6_877_925.mp4"
913                                            width="100%" type="video/mp4"
914                                            style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
915                                        </video>
916                                        <video controls muted loop playsinline webkit-playsinline autoplay
917                                            preload="metadata" src="./static/videos/cmu_soccer14_5_2451_2499.mp4"
918                                            width="100%" type="video/mp4"
919                                            style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
920                                        </video>
921                                        <video controls muted loop playsinline webkit-playsinline autoplay
922                                            preload="metadata" src="./static/videos/iiith_soccer_042_6_1000_1048.mp4"
923                                            width="100%" type="video/mp4"
924                                            style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
925                                        </video>
926                                    </div>
927                                </div>
928
929                                <!-- Cooking -->
930                                <div class="baseline-item" id="cooking">
931                                    <div align="center">
932                                        <video controls muted loop playsinline webkit-playsinline autoplay
933                                            preload="metadata" src="./static/videos/iiith_cooking_43_1_1000_1048.mp4"
934                                            width="100%" type="video/mp4"
935                                            style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
936                                        </video>
937                                        <video controls muted loop playsinline webkit-playsinline autoplay
938                                            preload="metadata" src="./static/videos/iiith_cooking_57_2_2451_2499.mp4"
939                                            width="100%" type="video/mp4"
940                                            style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
941                                        </video>
942                                        <video controls muted loop playsinline webkit-playsinline autoplay
943                                            preload="metadata" src="./static/videos/iiith_cooking_84_2_1000_1048.mp4"
944                                            width="100%" type="video/mp4"
945                                            style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
946                                        </video>
947                                    </div>
948                                </div>
949
950                                <!-- Covid test -->
951                                <div class="baseline-item" id="covid">
952                                    <div align="center">
953                                        <video controls muted loop playsinline webkit-playsinline autoplay
954                                            preload="metadata"
955                                            src="./static/videos/georgiatech_covid_05_8_2000_2048.mp4" width="100%"
956                                            type="video/mp4"
957                                            style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
958                                        </video>
959                                        <video controls muted loop playsinline webkit-playsinline autoplay
960                                            preload="metadata" src="./static/videos/sfu_covid_009_4_2000_2048.mp4"
961                                            width="100%" type="video/mp4"
962                                            style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
963                                        </video>
964                                        <video controls muted loop playsinline webkit-playsinline autoplay
965                                            preload="metadata"
966                                            src="./static/videos/georgiatech_covid_13_8_1000_1048.mp4" width="100%"
967                                            type="video/mp4"
968                                            style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
969                                        </video>
970                                    </div>
971                                </div>
972
973                                <!-- Dance -->
974                                <div class="baseline-item" id="dance">
975                                    <div align="center">
976                                        <video controls muted loop playsinline webkit-playsinline autoplay
977                                            preload="metadata" src="./static/videos/uniandes_dance_008_50_877_925.mp4"
978                                            width="100%" type="video/mp4"
979                                            style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
980                                        </video>
981                                        <video controls muted loop playsinline webkit-playsinline autoplay
982                                            preload="metadata" src="./static/videos/uniandes_dance_013_7_1000_1048.mp4"
983                                            width="100%" type="video/mp4"
984                                            style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
985                                        </video>
986                                        <video controls muted loop playsinline webkit-playsinline autoplay
987                                            preload="metadata" src="./static/videos/uniandes_dance_020_59_877_925.mp4"
988                                            width="100%" type="video/mp4"
989                                            style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
990                                        </video>
991                                    </div>
992                                </div>
993
994                                <!-- Basketball -->
995                                <div class="baseline-item" id="basketball">
996                                    <div align="center">
997                                        <video controls muted loop playsinline webkit-playsinline autoplay
998                                            preload="metadata" src="./static/videos/sfu_basketball014_4_1000_1048.mp4"
999                                            width="100%" type="video/mp4"
1000                                            style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
1001                                        </video>
1002                                        <video controls muted loop playsinline webkit-playsinline autoplay
1003                                            preload="metadata" src="./static/videos/sfu_basketball_03_16_1000_1048.mp4"
1004                                            width="100%" type="video/mp4"
1005                                            style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
1006                                        </video>
1007                                        <video controls muted loop playsinline webkit-playsinline autoplay
1008                                            preload="metadata" src="./static/videos/sfu_basketball_05_7_2451_2499.mp4"
1009                                            width="100%" type="video/mp4"
1010                                            style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
1011                                        </video>
1012                                    </div>
1013                                </div>
1014
1015                                <figcaption class="is-size-6" style="margin-top: 0.5rem; color: #666;">
1016                                    <strong>Qualitative results. </strong> We compare our generated egocentric videos
1017                                    (Ours) with the ground truth egocentric videos (Ego GT) given the exocentric input
1018                                    (Exo view). Our method generates realistic and coherent egocentric videos that
1019                                    closely match the ground truth.
1020                                    <br>
1021                                    <!-- The audio was synthesized via <a href="https://arxiv.org/abs/2412.15322"
1022                                        target="_blank">MMAudio</a>. -->
1023                                </figcaption>
1024                            </figure>
1025                        </div>
1026                    </div>
1027
1028                    <div class="content has-text-centered">
1029                        <p class="is-size-5" style="margin-bottom: 0.5rem; margin-top: 1rem; color: #666;">
1030                            <strong>Qualitative comparison </strong>
1031                        </p>
1032                    </div>
1033
1034                    <div class="content" style="margin-bottom: 2rem;">
1035                        <figure>
1036                            <img src="static/images/egox_quali_comparison.png" alt="Quantitative Results"
1037                                style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);" />
1038                        </figure>
1039                    </div>
1040
1041                    <div class="content has-text-centered">
1042                        <p class="is-size-5" style="margin-bottom: 0.5rem; margin-top: 1rem; color: #666;">
1043                            <strong>Ablation qualitative comparison </strong>
1044                        </p>
1045                    </div>
1046
1047                    <div class="content" style="margin-bottom: 2rem;">
1048                        <figure>
1049                            <img src="static/images/egox_quali_ablation.png" alt="Quantitative Results"
1050                                style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);" />
1051                        </figure>
1052                    </div>
1053                </div>
1054            </div>
1055        </div>
1056    </section>
1057
1058    <!-- Quantitative Results -->
1059    <section class="section" style="padding-top: 0.5rem;">
1060        <div class="container is-max-desktop">
1061            <div class="columns is-centered">
1062                <div class="column is-five-sixths">
1063                    <h2 class="title is-3 comparison-title">Quantitative Results</h2>
1064                    <div class="content has-text-centered">
1065                        <p class="is-size-5" style="margin-bottom: 2rem; color: #666;">
1066                            <strong> Quantitative results. </strong> EgoX outperforms previous approaches by a large
1067                            margin, achieving state-of-the-art performance on diverse and challenging exo-to-ego video
1068                            generation benchmarks
1069                        </p>
1070                    </div>
1071
1072                    <div class="content" style="margin-bottom: 2rem;">
1073                        <figure>
1074                            <img src="static/images/egox_quanti.png" alt="Quantitative Results"
1075                                style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);" />
1076                        </figure>
1077                    </div>
1078                    <div class="content has-text-centered">
1079                        <p class="is-size-5" style="margin-bottom: 2rem; color: #666;">
1080                            <strong> Ablation Study Results. </strong> Performance comparison by removing each core
1081                            component of our framework.
1082                        </p>
1083                    </div>
1084
1085                    <figure>
1086                        <img src="static/images/egox_ablation.png" alt="Quantitative Results"
1087                            style="width:100%;height:auto;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.1);" />
1088                    </figure>
1089
1090                </div>
1091
1092            </div>
1093        </div>
1094        </div>
1095    </section>
1096
1097    <!-- Acknowledgement, Footer -->
1098    <footer class="footer custom-footer">
1099        <div class="content has-text-centered" style="color: #666;">
1100            <p style="margin-bottom: 0.5rem;">
1101                <!-- TODO -->
1102                KAIST AI |
1103                <a href="" target="_blank" rel="noopener">arXiv</a>
1104                &nbsp;·&nbsp;
1105                <a href="" target="_blank" rel="noopener">
1105Code</a>
1106                <!-- &nbsp;·&nbsp;
1107                <a href="" target="_blank" rel="noopener">Project Page</a> -->
1108            </p>
1109        </div>
1110    </footer>
1111
1112    
1112<script>
1113        function enforceAutoplayLoop(video) {
1114            // Play on load
1115            if (video.paused) video.play();
1116            // Always loop
1117            video.addEventListener('ended', function () {
1118                video.currentTime = 0;
1119                video.play();
1120            });
1121            // Prevent seeking to pause only if not paused by user
1122            video.addEventListener('seeking', function () {
1123                if (!video.paused) video.play();
1124            });
1125        }
1126
1127        // 동영상 모두 동일하게 0초에서 시작
1128        function syncAllVideos() {
1129            const videos = document.querySelectorAll('video');
1130            videos.forEach(v => {
1131                try {
1132                    v.currentTime = 0;
1133                    v.play();
1134                } catch (e) { }
1135            });
1136        }
1137
1138        document.addEventListener('DOMContentLoaded', function () {
1139            document.querySelectorAll('video').forEach(enforceAutoplayLoop);
1140            syncAllVideos();
1141        });
1142
1143        // Observe for dynamically added/replaced videos
1144        const observer = new MutationObserver(() => {
1145            document.querySelectorAll('video').forEach(enforceAutoplayLoop);
1146            syncAllVideos();
1147        });
1148        observer.observe(document.body, { childList: true, subtree: true });
1149
1150        // Baseline comparison functionality
1151        function initBaselineComparison() {
1152            const groups = document.querySelectorAll('.baseline-group');
1153
1154            groups.forEach(group => {
1155                const buttons = group.querySelectorAll('.baseline-btn, .category-btn');
1156                const items = group.querySelectorAll('.baseline-item');
1157
1158                buttons.forEach(button => {
1159                    button.addEventListener('click', function () {
1160                        const targetBaseline = this.getAttribute('data-baseline');
1161
1162                        // Remove active class from all buttons and items IN THIS GROUP
1163                        buttons.forEach(btn => btn.classList.remove('active'));
1164                        items.forEach(item => item.classList.remove('active'));
1165
1166                        // Add active class to clicked button and corresponding item
1167                        this.classList.add('active');
1168                        const targetItem = document.getElementById(targetBaseline);
1169                        if (targetItem) {
1170                            targetItem.classList.add('active');
1171
1172                            // Sync videos when switching
1173                            setTimeout(() => {
1174                                syncAllVideos();
1175                            }, 100);
1176                        }
1177                    });
1178                });
1179            });
1180        }
1181
1182        // Initialize baseline comparison when DOM is loaded
1183        document.addEventListener('DOMContentLoaded', function () {
1184            initBaselineComparison();
1185        });
1186    </script>
1186
1187
1188</body>
1189
1190</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.