MeetingTranskrip/SPEC.md

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