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.