Update index.html

index.html

@@ -212,30 +212,30 @@ <h2 class="title is-3 is-centered has-text-centered" style="margin-top: -20px">A
       <p style="margin-top: 30px">
         When handling input SfM points, 3DGS alternates between densification and optimization to enhance scene representation. In contrast, our method initially constrains Gaussians that represent fine details into Atom Gaussians and prioritizes their proliferation to quickly align with the scene's inherent geometry.
       </p>
+      <p>Drag the slider to play with proliferation!</p>
     </div>
-    <ul class="nav nav-tabs nav-fill nav-justified" id="densify-shrunken-full">
-      <li class="nav-item">
-        <a class="nav-link active" onclick="shrunkenFullEvent(0)">Shrunken</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" onclick="shrunkenFullEvent(1)">Full Size</a>
-      </li>
-    </ul>
-    <div class="columns is-vcentered">
-      <div class="column interpolation-video-column">
+    <div class="has-text-centered">
+      <input class="slider is-fullwidth is-large is-info is-danger" id="interpolation-slider" step="1" min="0" max="200" value="0" type="range" style="color: #990000; margin-top: 0px;margin-bottom: 0px;" oninput="this.nextElementSibling.textContent = 'Iteration: ' + (this.value * 10 + 10)">
+      <p style=" display: flex;
+      justify-content: center;
+      align-items: center;">Iteration: 10</p>
+    </div>
+    <div class="columns is-vcentered" style="margin-bottom: 0;">
+      <div class="column interpolation-video-column" style="padding-bottom: 0;">
         <div id="interpolation-image-wrapper" class="b-dics densify">
           <img id="image-gs" src="./static/interpolation/gs/shrunken/00010.png" alt="3DGS">
           <img id="image-ours" src="./static/interpolation/ours/shrunken/00010.png" alt="AtomGS (Ours)">
         </div>
-        <div class="has-text-centered">
-          <input class="slider is-fullwidth is-large is-info is-danger" id="interpolation-slider" step="1" min="0" max="200" value="0" type="range" style="color: #990000;" oninput="this.nextElementSibling.textContent = 'Iteration: ' + (this.value * 10 + 10)">
-          <p style=" display: flex;
-          justify-content: center;
-          align-items: center;">Iteration: 10</p>
-        </div>
-
       </div>
     </div>
+    <ul class="nav nav-tabs nav-fill nav-justified" id="densify-shrunken-full" style="border-width: 0px 0px 1px 0px;">
+      <li class="nav-item" style="border-radius: 0px 0px 10px 10px;">
+        <a class="nav-link active" onclick="shrunkenFullEvent(0)">Shrunken</a>
+      </li>
+      <li class="nav-item" style="border-radius: 0px 0px 10px 10px;">
+        <a class="nav-link" onclick="shrunkenFullEvent(1)">Full Size</a>
+      </li>
+    </ul>
   </div>
 </section>
 <section class="section">