150 lines
4.5 KiB
Markdown
150 lines
4.5 KiB
Markdown
# Transcribe App Specification
|
|
|
|
## Project Overview
|
|
- **Name**: Transcribe App
|
|
- **Type**: Web Application (FastAPI + Vanilla JS)
|
|
- **Core Functionality**: Voice recording/transcription with AI-based protocol generation 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**: Azure AI Speech Fast Transcription API
|
|
- **Meeting-Protokoll**: Claude Sonnet 4.6 via Azure Foundry
|
|
- **Email**: SMTP with environment variables
|
|
- **Frontend**: Vanilla HTML/CSS/JS
|
|
- **Lokale Zwischenspeicherung im Browser**: IndexedDB für UI-State und lokale Audio-Datei bis zur Transkription
|
|
|
|
## 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. "Review..." / "✓ Bereit"
|
|
4. "Protokoll 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 common audio formats (.mp3, .wav, .webm, .ogg, .flac)
|
|
- Max file size configurable via environment variable
|
|
- Validate file type before upload
|
|
- Keep audio local in the browser until the user starts transcription
|
|
|
|
#### 2. Voice Recording
|
|
- Use MediaRecorder API (browser)
|
|
- Record in webm/opus format (convert to wav on server for Azure Speech)
|
|
- Show recording duration timer
|
|
- Playback recorded audio before submission
|
|
|
|
#### 3. Transcription
|
|
- Use Azure AI Speech Fast Transcription API
|
|
- Support German language
|
|
- Use speaker diarization when Azure returns speaker-separated phrases
|
|
- Send audio directly in the `/transcribe` request and delete the temporary server file immediately after processing
|
|
|
|
#### 4. Meeting-Protokoll und Versand
|
|
- Generate the final meeting summary from `prompt.txt`
|
|
- Use Claude Sonnet 4.6 hosted in Azure Foundry
|
|
- Queue document generation and email delivery in the background
|
|
- Expose send-job status via API polling
|
|
- Send formatted HTML email via SMTP
|
|
- Attach full transcript as PDF
|
|
|
|
### API Endpoints
|
|
- `POST /transcribe` - Upload and transcribe audio in one request
|
|
- `POST /send` - Queue email send job
|
|
- `GET /send-status/{job_id}` - Poll send job status
|
|
|
|
### Environment Variables
|
|
- AZURE_SPEECH_ENDPOINT
|
|
- AZURE_SPEECH_KEY
|
|
- AZURE_SPEECH_API_VERSION
|
|
- AZURE_SPEECH_DIARIZATION_ENABLED
|
|
- AZURE_SPEECH_MAX_SPEAKERS
|
|
- AZURE_SPEECH_PROFANITY_MODE
|
|
- AZURE_SPEECH_LLM_PROMPT
|
|
- AZURE_ANTHROPIC_BASE_URL
|
|
- AZURE_ANTHROPIC_API_KEY
|
|
- AZURE_ANTHROPIC_MODEL
|
|
- AZURE_ANTHROPIC_MAX_TOKENS
|
|
- AZURE_ANTHROPIC_TEMPERATURE
|
|
- MAX_FILE_SIZE_MB
|
|
- TEMP_DIR
|
|
- 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
|