adding labels

app.js

@@ -572,6 +572,14 @@ async function loadRepo(repo)
 
 }
 
+(function renderNinLabels() {
+    const labelsContainer = document.getElementById('ninLabels');
+    const values = [1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, 4096];
+
+    labelsContainer.innerHTML = values
+        .map(v => `<span>${v}</span>`)
+        .join('');
+})();
 
 
 // redraw when sliders change

index.html

@@ -29,10 +29,6 @@
             width: 120px;
         }
 
-        #plot {
-            margin-top: 30px;
-        }
-
         button {
             margin-top: 10px;
             padding: 8px 15px;
@@ -174,6 +170,9 @@ Load model
         <option value="12"></option>
     </datalist>
 
+    <!-- Number labels under the ticks, matching the plot's x-axis tickvals -->
+    <div id="ninLabels"></div>
+
     <!-- Hidden input: holds the ACTUAL token count, exactly what app.js reads -->
     <input id="nin" type="hidden" value="64">
 </div>

style.css

@@ -15,9 +15,28 @@ p {
 	margin-top: 5px;
 }
 
-#ninSlider {
-    width: 100%;
-    box-sizing: border-box;
+#ninLabels {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    color: #555;
+    margin-top: 2px;
+    /* Slight inset so end labels roughly align with the slider thumb's
+       travel range, which is narrower than the full track width */
+    padding: 0 6px;
+}
+
+#ninLabels span {
+    flex: 1;
+    text-align: center;
+}
+
+#ninLabels span:first-child {
+    text-align: left;
+}
+
+#ninLabels span:last-child {
+    text-align: right;
 }
 
 #plot {