Full-stack architecture

Now that you know why local Whisper matters, let us map the pieces you will wire together. The app stacks a React recorder in the browser, a FastAPI backend, an on-device Whisper model, and an optional LLM cleanup step.

Voice transcription pipeline

How the recorder, FastAPI backend, Whisper model, and cleanup LLM connect.

terminal
bash
# Clone and set up the workshop
git clone https://github.com/learnwithparam/voice-transcription-whisper.git
cd voice-transcription-whisper

# Install backend and frontend dependencies
make setup

# Run both services together
make dev

make setup installs Python deps with uv, installs npm packages, and copies backend/.env.example to backend/.env. make dev starts the FastAPI backend on 8000 and the Vite frontend on 5173.

backend/.env
bash
# Whisper runs locally, no API key needed
WHISPER_MODEL=base.en

# LLM cleanup step, pick any OpenAI-compatible provider
LLM_BASE_URL=https://openrouter.ai/api/v1
LLM_API_KEY=your_openrouter_api_key_here
LLM_MODEL=google/gemini-2.5-flash-lite

Whisper has no API key because it runs on your machine. The LLM step uses any OpenAI-compatible provider. OpenRouter has a free tier, Ollama runs fully local.

Two reasons. First, users sometimes want the raw transcript without LLM cleanup, for example when they trust their own speech. Second, if the LLM fails or is slow, you can still show the Whisper output immediately and clean it asynchronously. Keeping the steps independent makes the pipeline resilient.

Quiz: Quiz

Loading practice…