Whisper-ONNX - Offline Local Audio Transcription API

🛠️ A Vite + React-based setup that allows users to upload audio recordings and retrieve its text content. Note: For simplicity, this setup only accounts for 'English' transcription..

Based on whisper-webgpu.

👀 Preview

Demo (1) Select model choice (non-default)

Demo (2) Audio Transcription

🌟 Try it yourself

Live Demo :: Link

✍ Read related post here

Article :: Link :: Implementing Whisper OpenAI In-Browser for Offline Audio Transcription

Features

• 📄 Upload audio clips (.mp3 .webm .wav files)
• 💬 Audio conversion to WAV via FFMPEG
• 🤖 AI-powered Speech Recognition using Whisper OpenAI local models
• 📱 Mobile-responsive design
• 🔒 Complete offline functionality
• 💾 Export transcription results

Required Model Files

For complete offline functionality, download the following model files to the public/models/ directory:

Whisper Tiny (en) Model (whisper-tiny.en)

Download these files to public/models/Xenova/whisper-tiny.en/:

• added_tokens.json
• config.json
• generation_config.json
• merges.txt
• normalizer.json
• preprocessor_config.json
• quant_config.json
• quantize_config.json
• special_tokens_map.json
• tokenizer.json
• tokenizer_config.json
• vocab.json
• onnx/decoded_model_merged_fp16.onnx
• onnx/encoder_model_fp16.onnx

Whisper Base (en) Model (whisper-base.en)

Download these files to public/models/Xenova/whisper-base.en/:

• added_tokens.json
• config.json
• generation_config.json
• merges.txt
• normalizer.json
• preprocessor_config.json
• quant_config.json
• quantize_config.json
• special_tokens_map.json
• tokenizer.json
• tokenizer_config.json
• vocab.json
• onnx/decoded_model_merged_fp16.onnx
• onnx/encoder_model_fp16.onnx

Installation

1. Clone the repository
2. Install dependencies: npm install
3. Download the required model files (refer to above)
4. Build and start the server: npm run build && npm run preview

Technology Stack

• React 18 with TypeScript
• Vite for build tooling
• Tailwind CSS for styling
• @huggingface/transformers for AI model inference
• WebGPU acceleration (with WASM fallback)

— Join me on 📝 Medium at ~ ξ(🎀˶❛◡❛) @geek-cc

---

🌮 Please buy me a Taco! 😋