Add Qualitative comparisons

index.html

@@ -280,19 +280,19 @@ <h2 class="title is-3-titleInline">Qualitative Results of FFHQ</h2>
             <div class="content">
               <h2 class="title is-3-titleInline">Qualitative Results of ImageNet</h2>
               <div class="task-buttons">
-                <button class="task-button" onclick="selectTask_imgnet(0)">
+                <button class="task-button-imgnet" onclick="selectTask_imgnet(0)">
                   Gaussian deblur
                 </button>
-                <button class="task-button" onclick="selectTask_imgnet(1)">
+                <button class="task-button-imgnet" onclick="selectTask_imgnet(1)">
                   4X SR
                 </button>
-                <button class="task-button" onclick="selectTask_imgnet(2)">
+                <button class="task-button-imgnet" onclick="selectTask_imgnet(2)">
                   Box inpainting
                 </button>
-                <button class="task-button" onclick="selectTask_imgnet(3)">
+                <button class="task-button-imgnet" onclick="selectTask_imgnet(3)">
                   Denoising
                 </button>
-                <button class="task-button" onclick="selectTask_imgnet(4)">
+                <button class="task-button-imgnet" onclick="selectTask_imgnet(4)">
                   Colorization
                 </button>
               </div>
@@ -350,14 +350,13 @@ <h2 class="title is-3-titleInline">Qualitative Results of ImageNet</h2>
     <section class="section">
       <div class="container is-max-desktop">
         <div class="columns is-centered">
-          <!-- Silder -->
           <div class="column">
             <div class="content">
               <h2 class="title is-3-titleInline">Comparison with Baselines</h2>
               <!-- Bar graph -->
-                <div class="chart-container">
-                  <h4 class="chart-title">NFEs for Inference</h2>
-                  <div class="chart-wrapper">
+              <div class="chart-container">
+                <h4 class="chart-title">NFEs for Inference</h2>
+                <div class="chart-wrapper">
                   <div class="chart">
                     <div class="bar ourbar" data-label="DAVI" data-value="1"><div class="bar-marker"></div></div>
                     <div class="bar" data-label="DDRM" data-value="20"></div>
@@ -369,7 +368,61 @@ <h4 class="chart-title">NFEs for Inference</h2>
                   </div>
                 </div>
                 <p id="caption" class="chart-caption">DAVI performs a single-step inference (x20~100 faster).</p>
+                <p>This graph shows the Number of Function Evaluations (NFEs) required for inference, <br>plotted on a logarithmic scale to highlight differences across varying magnitudes.</p>
               </div>
+            <h2></h2>
+            <!-- On/Off Switch -->
+            <div class="switch-container">
+              <label class="switch">
+                <input type="checkbox" id="modeToggle" onchange="toggleMode()">
+                <span class="slider-switch">
+                  <span class="slider-labels">
+                    <span class="on-label">FFHQ</span>
+                    <span class="off-label">ImageNet</span>
+                  </span>
+                </span>
+              </label>
+            </div>
+            <!--Task Buttons-->
+            <div class="task-buttons">
+              <button class="task-button-onoff" onclick="selectTask_onoff(0)">
+                Gaussian deblur
+              </button>
+              <button class="task-button-onoff" onclick="selectTask_onoff(1)">
+                4X SR
+              </button>
+              <button class="task-button-onoff" onclick="selectTask_onoff(2)">
+                Box inpainting
+              </button>
+              <button class="task-button-onoff" onclick="selectTask_onoff(3)">
+                Denoising
+              </button>
+              <button class="task-button-onoff" onclick="selectTask_onoff(4)">
+                Colorization
+              </button>
+            </div>
+            <!-- Image Pair Container -->
+            <div class="image-comparison-container">
+              <button
+                class="slider-comparison leftside-comparison"
+                onclick="prevImage_onoff()"
+              >
+                &#10094;
+              </button>
+              <div class="fixed-comparison" id="fixedImage_onoff"></div>
+              <button
+                class="slider-comparison rightside-comparison"
+                onclick="nextImage_onoff()"
+              >
+                &#10095;
+              </button>
+            </div>
+            <!-- Dots for navigation -->
+            <div class="dots-navigation">
+              <span class="dotonoff" onclick="selectImage_onoff(0)"></span>
+              <span class="dotonoff" onclick="selectImage_onoff(1)"></span>
+              <span class="dotonoff" onclick="selectImage_onoff(2)"></span>
+            </div>
             </div>
           </div>
         </div>

static/css/index.css

@@ -15,7 +15,7 @@ body {
   justify-content: space-between; 
 }
 
-.task-button {
+.task-button, .task-button-imgnet, .task-button-onoff {
   flex: 1 1 auto;
   background-color: hwb(217 26% 15% / 0.968);
   border: none;
@@ -30,8 +30,12 @@ body {
   box-sizing: border-box;
   text-align: center;
   display: inline-block;
+  transition: color 0.1s ease;
 }
 
+.task-button.active, .task-button-imgnet.active, .task-button-onoff.active {
+  color: black;
+}
 
 .navigation-buttons {
   display: flex;
@@ -51,6 +55,105 @@ body {
   border: none;
 }
 
+.image-comparison-container {
+  display: flex;
+  justify-content: space-between; 
+  align-items: center;
+  width: 100%;
+  height: auto;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.fixed-comparison {
+  flex-grow: 1; 
+  height: 400px;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  position: relative;
+}
+
+.switch-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 70%;
+  max-width: 400px;
+  height: 75px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider-switch {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ee6c97;
+  transition: 0.2s;
+  border-radius: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 10px;
+  box-sizing: border-box;
+}
+
+.slider-labels {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: white;
+  font-weight: bold;
+  padding: 0 15px;
+  box-sizing: border-box;
+  font-size: 25px;
+}
+
+.on-label {
+  color: white;
+  position: absolute;
+  left: 15%; 
+}
+
+.off-label {
+  color: #ee6c97;
+  position: absolute;
+  right: 15%; 
+}
+
+.slider-switch:before {
+  display:none;
+}
+
+input:checked + .slider-switch {
+  background-color: #5cacf8; 
+}
+
+input:checked ~ .slider-switch .on-label {
+  color: #5cacf8;
+}
+
+input:checked ~ .slider-switch .off-label {
+  color: white; 
+}
+
 .fixed-image,
 .slide-container {
   width: 50%;
@@ -110,6 +213,28 @@ body {
   cursor: pointer;
 }
 
+.slider-comparison {
+  position: absolute;
+  top: 50%; 
+  transform: translateY(-50%);
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  border: none;
+  padding: 15px;
+  cursor: pointer;
+  font-size: 20px;
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  z-index: 10;
+} 
+
+
 .slider-arrow {
   font-size: 15px;
   color: #333;
@@ -129,10 +254,20 @@ body {
   left: 10px;
 }
 
+.leftside-comparison {
+  /* left: -70px; */
+  left: 0;
+}
+
 .rightside {
   right: 10px;
 }
 
+.rightside-comparison {
+  /* right: -70px; */
+  right: 0;
+}
+
 .leftside,
 .rightside {
   position: absolute;
@@ -160,7 +295,8 @@ body {
 }
 
 .dot,
-.dotimgnet {
+.dotimgnet,
+.dotonoff {
   height: 15px;
   width: 15px;
   margin: 0 5px;
@@ -171,6 +307,7 @@ body {
   transition: background-color 0.3s;
 }
 
+
 .dot.active {
   background-color: hwb(217 26% 15% / 0.968);
 }
@@ -179,6 +316,10 @@ body {
   background-color: hwb(217 26% 15% / 0.968);
 }
 
+.dotonoff.active {
+  background-color: hwb(217 26% 15% / 0.968);
+}
+
 .chart-container {
   width: 80%;
   margin: auto;