Update SIMPLE hf

app.js

@@ -315,7 +315,7 @@ function draw()
 function drawComponents(d,L,nq,nkv,nin)
 {
 
-    let nout = logspace2(1,8192,400);
+    let nout = logspace2(1,16384,400);
 
 
     let components =
@@ -379,8 +379,9 @@ function drawComponents(d,L,nq,nkv,nin)
     });
 
 
+    // Every other power of two, so the ticks fit the narrower panel
     let ticks=[];
-    for(let e=0;e<=13;e++) ticks.push(2**e);
+    for(let e=0;e<=14;e+=2) ticks.push(2**e);
 
 
     let layout={
@@ -393,7 +394,7 @@ function drawComponents(d,L,nq,nkv,nin)
             title:
             `Output Tokens τ<sub>out</sub> (τ<sub>in</sub>=${nin}) [log<sub>2</sub>]`,
             type:"log",
-            range:[0,Math.log10(8192)],
+            range:[0,Math.log10(16384)],
             tickmode:"array",
             tickvals:ticks,
             ticktext:ticks.map(String),
@@ -592,7 +593,7 @@ function drawContour(d,L,nq,nkv,nin)
 
 
     let layout={
-        height:500,
+        height:450,
         font:{
             family:"sans-serif",
             size:13

index.html

@@ -13,7 +13,7 @@
 <style>
     body {
         font-family: sans-serif;
-        max-width: 1000px;
+        max-width: 1400px;
         margin: auto;
         padding: 20px;
     }
@@ -58,6 +58,24 @@
         margin-top: 3px;
     }
 
+    /* Plots side by side; the component plot is the narrower one */
+    #plots {
+        display: flex;
+        gap: 20px;
+        flex-wrap: wrap;
+        margin-top: 20px;
+    }
+
+    #plotPanel {
+        flex: 2 1 380px;
+        min-width: 0;
+    }
+
+    #contourPanel {
+        flex: 3 1 520px;
+        min-width: 0;
+    }
+
     #formula {
         overflow-x: auto;
         overflow-y: hidden;
@@ -169,16 +187,16 @@ placeholder="tiiuae/falcon-rw-7b"
 <input
     id="ninSlider"
     type="range"
-    min="0"
-    max="12"
+    min="4"
+    max="16"
     step="0.01"
     value="6"
     oninput="updateNin(this.value)"
 >
 
 <div id="ninLabels">
-    <span>1</span>
-    <span>4096</span>
+    <span>16</span>
+    <span>65536</span>
 </div>
 
 <!-- Actual token count used by app.js -->
@@ -186,25 +204,32 @@ placeholder="tiiuae/falcon-rw-7b"
 
 </div>
 
-<div id="plot"></div>
+<div id="plots">
 
-<h4>
-E<sub>tok</sub> over input and output tokens
-</h4>
+<div id="plotPanel">
+    <h4>Component breakdown at the selected τ<sub>in</sub></h4>
+    <div id="plot"></div>
+</div>
+
+<div id="contourPanel">
+    <h4>E<sub>tok</sub> over input and output tokens</h4>
+    <div id="contour"></div>
+</div>
+
+</div>
 
 <p>
-Full contour map of the total energy per token for the current architecture.
-The dashed line marks the selected τ<sub>in</sub>.
+The contour map shows the total energy per token for the current architecture;
+the dashed line marks the selected τ<sub>in</sub>.
 </p>
 
-<div id="contour"></div>
-
 <script>
-    const MAX_TOKENS = 4096;
+    const MIN_TOKENS = 16;
+    const MAX_TOKENS = 65536;
 
     function updateNin(exponent) {
         const value = Math.round(Math.pow(2, parseFloat(exponent)));
-        const clamped = Math.min(MAX_TOKENS, Math.max(1, value));
+        const clamped = Math.min(MAX_TOKENS, Math.max(MIN_TOKENS, value));
 
         document.getElementById('nin').value = clamped;
         document.getElementById('ninValue').textContent = clamped;