140 lines
3.7 KiB
Markdown
140 lines
3.7 KiB
Markdown
# Transcribe App Specification
|
|
|
|
## Project Overview
|
|
- **Name**: Transcribe App
|
|
- **Type**: Web Application (FastAPI + Vanilla JS)
|
|
- **Core Functionality**: Voice recording/transcription with AI processing and email delivery
|
|
- **Target Users**: Users who need to transcribe voice notes and receive processed text via email
|
|
|
|
## Tech Stack
|
|
- **Backend**: FastAPI (Python)
|
|
- **Speech-to-Text**: OpenAI Whisper API
|
|
- **AI Processing**: OpenAI GPT-4o
|
|
- **Email**: SMTP with environment variables
|
|
- **Frontend**: Vanilla HTML/CSS/JS
|
|
|
|
## UI/UX Specification
|
|
|
|
### Layout Structure
|
|
- Single page application
|
|
- Centered content container (max-width: 600px)
|
|
- Sections: Header, Upload/Record area, Email input, Status display
|
|
|
|
### Visual Design
|
|
|
|
#### Color Palette
|
|
- **Background**: #000000 (black)
|
|
- **Primary Text**: #FFFFFF (white)
|
|
- **Secondary Text**: #888888 (gray)
|
|
- **Accent**: #FFFFFF (white)
|
|
- **Border**: #333333 (dark gray)
|
|
- **Hover/Active**: #1A1A1A (near black)
|
|
- **Success**: #00FF00 (green)
|
|
- **Error**: #FF0000 (red)
|
|
|
|
#### Typography
|
|
- **Font Family**: "JetBrains Mono", monospace (Google Fonts)
|
|
- **Heading**: 24px, bold
|
|
- **Body**: 14px, regular
|
|
- **Labels**: 12px, uppercase, letter-spacing: 2px
|
|
|
|
#### Spacing
|
|
- Container padding: 40px
|
|
- Section gap: 30px
|
|
- Element gap: 16px
|
|
|
|
### Components
|
|
|
|
#### Drop Zone
|
|
- Dashed border (#333333)
|
|
- Height: 200px
|
|
- Border radius: 8px
|
|
- States: default, hover (border: #FFFFFF), dragover (background: #1A1A1A)
|
|
- Icon: microphone SVG
|
|
- Text: "MP3 hierher ziehen oder klicken zum Hochladen"
|
|
|
|
#### Record Button
|
|
- Circular, 80px diameter
|
|
- White border, transparent background
|
|
- Microphone icon inside
|
|
- States: default, recording (pulsing red animation), disabled
|
|
- Text below: "Aufnahme starten" / "Aufnahme stoppen"
|
|
|
|
#### Email Input
|
|
- Full width text input
|
|
- Black background, white border
|
|
- Placeholder: "E-MAIL-ADRESSE"
|
|
- Email validation indicator
|
|
|
|
#### Process Indicator
|
|
- Steps displayed vertically:
|
|
1. "Hochladen..." / "✓ Hochgeladen"
|
|
2. "Transkribieren..." / "✓ Transkribiert"
|
|
3. "KI-Verarbeitung..." / "✓ Verarbeitet"
|
|
4. "E-Mail senden..." / "✓ Gesendet"
|
|
- Each step with icon, timestamp
|
|
|
|
#### Send Button
|
|
- Full width, white background, black text
|
|
- Height: 48px
|
|
- States: default, hover (gray #CCCCCC), disabled, loading
|
|
|
|
## Functionality Specification
|
|
|
|
### Core Features
|
|
|
|
#### 1. File Upload (Drag & Drop)
|
|
- Accept only .mp3 files
|
|
- Max file size: 25MB
|
|
- Show progress during upload
|
|
- Validate file type before upload
|
|
|
|
#### 2. Voice Recording
|
|
- Use MediaRecorder API (browser)
|
|
- Record in webm/opus format (convert to mp3 on server)
|
|
- Show recording duration timer
|
|
- Playback recorded audio before submission
|
|
|
|
#### 3. Transcription
|
|
- Use OpenAI Whisper API
|
|
- Support German language
|
|
- Return timestamped segments
|
|
|
|
#### 4. AI Processing
|
|
- Use OpenAI GPT-4o
|
|
- Improve transcription:
|
|
- Fix grammar and spelling
|
|
- Add proper punctuation
|
|
- Structure into paragraphs
|
|
- Maintain original meaning
|
|
|
|
#### 5. Email Delivery
|
|
- Send processed text via SMTP
|
|
- Include original and processed text
|
|
- Email format: plain text
|
|
|
|
### API Endpoints
|
|
- `POST /upload` - Upload audio file
|
|
- `POST /transcribe` - Transcribe audio
|
|
- `POST /process` - AI process text
|
|
- `POST /send-email` - Send email
|
|
|
|
### Environment Variables
|
|
- OPENAI_API_KEY
|
|
- SMTP_HOST
|
|
- SMTP_PORT
|
|
- SMTP_USER
|
|
- SMTP_PASSWORD
|
|
- SMTP_FROM
|
|
|
|
## Acceptance Criteria
|
|
|
|
1. ✓ User can drag & drop MP3 file onto drop zone
|
|
2. ✓ User can click to browse and select MP3 file
|
|
3. ✓ User can start and stop voice recording
|
|
4. ✓ User can play back recording before submitting
|
|
5. ✓ User can enter email address
|
|
6. ✓ App shows step-by-step progress
|
|
7. ✓ Final email is sent with processed text
|
|
8. ✓ Clean black/white design throughout
|
|
9. ✓ Responsive on mobile devices |