PageSourceSearch

https://kaist-viclab.github.io/PropFly_site/

html kaist-viclab.github.io collected 2026-10-03 09:26:27 UTC 33,700 bytes, 813 lines download raw bytes

1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="description" content="PropFly: Learning to Propagate via On-the-Fly Supervision from Pre-trained Video Diffusion Models">
6  <meta name="keywords" content="PropFly, Propagation, Video Diffusion Models, CVPR 2026">
7  <meta name="viewport" content="width=device-width, initial-scale=1">
8  
9  <title>PropFly Project Page</title>
10  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='2' fill='%23f97316'/%3E%3Cpath d='M12 12 C12 8 16 5 19 5 C22 5 20 10 12 12 Z' fill='%23f97316' opacity='0.8'/%3E%3Cpath d='M12 12 C15.46 14 17 19 15.5 21.6 C14 24.2 10 20 12 12 Z' fill='%23f97316' opacity='0.8'/%3E%3Cpath d='M12 12 C8.54 14 2 15 0.5 12.4 C-1 9.8 8 10 12 12 Z' fill='%23f97316' opacity='0.8'/%3E%3C/svg%3E">
11
12  <link href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro" rel="stylesheet">
13
14  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
15  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
16  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
17  <link rel="stylesheet" href="./static/css/index.css">
18  
19  <style>
20    /* --- General Styles --- */
21    :root {
22        --primary-color: #000000; 
23        /* [Theme] Orange & Blue */
24        --theme-color: #f97316;       /* Vibrant Orange */
25        --theme-dark: #ea580c;        /* Darker Orange */
26        --gradient-start: #fb923c;    /* Light Orange */
27        --gradient-end: #3b82f6;      /* Royal Blue */
28    }
29    
30    /* Gradient Text (Orange -> Red -> Blue) */
31    .text-gradient { 
32        background: -webkit-linear-gradient(120deg, #f97316, #ef4444, #3b82f6); 
33        -webkit-background-clip: text; 
34        -webkit-text-fill-color: transparent; 
35        background-clip: text;
36    }
37    
38    .title.is-3 {
39        color: var(--primary-color);
40        border-left: none;
41        padding-left: 0;
42        font-weight: 800;
43    }
44    .content b, .content strong {
45        color: var(--primary-color);
46        font-weight: 700;
47    }
48
49    /* --- PropFly Icon Animation --- */
50    @keyframes prop-spin {
51        0% { transform: rotate(0deg); }
52        100% { transform: rotate(360deg); }
53    }
54    .prop-icon {
55        display: inline-block;
56        animation: prop-spin 10s linear infinite;
57    }
58    .publication-title:hover .prop-icon {
59        animation-duration: 2s; /* Hover시 더 빠르게 */
60    }
61
62    /* --- Caption Box Styles --- */
63    .caption-wrapper { margin-bottom: 2rem; }
64    
65    .caption-box {
66      background: #fff;
67      border-radius: 8px;
68      padding: 12px 15px;
69      border: 1px solid #e5e7eb;
70      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
71      height: 100%;
72      display: flex;
73      flex-direction: column;
74      justify-content: center;
75      text-align: left;
76    }
77    
78    /* Target Box Style */
79    .caption-box.target-box {
80      background-color: #ffffff;       
81      border: 2px solid #fdba74;       
82      box-shadow: 0 4px 12px rgba(249, 115, 22, 0.15); 
83    }
84
85    .caption-header {
86      font-size: 0.75rem;
87      font-weight: 700;
88      text-transform: uppercase;
89      color: #888;
90      margin-bottom: 4px;
91      letter-spacing: 0.5px;
92    }
93
94    .caption-content {
95      font-family: 'Google Sans', sans-serif;
96      font-size: 1.05rem;
97      color: #333;
98      line-height: 1.4;
99      white-space: normal;
100      word-wrap: break-word;
101      word-break: keep-all; 
102      overflow-wrap: break-word;
103    }
104
105    /* --- Video/Image Containers --- */
106    .demo-video, .reference-image, .comp-video, .comp-image {
107      width: 100%;
108      border-radius: 8px;
109      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
110      display: block;
111      aspect-ratio: 16 / 9;
112      object-fit: cover;
113    }
114    
115    .reference-frame-container, .comp-ref-container {
116      position: relative;
117      margin-bottom: 10px;
118      border-radius: 8px;
119      padding: 2px;
120      background: white;
121    }
122
123    .reference-frame-container { border: 2px solid var(--theme-color); } 
124    .comp-ref-container { border: 2px solid #aaa; }
125    
126    .frame-badge {
127      position: absolute;
128      top: -8px;
129      left: 10px;
130      background-color: var(--theme-color);
131      color: white;
132      font-size: 0.65rem;
133      font-weight: bold;
134      padding: 2px 8px;
135      border-radius: 4px;
136      z-index: 5;
137    }
138    
139    /* --- Tab Styles --- */
140    .tabs.is-toggle li.is-active a {
141      background-color: var(--theme-color) !important;
142      border-color: var(--theme-color) !important;
143    }
144
145    /* --- Comparison List Styles --- */
146    .comparison-item {
147      background-color: #fafaf9; 
148      border-radius: 15px;
149      padding: 25px 20px;
150      margin-bottom: 40px;
151      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
152    }
153    
154    .comp-header {
155      font-size: 0.9rem;
156      font-weight: 700;
157      margin-bottom: 8px;
158      color: #555;
159    }
160    
161    .ours-header {
162      color: var(--theme-color);
163      font-weight: 800;
164    }
165
166    /* Ours Wrapper Gradient */
167    .ours-wrapper {
168      padding: 3px;
169      background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
170      border-radius: 8px;
171      box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
172    }
173    .ours-wrapper .comp-video { border-radius: 5px; }
174
175    /* --- Mobile Grid Buttons --- */
176    .mobile-comp-btn {
177        width: 100%;
178        padding: 10px 4px;
179        font-size: 0.85rem;
180        font-weight: 600;
181        border: 1px solid #dbdbdb;
182        background: white;
183        border-radius: 8px;
184        color: #363636;
185        cursor: pointer;
186        text-align: center;
187        transition: all 0.2s;
188        display: flex; 
189        align-items: center; 
190        justify-content: center;
191        height: 100%;
192    }
193
194    .mobile-comp-btn.is-active, 
195    .tabs-mobile-grid li.is-active a {
196        background-color: var(--theme-color) !important;
197        color: white !important;
198        border-color: var(--theme-color) !important;
199        box-shadow: 0 2px 6px rgba(249, 115, 22, 0.3);
200    }
201
202    #comp-mobile-tabs-container {
203        display: grid;
204        grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
205        gap: 8px;
206        margin-bottom: 20px;
207    }
208
209    /* --- Responsive --- */
210    @media screen and (max-width: 768px) {
211      .arrow-container { padding: 5px 0 !important; }
212      .arrow-container .fa-arrow-right { transform: rotate(90deg); }
213      .caption-box { text-align: center; }
214      .caption-container .columns { flex-direction: column; }
215      .hrbp-responsive { width: 100%; }
216      .comp-header { font-size: 0.8rem; }
217      
218      .tabs-mobile-grid ul {
219        display: grid !important; 
220        grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); 
221        gap: 8px;
222        border-bottom: none !important; 
223        display: block; 
224      }
225      .tabs-mobile-grid li { width: auto !important; display: block !important; margin: 0 !important; }
226      .tabs-mobile-grid li a { border-radius: 8px !important; border: 1px solid #dbdbdb !important; margin-bottom: 0 !important; height: 40px; }
227      .tabs.is-toggle li:first-child a, .tabs.is-toggle li:last-child a { border-radius: 8px !important; }
228    }
229    @media screen and (min-width: 769px) {
230        .hrbp-responsive { width: 50%; }
231    }
232  </style>
233</head>
234<body>
235
236  <section class="hero">
237    <div class="hero-body" style="padding-bottom: 0px;">
238      <div class="container is-max-widescreen">
239        <div class="columns is-centered">
240          <div class="column has-text-centered">
241            
242            <h1 class="title publication-title" style="font-weight: 800; font-size: 2.4rem;">
243              <span class="icon prop-icon" style="color: #f97316; vertical-align: middle; margin-right: 5px; font-size: 1.0em; width: 1.2em; height: 1.2em; position: relative; top: -3px;">
244                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%;">
245                    <circle cx="12" cy="12" r="2" fill="currentColor" stroke="none"></circle>
246                    <path d="M12 12 C12 8 16 5 19 5 C22 5 20 10 12 12 Z" fill="currentColor" opacity="0.8"></path>
247                    <path d="M12 12 C15.46 14 17 19 15.5 21.6 C14 24.2 10 20 12 12 Z" fill="currentColor" opacity="0.8"></path>
248                    <path d="M12 12 C8.54 14 2 15 0.5 12.4 C-1 9.8 8 10 12 12 Z" fill="currentColor" opacity="0.8"></path>
249                  </svg>
250              </span>
251              
252              <span style="background: -webkit-linear-gradient(120deg, #f97316, #db2777); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
253                PropFly: Learning to Propagate via On-the-Fly Supervision
254              </span>
255              <br>
256              <span style="color: #4b5563; font-size: 0.9em; font-weight: 600; letter-spacing: -0.5px; text-shadow: 1px 1px 1px rgba(0,0,0,0.05);">
257                  from Pre-trained Video Diffusion Models
258              </span>
259            </h1>
260            <h2 class="title is-4" style="margin-top: 20px; margin-bottom: 10px;">CVPR 2026</h2>
261            
262            <div class="is-size-5 publication-authors">
263              <span class="author-block">
264                <a href="https://wonozlo.github.io/">Wonyong Seo</a><sup>1*</sup>,
265              </span>
266              <span class="author-block" style="margin-left: 10px;">
267                <a href="https://sites.google.com/view/jaehomoon/">Jaeho Moon</a><sup>1*</sup>,
268              </span><br>
269              <span class="author-block">
270                <a href="https://sites.google.com/view/knuairlab/">Jaehyup Lee</a><sup>2†</sup>,
271              </span>
272              <span class="author-block" style="margin-left: 10px;">
273                <a href="https://sites.google.com/view/sooyekim">Soo Ye Kim</a><sup>3†</sup>,
274              </span>
275              <span class="author-block" style="margin-left: 10px;">
276                <a href="https://www.viclab.kaist.ac.kr/">Munchurl Kim</a><sup>1†</sup>
277              </span>
278            </div>
279            
280            <div class="is-size-5 publication-authors">
281              <span class="author-block"><sup>1</sup>Korea Advanced Institute of Science and Technology (KAIST),</span><br>
282              <span class="author-block"><sup>2</sup>Kyungpook National University,</span>
283              <span class="author-block" style="margin-left: 10px;"><sup>3</sup>Adobe Research</span>
284            </div>
285            <div class="is-size-6 publication-authors">
286              <span class="author-block"><sup>*</sup>Co-first authors (Equal contribution),</span>
287              <span class="author-block" style="margin-left: 10px;"><sup>†</sup>Co-corresponding authors</span>
288            </div>
289            
290            <div class="column has-text-centered">
291              <div class="publication-links">
292                <span class="link-block"><a href="https://arxiv.org/abs/2602.20583" class="external-link button is-normal is-rounded is-dark"><span class="icon"><i class="fas fa-file-pdf"></i></span><span>Paper</span></a></span>
293                <span class="link-block"><a href="https://arxiv.org/abs/2602.20583" class="external-link button is-normal is-rounded is-dark"><span class="icon"><i class="ai ai-arxiv"></i></span><span>arXiv</span></a></span>
294                <span class="link-block"><a href="https://github.com/pmjames16/PropFly" class="external-link button is-normal is-rounded is-dark"><span class="icon"><i class="fab fa-github"></i></span><span>Code</span></a></span>
295                <span class="link-block"><a href="https://huggingface.co/james16/PropFly" class="external-link button is-normal is-rounded is-dark"><span class="icon" style="font-size: 1.2em;">🤗</span><span>Model</span></a></span>
296              </div>
297            </div>
298          </div>
299        </div>
300      </div>
301    </div>
302  </section>
303
304  <section class="section">
305    <div class="container is-max-desktop" style="margin-top: 0px;">
306      <div class="columns is-centered has-text-centered">
307        <div class="column is-full-width">
308          <h2 class="title is-3">Video Propagation Demos</h2>
309          <div class="content has-text-centered">
310            <p class="is-size-5">
311              <span style="color: #ef4444; font-weight: 800;">Click</span> the tabs below to see how PropFly propagates edits.
312            </p>
313          </div>
314
315          <div class="tabs is-centered is-toggle is-rounded tabs-mobile-grid">
316            <ul id="demo-tabs">
317              </ul>
318          </div>
319
320          <div class="box" style="background-color: #fff7ed; border-radius: 15px; padding: 20px;">
321            
322            <div class="caption-wrapper mb-5">
323              <div class="columns is-vcentered is-variable is-2">
324                
325                <div class="column is-4-tablet is-12-mobile">
326                  <div class="caption-box source-box">
327                    <div class="caption-header">Source</div>
328                    <div id="demo-caption-src" class="caption-content">Loading...</div>
329                  </div>
330                </div>
331
332                <div class="column is-narrow has-text-centered arrow-container">
333                  <span class="icon is-medium has-text-grey-light">
334                    <i class="fas fa-arrow-right fa-lg"></i>
335                  </span>
336                </div>
337
338                <div class="column is-auto is-12-mobile">
339                  <div class="caption-box target-box">
340                    <div class="caption-header" style="color: #f97316;">Target</div>
341                    <div id="demo-caption-tgt" class="caption-content">Loading...</div>
342                  </div>
343                </div>
344
345              </div>
346            </div>
347
348            <div class="columns is-vcentered is-centered">
349              
350              <div class="column is-4 has-text-centered">
351                <p class="title is-5">Source Video</p>
352                <div class="video-wrapper">
353                  <video id="demo-src-video" class="demo-video" autoplay muted loop playsinline>
354                    <source src="" type="video/mp4">
355                  </video>
356                </div>
357              </div>
358
359              <div class="column is-4 has-text-centered">
360                <p class="title is-5">PropFly (Result 1)</p>
361                <div class="reference-frame-container">
362                  <span class="frame-badge">Edited First Frame 1</span>
363                  <img id="demo-ref-img-1" src="" alt="Reference Frame 1" class="reference-image">
364                </div>
365                <div class="video-wrapper">
366                  <video id="demo-res-video-1" class="demo-video" autoplay muted loop playsinline>
367                    <source src="" type="video/mp4">
368                  </video>
369                </div>
370              </div>
371
372              <div class="column is-4 has-text-centered">
373                <p class="title is-5">PropFly (Result 2)</p>
374                <div class="reference-frame-container">
375                  <span class="frame-badge">
375Edited First Frame 2</span>
376                  <img id="demo-ref-img-2" src="" alt="Reference Frame 2" class="reference-image">
377                </div>
378                <div class="video-wrapper">
379                  <video id="demo-res-video-2" class="demo-video" autoplay muted loop playsinline>
380                    <source src="" type="video/mp4">
381                  </video>
382                </div>
383              </div>
384
385            </div>
386          </div>
387
388        </div>
389      </div>
390    </div>
391  </section>
392
393  <section class="section">
394    <div class="container is-max-desktop">
395      <div class="columns is-centered has-text-centered">
396        <div class="column is-four-fifths">
397          <h2 class="title is-3">Abstract</h2>
398          <div class="content has-text-justified">
399            <p>
400              Propagation-based video editing enables precise user control by propagating a single edited frame into following frames while maintaining the original context. However, training such models typically requires large-scale, paired (source and edited) video datasets, which are costly and complex to acquire.
401            </p>
402            <p>
403              Hence, we propose <span style="color: #f97316; font-weight: 800;">PropFly</span>, a training pipeline for <span style="color: #f97316; font-weight: 700;">Prop</span>agation-based video editing, relying on on-the-<span style="color: #f97316; font-weight: 700;">Fly</span> supervision from pre-trained video diffusion models (VDMs) instead of requiring off-the-shelf datasets. Specifically, PropFly leverages one-step clean latent estimations with <b>varying Classifier-Free Guidance (CFG) scales</b> to synthesize diverse pairs of 'source' (low-CFG) and 'edited' (high-CFG) latents. Our pipeline enables an adapter to learn propagation via <b>Guidance-Modulated Flow Matching (GMFM) loss</b>, which guides the model to replicate the target transformation.
404            </p>
405            <p>
406              Our on-the-fly supervision ensures the model learns <b>temporally consistent</b> and dynamic transformations. Extensive experiments demonstrate that PropFly <b>significantly outperforms</b> state-of-the-art methods on various video editing tasks, producing high-quality results.
407            </p>
408          </div>
409        </div>
410      </div>
411    </div>
412  </section>
413
414  <section class="section">
415    <div class="container is-max-desktop">
416      <div class="columns is-centered has-text-centered">
417        <div class="column is-four-fifths">
418          <h2 class="title is-3">Citation</h2>
419          <div class="content has-text-left">
420            <pre style="background: #fafaf9; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1rem; overflow-x: auto;"><code>@article{seo2026propfly,
421                title={PropFly: Learning to Propagate via On-the-Fly Supervision from Pre-trained Video Diffusion Models},
422                author={Seo, Wonyong and Moon, Jaeho and Lee, Jaehyup and Kim, Soo Ye and Kim, Munchurl},
423                journal={arXiv preprint arXiv:2602.20583},
424                year={2026}
425              }</code></pre>
426          </div>
427        </div>
428      </div>
429    </div>
430  </section>
431
432  <section class="section">
433    <div class="container is-max-desktop">
434      <div class="columns is-centered has-text-centered">
435        <div class="column is-full-width">
436          <h2 class="title is-3">Proposed Framework</h2>
437          <div class="content has-text-justified">
438            <p>
439              The overall PropFly training pipeline.
440            </p>
441            <p>
442              <b>(a) Data Sampling & RSPF:</b> We sample a video-text pair and synthesize an augmented prompt by appending a random style description to enrich training diversity.
443            </p>
444            <p>
445              <b>(b) On-the-fly Data Pair Generation:</b> A frozen pre-trained VDM synthesizes structurally aligned yet semantically distinct source (low-CFG) and target (high-CFG) latent pairs on the fly.
446            </p>
447            <p>
448              <b>(c) Guidance-Modulated Flow Matching:</b> A trainable adapter learns to propagate edits by predicting the VDM's high-CFG velocity, conditioned on the source video structure and the edited first frame style via GMFM loss.
449            </p>
450          </div>
451          <img src="./static/images/main_architecture.png" class="interpolation-image" alt="Proposed Framework" style="width: 100%; margin-top: 0px;"/>
452          <p class="is-size-6 has-text-black"><b>Figure 1.</b>Overview of our PropFly training pipeline</p>
453        </div>
454      </div>
455    </div>
456  </section>
457
458  <section class="section">
459    <div class="container is-max-desktop">
460      <div class="columns is-centered has-text-centered">
461        <div class="column is-full-width">
462          <h2 class="title is-3">Quantitative Results</h2>
463          <div class="content has-text-justified">
464            <p>
465              We quantitatively evaluate <span style="color: #f97316; font-weight: 800;">PropFly</span> against <b>state-of-the-art</b> text-guided and propagation-based methods on the <b>EditVerseBench</b> and <b>TGVE</b> benchmarks. Extensive experiments demonstrate that PropFly <b>significantly outperforms</b> existing baselines, achieving superior scores in <b>video quality</b>, <b>text alignment</b>, and <b>temporal consistency</b>.
466            </p>
467          </div>
468          
469          <div class="columns is-centered is-vcentered">
470           <div class="column is-half has-text-centered">
471              <img src="./static/images/quantitative1.png" alt="Quantitative Results 1" style="width: 100%; margin-top: 10px;"/>
472              <p class="is-size-6 has-text-black"><b>Table 1.</b> Quantitative comparison on the subset of EditVerseBench.</p>
473           </div>
474           <div class="column is-half has-text-centered">
475              <img src="./static/images/quantitative2.png" alt="Quantitative Results 2" style="width: 100%;"/>
476              <p class="is-size-6 has-text-black"><b>Table 2.</b> Quantitative comparison on TGVE benchmark.</p>
477           </div>
478          </div>
479        </div>
480      </div>
481    </div>
482  </section>
483
484  <section class="section">
485    <div class="container is-max-widescreen">
486      <div class="columns is-centered has-text-centered">
487        <div class="column is-full-width">
488          <h2 class="title is-3">Qualitative Comparison</h2>
489          <div class="content has-text-centered mb-6">
490            <p>
491              Comparison against state-of-the-art propagation-based methods.<br>
492              <b>PropFly (Ours)</b> successfully propagates the edit while preserving the original motion and structure better than baselines.
493            </p>
494          </div>
495
496          <div id="comp-mobile-tabs-container" class="is-hidden-tablet">
497              </div>
498
499          <div id="comparison-list">
500            </div>
501
502        </div>
503      </div>
504    </div>
505  </section>
506
507  <footer class="footer">
508    <div class="container">
509      <div class="content has-text-centered">
510        <div class="columns is-centered">
511          <div class="column is-8">
512            <div class="content">
513              <p>
514                This website is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0 License</a>.
515                <br>
516                Website template adapted from <a href="https://github.com/nerfies/nerfies.github.io">Nerfies</a>.
517                <br>
518                Please visit our <a href="https://github.com/KAIST-VICLab">VIC-Lab</a> for more interesting researches.
519              </p>
520            </div>
521          </div>
522        </div>
523      </div>
524    </div>
525  </footer>
526
527  
527<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
527
528  
529  
529<script>
530    const demoData = [
531      { 
532        name: "Boat", 
533        folder: "boat_anime",
534        srcCaption: "‘A fishing boat sails through water’",
535        tgtCaption: "‘A fishing boat sails through water <b>in Japanese anime style</b>’"
536      },
537      { 
538        name: "Flamingo", 
539        folder: "flamingo_winter",
540        srcCaption: "‘Flamingos walking through water’",
541        tgtCaption: "‘Flamingos walking through <b>icy</b> water’"
542      },
543      { 
544        name: "Horse", 
545        folder: "horsejump_sunset",
546        srcCaption: "‘A horse is jumping’",
547        tgtCaption: "‘A horse is jumping <b>in sunset</b>’"
548      },
549      { 
550        name: "Car", 
551        folder: "car_sunrise",
552        srcCaption: "‘A car is driving’",
553        tgtCaption: "‘A car is driving <b>in sunrise</b>’"
554      },
555      { 
556        name: "Plane", 
557        folder: "plane_storm",
558        srcCaption: "‘An aircraft moves forward in <b>cloudy day</b>’",
559        tgtCaption: "‘An aircraft moves forward in <b>storm</b>’"
560      },
561      { 
562        name: "Rollerblade", 
563        folder: "rollerblade_robot",
564        srcCaption: "‘A <b>person</b> is rollerblading’",
565        tgtCaption: "‘A <b>robot</b> is rollerblading’"
566      },
567      { 
568        name: "Hockey", 
569        folder: "hockey_robot",
570        srcCaption: "‘A <b>person</b> is playing roller hockey’",
571        tgtCaption: "‘A <b>robot</b> is playing roller hockey <b>in a dystopian city</b>’"
572      }
573    ];
574
575    const basePath = "./static/videos/PropFly_videos/";
576    
577    const demoTabs = document.getElementById('demo-tabs');
578    const captionSrc = document.getElementById('demo-caption-src');
579    const captionTgt = document.getElementById('demo-caption-tgt');
580    const srcVideo = document.getElementById('demo-src-video');
581    const refImg1 = document.getElementById('demo-ref-img-1');
582    const resVideo1 = document.getElementById('demo-res-video-1');
583    const refImg2 = document.getElementById('demo-ref-img-2');
584    const resVideo2 = document.getElementById('demo-res-video-2');
585
586    function initDemo() {
587      demoTabs.innerHTML = '';
588      demoData.forEach((scene, index) => {
589        const li = document.createElement('li');
590        if (index === 0) li.classList.add('is-active');
591        const a = document.createElement('a');
592        a.textContent = scene.name;
593        a.onclick = () => updateDemo(index);
594        li.appendChild(a);
595        demoTabs.appendChild(li);
596      });
597      updateDemo(0);
598    }
599
600    function updateDemo(index) {
601      const tabs = demoTabs.querySelectorAll('li');
602      tabs.forEach((tab, i) => {
603        if (i === index) tab.classList.add('is-active');
604        else tab.classList.remove('is-active');
605      });
606
607      const data = demoData[index];
608      const path = `${basePath}${data.folder}/`;
609
610      captionSrc.innerHTML = data.srcCaption;
611      captionTgt.innerHTML = data.tgtCaption;
612
613      srcVideo.src = `${path}input.mp4`;
614      refImg1.src = `${path}input_1.png`;
615      resVideo1.src = `${path}propfly_1.mp4`;
616      refImg2.src = `${path}input_2.png`;
617      resVideo2.src = `${path}propfly_2.mp4`;
618
619      [srcVideo, resVideo1, resVideo2].forEach(v => {
620        v.load();
621        v.play().catch(e => {});
622      });
623    }
624
625    document.addEventListener('DOMContentLoaded', initDemo);
626  </script>
626
627
628  
628<script>
629    const compData = [
630      {
631        name: "Panda",
632        folder: "panda_snow",
633        srcCaption: "‘A <b>bear</b> walks <b>on rocks</b>’",
634        tgtCaption: "‘A <b>panda</b> walks <b>through snowy bamboo</b>’"
635      },
636      {
637        name: "Robot City",
638        folder: "lucia_city",
639        srcCaption: "‘A <b>woman</b> walks in a <b>park</b>’",
640        tgtCaption: "‘A <b>robot</b> walks through a <b>ruined city</b>’"
641      },
642      {
643        name: "Unicorn",
644        folder: "horsejump_unicorn",
645        srcCaption: "‘A <b>horse</b> is jumping’",
646        tgtCaption: "‘A <b>white unicorn</b> is jumping’"
647      },
648      {
649        name: "Horse",
650        folder: "camel_horse",
651        srcCaption: "‘A <b>camel</b> is walking’",
652        tgtCaption: "‘A <b>horse</b> is walking’"
653      },
654      {
655        name: "Bus",
656        folder: "bus_building",
657        srcCaption: "‘A <b>bus</b> is driving on a street’",
658        tgtCaption: "‘An <b>articulated bus</b> is driving <strong>near a building</strong>’"
659      },
660      {
661        name: "Robot",
662        folder: "rollerblade_robot",
663        srcCaption: "‘A <b>person</b> is rollerblading’",
664        tgtCaption: "‘A <b>robot</b> is rollerblading’"
665      },
666      {
667        name: "Cyberpunk",
668        folder: "lucia_cyberpunk",
669        srcCaption: "‘A <b>person</b> walks in a park’",
670        tgtCaption: "‘A <b>robot</b> walks in a park <b>in a cyberpunk style</b>’"
671      },
672      {
673        name: "Robot Camel",
674        folder: "camel_cyberpunk",
675        srcCaption: "‘A <b>camel</b> is walking’",
676        tgtCaption: "‘A <b>robot camel</b> is walking <b>in a cyberpunk city</b>’"
677      },
678      {
679        name: "Scooter",
680        folder: "scooter_night",
681        srcCaption: "‘A person is driving a scooter’",
682        tgtCaption: "‘A person is driving a scooter <b>at night</b>’"
683      },
684      {
685        name: "Car",
686        folder: "car_cloud",
687        srcCaption: "‘A car is driving on a <b>street sunny day</b>’",
688        tgtCaption: "‘A car is driving on a <b>wet street, cloudy day</b>’"
689      },
690      {
691        name: "Monkey",
692        folder: "koala_monkey",
693        srcCaption: "‘A <b>koala</b> is climbing a tree branch’",
694        tgtCaption: "‘A <b>monkey</b> is climbing a tree branch’"
695      },
696      {
697        name: "Paper Boat",
698        folder: "blackswan_paperboat",
699        srcCaption: "‘A <b>black swan</b> is floating on the water’",
700        tgtCaption: "‘A <b>white paper boat</b> is floating on the water’"
701      }
702    ];
703
704    const compBasePath = "./static/videos/comparison_videos/"; 
705    const listContainer = document.getElementById('comparison-list');
706    const mobileTabsContainer = document.getElementById('comp-mobile-tabs-container');
707    
708    let activeCompIndex = 0;
709
710    function getCompItemHTML(data) {
711        const path = `${compBasePath}${data.folder}/`;
712        return `
713          <div class="comparison-item">
714            <div class="caption-wrapper">
715              <div class="columns is-vcentered is-variable is-2">
716                <div class="column is-4-tablet is-12-mobile">
717                  <div class="caption-box source-box">
718                    <div class="caption-header">Source</div>
719                    <div class="caption-content">${data.srcCaption}</div>
720                  </div>
721                </div>
722                <div class="column is-narrow has-text-centered arrow-container">
723                  <span class="icon is-medium has-text-grey-light">
724                    <i class="fas fa-arrow-right fa-lg"></i>
725                  </span>
726                </div>
727                <div class="column is-auto is-12-mobile">
728                  <div class="caption-box target-box">
729                    <div class="caption-header" style="color: #f97316;">Target</div>
730                    <div class="caption-content">${data.tgtCaption}</div>
731                  </div>
732                </div>
733              </div>
734            </div>
735
736            <div class="columns is-centered is-multiline is-variable is-2">
737              <div class="column is-one-fifth-widescreen is-4-tablet is-12-mobile">
738                <div class="comp-header">Input Video</div>
739                <div class="video-wrapper">
740                  <video class="comp-video" autoplay muted loop playsinline>
741                    <source src="${path}input.mp4" type="video/mp4">
742                  </video>
743                </div>
744              </div>
745              <div class="column is-one-fifth-widescreen is-4-tablet is-12-mobile">
746                <div class="comp-header">Edited First Frame</div>
747                <div class="comp-ref-container">
748                  <span class="frame-badge">Ref</span>
749                  <img src="${path}input.png" alt="Input Image" class="comp-image">
750                </div>
751              </div>
752              <div class="column is-one-fifth-widescreen is-4-tablet is-12-mobile">
753                <div class="comp-header ours-header">PropFly (Ours)</div>
754                <div class="video-wrapper ours-wrapper">
755                  <video class="comp-video" autoplay muted loop playsinline>
756                    <source src="${path}propfly.mp4" type="video/mp4">
757                  </video>
758                </div>
759              </div>
760              <div class="column is-one-fifth-widescreen is-4-tablet is-12-mobile">
761                <div class="comp-header">Señorita</div>
762                <div class="video-wrapper">
763                  <video class="comp-video" autoplay muted loop playsinline>
764                    <source src="${path}senorita.mp4" type="video/mp4">
765                  </video>
766                </div>
767              </div>
768              <div class="column is-one-fifth-widescreen is-4-tablet is-12-mobile">
769                <div class="comp-header">AnyV2V</div>
770                <div class="video-wrapper">
771                  <video class="comp-video" autoplay muted loop playsinline>
772                    <source src="${path}anyv2v.mp4" type="video/mp4">
773                  </video>
774                </div>
775              </div>
776            </div>
777          </div>
778        `;
779    }
780
781    function renderComp() {
782      listContainer.innerHTML = ''; 
783      mobileTabsContainer.innerHTML = '';
784      
785      const isMobile = window.innerWidth <= 768;
786
787      if (isMobile) {
788        compData.forEach((data, index) => {
789            const btn = document.createElement('div');
790            btn.className = 'mobile-comp-btn';
791            if (index === activeCompIndex) btn.classList.add('is-active');
792            btn.textContent = data.name;
793            btn.onclick = () => {
794                activeCompIndex = index;
795                renderComp(); 
796            };
797            mobileTabsContainer.appendChild(btn);
798        });
799        const itemHTML = getCompItemHTML(compData[activeCompIndex]);
800        listContainer.insertAdjacentHTML('beforeend', itemHTML);
801      } else {
802        compData.forEach((data) => {
803            const itemHTML = getCompItemHTML(data);
804            listContainer.insertAdjacentHTML('beforeend', itemHTML);
805        });
806      }
807    }
808
809    document.addEventListener('DOMContentLoaded', renderComp);
810    window.addEventListener('resize', renderComp);
811  </script>
811
812</body>
813</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.