Deploy static browser-speak demo

README.md

@@ -1,10 +1,25 @@
 ---
 title: Browser Speak
-emoji: 📉
-colorFrom: green
-colorTo: yellow
 sdk: static
+app_file: index.html
 pinned: false
+license: mit
+short_description: Client-side voice LLM with local STT and TTS.
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Browser Speak
+
+Static browser demo for client-side voice interaction:
+
+- VAD: `onnx-community/silero-vad`
+- STT: `onnx-community/moonshine-base-ONNX`
+- LLM: `HuggingFaceTB/SmolLM2-135M-Instruct`
+- TTS: `onnx-community/Supertonic-TTS-ONNX`
+
+Open the Space, click **Load models**, then **Start mic**. The first load downloads model assets into the browser cache; after that, inference runs in the tab with no server inference.
+
+Known testing notes:
+
+- Use Chrome or another browser with WebGPU/WASM support and microphone permission enabled.
+- The app automatically falls back to WASM if hardware WebGPU is unavailable.
+- Initial load can be large because STT, LLM, TTS, and voice embeddings are all browser-side assets.

app.js

@@ -0,0 +1,2591 @@
+const $ = (id) => document.getElementById(id);
+
+const elements = {
+  loadButton: $("loadButton"),
+  micButton: $("micButton"),
+  stopButton: $("stopButton"),
+  suiteButton: $("suiteButton"),
+  benchmarkButton: $("benchmarkButton"),
+  chatBenchmarkButton: $("chatBenchmarkButton"),
+  ttsBenchmarkButton: $("ttsBenchmarkButton"),
+  loopbackButton: $("loopbackButton"),
+  bargeInButton: $("bargeInButton"),
+  micBenchmarkButton: $("micBenchmarkButton"),
+  micSeriesButton: $("micSeriesButton"),
+  copyResultsButton: $("copyResultsButton"),
+  clearResultsButton: $("clearResultsButton"),
+  clearLogButton: $("clearLogButton"),
+  deviceSelect: $("deviceSelect"),
+  runtimeStatus: $("runtimeStatus"),
+  runtimeDeviceStatus: $("runtimeDeviceStatus"),
+  runtimeDeviceDetail: $("runtimeDeviceDetail"),
+  llmModelSelect: $("llmModelSelect"),
+  asrModelSelect: $("asrModelSelect"),
+  voiceSelect: $("voiceSelect"),
+  ttsSteps: $("ttsSteps"),
+  ttsStepsValue: $("ttsStepsValue"),
+  vadSilence: $("vadSilence"),
+  vadSilenceValue: $("vadSilenceValue"),
+  partialToggle: $("partialToggle"),
+  micBadge: $("micBadge"),
+  audioBadge: $("audioBadge"),
+  partialTranscript: $("partialTranscript"),
+  finalTranscript: $("finalTranscript"),
+  llmOutput: $("llmOutput"),
+  eventLog: $("eventLog"),
+  benchmarkSummary: $("benchmarkSummary"),
+  resultsBody: $("resultsBody"),
+  micValidationCard: $("micValidationCard"),
+  micValidationStatus: $("micValidationStatus"),
+  micValidationDetail: $("micValidationDetail"),
+  micValidationProgressBar: $("micValidationProgressBar"),
+  vadCloseLatency: $("vadCloseLatency"),
+  asrLatency: $("asrLatency"),
+  firstTokenLatency: $("firstTokenLatency"),
+  firstTtsQueuedLatency: $("firstTtsQueuedLatency"),
+  ttsSynthLatency: $("ttsSynthLatency"),
+  firstAudioLatency: $("firstAudioLatency"),
+  speechToAudioLatency: $("speechToAudioLatency"),
+  decodeRate: $("decodeRate"),
+  tiles: {
+    vad: $("vadTile"),
+    asr: $("asrTile"),
+    llm: $("llmTile"),
+    tts: $("ttsTile"),
+  },
+  states: {
+    vad: $("vadState"),
+    asr: $("asrState"),
+    llm: $("llmState"),
+    tts: $("ttsState"),
+  },
+};
+
+const APP_IDENTITY_PROMPT = "What app is this?";
+const APP_IDENTITY_ANSWER =
+  "This is a client-side browser voice assistant demo with local speech recognition, an LLM, and Supertonic TTS.";
+const GENERIC_SYSTEM_PROMPT =
+  "You are the assistant inside a local browser voice demo. Reply in one short sentence under 18 words by default. Do not wrap responses in quotation marks.";
+const IDENTITY_SYSTEM_PROMPT = `If asked what this demo, app, or application is, reply exactly: ${APP_IDENTITY_ANSWER} Do not shorten or paraphrase that identity answer. You are the assistant inside that local browser voice demo. Reply in one short sentence under 18 words by default. Do not wrap responses in quotation marks.`;
+const SYSTEM_MESSAGES = [
+  {
+    role: "system",
+    content: GENERIC_SYSTEM_PROMPT,
+  },
+];
+const IDENTITY_PRIMER_MESSAGES = [
+  {
+    role: "user",
+    content: APP_IDENTITY_PROMPT,
+  },
+  {
+    role: "assistant",
+    content: APP_IDENTITY_ANSWER,
+  },
+];
+const APP_IDENTITY_QUALITY_RULES = [
+  { label: "client/browser/local", pattern: /\b(client(?:-side)?|browser|local)\b/i },
+  { label: "speech recognition", pattern: /\b(speech recognition|stt|transcrib(?:e|es|ing|er|ers|ed)?)\b/i },
+  { label: "LLM", pattern: /\b(llm|language model)\b/i },
+  { label: "TTS/Supertonic", pattern: /\b(tts|supertonic|speech synthesis|text-to-speech)\b/i },
+];
+const WEBGPU_ONLY_LLMS = new Set([
+  "onnx-community/Qwen3-0.6B-ONNX",
+  "onnx-community/granite-4.0-350m-ONNX-web",
+  "HuggingFaceTB/SmolLM2-1.7B-Instruct",
+]);
+const WEBGPU_ONLY_REASONS = new Map([
+  [
+    "onnx-community/granite-4.0-350m-ONNX-web",
+    "its q4 WASM external data is about 576 MB; keep it on WebGPU until it is measured there.",
+  ],
+  [
+    "onnx-community/Qwen3-0.6B-ONNX",
+    "local testing showed its q4 WASM load can exhaust the browser.",
+  ],
+  [
+    "HuggingFaceTB/SmolLM2-1.7B-Instruct",
+    "its browser assets are too large for this WASM fallback test environment.",
+  ],
+]);
+
+const DEFAULT_VAD_SILENCE_MS = 480;
+const MIN_VAD_SILENCE_MS = 200;
+const MAX_VAD_SILENCE_MS = 800;
+const DEFAULT_LOOPBACK_SPEED = 1.10;
+const MIC_START_TIMEOUT_MS = 15000;
+const DEFAULT_TTS_CHUNKING = Object.freeze({
+  firstSentenceMinChars: 5,
+  sentenceMinChars: 8,
+  firstClauseMinChars: 5,
+  clauseMinChars: 24,
+  firstTargetChars: 5,
+  targetChars: 36,
+  firstMinSpaceChars: 3,
+  minSpaceChars: 20,
+});
+
+const state = {
+  asrWorker: null,
+  llmWorker: null,
+  ttsWorker: null,
+  webgpuAvailable: null,
+  webgpuAdapterInfo: null,
+  webgpuAdapterFeatures: [],
+  webgpuSoftwareAdapter: false,
+  modelsLoaded: false,
+  modelsLoading: false,
+  micActive: false,
+  mediaStream: null,
+  audioContext: null,
+  micSource: null,
+  workletNode: null,
+  micMonitorGain: null,
+  playback: null,
+  messages: initialMessages(),
+  currentAssistant: "",
+  currentUserStartedAt: null,
+  lastSpeechEndAt: null,
+  lastVadCloseAt: null,
+  lastVadCloseDelayMs: null,
+  lastTranscriptAt: null,
+  awaitingFirstToken: false,
+  awaitingFirstAudio: false,
+  firstTtsChunkQueued: false,
+  ttsBuffer: "",
+  ttsSequence: 0,
+  loopbackRequestId: 0,
+  loopbackFeedTimers: new Set(),
+  ttsVoiceRequestId: 0,
+  ttsVoiceRequests: new Map(),
+  automationSynthesisRequestId: 0,
+  automationSynthesisRequests: new Map(),
+  activeTurnId: 0,
+  modelLoadStartedAt: null,
+  loadedStack: null,
+  inputSampleRate: null,
+  micInputStats: {
+    chunks: 0,
+    samples: 0,
+    peak: 0,
+    sumSquares: 0,
+  },
+  activeBenchmark: null,
+  benchmarkTimeout: null,
+  pendingPlaybackSchedules: 0,
+  suiteRunning: false,
+  micSeries: {
+    active: false,
+    target: 3,
+    completed: 0,
+    timer: 0,
+  },
+  ttsChunking: { ...DEFAULT_TTS_CHUNKING },
+  benchmarkResults: [],
+};
+
+class PlaybackQueue {
+  constructor() {
+    this.context = null;
+    this.nextTime = 0;
+    this.sources = new Set();
+    this.started = false;
+  }
+
+  async ensure() {
+    if (!this.context) {
+      this.context = new AudioContext();
+    }
+    if (this.context.state !== "running") {
+      await this.context.resume();
+    }
+  }
+
+  async unlock() {
+    await this.ensure();
+    const buffer = this.context.createBuffer(1, 1, 22050);
+    const source = this.context.createBufferSource();
+    const gain = this.context.createGain();
+    gain.gain.value = 0;
+    source.buffer = buffer;
+    source.connect(gain);
+    gain.connect(this.context.destination);
+    source.start();
+  }
+
+  async play(samples, sampleRate) {
+    await this.ensure();
+    const data = samples instanceof Float32Array ? samples : new Float32Array(samples);
+    const buffer = this.context.createBuffer(1, data.length, sampleRate);
+    buffer.copyToChannel(data, 0);
+    const source = this.context.createBufferSource();
+    source.buffer = buffer;
+    source.connect(this.context.destination);
+    source.onended = () => {
+      this.sources.delete(source);
+      if (this.sources.size === 0) {
+        this.started = false;
+        setAudioState("Audio idle", false);
+      }
+    };
+    const startAt = Math.max(this.context.currentTime + 0.015, this.nextTime);
+    const scheduledAt = this.context.currentTime;
+    source.start(startAt);
+    this.nextTime = startAt + buffer.duration;
+    this.sources.add(source);
+    if (!this.started) {
+      this.started = true;
+      setAudioState("Playing", true);
+    }
+    return {
+      startDelayMs: Math.max(0, startAt - scheduledAt) * 1000,
+      durationMs: buffer.duration * 1000,
+      endDelayMs: Math.max(0, this.nextTime - scheduledAt) * 1000,
+    };
+  }
+
+  stop() {
+    for (const source of this.sources) {
+      try {
+        source.stop();
+      } catch {
+        // Source may already have ended.
+      }
+    }
+    this.sources.clear();
+    if (this.context) {
+      this.nextTime = this.context.currentTime;
+    }
+    this.started = false;
+    setAudioState("Audio idle", false);
+  }
+
+  async close() {
+    this.stop();
+    if (this.context && this.context.state !== "closed") {
+      await this.context.close().catch(() => {});
+    }
+    this.context = null;
+    this.nextTime = 0;
+    this.started = false;
+  }
+}
+
+function setTile(key, text, mode = "idle") {
+  elements.tiles[key].dataset.state = mode;
+  elements.states[key].textContent = text;
+}
+
+function setAudioState(text, active) {
+  elements.audioBadge.textContent = text;
+  elements.audioBadge.classList.toggle("active", active);
+}
+
+function setMicState(text, active) {
+  elements.micBadge.textContent = text;
+  elements.micBadge.classList.toggle("active", active);
+}
+
+function formatGpuAdapter(adapter) {
+  if (!adapter) return "unknown adapter";
+  return (
+    [adapter.vendor, adapter.architecture, adapter.device, adapter.description]
+      .filter(Boolean)
+      .join(" / ") || "unknown adapter"
+  );
+}
+
+function isSoftwareWebGpuAdapter(adapter) {
+  const text = [adapter?.vendor, adapter?.architecture, adapter?.device, adapter?.description]
+    .filter(Boolean)
+    .join(" ")
+    .toLowerCase();
+  return /\b(swiftshader|llvmpipe|software rasterizer|software adapter|warp)\b/.test(text);
+}
+
+function updateRuntimeStatus() {
+  const requested = elements.deviceSelect.value;
+  let mode = "warn";
+  let status = "Checking runtime";
+  let detail = "Adapter probe pending.";
+
+  if (state.webgpuAvailable === false) {
+    mode = requested === "webgpu" ? "error" : "warn";
+    status = requested === "webgpu" ? "WebGPU unavailable" : "WASM fallback";
+    detail = "This browser did not expose a WebGPU adapter.";
+  } else if (state.webgpuAvailable === true && state.webgpuSoftwareAdapter) {
+    const adapter = formatGpuAdapter(state.webgpuAdapterInfo);
+    mode = "warn";
+    if (requested === "webgpu") {
+      status = "Software WebGPU selected";
+      detail = `${adapter}. Explicit WebGPU is allowed, but benchmark automation skips software adapters by default.`;
+    } else if (requested === "wasm") {
+      status = "WASM selected";
+      detail = `${adapter}. Auto also uses WASM because this is a software adapter.`;
+    } else {
+      status = "Auto: WASM fallback";
+      detail = `${adapter}. Hardware WebGPU is not exposed.`;
+    }
+  } else if (state.webgpuAvailable === true) {
+    const adapter = formatGpuAdapter(state.webgpuAdapterInfo);
+    mode = "ready";
+    status = requested === "wasm" ? "WASM selected" : requested === "webgpu" ? "WebGPU selected" : "Auto: WebGPU";
+    detail = adapter;
+  }
+
+  elements.runtimeStatus.dataset.state = mode;
+  elements.runtimeDeviceStatus.textContent = status;
+  elements.runtimeDeviceDetail.textContent = detail;
+}
+
+function formatMs(value) {
+  if (!Number.isFinite(value)) return "-";
+  if (value < 1000) return `${Math.round(value)} ms`;
+  return `${(value / 1000).toFixed(2)} s`;
+}
+
+function formatPercent(value) {
+  if (!Number.isFinite(value)) return "-";
+  return `${Math.round(value * 100)}%`;
+}
+
+function formatQuality(result) {
+  if (result.llmQualityPass == null) return "-";
+  const total = result.llmQualityTotal ?? APP_IDENTITY_QUALITY_RULES.length;
+  const score = result.llmQualityScore ?? result.llmQualityHits?.length;
+  const suffix = Number.isFinite(score) && Number.isFinite(total) ? ` ${score}/${total}` : "";
+  return `${result.llmQualityPass ? "pass" : "fail"}${suffix}`;
+}
+
+function currentVadSilenceMs() {
+  const value = Number(elements.vadSilence.value);
+  if (!Number.isFinite(value)) return DEFAULT_VAD_SILENCE_MS;
+  return Math.min(MAX_VAD_SILENCE_MS, Math.max(MIN_VAD_SILENCE_MS, Math.round(value)));
+}
+
+function updateVadSilenceLabel() {
+  elements.vadSilenceValue.textContent = String(currentVadSilenceMs());
+}
+
+function updateTtsStepsLabel() {
+  elements.ttsStepsValue.textContent = String(Number(elements.ttsSteps.value));
+}
+
+function configureAsrWorker() {
+  state.asrWorker?.postMessage({
+    type: "configure",
+    partial: elements.partialToggle.checked,
+    silenceMs: currentVadSilenceMs(),
+  });
+}
+
+function logEvent(message) {
+  const li = document.createElement("li");
+  li.textContent = `${new Date().toLocaleTimeString()} ${message}`;
+  elements.eventLog.prepend(li);
+  while (elements.eventLog.children.length > 80) {
+    elements.eventLog.lastElementChild.remove();
+  }
+}
+
+function setLoadButton(mode) {
+  const options = {
+    load: { icon: "↓", label: "Load models", disabled: false },
+    loading: { icon: "…", label: "Loading", disabled: true },
+    unload: { icon: "↻", label: "Unload models", disabled: false },
+  };
+  const option = options[mode] ?? options.load;
+  elements.loadButton.innerHTML = `<span class="button-icon" aria-hidden="true">${option.icon}</span> ${option.label}`;
+  elements.loadButton.disabled = option.disabled;
+}
+
+function setSessionControls(mode) {
+  const loaded = mode === "loaded";
+  const busy = mode === "loading";
+  setLoadButton(busy ? "loading" : loaded ? "unload" : "load");
+  elements.deviceSelect.disabled = busy || loaded;
+  elements.llmModelSelect.disabled = busy || loaded;
+  elements.asrModelSelect.disabled = busy || loaded;
+  elements.micButton.disabled = !loaded;
+  elements.stopButton.disabled = !loaded;
+  setBenchmarkControlsDisabled(!loaded || state.suiteRunning);
+  if (!loaded) {
+    elements.micButton.innerHTML = '<span class="button-icon" aria-hidden="true">●</span> Start mic';
+  }
+  updateMicValidationStatus();
+}
+
+function setBenchmarkControlsDisabled(disabled) {
+  const locked = disabled || state.micSeries.active;
+  elements.suiteButton.disabled = locked;
+  elements.benchmarkButton.disabled = locked;
+  elements.chatBenchmarkButton.disabled = locked;
+  elements.ttsBenchmarkButton.disabled = locked;
+  elements.loopbackButton.disabled = locked;
+  elements.bargeInButton.disabled = locked;
+  elements.micBenchmarkButton.disabled = locked;
+  elements.micSeriesButton.disabled = locked;
+}
+
+function resetMetrics() {
+  elements.vadCloseLatency.textContent = "-";
+  elements.asrLatency.textContent = "-";
+  elements.firstTokenLatency.textContent = "-";
+  elements.firstTtsQueuedLatency.textContent = "-";
+  elements.ttsSynthLatency.textContent = "-";
+  elements.firstAudioLatency.textContent = "-";
+  elements.speechToAudioLatency.textContent = "-";
+  elements.decodeRate.textContent = "-";
+}
+
+function resetConversationUi() {
+  elements.partialTranscript.textContent = "Waiting for speech.";
+  elements.finalTranscript.textContent = "";
+  elements.llmOutput.textContent = "Load the models, start the microphone, and speak naturally.";
+}
+
+function updateMicValidationStatus() {
+  const prompt = APP_IDENTITY_PROMPT;
+  const target = state.micSeries.target || 3;
+  const activeStackKey = state.loadedStack ? stackKey(currentBenchmarkStack()) : "";
+  const scopedRows = activeStackKey
+    ? state.benchmarkResults.filter((result) => stackKey(result.stack) === activeStackKey)
+    : state.benchmarkResults;
+  const completedMicRows = scopedRows.filter((result) => result.kind === "mic" && !result.error);
+  const completed = Math.min(target, completedMicRows.length);
+  const activeMic = state.activeBenchmark?.kind === "mic";
+  let mode = "idle";
+  let status = state.modelsLoaded
+    ? `${completed}/${target} real-mic rows collected`
+    : completed > 0
+      ? `${completed}/${target} real-mic rows in saved results`
+      : `Load models to collect ${target} rows`;
+  let detail =
+    completed > 0 && !state.modelsLoaded
+      ? "Load a stack to collect or compare current-stack rows."
+      : `Use the mic series and say: "${prompt}"`;
+  let progress = completed / target;
+
+  if (state.modelsLoading) {
+    mode = "warn";
+    status = "Models loading";
+    detail = "Real-mic validation starts after the local stack is ready.";
+  } else if (state.micSeries.active || activeMic) {
+    const run = state.activeBenchmark?.micSeriesRun ?? state.micSeries.completed + 1;
+    const runTarget = state.activeBenchmark?.micSeriesTarget ?? target;
+    mode = "active";
+    status = `Listening for row ${Math.min(run, runTarget)}/${runTarget}`;
+    detail = `Say: "${prompt}" after the mic badge shows Listening.`;
+    progress = Math.min(1, (state.micSeries.completed + (activeMic ? 0.35 : 0)) / runTarget);
+  } else if (state.modelsLoaded && completed >= target) {
+    const summary = benchmarkSummaryForRows(scopedRows, { scope: "current" });
+    mode = "ready";
+    status = `${completed}/${target} real-mic rows complete`;
+    detail = `Median WER ${formatPercent(summary.micMedianWer)}, speech end to audio ${formatMs(
+      summary.micMedianSpeechEndToFirstAudioMs,
+    )}.`;
+    progress = 1;
+  } else if (state.modelsLoaded) {
+    mode = "warn";
+    detail = `Click Run 3 real-mic series and say: "${prompt}" each time.`;
+  } else if (completed >= target) {
+    mode = "ready";
+    progress = 1;
+  } else if (completed > 0) {
+    mode = "warn";
+  }
+
+  elements.micValidationCard.dataset.state = mode;
+  elements.micValidationStatus.textContent = status;
+  elements.micValidationDetail.textContent = detail;
+  elements.micValidationProgressBar.style.width = `${Math.round(Math.max(0, Math.min(1, progress)) * 100)}%`;
+}
+
+function resetTurnState() {
+  state.messages = initialMessages();
+  state.currentAssistant = "";
+  state.currentUserStartedAt = null;
+  state.lastSpeechEndAt = null;
+  state.lastVadCloseAt = null;
+  state.lastVadCloseDelayMs = null;
+  state.lastTranscriptAt = null;
+  state.awaitingFirstToken = false;
+  state.awaitingFirstAudio = false;
+  state.firstTtsChunkQueued = false;
+  state.ttsBuffer = "";
+  state.ttsSequence = 0;
+  state.loopbackRequestId += 1;
+  clearLoopbackFeed();
+  state.activeBenchmark = null;
+}
+
+function resetMicInputStats() {
+  state.micInputStats = {
+    chunks: 0,
+    samples: 0,
+    peak: 0,
+    sumSquares: 0,
+  };
+}
+
+function updateMicInputStats(buffer) {
+  if (!buffer?.length) return;
+  let chunkPeak = 0;
+  let chunkSumSquares = 0;
+  for (let i = 0; i < buffer.length; i += 1) {
+    const sample = buffer[i];
+    const abs = Math.abs(sample);
+    if (abs > chunkPeak) chunkPeak = abs;
+    chunkSumSquares += sample * sample;
+  }
+  state.micInputStats.chunks += 1;
+  state.micInputStats.samples += buffer.length;
+  state.micInputStats.peak = Math.max(state.micInputStats.peak, chunkPeak);
+  state.micInputStats.sumSquares += chunkSumSquares;
+  if (state.activeBenchmark?.kind === "mic") {
+    state.activeBenchmark.micInputChunks = state.micInputStats.chunks;
+    state.activeBenchmark.micInputPeak = state.micInputStats.peak;
+    state.activeBenchmark.micInputRms = Math.sqrt(
+      state.micInputStats.sumSquares / Math.max(1, state.micInputStats.samples),
+    );
+  }
+}
+
+function terminateWorkers() {
+  state.asrWorker?.terminate();
+  state.llmWorker?.terminate();
+  state.ttsWorker?.terminate();
+  state.asrWorker = null;
+  state.llmWorker = null;
+  state.ttsWorker = null;
+}
+
+async function resetPipelineTiles() {
+  setTile("vad", "Idle", "idle");
+  setTile("asr", "Idle", "idle");
+  setTile("llm", "Idle", "idle");
+  setTile("tts", "Idle", "idle");
+  await supportsWebGPU();
+  if (!state.webgpuAvailable || state.webgpuSoftwareAdapter) {
+    const label = state.webgpuSoftwareAdapter ? "WASM auto" : "WASM only";
+    setTile("llm", label, "warn");
+    setTile("tts", label, "warn");
+  }
+}
+
+async function supportsWebGPU() {
+  if (state.webgpuAvailable !== null) {
+    updateRuntimeStatus();
+    return state.webgpuAvailable;
+  }
+  if (!navigator.gpu) {
+    state.webgpuAvailable = false;
+    state.webgpuAdapterInfo = null;
+    state.webgpuAdapterFeatures = [];
+    state.webgpuSoftwareAdapter = false;
+    updateRuntimeStatus();
+    return false;
+  }
+  try {
+    const adapter = await navigator.gpu.requestAdapter();
+    state.webgpuAvailable = Boolean(adapter);
+    state.webgpuAdapterInfo = await readGpuAdapterInfo(adapter);
+    state.webgpuAdapterFeatures = adapter?.features ? [...adapter.features].sort() : [];
+    state.webgpuSoftwareAdapter = isSoftwareWebGpuAdapter(state.webgpuAdapterInfo);
+  } catch {
+    state.webgpuAvailable = false;
+    state.webgpuAdapterInfo = null;
+    state.webgpuAdapterFeatures = [];
+    state.webgpuSoftwareAdapter = false;
+  }
+  updateRuntimeStatus();
+  return state.webgpuAvailable;
+}
+
+async function readGpuAdapterInfo(adapter) {
+  let info = adapter?.info;
+  if (!info && typeof adapter?.requestAdapterInfo === "function") {
+    info = await adapter.requestAdapterInfo().catch(() => null);
+  }
+  if (!info) return null;
+  return {
+    vendor: info.vendor || "",
+    architecture: info.architecture || "",
+    device: info.device || "",
+    description: info.description || "",
+  };
+}
+
+async function resolveDevice() {
+  const requested = elements.deviceSelect.value;
+  if (requested === "auto") {
+    await supportsWebGPU();
+    return state.webgpuAvailable && !state.webgpuSoftwareAdapter ? "webgpu" : "wasm";
+  }
+  return requested;
+}
+
+function createWorker(path, kind, handler) {
+  const worker = new Worker(new URL(path, import.meta.url), { type: "module" });
+  worker.addEventListener("message", handler);
+  worker.addEventListener("error", (event) => {
+    const message = `${path} error: ${event.message || "worker failed to load"}`;
+    logEvent(message);
+    window.dispatchEvent(new CustomEvent("model-error", { detail: { kind, message } }));
+  });
+  return worker;
+}
+
+async function loadModels({ ttsWarmup = true } = {}) {
+  if (state.modelsLoaded || state.modelsLoading) return;
+  state.modelsLoading = true;
+  setSessionControls("loading");
+  const device = await resolveDevice();
+  if (device === "webgpu" && !(await supportsWebGPU())) {
+    logEvent("WebGPU was requested but is not available in this browser.");
+    state.modelsLoading = false;
+    setSessionControls("unloaded");
+    await resetPipelineTiles();
+    return;
+  }
+  const stackError = selectedStackError(device);
+  if (stackError) {
+    logEvent(stackError);
+    state.modelsLoading = false;
+    setSessionControls("unloaded");
+    await resetPipelineTiles();
+    return;
+  }
+  state.playback ??= new PlaybackQueue();
+  const audioUnlock = state.playback.unlock().catch((error) => {
+    logEvent(`Audio unlock deferred: ${error.message}`);
+  });
+
+  setTile("vad", "Queued", "warn");
+  setTile("asr", "Queued", "warn");
+  setTile("llm", "Queued", "warn");
+  setTile("tts", "Queued", "warn");
+  logEvent(`Loading models on ${device.toUpperCase()}.`);
+  state.modelLoadStartedAt = performance.now();
+  state.loadedStack = {
+    device,
+    llm: elements.llmModelSelect.value,
+    asr: elements.asrModelSelect.value,
+    vad: "onnx-community/silero-vad",
+    tts: "onnx-community/Supertonic-TTS-ONNX",
+    transformers: "@huggingface/transformers@4.2.0",
+    modelLoadMs: null,
+  };
+
+  void audioUnlock;
+
+  try {
+    setTile("vad", "Loading", "warn");
+    setTile("asr", "Loading", "warn");
+    logEvent("Loading local VAD and STT models.");
+    state.asrWorker = createWorker("./workers/asr-worker.js", "asr", onAsrMessage);
+    const asrReady = waitForReady("asr");
+    state.asrWorker.postMessage({
+      type: "load",
+      model: elements.asrModelSelect.value,
+      device,
+      partial: elements.partialToggle.checked,
+      silenceMs: currentVadSilenceMs(),
+    });
+    await asrReady;
+
+    setTile("llm", "Loading", "warn");
+    logEvent("Loading local LLM.");
+    state.llmWorker = createWorker("./workers/llm-worker.js", "llm", onLlmMessage);
+    const llmReady = waitForReady("llm");
+    state.llmWorker.postMessage({
+      type: "load",
+      model: elements.llmModelSelect.value,
+      device,
+    });
+    await llmReady;
+
+    setTile("tts", "Loading", "warn");
+    logEvent("Loading local Supertonic TTS.");
+    state.ttsWorker = createWorker("./workers/tts-worker.js", "tts", onTtsMessage);
+    const ttsReady = waitForReady("tts");
+    state.ttsWorker.postMessage({
+      type: "load",
+      model: "onnx-community/Supertonic-TTS-ONNX",
+      device,
+      voice: elements.voiceSelect.value,
+      warmup: ttsWarmup,
+    });
+    await ttsReady;
+
+    const loadMs = performance.now() - state.modelLoadStartedAt;
+    state.loadedStack.modelLoadMs = loadMs;
+    state.modelsLoading = false;
+    state.modelsLoaded = true;
+    setSessionControls("loaded");
+    logEvent(`All local inference models are ready in ${formatMs(loadMs)}.`);
+  } catch (error) {
+    logEvent(`Model loading failed: ${error.message}`);
+    await unloadModels({ quiet: true });
+  }
+}
+
+async function unloadModels({ quiet = false } = {}) {
+  if (state.micActive) stopMic();
+  cancelMicSeries();
+  interruptForBargeIn();
+  cancelActiveBenchmark();
+  rejectTtsVoiceRequests(new Error("TTS worker unloaded."));
+  terminateWorkers();
+  state.modelsLoaded = false;
+  state.modelsLoading = false;
+  state.modelLoadStartedAt = null;
+  state.loadedStack = null;
+  state.suiteRunning = false;
+  resetTurnState();
+  resetMetrics();
+  resetConversationUi();
+  setMicState("Mic off", false);
+  setAudioState("Audio idle", false);
+  await state.playback?.close();
+  state.playback = null;
+  setSessionControls("unloaded");
+  await resetPipelineTiles();
+  if (!quiet) logEvent("Unloaded local inference models. Benchmark rows are preserved.");
+}
+
+function waitForReady(kind) {
+  return new Promise((resolve, reject) => {
+    const timeout = window.setTimeout(() => reject(new Error(`${kind} load timeout`)), 180000);
+    const handler = (event) => {
+      if (event.detail.kind !== kind) return;
+      window.clearTimeout(timeout);
+      window.removeEventListener("model-ready", handler);
+      window.removeEventListener("model-error", errorHandler);
+      resolve();
+    };
+    const errorHandler = (event) => {
+      if (event.detail.kind !== kind) return;
+      window.clearTimeout(timeout);
+      window.removeEventListener("model-ready", handler);
+      window.removeEventListener("model-error", errorHandler);
+      reject(new Error(event.detail.message));
+    };
+    window.addEventListener("model-ready", handler);
+    window.addEventListener("model-error", errorHandler);
+  });
+}
+
+async function startMic() {
+  if (!state.modelsLoaded || state.micActive) return;
+  state.playback?.unlock().catch(() => {});
+  state.mediaStream = await getUserMediaWithTimeout({
+    audio: {
+      channelCount: 1,
+      echoCancellation: true,
+      noiseSuppression: true,
+      autoGainControl: true,
+    },
+  });
+  state.audioContext = new AudioContext();
+  state.inputSampleRate = state.audioContext.sampleRate;
+  if (state.activeBenchmark) {
+    state.activeBenchmark.inputSampleRate = state.audioContext.sampleRate;
+    if (state.activeBenchmark.stack?.environment) {
+      state.activeBenchmark.stack.environment.inputSampleRate = state.audioContext.sampleRate;
+    }
+  }
+  const workletUrl = URL.createObjectURL(
+    new Blob([audioWorkletSource()], { type: "text/javascript" }),
+  );
+  await state.audioContext.audioWorklet.addModule(workletUrl);
+  URL.revokeObjectURL(workletUrl);
+  state.micSource = state.audioContext.createMediaStreamSource(state.mediaStream);
+  state.workletNode = new AudioWorkletNode(state.audioContext, "pcm-capture");
+  state.micMonitorGain = state.audioContext.createGain();
+  state.micMonitorGain.gain.value = 0;
+  state.workletNode.port.onmessage = (event) => {
+    if (!state.asrWorker || !state.micActive) return;
+    const buffer = event.data;
+    updateMicInputStats(buffer);
+    state.asrWorker.postMessage(
+      {
+        type: "audio",
+        buffer,
+        sampleRate: state.audioContext.sampleRate,
+      },
+      [buffer.buffer],
+    );
+  };
+  state.micSource.connect(state.workletNode);
+  state.workletNode.connect(state.micMonitorGain);
+  state.micMonitorGain.connect(state.audioContext.destination);
+  state.micActive = true;
+  elements.micButton.innerHTML = '<span class="button-icon" aria-hidden="true">●</span> Stop mic';
+  setMicState("Listening", true);
+  setTile("vad", "Listening", "active");
+  logEvent("Microphone capture started.");
+}
+
+async function getUserMediaWithTimeout(constraints, timeoutMs = MIC_START_TIMEOUT_MS) {
+  let timeoutId = 0;
+  let timedOut = false;
+  const mediaPromise = navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
+    if (timedOut) {
+      for (const track of stream.getTracks()) track.stop();
+      return null;
+    }
+    return stream;
+  });
+  mediaPromise.catch(() => {});
+  const timeoutPromise = new Promise((resolve) => {
+    timeoutId = window.setTimeout(() => {
+      timedOut = true;
+      resolve(null);
+    }, timeoutMs);
+  });
+  const stream = await Promise.race([mediaPromise, timeoutPromise]);
+  window.clearTimeout(timeoutId);
+  if (!stream) throw new Error(`Microphone start timed out after ${(timeoutMs / 1000).toFixed(0)} seconds.`);
+  return stream;
+}
+
+function stopMic() {
+  if (!state.micActive) return;
+  state.micActive = false;
+  state.workletNode?.disconnect();
+  state.micMonitorGain?.disconnect();
+  state.micSource?.disconnect();
+  for (const track of state.mediaStream?.getTracks() ?? []) {
+    track.stop();
+  }
+  state.audioContext?.close();
+  state.audioContext = null;
+  state.inputSampleRate = null;
+  state.mediaStream = null;
+  state.workletNode = null;
+  state.micSource = null;
+  state.micMonitorGain = null;
+  elements.micButton.innerHTML = '<span class="button-icon" aria-hidden="true">●</span> Start mic';
+  setMicState("Mic off", false);
+  setTile("vad", "Ready", "ready");
+  logEvent("Microphone capture stopped.");
+}
+
+function audioWorkletSource() {
+  return `
+class PcmCaptureProcessor extends AudioWorkletProcessor {
+  constructor() {
+    super();
+    this.size = 512;
+    this.buffer = new Float32Array(this.size);
+    this.offset = 0;
+  }
+
+  process(inputs) {
+    const channel = inputs[0] && inputs[0][0];
+    if (!channel) return true;
+    for (let i = 0; i < channel.length; i += 1) {
+      this.buffer[this.offset++] = channel[i];
+      if (this.offset === this.size) {
+        const out = this.buffer;
+        this.port.postMessage(out, [out.buffer]);
+        this.buffer = new Float32Array(this.size);
+        this.offset = 0;
+      }
+    }
+    return true;
+  }
+}
+registerProcessor("pcm-capture", PcmCaptureProcessor);
+`;
+}
+
+function shouldAcceptAsrSpeechEvent() {
+  return state.micActive || state.activeBenchmark?.kind === "loopback";
+}
+
+function shouldAcceptAsrTranscript() {
+  if (state.micActive || state.activeBenchmark?.kind === "loopback") return true;
+  if (state.activeBenchmark?.kind === "mic" && !state.activeBenchmark.transcript) return true;
+  return false;
+}
+
+function onAsrMessage(event) {
+  const message = event.data;
+  if (message.type === "status") {
+    handleStatus("asr", message);
+    if (message.scope === "vad") handleStatus("vad", message);
+    return;
+  }
+  if (message.type === "ready") {
+    setTile("vad", "Ready", "ready");
+    setTile("asr", "Ready", "ready");
+    window.dispatchEvent(new CustomEvent("model-ready", { detail: { kind: "asr" } }));
+    return;
+  }
+  if (message.type === "error") {
+    setTile("asr", "Error", "error");
+    window.dispatchEvent(
+      new CustomEvent("model-error", { detail: { kind: "asr", message: message.message } }),
+    );
+    return;
+  }
+  if (message.type === "speechstart") {
+    if (!shouldAcceptAsrSpeechEvent()) return;
+    handleSpeechStart();
+    return;
+  }
+  if (message.type === "speechend") {
+    if (!shouldAcceptAsrSpeechEvent()) return;
+    const now = performance.now();
+    const closeDelay = Number.isFinite(message.trailingSilenceMs) ? message.trailingSilenceMs : 0;
+    state.lastVadCloseAt = now;
+    state.lastVadCloseDelayMs = closeDelay;
+    state.lastSpeechEndAt = now - closeDelay;
+    elements.vadCloseLatency.textContent = formatMs(closeDelay);
+    if (state.activeBenchmark) state.activeBenchmark.vadCloseDelayMs = closeDelay;
+    elements.partialTranscript.textContent = "Transcribing...";
+    setTile("vad", "Transcribing", "warn");
+    setTile("asr", "Transcribing", "active");
+    return;
+  }
+  if (message.type === "partial") {
+    if (!shouldAcceptAsrSpeechEvent()) return;
+    if (message.text?.trim()) {
+      elements.partialTranscript.textContent = message.text.trim();
+    }
+    return;
+  }
+  if (message.type === "transcript") {
+    if (!shouldAcceptAsrTranscript()) return;
+    const text = message.text.trim();
+    const shouldStopMicAfterTranscript =
+      state.activeBenchmark?.kind === "mic" && state.activeBenchmark.stopMicAfterTranscript === true;
+    state.lastTranscriptAt = performance.now();
+    elements.asrLatency.textContent = formatMs(state.lastTranscriptAt - state.lastSpeechEndAt);
+    if (state.activeBenchmark) {
+      state.activeBenchmark.transcript = text;
+      state.activeBenchmark.asrMs = state.lastTranscriptAt - state.lastSpeechEndAt;
+      updateTranscriptQuality(state.activeBenchmark, text);
+    }
+    setTile("vad", state.micActive ? "Listening" : "Ready", state.micActive ? "active" : "ready");
+    setTile("asr", "Ready", "ready");
+    if (!text) {
+      elements.partialTranscript.textContent = "No speech recognized.";
+      failActiveBenchmark("No speech recognized.");
+      return;
+    }
+    if (
+      state.activeBenchmark?.kind === "mic" &&
+      state.activeBenchmark.requireExactTranscript === true &&
+      state.activeBenchmark.sttWer !== 0
+    ) {
+      elements.partialTranscript.textContent = `Heard: "${text}"`;
+      logEvent(`Ignoring non-matching scripted transcript: "${text}"`);
+      return;
+    }
+    elements.partialTranscript.textContent = "";
+    elements.finalTranscript.textContent = text;
+    logEvent(`Transcript: "${text}"`);
+    generateResponse(text);
+    if (shouldStopMicAfterTranscript) stopMic();
+  }
+}
+
+function onLlmMessage(event) {
+  const message = event.data;
+  if (message.type === "status") {
+    handleStatus("llm", message);
+    return;
+  }
+  if (message.type === "ready") {
+    setTile("llm", "Ready", "ready");
+    window.dispatchEvent(new CustomEvent("model-ready", { detail: { kind: "llm" } }));
+    return;
+  }
+  if (message.type === "error") {
+    setTile("llm", "Error", "error");
+    window.dispatchEvent(
+      new CustomEvent("model-error", { detail: { kind: "llm", message: message.message } }),
+    );
+    return;
+  }
+  if (message.type === "start") {
+    if (message.turnId !== state.activeTurnId) return;
+    state.currentAssistant = "";
+    state.ttsBuffer = "";
+    state.awaitingFirstToken = true;
+    state.awaitingFirstAudio = true;
+    state.firstTtsChunkQueued = false;
+    elements.llmOutput.textContent = "";
+    elements.firstTokenLatency.textContent = "-";
+    elements.firstTtsQueuedLatency.textContent = "-";
+    elements.ttsSynthLatency.textContent = "-";
+    elements.firstAudioLatency.textContent = "-";
+    elements.speechToAudioLatency.textContent = "-";
+    elements.decodeRate.textContent = "-";
+    setTile("llm", "Generating", "active");
+    return;
+  }
+  if (message.type === "token") {
+    if (message.turnId !== state.activeTurnId) return;
+    if (state.awaitingFirstToken) {
+      state.awaitingFirstToken = false;
+      const latency = performance.now() - state.lastTranscriptAt;
+      elements.firstTokenLatency.textContent = formatMs(latency);
+      if (state.activeBenchmark) state.activeBenchmark.firstTokenMs = latency;
+    }
+    state.currentAssistant += message.text;
+    elements.llmOutput.textContent = state.currentAssistant;
+    if (message.tps) elements.decodeRate.textContent = `${message.tps.toFixed(1)} tok/s`;
+    bufferTts(message.text);
+    return;
+  }
+  if (message.type === "complete") {
+    if (message.turnId !== state.activeTurnId) return;
+    flushTts(true);
+    setTile("llm", "Ready", "ready");
+    const cleanAssistant = cleanAssistantResponse(state.currentAssistant);
+    if (cleanAssistant) {
+      state.currentAssistant = cleanAssistant;
+      elements.llmOutput.textContent = cleanAssistant;
+      state.messages.push({ role: "assistant", content: cleanAssistant });
+      trimConversation();
+    }
+    if (state.activeBenchmark) {
+      state.activeBenchmark.output = cleanAssistant;
+      updateOutputQuality(state.activeBenchmark, cleanAssistant);
+      state.activeBenchmark.decodeRate = elements.decodeRate.textContent;
+      state.activeBenchmark.llmDoneAt = performance.now();
+      state.activeBenchmark.llmCompleteMs = state.activeBenchmark.llmDoneAt - state.lastTranscriptAt;
+      window.setTimeout(() => finalizeBenchmarkIfIdle(), 1200);
+    }
+    logEvent("LLM response complete.");
+  }
+}
+
+function onTtsMessage(event) {
+  const message = event.data;
+  if (message.type === "status") {
+    handleStatus("tts", message);
+    return;
+  }
+  if (message.type === "ready") {
+    setTile("tts", "Ready", "ready");
+    window.dispatchEvent(new CustomEvent("model-ready", { detail: { kind: "tts" } }));
+    return;
+  }
+  if (message.type === "error") {
+    setTile("tts", "Error", "error");
+    rejectTtsVoiceRequests(new Error(message.message));
+    window.dispatchEvent(
+      new CustomEvent("model-error", { detail: { kind: "tts", message: message.message } }),
+    );
+    return;
+  }
+  if (message.type === "voice-ready") {
+    const request = state.ttsVoiceRequests.get(message.requestId);
+    if (request) {
+      window.clearTimeout(request.timeout);
+      state.ttsVoiceRequests.delete(message.requestId);
+      request.resolve();
+    }
+    return;
+  }
+  if (message.type === "voice-error") {
+    const request = state.ttsVoiceRequests.get(message.requestId);
+    if (request) {
+      window.clearTimeout(request.timeout);
+      state.ttsVoiceRequests.delete(message.requestId);
+      request.reject(new Error(message.message));
+      return;
+    }
+    logEvent(`Voice ${message.voice} preload failed: ${message.message}`);
+    return;
+  }
+  if (message.type === "audio") {
+    if (message.turnId !== state.activeTurnId) return;
+    let recordedFirstAudio = false;
+    if (state.awaitingFirstAudio) {
+      recordedFirstAudio = true;
+      state.awaitingFirstAudio = false;
+      const now = performance.now();
+      const latency = now - state.lastTranscriptAt;
+      const speechEndToAudioMs = Number.isFinite(state.lastSpeechEndAt)
+        ? now - state.lastSpeechEndAt
+        : null;
+      elements.firstAudioLatency.textContent = formatMs(latency);
+      elements.ttsSynthLatency.textContent = formatMs(message.synthesisMs);
+      elements.speechToAudioLatency.textContent = formatMs(speechEndToAudioMs);
+      if (state.activeBenchmark) {
+        state.activeBenchmark.firstAudioMs = latency;
+        state.activeBenchmark.speechEndToFirstAudioMs =
+          state.activeBenchmark.asrMs != null ? speechEndToAudioMs : null;
+        state.activeBenchmark.firstTtsSynthesisMs = message.synthesisMs ?? null;
+        state.activeBenchmark.firstTtsRoundTripMs = Number.isFinite(message.enqueuedAt)
+          ? now - message.enqueuedAt
+          : null;
+        state.activeBenchmark.firstTtsChars = message.text?.length ?? null;
+        state.activeBenchmark.firstTtsText = message.text ?? "";
+      }
+    }
+    if (state.activeBenchmark) {
+      state.activeBenchmark.ttsChunkCount += 1;
+    }
+    state.pendingPlaybackSchedules += 1;
+    state.playback
+      .play(message.audio, message.sampleRate)
+      .then((playback) => {
+        if (message.turnId !== state.activeTurnId) return;
+        if (state.activeBenchmark && playback) {
+          const now = performance.now();
+          const audioEndMs = now + (playback.endDelayMs ?? playback.durationMs ?? 0) - state.lastTranscriptAt;
+          state.activeBenchmark.audioEndMs = Math.max(
+            state.activeBenchmark.audioEndMs ?? 0,
+            audioEndMs,
+          );
+          state.activeBenchmark.speechEndToAudioEndMs = Number.isFinite(state.lastSpeechEndAt)
+            ? Math.max(
+                state.activeBenchmark.speechEndToAudioEndMs ?? 0,
+                now + (playback.endDelayMs ?? playback.durationMs ?? 0) - state.lastSpeechEndAt,
+              )
+            : null;
+        }
+        if (recordedFirstAudio && state.activeBenchmark) {
+          state.activeBenchmark.firstTtsPlaybackDelayMs = playback?.startDelayMs ?? null;
+        }
+        if (state.activeBenchmark?.llmDoneAt) window.setTimeout(() => finalizeBenchmarkIfIdle(), 0);
+      })
+      .catch((error) => logEvent(`Playback failed: ${error.message}`))
+      .finally(() => {
+        state.pendingPlaybackSchedules = Math.max(0, state.pendingPlaybackSchedules - 1);
+        if (state.activeBenchmark?.llmDoneAt) window.setTimeout(() => finalizeBenchmarkIfIdle(), 0);
+      });
+    setTile("tts", "Speaking", "active");
+    return;
+  }
+  if (message.type === "synthetic-audio") {
+    if (state.automationSynthesisRequests.has(message.requestId)) {
+      const request = state.automationSynthesisRequests.get(message.requestId);
+      request.audio = new Float32Array(message.audio);
+      request.sampleRate = message.sampleRate;
+      request.synthesisMs = message.synthesisMs ?? null;
+      return;
+    }
+    if (message.requestId !== state.loopbackRequestId) return;
+    if (state.activeBenchmark) state.activeBenchmark.loopbackTtsSynthesisMs = message.synthesisMs ?? null;
+    feedLoopbackAudio(message.audio, message.sampleRate);
+    return;
+  }
+  if (message.type === "done") {
+    if (state.automationSynthesisRequests.has(message.requestId)) {
+      const request = state.automationSynthesisRequests.get(message.requestId);
+      state.automationSynthesisRequests.delete(message.requestId);
+      setTile("tts", "Ready", "ready");
+      if (!request.audio) {
+        request.reject(new Error("Automation synthesis finished without audio."));
+        return;
+      }
+      request.resolve({
+        text: request.text,
+        voice: request.voice,
+        steps: request.steps,
+        speed: request.speed,
+        sampleRate: request.sampleRate,
+        synthesisMs: request.synthesisMs,
+        audio: Array.from(request.audio),
+      });
+      return;
+    }
+    if (message.requestId === state.loopbackRequestId) {
+      setTile("tts", "Ready", "ready");
+      if (state.activeBenchmark?.llmDoneAt) window.setTimeout(() => finalizeBenchmarkIfIdle(), 0);
+      return;
+    }
+    if (message.turnId !== state.activeTurnId) return;
+    setTile("tts", "Ready", "ready");
+    if (state.activeBenchmark?.llmDoneAt) window.setTimeout(() => finalizeBenchmarkIfIdle(), 0);
+  }
+}
+
+function handleStatus(kind, message) {
+  const label = message.message ?? "Working";
+  const stateMode = message.mode ?? (label.toLowerCase().includes("load") ? "warn" : "active");
+  setTile(kind, label, stateMode);
+  if (message.detail) logEvent(message.detail);
+}
+
+function currentBenchmarkStack() {
+  return {
+    ...state.loadedStack,
+    voice: elements.voiceSelect.value,
+    ttsSteps: Number(elements.ttsSteps.value),
+    vadSilenceMs: currentVadSilenceMs(),
+    partialAsr: elements.partialToggle.checked,
+    ttsChunking: { ...state.ttsChunking },
+    environment: runtimeEnvironment(),
+  };
+}
+
+function selectedStackError(device) {
+  const llm = elements.llmModelSelect.value;
+  if (device !== "webgpu" && WEBGPU_ONLY_LLMS.has(llm)) {
+    const reason = WEBGPU_ONLY_REASONS.get(llm) ?? "it is too large for the WASM fallback path.";
+    return `${shortModel(llm)} is disabled on WASM fallback because ${reason} Select WebGPU on a supported browser for this candidate.`;
+  }
+  return "";
+}
+
+function updateTranscriptQuality(benchmark, transcript) {
+  if (!benchmark.referenceText) return;
+  benchmark.sttWer = errorRate(words(benchmark.referenceText), words(transcript));
+  benchmark.sttCer = errorRate(chars(benchmark.referenceText), chars(transcript));
+}
+
+function updateOutputQuality(benchmark, output) {
+  if (!isAppIdentityQuestion(benchmark.prompt) && !isAppIdentityQuestion(benchmark.transcript)) return;
+  const hits = APP_IDENTITY_QUALITY_RULES
+    .filter((rule) => rule.pattern.test(output))
+    .map((rule) => rule.label);
+  const missing = APP_IDENTITY_QUALITY_RULES
+    .filter((rule) => !rule.pattern.test(output))
+    .map((rule) => rule.label);
+  benchmark.llmQualityHits = hits;
+  benchmark.llmQualityMissing = missing;
+  benchmark.llmQualityScore = hits.length;
+  benchmark.llmQualityTotal = APP_IDENTITY_QUALITY_RULES.length;
+  benchmark.llmQualityPass = missing.length === 0;
+}
+
+function isAppIdentityQuestion(text) {
+  const normalized = normalizeForQuality(text);
+  return /^(what's|what is|what app is|what demo is|what application is) this$/.test(normalized);
+}
+
+function words(text) {
+  return normalizeForQuality(text).split(" ").filter(Boolean);
+}
+
+function chars(text) {
+  return normalizeForQuality(text).replace(/\s+/g, "").split("");
+}
+
+function normalizeForQuality(text) {
+  return String(text ?? "")
+    .toLowerCase()
+    .replace(/[^a-z0-9' ]+/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+function errorRate(reference, hypothesis) {
+  if (reference.length === 0) return hypothesis.length === 0 ? 0 : 1;
+  return editDistance(reference, hypothesis) / reference.length;
+}
+
+function editDistance(reference, hypothesis) {
+  let previous = Array.from({ length: hypothesis.length + 1 }, (_, index) => index);
+  for (let i = 1; i <= reference.length; i += 1) {
+    const current = [i];
+    for (let j = 1; j <= hypothesis.length; j += 1) {
+      const substitutionCost = reference[i - 1] === hypothesis[j - 1] ? 0 : 1;
+      current[j] = Math.min(
+        previous[j] + 1,
+        current[j - 1] + 1,
+        previous[j - 1] + substitutionCost,
+      );
+    }
+    previous = current;
+  }
+  return previous[hypothesis.length];
+}
+
+function runtimeEnvironment() {
+  return {
+    page: location.href,
+    secureContext: window.isSecureContext,
+    userAgent: navigator.userAgent,
+    platform: navigator.platform || "",
+    language: navigator.language || "",
+    hardwareConcurrency: navigator.hardwareConcurrency ?? null,
+    deviceMemoryGb: navigator.deviceMemory ?? null,
+    webgpuAvailable: state.webgpuAvailable,
+    webgpuAdapter: state.webgpuAdapterInfo,
+    webgpuFeatures: state.webgpuAdapterFeatures,
+    webgpuSoftwareAdapter: state.webgpuSoftwareAdapter,
+    inputSampleRate: state.inputSampleRate,
+  };
+}
+
+function startBenchmark(kind, prompt, { referenceText = "", timeoutMs = 120000 } = {}) {
+  clearBenchmarkTimeout();
+  if (kind === "mic") resetMicInputStats();
+  state.activeBenchmark = {
+    id: state.benchmarkResults.length + 1,
+    kind,
+    startedAt: new Date().toISOString(),
+    stack: currentBenchmarkStack(),
+    prompt,
+    referenceText: referenceText || (kind === "loopback" ? prompt : ""),
+    micSeriesRun: kind === "mic" && state.micSeries.active ? state.micSeries.completed + 1 : null,
+    micSeriesTarget: kind === "mic" && state.micSeries.active ? state.micSeries.target : null,
+    transcript: "",
+    output: "",
+    asrMs: null,
+    sttWer: null,
+    sttCer: null,
+    vadCloseDelayMs: null,
+    firstTokenMs: null,
+    firstTtsQueuedMs: null,
+    firstTtsSynthesisMs: null,
+    firstTtsRoundTripMs: null,
+    firstTtsPlaybackDelayMs: null,
+    firstTtsChars: null,
+    firstTtsText: "",
+    firstTtsBoundaryKind: "",
+    firstTtsWordBoundarySafe: null,
+    ttsChunkCount: 0,
+    audioEndMs: null,
+    speechEndToAudioEndMs: null,
+    loopbackTtsSynthesisMs: null,
+    inputSampleRate: state.inputSampleRate,
+    micInputChunks: null,
+    micInputPeak: null,
+    micInputRms: null,
+    loopbackSampleRate: null,
+    bargeInMs: null,
+    bargeInPass: null,
+    firstAudioMs: null,
+    speechEndToFirstAudioMs: null,
+    decodeRate: "-",
+    llmCompleteMs: null,
+    llmQualityPass: null,
+    llmQualityScore: null,
+    llmQualityTotal: APP_IDENTITY_QUALITY_RULES.length,
+    llmQualityHits: [],
+    llmQualityMissing: [],
+    error: "",
+    llmDoneAt: null,
+  };
+  state.benchmarkTimeout = window.setTimeout(() => {
+    failActiveBenchmark(`${kind} benchmark timed out after ${(timeoutMs / 1000).toFixed(0)} seconds.`);
+  }, timeoutMs);
+  updateMicValidationStatus();
+}
+
+function cancelActiveBenchmark(message) {
+  if (!state.activeBenchmark) return;
+  clearBenchmarkTimeout();
+  state.activeBenchmark = null;
+  updateMicValidationStatus();
+  if (message) logEvent(message);
+}
+
+function clearBenchmarkTimeout() {
+  if (!state.benchmarkTimeout) return;
+  window.clearTimeout(state.benchmarkTimeout);
+  state.benchmarkTimeout = null;
+}
+
+function updateMicSeriesButton() {
+  if (!state.micSeries.active) {
+    elements.micSeriesButton.textContent = "Run 3 real-mic series";
+    updateMicValidationStatus();
+    return;
+  }
+  const currentRun = Math.min(state.micSeries.completed + 1, state.micSeries.target);
+  elements.micSeriesButton.textContent = `Real mic ${currentRun}/${state.micSeries.target}`;
+  updateMicValidationStatus();
+}
+
+function cancelMicSeries(message = "") {
+  const wasActive = state.micSeries.active || Boolean(state.micSeries.timer);
+  if (state.micSeries.timer) {
+    window.clearTimeout(state.micSeries.timer);
+    state.micSeries.timer = 0;
+  }
+  state.micSeries.active = false;
+  state.micSeries.completed = 0;
+  updateMicSeriesButton();
+  if (state.modelsLoaded && !state.suiteRunning) setBenchmarkControlsDisabled(false);
+  updateMicValidationStatus();
+  if (message && wasActive) logEvent(message);
+}
+
+function failActiveBenchmark(message) {
+  if (!state.activeBenchmark) return;
+  clearBenchmarkTimeout();
+  clearLoopbackFeed();
+  state.activeBenchmark.error = message;
+  state.activeBenchmark.output ||= message;
+  state.activeBenchmark.decodeRate = elements.decodeRate.textContent;
+  state.activeBenchmark.firstAudioMs ??= parseMetricMs(elements.firstAudioLatency.textContent);
+  state.activeBenchmark.speechEndToFirstAudioMs ??= parseMetricMs(elements.speechToAudioLatency.textContent);
+  if (state.activeBenchmark.kind === "mic") {
+    state.activeBenchmark.micInputChunks = state.micInputStats.chunks;
+    state.activeBenchmark.micInputPeak = state.micInputStats.peak;
+    state.activeBenchmark.micInputRms =
+      state.micInputStats.samples > 0
+        ? Math.sqrt(state.micInputStats.sumSquares / state.micInputStats.samples)
+        : null;
+  }
+  const result = { ...state.activeBenchmark };
+  state.benchmarkResults.unshift(result);
+  state.activeBenchmark = null;
+  renderBenchmarkResults();
+  logEvent(message);
+  handleBenchmarkRowAdded(result);
+  updateMicValidationStatus();
+}
+
+function completeActiveBenchmark() {
+  if (!state.activeBenchmark) return;
+  clearBenchmarkTimeout();
+  const result = { ...state.activeBenchmark };
+  state.benchmarkResults.unshift(result);
+  state.activeBenchmark = null;
+  renderBenchmarkResults();
+  handleBenchmarkRowAdded(result);
+  updateMicValidationStatus();
+}
+
+function handleBenchmarkRowAdded(result) {
+  if (result.kind !== "mic" || !state.micSeries.active) return;
+  if (result.error) {
+    cancelMicSeries("Real-mic series stopped after a failed run.");
+    return;
+  }
+  state.micSeries.completed += 1;
+  updateMicSeriesButton();
+  if (state.micSeries.completed >= state.micSeries.target) {
+    cancelMicSeries("Real-mic series complete.");
+    return;
+  }
+  const nextRun = state.micSeries.completed + 1;
+  const prompt = APP_IDENTITY_PROMPT;
+  elements.partialTranscript.textContent = `Say: "${prompt}" (${nextRun}/${state.micSeries.target})`;
+  logEvent(`Ready for real-mic run ${nextRun}/${state.micSeries.target}.`);
+  state.micSeries.timer = window.setTimeout(() => {
+    state.micSeries.timer = 0;
+    if (!state.micSeries.active) return;
+    runMicBenchmark({ series: true })
+      .then((started) => {
+        if (!started) cancelMicSeries("Real-mic series stopped before the next run.");
+      })
+      .catch((error) => {
+        cancelMicSeries(`Real-mic series stopped: ${error.message}`);
+      });
+  }, 900);
+}
+
+function finalizeBenchmarkIfIdle() {
+  if (!state.activeBenchmark) return;
+  if (!Number.isFinite(state.activeBenchmark.llmDoneAt)) return;
+  const pendingAudio = state.activeBenchmark.firstAudioMs == null && elements.firstAudioLatency.textContent === "-";
+  const ttsBusy = elements.states.tts.textContent === "Synthesizing" || elements.states.tts.textContent === "Speaking";
+  if (
+    state.pendingPlaybackSchedules > 0 ||
+    (pendingAudio && (ttsBusy || performance.now() - state.activeBenchmark.llmDoneAt < 8000))
+  ) {
+    window.setTimeout(() => finalizeBenchmarkIfIdle(), state.pendingPlaybackSchedules > 0 ? 100 : 1000);
+    return;
+  }
+  clearBenchmarkTimeout();
+  state.activeBenchmark.firstAudioMs = parseMetricMs(elements.firstAudioLatency.textContent);
+  state.activeBenchmark.decodeRate = elements.decodeRate.textContent;
+  completeActiveBenchmark();
+}
+
+function parseMetricMs(text) {
+  if (!text || text === "-") return null;
+  if (text.endsWith(" ms")) return Number(text.replace(" ms", ""));
+  if (text.endsWith(" s")) return Number(text.replace(" s", "")) * 1000;
+  return null;
+}
+
+function renderBenchmarkResults() {
+  elements.resultsBody.replaceChildren();
+  elements.copyResultsButton.disabled = state.benchmarkResults.length === 0;
+  elements.clearResultsButton.disabled = state.benchmarkResults.length === 0;
+  renderBenchmarkSummary();
+  if (state.benchmarkResults.length === 0) {
+    const row = document.createElement("tr");
+    const cell = document.createElement("td");
+    cell.colSpan = 15;
+    cell.textContent = "No benchmark runs yet.";
+    row.append(cell);
+    elements.resultsBody.append(row);
+    return;
+  }
+  for (const result of state.benchmarkResults) {
+    const row = document.createElement("tr");
+    const stack = result.stack ?? {};
+    const runLabel = result.micSeriesTarget
+      ? `${result.kind} ${result.micSeriesRun}/${result.micSeriesTarget}`
+      : result.kind;
+    const values = [
+      `${result.id}. ${runLabel}`,
+      `${shortModel(stack.llm)} / ${stack.device?.toUpperCase() ?? "-"} / ${stack.voice ?? "-"} / ${stack.ttsSteps ?? "-"} steps`,
+      formatMs(result.asrMs),
+      formatPercent(result.sttWer),
+      formatMs(result.vadCloseDelayMs),
+      formatMs(result.firstTokenMs),
+      formatMs(result.firstTtsQueuedMs),
+      formatMs(result.firstTtsSynthesisMs),
+      formatMs(result.firstAudioMs),
+      formatMs(result.speechEndToFirstAudioMs),
+      formatMs(result.audioEndMs),
+      result.decodeRate ?? "-",
+      formatQuality(result),
+      result.transcript || result.prompt || "-",
+      result.error || result.output || "-",
+    ];
+    for (const value of values) {
+      const cell = document.createElement("td");
+      cell.textContent = value;
+      row.append(cell);
+    }
+    elements.resultsBody.append(row);
+  }
+}
+
+function renderBenchmarkSummary() {
+  const summary = displayBenchmarkSummary();
+  if (summary.totalRuns === 0 && summary.allRuns === 0) {
+    elements.benchmarkSummary.textContent = "No benchmark runs yet.";
+    updateMicValidationStatus();
+    return;
+  }
+  const items = [
+    ["Runs", `${summary.totalRuns} ${summary.scope}`],
+    ["Real mic", `${summary.micRuns}/3${summary.micMedianWer == null ? "" : `, WER ${formatPercent(summary.micMedianWer)}`}`],
+    ["Mic end -> audio", formatMs(summary.micMedianSpeechEndToFirstAudioMs)],
+    ["Loopback WER", summary.loopbackMedianWer == null ? "-" : formatPercent(summary.loopbackMedianWer)],
+    ["Loopback end -> audio", formatMs(summary.loopbackMedianSpeechEndToFirstAudioMs)],
+    ["Barge-in", `${summary.bargeInPasses}/${summary.bargeInRuns} pass`],
+  ];
+  elements.benchmarkSummary.replaceChildren(
+    ...items.map(([label, value]) => {
+      const item = document.createElement("div");
+      item.className = "summary-item";
+      const labelEl = document.createElement("span");
+      labelEl.textContent = label;
+      const valueEl = document.createElement("strong");
+      valueEl.textContent = value;
+      item.append(labelEl, valueEl);
+      return item;
+    }),
+  );
+  updateMicValidationStatus();
+}
+
+function displayBenchmarkSummary() {
+  const allSummary = benchmarkSummaryForRows(state.benchmarkResults, { scope: "all" });
+  if (!state.loadedStack) return allSummary;
+  const activeKey = stackKey(currentBenchmarkStack());
+  const currentRows = state.benchmarkResults.filter((result) => stackKey(result.stack) === activeKey);
+  return {
+    ...benchmarkSummaryForRows(currentRows, {
+      scope: "current",
+      stackKey: activeKey,
+      stackLabel: stackLabel(currentBenchmarkStack()),
+    }),
+    allRuns: allSummary.totalRuns,
+  };
+}
+
+function exportBenchmarkSummary() {
+  const activeKey = state.loadedStack ? stackKey(currentBenchmarkStack()) : null;
+  const currentRows = activeKey
+    ? state.benchmarkResults.filter((result) => stackKey(result.stack) === activeKey)
+    : [];
+  return {
+    all: benchmarkSummaryForRows(state.benchmarkResults, { scope: "all" }),
+    current: activeKey
+      ? benchmarkSummaryForRows(currentRows, {
+          scope: "current",
+          stackKey: activeKey,
+          stackLabel: stackLabel(currentBenchmarkStack()),
+        })
+      : null,
+    byStack: benchmarkSummariesByStack(),
+  };
+}
+
+function benchmarkSummariesByStack() {
+  const grouped = new Map();
+  for (const result of state.benchmarkResults) {
+    const key = stackKey(result.stack);
+    if (!grouped.has(key)) grouped.set(key, []);
+    grouped.get(key).push(result);
+  }
+  return [...grouped.entries()].map(([key, rows]) =>
+    benchmarkSummaryForRows(rows, {
+      scope: "stack",
+      stackKey: key,
+      stackLabel: stackLabel(rows[0]?.stack),
+    }),
+  );
+}
+
+function benchmarkSummaryForRows(results, { scope, stackKey: key = "", stackLabel: label = "" } = {}) {
+  const completed = results.filter((result) => !result.error);
+  const ttsRows = completed.filter((result) => result.kind === "tts");
+  const identityRows = completed.filter((result) => result.kind === "identity");
+  const chatRows = completed.filter((result) => result.kind === "chat");
+  const micRows = completed.filter((result) => result.kind === "mic");
+  const loopbackRows = completed.filter((result) => result.kind === "loopback");
+  const bargeInRows = results.filter((result) => result.kind === "barge-in");
+  return {
+    scope,
+    stackKey: key,
+    stackLabel: label,
+    totalRuns: results.length,
+    completedRuns: completed.length,
+    ttsRuns: ttsRows.length,
+    ttsMedianFirstAudioMs: median(ttsRows.map((result) => result.firstAudioMs)),
+    ttsMedianSynthesisMs: median(ttsRows.map((result) => result.firstTtsSynthesisMs)),
+    ttsMedianAudioEndMs: median(ttsRows.map((result) => result.audioEndMs)),
+    identityRuns: identityRows.length,
+    identityMedianFirstTokenMs: median(identityRows.map((result) => result.firstTokenMs)),
+    identityMedianFirstAudioMs: median(identityRows.map((result) => result.firstAudioMs)),
+    identityPasses: identityRows.filter((result) => result.llmQualityPass).length,
+    chatRuns: chatRows.length,
+    chatMedianFirstTokenMs: median(chatRows.map((result) => result.firstTokenMs)),
+    chatMedianFirstAudioMs: median(chatRows.map((result) => result.firstAudioMs)),
+    micRuns: micRows.length,
+    micTargetRuns: 3,
+    micMedianWer: median(micRows.map((result) => result.sttWer)),
+    micMedianSpeechEndToFirstAudioMs: median(micRows.map((result) => result.speechEndToFirstAudioMs)),
+    micMedianSpeechEndToAudioEndMs: median(micRows.map((result) => result.speechEndToAudioEndMs)),
+    loopbackRuns: loopbackRows.length,
+    loopbackMedianWer: median(loopbackRows.map((result) => result.sttWer)),
+    loopbackMedianSpeechEndToFirstAudioMs: median(
+      loopbackRows.map((result) => result.speechEndToFirstAudioMs),
+    ),
+    loopbackMedianSpeechEndToAudioEndMs: median(
+      loopbackRows.map((result) => result.speechEndToAudioEndMs),
+    ),
+    bargeInRuns: bargeInRows.length,
+    bargeInPasses: bargeInRows.filter((result) => result.bargeInPass).length,
+  };
+}
+
+function stackKey(stack = {}) {
+  return [
+    stack.device ?? "",
+    stack.llm ?? "",
+    stack.asr ?? "",
+    stack.voice ?? "",
+    stack.ttsSteps ?? "",
+    stack.vadSilenceMs ?? "",
+    stack.partialAsr ? "partial" : "final",
+    ttsChunkingKey(stack.ttsChunking),
+  ].join("|");
+}
+
+function stackLabel(stack = {}) {
+  const parts = [
+    shortModel(stack.llm),
+    stack.device?.toUpperCase() ?? "-",
+    shortModel(stack.asr),
+    stack.voice ?? "-",
+    `${stack.ttsSteps ?? "-"} steps`,
+  ];
+  const chunking = ttsChunkingLabel(stack.ttsChunking);
+  if (chunking) parts.push(chunking);
+  return parts.join(" / ");
+}
+
+function ttsChunkingKey(chunking = DEFAULT_TTS_CHUNKING) {
+  const normalized = { ...DEFAULT_TTS_CHUNKING, ...(chunking ?? {}) };
+  return Object.keys(DEFAULT_TTS_CHUNKING)
+    .map((key) => `${key}:${normalized[key]}`)
+    .join(",");
+}
+
+function ttsChunkingLabel(chunking = DEFAULT_TTS_CHUNKING) {
+  const normalized = { ...DEFAULT_TTS_CHUNKING, ...(chunking ?? {}) };
+  if (ttsChunkingKey(normalized) === ttsChunkingKey(DEFAULT_TTS_CHUNKING)) return "";
+  return `chunk ${normalized.firstTargetChars}/${normalized.targetChars}`;
+}
+
+function median(values) {
+  const finite = values.filter(Number.isFinite).sort((a, b) => a - b);
+  if (finite.length === 0) return null;
+  const middle = Math.floor(finite.length / 2);
+  if (finite.length % 2 === 1) return finite[middle];
+  return (finite[middle - 1] + finite[middle]) / 2;
+}
+
+function shortModel(modelId = "") {
+  return modelId.split("/").at(-1)?.replace(/-ONNX$/, "") ?? modelId;
+}
+
+function clearLoopbackFeed() {
+  for (const timer of state.loopbackFeedTimers) {
+    window.clearTimeout(timer);
+  }
+  state.loopbackFeedTimers.clear();
+}
+
+function scheduleLoopbackChunk(callback, delayMs) {
+  const timer = window.setTimeout(() => {
+    state.loopbackFeedTimers.delete(timer);
+    callback();
+  }, delayMs);
+  state.loopbackFeedTimers.add(timer);
+}
+
+function handleSpeechStart() {
+  state.currentUserStartedAt = performance.now();
+  elements.partialTranscript.textContent = "Speech detected.";
+  setTile("vad", "Speech", "active");
+  interruptForBargeIn({
+    preserveLoopbackFeed: state.activeBenchmark?.kind === "loopback",
+    logInterruption: true,
+  });
+}
+
+function interruptForBargeIn({ preserveLoopbackFeed = false, cancelTts = true, logInterruption = false } = {}) {
+  const llmBusy = elements.states.llm.textContent === "Generating";
+  const ttsBusy = elements.states.tts.textContent === "Synthesizing" || elements.states.tts.textContent === "Speaking";
+  state.activeTurnId += 1;
+  state.ttsBuffer = "";
+  state.awaitingFirstToken = false;
+  state.awaitingFirstAudio = false;
+  state.firstTtsChunkQueued = false;
+  state.pendingPlaybackSchedules = 0;
+  if (!preserveLoopbackFeed) clearLoopbackFeed();
+  state.playback?.stop();
+  if (cancelTts) state.ttsWorker?.postMessage({ type: "cancel" });
+  state.llmWorker?.postMessage({ type: "interrupt" });
+  if (state.modelsLoaded && llmBusy) setTile("llm", "Ready", "ready");
+  if (state.modelsLoaded && cancelTts && ttsBusy) setTile("tts", "Ready", "ready");
+  if (logInterruption && (llmBusy || ttsBusy)) logEvent("Barge-in interrupted generation or playback.");
+  setAudioState("Audio idle", false);
+}
+
+function stopAll() {
+  state.suiteRunning = false;
+  cancelMicSeries();
+  interruptForBargeIn();
+  cancelActiveBenchmark();
+  setTile("llm", state.modelsLoaded ? "Ready" : "Idle", state.modelsLoaded ? "ready" : "idle");
+  setTile("tts", state.modelsLoaded ? "Ready" : "Idle", state.modelsLoaded ? "ready" : "idle");
+  if (state.modelsLoaded) setBenchmarkControlsDisabled(false);
+  logEvent("Stopped generation and playback.");
+}
+
+function generateResponse(text) {
+  state.activeTurnId += 1;
+  state.messages.push({ role: "user", content: text });
+  trimConversation();
+  const promptMessages = promptMessagesForTurn(text);
+  state.lastTranscriptAt = performance.now();
+  state.llmWorker.postMessage({
+    type: "generate",
+    turnId: state.activeTurnId,
+    messages: promptMessages,
+  });
+}
+
+function trimConversation() {
+  const pinned = state.messages.slice(0, SYSTEM_MESSAGES.length);
+  const rest = state.messages.slice(SYSTEM_MESSAGES.length);
+  state.messages = [...pinned, ...rest.slice(-8)];
+}
+
+function promptMessagesForTurn(text) {
+  if (!isAppIdentityQuestion(text)) return state.messages;
+  const rest = state.messages.slice(SYSTEM_MESSAGES.length);
+  return [
+    {
+      role: "system",
+      content: IDENTITY_SYSTEM_PROMPT,
+    },
+    ...IDENTITY_PRIMER_MESSAGES,
+    ...rest,
+  ];
+}
+
+function initialMessages() {
+  return SYSTEM_MESSAGES.map((message) => ({ ...message }));
+}
+
+function resetConversationHistory() {
+  state.messages = initialMessages();
+}
+
+function bufferTts(text) {
+  state.ttsBuffer += text;
+  const chunks = extractSpeakableChunks(state.ttsBuffer, false);
+  for (const chunk of chunks.ready) {
+    enqueueTts(chunk);
+  }
+  state.ttsBuffer = chunks.remainder;
+}
+
+function flushTts(final = false) {
+  const chunks = extractSpeakableChunks(state.ttsBuffer, final);
+  for (const chunk of chunks.ready) {
+    enqueueTts(chunk);
+  }
+  state.ttsBuffer = chunks.remainder;
+}
+
+function extractSpeakableChunks(buffer, final) {
+  const ready = [];
+  let text = buffer.replace(/\s+/g, " ");
+  while (text.length > 0) {
+    const boundary = findBoundary(text, final);
+    if (!boundary) break;
+    const chunk = text.slice(0, boundary.index).trim();
+    text = text.slice(boundary.index).trimStart();
+    if (chunk.length > 0) {
+      ready.push({
+        text: chunk,
+        boundaryKind: boundary.kind,
+        wordBoundarySafe: boundary.wordBoundarySafe,
+      });
+    }
+  }
+  return { ready, remainder: text };
+}
+
+function findBoundary(text, final) {
+  const firstChunk = state.awaitingFirstAudio && !state.firstTtsChunkQueued;
+  const chunking = state.ttsChunking;
+  const sentence = text.search(/[.!?]\s/);
+  if (sentence >= (firstChunk ? chunking.firstSentenceMinChars : chunking.sentenceMinChars)) {
+    return boundaryAt(text, sentence + 1, "sentence");
+  }
+  const clause = text.search(/[,;:]\s/);
+  if (clause >= (firstChunk ? chunking.firstClauseMinChars : chunking.clauseMinChars)) {
+    return boundaryAt(text, clause + 1, "clause");
+  }
+  const targetLength = firstChunk ? chunking.firstTargetChars : chunking.targetChars;
+  const minSpace = firstChunk ? chunking.firstMinSpaceChars : chunking.minSpaceChars;
+  if (text.length >= targetLength) {
+    const space = text.lastIndexOf(" ", targetLength);
+    if (space > minSpace) return boundaryAt(text, space, "space-before-target");
+    const maxForward = targetLength * 2;
+    const nextSpace = text.indexOf(" ", targetLength);
+    if (nextSpace > minSpace && nextSpace <= maxForward) return boundaryAt(text, nextSpace, "space-after-target");
+    if (firstChunk && text.length < maxForward) return null;
+    return boundaryAt(text, targetLength, "hard-limit");
+  }
+  if (final && text.trim().length > 0) return boundaryAt(text, text.length, "final");
+  return null;
+}
+
+function boundaryAt(text, index, kind) {
+  return {
+    index,
+    kind,
+    wordBoundarySafe: isWordBoundarySafe(text, index),
+  };
+}
+
+function isWordBoundarySafe(text, index) {
+  if (index >= text.length) return true;
+  const before = text[index - 1] ?? "";
+  const after = text[index] ?? "";
+  if (/\s/.test(after)) return true;
+  if (/[.!?,;:]/.test(before)) return true;
+  return !(isWordLikeChar(before) && isWordLikeChar(after));
+}
+
+function isWordLikeChar(char) {
+  return /[A-Za-z0-9']/.test(char);
+}
+
+function enqueueTts(chunk) {
+  const voice = elements.voiceSelect.value;
+  const steps = Number(elements.ttsSteps.value);
+  const sequence = ++state.ttsSequence;
+  const chunkInfo = normalizeTtsChunk(chunk);
+  const speakableText = chunkInfo.text.trim().replace(/^["'“”]+|["'“”]+$/g, "");
+  if (!speakableText) return;
+  const enqueuedAt = performance.now();
+  if (!state.firstTtsChunkQueued) {
+    state.firstTtsChunkQueued = true;
+    const queuedMs = Number.isFinite(state.lastTranscriptAt) ? enqueuedAt - state.lastTranscriptAt : null;
+    elements.firstTtsQueuedLatency.textContent = formatMs(queuedMs);
+    if (state.activeBenchmark) {
+      state.activeBenchmark.firstTtsQueuedMs = queuedMs;
+      state.activeBenchmark.firstTtsText = speakableText;
+      state.activeBenchmark.firstTtsChars = speakableText.length;
+      state.activeBenchmark.firstTtsBoundaryKind = chunkInfo.boundaryKind;
+      state.activeBenchmark.firstTtsWordBoundarySafe = chunkInfo.wordBoundarySafe;
+    }
+  }
+  state.ttsWorker.postMessage({
+    type: "speak",
+    turnId: state.activeTurnId,
+    sequence,
+    enqueuedAt,
+    text: speakableText,
+    voice,
+    steps,
+    speed: 1.08,
+  });
+}
+
+function normalizeTtsChunk(chunk) {
+  if (typeof chunk === "string") {
+    return {
+      text: chunk,
+      boundaryKind: "direct",
+      wordBoundarySafe: true,
+    };
+  }
+  return {
+    text: chunk?.text ?? "",
+    boundaryKind: chunk?.boundaryKind ?? "",
+    wordBoundarySafe: chunk?.wordBoundarySafe ?? null,
+  };
+}
+
+function cleanAssistantResponse(text) {
+  return text.trim().replace(/^["'“”]+|["'“”]+$/g, "").trim();
+}
+
+function runBenchmark() {
+  if (!state.modelsLoaded || !canStartBenchmark()) return false;
+  state.playback?.unlock().catch(() => {});
+  interruptForBargeIn();
+  resetConversationHistory();
+  state.lastSpeechEndAt = null;
+  state.lastVadCloseAt = null;
+  state.lastVadCloseDelayMs = null;
+  resetMetrics();
+  const prompt = APP_IDENTITY_PROMPT;
+  startBenchmark("identity", prompt);
+  logEvent("Running identity benchmark.");
+  elements.finalTranscript.textContent = prompt;
+  generateResponse(prompt);
+  return true;
+}
+
+function runChatBenchmark() {
+  if (!state.modelsLoaded || !canStartBenchmark()) return false;
+  state.playback?.unlock().catch(() => {});
+  interruptForBargeIn();
+  resetConversationHistory();
+  state.lastSpeechEndAt = null;
+  state.lastVadCloseAt = null;
+  state.lastVadCloseDelayMs = null;
+  resetMetrics();
+  const prompt = "Greet the user in one short sentence.";
+  startBenchmark("chat", prompt);
+  logEvent("Running chat benchmark.");
+  elements.finalTranscript.textContent = prompt;
+  generateResponse(prompt);
+  return true;
+}
+
+function runTtsBenchmark() {
+  if (!state.modelsLoaded || !canStartBenchmark()) return false;
+  state.playback?.unlock().catch(() => {});
+  const ttsIdle = elements.states.tts.textContent === "Ready" || elements.states.tts.textContent === "Idle";
+  interruptForBargeIn({ cancelTts: !ttsIdle });
+  state.lastSpeechEndAt = null;
+  state.lastVadCloseAt = null;
+  state.lastVadCloseDelayMs = null;
+  resetMetrics();
+  const text = "This is a short local speech benchmark.";
+  startBenchmark("tts", text);
+  state.lastTranscriptAt = performance.now();
+  state.awaitingFirstAudio = true;
+  state.firstTtsChunkQueued = false;
+  state.ttsBuffer = "";
+  state.currentAssistant = text;
+  elements.partialTranscript.textContent = "";
+  elements.finalTranscript.textContent = "TTS benchmark";
+  elements.llmOutput.textContent = text;
+  state.activeBenchmark.output = text;
+  logEvent("Running TTS benchmark.");
+  enqueueTts(text);
+  state.activeBenchmark.llmDoneAt = performance.now();
+  state.activeBenchmark.llmCompleteMs = 0;
+  window.setTimeout(() => finalizeBenchmarkIfIdle(), 0);
+  return true;
+}
+
+function runLoopbackBenchmark(options = {}) {
+  if (!state.modelsLoaded || !canStartBenchmark()) return false;
+  state.playback?.unlock().catch(() => {});
+  interruptForBargeIn();
+  resetConversationHistory();
+  state.lastSpeechEndAt = null;
+  state.lastVadCloseAt = null;
+  state.lastVadCloseDelayMs = null;
+  state.loopbackRequestId += 1;
+  const text = APP_IDENTITY_PROMPT;
+  startBenchmark("loopback", text);
+  elements.partialTranscript.textContent = "Synthesizing local loopback speech...";
+  elements.finalTranscript.textContent = "";
+  elements.llmOutput.textContent = "";
+  resetMetrics();
+  const speed = Number.isFinite(options?.speed) ? options.speed : DEFAULT_LOOPBACK_SPEED;
+  state.activeBenchmark.loopbackSpeed = speed;
+  logEvent(`Running voice loopback benchmark: "${text}"`);
+  state.ttsWorker.postMessage({
+    type: "synthesize",
+    requestId: state.loopbackRequestId,
+    text,
+    voice: elements.voiceSelect.value,
+    steps: 2,
+    speed,
+  });
+  return true;
+}
+
+function runBargeInBenchmark() {
+  if (!state.modelsLoaded || !canStartBenchmark()) return false;
+  state.playback?.unlock().catch(() => {});
+  interruptForBargeIn();
+  state.lastSpeechEndAt = null;
+  state.lastVadCloseAt = null;
+  state.lastVadCloseDelayMs = null;
+  resetMetrics();
+  const text = "This is a deliberately long local speech benchmark for interrupting audio playback.";
+  startBenchmark("barge-in", "Synthetic speech start during TTS");
+  state.lastTranscriptAt = performance.now();
+  state.awaitingFirstAudio = true;
+  state.firstTtsChunkQueued = false;
+  state.ttsBuffer = "";
+  state.currentAssistant = text;
+  elements.partialTranscript.textContent = "";
+  elements.finalTranscript.textContent = "Barge-in check";
+  elements.llmOutput.textContent = text;
+  state.activeBenchmark.output = "Waiting to interrupt in-flight TTS.";
+  state.activeBenchmark.llmDoneAt = performance.now();
+  state.activeBenchmark.llmCompleteMs = 0;
+  logEvent("Running barge-in check.");
+  enqueueTts(text);
+  const startedAt = performance.now();
+  window.setTimeout(() => {
+    if (state.activeBenchmark?.kind !== "barge-in") return;
+    state.activeBenchmark.bargeInMs = performance.now() - startedAt;
+    handleSpeechStart();
+    window.setTimeout(() => {
+      if (state.activeBenchmark?.kind !== "barge-in") return;
+      state.activeBenchmark.firstAudioMs ??= parseMetricMs(elements.firstAudioLatency.textContent);
+      state.activeBenchmark.decodeRate = elements.decodeRate.textContent;
+      state.activeBenchmark.bargeInPass = state.activeBenchmark.firstAudioMs == null;
+      state.activeBenchmark.output = state.activeBenchmark.bargeInPass
+        ? "Barge-in cancelled in-flight TTS before playback."
+        : "Barge-in did not prevent first audio.";
+      if (!state.activeBenchmark.bargeInPass) state.activeBenchmark.error = state.activeBenchmark.output;
+      completeActiveBenchmark();
+    }, 2200);
+  }, 250);
+  return true;
+}
+
+async function runMicBenchmark(options = {}) {
+  const series = options?.series === true;
+  if (!state.modelsLoaded) return false;
+  if (!canStartBenchmark({ allowMicSeries: series })) return false;
+  state.playback?.unlock().catch(() => {});
+  interruptForBargeIn();
+  state.lastSpeechEndAt = null;
+  state.lastVadCloseAt = null;
+  state.lastVadCloseDelayMs = null;
+  resetMetrics();
+  const prompt = APP_IDENTITY_PROMPT;
+  const runLabel = series ? ` (${state.micSeries.completed + 1}/${state.micSeries.target})` : "";
+  elements.finalTranscript.textContent = prompt;
+  elements.llmOutput.textContent = "";
+  elements.partialTranscript.textContent = `Say: "${prompt}"${runLabel}`;
+  startBenchmark("mic", prompt, { referenceText: prompt, timeoutMs: options?.timeoutMs ?? 120000 });
+  state.activeBenchmark.stopMicAfterTranscript = options?.stopMicAfterTranscript === true;
+  state.activeBenchmark.requireExactTranscript = options?.requireExactTranscript === true;
+  updateMicValidationStatus();
+  logEvent(`Starting real-mic benchmark${runLabel}: "${prompt}"`);
+  try {
+    if (!state.micActive) await startMic();
+    logEvent(`Benchmarking real-mic turn: "${prompt}"`);
+    return true;
+  } catch (error) {
+    cancelActiveBenchmark();
+    if (series) cancelMicSeries();
+    logEvent(`Microphone benchmark failed: ${error.message}`);
+    return false;
+  }
+}
+
+async function runMicSeriesBenchmark() {
+  if (!state.modelsLoaded) return false;
+  if (!canStartBenchmark()) return false;
+  state.micSeries.active = true;
+  state.micSeries.completed = 0;
+  state.micSeries.target = 3;
+  updateMicSeriesButton();
+  setBenchmarkControlsDisabled(false);
+  logEvent("Starting 3-run real-mic series.");
+  const started = await runMicBenchmark({ series: true });
+  if (!started) cancelMicSeries();
+  return started;
+}
+
+function canStartBenchmark({ allowMicSeries = false } = {}) {
+  if (state.activeBenchmark) {
+    logEvent("A benchmark is already running.");
+    return false;
+  }
+  if (state.micSeries.active && !allowMicSeries) {
+    logEvent("A real-mic series is already running.");
+    return false;
+  }
+  return true;
+}
+
+async function runBenchmarkSuite() {
+  if (!state.modelsLoaded || state.suiteRunning) return;
+  if (!canStartBenchmark()) return;
+  state.suiteRunning = true;
+  setBenchmarkControlsDisabled(true);
+  logEvent("Running benchmark suite for the current stack.");
+  try {
+    await runSuiteStep("TTS", runTtsBenchmark);
+    await runSuiteStep("barge-in", runBargeInBenchmark);
+    await runSuiteStep("identity", runBenchmark);
+    await runSuiteStep("chat", runChatBenchmark);
+    await runSuiteStep("loopback", runLoopbackBenchmark);
+    logEvent("Benchmark suite complete.");
+  } catch (error) {
+    logEvent(`Benchmark suite stopped: ${error.message}`);
+  } finally {
+    state.suiteRunning = false;
+    if (state.modelsLoaded) setBenchmarkControlsDisabled(false);
+  }
+}
+
+async function runSuiteStep(label, runner) {
+  const previousCount = state.benchmarkResults.length;
+  if (runner() === false) throw new Error(`${label} benchmark did not start.`);
+  await waitForBenchmarkRow(previousCount, label);
+}
+
+function waitForBenchmarkRow(previousCount, label) {
+  return new Promise((resolve, reject) => {
+    const startedAt = performance.now();
+    const timer = window.setInterval(() => {
+      if (state.benchmarkResults.length > previousCount) {
+        window.clearInterval(timer);
+        resolve();
+        return;
+      }
+      if (!state.suiteRunning) {
+        window.clearInterval(timer);
+        reject(new Error(`${label} benchmark was cancelled.`));
+        return;
+      }
+      if (performance.now() - startedAt > 135000) {
+        window.clearInterval(timer);
+        reject(new Error(`${label} benchmark did not finish.`));
+      }
+    }, 250);
+  });
+}
+
+function feedLoopbackAudio(audio, sampleRate) {
+  clearLoopbackFeed();
+  const requestId = state.loopbackRequestId;
+  const samples = audio instanceof Float32Array ? audio : new Float32Array(audio);
+  const chunkSize = Math.max(512, Math.floor(sampleRate * 0.032));
+  if (state.activeBenchmark) state.activeBenchmark.loopbackSampleRate = sampleRate;
+  elements.partialTranscript.textContent = "Feeding synthesized speech through VAD...";
+  let delayMs = 0;
+  const postChunk = (chunk) => {
+    scheduleLoopbackChunk(() => {
+      if (requestId !== state.loopbackRequestId || !state.asrWorker) return;
+      state.asrWorker.postMessage({ type: "audio", buffer: chunk, sampleRate }, [chunk.buffer]);
+    }, delayMs);
+    delayMs += (chunk.length / sampleRate) * 1000;
+  };
+  for (let offset = 0; offset < samples.length; offset += chunkSize) {
+    const chunk = samples.slice(offset, Math.min(offset + chunkSize, samples.length));
+    postChunk(chunk);
+  }
+  const silenceSeconds = (currentVadSilenceMs() + 220) / 1000;
+  const silenceChunks = Math.ceil(sampleRate * silenceSeconds / chunkSize);
+  for (let i = 0; i < silenceChunks; i += 1) {
+    const silence = new Float32Array(chunkSize);
+    postChunk(silence);
+  }
+  scheduleLoopbackChunk(() => {
+    if (requestId !== state.loopbackRequestId || !state.asrWorker) return;
+    state.asrWorker.postMessage({ type: "flush" });
+  }, delayMs + 1000);
+}
+
+function isLocalAutomationHost() {
+  return ["localhost", "127.0.0.1", "::1", ""].includes(location.hostname);
+}
+
+function automationSnapshot() {
+  return {
+    modelsLoaded: state.modelsLoaded,
+    modelsLoading: state.modelsLoading,
+    micActive: state.micActive,
+    micInputStats: {
+      chunks: state.micInputStats.chunks,
+      samples: state.micInputStats.samples,
+      peak: state.micInputStats.peak,
+      rms:
+        state.micInputStats.samples > 0
+          ? Math.sqrt(state.micInputStats.sumSquares / state.micInputStats.samples)
+          : null,
+    },
+    activeBenchmark: state.activeBenchmark ? { ...state.activeBenchmark } : null,
+    suiteRunning: state.suiteRunning,
+    micSeries: { ...state.micSeries, timer: Boolean(state.micSeries.timer) },
+    ttsChunking: { ...state.ttsChunking },
+    stack: state.loadedStack ? currentBenchmarkStack() : null,
+    summary: exportBenchmarkSummary(),
+    results: [...state.benchmarkResults],
+    events: [...elements.eventLog.children].map((item) => item.textContent),
+  };
+}
+
+async function automationWebGpuInfo() {
+  await supportsWebGPU();
+  return {
+    available: state.webgpuAvailable,
+    adapter: state.webgpuAdapterInfo,
+    features: state.webgpuAdapterFeatures,
+    softwareAdapter: state.webgpuSoftwareAdapter,
+    userAgent: navigator.userAgent,
+    platform: navigator.platform || "",
+    hardwareConcurrency: navigator.hardwareConcurrency ?? null,
+    deviceMemoryGb: navigator.deviceMemory ?? null,
+  };
+}
+
+function applyAutomationStack(options = {}) {
+  if (state.modelsLoaded || state.modelsLoading) {
+    throw new Error("Unload models before changing the benchmark stack.");
+  }
+  if (options.device) elements.deviceSelect.value = options.device;
+  if (options.llm) elements.llmModelSelect.value = options.llm;
+  if (options.asr) elements.asrModelSelect.value = options.asr;
+  applyRuntimeOptions(options);
+}
+
+function normalizedTtsChunking(options = {}) {
+  const next = { ...state.ttsChunking };
+  for (const key of Object.keys(DEFAULT_TTS_CHUNKING)) {
+    if (options[key] == null) continue;
+    const value = Number(options[key]);
+    if (!Number.isFinite(value)) continue;
+    next[key] = Math.max(1, Math.min(160, Math.round(value)));
+  }
+  return next;
+}
+
+function hasTtsChunkingOption(options = {}) {
+  return Object.keys(DEFAULT_TTS_CHUNKING).some((key) => options[key] != null);
+}
+
+function applyRuntimeOptions(options = {}) {
+  if (options.voice) {
+    elements.voiceSelect.value = options.voice;
+    if (state.modelsLoaded || state.modelsLoading) {
+      state.ttsWorker?.postMessage({ type: "preload-voice", voice: elements.voiceSelect.value });
+    }
+  }
+  if (options.ttsSteps != null) {
+    elements.ttsSteps.value = String(options.ttsSteps);
+    updateTtsStepsLabel();
+  }
+  if (options.vadSilenceMs != null) {
+    elements.vadSilence.value = String(options.vadSilenceMs);
+    updateVadSilenceLabel();
+  }
+  if (options.partialAsr != null) {
+    elements.partialToggle.checked = Boolean(options.partialAsr);
+  }
+  if (options.ttsChunking || hasTtsChunkingOption(options)) {
+    state.ttsChunking = normalizedTtsChunking(options.ttsChunking ?? options);
+  }
+  if (state.modelsLoaded || state.modelsLoading) configureAsrWorker();
+}
+
+function preloadTtsVoice(voice = elements.voiceSelect.value, { timeoutMs = 30000 } = {}) {
+  if (!state.ttsWorker) return Promise.reject(new Error("TTS worker is not loaded."));
+  const requestId = ++state.ttsVoiceRequestId;
+  return new Promise((resolve, reject) => {
+    const timeout = window.setTimeout(() => {
+      state.ttsVoiceRequests.delete(requestId);
+      reject(new Error(`Voice ${voice} preload timed out.`));
+    }, timeoutMs);
+    state.ttsVoiceRequests.set(requestId, { resolve, reject, timeout });
+    state.ttsWorker.postMessage({ type: "preload-voice", voice, requestId });
+  });
+}
+
+function rejectTtsVoiceRequests(error) {
+  for (const request of state.ttsVoiceRequests.values()) {
+    window.clearTimeout(request.timeout);
+    request.reject(error);
+  }
+  state.ttsVoiceRequests.clear();
+}
+
+function waitForAutomationCondition(predicate, timeoutMs, label) {
+  return new Promise((resolve, reject) => {
+    const startedAt = performance.now();
+    const timer = window.setInterval(() => {
+      if (predicate()) {
+        window.clearInterval(timer);
+        resolve();
+        return;
+      }
+      if (performance.now() - startedAt > timeoutMs) {
+        window.clearInterval(timer);
+        reject(new Error(`${label} timed out after ${(timeoutMs / 1000).toFixed(0)} seconds.`));
+      }
+    }, 250);
+  });
+}
+
+function benchmarkRowsAddedSince(previousCount) {
+  return state.benchmarkResults.slice(0, Math.max(0, state.benchmarkResults.length - previousCount));
+}
+
+function synthesizeAutomationAudio({
+  text = APP_IDENTITY_PROMPT,
+  voice = elements.voiceSelect.value,
+  steps = 2,
+  speed = 1.05,
+  timeoutMs = 60000,
+} = {}) {
+  if (!state.modelsLoaded || !state.ttsWorker) {
+    return Promise.reject(new Error("Load models before synthesizing automation audio."));
+  }
+  const requestId = `automation-${++state.automationSynthesisRequestId}`;
+  return new Promise((resolve, reject) => {
+    const timeout = window.setTimeout(() => {
+      state.automationSynthesisRequests.delete(requestId);
+      reject(new Error("Automation synthesis timed out."));
+    }, timeoutMs);
+    state.automationSynthesisRequests.set(requestId, {
+      text,
+      voice,
+      steps,
+      speed,
+      resolve: (result) => {
+        window.clearTimeout(timeout);
+        resolve(result);
+      },
+      reject: (error) => {
+        window.clearTimeout(timeout);
+        reject(error);
+      },
+    });
+    state.ttsWorker.postMessage({
+      type: "synthesize",
+      requestId,
+      text,
+      voice,
+      steps,
+      speed,
+    });
+  });
+}
+
+async function runSingleAutomationBenchmark(runner, { timeoutMs = 150000, ...runnerOptions } = {}) {
+  const previousCount = state.benchmarkResults.length;
+  const started = await runner({ ...runnerOptions, timeoutMs: Math.max(1000, timeoutMs - 5000) });
+  if (started === false) throw new Error("Benchmark did not start.");
+  await waitForAutomationCondition(
+    () => state.benchmarkResults.length > previousCount,
+    timeoutMs,
+    "Benchmark",
+  );
+  return automationSnapshot();
+}
+
+async function runAutomationMicSeries({ timeoutMs = 420000 } = {}) {
+  const previousCount = state.benchmarkResults.length;
+  const started = await runMicSeriesBenchmark();
+  if (started === false) throw new Error("Real-mic series did not start.");
+  await waitForAutomationCondition(
+    () => !state.micSeries.active && !state.activeBenchmark,
+    timeoutMs,
+    "Real-mic series",
+  );
+  const rows = benchmarkRowsAddedSince(previousCount);
+  const target = rows.find((result) => result.kind === "mic")?.micSeriesTarget ?? 3;
+  const micRows = rows.filter((result) => result.kind === "mic" && result.micSeriesTarget === target);
+  if (micRows.length < target || micRows.some((result) => result.error)) {
+    throw new Error(`Real-mic series produced ${micRows.length}/${target} completed rows.`);
+  }
+  return automationSnapshot();
+}
+
+function installAutomationApi() {
+  if (!isLocalAutomationHost()) return;
+  window.browserSpeakBench = {
+    version: 1,
+    state: automationSnapshot,
+    exportResults() {
+      return {
+        summary: exportBenchmarkSummary(),
+        results: [...state.benchmarkResults],
+      };
+    },
+    webgpuInfo: automationWebGpuInfo,
+    setRuntimeOptions(options = {}) {
+      applyRuntimeOptions(options);
+      return automationSnapshot();
+    },
+    async preloadVoice(options = {}) {
+      await preloadTtsVoice(options.voice ?? elements.voiceSelect.value, {
+        timeoutMs: options.timeoutMs ?? 30000,
+      });
+      return automationSnapshot();
+    },
+    async loadStack(options = {}) {
+      applyAutomationStack(options);
+      await loadModels({ ttsWarmup: options.ttsWarmup !== false });
+      if (!state.modelsLoaded) throw new Error("Model load did not complete.");
+      return automationSnapshot();
+    },
+    async unload() {
+      await unloadModels();
+      return automationSnapshot();
+    },
+    runSuite: async () => {
+      await runBenchmarkSuite();
+      return automationSnapshot();
+    },
+    runIdentity: (options) => runSingleAutomationBenchmark(runBenchmark, options),
+    runChat: (options) => runSingleAutomationBenchmark(runChatBenchmark, options),
+    runTts: (options) => runSingleAutomationBenchmark(runTtsBenchmark, options),
+    runLoopback: (options) => runSingleAutomationBenchmark(runLoopbackBenchmark, options),
+    runBargeIn: (options) => runSingleAutomationBenchmark(runBargeInBenchmark, options),
+    runMic: (options) => runSingleAutomationBenchmark(runMicBenchmark, options),
+    runMicSeries: runAutomationMicSeries,
+    synthesizeAudio: synthesizeAutomationAudio,
+    waitForRows(count, { timeoutMs = 180000 } = {}) {
+      return waitForAutomationCondition(
+        () => state.benchmarkResults.length >= count,
+        timeoutMs,
+        `${count} benchmark rows`,
+      ).then(automationSnapshot);
+    },
+    clearResults() {
+      cancelMicSeries();
+      clearBenchmarkTimeout();
+      state.benchmarkResults = [];
+      state.activeBenchmark = null;
+      renderBenchmarkResults();
+      return automationSnapshot();
+    },
+    stop() {
+      stopAll();
+      return automationSnapshot();
+    },
+    stopMic() {
+      stopMic();
+      return automationSnapshot();
+    },
+  };
+}
+
+elements.loadButton.addEventListener("click", () => {
+  const action = state.modelsLoaded ? unloadModels() : loadModels();
+  action.catch((error) => logEvent(`Model control failed: ${error.message}`));
+});
+elements.micButton.addEventListener("click", () => {
+  if (state.micActive) stopMic();
+  else startMic().catch((error) => logEvent(`Microphone failed: ${error.message}`));
+});
+elements.stopButton.addEventListener("click", stopAll);
+elements.suiteButton.addEventListener("click", runBenchmarkSuite);
+elements.benchmarkButton.addEventListener("click", runBenchmark);
+elements.chatBenchmarkButton.addEventListener("click", runChatBenchmark);
+elements.ttsBenchmarkButton.addEventListener("click", runTtsBenchmark);
+elements.loopbackButton.addEventListener("click", runLoopbackBenchmark);
+elements.bargeInButton.addEventListener("click", runBargeInBenchmark);
+elements.micBenchmarkButton.addEventListener("click", runMicBenchmark);
+elements.micSeriesButton.addEventListener("click", runMicSeriesBenchmark);
+elements.copyResultsButton.addEventListener("click", () => {
+  const payload = JSON.stringify(
+    {
+      summary: exportBenchmarkSummary(),
+      results: state.benchmarkResults,
+    },
+    null,
+    2,
+  );
+  const write = navigator.clipboard?.writeText(payload);
+  if (write) {
+    write.then(() => logEvent("Benchmark JSON copied.")).catch(() => logEvent(payload));
+  } else {
+    logEvent(payload);
+  }
+});
+elements.clearResultsButton.addEventListener("click", () => {
+  cancelMicSeries();
+  clearBenchmarkTimeout();
+  state.benchmarkResults = [];
+  state.activeBenchmark = null;
+  renderBenchmarkResults();
+});
+elements.clearLogButton.addEventListener("click", () => {
+  elements.eventLog.replaceChildren();
+});
+elements.deviceSelect.addEventListener("change", () => {
+  updateRuntimeStatus();
+  if (!state.modelsLoaded && !state.modelsLoading) {
+    resetPipelineTiles().catch((error) => logEvent(`Runtime status failed: ${error.message}`));
+  }
+});
+elements.ttsSteps.addEventListener("input", updateTtsStepsLabel);
+elements.voiceSelect.addEventListener("change", () => {
+  if (!state.modelsLoaded) return;
+  preloadTtsVoice().catch((error) => logEvent(`Voice preload failed: ${error.message}`));
+});
+elements.partialToggle.addEventListener("change", () => {
+  configureAsrWorker();
+});
+elements.vadSilence.addEventListener("input", () => {
+  updateVadSilenceLabel();
+  configureAsrWorker();
+});
+
+updateTtsStepsLabel();
+updateVadSilenceLabel();
+updateMicValidationStatus();
+installAutomationApi();
+initRuntimeSupport();
+
+async function initRuntimeSupport() {
+  if (!window.isSecureContext) {
+    logEvent("Use http://localhost or HTTPS so the browser will allow microphone access.");
+  }
+  await supportsWebGPU();
+  if (!state.webgpuAvailable || state.webgpuSoftwareAdapter) {
+    if (!state.modelsLoaded && !state.modelsLoading) {
+      const label = state.webgpuSoftwareAdapter ? "WASM auto" : "WASM only";
+      setTile("llm", label, "warn");
+      setTile("tts", label, "warn");
+    }
+    if (state.webgpuSoftwareAdapter) {
+      logEvent(
+        `Software WebGPU adapter detected (${formatGpuAdapter(
+          state.webgpuAdapterInfo,
+        )}); Auto uses WASM fallback.`,
+      );
+    } else {
+      logEvent("WebGPU is unavailable; the demo can fall back to WASM but latency will be higher.");
+    }
+  }
+}

index.html

@@ -1,19 +1,242 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Local Voice LLM</title>
+    <link rel="icon" href="data:," />
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main class="shell">
+      <section class="topbar" aria-label="Session controls">
+        <div>
+          <h1>Local Voice LLM</h1>
+          <p>Client-side VAD, speech recognition, language model, and Supertonic speech synthesis.</p>
+        </div>
+        <div class="actions">
+          <button id="loadButton" type="button">
+            <span class="button-icon" aria-hidden="true">↓</span>
+            Load models
+          </button>
+          <button id="micButton" type="button" disabled>
+            <span class="button-icon" aria-hidden="true">●</span>
+            Start mic
+          </button>
+          <button id="stopButton" type="button" disabled title="Stop generation and audio playback">
+            <span class="button-icon" aria-hidden="true">■</span>
+            Stop
+          </button>
+        </div>
+      </section>
+
+      <section class="status-grid" aria-label="Model and pipeline state">
+        <article class="status-tile" data-state="idle" id="vadTile">
+          <span>VAD</span>
+          <strong id="vadState">Idle</strong>
+        </article>
+        <article class="status-tile" data-state="idle" id="asrTile">
+          <span>STT</span>
+          <strong id="asrState">Idle</strong>
+        </article>
+        <article class="status-tile" data-state="idle" id="llmTile">
+          <span>LLM</span>
+          <strong id="llmState">Idle</strong>
+        </article>
+        <article class="status-tile" data-state="idle" id="ttsTile">
+          <span>TTS</span>
+          <strong id="ttsState">Idle</strong>
+        </article>
+      </section>
+
+      <section class="workspace">
+        <div class="conversation" aria-label="Conversation">
+          <div class="transcript-panel">
+            <div class="panel-head">
+              <h2>Input</h2>
+              <span id="micBadge" class="badge">Mic off</span>
+            </div>
+            <div id="partialTranscript" class="partial">Waiting for speech.</div>
+            <div id="finalTranscript" class="final"></div>
+          </div>
+
+          <div class="response-panel">
+            <div class="panel-head">
+              <h2>Assistant</h2>
+              <span id="audioBadge" class="badge">Audio idle</span>
+            </div>
+            <div id="llmOutput" class="output">Load the models, start the microphone, and speak naturally.</div>
+          </div>
+        </div>
+
+        <aside class="side">
+          <section class="settings">
+            <h2>Runtime</h2>
+            <label>
+              Device
+              <select id="deviceSelect">
+                <option value="auto" selected>Auto</option>
+                <option value="webgpu">WebGPU</option>
+                <option value="wasm">WASM</option>
+              </select>
+            </label>
+            <div class="runtime-status" id="runtimeStatus" data-state="checking" aria-live="polite">
+              <span id="runtimeDeviceStatus">Checking runtime</span>
+              <small id="runtimeDeviceDetail">Adapter probe pending.</small>
+            </div>
+            <label>
+              LLM
+              <select id="llmModelSelect">
+                <option value="HuggingFaceTB/SmolLM2-135M-Instruct" selected>SmolLM2 135M Instruct</option>
+                <option value="onnx-community/SmolLM2-360M-Instruct-ONNX">SmolLM2 360M Instruct</option>
+                <option value="onnx-community/granite-4.0-350m-ONNX-web">Granite 4.0 350M (WebGPU)</option>
+                <option value="onnx-community/Qwen3-0.6B-ONNX">Qwen3 0.6B (WebGPU)</option>
+                <option value="HuggingFaceTB/SmolLM2-1.7B-Instruct">SmolLM2 1.7B (WebGPU)</option>
+              </select>
+            </label>
+            <label>
+              STT
+              <select id="asrModelSelect">
+                <option value="onnx-community/moonshine-base-ONNX" selected>Moonshine Base</option>
+                <option value="onnx-community/moonshine-tiny-ONNX">Moonshine Tiny</option>
+                <option value="onnx-community/whisper-tiny.en">Whisper Tiny English</option>
+              </select>
+            </label>
+            <label>
+              TTS voice
+              <select id="voiceSelect">
+                <option value="F1">F1</option>
+                <option value="F2" selected>F2</option>
+                <option value="M1">M1</option>
+                <option value="M2">M2</option>
+              </select>
+            </label>
+            <label>
+              <span class="range-label">
+                TTS steps
+                <output id="ttsStepsValue" for="ttsSteps">2</output>
+              </span>
+              <input id="ttsSteps" type="range" min="2" max="8" value="2" />
+            </label>
+            <label>
+              <span class="range-label">
+                VAD silence
+                <span><output id="vadSilenceValue" for="vadSilence">480</output> ms</span>
+              </span>
+              <input id="vadSilence" type="range" min="200" max="800" step="20" value="480" />
+            </label>
+            <label class="check">
+              <input id="partialToggle" type="checkbox" checked />
+              Partial ASR previews
+            </label>
+          </section>
+
+          <section class="metrics">
+            <h2>Latency</h2>
+            <dl>
+              <div>
+                <dt>VAD close delay</dt>
+                <dd id="vadCloseLatency">-</dd>
+              </div>
+              <div>
+                <dt>Speech end → transcript</dt>
+                <dd id="asrLatency">-</dd>
+              </div>
+              <div>
+                <dt>Transcript → first token</dt>
+                <dd id="firstTokenLatency">-</dd>
+              </div>
+              <div>
+                <dt>Transcript → TTS queued</dt>
+                <dd id="firstTtsQueuedLatency">-</dd>
+              </div>
+              <div>
+                <dt>First TTS synth</dt>
+                <dd id="ttsSynthLatency">-</dd>
+              </div>
+              <div>
+                <dt>Transcript → first audio</dt>
+                <dd id="firstAudioLatency">-</dd>
+              </div>
+              <div>
+                <dt>Speech end → first audio</dt>
+                <dd id="speechToAudioLatency">-</dd>
+              </div>
+              <div>
+                <dt>LLM decode</dt>
+                <dd id="decodeRate">-</dd>
+              </div>
+            </dl>
+            <div id="micValidationCard" class="mic-validation" data-state="idle" aria-live="polite">
+              <span>Real mic validation</span>
+              <strong id="micValidationStatus">Load models to collect 3 rows</strong>
+              <small id="micValidationDetail">Use the mic series and say: "What app is this?"</small>
+              <div class="mic-progress" aria-hidden="true">
+                <span id="micValidationProgressBar"></span>
+              </div>
+            </div>
+            <button id="suiteButton" type="button" disabled>Run benchmark suite</button>
+            <button id="benchmarkButton" type="button" disabled>Run identity benchmark</button>
+            <button id="chatBenchmarkButton" type="button" disabled>Run chat benchmark</button>
+            <button id="ttsBenchmarkButton" type="button" disabled>Run TTS benchmark</button>
+            <button id="loopbackButton" type="button" disabled>Run voice loopback</button>
+            <button id="bargeInButton" type="button" disabled>Run barge-in check</button>
+            <button id="micBenchmarkButton" type="button" disabled>Benchmark real mic</button>
+            <button id="micSeriesButton" type="button" disabled>Run 3 real-mic series</button>
+          </section>
+        </aside>
+      </section>
+
+      <section class="events" aria-label="Event log">
+        <div class="panel-head">
+          <h2>Events</h2>
+          <button id="clearLogButton" type="button">Clear</button>
+        </div>
+        <ol id="eventLog"></ol>
+      </section>
+
+      <section class="bench-results" aria-label="Benchmark results">
+        <div class="panel-head">
+          <h2>Benchmarks</h2>
+          <div class="mini-actions">
+            <button id="copyResultsButton" type="button" disabled>Copy JSON</button>
+            <button id="clearResultsButton" type="button" disabled>Clear</button>
+          </div>
+        </div>
+        <div id="benchmarkSummary" class="benchmark-summary" aria-live="polite">
+          No benchmark runs yet.
+        </div>
+        <div class="table-wrap">
+          <table>
+            <thead>
+              <tr>
+                <th>Run</th>
+                <th>Stack</th>
+                <th>ASR</th>
+                <th>STT WER</th>
+                <th>VAD close</th>
+                <th>1st token</th>
+                <th>TTS queued</th>
+                <th>TTS synth</th>
+                <th>1st audio</th>
+                <th>End → audio</th>
+                <th>Audio done</th>
+                <th>Decode</th>
+                <th>LLM OK</th>
+                <th>Transcript</th>
+                <th>Output</th>
+              </tr>
+            </thead>
+            <tbody id="resultsBody">
+              <tr>
+                <td colspan="15">No benchmark runs yet.</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+
+    <script type="module" src="./app.js"></script>
+  </body>
 </html>

styles.css

@@ -0,0 +1,590 @@
+:root {
+  color-scheme: dark;
+  --bg: #101114;
+  --panel: #191c20;
+  --panel-2: #20242a;
+  --line: #313741;
+  --text: #f4f5f7;
+  --muted: #aab2bd;
+  --green: #45c486;
+  --yellow: #f4bd4f;
+  --red: #ee6b6e;
+  --blue: #70a7ff;
+  --accent: #f1d270;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 280px),
+    var(--bg);
+  color: var(--text);
+}
+
+button,
+select,
+input {
+  font: inherit;
+}
+
+button,
+select {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #252a31;
+  color: var(--text);
+}
+
+button {
+  min-height: 40px;
+  padding: 0 14px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+button:hover:not(:disabled) {
+  border-color: #5d6877;
+  background: #2d343d;
+}
+
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+select {
+  width: 100%;
+  min-height: 38px;
+  padding: 0 10px;
+}
+
+.shell {
+  width: min(1440px, 100%);
+  margin: 0 auto;
+  padding: 24px;
+}
+
+.topbar {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 20px;
+  padding-bottom: 20px;
+}
+
+h1,
+h2,
+p {
+  margin: 0;
+}
+
+h1 {
+  font-size: clamp(30px, 4vw, 56px);
+  line-height: 0.95;
+  letter-spacing: 0;
+}
+
+h2 {
+  font-size: 14px;
+  text-transform: uppercase;
+  letter-spacing: 0;
+  color: var(--muted);
+}
+
+.topbar p {
+  max-width: 760px;
+  margin-top: 10px;
+  color: var(--muted);
+  line-height: 1.5;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.button-icon {
+  width: 18px;
+  text-align: center;
+  color: var(--accent);
+}
+
+.status-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+  margin-bottom: 14px;
+}
+
+.status-tile {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel);
+  min-height: 76px;
+  padding: 14px;
+}
+
+.status-tile span {
+  display: block;
+  color: var(--muted);
+  font-size: 12px;
+  margin-bottom: 8px;
+}
+
+.status-tile strong {
+  font-size: 16px;
+  font-weight: 650;
+}
+
+.status-tile[data-state="ready"] {
+  border-color: color-mix(in srgb, var(--green), var(--line) 50%);
+}
+
+.status-tile[data-state="active"] {
+  border-color: color-mix(in srgb, var(--blue), var(--line) 30%);
+  background: #1b2430;
+}
+
+.status-tile[data-state="warn"] {
+  border-color: color-mix(in srgb, var(--yellow), var(--line) 35%);
+}
+
+.status-tile[data-state="error"] {
+  border-color: color-mix(in srgb, var(--red), var(--line) 35%);
+}
+
+.workspace {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 360px;
+  gap: 14px;
+}
+
+.conversation {
+  display: grid;
+  gap: 14px;
+  min-width: 0;
+}
+
+.transcript-panel,
+.response-panel,
+.settings,
+.metrics,
+.events,
+.bench-results {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel);
+}
+
+.transcript-panel,
+.response-panel {
+  min-height: 280px;
+  padding: 16px;
+}
+
+.panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.badge {
+  min-width: 82px;
+  text-align: center;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 5px 10px;
+  color: var(--muted);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.badge.active {
+  color: var(--text);
+  border-color: color-mix(in srgb, var(--green), var(--line) 40%);
+}
+
+.partial {
+  min-height: 86px;
+  color: var(--muted);
+  line-height: 1.55;
+  padding-bottom: 14px;
+  border-bottom: 1px solid var(--line);
+}
+
+.final,
+.output {
+  margin-top: 14px;
+  font-size: clamp(18px, 2vw, 25px);
+  line-height: 1.45;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.output {
+  min-height: 190px;
+  color: #f8f1dc;
+}
+
+.side {
+  display: grid;
+  gap: 14px;
+  align-content: start;
+}
+
+.settings,
+.metrics,
+.events,
+.bench-results {
+  padding: 16px;
+}
+
+.settings {
+  display: grid;
+  gap: 12px;
+}
+
+.settings label {
+  display: grid;
+  gap: 7px;
+  min-width: 0;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.settings input[type="range"] {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.runtime-status {
+  display: grid;
+  gap: 3px;
+  min-height: 44px;
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+  padding: 10px 0;
+  color: var(--muted);
+  font-size: 13px;
+  overflow-wrap: anywhere;
+}
+
+.runtime-status span {
+  color: var(--text);
+  font-weight: 650;
+}
+
+.runtime-status small {
+  color: var(--muted);
+  line-height: 1.35;
+}
+
+.runtime-status[data-state="ready"] span {
+  color: var(--green);
+}
+
+.runtime-status[data-state="warn"] span {
+  color: var(--yellow);
+}
+
+.runtime-status[data-state="error"] span {
+  color: var(--red);
+}
+
+.range-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.range-label span {
+  color: var(--text);
+  font-variant-numeric: tabular-nums;
+}
+
+.settings .check {
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  color: var(--text);
+}
+
+.metrics dl {
+  margin: 0;
+  display: grid;
+  gap: 10px;
+}
+
+.metrics dl div {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  border-bottom: 1px solid var(--line);
+  padding-bottom: 9px;
+}
+
+.metrics dt {
+  color: var(--muted);
+}
+
+.metrics dd {
+  margin: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.mic-validation {
+  display: grid;
+  gap: 5px;
+  margin-top: 14px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel-2);
+  padding: 12px;
+  overflow-wrap: anywhere;
+}
+
+.mic-validation span {
+  color: var(--muted);
+  font-size: 12px;
+  text-transform: uppercase;
+}
+
+.mic-validation strong {
+  color: var(--text);
+  font-size: 15px;
+  font-weight: 650;
+}
+
+.mic-validation small {
+  color: var(--muted);
+  line-height: 1.35;
+}
+
+.mic-validation[data-state="active"] {
+  border-color: color-mix(in srgb, var(--blue), var(--line) 35%);
+}
+
+.mic-validation[data-state="active"] strong {
+  color: var(--blue);
+}
+
+.mic-validation[data-state="ready"] {
+  border-color: color-mix(in srgb, var(--green), var(--line) 45%);
+}
+
+.mic-validation[data-state="ready"] strong {
+  color: var(--green);
+}
+
+.mic-validation[data-state="warn"] {
+  border-color: color-mix(in srgb, var(--yellow), var(--line) 40%);
+}
+
+.mic-validation[data-state="warn"] strong {
+  color: var(--yellow);
+}
+
+.mic-progress {
+  height: 6px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #11151a;
+}
+
+.mic-progress span {
+  display: block;
+  width: 0%;
+  height: 100%;
+  background: var(--green);
+  transition: width 160ms ease;
+}
+
+#suiteButton,
+#benchmarkButton,
+#ttsBenchmarkButton,
+#loopbackButton,
+#bargeInButton,
+#micBenchmarkButton,
+#micSeriesButton {
+  width: 100%;
+  margin-top: 14px;
+}
+
+#benchmarkButton,
+#ttsBenchmarkButton,
+#loopbackButton,
+#bargeInButton,
+#micBenchmarkButton,
+#micSeriesButton {
+  margin-top: 8px;
+}
+
+.events {
+  margin-top: 14px;
+}
+
+.events .panel-head button,
+.mini-actions button {
+  min-height: 30px;
+  padding: 0 10px;
+  font-size: 13px;
+}
+
+.bench-results {
+  margin-top: 14px;
+}
+
+.mini-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.benchmark-summary {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 8px;
+  margin-bottom: 12px;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.summary-item {
+  min-height: 58px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel-2);
+  padding: 10px;
+}
+
+.summary-item span,
+.summary-item strong {
+  display: block;
+}
+
+.summary-item span {
+  margin-bottom: 6px;
+}
+
+.summary-item strong {
+  color: var(--text);
+  font-size: 15px;
+  font-weight: 650;
+  font-variant-numeric: tabular-nums;
+}
+
+.table-wrap {
+  overflow-x: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 1500px;
+  font-size: 13px;
+}
+
+th,
+td {
+  border-bottom: 1px solid var(--line);
+  padding: 9px 10px;
+  text-align: left;
+  vertical-align: top;
+}
+
+th {
+  color: var(--muted);
+  font-weight: 650;
+  text-transform: uppercase;
+  letter-spacing: 0;
+  white-space: nowrap;
+}
+
+td {
+  color: #dce3ec;
+}
+
+td:nth-child(13),
+td:nth-child(14) {
+  max-width: 260px;
+  overflow-wrap: anywhere;
+}
+
+#eventLog {
+  height: 170px;
+  margin: 0;
+  padding-left: 22px;
+  overflow: auto;
+  color: var(--muted);
+  line-height: 1.45;
+}
+
+#eventLog li {
+  padding: 3px 0;
+}
+
+@media (max-width: 980px) {
+  .shell {
+    padding: 16px;
+  }
+
+  .topbar,
+  .workspace {
+    grid-template-columns: 1fr;
+    display: grid;
+  }
+
+  .actions {
+    justify-content: stretch;
+  }
+
+  .actions button {
+    flex: 1 1 150px;
+  }
+
+  .status-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .benchmark-summary {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 560px) {
+  .actions {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+
+  .actions button {
+    width: 100%;
+  }
+
+  .status-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .benchmark-summary {
+    grid-template-columns: 1fr;
+  }
+
+  .transcript-panel,
+  .response-panel {
+    min-height: 230px;
+  }
+}

workers/asr-worker.js

@@ -0,0 +1,277 @@
+import { AutoModel, Tensor, env, pipeline } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@4.2.0";
+
+env.allowLocalModels = false;
+env.useBrowserCache = true;
+
+const SAMPLE_RATE = 16000;
+const SPEECH_THRESHOLD = 0.3;
+const EXIT_THRESHOLD = 0.1;
+const DEFAULT_SILENCE_DURATION_MS = 480;
+const MIN_SILENCE_DURATION_MS = 200;
+const MAX_SILENCE_DURATION_MS = 800;
+const SPEECH_PAD_SAMPLES = 80 * (SAMPLE_RATE / 1000);
+const MIN_SPEECH_DURATION_SAMPLES = 250 * (SAMPLE_RATE / 1000);
+const MAX_BUFFER_DURATION = 30;
+const NEW_BUFFER_SIZE = 512;
+const MAX_NUM_PREV_BUFFERS = Math.ceil(SPEECH_PAD_SAMPLES / NEW_BUFFER_SIZE);
+const PARTIAL_INTERVAL_MS = 1600;
+
+let vadModel = null;
+let transcriber = null;
+let device = "wasm";
+let inputQueue = new Float32Array(0);
+let vadChain = Promise.resolve();
+let asrChain = Promise.resolve();
+let vadState = new Tensor("float32", new Float32Array(2 * 1 * 128), [2, 1, 128]);
+let srTensor = new Tensor("int64", [SAMPLE_RATE], []);
+let isRecording = false;
+let bufferPointer = 0;
+let postSpeechSamples = 0;
+let previousBuffers = [];
+let partialEnabled = true;
+let minSilenceDurationSamples = silenceDurationSamples(DEFAULT_SILENCE_DURATION_MS);
+let partialBusy = false;
+let lastPartialAt = 0;
+let utteranceStartedAt = 0;
+const recordingBuffer = new Float32Array(MAX_BUFFER_DURATION * SAMPLE_RATE);
+
+self.onmessage = async (event) => {
+  const message = event.data;
+  try {
+    if (message.type === "load") {
+      await load(message);
+    } else if (message.type === "configure") {
+      configure(message);
+    } else if (message.type === "audio") {
+      ingestAudio(message.buffer, message.sampleRate);
+    } else if (message.type === "flush") {
+      await flushRecording();
+    }
+  } catch (error) {
+    self.postMessage({ type: "error", message: error.message ?? String(error) });
+  }
+};
+
+async function load({ model, device: requestedDevice, partial, silenceMs }) {
+  device = requestedDevice;
+  configure({ partial, silenceMs });
+  self.postMessage({ type: "status", scope: "vad", message: "Loading", mode: "warn" });
+  vadModel = await AutoModel.from_pretrained("onnx-community/silero-vad", {
+    config: { model_type: "custom" },
+    dtype: "fp32",
+    progress_callback: reportProgress("VAD"),
+  });
+
+  self.postMessage({ type: "status", message: "Loading", mode: "warn" });
+  const dtype =
+    model.includes("moonshine")
+      ? {
+          encoder_model: device === "webgpu" ? "fp32" : "fp32",
+          decoder_model_merged: "q4",
+        }
+      : device === "webgpu"
+        ? {
+            encoder_model: "fp32",
+            decoder_model_merged: "q4",
+          }
+        : {
+            encoder_model: "fp32",
+            decoder_model_merged: "q4",
+          };
+
+  transcriber = await pipeline("automatic-speech-recognition", model, {
+    device,
+    dtype,
+    progress_callback: reportProgress("STT"),
+  });
+
+  self.postMessage({ type: "status", message: "Warming", mode: "warn" });
+  await transcribeBuffer(new Float32Array(SAMPLE_RATE), { warmup: true });
+  self.postMessage({ type: "ready" });
+}
+
+function reportProgress(label) {
+  return (progress) => {
+    if (progress.status === "progress") {
+      const pct = Number.isFinite(progress.progress) ? ` ${progress.progress.toFixed(0)}%` : "";
+      self.postMessage({ type: "status", message: `${label}${pct}`, mode: "warn" });
+    }
+  };
+}
+
+function ingestAudio(buffer, sourceRate) {
+  const resampled = resampleTo16k(buffer, sourceRate);
+  inputQueue = concat(inputQueue, resampled);
+  while (inputQueue.length >= NEW_BUFFER_SIZE) {
+    const chunk = inputQueue.slice(0, NEW_BUFFER_SIZE);
+    inputQueue = inputQueue.slice(NEW_BUFFER_SIZE);
+    void handleVadChunk(chunk);
+  }
+}
+
+async function handleVadChunk(buffer) {
+  const wasRecording = isRecording;
+  const speech = await vad(buffer);
+
+  if (!wasRecording && !speech) {
+    if (previousBuffers.length >= MAX_NUM_PREV_BUFFERS) previousBuffers.shift();
+    previousBuffers.push(buffer);
+    return;
+  }
+
+  const remaining = recordingBuffer.length - bufferPointer;
+  if (buffer.length >= remaining) {
+    recordingBuffer.set(buffer.subarray(0, remaining), bufferPointer);
+    bufferPointer += remaining;
+    dispatchForTranscription(buffer.subarray(remaining));
+    return;
+  }
+
+  recordingBuffer.set(buffer, bufferPointer);
+  bufferPointer += buffer.length;
+
+  if (speech) {
+    if (!isRecording) {
+      utteranceStartedAt = performance.now();
+      self.postMessage({ type: "speechstart" });
+    }
+    isRecording = true;
+    postSpeechSamples = 0;
+    maybePartial();
+    return;
+  }
+
+  postSpeechSamples += buffer.length;
+  if (postSpeechSamples < minSilenceDurationSamples) return;
+
+  if (bufferPointer < MIN_SPEECH_DURATION_SAMPLES) {
+    reset();
+    return;
+  }
+
+  self.postMessage({
+    type: "speechend",
+    trailingSilenceMs: sampleDurationMs(postSpeechSamples),
+  });
+  dispatchForTranscription();
+}
+
+async function vad(buffer) {
+  const input = new Tensor("float32", buffer, [1, buffer.length]);
+  const result = await (vadChain = vadChain.then(() =>
+    vadModel({ input, sr: srTensor, state: vadState }),
+  ));
+  vadState = result.stateN;
+  const probability = result.output.data[0];
+  return probability > SPEECH_THRESHOLD || (isRecording && probability >= EXIT_THRESHOLD);
+}
+
+function maybePartial() {
+  if (!partialEnabled || partialBusy) return;
+  const now = performance.now();
+  if (now - lastPartialAt < PARTIAL_INTERVAL_MS || bufferPointer < SAMPLE_RATE) return;
+  partialBusy = true;
+  lastPartialAt = now;
+  const buffer = paddedRecordingBuffer();
+  transcribeBuffer(buffer, { partial: true })
+    .then((text) => {
+      if (text.trim()) self.postMessage({ type: "partial", text });
+    })
+    .finally(() => {
+      partialBusy = false;
+    });
+}
+
+function dispatchForTranscription(overflow) {
+  const buffer = paddedRecordingBuffer();
+  transcribeBuffer(buffer, { partial: false }).then((text) => {
+    self.postMessage({
+      type: "transcript",
+      text,
+      durationMs: performance.now() - utteranceStartedAt,
+    });
+  });
+
+  if (overflow?.length) {
+    recordingBuffer.set(overflow, 0);
+  }
+  reset(overflow?.length ?? 0);
+}
+
+async function flushRecording() {
+  await (vadChain = vadChain.then(() => Promise.resolve()));
+  if (!isRecording || bufferPointer < MIN_SPEECH_DURATION_SAMPLES) return;
+  self.postMessage({
+    type: "speechend",
+    trailingSilenceMs: sampleDurationMs(postSpeechSamples),
+    forced: true,
+  });
+  dispatchForTranscription();
+}
+
+function paddedRecordingBuffer() {
+  const current = recordingBuffer.slice(0, Math.min(bufferPointer + SPEECH_PAD_SAMPLES, recordingBuffer.length));
+  const prevLength = previousBuffers.reduce((sum, item) => sum + item.length, 0);
+  const padded = new Float32Array(prevLength + current.length);
+  let offset = 0;
+  for (const prev of previousBuffers) {
+    padded.set(prev, offset);
+    offset += prev.length;
+  }
+  padded.set(current, offset);
+  return padded;
+}
+
+async function transcribeBuffer(buffer, { warmup = false } = {}) {
+  const output = await (asrChain = asrChain.then(() => transcriber(buffer)));
+  if (warmup) return "";
+  return output.text ?? "";
+}
+
+function reset(offset = 0) {
+  recordingBuffer.fill(0, offset);
+  bufferPointer = offset;
+  isRecording = false;
+  postSpeechSamples = 0;
+  previousBuffers = [];
+  lastPartialAt = 0;
+}
+
+function configure({ partial, silenceMs } = {}) {
+  if (typeof partial === "boolean") partialEnabled = partial;
+  if (silenceMs != null) minSilenceDurationSamples = silenceDurationSamples(silenceMs);
+}
+
+function silenceDurationSamples(value) {
+  const numericValue = Number(value);
+  const ms = Number.isFinite(numericValue) ? numericValue : DEFAULT_SILENCE_DURATION_MS;
+  const clampedMs = Math.min(MAX_SILENCE_DURATION_MS, Math.max(MIN_SILENCE_DURATION_MS, ms));
+  return Math.round(clampedMs * (SAMPLE_RATE / 1000));
+}
+
+function sampleDurationMs(samples) {
+  return (samples / SAMPLE_RATE) * 1000;
+}
+
+function resampleTo16k(input, sourceRate) {
+  if (sourceRate === SAMPLE_RATE) return input;
+  const ratio = sourceRate / SAMPLE_RATE;
+  const length = Math.floor(input.length / ratio);
+  const output = new Float32Array(length);
+  for (let i = 0; i < length; i += 1) {
+    const position = i * ratio;
+    const left = Math.floor(position);
+    const right = Math.min(left + 1, input.length - 1);
+    const weight = position - left;
+    output[i] = input[left] * (1 - weight) + input[right] * weight;
+  }
+  return output;
+}
+
+function concat(left, right) {
+  if (left.length === 0) return right;
+  const out = new Float32Array(left.length + right.length);
+  out.set(left, 0);
+  out.set(right, left.length);
+  return out;
+}

workers/llm-worker.js

@@ -0,0 +1,140 @@
+import {
+  AutoModelForCausalLM,
+  AutoTokenizer,
+  InterruptableStoppingCriteria,
+  TextStreamer,
+  env,
+} from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@4.2.0";
+
+env.allowLocalModels = false;
+env.useBrowserCache = true;
+
+let tokenizer = null;
+let model = null;
+let modelId = "";
+let stoppingCriteria = new InterruptableStoppingCriteria();
+let currentTurnId = 0;
+
+self.onmessage = async (event) => {
+  const message = event.data;
+  try {
+    if (message.type === "load") {
+      await load(message);
+    } else if (message.type === "generate") {
+      currentTurnId = message.turnId;
+      await generate(message.messages, message.turnId, {
+        sentenceLimit: message.sentenceLimit ?? (message.stopAfterFirstSentence === false ? 0 : 1),
+      });
+    } else if (message.type === "interrupt") {
+      stoppingCriteria.interrupt();
+    }
+  } catch (error) {
+    self.postMessage({ type: "error", message: error.message ?? String(error) });
+  }
+};
+
+async function load({ model: requestedModelId, device }) {
+  modelId = requestedModelId;
+  self.postMessage({ type: "status", message: "Loading", mode: "warn" });
+  tokenizer = await AutoTokenizer.from_pretrained(modelId, {
+    progress_callback: reportProgress("LLM tokenizer"),
+  });
+  model = await AutoModelForCausalLM.from_pretrained(modelId, {
+    device,
+    dtype: device === "webgpu" ? "q4f16" : "q4",
+    progress_callback: reportProgress("LLM"),
+  });
+  self.postMessage({ type: "status", message: "Warming", mode: "warn" });
+  const inputs = tokenizer("hello");
+  await model.generate({ ...inputs, max_new_tokens: 1 });
+  self.postMessage({ type: "ready" });
+}
+
+function reportProgress(label) {
+  return (progress) => {
+    if (progress.status === "progress") {
+      const pct = Number.isFinite(progress.progress) ? ` ${progress.progress.toFixed(0)}%` : "";
+      self.postMessage({ type: "status", message: `${label}${pct}`, mode: "warn" });
+    }
+  };
+}
+
+async function generate(messages, turnId, { sentenceLimit = 1 } = {}) {
+  stoppingCriteria = new InterruptableStoppingCriteria();
+  const promptMessages = normalizeMessages(messages);
+  const inputs = tokenizer.apply_chat_template(promptMessages, {
+    add_generation_prompt: true,
+    enable_thinking: false,
+    return_dict: true,
+  });
+
+  let firstTokenAt = 0;
+  let tokenCount = 0;
+  let tps = 0;
+  let decodedText = "";
+  let emittedChars = 0;
+  let sentenceStopped = false;
+  const startedAt = performance.now();
+
+  const streamer = new TextStreamer(tokenizer, {
+    skip_prompt: true,
+    skip_special_tokens: true,
+    token_callback_function: () => {
+      tokenCount += 1;
+      firstTokenAt ||= performance.now();
+      const elapsed = performance.now() - startedAt;
+      if (elapsed > 0) tps = (tokenCount / elapsed) * 1000;
+    },
+    callback_function: (text) => {
+      if (turnId !== currentTurnId || sentenceStopped) return;
+      decodedText += text;
+      const boundary = sentenceLimit > 0 ? sentenceBoundary(decodedText, sentenceLimit) : -1;
+      const emitUntil = boundary > 0 ? boundary : decodedText.length;
+      const emitText = decodedText.slice(emittedChars, emitUntil);
+      emittedChars = emitUntil;
+      if (emitText) {
+        self.postMessage({ type: "token", turnId, text: emitText, tps, tokenCount });
+      }
+      if (boundary > 0) {
+        sentenceStopped = true;
+        stoppingCriteria.interrupt();
+      }
+    },
+  });
+
+  self.postMessage({ type: "start", turnId });
+  await model.generate({
+    ...inputs,
+    max_new_tokens: maxNewTokens(),
+    do_sample: false,
+    repetition_penalty: 1.08,
+    streamer,
+    stopping_criteria: stoppingCriteria,
+  });
+  self.postMessage({ type: "complete", turnId, tokenCount, firstTokenMs: firstTokenAt - startedAt });
+}
+
+function maxNewTokens() {
+  if (modelId.includes("Qwen3")) return 40;
+  if (modelId.includes("135M")) return 64;
+  return 48;
+}
+
+function sentenceBoundary(text, targetCount = 1) {
+  const normalized = text.replace(/\s+/g, " ").trim();
+  if (normalized.length < 12) return -1;
+  const regex = /[.!?]["')\]]?(?:\s|$)/g;
+  let match = null;
+  let count = 0;
+  while ((match = regex.exec(text))) {
+    count += 1;
+    if (count >= targetCount) return match.index + match[0].trimEnd().length;
+  }
+  return -1;
+}
+
+function normalizeMessages(messages) {
+  if (typeof tokenizer.apply_chat_template === "function") return messages;
+  const content = messages.map((message) => `${message.role}: ${message.content}`).join("\n");
+  return [{ role: "user", content }];
+}

workers/tts-worker.js

@@ -0,0 +1,192 @@
+import { env, pipeline } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@4.2.0";
+
+env.allowLocalModels = false;
+env.useBrowserCache = true;
+
+let synthesizer = null;
+let modelId = "";
+let cancelEpoch = 0;
+let queue = Promise.resolve();
+const voiceEmbeddings = new Map();
+const voicePromises = new Map();
+const VOICES = ["F1", "F2", "M1", "M2"];
+
+self.onmessage = (event) => {
+  const message = event.data;
+  if (message.type === "load") {
+    queue = queue.then(() => load(message)).catch(postError);
+  } else if (message.type === "preload-voice") {
+    queue = queue.then(() => preloadVoice(message)).catch(postError);
+  } else if (message.type === "speak") {
+    const item = { ...message, cancelEpoch };
+    queue = queue.then(() => speak(item)).catch(postError);
+  } else if (message.type === "synthesize") {
+    const item = { ...message, cancelEpoch };
+    queue = queue.then(() => synthesize(item)).catch(postError);
+  } else if (message.type === "cancel") {
+    cancelEpoch += 1;
+  }
+};
+
+async function load({ model, device, voice = "F2", warmup = true }) {
+  modelId = model;
+  voiceEmbeddings.clear();
+  voicePromises.clear();
+  self.postMessage({
+    type: "status",
+    message: "Loading",
+    mode: "warn",
+    detail: "Loading Supertonic pipeline.",
+  });
+  synthesizer = await pipeline("text-to-speech", model, {
+    device,
+    dtype: "fp32",
+    progress_callback: reportProgress("TTS"),
+  });
+  self.postMessage({
+    type: "status",
+    message: `Voice ${voice}`,
+    mode: "warn",
+    detail: `Supertonic pipeline loaded; loading ${voice} voice embedding.`,
+  });
+  const speaker = await ensureVoice(model, voice);
+  if (warmup) {
+    self.postMessage({
+      type: "status",
+      message: "Warming",
+      mode: "warn",
+      detail: "Warming Supertonic with the selected voice.",
+    });
+    await synthesizer("Ready.", {
+      speaker_embeddings: speaker,
+      num_inference_steps: 2,
+      speed: 1.08,
+    });
+  }
+  self.postMessage({ type: "status", message: "Ready", mode: "ready", detail: "Supertonic is ready." });
+  self.postMessage({ type: "ready" });
+  preloadVoices(model, VOICES.filter((candidate) => candidate !== voice));
+}
+
+async function preloadVoice({ voice = "F2", requestId = null }) {
+  try {
+    await ensureVoice(modelId, voice);
+    self.postMessage({ type: "voice-ready", voice, requestId });
+  } catch (error) {
+    self.postMessage({
+      type: "voice-error",
+      voice,
+      requestId,
+      message: error.message ?? String(error),
+    });
+  }
+}
+
+function preloadVoices(model, voices) {
+  for (const voice of voices) {
+    ensureVoice(model, voice).catch((error) => {
+      self.postMessage({
+        type: "voice-error",
+        voice,
+        requestId: null,
+        message: error.message ?? String(error),
+      });
+    });
+  }
+}
+
+function reportProgress(label) {
+  return (progress) => {
+    if (progress.status === "progress") {
+      const pct = Number.isFinite(progress.progress) ? ` ${progress.progress.toFixed(0)}%` : "";
+      self.postMessage({ type: "status", message: `${label}${pct}`, mode: "warn" });
+    }
+  };
+}
+
+async function speak({ text, voice, steps, speed, turnId, sequence, enqueuedAt, cancelEpoch: itemEpoch }) {
+  if (!synthesizer || !text.trim()) return;
+  if (itemEpoch !== cancelEpoch) return;
+  self.postMessage({ type: "status", message: "Synthesizing", mode: "active" });
+  const speaker = await ensureVoice(modelId, voice);
+  if (itemEpoch !== cancelEpoch) return;
+  const startedAt = performance.now();
+  const output = await synthesizer(text.trim(), {
+    speaker_embeddings: speaker,
+    num_inference_steps: steps,
+    speed,
+  });
+  if (itemEpoch !== cancelEpoch) return;
+  self.postMessage(
+    {
+      type: "audio",
+      turnId,
+      sequence,
+      enqueuedAt,
+      text,
+      audio: output.audio,
+      sampleRate: output.sampling_rate,
+      synthesisMs: performance.now() - startedAt,
+    },
+    [output.audio.buffer],
+  );
+  self.postMessage({ type: "done", turnId, sequence });
+}
+
+async function synthesize({ text, voice, steps, speed, requestId, cancelEpoch: itemEpoch }) {
+  if (!synthesizer || !text.trim()) return;
+  if (itemEpoch !== cancelEpoch) return;
+  self.postMessage({ type: "status", message: "Loopback", mode: "active" });
+  const speaker = await ensureVoice(modelId, voice);
+  if (itemEpoch !== cancelEpoch) return;
+  const startedAt = performance.now();
+  const output = await synthesizer(text.trim(), {
+    speaker_embeddings: speaker,
+    num_inference_steps: steps,
+    speed,
+  });
+  if (itemEpoch !== cancelEpoch) return;
+  self.postMessage(
+    {
+      type: "synthetic-audio",
+      requestId,
+      audio: output.audio,
+      sampleRate: output.sampling_rate,
+      synthesisMs: performance.now() - startedAt,
+    },
+    [output.audio.buffer],
+  );
+  self.postMessage({ type: "done", requestId });
+}
+
+function voiceUrl(model, voice) {
+  return `https://huggingface.co/${model}/resolve/main/voices/${voice}.bin`;
+}
+
+async function loadVoice(model, voice) {
+  const response = await fetch(voiceUrl(model, voice), { cache: "no-store" });
+  if (!response.ok) {
+    throw new Error(`Failed to load ${voice} voice embedding: ${response.status}`);
+  }
+  voiceEmbeddings.set(voice, new Float32Array(await response.arrayBuffer()));
+  return voiceEmbeddings.get(voice);
+}
+
+async function ensureVoice(model, voice) {
+  if (!model) throw new Error("TTS model has not loaded.");
+  const embedding = voiceEmbeddings.get(voice);
+  if (embedding) return embedding;
+  if (!voicePromises.has(voice)) {
+    voicePromises.set(
+      voice,
+      loadVoice(model, voice).finally(() => {
+        voicePromises.delete(voice);
+      }),
+    );
+  }
+  return voicePromises.get(voice);
+}
+
+function postError(error) {
+  self.postMessage({ type: "error", message: error.message ?? String(error) });
+}