Wispr Flow Clone - Voice-to-Text Desktop App

A cross-platform desktop application for real-time speech-to-text transcription using Tauri and Deepgram API.

Project Overview

This is a functional clone of Wispr Flow, a voice-to-text application that captures audio from your microphone and transcribes it in real-time. The app demonstrates modern desktop development with AI-powered features.

Features Implemented

• ✅ Push-to-Talk Voice Input - Intuitive push-to-talk mechanism for voice recording
• ✅ Microphone Access & Audio Capture - Secure audio capture with permission handling
• ✅ Real-Time Transcription - Stream audio to Deepgram for instant transcription
• ✅ Display & Insert Text - Show transcribed text with copy-to-clipboard functionality
• ✅ Recording Controls - Clear start/stop controls with visual feedback
• ✅ Error Handling - Graceful error management for network and API failures

Technical Stack

• Framework: Tauri (cross-platform desktop)
• Frontend: React with TypeScript
• Speech Recognition: Deepgram API
• Audio Processing: Web Audio API
• State Management: React Hooks
• Build Tool: Vite

Prerequisites

• Node.js 16+ and npm
• Rust toolchain (required for Tauri)
• Deepgram API key (free tier available at https://console.deepgram.com)

Setup Instructions

1. Install Dependencies

cd wispr-flow-clone
npm install

2. Set Up Environment Variables

Create a .env.local file in the project root:

VITE_DEEPGRAM_API_KEY=your_deepgram_api_key_here

Get your free Deepgram API key from: https://console.deepgram.com

3. Configure Tauri

The Tauri configuration is already set up in src-tauri/tauri.conf.json. No additional configuration needed.

4. Run in Development Mode

npm run tauri dev

This will open the desktop app with hot-reload enabled.

5. Build for Production

npm run tauri build

The compiled binary will be in src-tauri/target/release/.

Architecture & Design Decisions

Separation of Concerns

The application is organized into clear layers:

• UI Layer (src/components/) - React components for user interface
• Audio Layer (src/services/audioService.ts) - Microphone access and audio capture
• Transcription Layer (src/services/deepgramService.ts) - Deepgram API integration
• State Management (src/App.tsx) - Central state using React Hooks

Audio Capture Strategy

• Uses the Web Audio API for cross-platform audio capture
• Implements proper permission handling for microphone access
• Streams audio in PCM format to Deepgram for optimal transcription quality
• Handles audio buffering to prevent data loss during streaming

Deepgram Integration

• Uses Deepgram's streaming API for real-time transcription
• Maintains persistent WebSocket connection during recording
• Implements automatic reconnection on connection failure
• Configurable model and language settings

Error Handling

• User-friendly error messages displayed in the UI
• Network error recovery with retry logic
• Permission denial graceful handling
• API error logging for debugging

Known Limitations & Assumptions

1. Internet Required - Real-time transcription requires active internet connection
2. API Key in Frontend - In production, API key should be proxied through backend server
3. Browser Compatibility - Requires modern browsers with Web Audio API support
4. Audio Quality - Transcription quality depends on microphone quality and ambient noise
5. Single Language - Currently configured for English; can be extended for multi-language
6. No Audio Playback - App captures audio only, doesn't play it back

File Structure

wispr-flow-clone/
├── src/
│   ├── components/
│   │   ├── VoiceRecorder.tsx      # Main recording component
│   │   ├── TranscriptionDisplay.tsx # Shows transcribed text
│   │   └── RecordingStatus.tsx     # Recording state indicator
│   ├── services/
│   │   ├── audioService.ts         # Audio capture logic
│   │   └── deepgramService.ts      # Deepgram API integration
│   ├── types/
│   │   └── index.ts                # TypeScript type definitions
│   ├── App.tsx                     # Main app component
│   ├── App.css                     # Styling
│   └── main.tsx                    # Entry point
├── src-tauri/
│   ├── tauri.conf.json             # Tauri configuration
│   ├── Cargo.toml                  # Rust dependencies
│   └── src/
│       └── main.rs                 # Tauri backend
├── package.json                    # npm dependencies
├── vite.config.ts                  # Vite configuration
└── tsconfig.json                   # TypeScript configuration

Usage Guide

1. Start Recording: Click the "Start Recording" button or press and hold the voice input area
2. Stop Recording: Release the button or click "Stop Recording"
3. View Transcription: Transcribed text appears in real-time in the text area
4. Copy Text: Click the copy button to copy transcribed text to clipboard
5. Clear: Click clear button to reset the transcription

Troubleshooting

"Permission Denied" for Microphone

• Check browser/app permissions in system settings
• Grant microphone access when prompted
• Restart the app if permissions were changed

"Failed to Connect to Deepgram"

• Verify API key is correct and set in .env.local
• Check internet connection
• Verify Deepgram API status at https://status.deepgram.com

No Audio Captured

• Test microphone with system audio settings
• Check that the correct microphone is selected
• Try disconnecting and reconnecting audio device

Transcription is Inaccurate

• Ensure clear audio input without background noise
• Speak at normal pace and volume
• Check that audio quality setting matches microphone capability

Development Notes

Adding New Languages

Edit src/services/deepgramService.ts and change the language parameter:

language: 'en', 

Customizing Audio Settings

Modify audio format in src/services/audioService.ts:

const sampleRate = 16000; 
const bitDepth = 16;

Deepgram Model Selection

Update model in src/services/deepgramService.ts:

model: 'nova-2', 

Future Enhancements

• Multi-language support with language detection
• Offline speech recognition fallback
• Audio file import and transcription
• Text formatting and editing features
• Transcription history and export
• Custom vocabulary and domain-specific models
• Cloud sync across devices
• Text-to-speech playback

Testing

The app includes basic functionality testing. Run with:

npm run test

Manual testing checklist:

• Microphone access request appears on first use
• Recording starts and stops reliably
• Real-time transcription appears as you speak
• Text can be copied to clipboard
• App handles network disconnection gracefully
• Error messages are clear and helpful
• App works on Windows, macOS, and Linux (if built on each platform)

Performance Considerations

• Audio streaming is optimized to reduce latency
• WebSocket connection is reused for multiple transcriptions
• UI updates are batched to prevent re-render thrashing
• Audio buffers are managed to prevent memory leaks

Security Considerations

• API key should be protected in production (use backend proxy)
• Audio data is only sent to Deepgram (over secure HTTPS)
• Microphone access is user-controlled at OS level
• No audio data is stored locally on disk

License

MIT License - Feel free to use this for learning and development