# 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