A modern web application for transcribing audio files, optimized for Cantonese (粵語) using OpenAI's Whisper model.
- 🎤 Drag & Drop Upload - Easy audio file uploading with visual feedback
- 🌐 Multi-language Support - Chinese, English, Japanese, Korean, and auto-detect
- 🔒 Secure Processing - Files are streamed directly to OpenAI, never stored on server
- ⚡ Fast Transcription - Powered by OpenAI Whisper-1 model
- 📋 Easy Export - Copy to clipboard or download as text file
- 🎨 Modern UI - Clean, responsive design with dark mode support
- Framework: Next.js 16 (App Router)
- Styling: Tailwind CSS 4
- AI: OpenAI Whisper API
- Auth: Clerk (optional)
- Node.js 18+
- OpenAI API key
- Clone the repository:
git clone <your-repo-url>
cd subfun- Install dependencies:
npm install- Set up environment variables:
cp .env.local.example .env.local- Add your OpenAI API key to
.env.local:
OPENAI_API_KEY=sk-your-openai-api-key-here
- Run the development server:
npm run dev- Open http://localhost:3000 in your browser.
- Supported formats: MP3, M4A, WAV
- Maximum file size: 25MB (OpenAI API limit)
| Variable | Description | Required |
|---|---|---|
OPENAI_API_KEY |
Your OpenAI API key | Yes |
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY |
Clerk publishable key | No |
CLERK_SECRET_KEY |
Clerk secret key | No |
subfun/
├── app/
│ ├── actions/
│ │ └── transcribe.ts # Server action for transcription
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Main page
├── components/
│ ├── ui/ # Reusable UI components
│ │ ├── button.tsx
│ │ ├── card.tsx
│ │ └── select.tsx
│ ├── audio-dropzone.tsx # Drag & drop file upload
│ ├── header.tsx # App header
│ ├── transcription-form.tsx
│ └── transcription-result.tsx
└── lib/
└── utils.ts # Utility functions
- Client-side validation: File type and size checked before upload
- Server-side validation: Double-checking on the backend
- No file storage: Audio files are streamed directly to OpenAI
- API key protection: OpenAI key stored securely in environment variables
MIT