File size: 2,670 Bytes
d3f86d8 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
# HFStudio - Quick Start Guide
## 🚀 Running Locally for Development
### Prerequisites
- Node.js 18+ and npm
- Python 3.8+
### Option 1: Quick Start (Recommended)
```bash
# Run both frontend and backend
./run_dev.sh
```
This will:
- Start the backend API server on http://localhost:11110
- Start the frontend dev server on http://localhost:11111
- Install dependencies automatically
### Option 2: Manual Setup
#### Terminal 1 - Backend
```bash
cd backend
# Install dependencies
pip install -r requirements.txt
# Run the server
python -m hfstudio.cli --dev
# Or install as package and run
pip install -e .
hfstudio --dev
```
Backend will run on http://localhost:11110
- API docs: http://localhost:11110/docs
- ReDoc: http://localhost:11110/redoc
#### Terminal 2 - Frontend
```bash
cd frontend
# Install dependencies
npm install
# Run dev server
npm run dev
```
Frontend will run on http://localhost:11111
## 📁 Project Structure
```
hfstudio/
├── frontend/ # Svelte UI (port 11111)
│ └── src/
│ ├── routes/ # Page components
│ └── app.css # Tailwind styles
├── backend/ # Python API (port 11110)
│ └── hfstudio/
│ ├── server.py # FastAPI server
│ └── cli.py # CLI interface
└── run_dev.sh # Dev startup script
```
## 🎨 UI Features
- **Text Input**: Large textarea for text-to-speech input
- **Voice Selection**: Choose from available voices
- **Model Selection**: Switch between TTS models
- **Parameter Controls**: Adjust speed, stability, similarity
- **Mode Toggle**: Switch between API and Local execution
- **Audio Player**: Play and download generated speech
## 🔧 Development Tips
### Frontend Changes
- Edit files in `frontend/src/`
- Hot reload is enabled - changes appear instantly
- Tailwind classes are available
### Backend Changes
- Edit files in `backend/hfstudio/`
- With `--dev` flag, server auto-reloads on changes
- Test API endpoints at http://localhost:11110/docs
### Adding New Features
1. Frontend components go in `frontend/src/lib/components/`
2. API endpoints go in `backend/hfstudio/server.py`
3. TTS models will go in `backend/hfstudio/models/`
## 🐛 Troubleshooting
### Port Already in Use
```bash
# Change frontend port
cd frontend
npm run dev -- --port 11112
# Change backend port
cd backend
python -m hfstudio.cli --port 11112
```
### Missing Dependencies
```bash
# Frontend
cd frontend && npm install
# Backend
cd backend && pip install -r requirements.txt
```
### CORS Issues
Make sure both servers are running and check the CORS configuration in `backend/hfstudio/server.py` |