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
2026-05-26 18:18:55 -04:00
commit a2bc785b14
@@ -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,
+      }
+    }
+  }
+})