diff --git a/.gitattributes b/.gitattributes index 2d5ce244015588c29fd1d8cb42dd02a38da447c8..f3b9af7f63534deeb91a1fa5fc9914f7d3ce7629 100644 --- a/.gitattributes +++ b/.gitattributes @@ -7,3 +7,9 @@ *.mp4 filter=lfs diff=lfs merge=lfs -text *.webm filter=lfs diff=lfs merge=lfs -text *.pdf filter=lfs diff=lfs merge=lfs -text +hfstudio/static/assets/hf-studio-logo.png filter=lfs diff=lfs merge=lfs -text +hfstudio/static/assets/hf-logo.png filter=lfs diff=lfs merge=lfs -text +frontend/static/assets/hf-studio-logo.png filter=lfs diff=lfs merge=lfs -text +frontend/static/assets/hf-logo.png filter=lfs diff=lfs merge=lfs -text +hfstudio/static/samples/harvard.wav filter=lfs diff=lfs merge=lfs -text +frontend/static/samples/harvard.wav filter=lfs diff=lfs merge=lfs -text diff --git a/.gitignore.backup b/.gitignore.backup new file mode 100644 index 0000000000000000000000000000000000000000..cea8a022fa18b12127cb7e5a5b62db640a3bac49 --- /dev/null +++ b/.gitignore.backup @@ -0,0 +1,280 @@ +# Python +__pycache__/ +*.py[cod] +*$py.class +*.so +.Python +build/ +develop-eggs/ +dist/ +downloads/ +eggs/ +.eggs/ +lib/ +lib64/ +parts/ +sdist/ +var/ +wheels/ +share/python-wheels/ +*.egg-info/ +.installed.cfg +*.egg +MANIFEST + +# PyInstaller +*.manifest +*.spec + +# Installer logs +pip-log.txt +pip-delete-this-directory.txt + +# Unit test / coverage reports +htmlcov/ +.tox/ +.nox/ +.coverage +.coverage.* +.cache +nosetests.xml +coverage.xml +*.cover +*.py,cover +.hypothesis/ +.pytest_cache/ +cover/ + +# Translations +*.mo +*.pot + +# Django stuff: +*.log +local_settings.py +db.sqlite3 +db.sqlite3-journal + +# Flask stuff: +instance/ +.webassets-cache + +# Scrapy stuff: +.scrapy + +# Sphinx documentation +docs/_build/ + +# PyBuilder +.pybuilder/ +target/ + +# Jupyter Notebook +.ipynb_checkpoints + +# IPython +profile_default/ +ipython_config.py + +# pyenv +.python-version + +# pipenv +Pipfile.lock + +# poetry +poetry.lock + +# pdm +.pdm.toml + +# PEP 582 +__pypackages__/ + +# Celery stuff +celerybeat-schedule +celerybeat.pid + +# SageMath parsed files +*.sage.py + +# Environments +.env +.venv +env/ +venv/ +ENV/ +env.bak/ +venv.bak/ + +# Spyder project settings +.spyderproject +.spyproject + +# Rope project settings +.ropeproject + +# mkdocs documentation +/site + +# mypy +.mypy_cache/ +.dmypy.json +dmypy.json + +# Pyre type checker +.pyre/ + +# pytype static type analyzer +.pytype/ + +# Cython debug symbols +cython_debug/ + +# Node.js +node_modules/ +npm-debug.log* +yarn-debug.log* +yarn-error.log* +lerna-debug.log* +.pnpm-debug.log* + +# Diagnostic reports (https://nodejs.org/api/report.html) +report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage +*.lcov + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +jspm_packages/ + +# Snowpack dependency directory (https://snowpack.dev/) +web_modules/ + +# TypeScript cache +*.tsbuildinfo + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional stylelint cache +.stylelintcache + +# Microbundle cache +.rpt2_cache/ +.rts2_cache_cjs/ +.rts2_cache_es/ +.rts2_cache_umd/ + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variable files +.env.development.local +.env.test.local +.env.production.local +.env.local + +# parcel-bundler cache (https://parceljs.org/) +.cache +.parcel-cache + +# Next.js build output +.next +out + +# Nuxt.js build / generate output +.nuxt +dist + +# Gatsby files +.cache/ +public + +# Vuepress build output +.vuepress/dist + +# Vuepress v2.x temp and cache directory +.temp +.cache + +# Docusaurus cache and generated files +.docusaurus + +# Serverless directories +.serverless/ + +# FuseBox cache +.fusebox/ + +# DynamoDB Local files +.dynamodb/ + +# TernJS port file +.tern-port + +# Stores VSCode versions used for testing VSCode extensions +.vscode-test + +# yarn v2 +.yarn/cache +.yarn/unplugged +.yarn/build-state.yml +.yarn/install-state.gz +.pnp.* + +# SvelteKit +.svelte-kit + +# Vite +.vite + +# IDE +.vscode/ +.idea/ +*.swp +*.swo +*~ + +# OS +.DS_Store +.DS_Store? +._* +.Spotlight-V100 +.Trashes +ehthumbs.db +Thumbs.db \ No newline at end of file diff --git a/.gitignore.hf b/.gitignore.hf new file mode 100644 index 0000000000000000000000000000000000000000..55feba6826876854a537cffab0ff7ba30133e93d --- /dev/null +++ b/.gitignore.hf @@ -0,0 +1,40 @@ +# Node.js dependencies and build artifacts +frontend/node_modules/ +frontend/.svelte-kit/ +frontend/build/ + +# Python cache +__pycache__/ +*.pyc +*.pyo +*.pyd +.Python +env/ +venv/ +.env +.venv +pip-log.txt +pip-delete-this-directory.txt + +# Build artifacts +dist/ +build/ +*.egg-info/ + +# IDE and editor files +.vscode/ +.idea/ +*.swp +*.swo +*~ + +# OS files +.DS_Store +Thumbs.db + +# Git +.git/ +.gitignore + +# Don't ignore the built static files for the Space +!hfstudio/static/ diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000000000000000000000000000000000000..91d297b3855b30ec0e467518c93905fdfffb8345 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,142 @@ +# CLAUDE.md + +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. + +## Development Commands + +### Quick Start (Recommended) +```bash +./run_dev.sh +``` +This single script starts both frontend (port 11111) and backend (port 11110) with auto-browser opening. + +### Manual Development Setup + +**Frontend (Svelte):** +```bash +cd frontend +npm install +npm run dev # Development server on :11111 +npm run build # Production build +npm run check # Type checking +``` + +**Backend (FastAPI):** +```bash +cd backend +pip install -r requirements.txt +python -m hfstudio.cli --dev # Development server on :11110 +# OR +pip install -e . +hfstudio --dev +``` + +### Port Configuration +- Frontend: 11111 (configured in `vite.config.js`) +- Backend: 7860 (configured in `cli.py`) +- CORS is configured for these specific ports in `server.py` + +## Architecture Overview + +### Frontend Structure (SvelteKit + TailwindCSS) +- **Single Page App**: Main interface in `src/routes/+page.svelte` +- **Layout**: Global layout with sidebar in `src/routes/+layout.svelte` +- **Design System**: HuggingFace brand colors (`#FFD21E`, `#FF9D00`) used throughout +- **State Management**: Local component state with reactive variables +- **Audio Handling**: Custom HTML5 audio element with manual progress tracking + +### Key UI Components +- **Three-panel layout**: Sidebar (56 units) + Main content + Settings panel (80 units) +- **Fixed bottom button**: Generate button positioned absolutely at page bottom +- **Mini audio player**: Compact controls in generated audio card +- **Full audio player**: Expanded controls with ElevenLabs-style design +- **Custom pause icon**: CSS-only filled bars instead of outline + +### Backend Structure (FastAPI) +- **Main server**: `server.py` with CORS configured for development ports +- **CLI interface**: `cli.py` with typer for command-line control +- **Pydantic models**: TTSRequest, TTSResponse, Voice, Model +- **Current implementation**: Mock TTS generation using placeholder audio + +### API Endpoints +``` +GET / - Health check +GET /api/status - Mode and availability info +GET /api/voices - Available voice list +GET /api/models - Available model list +POST /api/tts/generate - Generate speech from text +``` + +## Design Patterns & Conventions + +### Frontend Patterns +- **HF Brand Integration**: Uses official logo (`/assets/hf-logo.png`) and gradient colors +- **Responsive Controls**: All sliders use custom `.slider-hf` class with HF colors +- **Audio State Management**: Manual synchronization between UI state and HTML5 audio element +- **Progressive Enhancement**: Settings always visible, no hidden toggles + +### Backend Patterns +- **Development Mode**: Auto-reload enabled with `--dev` flag +- **Mock Implementation**: Currently returns `/samples/harvard.wav` for testing +- **CORS Configuration**: Explicitly configured for development ports + +### Styling Conventions +- **TailwindCSS**: Primary styling framework +- **Custom CSS**: Limited to audio sliders and pause icon in `app.css` +- **Color Scheme**: Light theme with HF amber/orange accents +- **Typography**: System fonts with careful spacing + +## Key Implementation Details + +### Audio System +The app uses a hidden HTML5 `