MeetingTranskrip/SPEC.md

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