rin.kagamine
d77d9100fb
Player.tsx track info section now shows a 32x32 album art thumbnail left of the track name. Uses the clip's artwork endpoint with an onError fallback to the treble clef placeholder (same SVG text approach as gallery placeholders). Hidden on mobile (sm breakpoint). Layout: flex row with 10px gap between thumbnail and title text.
Lyria Studio
A webapp for generating, playing, and storing music clips using Google's Lyria music generation models.
Built by Kagamine Rin & Ryan.
Quick Start
# Backend
cd backend
python -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
cd src
uvicorn main:app --reload
# Frontend (new terminal)
cd frontend
npm install
npm run dev
Architecture
- Backend: FastAPI (Python) — async Lyria API client, SQLite metadata, file storage
- Frontend: React + Vite + TypeScript + Tailwind — dark theme, audio player
- Storage: SQLite for clip metadata, local filesystem for MP3 files
API
| Endpoint | Method | Description |
|---|---|---|
/api/health |
GET | Health check |
/api/generate |
POST | Start clip generation |
/api/clips |
GET | List all clips |
/api/clips/{id} |
GET | Get clip metadata |
/api/clips/{id}/audio |
GET | Stream MP3 |
/api/clips/{id} |
DELETE | Delete clip |
Models
- v0.1: Lyria 3 Clip Preview (30s, REST)
- v0.2: Lyria 3 Pro (structure-aware, ~3min)
- v0.3: Lyria RealTime (WebSocket streaming)
License
MIT — Hardcore will never die.