Upload spike-qwen2b.html with huggingface_hub

spike-qwen2b.html

@@ -26,8 +26,10 @@ import * as webllm from "https://esm.run/@mlc-ai/web-llm";
 const $ = (id) => document.getElementById(id);
 const log = (m) => { $("log").textContent += m + "\n"; $("log").scrollTop = 1e9; };
 const esc = (s) => String(s).replace(/[&<>]/g, (c) => ({ "&":"&amp;","<":"&lt;",">":"&gt;" }[c]));
-// Official web-llm prebuilt — web-llm resolves weights + wasm from its own config.
-const MODEL_ID = "Qwen3.5-2B-q4f16_1-MLC";
+// Official web-llm prebuilts (web-llm resolves weights+wasm from its own config).
+// ?model=2b|4b selects the tier — 4B is the reasoner half of the 0.8B/4B pairing.
+const MODELS = { "2b": "Qwen3.5-2B-q4f16_1-MLC", "4b": "Qwen3.5-4B-q4f16_1-MLC" };
+const MODEL_ID = MODELS[new URLSearchParams(location.search).get("model")] || MODELS["2b"];
 
 // Qwen3.5 native tool-call format (XML). Parse both the native <function=…> and
 // the Hermes <tool_call>{json}</tool_call> shapes, since which one the q4 build
@@ -106,13 +108,13 @@ async function main() {
   if (!adapter) { try { adapter = await gpu.requestAdapter({ forceFallbackAdapter: true }); if (adapter) info = "FALLBACK/software [tok/s NOT representative]"; } catch {} }
   if (!adapter) { $("env").innerHTML = '<span class="bad">✗ no WebGPU adapter</span> — needs real GPU hardware.'; return; }
   $("env").innerHTML = `<span class="ok">✓ WebGPU adapter OK</span> ${info ? "— " + info : ""} · <b>${THINK ? "THINK-ON" : "think-off"}</b> · temp ${SAMP.temperature} top_p ${SAMP.top_p} pp ${SAMP.presence_penalty}`;
-  document.getElementById("sub").innerHTML += ` · <b>${THINK ? "THINK-ON (?think=1)" : "think-off — add ?think=1 for think-on"}</b>`;
+  document.getElementById("sub").innerHTML += ` · <b>${MODEL_ID}</b> · <b>${THINK ? "THINK-ON (?think=1)" : "think-off — add ?think=1 for think-on"}</b>`;
   $("run").disabled = false;
 
   $("run").onclick = async () => {
     $("run").disabled = true; $("tests").innerHTML = ""; $("metrics").innerHTML = ""; $("log").textContent = "";
     const t0 = performance.now();
-    log(`loading ${MODEL_ID} (first run downloads ~1.3GB to browser cache)…`);
+    log(`loading ${MODEL_ID} (first run downloads to browser cache: ~1.3GB for 2B, ~2.5GB for 4B)…`);
     let engine;
     try {
       engine = await webllm.CreateMLCEngine(MODEL_ID, { initProgressCallback: (p) => { $("env").innerHTML = `<span class="warn">loading… ${(p.progress*100|0)}%</span> ${esc(p.text||"")}`; } });