update

index.html

@@ -294,7 +294,30 @@ pre {
         width: 100%;
     }
 }
+* {
+  box-sizing: border-box;
+}
 
+.column {
+  text-align: center;
+  float: left;
+  width: 33.33%;
+  padding: 5px;
+}
+
+/* Clearfix (clear floats) */
+.row::after {
+  content: "";
+  clear: both;
+  display: table;
+}
+
+/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
+@media screen and (max-width: 500px) {
+  .column {
+    width: 100%;
+  }
+}
 </style>
 
 <script type="text/javascript" src="../js/hidebib.js"></script>
@@ -327,11 +350,11 @@ pre {
     	<center>
             <div class="author-row-new">
                 <a href="https://www.cs.utoronto.ca/~xiaohui/">Xiaohui Zeng<sup>1,2,3</sup></a>,
+                <a href="http://latentspace.cc/">Arash Vahdat<sup>1</sup></a>,
                 <a href="https://www.fwilliams.info/">Francis Williams<sup>1</sup></a>,
                 <a href="https://zgojcic.github.io/">Zan Gojcic<sup>1</sup></a>,
                 <a href="https://orlitany.github.io/">Or Litany<sup>1</sup></a>,
                 <a href="https://www.cs.utoronto.ca/~fidler/">Sanja Fidler<sup>1,2,3</sup></a>,
-                <a href="http://latentspace.cc/">Arash Vahdat<sup>1</sup></a>,
                 <a href="https://karstenkreis.github.io/">Karsten Kreis<sup>1</sup></a>
             </div>
         </center>
@@ -513,30 +536,18 @@ pre {
             </div>
 
             <center>
-                <figure style="width: 40%;">
+                <figure style="width: 80%;">
 
-                    <video class="centered" width="30%" controls autoplay muted playsinline class="video-background " >
-                        <source src="assets/airplane_voxel_input_165.mp4#t=0.01" type="video/mp4">
+                    <video class="centered" width="80%" controls muted playsinline class="video-background " >
+                        <source src="assets/airplane_voxel.mp4#t=0.14" type="video/mp4">
                         Your browser does not support the video tag.
                     </video>
                     <p class="caption" style="margin-bottom: 24px;" width="30%">
-                        Input voxel grid 
+                        Left: Input voxel grid. Right: two point clouds generated by LION and the reconstructed mesh.
                         <!-- Voxel-guided synthesis experiments, on different categories. We run diffuse-denoise in latent space to generate diverse plausible clean shapes (first row, left plane: 250 diffuse-denoise steps; first row, right plane: 200 steps;) -->
                     </p>
 
                 </figure>
-                <figure style="width: 40%;">
-
-                    <video class="centered" width="30%" controls autoplay muted playsinline class="video-background " >
-                        <source src="assets/airplane_voxel_output_165_D200_1.mp4#t=0.001" type="video/mp4">
-                        Your browser does not support the video tag.
-                    </video>
-                    <p class="caption" style="margin-bottom: 24px;" width="30%">
-                        Output point clouds and mesh.
-                    </p>
-
-                </figure>
-
             </center>
         <br>
 
@@ -545,30 +556,38 @@ pre {
                 <p>LION can interpolate two shapes by traversing the latent space. The generated shapes are clean and semantically plausible along the entire interpolation path.  </p>
             </div>
             <figure>
-                <video class="centered" width="40%" autoplay loop muted playsinline class="video-background " >
-                    <source src="assets/LION_latent_interp.mp4#t=0.001" type="video/mp4">
+                <video class="centered" width="100%" controls loop muted playsinline class="video-background " >
+                    <source src="assets/LION_interp.mp4#t=0.001" type="video/mp4">
                     Your browser does not support the video tag.
                 </video>
-                <!-- <p class="caption">
-                    The sequence above is generated by interpolating the latent variable of the source and target shapes (using the probability flow ODE formulation).
-                </p> -->
+                <p class="caption">
+                    Left most shape: the source shape. Right most shape: the target shape. The shapes in middle are interpolated results between source and target shape.
+                </p> 
             </figure>
         <br>
 
         <h3> Per-sample Text-driven Texture Synthesis </h3> 
             <div class="flex-row">
                 <p> 
-                    We apply Text2mesh on some generated meshes from LION to additionally synthesize textures in a text-driven manner, leveraging CLIP.
+                    We apply Text2mesh on some generated meshes from LION to additionally synthesize textures in a text-driven manner, leveraging CLIP. The original mesh is generated by LION.
                 </p>
             </div>
-            <figure style="width: 100%;">
-                    <a>
-                        <img width="100%" src="assets/text2mesh_airplane.png">
-                    </a>
-                    <p class="caption" style="margin-bottom: 24px;">
-                         Text2mesh results with text prompt "a airplane made of __". All prompts are applied on the same generated shapes. The original mesh is generated by LION. 
-                    </p>
-            </figure>
+			<div class="row">
+			  		<div class="column">
+                        <img width="50%" src="assets/text2mesh/strawberries_airplane-rec_3.jpg"> 
+                        <figcaption align = "center">An airplane made of strawberry</figcaption>
+			  		</div>
+			  		<div class="column">
+                        <img width="50%" src="assets/text2mesh/watermelons_airplane-rec_3.jpg"> 
+                        <figcaption align = "center">An airplane made of watermelon</figcaption>
+			  		</div>
+			  		<div class="column">
+                        <img width="50%" src="assets/text2mesh/fabric_leather_airplane-rec_3.jpg"> 
+                        <figcaption align = "center">An airplane made of fabric leather</figcaption>
+			  		</div>
+
+			</div>
+
         <br>
 
         <h3> Single View Reconstruction </h3> 
@@ -584,7 +603,7 @@ pre {
             </div>
             <figure style="width: 50%;">
                     <a>
-                        <img width="100%" src="assets/svr_chair.png">
+                        <img width="100%" src="assets/svr/img2shape_mitsuba_full.jpg">
                     </a>
                     <p class="caption" style="margin-bottom: 24px;">
                          Single view reconstruction from RGB images of chair. For each input image, LION can generate multi-modal outputs.
@@ -592,7 +611,7 @@ pre {
             </figure>
             <figure style="width: 50%;">
                     <a>
-                        <img width="100%" src="assets/svr_car.png">
+                        <img width="100%" src="assets/svr/img2shape_cari2s_mm_mitsuba_full.jpg">
                     </a>
                     <p class="caption" style="margin-bottom: 24px;">
                          Single view reconstruction from RGB images of car. For each input image, LION can generate multi-modal outputs.
@@ -600,7 +619,7 @@ pre {
             </figure>
             <figure style="width: 100%;">
                     <a>
-                        <img width="100%" src="assets/svr_car_more.png">
+                        <img width="100%" src="assets/svr/img2shape_cari2s_mitsuba_full.jpg">
                     </a>
                     <p class="caption" style="margin-bottom: 24px;">
                          More single view reconstruction from RGB images of car.