Paul Bailey
50b0ef792a
- Applied Tailwind CSS responsive classes across all components - Implemented mobile-first design approach with breakpoints (sm, md, lg) - Added touch-friendly interactions with min-h-[44px] touch targets - Enhanced App.tsx with responsive padding, headings, and alerts - Updated TextInputSection with responsive textarea and full-width mobile button - Improved VoiceAssignmentSection with flexible layouts and mobile-optimized controls - Enhanced AudioPlayerSection with responsive sizing and touch support - Added custom CSS for range slider with larger thumb for mobile - Improved select dropdowns with visible arrows and proper padding - Added touch-manipulation class to prevent double-tap zoom - Added active states for better mobile feedback - Updated index.html with proper title and meta description - Created RESPONSIVE_IMPROVEMENTS.md documentation Requirements: 12.1, 12.2, 12.3, 12.4
Text to Audiobook
A full-stack application that converts long-form text into multi-voice audiobooks using Kokoro TTS (hexgrad/Kokoro-82M). The system automatically detects distinct roles/speakers in text, allows voice assignment per role, and generates high-quality audio.
Features
- 🎭 Automatic role/speaker detection from text
- 🎤 Multi-voice synthesis with Kokoro TTS
- 🌍 Support for multiple languages (English, French, Japanese)
- ⚡ Fast local processing (no cloud dependencies)
- 📱 Responsive web interface
- 🎵 Audio playback and download
Architecture
- Frontend: React + TypeScript + Vite + Tailwind CSS
- Backend: Python + FastAPI + Kokoro TTS
- Deployment: Docker containerization
Quick Start
Prerequisites
- Python 3.10+
- Node.js 20.19+ or 22.12+
- espeak-ng (system dependency)
Backend Setup
- Install espeak-ng:
# macOS
brew install espeak-ng
# Linux (Ubuntu/Debian)
sudo apt-get install espeak-ng
- Set up Python environment:
cd backend
python -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activate
pip install -r requirements.txt
- Run the backend:
uvicorn main:app --reload --host 0.0.0.0 --port 8000
Frontend Setup
- Install dependencies:
cd frontend
npm install
- Configure environment:
cp .env.example .env
- Run the frontend:
npm run dev
- Open http://localhost:5173 in your browser
Usage
- Enter Text: Paste your text with role markers (e.g., "Alice:", "[Narrator]")
- Assign Voices: Select a Kokoro voice for each detected role
- Configure: Choose language and playback speed
- Generate: Create your multi-voice audiobook
- Listen & Download: Play or save the generated audio
Project Structure
.
├── backend/ # FastAPI backend
│ ├── main.py # API endpoints
│ ├── services/ # Business logic
│ ├── requirements.txt # Python dependencies
│ └── README.md
├── frontend/ # React frontend
│ ├── src/
│ │ ├── api/ # API client
│ │ ├── components/ # React components
│ │ └── App.tsx # Main app
│ ├── package.json
│ └── README.md
└── README.md # This file
Documentation
License
MIT