Whisperess is an innovative web application that transcribes audio in real-time using the OpenAI Whisper model. It offers a user-friendly interface for transcribing audio files and videos, making it a versatile tool for note-taking, transcription, and collaboration.
Try the Live demo at https://whisperess.vercel.app/
or watch the demo video below:
- 🎤 Real-time transcription of audio in your browser
- 🧠 Transcription powered by OpenAI Whisper model Locally on your device (no data sent to the server)
- 📁 Versatile: supports both microphone and file input for videos and audio files (mp3, mp4, m4a, wav, webm)
- ⚙️ Customizable: adjust transcription settings and language
- 🎯 User-friendly: intuitive interface for easy navigation and interaction
- 📝 Note taking: save transcripts and notes for future reference and collaboration
- 💾 Export: export transcripts and notes to various formats (Txt , JSON)
- 📱 Installable: install the app as PWA on any device for a seamless experience
This project uses Svelte with TypeScript and Vite for development.
This is a Vite + Svelte + TypeScript project that provides:
- 🔥 Hot Module Replacement (HMR)
- 📚 TypeScript support
- ⚡ Lightning-fast development experience
- 🎨 Svelte components with TypeScript
Why use Vite + Svelte?
- 🚀 Extremely fast development server
- 📦 Optimized build output
- 🔌 Rich plugin ecosystem
- 🛠️ Simple and straightforward configuration
TypeScript Configuration Notes 📘
The project uses global.d.ts for TypeScript configuration to maintain flexibility in type checking while providing proper Svelte and Vite type support.
HMR State Management 💾
For state management that persists through HMR updates, consider using Svelte stores:
// notes.svelte.ts
// An extremely simple external store
export type Note = {
id: number;
title: string;
content: string;
createdAt: number;
updatedAt: number;
};
export type Notes = {
items: Note[];
showNotes: boolean;
selectedNoteId?: Note['id'];
};
export const notes = $state<Notes>({
items: [],
showNotes: false
});