Initial scaffold: FastAPI backend + React frontend + Docker Compose
- Backend: FastAPI with SQLite, clip CRUD, health check - Frontend: React + Vite + TypeScript + Tailwind, dark theme - Components: Generator, Gallery, Player - Docker: Compose setup for backend + frontend - Architecture docs in Palace KB
This commit is contained in:
rin.kagamine committed
commit
a2bc785b14
23 files changed
+819
No files matched your search
+33
@@ -0,0 +1,33 @@
|
||||
# Python
|
||||
__pycache__/
|
||||
*.py[cod]
|
||||
*$py.class
|
||||
*.so
|
||||
.Python
|
||||
env/
|
||||
venv/
|
||||
.venv/
|
||||
|
||||
# Node
|
||||
node_modules/
|
||||
dist/
|
||||
*.log
|
||||
|
||||
# Data
|
||||
data/clips/*.mp3
|
||||
data/*.db
|
||||
*.db
|
||||
|
||||
# IDE
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
*.swo
|
||||
|
||||
# OS
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Env
|
||||
.env
|
||||
.env.local
|
||||
@@ -0,0 +1,49 @@
|
||||
# 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
|
||||
|
||||
```bash
|
||||
# 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.
|
||||
@@ -0,0 +1,12 @@
|
||||
FROM python:3.12-slim
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY requirements.txt .
|
||||
RUN pip install --no-cache-dir -r requirements.txt
|
||||
|
||||
COPY src/ ./src/
|
||||
|
||||
WORKDIR /app/src
|
||||
|
||||
CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]
|
||||
@@ -0,0 +1,6 @@
|
||||
fastapi==0.115.0
|
||||
uvicorn[standard]==0.32.0
|
||||
httpx==0.27.0
|
||||
aiosqlite==0.20.0
|
||||
pydantic==2.9.0
|
||||
python-multipart==0.0.12
|
||||
@@ -0,0 +1,80 @@
|
||||
import aiosqlite
|
||||
import uuid
|
||||
from datetime import datetime
|
||||
from pathlib import Path
|
||||
|
||||
DB_PATH = Path(__file__).parent.parent / "data" / "lyria.db"
|
||||
DB_PATH.parent.mkdir(parents=True, exist_ok=True)
|
||||
|
||||
INIT_SQL = """
|
||||
CREATE TABLE IF NOT EXISTS clips (
|
||||
id TEXT PRIMARY KEY,
|
||||
prompt TEXT NOT NULL,
|
||||
model TEXT NOT NULL,
|
||||
duration_seconds INTEGER,
|
||||
filename TEXT NOT NULL,
|
||||
file_size_bytes INTEGER,
|
||||
status TEXT DEFAULT 'generating',
|
||||
error_message TEXT,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
|
||||
CREATE INDEX IF NOT EXISTS idx_clips_created ON clips(created_at DESC);
|
||||
"""
|
||||
|
||||
async def init_db():
|
||||
async with aiosqlite.connect(DB_PATH) as db:
|
||||
await db.executescript(INIT_SQL)
|
||||
await db.commit()
|
||||
|
||||
async def create_clip(prompt: str, model: str, duration: int) -> str:
|
||||
clip_id = str(uuid.uuid4())
|
||||
filename = f"{clip_id}.mp3"
|
||||
async with aiosqlite.connect(DB_PATH) as db:
|
||||
await db.execute(
|
||||
"INSERT INTO clips (id, prompt, model, duration_seconds, filename, status) VALUES (?, ?, ?, ?, ?, ?)",
|
||||
(clip_id, prompt, model, duration, filename, "generating")
|
||||
)
|
||||
await db.commit()
|
||||
return clip_id
|
||||
|
||||
async def update_clip_status(clip_id: str, status: str, file_size: int = None, error: str = None):
|
||||
async with aiosqlite.connect(DB_PATH) as db:
|
||||
if file_size is not None:
|
||||
await db.execute(
|
||||
"UPDATE clips SET status = ?, file_size_bytes = ? WHERE id = ?",
|
||||
(status, file_size, clip_id)
|
||||
)
|
||||
elif error is not None:
|
||||
await db.execute(
|
||||
"UPDATE clips SET status = ?, error_message = ? WHERE id = ?",
|
||||
(status, error, clip_id)
|
||||
)
|
||||
else:
|
||||
await db.execute(
|
||||
"UPDATE clips SET status = ? WHERE id = ?",
|
||||
(status, clip_id)
|
||||
)
|
||||
await db.commit()
|
||||
|
||||
async def get_clips(limit: int = 50, offset: int = 0):
|
||||
async with aiosqlite.connect(DB_PATH) as db:
|
||||
db.row_factory = aiosqlite.Row
|
||||
async with db.execute(
|
||||
"SELECT * FROM clips ORDER BY created_at DESC LIMIT ? OFFSET ?",
|
||||
(limit, offset)
|
||||
) as cursor:
|
||||
rows = await cursor.fetchall()
|
||||
return [dict(row) for row in rows]
|
||||
|
||||
async def get_clip(clip_id: str):
|
||||
async with aiosqlite.connect(DB_PATH) as db:
|
||||
db.row_factory = aiosqlite.Row
|
||||
async with db.execute("SELECT * FROM clips WHERE id = ?", (clip_id,)) as cursor:
|
||||
row = await cursor.fetchone()
|
||||
return dict(row) if row else None
|
||||
|
||||
async def delete_clip(clip_id: str):
|
||||
async with aiosqlite.connect(DB_PATH) as db:
|
||||
await db.execute("DELETE FROM clips WHERE id = ?", (clip_id,))
|
||||
await db.commit()
|
||||
@@ -0,0 +1,76 @@
|
||||
from fastapi import FastAPI, HTTPException
|
||||
from fastapi.middleware.cors import CORSMiddleware
|
||||
from fastapi.responses import FileResponse, StreamingResponse
|
||||
from pathlib import Path
|
||||
import os
|
||||
|
||||
from models import GenerateRequest, GenerateResponse, ClipList
|
||||
from database import init_db, create_clip, get_clips, get_clip, delete_clip, update_clip_status
|
||||
|
||||
app = FastAPI(title="Lyria Studio", version="0.1.0")
|
||||
|
||||
app.add_middleware(
|
||||
CORSMiddleware,
|
||||
allow_origins=["*"],
|
||||
allow_credentials=True,
|
||||
allow_methods=["*"],
|
||||
allow_headers=["*"],
|
||||
)
|
||||
|
||||
CLIPS_DIR = Path(__file__).parent.parent / "data" / "clips"
|
||||
CLIPS_DIR.mkdir(parents=True, exist_ok=True)
|
||||
|
||||
@app.on_event("startup")
|
||||
async def startup():
|
||||
await init_db()
|
||||
|
||||
@app.get("/api/health")
|
||||
async def health():
|
||||
return {"status": "ok", "version": "0.1.0"}
|
||||
|
||||
@app.post("/api/generate", response_model=GenerateResponse)
|
||||
async def generate(request: GenerateRequest):
|
||||
clip_id = await create_clip(request.prompt, request.model, request.duration)
|
||||
# TODO: T-003 — integrate Lyria API client
|
||||
return GenerateResponse(
|
||||
id=clip_id,
|
||||
status="generating",
|
||||
message="Clip generation started. Check back for status."
|
||||
)
|
||||
|
||||
@app.get("/api/clips", response_model=ClipList)
|
||||
async def list_clips(limit: int = 50, offset: int = 0):
|
||||
clips = await get_clips(limit, offset)
|
||||
return ClipList(clips=clips, total=len(clips))
|
||||
|
||||
@app.get("/api/clips/{clip_id}")
|
||||
async def get_clip_by_id(clip_id: str):
|
||||
clip = await get_clip(clip_id)
|
||||
if not clip:
|
||||
raise HTTPException(status_code=404, detail="Clip not found")
|
||||
return clip
|
||||
|
||||
@app.get("/api/clips/{clip_id}/audio")
|
||||
async def stream_audio(clip_id: str):
|
||||
clip = await get_clip(clip_id)
|
||||
if not clip:
|
||||
raise HTTPException(status_code=404, detail="Clip not found")
|
||||
file_path = CLIPS_DIR / clip["filename"]
|
||||
if not file_path.exists():
|
||||
raise HTTPException(status_code=404, detail="Audio file not found")
|
||||
return FileResponse(file_path, media_type="audio/mpeg", filename=clip["filename"])
|
||||
|
||||
@app.delete("/api/clips/{clip_id}")
|
||||
async def remove_clip(clip_id: str):
|
||||
clip = await get_clip(clip_id)
|
||||
if not clip:
|
||||
raise HTTPException(status_code=404, detail="Clip not found")
|
||||
file_path = CLIPS_DIR / clip["filename"]
|
||||
if file_path.exists():
|
||||
file_path.unlink()
|
||||
await delete_clip(clip_id)
|
||||
return {"deleted": True}
|
||||
|
||||
if __name__ == "__main__":
|
||||
import uvicorn
|
||||
uvicorn.run(app, host="0.0.0.0", port=8000)
|
||||
@@ -0,0 +1,28 @@
|
||||
from pydantic import BaseModel
|
||||
from datetime import datetime
|
||||
from typing import Optional
|
||||
|
||||
class GenerateRequest(BaseModel):
|
||||
prompt: str
|
||||
model: str = "lyria-3-clip-preview"
|
||||
duration: int = 30
|
||||
|
||||
class GenerateResponse(BaseModel):
|
||||
id: str
|
||||
status: str
|
||||
message: str
|
||||
|
||||
class Clip(BaseModel):
|
||||
id: str
|
||||
prompt: str
|
||||
model: str
|
||||
duration_seconds: int
|
||||
filename: str
|
||||
file_size_bytes: Optional[int] = None
|
||||
status: str
|
||||
error_message: Optional[str] = None
|
||||
created_at: datetime
|
||||
|
||||
class ClipList(BaseModel):
|
||||
clips: list[Clip]
|
||||
total: int
|
||||
@@ -0,0 +1,24 @@
|
||||
version: '3.8'
|
||||
|
||||
services:
|
||||
backend:
|
||||
build:
|
||||
context: ./backend
|
||||
dockerfile: Dockerfile
|
||||
ports:
|
||||
- "8000:8000"
|
||||
volumes:
|
||||
- ./data:/app/data
|
||||
environment:
|
||||
- LYRIA_API_KEY=${LYRIA_API_KEY}
|
||||
restart: unless-stopped
|
||||
|
||||
frontend:
|
||||
build:
|
||||
context: ./frontend
|
||||
dockerfile: Dockerfile
|
||||
ports:
|
||||
- "3000:3000"
|
||||
depends_on:
|
||||
- backend
|
||||
restart: unless-stopped
|
||||
@@ -0,0 +1,13 @@
|
||||
FROM node:20-alpine AS builder
|
||||
|
||||
WORKDIR /app
|
||||
COPY package*.json ./
|
||||
RUN npm install
|
||||
COPY . .
|
||||
RUN npm run build
|
||||
|
||||
FROM nginx:alpine
|
||||
COPY --from=builder /app/dist /usr/share/nginx/html
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
|
||||
EXPOSE 3000
|
||||
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Lyria Studio</title>
|
||||
</head>
|
||||
<body class="bg-lyria-dark text-lyria-text">
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,17 @@
|
||||
server {
|
||||
listen 3000;
|
||||
server_name localhost;
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
location /api {
|
||||
proxy_pass http://backend:8000;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"name": "lyria-studio-frontend",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.3.0",
|
||||
"react-dom": "^18.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.0",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@vitejs/plugin-react": "^4.3.0",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"postcss": "^8.4.47",
|
||||
"tailwindcss": "^3.4.14",
|
||||
"typescript": "^5.6.0",
|
||||
"vite": "^5.4.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import Generator from './components/Generator'
|
||||
import Gallery from './components/Gallery'
|
||||
import Player from './components/Player'
|
||||
|
||||
interface Clip {
|
||||
id: string
|
||||
prompt: string
|
||||
model: string
|
||||
duration_seconds: number
|
||||
status: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
function App() {
|
||||
const [clips, setClips] = useState<Clip[]>([])
|
||||
const [currentClip, setCurrentClip] = useState<Clip | null>(null)
|
||||
const [isPlaying, setIsPlaying] = useState(false)
|
||||
|
||||
const fetchClips = async () => {
|
||||
try {
|
||||
const res = await fetch('/api/clips')
|
||||
const data = await res.json()
|
||||
setClips(data.clips)
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch clips:', err)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchClips()
|
||||
const interval = setInterval(fetchClips, 5000)
|
||||
return () => clearInterval(interval)
|
||||
}, [])
|
||||
|
||||
const handlePlay = (clip: Clip) => {
|
||||
setCurrentClip(clip)
|
||||
setIsPlaying(true)
|
||||
}
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
try {
|
||||
await fetch(`/api/clips/${id}`, { method: 'DELETE' })
|
||||
if (currentClip?.id === id) {
|
||||
setCurrentClip(null)
|
||||
setIsPlaying(false)
|
||||
}
|
||||
fetchClips()
|
||||
} catch (err) {
|
||||
console.error('Failed to delete clip:', err)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-lyria-dark">
|
||||
<header className="border-b border-white/10 px-6 py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded bg-lyria-accent flex items-center justify-center text-white font-bold text-sm">
|
||||
L
|
||||
</div>
|
||||
<h1 className="text-xl font-bold text-white">Lyria Studio</h1>
|
||||
<span className="text-xs text-lyria-muted bg-white/5 px-2 py-0.5 rounded">v0.1</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-6xl mx-auto p-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="lg:col-span-1">
|
||||
<Generator onGenerate={fetchClips} />
|
||||
</div>
|
||||
<div className="lg:col-span-2 space-y-4">
|
||||
<Gallery
|
||||
clips={clips}
|
||||
onPlay={handlePlay}
|
||||
onDelete={handleDelete}
|
||||
currentClipId={currentClip?.id}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{currentClip && (
|
||||
<Player
|
||||
clip={currentClip}
|
||||
isPlaying={isPlaying}
|
||||
onTogglePlay={() => setIsPlaying(!isPlaying)}
|
||||
onClose={() => {
|
||||
setCurrentClip(null)
|
||||
setIsPlaying(false)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
@@ -0,0 +1,90 @@
|
||||
interface Clip {
|
||||
id: string
|
||||
prompt: string
|
||||
model: string
|
||||
duration_seconds: number
|
||||
status: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
interface Props {
|
||||
clips: Clip[]
|
||||
onPlay: (clip: Clip) => void
|
||||
onDelete: (id: string) => void
|
||||
currentClipId?: string
|
||||
}
|
||||
|
||||
export default function Gallery({ clips, onPlay, onDelete, currentClipId }: Props) {
|
||||
const formatDate = (dateStr: string) => {
|
||||
return new Date(dateStr).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})
|
||||
}
|
||||
|
||||
if (clips.length === 0) {
|
||||
return (
|
||||
<div className="bg-lyria-panel rounded-lg p-8 border border-white/5 text-center">
|
||||
<p className="text-lyria-muted text-sm">No clips yet. Generate your first one!</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-lyria-panel rounded-lg border border-white/5">
|
||||
<div className="px-5 py-4 border-b border-white/5">
|
||||
<h2 className="text-sm font-semibold text-white uppercase tracking-wider">
|
||||
Gallery ({clips.length})
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="divide-y divide-white/5">
|
||||
{clips.map((clip) => (
|
||||
<div
|
||||
key={clip.id}
|
||||
className={`px-5 py-4 flex items-center gap-4 hover:bg-white/5 transition-colors ${
|
||||
currentClipId === clip.id ? 'bg-white/5' : ''
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
onClick={() => onPlay(clip)}
|
||||
className="w-10 h-10 rounded-full bg-lyria-accent/20 flex items-center justify-center text-lyria-accent hover:bg-lyria-accent/30 transition-colors shrink-0"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5v14l11-7z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm text-white truncate">{clip.prompt}</p>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className={`text-xs px-1.5 py-0.5 rounded ${
|
||||
clip.status === 'ready'
|
||||
? 'bg-green-500/20 text-green-400'
|
||||
: clip.status === 'generating'
|
||||
? 'bg-yellow-500/20 text-yellow-400'
|
||||
: 'bg-red-500/20 text-red-400'
|
||||
}`}>
|
||||
{clip.status}
|
||||
</span>
|
||||
<span className="text-xs text-lyria-muted">{clip.duration_seconds}s</span>
|
||||
<span className="text-xs text-lyria-muted">{formatDate(clip.created_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => onDelete(clip.id)}
|
||||
className="text-lyria-muted hover:text-red-400 transition-colors shrink-0"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
import { useState } from 'react'
|
||||
|
||||
interface Props {
|
||||
onGenerate: () => void
|
||||
}
|
||||
|
||||
export default function Generator({ onGenerate }: Props) {
|
||||
const [prompt, setPrompt] = useState('')
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!prompt.trim()) return
|
||||
|
||||
setIsLoading(true)
|
||||
setError('')
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/generate', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
prompt: prompt.trim(),
|
||||
model: 'lyria-3-clip-preview',
|
||||
duration: 30
|
||||
})
|
||||
})
|
||||
|
||||
if (!res.ok) throw new Error('Generation failed')
|
||||
|
||||
setPrompt('')
|
||||
onGenerate()
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Something went wrong')
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-lyria-panel rounded-lg p-5 border border-white/5">
|
||||
<h2 className="text-sm font-semibold text-white mb-4 uppercase tracking-wider">
|
||||
Generate
|
||||
</h2>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-xs text-lyria-muted mb-1.5">
|
||||
Prompt
|
||||
</label>
|
||||
<textarea
|
||||
value={prompt}
|
||||
onChange={(e) => setPrompt(e.target.value)}
|
||||
placeholder="Dark gabber kick at 180 BPM with distorted synth lead..."
|
||||
className="w-full h-24 bg-lyria-dark border border-white/10 rounded-md px-3 py-2 text-sm text-white placeholder:text-lyria-muted/50 focus:outline-none focus:border-lyria-accent resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-xs text-lyria-muted">
|
||||
<span>Model: lyria-3-clip-preview</span>
|
||||
<span>30s</span>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p className="text-xs text-red-400">{error}</p>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading || !prompt.trim()}
|
||||
className="w-full py-2.5 bg-lyria-accent text-white text-sm font-medium rounded-md hover:bg-lyria-accent/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{isLoading ? 'Generating...' : 'Generate'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
import { useRef, useEffect } from 'react'
|
||||
|
||||
interface Clip {
|
||||
id: string
|
||||
prompt: string
|
||||
duration_seconds: number
|
||||
}
|
||||
|
||||
interface Props {
|
||||
clip: Clip
|
||||
isPlaying: boolean
|
||||
onTogglePlay: () => void
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export default function Player({ clip, isPlaying, onTogglePlay, onClose }: Props) {
|
||||
const audioRef = useRef<HTMLAudioElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (audioRef.current) {
|
||||
if (isPlaying) {
|
||||
audioRef.current.play()
|
||||
} else {
|
||||
audioRef.current.pause()
|
||||
}
|
||||
}
|
||||
}, [isPlaying, clip.id])
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-0 left-0 right-0 bg-lyria-panel border-t border-white/10 px-6 py-3">
|
||||
<div className="max-w-6xl mx-auto flex items-center gap-4">
|
||||
<button
|
||||
onClick={onTogglePlay}
|
||||
className="w-10 h-10 rounded-full bg-lyria-accent flex items-center justify-center text-white hover:bg-lyria-accent/90 transition-colors shrink-0"
|
||||
>
|
||||
{isPlaying ? (
|
||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5v14l11-7z" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm text-white truncate">{clip.prompt}</p>
|
||||
<p className="text-xs text-lyria-muted">{clip.duration_seconds}s</p>
|
||||
</div>
|
||||
|
||||
<audio
|
||||
ref={audioRef}
|
||||
src={`/api/clips/${clip.id}/audio`}
|
||||
onEnded={() => onTogglePlay()}
|
||||
className="hidden"
|
||||
/>
|
||||
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-lyria-muted hover:text-white transition-colors shrink-0"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background-color: #0a0a0f;
|
||||
color: #e0e0e0;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #0a0a0f;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #2a2a3a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #3a3a4a;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App'
|
||||
import './index.css'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
@@ -0,0 +1,19 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'lyria-dark': '#0a0a0f',
|
||||
'lyria-panel': '#12121a',
|
||||
'lyria-accent': '#ff6b35',
|
||||
'lyria-text': '#e0e0e0',
|
||||
'lyria-muted': '#6b6b7b',
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
port: 3000,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8000',
|
||||
changeOrigin: true,
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in new issue
Block a user