https://vivid-dream-4d.github.io/assets/js/index.js

1window.HELP_IMPROVE_VIDEOJS = false;
2function reload() {
3    var videos = document.getElementsByClassName('item');
4    for(var i = 0; i < videos.length; i++) {
5        // videos[i].style.width = width;
6    }
7}
8
9function configure_carousel() {
10    var options = {
11            slidesToScroll: 1,
12            slidesToShow: 4,
13            loop: true,
14            infinite: true,
15            autoplay: false,
16            autoplaySpeed: 3000,
17    }
18    // Initialize all div with carousel class
19    var carousels = bulmaCarousel.attach('.carousel', options);
20    
21    // Loop on each carousel initialized
22    for(var i = 0; i < carousels.length; i++) {
23        // Add listener to  event
24        // carousels[i].reset();
25        carousels[i].on('before:show', state => {
26            console.log(state);
27        });
28    }
29
30    // Access to bulmaCarousel instance of an element
31    var element = document.querySelector('#item');
32    if (element && element.bulmaCarousel) {
33        // bulmaCarousel instance is available as element.bulmaCarousel
34        element.bulmaCarousel.on('before-show', function(state) {
35            console.log(state);
36        });
37    }
38    
39    bulmaSlider.attach();
40    reload();
41}
42
43$(document).ready(function() {
44    // Check for click events on the navbar burger icon
45    $(".navbar-burger").click(function() {
46      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
47      $(".navbar-burger").toggleClass("is-active");
48      $(".navbar-menu").toggleClass("is-active");
49
50    });
51
52    configure_carousel();
53
54})
55
56function click_button(button_family_name, clicked_button) {
57    btns = document.getElementsByClassName(button_family_name);
58    for(var i = 0; i < btns.length; i++) {
59        btns[i].classList.remove('active');
60    }
61    clicked_button.classList.add('active');
62}
63
64var compare_method = 'baseline';
65var compare_video = 'waterfalls';
66function change_method(ele, method_name) {
67    click_button('btn-compare-method', ele);
68    compare_method = method_name;
69
70    if(method_name == 'baseline') {
71        document.getElementById('method_label').innerHTML = '<b>Baseline</b>';
72        document.getElementById('method_desc').innerHTML = 'The baseline method first generates a single SVD video and then perform video 3D reconstruction for training a 4D scene model, leading to many unseen areas and limited free-view synthesis.';
73    } else if (method_name == 'second') {
74        document.getElementById('method_label').innerHTML = '<b>Without SDEdit quality refinement</b>';
75        document.getElementById('method_desc').innerHTML = 'Without a second-time SDEdit by SVD, the Time-Reversal output is blurry, resulting in a lower quality of 4D scene model, particularly in "campfire" example';
76    } else if (method_name == 'mask') {
77        document.getElementById('method_label').innerHTML = '<b>Without visibility mask</b>';
78        document.getElementById('method_desc').innerHTML = 'By explicitly ensuring each part of the scene to be seen by only one video, the blurriness in the trained 4D scene model can be alleviated.';
79    } else { // motion embed
80        document.getElementById('method_label').innerHTML = '<b>Without motion embedding</b>';
81        document.getElementById('method_desc').innerHTML = 'By implicitly handling the multi-video inconsistencies in the embedding space, particularly in the "waterfalls" case.';
82    }
83
84    change_comparison_video(0, compare_video);
85
86}
87
88
89
90function change_comparison_video(ele, case_name) {
91    if(ele == 0) {
92        var btns = document.getElementsByClassName('btn-compare-case');
93        for(var i = 0; i < btns.length; i++) {
94            if(btns[i].innerHTML.includes(case_name)) {
95                ele = btns[i];
96                break;
97            }
98        }
99    }
100    click_button('btn-compare-case', ele);
101
102    nerf_video = case_name;
103    var video = document.getElementById('video_method_comparison');
104    var source = document.getElementById('source_method_comparison');
105    video.pause()
106    source.setAttribute('src', 
107                        './assets/videos/comparisons/' + case_name + '_' + compare_method + '.mp4')
108    video.load();
109    video.play();
110}
111
112function change_video_gen(ele, case_name) {
113    ele_desc = 'video_gen_method_desc';
114    ele_label_right = 'label-video-gen-right';
115    ele_label_mid = 'label-video-gen-mid'
116    ele_label_left = 'label-video-gen-left';
117    if(case_name == 'comp_svd') {
118        document.getElementById(ele_label_right).innerHTML = '<b>Stable Video Diffusio</b>';
119        document.getElementById(ele_label_left).innerHTML = '<b>Static-point-cloud rendering video with specified trajectory</b>';
120        document.getElementById(ele_label_mid).style.display = 'none';
121        document.getElementById(ele_desc).innerHTML = 'Naively applying <a href="https://huggingface.co/stabilityai/stable-video-diffusion-img2vid-xt">SVD</a> with only the start view results in uncontrollable camera poses.';
122    } else if(case_name == 'comp_tr') {
123        document.getElementById(ele_label_right).innerHTML = '<b>Time-Reversal</b>';
124        document.getElementById(ele_label_left).innerHTML = '<b>Static-point-cloud rendering video with specified trajectory</b>';
125        document.getElementById(ele_label_mid).style.display = 'none';
126        document.getElementById(ele_desc).innerHTML = '<a href="https://time-reversal.github.io/">Time-Reversal</a> ensures start and end view consistency but suffers from blurriness and camera trajectory deviations in the middle frames.';
127    } else if(case_name == 'comp_dynamicrafter') {
128        document.getElementById(ele_label_right).innerHTML = '<b>DynamiCrafter</b>';
129        document.getElementById(ele_label_left).innerHTML = '<b>Static-point-cloud rendering video with specified trajectory</b>';
130        document.getElementById(ele_label_mid).style.display = 'none';
131        document.getElementById(ele_desc).innerHTML = 'The <a href="https://doubiiu.github.io/projects/DynamiCrafter/">DynamiCrafter</a> interpolation model generates a 512x320 video with 16 frames using start- and end-view images as conditions. In contrast, we opt for SVD to produce a higher-resolution video (1024x768) with 25 frames.';
132    } else if(case_name == 'comp_motionctrl') {
133        document.getElementById(ele_label_right).innerHTML = '<b>MotionCtrl</b>';
134        document.getElementById(ele_label_left).innerHTML = '<b>Static-point-cloud rendering video with specified trajectory</b>';
135        document.getElementById(ele_label_mid).style.display = 'none';
136        document.getElementById(ele_desc).innerHTML = '<a href="https://wzhouxiff.github.io/projects/MotionCtrl/">MotionCtrl</a> with 14-frame SVD uses the start-view image and virtual camera trajectory as conditions. However, the generated video may not consistently adhere to the conditioning camera poses.';
137    } else if(case_name == 'comp_cameractrl') {
138        document.getElementById(ele_label_right).innerHTML = '<b>CameraCtrl</b>';
139        document.getElementById(ele_label_left).innerHTML = '<b>Static-point-cloud rendering video with specified trajectory</b>';
140        document.getElementById(ele_label_mid).style.display = 'none';
141        document.getElementById(ele_desc).innerHTML = 'The video generated by <a href="https://hehao13.github.io/projects-CameraCtrl/">CameraCtrl</a> with 25-frame SVD better matches the specified camera trajectory but exhibits minimal scene motion and a resolution of only 576x320.';
142    } else if (case_name == 'comp_ours_baseline') {
143        document.getElementById(ele_label_right).innerHTML = '<b><a href="https://time-reversal.github.io/">Time-Reversal</a> with SDEdit,<br>conditioned on static-rendering video</b>';
144        document.getElementById(ele_label_left).innerHTML = '<b>Static-rendering video with specified trajectory</b>';
145        document.getElementById(ele_label_mid).style.display = 'none';
146        document.getElementById(ele_desc).innerHTML = 'Using the static sce

146ne video as a condition for Time-Reversal in an SDEdit manner encourages following the desired trajectory but yields low-quality results.';
147    } else if (case_name == 'comp_tr-sdedit_svd-sdedit') {
148        document.getElementById(ele_label_right).innerHTML = '<b>Refine quality by SDEdit with SVD</b>';
149        document.getElementById(ele_label_left).innerHTML = '<b>Static-rendering video</b>';
150        document.getElementById(ele_label_mid).style.display = 'block';
151        document.getElementById(ele_label_mid).innerHTML = '<b>Time-Reversal with SDEdit</b>';
152        document.getElementById(ele_desc).innerHTML = 'Applying SDEdit again with only the start view improves quality but causes the deviations of camera poses and appearance in end-views.';
153    } else { // motion embed
154        document.getElementById(ele_label_right).innerHTML = '<b>End-frame correction</b>';
155        document.getElementById(ele_label_left).innerHTML = '<b>Static-rendering video</b>';
156        document.getElementById(ele_label_mid).style.display = 'block';
157        document.getElementById(ele_label_mid).innerHTML = '<b>Quality refinement by SVD-SDEdit</b>';
158        document.getElementById(ele_desc).innerHTML = 'We correct the quality-refined video by applying a smooth transition to the last frames using FILM to match the end view. Our approach generates animated videos with ambient dynamics while respecting the specified camera trajectory.';
159    }
160
161    if(ele == 0) {
162        var btns = document.getElementsByClassName('btn-compare-video-gen');
163        for(var i = 0; i < btns.length; i++) {
164            if(btns[i].innerHTML.includes(case_name)) {
165                ele = btns[i];
166                break;
167            }
168        }
169    }
170    click_button('btn-compare-video-gen', ele);
171
172    nerf_video = case_name;
173    var video = document.getElementById('video_video_gen_comparison');
174    var source = document.getElementById('source_video_gen_comparison');
175    video.pause()
176    source.setAttribute('src', 
177                        './assets/videos/video-generation/' + case_name + '.mp4')
178    video.load();
179    video.play();
180
181}