Update position

README.md

@@ -1,5 +1,5 @@
 ---
-title: SweetSpotv2
+title: SIMPLE Law
 emoji: 👀
 colorFrom: green
 colorTo: yellow

app.js

@@ -1,5 +1,5 @@
 // =====================================================
-// SweetSpot analytical model
+// SIMPLE Law analytical model
 // =====================================================
 
 
@@ -33,7 +33,7 @@ const RDYLGN_R =
     "#fee08b", "#fdae61", "#f46d43", "#d73027", "#a50026"
 ];
 
-// Validated models, from models.json
+// Validated models, from models.json (up to ~9B)
 const PRESET_MODELS =
 {
     "Llama 3.2 1B":
@@ -81,15 +81,6 @@ const PRESET_MODELS =
         nkv:8
     },
 
-    "Gemma 2 27B":
-    {
-        params:2.72e+10,
-        d:4608,
-        L:46,
-        nq:32,
-        nkv:16
-    },
-
     "Granite 3B":
     {
         params:3.48e+09,
@@ -160,15 +151,6 @@ const PRESET_MODELS =
         L:36,
         nq:64,
         nkv:64
-    },
-
-    "Mistral 24B":
-    {
-        params:2.36e+10,
-        d:5120,
-        L:40,
-        nq:32,
-        nkv:8
     }
 };
 
@@ -177,8 +159,7 @@ const PRESET_GROUPS =
 [
     {label:"XS · ~1B", max:2e9},
     {label:"S · ~2B–3B", max:5e9},
-    {label:"M · ~6B–9B", max:12e9},
-    {label:"L · ~24B–27B", max:Infinity}
+    {label:"M · ~6B–9B", max:Infinity}
 ];
 
 window.onload = function()

index.html

@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>SweetSpot v2 — Energy-per-Token demo</title>
+    <title>SIMPLE Law — Energy-per-Token demo</title>
 
 <script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script>
 
@@ -214,9 +214,9 @@
     /* Input-token slider */
     #ninWrapper {
         width: 100%;
-        margin-top: 22px;
-        padding-top: 18px;
-        border-top: 1px solid var(--border);
+        margin-bottom: 22px;
+        padding-bottom: 18px;
+        border-bottom: 1px solid var(--border);
     }
 
     .sliderHeader {
@@ -451,7 +451,7 @@
 <body>
 
 <header class="hero">
-    <div class="eyebrow">SweetSpot v2</div>
+    <div class="eyebrow">SIMPLE Law</div>
     <h1>Energy-per-Token demo</h1>
     <p class="lede">
         An architecture-aware analytical model of the energy spent on each
@@ -513,8 +513,54 @@
 
 </div>
 
+<div id="plots">
+
+<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>
+The contour map shows the total energy per token for the current architecture;
+the dashed line marks the selected τ<sub>in</sub>.
+</p>
+
 <section class="card" id="controls">
 
+<div id="ninWrapper">
+
+<div class="sliderHeader">
+    <label for="ninSlider">Input tokens τ<sub>in</sub></label>
+    <span id="ninValue" class="badge">64</span>
+</div>
+
+<input
+    id="ninSlider"
+    type="range"
+    min="4"
+    max="16"
+    step="0.01"
+    value="6"
+    oninput="updateNin(this.value)"
+>
+
+<div id="ninLabels">
+    <span>16</span>
+    <span>65536</span>
+</div>
+
+<!-- Actual token count used by app.js -->
+<input id="nin" type="hidden" value="64">
+
+</div>
+
 <div class="cardHeader">
     <h3>Model</h3>
     <span id="status" class="status"></span>
@@ -567,54 +613,8 @@
 
 <div id="archSummary"></div>
 
-<div id="ninWrapper">
-
-<div class="sliderHeader">
-    <label for="ninSlider">Input tokens τ<sub>in</sub></label>
-    <span id="ninValue" class="badge">64</span>
-</div>
-
-<input
-    id="ninSlider"
-    type="range"
-    min="4"
-    max="16"
-    step="0.01"
-    value="6"
-    oninput="updateNin(this.value)"
->
-
-<div id="ninLabels">
-    <span>16</span>
-    <span>65536</span>
-</div>
-
-<!-- Actual token count used by app.js -->
-<input id="nin" type="hidden" value="64">
-
-</div>
-
 </section>
 
-<div id="plots">
-
-<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>
-The contour map shows the total energy per token for the current architecture;
-the dashed line marks the selected τ<sub>in</sub>.
-</p>
-
 <script>
     const MIN_TOKENS = 16;
     const MAX_TOKENS = 65536;
@@ -662,7 +662,7 @@ and inference frameworks.
 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
+SIMPLE Law: An Architecture-Aware Analytical Model for Predicting Energy
 Efficiency of LLM Inference
 </a>.
 </p>