Task 1: Set up project structure and dependencies
- Created backend directory with FastAPI project structure - Created frontend directory with React + TypeScript + Vite - Configured Python virtual environment and installed dependencies (fastapi, uvicorn, kokoro, soundfile, python-multipart) - Verified espeak-ng system dependency is installed - Configured Node.js project with TypeScript, React, and Vite - Set up Tailwind CSS for styling - Set up environment variable configuration for both projects - Created comprehensive README documentation Requirements: 9.6, 10.2, 11.1
This commit is contained in:
126
README.md
126
README.md
@@ -1,70 +1,108 @@
|
||||
# Getting Started with Create React App
|
||||
# Text to Audiobook
|
||||
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
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.
|
||||
|
||||
## Available Scripts
|
||||
## Features
|
||||
|
||||
In the project directory, you can run:
|
||||
- 🎭 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
|
||||
|
||||
### `npm start`
|
||||
## Architecture
|
||||
|
||||
Runs the app in the development mode.\
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
||||
- **Frontend**: React + TypeScript + Vite + Tailwind CSS
|
||||
- **Backend**: Python + FastAPI + Kokoro TTS
|
||||
- **Deployment**: Docker containerization
|
||||
|
||||
The page will reload when you make changes.\
|
||||
You may also see any lint errors in the console.
|
||||
## Quick Start
|
||||
|
||||
### `npm test`
|
||||
### Prerequisites
|
||||
|
||||
Launches the test runner in the interactive watch mode.\
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
- Python 3.10+
|
||||
- Node.js 20.19+ or 22.12+
|
||||
- espeak-ng (system dependency)
|
||||
|
||||
### `npm run build`
|
||||
### Backend Setup
|
||||
|
||||
Builds the app for production to the `build` folder.\
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
1. Install espeak-ng:
|
||||
```bash
|
||||
# macOS
|
||||
brew install espeak-ng
|
||||
|
||||
The build is minified and the filenames include the hashes.\
|
||||
Your app is ready to be deployed!
|
||||
# Linux (Ubuntu/Debian)
|
||||
sudo apt-get install espeak-ng
|
||||
```
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
2. Set up Python environment:
|
||||
```bash
|
||||
cd backend
|
||||
python -m venv venv
|
||||
source venv/bin/activate # On Windows: venv\Scripts\activate
|
||||
pip install -r requirements.txt
|
||||
```
|
||||
|
||||
### `npm run eject`
|
||||
3. Run the backend:
|
||||
```bash
|
||||
uvicorn main:app --reload --host 0.0.0.0 --port 8000
|
||||
```
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
|
||||
### Frontend Setup
|
||||
|
||||
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
1. Install dependencies:
|
||||
```bash
|
||||
cd frontend
|
||||
npm install
|
||||
```
|
||||
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
|
||||
2. Configure environment:
|
||||
```bash
|
||||
cp .env.example .env
|
||||
```
|
||||
|
||||
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
|
||||
3. Run the frontend:
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## Learn More
|
||||
4. Open http://localhost:5173 in your browser
|
||||
|
||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||
## Usage
|
||||
|
||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||
1. **Enter Text**: Paste your text with role markers (e.g., "Alice:", "[Narrator]")
|
||||
2. **Assign Voices**: Select a Kokoro voice for each detected role
|
||||
3. **Configure**: Choose language and playback speed
|
||||
4. **Generate**: Create your multi-voice audiobook
|
||||
5. **Listen & Download**: Play or save the generated audio
|
||||
|
||||
### Code Splitting
|
||||
## Project Structure
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
||||
```
|
||||
.
|
||||
├── 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
|
||||
```
|
||||
|
||||
### Analyzing the Bundle Size
|
||||
## Documentation
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
||||
- [Backend Documentation](./backend/README.md)
|
||||
- [Frontend Documentation](./frontend/README.md)
|
||||
- [Requirements](./.kiro/specs/text-to-audiobook/requirements.md)
|
||||
- [Design Document](./.kiro/specs/text-to-audiobook/design.md)
|
||||
|
||||
### Making a Progressive Web App
|
||||
## License
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
||||
|
||||
### Advanced Configuration
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
||||
|
||||
### Deployment
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
||||
|
||||
### `npm run build` fails to minify
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
||||
MIT
|
||||
|
||||
Reference in New Issue
Block a user