plugin works

css/comparison-widget.css

@@ -245,7 +245,7 @@
   #ws-image-left,
   #ws-image-right {
     width: 100% !important;
-    height: auto !important;
+    height: 100% !important;
   }
 
   .twentytwenty-container {
@@ -368,8 +368,8 @@
 #ws-image-right {
   max-width: 100%;
   max-height: 100%;
-  width: auto;
-  height: auto;
+  width: 100% !important;
+  height: 100% !important;
 }
 
 /* Ensure twentytwenty slider fits based on image dimensions */
@@ -406,8 +406,8 @@
   vertical-align: bottom; /* Remove gaps */
 }
 
-#ws-image-baseline,
-#ws-image-stereospace {
+#ws-image-left,
+#ws-image-right {
   border-radius: 12px;
   display: block;
   vertical-align: bottom; /* Remove inline element gap */

index.html

@@ -192,50 +192,6 @@
   </div>
 </section>
 
-
-<!--<section class="section pt-0 pb-4">-->
-<!--  <div class="container is-max-desktop">-->
-<!--    <div class="columns is-centered has-text-centered">-->
-<!--      <div class="column is-four-fifths">-->
-<!--        <h2 class="title is-3">Gallery</h2>-->
-<!--      </div>-->
-<!--    </div>-->
-<!--  </div>-->
-<!--</section>-->
-
-<!--&lt;!&ndash; Results Carousel. &ndash;&gt;-->
-<!--<section class="hero is-light is-small mt-4">-->
-<!--  <div class="hero-body">-->
-<!--    &lt;!&ndash; <div class="container"> &ndash;&gt;-->
-<!--      <div id="results-carousel-horizontal" class="carousel results-carousel">-->
-
-<!--        <div class="twoitem">-->
-<!--          <div class="twentytwenty-container twentytwenty-container-top">-->
-<!--            <div class="cmpcontent">-->
-<!--              <img src="./images/comparison/car/original.jpg">-->
-<!--            </div>-->
-<!--            <div class="cmpcontent">-->
-<!--              <img src="./images/comparison/car/windowseat.png">-->
-<!--            </div>-->
-<!--          </div>-->
-<!--        </div>-->
-
-<!--        <div class="twoitem">-->
-<!--          <div class="twentytwenty-container twentytwenty-container-top">-->
-<!--            <div class="cmpcontent">-->
-<!--              <img src="./images/comparison/airport/original.jpg">-->
-<!--            </div>-->
-<!--            <div class="cmpcontent">-->
-<!--              <img src="./images/comparison/airport/windowseat.png">-->
-<!--            </div>-->
-<!--          </div>-->
-<!--        </div>-->
-
-<!--      </div>-->
-<!--    &lt;!&ndash; </div> &ndash;&gt;-->
-<!--  </div>-->
-<!--</section>-->
-
 <!-- Baseline Comparison Title -->
 <section class="section pt-0 pb-4">
   <div class=" is-max-desktop">
@@ -279,23 +235,23 @@
               <div class="twentytwenty-container twentytwenty-container-top" id="ws-comparison-slider">
                 <div class="cmpcontent">
                   <img
-                    id="ws-image-baseline"
+                    id="ws-image-left"
                     src="./images/teaser_subfigures/215/tgt.png"
                     alt="Ground Truth"
                   />
                 </div>
                 <div class="cmpcontent">
                   <img
-                    id="ws-image-windowseat"
+                    id="ws-image-right"
                     src="./images/teaser_subfigures/215/stereospace.png"
-                    alt="StereoSpace"
+                    alt="StereoSpace (ours)"
                   />
                 </div>
               </div>
 
               <!-- Model selector for baseline comparison -->
               <div class="ws-model-selector-overlay">
-                <button class="ws-model-pill is-active" data-model="stereospace">StereoSpace</button>
+                <button class="ws-model-pill is-active" data-model="stereospace">StereoSpace (ours)</button>
                 <button class="ws-model-pill" data-model="lyra">Lyra</button>
                 <button class="ws-model-pill" data-model="genstereo">GenStereo</button>
                 <button class="ws-model-pill" data-model="stereodiffusion">StereoDiffusion</button>
@@ -393,16 +349,10 @@
       autoplay: true,
     });
 
-    $(".twentytwenty-container-top").twentytwenty({
-      before_label: 'Input',
-      after_label: 'StereoSpace',
-      default_offset_pct: 0.4,
-    });
-    
     // Initialize comparison widget slider with different labels
     $("#ws-comparison-slider").twentytwenty({
-      before_label: 'Ground Truth',
-      after_label: 'StereoSpace',
+      before_label: 'StereoSpace (ours)',
+      after_label: 'Ground Truth',
       default_offset_pct: 0.5,
     });
     

js/comparison-widget.js

@@ -30,7 +30,7 @@ function wsRenderHotspots() {
 // Scene-based image mapping
 const WS_SCENE_IMAGES = {
   215: {
-    target: '/images/teaser_subfigures/215/tgt.jpg',
+    target: '/images/teaser_subfigures/215/tgt.png',
     stereospace: '/images/teaser_subfigures/215/stereospace.png',
     lyra: '/images/teaser_subfigures/215/lyra.png',
     genstereo: '/images/teaser_subfigures/215/genstereo.png',
@@ -38,51 +38,39 @@ const WS_SCENE_IMAGES = {
     zerostereo: '/images/teaser_subfigures/215/zerostereo.png',
   },
   249: {
-    target: '/images/teaser_subfigures/249/tgt.jpg',
+    target: '/images/teaser_subfigures/249/tgt.png',
     stereospace: '/images/teaser_subfigures/249/stereospace.png',
-    lyra: '/images/teaser_subfigures/249/lyra.jpg',
+    lyra: '/images/teaser_subfigures/249/lyra.png',
     genstereo: '/images/teaser_subfigures/249/genstereo.png',
     stereodiffusion: '/images/teaser_subfigures/249/stereodiffusion.png',
     zerostereo: '/images/teaser_subfigures/249/zerostereo.png',
   },
   252: {
-    target: '/images/teaser_subfigures/252/tgt.jpg',
+    target: '/images/teaser_subfigures/252/tgt.png',
     stereospace: '/images/teaser_subfigures/252/stereospace.png',
-    lyra: '/images/teaser_subfigures/252/lyra.jpg',
+    lyra: '/images/teaser_subfigures/252/lyra.png',
     genstereo: '/images/teaser_subfigures/252/genstereo.png',
     stereodiffusion: '/images/teaser_subfigures/252/stereodiffusion.png',
     zerostereo: '/images/teaser_subfigures/252/zerostereo.png',
   },
   285: {
-    target: '/images/teaser_subfigures/285/tgt.jpg',
+    target: '/images/teaser_subfigures/285/tgt.png',
     stereospace: '/images/teaser_subfigures/285/stereospace.png',
-    lyra: '/images/teaser_subfigures/285/lyra.jpg',
+    lyra: '/images/teaser_subfigures/285/lyra.png',
     genstereo: '/images/teaser_subfigures/285/genstereo.png',
     stereodiffusion: '/images/teaser_subfigures/285/stereodiffusion.png',
     zerostereo: '/images/teaser_subfigures/285/zerostereo.png',
   },
   297: {
-    target: '/images/teaser_subfigures/297/tgt.jpg',
+    target: '/images/teaser_subfigures/297/tgt.png',
     stereospace: '/images/teaser_subfigures/297/stereospace.png',
-    lyra: '/images/teaser_subfigures/297/lyra.jpg',
+    lyra: '/images/teaser_subfigures/297/lyra.png',
     genstereo: '/images/teaser_subfigures/297/genstereo.png',
     stereodiffusion: '/images/teaser_subfigures/297/stereodiffusion.png',
     zerostereo: '/images/teaser_subfigures/297/zerostereo.png',
   },
 };
 
-function wsLoadScene(sceneName) {
-  const sceneData = WS_SCENE_IMAGES[sceneName];
-  if (!sceneData) return;
-
-  // Update left image (target input)
-  $('#ws-image-left').attr('src', sceneData.target);
-  
-  // Update right image with current selected model
-  const activeModel = $('.ws-model-pill[data-model].is-active').data('model') || 'lyra';
-  $('#ws-image-right').attr('src', sceneData[activeModel]);
-}
-
 $(document).ready(function() {
   // Initialize state
   let currentScene = '215';
@@ -91,9 +79,9 @@ $(document).ready(function() {
 
   // map model keys -> readable label shown on the slider
   const WS_MODEL_LABELS = {
-    stereospace: 'StereoSpace (ours)',
-    src: 'Source',
+    src: 'Input',
     tgt: 'Ground Truth',
+    stereospace: 'StereoSpace (ours)',
     genstereo: 'GenStereo',
     lyra: 'Lyra',
     stereodiffusion: 'StereoDiffusion',
@@ -113,30 +101,10 @@ $(document).ready(function() {
     });
   }
 
-  // Initialize the twentytwenty slider
-  function initSlider(beforeLabel = 'Baseline') {
-    $("#ws-teaser_subfigures-slider").twentytwenty({
-      before_label: beforeLabel,
-      after_label: 'stereospace',
-      default_offset_pct: 0.5,
-    });
-    sliderInitialized = true;
-    // Clear any accidental zero clip applied by the plugin
-    setTimeout(() => {
-      $('.twentytwenty-overlay').css('clip', 'auto');
-    }, 50);
-  }
-
   // Update labels on an already-initialized twentytwenty instance
   function wsSetSliderLabels(beforeLabel, afterLabel) {
-    // plugin creates either "-label" or plain classes in different versions; update both
-    $('#ws-teaser_subfigures-slider .twentytwenty-before-label').attr('data-content', afterLabel);
-    $('#ws-teaser_subfigures-slider .twentytwenty-after-label').attr('data-content', beforeLabel);
-    // log that labels were updated
-    console.log('Updated slider labels to:', $wsSlider.find('.twentytwenty-before-label').attr('data-content'),
-      $wsSlider.find('.twentytwenty-after-label').attr('data-content'));
-    // log if $wsSlider exists  
-    console.log('Slider element exists:', $wsSlider.length > 0);
+    $('#ws-comparison-slider .twentytwenty-before-label').attr('data-content', beforeLabel);
+    $('#ws-comparison-slider .twentytwenty-after-label').attr('data-content', afterLabel);
   }
 
   // Function to update images
@@ -149,46 +117,30 @@ $(document).ready(function() {
     
     // Preload all images we will use, then swap and (re)initialize slider.
     const leftUrl = sceneData.target;
-    const stereospaceUrl = sceneData.stereospace;
-    const baselineUrl = sceneData[model];
+    const rightUrl = sceneData[model];
 
     // show light loading state if you have CSS for it
-    $('#ws-teaser_subfigures-container').addClass('ws-loading');
+    $('#ws-comparison-container').addClass('ws-loading');
 
     Promise.all([
       wsPreloadImage(leftUrl),
-      wsPreloadImage(stereospaceUrl),
-      wsPreloadImage(baselineUrl),
+      wsPreloadImage(rightUrl),
     ]).then(() => {
-      // swap sources only after loaded
       $('#ws-image-left').attr('src', leftUrl);
-      $('#ws-image-stereospace').attr('src', stereospaceUrl);
-      $('#ws-image-baseline').attr('src', baselineUrl);
+      $('#ws-image-right').attr('src', rightUrl);
 
       const modelLabel = WS_MODEL_LABELS[model] || model;
-      // log sliderInitialized 
-      // destroy only if already initialized
-      // if (sliderInitialized) {
-      //   $('#ws-teaser_subfigures-slider').trigger('destroy');
-      //   sliderInitialized = false;
-      // }
-      // small delay to allow browser layout, then init
       setTimeout(() => {
-        // initSlider(modelLabel);
-        // if the plugin was already initialized and you prefer updating labels instead of reinit:
-        wsSetSliderLabels('StereoSpace', modelLabel);
-        $('#ws-teaser_subfigures-container').removeClass('ws-loading');
+        wsSetSliderLabels('Ground Truth', modelLabel);
+        $('#ws-comparison-container').removeClass('ws-loading');
       }, 60);
     }).catch((err) => {
       console.warn('Image preload failed:', err);
-      // fallback: swap anyway and try init
       $('#ws-image-left').attr('src', leftUrl);
-      $('#ws-image-stereospace').attr('src', stereospaceUrl);
-      $('#ws-image-baseline').attr('src', baselineUrl);
-      if (sliderInitialized) $('#ws-teaser_subfigures-slider').trigger('destroy');
-      // setTimeout(initSlider, 100);
-      wsSetSliderLabels('StereoSpace', modelLabel);
-      $('#ws-teaser_subfigures-container').removeClass('ws-loading');
+      $('#ws-image-right').attr('src', rightUrl);
+      if (sliderInitialized) $('#ws-comparison-slider').trigger('destroy');
+      wsSetSliderLabels('Ground Truth', modelLabel);
+      $('#ws-comparison-container').removeClass('ws-loading');
     });
   }
 
@@ -212,18 +164,4 @@ $(document).ready(function() {
 
   // Initialize with default scene and model
   updateImages(currentScene, currentModel);
-
-  // Remove or comment out hotspot code:
-  /*
-  // Hotspot toggle
-  let hotspotsVisible = false;
-  $('#ws-hotspots-toggle').on('click', function() {
-    hotspotsVisible = !hotspotsVisible;
-    if (hotspotsVisible) {
-      wsRenderHotspots();
-    } else {
-      $('#ws-hotspots-layer').empty();
-    }
-  });
-  */
 });