f

index.html

@@ -1,297 +1,198 @@
 <!DOCTYPE html>
-
-<html lang="en">
-
+<html>
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SweetSpot v2 — Energy-per-Token demo</title>
 
-```
-<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
-
-<style>
-    * {
-        box-sizing: border-box;
-    }
-
-    body {
-        max-width: 1000px;
-        margin: 0 auto;
-        padding: 24px;
-        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-        line-height: 1.5;
-        color: #222;
-    }
-
-    h2 {
-        margin-bottom: 8px;
-    }
-
-    h4 {
-        margin: 28px 0 10px;
-    }
-
-    p {
-        margin: 12px 0;
-    }
-
-    ul {
-        margin-top: 6px;
-    }
-
-    button {
-        padding: 8px 14px;
-        border: 1px solid #bbb;
-        border-radius: 6px;
-        background: #f5f5f5;
-        cursor: pointer;
-    }
-
-    button:hover {
-        background: #eaeaea;
-    }
-
-    select,
-    input[type="text"],
-    input[type="number"] {
-        padding: 7px 9px;
-        border: 1px solid #bbb;
-        border-radius: 5px;
-    }
-
-    #preset {
-        min-width: 280px;
-    }
-
-    #repo {
-        width: min(400px, 100%);
-    }
-
-    .architecture-grid {
-        display: grid;
-        grid-template-columns: repeat(4, 1fr);
-        gap: 16px;
-    }
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
 
-    .parameter label {
-        display: block;
-        margin-bottom: 5px;
-    }
-
-    .parameter input {
-        width: 100%;
-    }
-
-    /* Token slider */
-
-    #ninWrapper {
-        margin-top: 24px;
-        width: 100%;
-    }
-
-    .slider-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: baseline;
-        margin-bottom: 8px;
-    }
-
-    .slider-value {
-        font-variant-numeric: tabular-nums;
-        font-weight: 600;
-    }
-
-    .slider-track {
-        width: 100%;
-    }
-
-    #ninSlider {
-        display: block;
-        width: 100%;
-        margin: 0;
-    }
-
-    #ninLabels {
-        display: flex;
-        justify-content: space-between;
-        margin-top: 5px;
-        padding: 0 7px;
-        font-size: 12px;
-        color: #666;
-    }
-
-    #ninLabels span {
-        text-align: center;
-    }
-
-    #plot {
-        width: 100%;
-        margin-top: 24px;
-    }
+    <style>
+        body {
+            font-family: sans-serif;
+            max-width: 1000px;
+            margin: auto;
+            padding: 20px;
+        }
 
-    @media (max-width: 700px) {
-        .architecture-grid {
-            grid-template-columns: repeat(2, 1fr);
+        .row {
+            display: flex;
+            gap: 20px;
+            flex-wrap: wrap;
         }
-    }
 
-    @media (max-width: 450px) {
-        body {
-            padding: 16px;
+        label {
+            display: block;
+            margin-top: 10px;
         }
 
-        .architecture-grid {
-            grid-template-columns: 1fr;
+        input {
+            width: 120px;
         }
-    }
-</style>
-```
 
+        button {
+            margin-top: 10px;
+            padding: 8px 15px;
+        }
+    </style>
 </head>
 
 <body>
 
-```
-<h2>SweetSpot v2 — Energy-per-Token demo</h2>
+<h2>
+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:
-</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:
 <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>
 
-<p>
-    Future releases will extend the analysis to additional hardware
-    platforms and inference frameworks.
+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:
-    <a href="YOUR_PAPER_URL" target="_blank" rel="noopener">
-        SweetSpot v2: An Architecture-Aware Analytical Model for Predicting
-        Energy Efficiency of LLM Inference
-    </a>.
+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
+</a>.
 </p>
 
-<h4>Validated models</h4>
 
-<select id="preset"></select>
-<button type="button" onclick="loadPreset()">Load selected model</button>
+<h4>
+Validated models:
+</h4>
 
-<h4>Or load another public Hugging Face model (dense, &lt; 20B)</h4>
+<select id="preset">
+</select>
 
-<input
-    id="repo"
-    type="text"
-    placeholder="tiiuae/falcon-rw-7b"
->
-<button type="button" onclick="loadModel()">Load model</button>
+<button onclick="loadPreset()">
+Load selected model
+</button>
 
-<p id="status"></p>
+<h4>
+Or load another public Hugging Face model (dense, < 20B):
+</h4>
 
-<h4>Architecture parameters</h4>
+<input 
+id="repo"
+style="width:400px"
+placeholder="tiiuae/falcon-rw-7b">
 
-<div class="architecture-grid">
+<button onclick="loadModel()">
+Load model
+</button>
 
-    <div class="parameter">
-        <label for="d">Hidden size (<i>d</i>)</label>
-        <input id="d" type="number" value="4096">
-    </div>
+<p id="status"></p>
 
-    <div class="parameter">
-        <label for="L">Layers (<i>L</i>)</label>
-        <input id="L" type="number" value="36">
-    </div>
+<h4>Architecture parameters</h4>
 
-    <div class="parameter">
-        <label for="nq">Query heads (<i>n</i><sub>q</sub>)</label>
-        <input id="nq" type="number" value="64">
-    </div>
+<div class="row">
 
-    <div class="parameter">
-        <label for="nkv">KV heads (<i>n</i><sub>kv</sub>)</label>
-        <input id="nkv" type="number" value="64">
-    </div>
+<div>
+<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">
 </div>
 
-<div id="ninWrapper">
+<div>
+<label>Query heads (<i>n</i><sub>q</sub>):</label>
+<input id="nq" type="number" value="64">
+</div>
 
-    <div class="slider-header">
-        <label for="ninSlider">
-            Input Tokens (<i>n</i><sub>in</sub>)
-        </label>
+<div>
+<label>KV heads (<i>n</i><sub>kv</sub>):</label>
+<input id="nkv" type="number" value="64">
+</div>
 
-        <span id="ninValue" class="slider-value">64</span>
-    </div>
+</div>
 
-    <div class="slider-track">
-        <input
-            id="ninSlider"
-            type="range"
-            min="0"
-            max="12"
-            step="0.01"
-            value="6"
-            aria-label="Input tokens"
-            oninput="updateNin(this.value)"
-        >
-
-        <div id="ninLabels" aria-hidden="true">
-            <span>1</span>
-            <span>2</span>
-            <span>4</span>
-            <span>8</span>
-            <span>16</span>
-            <span>32</span>
-            <span>64</span>
-            <span>128</span>
-            <span>256</span>
-            <span>512</span>
-            <span>1024</span>
-            <span>2048</span>
-            <span>4096</span>
-        </div>
+    <div id="ninWrapper">
+    <label>
+        Input Tokens (<i>n</i><sub>in</sub>):
+        <span id="ninValue">64</span>
+    </label>
+
+    <input
+        id="ninSlider"
+        type="range"
+        min="0"
+        max="12"
+        step="0.01"
+        value="6"
+        list="ninTicks"
+        oninput="updateNin(this.value)">
+
+    <datalist id="ninTicks">
+        <option value="0"></option>
+        <option value="1"></option>
+        <option value="2"></option>
+        <option value="3"></option>
+        <option value="4"></option>
+        <option value="5"></option>
+        <option value="6"></option>
+        <option value="7"></option>
+        <option value="8"></option>
+        <option value="9"></option>
+        <option value="10"></option>
+        <option value="11"></option>
+        <option value="12"></option>
+    </datalist>
+
+    <div id="ninLabels">
+        <span>1</span><span>2</span><span>4</span><span>8</span>
+        <span>16</span><span>32</span><span>64</span><span>128</span>
+        <span>256</span><span>512</span><span>1024</span><span>2048</span><span>4096</span>
     </div>
 
-    <!-- app.js reads the actual integer token count from here -->
     <input id="nin" type="hidden" value="64">
-
 </div>
 
-<div id="plot"></div>
+<style>
+     #ninSlider {
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    #ninLabels {
+        display: flex;
+        justify-content: space-between;
+        padding: 0 8px;
+        font-size: 12px;
+        color: #555;
+    }
+</style>
 
 <script>
     const MAX_TOKENS = 4096;
+    const MAX_EXPONENT = 12; // log2(4096)
 
     function updateNin(exponent) {
-        const value = Math.round(2 ** Number(exponent));
+        const value = Math.round(Math.pow(2, parseFloat(exponent)));
         const clamped = Math.min(MAX_TOKENS, Math.max(1, value));
 
-        document.getElementById("nin").value = clamped;
-        document.getElementById("ninValue").textContent = clamped;
+        document.getElementById('nin').value = clamped;
+        document.getElementById('ninValue').textContent = clamped;
+
+        draw();
     }
 </script>
 
+<div id="plot"></div>
+
+
 <script src="app.js"></script>
 
 </body>
-</html>
+</html>