# Contributing to Voicebox Thank you for your interest in contributing to Voicebox! This document provides guidelines and instructions for contributing. ## Code of Conduct - Be respectful and inclusive - Welcome newcomers and help them learn - Focus on constructive feedback - Respect different viewpoints and experiences ## Getting Started ### Prerequisites - **[Bun](https://bun.sh)** - Fast JavaScript runtime and package manager ```bash curl -fsSL https://bun.sh/install | bash ``` - **[Python 3.11+](https://python.org)** - For backend development ```bash python --version # Should be 3.11 or higher ``` - **[Rust](https://rustup.rs)** - For Tauri desktop app (installed automatically by Tauri CLI) ```bash rustc --version # Check if installed ``` - **Git** - Version control ### Development Setup **Using the Makefile (recommended for macOS/Linux):** Run `make setup` to install all dependencies, then `make dev` to start development servers. See `make help` for all available commands. **Manual setup (required for Windows):** 1. **Fork and clone the repository** ```bash git clone https://github.com/YOUR_USERNAME/voicebox.git cd voicebox ``` 2. **Install JavaScript dependencies** ```bash bun install ``` This installs dependencies for: - `app/` - Shared React frontend - `tauri/` - Tauri desktop wrapper - `web/` - Web deployment wrapper 3. **Set up Python backend** ```bash cd backend # Create virtual environment python -m venv venv # Activate virtual environment source venv/bin/activate # On macOS/Linux # or venv\Scripts\activate # On Windows # Install Python dependencies pip install -r requirements.txt # Install MLX dependencies (Apple Silicon only - for faster inference) # On Apple Silicon, this enables native Metal acceleration if [[ $(uname -m) == "arm64" ]]; then pip install -r requirements-mlx.txt fi # Install Qwen3-TTS (required for voice synthesis) pip install git+https://github.com/QwenLM/Qwen3-TTS.git ``` 4. **Start development servers** Development requires two terminals: one for the Python backend, one for the Tauri app. **Terminal 1: Backend server** (start this first) ```bash cd backend source venv/bin/activate # Activate venv if not already active bun run dev:server # Or manually: uvicorn main:app --reload --port 17493 ``` Backend will be available at `http://localhost:17493` **Terminal 2: Desktop app** ```bash bun run dev ``` This will: - Create a placeholder sidecar binary (for Tauri compilation) - Start Vite dev server on port 5173 - Launch Tauri window pointing to localhost:5173 - Connect to the Python server you started in Terminal 1 - Enable hot reload > **Note:** In dev mode, the app connects to your manually-started Python server. > The bundled server binary is only used in production builds. **Optional: Web app** ```bash bun run dev:web ``` Web app will be available at `http://localhost:5174` ### Model Downloads Models are automatically downloaded from HuggingFace Hub on first use: - **Whisper** (transcription): Auto-downloads on first transcription - **Qwen3-TTS** (voice cloning): Auto-downloads on first generation (~2-4GB) First-time usage will be slower due to model downloads, but subsequent runs will use cached models. ### Building **Build everything (recommended):** ```bash bun run build ``` This automatically: 1. Builds the Python server binary (`./scripts/build-server.sh`) 2. Builds the Tauri desktop app (`cd tauri && bun run tauri build`) Creates platform-specific installers (`.dmg`, `.msi`, `.AppImage`) in `tauri/src-tauri/target/release/bundle/`. **Note:** The build process detects your platform and includes the appropriate backend (MLX for Apple Silicon, PyTorch for others). **Build server binary only:** ```bash bun run build:server # or ./scripts/build-server.sh ``` Creates platform-specific binary in `tauri/src-tauri/binaries/` **Building with local Qwen3-TTS development version:** If you're actively developing or modifying the Qwen3-TTS library, set the `QWEN_TTS_PATH` environment variable to point to your local clone: ```bash export QWEN_TTS_PATH=~/path/to/your/Qwen3-TTS bun run build:server ``` This makes PyInstaller use your local qwen-tts version instead of the pip-installed package. Useful when testing changes to the TTS library before they're published to PyPI or when using an editable install (`pip install -e`). **Build web app:** ```bash cd web bun run build ``` Output in `web/dist/` ### Generate OpenAPI Client After starting the backend server: ```bash ./scripts/generate-api.sh ``` This downloads the OpenAPI schema and generates the TypeScript client in `app/src/lib/api/` ### Convert Assets to Web Formats To optimize images and videos for the web, run: ```bash bun run convert:assets ``` This script: - Converts PNG → WebP (better compression, same quality) - Converts MOV → WebM (VP9 codec, smaller file size) - Processes files in `landing/public/` and `docs/public/` - **Deletes original files** after successful conversion **Requirements:** Install `webp` and `ffmpeg`: ```bash brew install webp ffmpeg ``` > **Note:** Run this before committing new images or videos to keep the repository size small. ## Development Workflow ### 1. Create a Branch ```bash git checkout -b feature/your-feature-name # or git checkout -b fix/your-bug-fix ``` ### 2. Make Your Changes - Write clean, readable code - Follow existing code style - Add comments for complex logic - Update documentation as needed ### 3. Test Your Changes - Test manually in the app - Ensure backend API endpoints work - Check for TypeScript/Python errors - Verify UI components render correctly ### 4. Commit Your Changes Write clear, descriptive commit messages: ```bash git commit -m "Add feature: voice profile export" git commit -m "Fix: audio playback stops after 30 seconds" ``` ### 5. Push and Create Pull Request ```bash git push origin feature/your-feature-name ``` Then create a pull request on GitHub with: - Clear description of changes - Screenshots (for UI changes) - Reference to related issues ## Code Style ### TypeScript/React - Use TypeScript strict mode - Follow React best practices - Use functional components with hooks - Prefer named exports - Format with Biome (runs automatically) ```typescript // Good export function ProfileCard({ profile }: { profile: Profile }) { return