Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@wileewang
wileewang authored Mar 29, 2024
1 parent 6f2788c commit 1e54449
Showing 1 changed file with 115 additions and 37 deletions.
152 changes: 115 additions & 37 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
Expand Down Expand Up @@ -225,73 +225,123 @@ <h2 class="subtitle has-text-centered">
</video>
</div>
<div style="text-align: center;">
<p style="font-family: 'Segoe Print', sans-serif;">Caption 2</p>
<img src="static/images/0.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/>
<p style="font-family: 'Segoe Print', sans-serif;">"A tank is running in the desert."</p>
<!-- <img src="static/images/0.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/> -->
<video poster="" id="tree" autoplay controls muted loop height="100%">
<!-- Your video here -->
<source src="static/videos/car-turn/a_tank_driving_in_desert.mp4" type="video/mp4">
</video>
</div>
<div style="text-align: center;">
<p style="font-family: 'Segoe Print', sans-serif;">Caption 3</p>
<img src="static/images/0.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/>
<p style="font-family: 'Segoe Print', sans-serif;">"A tiger is running in the forest."</p>
<!-- <img src="static/images/0.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/> -->
<video poster="" id="tree" autoplay controls muted loop height="100%">
<!-- Your video here -->
<source src="static/videos/car-turn/a_tiger_running_in_the_jungle.mp4" type="video/mp4">
</video>
</div>
</div>
</div>

<div style="display: flex; justify-content: center;">
<div class="gif-container" style="display: flex; justify-content: center; gap: 20px; margin-top: 0px;">
<div style="text-align: center;">
<p style="font-family: 'Segoe Print', sans-serif;">Caption 1</p>
<img src="static/images/0.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/>
<p style="font-family: 'Segoe Print', sans-serif;">Source Video</p>
<!-- <img src="static/images/0.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/> -->
<video poster="" id="tree" autoplay controls muted loop height="66.7%">
<!-- Your video here -->
<source src="static/videos/roundabout/car-roundabout-24.mp4" type="video/mp4">
</video>

</div>
<div style="text-align: center;">
<p style="font-family: 'Segoe Print', sans-serif;">Caption 2</p>
<img src="static/images/0.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/>
<p style="font-family: 'Segoe Print', sans-serif;">"A knight in armor rides a Segway"</p>
<!-- <img src="static/images/0.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/> -->
<video poster="" id="tree" autoplay controls muted loop height="100%">
<!-- Your video here -->
<source src="static/videos/roundabout/A_knight_in_armor_rides_a_Segway_seed_0.mp4" type="video/mp4">
</video>

</div>
<div style="text-align: center;">
<p style="font-family: 'Segoe Print', sans-serif;">Caption 3</p>
<img src="static/images/0.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/>
<p style="font-family: 'Segoe Print', sans-serif;">"A toy train chugs around a roundabout tree"</p>
<!-- <img src="static/images/0.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/> -->
<video poster="" id="tree" autoplay controls muted loop height="100%">
<!-- Your video here -->
<source src="static/videos/roundabout/A_toy_train_chugs_around_a_roundabout_tree_seed_26.mp4" type="video/mp4">
</video>
</div>
</div>
</div>

<div style="display: flex; justify-content: center;">
<div class="gif-container" style="display: flex; justify-content: center; gap: 20px; margin-top: 0px;">
<div style="text-align: center;">
<p style="font-family: 'Segoe Print', sans-serif;">Caption 1</p>
<img src="static/images/0.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/>
<p style="font-family: 'Segoe Print', sans-serif;">Source Video</p>
<!-- <img src="static/images/0.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/> -->
<video poster="" id="tree" autoplay controls muted loop height="66.7%">
<!-- Your video here -->
<source src="static/videos/longboard/longboard-24.mp4" type="video/mp4">
</video>

</div>
<div style="text-align: center;">
<p style="font-family: 'Segoe Print', sans-serif;">Caption 2</p>
<img src="static/images/0.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/>
<p style="font-family: 'Segoe Print', sans-serif;">"A teddy bear is riding a tricycle in Times Square"</p>
<!-- <img src="static/images/0.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/> -->
<video poster="" id="tree" autoplay controls muted loop height="100%">
<!-- Your video here -->
<source src="static/videos/longboard/A_teddy_bear_is_riding_a_tricycle_in_Times_Square._seed_29.mp4" type="video/mp4">
</video>

</div>
<div style="text-align: center;">
<p style="font-family: 'Segoe Print', sans-serif;">Caption 3</p>
<img src="static/images/0.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/>
<p style="font-family: 'Segoe Print', sans-serif;">"A pigeon is strutting around a town square"</p>
<!-- <img src="static/images/0.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/> -->
<video poster="" id="tree" autoplay controls muted loop height="100%">
<!-- Your video here -->
<source src="static/videos/longboard/A_pigeon_is_strutting_around_a_town_square._seed_8.mp4" type="video/mp4">
</video>
</div>
</div>
</div>

<!-- AnimateDiff Resut-->
<div class="container is-max-desktop", style="margin-top: 40px;">
<!-- <div class="container is-max-desktop", style="margin-top: 40px;">
<div class="hero-body">
<h2 class="subtitle has-text-centered">
<strong style="font-size: 28px;">Result AnimateDiff</strong><br>
</h2>
</div>
</div>
</div> -->

<!-- GIF展示区域现在在它自己的容器中，并且没有最大宽度限制 -->
<div style="display: flex; justify-content: center;">
<div class="gif-container" style="display: flex; justify-content: center; gap: 20px; margin-top: 0px;">
<div style="text-align: center;">
<p style="font-family: 'Segoe Print', sans-serif;">Caption 1</p>
<img src="static/images/1.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/>
<p style="font-family: 'Segoe Print', sans-serif;">Source Video</p>
<!-- <img src="static/images/0.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/> -->
<video poster="" id="tree" autoplay controls muted loop height="66.7%">
<!-- Your video here -->
<source src="static/videos/train/train-24.mp4" type="video/mp4">
</video>

</div>
<div style="text-align: center;">
<p style="font-family: 'Segoe Print', sans-serif;">Caption 2</p>
<img src="static/images/1.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/>
<p style="font-family: 'Segoe Print', sans-serif;">"A little airplane does loops over the grass"</p>
<!-- <img src="static/images/0.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/> -->
<video poster="" id="tree" autoplay controls muted loop height="100%">
<!-- Your video here -->
<source src="static/videos/train/A_little_airplane_does_loops_over_the_grass_seed_25.mp4" type="video/mp4">
</video>

</div>
<div style="text-align: center;">
<p style="font-family: 'Segoe Print', sans-serif;">Caption 3</p>
<img src="static/images/1.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/>
<p style="font-family: 'Segoe Print', sans-serif;">"A model car speeds down a miniature track"</p>
<!-- <img src="static/images/0.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/> -->
<video poster="" id="tree" autoplay controls muted loop height="100%">
<!-- Your video here -->
<source src="static/videos/train/A_model_car_speeds_down_a_miniature_track_seed_34.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
Expand All @@ -300,16 +350,30 @@ <h2 class="subtitle has-text-centered">
<div style="display: flex; justify-content: center;">
<div class="gif-container" style="display: flex; justify-content: center; gap: 20px; margin-top: 0px;">
<div style="text-align: center;">
<p style="font-family: 'Segoe Print', sans-serif;">Caption 1</p>
<img src="static/images/1.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/>
<p style="font-family: 'Segoe Print', sans-serif;">Source Video</p>
<!-- <img src="static/images/0.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/> -->
<video poster="" id="tree" autoplay controls muted loop height="66.7%">
<!-- Your video here -->
<source src="static/videos/bmx-bumps/bmx-bumps-24.mp4" type="video/mp4">
</video>

</div>
<div style="text-align: center;">
<p style="font-family: 'Segoe Print', sans-serif;">Caption 2</p>
<img src="static/images/1.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/>
<p style="font-family: 'Segoe Print', sans-serif;">"A turtle plods in the sea"</p>
<!-- <img src="static/images/0.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/> -->
<video poster="" id="tree" autoplay controls muted loop height="100%">
<!-- Your video here -->
<source src="static/videos/bmx-bumps/A_turtle_plods_in_the_sea_seed_22.mp4" type="video/mp4">
</video>

</div>
<div style="text-align: center;">
<p style="font-family: 'Segoe Print', sans-serif;">Caption 3</p>
<img src="static/images/1.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/>
<p style="font-family: 'Segoe Print', sans-serif;">"A penguin is sliding on an icy slope"</p>
<!-- <img src="static/images/0.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/> -->
<video poster="" id="tree" autoplay controls muted loop height="100%">
<!-- Your video here -->
<source src="static/videos/bmx-bumps/A_penguin_is_sliding_on_an_icy_slope._seed_10.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
Expand All @@ -318,16 +382,30 @@ <h2 class="subtitle has-text-centered">
<div style="display: flex; justify-content: center;">
<div class="gif-container" style="display: flex; justify-content: center; gap: 20px; margin-top: 0px;">
<div style="text-align: center;">
<p style="font-family: 'Segoe Print', sans-serif;">Caption 1</p>
<img src="static/images/1.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/>
<p style="font-family: 'Segoe Print', sans-serif;">Source Video</p>
<!-- <img src="static/images/0.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/> -->
<video poster="" id="tree" autoplay controls muted loop height="66.7%">
<!-- Your video here -->
<source src="static/videos/rollerblade/rollerblade-24.mp4" type="video/mp4">
</video>

</div>
<div style="text-align: center;">
<p style="font-family: 'Segoe Print', sans-serif;">Caption 2</p>
<img src="static/images/1.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/>
<p style="font-family: 'Segoe Print', sans-serif;">"A soccer ball weaves through cones on its own"</p>
<!-- <img src="static/images/0.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/> -->
<video poster="" id="tree" autoplay controls muted loop height="100%">
<!-- Your video here -->
<source src="static/videos/rollerblade/A_soccer_ball_weaves_through_cones_on_its_own_seed_7.mp4" type="video/mp4">
</video>

</div>
<div style="text-align: center;">
<p style="font-family: 'Segoe Print', sans-serif;">Caption 3</p>
<img src="static/images/1.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/>
<p style="font-family: 'Segoe Print', sans-serif;">"A rabbit bounds across a green lawn"</p>
<!-- <img src="static/images/0.gif" alt="MY ALT TEXT" style="margin: 0 10px; width: 400px;"/> -->
<video poster="" id="tree" autoplay controls muted loop height="100%">
<!-- Your video here -->
<source src="static/videos/rollerblade/A_rabbit_bounds_across_a_green_lawn._seed_13.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
Expand Down

0 comments on commit 1e54449

Please sign in to comment.