# 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