1// JavaScript to handle mouseover and mouseout events 2var activeDemoMethodPill = null; 3var activeDemoScenePill = null; 4var activeDemoModePill = null; 5var activeDemoVidID = 0; 6var select = false; 7 8var activeCompMethodPill = null; 9var activeCompScenePill = null; 10var activeCompModePill = null; 11 12 13var activeCompRmMethodPill = null; 14var activeCompRmScenePill = null; 15var activeCompRmModePill = null; 16 17var activeAblDataMethodPill = null; 18var activeAblDataScenePill = null; 19var activeAblDataModePill = null; 20 21var activeAblCondMethodPill = null; 22var activeAblCondScenePill = null; 23var activeAblCondModePill = null; 24 25var activeTrainDataMethodPill = null; 26var activeTrainDataScenePill = null; 27var activeTrainDataModePill = null; 28 29var activeTrimaskMethodPill = null; 30var activeTrimaskScenePill = null; 31var activeTrimaskModePill = null; 32 33var activeT2VPriorMethodPill = null; 34var activeT2VPriorScenePill = null; 35var activeT2VPriorModePill = null; 36 37var activeSelfAttnMethodPill = null; 38var activeSelfAttnScenePill = null; 39var activeSelfAttnModePill = null; 40 41var activeFailureMethodPill = null; 42var activeFailureScenePill = null; 43var activeFailureModePill = null; 44 45var carousel_demo = null; 46var carousel_sidebyside = null; 47 48var demo_items = null; 49 50disable_methods = { 51 "boat": ["factormatte"], 52 "goat": ["factormatte"], 53 "camel": ["factormatte"], 54 "car-roundabout": ["factormatte"], 55 "bear": ["factormatte"], 56 "boys-beach": ["factormatte"], 57 "omnimatte-rf-walk": ["omnimatte", "omnimatte3d", "factormatte"], 58 "factormatte-sandcar": ["omnimatte", "omnimatte3d", "omnimatterf"], 59 "factormatte-puddle": ["omnimatte", "omnimatte3d", "omnimatterf"], 60 "two-horses": ["factormatte"], 61 "kite-walk": ["factormatte"], 62 "eval-cars": ["factormatte"], 63 "eval-bag": ["factormatte"], 64 "eval-dog": ["factormatte"], 65 "eval-donkey": ["factormatte"], 66} 67 68disable_modes = { 69 "boat": ["alpha1", "fg2", "alpha2", "fg3", "alpha3"], 70 "goat": ["alpha1", "fg2", "alpha2", "fg3", "alpha3"], 71 "camel": ["alpha1", "fg2", "alpha2", "fg3", "alpha3"], 72 "bear": ["alpha1", "fg2", "alpha2", "fg3", "alpha3"], 73 "omnimatte-rf-walk": ["alpha1", "fg2", "alpha2", "fg3", "alpha3"], 74 "car-roundabout": ["alpha1", "fg2", "alpha2", "fg3", "alpha3"], 75 "factormatte-sandcar": ["alpha1", "alpha1", "fg2", "alpha2", "fg3", "alpha3"], 76 "factormatte-puddle": ["alpha1", "fg2", "alpha2", "fg3", "alpha3"], 77 "boys-beach": ["alpha1", "alpha2", "fg3", "alpha3"], 78 "two-horses": ["alpha1", "alpha2", "fg3", "alpha3"], 79 "kite-walk": ["alpha1", "alpha2", "fg3", "alpha3"], 80 "eval-donkey": ["alpha1", "alpha2", "fg3", "alpha3"], 81 "eval-dog": ["alpha1", "fg2", "alpha2", "fg3", "alpha3"], 82 "eval-cars": ["alpha1", "alpha2", "alpha3"], 83 "eval-bag": ["alpha1", "fg2", "alpha2", "fg3", "alpha3"], 84} 85 86 87disable_objrm_methods = { 88 "boat": [], 89 "car-puddle": [], 90 "cartoon": [], 91 "parkour": [], 92 "eleven-penguins": [], 93 "eval-chicken": [], 94 "eval-dodge": [], 95 "eval-chair": [], 96 "lego": [], 97 "boys-beach": [], 98} 99 100disable_selfattn_methods = { 101 "parkour": ["fg1", "fg2"], 102 "car-puddle": ["fg1", "fg2"], 103 "camel": ["fg1", "fg2"], 104 "boys-beach": ["fg2"], 105 "puppy-walk": ["fg2"], 106 "five-beagles": [], 107} 108 109window.HELP_IMPROVE_VIDEOJS = false; 110function reload() { 111 var videos = document.getElementsByClassName('item'); 112 for(var i = 0; i < videos.length; i++) { 113 // videos[i].style.width = width; 114 } 115} 116 117// window.addEventListener('DOMContentLoaded', () => { 118 119// const observer = new IntersectionObserver(entries => { 120// entries.forEach(entry => { 121// const id = entry.target.getAttribute('id'); 122// if (entry.intersectionRatio > 0) { 123// document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.add('active'); 124// } else { 125// document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.remove('active'); 126// } 127// }); 128// }); 129 130// // Track all sections that have an `id` applied 131// document.querySelectorAll('section[id]').forEach((section) => { 132// observer.observe(section); 133// }); 134 135// }); 136 137 138function reload_carousel_videos() { 139 console.log('reload'); 140 for (var i = 0; i < demo_items.length; i++) { 141 var video_item = demo_items[i].querySelector('video'); 142 video_item.pause(); 143 video_item.currentTime = 0; 144 video_item.load(); 145 } 146} 147 148function configure_carousel() { 149 var options_show3 = { 150 slidesToScroll: 1, 151 slidesToShow: 1, 152 loop: true, 153 infinite: true, 154 autoplay: false, 155 autoplaySpeed: 3000, 156 pagination: false, 157 } 158 var options_show1 = { 159 slidesToScroll: 1, 160 slidesToShow: 1, 161 loop: true, 162 infinite: true, 163 autoplay: false, 164 autoplaySpeed: 3000, 165 pagination: false, 166} 167 // Initialize all div with carousel class 168 // carousel_demo = bulmaCarousel.attach('#demo-carousel', options_show3); 169 carousel_sidebyside = bulmaCarousel.attach('#sidebyside-carousel', options_show1); 170 171 172 // carousel_demo[0].on('before:show', state => { 173 // console.log(state); 174 // reload_carousel_videos(); 175 // }); 176 177 carousel_sidebyside[0].on('before:show', state => { 178 console.log(state); 179 }); 180 // Loop on each carousel initialized 181 // for(var i = 0; i < carousels.length; i++) { 182 // // Add listener to event 183 // // carousels[i].reset(); 184 // carousels[i].on('before:show', state => { 185 // console.log(state); 186 // reload_carousel_videos(); 187 // }); 188 // } 189 190 // Access to bulmaCarousel instance of an element 191 var element = document.querySelector('#item'); 192 if (element && element.bulmaCarousel) { 193 // bulmaCarousel instance is available as element.bulmaCarousel 194 element.bulmaCarousel.on('before-show', function(state) { 195 console.log(state); 196 }); 197 } 198 199 bulmaSlider.attach(); 200 reload(); 201} 202 203 204$(document).ready(function () { 205 // $(function () { 206 // $('[data-toggle="tooltip"]').tooltip() 207 // }); 208 209 demo_items = document.querySelector('#sidebyside-carousel').querySelectorAll('.item'); 210 // 211 configure_carousel(); 212 213 let defaultMethodPill = document.querySelector('.traindata-method-pill[data-value="TABE-51"]'); 214 selectTrainDataVideo(defaultMethodPill, null, null); 215 216 // activeDemoMethodPill = $('.demo-method-pill').filter('.active')[0]; 217 // activeDemoModePill = $('.demo-mode-pill').filter('.active')[0]; 218 // activeDemoScenePill = $('.demo-scene-pill').filter('.active')[0]; 219 // selectDemoVideo(null, activeDemoScenePill, activeDemoModePill); 220 221 // activeCompMethodPill = $('.comp-method-pill').filter('.active')[0]; 222 // activeCompModePill = $('.comp-mode-pill').filter('.active')[0]; 223 // activeCompScenePill = $('.comp-scene-pill').filter('.active')[0]; 224 // selectCompVideo(activeCompMethodPill, activeCompScenePill, activeCompModePill); 225 // 226 // activeCompRmMethodPill = $('.comprm-method-pill').filter('.active')[0]; 227 // activeCompRmModePill = $('.comprm-mode-pill').filter('.active')[0]; 228 // activeCompRmScenePill = $('.comprm-scene-pill').filter('.active')[0]; 229 // selectCompRmVideo(activeCompRmMethodPill, activeCompRmScenePill, activeCompRmModePill); 230 // 231 // // activeAblDataMethodPill = $('.abldata-method-pill').filter('.active')[0]; 232 // // activeAblDataModePill = $('.abldata-mode-pill').filter('.active')[0]; 233 activeAblDataScenePill = $('.abldata-scene-pill').filter('.active')[0]; 234 selectAblDataVideo(activeAblDataMethodPill, activeAblDataScenePill, activeAblDataModePill); 235 // 236 // // activeAblCondMethodPill = $('.ablcond-method-pill').filter('.active')[0]; 237 // // activeAblCondModePill = $('.ablcond-mode-pill').filter('.active')[0]; 238 // activeAblCondScenePill = $('.ablcond-scene-pill').filter('.active')[0]; 239 // selectAblCondVideo(activeAblCondMethodPill, activeAblCondScenePill, activeAblCondModePill); 240 // 241 // activeTrainDataMethodPill = $('.traindata-method-pill').filter('.active')[0]; 242 // selectTrainDataVideo(activeTrainDataMethodPill, activeTrainDataScenePill, activeTrainDataModePill); 243 // 244 // activeTrimaskScenePill = $('.trimask-scene-pill').filter('.active')[0]; 245 // selectTrimaskVideo(activeTrimaskMethodPill, activeTrimaskScenePill, activeTrimaskModePill); 246 // 247 // activeFailureScenePill = $('.failure-scene-pill').filter('.active')[0]; 248 // selectFailureVideo(activeFailureMethodPill, activeFailureScenePill, activeFailureModePill); 249 // 250 // // activeT2VPriorScenePill = $('.t2vprior-scene-pill').filter('.active')[0]; 251 // // selectT2VPriorVideo(activeT2VPriorMethodPill, activeT2VPriorScenePill, activeT2VPriorModePill); 252 // 253 // activeSelfAttnScenePill = $('.selfattn-scene-pill').filter('.active')[0]; 254 // activeSelfAttnMethodPill = $('.selfattn-method-pill').filter('.active')[0]; 255 // activeSelfAttnModePill = $('.selfattn-mode-pill').filter('.active')[0]; 256 // selectSelfAttnVideo(activeSelfAttnMethodPill, activeSelfAttnScenePill, activeSelfAttnModePill); 257 // $(".navbar-burger").click(function() { 258 // // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" 259 // $(".navbar-burger").toggleClass("is-active"); 260 // $(".navbar-menu").toggleClass("is-active"); 261 // }); 262 // var frame = document.getElementById('div-container-embed-vi
262deo'); 263 // frame.onload = function() { 264 // width = Number($(frame).css('width').replace('px', '')); 265 // height = width * 0.56 266 // frame.style.height = String(height) + 'px'; 267 // console.log($(frame).css('height')); 268 // }; 269 270}); 271 272 273function autoScroll(target_name) { 274 // $(next_btn).trigger('click'); 275 console.log(demo_items.length); 276 var target_idx = -1; 277 for (var i = 0; i < demo_items.length; i++) { 278 if (demo_items[i].querySelector('source').getAttribute('src').includes(target_name)) { 279 target_idx = i; 280 } 281 } 282 console.log(target_idx); 283 if (target_idx >= 0) { 284 carousel_demo[0].state.next = Number(target_idx - 1); 285 carousel_demo[0].show(target_idx - 1); 286 } 287 reload_carousel_videos(); 288} 289 290function selectDemoVideo(methodPill, scenePill, modePill) { 291 // Your existing logic for video selection 292 // var video = document.getElementById("compVideo"); 293 select = true; 294 // console.log(methodPill, scenePill.getAttribute("data-value"), modePill); 295 // if (activeDemoMethodPill) { 296 // activeDemoMethodPill.classList.remove("active"); 297 // } 298 299 if (activeDemoScenePill) { 300 activeDemoScenePill.classList.remove("active"); 301 } 302 303 if (modePill) { 304 activeDemoModePill.classList.remove("active"); 305 modePill.classList.add("active"); 306 activeDemoModePill = modePill; 307 } 308 309 // activeDemoMethodPill = methodPill; 310 activeDemoScenePill = scenePill; 311 scenePill.classList.add("active"); 312 pill = scenePill.getAttribute("data-value"); 313 mode = activeDemoModePill.getAttribute("data-value"); 314 // console.log(pill); 315 // console.log("Pill: " + pill + " Mode: " + mode); 316 317 // swap video to avoid flickering 318 var video_active = document.getElementById("demoVideo0"); // + activeDemoVidID); 319 // var video_hidden = document.getElementById("demoVideo" + (1 - activeDemoVidID)); 320 // video_active.src = "assets/videos/demo/" + mode + "/" + pill + ".mp4"; 321 // console.log(video_active) 322 video_active.src = "assets/videos/layers/" + pill + ".mp4"; 323 // console.log("videos/results/" + mode + "/" + pill + ".mp4"); 324 video_active.load(); 325 326 autoScroll(pill.split('_')[0]); 327} 328 329 330 331 332function _selectCompVideo(methodPill, scenePill, modePill) { 333 select = true; 334 if (activeCompMethodPill) { 335 activeCompMethodPill.classList.remove("active"); 336 } 337 338 if (activeCompScenePill) { 339 activeCompScenePill.classList.remove("active"); 340 } 341 342 if (modePill) { 343 activeCompModePill.classList.remove("active"); 344 modePill.classList.add("active"); 345 activeCompModePill = modePill; 346 } 347 348 activeCompMethodPill = methodPill; 349 activeCompScenePill = scenePill; 350 scenePill.classList.add("active"); 351 activeCompMethodPill.classList.add("active"); 352 pill = scenePill.getAttribute("data-value"); 353 method = activeCompMethodPill.getAttribute("data-value"); 354 mode = activeCompModePill.getAttribute("data-value"); 355 356 // var label = methodPill.getAttribute("label"); 357 // var label_baseline = document.getElementById("label-comp-baseline"); 358 // label_baseline.innerHTML = label; 359 360 // display/hide method buttons 361 disable_list = disable_methods[pill] 362 btn_methods = { 363 "omnimatte": document.getElementById("btn-omnimatte"), 364 "omnimatte3d": document.getElementById("btn-omnimatte3d"), 365 "omnimatterf": document.getElementById("btn-omnimatterf"), 366 "factormatte": document.getElementById("btn-factormatte"), 367 } 368 show_alternate_btn = null; 369 for (var [btn_name, btn_method] of Object.entries(btn_methods)) { 370 is_diabled = false 371 for (var i = 0; i < disable_list.length; i++) { 372 if (disable_list[i] == btn_name) { 373 is_diabled = true; 374 break; 375 } 376 } 377 if (is_diabled) { 378 btn_method.style.display = "none"; 379 } else { 380 btn_method.style.display = "inline-flex"; 381 show_alternate_btn = btn_method; 382 } 383 } 384 385 if (activeCompMethodPill.style.display == "none") { 386 selectCompVideo(show_alternate_btn, scenePill, modePill); 387 } 388 389 // display hide layers 390 disable_list = disable_modes[pill] 391 btn_modes = { 392 'fg1': document.getElementById("btn-comp-fg1"), 393 'alpha1': document.getElementById("btn-comp-alpha1"), 394 'fg2': document.getElementById("btn-comp-fg2"), 395 'alpha2': document.getElementById("btn-comp-alpha2"), 396 'fg3': document.getElementById("btn-comp-fg3"), 397 'alpha3': document.getElementById("btn-comp-alpha3"), 398 } 399 show_alternate_btn = null; 400 for (var [btn_name, btn_mode] of Object.entries(btn_modes)) { 401 is_diabled = false 402 for (var i = 0; i < disable_list.length; i++) { 403 if (disable_list[i] == btn_name) { 404 is_diabled = true; 405 break; 406 } 407 } 408 if (is_diabled) { 409 btn_mode.style.display = "none"; 410 } else { 411 btn_mode.style.display = "inline-flex"; 412 if (show_alternate_btn == null) { 413 show_alternate_btn = btn_mode; 414 } 415 } 416 } 417 418 if (activeCompModePill.style.display == "none") { 419 selectCompVideo(activeCompMethodPill, scenePill, show_alternate_btn); 420 } 421 //// 422 // var video_active = document.getElementById("compVideo0"); 423 // video_active.src = "assets/videos/comparisons-omnimatte/" + pill + "-" + method + "-" + mode + "-tuple.mp4"; 424 // video_active.load(); 425 426 load_comparison_videos(pill, method, mode); 427} 428 429function selectCompVideo(methodPill, scenePill, modePill) { 430 select = true; 431 if (activeCompMethodPill) { 432 activeCompMethodPill.classList.remove("active"); 433 } 434 435 if (activeCompScenePill) { 436 activeCompScenePill.classList.remove("active"); 437 } 438 439 if (modePill) { 440 activeCompModePill.classList.remove("active"); 441 modePill.classList.add("active"); 442 activeCompModePill = modePill; 443 } 444 445 activeCompMethodPill = methodPill; 446 activeCompScenePill = scenePill; 447 scenePill.classList.add("active"); 448 activeCompMethodPill.classList.add("active"); 449 pill = scenePill.getAttribute("data-value"); 450 method = activeCompMethodPill.getAttribute("data-value"); 451 mode = activeCompModePill.getAttribute("data-value"); 452 453 // var label = methodPill.getAttribute("label"); 454 // var label_baseline = document.getElementById("label-comp-baseline"); 455 // label_baseline.innerHTML = label; 456 457 // display/hide method buttons 458 disable_list = disable_methods[pill] 459 // btn_methods = { 460 // "omnimatte": document.getElementById("btn-omnimatte"), 461 // "omnimatte3d": document.getElementById("btn-omnimatte3d"), 462 // "omnimatterf": document.getElementById("btn-omnimatterf"), 463 // "factormatte": document.getElementById("btn-factormatte"), 464 // } 465 // show_alternate_btn = null; 466 // for (var [btn_name, btn_method] of Object.entries(btn_methods)) { 467 // is_diabled = false 468 // for (var i = 0; i < disable_list.length; i++) { 469 // if (disable_list[i] == btn_name) { 470 // is_diabled = true; 471 // break; 472 // } 473 // } 474 // if (is_diabled) { 475 // btn_method.style.display = "none"; 476 // } else { 477 // btn_method.style.display = "inline-flex"; 478 // show_alternate_btn = btn_method; 479 // } 480 // } 481 482 // if (activeCompMethodPill.style.display == "none") { 483 // selectCompVideo(show_alternate_btn, scenePill, modePill); 484 // } 485 486 label_methods = { 487 "omnimatte": document.getElementById("label-comp-omnimatte"), 488 "omnimatte3d": document.getElementById("label-comp-omnimatte3d"), 489 "omnimatterf": document.getElementById("label-comp-omnimatterf"), 490 "factormatte": document.getElementById("label-comp-factormatte"), 491 } 492 for (var [btn_name, btn_method] of Object.entries(label_methods)) { 493 is_diabled = false 494 for (var i = 0; i < disable_list.length; i++) { 495 if (disable_list[i] == btn_name) { 496 is_diabled = true; 497 break; 498 } 499 } 500 if (is_diabled) { 501 btn_method.style.display = "none"; 502 } else { 503 btn_method.style.display = "block"; 504 } 505 } 506 507 var div_video = document.getElementById("div-video-comp-omni"); 508 if (pill == "eval-cars" || pill.includes("factormatte") || pill == 'omnimatte-rf-walk') { 509 div_video.style.marginLeft = "0%"; 510 div_video.style.width = "100%"; 511 } else { 512 div_video.style.marginLeft = "calc(-45vw + 50%)"; 513 div_video.style.width = "90vw"; 514 } 515 516 // display hide layers 517 disable_list = disable_modes[pill] 518 btn_modes = { 519 'fg1': document.getElementById("btn-comp-fg1"), 520 'alpha1': document.getElementById("btn-comp-alpha1"), 521 'fg2': document.getElementById("btn-comp-fg2"), 522 'alpha2': document.getElementById("btn-comp-alpha2"), 523 'fg3': document.getElementById("btn-comp-fg3"), 524 'alpha3': document.getElementById("btn-comp-alpha3"), 525 } 526 show_alternate_btn = null; 527 for (var [btn_name, btn_mode] of Object.entries(btn_modes)) { 528 is_diabled = false 529 for (var i = 0; i < disable_list.length; i++) { 530 if (disable_list[i] == btn_name) { 531 is_diabled = true; 532 break; 533 } 534 } 535 if (is_diabled) { 536 btn_mode.style.display = "none"; 537 } else { 538 btn_mode.style.display = "inline-flex"; 539 if (show_alternate_btn == null) { 540 show_alternate_btn = btn_mode; 541 } 542 } 543 } 544 545 if (activeCompModePill.style.display == "none") { 546 selectCompVideo(activeCompMethodPill, scenePill, show_alternate_btn); 547 } 548 //// 549 var video_active = document.getElementById("compVideo0"); 550 // video_active.src = "assets/videos/comparisons-omnimatte/" + pill + "-" + method + "-" + mode + "-tuple.mp4"; 551 video_active.src = "assets/videos/comparisons_omnimatte/" + pill + "-" + mode + "-row.mp4"; 552 video_active.load(); 553 554 // load_comparison_videos(pill, method, mode); 555} 556 557// function load_comparison_videos(scene, method, mode) { 558// var vidIn = document.getElementById('compVideoIn'); 559// var vidBase = document.getElementById('compVideoBaseline'); 560// var vidOurs = document.getElementById('compVideoOurs'); 561// vidIn.src = "assets/videos/comparisons_omnimatte/" + scene + "-input-bg.mp4"; 562// vidBase.src = "assets/videos/comparisons_omnimatte/" + scene + "-" + method + "-" + mode + ".mp4"; 563// vidOurs.src = "assets/videos/comparisons_omnimatte/" + scene + "-ours-" + mode + ".mp4"; 564// syncComparisonVideos(); 565// } 566 567 568 569// function syncComparisonVideos() { 570// console.log('sync!'); 571// var vidIn = document.getElementById('compVideoIn'); 572// var vidBase = document.getElementById('compVideoBaseline'); 573// var vidOurs = document.getElementById('compVideoOurs'); 574// vidIn.pause(); 575// vidIn.currentTime = 0; 576// vidIn.load(); 577// vidBase.pause(); 578// vidBase.currentTime = 0; 579// vidBase.load(); 580// vidOurs.pause(); 581// vidOurs.currentTime = 0; 582// vidOurs.load(); 583// } 584 585 586function selectCompRmVideo(methodPill, scenePill, modePill) { 587 select = true; 588 if (activeCompRmMethodPill) { 589 activeCompRmMethodPill.classList.remove("active"); 590 } 591 592 if (activeCompRmScenePill) { 593 activeCompRmScenePill.classList.remove("active"); 594 } 595 596 if (modePill) { 597 activeCompRmModePill.classList.remove("active"); 598 modePill.classList.add("active"); 599 activeCompRmModePill = modePill; 600 } 601 602 activeCompRmMethodPill = methodPill; 603 activeCompRmScenePill = scenePill; 604 scenePill.classList.add("active"); 605 activeCompRmMethodPill.classList.add("active"); 606 pill = scenePill.getAttribute("data-value"); 607 method = activeCompRmMethodPill.getAttribute("data-value"); 608 mode = activeCompRmModePill.getAttribute("data-value"); 609 610 // var label = methodPill.getAttribute("label"); 611 // var label_baseline = document.getElementById("label-comprm-baseline"); 612 // label_baseline.innerHTML = label; 613 614 // display/hide method buttons 615 // disable_list = disable_objrm_methods[pill] 616 // btn_methods = { 617 // "objectdrop": document.getElementById("btn-objectdrop"), 618 // "propainter": document.getElementById("btn-propainter"), 619 // "lumiere": document.getElementById("btn-lumiere"), 620 // } 621 // show_alternate_btn = null; 622 // for (var [btn_name, btn_method] of Object.entries(btn_methods)) { 623 // is_diabled = false 624 // for (var i = 0; i < disable_list.length; i++) { 625 // if (disable_list[i] == btn_name) { 626 // is_diabled = true; 627 // break; 628 // } 629 // } 630 // if (is_diabled) { 631 // btn_method.style.display = "none"; 632 // } else { 633 // btn_method.style.display = "inline-flex"; 634 // show_alternate_btn = btn_method; 635 // } 636 // } 637 638 // if (activeCompRmMethodPill.style.display == "none") { 639 // selectCompRmVideo(show_alternate_btn, scenePill, modePill); 640 // } 641 //// 642 var div_video = document.getElementById("div-video-comp-remove"); 643 if (pill == "eval-chair" ) { 644 div_video.style.marginLeft = "0%"; 645 div_video.style.width = "100%"; 646 } else { 647 div_video.style.marginLeft = "calc(-45vw + 50%)"; 648 div_video.style.width = "90vw"; 649 } 650 var video_active = document.getElementById("comprmVideo0"); 651 console.log(video_active) 652 // video_active.src = "assets/videos/comparisons-removal/" + pill + "-" + method + "-" + mode + "-tuple.mp4"; 653 video_active.src = "assets/videos/comparisons-removal/" + pill + "-row.mp4"; 654 video_active.load(); 655} 656 657function selectAblDataVideo(methodPill, scenePill, modePill) { 658 select = true; 659 if (activeAblDataScenePill) { 660 activeAblDataScenePill.classList.remove("active"); 661 } 662 663 activeAblDataScenePill = scenePill; 664 scenePill.classList.add("active"); 665 pill = scenePill.getAttribute("data-value"); 666 667 var video_active = document.getElementById("abldataVideo0"); 668 video_active.src = "videos/dataset_vids/" + pill + ".mp4"; 669 video_active.load(); 670} 671 672function selectAblCondVideo(methodPill, scenePill, modePill) { 673 select = true; 674 675 if (activeAblCondScenePill) { 676 activeAblCondScenePill.classList.remove("active"); 677 } 678 679 activeAblCondScenePill = scenePill; 680 scenePill.classList.add("active"); 681 pill = scenePill.getAttribute("data-value"); 682 var video_active = document.getElementById("ablcondVideo0"); 683 console.log(video_active) 684 video_active.src = "assets/videos/ablation_condition/" + pill + "_mask-dilated.mp4"; 685 video_active.load(); 686} 687 688function selectTrainDataVideo(methodPill, scenePill, modePill) { 689 select = true; 690 691 if (activeTrainDataMethodPill) { 692 activeTrainDataMethodPill.classList.remove("active"); 693 } 694 695 activeTrainDataMethodPill = methodPill; 696 methodPill.classList.add("active"); 697 pill = methodPill.getAttribute("data-value");
698 let train_data_desc = { 699 "TABE-51": "Here we show results of our TABE-51 dataset with our TABE model pipeline. The top row shows the ground truth amodal mask, the middle row shows the ground truth visible mask while the bottom row shows our TABE pipeline prediction", 700 "DAVIS-2017": "Here we show results on the DAVIS-2017 dataset with our TABE model pipeline. DAVIS-2017 has not ground truth amodal masks so, the top row shows the ground truth visible mask while the bottom row shows our TABE pipeline prediction", 701 "OVIS": "Here we show results on the OVIS dataset with our TABE model pipeline. OVIS has not ground truth amodal masks so, the top row shows the ground truth visible mask while the bottom row shows our TABE pipeline prediction", 702 }[pill] 703 var p_desc = document.getElementById("p-traindata-desc"); 704 p_desc.innerHTML = train_data_desc; 705 706 var video_active = document.getElementById("traindataVideo0"); 707 video_active.src = "videos/results_vids/" + pill + ".mp4"; 708 video_active.load(); 709 video_active.style.width = "100%"; // Full width of container 710 video_active.style.maxWidth = "3000px"; // Limit maximum width 711 video_active.style.height = "auto"; // Maintain aspect ratio 712 // video_active.style.display = "block"; // Ensures it's treated as a block element 713 // video_active.style.margin = "0 auto"; // Centers the video horizontally 714} 715 716function selectTrimaskVideo(methodPill, scenePill, modePill) { 717 select = true; 718 719 if (activeTrimaskScenePill) { 720 activeTrimaskScenePill.classList.remove("active"); 721 } 722 723 activeTrimaskScenePill = scenePill; 724 scenePill.classList.add("active"); 725 pill = scenePill.getAttribute("data-value"); 726 var video_active = document.getElementById("trimaskVideo0"); 727 video_active.src = "assets/videos/trimask/" + pill + ".mp4"; 728 video_active.load(); 729} 730 731function selectT2VPriorVideo(methodPill, scenePill, modePill) { 732 select = true; 733 734 if (activeT2VPriorScenePill) { 735 activeT2VPriorScenePill.classList.remove("active"); 736 } 737 738 activeT2VPriorScenePill = scenePill; 739 scenePill.classList.add("active"); 740 pill = scenePill.getAttribute("data-value"); 741 var video_active = document.getElementById("t2vpriorVideo0"); 742 video_active.src = "assets/videos/t2v_prior/" + pill + ".mp4"; 743 video_active.load(); 744} 745 746function selectSelfAttnVideo(methodPill, scenePill, modePill) { 747 select = true; 748 if (activeSelfAttnScenePill) { 749 activeSelfAttnScenePill.classList.remove("active"); 750 } 751 if (activeSelfAttnMethodPill) { 752 activeSelfAttnMethodPill.classList.remove("active"); 753 } 754 if (activeSelfAttnModePill) { 755 activeSelfAttnModePill.classList.remove("active"); 756 } 757 758 activeSelfAttnScenePill = scenePill; 759 activeSelfAttnMethodPill = methodPill; 760 activeSelfAttnModePill = modePill; 761 scenePill.classList.add("active"); 762 methodPill.classList.add("active"); 763 modePill.classList.add("active"); 764 pill = scenePill.getAttribute("data-value"); 765 fg = methodPill.getAttribute("data-value"); 766 block = modePill.getAttribute("data-value"); 767 768 // display hide layers 769 disable_list = disable_selfattn_methods[pill] 770 btn_methods = { 771 'fg0': document.getElementById("btn-selfattn-fg0"), 772 'fg1': document.getElementById("btn-selfattn-fg1"), 773 'fg2': document.getElementById("btn-selfattn-fg2"), 774 } 775 show_alternate_btn = null; 776 for (var [btn_name, btn_method] of Object.entries(btn_methods)) { 777 is_diabled = false 778 for (var i = 0; i < disable_list.length; i++) { 779 if (disable_list[i] == btn_name) { 780 is_diabled = true; 781 break; 782 } 783 } 784 if (is_diabled) { 785 btn_method.style.display = "none"; 786 } else { 787 btn_method.style.display = "inline-flex"; 788 if (show_alternate_btn == null) { 789 show_alternate_btn = btn_method; 790 } 791 } 792 } 793 if (activeSelfAttnMethodPill.style.display == "none") { 794 selectSelfAttnVideo(show_alternate_btn, scenePill, modePill); 795 } 796 797 var video_active = document.getElementById("selfattnVideo0"); 798 video_active.src = "assets/videos/self-attn-analysis/" + pill + "_" + fg + "_" + block + ".mp4"; 799 video_active.load(); 800} 801 802 803function selectFailureVideo(methodPill, scenePill, modePill) { 804 select = true; 805 806 if (activeFailureScenePill) { 807 activeFailureScenePill.classList.remove("active"); 808 } 809 810 activeFailureScenePill = scenePill; 811 scenePill.classList.add("active"); 812 pill = scenePill.getAttribute("data-value"); 813 814 let failure_desc = { 815 "trampoline": "Omnimatte layers handle color blending but are not designed to capture shape deformations as object effects. Because of this limitation, we focused on training Casper to remove color-related effects (i.e., shadows and reflections), so it may struggle to remove physical interactions with the environment", 816 "dog-agility": "Omnimatte layers handle color blending but are not designed to capture shape deformations as object effects. Because of this limitation, we focused on training Casper to remove color-related effects (i.e., shadows and reflections), so it may struggle to remove physical interactions with the environment", 817 "five-beagles": "The removal model may not always produce the desired outcome, particularly in challenging multi-object cases.", 818 "bowling": "The removal model may not always produce the desired outcome, particularly in challenging multi-object cases.", 819 "dog-crosswalk": "The smaller dog is initially invisible, posing a challenge for our Casper model to complete the dog without reference to previous frames. Furthermore, the challenging reflection effects on the crosswalk and road further complicate the removal process. Casper could remove the reflection of the person but leave the larger dog's reflection on the road.", 820 }[pill] 821 var p_desc = document.getElementById("p-failure-desc"); 822 p_desc.innerHTML = failure_desc; 823 824 var video_active = document.getElementById("failureVideo0"); 825 video_active.src = "assets/videos/failures/" + pill + ".mp4"; 826 video_active.load(); 827} 828 829var isUserSpecifiedZoomed = false;
830function zoomUserSpecified() { 831 var div1 = document.querySelector('#div-userspecified-overview'); 832 var div2 = document.querySelector('#div-userspecified-zoom'); 833 var btn = document.querySelector('#btn-userspecified'); 834 if (isUserSpecifiedZoomed) { 835 isUserSpecifiedZoomed = false; 836 div1.style.display = 'block'; 837 div2.style.display = 'none'; 838 btn.classList.remove('active'); 839 btn.innerHTML = 'Click to zoom in' 840 } else { 841 isUserSpecifiedZoomed = true; 842 div2.style.display = 'block'; 843 div1.style.display = 'none'; 844 btn.classList.add('active'); 845 btn.innerHTML = 'Back' 846 } 847} 848 849
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.