update page

index.html

@@ -144,31 +144,19 @@ <h1 class="title is-1 publication-title">FashionFail: Addressing Failure Cases i
 <section class="hero is-small">
   <div class="hero-body">
     <div class="container">
-      <div id="results-carousel" class="carousel results-carousel">
-        <div class="item">
-        <!-- Your image here -->
-        <img src="static/images/pred-adi_10184_4.jpg" alt="Bounding box predictions of two AI models on a shoe product image."/>
+      <div id="teaser-carousel" class="carousel teaser-carousel">
+        <div class="item"><img src="static/images/pred-adi_10184_4.jpg" alt="Bounding box predictions on a shoe product image."/></div>
+        <div class="item"><img src="static/images/pred-adi_8934_3.jpg" alt="Bounding box predictions on a bag product image."/></div>
+        <div class="item"><img src="static/images/pred-adi_2435_1.jpg" alt="Bounding box predictions on a socks product image."/></div>
+        <div class="item"><img src="static/images/pred-adi_5663_3.jpg" alt="Bounding box predictions on a watch product image."/></div>
       </div>
-        <div class="item">
-        <!-- Your image here -->
-        <img src="static/images/pred-adi_8934_3.jpg" alt="Bounding box predictions of two AI models on a bag product image."/>
-      </div>
-        <div class="item">
-        <!-- Your image here -->
-        <img src="static/images/pred-adi_2435_1.jpg" alt="Bounding box predictions of two AI models on a socks product image."/>
-     </div>
-        <div class="item">
-      <!-- Your image here -->
-      <img src="static/images/pred-adi_5663_3.jpg" alt="Bounding box predictions of two AI models on a watch product image."/>
-    </div>
-  </div>
       <!-- Add a single caption covering all the images -->
-      <h4 class="subtitle has-text-centered">
+      <h4 class="has-text-centered">
         Prediction failures of <span class="blue-text">Attribute-Mask R-CNN<sub>SpineNet-143</sub></span> and
         <span class="purple-text">Fashionformer<sub>Swin-base</sub></span> on samples from the <i>FashionFail-test</i> set.
       </h4>
-</div>
-</div>
+    </div>
+  </div>
 </section>
 <!-- End image carousel -->
 
@@ -217,80 +205,68 @@ <h2 class="title is-3">Video</h2>
 
 
 <!-- Scale & Context -->
-<section class="section">
-  <div class="container is-max-desktop">
-    <div class="columns is-centered">
-
-      <!-- Scale -->
-      <div class="column">
-        <div class="content">
-          <h2 class="title is-4 has-text-centered">Scale</h2>
-          <p>
-            While Attribute-Mask R-CNN claimed that it <i>"works reasonably well if the apparel item is worn
-            by a model"</i>, pointing out the lack of context as the sole reason for these failures, our findings
-            indicate that the issue is not solely due to the absence of context but also the scale of the items.
-          </p>
-          <img src="static/images/.jpg" alt="MY ALT TEXT"/>
-        </div>
-      </div>
-      <!--/ Scale -->
-
-      <!-- Context. -->
-      <div class="column">
-        <h2 class="title is-4 has-text-centered">Context</h2>
-        <div class="columns is-centered">
-          <div class="column content">
-            <p>
-              We demonstrate that scale alone may not be sufficient for detection in all cases and that both
-              context and scale are required in some cases.
-            </p>
-            <img src="static/images/.jpg" alt="MY ALT TEXT"/>
-          </div>
-
-        </div>
+<section class="hero is-small">
+  <div class="hero-body">
+    <div class="container is-max-desktop">
+      <h2 class="title is-4 has-text-centered">Scale</h2>
+      <p>
+        While Attribute-Mask R-CNN claimed that it <a href="https://arxiv.org/pdf/2004.12276#page=19"><i>"works
+      reasonably well if the apparel item is worn by a model"</i></a>, pointing out the lack of context as the sole
+      reason for these failures, our findings indicate that the issue is not solely due to the absence of context
+      but also the scale of the items.
+        In the original sizes of the images, <span class="blue-text">Attribute-Mask R-CNN<sub>SpineNet-143</sub></span>
+        fails to detect displayed objects. However, simply rescaling images and/or zooming out (padding with white
+        pixels) leads to correct detections:
+      </p>
+      <div class="carousel scale-carousel">
+        <div class="item"><img src="static/images/scale-zarashoe.jpg" alt=""/></div>
+        <div class="item"><img src="static/images/scale-glasses.jpg" alt=""/></div>
+        <div class="item"><img src="static/images/scale-adishoe.jpg" alt=""/></div>
       </div>
-      <!--/ Context. -->
+      <br>
+      <h2 class="title is-4 has-text-centered">Context</h2>
+      <p>
+        We demonstrate that scale alone may not be sufficient for detection in all cases and that both context and scale
+        are required in some cases. For example, in the original size of <a href="https://www.adidas.de/en/code-five-watch/IR2520.html">an image</a>,
+        a 'watch' is detected as a 'shoe' with <b>94%</b> confidence. Resizing the image already fixes the issue: the
+        previously detected shoe becomes a watch with <b>100%</b> confidence. However, removing the pixels not belonging to
+        the watch leads to non-detection. Downsizing the image further does not resolve the issue:
+      </p>
+      <br>
+      <img src="static/images/context-watch.jpg" alt="MY ALT TEXT"/>
     </div>
-
   </div>
 </section>
 <!-- Scale & Context -->
 
 
+<!-- Results -->
 <section class="section">
   <div class="container is-max-desktop">
-    <!-- Method -->
-    <div class="columns is-centered">
-      <div class="column is-full-width has-text-centered">
-        <h2 class="title is-3">Method</h2>
-
-        <div class="content has-text-justified">
-          <p>
-            By fine-tuning a pre-trained Mask R-CNN model (from PyTorch) on the <i>Fashionpedia-train</i> set using
-            intelligent data augmentation techniques, we are able to address many of the failure cases.
-            <br>[augmentation examples]
-          </p>
-        </div>
-      </div>
-    </div>
-    <!--/ Method -->
-
     <!-- Qualitative Results -->
     <div class="columns is-centered">
       <div class="column is-full-width has-text-centered">
         <h2 class="title is-3">Qualitative Results</h2>
 
         <div class="content has-text-justified">
           <p>
-            [Inference images Fig.9] <br>
-            As a byproduct of our method, we can also solve the multiple instance detection. [images from Notion]
+            By fine-tuning a pre-trained Mask R-CNN model on the <i>Fashionpedia-train</i> set using
+            intelligent data augmentation techniques, we are able to address many of the failure cases. Furthermore,
+            we improve the model performance (both bbox and mask mAP) on the <i>Fashionfail-test</i> dataset while
+            matching the model performance of other baselines on <i>Fashiopedia-val</i>.
+
+            <!--[Inference images Fig.9] -->
+            <!--[images from Notion]-->
+            <br><br>
+            As a byproduct of our method, we can also solve the multiple instance detection.
           </p>
         </div>
       </div>
     </div>
     <!--/ Qualitative Results -->
   </div>
 </section>
+<!-- Results -->
 
 
 <!-- BibTeX Citation -->
@@ -308,6 +284,7 @@ <h2 class="title">BibTeX</h2>
 </section>
 <!-- BibTeX Citation -->
 
+
 <footer class="footer">
   <div class="container">
     <div class="content has-text-centered">

static/css/index.css

@@ -110,11 +110,33 @@ body {
 .publication-body img {
 }
 
-.results-carousel {
+
+/* custom */
+.teaser-carousel {
+  display: flex;
+  justify-content: center; /* Center items horizontally */
+  align-items: center; /* Center items vertically */
+  overflow: hidden;
+}
+
+.teaser-carousel .item {
+  flex: 0 0 auto;
+  scroll-snap-align: start;
+  text-align: center; /* Center images horizontally */
+  width: 100%;
+}
+
+.teaser-carousel img {
+  max-width: 40%;
+  height: auto;
+  display: inline-block; /* Ensure the image is treated as an inline block element */
+}
+
+.scale-carousel {
   overflow: hidden;
 }
 
-.results-carousel .item {
+.scale-carousel .item {
   margin: 5px;
   overflow: hidden;
   border: 1px solid #bbb;
@@ -123,11 +145,6 @@ body {
   font-size: 0;
 }
 
-.results-carousel video {
-  margin: 0;
-}
-
-
 .blue-text {
   color: blue;
 }
@@ -136,7 +153,6 @@ body {
   color: purple;
 }
 
-
 .slider-pagination .slider-page {
   background: #000000;
 }

static/js/index.js

@@ -2,40 +2,30 @@ window.HELP_IMPROVE_VIDEOJS = false;
 
 
 $(document).ready(function() {
-    // Check for click events on the navbar burger icon
-    $(".navbar-burger").click(function() {
-      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
-      $(".navbar-burger").toggleClass("is-active");
-      $(".navbar-menu").toggleClass("is-active");
-
-    });
 
     var options = {
 			slidesToScroll: 1,
-			slidesToShow: 3,
+			slidesToShow: 1,
 			loop: true,
 			infinite: true,
 			autoplay: true,
-			autoplaySpeed: 3000,
+			autoplaySpeed: 5000,
     }
 
-		// Initialize all div with carousel class
-    var carousels = bulmaCarousel.attach('.carousel', options);
+	// Initialize all div with teaser-carousel class
+    var carousels = bulmaCarousel.attach('.teaser-carousel', options);
 
-    // Loop on each carousel initialized
-    for(var i = 0; i < carousels.length; i++) {
-    	// Add listener to  event
-    	carousels[i].on('before:show', state => {
-    		console.log(state);
-    	});
-    }
 
-    // Access to bulmaCarousel instance of an element
-    var element = document.querySelector('#my-element');
-    if (element && element.bulmaCarousel) {
-    	// bulmaCarousel instance is available as element.bulmaCarousel
-    	element.bulmaCarousel.on('before-show', function(state) {
-    		console.log(state);
-    	});
+    var options = {
+			slidesToScroll: 1,
+			slidesToShow: 1,
+			loop: true,
+			infinite: true,
+			autoplay: true,
+			autoplaySpeed: 10000,
     }
+	// Initialize all div with scale-carousel class
+    var carousels = bulmaCarousel.attach('.scale-carousel', options);
+
+
 })