Skip to content

Commit 4171db8

Browse files
buoyancy99buoyancy99
committed
add scaled up videos
1 parent dcf1b90 commit 4171db8

File tree

11 files changed

+236
-45
lines changed

11 files changed

+236
-45
lines changed

‎index.html‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -279,11 +279,125 @@ <h2 class="title is-3 has-text-centered">Diffusion Forcing</h2>
279279

280280
<div class="hr"></div>
281281

282+
<section class="hero is-light is-small">
283+
<div class="hero-body">
284+
<div class="container">
285+
<p style="margin-bottom: 0.5rem">
286+
<b>Update 2025: Scaling Up Diffusion Forcing</b> Finetuning the state-of-the-art Wan2.1-T2V-1.3B for only 20k steps and 49 frames and rollout 5x to 217 frames stably. For more details, see our follow up work <a href="https://boyuan.space/history-guidance/">History-Guided Video Diffusion</a></em>
287+
</p>
288+
<div id="results-carousel-rollout" class="carousel results-carousel">
289+
<div class="item-2">
290+
<video
291+
poster=""
292+
id="rollout-4"
293+
autoplay
294+
controls
295+
muted
296+
loop
297+
playsinline
298+
height="100%"
299+
loading="lazy">
300+
<source src="./static/videos/rebuttal/rollout/4.mp4" type="video/mp4" />
301+
</video>
302+
<p class="prompt-text">
303+
Close-up view of a surfer riding a wave at sunset, with the camera smoothly following their dynamic movement across the water.
304+
</p>
305+
</div>
306+
<div class="item-2">
307+
<video
308+
poster=""
309+
id="rollout-2"
310+
autoplay
311+
controls
312+
muted
313+
loop
314+
playsinline
315+
height="100%"
316+
loading="lazy">
317+
<source src="./static/videos/rebuttal/rollout/2.mp4" type="video/mp4" />
318+
</video>
319+
<p class="prompt-text">
320+
A cyclist pushes uphill on a winding road, with the camera keeping them centered, capturing their determination.
321+
</p>
322+
</div>
323+
<div class="item-2">
324+
<video
325+
poster=""
326+
id="rollout-3"
327+
autoplay
328+
controls
329+
muted
330+
loop
331+
playsinline
332+
height="100%"
333+
loading="lazy">
334+
<source src="./static/videos/rebuttal/rollout/3.mp4" type="video/mp4" />
335+
</video>
336+
<p class="prompt-text">
337+
A static camera view of waves during sunset.
338+
</p>
339+
</div>
340+
<div class="item-2">
341+
<video
342+
poster=""
343+
id="rollout-6"
344+
autoplay
345+
controls
346+
muted
347+
loop
348+
playsinline
349+
height="100%"
350+
loading="lazy">
351+
<source src="./static/videos/rebuttal/rollout/6.mp4" type="video/mp4" />
352+
</video>
353+
<p class="prompt-text">
354+
A monkey sits on a stone, looking around curiously, with the camera stationary, capturing the serene backdrop of the landscape.
355+
</p>
356+
</div>
357+
<div class="item-2">
358+
<video
359+
poster=""
360+
id="rollout-5"
361+
autoplay
362+
controls
363+
muted
364+
loop
365+
playsinline
366+
height="100%"
367+
loading="lazy">
368+
<source src="./static/videos/rebuttal/rollout/5.mp4" type="video/mp4" />
369+
</video>
370+
<p class="prompt-text">
371+
A dog is preparing to sleep. It closes its eyes, then rests its head to the side on the ground, with the camera capturing its peaceful demeanor. The dog occasionally shifts its position, adjusting for comfort.
372+
</p>
373+
</div>
374+
<div class="item-2">
375+
<video
376+
poster=""
377+
id="rollout-1"
378+
autoplay
379+
controls
380+
muted
381+
loop
382+
playsinline
383+
height="100%"
384+
loading="lazy">
385+
<source src="./static/videos/rebuttal/rollout/1.mp4" type="video/mp4" />
386+
</video>
387+
<p class="prompt-text">
388+
An aerial view of a tropical beach, with waves gently lapping the shore and palm trees.
389+
</p>
390+
</div>
391+
</div>
392+
<hr style="border: none; border-top: 1px dashed #9c9c9c; width: 100%;">
393+
</section>
394+
282395
<section class="section">
283396
<div class="container is-max-desktop">
284397
<div class="columns is-centered has-text-centered">
285398
<div class="column is-full-width has-text-justified">
286399
<h2 class="title is-3 has-text-centered">Video Prediction</h2>
400+
287401
<div class="content has-text-justified">
288402
<p>
289403
We provide a list of synthesized videos directly generated by

‎static/css/index.css‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,19 +134,43 @@ body {
134134

135135
.results-carousel {
136136
overflow: hidden;
137+
padding: 0 0 20px 0;
137138
}
138139

139-
.results-carousel .item {
140+
.results-carousel .item-2 {
140141
margin: 5px;
141142
overflow: hidden;
142143
border: 1px solid #bbb;
143144
border-radius: 10px;
144145
padding: 0;
145146
font-size: 0;
147+
position: relative;
148+
height: 100%; /* Ensure all items have same height */
146149
}
147150

148151
.results-carousel video {
149152
margin: 0;
153+
width: 100%;
154+
height: 100%;
155+
object-fit: cover; /* Ensure videos fill their containers evenly */
156+
}
157+
158+
.results-carousel .prompt-text {
159+
position: absolute;
160+
bottom: 0;
161+
left: 0;
162+
right: 0;
163+
background: rgba(0,0,0,0.7);
164+
color: white;
165+
padding: 10px;
166+
margin: 0;
167+
font-size: 14px;
168+
opacity: 0;
169+
transition: opacity 0.3s;
170+
}
171+
172+
.results-carousel .item-2:hover .prompt-text {
173+
opacity: 1;
150174
}
151175

152176
.interpolation-panel {

‎static/js/index.js‎

Lines changed: 91 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -14,65 +14,112 @@ function preloadInterpolationImages() {
1414

1515
function setInterpolationImage(i) {
1616
var image = interp_images[i];
17-
image.ondragstart = function() { return false; };
18-
image.oncontextmenu = function() { return false; };
19-
$('#interpolation-image-wrapper').empty().append(image);
17+
if (image) {
18+
image.ondragstart = function() { return false; };
19+
image.oncontextmenu = function() { return false; };
20+
$('#interpolation-image-wrapper').empty().append(image);
21+
}
2022
}
2123

22-
2324
$(document).ready(function() {
2425
// Check for click events on the navbar burger icon
2526
$(".navbar-burger").click(function() {
2627
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
2728
$(".navbar-burger").toggleClass("is-active");
2829
$(".navbar-menu").toggleClass("is-active");
29-
3030
});
3131

32-
var options = {
33-
slidesToScroll: 1,
34-
slidesToShow: 3,
35-
loop: true,
36-
infinite: true,
37-
autoplay: false,
38-
autoplaySpeed: 3000,
39-
}
32+
// Updated Carousel configuration
33+
var carouselOptions = {
34+
slidesToScroll: 3,
35+
slidesToShow: 3,
36+
loop: true,
37+
infinite: true,
38+
autoplay: false,
39+
autoplaySpeed: 3000,
40+
pagination: true,
41+
navigationSwipe: true,
42+
navigationKeys: true,
43+
breakpoints: [
44+
{
45+
changePoint: 1024,
46+
slidesToShow: 3,
47+
slidesToScroll: 3
48+
},
49+
{
50+
changePoint: 768,
51+
slidesToShow: 2,
52+
slidesToScroll: 2
53+
},
54+
{
55+
changePoint: 480,
56+
slidesToShow: 1,
57+
slidesToScroll: 1
58+
}
59+
]
60+
};
4061

41-
// Initialize all div with carousel class
42-
var carousels = bulmaCarousel.attach('.carousel', options);
62+
// Initialize carousels
63+
var carousels = bulmaCarousel.attach('.carousel', carouselOptions);
4364

44-
// Loop on each carousel initialized
45-
for(var i = 0; i < carousels.length; i++) {
46-
// Add listener to event
47-
carousels[i].on('before:show', state => {
48-
console.log(state);
49-
});
50-
}
65+
// Handle video playback when slide changes
66+
carousels.forEach(carousel => {
67+
// Play all visible videos initially
68+
function playVisibleVideos() {
69+
const visibleSlides = carousel.element.querySelectorAll('.is-active');
70+
visibleSlides.forEach(slide => {
71+
const video = slide.querySelector('video');
72+
if (video) {
73+
// Reset the video to start and play
74+
video.currentTime = 0;
75+
const playPromise = video.play();
76+
if (playPromise !== undefined) {
77+
playPromise.catch(error => {
78+
console.log("Auto-play was prevented:", error);
79+
});
80+
}
81+
}
82+
});
83+
}
5184

52-
// Access to bulmaCarousel instance of an element
53-
var element = document.querySelector('#my-element');
54-
if (element && element.bulmaCarousel) {
55-
// bulmaCarousel instance is available as element.bulmaCarousel
56-
element.bulmaCarousel.on('before-show', function(state) {
57-
console.log(state);
58-
});
59-
}
85+
// Play videos on initial load
86+
playVisibleVideos();
6087

61-
/*var player = document.getElementById('interpolation-video');
62-
player.addEventListener('loadedmetadata', function() {
63-
$('#interpolation-slider').on('input', function(event) {
64-
console.log(this.value, player.duration);
65-
player.currentTime = player.duration / 100 * this.value;
66-
})
67-
}, false);*/
68-
preloadInterpolationImages();
88+
// Handle slide changes
89+
carousel.on('after:show', state => {
90+
setTimeout(playVisibleVideos, 100); // Small delay to ensure DOM is updated
91+
});
6992

70-
$('#interpolation-slider').on('input', function(event) {
71-
setInterpolationImage(this.value);
93+
// Add click handlers for navigation buttons
94+
const prevButton = carousel.element.querySelector('.previous');
95+
const nextButton = carousel.element.querySelector('.next');
96+
97+
if (prevButton) {
98+
prevButton.addEventListener('click', () => {
99+
setTimeout(playVisibleVideos, 100);
100+
});
101+
}
102+
103+
if (nextButton) {
104+
nextButton.addEventListener('click', () => {
105+
setTimeout(playVisibleVideos, 100);
106+
});
107+
}
72108
});
73-
setInterpolationImage(0);
74-
$('#interpolation-slider').prop('max', NUM_INTERP_FRAMES - 1);
75109

76-
bulmaSlider.attach();
110+
// Preload interpolation images if they exist
111+
if (typeof INTERP_BASE !== 'undefined') {
112+
preloadInterpolationImages();
113+
114+
$('#interpolation-slider').on('input', function(event) {
115+
setInterpolationImage(this.value);
116+
});
117+
setInterpolationImage(0);
118+
$('#interpolation-slider').prop('max', NUM_INTERP_FRAMES - 1);
119+
}
77120

78-
})
121+
// Initialize sliders
122+
if (typeof bulmaSlider !== 'undefined') {
123+
bulmaSlider.attach();
124+
}
125+
});

‎static/videos/rebuttal/.DS_Store‎

6 KB
Binary file not shown.

‎static/videos/rebuttal/rollout/1.mp4‎

4.75 MB
Binary file not shown.

‎static/videos/rebuttal/rollout/2.mp4‎

5.03 MB
Binary file not shown.

‎static/videos/rebuttal/rollout/3.mp4‎

3.43 MB
Binary file not shown.

‎static/videos/rebuttal/rollout/4.mp4‎

2.34 MB
Binary file not shown.

‎static/videos/rebuttal/rollout/5.mp4‎

2.02 MB
Binary file not shown.

‎static/videos/rebuttal/rollout/6.mp4‎

2.71 MB
Binary file not shown.

0 commit comments

Comments
 (0)