Spaces:

bag-lab
/

MARS

Running

App Files Files Community

bag-lab commited on Nov 20, 2025

Commit

026dd84

verified ·

1 Parent(s): 91512f0

Upload 3 files

Browse files

Files changed (1) hide show

index.html +804 -18

index.html CHANGED Viewed

@@ -1,19 +1,805 @@
-<!doctype html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
 <html>
+<head>
+  <meta charset="utf-8">
+  <meta name="description"
+        content="MARS: A Foundational Map Auto-Regressor .">
+  <meta name="keywords" content="Map Generation, Aerial Tracking, Grounding">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>MARS: A Foundational Map Auto-Regressor</title>
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-PYVRSFMDRL"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag('js', new Date());
+    gtag('config', 'G-PYVRSFMDRL');
+  </script>
+  <link href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro"
+        rel="stylesheet">
+  <link rel="stylesheet" href="./static/css/bulma.min.css">
+  <link rel="stylesheet" href="./static/css/bulma-carousel.min.css">
+  <link rel="stylesheet" href="./static/css/bulma-slider.min.css">
+  <link rel="stylesheet" href="./static/css/fontawesome.all.min.css">
+  <link rel="stylesheet"
+        href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
+  <link rel="stylesheet" href="./static/css/index.css">
+  <link rel="icon" href="./static/images/favicon.svg">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+  <script defer src="./static/js/fontawesome.all.min.js"></script>
+  <script src="./static/js/bulma-carousel.min.js"></script>
+  <script src="./static/js/bulma-slider.min.js"></script>
+  <script src="./static/js/index.js"></script>
+</head>
+<script>
+  const slider = document.getElementById("image-slider");
+  const img = document.getElementById("slider-image");
+  // List all 4 images in your ./test folder
+  const images = [
+    "./test/1.png",
+    "./test/2.png"
+  ];
+  slider.addEventListener("input", () => {
+    const index = parseInt(slider.value) - 1;
+    img.src = images[index];
+  });
+</script>
+<body>
+<section class="hero" id="Overview">
+  <div class="hero-body">
+    <div class="container is-max-desktop">
+      <div class="columns is-centered">
+        <div class="column has-text-centered">
+          <h1 class="title is-1 publication-title">MARS: A Foundational Map Auto-Regressor.</h1>
+          <h3 class="is-size-4 has-text-weight-bold" style="color: orange;">
+            <!-- Accepted to NeurIPS 2024 Video-Language Modelling Workshop! -->
+          </h3>
+          <h3 class="is-size-4 has-text-weight-bold" style="color: orange;">
+            <!-- Accepted to WACV 2025! -->
+          </h3>
+          <!-- <div class="is-size-5 publication-authors">
+            <span class="author-block">
+              <a href="https://sites.google.com/view/rupanjali-kukal/home">Rupanjali Kukal</a>,</span>
+            <span class="author-block">
+              <a href="https://www.linkedin.com/in/patravali">Jay Patravali</a>,</span>
+            <span class="author-block">
+              <a href="https://sites.google.com/site/yfuxun">Fuxun Yu</a>,
+            </span>
+            <span class="author-block">
+              <a href="">Simranjit Singh</a>,
+            </span>
+            <span class="author-block">
+              <a href="https://www.linkedin.com/in/nikolaos-karianakis-4016242b?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app">Nikoloas Karianakis</a>,
+            </span>
+            <span class="author-block">
+              <a href="https://www.linkedin.com/in/rishi-madhok-91663b82?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app">Rishi Madhok</a>,
+            </span>
+          </div> -->
+          <div class="is-size-5 publication-authors">
+            <span class="author-block"><sup></sup> </span>
+            <!-- <span class="author-block"><sup>2</sup>Google Research</span> -->
+          </div>
+          <div class="column has-text-centered">
+            <div class="publication-links">
+              <!-- PDF Link. -->
+              <span class="link-block">
+                <a href="https://openaccess.thecvf.com/content/WACV2025/papers/Kukal_ClickDescribe_Multimodal_Grounding_and_Tracking_for_Aerial_Objects_WACV_2025_paper.pdf"
+                   class="external-link button is-normal is-rounded is-dark">
+                  <span class="icon">
+                      <i class="fas fa-file-pdf"></i>
+                  </span>
+                  <span>Paper</span>
+                </a>
+              </span>
+              <!-- <span class="link-block">
+                <a href="https://arxiv.org/abs/2011.12948"
+                   class="external-link button is-normal is-rounded is-dark">
+                  <span class="icon">
+                      <i class="ai ai-arxiv"></i>
+                  </span>
+                  <span>arXiv</span>
+                </a>
+              </span> -->
+              <!-- Video Link.
+              <span class="link-block">
+                <a href="https://www.youtube.com/watch?v=MrKrnHhk8IA"
+                   class="external-link button is-normal is-rounded is-dark">
+                  <span class="icon">
+                      <i class="fab fa-youtube"></i>
+                  </span>
+                  <span>Video</span>
+                </a>
+              </span> -->
+              <!-- Code Link. -->
+              <span class="link-block">
+                <a href=""
+                   class="external-link button is-normal is-rounded is-dark">
+                  <span class="icon">
+                      <i class="fab fa-github"></i>
+                  </span>
+                  <span>Code</span>
+                  </a>
+              </span>
+              <!-- Dataset Link. -->
+              <span class="link-block">
+                <a href=""
+                   class="external-link button is-normal is-rounded is-dark">
+                  <span class="icon">
+                      <i class="far fa-images"></i>
+                  </span>
+                  <span>Dataset</span>
+                  </a>
+            </div>
+            <h5 class="is-size-10 has-text-centered">
+              Dataset to be released soon
+            </h5>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation" style="background-color: #f5f5f5; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
+  <div class="container">
+    <div class="navbar-menu">
+      <div class="navbar-start" style="margin: 0 auto;">
+        <a class="navbar-item" href="#abstract">Abstract</a>
+        <a class="navbar-item" href="#click1-demo">Click 1</a>
+        <a class="navbar-item" href="#click2-demo">Click 2</a>
+        <a class="navbar-item" href="#click3-demo">Click 3</a>
+        <a class="navbar-item" href="#click-jitter">Jitter Analysis</a>
+        <a class="navbar-item" href="#interactive-visualizations">Stroke Visualizations</a>
+        <a class="navbar-item" href="#failure-cases">Failure Cases</a>
+      </div>
+    </div>
+  </div>
+</nav>
+<section class="hero is-light is-small" id="Inference Results">
+  <div class="hero-body">
+    <div class="container">
+      <div id="results-carousel" class="carousel results-carousel">
+        <div class="item item-chair-tp">
+          <video poster="" id="chair-tp" autoplay controls muted loop playsinline height="100%">
+            <source src="./inference_videos/1.mp4"
+                    type="video/mp4">
+          </video>
+        </div>
+        <div class="item item-shiba">
+          <video poster="" id="shiba" autoplay controls muted loop playsinline height="100%">
+            <source src="./inference_videos/2.mp4"
+                    type="video/mp4">
+          </video>
+        </div>
+        <div class="item item-fullbody">
+          <video poster="" id="fullbody" autoplay controls muted loop playsinline height="100%">
+            <source src="./inference_videos/3.mp4"
+                    type="video/mp4">
+          </video>
+        </div>
+        <div class="item item-blueshirt">
+          <video poster="" id="blueshirt" autoplay controls muted loop playsinline height="100%">
+            <source src="./videos/dtb70/2.mp4"
+                    type="video/mp4">
+          </video>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<section class="section" id="Abstract">
+  <div class="container is-max-desktop">
+    <!-- Abstract. -->
+    <div class="columns is-centered has-text-centered">
+      <div class="column is-four-fifths">
+        <h2 class="title is-3">Abstract</h2>
+        <div class="content has-text-justified">
+          <p>Map generation tasks, featured by extensive non-structural vectorized data (e.g.,
+points, polylines, and polygons), pose significant challenges to common pixelwise generative models. Past works, by segmenting and then performing various
+vectorized post-processing, usually sacrifice accuracy. Motivated by the recent
+huge success of auto-regressive language modeling, we propose the first map
+foundational model: Map Auto-Regressor (MARS), that is capable of generating both multi-polyline road networks and polygon buildings in a unified manner.
+We collected by far the largest multi-class map dataset, MAP-3M, to support the
+robust training. Extensive benchmarks highlight the performance superiority of
+MARS against literature works. Meanwhile, benefited from the auto-regressive
+teaching-forcing based training, we develop the “Chat with MARS” capability
+that enables interactive human-in-the-loop map generation and correction.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<section class="section" id="Click 1 Demo">
+  <div class="container is-max-desktop">
+    <!-- Animation. -->
+    <div class="columns is-centered has-text-centered">
+      <div class="column is-full-width">
+        <h2 class="title is-3">Click 1 Demo</h2>
+        <!-- Interpolating. -->
+        <!-- <h3 class="title is-4">Interpolating states</h3> -->
+        <div class="content has-text-justified">
+          <p>
+            This is particularly helpful when a test image is extremely blurry or out-of-domain: once the first
+vertex predicted by MARS is ill-conditioned, due to error accumulation of auto-regressive nature, the whole sequence may suffer from less detections. In such case, SOS chatting can greatly improve
+the full image prediction performance.
+          </p>
+        </div>
+        <div class="columns is-vcentered interpolation-panel">
+          <div class="column is-6 has-text-centered">
+            <h3 class="subtitle is-5">Original Inference</h3>
+            <video poster="" autoplay controls muted loop playsinline style="width: 100%; height: auto;">
+              <source src="./click1_videos/29638.mp4" type="video/mp4">
+              Your browser does not support the video tag.
+            </video>
+          </div>
+          <div class="column is-6 has-text-centered">
+            <h3 class="subtitle is-5">After Click</h3>
+            <video poster="" autoplay controls muted loop playsinline style="width: 100%; height: auto;">
+              <source src="./click1_videos/29638_click.mp4" type="video/mp4">
+              Your browser does not support the video tag.
+            </video>
+          </div>
+        </div>
+        <br/>
+      </div>
+    </div>
+    <!--/ Animation. -->
+  </div>
+</section>
+<section class="section" id="Click 2 Demo">
+  <div class="container is-max-desktop">
+    <!-- Animation. -->
+    <div class="columns is-centered has-text-centered">
+      <div class="column is-full-width">
+        <h2 class="title is-3">Click 2 Demo</h2>
+        <!-- Interpolating. -->
+        <!-- <h3 class="title is-4">Interpolating states</h3> -->
+        <div class="content has-text-justified">
+          <p>
+          Mid-of-sequence (MOS) chatting aims to intercept MARS’s prediction sequence when it drifts from
+          the desired trajectory, which is common in vectorized road generation. This is particularly helpful when certain predictions in an image needs to be adjusted.
+          </p>
+        </div>
+        <div class="columns is-vcentered interpolation-panel">
+          <div class="column is-6 has-text-centered">
+            <h3 class="subtitle is-5">Original Inference</h3>
+            <video poster="" autoplay controls muted loop playsinline style="width: 100%; height: auto;">
+              <source src="./click2_videos/0.mp4" type="video/mp4">
+              Your browser does not support the video tag.
+            </video>
+          </div>
+          <div class="column is-6 has-text-centered">
+            <h3 class="subtitle is-5">After Click</h3>
+            <video poster="" autoplay controls muted loop playsinline style="width: 100%; height: auto;">
+              <source src="./click2_videos/0_click.mp4" type="video/mp4">
+              Your browser does not support the video tag.
+            </video>
+          </div>
+        </div>
+        <br/>
+      </div>
+    </div>
+    <!--/ Animation. -->
+  </div>
+</section>
+<section class="section" id="Click 3 Demo">
+  <div class="container is-max-desktop">
+    <!-- Animation. -->
+    <div class="columns is-centered has-text-centered">
+      <div class="column is-full-width">
+        <h2 class="title is-3">Click 3 Demo</h2>
+        <!-- Interpolating. -->
+        <!-- <h3 class="title is-4">Interpolating states</h3> -->
+        <div class="content has-text-justified">
+          <p>
+          Mid-of-sequence (MOS) chatting aims to intercept MARS’s prediction sequence when it drifts from
+          the desired trajectory, which is common in vectorized road generation. This is particularly helpful when certain predictions in an image needs to be adjusted.
+            End-of-sequence (EOS) chatting aims to augment MARS’s prediction when there are objects missed
+from the final predictions, which is common for various small map elements.
+          </p>
+        </div>
+        <div class="columns is-vcentered interpolation-panel">
+          <div class="column is-6 has-text-centered">
+            <h3 class="subtitle is-5">Original Inference</h3>
+            <video poster="" autoplay controls muted loop playsinline style="width: 100%; height: auto;">
+              <source src="./click3_videos/53819.mp4" type="video/mp4">
+              Your browser does not support the video tag.
+            </video>
+          </div>
+          <div class="column is-6 has-text-centered">
+            <h3 class="subtitle is-5">After Click</h3>
+            <video poster="" autoplay controls muted loop playsinline style="width: 100%; height: auto;">
+              <source src="./click3_videos/53819_click.mp4" type="video/mp4">
+              Your browser does not support the video tag.
+            </video>
+          </div>
+        </div>
+        <br/>
+      </div>
+    </div>
+    <!--/ Animation. -->
+  </div>
+</section>
+<!-- CLICK JITTER -->
+<section class="section" id="Click Jitter">
+  <div class="container is-max-desktop">
+    <div class="columns is-centered has-text-centered">
+      <div class="column is-full-width">
+        <h2 class="title is-3">Click Jitter Analysis</h2>
+        <div class="content has-text-justified" style="margin-top: 40px;">
+          <h3 class="title is-4">Robustness to Click Position Variations</h3>
+          <p>The left image shows the ground truth reference. The middle image shows the prediction with correct click position. Use the slider to browse through predictions with different click positions.</p>
+        </div>
+        <div class="columns is-vcentered">
+          <!-- Left column: Fixed ground truth image -->
+          <div class="column is-4 has-text-centered">
+            <h4 class="subtitle is-6" style="margin-bottom: 10px;">Ground Truth</h4>
+            <img src="./click_jitter/initial.png"
+                 alt="Ground Truth"
+                 style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+          </div>
+          <!-- Middle column: Fixed correct click position -->
+          <div class="column is-4 has-text-centered">
+            <h4 class="subtitle is-6" style="margin-bottom: 10px;">Correct Click Position</h4>
+            <img src="./click_jitter/101_77.png"
+                 alt="Correct Click Position"
+                 style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+          </div>
+          <!-- Right column: Slider with jitter images -->
+          <div class="column is-4 has-text-centered">
+            <h4 class="subtitle is-6" style="margin-bottom: 10px;">Click Position Variations</h4>
+            <img id="slider-jitter"
+                 src="./click_jitter/101_64.png"
+                 style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+            <input class="slider is-fullwidth is-large is-info"
+                   id="slider-jitter-input"
+                   type="range" min="1" max="5" value="1" step="1"
+                   style="margin-top: 20px;">
+            <p class="has-text-centered" style="margin-top: 10px;">
+              <span id="counter-jitter">Image 1 of 5</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    // Click jitter images (excluding 101_77.png since it's fixed in the middle)
+    const jitterImages = [
+      "./click_jitter/101_64.png",
+      "./click_jitter/101_70.png",
+      "./click_jitter/101_85.png",
+      "./click_jitter/110_77.png",
+      "./click_jitter/90_77.png"
+    ];
+    const sliderJitter = document.getElementById('slider-jitter-input');
+    const imgJitter = document.getElementById('slider-jitter');
+    const counterJitter = document.getElementById('counter-jitter');
+    if (sliderJitter && imgJitter && counterJitter) {
+      sliderJitter.max = jitterImages.length;
+      sliderJitter.addEventListener("input", () => {
+        const index = parseInt(sliderJitter.value) - 1;
+        imgJitter.src = jitterImages[index];
+        counterJitter.textContent = `Image ${sliderJitter.value} of ${jitterImages.length}`;
+      });
+    }
+  });
+</script>
+<!--
+<section class="section" id="BibTeX">
+  <div class="container is-max-desktop content">
+    <h2 class="title">BibTeX</h2>
+    <pre><code>@InProceedings{Kukal_2025_WACV,
+      author    = {Kukal, Rupanjali and Patravali, Jay and Yu, Fuxun and Singh, Simranjit and Karianakis, Nikolaos and Madhok, Rishi},
+      title     = {Click\&Describe: Multimodal Grounding and Tracking for Aerial Objects},
+      booktitle = {Proceedings of the Winter Conference on Applications of Computer Vision (WACV)},
+      month     = {February},
+      year      = {2025},
+      pages     = {6011-6021}
+}</code></pre>
+  </div>
+</section> -->
+<section class="section" id="Stroke Visualizations">
+  <div class="container is-max-desktop">
+    <div class="columns is-centered has-text-centered">
+      <div class="column is-full-width">
+        <h2 class="title is-3">Stroke Visualizations</h2>
+        <!-- Intersection Slider -->
+        <div class="content has-text-justified" style="margin-top: 40px;">
+          <h3 class="title is-4">Intersection Examples</h3>
+          <p>Browse through different intersection visualizations.</p>
+        </div>
+        <div class="columns is-centered">
+          <div class="column is-10">
+            <img id="slider-intersection"
+                 src="./stroke_visuals/intersection/19.png"
+                 style="max-width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+            <input class="slider is-fullwidth is-large is-info"
+                   id="slider-intersection-input"
+                   type="range" min="1" max="14" value="1" step="1"
+                   style="margin-top: 20px;">
+            <p class="has-text-centered" style="margin-top: 10px;">
+              <span id="counter-intersection">Image 1 of 14</span>
+            </p>
+          </div>
+        </div>
+        <!-- Roundabout Slider -->
+        <div class="content has-text-justified" style="margin-top: 40px;">
+          <h3 class="title is-4">Roundabout Examples</h3>
+          <p>Browse through different roundabout visualizations.</p>
+        </div>
+        <div class="columns is-centered">
+          <div class="column is-10">
+            <img id="slider-roundabout"
+                 src="./stroke_visuals/roundabout/65.png"
+                 style="max-width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+            <input class="slider is-fullwidth is-large is-info"
+                   id="slider-roundabout-input"
+                   type="range" min="1" max="15" value="1" step="1"
+                   style="margin-top: 20px;">
+            <p class="has-text-centered" style="margin-top: 10px;">
+              <span id="counter-roundabout">Image 1 of 15</span>
+            </p>
+          </div>
+        </div>
+        <!-- Splits Slider -->
+        <div class="content has-text-justified" style="margin-top: 40px;">
+          <h3 class="title is-4">Splits Examples</h3>
+          <p>Browse through different road splits visualizations.</p>
+        </div>
+        <div class="columns is-centered">
+          <div class="column is-10">
+            <img id="slider-splits"
+                 src="./stroke_visuals/splits/14.png"
+                 style="max-width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+            <input class="slider is-fullwidth is-large is-info"
+                   id="slider-splits-input"
+                   type="range" min="1" max="11" value="1" step="1"
+                   style="margin-top: 20px;">
+            <p class="has-text-centered" style="margin-top: 10px;">
+              <span id="counter-splits">Image 1 of 11</span>
+            </p>
+          </div>
+        </div>
+        <!-- T-Junction Slider -->
+        <div class="content has-text-justified" style="margin-top: 40px;">
+          <h3 class="title is-4">T-Junction Examples</h3>
+          <p>Browse through different T-junction visualizations.</p>
+        </div>
+        <div class="columns is-centered">
+          <div class="column is-10">
+            <img id="slider-tjunction"
+                 src="./stroke_visuals/T_Junction/19.png"
+                 style="max-width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+            <input class="slider is-fullwidth is-large is-info"
+                   id="slider-tjunction-input"
+                   type="range" min="1" max="10" value="1" step="1"
+                   style="margin-top: 20px;">
+            <p class="has-text-centered" style="margin-top: 10px;">
+              <span id="counter-tjunction">Image 1 of 1</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    // Intersection images
+    const intersectionImages = [
+      "./stroke_visuals/intersection/19.png",
+      "./stroke_visuals/intersection/53.png",
+      "./stroke_visuals/intersection/59.png",
+      "./stroke_visuals/intersection/119.png",
+      "./stroke_visuals/intersection/214.png",
+      "./stroke_visuals/intersection/305.png",
+      "./stroke_visuals/intersection/382.png",
+      "./stroke_visuals/intersection/411.png",
+      "./stroke_visuals/intersection/412.png",
+      "./stroke_visuals/intersection/676.png",
+      "./stroke_visuals/intersection/726.png",
+      "./stroke_visuals/intersection/920.png",
+      "./stroke_visuals/intersection/1016.png",
+      "./stroke_visuals/intersection/1058.png",
+      "./stroke_visuals/intersection/1099.png",
+      "./stroke_visuals/intersection/1248.png"
+    ];
+    // Roundabout images
+    const roundaboutImages = [
+      "./stroke_visuals/roundabout/65.png",
+      "./stroke_visuals/roundabout/83.png",
+      "./stroke_visuals/roundabout/108.png",
+      "./stroke_visuals/roundabout/115.png",
+      "./stroke_visuals/roundabout/173.png",
+      "./stroke_visuals/roundabout/187.png",
+      "./stroke_visuals/roundabout/217.png",
+      "./stroke_visuals/roundabout/224.png",
+      "./stroke_visuals/roundabout/356.png",
+      "./stroke_visuals/roundabout/400.png",
+      "./stroke_visuals/roundabout/413.png",
+      "./stroke_visuals/roundabout/420.png",
+      "./stroke_visuals/roundabout/528.png",
+      "./stroke_visuals/roundabout/612.png",
+      "./stroke_visuals/roundabout/688.png",
+      "./stroke_visuals/roundabout/798.png"
+    ];
+    // Splits images
+    const splitsImages = [
+      "./stroke_visuals/splits/14.png",
+      "./stroke_visuals/splits/54.png",
+      "./stroke_visuals/splits/71.png",
+      "./stroke_visuals/splits/122.png",
+      "./stroke_visuals/splits/135.png",
+      "./stroke_visuals/splits/145.png",
+      "./stroke_visuals/splits/341.png",
+      "./stroke_visuals/splits/386.png",
+      "./stroke_visuals/splits/813.png",
+      "./stroke_visuals/splits/938.png",
+      "./stroke_visuals/splits/953.png"
+    ];
+    // T-Junction images (only 1 image visible in folder)
+    const tjunctionImages = [
+      "./stroke_visuals/T_Junction/21.png",
+      "./stroke_visuals/T_Junction/31.png",
+      "./stroke_visuals/T_Junction/60.png",
+      "./stroke_visuals/T_Junction/254.png",
+      "./stroke_visuals/T_Junction/286.png",
+      "./stroke_visuals/T_Junction/296.png",
+      "./stroke_visuals/T_Junction/302.png",
+      "./stroke_visuals/T_Junction/310.png",
+      "./stroke_visuals/T_Junction/362.png",
+      "./stroke_visuals/T_Junction/749.png"
+    ];
+    // Setup slider for Intersection
+    setupSlider('intersection', intersectionImages);
+    // Setup slider for Roundabout
+    setupSlider('roundabout', roundaboutImages);
+    // Setup slider for Splits
+    setupSlider('splits', splitsImages);
+    // Setup slider for T-Junction
+    setupSlider('tjunction', tjunctionImages);
+    function setupSlider(name, images) {
+      const slider = document.getElementById(`slider-${name}-input`);
+      const img = document.getElementById(`slider-${name}`);
+      const counter = document.getElementById(`counter-${name}`);
+      slider.max = images.length;
+      slider.addEventListener("input", () => {
+        const index = parseInt(slider.value) - 1;
+        img.src = images[index];
+        counter.textContent = `Image ${slider.value} of ${images.length}`;
+      });
+    }
+  });
+</script>
+<section class="section" id="Challenging Cases">
+  <div class="container is-max-desktop">
+    <!-- Animation. -->
+    <div class="columns is-centered has-text-centered">
+      <div class="column is-full-width">
+        <h2 class="title is-3"> Challenging Cases</h2>
+        <h3 class="title is-4"> Complex Intersection</h3>
+        <!-- Interpolating. -->
+        <!-- <h3 class="title is-4">Interpolating states</h3> -->
+        <div class="content has-text-justified">
+          <p>
+            Good Examples.
+          </p>
+        </div>
+        <div class="columns is-vcentered interpolation-panel">
+          <div class="column is-4 has-text-centered">
+            <!-- <h3 class="subtitle is-5">Original Inference</h3> -->
+            <img src="./hardcase_good_visuals/intersection_good/plot_1349291.png"
+                 alt="Original Inference"
+                 style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+          </div>
+          <div class="column is-4 has-text-centered">
+            <!-- <h3 class="subtitle is-5">After Click</h3> -->
+            <img src="./hardcase_good_visuals/intersection_good/plot_1646496.png"
+                 alt="After Click"
+                 style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+          </div>
+          <div class="column is-4 has-text-centered">
+            <!-- <h3 class="subtitle is-5">After Click</h3> -->
+            <img src="./hardcase_good_visuals/intersection_good/plot_683728.png"
+                 alt="After Click"
+                 style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+          </div>
+        </div>
+        <div class="content has-text-justified">
+          <p>
+            Poor Ecamples
+          </p>
+        </div>
+        <div class="columns is-vcentered interpolation-panel">
+          <div class="column is-4 has-text-centered">
+            <!-- <h3 class="subtitle is-5">Original Inference</h3> -->
+            <img src="./failure_case_visuals/complex_intersection/plot_16248.png"
+                 alt="Original Inference"
+                 style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+          </div>
+          <div class="column is-4 has-text-centered">
+            <!-- <h3 class="subtitle is-5">After Click</h3> -->
+            <img src="./failure_case_visuals/complex_intersection/plot_81558.png"
+                 alt="After Click"
+                 style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+          </div>
+          <div class="column is-4 has-text-centered">
+            <!-- <h3 class="subtitle is-5">After Click</h3> -->
+            <img src="./failure_case_visuals/complex_intersection/plot_83875.png"
+                 alt="After Click"
+                 style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+          </div>
+        </div>
+        <br/>
+        <h3 class="title is-4"> Occlusions</h3>
+        <!-- Interpolating. -->
+        <!-- <h3 class="title is-4">Interpolating states</h3> -->
+        <div class="content has-text-justified">
+          <p>
+            Good Examples.
+          </p>
+        </div>
+        <div class="columns is-vcentered interpolation-panel">
+          <div class="column is-4 has-text-centered">
+            <!-- <h3 class="subtitle is-5">Original Inference</h3> -->
+            <img src="./hardcase_good_visuals/occluded_good/plot_292951.png"
+                 alt="Original Inference"
+                 style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+          </div>
+          <div class="column is-4 has-text-centered">
+            <!-- <h3 class="subtitle is-5">After Click</h3> -->
+            <img src="./hardcase_good_visuals/occluded_good/plot_424350.png"
+                 alt="After Click"
+                 style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+          </div>
+          <div class="column is-4 has-text-centered">
+            <!-- <h3 class="subtitle is-5">After Click</h3> -->
+            <img src="./hardcase_good_visuals/occluded_good/plot_483392.png"
+                 alt="After Click"
+                 style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+          </div>
+        </div>
+        <div class="content has-text-justified">
+          <p>
+            Bad Examples.
+          </p>
+        </div>
+        <div class="columns is-vcentered interpolation-panel">
+          <div class="column is-4 has-text-centered">
+            <!-- <h3 class="subtitle is-5">Original Inference</h3> -->
+            <img src="./failure_case_visuals/occluded/plot_113602.png"
+                 alt="Original Inference"
+                 style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+          </div>
+          <div class="column is-4 has-text-centered">
+            <!-- <h3 class="subtitle is-5">After Click</h3> -->
+            <img src="./failure_case_visuals/occluded/plot_124720.png"
+                 alt="After Click"
+                 style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+          </div>
+          <div class="column is-4 has-text-centered">
+            <!-- <h3 class="subtitle is-5">After Click</h3> -->
+            <img src="./failure_case_visuals/occluded/plot_13641.png"
+                 alt="After Click"
+                 style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+          </div>
+        </div>
+        <br/>
+        <!-- Interpolating. -->
+        <!-- <h3 class="title is-4">Interpolating states</h3> -->
+        <br/>
+      </div>
+    </div>
+    <!--/ Animation. -->
+  </div>
+</section>
+<footer class="footer">
+  <div class="container">
+    <div class="content has-text-centered">
+      <a class="icon-link"
+         href="./static/videos/nerfies_paper.pdf">
+        <i class="fas fa-file-pdf"></i>
+      </a>
+      <a class="icon-link" href="https://github.com/keunhong" class="external-link" disabled>
+        <i class="fab fa-github"></i>
+      </a>
+    </div>
+    <div class="columns is-centered">
+      <div class="column is-8">
+        <div class="content">
+          <p>
+            This website is licensed under a <a rel="license"
+                                                href="http://creativecommons.org/licenses/by-sa/4.0/">Creative
+            Commons Attribution-ShareAlike 4.0 International License</a>.
+          </p>
+          <p>
+            If you use the source code of this website <a
+            href="https://github.com/RupanjaliKukal/Click-Describe-Multimodal-Grounding-and-Tracking-for-Aerial-Objects.git">source code</a>, please also link back  <a
+              href="https://github.com/nerfies/nerfies.github.io"> Nerfies source code</a> in your footer.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+</body>
+</html>