Skip to content

Product and System Overview

What it does

WebVoice Studio is a browser-native voice assistant and model playground. Users choose an LLM, optional STT, and optional TTS from a setup blueprint, then use one of three studios: Voice Agent, TTS Studio, or STT Studio.

Primary workflows

  1. Configure model and audio preferences.
  2. Download selected assets lazily.
  3. Type, attach an image, or start microphone capture.
  4. Convert speech to text, stream an LLM response, and optionally synthesize audio.
  5. Interrupt, stop, clear, or switch models without a server round trip.
sequenceDiagram
  %%{init: {"theme":"base","themeVariables":{"primaryColor":"#1e293b","primaryTextColor":"#f8fafc","primaryBorderColor":"#38bdf8","lineColor":"#64748b","actorBackground":"#1e293b","actorBorder":"#38bdf8","actorTextColor":"#f8fafc","noteBorderColor":"#fbbf24","noteBkgColor":"#78350f","noteTextColor":"#fffbeb"}}}%%
  actor User
  participant UI as React UI
  participant STT as STT worker
  participant LLM as Local LLM
  participant TTS as TTS engine
  User->>UI: Speak or submit text
  UI->>STT: Audio frames
  STT-->>UI: Final transcript
  UI->>LLM: History + system prompt
  LLM-->>UI: Stream events
  UI->>TTS: Sentence chunks
  TTS-->>UI: PCM audio
  UI-->>User: Text, waveform, and speech

The sequence is conditional: text-only mode skips STT, and disabled TTS stops after answer rendering.

Studio capabilities

Studio Input Processing Output
Voice Agent Microphone, text, optional image VAD → STT → LLM → optional tools → TTS Conversation, waveform, audio bubble
TTS Studio Text, engine, voice, language Supertonic or Piper synthesis PCM playback and progress
STT Studio Microphone or uploaded audio Worker model inference Transcript and status

The setup wizard is a resource planner as well as a configuration screen. It estimates downloads, chooses device-sensitive defaults, persists the blueprint, and loads components in order: STT/VAD, TTS, then LLM.

Performance model

The product optimizes perceived latency rather than only total latency. STT starts after voice activity, LLM text streams token-by-token, sentence splitting starts TTS early, and PCM chunks are queued for playback. The tradeoff is memory: a user may hold a speech model, LLM, TTS engine, audio buffers, and UI assets in one tab.

Non-goals

There is no account system, remote conversation history, server-side moderation, multi-user collaboration, or guaranteed cross-browser parity. Those omissions are consistent with the local-first product boundary, not accidental backend gaps.

Technical bets

  • Local-first privacy: eliminates an application server, but shifts download size and memory cost to the device.
  • Multiple browser engines: improves device/model choice, but increases adapter and compatibility complexity.
  • Streaming everywhere: reduces perceived latency, but requires careful cancellation and partial-state handling.
  • Static deployment: simplifies hosting, while cross-origin isolation headers become a deployment requirement for threaded WASM.

Interview answer

“I built a local browser voice workbench that composes an audio worklet, an STT worker, several WebGPU/WASM LLM backends, and two TTS engines. The core engineering problem was normalizing different model runtimes behind one streaming adapter, then coordinating cancellation, barge-in, tool calls, and sentence-level speech without blocking the UI.”