app.js

// 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))];
    const reelFiles = [...demoFiles, ...EGG_PHOTOS.map((p) => p.file)];
    $("reel").innerHTML = [...reelFiles, ...reelFiles].map((f) => `<img src="${f}" alt="" decoding="async" onload="this.classList.add('in')" />`).join("");
    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;
}
function eggThumb(i) { return $("eggGrid").querySelector(`.eggthumb[data-i="${i}"]`); }
function stampEgg(i, pred, gold, conf) {
  const t = eggThumb(i);
  if (!t) return;
  t.classList.remove("busy");
  t.querySelector(".stamp")?.remove();
  t.insertAdjacentHTML("beforeend", `<span class="stamp ${pred === "good" ? "good" : "bad"} ${pred === gold ? "" : "miss"}" title="${pred === gold ? "matches gold" : "differs from gold"}">${esc(pred)} ${Math.round(conf * 100)}%</span>`);
}
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...";
    b.classList.add("busy");
    const blob = await fetchBlob(p.file);
    const r = await eggDecide(blob).finally(() => b.classList.remove("busy"));
    eggShow(blob, r, p.gold);
    stampEgg(+b.dataset.i, EGG.options[r.top].key, p.gold, r.probs[r.top]);
    $("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;
  document.querySelectorAll(".eggthumb .stamp").forEach((x) => x.remove());
  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...";
    eggThumb(i)?.classList.add("busy");
    const blob = await fetchBlob(p.file);
    const r = await eggDecide(blob);
    const pred = EGG.options[r.top].key;
    stampEgg(i, pred, p.gold, r.probs[r.top]);
    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;
  const label = sure ? c.options[top].key.replace(/_/g, " ") : `uncertain`;
  const ovl = $("ovLabel");
  if (ovl.textContent !== label) { ovl.textContent = label; ovl.classList.remove("pop"); void ovl.offsetWidth; ovl.classList.add("pop"); }
  $("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();
}
// Decision stream: one row per real decision on the primary card, newest first.
// A row is added when the verdict changes, or at most every 1.5 s while it holds.
const thumbCv = document.createElement("canvas");
const stream = { last: "", lastAt: 0, max: 7 };
function pushTick(ms, srcCanvas) {
  const c = deck().find((x) => x.id === primaryId[deckName()]);
  if (!c || !c.probs) return;
  const top = argmax(c.probs), conf = c.probs[top], sure = conf >= c.threshold;
  const label = sure ? c.options[top].key.replace(/_/g, " ") : "uncertain";
  const now = performance.now();
  if (label === stream.last && now - stream.lastAt < 1500) return;
  stream.last = label; stream.lastAt = now;
  let thumb = "";
  if (srcCanvas && srcCanvas.width) {
    thumbCv.width = 104; thumbCv.height = Math.max(1, Math.round((104 * srcCanvas.height) / srcCanvas.width));
    thumbCv.getContext("2d").drawImage(srcCanvas, 0, 0, thumbCv.width, thumbCv.height);
    thumb = thumbCv.toDataURL("image/jpeg", 0.7);
  }
  const li = document.createElement("li");
  li.className = `tick ${sure ? "" : "uncertain"}`;
  li.innerHTML = `${thumb ? `<img src="${thumb}" alt="" />` : "<span></span>"}<div class="tl"><div class="tq">${esc(c.title)}</div><div class="tv">${esc(label)}${sure ? "" : ` <span class="note">(${esc(c.options[top].key.replace(/_/g, " "))})</span>`}</div></div><div class="tm"><b>${Math.round(conf * 100)}%</b>${ms.toFixed(0)} ms</div>`;
  const list = $("stream");
  list.prepend(li);
  while (list.children.length > stream.max) list.lastChild.remove();
}
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 = "#e9eef5";
  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 = "#e9eef5";
  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 = "#0b9c94";
    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(11,156,148,.18)";
    feedCtx.fillRect(14, feed.height * 0.2, 10, feed.height * 0.5);
    feedCtx.fillStyle = "#0b9c94";
    feedCtx.fillRect(14, feed.height * 0.2 + feed.height * 0.5 * (1 - lvl), 10, feed.height * 0.5 * lvl);
    feedCtx.fillStyle = "rgba(14,26,43,.6)";
    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);
        pushTick(performance.now() - t0, grab);
      } 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;
    $("stage").classList.add("running");
    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++;
  $("stage").classList.remove("running");
  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; } };