update dynamicrafterHD

projects/DynamiCrafter/index.html

@@ -116,13 +116,24 @@ <h1 class="title is-1 publication-title">DynamiCrafter: Animating Open-domain <b
                   </a>
                 </span>
                 <!-- Video Link. -->
+
+                <span class="link-block">
+                  <a href="https://www.youtube.com/watch?v=0NfmIsNAg-g"
+                      class="external-link button is-normal is-rounded is-dark">
+                    <span class="icon">
+                        <i class="fab fa-youtube"></i>
+                    </span>
+                    <span>Video (576x1024)</span>
+                  </a>
+                </span>
+
                 <span class="link-block">
                   <a href="https://www.youtube.com/watch?v=PtW7hjCawbo"
                       class="external-link button is-normal is-rounded is-dark">
                     <span class="icon">
                         <i class="fab fa-youtube"></i>
                     </span>
-                    <span>Video</span>
+                    <span>Video (256x256)</span>
                   </a>
                 </span>
               </div>
@@ -211,9 +222,9 @@ <h1 class="title is-1 publication-title">DynamiCrafter: Animating Open-domain <b
             type="video/mp4">
           </video> -->
           <div class="column-video" style="border-radius:10px;justify-content: center;align-items: center; font-size: 100px;">
-            <iframe width="960" height="540" src="https://www.youtube.com/embed/PtW7hjCawbo?si=twvaWsle8o7afVDV" src="" class="frame" frameborder="0" allowfullscreen></iframe>
+            <iframe width="960" height="540" src="https://www.youtube.com/embed/0NfmIsNAg-g?si=BVzf_OQuZ9VIB_X0" src="" class="frame" frameborder="0" allowfullscreen></iframe>
           </div>
-          <p style="margin-bottom: 30px;margin-top: -20px;"> <h6>We recommend watching the video with sound on</h6>
+          <p style="margin-bottom: 30px;margin-top: -20px;"> <h6>Demo video for the results at a resolution of 256x256 is <a href="https://www.youtube.com/watch?v=PtW7hjCawbo">here</a>.</h6>
           </p>
         </div>
     </div>
@@ -224,9 +235,99 @@ <h1 class="title is-1 publication-title">DynamiCrafter: Animating Open-domain <b
     <!-- <p>&nbsp;</p> -->
     <!-- <hr> -->
 
-    <h2 style="margin-top: 0em;" id="our_results_container" align="left"><a name="image-results" id="image-results"></a>Showcases produced by our method</h2>
+    <h2 style="margin-top: 0em;" id="our_results_container" align="left"><a name="image-results" id="image-results"></a>Showcases produced by our method (576&times;1024)</h2>
+
+    <div id="results-carousel" class="carousel results-carousel" align="center">
+      <div class="item item-video3">
+        <!-- <img id="video11" src="video_showcase_1024/ship02.gif" alt="GIF 1" class="gif"> -->
+        <video src="video_showcase_1024/girl07.mp4" autoplay loop controls muted></video>
+      </div>
+      <div class="item item-video1">
+        <!-- <img id="video11" src="video_showcase_1024/bike_chineseink.gif" alt="GIF 1" class="gif"> -->
+        <video src="video_showcase_1024/firework03.mp4" autoplay loop controls muted></video>
+      </div>
+      <div class="item item-video2">
+        <!-- <img id="video11" src="video_showcase_1024/bloom01.gif" alt="GIF 1" class="gif"> -->
+        <video src="video_showcase_1024/bloom01.mp4" autoplay loop controls muted></video>
+      </div>
+      <div class="item item-video3">
+        <!-- <img id="video11" src="video_showcase_1024/car03.gif" alt="GIF 1" class="gif"> -->
+        <video src="video_showcase_1024/racecar.mp4" autoplay loop controls muted></video>
+      </div>
+      <div class="item item-video1">
+        <!-- <img id="video11" src="video_showcase_1024/firework03.gif" alt="GIF 1" class="gif"> -->
+        <video src="video_showcase_1024/fish.mp4" autoplay loop controls muted></video>
+      </div>
+      <div class="item item-video2">
+        <!-- <img id="video11" src="video_showcase_1024/fish.gif" alt="GIF 1" class="gif"> -->
+        <video src="video_showcase_1024/isometric.mp4" autoplay loop controls muted></video>
+      </div>
+      <div class="item item-video3">
+        <!-- <img id="video11" src="video_showcase_1024/ship02.gif" alt="GIF 1" class="gif"> -->
+        <video src="video_showcase_1024/zreal_boat.mp4" autoplay loop controls muted></video>
+      </div>
+      <div class="item item-video3">
+        <!-- <img id="video11" src="video_showcase_1024/ship02.gif" alt="GIF 1" class="gif"> -->
+        <video src="video_showcase_1024/bike_chineseink.mp4" autoplay loop controls muted></video>
+      </div>
+      <div class="item item-video3">
+        <!-- <img id="video11" src="video_showcase_1024/ship02.gif" alt="GIF 1" class="gif"> -->
+        <video src="video_showcase_1024/panda.mp4" autoplay loop controls muted></video>
+      </div>
+    </div>
+    <p>&nbsp;</p>
+
+    <h2 style="margin-top: 0em;" id="our_results_container1" align="left"><a name="image-results" id="image-results1"></a>Showcases (320&times;512)</h2>
     <p align="left">
-        Hover over to view the input still images and text prompts.
+      Hover over to view the input still images and text prompts.
+    </p>
+    <table  width="1000" align="center">
+      <tbody>
+        <!-- <div class="video-container">
+          <video  width="200" src="" autoplay loop controls muted></video>
+          <img class="hover-image" src="video_showcase/extra2/" alt="Hover image">
+          <div class="caption"></div>
+        </div> -->
+        <tr>
+          <th>
+              <div class="video-container">
+                <video  width="500" src="video_showcase_512/bloom2.mp4" autoplay loop controls muted></video>
+                <img class="hover-image" src="video_showcase_512/bloom2.png" alt="Hover image">
+                <div class="caption">time-lapse of a blooming flower on a stem</div>
+              </div>
+          </th>
+          <th>
+            <div class="video-container">
+              <video  width="500" src="video_showcase_512/train_anime02.mp4" autoplay loop controls muted></video>
+              <img class="hover-image" src="video_showcase_512/train_anime02.png" alt="Hover image">
+              <div class="caption">a train traveling through a field of flowers and grasses</div>
+            </div>
+          </th>
+        </tr>
+        <tr>
+          <th>
+            <div class="video-container">
+              <video  width="500" src="video_showcase_512/pour_honey.mp4" autoplay loop controls muted></video>
+              <img class="hover-image" src="video_showcase_512/pour_honey.png" alt="Hover image">
+              <div class="caption">pouring honey onto some slices of bread</div>
+            </div>
+          </th>
+          <th>
+            <div class="video-container">
+              <video  width="500" src="video_showcase_512/lighthouse.mp4" autoplay loop controls muted></video>
+              <img class="hover-image" src="video_showcase_512/lighthouse.png" alt="Hover image">
+              <div class="caption">a lighthouse with waving ocean</div>
+            </div>
+          </th>
+        </tr>
+        </tbody>
+        </table>
+
+        <p>&nbsp;</p>
+
+    <h2 style="margin-top: 0em;" id="our_results_container2" align="left"><a name="image-results" id="image-results2"></a>Showcases (256&times;256)</h2>
+    <p align="left">
+      Hover over to view the input still images and text prompts.
     </p>
     <table  width="1000" align="center">
       <tbody>
@@ -309,7 +410,7 @@ <h2 style="margin-top: 0em;" id="our_results_container" align="left"><a name="im
             </div>
           </th>
         </tr>
-        <tr>
+        <!-- <tr>
           <th>
             <div class="video-container">
               <video  width="200" src="video_showcase/extra2/boat.mp4" autoplay loop controls muted></video>
@@ -382,9 +483,9 @@ <h2 style="margin-top: 0em;" id="our_results_container" align="left"><a name="im
               <div class="caption">A bird on the tree branch.</div>
             </div>
           </th>
-        </tr>
+        </tr> -->
 
-        <tr>
+        <!-- <tr>
           <th>
             <div class="video-container">
               <video  width="200" src="video_showcase/JDB/Upscaled_404_Funds_Not_Found__1d49a25b-e4a6-4e7b-8c5b-7ba7633b4b2b.mp4" autoplay loop controls muted></video>
@@ -642,8 +743,8 @@ <h2 style="margin-top: 0em;" id="our_results_container" align="left"><a name="im
               <div class="caption">robot mecha dancing</div>
             </div>
           </th>
-        </tr>
-                  <tr> <td><br /></td> </tr> 
+        </tr> -->
+                  <!-- <tr> <td><br /></td> </tr>  -->
       </tbody>
     </table>
     <!------------------ END   SECTION ------------------>