# 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`