VoiceStudio

# MISSION: Scaffold "VoiceStudio" Production Architecture
You are an expert Senior Staff Software Architect and Full-Stack Engineer. Your mission is to scaffold and implement a production-grade, highly reliable, and modular codebase following the proven architecture of **VoiceStudio**.
---
## 1. PROJECT SPECIFICATIONS & BENCHMARK
- **Reference Architecture**: VoiceStudio
- **What It Does**: VoiceStudio is an open-source, local-first alternative to ElevenLabs for voice cloning, voice design, video dubbing, dictation, transcription and audiobook creation. It runs a Python/PyTorch model backend behind a local API with a React desktop app.
- **Domain & Category**: Local AI Voice Cloning & Speech Studio
- **Production Scale**: 2-5 people
- **Development Mode**: HYBRID
- **Architectural Rationale**: Heavy model work stays in a Python FastAPI backend with a pluggable, hardware-aware engine registry. Desktop, web, MCP and remote-worker clients all use the same local API, so voice models run on the user's own GPU without a cloud dependency.
- **Live Website Reference**: https://voicestudio.sh
- **Source Repository**: https://github.com/debpalash/VoiceStudio
---
## 2. PRODUCTION TECH STACK
- **Full Stack Array**: Python, FastAPI, PyTorch, Transformers, WhisperX, MLX, Alembic, Model Context Protocol, TypeScript, React, Electron, Tauri, TanStack Query, Tailwind CSS, Radix UI, Vite, Bun, Turborepo, Docker, Playwright
- **Primary Language(s)**: Python, JavaScript, TypeScript, Rust, CSS
- **License of the reference repo**: AGPL-3.0
- **Frontend**: Electron — Current desktop shell (electron/) built with electron-vite and electron-builder; React — React 19 UIs for the Vite web frontend and the Electron renderer; TanStack Query — Server-state fetching against the local API, alongside TanStack Router, Form and Virtual; Tailwind CSS — Styling (Tailwind 4) with shadcn components on Radix UI and Base UI; Tauri — Earlier desktop shell (frontend/src-tauri, Rust) whose migration to Electron is documented in docs/
- **Backend & APIs**: Python — Backend service (backend/main.py) and the bundled omnivoice TTS package, managed with uv and hatchling; FastAPI — Local HTTP and WebSocket API on port 3900 with a Scalar-rendered OpenAPI reference; PyTorch — Runs TTS, cloning, diarization and separation models on CUDA, ROCm, Apple MPS or CPU
- **Data & persistence**: Alembic — Schema migrations for the local app database under backend/migrations
- **Infrastructure & deploy**: Bun — JavaScript package manager and script runner for the frontend/electron workspaces; Turborepo — Build orchestration across the JS workspaces; Docker — CUDA and ROCm server images (deploy/Dockerfile) with a Bun-built frontend stage; Playwright — E2E, production-bundle, performance and visual regression tests for the frontend
- **Tooling, testing & ops**: Transformers — Hugging Face model loading for the default OmniVoice engine and other TTS/ASR backends; WhisperX — Primary transcription with word-level forced alignment used for dubbing lip-sync; MLX — Apple Silicon engines (mlx-whisper, mlx-audio, parakeet-mlx) gated by platform markers; Model Context Protocol — backend/mcp_server.py exposes voice generation and transcription as tools for AI agents
---
## 3. KEY ARCHITECTURAL DECISIONS (audited from https://github.com/debpalash/VoiceStudio @ 47a06c0)
1. **Python model backend behind a local API, UI as a separate client**: backend/ (FastAPI + uvicorn with WebSockets) owns engines, jobs and storage, and the React UIs in frontend/ and electron/ talk to it over HTTP on localhost:3900; the same API powers the MCP server and remote workers.
2. **Pluggable engine registry with hardware-gated dependencies**: backend/engines hosts multiple TTS and ASR engines; pyproject.toml uses platform markers so MLX engines install only on Apple Silicon while WhisperX/faster-whisper, KittenTTS, Demucs and pyannote cover other platforms.
3. **Electron replaced Tauri as the desktop shell**: frontend/src-tauri (Rust) still exists, but electron/ is the default dev and build target in the root package.json, and a series of docs/electron-*.md files plus electron/PARITY.md track feature parity during the migration.
4. **One Docker image per GPU vendor with a torch-preservation guard**: deploy/Dockerfile builds from a pytorch CUDA base by default and a ROCm base via BASE_IMAGE, installs with uv against deploy/torch-constraints.txt, and fails the build if the GPU-specific torch was replaced by a generic wheel.
5. **Dependency pins documented inline with issue numbers**: pyproject.toml caps setuptools (<80), pyannote-audio (<4) and pedalboard (<0.9.21) and fastapi (<0.137) with comments naming the upstream breakage and the VoiceStudio issue, so pins can be revisited deliberately.
6. **Provenance watermarking of generated speech**: pyproject.toml depends on audioseal to embed an imperceptible neural watermark in AI-generated audio for later detection.
---
## 4. NON-NEGOTIABLE ARCHITECTURAL GUARDRAILS
1. **Monorepo & Modular Separation**:
   - Structure as a Turborepo monorepo with strict package boundaries:
     - `apps/web`: Application UI, routing, layouts, and server endpoints.
     - `packages/ui`: Shared design tokens, CSS variables, and Radix UI primitive components.
     - `packages/db`: Database schemas, client singleton, declarative migrations, and seed scripts.
     - `packages/config`: Shared TypeScript, ESLint, and build configurations.
2. **Strict Type Safety & Zero `any` Policy**:
   - Enable `strict: true`, `noImplicitAny: true`, and `strictNullChecks: true`.
   - Validate ALL external inputs, API request bodies, and query parameters with **Zod** schemas before execution.
3. **Frontend & Rendering Guidelines**:
   - Utilize Vite 6 with TanStack Router for fully type-safe routing. Manage server state and caching via TanStack Query v5 with optimistic UI updates.
4. **Design System & Aesthetics**:
   - Keep every color, radius, shadow and font in a single token file (CSS variables) and consume tokens everywhere; never hardcode hex values in components.
   - Prefer crisp 1px borders and one subtle shadow scale over blurry default shadows. Pair one sans-serif for body/headings with one monospace for tags, badges, metrics, and code.
5. **Data Layer & Reliability**:
   - Write declarative schema definitions with foreign keys, composite indexes on queried filters, and automated timestamp triggers.
   - Use connection pooling and prepared statements for serverless database execution.
---
## 5. STEP-BY-STEP SCAFFOLDING ROADMAP
- **Phase 1: Workspace & Root Config**: Initialize package manager, monorepo configuration (`turbo.json`, `tsconfig.base.json`, `package.json`).
- **Phase 2: Database Schema & Client**: Set up the data layer (Alembic): client, connection pool, models, and migration scripts.
- **Phase 3: Design Tokens & UI Primitives**: Build accessible `Button`, `Input`, `Card`, `Badge`, and layout wrappers inside `packages/ui`.
- **Phase 4: Core Application Routes & Handlers**: Implement primary authentication, user session handling, and application routes.
- **Phase 5: Quality Assurance & Build Verification**: Run `tsc --noEmit`, ESLint, Prettier, and smoke test suites to ensure zero compilation or runtime errors.
---
## 6. EXECUTION INSTRUCTIONS
1. Review all specifications, architectural guardrails, and stack choices above.
2. Present the full monorepo directory tree structure.
3. Systematically generate the complete, production-ready codebase according to the 5-phase roadmap above — starting with the root workspace setup, followed by the database schema, UI design system package, and full-stack application routes until the repository is fully scaffolded and ready to run.