Load the decision fine-tune (ONNX served from the Space), trained prompt format and scale, Egg check tab

.gitattributes

@@ -40,3 +40,5 @@ examples/coco-relation.jpg filter=lfs diff=lfs merge=lfs -text
 examples/rico-sca.jpg filter=lfs diff=lfs merge=lfs -text
 examples/textvqa-mc.jpg filter=lfs diff=lfs merge=lfs -text
 examples/vqav2-yesno.jpg filter=lfs diff=lfs merge=lfs -text
+models/egemma2-decide/onnx/audio_encoder_q4.onnx_data filter=lfs diff=lfs merge=lfs -text
+models/egemma2-decide/onnx/audio_encoder_q4f16.onnx_data filter=lfs diff=lfs merge=lfs -text

CREDITS.md

@@ -1,22 +1,26 @@
-# Credits for example images
-
-- `examples/coco-count.jpg`: COCO instances_train2017 (CC BY 4.0 (COCO annotations); image per-image Flickr license) http://farm1.staticflickr.com/36/87658925_8500121897_z.jpg
-- `examples/vqav2-yesno.jpg`: VQAv2 (visualqa.org) (CC BY 4.0 (annotations, VQA Consortium); image per-image Flickr license) http://farm1.staticflickr.com/36/87658925_8500121897_z.jpg
-- `examples/coco-relation.jpg`: COCO instances_train2017 (CC BY 4.0 (COCO annotations); image per-image Flickr license) http://farm1.staticflickr.com/64/173587843_a38f86076d_z.jpg
-- `examples/clevr-depth.jpg`: CLEVR v1.0 (via allenai/Molmo2-ER-CLEVR CLEVR_v1.0.zip) (CC BY 4.0)
-- `examples/clevr-count.jpg`: CLEVR v1.0 (via allenai/Molmo2-ER-CLEVR CLEVR_v1.0.zip) (CC BY 4.0)
-- `examples/synth-chart-reason.png`: synthetic chart generated in-house (Apache-2.0, no third-party data)
-- `examples/cord-kie.jpg`: naver-clova-ix/cord-v2 (CC BY 4.0)
-- `examples/rico-sca.jpg`: RICO-SCA (seq2act) re-host bevaya/RICO-SCA (Apache-2.0 (dataset card); RICO screenshots CC BY 4.0)
-- `examples/rico-screenqa.jpg`: ScreenQA (google-research-datasets/screen_qa) on RICO, re-host bevaya/RICO-ScreenQA (CC BY 4.0 (ScreenQA annotations; RICO screenshots CC BY 4.0))
-- `examples/textvqa-mc.jpg`: TextVQA 0.5.1 (parquet re-host lmms-lab/textvqa) (CC BY 4.0 (TextVQA annotations, per facebook/textvqa card); images Open Images (listed CC BY 2.0))
-- `examples/aokvqa-mc.jpg`: allenai/aokvqa (Apache-2.0 (annotations); image per-image Flickr license) http://farm9.staticflickr.com/8063/8230694437_9da6316b25_z.jpg
-- `examples/coco-capmatch.jpg`: COCO captions_train2017 (CC BY 4.0 (COCO annotations); image per-image Flickr license) http://farm9.staticflickr.com/8532/8562810747_4a9b068aaa_z.jpg
-- `examples/vsr-spatial.jpg`: cambridgeltl/vsr_random (CC BY 4.0 (dataset card; code Apache-2.0); image per-image Flickr license) http://farm1.staticflickr.com/114/312142651_5b20f24075_z.jpg
-- `examples/clevr-attr.jpg`: CLEVR v1.0 (via allenai/Molmo2-ER-CLEVR CLEVR_v1.0.zip) (CC BY 4.0)
-- `examples/egg-candling-good-1.jpg`: Good and Bad Eggs Identification Image Dataset, Md Mafiul Hasan Matin, Marium Jahan, Md. Saroar Jahan, Mendeley Data, doi:10.17632/mdty358x8m.1 (CC BY 4.0), resized
-- `examples/egg-candling-good-10.jpg`: Good and Bad Eggs Identification Image Dataset, Md Mafiul Hasan Matin, Marium Jahan, Md. Saroar Jahan, Mendeley Data, doi:10.17632/mdty358x8m.1 (CC BY 4.0), resized
-- `examples/egg-candling-bad-1.jpg`: Good and Bad Eggs Identification Image Dataset, Md Mafiul Hasan Matin, Marium Jahan, Md. Saroar Jahan, Mendeley Data, doi:10.17632/mdty358x8m.1 (CC BY 4.0), resized
-- `examples/egg-candling-bad-104.jpg`: Good and Bad Eggs Identification Image Dataset, Md Mafiul Hasan Matin, Marium Jahan, Md. Saroar Jahan, Mendeley Data, doi:10.17632/mdty358x8m.1 (CC BY 4.0), resized
-
-COCO and VQA images keep their per-image Flickr licenses (CC BY 2.0, CC BY-SA 2.0 or no known copyright restrictions only).
+# Credits for example images
+
+- `examples/coco-count.jpg`: COCO instances_train2017 (CC BY 4.0 (COCO annotations); image per-image Flickr license) http://farm1.staticflickr.com/36/87658925_8500121897_z.jpg
+- `examples/vqav2-yesno.jpg`: VQAv2 (visualqa.org) (CC BY 4.0 (annotations, VQA Consortium); image per-image Flickr license) http://farm1.staticflickr.com/36/87658925_8500121897_z.jpg
+- `examples/coco-relation.jpg`: COCO instances_train2017 (CC BY 4.0 (COCO annotations); image per-image Flickr license) http://farm1.staticflickr.com/64/173587843_a38f86076d_z.jpg
+- `examples/clevr-depth.jpg`: CLEVR v1.0 (via allenai/Molmo2-ER-CLEVR CLEVR_v1.0.zip) (CC BY 4.0)
+- `examples/clevr-count.jpg`: CLEVR v1.0 (via allenai/Molmo2-ER-CLEVR CLEVR_v1.0.zip) (CC BY 4.0)
+- `examples/synth-chart-reason.png`: synthetic chart generated in-house (Apache-2.0, no third-party data)
+- `examples/cord-kie.jpg`: naver-clova-ix/cord-v2 (CC BY 4.0)
+- `examples/rico-sca.jpg`: RICO-SCA (seq2act) re-host bevaya/RICO-SCA (Apache-2.0 (dataset card); RICO screenshots CC BY 4.0)
+- `examples/rico-screenqa.jpg`: ScreenQA (google-research-datasets/screen_qa) on RICO, re-host bevaya/RICO-ScreenQA (CC BY 4.0 (ScreenQA annotations; RICO screenshots CC BY 4.0))
+- `examples/textvqa-mc.jpg`: TextVQA 0.5.1 (parquet re-host lmms-lab/textvqa) (CC BY 4.0 (TextVQA annotations, per facebook/textvqa card); images Open Images (listed CC BY 2.0))
+- `examples/aokvqa-mc.jpg`: allenai/aokvqa (Apache-2.0 (annotations); image per-image Flickr license) http://farm9.staticflickr.com/8063/8230694437_9da6316b25_z.jpg
+- `examples/coco-capmatch.jpg`: COCO captions_train2017 (CC BY 4.0 (COCO annotations); image per-image Flickr license) http://farm9.staticflickr.com/8532/8562810747_4a9b068aaa_z.jpg
+- `examples/vsr-spatial.jpg`: cambridgeltl/vsr_random (CC BY 4.0 (dataset card; code Apache-2.0); image per-image Flickr license) http://farm1.staticflickr.com/114/312142651_5b20f24075_z.jpg
+- `examples/clevr-attr.jpg`: CLEVR v1.0 (via allenai/Molmo2-ER-CLEVR CLEVR_v1.0.zip) (CC BY 4.0)
+- `examples/egg-test/egg-test-good-81.jpg`: Good and Bad Eggs Identification Image Dataset, Md Mafiul Hasan Matin, Marium Jahan, Md. Saroar Jahan, Mendeley Data, doi:10.17632/mdty358x8m.1 (CC BY 4.0), file Good_Egg (81).jpg, 512 x 512 copy. Held out from training (test split).
+- `examples/egg-test/egg-test-good-125.jpg`: Good and Bad Eggs Identification Image Dataset, Md Mafiul Hasan Matin, Marium Jahan, Md. Saroar Jahan, Mendeley Data, doi:10.17632/mdty358x8m.1 (CC BY 4.0), file Good_Egg (125).jpg, 512 x 512 copy. Held out from training (test split).
+- `examples/egg-test/egg-test-good-409.jpg`: Good and Bad Eggs Identification Image Dataset, Md Mafiul Hasan Matin, Marium Jahan, Md. Saroar Jahan, Mendeley Data, doi:10.17632/mdty358x8m.1 (CC BY 4.0), file Good_Egg (409).jpg, 512 x 512 copy. Held out from training (test split).
+- `examples/egg-test/egg-test-good-235.jpg`: Good and Bad Eggs Identification Image Dataset, Md Mafiul Hasan Matin, Marium Jahan, Md. Saroar Jahan, Mendeley Data, doi:10.17632/mdty358x8m.1 (CC BY 4.0), file Good_Egg (235).jpg, 512 x 512 copy. Held out from training (test split).
+- `examples/egg-test/egg-test-bad-78.jpg`: Good and Bad Eggs Identification Image Dataset, Md Mafiul Hasan Matin, Marium Jahan, Md. Saroar Jahan, Mendeley Data, doi:10.17632/mdty358x8m.1 (CC BY 4.0), file Bad_Egg (78).jpg, 512 x 512 copy. Held out from training (test split).
+- `examples/egg-test/egg-test-bad-107.jpg`: Good and Bad Eggs Identification Image Dataset, Md Mafiul Hasan Matin, Marium Jahan, Md. Saroar Jahan, Mendeley Data, doi:10.17632/mdty358x8m.1 (CC BY 4.0), file Bad_Egg (107).jpg, 512 x 512 copy. Held out from training (test split).
+- `examples/egg-test/egg-test-bad-295.jpg`: Good and Bad Eggs Identification Image Dataset, Md Mafiul Hasan Matin, Marium Jahan, Md. Saroar Jahan, Mendeley Data, doi:10.17632/mdty358x8m.1 (CC BY 4.0), file Bad_Egg (295).jpg, 512 x 512 copy. Held out from training (test split).
+- `examples/egg-test/egg-test-bad-397.jpg`: Good and Bad Eggs Identification Image Dataset, Md Mafiul Hasan Matin, Marium Jahan, Md. Saroar Jahan, Mendeley Data, doi:10.17632/mdty358x8m.1 (CC BY 4.0), file Bad_Egg (397).jpg, 512 x 512 copy. Held out from training (test split).
+
+COCO and VQA images keep their per-image Flickr licenses (CC BY 2.0, CC BY-SA 2.0 or no known copyright restrictions only).

README.md

@@ -1,59 +1,65 @@
----
-title: Decide Live
-emoji: 🎯
-colorFrom: green
-colorTo: gray
-sdk: static
-pinned: false
-license: apache-2.0
-short_description: On-device decisions from camera and microphone
-models:
-  - google/embeddinggemma-2
-  - onnx-community/embeddinggemma-2-ONNX
----
-
-# Decide Live: on-device decisions from camera and microphone
-
-A static page that makes zero-token decisions in the browser. A multimodal embedding model,
-[EmbeddingGemma 2](https://huggingface.co/google/embeddinggemma-2) (ONNX build
-[onnx-community/embeddinggemma-2-ONNX](https://huggingface.co/onnx-community/embeddinggemma-2-ONNX)),
-runs locally with [transformers.js](https://github.com/huggingface/transformers.js) 4.3.1 on WebGPU,
-or on the CPU (WASM) when WebGPU is not available (slower, and it uses the larger fp16 files).
-
-There is no server and no API call per decision. The model weights are downloaded once from the
-Hugging Face Hub and cached by the browser. Camera frames, microphone audio, images and text are
-processed on the device and are never uploaded.
-
-## What it does
-
-- **Live**: embeds camera frames (or a demo feed made from the sample images) a few times per
-  second, and scores up to 4 decision cards from the same frame embedding. Each card shows animated
-  probability bars, the current decision, and a confidence gate: below the threshold the frame is
-  counted as "would escalate to a larger model". Nothing is sent anywhere; the page only counts.
-- **Microphone / sound file**: the same cards for 2 second sound windows (16 kHz mono). Windows
-  quieter than -55 dBFS are not sent to the model (the embedding of silence is not meaningful).
-- **Single input**: one image, text, audio clip or short video, a question, and 2 to 8 options
-  written as `key: description` (or a yes / no statement).
-- **Sample tests**: 18 image tests with gold answers, run in the browser with an accuracy report,
-  plus a comparison of prompt formats.
-
-## How a decision is computed
-
-1. The input is embedded into one 768-dimensional, L2-normalized vector.
-2. Each option description is embedded once and cached.
-3. Cosine similarity / temperature (default 0.05), then softmax: one probability per option.
-
-Prompts follow the model card's task prefixes. Single input and sample tests use
-`task: classification | query: {context} {question} <image>` for the input and
-`title: none | text: {option}` for each option by default (other formats are selectable).
-Live cards embed the media alone and each option as `task: search result | query: {option}`.
-
-## Files
-
-- `index.html`, `style.css`, `app.js`: the page.
-- `worker.js`: loads the model in a Web Worker and returns embeddings.
-- `examples/`: sample images and `samples.json` (name, files, state, type, question, options, gold).
-- `CREDITS.md`: sources and licenses of the sample images.
-
-Code: Apache-2.0. Model: see the
-[EmbeddingGemma 2 model card](https://huggingface.co/google/embeddinggemma-2) for its license and terms.
+---
+title: Decide Live
+emoji: 🎯
+colorFrom: green
+colorTo: gray
+sdk: static
+pinned: false
+license: apache-2.0
+short_description: On-device decisions from camera and microphone
+models:
+  - google/embeddinggemma-2
+  - FINAL-Bench/EmbeddingGemma2-ZTC-ONNX
+---
+
+# Decide Live: on-device decisions from camera and microphone
+
+A static page that makes zero-token decisions in the browser. A multimodal embedding model,
+[EmbeddingGemma 2](https://huggingface.co/google/embeddinggemma-2) (Apache-2.0) fine-tuned for decisions,
+runs locally with [transformers.js](https://github.com/huggingface/transformers.js) 4.3.1 on WebGPU,
+or on the CPU (WASM) when WebGPU is not available (slower, and it uses the larger fp16 files).
+
+The ONNX files (from the private model repo `FINAL-Bench/EmbeddingGemma2-ZTC-ONNX`, same file layout as
+[onnx-community/embeddinggemma-2-ONNX](https://huggingface.co/onnx-community/embeddinggemma-2-ONNX)) are served
+from this Space under `models/egemma2-decide/`, so the page needs no access to any other repository.
+There is no server and no API call per decision. The weights are downloaded once and cached by the browser.
+Camera frames, microphone audio, images and text are processed on the device and are never uploaded.
+
+## What it does
+
+- **Live**: embeds camera frames (or a demo feed made from the sample images) and scores up to 4 decision
+  cards. By default each card embeds the frame together with its own question, in the trained format
+  (one pass per card). The "frame alone" setting embeds the frame once for all cards (faster, not the
+  trained format). Each card shows probability bars, the current decision, and a confidence gate.
+- **Microphone / sound file**: the same cards for 2 second sound windows (16 kHz mono). Windows
+  quieter than -55 dBFS are not sent to the model. The audio encoder is the unchanged base one.
+- **Single input**: one image, text, audio clip or short video, a question, an optional context,
+  and 2 to 8 options written as `key: description` (or a yes / no question).
+- **Egg check**: 8 held-out candling photos (not used in training) and your own photo, decided with
+  the trained egg prompt.
+- **Sample tests**: 18 image tests with gold answers, run in the browser with an accuracy report,
+  plus a comparison of prompt formats.
+
+## How a decision is computed (trained format)
+
+1. Query: the media placeholders first, then `task: classification | query: {question}`, then
+   `\nContext: {context}` when a context is given. The model embeds media and text together.
+2. Each option: `title: none | text: {description}`, embedded once and cached.
+3. Embedding: mean pooling over the attention mask, then L2 normalization (768 numbers).
+4. P(option) = softmax(scale * cosine). The scale was learned in training: 19.96
+   (temperature 1 / scale, about 0.0501), stored in `models/egemma2-decide/decision.json`.
+
+Yes / no questions keep the question in the query and score the options `Yes` and `No`.
+The older prompt formats of the first version of this page remain selectable for comparison.
+
+## Files
+
+- `index.html`, `style.css`, `app.js`: the page.
+- `worker.js`: loads the model in a Web Worker and returns embeddings.
+- `models/egemma2-decide/`: ONNX model (q4, q4f16 and fp16 text and vision graphs, 4-bit audio graphs),
+  config, processor and tokenizer files, and `decision.json` (scale and prompt formats).
+- `examples/`: sample images and `samples.json` (name, files, state, type, question, options, gold);
+  `examples/egg-test/`: held-out egg candling photos.
+- `CREDITS.md`: sources and licenses of the sample images.
+
+Code: Apache-2.0. Model: derived from google/embeddinggemma-2 (Apache-2.0).

app.js

@@ -1,844 +1,977 @@
-// SPDX-License-Identifier: Apache-2.0
-// Decide Live: zero-token decisions with a multimodal embedding model running in the browser.
-const $ = (id) => document.getElementById(id);
-const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
-const esc = (s) => String(s).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
-const params = new URLSearchParams(location.search);
-
-/* ------------------------------------------------------------------ worker */
-const worker = new Worker(new URL("./worker.js?v=4", import.meta.url), { type: "module" });
-let reqId = 0;
-const pending = new Map();
-worker.onmessage = ({ data }) => {
-  if (data.type === "state") return onState(data);
-  const p = pending.get(data.id);
-  if (!p) return;
-  pending.delete(data.id);
-  if (data.type === "result") p.resolve(data.result);
-  else p.reject(new Error(data.message));
-};
-worker.onerror = (e) => setStatus("error", `Worker error: ${e.message || e}`);
-function rpc(op, payload = {}, transfer = []) {
-  const id = ++reqId;
-  return new Promise((resolve, reject) => {
-    pending.set(id, { resolve, reject });
-    worker.postMessage({ id, op, ...payload }, transfer);
-  });
-}
-
-/* ------------------------------------------------------------------ model */
-let model = null; // {device, dtype, audio, loadMs}
-let loadPromise = null;
-if (params.get("device")) $("device").value = params.get("device");
-if (params.get("dtype")) $("dtype").value = params.get("dtype");
-
-function setStatus(phase, text) {
-  $("status").className = `status ${phase}`;
-  $("statusText").textContent = text;
-}
-function onState(s) {
-  setStatus(s.phase, s.label + (s.totalBytes ? ` (${(s.loadedBytes / 1e6).toFixed(0)} / ${(s.totalBytes / 1e6).toFixed(0)} MB)` : ""));
-  if (s.phase === "loading" && typeof s.progress === "number") {
-    $("progressWrap").hidden = false;
-    $("progressBar").style.width = `${Math.max(2, Math.min(100, s.progress))}%`;
-  }
-  if (s.phase === "ready" || s.phase === "error") $("progressWrap").hidden = true;
-}
-async function ensureModel(audio = false) {
-  const want = { device: $("device").value, dtype: $("dtype").value, audio: audio || !!model?.audio };
-  if (model && model.requested === want.dtype && (want.device === "auto" || want.device === model.device) && (!audio || model.audio)) return model;
-  if (loadPromise) {
-    await loadPromise.catch(() => {});
-    return ensureModel(audio);
-  }
-  loadPromise = rpc("load", { options: want })
-    .then((info) => {
-      if (model && model.dtype !== info.dtype) textCache.clear();
-      model = info;
-      $("backend").textContent = info.device === "webgpu" ? "WebGPU" : "WASM (CPU)";
-      $("wasmNote").hidden = info.device !== "wasm";
-      return info;
-    })
-    .catch((e) => { setStatus("error", `Could not load the model: ${e.message}`); throw e; })
-    .finally(() => (loadPromise = null));
-  return loadPromise;
-}
-
-/* ------------------------------------------------------------------ embeddings and scoring */
-const textCache = new Map();
-async function embedTexts(texts) {
-  const missing = [...new Set(texts.filter((t) => !textCache.has(t)))];
-  let ms = 0;
-  if (missing.length) {
-    const r = await rpc("embedTexts", { texts: missing });
-    r.embeddings.forEach((e, i) => textCache.set(missing[i], e));
-    ms = r.ms;
-  }
-  return { embeddings: texts.map((t) => textCache.get(t)), ms, fresh: missing.length };
-}
-const dot = (a, b) => { let s = 0; for (let i = 0; i < a.length; i++) s += a[i] * b[i]; return s; };
-function softmax(xs, T) {
-  const z = xs.map((x) => x / T);
-  const m = Math.max(...z);
-  const e = z.map((x) => Math.exp(x - m));
-  const s = e.reduce((a, b) => a + b, 0);
-  return e.map((x) => x / s);
-}
-const argmax = (xs) => xs.reduce((bi, x, i) => (x > xs[bi] ? i : bi), 0);
-const temperature = () => parseFloat($("temp").value);
-// Image tokens for single inputs and sample tests: model default 280 on WebGPU, 70 on the much slower CPU path.
-const imageBudget = () => ($("budgetSingle").value === "auto" ? (model?.device === "wasm" ? 70 : 280) : +$("budgetSingle").value);
-
-/* ------------------------------------------------------------------ prompts */
-const DOC = (d) => `title: none | text: ${d}`;
-const PRESETS = {
-  cls: { label: "Classification query (input + question) and document options (default)", interleave: true, q: "task: classification | query: ", opt: DOC },
-  qa: { label: "Question answering query (input + question) and document options", interleave: true, q: "task: question answering | query: ", opt: DOC },
-  sym: { label: "Classification prefix on both sides (symmetric)", interleave: true, q: "task: classification | query: ", opt: (d) => `task: classification | query: ${d}` },
-  xsearch: { label: "Media alone; question + option as a search query", interleave: false, q: "task: classification | query: ", opt: (d) => `task: search result | query: ${d}` },
-  xdoc: { label: "Media alone; question + option as a document", interleave: false, q: "task: classification | query: ", opt: DOC },
-};
-// Live cards: the frame is embedded once with no text (media takes no prefix), options are self-describing.
-const LIVE_OPT = (d) => `task: search result | query: ${d}`;
-for (const [k, p] of Object.entries(PRESETS)) $("preset").insertAdjacentHTML("beforeend", `<option value="${k}">${esc(p.label)}</option>`);
-$("promptDoc").innerHTML =
-  `<p>Single input and sample tests (selectable):</p><ul>` +
-  Object.values(PRESETS)
-    .map((p) => `<li>${esc(p.label)}: input <code>${p.interleave ? esc(p.q) + "{context} {question} &lt;media&gt;" : "&lt;media&gt; (no text)"}</code>, option <code>${esc(p.opt(p.interleave ? "{description}" : "{question} {description}"))}</code></li>`)
-    .join("") +
-  `</ul><p>Live cards: the frame or sound window is embedded alone; each option is <code>${esc(LIVE_OPT("{description}"))}</code>, following the cross-modal example in the model card where text queries are matched against images, audio and video.</p>`;
-
-function parseOptions(text) {
-  return text
-    .split(/\r?\n/)
-    .map((l) => l.trim())
-    .filter(Boolean)
-    .map((l) => {
-      const i = l.indexOf(":");
-      let key = i > 0 ? l.slice(0, i).trim() : l;
-      let desc = i > 0 ? l.slice(i + 1).trim() : l;
-      if (!desc || desc.toLowerCase() === "null") desc = key.replace(/_/g, " ");
-      return { key, desc };
-    });
-}
-function yesNoOptions(statement) {
-  const s = statement.trim();
-  const quoted = s.match(/["“]([^"”]+)["”]/);
-  const base = quoted ? quoted[1].trim() : s;
-  if (!quoted && /\?\s*$/.test(base)) {
-    return [{ key: "yes", desc: `${base} Yes.`, full: true }, { key: "no", desc: `${base} No.`, full: true }];
-  }
-  const stmt = base.replace(/[.!]\s*$/, "");
-  const lower = stmt.charAt(0).toLowerCase() + stmt.slice(1);
-  return [{ key: "yes", desc: `${stmt}.`, full: true }, { key: "no", desc: `It is not true that ${lower}.`, full: true }];
-}
-
-// input: {kind:'image'|'text'|'audio'|'video', blob?, text?, audio?, frames?, duration?}
-async function decideCore(input, context, question, options, presetKey, T) {
-  const P = PRESETS[presetKey] || PRESETS.cls;
-  const qctx = [context, question].filter(Boolean).join(" ");
-  let queryText, optTexts;
-  if (P.interleave) {
-    queryText = P.q + qctx + (input.kind === "text" ? `\n${input.text}` : "");
-    optTexts = options.map((o) => P.opt(o.desc));
-  } else {
-    queryText = input.kind === "text" ? P.q + input.text : "";
-    optTexts = options.map((o) => P.opt(o.full || !question ? o.desc : `${question} ${o.desc}`));
-  }
-  const t0 = performance.now();
-  const opt = await embedTexts(optTexts);
-  const transfer = [];
-  const payload = { ...input, text: queryText, budget: imageBudget() };
-  if (input.kind === "audio") { payload.audio = input.audio.slice(); transfer.push(payload.audio.buffer); }
-  const r = await rpc("embedInput", { input: payload }, transfer);
-  const cos = opt.embeddings.map((e) => dot(r.embedding, e));
-  const probs = softmax(cos, T);
-  return { cos, probs, top: argmax(probs), inputMs: r.ms, optMs: opt.ms, totalMs: performance.now() - t0, queryText, optTexts };
-}
-
-/* ------------------------------------------------------------------ tabs */
-document.querySelectorAll(".tab").forEach((b) =>
-  b.addEventListener("click", () => {
-    document.querySelectorAll(".tab").forEach((x) => x.classList.toggle("active", x === b));
-    document.querySelectorAll(".view").forEach((v) => (v.hidden = v.dataset.view !== b.dataset.tab));
-  })
-);
-
-/* ------------------------------------------------------------------ samples */
-let SAMPLES = [];
-let demoFiles = [];
-const blobCache = new Map();
-async function fetchBlob(path) {
-  if (!blobCache.has(path)) blobCache.set(path, fetch(path).then((r) => { if (!r.ok) throw new Error(`${path}: ${r.status}`); return r.blob(); }));
-  return blobCache.get(path);
-}
-const samplesReady = fetch("examples/samples.json")
-  .then((r) => r.json())
-  .then((list) => {
-    SAMPLES = list;
-    list.forEach((s, i) => $("sampleSelect").insertAdjacentHTML("beforeend", `<option value="${i}">${i + 1}. ${esc(s.name)}</option>`));
-    demoFiles = [...new Set(list.flatMap((s) => s.files))];
-    return list;
-  })
-  .catch((e) => console.warn("samples.json", e));
-
-/* ------------------------------------------------------------------ single input */
-let kind = "image";
-let imageBlob = null, audioData = null, videoData = null;
-document.querySelectorAll(".subtab").forEach((b) =>
-  b.addEventListener("click", () => {
-    kind = b.dataset.kind;
-    document.querySelectorAll(".subtab").forEach((x) => x.classList.toggle("active", x === b));
-    document.querySelectorAll(".pane").forEach((p) => (p.hidden = p.dataset.pane !== kind));
-  })
-);
-const modeVal = () => document.querySelector('input[name="mode"]:checked').value;
-document.querySelectorAll('input[name="mode"]').forEach((r) =>
-  r.addEventListener("change", () => {
-    const yn = modeVal() === "yesno";
-    $("optionsWrap").hidden = yn;
-    $("yesnoNote").hidden = !yn;
-    $("questionLabel").textContent = yn ? "Statement (or a yes / no question)" : "Question";
-  })
-);
-$("temp").addEventListener("input", () => ($("tempVal").textContent = (+$("temp").value).toFixed(3)));
-function showImage(blob) {
-  imageBlob = blob;
-  const img = $("imagePreview");
-  if (img.src) URL.revokeObjectURL(img.src);
-  img.src = URL.createObjectURL(blob);
-  img.hidden = false;
-}
-$("imageFile").addEventListener("change", (e) => { const f = e.target.files[0]; if (f) { showImage(f); $("sampleSelect").value = ""; } });
-$("sampleSelect").addEventListener("change", async (e) => {
-  const s = SAMPLES[+e.target.value];
-  if (!s) return;
-  showImage(await fetchBlob(s.files[0]));
-  $("contextInput").value = s.state || "";
-  $("questionInput").value = s.question;
-  const yn = s.type === "noul";
-  document.querySelector(`input[name="mode"][value="${yn ? "yesno" : "choice"}"]`).checked = true;
-  document.querySelector('input[name="mode"]:checked').dispatchEvent(new Event("change"));
-  $("optionsInput").value = s.options;
-});
-
-async function decodeAudio(blob, maxSec = 60) {
-  const buf = await new OfflineAudioContext(1, 1, 16000).decodeAudioData(await blob.arrayBuffer());
-  if (buf.duration > maxSec) throw new Error(`Audio is longer than ${maxSec} s.`);
-  const out = new Float32Array(buf.length);
-  for (let c = 0; c < buf.numberOfChannels; c++) { const d = buf.getChannelData(c); for (let i = 0; i < out.length; i++) out[i] += d[i] / buf.numberOfChannels; }
-  return out;
-}
-$("audioFile").addEventListener("change", async (e) => {
-  const f = e.target.files[0];
-  if (!f) return;
-  $("audioPreview").src = URL.createObjectURL(f);
-  $("audioPreview").hidden = false;
-  try { audioData = await decodeAudio(f); } catch (err) { alert(err.message); }
-});
-async function sampleVideoFrames(blob, maxFrames = 16, maxSide = 448) {
-  const v = document.createElement("video");
-  v.muted = true; v.preload = "auto"; v.playsInline = true;
-  v.src = URL.createObjectURL(blob);
-  const wait = (ev) => new Promise((res, rej) => { v.addEventListener(ev, res, { once: true }); v.addEventListener("error", () => rej(new Error("Could not decode this video.")), { once: true }); });
-  await wait("loadeddata");
-  const dur = v.duration;
-  const n = Math.min(maxFrames, Math.max(1, Math.ceil(dur)));
-  const sc = Math.min(1, maxSide / Math.max(v.videoWidth, v.videoHeight));
-  const cv = document.createElement("canvas");
-  cv.width = Math.round(v.videoWidth * sc); cv.height = Math.round(v.videoHeight * sc);
-  const g = cv.getContext("2d", { willReadFrequently: true });
-  const frames = [];
-  for (let i = 0; i < n; i++) {
-    const t = n === 1 ? dur / 2 : (i / (n - 1)) * Math.max(0, dur - 0.05);
-    v.currentTime = t; await wait("seeked");
-    g.drawImage(v, 0, 0, cv.width, cv.height);
-    frames.push({ data: g.getImageData(0, 0, cv.width, cv.height).data.buffer, width: cv.width, height: cv.height, timestamp: t });
-  }
-  URL.revokeObjectURL(v.src);
-  return { frames, duration: dur };
-}
-$("videoFile").addEventListener("change", async (e) => {
-  const f = e.target.files[0];
-  if (!f) return;
-  $("videoPreview").src = URL.createObjectURL(f);
-  $("videoPreview").hidden = false;
-  try { videoData = await sampleVideoFrames(f); } catch (err) { alert(err.message); }
-});
-
-function renderResult(r, options, extra = "") {
-  const top = options[r.top];
-  const bars = options
-    .map((o, i) => `<div class="obar ${i === r.top ? "top" : ""}"><span class="k" title="${esc(o.desc)}">${esc(o.key)}</span><span class="track"><span class="fill" style="width:${(r.probs[i] * 100).toFixed(1)}%"></span></span><span class="p">${(r.probs[i] * 100).toFixed(1)}%</span></div>`)
-    .join("");
-  $("result").innerHTML =
-    `<p class="decision">Decision: <b>${esc(top.key)}</b> <span class="note">(${(r.probs[r.top] * 100).toFixed(1)}%)</span></p>` +
-    `<div class="bars">${bars}</div>` +
-    `<p class="meta">Total ${r.totalMs.toFixed(0)} ms: input embedding ${r.inputMs.toFixed(0)} ms, option embeddings ${r.optMs ? r.optMs.toFixed(0) + " ms" : "cached"}. Backend ${esc(model?.device || "?")}, ${esc(model?.dtype || "")}, temperature ${temperature()}. ${extra}</p>` +
-    `<details class="prompts"><summary>Prompts sent to the model</summary><pre>input: ${esc(r.queryText || "(media only, no text)")}${["image", "audio", "video"].includes(r.kind) ? " + " + r.kind : ""}\n${r.optTexts.map((t, i) => `option ${options[i].key}: ${esc(t)}  (cos ${r.cos[i].toFixed(4)})`).join("\n")}</pre></details>`;
-  $("resultCard").hidden = false;
-}
-
-$("decideBtn").addEventListener("click", async () => {
-  const btn = $("decideBtn");
-  btn.disabled = true;
-  try {
-    const question = $("questionInput").value.trim();
-    const context = $("contextInput").value.trim();
-    let options = modeVal() === "yesno" ? yesNoOptions(question) : parseOptions($("optionsInput").value);
-    if (modeVal() === "yesno" && !question) throw new Error("Write a statement or a yes / no question.");
-    if (options.length < 2 || options.length > 8) throw new Error("Write 2 to 8 options, one per line.");
-    let input;
-    if (kind === "image") { if (!imageBlob) throw new Error("Choose a sample or upload an image."); input = { kind, blob: imageBlob }; }
-    else if (kind === "text") { const t = $("textInput").value.trim(); if (!t) throw new Error("Enter some text."); input = { kind, text: t }; }
-    else if (kind === "audio") { if (!audioData) throw new Error("Upload an audio clip."); input = { kind, audio: audioData }; }
-    else { if (!videoData) throw new Error("Upload a video."); input = { kind, frames: videoData.frames.map((f) => ({ ...f, data: f.data.slice(0) })), duration: videoData.duration }; }
-    btn.textContent = "Loading model...";
-    await ensureModel(kind === "audio");
-    btn.textContent = "Deciding...";
-    const r = await decideCore(input, context, question, options, $("preset").value, temperature());
-    r.kind = kind;
-    renderResult(r, options);
-  } catch (e) {
-    $("result").innerHTML = `<p class="warn">${esc(e.message)}</p>`;
-    $("resultCard").hidden = false;
-  } finally {
-    btn.disabled = false;
-    btn.textContent = "Decide";
-  }
-});
-
-/* ------------------------------------------------------------------ run all samples */
-async function runSample(s, presetKey, T) {
-  const blob = await fetchBlob(s.files[0]);
-  const yn = s.type === "noul";
-  const options = yn ? yesNoOptions(s.question) : parseOptions(s.options);
-  let gold = s.gold;
-  if (yn) gold = { true: "yes", false: "no" }[String(s.gold).toLowerCase()] ?? s.gold;
-  const r = await decideCore({ kind: "image", blob }, s.state || "", yn ? "" : s.question, options, presetKey, T);
-  // yes/no options already contain the question
-  return { pred: options[r.top].key, p: r.probs[r.top], gold, ok: options[r.top].key === gold, ms: r.totalMs, r };
-}
-async function runAll(presetKey, { table = true } = {}) {
-  await samplesReady;
-  await ensureModel(false);
-  const T = temperature();
-  const tbody = $("runAllTable").querySelector("tbody");
-  if (table) { tbody.innerHTML = ""; $("runAllTable").hidden = false; }
-  let correct = 0, msSum = 0;
-  const rows = [];
-  const t0 = performance.now();
-  for (let i = 0; i < SAMPLES.length; i++) {
-    const s = SAMPLES[i];
-    $("runAllSummary").innerHTML = `Running ${i + 1} / ${SAMPLES.length} (${esc(PRESETS[presetKey].label)})...`;
-    const x = await runSample(s, presetKey, T);
-    correct += x.ok ? 1 : 0;
-    msSum += x.ms;
-    rows.push({ name: s.name, type: s.type, ...x, r: undefined });
-    if (table) tbody.insertAdjacentHTML("beforeend", `<tr><td>${i + 1}</td><td>${esc(s.name)}</td><td>${esc(s.type)}</td><td>${esc(x.gold)}</td><td>${esc(x.pred)}</td><td>${(x.p * 100).toFixed(1)}%</td><td class="${x.ok ? "ok" : "no"}">${x.ok ? "yes" : "no"}</td><td>${x.ms.toFixed(0)}</td></tr>`);
-  }
-  const wall = performance.now() - t0;
-  return { presetKey, correct, n: SAMPLES.length, meanMs: msSum / SAMPLES.length, wallMs: wall, rows, device: model.device, dtype: model.dtype, T, budget: imageBudget() };
-}
-const summaryHtml = (res) =>
-  `Accuracy <b>${res.correct} / ${res.n}</b> (${((100 * res.correct) / res.n).toFixed(1)}%). Mean ${res.meanMs.toFixed(0)} ms per test, ${(res.wallMs / 1000).toFixed(1)} s in total, on ${res.device === "webgpu" ? "WebGPU" : "WASM (CPU)"} (${res.dtype}), ${res.budget} image tokens, temperature ${res.T}, prompt format: ${esc(PRESETS[res.presetKey].label)}. Chance level is about ${(SAMPLES.reduce((a, s) => a + 1 / (s.type === "noul" ? 2 : parseOptions(s.options).length), 0)).toFixed(1)} / ${res.n}.`;
-window.lastRuns = [];
-$("runAllBtn").addEventListener("click", async () => {
-  $("runAllBtn").disabled = $("compareBtn").disabled = true;
-  try {
-    const res = await runAll($("preset").value);
-    window.lastRuns.push(res);
-    $("runAllSummary").innerHTML = summaryHtml(res);
-  } catch (e) {
-    $("runAllSummary").innerHTML = `<span class="warn">${esc(e.message)}</span>`;
-  } finally {
-    $("runAllBtn").disabled = $("compareBtn").disabled = false;
-  }
-});
-$("compareBtn").addEventListener("click", async () => {
-  $("runAllBtn").disabled = $("compareBtn").disabled = true;
-  const tb = $("compareTable").querySelector("tbody");
-  tb.innerHTML = "";
-  $("compareTable").hidden = false;
-  try {
-    for (const k of Object.keys(PRESETS)) {
-      const res = await runAll(k, { table: false });
-      window.lastRuns.push(res);
-      tb.insertAdjacentHTML("beforeend", `<tr><td>${esc(PRESETS[k].label)}</td><td>${res.correct} / ${res.n}</td><td>${res.meanMs.toFixed(0)}</td></tr>`);
-    }
-    $("runAllSummary").innerHTML = `Compared ${Object.keys(PRESETS).length} prompt formats on ${model.device === "webgpu" ? "WebGPU" : "WASM (CPU)"}, temperature ${temperature()}.`;
-  } catch (e) {
-    $("runAllSummary").innerHTML = `<span class="warn">${esc(e.message)}</span>`;
-  } finally {
-    $("runAllBtn").disabled = $("compareBtn").disabled = false;
-  }
-});
-
-/* ------------------------------------------------------------------ live decision cards */
-const VISION_TEMPLATES = [
-  { title: "What kind of scene is this?", options: "animals: wild animals such as giraffes or elephants\nstreet: a city street with vehicles and buildings\npeople: people outdoors, walking or playing\nreceipt: a paper receipt or printed document\napp: a screenshot of a mobile phone app\nchart: a chart or data plot\nshapes: a 3D render of simple geometric objects\negg: an egg lit from behind in the dark" },
-  { title: "Is a person in view?", options: "yes: a photo with a person or people in it\nno: a photo with no people, only objects, animals or graphics" },
-  { title: "Egg candling: good or bad?", options: "good: a candled egg lit from behind, normal and healthy\nbad: a candled egg lit from behind, defective, spoiled or cracked" },
-  { title: "What is the person holding?", options: "phone: a person holding a mobile phone\ncup: a person holding a cup or mug\nbook: a person holding a book or paper\nnothing: a person with empty hands" },
-  { title: "Hand gesture", options: "thumbs_up: a hand giving a thumbs up\nopen_palm: an open palm facing the camera\npeace: a hand making a peace sign\nno_hand: no hand visible" },
-  { title: "Facial expression", options: "smiling: a smiling face\nneutral: a neutral, calm face\nsurprised: a surprised face with open mouth" },
-  { title: "Safety helmet check", options: "helmet: a worker wearing a hard hat\nno_helmet: a person without a hard hat on their head" },
-  { title: "Indoor or outdoor?", options: "indoor: an indoor scene inside a room\noutdoor: an outdoor scene under the open sky" },
-  { title: "Lighting", options: "bright: a bright, well lit scene\ndim: a dim scene with low light\ndark: a very dark scene" },
-];
-const AUDIO_TEMPLATES = [
-  { title: "What sound is this?", options: "dog: a dog barking\nspeech: a person speaking\nmusic: music playing\nmachine: machine noise, an engine or a motor\nbirds: birds chirping\nwater: running water, rain or waves" },
-  { title: "Is someone speaking?", options: "yes: a person speaking words\nno: no speech, only other sounds or silence" },
-  { title: "Alarm or siren?", options: "alarm: an alarm, siren or beeping warning sound\nnormal: ordinary background sound" },
-  { title: "Hands", options: "clapping: hands clapping\nknocking: knocking on a door or table\nnone: no clapping or knocking" },
-];
-const MAX_CARDS = 4;
-let cardSeq = 0;
-const decks = { vision: [], audio: [] };
-function makeCard(t, threshold) {
-  const n = parseOptions(t.options).length;
-  threshold = threshold ?? (n <= 2 ? 0.6 : 0.5);
-  return { id: ++cardSeq, title: t.title, optionsText: t.options, options: parseOptions(t.options), threshold, probs: null, n: 0, onDevice: 0, escalate: 0, editing: false };
-}
-decks.vision = [VISION_TEMPLATES[0], VISION_TEMPLATES[1], VISION_TEMPLATES[2]].map((t) => makeCard(t));
-decks.audio = [AUDIO_TEMPLATES[0], AUDIO_TEMPLATES[1]].map((t) => makeCard(t));
-let primaryId = { vision: decks.vision[0].id, audio: decks.audio[0].id };
-
-const live = { running: false, token: 0, src: "demo", facing: "user", stream: null, fps: 0, lat: 0, lastDone: 0, audioCtx: null, analyser: null, ring: null, ringPos: 0, ringFilled: 0, fileEl: null };
-const deckName = () => (live.src === "mic" || live.src === "sound" ? "audio" : "vision");
-const deck = () => decks[deckName()];
-
-function renderTemplates() {
-  const list = deckName() === "audio" ? AUDIO_TEMPLATES : VISION_TEMPLATES;
-  $("templates").innerHTML = list.map((t, i) => `<button data-t="${i}">${esc(t.title)}</button>`).join("");
-  $("templates").querySelectorAll("button").forEach((b) =>
-    b.addEventListener("click", () => {
-      if (deck().length >= MAX_CARDS) return flash(`At most ${MAX_CARDS} decisions at once. Remove one first.`);
-      deck().push(makeCard(list[+b.dataset.t]));
-      renderCards();
-    })
-  );
-  $("cardsTitle").textContent = deckName() === "audio" ? "Decisions on every sound window" : "Decisions on every frame";
-}
-function flash(msg) { $("cardsCount").textContent = msg; setTimeout(updateCount, 2500); }
-function updateCount() { $("cardsCount").textContent = `${deck().length} / ${MAX_CARDS}, one embedding scores all`; }
-
-function renderCards() {
-  const d = deck();
-  if (!d.find((c) => c.id === primaryId[deckName()]) && d.length) primaryId[deckName()] = d[0].id;
-  $("cards").innerHTML = d
-    .map((c) => {
-      const prim = c.id === primaryId[deckName()];
-      return `<div class="dcard ${prim ? "primary" : ""}" data-id="${c.id}">
-        <div class="dtop"><div class="dtitle">${esc(c.title)}</div>
-          <div class="dact">
-            <button data-act="pin" title="Show this decision on the video">${prim ? "On video" : "Show on video"}</button>
-            <button data-act="edit">Edit</button>
-            <button data-act="del" title="Remove">Remove</button>
-          </div></div>
-        <div class="dverdict">waiting for the first ${deckName() === "audio" ? "sound window" : "frame"}</div>
-        <div class="dbars">${c.options.map((o) => `<div class="obar"><span class="k" title="${esc(o.desc)}">${esc(o.key.replace(/_/g, " "))}</span><span class="track"><span class="fill"></span></span><span class="p">-</span></div>`).join("")}</div>
-        <div class="thr">Confidence gate <input type="range" min="0.3" max="0.99" step="0.01" value="${c.threshold}" data-act="thr" /><span class="tv">${Math.round(c.threshold * 100)}%</span></div>
-        <div class="dstats"></div>
-        ${c.editing ? `<div class="dedit"><input type="text" data-f="title" value="${esc(c.title)}" /><textarea rows="5" data-f="opts">${esc(c.optionsText)}</textarea><button data-act="save">Save</button></div>` : ""}
-      </div>`;
-    })
-    .join("");
-  $("cards").querySelectorAll(".dcard").forEach((el) => {
-    const c = d.find((x) => x.id === +el.dataset.id);
-    el.querySelector('[data-act="pin"]').onclick = () => { primaryId[deckName()] = c.id; renderCards(); };
-    el.querySelector('[data-act="edit"]').onclick = () => { c.editing = !c.editing; renderCards(); };
-    el.querySelector('[data-act="del"]').onclick = () => { decks[deckName()] = d.filter((x) => x !== c); renderCards(); };
-    el.querySelector('[data-act="thr"]').oninput = (e) => { c.threshold = +e.target.value; el.querySelector(".tv").textContent = `${Math.round(c.threshold * 100)}%`; paintCard(c); };
-    const save = el.querySelector('[data-act="save"]');
-    if (save) save.onclick = () => {
-      const opts = parseOptions(el.querySelector('[data-f="opts"]').value);
-      if (opts.length < 2 || opts.length > 8) return alert("Write 2 to 8 options, one per line as key: description.");
-      c.title = el.querySelector('[data-f="title"]').value.trim() || "Decision";
-      c.optionsText = el.querySelector('[data-f="opts"]').value;
-      c.options = opts; c.probs = null; c.n = c.onDevice = c.escalate = 0; c.editing = false;
-      renderCards();
-    };
-    paintCard(c);
-  });
-  updateCount();
-  paintOverlay();
-}
-$("customBtn").addEventListener("click", () => {
-  if (deck().length >= MAX_CARDS) return flash(`At most ${MAX_CARDS} decisions at once. Remove one first.`);
-  const c = makeCard({ title: "My decision", options: deckName() === "audio" ? "a: describe the first sound\nb: describe the second sound" : "a: describe the first situation\nb: describe the second situation" });
-  c.editing = true;
-  deck().push(c);
-  renderCards();
-});
-
-function paintCard(c) {
-  const el = $("cards").querySelector(`.dcard[data-id="${c.id}"]`);
-  if (!el || !c.probs) return;
-  const top = argmax(c.probs);
-  const conf = c.probs[top];
-  const sure = conf >= c.threshold;
-  el.classList.toggle("uncertain", !sure);
-  el.querySelectorAll(".obar").forEach((row, i) => {
-    row.classList.toggle("top", i === top);
-    row.querySelector(".fill").style.width = `${(c.probs[i] * 100).toFixed(1)}%`;
-    row.querySelector(".p").textContent = `${Math.round(c.probs[i] * 100)}%`;
-  });
-  el.querySelector(".dverdict").innerHTML = sure
-    ? `<b>${esc(c.options[top].key.replace(/_/g, " "))}</b> &nbsp;${Math.round(conf * 100)}%, decided on device`
-    : `<b>uncertain</b> (${esc(c.options[top].key.replace(/_/g, " "))} ${Math.round(conf * 100)}%): would escalate to a larger model`;
-  el.querySelector(".dstats").textContent = `${c.n} ${deckName() === "audio" ? "windows" : "frames"}: ${c.onDevice} on device, ${c.escalate} would escalate`;
-}
-const RING_LEN = 2 * Math.PI * 52;
-function paintOverlay() {
-  const c = deck().find((x) => x.id === primaryId[deckName()]);
-  const ov = $("overlay");
-  if (!c || !c.probs) { ov.hidden = !live.running || !c; if (c) { $("ovQuestion").textContent = c.title; $("ovLabel").textContent = "..."; $("ovPct").textContent = ""; $("ringFg").style.strokeDashoffset = RING_LEN; } return; }
-  ov.hidden = false;
-  const top = argmax(c.probs);
-  const conf = c.probs[top];
-  const sure = conf >= c.threshold;
-  ov.classList.toggle("uncertain", !sure);
-  $("ovQuestion").textContent = c.title;
-  $("ovLabel").textContent = sure ? c.options[top].key.replace(/_/g, " ") : `uncertain`;
-  $("ovPct").textContent = sure ? `${(conf * 100).toFixed(0)}% confidence` : `best guess ${c.options[top].key.replace(/_/g, " ")} at ${(conf * 100).toFixed(0)}%, below the ${Math.round(c.threshold * 100)}% gate: would escalate`;
-  $("ringFg").style.strokeDashoffset = RING_LEN * (1 - conf);
-}
-function paintGate() {
-  let on = 0, esc_ = 0;
-  for (const d of Object.values(decks)) for (const c of d) { on += c.onDevice; esc_ += c.escalate; }
-  $("gOnDevice").textContent = on;
-  $("gEscalate").textContent = esc_;
-  $("gRate").textContent = on + esc_ ? `${((100 * on) / (on + esc_)).toFixed(1)}%` : "-";
-}
-$("resetGate").addEventListener("click", () => { for (const d of Object.values(decks)) for (const c of d) { c.n = c.onDevice = c.escalate = 0; } paintGate(); deck().forEach(paintCard); });
-
-async function scoreDeck(emb) {
-  const d = deck();
-  const texts = d.flatMap((c) => c.options.map((o) => LIVE_OPT(o.desc)));
-  const { embeddings } = await embedTexts(texts);
-  const T = temperature();
-  const alpha = parseFloat($("smoothSel").value);
-  let k = 0;
-  for (const c of d) {
-    const cos = c.options.map(() => dot(emb, embeddings[k++]));
-    const p = softmax(cos, T);
-    c.probs = c.probs && c.probs.length === p.length && alpha > 0 ? c.probs.map((x, i) => alpha * x + (1 - alpha) * p[i]) : p;
-    const conf = Math.max(...c.probs);
-    c.n++;
-    if (conf >= c.threshold) c.onDevice++; else c.escalate++;
-    paintCard(c);
-  }
-  paintOverlay();
-  paintGate();
-}
-function hud(ms) {
-  const now = performance.now();
-  if (live.lastDone) {
-    const inst = 1000 / (now - live.lastDone);
-    live.fps = live.fps ? 0.7 * live.fps + 0.3 * inst : inst;
-  }
-  live.lastDone = now;
-  live.lat = live.lat ? 0.7 * live.lat + 0.3 * ms : ms;
-  $("fpsVal").textContent = live.fps.toFixed(1);
-  $("latVal").textContent = live.lat.toFixed(0);
-  $("latUnit").textContent = deckName() === "audio" ? "ms / window" : "ms / frame";
-}
-function targetGap() {
-  const v = $("rateSel").value;
-  if (v === "auto") return model?.device === "wasm" ? 1000 : 200;
-  return 1000 / +v;
-}
-
-/* sources */
-const demoImgs = [];
-const feed = $("feed");
-const feedCtx = feed.getContext("2d");
-const grab = document.createElement("canvas");
-const grabCtx = grab.getContext("2d", { willReadFrequently: true });
-let demoIdx = 0, demoStart = 0, rafId = 0;
-async function loadDemoImages() {
-  await samplesReady;
-  if (demoImgs.length) return;
-  for (const f of demoFiles) {
-    try { demoImgs.push(await createImageBitmap(await fetchBlob(f))); } catch (e) { console.warn(f, e); }
-  }
-}
-function fitCanvas() {
-  const r = feed.getBoundingClientRect();
-  const w = Math.max(320, Math.round(r.width * Math.min(2, devicePixelRatio || 1)));
-  const h = Math.max(240, Math.round(r.height * Math.min(2, devicePixelRatio || 1)));
-  if (feed.width !== w || feed.height !== h) { feed.width = w; feed.height = h; }
-}
-const DEMO_MS = 3200;
-function drawDemo(now) {
-  renderDemo(now);
-  rafId = requestAnimationFrame(drawDemo);
-}
-function renderDemo(now) {
-  fitCanvas();
-  if (!demoStart) demoStart = now;
-  // keep each picture up long enough for at least two decisions, even on the slow CPU path
-  const dur = Math.max(DEMO_MS, (live.lat || 0) * 2.2);
-  let t = (now - demoStart) / dur;
-  if (t >= 1) { demoIdx = (demoIdx + 1) % demoImgs.length; demoStart = now; t = 0; }
-  const img = demoImgs[demoIdx];
-  feedCtx.fillStyle = "#05070a";
-  feedCtx.fillRect(0, 0, feed.width, feed.height);
-  if (img && img.width) {
-    // slow zoom, like a handheld camera; the whole image stays visible
-    const zoom = 1 + 0.06 * t;
-    const s = Math.min(feed.width / img.width, feed.height / img.height) * zoom;
-    const w = img.width * s, h = img.height * s;
-    feedCtx.globalAlpha = Math.min(1, t * 6);
-    feedCtx.drawImage(img, (feed.width - w) / 2, (feed.height - h) / 2, w, h);
-    feedCtx.globalAlpha = 1;
-  }
-}
-function drawAudio() {
-  fitCanvas();
-  const a = live.analyser;
-  feedCtx.fillStyle = "#05070a";
-  feedCtx.fillRect(0, 0, feed.width, feed.height);
-  if (a) {
-    const buf = new Float32Array(a.fftSize);
-    a.getFloatTimeDomainData(buf);
-    let rms = 0; for (const x of buf) rms += x * x; rms = Math.sqrt(rms / buf.length);
-    feedCtx.strokeStyle = "#2dd4bf";
-    feedCtx.lineWidth = Math.max(2, feed.height / 200);
-    feedCtx.beginPath();
-    for (let i = 0; i < buf.length; i++) {
-      const x = (i / buf.length) * feed.width;
-      const y = feed.height * 0.45 + Math.max(-1, Math.min(1, buf[i] * 0.8)) * feed.height * 0.3;
-      i ? feedCtx.lineTo(x, y) : feedCtx.moveTo(x, y);
-    }
-    feedCtx.stroke();
-    const lvl = Math.min(1, rms * 8);
-    feedCtx.fillStyle = "rgba(45,212,191,.25)";
-    feedCtx.fillRect(14, feed.height * 0.2, 10, feed.height * 0.5);
-    feedCtx.fillStyle = "#2dd4bf";
-    feedCtx.fillRect(14, feed.height * 0.2 + feed.height * 0.5 * (1 - lvl), 10, feed.height * 0.5 * lvl);
-    feedCtx.fillStyle = "rgba(255,255,255,.55)";
-    feedCtx.font = `${Math.round(feed.height / 34)}px system-ui`;
-    feedCtx.fillText(`Listening in 2 s windows (${live.src === "sound" ? "sound file" : "microphone"}), 16 kHz mono`, 34, feed.height * 0.16);
-  }
-  rafId = requestAnimationFrame(drawAudio);
-}
-function grabFrame(budget) {
-  let srcEl, sw, sh;
-  if (live.src === "camera") { srcEl = $("cam"); sw = srcEl.videoWidth; sh = srcEl.videoHeight; }
-  else {
-    // Demo feed: embed the picture itself (not the letterboxed canvas with its caption)
-    renderDemo(performance.now()); // also keeps the slideshow moving if the tab is in the background
-    srcEl = demoImgs[demoIdx]; sw = srcEl?.width; sh = srcEl?.height;
-  }
-  if (!sw || !sh) return null;
-  const maxSide = budget >= 280 ? 640 : 448;
-  const sc = Math.min(1, maxSide / Math.max(sw, sh));
-  grab.width = Math.round(sw * sc); grab.height = Math.round(sh * sc);
-  grabCtx.drawImage(srcEl, 0, 0, grab.width, grab.height);
-  return grabCtx.getImageData(0, 0, grab.width, grab.height);
-}
-
-async function visionLoop(token) {
-  while (live.running && token === live.token) {
-    const t0 = performance.now();
-    const budget = +$("budgetSel").value;
-    const f = grabFrame(budget);
-    if (f) {
-      try {
-        const r = await rpc("embedInput", { input: { kind: "rgba", data: f.data.buffer, width: f.width, height: f.height, budget } }, [f.data.buffer]);
-        if (token !== live.token) break;
-        await scoreDeck(r.embedding);
-        hud(performance.now() - t0);
-      } catch (e) { console.error(e); setStatus("error", e.message); await sleep(1000); }
-    }
-    const gap = targetGap() - (performance.now() - t0);
-    await sleep(Math.max(gap, 16));
-  }
-}
-const SR = 16000, WIN = 2 * SR;
-// The embedding of near-silence is not meaningful (tested: silence scores as speech),
-// so quiet windows are not sent to the model at all.
-const QUIET_DB = -55;
-function showQuiet(db) {
-  for (const c of deck()) {
-    const el = $("cards").querySelector(`.dcard[data-id="${c.id}"]`);
-    if (el) el.querySelector(".dverdict").innerHTML = `<b>quiet</b> input level ${db.toFixed(0)} dBFS is below the ${QUIET_DB} dBFS level gate: model not run`;
-  }
-  const ov = $("overlay");
-  ov.hidden = false;
-  ov.classList.add("uncertain");
-  $("ovLabel").textContent = "quiet";
-  $("ovPct").textContent = `level ${db.toFixed(0)} dBFS, below the ${QUIET_DB} dBFS gate: model not run`;
-  $("ringFg").style.strokeDashoffset = RING_LEN;
-}
-async function audioLoop(token) {
-  while (live.running && token === live.token) {
-    const t0 = performance.now();
-    if (live.ringFilled >= WIN) {
-      const win = new Float32Array(WIN);
-      const p = live.ringPos;
-      win.set(live.ring.subarray(p));
-      win.set(live.ring.subarray(0, p), WIN - p);
-      let e2 = 0;
-      for (let i = 0; i < win.length; i++) e2 += win[i] * win[i];
-      const db = 10 * Math.log10(e2 / win.length + 1e-12);
-      if (db < QUIET_DB) {
-        showQuiet(db);
-        await sleep(500);
-        continue;
-      }
-      try {
-        const r = await rpc("embedInput", { input: { kind: "audio", audio: win } }, [win.buffer]);
-        if (token !== live.token) break;
-        await scoreDeck(r.embedding);
-        hud(performance.now() - t0);
-      } catch (e) { console.error(e); setStatus("error", e.message); await sleep(1000); }
-    }
-    const gap = Math.max(model?.device === "wasm" ? 2000 : 1000, 0) - (performance.now() - t0);
-    await sleep(Math.max(gap, 50));
-  }
-}
-function setupAudioGraph(sourceNodeFactory) {
-  const ctx = new AudioContext({ sampleRate: SR });
-  live.audioCtx = ctx;
-  const src = sourceNodeFactory(ctx);
-  const an = ctx.createAnalyser();
-  an.fftSize = 2048;
-  live.analyser = an;
-  live.ring = new Float32Array(WIN); live.ringPos = 0; live.ringFilled = 0;
-  const proc = ctx.createScriptProcessor(4096, 1, 1);
-  const ratio = ctx.sampleRate / SR;
-  proc.onaudioprocess = (e) => {
-    const x = e.inputBuffer.getChannelData(0);
-    const n = Math.floor(x.length / ratio);
-    for (let i = 0; i < n; i++) {
-      live.ring[live.ringPos] = x[Math.floor(i * ratio)];
-      live.ringPos = (live.ringPos + 1) % WIN;
-    }
-    live.ringFilled += n;
-  };
-  src.connect(an);
-  src.connect(proc);
-  const mute = ctx.createGain(); mute.gain.value = 0;
-  proc.connect(mute); mute.connect(ctx.destination);
-  return src;
-}
-
-async function startLive(opts = {}) {
-  if (opts instanceof Event) opts = {};
-  stopLive(false);
-  const token = ++live.token;
-  const btn = $("startBtn");
-  btn.disabled = true;
-  const isAudio = deckName() === "audio";
-  try {
-    btn.textContent = "Loading model...";
-    await ensureModel(isAudio);
-    btn.textContent = "Starting...";
-    const stage = $("stage");
-    stage.classList.remove("camera", "mirror");
-    if (live.src === "camera") {
-      if (!navigator.mediaDevices?.getUserMedia) throw new Error("This browser cannot open a camera here. Try the Demo feed.");
-      live.stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: live.facing, width: { ideal: 1280 }, height: { ideal: 720 } }, audio: false });
-      const v = $("cam");
-      v.srcObject = live.stream;
-      await v.play();
-      stage.classList.add("camera");
-      if (live.facing === "user") stage.classList.add("mirror");
-      $("flipBtn").hidden = false;
-    } else if (live.src === "demo") {
-      await loadDemoImages();
-      demoStart = 0;
-      rafId = requestAnimationFrame(drawDemo);
-    } else if (live.src === "mic") {
-      if (!navigator.mediaDevices?.getUserMedia) throw new Error("This browser cannot open a microphone here. Try a sound file.");
-      live.stream = await navigator.mediaDevices.getUserMedia({ audio: { channelCount: 1, echoCancellation: false, noiseSuppression: false, autoGainControl: false } });
-      setupAudioGraph((ctx) => ctx.createMediaStreamSource(live.stream));
-      rafId = requestAnimationFrame(drawAudio);
-    } else if (live.src === "sound") {
-      const f = opts.file || (await pickFile("audio/*"));
-      const el = new Audio(URL.createObjectURL(f));
-      el.loop = true;
-      live.fileEl = el;
-      setupAudioGraph((ctx) => { const s = ctx.createMediaElementSource(el); s.connect(ctx.destination); return s; });
-      await el.play();
-      rafId = requestAnimationFrame(drawAudio);
-    }
-    live.running = true;
-    live.fps = live.lat = live.lastDone = 0;
-    $("idle").hidden = true;
-    $("stopBtn").disabled = false;
-    renderCards();
-    if (isAudio) audioLoop(token); else visionLoop(token);
-  } catch (e) {
-    console.error(e);
-    stopLive();
-    $("idle").querySelector("p").textContent = e.message;
-  } finally {
-    btn.disabled = false;
-    btn.textContent = "Start live decisions";
-  }
-}
-function pickFile(accept) {
-  return new Promise((res, rej) => {
-    const i = document.createElement("input");
-    i.type = "file"; i.accept = accept;
-    i.onchange = () => (i.files[0] ? res(i.files[0]) : rej(new Error("No file chosen.")));
-    i.click();
-  });
-}
-function stopLive(showIdle = true) {
-  live.running = false;
-  live.token++;
-  cancelAnimationFrame(rafId);
-  if (live.stream) { live.stream.getTracks().forEach((t) => t.stop()); live.stream = null; }
-  if (live.audioCtx) { live.audioCtx.close().catch(() => {}); live.audioCtx = null; live.analyser = null; }
-  if (live.fileEl) { live.fileEl.pause(); live.fileEl = null; }
-  $("cam").srcObject = null;
-  $("stopBtn").disabled = true;
-  $("flipBtn").hidden = live.src !== "camera";
-  if (showIdle) { $("idle").hidden = false; $("overlay").hidden = true; }
-}
-$("startBtn").addEventListener("click", () => startLive());
-$("stopBtn").addEventListener("click", () => stopLive());
-$("flipBtn").addEventListener("click", () => { live.facing = live.facing === "user" ? "environment" : "user"; if (live.running) startLive(); });
-document.querySelectorAll(".src").forEach((b) =>
-  b.addEventListener("click", () => {
-    const wasRunning = live.running;
-    stopLive();
-    live.src = b.dataset.src;
-    document.querySelectorAll(".src").forEach((x) => x.classList.toggle("active", x === b));
-    $("flipBtn").hidden = live.src !== "camera";
-    $("idle").querySelector("p").textContent =
-      live.src === "camera" ? "Your camera stays on this device. Frames are embedded in the browser and dropped."
-      : live.src === "mic" ? "Listens in 2 second windows. Loads the audio encoder too (about 190 MB more at q4)."
-      : live.src === "sound" ? "Plays a sound file of your choice through the same 2 second windows."
-      : "Cycles through the sample images as if they were a camera feed.";
-    renderTemplates();
-    renderCards();
-    if (wasRunning && live.src === "demo") startLive();
-  })
-);
-// The sound-file source shares the microphone deck; expose it as a fourth button.
-$("flipBtn").insertAdjacentHTML("beforebegin", `<button class="src" data-src="sound">Sound file</button>`);
-const soundBtn = document.querySelector('.src[data-src="sound"]');
-soundBtn.addEventListener("click", () => {
-  stopLive();
-  live.src = "sound";
-  document.querySelectorAll(".src").forEach((x) => x.classList.toggle("active", x === soundBtn));
-  $("flipBtn").hidden = true;
-  $("idle").querySelector("p").textContent = "Plays a sound file of your choice through the same 2 second windows. The file stays on this device.";
-  renderTemplates();
-  renderCards();
-});
-document.addEventListener("visibilitychange", () => { if (document.hidden && live.running && live.src === "camera") stopLive(); });
-
-renderTemplates();
-renderCards();
-paintGate();
-$("idle").querySelector("p").textContent = "Cycles through the sample images as if they were a camera feed. Loads the model on first start (about 290 MB at q4, cached afterwards).";
-
-// Expose a small hook for automated checks in the page.
-window.decideApp = { ensureModel, runAll, decideCore, PRESETS, live, decks, startLive, stopLive, yesNoOptions, parseOptions, embedTexts, rpc, get model() { return model; } };
+// SPDX-License-Identifier: Apache-2.0
+// Decide Live: zero-token decisions with a multimodal embedding model running in the browser.
+const $ = (id) => document.getElementById(id);
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+const esc = (s) => String(s).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
+const params = new URLSearchParams(location.search);
+
+/* ------------------------------------------------------------------ worker */
+const worker = new Worker(new URL("./worker.js?v=5", import.meta.url), { type: "module" });
+let reqId = 0;
+const pending = new Map();
+worker.onmessage = ({ data }) => {
+  if (data.type === "state") return onState(data);
+  const p = pending.get(data.id);
+  if (!p) return;
+  pending.delete(data.id);
+  if (data.type === "result") p.resolve(data.result);
+  else p.reject(new Error(data.message));
+};
+worker.onerror = (e) => setStatus("error", `Worker error: ${e.message || e}`);
+function rpc(op, payload = {}, transfer = []) {
+  const id = ++reqId;
+  return new Promise((resolve, reject) => {
+    pending.set(id, { resolve, reject });
+    worker.postMessage({ id, op, ...payload }, transfer);
+  });
+}
+
+/* ------------------------------------------------------------------ model */
+let model = null; // {device, dtype, audio, loadMs}
+let loadPromise = null;
+if (params.get("device")) $("device").value = params.get("device");
+if (params.get("dtype")) $("dtype").value = params.get("dtype");
+
+function setStatus(phase, text) {
+  $("status").className = `status ${phase}`;
+  $("statusText").textContent = text;
+}
+function onState(s) {
+  setStatus(s.phase, s.label + (s.totalBytes ? ` (${(s.loadedBytes / 1e6).toFixed(0)} / ${(s.totalBytes / 1e6).toFixed(0)} MB)` : ""));
+  if (s.phase === "loading" && typeof s.progress === "number") {
+    $("progressWrap").hidden = false;
+    $("progressBar").style.width = `${Math.max(2, Math.min(100, s.progress))}%`;
+  }
+  if (s.phase === "ready" || s.phase === "error") $("progressWrap").hidden = true;
+}
+async function ensureModel(audio = false) {
+  const want = { device: $("device").value, dtype: $("dtype").value, audio: audio || !!model?.audio };
+  if (model && model.requested === want.dtype && (want.device === "auto" || want.device === model.device) && (!audio || model.audio)) return model;
+  if (loadPromise) {
+    await loadPromise.catch(() => {});
+    return ensureModel(audio);
+  }
+  loadPromise = rpc("load", { options: want })
+    .then((info) => {
+      if (model && model.dtype !== info.dtype) textCache.clear();
+      model = info;
+      if (info.scale) {
+        trainedScale = info.scale;
+        if (!tempTouched) setTemp(1 / trainedScale);
+      }
+      $("backend").textContent = info.device === "webgpu" ? "WebGPU" : "WASM (CPU)";
+      $("wasmNote").hidden = info.device !== "wasm";
+      return info;
+    })
+    .catch((e) => { setStatus("error", `Could not load the model: ${e.message}`); throw e; })
+    .finally(() => (loadPromise = null));
+  return loadPromise;
+}
+
+/* ------------------------------------------------------------------ embeddings and scoring */
+const textCache = new Map();
+async function embedTexts(texts) {
+  const missing = [...new Set(texts.filter((t) => !textCache.has(t)))];
+  let ms = 0;
+  if (missing.length) {
+    const r = await rpc("embedTexts", { texts: missing });
+    r.embeddings.forEach((e, i) => textCache.set(missing[i], e));
+    ms = r.ms;
+  }
+  return { embeddings: texts.map((t) => textCache.get(t)), ms, fresh: missing.length };
+}
+const dot = (a, b) => { let s = 0; for (let i = 0; i < a.length; i++) s += a[i] * b[i]; return s; };
+function softmax(xs, T) {
+  const z = xs.map((x) => x / T);
+  const m = Math.max(...z);
+  const e = z.map((x) => Math.exp(x - m));
+  const s = e.reduce((a, b) => a + b, 0);
+  return e.map((x) => x / s);
+}
+const argmax = (xs) => xs.reduce((bi, x, i) => (x > xs[bi] ? i : bi), 0);
+// The model was trained with P(option) = softmax(scale * cos); the learned scale ships with the model
+// (decision.json). The default temperature is 1 / scale.
+let trainedScale = 19.9607;
+let tempTouched = false;
+function setTemp(t) {
+  $("temp").value = t.toFixed(4);
+  $("tempVal").textContent = `${(+$("temp").value).toFixed(4)}${Math.abs(t - 1 / trainedScale) < 5e-5 ? ` (trained: 1 / ${trainedScale.toFixed(2)})` : ""}`;
+}
+const temperature = () => parseFloat($("temp").value);
+// Image tokens for single inputs and sample tests: model default 280 on WebGPU, 70 on the much slower CPU path.
+const imageBudget = () => ($("budgetSingle").value === "auto" ? (model?.device === "wasm" ? 70 : 280) : +$("budgetSingle").value);
+
+/* ------------------------------------------------------------------ prompts */
+const DOC = (d) => `title: none | text: ${d}`;
+const PH = { image: "<|image|>", rgba: "<|image|>", audio: "<|audio|>", video: "<|video|>" };
+// Trained format: media placeholders first, then "task: classification | query: {question}" and
+// "\nContext: {context}" when there is one (a context of exactly "See the image." is left out, as in training).
+function trainedQuery(kind, question, context, extraText = "") {
+  const ctx = [context === "See the image." ? "" : context, extraText].filter(Boolean).join("\n");
+  return (PH[kind] || "") + `task: classification | query: ${question}` + (ctx ? `\nContext: ${ctx}` : "");
+}
+const PRESETS = {
+  trained: { label: "Trained decision format (default)", trained: true, opt: DOC },
+  cls: { label: "Classification query (input + question) and document options", interleave: true, q: "task: classification | query: ", opt: DOC },
+  qa: { label: "Question answering query (input + question) and document options", interleave: true, q: "task: question answering | query: ", opt: DOC },
+  sym: { label: "Classification prefix on both sides (symmetric)", interleave: true, q: "task: classification | query: ", opt: (d) => `task: classification | query: ${d}` },
+  xsearch: { label: "Media alone; question + option as a search query", interleave: false, q: "task: classification | query: ", opt: (d) => `task: search result | query: ${d}` },
+  xdoc: { label: "Media alone; question + option as a document", interleave: false, q: "task: classification | query: ", opt: DOC },
+};
+// Live cards: the frame is embedded once with no text (media takes no prefix), options are self-describing.
+const LIVE_OPT = (d) => `task: search result | query: ${d}`;
+for (const [k, p] of Object.entries(PRESETS)) $("preset").insertAdjacentHTML("beforeend", `<option value="${k}">${esc(p.label)}</option>`);
+$("promptDoc").innerHTML =
+  `<p>Single input, sample tests and the egg check (the format is selectable under Single input &gt; Settings):</p><ul>` +
+  Object.values(PRESETS)
+    .map((p) => `<li>${esc(p.label)}: input <code>${p.trained ? esc("<media>task: classification | query: {question}") + "<br>" + esc("Context: {context}") : p.interleave ? esc(p.q) + "{context} {question} &lt;media&gt;" : "&lt;media&gt; (no text)"}</code>, option <code>${esc(p.opt(p.interleave || p.trained ? "{description}" : "{question} {description}"))}</code>${p.trained ? ". Yes / no questions use the options <code>Yes</code> and <code>No</code>." : ""}</li>`)
+    .join("") +
+  `</ul><p>Live cards: by default each card embeds the frame with its own question in the trained format (one pass per card). The alternative embeds the frame or sound window alone, once for all cards, and each option as <code>${esc(LIVE_OPT("{description}"))}</code>.</p>`;
+
+function parseOptions(text) {
+  return text
+    .split(/\r?\n/)
+    .map((l) => l.trim())
+    .filter(Boolean)
+    .map((l) => {
+      const i = l.indexOf(":");
+      let key = i > 0 ? l.slice(0, i).trim() : l;
+      let desc = i > 0 ? l.slice(i + 1).trim() : l;
+      if (!desc || desc.toLowerCase() === "null") desc = key.replace(/_/g, " ");
+      return { key, desc };
+    });
+}
+// Trained format for yes / no questions: the question stays in the query, the options are just "Yes" and "No".
+const TRAINED_YES_NO = [{ key: "yes", desc: "Yes" }, { key: "no", desc: "No" }];
+function yesNoOptions(statement) {
+  const s = statement.trim();
+  const quoted = s.match(/["“]([^"”]+)["”]/);
+  const base = quoted ? quoted[1].trim() : s;
+  if (!quoted && /\?\s*$/.test(base)) {
+    return [{ key: "yes", desc: `${base} Yes.`, full: true }, { key: "no", desc: `${base} No.`, full: true }];
+  }
+  const stmt = base.replace(/[.!]\s*$/, "");
+  const lower = stmt.charAt(0).toLowerCase() + stmt.slice(1);
+  return [{ key: "yes", desc: `${stmt}.`, full: true }, { key: "no", desc: `It is not true that ${lower}.`, full: true }];
+}
+
+// input: {kind:'image'|'text'|'audio'|'video', blob?, text?, audio?, frames?, duration?}
+async function decideCore(input, context, question, options, presetKey, T) {
+  const P = PRESETS[presetKey] || PRESETS.trained;
+  const qctx = [context, question].filter(Boolean).join(" ");
+  let queryText, optTexts;
+  if (P.trained) {
+    queryText = trainedQuery(input.kind, question, context, input.kind === "text" ? input.text : "");
+    optTexts = options.map((o) => P.opt(o.desc));
+  } else if (P.interleave) {
+    queryText = P.q + qctx + (input.kind === "text" ? `\n${input.text}` : "") + (PH[input.kind] ? ` ${PH[input.kind]}` : "");
+    optTexts = options.map((o) => P.opt(o.desc));
+  } else {
+    queryText = input.kind === "text" ? P.q + input.text : "";
+    optTexts = options.map((o) => P.opt(o.full || !question ? o.desc : `${question} ${o.desc}`));
+  }
+  const t0 = performance.now();
+  const opt = await embedTexts(optTexts);
+  const transfer = [];
+  const payload = { ...input, text: queryText, budget: imageBudget() };
+  if (input.kind === "audio") { payload.audio = input.audio.slice(); transfer.push(payload.audio.buffer); }
+  const r = await rpc("embedInput", { input: payload }, transfer);
+  const cos = opt.embeddings.map((e) => dot(r.embedding, e));
+  const probs = softmax(cos, T);
+  return { cos, probs, top: argmax(probs), inputMs: r.ms, optMs: opt.ms, totalMs: performance.now() - t0, queryText, optTexts };
+}
+
+/* ------------------------------------------------------------------ tabs */
+document.querySelectorAll(".tab").forEach((b) =>
+  b.addEventListener("click", () => {
+    document.querySelectorAll(".tab").forEach((x) => x.classList.toggle("active", x === b));
+    document.querySelectorAll(".view").forEach((v) => (v.hidden = v.dataset.view !== b.dataset.tab));
+  })
+);
+
+/* ------------------------------------------------------------------ samples */
+let SAMPLES = [];
+let demoFiles = [];
+const blobCache = new Map();
+async function fetchBlob(path) {
+  if (!blobCache.has(path)) blobCache.set(path, fetch(path).then((r) => { if (!r.ok) throw new Error(`${path}: ${r.status}`); return r.blob(); }));
+  return blobCache.get(path);
+}
+const samplesReady = fetch("examples/samples.json")
+  .then((r) => r.json())
+  .then((list) => {
+    SAMPLES = list;
+    list.forEach((s, i) => $("sampleSelect").insertAdjacentHTML("beforeend", `<option value="${i}">${i + 1}. ${esc(s.name)}</option>`));
+    demoFiles = [...new Set(list.flatMap((s) => s.files))];
+    return list;
+  })
+  .catch((e) => console.warn("samples.json", e));
+
+/* ------------------------------------------------------------------ single input */
+let kind = "image";
+let imageBlob = null, audioData = null, videoData = null;
+document.querySelectorAll(".subtab").forEach((b) =>
+  b.addEventListener("click", () => {
+    kind = b.dataset.kind;
+    document.querySelectorAll(".subtab").forEach((x) => x.classList.toggle("active", x === b));
+    document.querySelectorAll(".pane").forEach((p) => (p.hidden = p.dataset.pane !== kind));
+  })
+);
+const modeVal = () => document.querySelector('input[name="mode"]:checked').value;
+document.querySelectorAll('input[name="mode"]').forEach((r) =>
+  r.addEventListener("change", () => {
+    const yn = modeVal() === "yesno";
+    $("optionsWrap").hidden = yn;
+    $("yesnoNote").hidden = !yn;
+    $("questionLabel").textContent = yn ? "Statement (or a yes / no question)" : "Question";
+  })
+);
+$("temp").addEventListener("input", () => { tempTouched = true; setTemp(+$("temp").value); });
+$("resetTemp").addEventListener("click", () => { tempTouched = false; setTemp(1 / trainedScale); });
+setTemp(1 / trainedScale);
+function showImage(blob) {
+  imageBlob = blob;
+  const img = $("imagePreview");
+  if (img.src) URL.revokeObjectURL(img.src);
+  img.src = URL.createObjectURL(blob);
+  img.hidden = false;
+}
+$("imageFile").addEventListener("change", (e) => { const f = e.target.files[0]; if (f) { showImage(f); $("sampleSelect").value = ""; } });
+$("sampleSelect").addEventListener("change", async (e) => {
+  const s = SAMPLES[+e.target.value];
+  if (!s) return;
+  showImage(await fetchBlob(s.files[0]));
+  $("contextInput").value = s.state || "";
+  $("questionInput").value = s.question;
+  const yn = s.type === "noul";
+  document.querySelector(`input[name="mode"][value="${yn ? "yesno" : "choice"}"]`).checked = true;
+  document.querySelector('input[name="mode"]:checked').dispatchEvent(new Event("change"));
+  $("optionsInput").value = s.options;
+});
+
+async function decodeAudio(blob, maxSec = 60) {
+  const buf = await new OfflineAudioContext(1, 1, 16000).decodeAudioData(await blob.arrayBuffer());
+  if (buf.duration > maxSec) throw new Error(`Audio is longer than ${maxSec} s.`);
+  const out = new Float32Array(buf.length);
+  for (let c = 0; c < buf.numberOfChannels; c++) { const d = buf.getChannelData(c); for (let i = 0; i < out.length; i++) out[i] += d[i] / buf.numberOfChannels; }
+  return out;
+}
+$("audioFile").addEventListener("change", async (e) => {
+  const f = e.target.files[0];
+  if (!f) return;
+  $("audioPreview").src = URL.createObjectURL(f);
+  $("audioPreview").hidden = false;
+  try { audioData = await decodeAudio(f); } catch (err) { alert(err.message); }
+});
+async function sampleVideoFrames(blob, maxFrames = 16, maxSide = 448) {
+  const v = document.createElement("video");
+  v.muted = true; v.preload = "auto"; v.playsInline = true;
+  v.src = URL.createObjectURL(blob);
+  const wait = (ev) => new Promise((res, rej) => { v.addEventListener(ev, res, { once: true }); v.addEventListener("error", () => rej(new Error("Could not decode this video.")), { once: true }); });
+  await wait("loadeddata");
+  const dur = v.duration;
+  const n = Math.min(maxFrames, Math.max(1, Math.ceil(dur)));
+  const sc = Math.min(1, maxSide / Math.max(v.videoWidth, v.videoHeight));
+  const cv = document.createElement("canvas");
+  cv.width = Math.round(v.videoWidth * sc); cv.height = Math.round(v.videoHeight * sc);
+  const g = cv.getContext("2d", { willReadFrequently: true });
+  const frames = [];
+  for (let i = 0; i < n; i++) {
+    const t = n === 1 ? dur / 2 : (i / (n - 1)) * Math.max(0, dur - 0.05);
+    v.currentTime = t; await wait("seeked");
+    g.drawImage(v, 0, 0, cv.width, cv.height);
+    frames.push({ data: g.getImageData(0, 0, cv.width, cv.height).data.buffer, width: cv.width, height: cv.height, timestamp: t });
+  }
+  URL.revokeObjectURL(v.src);
+  return { frames, duration: dur };
+}
+$("videoFile").addEventListener("change", async (e) => {
+  const f = e.target.files[0];
+  if (!f) return;
+  $("videoPreview").src = URL.createObjectURL(f);
+  $("videoPreview").hidden = false;
+  try { videoData = await sampleVideoFrames(f); } catch (err) { alert(err.message); }
+});
+
+function renderResult(r, options, extra = "") {
+  const top = options[r.top];
+  const bars = options
+    .map((o, i) => `<div class="obar ${i === r.top ? "top" : ""}"><span class="k" title="${esc(o.desc)}">${esc(o.key)}</span><span class="track"><span class="fill" style="width:${(r.probs[i] * 100).toFixed(1)}%"></span></span><span class="p">${(r.probs[i] * 100).toFixed(1)}%</span></div>`)
+    .join("");
+  $("result").innerHTML =
+    `<p class="decision">Decision: <b>${esc(top.key)}</b> <span class="note">(${(r.probs[r.top] * 100).toFixed(1)}%)</span></p>` +
+    `<div class="bars">${bars}</div>` +
+    `<p class="meta">Total ${r.totalMs.toFixed(0)} ms: input embedding ${r.inputMs.toFixed(0)} ms, option embeddings ${r.optMs ? r.optMs.toFixed(0) + " ms" : "cached"}. Backend ${esc(model?.device || "?")}, ${esc(model?.dtype || "")}, temperature ${temperature()}. ${extra}</p>` +
+    `<details class="prompts"><summary>Prompts sent to the model</summary><pre>input: ${esc(r.queryText || "(media only, no text)")}${["image", "audio", "video"].includes(r.kind) ? " + " + r.kind : ""}\n${r.optTexts.map((t, i) => `option ${options[i].key}: ${esc(t)}  (cos ${r.cos[i].toFixed(4)})`).join("\n")}</pre></details>`;
+  $("resultCard").hidden = false;
+}
+
+$("decideBtn").addEventListener("click", async () => {
+  const btn = $("decideBtn");
+  btn.disabled = true;
+  try {
+    const question = $("questionInput").value.trim();
+    const context = $("contextInput").value.trim();
+    const trained = !!PRESETS[$("preset").value]?.trained;
+    let options = modeVal() === "yesno" ? (trained ? TRAINED_YES_NO : yesNoOptions(question)) : parseOptions($("optionsInput").value);
+    if (modeVal() === "yesno" && !question) throw new Error("Write a statement or a yes / no question.");
+    if (options.length < 2 || options.length > 8) throw new Error("Write 2 to 8 options, one per line.");
+    let input;
+    if (kind === "image") { if (!imageBlob) throw new Error("Choose a sample or upload an image."); input = { kind, blob: imageBlob }; }
+    else if (kind === "text") { const t = $("textInput").value.trim(); if (!t) throw new Error("Enter some text."); input = { kind, text: t }; }
+    else if (kind === "audio") { if (!audioData) throw new Error("Upload an audio clip."); input = { kind, audio: audioData }; }
+    else { if (!videoData) throw new Error("Upload a video."); input = { kind, frames: videoData.frames.map((f) => ({ ...f, data: f.data.slice(0) })), duration: videoData.duration }; }
+    btn.textContent = "Loading model...";
+    await ensureModel(kind === "audio");
+    btn.textContent = "Deciding...";
+    const r = await decideCore(input, context, question, options, $("preset").value, temperature());
+    r.kind = kind;
+    renderResult(r, options);
+  } catch (e) {
+    $("result").innerHTML = `<p class="warn">${esc(e.message)}</p>`;
+    $("resultCard").hidden = false;
+  } finally {
+    btn.disabled = false;
+    btn.textContent = "Decide";
+  }
+});
+
+/* ------------------------------------------------------------------ run all samples */
+async function runSample(s, presetKey, T) {
+  const blob = await fetchBlob(s.files[0]);
+  const yn = s.type === "noul";
+  const trained = !!PRESETS[presetKey]?.trained;
+  const options = yn ? (trained ? TRAINED_YES_NO : yesNoOptions(s.question)) : parseOptions(s.options);
+  let gold = s.gold;
+  if (yn) gold = { true: "yes", false: "no" }[String(s.gold).toLowerCase()] ?? s.gold;
+  // in the older formats the yes / no options already contain the question
+  const r = await decideCore({ kind: "image", blob }, s.state || "", yn && !trained ? "" : s.question, options, presetKey, T);
+  return { pred: options[r.top].key, p: r.probs[r.top], gold, ok: options[r.top].key === gold, ms: r.totalMs, r };
+}
+async function runAll(presetKey, { table = true } = {}) {
+  await samplesReady;
+  await ensureModel(false);
+  const T = temperature();
+  const tbody = $("runAllTable").querySelector("tbody");
+  if (table) { tbody.innerHTML = ""; $("runAllTable").hidden = false; }
+  let correct = 0, msSum = 0;
+  const rows = [];
+  const t0 = performance.now();
+  for (let i = 0; i < SAMPLES.length; i++) {
+    const s = SAMPLES[i];
+    $("runAllSummary").innerHTML = `Running ${i + 1} / ${SAMPLES.length} (${esc(PRESETS[presetKey].label)})...`;
+    const x = await runSample(s, presetKey, T);
+    correct += x.ok ? 1 : 0;
+    msSum += x.ms;
+    rows.push({ name: s.name, type: s.type, ...x, r: undefined });
+    if (table) tbody.insertAdjacentHTML("beforeend", `<tr><td>${i + 1}</td><td>${esc(s.name)}</td><td>${esc(s.type)}</td><td>${esc(x.gold)}</td><td>${esc(x.pred)}</td><td>${(x.p * 100).toFixed(1)}%</td><td class="${x.ok ? "ok" : "no"}">${x.ok ? "yes" : "no"}</td><td>${x.ms.toFixed(0)}</td></tr>`);
+  }
+  const wall = performance.now() - t0;
+  return { presetKey, correct, n: SAMPLES.length, meanMs: msSum / SAMPLES.length, wallMs: wall, rows, device: model.device, dtype: model.dtype, T, budget: imageBudget() };
+}
+const summaryHtml = (res) =>
+  `Accuracy <b>${res.correct} / ${res.n}</b> (${((100 * res.correct) / res.n).toFixed(1)}%). Mean ${res.meanMs.toFixed(0)} ms per test, ${(res.wallMs / 1000).toFixed(1)} s in total, on ${res.device === "webgpu" ? "WebGPU" : "WASM (CPU)"} (${res.dtype}), ${res.budget} image tokens, temperature ${res.T}, prompt format: ${esc(PRESETS[res.presetKey].label)}. Chance level is about ${(SAMPLES.reduce((a, s) => a + 1 / (s.type === "noul" ? 2 : parseOptions(s.options).length), 0)).toFixed(1)} / ${res.n}.`;
+window.lastRuns = [];
+$("runAllBtn").addEventListener("click", async () => {
+  $("runAllBtn").disabled = $("compareBtn").disabled = true;
+  try {
+    const res = await runAll($("preset").value);
+    window.lastRuns.push(res);
+    $("runAllSummary").innerHTML = summaryHtml(res);
+  } catch (e) {
+    $("runAllSummary").innerHTML = `<span class="warn">${esc(e.message)}</span>`;
+  } finally {
+    $("runAllBtn").disabled = $("compareBtn").disabled = false;
+  }
+});
+$("compareBtn").addEventListener("click", async () => {
+  $("runAllBtn").disabled = $("compareBtn").disabled = true;
+  const tb = $("compareTable").querySelector("tbody");
+  tb.innerHTML = "";
+  $("compareTable").hidden = false;
+  try {
+    for (const k of Object.keys(PRESETS)) {
+      const res = await runAll(k, { table: false });
+      window.lastRuns.push(res);
+      tb.insertAdjacentHTML("beforeend", `<tr><td>${esc(PRESETS[k].label)}</td><td>${res.correct} / ${res.n}</td><td>${res.meanMs.toFixed(0)}</td></tr>`);
+    }
+    $("runAllSummary").innerHTML = `Compared ${Object.keys(PRESETS).length} prompt formats on ${model.device === "webgpu" ? "WebGPU" : "WASM (CPU)"}, temperature ${temperature()}.`;
+  } catch (e) {
+    $("runAllSummary").innerHTML = `<span class="warn">${esc(e.message)}</span>`;
+  } finally {
+    $("runAllBtn").disabled = $("compareBtn").disabled = false;
+  }
+});
+
+/* ------------------------------------------------------------------ egg check */
+const EGG = {
+  question: "Is this egg good or bad?",
+  context: "Candling photo: a light is shone through the egg in a dark room.",
+  options: [{ key: "good", desc: "Normal, healthy egg" }, { key: "bad", desc: "Defective, spoiled or damaged egg" }],
+};
+// Held-out photos (egg test split, first 4 good and first 4 bad in file order; not picked by result)
+const EGG_PHOTOS = ["good-81", "good-125", "good-409", "good-235", "bad-78", "bad-107", "bad-295", "bad-397"].map((n) => ({
+  file: `examples/egg-test/egg-test-${n}.jpg`, gold: n.split("-")[0], label: `${n.split("-")[0]} egg #${n.split("-")[1]}`,
+}));
+$("eggGrid").innerHTML = EGG_PHOTOS.map((p, i) => `<button class="eggthumb" data-i="${i}" title="Decide on this photo"><img src="${p.file}" alt="${esc(p.label)}" loading="lazy" /><span>gold: ${esc(p.gold)}</span></button>`).join("");
+async function eggDecide(blob) {
+  await ensureModel(false);
+  const presetKey = PRESETS[$("preset").value] ? $("preset").value : "trained";
+  return decideCore({ kind: "image", blob }, EGG.context, EGG.question, EGG.options, presetKey, temperature());
+}
+function eggShow(blob, r, gold) {
+  const img = $("eggPreview");
+  if (img.src) URL.revokeObjectURL(img.src);
+  img.src = URL.createObjectURL(blob);
+  const pred = EGG.options[r.top].key;
+  const bars = EGG.options
+    .map((o, i) => `<div class="obar ${i === r.top ? "top" : ""}"><span class="k" title="${esc(o.desc)}">${esc(o.key)}</span><span class="track"><span class="fill" style="width:${(r.probs[i] * 100).toFixed(1)}%"></span></span><span class="p">${(r.probs[i] * 100).toFixed(1)}%</span></div>`)
+    .join("");
+  $("eggOut").innerHTML =
+    `<p class="decision">Decision: <b>${esc(pred)}</b> <span class="note">(${(r.probs[r.top] * 100).toFixed(1)}%)</span>${gold ? ` <span class="${pred === gold ? "okc" : "noc"}">gold: ${esc(gold)}, ${pred === gold ? "correct" : "wrong"}</span>` : ""}</p>` +
+    `<div class="bars">${bars}</div>` +
+    `<p class="meta">${r.totalMs.toFixed(0)} ms (input ${r.inputMs.toFixed(0)} ms, options ${r.optMs ? r.optMs.toFixed(0) + " ms" : "cached"}). ${esc(model?.device || "?")}, ${esc(model?.dtype || "")}, ${imageBudget()} image tokens, temperature ${temperature().toFixed(4)}.</p>` +
+    `<details class="prompts"><summary>Prompts sent to the model</summary><pre>input: ${esc(r.queryText)} + image\n${r.optTexts.map((t, i) => `option ${EGG.options[i].key}: ${esc(t)}  (cos ${r.cos[i].toFixed(4)})`).join("\n")}</pre></details>`;
+  $("eggResult").hidden = false;
+}
+async function eggBusy(fn) {
+  const btns = [$("eggRunAll"), ...document.querySelectorAll(".eggthumb")];
+  btns.forEach((b) => (b.disabled = true));
+  try { await fn(); } catch (e) { $("eggSummary").innerHTML = `<span class="warn">${esc(e.message)}</span>`; }
+  finally { btns.forEach((b) => (b.disabled = false)); }
+}
+$("eggGrid").querySelectorAll(".eggthumb").forEach((b) =>
+  b.addEventListener("click", () => eggBusy(async () => {
+    const p = EGG_PHOTOS[+b.dataset.i];
+    $("eggSummary").textContent = model ? "Deciding..." : "Loading the model...";
+    const blob = await fetchBlob(p.file);
+    const r = await eggDecide(blob);
+    eggShow(blob, r, p.gold);
+    $("eggSummary").textContent = "";
+  }))
+);
+$("eggFile").addEventListener("change", (e) => eggBusy(async () => {
+  const f = e.target.files[0];
+  if (!f) return;
+  $("eggSummary").textContent = model ? "Deciding..." : "Loading the model...";
+  const r = await eggDecide(f);
+  eggShow(f, r, null);
+  $("eggSummary").textContent = "";
+}));
+async function eggRunAll() {
+  const tb = $("eggTable").querySelector("tbody");
+  tb.innerHTML = "";
+  $("eggTable").hidden = false;
+  let ok = 0, ms = 0;
+  const rows = [];
+  for (let i = 0; i < EGG_PHOTOS.length; i++) {
+    const p = EGG_PHOTOS[i];
+    $("eggSummary").textContent = model ? `Checking ${i + 1} / ${EGG_PHOTOS.length}...` : "Loading the model...";
+    const blob = await fetchBlob(p.file);
+    const r = await eggDecide(blob);
+    const pred = EGG.options[r.top].key;
+    ok += pred === p.gold ? 1 : 0;
+    ms += r.totalMs;
+    rows.push({ file: p.file, gold: p.gold, pred, probs: r.probs, cos: r.cos, ms: r.totalMs });
+    tb.insertAdjacentHTML("beforeend", `<tr><td><img class="mini" src="${p.file}" alt="" /> ${esc(p.label)}</td><td>${esc(p.gold)}</td><td>${esc(pred)}</td><td>${(r.probs[0] * 100).toFixed(1)}%</td><td>${(r.probs[1] * 100).toFixed(1)}%</td><td class="${pred === p.gold ? "ok" : "no"}">${pred === p.gold ? "yes" : "no"}</td><td>${r.totalMs.toFixed(0)}</td></tr>`);
+  }
+  $("eggSummary").innerHTML = `Accuracy <b>${ok} / ${EGG_PHOTOS.length}</b>. Mean ${(ms / EGG_PHOTOS.length).toFixed(0)} ms per photo on ${model.device === "webgpu" ? "WebGPU" : "WASM (CPU)"} (${esc(model.dtype)}), ${imageBudget()} image tokens.`;
+  const res = { ok, n: EGG_PHOTOS.length, meanMs: ms / EGG_PHOTOS.length, device: model.device, dtype: model.dtype, budget: imageBudget(), rows };
+  window.lastEgg = res;
+  return res;
+}
+$("eggRunAll").addEventListener("click", () => eggBusy(eggRunAll));
+
+/* ------------------------------------------------------------------ live decision cards */
+const VISION_TEMPLATES = [
+  { title: "What kind of scene is this?", options: "animals: wild animals such as giraffes or elephants\nstreet: a city street with vehicles and buildings\npeople: people outdoors, walking or playing\nreceipt: a paper receipt or printed document\napp: a screenshot of a mobile phone app\nchart: a chart or data plot\nshapes: a 3D render of simple geometric objects\negg: an egg lit from behind in the dark" },
+  { title: "Is a person in view?", options: "yes: a photo with a person or people in it\nno: a photo with no people, only objects, animals or graphics" },
+  { title: "Is this egg good or bad?", context: "Candling photo: a light is shone through the egg in a dark room.", options: "good: Normal, healthy egg\nbad: Defective, spoiled or damaged egg" },
+  { title: "What is the person holding?", options: "phone: a person holding a mobile phone\ncup: a person holding a cup or mug\nbook: a person holding a book or paper\nnothing: a person with empty hands" },
+  { title: "Which hand gesture is shown?", options: "thumbs_up: a hand giving a thumbs up\nopen_palm: an open palm facing the camera\npeace: a hand making a peace sign\nno_hand: no hand visible" },
+  { title: "What is the facial expression?", options: "smiling: a smiling face\nneutral: a neutral, calm face\nsurprised: a surprised face with open mouth" },
+  { title: "Is the person wearing a safety helmet?", options: "helmet: a worker wearing a hard hat\nno_helmet: a person without a hard hat on their head" },
+  { title: "Indoor or outdoor?", options: "indoor: an indoor scene inside a room\noutdoor: an outdoor scene under the open sky" },
+  { title: "How bright is the scene?", options: "bright: a bright, well lit scene\ndim: a dim scene with low light\ndark: a very dark scene" },
+];
+const AUDIO_TEMPLATES = [
+  { title: "What sound is this?", options: "dog: a dog barking\nspeech: a person speaking\nmusic: music playing\nmachine: machine noise, an engine or a motor\nbirds: birds chirping\nwater: running water, rain or waves" },
+  { title: "Is someone speaking?", options: "yes: a person speaking words\nno: no speech, only other sounds or silence" },
+  { title: "Is there an alarm or siren?", options: "alarm: an alarm, siren or beeping warning sound\nnormal: ordinary background sound" },
+  { title: "Are hands clapping or knocking?", options: "clapping: hands clapping\nknocking: knocking on a door or table\nnone: no clapping or knocking" },
+];
+const MAX_CARDS = 4;
+let cardSeq = 0;
+const decks = { vision: [], audio: [] };
+function makeCard(t, threshold) {
+  const n = parseOptions(t.options).length;
+  threshold = threshold ?? (n <= 2 ? 0.6 : 0.5);
+  return { id: ++cardSeq, title: t.title, context: t.context || "", optionsText: t.options, options: parseOptions(t.options), threshold, probs: null, n: 0, onDevice: 0, escalate: 0, editing: false };
+}
+decks.vision = [VISION_TEMPLATES[0], VISION_TEMPLATES[1], VISION_TEMPLATES[2]].map((t) => makeCard(t));
+decks.audio = [AUDIO_TEMPLATES[0], AUDIO_TEMPLATES[1]].map((t) => makeCard(t));
+let primaryId = { vision: decks.vision[0].id, audio: decks.audio[0].id };
+
+const live = { running: false, token: 0, src: "demo", facing: "user", stream: null, fps: 0, lat: 0, lastDone: 0, audioCtx: null, analyser: null, ring: null, ringPos: 0, ringFilled: 0, fileEl: null };
+const deckName = () => (live.src === "mic" || live.src === "sound" ? "audio" : "vision");
+const deck = () => decks[deckName()];
+
+function renderTemplates() {
+  const list = deckName() === "audio" ? AUDIO_TEMPLATES : VISION_TEMPLATES;
+  $("templates").innerHTML = list.map((t, i) => `<button data-t="${i}">${esc(t.title)}</button>`).join("");
+  $("templates").querySelectorAll("button").forEach((b) =>
+    b.addEventListener("click", () => {
+      if (deck().length >= MAX_CARDS) return flash(`At most ${MAX_CARDS} decisions at once. Remove one first.`);
+      deck().push(makeCard(list[+b.dataset.t]));
+      renderCards();
+    })
+  );
+  $("cardsTitle").textContent = deckName() === "audio" ? "Decisions on every sound window" : "Decisions on every frame";
+}
+function flash(msg) { $("cardsCount").textContent = msg; setTimeout(updateCount, 2500); }
+function updateCount() { $("cardsCount").textContent = `${deck().length} / ${MAX_CARDS}, ${liveTrained() ? "one pass per card" : "one embedding scores all"}`; }
+
+function renderCards() {
+  const d = deck();
+  if (!d.find((c) => c.id === primaryId[deckName()]) && d.length) primaryId[deckName()] = d[0].id;
+  $("cards").innerHTML = d
+    .map((c) => {
+      const prim = c.id === primaryId[deckName()];
+      return `<div class="dcard ${prim ? "primary" : ""}" data-id="${c.id}">
+        <div class="dtop"><div class="dtitle">${esc(c.title)}${c.context ? `<span class="dctx">${esc(c.context)}</span>` : ""}</div>
+          <div class="dact">
+            <button data-act="pin" title="Show this decision on the video">${prim ? "On video" : "Show on video"}</button>
+            <button data-act="edit">Edit</button>
+            <button data-act="del" title="Remove">Remove</button>
+          </div></div>
+        <div class="dverdict">waiting for the first ${deckName() === "audio" ? "sound window" : "frame"}</div>
+        <div class="dbars">${c.options.map((o) => `<div class="obar"><span class="k" title="${esc(o.desc)}">${esc(o.key.replace(/_/g, " "))}</span><span class="track"><span class="fill"></span></span><span class="p">-</span></div>`).join("")}</div>
+        <div class="thr">Confidence gate <input type="range" min="0.3" max="0.99" step="0.01" value="${c.threshold}" data-act="thr" /><span class="tv">${Math.round(c.threshold * 100)}%</span></div>
+        <div class="dstats"></div>
+        ${c.editing ? `<div class="dedit"><input type="text" data-f="title" value="${esc(c.title)}" placeholder="Question" /><input type="text" data-f="ctx" value="${esc(c.context || "")}" placeholder="Context (optional)" /><textarea rows="5" data-f="opts">${esc(c.optionsText)}</textarea><button data-act="save">Save</button></div>` : ""}
+      </div>`;
+    })
+    .join("");
+  $("cards").querySelectorAll(".dcard").forEach((el) => {
+    const c = d.find((x) => x.id === +el.dataset.id);
+    el.querySelector('[data-act="pin"]').onclick = () => { primaryId[deckName()] = c.id; renderCards(); };
+    el.querySelector('[data-act="edit"]').onclick = () => { c.editing = !c.editing; renderCards(); };
+    el.querySelector('[data-act="del"]').onclick = () => { decks[deckName()] = d.filter((x) => x !== c); renderCards(); };
+    el.querySelector('[data-act="thr"]').oninput = (e) => { c.threshold = +e.target.value; el.querySelector(".tv").textContent = `${Math.round(c.threshold * 100)}%`; paintCard(c); };
+    const save = el.querySelector('[data-act="save"]');
+    if (save) save.onclick = () => {
+      const opts = parseOptions(el.querySelector('[data-f="opts"]').value);
+      if (opts.length < 2 || opts.length > 8) return alert("Write 2 to 8 options, one per line as key: description.");
+      c.title = el.querySelector('[data-f="title"]').value.trim() || "Decision";
+      c.context = el.querySelector('[data-f="ctx"]').value.trim();
+      c.optionsText = el.querySelector('[data-f="opts"]').value;
+      c.options = opts; c.probs = null; c.n = c.onDevice = c.escalate = 0; c.editing = false;
+      renderCards();
+    };
+    paintCard(c);
+  });
+  updateCount();
+  paintOverlay();
+}
+$("customBtn").addEventListener("click", () => {
+  if (deck().length >= MAX_CARDS) return flash(`At most ${MAX_CARDS} decisions at once. Remove one first.`);
+  const c = makeCard({ title: "What is happening?", options: deckName() === "audio" ? "a: describe the first sound\nb: describe the second sound" : "a: describe the first situation\nb: describe the second situation" });
+  c.editing = true;
+  deck().push(c);
+  renderCards();
+});
+
+function paintCard(c) {
+  const el = $("cards").querySelector(`.dcard[data-id="${c.id}"]`);
+  if (!el || !c.probs) return;
+  const top = argmax(c.probs);
+  const conf = c.probs[top];
+  const sure = conf >= c.threshold;
+  el.classList.toggle("uncertain", !sure);
+  el.querySelectorAll(".obar").forEach((row, i) => {
+    row.classList.toggle("top", i === top);
+    row.querySelector(".fill").style.width = `${(c.probs[i] * 100).toFixed(1)}%`;
+    row.querySelector(".p").textContent = `${Math.round(c.probs[i] * 100)}%`;
+  });
+  el.querySelector(".dverdict").innerHTML = sure
+    ? `<b>${esc(c.options[top].key.replace(/_/g, " "))}</b> &nbsp;${Math.round(conf * 100)}%, decided on device`
+    : `<b>uncertain</b> (${esc(c.options[top].key.replace(/_/g, " "))} ${Math.round(conf * 100)}%): would escalate to a larger model`;
+  el.querySelector(".dstats").textContent = `${c.n} ${deckName() === "audio" ? "windows" : "frames"}: ${c.onDevice} on device, ${c.escalate} would escalate`;
+}
+const RING_LEN = 2 * Math.PI * 52;
+function paintOverlay() {
+  const c = deck().find((x) => x.id === primaryId[deckName()]);
+  const ov = $("overlay");
+  if (!c || !c.probs) { ov.hidden = !live.running || !c; if (c) { $("ovQuestion").textContent = c.title; $("ovLabel").textContent = "..."; $("ovPct").textContent = ""; $("ringFg").style.strokeDashoffset = RING_LEN; } return; }
+  ov.hidden = false;
+  const top = argmax(c.probs);
+  const conf = c.probs[top];
+  const sure = conf >= c.threshold;
+  ov.classList.toggle("uncertain", !sure);
+  $("ovQuestion").textContent = c.title;
+  $("ovLabel").textContent = sure ? c.options[top].key.replace(/_/g, " ") : `uncertain`;
+  $("ovPct").textContent = sure ? `${(conf * 100).toFixed(0)}% confidence` : `best guess ${c.options[top].key.replace(/_/g, " ")} at ${(conf * 100).toFixed(0)}%, below the ${Math.round(c.threshold * 100)}% gate: would escalate`;
+  $("ringFg").style.strokeDashoffset = RING_LEN * (1 - conf);
+}
+function paintGate() {
+  let on = 0, esc_ = 0;
+  for (const d of Object.values(decks)) for (const c of d) { on += c.onDevice; esc_ += c.escalate; }
+  $("gOnDevice").textContent = on;
+  $("gEscalate").textContent = esc_;
+  $("gRate").textContent = on + esc_ ? `${((100 * on) / (on + esc_)).toFixed(1)}%` : "-";
+}
+$("resetGate").addEventListener("click", () => { for (const d of Object.values(decks)) for (const c of d) { c.n = c.onDevice = c.escalate = 0; } paintGate(); deck().forEach(paintCard); });
+
+// Live prompt: "trained" embeds the frame once per card with the card's question (trained format);
+// "alone" embeds the frame once, with no text, and scores every card from that one vector.
+const liveTrained = () => $("livePrompt").value === "trained";
+// embs: one embedding per card (trained) or a single shared embedding (alone)
+async function scoreDeck(embs) {
+  const d = deck();
+  const trained = Array.isArray(embs);
+  const texts = d.flatMap((c) => c.options.map((o) => (trained ? DOC(o.desc) : LIVE_OPT(o.desc))));
+  const { embeddings } = await embedTexts(texts);
+  const T = temperature();
+  const alpha = parseFloat($("smoothSel").value);
+  let k = 0;
+  for (const [ci, c] of d.entries()) {
+    const emb = trained ? embs[ci] : embs;
+    const cos = c.options.map(() => dot(emb, embeddings[k++]));
+    const p = softmax(cos, T);
+    c.probs = c.probs && c.probs.length === p.length && alpha > 0 ? c.probs.map((x, i) => alpha * x + (1 - alpha) * p[i]) : p;
+    const conf = Math.max(...c.probs);
+    c.n++;
+    if (conf >= c.threshold) c.onDevice++; else c.escalate++;
+    paintCard(c);
+  }
+  paintOverlay();
+  paintGate();
+}
+function hud(ms) {
+  const now = performance.now();
+  if (live.lastDone) {
+    const inst = 1000 / (now - live.lastDone);
+    live.fps = live.fps ? 0.7 * live.fps + 0.3 * inst : inst;
+  }
+  live.lastDone = now;
+  live.lat = live.lat ? 0.7 * live.lat + 0.3 * ms : ms;
+  $("fpsVal").textContent = live.fps.toFixed(1);
+  $("latVal").textContent = live.lat.toFixed(0);
+  $("latUnit").textContent = deckName() === "audio" ? "ms / window" : "ms / frame";
+}
+function targetGap() {
+  const v = $("rateSel").value;
+  if (v === "auto") return model?.device === "wasm" ? 1000 : 200;
+  return 1000 / +v;
+}
+
+/* sources */
+const demoImgs = [];
+const feed = $("feed");
+const feedCtx = feed.getContext("2d");
+const grab = document.createElement("canvas");
+const grabCtx = grab.getContext("2d", { willReadFrequently: true });
+let demoIdx = 0, demoStart = 0, rafId = 0;
+async function loadDemoImages() {
+  await samplesReady;
+  if (demoImgs.length) return;
+  for (const f of demoFiles) {
+    try { demoImgs.push(await createImageBitmap(await fetchBlob(f))); } catch (e) { console.warn(f, e); }
+  }
+}
+function fitCanvas() {
+  const r = feed.getBoundingClientRect();
+  const w = Math.max(320, Math.round(r.width * Math.min(2, devicePixelRatio || 1)));
+  const h = Math.max(240, Math.round(r.height * Math.min(2, devicePixelRatio || 1)));
+  if (feed.width !== w || feed.height !== h) { feed.width = w; feed.height = h; }
+}
+const DEMO_MS = 3200;
+function drawDemo(now) {
+  renderDemo(now);
+  rafId = requestAnimationFrame(drawDemo);
+}
+function renderDemo(now) {
+  fitCanvas();
+  if (!demoStart) demoStart = now;
+  // keep each picture up long enough for at least two decisions, even on the slow CPU path
+  const dur = Math.max(DEMO_MS, (live.lat || 0) * 2.2);
+  let t = (now - demoStart) / dur;
+  if (t >= 1) { demoIdx = (demoIdx + 1) % demoImgs.length; demoStart = now; t = 0; }
+  const img = demoImgs[demoIdx];
+  feedCtx.fillStyle = "#05070a";
+  feedCtx.fillRect(0, 0, feed.width, feed.height);
+  if (img && img.width) {
+    // slow zoom, like a handheld camera; the whole image stays visible
+    const zoom = 1 + 0.06 * t;
+    const s = Math.min(feed.width / img.width, feed.height / img.height) * zoom;
+    const w = img.width * s, h = img.height * s;
+    feedCtx.globalAlpha = Math.min(1, t * 6);
+    feedCtx.drawImage(img, (feed.width - w) / 2, (feed.height - h) / 2, w, h);
+    feedCtx.globalAlpha = 1;
+  }
+}
+function drawAudio() {
+  fitCanvas();
+  const a = live.analyser;
+  feedCtx.fillStyle = "#05070a";
+  feedCtx.fillRect(0, 0, feed.width, feed.height);
+  if (a) {
+    const buf = new Float32Array(a.fftSize);
+    a.getFloatTimeDomainData(buf);
+    let rms = 0; for (const x of buf) rms += x * x; rms = Math.sqrt(rms / buf.length);
+    feedCtx.strokeStyle = "#2dd4bf";
+    feedCtx.lineWidth = Math.max(2, feed.height / 200);
+    feedCtx.beginPath();
+    for (let i = 0; i < buf.length; i++) {
+      const x = (i / buf.length) * feed.width;
+      const y = feed.height * 0.45 + Math.max(-1, Math.min(1, buf[i] * 0.8)) * feed.height * 0.3;
+      i ? feedCtx.lineTo(x, y) : feedCtx.moveTo(x, y);
+    }
+    feedCtx.stroke();
+    const lvl = Math.min(1, rms * 8);
+    feedCtx.fillStyle = "rgba(45,212,191,.25)";
+    feedCtx.fillRect(14, feed.height * 0.2, 10, feed.height * 0.5);
+    feedCtx.fillStyle = "#2dd4bf";
+    feedCtx.fillRect(14, feed.height * 0.2 + feed.height * 0.5 * (1 - lvl), 10, feed.height * 0.5 * lvl);
+    feedCtx.fillStyle = "rgba(255,255,255,.55)";
+    feedCtx.font = `${Math.round(feed.height / 34)}px system-ui`;
+    feedCtx.fillText(`Listening in 2 s windows (${live.src === "sound" ? "sound file" : "microphone"}), 16 kHz mono`, 34, feed.height * 0.16);
+  }
+  rafId = requestAnimationFrame(drawAudio);
+}
+function grabFrame(budget) {
+  let srcEl, sw, sh;
+  if (live.src === "camera") { srcEl = $("cam"); sw = srcEl.videoWidth; sh = srcEl.videoHeight; }
+  else {
+    // Demo feed: embed the picture itself (not the letterboxed canvas with its caption)
+    renderDemo(performance.now()); // also keeps the slideshow moving if the tab is in the background
+    srcEl = demoImgs[demoIdx]; sw = srcEl?.width; sh = srcEl?.height;
+  }
+  if (!sw || !sh) return null;
+  const maxSide = budget >= 280 ? 640 : 448;
+  const sc = Math.min(1, maxSide / Math.max(sw, sh));
+  grab.width = Math.round(sw * sc); grab.height = Math.round(sh * sc);
+  grabCtx.drawImage(srcEl, 0, 0, grab.width, grab.height);
+  return grabCtx.getImageData(0, 0, grab.width, grab.height);
+}
+
+async function visionLoop(token) {
+  while (live.running && token === live.token) {
+    const t0 = performance.now();
+    const budget = +$("budgetSel").value;
+    const f = grabFrame(budget);
+    if (f) {
+      try {
+        const base = { kind: "rgba", data: f.data.buffer, width: f.width, height: f.height, budget };
+        let embs;
+        if (liveTrained()) {
+          const inputs = deck().map((c) => ({ ...base, text: trainedQuery("rgba", c.title, c.context) }));
+          embs = (await rpc("embedInputs", { inputs }, [f.data.buffer])).embeddings;
+        } else {
+          embs = (await rpc("embedInput", { input: base }, [f.data.buffer])).embedding;
+        }
+        if (token !== live.token) break;
+        await scoreDeck(embs);
+        hud(performance.now() - t0);
+      } catch (e) { console.error(e); setStatus("error", e.message); await sleep(1000); }
+    }
+    const gap = targetGap() - (performance.now() - t0);
+    await sleep(Math.max(gap, 16));
+  }
+}
+const SR = 16000, WIN = 2 * SR;
+// The embedding of near-silence is not meaningful (tested: silence scores as speech),
+// so quiet windows are not sent to the model at all.
+const QUIET_DB = -55;
+function showQuiet(db) {
+  for (const c of deck()) {
+    const el = $("cards").querySelector(`.dcard[data-id="${c.id}"]`);
+    if (el) el.querySelector(".dverdict").innerHTML = `<b>quiet</b> input level ${db.toFixed(0)} dBFS is below the ${QUIET_DB} dBFS level gate: model not run`;
+  }
+  const ov = $("overlay");
+  ov.hidden = false;
+  ov.classList.add("uncertain");
+  $("ovLabel").textContent = "quiet";
+  $("ovPct").textContent = `level ${db.toFixed(0)} dBFS, below the ${QUIET_DB} dBFS gate: model not run`;
+  $("ringFg").style.strokeDashoffset = RING_LEN;
+}
+async function audioLoop(token) {
+  while (live.running && token === live.token) {
+    const t0 = performance.now();
+    if (live.ringFilled >= WIN) {
+      const win = new Float32Array(WIN);
+      const p = live.ringPos;
+      win.set(live.ring.subarray(p));
+      win.set(live.ring.subarray(0, p), WIN - p);
+      let e2 = 0;
+      for (let i = 0; i < win.length; i++) e2 += win[i] * win[i];
+      const db = 10 * Math.log10(e2 / win.length + 1e-12);
+      if (db < QUIET_DB) {
+        showQuiet(db);
+        await sleep(500);
+        continue;
+      }
+      try {
+        let embs;
+        if (liveTrained()) {
+          const inputs = deck().map((c) => ({ kind: "audio", audio: win, text: trainedQuery("audio", c.title, c.context) }));
+          embs = (await rpc("embedInputs", { inputs }, [win.buffer])).embeddings;
+        } else {
+          embs = (await rpc("embedInput", { input: { kind: "audio", audio: win } }, [win.buffer])).embedding;
+        }
+        if (token !== live.token) break;
+        await scoreDeck(embs);
+        hud(performance.now() - t0);
+      } catch (e) { console.error(e); setStatus("error", e.message); await sleep(1000); }
+    }
+    const gap = Math.max(model?.device === "wasm" ? 2000 : 1000, 0) - (performance.now() - t0);
+    await sleep(Math.max(gap, 50));
+  }
+}
+function setupAudioGraph(sourceNodeFactory) {
+  const ctx = new AudioContext({ sampleRate: SR });
+  live.audioCtx = ctx;
+  const src = sourceNodeFactory(ctx);
+  const an = ctx.createAnalyser();
+  an.fftSize = 2048;
+  live.analyser = an;
+  live.ring = new Float32Array(WIN); live.ringPos = 0; live.ringFilled = 0;
+  const proc = ctx.createScriptProcessor(4096, 1, 1);
+  const ratio = ctx.sampleRate / SR;
+  proc.onaudioprocess = (e) => {
+    const x = e.inputBuffer.getChannelData(0);
+    const n = Math.floor(x.length / ratio);
+    for (let i = 0; i < n; i++) {
+      live.ring[live.ringPos] = x[Math.floor(i * ratio)];
+      live.ringPos = (live.ringPos + 1) % WIN;
+    }
+    live.ringFilled += n;
+  };
+  src.connect(an);
+  src.connect(proc);
+  const mute = ctx.createGain(); mute.gain.value = 0;
+  proc.connect(mute); mute.connect(ctx.destination);
+  return src;
+}
+
+async function startLive(opts = {}) {
+  if (opts instanceof Event) opts = {};
+  stopLive(false);
+  const token = ++live.token;
+  const btn = $("startBtn");
+  btn.disabled = true;
+  const isAudio = deckName() === "audio";
+  try {
+    btn.textContent = "Loading model...";
+    await ensureModel(isAudio);
+    btn.textContent = "Starting...";
+    const stage = $("stage");
+    stage.classList.remove("camera", "mirror");
+    if (live.src === "camera") {
+      if (!navigator.mediaDevices?.getUserMedia) throw new Error("This browser cannot open a camera here. Try the Demo feed.");
+      live.stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: live.facing, width: { ideal: 1280 }, height: { ideal: 720 } }, audio: false });
+      const v = $("cam");
+      v.srcObject = live.stream;
+      await v.play();
+      stage.classList.add("camera");
+      if (live.facing === "user") stage.classList.add("mirror");
+      $("flipBtn").hidden = false;
+    } else if (live.src === "demo") {
+      await loadDemoImages();
+      demoStart = 0;
+      rafId = requestAnimationFrame(drawDemo);
+    } else if (live.src === "mic") {
+      if (!navigator.mediaDevices?.getUserMedia) throw new Error("This browser cannot open a microphone here. Try a sound file.");
+      live.stream = await navigator.mediaDevices.getUserMedia({ audio: { channelCount: 1, echoCancellation: false, noiseSuppression: false, autoGainControl: false } });
+      setupAudioGraph((ctx) => ctx.createMediaStreamSource(live.stream));
+      rafId = requestAnimationFrame(drawAudio);
+    } else if (live.src === "sound") {
+      const f = opts.file || (await pickFile("audio/*"));
+      const el = new Audio(URL.createObjectURL(f));
+      el.loop = true;
+      live.fileEl = el;
+      setupAudioGraph((ctx) => { const s = ctx.createMediaElementSource(el); s.connect(ctx.destination); return s; });
+      await el.play();
+      rafId = requestAnimationFrame(drawAudio);
+    }
+    live.running = true;
+    live.fps = live.lat = live.lastDone = 0;
+    $("idle").hidden = true;
+    $("stopBtn").disabled = false;
+    renderCards();
+    if (isAudio) audioLoop(token); else visionLoop(token);
+  } catch (e) {
+    console.error(e);
+    stopLive();
+    $("idle").querySelector("p").textContent = e.message;
+  } finally {
+    btn.disabled = false;
+    btn.textContent = "Start live decisions";
+  }
+}
+function pickFile(accept) {
+  return new Promise((res, rej) => {
+    const i = document.createElement("input");
+    i.type = "file"; i.accept = accept;
+    i.onchange = () => (i.files[0] ? res(i.files[0]) : rej(new Error("No file chosen.")));
+    i.click();
+  });
+}
+function stopLive(showIdle = true) {
+  live.running = false;
+  live.token++;
+  cancelAnimationFrame(rafId);
+  if (live.stream) { live.stream.getTracks().forEach((t) => t.stop()); live.stream = null; }
+  if (live.audioCtx) { live.audioCtx.close().catch(() => {}); live.audioCtx = null; live.analyser = null; }
+  if (live.fileEl) { live.fileEl.pause(); live.fileEl = null; }
+  $("cam").srcObject = null;
+  $("stopBtn").disabled = true;
+  $("flipBtn").hidden = live.src !== "camera";
+  if (showIdle) { $("idle").hidden = false; $("overlay").hidden = true; }
+}
+$("startBtn").addEventListener("click", () => startLive());
+$("stopBtn").addEventListener("click", () => stopLive());
+$("flipBtn").addEventListener("click", () => { live.facing = live.facing === "user" ? "environment" : "user"; if (live.running) startLive(); });
+document.querySelectorAll(".src").forEach((b) =>
+  b.addEventListener("click", () => {
+    const wasRunning = live.running;
+    stopLive();
+    live.src = b.dataset.src;
+    document.querySelectorAll(".src").forEach((x) => x.classList.toggle("active", x === b));
+    $("flipBtn").hidden = live.src !== "camera";
+    $("idle").querySelector("p").textContent =
+      live.src === "camera" ? "Your camera stays on this device. Frames are embedded in the browser and dropped."
+      : live.src === "mic" ? "Listens in 2 second windows. Loads the audio encoder too (about 190 MB more at q4)."
+      : live.src === "sound" ? "Plays a sound file of your choice through the same 2 second windows."
+      : "Cycles through the sample images as if they were a camera feed.";
+    renderTemplates();
+    renderCards();
+    if (wasRunning && live.src === "demo") startLive();
+  })
+);
+// The sound-file source shares the microphone deck; expose it as a fourth button.
+$("flipBtn").insertAdjacentHTML("beforebegin", `<button class="src" data-src="sound">Sound file</button>`);
+const soundBtn = document.querySelector('.src[data-src="sound"]');
+soundBtn.addEventListener("click", () => {
+  stopLive();
+  live.src = "sound";
+  document.querySelectorAll(".src").forEach((x) => x.classList.toggle("active", x === soundBtn));
+  $("flipBtn").hidden = true;
+  $("idle").querySelector("p").textContent = "Plays a sound file of your choice through the same 2 second windows. The file stays on this device.";
+  renderTemplates();
+  renderCards();
+});
+document.addEventListener("visibilitychange", () => { if (document.hidden && live.running && live.src === "camera") stopLive(); });
+
+renderTemplates();
+renderCards();
+paintGate();
+$("idle").querySelector("p").textContent = "Cycles through the sample images as if they were a camera feed. Loads the model on first start (about 260 to 290 MB at 4 bits, cached afterwards).";
+
+// Expose a small hook for automated checks in the page.
+$("livePrompt").addEventListener("change", () => {
+  for (const d of Object.values(decks)) for (const c of d) { c.probs = null; c.n = c.onDevice = c.escalate = 0; }
+  renderCards();
+  paintGate();
+});
+window.decideApp = { ensureModel, runAll, decideCore, eggDecide, eggRunAll, EGG, trainedQuery, PRESETS, live, decks, startLive, stopLive, yesNoOptions, parseOptions, embedTexts, rpc, get model() { return model; } };

examples/samples.json

@@ -156,7 +156,7 @@
  {
   "name": "Egg candling (good)",
   "files": [
-   "examples/egg-candling-good-1.jpg"
+   "examples/egg-test/egg-test-good-81.jpg"
   ],
   "state": "Candling photo: a light is shone through the egg in a dark room.",
   "type": "choice",
@@ -167,7 +167,7 @@
  {
   "name": "Egg candling (good)",
   "files": [
-   "examples/egg-candling-good-10.jpg"
+   "examples/egg-test/egg-test-good-125.jpg"
   ],
   "state": "Candling photo: a light is shone through the egg in a dark room.",
   "type": "choice",
@@ -178,7 +178,7 @@
  {
   "name": "Egg candling (bad)",
   "files": [
-   "examples/egg-candling-bad-1.jpg"
+   "examples/egg-test/egg-test-bad-78.jpg"
   ],
   "state": "Candling photo: a light is shone through the egg in a dark room.",
   "type": "choice",
@@ -189,7 +189,7 @@
  {
   "name": "Egg candling (bad)",
   "files": [
-   "examples/egg-candling-bad-104.jpg"
+   "examples/egg-test/egg-test-bad-107.jpg"
   ],
   "state": "Candling photo: a light is shone through the egg in a dark room.",
   "type": "choice",

index.html

@@ -7,14 +7,14 @@
   <meta name="theme-color" content="#0b0d12" />
   <title>Decide Live</title>
   <meta name="description" content="Decide Live: on-device decisions from camera and microphone. A multimodal embedding model runs in your browser and turns every frame into calibrated probabilities." />
-  <link rel="stylesheet" href="./style.css?v=4" />
+  <link rel="stylesheet" href="./style.css?v=5" />
 </head>
 <body>
   <header class="top">
     <div class="wrap topbar">
       <div class="brand">
         <h1>Decide Live</h1>
-        <p class="sub">On-device decisions from camera and microphone. Every frame is embedded in your browser by EmbeddingGemma 2 and scored against the options you write. No text generation, no tokens, no server.</p>
+        <p class="sub">On-device decisions from camera and microphone. Every frame is embedded in your browser by EmbeddingGemma 2, fine-tuned for decisions, and scored against the options you write. No text generation, no tokens, no server.</p>
       </div>
       <div class="statusbox">
         <div class="status" id="status"><span class="dot"></span><span id="statusText">Model not loaded</span></div>
@@ -26,6 +26,7 @@
     <nav class="wrap tabs" role="tablist">
       <button class="tab active" data-tab="live" role="tab">Live</button>
       <button class="tab" data-tab="single" role="tab">Single input</button>
+      <button class="tab" data-tab="egg" role="tab">Egg check</button>
       <button class="tab" data-tab="samples" role="tab">Sample tests</button>
       <button class="tab" data-tab="about" role="tab">How it works</button>
     </nav>
@@ -59,7 +60,7 @@
           </div>
           <div class="idle" id="idle">
             <button class="big" id="startBtn">Start live decisions</button>
-            <p>Loads the model on first start (about 290 MB at q4, cached afterwards).</p>
+            <p>Loads the model on first start (about 260 to 290 MB at 4 bits, cached afterwards).</p>
           </div>
         </div>
         <div class="controls">
@@ -79,6 +80,12 @@
               <option value="280">fine (280)</option>
             </select>
           </label>
+          <label>Prompt
+            <select id="livePrompt">
+              <option value="trained" selected>question + frame, as trained (one pass per card)</option>
+              <option value="alone">frame alone (one pass for all cards)</option>
+            </select>
+          </label>
           <label>Smoothing
             <select id="smoothSel">
               <option value="0">off</option>
@@ -157,11 +164,11 @@
       <label class="col" id="optionsWrap">Options, 2 to 8, one per line as <code>key: description</code>
         <textarea id="optionsInput" rows="6" placeholder="good: Normal, healthy egg&#10;bad: Defective, spoiled or damaged egg"></textarea>
       </label>
-      <p class="note" id="yesnoNote" hidden>Yes / no mode builds two options from the statement: the statement and its negation. For a question, the two options are the question followed by "Yes." and by "No.".</p>
+      <p class="note" id="yesnoNote" hidden>In the trained format (default), the question stays in the query and the two options are "Yes" and "No". The older formats build two options from the statement: the statement and its negation, or for a question, the question followed by "Yes." and by "No.".</p>
       <details class="adv">
         <summary>Settings</summary>
-        <label class="col">Temperature <span id="tempVal">0.05</span>
-          <input type="range" id="temp" min="0.005" max="0.5" step="0.005" value="0.05" />
+        <label class="col">Temperature <span id="tempVal">0.0501</span> <button type="button" class="ghost small" id="resetTemp">Use trained value</button>
+          <input type="range" id="temp" min="0.005" max="0.5" step="0.0001" value="0.0501" />
         </label>
         <label class="col">Prompt format
           <select id="preset"></select>
@@ -179,7 +186,6 @@
             <option value="auto">Auto: 4-bit (q4f16 on WebGPU with fp16 support, else q4)</option>
             <option value="q4">q4 (4-bit, works everywhere)</option>
             <option value="q4f16">q4f16 (4-bit weights, fp16 math; WebGPU with fp16 only)</option>
-            <option value="q8">q8 (larger, closer to full precision)</option>
             <option value="fp16">fp16 (largest; WebGPU only)</option>
           </select>
         </label>
@@ -200,11 +206,36 @@
     </section>
   </main>
 
+  <!-- EGG CHECK -->
+  <main class="wrap view" data-view="egg" hidden>
+    <section class="panel">
+      <h2>Egg check</h2>
+      <p class="note">Candling photos (a light shone through the egg in a dark room). The decision uses the format the model was trained with:
+        the photo with <code>Is this egg good or bad?</code> and the candling context, scored against <code>Normal, healthy egg</code> and
+        <code>Defective, spoiled or damaged egg</code>. The 8 photos below are held out: they were not used in training. Pick one, run all 8, or use your own photo.</p>
+      <div class="egggrid" id="eggGrid"></div>
+      <div class="btnrow">
+        <button id="eggRunAll" class="primary inline">Check all 8</button>
+        <label class="drop inline"><input type="file" id="eggFile" accept="image/*" /><span>Use your own candling photo (stays on this device)</span></label>
+      </div>
+      <div id="eggSummary" class="summary"></div>
+      <div class="eggresult" id="eggResult" hidden>
+        <img id="eggPreview" alt="Selected egg photo" />
+        <div id="eggOut"></div>
+      </div>
+      <div class="tablewrap"><table id="eggTable" hidden>
+        <thead><tr><th>Photo</th><th>Gold</th><th>Decision</th><th>p(good)</th><th>p(bad)</th><th>OK</th><th>ms</th></tr></thead>
+        <tbody></tbody>
+      </table></div>
+      <p class="note">Photos: Good and Bad Eggs Identification Image Dataset (Mendeley Data, doi:10.17632/mdty358x8m.1), CC BY 4.0. See <a href="./CREDITS.md" target="_blank">CREDITS.md</a>.</p>
+    </section>
+  </main>
+
   <!-- SAMPLES -->
   <main class="wrap view" data-view="samples" hidden>
     <section class="panel">
       <h2>Sample tests (18)</h2>
-      <p class="note">Counting, yes / no, spatial relations, a chart, a receipt, app screens, scene text, common sense and egg candling. Each test runs in this browser with the prompt format, image detail and temperature chosen under Single input &gt; Settings. Yes / no tests use the yes / no mode (the question followed by "Yes." or "No.").</p>
+      <p class="note">Counting, yes / no, spatial relations, a chart, a receipt, app screens, scene text, common sense and egg candling (the egg photos are held out from training; the other images may come from datasets the training mix drew on). Each test runs in this browser with the prompt format, image detail and temperature chosen under Single input &gt; Settings. In the trained format, yes / no tests keep the question in the query and score the options "Yes" and "No"; the older formats use the yes / no mode (the question followed by "Yes." or "No.").</p>
       <div class="btnrow">
         <button id="runAllBtn" class="primary inline">Run all samples</button>
         <button id="compareBtn" class="ghost">Compare all prompt formats</button>
@@ -225,10 +256,10 @@
     <section class="panel prose">
       <h2>How it works</h2>
       <ol>
-        <li>The input (a camera frame, an image, a text, a 2 second sound window or a short video) is turned into one 768-number vector by <a href="https://huggingface.co/google/embeddinggemma-2" target="_blank" rel="noopener">EmbeddingGemma 2</a>, using the ONNX build <a href="https://huggingface.co/onnx-community/embeddinggemma-2-ONNX" target="_blank" rel="noopener">onnx-community/embeddinggemma-2-ONNX</a> and <a href="https://github.com/huggingface/transformers.js" target="_blank" rel="noopener">transformers.js</a> 4.3.1 on WebGPU (or WASM on the CPU).</li>
+        <li>The input (a camera frame, an image, a text, a 2 second sound window or a short video) and the question are turned into one 768-number vector (mean pooling, then L2 normalization) by <a href="https://huggingface.co/google/embeddinggemma-2" target="_blank" rel="noopener">EmbeddingGemma 2</a> (Apache-2.0), fine-tuned for decisions: the question and the media go into one embedding and each option into another, and training pushes the right option closest. It runs as ONNX (same file layout as <a href="https://huggingface.co/onnx-community/embeddinggemma-2-ONNX" target="_blank" rel="noopener">onnx-community/embeddinggemma-2-ONNX</a>, with the fine-tuned weights) with <a href="https://github.com/huggingface/transformers.js" target="_blank" rel="noopener">transformers.js</a> 4.3.1 on WebGPU (or WASM on the CPU). The model files are served with this page.</li>
         <li>Each option description is embedded once and cached.</li>
-        <li>The cosine similarity between the input and each option is divided by a temperature (default 0.05) and passed through a softmax, giving one probability per option.</li>
-        <li>In Live mode the frame is embedded once and all decision cards are scored from that same vector, so adding cards costs almost nothing.</li>
+        <li>The probabilities are softmax(scale &times; cosine) over the options. The scale was learned in training (about 19.96), so the default temperature is 1 / scale, about 0.050.</li>
+        <li>In Live mode each card embeds the frame together with its own question (one pass per card). The alternative "frame alone" setting embeds the frame once and scores all cards from that vector, which is faster but is not the format the model was trained with.</li>
         <li>A card whose top probability is below its threshold is marked uncertain. That is where a larger model would take over; this page only counts it.</li>
       </ol>
       <h3>Privacy</h3>
@@ -240,14 +271,15 @@
         <li>An embedding model compares meanings; it does not read, count or reason step by step. Questions about exact counts, small text or negation are hard for it.</li>
         <li>Probabilities depend on the temperature. They are comparable between options of one card, not calibrated against ground truth.</li>
         <li>WebGPU needs a recent Chrome, Edge or Safari. Without it the page falls back to the CPU (WASM): it works, but it downloads a larger fp16 model (about 880 MB, because the 4-bit graphs need an operator the CPU runtime lacks) and takes several seconds per image, so the live rate drops to a frame every few seconds.</li>
+        <li>The fine-tuning targeted image decisions (including egg candling). The audio encoder is the unchanged base one, so sound decisions are not tuned.</li>
       </ul>
       <p class="note">Sample image credits: <a href="./CREDITS.md" target="_blank">CREDITS.md</a>. Code: Apache-2.0.</p>
     </section>
   </main>
 
   <footer class="wrap foot">
-    <p>EmbeddingGemma 2 by Google DeepMind (Apache-2.0), run with transformers.js. This page sends no data anywhere.</p>
+    <p>Based on EmbeddingGemma 2 by Google DeepMind (Apache-2.0), fine-tuned for decisions, run with transformers.js. This page sends no data anywhere.</p>
   </footer>
-  <script type="module" src="./app.js?v=4"></script>
+  <script type="module" src="./app.js?v=5"></script>
 </body>
 </html>

models/egemma2-decide/chat_template.jinja

@@ -0,0 +1 @@
+{%- for msg in messages if msg.get('role') == 'system' -%}{%- if msg.get('content') is string -%}{{ msg['content'] }}{%- else -%}{%- for item in msg['content'] if item.get('type') == 'text' -%}{{ item['text'] }}{%- endfor -%}{%- endif -%}{%- endfor -%}{%- for msg in messages if msg.get('role') != 'system' -%}{%- if msg.get('content') is string -%}{{ msg['content'] }}{%- else -%}{%- set existing_text = msg['content'] | selectattr('type', 'equalto', 'text') | map(attribute='text') | join -%}{%- set has_manual_placeholders = ('<|image|>' in existing_text) or ('<|video|>' in existing_text) or ('<|audio|>' in existing_text) -%}{%- for item in msg['content'] -%}{%- if item.get('type') == 'text' -%}{{ item['text'] }}{%- elif not has_manual_placeholders and item.get('type') == 'image' -%}<|image|>{%- elif not has_manual_placeholders and item.get('type') == 'video' -%}<|video|>{%- elif not has_manual_placeholders and item.get('type') == 'audio' -%}<|audio|>{%- endif -%}{%- endfor -%}{%- endif -%}{%- endfor -%}

models/egemma2-decide/config.json

@@ -0,0 +1,193 @@
+{
+  "architectures": [
+    "EmbeddingGemma2Model"
+  ],
+  "audio_config": {
+    "_name_or_path": "",
+    "architectures": null,
+    "attention_chunk_size": 12,
+    "attention_context_left": 13,
+    "attention_context_right": 0,
+    "attention_invalid_logits_value": -1000000000.0,
+    "attention_logit_cap": 50.0,
+    "chunk_size_feed_forward": 0,
+    "conv_kernel_size": 5,
+    "dtype": "bfloat16",
+    "gradient_clipping": 10000000000.0,
+    "hidden_act": "silu",
+    "hidden_size": 1024,
+    "id2label": {
+      "0": "LABEL_0",
+      "1": "LABEL_1"
+    },
+    "initializer_range": 0.02,
+    "is_encoder_decoder": false,
+    "label2id": {
+      "LABEL_0": 0,
+      "LABEL_1": 1
+    },
+    "model_type": "gemma4_audio",
+    "num_attention_heads": 8,
+    "num_hidden_layers": 12,
+    "output_attentions": false,
+    "output_hidden_states": false,
+    "output_proj_dims": 1536,
+    "problem_type": null,
+    "residual_weight": 0.5,
+    "return_dict": true,
+    "rms_norm_eps": 1e-06,
+    "subsampling_conv_channels": [
+      128,
+      32
+    ],
+    "use_clipped_linears": true
+  },
+  "audio_token_id": 258881,
+  "boa_token_id": 256000,
+  "boi_token_id": 255999,
+  "dtype": "bfloat16",
+  "eoa_token_index": 258883,
+  "eoi_token_id": 258882,
+  "image_token_id": 258880,
+  "initializer_range": 0.02,
+  "model_type": "embedding_gemma2",
+  "text_config": {
+    "attention_bias": false,
+    "attention_dropout": 0.0,
+    "bos_token_id": 2,
+    "dtype": "bfloat16",
+    "embedding_dim": 768,
+    "eos_token_id": 1,
+    "head_dim": 256,
+    "hidden_activation": "gelu_pytorch_tanh",
+    "hidden_size": 512,
+    "hidden_size_per_layer_input": 512,
+    "initializer_range": 0.02,
+    "intermediate_size": 2048,
+    "layer_types": [
+      "sliding_attention",
+      "sliding_attention",
+      "sliding_attention",
+      "sliding_attention",
+      "sliding_attention",
+      "full_attention",
+      "sliding_attention",
+      "sliding_attention",
+      "sliding_attention",
+      "sliding_attention",
+      "sliding_attention",
+      "full_attention",
+      "sliding_attention",
+      "sliding_attention",
+      "sliding_attention",
+      "sliding_attention",
+      "sliding_attention",
+      "full_attention",
+      "sliding_attention",
+      "sliding_attention",
+      "sliding_attention",
+      "sliding_attention",
+      "sliding_attention",
+      "full_attention"
+    ],
+    "max_position_embeddings": 262144,
+    "model_type": "embedding_gemma2_text",
+    "num_attention_heads": 4,
+    "num_hidden_layers": 24,
+    "num_key_value_heads": 2,
+    "pad_token_id": 0,
+    "per_layer_config": {
+      "05": {
+        "head_dim": 512,
+        "num_key_value_heads": 1
+      },
+      "11": {
+        "head_dim": 512,
+        "num_key_value_heads": 1
+      },
+      "17": {
+        "head_dim": 512,
+        "num_key_value_heads": 1
+      },
+      "23": {
+        "head_dim": 512,
+        "num_key_value_heads": 1
+      }
+    },
+    "rms_norm_eps": 1e-06,
+    "rope_parameters": {
+      "full_attention": {
+        "rope_theta": 1000000.0,
+        "rope_type": "default"
+      },
+      "sliding_attention": {
+        "rope_theta": 10000.0,
+        "rope_type": "default"
+      }
+    },
+    "sliding_window": 512,
+    "vocab_size": 262144
+  },
+  "transformers_version": "5.18.0.dev0",
+  "video_token_id": 258884,
+  "vision_config": {
+    "_name_or_path": "",
+    "architectures": null,
+    "attention_bias": false,
+    "attention_dropout": 0.0,
+    "chunk_size_feed_forward": 0,
+    "default_output_length": 280,
+    "dtype": "bfloat16",
+    "global_head_dim": 64,
+    "head_dim": 64,
+    "hidden_activation": "gelu_pytorch_tanh",
+    "hidden_size": 768,
+    "id2label": {
+      "0": "LABEL_0",
+      "1": "LABEL_1"
+    },
+    "initializer_range": 0.02,
+    "intermediate_size": 3072,
+    "is_encoder_decoder": false,
+    "label2id": {
+      "LABEL_0": 0,
+      "LABEL_1": 1
+    },
+    "max_position_embeddings": 131072,
+    "model_type": "gemma4_vision",
+    "num_attention_heads": 12,
+    "num_hidden_layers": 16,
+    "num_key_value_heads": 12,
+    "output_attentions": false,
+    "output_hidden_states": false,
+    "patch_size": 16,
+    "pooling_kernel_size": 3,
+    "position_embedding_size": 10240,
+    "problem_type": null,
+    "return_dict": true,
+    "rms_norm_eps": 1e-06,
+    "rope_parameters": {
+      "rope_theta": 100.0,
+      "rope_type": "axial"
+    },
+    "standardize": false,
+    "use_clipped_linears": false
+  },
+  "vision_soft_tokens_per_image": 280,
+  "transformers.js_config": {
+    "use_external_data_format": {
+      "audio_encoder.onnx": 1,
+      "audio_encoder_fp16.onnx": 1,
+      "audio_encoder_q4.onnx": 1,
+      "audio_encoder_q4f16.onnx": 1,
+      "model.onnx": 1,
+      "model_fp16.onnx": 1,
+      "model_q4.onnx": 1,
+      "model_q4f16.onnx": 1,
+      "vision_encoder.onnx": 1,
+      "vision_encoder_fp16.onnx": 1,
+      "vision_encoder_q4.onnx": 1,
+      "vision_encoder_q4f16.onnx": 1
+    }
+  }
+}

models/egemma2-decide/decision.json

@@ -0,0 +1,10 @@
+{
+  "scale": 19.96074676513672,
+  "log_scale": 2.993767738342285,
+  "base_model": "google/embeddinggemma-2",
+  "source_checkpoint": "runs/eg_v1/final",
+  "probability": "softmax(scale * cos(query_embedding, option_embedding)) over the options",
+  "embedding": "mean of last_hidden_state over the attention mask, then L2 normalisation (ONNX output sentence_embedding)",
+  "query_format": "<|image|> (one per image, first) + \"task: classification | query: {question}\" + \"\nContext: {context}\" when a context is given",
+  "option_format": "title: none | text: {option description}"
+}

models/egemma2-decide/onnx/audio_encoder_q4.onnx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c4cce3370e72262280d00293cac038896050a03a8e9a27e10b061ca97510296e
+size 245543

models/egemma2-decide/onnx/audio_encoder_q4.onnx_data

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ba9328e6341360974083085b44b2bba265003bda564740f7c4c23ed9928f17e2
+size 189075968

models/egemma2-decide/onnx/audio_encoder_q4f16.onnx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e61ee0d27a4ee2b13cfa4f6492d6bc9e18d23f998992b31e9c7355be6c028d58
+size 252538

models/egemma2-decide/onnx/audio_encoder_q4f16.onnx_data

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:356991f24ed4daee4728997a71fe11b72ebf5c053410ac29c7ce27d0f3fc7655
+size 170348800