fix

index.html

@@ -1,39 +1,63 @@
 <!DOCTYPE html>
+
 <html>
 <head>
     <meta charset="UTF-8">
     <title>SweetSpot v2 — Energy-per-Token demo</title>
 
-    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
-
-    <style>
-        body {
-            font-family: sans-serif;
-            max-width: 1000px;
-            margin: auto;
-            padding: 20px;
-        }
-
-        .row {
-            display: flex;
-            gap: 20px;
-            flex-wrap: wrap;
-        }
-
-        label {
-            display: block;
-            margin-top: 10px;
-        }
-
-        input {
-            width: 120px;
-        }
-
-        button {
-            margin-top: 10px;
-            padding: 8px 15px;
-        }
-    </style>
+```
+<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+
+<style>
+    body {
+        font-family: sans-serif;
+        max-width: 1000px;
+        margin: auto;
+        padding: 20px;
+    }
+
+    .row {
+        display: flex;
+        gap: 20px;
+        flex-wrap: wrap;
+    }
+
+    label {
+        display: block;
+        margin-top: 10px;
+    }
+
+    input[type="number"] {
+        width: 120px;
+    }
+
+    button {
+        margin-top: 10px;
+        padding: 8px 15px;
+    }
+
+    /* Input-token slider */
+    #ninWrapper {
+        width: 100%;
+        margin-top: 25px;
+    }
+
+    #ninSlider {
+        width: 100%;
+        display: block;
+        margin-top: 8px;
+    }
+
+    #ninLabels {
+        display: flex;
+        justify-content: space-between;
+        font-size: 12px;
+        color: #555;
+        margin-top: 3px;
+    }
+</style>
+```
+
 </head>
 
 <body>
@@ -43,51 +67,62 @@ SweetSpot v2 — Energy-per-Token demo
 </h2>
 
 <p>
-This interactive demo visualizes our analytical model for predicting the  <b>energy consumption per generated token</b> as a function of the number of output tokens (<i>n</i><sub>out</sub>). 
-Select one of the validated models used in the paper or load the architecture of any <b>dense decoder-only Transformer</b> (up to approximately 20B parameters) from Hugging Face to explore how the different terms contribute to the prediction.
+This interactive demo visualizes our analytical model for predicting the
+<b>energy consumption per generated token</b> as a function of the number of
+output tokens (<i>n</i><sub>out</sub>).
+Select one of the validated models used in the paper or load the architecture
+of any <b>dense decoder-only Transformer</b> (up to approximately 20B
+parameters) from Hugging Face to explore how the different terms contribute
+to the prediction.
 </p>
 
 <p>
-The model was fitted using empirical measurements collected on an <b>NVIDIA H100 GPU</b> with <b>NVIDIA TensorRT-LLM</b> under the following experimental configuration:
+The model was fitted using empirical measurements collected on an
+<b>NVIDIA H100 GPU</b> with <b>NVIDIA TensorRT-LLM</b> under the following
+experimental configuration:
+</p>
+
 <ul>
     <li><code>max_batch_size = 1024</code></li>
     <li><code>max_num_tokens = 8192</code></li>
     <li><code>num_requests = 1000</code></li>
 </ul>
 
-Future releases will extend the analysis to additional hardware platforms and inference frameworks.
+<p>
+Future releases will extend the analysis to additional hardware platforms
+and inference frameworks.
 </p>
 
 <p>
-For the complete methodology, experimental validation, and citation information, please see the paper:
+For the complete methodology, experimental validation, and citation
+information, please see the paper:
 <a href="YOUR_PAPER_URL" target="_blank">
-SweetSpot v2: An Architecture-Aware Analytical Model for Predicting Energy Efficiency of LLM Inference
+SweetSpot v2: An Architecture-Aware Analytical Model for Predicting Energy
+Efficiency of LLM Inference
 </a>.
 </p>
 
+<h4>Validated models:</h4>
 
-<h4>
-Validated models:
-</h4>
-
-<select id="preset">
-</select>
+<select id="preset"></select>
 
 <button onclick="loadPreset()">
-Load selected model
+    Load selected model
 </button>
 
 <h4>
-Or load another public Hugging Face model (dense, < 20B):
+Or load another public Hugging Face model (dense, &lt; 20B):
 </h4>
 
-<input 
+<input
 id="repo"
 style="width:400px"
-placeholder="tiiuae/falcon-rw-7b">
+placeholder="tiiuae/falcon-rw-7b"
+
+>
 
 <button onclick="loadModel()">
-Load model
+    Load model
 </button>
 
 <p id="status"></p>
@@ -96,28 +131,35 @@ Load model
 
 <div class="row">
 
+```
 <div>
-<label>Hidden size (d):</label>
-<input id="d" type="number" value="4096">
+    <label>Hidden size (d):</label>
+    <input id="d" type="number" value="4096">
 </div>
 
 <div>
-<label>Layers (L):</label>
-<input id="L" type="number" value="36">
+    <label>Layers (L):</label>
+    <input id="L" type="number" value="36">
 </div>
 
 <div>
-<label>Query heads (<i>n</i><sub>q</sub>):</label>
-<input id="nq" type="number" value="64">
+    <label>Query heads (<i>n</i><sub>q</sub>):</label>
+    <input id="nq" type="number" value="64">
 </div>
 
 <div>
-<label>KV heads (<i>n</i><sub>kv</sub>):</label>
-<input id="nkv" type="number" value="64">
+    <label>KV heads (<i>n</i><sub>kv</sub>):</label>
+    <input id="nkv" type="number" value="64">
+</div>
+```
+
 </div>
 
+<!-- Slider is OUTSIDE the architecture-parameter row -->
+
 <div id="ninWrapper">
 
+```
 <label>
     Input Tokens (<i>n</i><sub>in</sub>):
     <span id="ninValue">64</span>
@@ -138,23 +180,13 @@ Load model
     <span>4096</span>
 </div>
 
+<!-- Actual token count used by app.js -->
 <input id="nin" type="hidden" value="64">
+```
 
 </div>
 
-<style>
-    #ninSlider {
-        width: 100%;
-        display: block;
-    }
-
-    #ninLabels {
-        display: flex;
-        justify-content: space-between;
-        font-size: 12px;
-        color: #555;
-    }
-</style>
+<div id="plot"></div>
 
 <script>
     const MAX_TOKENS = 4096;
@@ -170,11 +202,7 @@ Load model
     }
 </script>
 
-
-<div id="plot"></div>
-
-
 <script src="app.js"></script>
 
 </body>
-</html>
+</html>