test

index.html

@@ -1,292 +1,297 @@
 <!DOCTYPE html>
-<html>
+
+<html lang="en">
+
 <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>
+```
+<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
 
-    <style>
-        body {
-            font-family: sans-serif;
-            max-width: 1000px;
-            margin: auto;
-            padding: 20px;
-        }
+<style>
+    * {
+        box-sizing: border-box;
+    }
 
-        .row {
-            display: flex;
-            gap: 20px;
-            flex-wrap: wrap;
-        }
+    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;
+    }
+
+    .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;
+    }
 
-        label {
-            display: block;
-            margin-top: 10px;
+    @media (max-width: 700px) {
+        .architecture-grid {
+            grid-template-columns: repeat(2, 1fr);
         }
+    }
 
-        input {
-            width: 120px;
+    @media (max-width: 450px) {
+        body {
+            padding: 16px;
         }
 
-        button {
-            margin-top: 10px;
-            padding: 8px 15px;
+        .architecture-grid {
+            grid-template-columns: 1fr;
         }
-    </style>
+    }
+</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:
+    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:
-<a href="YOUR_PAPER_URL" target="_blank">
-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" rel="noopener">
+        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>
-
-<button onclick="loadPreset()">
-Load selected model
-</button>
-
-<h4>
-Or load another public Hugging Face model (dense, < 20B):
-</h4>
+<select id="preset"></select>
+<button type="button" onclick="loadPreset()">Load selected model</button>
 
-<input 
-id="repo"
-style="width:400px"
-placeholder="tiiuae/falcon-rw-7b">
+<h4>Or load another public Hugging Face model (dense, &lt; 20B)</h4>
 
-<button onclick="loadModel()">
-Load model
-</button>
+<input
+    id="repo"
+    type="text"
+    placeholder="tiiuae/falcon-rw-7b"
+>
+<button type="button" onclick="loadModel()">Load model</button>
 
 <p id="status"></p>
 
 <h4>Architecture parameters</h4>
 
-<div class="row">
+<div class="architecture-grid">
 
-<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>
-<label>Query heads (<i>n</i><sub>q</sub>):</label>
-<input id="nq" type="number" value="64">
-</div>
+    <div class="parameter">
+        <label for="d">Hidden size (<i>d</i>)</label>
+        <input id="d" type="number" value="4096">
+    </div>
 
-<div>
-<label>KV heads (<i>n</i><sub>kv</sub>):</label>
-<input id="nkv" type="number" value="64">
-</div>
+    <div class="parameter">
+        <label for="L">Layers (<i>L</i>)</label>
+        <input id="L" type="number" value="36">
+    </div>
 
-</div>
+    <div class="parameter">
+        <label for="nq">Query heads (<i>n</i><sub>q</sub>)</label>
+        <input id="nq" type="number" value="64">
+    </div>
 
-<!-- <div>
-    <label>
-        Input Tokens (<i>n</i><sub>in</sub>):
-        <span id="ninValue">64</span>
-    </label>
-
-    <input
-        id="nin"
-        type="range"
-        min="1"
-        max="4096"
-        step="1"
-        value="64"
-        oninput="ninValue.textContent = this.value; draw();">
-</div> 
-
-<div id="plot"></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"></div>
+    <div class="parameter">
+        <label for="nkv">KV heads (<i>n</i><sub>kv</sub>)</label>
+        <input id="nkv" type="number" value="64">
+    </div>
 
-    <input id="nin" type="hidden" value="64">
 </div>
 
-<div id="plot"></div>
+<div id="ninWrapper">
 
-<script src="app.js"></script>
+    <div class="slider-header">
+        <label for="ninSlider">
+            Input Tokens (<i>n</i><sub>in</sub>)
+        </label>
 
-<script>
-    function updateNin(exponent) {
-        const value = Math.round(Math.pow(2, parseFloat(exponent)));
-        const clamped = Math.min(4096, Math.max(1, value));
-
-        document.getElementById('nin').value = clamped;
-        document.getElementById('ninValue').textContent = clamped;
-
-        draw();
-    }
-
-    // Keep the slider's on-screen width exactly matched to the rendered plot width.
-    function syncSliderWidth() {
-        const plotDiv = document.getElementById('plot');
-        const slider = document.getElementById('ninSlider');
-        if (plotDiv && slider) {
-            const plotWidth = plotDiv.getBoundingClientRect().width;
-            if (plotWidth > 0) {
-                slider.style.width = plotWidth + 'px';
-            }
-        }
-    }
-
-    window.addEventListener('resize', syncSliderWidth);
-    window.addEventListener('load', syncSliderWidth);
+        <span id="ninValue" class="slider-value">64</span>
+    </div>
 
-    if (window.ResizeObserver) {
-        const plotEl = document.getElementById('plot');
-        if (plotEl) new ResizeObserver(syncSliderWidth).observe(plotEl);
-    }
-</script> -->
-
-
-    <!-- Hidden input: holds the ACTUAL token count, exactly what app.js reads -->
-
-    <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 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>
 
+    <!-- app.js reads the actual integer token count from here -->
     <input id="nin" type="hidden" value="64">
-</div>
 
-<style>
-     #ninSlider {
-        width: 100%;
-        box-sizing: border-box;
-    }
+</div>
 
-    #ninLabels {
-        display: flex;
-        justify-content: space-between;
-        padding: 0 8px;
-        font-size: 12px;
-        color: #555;
-    }
-</style>
+<div id="plot"></div>
 
 <script>
     const MAX_TOKENS = 4096;
-    const MAX_EXPONENT = 12; // log2(4096)
 
     function updateNin(exponent) {
-        const value = Math.round(Math.pow(2, parseFloat(exponent)));
+        const value = Math.round(2 ** Number(exponent));
         const clamped = Math.min(MAX_TOKENS, Math.max(1, value));
 
-        document.getElementById('nin').value = clamped;
-        document.getElementById('ninValue').textContent = clamped;
-
-        draw();
+        document.getElementById("nin").value = clamped;
+        document.getElementById("ninValue").textContent = clamped;
     }
 </script>
 
-<div id="plot"></div>
-
-
 <script src="app.js"></script>
 
 </body>
-</html>
+</html>