GPU spam guard (serialize + button lock), live progress tickers, describe-first layout, real-machine bindings, chart fix for custom VRAM

app.py

@@ -75,7 +75,7 @@ def api_lookup(payload: LookupIn):
     return lookup(p.get("repo", ""), p, spec_from_payload(p))
 
 
-@app.api(name="parse")
+@app.api(name="parse", concurrency_limit=1)
 def api_parse(text: str = "") -> dict:
     """Messy machine description -> form fields, via the fine-tuned spec
     parser (cn0303/fitcheck-spec-parser). ZeroGPU via the Gradio queue."""
@@ -83,7 +83,7 @@ def api_parse(text: str = "") -> dict:
     return parse_specs(text)
 
 
-@app.api(name="ask")
+@app.api(name="ask", concurrency_limit=1)
 def api_ask(question: str, facts: str = "") -> dict:
     """Plain-English follow-up, grounded in the facts /api/advise returned.
 

engine/speed.py

@@ -96,12 +96,14 @@ def bandwidth_for_spec(spec, gpu_label: str = "") -> tuple[float | None, str]:
         return _apple_bw(gpu_label or spec.gpu_label), "Apple unified memory (conservative M2-gen figure)"
     if spec.gpu_vendor in ("nvidia", "amd", "intel") and spec.vram_gb > 0:
         n = _norm(gpu_label or spec.gpu_label)
-        for key, bw, vram in _bw_index():
-            if key and key in n:
-                # disambiguate VRAM variants (e.g. 5060 Ti 8 vs 16 GB)
-                if vram and spec.vram_gb and abs(vram - spec.vram_gb) > 4:
-                    continue
-                return bw, "vendor spec sheet"
+        # pass 1: name + VRAM proximity (disambiguates 8 vs 16 GB variants);
+        # pass 2: name only — a custom VRAM override must not hide the chart.
+        for check_vram in (True, False):
+            for key, bw, vram in _bw_index():
+                if key and key in n:
+                    if check_vram and vram and spec.vram_gb and abs(vram - spec.vram_gb) > 4:
+                        continue
+                    return bw, "vendor spec sheet"
         return None, ""
     return None, ""
 

static/app.js

@@ -167,11 +167,27 @@ function fillGpu() {
   if (!list.length) { sel.style.display = "none"; sel.innerHTML = ""; }
   else { sel.style.display = "block"; sel.innerHTML = list.map(g => `<option>${g}</option>`).join(""); }
 }
+// Real machines only: a Windows laptop can't have Apple Silicon, a Pi can't
+// take a desktop card. Impossible provider buttons get disabled per computer.
+const PROVIDER_ALLOWED = {
+  "Windows laptop": ["none", "nvidia", "amd", "intel", "unsure"],
+  "Windows desktop": ["none", "nvidia", "amd", "intel", "unsure"],
+  "Linux PC": ["none", "nvidia", "amd", "intel", "unsure"],
+  "Mac": ["apple"],
+  "Mini PC / Raspberry Pi": ["none", "nvidia", "unsure"],   // nvidia = Jetson boards
+};
+
 function syncProviderForComputer() {
-  const isMac = state.computer === "Mac";
-  const isPi = state.computer.includes("Mini PC");
-  if (isMac) { state.provider = "apple"; setActive("#provider-seg", "apple"); }
-  else if (isPi) { state.provider = "none"; setActive("#provider-seg", "none"); }
+  const allowed = PROVIDER_ALLOWED[state.computer] || ["none", "nvidia", "amd", "intel", "apple", "unsure"];
+  $("#provider-seg").querySelectorAll(".seg-btn").forEach(b => {
+    const ok = allowed.includes(b.dataset.val);
+    b.classList.toggle("disabled", !ok);
+    b.disabled = !ok;
+  });
+  if (!allowed.includes(state.provider)) {
+    state.provider = allowed[0];
+    setActive("#provider-seg", state.provider);
+  }
   fillGpu();
 }
 
@@ -569,20 +585,42 @@ async function drawRoofline(speed) {
   host.innerHTML = s;
 }
 
+// ---- Live progress ticker (gradio-style elapsed seconds) -------------------
+function startTicker(el, base) {
+  const t0 = Date.now();
+  el.dataset.ticking = "1";
+  const tick = () => {
+    if (el.dataset.ticking !== "1") return;
+    const s = Math.round((Date.now() - t0) / 1000);
+    el.innerHTML = `<span class="spinner"></span> ${base} — ${s}s` +
+      (s > 8 ? " <span class='tick-note'>(cold start: the model is waking, up to ~1 min)</span>" : "");
+    setTimeout(tick, 500);
+  };
+  tick();
+  return () => { el.dataset.ticking = "0"; };
+}
+
 // ---- Paste box: the fine-tuned spec parser fills the form -----------------
 async function parsePaste() {
   const text = $("#paste").value.trim();
   const hint = $("#parse-hint");
-  if (!text) { hint.textContent = "Paste or type something first."; return; }
-  hint.textContent = "Reading it… (first use after a quiet spell wakes the model, up to a minute)";
+  const btn = $("#parse-btn");
+  if (!text) { hint.textContent = "Type or paste something first."; return; }
+  if (btn.disabled) return;          // one in-flight call, ever — GPU time is real money
+  btn.disabled = true;
+  const stop = startTicker(hint, "Reading your description");
   try {
     const client = await getClient();
     const r = await client.predict("/parse", { text });
     const d = Array.isArray(r.data) ? r.data[0] : r.data;
-    if (d.error) { hint.textContent = d.error; return; }
+    stop();
+    if (d.error) { hint.textContent = `Failed: ${d.error}`; return; }
     applyParsed(d, hint);
   } catch (e) {
-    hint.textContent = `Parser unavailable: ${e && e.message ? e.message : e}`;
+    stop();
+    hint.textContent = `Failed: ${e && e.message ? e.message : e}`;
+  } finally {
+    btn.disabled = false;
   }
 }
 
@@ -635,19 +673,25 @@ function wireAsk() {
     c.addEventListener("click", () => { input.value = c.textContent; askQuestion(c.textContent); }));
 }
 
+let askBusy = false;
 async function askQuestion(question) {
   question = (question || "").trim();
   const box = $("#ask-answer");
-  if (!question || !box) return;
+  if (!question || !box || askBusy) return;
+  askBusy = true;
   box.hidden = false;
-  box.innerHTML = `<div class="ans-loading"><span class="spinner"></span>Thinking it through…
-    <span class="ans-cold">first question after a quiet spell wakes the model (up to a minute); after that it's a few seconds</span></div>`;
+  box.innerHTML = `<div class="ans-loading" id="ask-tick"></div>`;
+  const stop = startTicker($("#ask-tick"), "Thinking it through");
   try {
     const a = await callAsk(question, JSON.stringify(lastAdvice || {}));
+    stop();
     renderAnswer(box, a);
   } catch (e) {
+    stop();
     // Surface the real error, never a generic stand-in.
     box.innerHTML = `<div class="ans-card ans-error"><h3>The explainer hit an error</h3><p>${e && e.message ? e.message : e}</p></div>`;
+  } finally {
+    askBusy = false;
   }
 }
 
@@ -714,7 +758,7 @@ function init() {
   $("#paste").addEventListener("input", maybeLiveUpdate);
   $("#check-btn").addEventListener("click", check);
   const pb = $("#parse-btn"); if (pb) pb.addEventListener("click", parsePaste);
-  fillGpu();
+  syncProviderForComputer();
   $("#find-specs-body").innerHTML = findSpecsText();
   detectHardware();
   // Pre-filled share/preview links: ?go renders immediately; optional

static/index.html

@@ -45,6 +45,13 @@
           <div class="step-head"><span class="step-num">1</span><h2>Your computer</h2></div>
           <div class="hint" id="detect-hint" style="display:none; margin-bottom:var(--s-3)"></div>
 
+          <div class="field">
+            <span class="label">Describe it in your own words <span class="optional">(fastest)</span></span>
+            <textarea id="paste" placeholder="'Dell XPS, RTX 3050, 16GB' — or paste your dxdiag / Task Manager output…"></textarea>
+            <button class="parse-btn" id="parse-btn">Fill the form from this</button>
+            <div class="hint" id="parse-hint">A small model fine-tuned for this reads your text and fills the pickers below. It never guesses: anything you didn't say stays blank.</div>
+          </div>
+
           <div class="field">
             <span class="label">What kind of computer?</span>
             <div class="segmented" id="computer-seg">
@@ -87,12 +94,6 @@
                 <input type="number" id="vram" placeholder="e.g. 8" min="0" max="200" step="1" />
                 <div class="hint">Overrides the GPU picker above. Leave blank to use the picker.</div>
               </div>
-              <div class="field" style="margin-bottom:0">
-                <span class="label">Or paste / describe your specs</span>
-                <textarea id="paste" placeholder="Paste output from 'dxdiag' or 'Task Manager → Performance', or just describe it: 'Dell XPS, RTX 3050, 16GB'…"></textarea>
-                <button class="parse-btn" id="parse-btn">Fill the form from this</button>
-                <div class="hint" id="parse-hint">A small model fine-tuned for this reads your text and fills the form. It never guesses: anything you didn't say stays blank.</div>
-              </div>
             </div>
           </details>
         </div>

static/style.css

@@ -137,6 +137,10 @@ button { font-family: inherit; cursor: pointer; }
   box-shadow: var(--shadow-md);
 }
 .form-panel { padding: var(--s-5); position: sticky; top: var(--s-4); }
+@media (min-width: 901px) {
+  /* tall forms (long descriptions, many pickers) scroll inside the panel */
+  .form-panel { max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin; }
+}
 @media (max-width: 900px) { .form-panel { position: static; } }
 
 .step { margin-bottom: var(--s-5); }
@@ -167,9 +171,23 @@ button { font-family: inherit; cursor: pointer; }
   color: var(--text-primary); box-shadow: var(--shadow-sm);
 }
 .seg-btn .ic { font-size: 17px; color: var(--text-muted); }
-.seg-btn.active .ic { color: var(--accent); }
+.seg-btn.active .ic { color: var(--segc, var(--accent)); }
 .seg-btn .ic.brand { color: var(--text-secondary); }
-.seg-btn.active .ic.brand { color: var(--text-primary); }
+.seg-btn.active .ic.brand { color: var(--segc, var(--text-primary)); }
+.seg-btn.disabled { opacity: .3; pointer-events: none; }
+
+/* Each position gets its own accent when selected — coloured boundaries,
+   line icons stay line icons. */
+.segmented .seg-btn:nth-child(1) { --segc: #60A5FA; }
+.segmented .seg-btn:nth-child(2) { --segc: #4ADE80; }
+.segmented .seg-btn:nth-child(3) { --segc: #F472B6; }
+.segmented .seg-btn:nth-child(4) { --segc: #FBBF24; }
+.segmented .seg-btn:nth-child(5) { --segc: #2DD4BF; }
+.segmented .seg-btn:nth-child(6) { --segc: #C084FC; }
+.seg-btn.active {
+  border-color: var(--segc, var(--accent)) !important;
+  background: color-mix(in srgb, var(--segc, var(--accent)) 13%, transparent);
+}
 
 /* Native select / input styling */
 select, input[type="text"], input[type="number"], textarea {
@@ -501,6 +519,8 @@ details.disc > summary:hover { color: var(--text-primary); }
 .ans-card.ans-error p { color: var(--text-secondary); font-size: 13.5px; word-break: break-word; }
 .ans-loading { display: flex; align-items: center; gap: var(--s-2); color: var(--text-muted); font-size: 14px; padding: var(--s-2) 0; flex-wrap: wrap; }
 .ans-cold { font-size: 12px; color: var(--text-muted); opacity: .75; }
+.tick-note { font-size: 12px; color: var(--text-muted); opacity: .8; }
+#parse-hint .spinner, .ans-loading .spinner { display: inline-block; vertical-align: -2px; margin-right: 6px; }
 .spinner {
   width: 15px; height: 15px; flex: none; border-radius: 50%;
   border: 2px solid var(--border-hi); border-top-color: var(--accent);