wider component

reset slider upon image reload
more text

css/comparison-widget.css

@@ -376,7 +376,7 @@
 #ws-comparison-slider {
   width: fit-content;
   height: auto;
-  max-height: 590px;
+  max-height: 768px;
   margin: 0;
   padding: 0;
   line-height: 0; /* Remove inline spacing */
@@ -386,7 +386,7 @@
 #ws-comparison-slider img {
   width: auto;
   height: auto;
-  max-height: 590px;
+  max-height: 768px;
   object-fit: contain;
   border-radius: 12px;
   display: block;

index.html

@@ -273,6 +273,34 @@
         <h2 class="title is-3">Our Approach</h2>
         <div class="content has-text-justified">
 
+          <h3 class="title has-text-centered mt-4">
+            Idea
+          </h3>
+
+          <p>
+            Unlike recent methods grouped under "warp-and-inpaint", "latent warping", or "warped conditioning", each relying
+            on explicit monocular geometry estimates that are difficult and error-prone, we instead let the foundation
+            diffusion model infer 3D structure implicitly and train stereo generation end-to-end.
+            The resulting model outperforms all these categories and even surpasses Lyra, a strong generative 3DGS-based competitor.
+            Qualitative examples are shown in the slider above.
+          </p>
+
+          <h3 class="title has-text-centered mt-4">
+            Contributions
+          </h3>
+
+          <ul>
+            <li>
+              Single-image conditional generation of counterpart views, free from explicit geometric shortcuts;
+            </li>
+            <li>
+              End-to-end training procedure for efficient transfer of the rich task-agnostic foundation prior to the task at hand;
+            </li>
+            <li>
+              A novel perceptual and geometry-aware evaluation.
+            </li>
+          </ul>
+
           <h3 class="title has-text-centered mt-4">
             Model Architecture for End-to-End View Synthesis
           </h3>
@@ -304,17 +332,7 @@
             into generation in an end-to-end fashion is most effective.
           </p>
 
-        </div></div></div></div>
-        <div class="is-max-desktop">
-          <div class="columns is-centered has-text-centered">
-            <div class="column is-four-fifths">
-              <div class="content has-text-justified">
-        <img id="comparison" width="100%" src="./images/tables.png" alt="Quantitative Comparison with Other Recent Methods"/>
-        </div></div></div></div>
-        <div class="container is-max-desktop">
-          <div class="columns is-centered has-text-centered">
-            <div class="column is-four-fifths">
-              <div class="content has-text-justified">
+          <img id="comparison" src="./images/tables.png" alt="Quantitative Comparison with Other Recent Methods"/>
 
           <p class="mt-4 mb-0 pb-0">
             Refer to the pdf paper linked above for more details on qualitative, quantitative, and ablation studies.
@@ -353,7 +371,7 @@
     $("#ws-comparison-slider").twentytwenty({
       before_label: 'StereoSpace (ours)',
       after_label: 'Ground Truth',
-      default_offset_pct: 0.5,
+      default_offset_pct: 0.33,
     });
     
     $('.results-carousel').css({

js/comparison-widget.js

@@ -105,6 +105,11 @@ $(document).ready(function() {
   function wsSetSliderLabels(beforeLabel, afterLabel) {
     $('#ws-comparison-slider .twentytwenty-before-label').attr('data-content', beforeLabel);
     $('#ws-comparison-slider .twentytwenty-after-label').attr('data-content', afterLabel);
+    const $slider = $('#ws-comparison-slider');
+    const $api = $slider.data('twentytwenty');
+    if ($api) {
+      $api.adjustSlider(0.5);
+    }
   }
 
   // Function to update images

js/jquery.twentytwenty.js

@@ -144,6 +144,14 @@
         });
       }
 
+      container.data('twentytwenty', {
+        adjustSlider: adjustSlider,
+        updateLabels: function(beforeLabel, afterLabel) {
+          overlay.find('.twentytwenty-before-label').attr('data-content', beforeLabel);
+          overlay.find('.twentytwenty-after-label').attr('data-content', afterLabel);
+        }
+      });
+
       $(window).trigger("resize.twentytwenty");
     });
   };