TranscribeFlow is an AI-powered web application that converts audio into text and generates concise summaries.
It supports both file uploads and live voice recording directly from the browser.
Built using Flask, html, css, JavaScript, and AI speech-to-text models.
- Upload audio files (MP3, WAV, WEBM)
- Live browser voice recording
- Automatic transcription
- AI-generated summary
- Download transcription and summary as JSON and TXT file
- User Signup
- User Login
- Logout functionality
- User data stored in database
- Dark Mode & Light Mode (Persistent)
- Clean, responsive design
- Scrollable transcription view
- Python
- Flask
- AI Speech-to-Text Model (e.g., Whisper or similar)
- Summarization Model
- HTML
- CSS
- JavaScript
- MediaRecorder API (for live recording)
- SQLite / MySQL (based on your configuration)
TranscribeFlow/
│
├── app.py
├── static/
│ ├── style.css
│ ├── theme.js
├── templates/
│ ├── login.html
│ ├── signup.html
│ ├── upload.html
├── uploads/
├── requirements.txt
└── README.md
- Browser asks microphone permission
- Audio recorded using MediaRecorder API
- Audio blob sent to
/api/process - Flask processes audio
- Transcription + Summary returned as JSON
- Results displayed dynamically
- Toggle button available on all pages
- Theme preference stored in browser
localStorage - Automatically persists across sessions
- User signs up
- Credentials stored in database
- Login verifies user
- Logout redirects to login page
Example:
{
"transcription": "Full transcribed text...",
"summary": "Short summarized version..."
}This endpoint receives recorded or uploaded audio and returns the generated transcription and summary.
POST
multipart/form-data
| Parameter | Type | Required | Description |
|---|---|---|---|
| audio | File | ✅ Yes | Audio file or recorded blob to transcribe |
curl -X POST http://localhost:5000/api/process \
-H "Content-Type: multipart/form-data" \
-F "audio=@sample.wav"
🔹 Success Response (200 OK)
{
"transcription": "Full transcribed text...",
"summary": "Short summarized version..."
}
🔹 Error Responses
400 – Bad Request
{
"error": "Audio data not provided"
}
500 – Internal Server Error
{
"error": "Internal server error"
}
🔹 Response Description
| Field | Type | Description |
| ------------- | ------ | ------------------------------ |
| transcription | String | Complete speech-to-text output |
| summary | String | AI-generated concise summary |