ace-step-jam: AI music generation studio

Describe any song in plain English — an LLM writes tags and lyrics,
ACE-Step v1.5 generates the audio, and Z-Image-Turbo creates a
thumbnail. Community feed for sharing songs.

Built on ACE-Step/acestep-v15-xl-turbo + Tongyi-MAI/Z-Image-Turbo.

README.md

@@ -1,5 +1,5 @@
 ---
-title: Ace-Step Studio
+title: ace-step-jam
 emoji: 🎵
 colorFrom: gray
 colorTo: gray
@@ -8,24 +8,21 @@ sdk_version: 6.12.0
 app_file: app.py
 pinned: false
 license: mit
-short_description: Minimalist dark UI for ACE-Step music generation
+short_description: Describe any song — AI writes & produces it
 models:
   - ACE-Step/Ace-Step1.5
   - ACE-Step/acestep-v15-xl-turbo
-preload_from_hub:
-  - ACE-Step/Ace-Step1.5
-  - ACE-Step/acestep-v15-xl-turbo
+  - Tongyi-MAI/Z-Image-Turbo
 ---
 
-# ACE-Step Studio
+# ace-step-jam
 
-A minimalist, dark-themed interface for generating music with [ACE-Step](https://github.com/ace-step/ACE-Step).
+Describe any song in plain English — an LLM writes the tags and lyrics, then [ACE-Step v1.5](https://github.com/ace-step/ACE-Step) generates the audio.
 
-**Model**: `ACE-Step/acestep-v15-xl-turbo` — generates 1 minute of audio in ~2 seconds (8-step turbo distillation).
+**Model**: [`ACE-Step/acestep-v15-xl-turbo`](https://huggingface.co/ACE-Step/acestep-v15-xl-turbo) — 8-step turbo distillation, ~2 seconds per minute of audio on GPU.
 
 ## Usage
 
-1. Enter style tags (e.g. `lo-fi, chill, piano, female vocals`)
-2. Write lyrics with `[verse]`, `[chorus]`, `[bridge]` section markers
-3. Hit **Generate** — a waveform appears when ready
-4. Use **✨ Inspire me** to auto-generate lyrics via LLM
+1. Describe the song you want (genre, mood, story — anything)
+2. Hit **Generate** — the AI composes lyrics, picks tags, and produces audio
+3. Click the waveform to seek, download the WAV, or share to the community feed

app.py

@@ -1,13 +1,16 @@
 import os
 import sys
+import re
+import json
 import base64
+import uuid
 import tempfile
 import traceback
+from datetime import datetime, timezone
 import numpy as np
 import soundfile as sf
 
 # ── CRITICAL: import spaces BEFORE torch and acestep ─────────────────────────
-# spaces monkey-patches CUDA init hooks so ZeroGPU can intercept GPU allocation.
 try:
     import spaces
     HAS_SPACES = True
@@ -20,43 +23,69 @@ for _v in ["http_proxy", "https_proxy", "HTTP_PROXY", "HTTPS_PROXY", "ALL_PROXY"
 os.environ["GRADIO_ANALYTICS_ENABLED"] = "False"
 
 # Fix PermissionError on ZeroGPU: /home/user/.cache is not writable.
-# Redirect HF module cache + matplotlib config to /tmp.
 os.environ.setdefault("HF_MODULES_CACHE", "/tmp/hf_modules")
 os.environ.setdefault("MPLCONFIGDIR", "/tmp/matplotlib")
 
-# Add bundled nano-vllm to path (needed by LLM handler; do this before any acestep import)
+# Add bundled nano-vllm to path
 _current_dir = os.path.dirname(os.path.abspath(__file__))
 _nano_vllm = os.path.join(_current_dir, "acestep", "third_parts", "nano-vllm")
 if os.path.exists(_nano_vllm):
     sys.path.insert(0, _nano_vllm)
 
+import io
+import random
 import torch
+from PIL import Image
 from acestep.handler import AceStepHandler
 from gradio import Server
 from fastapi.responses import HTMLResponse
 from openai import OpenAI
 
 # ── Model Loading ─────────────────────────────────────────────────────────────
-# AceStepHandler downloads both ACE-Step/Ace-Step1.5 (VAE + text encoder)
-# and ACE-Step/acestep-v15-xl-turbo (transformer) into persistent_storage_path.
-# preload_from_hub in README pre-downloads them at build time so startup is fast.
 
 def _get_storage_path():
-    if os.path.exists("/data"):
-        try:
-            t = "/data/.write_test"
-            with open(t, "w") as f:
-                f.write("x")
-            os.remove(t)
-            return "/data"
-        except OSError:
-            pass
-    p = os.path.join(_current_dir, "data")
+    """Model checkpoints — try to reuse preload_from_hub cache via symlinks."""
+    p = os.path.join(_current_dir, "model_cache")
     os.makedirs(p, exist_ok=True)
+    checkpoint_dir = os.path.join(p, "checkpoints")
+    os.makedirs(checkpoint_dir, exist_ok=True)
+
+    # preload_from_hub downloads to HF cache during Docker build.
+    # Create symlinks so the handler finds models at the expected paths
+    # without re-downloading 20GB on each restart.
+    from huggingface_hub import try_to_load_from_cache, scan_cache_dir
+    for model_name, repo_id in [
+        ("acestep-v15-xl-turbo", "ACE-Step/acestep-v15-xl-turbo"),
+    ]:
+        target = os.path.join(checkpoint_dir, model_name)
+        if not os.path.exists(target):
+            try:
+                from huggingface_hub import snapshot_download
+                cached = snapshot_download(repo_id, local_files_only=True)
+                os.symlink(cached, target)
+                print(f"[startup] Linked {model_name} → {cached}")
+            except Exception as e:
+                print(f"[startup] Cache miss for {model_name}, will download: {e}")
+
+    # For the unified repo (ACE-Step/Ace-Step1.5), its subdirs (vae, Qwen3-Embedding-0.6B, etc.)
+    # need to appear directly in checkpoint_dir
+    try:
+        from huggingface_hub import snapshot_download
+        cached = snapshot_download("ACE-Step/Ace-Step1.5", local_files_only=True)
+        for sub in os.listdir(cached):
+            src = os.path.join(cached, sub)
+            dst = os.path.join(checkpoint_dir, sub)
+            if os.path.isdir(src) and not os.path.exists(dst):
+                os.symlink(src, dst)
+                print(f"[startup] Linked {sub} → {src}")
+    except Exception as e:
+        print(f"[startup] Cache miss for Ace-Step1.5, will download: {e}")
+
     return p
 
 _storage = _get_storage_path()
-print(f"[startup] Storage: {_storage}")
+print(f"[startup] Model storage: {_storage}")
+print(f"[startup] Community bucket: /data (mounted)")
 
 handler = AceStepHandler(persistent_storage_path=_storage)
 _status, _ready = handler.initialize_service(
@@ -70,8 +99,149 @@ _status, _ready = handler.initialize_service(
 )
 print(f"[startup] Handler: ready={_ready} — {_status}")
 
+# ── Z-Image-Turbo (thumbnail generation) ─────────────────────────────────────
+try:
+    from diffusers import ZImagePipeline, FlowMatchEulerDiscreteScheduler
+    _zimage_pipe = ZImagePipeline.from_pretrained(
+        "Tongyi-MAI/Z-Image-Turbo",
+        torch_dtype=torch.bfloat16,
+    )
+    _zimage_pipe.to("cuda")
+    print("[startup] Z-Image-Turbo loaded for thumbnails")
+except Exception as e:
+    _zimage_pipe = None
+    print(f"[startup] Z-Image-Turbo not available: {e}")
+
+# ── LLM Compose ──────────────────────���───────────────────────────────────────
+
+COMPOSE_SYSTEM = """You are a Grammy-winning songwriter and music producer. The user will describe a song idea in plain English. Your job is to flesh it out into a complete song specification.
+
+Return EXACTLY this format — no extra text:
+
+---
+title: <short catchy song title>
+tags: <genre and style tags, comma-separated, 3-6 tags>
+bpm: <tempo as integer>
+language: <vocal language: en, zh, ja, ko, or "unknown" for instrumental>
+---
+
+<song lyrics with [Verse], [Chorus], [Bridge] markers>
+<use [Instrumental] alone if the song has no vocals>"""
+
+BUCKET_ID = "victor/ace-step-community"
+BUCKET_URL = f"https://huggingface.co/buckets/{BUCKET_ID}/resolve"
+
+
+def _compose(description: str) -> dict:
+    """Call HF Inference Router LLM to generate tags + lyrics from a description."""
+    key = os.environ.get("HF_TOKEN", "")
+    if not key:
+        raise RuntimeError("HF_TOKEN not configured")
+
+    client = OpenAI(base_url="https://router.huggingface.co/v1", api_key=key)
+    resp = client.chat.completions.create(
+        model="openai/gpt-oss-120b:groq",
+        messages=[
+            {"role": "system", "content": COMPOSE_SYSTEM},
+            {"role": "user", "content": description},
+        ],
+        max_tokens=2000,
+        temperature=0.9,
+    )
+    raw = resp.choices[0].message.content or ""
+    content = re.sub(r"<think>.*?</think>", "", raw, flags=re.DOTALL).strip()
+
+    # Parse frontmatter
+    title, tags, bpm, language = "Untitled", "", 120, "en"
+    lyrics = content
+    m = re.search(r"---\s*\n(.*?)\n---\s*\n(.*)", content, re.DOTALL)
+    if m:
+        header, lyrics = m.group(1), m.group(2).strip()
+        for line in header.strip().split("\n"):
+            if line.startswith("title:"):
+                title = line[6:].strip().strip('"\'')
+            elif line.startswith("tags:"):
+                tags = line[5:].strip()
+            elif line.startswith("bpm:"):
+                try:
+                    bpm = int(line[4:].strip())
+                except ValueError:
+                    pass
+            elif line.startswith("language:"):
+                language = line[9:].strip()
+
+    return {"title": title, "tags": tags, "lyrics": lyrics, "bpm": bpm, "language": language}
+
+
+# ── Thumbnail Generation ─────────────────────────────────────────────────────
+
+def _get_song_word(title: str, tags: str, lyrics: str, description: str) -> str:
+    """Ask LLM for a single evocative word to represent the song visually."""
+    # Fallback: first 2 words of description or title
+    fallback = " ".join((description or title or "music").split()[:2])
+    key = os.environ.get("HF_TOKEN", "")
+    if not key:
+        print(f"[thumbnail] no HF_TOKEN, using fallback: {fallback}")
+        return fallback
+    try:
+        client = OpenAI(base_url="https://router.huggingface.co/v1", api_key=key)
+        resp = client.chat.completions.create(
+            model="openai/gpt-oss-120b:groq",
+            messages=[
+                {"role": "system", "content": "Reply with exactly ONE concrete visual noun (a physical object, animal, or natural element) that captures the essence of this song. No explanation, no punctuation, just the single word."},
+                {"role": "user", "content": f"Title: {title}\nTags: {tags}\nLyrics: {lyrics[:300]}"},
+            ],
+            max_tokens=500,
+            temperature=0.7,
+        )
+        raw = resp.choices[0].message.content or ""
+        cleaned = re.sub(r"<think>.*?</think>", "", raw, flags=re.DOTALL).strip()
+        word = cleaned.split()[0].strip('."\'!,') if cleaned.split() else ""
+        if not word:
+            print(f"[thumbnail] LLM returned empty, using fallback: {fallback}")
+            return fallback
+        print(f"[thumbnail] word: {word}")
+        return word
+    except Exception as e:
+        print(f"[thumbnail] word extraction failed: {e}, using fallback: {fallback}")
+        return fallback
+
+
+def _generate_thumbnail_impl(word: str) -> bytes | None:
+    """Generate a thumbnail using Z-Image-Turbo. Returns PNG bytes or None."""
+    if _zimage_pipe is None:
+        return None
+    try:
+        prompt = f"{word} studio photography close-up black background"
+        print(f"[thumbnail] generating: {prompt}")
+        scheduler = FlowMatchEulerDiscreteScheduler(num_train_timesteps=1000, shift=3.0)
+        _zimage_pipe.scheduler = scheduler
+        image = _zimage_pipe(
+            prompt=prompt,
+            height=1024, width=1024,
+            guidance_scale=0.0,
+            num_inference_steps=9,
+            generator=torch.Generator("cuda").manual_seed(random.randint(1, 1000000)),
+            max_sequence_length=512,
+        ).images[0]
+        buf = io.BytesIO()
+        image.save(buf, format="PNG", optimize=True)
+        print(f"[thumbnail] done ({len(buf.getvalue()) // 1024}KB)")
+        return buf.getvalue()
+    except Exception as e:
+        print(f"[thumbnail] generation failed: {e}")
+        return None
+
+if HAS_SPACES:
+    @spaces.GPU(duration=30)
+    def _generate_thumbnail(word: str) -> bytes | None:
+        return _generate_thumbnail_impl(word)
+else:
+    def _generate_thumbnail(word: str) -> bytes | None:
+        return _generate_thumbnail_impl(word)
+
+
 # ── GPU Inference Function ────────────────────────────────────────────────────
-# RULE: @spaces.GPU and @app.api MUST be on SEPARATE functions. Never stack.
 
 if HAS_SPACES:
     @spaces.GPU(duration=120)
@@ -103,17 +273,15 @@ def _run_inference(prompt, lyrics, audio_duration, infer_steps, seed) -> str:
         raise RuntimeError(result.get("error", "generation failed"))
 
     audio_dict = result["audios"][0]
-    tensor = audio_dict["tensor"]   # [channels, samples], CPU float32
+    tensor = audio_dict["tensor"]
     sr = audio_dict["sample_rate"]
 
-    # Convert to numpy [samples, channels] or [samples] for soundfile
     data = tensor.cpu().float().numpy()
     if data.ndim == 2:
-        data = data.T                          # → [samples, channels]
+        data = data.T
         if data.shape[1] == 1:
-            data = data[:, 0]                  # collapse mono
+            data = data[:, 0]
 
-    # Peak-normalize as safety net (v1.5 DCAE should already be scaled correctly)
     peak = np.abs(data).max()
     if peak > 1e-4:
         data = (data / peak * 0.95).astype(np.float32)
@@ -124,19 +292,109 @@ def _run_inference(prompt, lyrics, audio_duration, infer_steps, seed) -> str:
 
 
 # ── gr.Server App ─────────────────────────────────────────────────────────────
-app = Server(title="ACE-Step Studio")
+app = Server(title="ace-step-jam")
+
+
+# ── API: One-box create (compose + generate) ─────────────────────────────────
+@app.api(name="create", concurrency_limit=1, time_limit=300)
+def create(
+    description: str,
+    audio_duration: float = 60.0,
+    seed: int = -1,
+    community: bool = False,
+) -> str:
+    """One-box: describe a song → LLM composes tags+lyrics → generates audio.
+    Returns JSON: {audio, title, tags, lyrics, community_url?}"""
+    try:
+        # Step 1: LLM compose (no GPU)
+        composed = _compose(description)
+        title = composed["title"]
+        tags = composed["tags"]
+        lyrics = composed["lyrics"]
+        print(f"[create] title={title} tags={tags[:60]}...")
+
+        # Step 2: GPU generate music
+        wav_path = _generate_gpu(tags, lyrics, audio_duration, 8, seed)
+        with open(wav_path, "rb") as f:
+            wav_bytes = f.read()
+        audio_b64 = f"data:audio/wav;base64,{base64.b64encode(wav_bytes).decode()}"
+
+        # Step 3: Generate thumbnail (separate GPU session via Z-Image-Turbo)
+        thumb_bytes = None
+        try:
+            word = _get_song_word(title, tags, lyrics, description)
+            thumb_bytes = _generate_thumbnail(word)
+        except Exception as e:
+            print(f"[create] thumbnail failed: {e}")
+
+        result = {
+            "audio": audio_b64,
+            "title": title,
+            "tags": tags,
+            "lyrics": lyrics,
+        }
+        if thumb_bytes:
+            result["thumbnail"] = f"data:image/png;base64,{base64.b64encode(thumb_bytes).decode()}"
+
+        # Step 3: Community upload (if checked and /data is writable)
+        if community:
+            try:
+                song_id = uuid.uuid4().hex[:12]
+                song_dir = f"/data/songs/{song_id}"
+                os.makedirs(song_dir, exist_ok=True)
 
+                # Save WAV
+                wav_name = f"{song_id}.wav"
+                with open(f"{song_dir}/{wav_name}", "wb") as f:
+                    f.write(wav_bytes)
 
-# ── API: Generate music ───────────────────────────────────────────────────────
+                # Save thumbnail
+                has_thumb = False
+                if thumb_bytes:
+                    with open(f"{song_dir}/thumb.png", "wb") as f:
+                        f.write(thumb_bytes)
+                    has_thumb = True
+
+                # Save metadata
+                meta = {
+                    "id": song_id,
+                    "title": title,
+                    "description": description,
+                    "tags": tags,
+                    "lyrics": lyrics,
+                    "duration": audio_duration,
+                    "has_thumb": has_thumb,
+                    "created_at": datetime.now(timezone.utc).isoformat(),
+                }
+                with open(f"{song_dir}/meta.json", "w") as f:
+                    json.dump(meta, f, indent=2)
+
+                result["community_url"] = f"{BUCKET_URL}/songs/{song_id}/{wav_name}"
+                print(f"[create] Shared to community: {result['community_url']}")
+                _invalidate_feed()
+            except Exception as upload_err:
+                print(f"[create] Community upload failed: {upload_err}")
+
+        return json.dumps(result)
+    except Exception as e:
+        print(f"[create ERROR] {type(e).__name__}: {e}")
+        print(traceback.format_exc())
+        raise
+
+
+# ── API: Direct generate (for advanced/custom mode) ──────────────────────────
 @app.api(name="generate", concurrency_limit=1, time_limit=180)
 def generate(
     prompt: str,
     lyrics: str,
     audio_duration: float = 60.0,
     infer_step: int = 8,
+    guidance_scale: float = 7.0,
     seed: int = -1,
+    lora_name_or_path: str = "",
+    lora_weight: float = 0.8,
 ) -> str:
-    """Generate music from style tags and lyrics. Returns a base64 WAV data URL."""
+    """Direct generate from explicit tags + lyrics. Returns base64 WAV data URL."""
     try:
         wav_path = _generate_gpu(prompt, lyrics, audio_duration, infer_step, seed)
         with open(wav_path, "rb") as f:
@@ -148,38 +406,42 @@ def generate(
         raise
 
 
-# ── API: LLM lyrics inspiration ───────────────────────────────────────────────
-@app.api(name="inspire", concurrency_limit=4)
-def inspire(genre_hint: str = "") -> str:
-    """Generate lyrics via HF Inference Router. Token is server-side only."""
-    token = os.environ.get("HF_TOKEN", "")
-    if not token:
-        return "[Error: HF_TOKEN not configured in Space secrets]"
+# ── API: Community feed (cached) ──────────────────────────────────────────────
+import time as _time
+_feed_cache = {"data": "[]", "ts": 0}
+_FEED_TTL = 10  # seconds
 
-    client = OpenAI(base_url="https://router.huggingface.co/v1", api_key=token)
-    genre = genre_hint.strip() or "original"
-    try:
-        import re
-        resp = client.chat.completions.create(
-            model="Qwen/Qwen3-8B",
-            messages=[
-                {
-                    "role": "system",
-                    "content": (
-                        "You are a lyricist. Write song lyrics using "
-                        "[verse], [chorus], and optionally [bridge] markers. "
-                        "Return ONLY the lyrics."
-                    ),
-                },
-                {"role": "user", "content": f"Write lyrics for a {genre} song. /no_think"},
-            ],
-            max_tokens=600,
-            temperature=0.9,
-        )
-        content = resp.choices[0].message.content
-        return re.sub(r"<think>.*?</think>", "", content, flags=re.DOTALL).strip()
-    except Exception as e:
-        return f"[Error: {e}]"
+def _rebuild_feed() -> str:
+    songs = []
+    songs_dir = "/data/songs"
+    if os.path.isdir(songs_dir):
+        for song_id in os.listdir(songs_dir):
+            meta_path = os.path.join(songs_dir, song_id, "meta.json")
+            if os.path.isfile(meta_path):
+                try:
+                    with open(meta_path) as f:
+                        meta = json.load(f)
+                    meta["audio_url"] = f"{BUCKET_URL}/songs/{song_id}/{song_id}.wav"
+                    if meta.get("has_thumb"):
+                        meta["thumb_url"] = f"{BUCKET_URL}/songs/{song_id}/thumb.png"
+                    songs.append(meta)
+                except Exception:
+                    pass
+    songs.sort(key=lambda s: s.get("created_at", ""), reverse=True)
+    return json.dumps(songs[:32])
+
+def _invalidate_feed():
+    """Call after uploading a new song to bust the cache."""
+    _feed_cache["ts"] = 0
+
+@app.api(name="community", concurrency_limit=4)
+def community() -> str:
+    """List community songs from the bucket. Cached for 10s."""
+    now = _time.monotonic()
+    if now - _feed_cache["ts"] > _FEED_TTL:
+        _feed_cache["data"] = _rebuild_feed()
+        _feed_cache["ts"] = now
+    return _feed_cache["data"]
 
 
 # ── Serve custom HTML frontend ────────────────────────────────────────────────
@@ -189,7 +451,6 @@ async def homepage():
         return f.read()
 
 
-# Required by HF Spaces runtime
 demo = app
 
 if __name__ == "__main__":

index.html

@@ -3,813 +3,657 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>ACE-Step Studio</title>
+  <title>ace-step-jam</title>
   <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600&display=swap" rel="stylesheet" />
   <style>
-    /* ── Reset & Variables ────────────────────────────────────────────────── */
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
     :root {
-      --bg:          #080808;
-      --surface:     #111111;
-      --surface-2:   #1a1a1a;
-      --surface-3:   #222222;
-      --border:      #282828;
-      --accent:      #7c6aff;
-      --accent-dim:  #5a4dcc;
-      --accent-glow: rgba(124, 106, 255, 0.2);
-      --wave:        #7c6aff;
-      --progress:    #4dff91;
-      --text:        #e8e8e8;
-      --text-muted:  #555;
-      --text-faint:  #333;
-      --error:       #ff4d4d;
-      --success:     #4dff91;
-      --radius:      10px;
-      --radius-lg:   14px;
-      --font:        'Inter', system-ui, sans-serif;
+      --bg:          oklch(0.13 0.006 260);
+      --surface:     rgba(255, 255, 255, 0.04);
+      --surface-2:   rgba(255, 255, 255, 0.06);
+      --surface-3:   rgba(255, 255, 255, 0.09);
+      --border:      rgba(255, 255, 255, 0.08);
+      --accent:      oklch(0.90 0.005 260);
+      --accent-dim:  oklch(0.40 0.005 260);
+      --accent-glow: rgba(255, 255, 255, 0.08);
+      --progress:    oklch(0.72 0.14 155);
+      --text:        rgba(255, 255, 255, 0.87);
+      --text-muted:  rgba(255, 255, 255, 0.40);
+      --text-faint:  rgba(255, 255, 255, 0.25);
+      --error:       oklch(0.68 0.19 22);
+      --success:     oklch(0.72 0.14 155);
+      --radius:      8px;
+      --radius-lg:   10px;
+      --font:        'Hanken Grotesk', system-ui, sans-serif;
     }
 
     html, body {
-      height: 100%;
-      background: var(--bg);
-      color: var(--text);
-      font-family: var(--font);
-      font-size: 14px;
-      line-height: 1.5;
+      height: 100%; background: var(--bg); color: var(--text);
+      font-family: var(--font); font-size: 13.5px; line-height: 1.5;
       -webkit-font-smoothing: antialiased;
     }
 
-    /* ── Layout ───────────────────────────────────────────────────────────── */
-    body {
-      display: flex;
-      flex-direction: column;
-      min-height: 100vh;
-    }
+    body { display: flex; flex-direction: column; min-height: 100vh; }
 
-    .container {
-      width: 100%;
-      max-width: 720px;
-      margin: 0 auto;
-      padding: 0 20px;
-    }
+    /* ── Layout ───────────────────────────────────────────────────────────── */
+    .page { display: flex; flex: 1; max-width: 1100px; width: 100%; margin: 0 auto; padding: 28px 20px 0; gap: 20px; align-items: flex-start; }
+    .col-left { flex: 1; min-width: 0; max-width: 480px; position: sticky; top: 28px; background: var(--bg); }
+    .col-right { flex: 1; min-width: 0; }
 
     /* ── Header ───────────────────────────────────────────────────────────── */
-    header {
-      padding: 36px 0 28px;
-      text-align: center;
-    }
-
-    .wordmark {
-      display: inline-flex;
-      align-items: center;
-      gap: 10px;
-      margin-bottom: 8px;
+    header { padding: 0 0 20px; text-align: left; }
+    .wordmark { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 4px; }
+    .wordmark-logo {
+      height: 21px; width: auto; color: var(--text); flex-shrink: 0;
+    }
+    .version {
+      font-family: ui-monospace, 'SF Mono', monospace;
+      font-size: 10px; font-weight: 500; letter-spacing: 0.03em;
+      color: var(--text); border: 1px solid var(--border);
+      border-radius: 4px; padding: 1px 5px;
+      text-decoration: none; transition: border-color 0.15s, color 0.15s;
+    }
+    .version:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.15); }
+    header p { font-size: 14px; color: var(--text-muted); }
+
+    /* ── Compose box ─────────────────────────────────────────────────────── */
+    .compose-box {
+      background: var(--surface); border: 1px solid var(--border);
+      border-radius: var(--radius-lg); margin-bottom: 10px;
+      transition: border-color 0.15s;
     }
-
-    .wordmark-icon {
-      width: 28px;
-      height: 28px;
-      background: var(--accent);
-      border-radius: 8px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 15px;
-      box-shadow: 0 0 18px var(--accent-glow);
+    .compose-box:focus-within { border-color: rgba(255, 255, 255, 0.14); }
+    .compose-box #description-input {
+      background: transparent; border: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+      padding: 14px 14px 6px; height: 80px;
     }
-
-    .wordmark-text {
-      font-size: 20px;
-      font-weight: 600;
-      letter-spacing: -0.02em;
-      color: var(--text);
+    .compose-box #description-input:focus,
+    .compose-box #description-input:focus-visible { border: none; outline: none; }
+    .compose-controls {
+      display: flex; gap: 4px; padding: 4px 10px 10px;
+      align-items: center; flex-wrap: wrap;
     }
-
-    .wordmark-text span {
-      color: var(--accent);
+    .compose-controls .pill {
+      background: transparent; border: none; padding: 4px 8px;
+      font-size: 11px; border-radius: 6px;
     }
-
-    header p {
-      font-size: 13px;
-      color: var(--text-muted);
-      letter-spacing: 0.01em;
+    .compose-controls .pill:hover { background: var(--surface-2); }
+    .compose-controls .pill select { font-size: 11px; min-width: 44px; background: transparent; border: none; }
+    .compose-controls .pill input[type="checkbox"] { width: 11px; height: 11px; }
+    .compose-controls .seed-input {
+      width: 48px !important; font-size: 11px !important; padding: 3px 6px !important;
+      background: transparent !important; border-radius: 6px !important;
     }
-
-    /* ── Cards ────────────────────────────────────────────────────────────── */
-    .card {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-lg);
-      padding: 18px;
-      margin-bottom: 12px;
-    }
-
-    .card-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: 10px;
-    }
-
-    .card-label {
-      font-size: 11px;
-      font-weight: 500;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-      color: var(--text-muted);
+    .compose-controls .generate-btn {
+      width: auto; padding: 5px 14px; font-size: 12px;
+      border-radius: 6px; letter-spacing: 0;
     }
 
     /* ── Inputs ───────────────────────────────────────────────────────────── */
-    textarea, input[type="text"], input[type="number"] {
-      width: 100%;
-      background: var(--surface-2);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      color: var(--text);
-      font-family: var(--font);
-      font-size: 14px;
-      padding: 10px 12px;
-      resize: none;
-      outline: none;
+    textarea, input[type="text"], input[type="number"], select {
+      width: 100%; background: var(--surface-2); border: 1px solid var(--border);
+      border-radius: var(--radius); color: var(--text); font-family: var(--font);
+      font-size: 13.5px; padding: 9px 11px; outline: none; transition: border-color 0.15s;
+    }
+    textarea:focus, input:focus, select:focus { border-color: rgba(255, 255, 255, 0.18); }
+    textarea:focus-visible, input:focus-visible, select:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.08); outline-offset: 1px; }
+    textarea::placeholder, input::placeholder { color: var(--text-faint); }
+    textarea { resize: none; }
+
+    #description-input { height: 76px; font-size: 14px; }
+    .prompt-hint { margin-top: 6px; font-size: 11px; color: var(--text-faint); }
+
+    /* ── Controls row ─────────────────────────────────────────────────────── */
+    .controls-row { display: flex; gap: 6px; margin-bottom: 10px; align-items: center; flex-wrap: wrap; }
+
+    .pill {
+      display: inline-flex; align-items: center; gap: 5px;
+      font-size: 12px; color: var(--text-muted); cursor: pointer; user-select: none;
+      background: var(--surface); border: 1px solid var(--border);
+      border-radius: var(--radius); padding: 6px 10px; white-space: nowrap;
       transition: border-color 0.15s;
     }
+    .pill:hover { border-color: rgba(255, 255, 255, 0.12); }
+    .pill input[type="checkbox"] { width: 12px; height: 12px; accent-color: var(--accent); cursor: pointer; }
+    .pill:has(input:checked) span { color: var(--text); }
+    .pill select { background: transparent; border: none; color: var(--text); font-size: 12px; padding: 0; min-width: 56px; }
 
-    textarea:focus, input[type="text"]:focus, input[type="number"]:focus {
-      border-color: rgba(124, 106, 255, 0.5);
-    }
-
-    textarea::placeholder, input::placeholder {
-      color: var(--text-faint);
-    }
-
-    #prompt-input {
-      height: 60px;
-      font-size: 14px;
-    }
-
-    #lyrics-input {
-      height: 180px;
-      font-family: 'Courier New', monospace;
-      font-size: 13px;
-      line-height: 1.7;
-    }
-
-    .lyrics-hint {
-      margin-top: 7px;
-      font-size: 11px;
-      color: var(--text-muted);
-    }
-
-    .lyrics-hint code {
-      background: var(--surface-3);
-      border-radius: 4px;
-      padding: 1px 5px;
-      color: var(--accent);
-      font-size: 11px;
-    }
-
-    /* ── Inspire button (inline) ──────────────────────────────────────────── */
-    .inspire-btn {
-      display: inline-flex;
-      align-items: center;
-      gap: 5px;
-      background: transparent;
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      color: var(--text-muted);
-      font-family: var(--font);
-      font-size: 12px;
-      font-weight: 500;
-      padding: 5px 10px;
-      cursor: pointer;
-      transition: color 0.15s, border-color 0.15s;
-      white-space: nowrap;
-    }
-
-    .inspire-btn:hover:not(:disabled) {
-      color: var(--accent);
-      border-color: rgba(124, 106, 255, 0.4);
-    }
-
-    .inspire-btn:disabled {
-      opacity: 0.4;
-      cursor: not-allowed;
-    }
+    .seed-input { width: 72px !important; font-size: 12px !important; padding: 6px 8px !important; }
+    .spacer { flex: 1; }
 
     /* ── Generate button ──────────────────────────────────────────────────── */
     .generate-btn {
-      width: 100%;
-      background: var(--accent);
-      border: none;
-      border-radius: var(--radius);
-      color: #fff;
-      font-family: var(--font);
-      font-size: 15px;
-      font-weight: 600;
-      padding: 14px;
-      cursor: pointer;
-      letter-spacing: 0.01em;
-      transition: box-shadow 0.2s, transform 0.1s, background 0.15s;
-      box-shadow: 0 0 24px var(--accent-glow);
-      margin-bottom: 12px;
-    }
-
-    .generate-btn:hover:not(:disabled) {
-      box-shadow: 0 0 40px rgba(124, 106, 255, 0.35);
-    }
-
-    .generate-btn:active:not(:disabled) {
-      transform: scale(0.99);
-    }
-
-    .generate-btn:disabled {
-      background: var(--accent-dim);
-      cursor: not-allowed;
-      box-shadow: none;
-    }
-
-    .generate-btn.loading {
-      animation: pulse-glow 1.5s ease-in-out infinite;
-    }
-
-    @keyframes pulse-glow {
-      0%, 100% { box-shadow: 0 0 24px var(--accent-glow); }
-      50%       { box-shadow: 0 0 48px rgba(124, 106, 255, 0.45); }
-    }
-
-    /* ── Advanced section ─────────────────────────────────────────────────── */
-    details {
-      margin-bottom: 12px;
-    }
-
-    details summary {
-      list-style: none;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      font-size: 12px;
-      font-weight: 500;
-      color: var(--text-muted);
-      padding: 8px 0;
-      user-select: none;
-      letter-spacing: 0.03em;
-      outline: none;
-    }
-
-    details summary::-webkit-details-marker { display: none; }
-
-    details summary::before {
-      content: '›';
-      font-size: 16px;
-      line-height: 1;
-      transition: transform 0.2s;
-      display: inline-block;
-      color: var(--text-faint);
-    }
-
-    details[open] summary::before {
-      transform: rotate(90deg);
-    }
-
-    details[open] summary {
-      color: var(--text);
-    }
-
-    .advanced-grid {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 14px;
-      padding: 14px;
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-lg);
-    }
-
-    .field-group {
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
-    }
-
-    .field-group.full-width {
-      grid-column: 1 / -1;
-    }
-
-    .field-label {
-      font-size: 11px;
-      font-weight: 500;
-      color: var(--text-muted);
-      letter-spacing: 0.05em;
-      text-transform: uppercase;
-    }
-
-    .field-row {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-
-    input[type="range"] {
-      flex: 1;
-      -webkit-appearance: none;
-      height: 4px;
-      background: var(--surface-3);
-      border-radius: 2px;
-      outline: none;
-      border: none;
-    }
-
-    input[type="range"]::-webkit-slider-thumb {
-      -webkit-appearance: none;
-      width: 14px;
-      height: 14px;
-      background: var(--accent);
-      border-radius: 50%;
-      cursor: pointer;
-      box-shadow: 0 0 8px var(--accent-glow);
-    }
-
-    .range-value {
-      font-size: 12px;
-      color: var(--text);
-      min-width: 36px;
-      text-align: right;
-      font-variant-numeric: tabular-nums;
-    }
-
-    input[type="number"] {
-      width: 100%;
-    }
-
-    input[type="text"] {
-      width: 100%;
-    }
-
-    /* ── Output section ───────────────────────────────────────────────────── */
-    .output-section {
-      margin-bottom: 32px;
-    }
-
+      width: 100%; background: var(--accent); border: none;
+      border-radius: var(--radius); color: oklch(0.13 0.006 260); font-family: var(--font);
+      font-size: 14px; font-weight: 600; padding: 11px; cursor: pointer;
+      transition: opacity 0.15s, transform 0.1s; letter-spacing: -0.01em;
+    }
+    .generate-btn:hover:not(:disabled) { opacity: 0.88; }
+    .generate-btn:active:not(:disabled) { transform: scale(0.99); }
+    .generate-btn:disabled { background: var(--accent-dim); cursor: not-allowed; opacity: 0.5; }
+    .generate-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+    .generate-btn.loading { animation: btn-pulse 2s ease-in-out infinite; }
+    @keyframes btn-pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.7; }
+    }
+
+    /* ── Status ───────────────────────────────────────────────────────────── */
+    .status-bar { font-size: 11.5px; color: var(--text-muted); text-align: center; padding: 0; min-height: 0; display: none; }
+    .status-bar.error { display: block; color: var(--error); padding: 6px 0; }
+    .status-bar.success { display: none; }
+
+    /* ── Output card ──────────────────────────────────────────────────────── */
     .output-card {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-lg);
-      padding: 20px;
-      animation: fade-in 0.3s ease;
-    }
-
-    @keyframes fade-in {
-      from { opacity: 0; transform: translateY(8px); }
-      to   { opacity: 1; transform: translateY(0); }
+      background: var(--surface); border: 1px solid var(--border);
+      border-radius: var(--radius-lg); padding: 14px; margin-bottom: 10px;
+      animation: fade-in 0.25s ease;
     }
+    @keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
 
     #waveform {
-      background: var(--surface-2);
-      border-radius: var(--radius);
-      overflow: hidden;
-      cursor: pointer;
-      margin-bottom: 14px;
+      display: flex; align-items: end; gap: 1px; height: 56px;
+      background: var(--surface-2); border-radius: var(--radius);
+      padding: 8px 10px; cursor: pointer; margin-bottom: 10px;
     }
-
-    .playback-controls {
-      display: flex;
-      align-items: center;
-      gap: 14px;
+    #waveform .bar {
+      flex: 1; background: var(--text-faint); border-radius: 1px;
+      transition: background 0.15s;
     }
-
+    .playback-controls { display: flex; align-items: center; gap: 10px; }
     .play-btn {
-      width: 36px;
-      height: 36px;
-      background: var(--accent);
-      border: none;
-      border-radius: 50%;
-      color: #fff;
-      font-size: 14px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      transition: box-shadow 0.15s, transform 0.1s;
-      box-shadow: 0 0 14px var(--accent-glow);
+      width: 30px; height: 30px; background: var(--accent); border: none;
+      border-radius: 50%; color: oklch(0.13 0.006 260); font-size: 12px; cursor: pointer;
+      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+      transition: opacity 0.15s;
+    }
+    .play-btn:hover { opacity: 0.85; }
+    .play-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+    .time-display { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; flex: 1; }
+    .download-btn {
+      display: inline-flex; align-items: center; gap: 4px; background: transparent;
+      border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted);
+      text-decoration: none; font-family: var(--font); font-size: 11px;
+      font-weight: 500; padding: 4px 9px; transition: border-color 0.15s, color 0.15s;
+    }
+    .download-btn:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.15); }
+    .download-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+
+    /* ── Community feed ───────────────────────────────────────────────────── */
+    .feed-header {
+      font-size: 11px; font-weight: 600; color: var(--text-muted);
+      text-transform: uppercase; letter-spacing: 0.06em;
+      margin-bottom: 10px;
     }
+    .feed-empty { font-size: 12px; color: var(--text-faint); text-align: center; padding: 32px 0; }
 
-    .play-btn:hover { box-shadow: 0 0 22px rgba(124, 106, 255, 0.4); }
-    .play-btn:active { transform: scale(0.95); }
-
-    .time-display {
-      font-size: 12px;
-      color: var(--text-muted);
-      font-variant-numeric: tabular-nums;
-      flex: 1;
+    .song-card {
+      background: transparent; border: 1px solid transparent;
+      border-radius: var(--radius); padding: 8px 10px; margin-bottom: 6px;
+      cursor: pointer; transition: background 0.15s;
     }
+    .song-card:hover { background: var(--surface); }
+    .song-card.playing { background: var(--surface); }
 
-    .download-btn {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      background: transparent;
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      color: var(--text-muted);
-      text-decoration: none;
-      font-family: var(--font);
-      font-size: 12px;
-      font-weight: 500;
-      padding: 6px 12px;
-      transition: color 0.15s, border-color 0.15s;
+    .song-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
+    .song-play-btn {
+      width: 26px; height: 26px; background: var(--surface-3); border: 1px solid var(--border);
+      border-radius: 50%; color: var(--text-muted); font-size: 10px; cursor: pointer;
+      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+      transition: background 0.15s, color 0.15s, border-color 0.15s;
     }
+    .song-play-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+    .song-card:hover .song-play-btn { background: rgba(255, 255, 255, 0.08); color: var(--text); border-color: rgba(255, 255, 255, 0.12); }
+    .song-card.playing .song-play-btn { background: var(--accent); color: oklch(0.13 0.006 260); border-color: var(--accent); }
+    .song-title { font-size: 13px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .song-tags { font-size: 11px; color: var(--text-muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
+    .song-duration { font-size: 11px; color: var(--text-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; margin-left: 8px; }
 
-    .download-btn:hover {
-      color: var(--text);
-      border-color: rgba(255,255,255,0.2);
+    /* ── Placeholder (loading state) ──────────────────────────────────────── */
+    .placeholder-card {
+      background: var(--surface); border: 1px solid rgba(255, 255, 255, 0.12);
+      border-radius: var(--radius-lg); padding: 14px;
+      margin-bottom: 10px; animation: fade-in 0.25s ease;
     }
+    .placeholder-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
+    .placeholder-sub { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; }
 
-    /* ── Status bar ───────────────────────────────────────────────────────── */
-    .status-bar {
-      font-size: 12px;
-      color: var(--text-muted);
-      text-align: center;
-      padding: 8px 0;
-      min-height: 30px;
-      transition: color 0.2s;
+    .fake-waveform {
+      display: flex; align-items: end; gap: 2px; height: 44px;
+      background: var(--surface-2); border-radius: var(--radius); padding: 8px 10px;
     }
-
-    .status-bar.error {
-      color: var(--error);
+    .fake-waveform .bar {
+      flex: 1; background: var(--accent); border-radius: 1px; opacity: 0.3;
+      animation: wave-pulse 1.2s ease-in-out infinite;
     }
-
-    .status-bar.success {
-      color: var(--success);
+    @keyframes wave-pulse {
+      0%, 100% { transform: scaleY(0.3); opacity: 0.15; }
+      50% { transform: scaleY(1); opacity: 0.4; }
     }
 
-    /* ── Footer ───────────────────────────────────────────────────────────── */
-    footer {
-      margin-top: auto;
-      padding: 20px 0;
-      text-align: center;
-      font-size: 11px;
-      color: var(--text-faint);
+    /* ── Mini waveform ────────────────────────────────────────────────────── */
+    .mini-waveform {
+      display: flex; align-items: end; gap: 1px; height: 22px; margin-top: 5px;
+      cursor: pointer;
     }
-
-    footer a {
-      color: var(--text-muted);
-      text-decoration: none;
+    .mini-waveform .bar {
+      flex: 1; background: var(--text-faint); border-radius: 1px;
+      transition: background 0.2s;
     }
-
-    footer a:hover { color: var(--text); }
+    .song-card.playing .mini-waveform .bar { background: var(--accent); }
+    .song-card:hover .mini-waveform .bar { background: rgba(255, 255, 255, 0.22); }
 
     /* ── Spinner ──────────────────────────────────────────────────────────── */
     .spinner {
-      display: inline-block;
-      width: 12px;
-      height: 12px;
-      border: 2px solid rgba(255,255,255,0.15);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: spin 0.7s linear infinite;
-      vertical-align: middle;
+      display: inline-block; width: 12px; height: 12px;
+      border: 2px solid rgba(0, 0, 0, 0.12); border-top-color: oklch(0.13 0.006 260);
+      border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle;
     }
+    @keyframes spin { to { transform: rotate(360deg); } }
 
-    @keyframes spin {
-      to { transform: rotate(360deg); }
-    }
+    /* ── Footer ───────────────────────────────────────────────────────────── */
+    footer { padding: 20px; text-align: center; font-size: 11px; color: var(--text-faint); }
+    footer a { color: var(--text-muted); text-decoration: none; }
+    footer a:hover { color: var(--text); }
 
     /* ── Mobile ───────────────────────────────────────────────────────────── */
-    @media (max-width: 540px) {
-      .advanced-grid { grid-template-columns: 1fr; }
-      .field-group.full-width { grid-column: 1; }
-      header { padding: 24px 0 20px; }
+    .share-label-short { display: none; }
+    @media (max-width: 800px) {
+      .page { flex-direction: column; padding: 20px 16px 0; gap: 16px; }
+      .col-left, .col-right { max-width: none; width: 100%; }
+      .song-card-top .song-tags { display: none; }
+      .controls-row { gap: 5px; }
+      .seed-input { width: 60px !important; }
+      .share-label-full { display: none; }
+      .share-label-short { display: inline; }
     }
   </style>
 </head>
 <body>
 
-  <div class="container">
+  <div class="page">
 
-    <!-- Header -->
-    <header>
-      <div class="wordmark">
-        <div class="wordmark-icon">♪</div>
-        <div class="wordmark-text">ACE<span>-Step</span> Studio</div>
-      </div>
-      <p>Turbo music generation · 8 steps · ~2s for 60s of audio</p>
-    </header>
-
-    <!-- Style / Tags card -->
-    <div class="card">
-      <div class="card-header">
-        <span class="card-label">Style &amp; Tags</span>
-        <button class="inspire-btn" id="inspire-btn">✨ Inspire me</button>
-      </div>
-      <textarea
-        id="prompt-input"
-        placeholder="lo-fi, chill, jazzy piano, female vocals, rain ambiance..."
-      ></textarea>
-    </div>
-
-    <!-- Lyrics card -->
-    <div class="card">
-      <div class="card-header">
-        <span class="card-label">Lyrics</span>
-      </div>
-      <textarea
-        id="lyrics-input"
-        placeholder="[verse]&#10;Write your verse lyrics here...&#10;&#10;[chorus]&#10;Your chorus goes here...&#10;&#10;[bridge]&#10;Optional bridge..."
-      ></textarea>
-      <p class="lyrics-hint">
-        Use <code>[verse]</code> <code>[chorus]</code> <code>[bridge]</code> section markers
-      </p>
-    </div>
+    <!-- ════ LEFT: Create ════ -->
+    <div class="col-left">
 
-    <!-- Generate button -->
-    <button class="generate-btn" id="generate-btn">Generate</button>
-
-    <!-- Status bar -->
-    <div class="status-bar" id="status-bar"></div>
-
-    <!-- Advanced options -->
-    <details id="advanced-details">
-      <summary>Advanced Options</summary>
-      <div class="advanced-grid">
-
-        <div class="field-group">
-          <span class="field-label">Duration (seconds)</span>
-          <div class="field-row">
-            <input type="range" id="duration-slider" min="10" max="240" step="5" value="60" />
-            <span class="range-value" id="duration-value">60s</span>
-          </div>
+      <header>
+        <div class="wordmark">
+          <svg class="wordmark-logo" viewBox="0 0 1357 390" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M429.554 121.056c25.685-2.701 56.59 8.361 65.05 35.015 6.4 20.237-1.839 45.271-23.479 51.909-10.535 3.243-26.295 1.729-29.56-10.892-1.465-7.657 4.81-15.286 7.43-22.246 2.915-7.759 2.54-20.084-5.83-24.234-12.865-6.234-25.751 10.698-30.446 20.741-11.515 24.623-18.194 66.318-9.654 92.045 15.96 48.099 79.485 21.441 93.715-13.469 1.85-4.537.905-13.069 1.885-18.054 4.24-45.958 30.43-90.954 75.74-106.514 34.455-11.835 78.87-.084 91.26 37.146 4.43 13.542 2.515 29.945-3.84 42.61-14.065 26.676-46.055 36.676-72.945 45.039-6.48 2.225-18.736 5.131-24.076 7.796q.107 1.334.326 2.656c5.275 31.502 38.935 36.362 64.115 25.899 23.91-9.935 38.415-24.933 53.5-45.365 5.055-5.088 11.455-3.266 11.695 4.253.285 5.284-2.34 10.701-4.915 15.32-17.715 31.762-47.551 61.527-83.131 71.447-37.425 10.435-79.034-3.97-97.779-38.678-1.09-2.018-3.645-8.147-5.085-9.36-3.25 2.494-10.835 11.736-14.61 15.398-18.56 17.995-38.876 31.53-64.996 34.715a81.2 81.2 0 0 1-60.209-16.81c-17.921-14.293-27.46-36.077-29.707-58.502-6.195-61.85 28.272-131.158 95.546-137.865m181.456 70.616c5.125-13.489 7.57-43.481-14.165-42.209-24.88 6.91-34.32 59.526-33.31 81.763 5.11-1.34 8.85-2.705 13.775-4.704 15.59-7.135 27.52-18.594 33.7-34.85"/><path fill="currentColor" d="M252.566 31.328c13.489.15 28.638-1.107 40.747 5.829 14.378 8.235 13.358 26.043 14.32 40.355l2.323 33.361 7.744 101.628c1.854 26.297 3.277 52.889 7.327 78.938 1.466 9.43 5.535 20.237 13.799 25.7 2.658 1.75 6.034 4.031 6.681 7.386 2.157 11.18-15.813 8.85-23.014 8.805l-27.869-.166q-14.718-.014-29.435.166c-5.378.055-19.803 1.139-23.314-1.986-6.732-6 9.234-15.974 10.313-24.989 2.273-19.001.231-40.745-1.328-59.509-7.726-2.792-16.639-4.369-24.684-6.138-13.149-2.89-26.221-5.506-39.576-7.317-26.129 49.575-50.203 122.044-116.567 125.219-30.024-.73-51.661-17.32-43.553-49.833 2.48-9.949 16.708-26.894 26.499-15.203 3.194 3.815.678 17.184 3.565 22.031 5.484 10.919 20.75 10.089 29.943 5.274 26.071-13.664 41.425-42.9 54.985-67.806 3.709-6.846 8.069-15.671 10.602-22.698q-2.555-.012-5.109.052c-19.691.564-40.684 9.808-55.07 23.351-4.01 3.776-11.3 15.404-16.445 15.651-6.447.31-8.223-6.662-8.054-12.163.398-13.022 6.724-26.658 16.043-35.764 23.204-21.692 54.274-24.541 84.477-24.073 13.373-27.212 25.61-57.864 37.877-85.805 6.466-14.728 13.866-31.519 18.076-47.027 1.006-3.702.114-6.804-.832-10.394-4.37-4.675-25.115-13.02-5.264-19.847 6.059-2.084 17.892-2.365 24.562-2.782 3.149-.28 7.046-.282 10.231-.246m-11.933 74.358c-2.056 2.836-4.866 10.582-6.357 14.227l-12.001 29.498c-7.084 17.143-15.606 35.261-22.304 52.253 4.745.982 9.285 1.633 14.067 2.339 10.719 1.694 23.779 4.18 34.381 4.855-.456-12.059-4.748-99.339-7.786-103.172M751.392 71.823c-.34-9.52 19.635-7.66 25.921-7.67l26.78-.04c12.231-.03 25.492-.374 37.717.53 1.879.316 5.482 1.365 6.766 2.88 6.272 7.415-6.264 12.926-9.123 19.746-2.577 6.15-3.914 8.925-4.523 15.455-1.488 15.925-1.144 31.855-1.169 47.79l-.324 68.059c-.121 34.375 1.189 67.59-24.984 94.135-36.711 37.23-117.356 35.785-141.56-15.145-4.124-8.675-4.715-18.09-4.655-27.495a47.1 47.1 0 0 1 10.969-26.95c12.532-14.62 37.444-18.11 52.064-4.965a27.12 27.12 0 0 1 8.988 19.43c.401 14.01-6.404 17.145-14.45 25.775-12.126 13.465 3.685 27.82 18.108 25.8 34.753-4.875 30.803-53.81 30.832-79.675l.022-51.27-.083-45.14c-.062-14.645 1.538-35.665-6.982-47.905-2.659-3.745-10.142-8.515-10.314-13.345m195.843-9.245c12.179.095 24.785 2.39 33.048 12.225 8.54 10.165 15.095 43.36 18.885 57.315a4784 4784 0 0 0 33.182 114.901c4.95 16.344 9.74 35.189 16.79 50.634 2.01 4.405 6.36 8.5 10.52 11.01 10.66-9.845 9.61-34.86 9.84-48.38.27-16.265.11-32.69.37-48.98.38-21.295.57-42.59.58-63.89.14-16.01 1.85-34.3-1.62-50.005-1.39-6.29-3.63-11.715-8.4-16.22-1.79-1.68-3.86-3.26-5.09-5.405-.93-1.605-1.16-3.165-.56-4.955.73-2.195 2.16-3.65 4.24-4.62 2.31-1.075 4.81-1.395 7.32-1.61 9.48-.82 64.09-1.63 70.82 1.13 3.59 1.476 7.11 3.465 9.04 6.985 4.07 7.45 7.19 22.705 9.93 31.675 6.89 22.14 13.89 44.245 21.01 66.305 1.7 5.266 9.36 32.903 12.28 34.155 3.93-2.421 13.66-31.838 16.01-38.289l22.7-63.086c2.97-8.45 8.02-25.404 12.63-32.664 6.54-10.29 38.43-5.77 50.05-6.66 7.74-.595 17.31.319 25.1.439 1.84.03 5.8 1.49 7.28 2.775 6.32 6.505-8.06 15.936-10.21 24.03-4.25 16.02-4 33.681-4.07 50.001-.21 46.014-.95 91.855.43 137.839.23 7.98.77 17.025 3.85 24.4 1.8 5.35 11.31 10.78 11.29 16.415-.04 8.814-19.17 6.56-23.92 6.53l-24.93-.05c-11.57.01-23.48.55-34.81.225-13.23-.37-10.68-8.34-3.9-15.13 6.19-6.2 7.38-12.235 8.82-20.59 1.49-12.225 1.48-27.015 1.52-39.31l.08-43.34c.01-4.711.82-35.563-1.29-36.875-3.11 1.92-5.99 12.945-7.48 16.735-2.81 7.115-5.56 14.42-8.26 21.59l-28.89 77.345c-3.79 10.19-7.2 20.715-11.81 30.535-4.6 9.945-21.68 7.62-26.25-.93-6.24-11.665-10.05-27.12-14.24-39.845l-25.75-78.195c-1.55-4.689-8.26-28.116-11.64-28.965-1.32 1.15-1.96 4.495-1.99 6.17-.75 34.63-.79 69.4-.67 104.045.03 11.2 1.09 22.405 9.76 30.435 1.59 1.63 5.91 5.895 6.31 8.04 2.11 11.404-22.14 8.28-29.52 8.205l-35.05-.27-61.452-.04c-7.77.02-15.615.57-23.372.37-2.238-.06-6.194.01-8.107-1.214-1.381-.885-2.384-2.471-2.7-4.071-.959-4.86 5.28-9.225 7.673-12.98 6.088-9.545.193-28.165-2.33-38.38-.971-3.935-2.246-9.53-6.087-11.63-6.617-3.62-51.072-4.499-59.105-2.185-2.513.725-3.717 2.395-4.872 4.63-4.31 8.35-10.534 31.55-9.323 40.77.252 1.92 1.094 3.74 2.121 5.365 2.362 3.735 7.774 6.501 8.939 10.775.49 1.8.036 3.635-.991 5.16-1.309 1.939-2.962 2.64-5.191 3.11-7.781 1.635-27.562.18-36.554.245-6.542.045-13.637 1.1-20.092.515-2.462-.225-5.183-.915-7.202-2.4-1.51-1.11-2.693-2.71-2.759-4.645-.174-5.1 6.625-9.225 9.585-12.93 3.854-4.82 6.477-10.545 8.774-16.23 13.148-32.555 23.034-66.76 34.557-99.94l20.711-60.995c3.423-10.25 7.955-21.985 9.888-32.605 3.471-8.28-9.124-18.955-9.128-22.945-.009-9.225 38.877-11.295 43.682-11.575m-9.769 79.41c-2.886 3.83-24.901 73.496-24.944 78.31 3.007 2.44 15.374 1.64 19.785 1.575 4.813 0 21.568 1.005 24.674-1.604.802-.676.618-3.005.565-3.965-.305-5.51-15.823-71.054-17.593-72.785-.732-.715-1.577-1.106-2.487-1.531"/></svg>
+          <a href="https://huggingface.co/ACE-Step/acestep-v15-xl-turbo" target="_blank" class="version">ACE-Step v1.5</a>
         </div>
-
-        <div class="field-group">
-          <span class="field-label">Seed (−1 = random)</span>
-          <input type="number" id="seed-input" value="-1" min="-1" max="2147483647" />
+        <p>Describe any song. AI writes &amp; produces it.</p>
+      </header>
+
+      <div class="compose-box">
+        <textarea id="description-input"
+          placeholder="A chill lo-fi track for studying, ninja battle anthem, love song about AI..."
+        ></textarea>
+        <div class="compose-controls">
+          <label class="pill">
+            <select id="duration-select">
+              <option value="30">30s</option>
+              <option value="60" selected>1 min</option>
+              <option value="120">2 min</option>
+              <option value="180">3 min</option>
+            </select>
+          </label>
+          <label class="pill"><input type="checkbox" id="instrumental-check" /><span>Instrumental</span></label>
+          <label class="pill"><input type="checkbox" id="community-check" checked /><span class="share-label-full">Share in community</span><span class="share-label-short">Share</span></label>
+          <span class="spacer"></span>
+          <button class="generate-btn" id="generate-btn">Generate</button>
         </div>
-
-        <div class="field-group full-width">
-          <span class="field-label">LoRA (HF repo ID or leave blank)</span>
-          <input type="text" id="lora-path-input" placeholder="e.g. ACE-Step/ACE-Step-v1-chinese-rap-LoRA" />
-        </div>
-
-        <div class="field-group">
-          <span class="field-label">LoRA Weight</span>
-          <div class="field-row">
-            <input type="range" id="lora-weight-slider" min="0" max="2" step="0.05" value="0.8" />
-            <span class="range-value" id="lora-weight-value">0.8</span>
-          </div>
-        </div>
-
       </div>
-    </details>
-
-    <!-- Output panel (hidden until generation completes) -->
-    <div class="output-section" id="output-section" style="display:none">
-      <div class="output-card">
-        <div id="waveform"></div>
-        <div class="playback-controls">
-          <button class="play-btn" id="play-btn" title="Play / Pause">▶</button>
-          <span class="time-display" id="time-display">0:00 / 0:00</span>
-          <a class="download-btn" id="download-btn" download="ace-step-output.wav">
-            ⬇ Download
-          </a>
+      <div class="status-bar" id="status-bar"></div>
+
+      <!-- Output -->
+      <div id="output-section" style="display:none">
+        <div class="output-card">
+          <div style="display:flex;gap:10px;margin-bottom:8px;">
+            <img id="song-thumb" style="width:48px;height:48px;border-radius:6px;object-fit:cover;display:none;" />
+            <div style="min-width:0;flex:1;">
+              <div id="song-title" style="font-size:13px;font-weight:600;margin-bottom:3px;"></div>
+              <div id="song-tags" style="font-size:11px;color:var(--text-muted);"></div>
+            </div>
+          </div>
+          <div id="waveform"></div>
+          <div class="playback-controls">
+            <button class="play-btn" id="play-btn" title="Play / Pause">▶</button>
+            <span class="time-display" id="time-display">0:00 / 0:00</span>
+            <a class="download-btn" id="download-btn" download="output.wav">⬇ Download</a>
+          </div>
         </div>
       </div>
+
+    </div>
+
+    <!-- ════ RIGHT: Community feed ════ -->
+    <div class="col-right">
+      <div class="feed-header">Community Songs</div>
+      <div id="feed"></div>
     </div>
 
-  </div><!-- /.container -->
+  </div>
 
   <footer>
-    <div class="container">
-      Powered by <a href="https://github.com/ace-step/ACE-Step" target="_blank">ACE-Step</a>
-      ·
-      <a href="https://huggingface.co/ACE-Step/acestep-v15-xl-turbo" target="_blank">Model card</a>
-    </div>
+    Powered by <a href="https://github.com/ace-step/ACE-Step" target="_blank">ACE-Step</a> ·
+    <a href="https://huggingface.co/ACE-Step/acestep-v15-xl-turbo" target="_blank">Model card</a>
   </footer>
 
   <script type="module">
-    // ── ZeroGPU auth handshake ─────────────────────────────────────────────────
-    // Without this, requests in the HF iframe are treated as anonymous (2 min GPU
-    // quota instead of 25 min for logged-in users), causing generation to fail.
+    // ── ZeroGPU auth ──────────────────────────────────────────────────────────
     const ZEROGPU_HEADERS_MSG = "supports-zerogpu-headers";
-    window.addEventListener("message", (event) => {
-      if (event.data === ZEROGPU_HEADERS_MSG) {
-        window.supports_zerogpu_headers = true;
-      }
-    });
+    window.addEventListener("message", (e) => { if (e.data === ZEROGPU_HEADERS_MSG) window.supports_zerogpu_headers = true; });
     const _hn = window.location.hostname;
     if (_hn.endsWith(".hf.space") || _hn.includes(".dev.")) {
-      const _origin = _hn.includes(".dev.")
-        ? `https://moon-${_hn.split(".")[1]}.dev.spaces.huggingface.tech`
-        : "https://huggingface.co";
-      window.parent.postMessage(ZEROGPU_HEADERS_MSG, _origin);
+      const _o = _hn.includes(".dev.") ? `https://moon-${_hn.split(".")[1]}.dev.spaces.huggingface.tech` : "https://huggingface.co";
+      window.parent.postMessage(ZEROGPU_HEADERS_MSG, _o);
     }
-    // ──────────────────────────────────────────────────────────────────────────
 
     import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client@1.15.2/dist/index.min.js";
-    import WaveSurfer from "https://cdn.jsdelivr.net/npm/wavesurfer.js@7.10.0/dist/wavesurfer.esm.js";
+    // WaveSurfer removed — using lightweight bar waveform with real audio peaks
 
-    // ── DOM refs ─────────────────────────────────────────────────────────────
-    const promptInput     = document.getElementById("prompt-input");
-    const lyricsInput     = document.getElementById("lyrics-input");
+    // ── DOM ──────────────────────────────────────────────────────────────────
+    const descInput       = document.getElementById("description-input");
+    const durationSelect  = document.getElementById("duration-select");
+    const instrumentalChk = document.getElementById("instrumental-check");
+    const communityChk    = document.getElementById("community-check");
     const generateBtn     = document.getElementById("generate-btn");
-    const inspireBtn      = document.getElementById("inspire-btn");
     const statusBar       = document.getElementById("status-bar");
     const outputSection   = document.getElementById("output-section");
+    const songTitleEl     = document.getElementById("song-title");
+    const songTagsEl      = document.getElementById("song-tags");
     const playBtn         = document.getElementById("play-btn");
     const timeDisplay     = document.getElementById("time-display");
     const downloadBtn     = document.getElementById("download-btn");
-    const durationSlider  = document.getElementById("duration-slider");
-    const durationValue   = document.getElementById("duration-value");
-    const loraWeightSlider = document.getElementById("lora-weight-slider");
-    const loraWeightValue  = document.getElementById("lora-weight-value");
-    const loraPathInput   = document.getElementById("lora-path-input");
-    const seedInput       = document.getElementById("seed-input");
-
-    // ── Slider live-value display ────────────────────────────────────────────
-    durationSlider.addEventListener("input", () => {
-      durationValue.textContent = `${durationSlider.value}s`;
-    });
-    loraWeightSlider.addEventListener("input", () => {
-      loraWeightValue.textContent = parseFloat(loraWeightSlider.value).toFixed(2);
-    });
+    const feedEl          = document.getElementById("feed");
 
-    // ── WaveSurfer init ──────────────────────────────────────────────────────
-    const ws = WaveSurfer.create({
-      container:      "#waveform",
-      waveColor:      "#7c6aff",
-      progressColor:  "#4dff91",
-      cursorColor:    "rgba(255,255,255,0.15)",
-      barWidth:       2,
-      barGap:         1,
-      barRadius:      2,
-      height:         80,
-      normalize:      true,
-      backend:        "WebAudio",
-    });
-
-    ws.on("play",  () => { playBtn.textContent = "⏸"; });
-    ws.on("pause", () => { playBtn.textContent = "▶"; });
-    ws.on("finish",() => { playBtn.textContent = "▶"; });
-    ws.on("audioprocess", updateTime);
-    ws.on("ready", updateTime);
-
-    playBtn.addEventListener("click", () => ws.playPause());
+    // ── Main player (plain Audio + bar waveform) ─────────────────────────────
+    const mainAudio = new Audio();
+    const waveformEl = document.getElementById("waveform");
 
+    function fmt(s) { return `${Math.floor(s/60)}:${Math.floor(s%60).toString().padStart(2,"0")}`; }
     function updateTime() {
-      const cur = ws.getCurrentTime();
-      const dur = ws.getDuration();
-      timeDisplay.textContent = `${fmt(cur)} / ${fmt(dur)}`;
-    }
-
-    function fmt(secs) {
-      const m = Math.floor(secs / 60);
-      const s = Math.floor(secs % 60).toString().padStart(2, "0");
-      return `${m}:${s}`;
-    }
+      const c = mainAudio.currentTime || 0, d = mainAudio.duration || 0;
+      timeDisplay.textContent = `${fmt(c)} / ${fmt(d)}`;
+    }
+    function updateMainProgress() {
+      if (mainAudio.paused && mainAudio.currentTime === 0) return;
+      const pct = mainAudio.duration ? mainAudio.currentTime / mainAudio.duration : 0;
+      waveformEl.querySelectorAll(".bar").forEach((b, i, arr) => {
+        b.style.background = (i / arr.length) <= pct ? "var(--accent)" : "";
+      });
+      updateTime();
+      if (!mainAudio.paused) requestAnimationFrame(updateMainProgress);
+    }
+    mainAudio.addEventListener("play", () => { playBtn.textContent = "⏸"; requestAnimationFrame(updateMainProgress); });
+    mainAudio.addEventListener("pause", () => { playBtn.textContent = "▶"; });
+    mainAudio.addEventListener("ended", () => { playBtn.textContent = "▶"; waveformEl.querySelectorAll(".bar").forEach(b => b.style.background = ""); });
+    mainAudio.addEventListener("timeupdate", updateTime);
+
+    playBtn.addEventListener("click", () => { stopFeedAudio(); mainAudio.paused ? mainAudio.play() : mainAudio.pause(); });
+
+    waveformEl.addEventListener("click", (e) => {
+      const rect = waveformEl.getBoundingClientRect();
+      const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+      if (mainAudio.duration) {
+        stopFeedAudio();
+        mainAudio.currentTime = mainAudio.duration * ratio;
+        if (mainAudio.paused) mainAudio.play();
+        requestAnimationFrame(updateMainProgress);
+      }
+    });
 
-    // ── Gradio client (connects to THIS Space's origin) ──────────────────────
+    // ── Gradio client ───────────────────────────────────────────────────────
     let gradioClient = null;
-
     async function getClient() {
-      if (!gradioClient) {
-        gradioClient = await Client.connect(window.location.origin);
-      }
+      if (!gradioClient) gradioClient = await Client.connect(window.location.origin);
       return gradioClient;
     }
 
-    // ── UI state management ──────────────────────────────────────────────────
-    function setUIState(state) {
-      if (state === "loading") {
-        generateBtn.disabled = true;
-        generateBtn.textContent = "";
-        generateBtn.innerHTML = '<span class="spinner"></span> Generating…';
-        generateBtn.classList.add("loading");
-        inspireBtn.disabled = true;
-      } else {
-        generateBtn.disabled = false;
-        generateBtn.textContent = "Generate";
-        generateBtn.classList.remove("loading");
-        inspireBtn.disabled = false;
-      }
+    // ── UI helpers ──────────────────────────────────────────────────────────
+    function setLoading(on) {
+      generateBtn.disabled = on;
+      if (on) { generateBtn.innerHTML = '<span class="spinner"></span> Creating…'; generateBtn.classList.add("loading"); }
+      else    { generateBtn.textContent = "Generate"; generateBtn.classList.remove("loading"); }
     }
-
     function setStatus(msg, type = "") {
       statusBar.textContent = msg;
       statusBar.className = "status-bar" + (type ? ` ${type}` : "");
     }
 
-    function clearStatus() {
-      statusBar.textContent = "";
-      statusBar.className = "status-bar";
-    }
-
-    // ── Load audio into WaveSurfer ───────────────────────────────────────────
-    async function loadAudio(fileData) {
-      // Gradio returns { url: "...", ... } or a plain string URL
-      const url = typeof fileData === "string" ? fileData
-        : (fileData?.url || fileData?.path || String(fileData));
-
-      const res = await fetch(url);
-      if (!res.ok) throw new Error(`Failed to fetch audio: ${res.status}`);
+    async function loadAudio(dataUrl) {
+      const res = await fetch(dataUrl);
       const blob = await res.blob();
-      const objectUrl = URL.createObjectURL(blob);
+      const url = URL.createObjectURL(blob);
 
-      await ws.load(objectUrl);
-      downloadBtn.href = objectUrl;
+      // Extract real peaks for bar waveform
+      const numBars = 80;
+      try {
+        const buf = await blob.arrayBuffer();
+        const ctx = new (window.AudioContext || window.webkitAudioContext)();
+        const decoded = await ctx.decodeAudioData(buf);
+        const raw = decoded.getChannelData(0);
+        const block = Math.floor(raw.length / numBars);
+        const peaks = [];
+        for (let i = 0; i < numBars; i++) {
+          let sum = 0;
+          for (let j = 0; j < block; j++) sum += Math.abs(raw[i * block + j]);
+          peaks.push(sum / block);
+        }
+        const mx = Math.max(...peaks);
+        waveformEl.innerHTML = peaks.map(p => {
+          const h = mx > 0 ? 15 + (p / mx) * 85 : 50;
+          return `<div class="bar" style="height:${h}%"></div>`;
+        }).join("");
+      } catch {
+        waveformEl.innerHTML = Array.from({length: numBars}, () =>
+          `<div class="bar" style="height:${15 + Math.random() * 85}%"></div>`
+        ).join("");
+      }
+
+      mainAudio.src = url;
+      downloadBtn.href = url;
       outputSection.style.display = "block";
-      outputSection.scrollIntoView({ behavior: "smooth", block: "nearest" });
-      ws.play();
+      stopFeedAudio();
+      mainAudio.play();
     }
 
-    // ── Generate ─────────────────────────────────────────────────────────────
-    generateBtn.addEventListener("click", async () => {
-      const prompt = promptInput.value.trim();
-      const lyrics = lyricsInput.value.trim();
+    // ── Community feed player ───────────────────────────────────────────────
+    let feedAudio = null;
+    let playingCard = null;
 
-      if (!prompt) {
-        setStatus("Please enter some style tags (e.g. lo-fi, chill, piano)", "error");
-        promptInput.focus();
-        return;
+    function stopFeedAudio() {
+      if (feedAudio) { feedAudio.pause(); feedAudio = null; }
+      if (playingCard) {
+        playingCard.querySelectorAll(".mini-waveform .bar").forEach(b => b.style.background = "");
+        playingCard.classList.remove("playing");
+        playingCard.querySelector(".song-play-btn").textContent = "▶";
+        playingCard = null;
       }
-      if (!lyrics) {
-        setStatus("Please write some lyrics (use [verse], [chorus] markers)", "error");
-        lyricsInput.focus();
+    }
+
+    function playFeedSong(card, audioUrl, seekRatio) {
+      // If same card and already playing, just seek (or pause if clicking play btn)
+      if (playingCard === card && feedAudio) {
+        if (seekRatio != null) {
+          feedAudio.currentTime = feedAudio.duration * seekRatio;
+          if (feedAudio.paused) feedAudio.play();
+        } else {
+          // Toggle play/pause (clicked the play button)
+          if (feedAudio.paused) { feedAudio.play(); }
+          else { feedAudio.pause(); }
+        }
         return;
       }
+      stopFeedAudio();
+      mainAudio.pause();
+      feedAudio = new Audio(audioUrl);
+      playingCard = card;
+      card.classList.add("playing");
+      card.querySelector(".song-play-btn").textContent = "⏸";
+      feedAudio.play();
+      if (seekRatio != null) {
+        feedAudio.addEventListener("loadedmetadata", () => {
+          feedAudio.currentTime = feedAudio.duration * seekRatio;
+        }, { once: true });
+      }
+      // Update waveform progress during playback
+      const waveEl = card.querySelector(".mini-waveform");
+      const bars = waveEl ? waveEl.querySelectorAll(".bar") : [];
+      function updateProgress() {
+        if (playingCard !== card || !feedAudio || feedAudio.paused) return;
+        const pct = feedAudio.currentTime / feedAudio.duration;
+        bars.forEach((b, i) => {
+          b.style.background = (i / bars.length) <= pct ? "var(--accent)" : "var(--text-faint)";
+        });
+        requestAnimationFrame(updateProgress);
+      }
+      if (bars.length) requestAnimationFrame(updateProgress);
+      feedAudio.addEventListener("ended", () => {
+        bars.forEach(b => b.style.background = "");
+        stopFeedAudio();
+      });
+      feedAudio.addEventListener("error", () => stopFeedAudio());
+      feedAudio.addEventListener("pause", () => {
+        if (playingCard === card) card.querySelector(".song-play-btn").textContent = "▶";
+      });
+      feedAudio.addEventListener("play", () => {
+        if (playingCard === card) {
+          card.querySelector(".song-play-btn").textContent = "⏸";
+          requestAnimationFrame(updateProgress);
+        }
+      });
+    }
 
-      setUIState("loading");
-      clearStatus();
-
+    // ── Load community feed ─────────────────────────────────────────────────
+    async function loadFeed() {
       try {
         const client = await getClient();
+        const res = await client.predict("/community");
+        // Gradio JS client may return {data: [...]} or the value directly
+        const raw = res?.data?.[0] ?? res?.data ?? res;
+        const songs = JSON.parse(typeof raw === "string" ? raw : JSON.stringify(raw) || "[]");
+        if (songs.length === 0) {
+          feedEl.innerHTML = '<div class="feed-empty">No community songs yet.<br>Be the first — check "Share" and generate!</div>';
+          return;
+        }
+        feedEl.innerHTML = "";
+        for (const song of songs) {
+          const card = document.createElement("div");
+          card.className = "song-card";
+          const dur = song.duration ? `${Math.round(song.duration)}s` : "";
+          // Generate random mini waveform bars (seeded from title for consistency)
+          const miniBars = Array.from({length: 80}, () =>
+            `<div class="bar" style="height:${15 + Math.random() * 85}%"></div>`
+          ).join("");
+          const thumbHtml = song.thumb_url
+            ? `<img src="${esc(song.thumb_url)}" style="width:24px;height:24px;border-radius:4px;object-fit:cover;flex-shrink:0;" loading="lazy" />`
+            : '';
+          card.innerHTML = `
+            <div class="song-card-top">
+              <button class="song-play-btn">▶</button>
+              ${thumbHtml}
+              <div class="song-title">${esc(song.title || "Untitled")}</div>
+              <div class="song-tags">${esc(song.tags || "")}</div>
+              <div class="song-duration">${dur}</div>
+            </div>
+            <div class="mini-waveform">${miniBars}</div>
+          `;
+          // Play button: toggle play/pause
+          card.querySelector(".song-play-btn").addEventListener("click", (e) => {
+            e.stopPropagation();
+            playFeedSong(card, song.audio_url);
+          });
+          // Waveform: seek to click position
+          card.querySelector(".mini-waveform").addEventListener("click", (e) => {
+            e.stopPropagation();
+            const rect = e.currentTarget.getBoundingClientRect();
+            const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+            playFeedSong(card, song.audio_url, ratio);
+          });
+          feedEl.appendChild(card);
+        }
+      } catch (e) {
+        console.error("Feed load error:", e);
+        feedEl.innerHTML = '<div class="feed-empty">Could not load community songs</div>';
+      }
+    }
+
+    function esc(s) { const d = document.createElement("div"); d.textContent = s; return d.innerHTML; }
+
+    // ── Generate ─────────────────────────────────────────────────────────────
+    generateBtn.addEventListener("click", async () => {
+      let desc = descInput.value.trim();
+      if (!desc) { setStatus("Describe the song you want to create", "error"); descInput.focus(); return; }
+      if (instrumentalChk.checked) desc += " (instrumental, no vocals)";
+
+      stopFeedAudio();
+      setLoading(true);
+      setStatus("");
+
+      // Show animated placeholder on the left, above output
+      outputSection.style.display = "none";
+      const placeholder = document.createElement("div");
+      placeholder.className = "placeholder-card";
+      placeholder.id = "gen-placeholder";
+      const bars = Array.from({length: 40}, (_, i) =>
+        `<div class="bar" style="height:100%;animation-delay:${(i * 0.06).toFixed(2)}s"></div>`
+      ).join("");
+      placeholder.innerHTML = `
+        <div class="placeholder-title">${esc(desc.slice(0, 80))}</div>
+        <div class="placeholder-sub">Composing &amp; generating…</div>
+        <div class="fake-waveform">${bars}</div>
+      `;
+      outputSection.parentNode.insertBefore(placeholder, outputSection);
 
-        const job = client.submit("/generate", {
-          prompt:            prompt,
-          lyrics:            lyrics,
-          audio_duration:    parseFloat(durationSlider.value),
-          infer_step:        8,
-          guidance_scale:    0.0,
-          seed:              parseInt(seedInput.value, 10),
-          lora_name_or_path: loraPathInput.value.trim(),
-          lora_weight:       parseFloat(loraWeightSlider.value),
+      try {
+        const client = await getClient();
+        const job = client.submit("/create", {
+          description: desc,
+          audio_duration: parseFloat(durationSelect.value),
+          seed: -1,
+          community: communityChk.checked,
         });
 
         for await (const msg of job) {
           if (msg.type === "status") {
-            const s = msg;
-            if (s.queue_size > 0) {
-              const eta = s.eta != null ? ` · ETA ~${Math.round(s.eta)}s` : "";
-              setStatus(`Queue position ${s.position}/${s.queue_size}${eta}`);
-            } else if (s.stage === "generating" || s.status === "generating") {
-              setStatus("Generating…");
+            if (msg.queue_size > 0) {
+              const eta = msg.eta != null ? ` · ~${Math.round(msg.eta)}s` : "";
+              setStatus(`Queue ${msg.position}/${msg.queue_size}${eta}`);
             }
           } else if (msg.type === "data") {
-            const fileData = msg.data?.[0];
-            if (!fileData) throw new Error("No audio data returned");
-            await loadAudio(fileData);
-            setStatus("Done!", "success");
-            setTimeout(clearStatus, 3000);
+            const raw = msg.data?.[0];
+            if (!raw) throw new Error("No data returned");
+            const result = JSON.parse(raw);
+            songTitleEl.textContent = result.title || "";
+            songTagsEl.textContent = result.tags || "";
+            const thumbEl = document.getElementById("song-thumb");
+            if (result.thumbnail) { thumbEl.src = result.thumbnail; thumbEl.style.display = "block"; }
+            else { thumbEl.style.display = "none"; }
+            const safeName = (result.title || "output").replace(/[^a-zA-Z0-9 -]/g, "").trim().replace(/\s+/g, "-");
+            downloadBtn.download = `${safeName}.wav`;
+            await loadAudio(result.audio);
+            // Refresh feed if shared
+            if (communityChk.checked) loadFeed();
           }
         }
       } catch (err) {
-        console.error("Generate error:", err);
+        console.error(err);
         setStatus(`Error: ${err.message}`, "error");
       } finally {
-        setUIState("idle");
+        placeholder.remove();
+        setLoading(false);
       }
     });
 
-    // ── Inspire me ───────────────────────────────────────────────────────────
-    inspireBtn.addEventListener("click", async () => {
-      inspireBtn.disabled = true;
-      inspireBtn.textContent = "…";
-
-      try {
-        const client = await getClient();
-        const result = await client.predict("/inspire", {
-          genre_hint: promptInput.value.trim(),
-        });
-        const lyrics = result?.data?.[0] || "";
-        if (lyrics.startsWith("[Error")) {
-          setStatus(lyrics, "error");
-        } else {
-          lyricsInput.value = lyrics;
-          clearStatus();
-        }
-      } catch (err) {
-        setStatus(`Inspire failed: ${err.message}`, "error");
-      } finally {
-        inspireBtn.disabled = false;
-        inspireBtn.textContent = "✨ Inspire me";
-      }
+    descInput.addEventListener("keydown", (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "Enter") { e.preventDefault(); generateBtn.click(); }
     });
 
-    // ── Initial ready state ──────────────────────────────────────────────────
-    // Pre-connect client eagerly so first generate is faster
-    getClient().catch(console.error);
+    // ── Init ─────────────────────────────────────────────────────────────────
+    getClient().then(() => loadFeed()).catch(console.error);
   </script>
 
 </body>

requirements.txt

@@ -2,7 +2,7 @@ torch==2.9.1
 torchaudio==2.9.1
 torchvision==0.24.1
 transformers>=4.51.0,<4.58.0
-diffusers
+diffusers>=0.37.0
 gradio==6.12.0
 matplotlib>=3.7.5
 scipy>=1.10.1