TTS FastAPI Next.js Application

A modern Text-to-Speech application built with FastAPI backend and Next.js frontend, utilizing Microsoft Edge TTS.

🚀 Features

• Text-to-Speech conversion using Microsoft Edge TTS
• Multiple English voice options
• Adjustable speech rate
• Modern, minimal Material Design UI
• Real-time audio generation and playback

📋 Prerequisites

• Python 3.8+ (for backend)
• Node.js 18+ (for frontend)
• npm or yarn (for frontend package management)

🛠️ Installation

Backend Setup

1. Navigate to the project root:

cd e:\python\tts-fast-next

2. Create and activate a virtual environment (if not already done):

python -m venv venv
.\venv\Scripts\activate

3. Install Python dependencies:

pip install -r backend\requirements.txt

Frontend Setup

1. Navigate to the frontend directory:

cd frontend

2. Install Node.js dependencies:

npm install

🚀 Quick Start

Run both frontend and backend with a single command:

npm run dev

This will start:

• ✅ Backend (FastAPI) → http://localhost:8000
• ✅ Frontend (Next.js) → http://localhost:3000

Open your browser to http://localhost:3000 and start using the app!

---

🎯 Alternative: Run Services Separately

If you prefer to run the services individually:

Backend Only

npm run dev:backend

Starts FastAPI server on port 8000

Frontend Only

npm run dev:frontend

Starts Next.js app on port 3000

Using Direct Commands

Backend:

uvicorn backend.main:app --reload --port 8000

Frontend:

cd frontend
npm run dev

📡 API Endpoints

• GET /api/voices - Get list of available English voices
• POST /api/tts - Convert text to speech
  • Parameters:
    • text: Text to convert (required)
    • voice: Voice ID (default: "en-US-JennyNeural")
    • rate: Speech rate (default: "+0%")

🏗️ Project Structure

tts-fast-next/
├── backend/
│   ├── main.py              # FastAPI application
│   ├── requirements.txt     # Python dependencies
│   └── voices.json          # Voice configuration
├── frontend/
│   ├── src/
│   │   └── app/
│   │       ├── page.tsx     # Main application page
│   │       └── globals.css  # Global styles
│   ├── package.json         # Node.js dependencies
│   └── ...
├── venv/                    # Python virtual environment
├── package.json             # Root package.json for concurrent scripts
└── README.md                # This file

🔧 Development

Backend Development

The backend uses FastAPI with hot-reload enabled. Any changes to backend/main.py will automatically restart the server.

Frontend Development

The frontend uses Next.js with Turbopack for fast development. Changes will be reflected immediately with hot module replacement.

📦 Dependencies

Backend

• FastAPI
• edge-tts
• uvicorn
• python-multipart

Frontend

• Next.js 15.4.4
• React 19.1.0
• TypeScript
• Tailwind CSS

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is open source and available under the MIT License.

🐛 Troubleshooting

Backend won't start

• Ensure virtual environment is activated
• Check if port 8000 is already in use
• Verify all dependencies are installed: pip install -r backend\requirements.txt

Frontend won't start

• Ensure Node.js dependencies are installed: npm install in frontend directory
• Check if port 3000 is already in use
• Clear Next.js cache: rm -rf frontend/.next

CORS errors

• Ensure backend is running on port 8000
• Frontend must be on port 3000 for CORS to work properly