Upload index.html

index.html

@@ -158,10 +158,10 @@
           </video>
         </div>
         <div class="item item-blueshirt">
-          <!-- <video poster="" id="blueshirt" autoplay controls muted loop playsinline height="100%">
+          <video poster="" id="blueshirt" autoplay controls muted loop playsinline height="100%">
             <source src="./videos/dtb70/2.mp4"
                     type="video/mp4">
-          </video> -->
+          </video>
         </div>
       </div>
     </div>
@@ -252,15 +252,17 @@ the full image prediction performance.
         <div class="columns is-vcentered interpolation-panel">
           <div class="column is-6 has-text-centered">
             <h3 class="subtitle is-5">Original Inference</h3>
-            <img src="./click2_videos/output.png" 
-     alt="Original Inference" 
-     style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+            <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>
-            <img src="./click2_videos/output_click.png" 
-                 alt="After Click" 
-                 style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+            <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/>
@@ -429,10 +431,10 @@ from the final predictions, which is common for various small map elements.
                  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"
+                   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-roundabout">Image 1 of 15</span>
+              <span id="counter-roundabout">Image 1 of 11</span>
             </p>
           </div>
         </div>
@@ -506,7 +508,9 @@ from the final predictions, which is common for various small map elements.
 
     // 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",
@@ -516,7 +520,10 @@ from the final predictions, which is common for various small map elements.
       "./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
@@ -591,43 +598,28 @@ 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-4 has-text-centered">
-    <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">
-    <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">
-    <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="columns is-vcentered interpolation-panel" style="margin-top: 20px;">
-  <div class="column is-4 has-text-centered">
-    <img src="./hardcase_good_visuals/intersection_good/plot_434008.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">
-    <img src="./hardcase_good_visuals/intersection_good/plot_873922.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">
-    <img src="./hardcase_good_visuals/intersection_good/plot_1349291.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="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 Examples
+            Poor Ecamples
           </p>
         </div>
         <div class="columns is-vcentered interpolation-panel">
@@ -661,40 +653,25 @@ 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-4 has-text-centered">
-    <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">
-    <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">
-    <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="columns is-vcentered interpolation-panel" style="margin-top: 20px;">
-  <div class="column is-4 has-text-centered">
-    <img src="./hardcase_good_visuals/occluded_good/plot_485453.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">
-    <img src="./hardcase_good_visuals/occluded_good/plot_624019.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">
-    <img src="./hardcase_good_visuals/occluded_good/plot_947394.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="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>