Update next

app.js

@@ -167,21 +167,37 @@ const PRESET_MODELS =
     }
 };
 
+const PRESET_GROUPS =
+{
+    "XS · ~1B": ["Llama 3.2 1B", "OPT 1.3B", "Qwen2 1.5B"],
+    "S · ~2B–3B": ["Gemma 2 2B", "OPT 2.7B", "Llama 3.2 3B", "Granite 3B"],
+    "M · ~6B–9B": ["OPT 6.7B", "Qwen2 7B", "Falcon-RW 7B", "Granite 8B", "Llama 3.1 8B", "Gemma 2 9B"]
+};
+
 window.onload = function()
 {
 
     let selector = document.getElementById("preset");
 
 
-    for(let name in PRESET_MODELS)
+    for(let group in PRESET_GROUPS)
     {
-        let option = document.createElement("option");
+        let optgroup = document.createElement("optgroup");
+
+        optgroup.label=group;
+
+        for(let name of PRESET_GROUPS[group])
+        {
+            let option = document.createElement("option");
 
-        option.text=name;
+            option.text=name;
 
-        option.value=name;
+            option.value=name;
 
-        selector.add(option);
+            optgroup.appendChild(option);
+        }
+
+        selector.appendChild(optgroup);
     }
 
     selector.value = "Falcon-RW 7B";
@@ -190,7 +206,46 @@ window.onload = function()
 
     renderThetas();
 
-    draw();
+    loadPreset();
+
+}
+
+// kind: "ok" | "loading" | "error" | "custom"
+function setStatus(kind,html)
+{
+
+    let status = document.getElementById("status");
+
+    status.className = "status "+kind;
+
+    status.innerHTML = html;
+
+}
+
+function attentionLabel(nq,nkv)
+{
+
+    if(nq===nkv) return "MHA";
+
+    if(nkv===1) return "MQA";
+
+    return `GQA (${+(nq/nkv).toFixed(1)}x)`;
+
+}
+
+// Derived quantities shown under the architecture fields
+function updateSummary(d,L,nq,nkv)
+{
+
+    // Same dense-Transformer approximation as validateModel
+    let paramsB = 12*L*d*d/1e9;
+
+    document.getElementById("archSummary").innerHTML =
+    `
+    <span class="chip">${attentionLabel(nq,nkv)}</span>
+    <span class="chip">R = ${+(nkv/nq).toFixed(3)}</span>
+    <span class="chip">≈ ${paramsB.toFixed(1)}B params (12Ld²)</span>
+    `;
 
 }
 
@@ -214,16 +269,7 @@ function loadPreset()
     document.getElementById("nkv").value=model.nkv;
 
 
-    document.getElementById("status").innerHTML =
-    `
-    ✅ Loaded validated model:
-    <b>${name}</b><br>
-    Attention: ${model.attention}<br>
-    d=${model.d},
-    L=${model.L},
-    nq=${model.nq},
-    nkv=${model.nkv}
-    `;
+    setStatus("ok", `<b>${name}</b> · validated`);
 
 
     draw();
@@ -304,6 +350,8 @@ function draw()
     let nin = Number(document.getElementById("nin").value);
 
 
+    updateSummary(d,L,nq,nkv);
+
     drawComponents(d,L,nq,nkv,nin);
 
     drawContour(d,L,nq,nkv,nin);
@@ -901,9 +949,17 @@ async function loadModel()
 async function loadRepo(repo)
 {
 
+    if(!repo)
+    {
+        setStatus("error", "Enter a repository id, e.g. tiiuae/falcon-rw-7b");
+        return;
+    }
+
     let url =
     `https://huggingface.co/${repo}/resolve/main/config.json`;
 
+    setStatus("loading", `Loading <b>${repo}</b>…`);
+
 
     try
     {
@@ -950,17 +1006,7 @@ async function loadRepo(repo)
 
 
 
-        document.getElementById("status").innerHTML =
-        `
-        ✅ Loaded <b>${repo}</b><br>
-        Estimated dense size:
-        ${paramsB.toFixed(1)}B parameters
-        <br>
-        d=${d},
-        L=${L},
-        nq=${nq},
-        nkv=${nkv}
-        `;
+        setStatus("ok", `<b>${repo}</b> · Hugging Face`);
 
 
         draw();
@@ -970,20 +1016,30 @@ async function loadRepo(repo)
     catch(e)
     {
 
-        document.getElementById("status").innerHTML =
-        "⚠️ "+e.message;
+        setStatus("error", e.message);
 
     }
 
 }
 
-// redraw when sliders change
+// redraw when the architecture fields change
 
 document
 .querySelectorAll("input[type=number]")
 .forEach(
-    x=>x.addEventListener("change",draw)
+    x=>x.addEventListener("change",()=>
+    {
+        setStatus("custom", "Custom architecture");
+        draw();
+    })
 );
 
+document
+.getElementById("repo")
+.addEventListener("keydown",e=>
+{
+    if(e.key==="Enter") loadModel();
+});
+
 
 draw();

index.html

@@ -3,6 +3,7 @@
 <html>
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>SweetSpot v2 — Energy-per-Token demo</title>
 
 <script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script>
@@ -18,43 +19,232 @@
         padding: 20px;
     }
 
-    .row {
+    :root {
+        --accent: #1a9850;
+        --accent-soft: #e8f5ec;
+        --border: #e2e2e0;
+        --muted: #6b6b68;
+        --surface: #fafaf9;
+    }
+
+    .card {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 14px;
+        padding: 20px 24px;
+        margin-top: 24px;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+    }
+
+    .cardHeader {
         display: flex;
-        gap: 20px;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
         flex-wrap: wrap;
     }
 
-    label {
-        display: block;
-        margin-top: 10px;
+    .cardHeader h3 {
+        margin: 0;
+        font-size: 17px;
     }
 
-    input[type="number"] {
-        width: 120px;
+    .status {
+        font-size: 13px;
+        padding: 4px 12px;
+        border-radius: 999px;
+        border: 1px solid transparent;
+        overflow-wrap: anywhere;
     }
 
-    button {
-        margin-top: 10px;
-        padding: 8px 15px;
+    .status:empty {
+        display: none;
+    }
+
+    .status.ok {
+        background: var(--accent-soft);
+        color: #146c3a;
+        border-color: #bfe3cb;
+    }
+
+    .status.loading,
+    .status.custom {
+        background: #f1f1ef;
+        color: var(--muted);
+        border-color: var(--border);
+    }
+
+    .status.error {
+        background: #fdecea;
+        color: #a52a1f;
+        border-color: #f5c6c0;
+    }
+
+    .field {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        min-width: 0;
+    }
+
+    .field label,
+    .sliderHeader label {
+        font-size: 13px;
+        font-weight: 600;
+        color: #333;
+    }
+
+    .hint {
+        font-weight: 400;
+        color: var(--muted);
+        margin-left: 4px;
+    }
+
+    .card select,
+    .card input[type="text"],
+    .card input[type="number"] {
+        font: inherit;
+        font-size: 14px;
+        height: 38px;
+        padding: 0 12px;
+        border: 1px solid #cfcfcc;
+        border-radius: 8px;
+        background: white;
+        width: 100%;
+        box-sizing: border-box;
+        transition: border-color 0.15s, box-shadow 0.15s;
+    }
+
+    .card select:focus,
+    .card input[type="text"]:focus,
+    .card input[type="number"]:focus {
+        outline: none;
+        border-color: var(--accent);
+        box-shadow: 0 0 0 3px rgba(26, 152, 80, 0.15);
+    }
+
+    .sources {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr);
+        gap: 16px;
+        align-items: end;
+        margin-top: 18px;
+    }
+
+    .divider {
+        color: var(--muted);
+        font-size: 13px;
+        height: 38px;
+        display: flex;
+        align-items: center;
+    }
+
+    .inputGroup {
+        display: flex;
+    }
+
+    .inputGroup input[type="text"] {
+        border-radius: 8px 0 0 8px;
+    }
+
+    .inputGroup button {
+        font: inherit;
+        font-size: 14px;
+        font-weight: 600;
+        height: 38px;
+        padding: 0 18px;
+        border: 1px solid var(--accent);
+        border-radius: 0 8px 8px 0;
+        background: var(--accent);
+        color: white;
+        cursor: pointer;
+        margin-left: -1px;
+    }
+
+    .inputGroup button:hover {
+        background: #137a40;
+    }
+
+    .sectionLabel {
+        margin: 22px 0 10px;
+        font-size: 12px;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        color: var(--muted);
+    }
+
+    .archGrid {
+        display: grid;
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+        gap: 16px;
+    }
+
+    #archSummary {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin-top: 12px;
+    }
+
+    .chip {
+        font-size: 12px;
+        padding: 3px 10px;
+        border-radius: 999px;
+        background: white;
+        border: 1px solid var(--border);
+        color: #444;
+    }
+
+    @media (max-width: 700px) {
+        .sources {
+            grid-template-columns: 1fr;
+        }
+
+        .divider {
+            height: auto;
+        }
+
+        .archGrid {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
     }
 
     /* Input-token slider */
     #ninWrapper {
         width: 100%;
-        margin-top: 25px;
+        margin-top: 22px;
+        padding-top: 18px;
+        border-top: 1px solid var(--border);
+    }
+
+    .sliderHeader {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+
+    .badge {
+        font-size: 13px;
+        font-weight: 600;
+        font-variant-numeric: tabular-nums;
+        padding: 2px 10px;
+        border-radius: 6px;
+        background: var(--accent-soft);
+        color: #146c3a;
     }
 
     #ninSlider {
         width: 100%;
         display: block;
-        margin-top: 8px;
+        margin-top: 10px;
+        accent-color: var(--accent);
     }
 
     #ninLabels {
         display: flex;
         justify-content: space-between;
         font-size: 12px;
-        color: #555;
+        color: var(--muted);
         margin-top: 3px;
     }
 
@@ -124,65 +314,66 @@ Fitted parameters:
     <tbody id="thetaBody"></tbody>
 </table>
 
-<h4>Validated models:</h4>
+<section class="card" id="controls">
 
-<select id="preset"></select>
-
-<button onclick="loadPreset()">
-    Load selected model
-</button>
+<div class="cardHeader">
+    <h3>Model</h3>
+    <span id="status" class="status"></span>
+</div>
 
-<h4>
-Or load another public Hugging Face model (dense, &lt; 20B):
-</h4>
+<div class="sources">
 
-<input
-id="repo"
-style="width:400px"
-placeholder="tiiuae/falcon-rw-7b"
+    <div class="field">
+        <label for="preset">Validated models</label>
+        <select id="preset" onchange="loadPreset()"></select>
+    </div>
 
->
+    <div class="divider"><span>or</span></div>
 
-<button onclick="loadModel()">
-    Load model
-</button>
+    <div class="field">
+        <label for="repo">Any public Hugging Face model <span class="hint">dense, &lt; 20B</span></label>
+        <div class="inputGroup">
+            <input id="repo" type="text" placeholder="tiiuae/falcon-rw-7b" spellcheck="false">
+            <button onclick="loadModel()">Load</button>
+        </div>
+    </div>
 
-<p id="status"></p>
+</div>
 
-<h4>Architecture parameters</h4>
+<h4 class="sectionLabel">Architecture</h4>
 
-<div class="row">
+<div class="archGrid">
 
-<div>
-    <label>Hidden size (d):</label>
-    <input id="d" type="number" value="4096">
-</div>
+    <div class="field">
+        <label for="d">Hidden size <i>d</i></label>
+        <input id="d" type="number" min="1" value="4096">
+    </div>
 
-<div>
-    <label>Layers (L):</label>
-    <input id="L" type="number" value="36">
-</div>
+    <div class="field">
+        <label for="L">Layers <i>L</i></label>
+        <input id="L" type="number" min="1" value="36">
+    </div>
 
-<div>
-    <label>Query heads (<i>n</i><sub>q</sub>):</label>
-    <input id="nq" type="number" value="64">
-</div>
+    <div class="field">
+        <label for="nq">Query heads <i>n</i><sub>q</sub></label>
+        <input id="nq" type="number" min="1" value="64">
+    </div>
 
-<div>
-    <label>KV heads (<i>n</i><sub>kv</sub>):</label>
-    <input id="nkv" type="number" value="64">
-</div>
+    <div class="field">
+        <label for="nkv">KV heads <i>n</i><sub>kv</sub></label>
+        <input id="nkv" type="number" min="1" value="64">
+    </div>
 
 </div>
 
-<!-- Slider is OUTSIDE the architecture-parameter row -->
+<div id="archSummary"></div>
 
 <div id="ninWrapper">
 
-<label>
-    Input Tokens (τ<sub>in</sub>):
-    <span id="ninValue">64</span>
-</label>
+<div class="sliderHeader">
+    <label for="ninSlider">Input tokens τ<sub>in</sub></label>
+    <span id="ninValue" class="badge">64</span>
+</div>
 
 <input
     id="ninSlider"
@@ -204,6 +395,8 @@ placeholder="tiiuae/falcon-rw-7b"
 
 </div>
 
+</section>
+
 <div id="plots">
 
 <div id="plotPanel">