Townhall Transcriber

Professional audio transcription powered by open-source Whisper AI. Record live audio or upload files for accurate, local transcription with rich text editing and export capabilities.

Features

• Live Audio Recording: Record directly from your microphone with real-time visualization
• File Upload: Support for MP3, WAV, and M4A files up to 100MB
• Local AI Processing: Uses Hugging Face Transformers with Whisper for client-side transcription
• Rich Text Editor: Professional editing interface with formatting tools
• Export Options: Save transcripts as PDF or DOCX files
• No API Costs: Everything runs locally in your browser

Tech Stack

• Frontend: React + Vite + TypeScript + Tailwind CSS
• AI Model: Whisper (via @huggingface/transformers)
• Audio Recording: MediaRecorder API
• Rich Text: TipTap editor
• Export: jsPDF and html-docx-js
• UI Components: shadcn/ui

Getting Started

Prerequisites

• Node.js 18+ and npm
• Modern browser with WebGPU support (Chrome 113+, Edge 113+)

Installation

1. Clone the repository:

git clone <YOUR_GIT_URL>
cd townhall-transcriber

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser to http://localhost:8080

Usage

1. Recording Audio:

   • Click the "Record Audio" tab
   • Grant microphone permissions when prompted
   • Click "Start Recording" and speak clearly
   • Click "Stop" when finished

2. Uploading Files:

   • Click the "Upload File" tab
   • Drag and drop an audio file or click "Choose File"
   • Supported formats: MP3, WAV, M4A (up to 100MB)

3. Editing Transcripts:

   • Use the rich text editor to format and edit your transcript
   • Add formatting like bold, italic, lists, and quotes
   • Word and character counts are displayed in the status bar

4. Exporting:

   • Click "PDF" to download as PDF
   • Click "DOCX" to download as Word document

Browser Compatibility

• Recommended: Chrome 113+, Edge 113+ (with WebGPU support)
• Fallback: All modern browsers (CPU processing)
• Required Features: MediaRecorder API, File API, Web Workers

Performance Notes

• First Run: Initial model download (~40MB) may take time
• WebGPU: Significantly faster transcription on supported browsers
• CPU Fallback: Automatic fallback for unsupported browsers
• Memory Usage: Large files may require more RAM

Privacy & Security

• ✅ Fully Local: All audio processing happens in your browser
• ✅ No Data Upload: Audio never leaves your device
• ✅ No API Keys: No external services or costs
• ✅ Open Source: Transparent and auditable code

Development

Building for Production

npm run build

Docker Support

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 8080
CMD ["npm", "run", "preview"]

Troubleshooting

Audio Recording Issues

• Check microphone permissions in browser settings
• Ensure secure context (HTTPS or localhost)
• Try refreshing the page

Transcription Errors

• Large files may need more memory - try shorter audio
• Check console for detailed error messages
• Ensure stable internet for initial model download

Export Problems

• Disable popup blockers for file downloads
• Check browser download permissions

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Hugging Face Transformers.js for browser-based AI
• OpenAI Whisper for the speech recognition model
• TipTap for the rich text editor
• shadcn/ui for beautiful UI components