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
@@ -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>,
|
||||
)
|
||||
Reference in new issue
Block a user