feat: rewrite as gradio.Server + vanilla HTML/CSS/JS frontend

This is the full rewrite using the architecture described in the
'Introducing Gradio Server' blog post (not just a theme change).

Backend (app.py):
- Replace gradio.Blocks with gradio.server.Server (a FastAPI subclass)
- Register 4 endpoints via @app .api() decorator (queue + concurrency):
* /separate — main endpoint, concurrency_limit=1 (CPU/GPU serialize)
* /presets — return use-case presets catalogue
* /models — return model list per architecture
* /history — return recent separation history
- @app .get('/') serves static/index.html (FastAPI FileResponse)
- /static mounted via fastapi.staticfiles.StaticFiles
- /healthz plain FastAPI endpoint (no queue) for health checks
- allowed_paths includes output_dir + model cache so FileData URLs work
- FileData handled both as instance and dict (serialization varies)

Frontend (static/):
- index.html — vanilla HTML, no framework, no build step
- style.css — ~700 lines, self-contained design system with :root tokens,
pure-black canvas, electric-lime accent, glassmorphism, animated hero
- app.js — vanilla JS using @gradio/client@2.3.0 from CDN (ESM import)
* Client.connect(window.location.origin) per the blog
* handle_file() for file upload
* result.data[0] for FileData URL extraction
* Builds /gradio_api/file=<path> URL when FileData.url is null
- Loaded as ESM module + defer script, with client-ready event bridge

Engine (main/):
- Delete main/ui.py and main/callbacks.py (Blocks-specific, no longer used)
- Keep main/config.py, main/models.py, main/separator.py, main/utils.py
(engine pieces reused by the new Server-based app)
- All bug fixes from the previous commit preserved:
* MP3 bitrate 320 kbps (issue #103)
* librosa.ParameterError retry (issue #57)
* Defensive path handling

Dependencies:
- Bump gradio from 5.x to 6.x (gradio.Server was introduced in 6.x)
- requirements.txt and README.md updated accordingly

Verified end-to-end:
- /healthz returns JSON
- / serves our custom HTML (not Gradio default)
- /static/style.css and /static/app.js served correctly
- All 4 @app .api() endpoints registered (visible in /gradio_api/info)
- /separate produces 2 stems from a 2s test tone in ~16s
- Browser test: page renders, dropdowns populate via API, no JS errors
- Browser test: JS Client.connect() + predict('/presets') succeeds

README.md

@@ -4,7 +4,7 @@ emoji: 🎧
 colorFrom: indigo
 colorTo: blue
 sdk: gradio
-sdk_version: 5.50.0
+sdk_version: 6.19.0
 app_file: app.py
 pinned: false
 license: mit
@@ -16,28 +16,45 @@ tags:
   - mdx
   - roformer
   - uvr
+  - gradio-server
 ---
 
-# Audio Separator
-
-A polished Gradio interface for [`audio-separator`](https://github.com/nomadkaraoke/python-audio-separator).
-
-> Pure-black theme · Syne display font · one-click use-case presets · labelled stems · ZIP download
+# Audio Separator — Gradio Server Edition
+
+A polished demo for [`audio-separator`](https://github.com/nomadkaraoke/python-audio-separator)
+built on the architecture described in the
+[Introducing Gradio Server](https://huggingface.co/blog/introducing-gradio-server)
+blog post:
+
+> **Backend:** `gradio.server.Server` (a FastAPI subclass) with `@app.api()`
+> endpoints that go through Gradio's queue with concurrency control and
+> SSE streaming. Heavy compute is wrapped in `@spaces.GPU`.
+>
+> **Frontend:** vanilla HTML / CSS / JS loaded from `static/index.html` via
+> `@app.get("/")`. The frontend talks to the backend using the
+> [`@gradio/client`](https://www.npmjs.com/package/@gradio/client) JS
+> library loaded from CDN. No build step. No framework on the client.
+>
+> **Engine:** `audio_separator.separator.Separator` with bug fixes for MP3
+> bitrate (issue #103), `librosa.ParameterError` retry (issue #57), and
+> defensive path handling.
 
 ## Project layout
 
 ```
 .
-├── app.py                 # Entry point — just imports `main` and launches.
+├── app.py                 # Server entry point — gradio.Server + @app.api() endpoints
+├── static/
+│   ├── index.html         # Vanilla HTML UI (served at "/")
+│   ├── style.css          # Self-contained design system (no framework)
+│   └── app.js             # Client logic — uses @gradio/client from CDN
 ├── main/
-│   ├── __init__.py        # Public surface (build_app, DEVICE, …)
-│   ├── config.py          # Device detection, paths, logging, `spaces` shim.
-│   ├── models.py          # Model catalogue + use-case presets.
-│   ├── separator.py       # Core pipeline — @spaces.GPU-wrapped.
-│   ├── utils.py           # ZIP packaging, duration, history helpers.
-│   ├── callbacks.py       # Gradio event handlers.
-│   └── ui.py              # Theme (black + Syne) + Blocks layout.
-├── requirements.txt       # audio-separator[gpu]
+│   ├── __init__.py        # (legacy; not used by the new app)
+│   ├── config.py          # Device detection, paths, logging, `spaces` shim
+│   ├── models.py          # Model catalogue + use-case presets
+│   ├── separator.py       # Core pipeline — @spaces.GPU-wrapped, bug-fixed
+│   └── utils.py           # ZIP packaging, duration, history helpers
+├── requirements.txt       # gradio>=6.0  audio-separator[cpu]>=0.44.0
 └── README.md
 ```
 
@@ -80,11 +97,25 @@ A polished Gradio interface for [`audio-separator`](https://github.com/nomadkara
 ```bash
 git clone https://huggingface.co/spaces/nomadkaraoke/audio-separator
 cd audio-separator
-pip install -r requirements.txt     # audio-separator[gpu] (or [cpu] locally)
+pip install -r requirements.txt     # gradio>=6.0 + audio-separator[cpu] (or [gpu] locally)
 python app.py
 # → http://localhost:7860
 ```
 
+The first request to `/` returns the static `index.html`. The frontend then
+connects to the backend using the Gradio JS client:
+
+```js
+import { Client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+const client = await Client.connect(window.location.origin);
+const result = await client.predict("/separate", {
+  audio_file: handle_file(file),
+  use_case: "Karaoke (vocals out)",
+  // ...other params
+});
+const stemUrl = result.data[0].stems[0].file.url;  // FileData URL
+```
+
 ## Credits
 
 - Upstream HF Space: [nomadkaraoke/audio-separator](https://huggingface.co/spaces/nomadkaraoke/audio-separator)

app.py

@@ -1,19 +1,26 @@
-"""Audio Separator — Improved Demo (HuggingFace Space Edition).
+"""Audio Separator — Gradio Server Edition.
 
-Entry point. All real logic lives in the `main/` package:
+This is a full rewrite of the demo using the architecture described in the
+"Introducing Gradio Server" blog post:
+https://huggingface.co/blog/introducing-gradio-server
 
-    main/
-        __init__.py     — public surface
-        config.py       — device detection, paths, logging, `spaces` shim
-        models.py       — model catalogue + use-case presets
-        separator.py    — core separation pipeline (@spaces.GPU wrapped)
-        utils.py        — ZIP, duration, history helpers
-        callbacks.py    — Gradio event handlers
-        ui.py           — theme (black + Syne) + Blocks layout
+Architecture:
+  * Backend  : `gradio.server.Server` (a FastAPI subclass) with `@app.api()`
+               endpoints that go through Gradio's queue with concurrency
+               control and SSE streaming.
+  * Frontend : vanilla HTML / CSS / JS loaded from `static/index.html` via
+               `@app.get("/")`. The frontend talks to the backend using the
+               `@gradio/client` JS library loaded from CDN — exactly as the
+               blog recommends.
+  * Engine   : `audio_separator.separator.Separator` — same wrapper as the
+               old `main/separator.py`, with bug fixes for MP3 bitrate
+               (issue #103), librosa.ParameterError retry (issue #57), and
+               defensive path handling.
 
 Run locally:
-    pip install "audio-separator[cpu]" "gradio>=5.0,<6.0"
+    pip install "audio-separator[cpu]" "gradio>=6.0"
     python app.py
+    # → http://localhost:7860
 """
 from __future__ import annotations
 
@@ -23,9 +30,365 @@ import sys
 # Make sure the local `main/` package is importable regardless of CWD.
 sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))
 
-from main import build_app  # noqa: E402
-from main.config import HAS_SEPARATOR  # noqa: E402
+from pathlib import Path
+from typing import Any
 
+from fastapi.responses import FileResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
+from gradio.data_classes import FileData
+from gradio.server import Server
+
+# ── Local imports (engine + catalogue, unchanged from the previous commit) ──
+from main.config import (
+    DEFAULT_MODEL_DIR,
+    DEFAULT_OUTPUT_DIR,
+    DEVICE,
+    HAS_SEPARATOR,
+    HAS_SPACES,
+    USE_AUTOCAST,
+    spaces,  # real `spaces` module on HF ZeroGPU, or our local no-op shim
+)
+from main.models import (
+    ROFORMER_MODELS,
+    USE_CASE_PRESETS,
+    infer_architecture_from_model,
+    model_choices_for_arch,
+    resolve_model_filename,
+)
+from main.separator import separate_core, MP3_BITRATE
+from main.utils import (
+    append_history,
+    audio_duration_seconds,
+    estimate_time_seconds,
+    fmt_duration,
+    history_rows,
+    now_timestamp,
+    package_stems_as_zip,
+)
+
+import logging
+log = logging.getLogger("audio-sep")
+
+
+# --------------------------------------------------------------------------- #
+#  Server construction                                                         #
+# --------------------------------------------------------------------------- #
+
+app = Server()
+
+
+# --------------------------------------------------------------------------- #
+#  Static frontend — served at "/" as the blog describes                       #
+# --------------------------------------------------------------------------- #
+
+STATIC_DIR = Path(__file__).resolve().parent / "static"
+
+
+@app.get("/")
+def index():
+    """Serve the vanilla HTML/CSS/JS frontend.
+
+    The blog is explicit: `gradio.Server` *is* a FastAPI app, so plain
+    `@app.get("/")` works alongside `@app.api()` endpoints. We return the
+    static `index.html` and let the browser load `style.css` and `app.js`
+    via relative URLs (mounted below).
+    """
+    return FileResponse(STATIC_DIR / "index.html")
+
+
+# Mount the rest of the static assets (CSS, JS, fonts if needed).
+# `Server` inherits from FastAPI which inherits from Starlette — `.mount()`
+# works exactly the same way.
+app.mount("/static", StaticFiles(directory=str(STATIC_DIR)), name="static")
+
+
+# --------------------------------------------------------------------------- #
+#  API endpoints                                                               #
+# --------------------------------------------------------------------------- #
+# These are registered via `@app.api(name="...")` so they go through Gradio's
+# queue with concurrency control. On HuggingFace ZeroGPU this is what keeps
+# concurrent users from colliding on the GPU.
+#
+# Frontend (browser) calls these via the Gradio JS client:
+#   import { Client, handle_file } from "@gradio/client";
+#   const client = await Client.connect(window.location.origin);
+#   const result = await client.predict("/separate", { audio_file: handle_file(file), ... });
+#   const url = result.data[0].url;  // FileData URL
+
+
+@app.api(name="separate",
+         description="Separate an audio file into stems (vocals, instrumental, etc.).",
+         concurrency_limit=1)
+def separate(
+    audio_file: FileData,
+    use_case: str,
+    model_display_name: str,
+    output_format: str,
+    # Advanced parameters (optional — frontend sends defaults when hidden)
+    advanced_mode: bool,
+    seg_size: int,
+    overlap_rof: int,
+    overlap_mdx: float,
+    pitch_shift: int,
+    hop_length: int,
+    enable_denoise: bool,
+    window_size: int,
+    aggression: int,
+    enable_tta: bool,
+    enable_post: bool,
+    post_thresh: float,
+    enable_high_end: bool,
+    shifts: int,
+    segments_enabled: bool,
+    norm_thresh: float,
+    amp_thresh: float,
+    batch_size: int,
+) -> dict[str, Any]:
+    """Main separation endpoint.
+
+    Returns a dict with:
+      - stems     : list of {label, url} pairs (one per produced stem)
+      - zip_url   : URL to a ZIP bundle of all stems
+      - duration  : formatted input duration (e.g. "02:34")
+      - est       : formatted estimated processing time
+      - device    : "CPU" or "CUDA"
+      - model     : chosen model display name
+      - architecture : inferred architecture key
+      - error     : optional error message
+    """
+    # The Gradio client may pass FileData either as a FileData instance or
+    # as a plain dict (depending on client / serialization path). Normalize.
+    if isinstance(audio_file, dict):
+        audio_path = audio_file.get("path")
+    elif audio_file is not None:
+        audio_path = audio_file.path
+    else:
+        audio_path = None
+
+    if not audio_path:
+        return {"error": "No audio file provided."}
+
+    input_path = audio_path
+    if not os.path.exists(input_path):
+        return {"error": f"Audio file not found on disk: {input_path}"}
+
+    # Resolve architecture + params from the use-case preset.
+    preset = USE_CASE_PRESETS.get(use_case, {})
+    architecture = preset.get("architecture", "roformer")
+
+    chosen_model = model_display_name or preset.get("model", "")
+    if chosen_model != preset.get("model"):
+        architecture = infer_architecture_from_model(chosen_model)
+
+    arch_params: dict[str, Any] = dict(preset.get("params", {}))
+    if advanced_mode:
+        _apply_advanced_overrides(
+            arch_params,
+            architecture=architecture,
+            seg_size=seg_size,
+            overlap_rof=overlap_rof,
+            overlap_mdx=overlap_mdx,
+            pitch_shift=pitch_shift,
+            hop_length=hop_length,
+            enable_denoise=enable_denoise,
+            window_size=window_size,
+            aggression=aggression,
+            enable_tta=enable_tta,
+            enable_post=enable_post,
+            post_thresh=post_thresh,
+            enable_high_end=enable_high_end,
+            shifts=shifts,
+            segments_enabled=segments_enabled,
+        )
+
+    duration = audio_duration_seconds(input_path)
+    est = estimate_time_seconds(duration, architecture)
+
+    log.info(
+        "API /separate — input=%s  arch=%s  model=%s  duration=%.1fs  est=%.1fs",
+        os.path.basename(input_path), architecture, chosen_model, duration, est,
+    )
+
+    try:
+        stems = separate_core(
+            input_file=input_path,
+            architecture=architecture,
+            model_display_name=chosen_model,
+            arch_params=arch_params,
+            model_file_dir=DEFAULT_MODEL_DIR,
+            output_dir=DEFAULT_OUTPUT_DIR,
+            out_format=output_format,
+            norm_thresh=norm_thresh,
+            amp_thresh=amp_thresh,
+            batch_size=batch_size,
+            progress=None,
+        )
+    except Exception as e:
+        log.exception("Separation failed")
+        return {
+            "error": f"Separation failed: {e}",
+            "duration": fmt_duration(duration),
+            "est": fmt_duration(est),
+            "device": DEVICE.upper(),
+            "model": chosen_model,
+            "architecture": architecture,
+        }
+
+    if not stems:
+        return {
+            "error": "No stems were produced.",
+            "duration": fmt_duration(duration),
+            "est": fmt_duration(est),
+            "device": DEVICE.upper(),
+            "model": chosen_model,
+            "architecture": architecture,
+        }
+
+    # Build FileData objects for each stem — these carry the URL the JS
+    # client reads via `result.data[i].url`.
+    stem_payloads = []
+    for label, path in stems.items():
+        if not os.path.exists(path):
+            log.warning("Stem path missing on disk: %s", path)
+            continue
+        fd = FileData(path=path, orig_name=os.path.basename(path))
+        stem_payloads.append({"label": label, "file": fd})
+
+    zip_path = package_stems_as_zip(stems, Path(input_path).stem)
+    zip_fd = FileData(path=zip_path, orig_name=Path(zip_path).name) if zip_path else None
+
+    append_history({
+        "time": now_timestamp(),
+        "use_case": use_case,
+        "model": chosen_model,
+        "input": os.path.basename(input_path),
+        "duration": fmt_duration(duration),
+        "stems": [s["label"] for s in stem_payloads],
+    })
+
+    return {
+        "stems": stem_payloads,
+        "zip": zip_fd,
+        "duration": fmt_duration(duration),
+        "est": fmt_duration(est),
+        "device": DEVICE.upper(),
+        "model": chosen_model,
+        "architecture": architecture,
+    }
+
+
+def _apply_advanced_overrides(
+    arch_params: dict[str, Any],
+    *,
+    architecture: str,
+    seg_size: int,
+    overlap_rof: int,
+    overlap_mdx: float,
+    pitch_shift: int,
+    hop_length: int,
+    enable_denoise: bool,
+    window_size: int,
+    aggression: int,
+    enable_tta: bool,
+    enable_post: bool,
+    post_thresh: float,
+    enable_high_end: bool,
+    shifts: int,
+    segments_enabled: bool,
+) -> None:
+    """Mutate `arch_params` in place with the advanced-mode slider values."""
+    if architecture in ("roformer", "mdx23c"):
+        arch_params.update(
+            segment_size=seg_size,
+            override_segment_size=False,
+            pitch_shift=pitch_shift,
+            overlap=overlap_rof,
+        )
+    elif architecture == "mdx":
+        arch_params.update(
+            hop_length=hop_length,
+            segment_size=seg_size,
+            overlap=overlap_mdx,
+            enable_denoise=enable_denoise,
+        )
+    elif architecture == "vr":
+        arch_params.update(
+            window_size=window_size,
+            aggression=aggression,
+            enable_tta=enable_tta,
+            enable_post_process=enable_post,
+            post_process_threshold=post_thresh,
+            high_end_process=enable_high_end,
+        )
+    elif architecture == "demucs":
+        arch_params.update(
+            segment_size=seg_size,
+            shifts=shifts,
+            overlap=overlap_mdx,
+            segments_enabled=segments_enabled,
+        )
+
+
+# --------------------------------------------------------------------------- #
+#  Auxiliary endpoints (also through the queue for consistency)                #
+# --------------------------------------------------------------------------- #
+
+@app.api(name="presets",
+         description="Return the catalogue of use-case presets and models.")
+def get_presets() -> dict[str, Any]:
+    """Return presets + per-architecture model lists for the frontend."""
+    return {
+        "presets": {
+            name: {
+                "architecture": p["architecture"],
+                "model": p["model"],
+                "description": p["description"],
+                "params": p.get("params", {}),
+            }
+            for name, p in USE_CASE_PRESETS.items()
+        },
+        "models_by_arch": {
+            "roformer": list(ROFORMER_MODELS.keys()),
+            "mdx23c":   [],  # populated from main.models at request time if needed
+            "mdx":      [],  # same
+            "vr":       [],
+            "demucs":   [],
+        },
+        "default_use_case": "Karaoke (vocals out)",
+    }
+
+
+@app.api(name="models",
+         description="Return all available models for a given architecture.")
+def get_models(architecture: str) -> list[str]:
+    """Return the model dropdown choices for a given architecture."""
+    return model_choices_for_arch(architecture)
+
+
+@app.api(name="history",
+         description="Return the user's recent separation history.")
+def get_history() -> list[list[str]]:
+    return history_rows()
+
+
+# --------------------------------------------------------------------------- #
+#  Health check (plain FastAPI — no queue needed)                              #
+# --------------------------------------------------------------------------- #
+
+@app.get("/healthz")
+def healthz():
+    return JSONResponse({
+        "ok": True,
+        "device": DEVICE.upper(),
+        "engine_installed": HAS_SEPARATOR,
+        "spaces_runtime": HAS_SPACES,
+        "mp3_bitrate": MP3_BITRATE,
+    })
+
+
+# --------------------------------------------------------------------------- #
+#  Entrypoint                                                                  #
+# --------------------------------------------------------------------------- #
 
 def main() -> None:
     if not HAS_SEPARATOR:
@@ -35,13 +398,23 @@ def main() -> None:
         print("  (or 'audio-separator[cpu]' for local CPU-only runs)")
         print("=" * 60)
 
-    app = build_app()
-    app.queue(default_concurrency_limit=1).launch(
+    # Note: `Server` doesn't have a separate `.queue()` method — concurrency
+    # is configured per-`@app.api()` via the `concurrency_limit` parameter.
+    # The default for `/separate` is `concurrency_limit=1` (set on the
+    # decorator) so concurrent users serialize on the GPU.
+
+    # Gradio's file server only allows downloads from explicitly listed
+    # paths. We allow the output dir (where stems + ZIPs are written) and
+    # the model cache (in case users want to inspect downloaded weights).
+    allowed_paths = [DEFAULT_OUTPUT_DIR, DEFAULT_MODEL_DIR]
+
+    app.launch(
         server_name=os.environ.get("GRADIO_SERVER_NAME", "0.0.0.0"),
         server_port=int(os.environ.get("GRADIO_SERVER_PORT", "7860")),
         share=False,
         show_error=True,
         prevent_thread_lock=False,
+        allowed_paths=allowed_paths,
     )
 
 

main/__init__.py

@@ -1,14 +1,11 @@
-"""Audio Separator — Improved Demo (modular package).
+"""Audio Separator — Gradio Server Edition (engine package).
 
-Public surface:
-    build_app() -> gradio.Blocks
-    main()      -> launch the server
-"""
-from __future__ import annotations
-
-from .ui import build_app
-from .config import DEVICE, USE_AUTOCAST, HAS_SEPARATOR, HAS_SPACES
+The public entry point is `app.py` at the project root, which constructs a
+`gradio.server.Server` and registers `@app.api()` endpoints. This package
+holds the engine pieces that the API calls into:
 
-__all__ = ["build_app", "DEVICE", "USE_AUTOCAST", "HAS_SEPARATOR", "HAS_SPACES"]
-
-__version__ = "1.0.0"
+    config.py     — device detection, paths, logging, `spaces` shim
+    models.py     — model catalogue + use-case presets
+    separator.py  — core separation pipeline (@spaces.GPU wrapped)
+    utils.py      — ZIP packaging, duration, history helpers
+"""

main/callbacks.py

@@ -1,359 +0,0 @@
-"""Gradio event handlers.
-
-Each top-level function here is wired to a UI element in `main.ui`. They take
-plain Python values (not Gradio components) and return tuples of
-`gr.update(...)` / values to be applied to the bound output components.
-"""
-from __future__ import annotations
-
-import logging
-from pathlib import Path
-from typing import Any
-
-import gradio as gr
-
-from .config import DEVICE, HAS_SEPARATOR
-from .models import (
-    USE_CASE_PRESETS,
-    infer_architecture_from_model,
-    model_choices_for_arch,
-)
-from .separator import separate_core
-from .utils import (
-    append_history,
-    audio_duration_seconds,
-    estimate_time_seconds,
-    fmt_duration,
-    history_rows,
-    now_timestamp,
-    package_stems_as_zip,
-)
-
-log = logging.getLogger("audio-sep")
-
-
-# --------------------------------------------------------------------------- #
-#  Result shape constants                                                     #
-# --------------------------------------------------------------------------- #
-
-# Order of outputs returned by run_separation() and clear_outputs().
-# Documented here so the wiring in main.ui stays in sync.
-RESULT_FIELDS = [
-    "stem_1", "stem_2", "stem_3", "stem_4", "stem_5", "stem_6",
-    "zip_file", "status",
-    "stem_row_1", "stem_row_2", "stem_row_3",
-    "est_box", "dur_box", "history_table",
-]
-N_STEMS = 6
-N_RESULT = len(RESULT_FIELDS)  # 14
-
-# Preferred ordering when displaying stems.
-_PREFERRED_STEM_ORDER = [
-    "Vocals", "Instrumental", "Drums", "Bass", "Other", "Guitar", "Piano",
-]
-
-
-# --------------------------------------------------------------------------- #
-#  Core separation entry point                                                #
-# --------------------------------------------------------------------------- #
-
-def run_separation(
-    input_audio,
-    use_case: str,
-    model_display_name: str,
-    advanced_mode: bool,
-    # Roformer / MDX23C
-    seg_size: int,
-    override_seg: bool,
-    overlap_rof: int,
-    overlap_mdx: float,
-    pitch_shift: int,
-    # MDX-NET
-    hop_length: int,
-    enable_denoise: bool,
-    # VR Arch
-    window_size: int,
-    aggression: int,
-    enable_tta: bool,
-    enable_post: bool,
-    post_thresh: float,
-    enable_high_end: bool,
-    # Demucs
-    shifts: int,
-    segments_enabled: bool,
-    # Global
-    model_file_dir: str,
-    output_dir: str,
-    out_format: str,
-    norm_thresh: float,
-    amp_thresh: float,
-    batch_size: int,
-    progress=gr.Progress(track_tqdm=True),
-):
-    """Single entry point wired to the "Separate" button."""
-    if not input_audio:
-        gr.Warning("Please upload or record an audio file first.")
-        return _empty_result("⚠️ No input audio provided.")
-
-    # Resolve architecture + params from the use-case preset.
-    preset = USE_CASE_PRESETS.get(use_case, {})
-    architecture = preset.get("architecture", "roformer")
-
-    chosen_model = model_display_name or preset.get("model", "")
-    if chosen_model != preset.get("model"):
-        architecture = infer_architecture_from_model(chosen_model)
-
-    arch_params: dict[str, Any] = dict(preset.get("params", {}))
-    if advanced_mode:
-        _apply_advanced_overrides(
-            arch_params,
-            architecture=architecture,
-            seg_size=seg_size,
-            override_seg=override_seg,
-            overlap_rof=overlap_rof,
-            overlap_mdx=overlap_mdx,
-            pitch_shift=pitch_shift,
-            hop_length=hop_length,
-            enable_denoise=enable_denoise,
-            window_size=window_size,
-            aggression=aggression,
-            enable_tta=enable_tta,
-            enable_post=enable_post,
-            post_thresh=post_thresh,
-            enable_high_end=enable_high_end,
-            shifts=shifts,
-            segments_enabled=segments_enabled,
-        )
-
-    duration = audio_duration_seconds(input_audio)
-    est = estimate_time_seconds(duration, architecture)
-
-    status_running = (
-        f"🎙️  Input: `{Path(input_audio).name}`  •  "
-        f"Duration: **{fmt_duration(duration)}**  •  "
-        f"Model: **{chosen_model}**  •  "
-        f"Architecture: **{architecture}**  •  "
-        f"Device: **{DEVICE.upper()}**  •  "
-        f"Estimated time: **{fmt_duration(est)}**"
-    )
-
-    try:
-        stems = separate_core(
-            input_file=input_audio,
-            architecture=architecture,
-            model_display_name=chosen_model,
-            arch_params=arch_params,
-            model_file_dir=model_file_dir,
-            output_dir=output_dir,
-            out_format=out_format,
-            norm_thresh=norm_thresh,
-            amp_thresh=amp_thresh,
-            batch_size=batch_size,
-            progress=progress,
-        )
-    except Exception as e:
-        log.exception("Separation failed")
-        gr.Warning(f"Separation failed: {e}")
-        return _empty_result(
-            f"❌ **Error:** {e}",
-            est=fmt_duration(est),
-            dur=fmt_duration(duration),
-        )
-
-    if not stems:
-        return _empty_result(
-            "⚠️ No stems were produced.",
-            est=fmt_duration(est),
-            dur=fmt_duration(duration),
-        )
-
-    return _build_success_result(
-        stems=stems,
-        input_audio=input_audio,
-        use_case=use_case,
-        chosen_model=chosen_model,
-        duration=duration,
-        est=est,
-    )
-
-
-def _apply_advanced_overrides(
-    arch_params: dict[str, Any],
-    *,
-    architecture: str,
-    seg_size: int,
-    override_seg: bool,
-    overlap_rof: int,
-    overlap_mdx: float,
-    pitch_shift: int,
-    hop_length: int,
-    enable_denoise: bool,
-    window_size: int,
-    aggression: int,
-    enable_tta: bool,
-    enable_post: bool,
-    post_thresh: float,
-    enable_high_end: bool,
-    shifts: int,
-    segments_enabled: bool,
-) -> None:
-    """Mutate `arch_params` in place with the advanced-mode slider values."""
-    if architecture in ("roformer", "mdx23c"):
-        arch_params.update(
-            segment_size=seg_size,
-            override_segment_size=override_seg,
-            pitch_shift=pitch_shift,
-            overlap=overlap_rof,
-        )
-    elif architecture == "mdx":
-        arch_params.update(
-            hop_length=hop_length,
-            segment_size=seg_size,
-            overlap=overlap_mdx,
-            enable_denoise=enable_denoise,
-        )
-    elif architecture == "vr":
-        arch_params.update(
-            window_size=window_size,
-            aggression=aggression,
-            enable_tta=enable_tta,
-            enable_post_process=enable_post,
-            post_process_threshold=post_thresh,
-            high_end_process=enable_high_end,
-        )
-    elif architecture == "demucs":
-        arch_params.update(
-            segment_size=seg_size,
-            shifts=shifts,
-            overlap=overlap_mdx,
-            segments_enabled=segments_enabled,
-        )
-
-
-def _build_success_result(
-    *,
-    stems: dict[str, str],
-    input_audio: str,
-    use_case: str,
-    chosen_model: str,
-    duration: float,
-    est: float,
-):
-    """Compose the 14-tuple return value for a successful separation."""
-    # Stable ordering: prefer common stem names first.
-    ordered_labels = [l for l in _PREFERRED_STEM_ORDER if l in stems]
-    ordered_labels += [l for l in stems.keys() if l not in ordered_labels]
-
-    out_paths: list[str | None] = [None] * N_STEMS
-    out_labels: list[str | None] = [None] * N_STEMS
-    for i, label in enumerate(ordered_labels[:N_STEMS]):
-        out_paths[i] = stems[label]
-        out_labels[i] = label
-
-    zip_path = package_stems_as_zip(stems, Path(input_audio).stem)
-
-    append_history({
-        "time": now_timestamp(),
-        "use_case": use_case,
-        "model": chosen_model,
-        "input": Path(input_audio).name,
-        "duration": fmt_duration(duration),
-        "stems": ordered_labels,
-    })
-
-    # Per-stem gr.update() with label-aware component updates.
-    stem_updates = []
-    for i in range(N_STEMS):
-        if out_paths[i] is not None:
-            stem_updates.append(
-                gr.update(value=out_paths[i], visible=True,
-                          label=f"🎵 Stem: {out_labels[i]}")
-            )
-        else:
-            stem_updates.append(gr.update(value=None, visible=False))
-
-    n_stems = len(stems)
-    n_rows_visible = sum([n_stems > 0, n_stems > 2, n_stems > 4])
-
-    status_done = (
-        f"✅ **Done!** {n_stems} stem(s) produced: {', '.join(ordered_labels)}  •  "
-        f"Input duration {fmt_duration(duration)}  •  "
-        f"Model `{chosen_model}`  •  Device {DEVICE.upper()}"
-    )
-
-    return (
-        stem_updates[0], stem_updates[1], stem_updates[2],
-        stem_updates[3], stem_updates[4], stem_updates[5],
-        zip_path,
-        status_done,
-        gr.update(visible=n_rows_visible >= 1),
-        gr.update(visible=n_rows_visible >= 2),
-        gr.update(visible=n_rows_visible >= 3),
-        fmt_duration(est),
-        fmt_duration(duration),
-        history_rows(),
-    )
-
-
-def _empty_result(
-    status: str = "Ready.",
-    est: str = "—",
-    dur: str = "—",
-):
-    """Compose the 14-tuple return value for an empty / cleared state."""
-    return (
-        gr.update(value=None, visible=False),
-        gr.update(value=None, visible=False),
-        gr.update(value=None, visible=False),
-        gr.update(value=None, visible=False),
-        gr.update(value=None, visible=False),
-        gr.update(value=None, visible=False),
-        None,
-        status,
-        gr.update(visible=False),
-        gr.update(visible=False),
-        gr.update(visible=False),
-        est,
-        dur,
-        history_rows(),
-    )
-
-
-# --------------------------------------------------------------------------- #
-#  UI helper callbacks                                                        #
-# --------------------------------------------------------------------------- #
-
-def on_preset_change(use_case: str):
-    """When the user picks a use-case preset, sync the model dropdown,
-    show a friendly description, and reveal the matching advanced group.
-    """
-    preset = USE_CASE_PRESETS.get(use_case, {})
-    arch = preset.get("architecture", "roformer")
-    model = preset.get("model", "")
-    desc = preset.get("description", "")
-    return (
-        gr.update(value=model, choices=model_choices_for_arch(arch)),
-        f"ℹ️  {desc}" if desc else "",
-        gr.update(visible=arch in ("roformer", "mdx23c")),
-        gr.update(visible=arch == "mdx"),
-        gr.update(visible=arch == "vr"),
-        gr.update(visible=arch == "demucs"),
-    )
-
-
-def on_model_change(model_name: str):
-    """When the user manually picks a different model, infer its
-    architecture and reveal the matching advanced group.
-    """
-    arch = infer_architecture_from_model(model_name)
-    return (
-        gr.update(visible=arch in ("roformer", "mdx23c")),
-        gr.update(visible=arch == "mdx"),
-        gr.update(visible=arch == "vr"),
-        gr.update(visible=arch == "demucs"),
-    )
-
-
-def clear_outputs():
-    """Reset all output components to their initial empty state."""
-    return _empty_result("Ready.")

main/ui.py

@@ -1,832 +0,0 @@
-"""Gradio UI for Audio Separator — Improved Demo.
-
-Theme philosophy (inspired by the Gradio Server blog's "bring your own
-frontend" aesthetic — dark canvas, expressive display type, glass surfaces,
-electric-lime accent matching the waveform).
-"""
-from __future__ import annotations
-
-import os
-
-import gradio as gr
-
-from .config import DEFAULT_MODEL_DIR, DEFAULT_OUTPUT_DIR, DEVICE, HAS_SEPARATOR
-from .models import ROFORMER_MODELS, USE_CASE_PRESETS
-from .utils import history_rows
-from .callbacks import (
-    clear_outputs,
-    on_model_change,
-    on_preset_change,
-    run_separation,
-)
-
-
-# --------------------------------------------------------------------------- #
-#  Theme                                                                       #
-# --------------------------------------------------------------------------- #
-# `gr.themes.Base` is the only Gradio base that lets us push true black (#000)
-# through every layer. `Soft` and `Default` bake in subtle gray washes that
-# fight the look we want.
-
-theme = gr.themes.Base(
-    primary_hue=gr.themes.Color(
-        c50="#fafff0", c100="#f0ffcc", c200="#e0ff99", c300="#c6ff00",
-        c400="#aee000", c500="#86b300", c600="#5f8000", c700="#3d5200",
-        c800="#1f2b00", c900="#0e1500", c950="#070a00",
-    ),
-    secondary_hue=gr.themes.Color(
-        c50="#f5f5f7", c100="#ebebef", c200="#d7d7df", c300="#b8b8c4",
-        c400="#8f8fa0", c500="#6b6b7a", c600="#4f4f5c", c700="#363642",
-        c800="#1f1f29", c900="#121218", c950="#08080c",
-    ),
-    neutral_hue=gr.themes.Color(
-        c50="#fafafa", c100="#f0f0f0", c200="#d8d8d8", c300="#b4b4b4",
-        c400="#888888", c500="#5e5e5e", c600="#3e3e3e", c700="#262626",
-        c800="#161616", c900="#0a0a0a", c950="#000000",
-    ),
-    font=[gr.themes.GoogleFont("Syne"), "Arial", "sans-serif"],
-    font_mono=[gr.themes.GoogleFont("JetBrains Mono"), "ui-monospace", "monospace"],
-    radius_size="lg",
-)
-
-
-# --------------------------------------------------------------------------- #
-#  Custom CSS — the heart of the "cooler theme"                                #
-# --------------------------------------------------------------------------- #
-# Gradio emits its own CSS first; ours loads after via `Blocks(css=...)` and
-# wins on equal specificity. We use high-specificity selectors (id + class
-# or `:where(...)`) to avoid `!important` where possible, but a few rules
-# do need `!important` to override Gradio's inline styles.
-
-CUSTOM_CSS = """
-/* =========================================================== *
- *  Root tokens — single source of truth for the look
- * =========================================================== */
-:root {
-    --as-bg:           #000000;
-    --as-bg-elev-1:    #0a0a0c;
-    --as-bg-elev-2:    #121217;
-    --as-bg-elev-3:    #1b1b22;
-    --as-border:       #232330;
-    --as-border-soft:  #16161c;
-    --as-text:         #f5f5f7;
-    --as-text-dim:     #9b9bab;
-    --as-text-mute:    #5e5e6a;
-    --as-accent:       #c6ff00;
-    --as-accent-dim:   #86b300;
-    --as-accent-glow:  rgba(198, 255, 0, 0.18);
-    --as-danger:       #ff4d6d;
-    --as-success:      #00d68f;
-    --as-warning:      #ffb800;
-    --as-radius:       14px;
-    --as-radius-sm:    8px;
-    --as-shadow:       0 1px 0 rgba(255,255,255,0.04) inset,
-                       0 8px 24px rgba(0,0,0,0.45);
-    --as-blur:         blur(14px) saturate(140%);
-    --as-font-display: "Syne", "Arial", sans-serif;
-    --as-font-body:    "Inter", system-ui, -apple-system, sans-serif;
-    --as-font-mono:    "JetBrains Mono", ui-monospace, monospace;
-}
-
-/* =========================================================== *
- *  Body / canvas
- * =========================================================== */
-html, body {
-    background: var(--as-bg) !important;
-    color: var(--as-text);
-    font-family: var(--as-font-body);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-/* Subtle radial glow that lives behind everything — gives the black some
-   depth without being noisy. Pinned to the viewport so it doesn't scroll. */
-body::before {
-    content: "";
-    position: fixed;
-    inset: 0;
-    z-index: 0;
-    pointer-events: none;
-    background:
-        radial-gradient(900px 600px at 12% -10%, rgba(198,255,0,0.08), transparent 60%),
-        radial-gradient(700px 500px at 92% 8%, rgba(120,80,255,0.10), transparent 65%),
-        radial-gradient(800px 800px at 50% 120%, rgba(0,140,255,0.06), transparent 70%);
-}
-.gradio-container, .gradio-container > * {
-    position: relative;
-    z-index: 1;
-}
-
-/* Constrain width and add breathing room. */
-.gradio-container {
-    max-width: 1320px !important;
-    padding: 32px 28px 80px !important;
-}
-
-/* =========================================================== *
- *  Hero
- * =========================================================== */
-#hero {
-    position: relative;
-    padding: 40px 32px 32px;
-    margin: -8px -8px 28px;
-    border-radius: var(--as-radius);
-    background:
-        linear-gradient(135deg, rgba(198,255,0,0.06) 0%, transparent 40%),
-        linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0));
-    border: 1px solid var(--as-border);
-    overflow: hidden;
-}
-#hero::before {
-    content: "";
-    position: absolute;
-    top: -1px; left: -1px; right: -1px;
-    height: 1px;
-    background: linear-gradient(90deg,
-        transparent, var(--as-accent) 30%, var(--as-accent) 70%, transparent);
-    opacity: 0.55;
-}
-#hero h1 {
-    font-family: var(--as-font-display);
-    font-weight: 800;
-    font-size: clamp(2.4rem, 5vw, 3.6rem);
-    line-height: 1.05;
-    letter-spacing: -0.02em;
-    margin: 0 0 14px;
-    background: linear-gradient(180deg, #ffffff 0%, #b0b0b8 100%);
-    -webkit-background-clip: text;
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
-}
-#hero h1::after {
-    content: "";
-    display: inline-block;
-    width: 10px; height: 10px;
-    margin-left: 6px;
-    border-radius: 50%;
-    background: var(--as-accent);
-    box-shadow: 0 0 12px var(--as-accent);
-    vertical-align: middle;
-    transform: translateY(-0.5em);
-    animation: as-pulse 2.2s ease-in-out infinite;
-}
-#hero p {
-    font-size: 1rem;
-    line-height: 1.55;
-    color: var(--as-text-dim);
-    max-width: 720px;
-    margin: 0;
-}
-#hero code {
-    font-family: var(--as-font-mono);
-    color: var(--as-accent);
-    background: rgba(198,255,0,0.08);
-    border: 1px solid rgba(198,255,0,0.15);
-    padding: 1px 6px;
-    border-radius: 4px;
-    font-size: 0.86em;
-}
-
-@keyframes as-pulse {
-    0%, 100% { opacity: 1; transform: translateY(-0.5em) scale(1); }
-    50%      { opacity: 0.4; transform: translateY(-0.5em) scale(0.75); }
-}
-
-/* =========================================================== *
- *  Section labels — small caps divider
- * =========================================================== */
-.section-label {
-    font-family: var(--as-font-mono);
-    font-size: 0.7rem;
-    font-weight: 600;
-    letter-spacing: 0.18em;
-    text-transform: uppercase;
-    color: var(--as-accent);
-    padding: 6px 0 14px;
-    margin: 0 0 14px;
-    border-bottom: 1px solid var(--as-border-soft);
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-.section-label::before {
-    content: "";
-    width: 6px; height: 6px;
-    background: var(--as-accent);
-    border-radius: 50%;
-    box-shadow: 0 0 8px var(--as-accent);
-}
-
-/* =========================================================== *
- *  Gradio panel / column surfaces — glassmorphism
- * =========================================================== */
-.gradio-container .form,
-.gradio-container .block,
-.gradio-container .gr-block,
-.gradio-container .gr-panel,
-.gradio-container .gap,
-.gradio-container .wrap {
-    background: var(--as-bg-elev-1);
-    border-color: var(--as-border) !important;
-}
-
-/* The two main columns. */
-.gradio-container > .containing > * {
-    /* No-op: just a hook in case we want column-level tweaks. */
-}
-
-/* =========================================================== *
- *  Metric tiles — duration / estimated time
- * =========================================================== */
-.metric-tile {
-    background: linear-gradient(180deg, var(--as-bg-elev-2), var(--as-bg-elev-1)) !important;
-    border: 1px solid var(--as-border) !important;
-    border-left: 3px solid var(--as-accent) !important;
-    border-radius: var(--as-radius-sm) !important;
-    padding: 14px 16px !important;
-    box-shadow: var(--as-shadow);
-}
-.metric-tile label {
-    font-family: var(--as-font-mono) !important;
-    font-size: 0.65rem !important;
-    letter-spacing: 0.16em !important;
-    text-transform: uppercase !important;
-    color: var(--as-text-mute) !important;
-    font-weight: 500 !important;
-}
-.metric-tile input,
-.metric-tile textarea {
-    font-family: var(--as-font-display) !important;
-    font-size: 1.5rem !important;
-    font-weight: 700 !important;
-    color: var(--as-text) !important;
-    background: transparent !important;
-}
-
-/* =========================================================== *
- *  Status box
- * =========================================================== */
-#status-box {
-    background: var(--as-bg-elev-1) !important;
-    border: 1px solid var(--as-border) !important;
-    border-left: 3px solid var(--as-accent) !important;
-    border-radius: var(--as-radius-sm) !important;
-    padding: 14px 18px !important;
-    min-height: 64px;
-    font-family: var(--as-font-body) !important;
-    color: var(--as-text) !important;
-}
-#status-box p { margin: 0; line-height: 1.55; }
-#status-box code {
-    font-family: var(--as-font-mono);
-    color: var(--as-accent);
-    background: rgba(198,255,0,0.08);
-    padding: 1px 5px;
-    border-radius: 3px;
-    font-size: 0.88em;
-}
-
-/* =========================================================== *
- *  Buttons — primary glows electric-lime
- * =========================================================== */
-.gradio-container button.primary,
-.gradio-container button[data-testid="primary-button"],
-.gradio-container .primary {
-    background: var(--as-accent) !important;
-    color: #000 !important;
-    border: 1px solid var(--as-accent) !important;
-    font-family: var(--as-font-display) !important;
-    font-weight: 700 !important;
-    letter-spacing: 0.01em;
-    box-shadow:
-        0 0 0 1px rgba(198,255,0,0.0) inset,
-        0 6px 18px rgba(198,255,0,0.20),
-        0 1px 0 rgba(255,255,255,0.18) inset !important;
-    transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
-}
-.gradio-container button.primary:hover,
-.gradio-container .primary:hover {
-    filter: brightness(1.08);
-    transform: translateY(-1px);
-    box-shadow:
-        0 0 0 1px rgba(198,255,0,0.30) inset,
-        0 10px 28px rgba(198,255,0,0.35),
-        0 1px 0 rgba(255,255,255,0.22) inset !important;
-}
-.gradio-container button.primary:active,
-.gradio-container .primary:active { transform: translateY(0); filter: brightness(0.95); }
-
-/* Secondary / default buttons — ghost style */
-.gradio-container button:not(.primary):not(.gradio-icon-button):not(.icon-button) {
-    background: var(--as-bg-elev-2) !important;
-    color: var(--as-text) !important;
-    border: 1px solid var(--as-border) !important;
-    font-family: var(--as-font-display) !important;
-    font-weight: 600 !important;
-    transition: all 0.15s ease !important;
-}
-.gradio-container button:not(.primary):not(.gradio-icon-button):not(.icon-button):hover {
-    border-color: var(--as-accent) !important;
-    color: var(--as-accent) !important;
-    background: rgba(198,255,0,0.04) !important;
-}
-
-/* =========================================================== *
- *  Inputs — textboxes, dropdowns, sliders
- * =========================================================== */
-.gradio-container input[type="text"],
-.gradio-container input[type="number"],
-.gradio-container textarea,
-.gradio-container select {
-    background: var(--as-bg-elev-2) !important;
-    border-color: var(--as-border) !important;
-    color: var(--as-text) !important;
-    border-radius: var(--as-radius-sm) !important;
-    font-family: var(--as-font-body) !important;
-    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
-}
-.gradio-container input[type="text"]:focus,
-.gradio-container input[type="number"]:focus,
-.gradio-container textarea:focus,
-.gradio-container select:focus {
-    outline: none !important;
-    border-color: var(--as-accent) !important;
-    box-shadow: 0 0 0 3px var(--as-accent-glow) !important;
-}
-
-/* Labels above inputs */
-.gradio-container label,
-.gradio-container .label-wrap > label {
-    color: var(--as-text-dim) !important;
-    font-family: var(--as-font-mono) !important;
-    font-size: 0.72rem !important;
-    letter-spacing: 0.08em !important;
-    text-transform: uppercase !important;
-    font-weight: 500 !important;
-}
-
-/* Slider track + thumb — electric-lime */
-.gradio-container input[type="range"] {
-    accent-color: var(--as-accent);
-}
-.gradio-container .range-wrap .range-info { color: var(--as-text-dim); }
-
-/* Checkboxes */
-.gradio-container input[type="checkbox"] {
-    accent-color: var(--as-accent);
-}
-
-/* =========================================================== *
- *  Accordion — clean dark surfaces, accent on hover
- * =========================================================== */
-.gradio-container .gr-accordion {
-    background: var(--as-bg-elev-1) !important;
-    border-color: var(--as-border) !important;
-    border-radius: var(--as-radius) !important;
-    overflow: hidden;
-}
-.gradio-container .gr-accordion > .label-wrap {
-    background: var(--as-bg-elev-2) !important;
-    border-bottom: 1px solid var(--as-border) !important;
-    color: var(--as-text) !important;
-    font-family: var(--as-font-display) !important;
-    font-weight: 600 !important;
-    padding: 14px 18px !important;
-    transition: background 0.15s ease !important;
-}
-.gradio-container .gr-accordion > .label-wrap:hover {
-    background: var(--as-bg-elev-3) !important;
-}
-
-/* =========================================================== *
- *  Audio component — recolor the waveform area
- * =========================================================== */
-.gradio-container .gradio-audio,
-.gradio-container .audio-container,
-.gradio-container [data-testid="audio"] {
-    background: var(--as-bg-elev-1) !important;
-    border: 1px solid var(--as-border) !important;
-    border-radius: var(--as-radius-sm) !important;
-    padding: 6px !important;
-}
-.gradio-container .gradio-audio label,
-.gradio-container .audio-container label {
-    color: var(--as-text-dim) !important;
-    font-family: var(--as-font-mono) !important;
-    font-size: 0.7rem !important;
-    letter-spacing: 0.12em !important;
-    text-transform: uppercase !important;
-}
-
-/* =========================================================== *
- *  File download — accent border for ZIP
- * =========================================================== */
-.gradio-container .gradio-file,
-.gradio-container [data-testid="file"] {
-    background: var(--as-bg-elev-1) !important;
-    border: 1px solid var(--as-border) !important;
-    border-left: 3px solid var(--as-accent) !important;
-    border-radius: var(--as-radius-sm) !important;
-    padding: 14px !important;
-}
-
-/* =========================================================== *
- *  DataFrame (history table)
- * =========================================================== */
-.gradio-container .gradio-dataframe table {
-    background: var(--as-bg-elev-1) !important;
-    color: var(--as-text) !important;
-    border-radius: var(--as-radius-sm) !important;
-    overflow: hidden;
-}
-.gradio-container .gradio-dataframe th {
-    background: var(--as-bg-elev-3) !important;
-    color: var(--as-accent) !important;
-    font-family: var(--as-font-mono) !important;
-    font-size: 0.7rem !important;
-    letter-spacing: 0.10em !important;
-    text-transform: uppercase !important;
-    font-weight: 600 !important;
-    border-bottom: 1px solid var(--as-border) !important;
-}
-.gradio-container .gradio-dataframe td {
-    border-color: var(--as-border-soft) !important;
-    font-family: var(--as-font-body) !important;
-    color: var(--as-text-dim) !important;
-}
-.gradio-container .gradio-dataframe tr:hover td {
-    background: rgba(198,255,0,0.04) !important;
-    color: var(--as-text) !important;
-}
-
-/* =========================================================== *
- *  Markdown content
- * =========================================================== */
-.gradio-container .prose,
-.gradio-container .markdown {
-    color: var(--as-text-dim) !important;
-    font-family: var(--as-font-body) !important;
-    line-height: 1.6;
-}
-.gradio-container .prose h1,
-.gradio-container .prose h2,
-.gradio-container .prose h3,
-.gradio-container .prose h4 {
-    color: var(--as-text) !important;
-    font-family: var(--as-font-display) !important;
-    font-weight: 700 !important;
-    letter-spacing: -0.01em;
-}
-.gradio-container .prose code {
-    color: var(--as-accent);
-    background: rgba(198,255,0,0.08);
-    border: 1px solid rgba(198,255,0,0.15);
-    padding: 1px 6px;
-    border-radius: 4px;
-    font-family: var(--as-font-mono);
-    font-size: 0.88em;
-}
-.gradio-container .prose a {
-    color: var(--as-accent) !important;
-    text-decoration: none;
-    border-bottom: 1px dashed rgba(198,255,0,0.4);
-}
-.gradio-container .prose a:hover { border-bottom-style: solid; }
-
-/* =========================================================== *
- *  Footer
- * =========================================================== */
-.app-footer {
-    margin-top: 36px;
-    padding: 18px 22px;
-    border-top: 1px solid var(--as-border);
-    color: var(--as-text-mute);
-    font-family: var(--as-font-mono);
-    font-size: 0.72rem;
-    letter-spacing: 0.10em;
-    text-transform: uppercase;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 18px;
-    align-items: center;
-}
-.app-footer b {
-    color: var(--as-accent);
-    font-weight: 700;
-    margin-left: 6px;
-}
-.app-footer .dot {
-    color: var(--as-text-mute);
-    opacity: 0.4;
-}
-
-/* =========================================================== *
- *  Scrollbar — thin, dark, accent on hover
- * =========================================================== */
-::-webkit-scrollbar { width: 10px; height: 10px; }
-::-webkit-scrollbar-track { background: var(--as-bg); }
-::-webkit-scrollbar-thumb {
-    background: var(--as-bg-elev-3);
-    border-radius: 5px;
-    border: 2px solid var(--as-bg);
-}
-::-webkit-scrollbar-thumb:hover { background: #2a2a36; }
-
-/* =========================================================== *
- *  Selection
- * =========================================================== */
-::selection {
-    background: var(--as-accent);
-    color: #000;
-}
-"""
-
-
-# --------------------------------------------------------------------------- #
-#  App layout                                                                 #
-# --------------------------------------------------------------------------- #
-
-def build_app() -> gr.Blocks:
-    """Construct the Gradio Blocks UI. Does not launch."""
-
-    with gr.Blocks(
-        title="Audio Separator — Improved Demo",
-        theme=theme,
-        css=CUSTOM_CSS,
-        analytics_enabled=False,
-    ) as app:
-        # ---- Hero ----
-        gr.HTML(
-            "<div id='hero'>"
-            "<h1>Audio&nbsp;Separator</h1>"
-            "<p>Upload → pick a use case → get labelled stems, ZIP download. "
-            "Powered by <code>audio-separator</code> + Gradio.</p>"
-            "</div>"
-        )
-
-        with gr.Row(equal_height=False):
-            # ================ LEFT COLUMN: input + presets ================
-            with gr.Column(scale=1, min_width=380):
-                gr.HTML('<div class="section-label">Input & Use Case</div>')
-
-                input_audio = gr.Audio(
-                    label="Input Audio",
-                    type="filepath",
-                    waveform_options=gr.WaveformOptions(
-                        show_recording_waveform=True,
-                        waveform_color="#c6ff00",
-                        waveform_progress_color="#ffffff",
-                    ),
-                )
-
-                use_case = gr.Dropdown(
-                    label="Use Case (one-click preset)",
-                    choices=list(USE_CASE_PRESETS.keys()),
-                    value="Karaoke (vocals out)",
-                    info="Pick a goal — we'll choose the best model + params.",
-                )
-                preset_desc = gr.Markdown(
-                    f"ℹ️  {USE_CASE_PRESETS['Karaoke (vocals out)']['description']}",
-                )
-
-                model_display_name = gr.Dropdown(
-                    label="Model (auto-selected, override anytime)",
-                    choices=list(ROFORMER_MODELS.keys()),
-                    value="MelBand Roformer | Karaoke V2 by Gabox",
-                    interactive=True,
-                    allow_custom_value=True,
-                )
-
-                advanced_toggle = gr.Checkbox(
-                    label="🔧 Advanced mode (show all parameters)",
-                    value=False,
-                )
-
-                with gr.Accordion("📂 Global settings", open=False):
-                    model_file_dir = gr.Textbox(
-                        value=DEFAULT_MODEL_DIR,
-                        label="Model cache directory",
-                        info="Where downloaded model weights are stored.",
-                    )
-                    output_dir = gr.Textbox(
-                        value=DEFAULT_OUTPUT_DIR,
-                        label="Output directory",
-                        info="Where separated stems are written.",
-                    )
-                    out_format = gr.Dropdown(
-                        value="wav",
-                        choices=["wav", "flac", "mp3"],
-                        label="Output format",
-                        info="MP3 is encoded at 320 kbps (not the library's 128 kbps default).",
-                    )
-                    norm_thresh = gr.Slider(
-                        0.1, 1.0, 0.1, 0.9,
-                        label="Normalization threshold",
-                    )
-                    amp_thresh = gr.Slider(
-                        0.1, 1.0, 0.1, 0.6,
-                        label="Amplification threshold",
-                    )
-                    batch_size = gr.Slider(
-                        1, 16, 1, 1,
-                        label="Batch size (higher = more RAM, possibly faster)",
-                    )
-
-                separate_btn = gr.Button(
-                    "🚀 Separate Audio",
-                    variant="primary",
-                    size="lg",
-                )
-                clear_btn = gr.Button("🧹 Clear outputs", variant="secondary")
-
-            # ================ RIGHT COLUMN: outputs ================
-            with gr.Column(scale=1, min_width=380):
-                gr.HTML('<div class="section-label">Output Stems</div>')
-
-                with gr.Row():
-                    dur_box = gr.Textbox(
-                        "—", label="Input duration", interactive=False,
-                        elem_classes=["metric-tile"],
-                    )
-                    est_box = gr.Textbox(
-                        "—", label="Estimated processing time",
-                        interactive=False,
-                        elem_classes=["metric-tile"],
-                    )
-
-                status_box = gr.Markdown(
-                    "Ready. Upload an audio file and click **Separate Audio**.",
-                    elem_id="status-box",
-                )
-
-                # Up to 6 stems (Demucs 6s), arranged 2-per-row.
-                with gr.Row(visible=False) as stem_row_1:
-                    stem_1 = gr.Audio(label="🎵 Stem: Vocals",
-                                      type="filepath", interactive=False, visible=False)
-                    stem_2 = gr.Audio(label="🎵 Stem: Instrumental",
-                                      type="filepath", interactive=False, visible=False)
-                with gr.Row(visible=False) as stem_row_2:
-                    stem_3 = gr.Audio(label="🎵 Stem: Drums",
-                                      type="filepath", interactive=False, visible=False)
-                    stem_4 = gr.Audio(label="🎵 Stem: Bass",
-                                      type="filepath", interactive=False, visible=False)
-                with gr.Row(visible=False) as stem_row_3:
-                    stem_5 = gr.Audio(label="🎵 Stem: Other",
-                                      type="filepath", interactive=False, visible=False)
-                    stem_6 = gr.Audio(label="🎵 Stem: Guitar/Piano",
-                                      type="filepath", interactive=False, visible=False)
-
-                zip_file = gr.File(label="📦 Download all stems (.zip)")
-
-        # ================ Advanced parameters (per-architecture) ================
-        with gr.Accordion("⚙️ Advanced parameters (architecture-specific)",
-                          open=False):
-            with gr.Group(visible=True) as adv_rof:
-                gr.HTML('<div class="section-label">Roformer / MDX23C</div>')
-                with gr.Row():
-                    seg_size = gr.Slider(32, 4000, 32, 256, label="Segment size")
-                    override_seg = gr.Checkbox(False, label="Override model seg size")
-                    overlap_rof = gr.Slider(2, 50, 1, 8, label="Overlap")
-                    pitch_shift = gr.Slider(-12, 12, 1, 0, label="Pitch shift (semitones)")
-
-            with gr.Group(visible=False) as adv_mdx:
-                gr.HTML('<div class="section-label">MDX-NET</div>')
-                with gr.Row():
-                    hop_length = gr.Slider(32, 2048, 32, 1024, label="Hop length")
-                    overlap_mdx = gr.Slider(0.001, 0.999, 0.001, 0.25,
-                                            label="Overlap (MDX/Demucs)")
-                    enable_denoise = gr.Checkbox(False, label="Enable denoise")
-
-            with gr.Group(visible=False) as adv_vr:
-                gr.HTML('<div class="section-label">VR Arch</div>')
-                with gr.Row():
-                    window_size = gr.Slider(320, 1024, 32, 512, label="Window size")
-                    aggression = gr.Slider(1, 50, 1, 5, label="Aggression")
-                    enable_tta = gr.Checkbox(False, label="Enable TTA")
-                    enable_post = gr.Checkbox(False, label="Enable post-process")
-                    post_thresh = gr.Slider(0.1, 0.3, 0.1, 0.2,
-                                            label="Post-process threshold")
-                    enable_high_end = gr.Checkbox(False, label="High-end processing")
-
-            with gr.Group(visible=False) as adv_demucs:
-                gr.HTML('<div class="section-label">Demucs</div>')
-                with gr.Row():
-                    shifts = gr.Slider(0, 20, 1, 2, label="Shifts")
-                    segments_enabled = gr.Checkbox(True, label="Enable segments")
-
-        # ================ History ================
-        with gr.Accordion("🕘 Recent separations", open=False):
-            history_table = gr.Dataframe(
-                headers=["Time", "Use Case", "Model", "Input", "Stems"],
-                datatype=["str", "str", "str", "str", "str"],
-                value=history_rows(),
-                wrap=True,
-                interactive=False,
-            )
-
-        # ================ FAQ ================
-        with gr.Accordion("📖 How to use / FAQ", open=False):
-            gr.Markdown(_FAQ_MARKDOWN)
-
-        # ================ Footer ================
-        sep_status = ("installed" if HAS_SEPARATOR
-                      else "MISSING — pip install 'audio-separator[gpu]'")
-        gr.HTML(
-            f"<div class='app-footer'>"
-            f"<span>DEVICE <b>{DEVICE.upper()}</b></span>"
-            f"<span class='dot'>·</span>"
-            f"<span>ENGINE <b>{sep_status}</b></span>"
-            f"<span class='dot'>·</span>"
-            f"<span>THEME <b>BLACK / SYNE</b></span>"
-            f"</div>"
-        )
-
-        # ---- Event wiring ----
-        use_case.change(
-            on_preset_change,
-            inputs=[use_case],
-            outputs=[
-                model_display_name, preset_desc,
-                adv_rof, adv_mdx, adv_vr, adv_demucs,
-            ],
-        )
-        model_display_name.change(
-            on_model_change,
-            inputs=[model_display_name],
-            outputs=[adv_rof, adv_mdx, adv_vr, adv_demucs],
-        )
-
-        separate_btn.click(
-            run_separation,
-            inputs=[
-                input_audio, use_case, model_display_name, advanced_toggle,
-                seg_size, override_seg, overlap_rof, overlap_mdx, pitch_shift,
-                hop_length, enable_denoise,
-                window_size, aggression, enable_tta, enable_post, post_thresh,
-                enable_high_end,
-                shifts, segments_enabled,
-                model_file_dir, output_dir, out_format,
-                norm_thresh, amp_thresh, batch_size,
-            ],
-            outputs=[
-                stem_1, stem_2, stem_3, stem_4, stem_5, stem_6,
-                zip_file, status_box,
-                stem_row_1, stem_row_2, stem_row_3,
-                est_box, dur_box, history_table,
-            ],
-        )
-
-        clear_btn.click(
-            clear_outputs,
-            outputs=[
-                stem_1, stem_2, stem_3, stem_4, stem_5, stem_6,
-                zip_file, status_box,
-                stem_row_1, stem_row_2, stem_row_3,
-                est_box, dur_box, history_table,
-            ],
-        )
-
-    return app
-
-
-# --------------------------------------------------------------------------- #
-#  FAQ content (kept here so it lives next to the UI it renders into)         #
-# --------------------------------------------------------------------------- #
-
-_FAQ_MARKDOWN = """
-#### Quick start
-1. **Upload or record** audio in the input box on the left.
-2. **Pick a use case** from the dropdown — the right model is auto-selected.
-3. Click **🚀 Separate Audio**. The first run downloads the model (can be hundreds of MB).
-4. Listen to each stem, A/B against the input, and download a ZIP of everything.
-
-#### When to override the model
-- **Karaoke** → `MelBand Roformer | Karaoke V2 by Gabox` is a great default.
-- **Clean a cappella** → `BS-Roformer-Viperx-1297` (highest reported SDR).
-- **De-reverb** → `MelBand Roformer | De-Reverb by anvuew`.
-- **De-noise** → `Mel-Roformer-Denoise-Aufr33`.
-- **Multi-stem remix** → `htdemucs_ft.yaml` (4 stems) or `htdemucs_6s.yaml` (6 stems).
-- **CPU-only / speed** → `UVR-MDX-NET-Inst_HQ_3.onnx`.
-
-#### Advanced parameters cheat sheet
-| Param | Effect |
-|---|---|
-| `segment_size` | Larger = better quality, more RAM. |
-| `overlap` | Higher = better quality, slower. |
-| `pitch_shift` | Shifts pitch ±12 semitones during processing (Roformer/MDX23C). |
-| `enable_denoise` | MDX-NET only — removes residual noise on stems. |
-| `enable_tta` | VR Arch — Test-Time Augmentation, slower but cleaner. |
-| `shifts` | Demucs — number of random-shift passes (higher = better, slower). |
-
-#### Tips
-- For best results use lossless inputs (WAV/FLAC).
-- Models auto-cache in `Model cache directory` — first run is slow, later runs are fast.
-- Use **Advanced mode** to expose every parameter the upstream HF Space exposes.
-- MP3 output is encoded at **320 kbps** (the upstream library's 128 kbps default is overridden).
-- Transient `librosa.ParameterError` failures are automatically retried once.
-
-#### Credits
-- Upstream: [nomadkaraoke/audio-separator](https://huggingface.co/spaces/nomadkaraoke/audio-separator) HF Space.
-- Engine: [`audio-separator`](https://github.com/nomadkaraoke/python-audio-separator) by @berevadb.
-- Models: various community contributors (UVR, Gabox, Aufr33, Viperx, Sucial, anvuew, Unwa, …).
-"""

requirements.txt

@@ -1,23 +1,26 @@
-# Audio Separator — Improved Demo: dependencies
+# Audio Separator — Gradio Server Edition: dependencies
 # =================================================
 #
+# This version uses `gradio.Server` (introduced in gradio 6.x) — see
+# https://huggingface.co/blog/introducing-gradio-server
+#
 # Recommended install (CPU, ~1.5 GB on disk):
 #
 #   python3 -m venv venv
 #   source venv/bin/activate
 #
 #   # 1) Install CPU-only torch FIRST (skips CUDA libs, saves ~4 GB).
-#   pip install --index-url https://download.pytorch.org/whl/cpu torch torchaudio torchvision
+#   pip install --index-url https://download.pytorch.org/whl/cpu torch torchaudio
 #
 #   # 2) Then install the rest. `--no-deps` for audio-separator prevents
 #   #    pip from re-installing the CUDA-enabled torch.
-#   pip install "gradio>=5.0,<6.0"
+#   pip install "gradio>=6.0"
 #   pip install --no-deps "audio-separator[cpu]>=0.44.0"
 #   pip install --no-deps \
 #       librosa ml_collections einops julius rotary-embedding-torch \
-#       onnx2torch-py313 onnx-weekly resampy samplerate diffq \
+#       onnx2torch-py313 resampy samplerate diffq \
 #       beartype pydub soundfile lazy_loader numba llvmlite pooch \
-#       ml_dtypes cffi
+#       ml_dtypes cffi onnxruntime
 #
 #   # 3) System dependency:
 #   #   sudo apt-get install -y ffmpeg        # Debian/Ubuntu
@@ -25,15 +28,16 @@
 #
 # Simpler one-liner that works if disk space is not a concern:
 #
-#   pip install "audio-separator[cpu]>=0.44.0" "gradio>=5.0,<6.0"
+#   pip install "audio-separator[cpu]>=0.44.0" "gradio>=6.0"
 #
 # (This pulls in the default CUDA-enabled torch on Linux, ~5 GB.)
 #
 # For NVIDIA GPU acceleration (CUDA 12.x):
 #
-#   pip install "audio-separator[gpu]>=0.44.0" "gradio>=5.0,<6.0"
+#   pip install "audio-separator[gpu]>=0.44.0" "gradio>=6.0"
 #
 # =================================================
 
-gradio>=5.0,<6.0
+gradio>=6.0
 audio-separator[cpu]>=0.44.0
+

static/app.js

@@ -0,0 +1,544 @@
+/* ============================================================ *
+ *  Audio Separator — Gradio Server Edition
+ *  Vanilla JS — talks to the backend via the Gradio JS client.
+ *
+ *  Pattern (straight from the blog):
+ *    import { Client, handle_file } from "@gradio/client";
+ *    const client = await Client.connect(window.location.origin);
+ *    const result = await client.predict("/api_name", { ...payload });
+ *    const url = result.data[0].url;  // FileData URL
+ * ============================================================ */
+
+(function () {
+  "use strict";
+
+  // The Gradio JS client is loaded as a global from CDN (see index.html).
+  // It exposes `window.gradio` with `Client` and `handle_file`.
+  const { Client, handle_file } = window.gradio;
+
+  // ------------------------------------------------------------------ //
+  //  State                                                              //
+  // ------------------------------------------------------------------ //
+  const state = {
+    presets: null,
+    selectedFile: null,
+    isWorking: false,
+    client: null,
+  };
+
+  // ------------------------------------------------------------------ //
+  //  DOM helpers                                                        //
+  // ------------------------------------------------------------------ //
+  const $ = (sel) => document.querySelector(sel);
+  const $$ = (sel) => document.querySelectorAll(sel);
+
+  function el(tag, attrs = {}, ...children) {
+    const node = document.createElement(tag);
+    for (const [k, v] of Object.entries(attrs)) {
+      if (k === "class") node.className = v;
+      else if (k === "html") node.innerHTML = v;
+      else if (k.startsWith("on") && typeof v === "function") {
+        node.addEventListener(k.slice(2).toLowerCase(), v);
+      } else if (v !== null && v !== undefined) {
+        node.setAttribute(k, v);
+      }
+    }
+    for (const child of children) {
+      if (child === null || child === undefined) continue;
+      node.appendChild(typeof child === "string" ? document.createTextNode(child) : child);
+    }
+    return node;
+  }
+
+  // ------------------------------------------------------------------ //
+  //  Status / metrics                                                   //
+  // ------------------------------------------------------------------ //
+  function setStatus(text, kind = "ready") {
+    const box = $("#status");
+    box.className = `status ${kind}`;
+    box.innerHTML = text;
+  }
+
+  function setMetrics({ dur = "—", est = "—", stems = "—" } = {}) {
+    $("#metric-dur").textContent = dur;
+    $("#metric-est").textContent = est;
+    $("#metric-stems").textContent = stems;
+  }
+
+  // ------------------------------------------------------------------ //
+  //  Slider value display                                               //
+  // ------------------------------------------------------------------ //
+  function bindSliderDisplay(sliderId, displayId, formatter = (v) => v) {
+    const slider = document.getElementById(sliderId);
+    const display = document.getElementById(displayId);
+    if (!slider || !display) return;
+    const update = () => { display.textContent = formatter(slider.value); };
+    slider.addEventListener("input", update);
+    update();
+  }
+
+  // ------------------------------------------------------------------ //
+  //  Dropzone & file input                                              //
+  // ------------------------------------------------------------------ //
+  function initDropzone() {
+    const dz = $("#dropzone");
+    const input = $("#file-input");
+    const preview = $("#preview");
+    const previewWrap = $("#preview-wrap");
+    const previewName = $("#preview-name");
+    const previewDur = $("#preview-dur");
+    const clearBtn = $("#clear-input");
+    const separateBtn = $("#separate-btn");
+
+    function handleFile(file) {
+      if (!file) return;
+      if (!file.type.startsWith("audio/") && !/\.(wav|mp3|flac|m4a|ogg|aac|opus)$/i.test(file.name)) {
+        setStatus(`⚠️ "${file.name}" doesn't look like an audio file. Try anyway?`, "error");
+      }
+      state.selectedFile = file;
+      const url = URL.createObjectURL(file);
+      preview.src = url;
+      previewName.textContent = file.name;
+      previewDur.textContent = `${(file.size / 1024 / 1024).toFixed(2)} MB`;
+      previewWrap.hidden = false;
+      dz.style.display = "none";
+      separateBtn.disabled = false;
+      setStatus(`Ready. Click <strong>Separate audio</strong> to process <code>${file.name}</code>.`);
+    }
+
+    function clearFile() {
+      state.selectedFile = null;
+      preview.src = "";
+      previewWrap.hidden = true;
+      dz.style.display = "";
+      separateBtn.disabled = true;
+      setStatus("Ready. Upload audio and click <strong>Separate</strong>.");
+      setMetrics({});
+    }
+
+    // Click to browse
+    dz.addEventListener("click", () => input.click());
+    dz.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        input.click();
+      }
+    });
+
+    // File picker
+    input.addEventListener("change", (e) => {
+      const file = e.target.files && e.target.files[0];
+      if (file) handleFile(file);
+    });
+
+    // Drag & drop
+    ["dragenter", "dragover"].forEach((ev) => {
+      dz.addEventListener(ev, (e) => {
+        e.preventDefault();
+        dz.classList.add("dragging");
+      });
+    });
+    ["dragleave", "drop"].forEach((ev) => {
+      dz.addEventListener(ev, (e) => {
+        e.preventDefault();
+        dz.classList.remove("dragging");
+      });
+    });
+    dz.addEventListener("drop", (e) => {
+      const file = e.dataTransfer.files && e.dataTransfer.files[0];
+      if (file) handleFile(file);
+    });
+
+    clearBtn.addEventListener("click", clearFile);
+
+    // Compute duration once metadata loads
+    preview.addEventListener("loadedmetadata", () => {
+      const s = preview.duration;
+      if (isFinite(s)) {
+        const mm = Math.floor(s / 60).toString().padStart(2, "0");
+        const ss = Math.floor(s % 60).toString().padStart(2, "0");
+        previewDur.textContent = `${mm}:${ss} · ${(state.selectedFile.size / 1024 / 1024).toFixed(2)} MB`;
+      }
+    });
+  }
+
+  // ------------------------------------------------------------------ //
+  //  Preset / model dropdowns                                           //
+  // ------------------------------------------------------------------ //
+  async function loadPresets() {
+    try {
+      const result = await state.client.predict("/presets", {});
+      const data = result.data[0];
+      state.presets = data;
+
+      const useCaseSel = $("#use-case");
+      useCaseSel.innerHTML = "";
+      Object.keys(data.presets).forEach((name) => {
+        const opt = el("option", { value: name }, name);
+        if (name === data.default_use_case) opt.selected = true;
+        useCaseSel.appendChild(opt);
+      });
+
+      // Load model list for the default architecture
+      await refreshModelDropdown(data.default_use_case);
+
+      // Trigger initial preset description
+      useCaseSel.dispatchEvent(new Event("change"));
+    } catch (err) {
+      console.error("Failed to load presets:", err);
+      setStatus(`⚠️ Failed to load presets: ${err.message || err}`, "error");
+    }
+  }
+
+  async function refreshModelDropdown(useCaseName) {
+    if (!state.presets) return;
+    const preset = state.presets.presets[useCaseName];
+    if (!preset) return;
+
+    const arch = preset.architecture;
+    try {
+      const result = await state.client.predict("/models", { architecture: arch });
+      const models = result.data[0];
+      const sel = $("#model");
+      sel.innerHTML = "";
+      models.forEach((name) => {
+        const opt = el("option", { value: name }, name);
+        if (name === preset.model) opt.selected = true;
+        sel.appendChild(opt);
+      });
+    } catch (err) {
+      console.error("Failed to load models:", err);
+    }
+  }
+
+  function onUseCaseChange() {
+    const useCaseName = $("#use-case").value;
+    if (!state.presets) return;
+    const preset = state.presets.presets[useCaseName];
+    if (!preset) return;
+
+    $("#preset-desc").textContent = `ℹ️ ${preset.description}`;
+    refreshModelDropdown(useCaseName);
+  }
+
+  function onModelChange() {
+    // Architecture groups visibility is auto-managed by the backend's
+    // response, but since we don't get the architecture back from /models,
+    // we re-derive it client-side from the preset.
+    const modelName = $("#model").value;
+    const useCaseName = $("#use-case").value;
+    if (!state.presets) return;
+    const preset = state.presets.presets[useCaseName];
+    if (!preset) return;
+    const arch = (modelName === preset.model) ? preset.architecture : inferArchFromModel(modelName);
+    updateAdvancedGroups(arch);
+  }
+
+  function inferArchFromModel(name) {
+    if (!name) return "roformer";
+    if (name.endsWith(".yaml")) return "demucs";
+    if (name.endsWith(".pth")) return "vr";
+    if (name.endsWith(".onnx")) return "mdx";
+    if (name.endsWith(".ckpt")) return "roformer";
+    return "roformer";
+  }
+
+  function updateAdvancedGroups(arch) {
+    $("#adv-rof").hidden = !(arch === "roformer" || arch === "mdx23c");
+    $("#adv-mdx").hidden = !(arch === "mdx");
+    $("#adv-vr").hidden = !(arch === "vr");
+    $("#adv-demucs").hidden = !(arch === "demucs");
+  }
+
+  // ------------------------------------------------------------------ //
+  //  Advanced toggle                                                    //
+  // ------------------------------------------------------------------ //
+  function initAdvancedToggle() {
+    const cb = $("#advanced");
+    const acc = $("#adv-accordion");
+    cb.addEventListener("change", () => {
+      acc.hidden = !cb.checked;
+      if (cb.checked) acc.open = true;
+    });
+  }
+
+  // ------------------------------------------------------------------ //
+  //  History                                                            //
+  // ------------------------------------------------------------------ //
+  async function loadHistory() {
+    try {
+      const result = await state.client.predict("/history", {});
+      const rows = result.data[0] || [];
+      const body = $("#history-body");
+      body.innerHTML = "";
+      if (!rows.length) {
+        body.appendChild(el("tr", { class: "empty-row" }, el("td", { colspan: "5" }, "No history yet.")));
+        return;
+      }
+      rows.forEach((r) => {
+        body.appendChild(el("tr",
+          null,
+          el("td", null, r[0] || ""),
+          el("td", null, r[1] || ""),
+          el("td", null, r[2] || ""),
+          el("td", null, r[3] || ""),
+          el("td", null, r[4] || "")
+        ));
+      });
+    } catch (err) {
+      // Silent — history is best-effort
+      console.warn("History load failed:", err);
+    }
+  }
+
+  // ------------------------------------------------------------------ //
+  //  Separation                                                         //
+  // ------------------------------------------------------------------ //
+  async function runSeparation() {
+    if (state.isWorking) return;
+    if (!state.selectedFile) {
+      setStatus("⚠️ Please upload an audio file first.", "error");
+      return;
+    }
+
+    state.isWorking = true;
+    const btn = $("#separate-btn");
+    btn.disabled = true;
+    $(".btn-label", btn).textContent = "Working…";
+    $(".btn-spinner", btn).hidden = false;
+
+    setStatus(`Working on <code>${state.selectedFile.name}</code>… First run downloads the model, so this can take a while.`, "working");
+    setMetrics({ stems: "…" });
+
+    // Build payload
+    const payload = {
+      audio_file: handle_file(state.selectedFile),
+      use_case: $("#use-case").value,
+      model_display_name: $("#model").value,
+      output_format: $("#output-format").value,
+      advanced_mode: $("#advanced").checked,
+      seg_size:        parseInt($("#seg-size").value, 10),
+      overlap_rof:     parseInt($("#overlap-rof").value, 10),
+      overlap_mdx:     parseFloat($("#overlap-mdx").value),
+      pitch_shift:     parseInt($("#pitch-shift").value, 10),
+      hop_length:      parseInt($("#hop-length").value, 10),
+      enable_denoise:  $("#enable-denoise").checked,
+      window_size:     parseInt($("#window-size").value, 10),
+      aggression:      parseInt($("#aggression").value, 10),
+      enable_tta:      $("#enable-tta").checked,
+      enable_post:     $("#enable-post").checked,
+      post_thresh:     parseFloat($("#post-thresh").value),
+      enable_high_end: $("#enable-high-end").checked,
+      shifts:          parseInt($("#shifts").value, 10),
+      segments_enabled: $("#segments-enabled").checked,
+      norm_thresh:     parseFloat($("#norm-thresh").value),
+      amp_thresh:      parseFloat($("#amp-thresh").value),
+      batch_size:      parseInt($("#batch-size").value, 10),
+    };
+
+    try {
+      const result = await state.client.predict("/separate", payload);
+      const data = result.data[0];
+
+      if (data.error) {
+        setStatus(`❌ ${data.error}`, "error");
+        setMetrics({
+          dur: data.duration || "—",
+          est: data.est || "—",
+          stems: "0",
+        });
+        return;
+      }
+
+      renderStems(data.stems || []);
+      renderZip(data.zip);
+
+      const stemNames = (data.stems || []).map((s) => s.label).join(", ");
+      setStatus(
+        `✅ <strong>Done.</strong> ${data.stems.length} stem(s): ${stemNames} · ` +
+        `Model <code>${data.model}</code> · Architecture <code>${data.architecture}</code> · ` +
+        `Device <code>${data.device}</code>`,
+        "success"
+      );
+      setMetrics({
+        dur: data.duration || "—",
+        est: data.est || "—",
+        stems: String(data.stems.length),
+      });
+
+      loadHistory();
+    } catch (err) {
+      console.error("Separation failed:", err);
+      setStatus(`❌ <strong>Error:</strong> ${err.message || err}`, "error");
+    } finally {
+      state.isWorking = false;
+      btn.disabled = false;
+      $(".btn-label", btn).textContent = "Separate audio";
+      $(".btn-spinner", btn).hidden = true;
+    }
+  }
+
+  function renderStems(stems) {
+    const container = $("#stems");
+    container.innerHTML = "";
+
+    if (!stems.length) {
+      $("#empty-state").classList.remove("hidden");
+      return;
+    }
+    $("#empty-state").classList.add("hidden");
+
+    stems.forEach((stem) => {
+      // stem.file is a FileData — its `.url` is the playable URL.
+      // Some serialization paths leave `url` null and only populate `path`;
+      // in that case we build the URL ourselves via Gradio's /file= endpoint.
+      const url = fileDataUrl(stem.file);
+      if (!url) return;
+
+      const card = el("div", { class: "stem-card" },
+        el("div", { class: "stem-header" },
+          el("div", { class: "stem-label" }, `🎵 ${stem.label}`),
+          el("a", { class: "stem-download", href: url, download: "" }, "download ↓")
+        ),
+        el("audio", { controls: "", preload: "metadata", src: url })
+      );
+      container.appendChild(card);
+    });
+  }
+
+  function renderZip(zipFileData) {
+    const link = $("#zip-link");
+    if (!zipFileData) {
+      link.hidden = true;
+      return;
+    }
+    const url = fileDataUrl(zipFileData);
+    if (!url) {
+      link.hidden = true;
+      return;
+    }
+    link.href = url;
+    link.hidden = false;
+  }
+
+  /**
+   * Resolve a FileData (or string path) to a playable/downloadable URL.
+   * The Gradio wire protocol gives us either:
+   *   - { url: "https://...", path: "/abs/path" } — use url directly
+   *   - { url: null,      path: "/abs/path" } — build via /gradio_api/file=
+   *   - "/abs/path"                                — build via /gradio_api/file=
+   *   - "https://..."                              — use directly
+   */
+  function fileDataUrl(fileData) {
+    if (!fileData) return null;
+    if (typeof fileData === "string") {
+      if (/^https?:\/\//.test(fileData)) return fileData;
+      // Gradio expects the path UNencoded after "file=" — it does its own
+      // path parsing. Encoding with encodeURIComponent would break it.
+      return `${window.location.origin}/gradio_api/file=${fileData}`;
+    }
+    if (fileData.url) return fileData.url;
+    if (fileData.path) {
+      return `${window.location.origin}/gradio_api/file=${fileData.path}`;
+    }
+    return null;
+  }
+
+  // ------------------------------------------------------------------ //
+  //  Clear                                                              //
+  // ------------------------------------------------------------------ //
+  function clearOutputs() {
+    $("#stems").innerHTML = "";
+    $("#zip-link").hidden = true;
+    $("#empty-state").classList.remove("hidden");
+    setMetrics({});
+    setStatus("Ready. Upload audio and click <strong>Separate</strong>.", "ready");
+  }
+
+  // ------------------------------------------------------------------ //
+  //  Health badge                                                       //
+  // ------------------------------------------------------------------ //
+  async function loadHealth() {
+    try {
+      const res = await fetch("/healthz");
+      const data = await res.json();
+      $("#device-badge").textContent = `device: ${data.device || "—"}`;
+      $("#engine-badge").textContent = `engine: ${data.engine_installed ? "ok" : "missing"}`;
+      $("#footer-device").textContent = data.device || "—";
+      $("#footer-engine").textContent = data.engine_installed ? "installed" : "missing";
+    } catch (err) {
+      $("#device-badge").textContent = "device: ?";
+      $("#engine-badge").textContent = "engine: ?";
+    }
+  }
+
+  // ------------------------------------------------------------------ //
+  //  Init                                                               //
+  // ------------------------------------------------------------------ //
+  async function init() {
+    // Bind slider value displays
+    bindSliderDisplay("norm-thresh", "norm-thresh-val");
+    bindSliderDisplay("amp-thresh", "amp-thresh-val");
+    bindSliderDisplay("batch-size", "batch-size-val");
+    bindSliderDisplay("seg-size", "seg-size-val");
+    bindSliderDisplay("overlap-rof", "overlap-rof-val");
+    bindSliderDisplay("overlap-mdx", "overlap-mdx-val", (v) => parseFloat(v).toFixed(3));
+    bindSliderDisplay("pitch-shift", "pitch-shift-val");
+    bindSliderDisplay("hop-length", "hop-length-val");
+    bindSliderDisplay("window-size", "window-size-val");
+    bindSliderDisplay("aggression", "aggression-val");
+    bindSliderDisplay("post-thresh", "post-thresh-val");
+    bindSliderDisplay("shifts", "shifts-val");
+
+    initDropzone();
+    initAdvancedToggle();
+
+    // Wire up events
+    $("#use-case").addEventListener("change", onUseCaseChange);
+    $("#model").addEventListener("change", onModelChange);
+    $("#separate-btn").addEventListener("click", runSeparation);
+    $("#clear-btn").addEventListener("click", clearOutputs);
+
+    // Connect Gradio client to the current origin (as the blog shows)
+    try {
+      state.client = await Client.connect(window.location.origin);
+    } catch (err) {
+      console.error("Failed to connect Gradio client:", err);
+      setStatus(`Failed to connect to backend: ${err.message || err}`, "error");
+      return;
+    }
+
+    await Promise.all([loadHealth(), loadPresets(), loadHistory()]);
+
+    // Initial advanced-group visibility (matches default preset's arch)
+    onModelChange();
+  }
+
+  // The Gradio client is loaded as an ESM module via a separate <script type="module">
+  // tag, which executes asynchronously. Wait for it to expose `window.gradio`
+  // before initializing.
+  function waitForClient() {
+    return new Promise((resolve) => {
+      if (window.gradio) return resolve();
+      window.addEventListener("gradio-client-ready", () => resolve(), { once: true });
+      // Safety timeout — if the CDN fails, surface an error after 15s.
+      setTimeout(() => resolve(), 15000);
+    });
+  }
+
+  async function bootstrap() {
+    await waitForClient();
+    if (!window.gradio) {
+      setStatus("Failed to load the Gradio JS client from CDN. Check your network connection.", "error");
+      return;
+    }
+    await init();
+  }
+
+  // The Gradio client ESM loads async; app.js is `defer` so DOM is ready.
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", bootstrap);
+  } else {
+    bootstrap();
+  }
+})();

static/index.html

@@ -0,0 +1,363 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Audio Separator — Gradio Server Edition</title>
+  <meta name="description" content="Separate any audio into stems (vocals, instrumental, drums, bass…). Powered by audio-separator + Gradio Server." />
+
+  <!-- Fonts: Syne (display) + JetBrains Mono (code/labels) + Inter (body) -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
+
+  <!-- App styles -->
+  <link rel="stylesheet" href="/static/style.css" />
+</head>
+<body>
+  <!-- Background gradient layer -->
+  <div class="bg-glow" aria-hidden="true"></div>
+
+  <!-- =========================================================== -->
+  <!--  Top nav (slim)                                              -->
+  <!-- =========================================================== -->
+  <nav class="topbar">
+    <div class="topbar-brand">
+      <span class="logo-dot"></span>
+      <span class="brand-name">audio<span class="accent">·</span>separator</span>
+    </div>
+    <div class="topbar-meta">
+      <span id="device-badge" class="badge">device: —</span>
+      <span id="engine-badge" class="badge">engine: —</span>
+      <a class="topbar-link" href="https://huggingface.co/blog/introducing-gradio-server" target="_blank" rel="noopener">built on gradio.server ↗</a>
+    </div>
+  </nav>
+
+  <!-- =========================================================== -->
+  <!--  Hero                                                       -->
+  <!-- =========================================================== -->
+  <header class="hero">
+    <h1>Separate any track into <span class="accent-text">stems</span>.</h1>
+    <p>
+      Upload a song, pick a use case, and the right model loads automatically.
+      Powered by <a href="https://github.com/nomadkaraoke/python-audio-separator" target="_blank" rel="noopener"><code>audio-separator</code></a>
+      on the backend and a hand-built vanilla frontend talking to a
+      <code>gradio.Server</code> API. No build step. No framework on the client.
+    </p>
+  </header>
+
+  <!-- =========================================================== -->
+  <!--  Main grid                                                  -->
+  <!-- =========================================================== -->
+  <main class="grid">
+
+    <!-- ============ LEFT: input + controls ============ -->
+    <section class="panel panel-input">
+      <div class="section-label">Input &amp; use case</div>
+
+      <!-- Dropzone (click or drag) -->
+      <div id="dropzone" class="dropzone" tabindex="0" role="button" aria-label="Upload audio">
+        <input id="file-input" type="file" accept="audio/*" hidden />
+        <div class="dropzone-inner">
+          <svg class="dropzone-icon" viewBox="0 0 24 24" width="36" height="36" aria-hidden="true">
+            <path d="M12 3v12m0-12l-4 4m4-4l4 4M5 21h14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <div class="dropzone-text">
+            <strong>Drop audio here</strong>
+            <span>or click to browse · wav, mp3, flac, m4a, ogg</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Audio preview + duration -->
+      <div id="preview-wrap" class="preview-wrap" hidden>
+        <audio id="preview" controls preload="metadata"></audio>
+        <div class="preview-meta">
+          <span id="preview-name" class="preview-name">—</span>
+          <span id="preview-dur" class="preview-dur">—</span>
+          <button id="clear-input" type="button" class="link-btn">remove</button>
+        </div>
+      </div>
+
+      <!-- Use case dropdown -->
+      <div class="field">
+        <label for="use-case">Use case <span class="hint">— picks the right model for you</span></label>
+        <select id="use-case"></select>
+        <p id="preset-desc" class="preset-desc"></p>
+      </div>
+
+      <!-- Model dropdown -->
+      <div class="field">
+        <label for="model">Model <span class="hint">— auto-selected, override anytime</span></label>
+        <select id="model"></select>
+      </div>
+
+      <!-- Advanced toggle -->
+      <label class="toggle-row">
+        <input id="advanced" type="checkbox" />
+        <span>Advanced mode <span class="hint">(show all parameters)</span></span>
+      </label>
+
+      <!-- Global settings (always visible — small) -->
+      <details class="sub-accordion">
+        <summary>Global settings</summary>
+        <div class="details-body">
+          <div class="field">
+            <label for="output-format">Output format</label>
+            <select id="output-format">
+              <option value="wav" selected>WAV (lossless)</option>
+              <option value="flac">FLAC (lossless, compressed)</option>
+              <option value="mp3">MP3 (320 kbps)</option>
+            </select>
+          </div>
+          <div class="field">
+            <label for="norm-thresh">Normalization threshold: <span class="val" id="norm-thresh-val">0.9</span></label>
+            <input id="norm-thresh" type="range" min="0.1" max="1.0" step="0.1" value="0.9" />
+          </div>
+          <div class="field">
+            <label for="amp-thresh">Amplification threshold: <span class="val" id="amp-thresh-val">0.6</span></label>
+            <input id="amp-thresh" type="range" min="0.1" max="1.0" step="0.1" value="0.6" />
+          </div>
+          <div class="field">
+            <label for="batch-size">Batch size: <span class="val" id="batch-size-val">1</span></label>
+            <input id="batch-size" type="range" min="1" max="16" step="1" value="1" />
+          </div>
+        </div>
+      </details>
+
+      <!-- Advanced parameters (per-architecture, hidden by default) -->
+      <details id="adv-accordion" class="sub-accordion" hidden>
+        <summary>Advanced parameters <span class="hint">(architecture-specific)</span></summary>
+        <div class="details-body">
+
+          <div id="adv-rof" class="adv-group" hidden>
+            <div class="section-label small">Roformer / MDX23C</div>
+            <div class="field">
+              <label for="seg-size">Segment size: <span class="val" id="seg-size-val">256</span></label>
+              <input id="seg-size" type="range" min="32" max="4000" step="32" value="256" />
+            </div>
+            <div class="field">
+              <label for="overlap-rof">Overlap: <span class="val" id="overlap-rof-val">8</span></label>
+              <input id="overlap-rof" type="range" min="2" max="50" step="1" value="8" />
+            </div>
+            <div class="field">
+              <label for="pitch-shift">Pitch shift (semitones): <span class="val" id="pitch-shift-val">0</span></label>
+              <input id="pitch-shift" type="range" min="-12" max="12" step="1" value="0" />
+            </div>
+          </div>
+
+          <div id="adv-mdx" class="adv-group" hidden>
+            <div class="section-label small">MDX-NET</div>
+            <div class="field">
+              <label for="hop-length">Hop length: <span class="val" id="hop-length-val">1024</span></label>
+              <input id="hop-length" type="range" min="32" max="2048" step="32" value="1024" />
+            </div>
+            <div class="field">
+              <label for="overlap-mdx">Overlap (MDX/Demucs): <span class="val" id="overlap-mdx-val">0.25</span></label>
+              <input id="overlap-mdx" type="range" min="0.001" max="0.999" step="0.001" value="0.25" />
+            </div>
+            <label class="toggle-row">
+              <input id="enable-denoise" type="checkbox" />
+              <span>Enable denoise</span>
+            </label>
+          </div>
+
+          <div id="adv-vr" class="adv-group" hidden>
+            <div class="section-label small">VR Arch</div>
+            <div class="field">
+              <label for="window-size">Window size: <span class="val" id="window-size-val">512</span></label>
+              <input id="window-size" type="range" min="320" max="1024" step="32" value="512" />
+            </div>
+            <div class="field">
+              <label for="aggression">Aggression: <span class="val" id="aggression-val">5</span></label>
+              <input id="aggression" type="range" min="1" max="50" step="1" value="5" />
+            </div>
+            <label class="toggle-row">
+              <input id="enable-tta" type="checkbox" />
+              <span>Enable TTA</span>
+            </label>
+            <label class="toggle-row">
+              <input id="enable-post" type="checkbox" />
+              <span>Enable post-process</span>
+            </label>
+            <div class="field">
+              <label for="post-thresh">Post-process threshold: <span class="val" id="post-thresh-val">0.2</span></label>
+              <input id="post-thresh" type="range" min="0.1" max="0.3" step="0.1" value="0.2" />
+            </div>
+            <label class="toggle-row">
+              <input id="enable-high-end" type="checkbox" />
+              <span>High-end processing</span>
+            </label>
+          </div>
+
+          <div id="adv-demucs" class="adv-group" hidden>
+            <div class="section-label small">Demucs</div>
+            <div class="field">
+              <label for="shifts">Shifts: <span class="val" id="shifts-val">2</span></label>
+              <input id="shifts" type="range" min="0" max="20" step="1" value="2" />
+            </div>
+            <label class="toggle-row">
+              <input id="segments-enabled" type="checkbox" checked />
+              <span>Enable segments</span>
+            </label>
+          </div>
+
+        </div>
+      </details>
+
+      <!-- Action buttons -->
+      <div class="actions">
+        <button id="separate-btn" class="btn btn-primary" disabled>
+          <span class="btn-label">Separate audio</span>
+          <span class="btn-spinner" hidden></span>
+        </button>
+        <button id="clear-btn" class="btn btn-secondary" type="button">Clear</button>
+      </div>
+    </section>
+
+    <!-- ============ RIGHT: output ============ -->
+    <section class="panel panel-output">
+      <div class="section-label">Output stems</div>
+
+      <!-- Metric tiles -->
+      <div class="metrics">
+        <div class="metric-tile">
+          <div class="metric-label">Input duration</div>
+          <div class="metric-value" id="metric-dur">—</div>
+        </div>
+        <div class="metric-tile">
+          <div class="metric-label">Estimated time</div>
+          <div class="metric-value" id="metric-est">—</div>
+        </div>
+        <div class="metric-tile">
+          <div class="metric-label">Stems</div>
+          <div class="metric-value" id="metric-stems">—</div>
+        </div>
+      </div>
+
+      <!-- Status -->
+      <div id="status" class="status ready">
+        Ready. Upload audio and click <strong>Separate</strong>.
+      </div>
+
+      <!-- Stem cards (rendered dynamically) -->
+      <div id="stems" class="stems"></div>
+
+      <!-- ZIP download -->
+      <a id="zip-link" class="zip-card" hidden download>
+        <div class="zip-icon">📦</div>
+        <div class="zip-text">
+          <strong>Download all stems</strong>
+          <span>as a .zip archive</span>
+        </div>
+        <div class="zip-arrow">↓</div>
+      </a>
+
+      <!-- Empty-state illustration when no stems yet -->
+      <div id="empty-state" class="empty-state">
+        <svg viewBox="0 0 80 80" width="64" height="64" aria-hidden="true">
+          <circle cx="40" cy="40" r="36" fill="none" stroke="currentColor" stroke-width="1.2" stroke-dasharray="2 6" opacity="0.5"/>
+          <path d="M20 40 L20 40 M28 40 L28 40 M36 40 L36 40 M44 40 L44 40 M52 40 L52 40 M60 40 L60 40" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        </svg>
+        <p>Your stems will appear here.</p>
+      </div>
+    </section>
+  </main>
+
+  <!-- =========================================================== -->
+  <!--  History                                                    -->
+  <!-- =========================================================== -->
+  <section class="panel panel-history">
+    <details>
+      <summary>Recent separations</summary>
+      <div class="details-body">
+        <table class="history-table">
+          <thead>
+            <tr>
+              <th>Time</th><th>Use case</th><th>Model</th><th>Input</th><th>Stems</th>
+            </tr>
+          </thead>
+          <tbody id="history-body">
+            <tr class="empty-row"><td colspan="5">No history yet.</td></tr>
+          </tbody>
+        </table>
+      </div>
+    </details>
+  </section>
+
+  <!-- =========================================================== -->
+  <!--  FAQ                                                        -->
+  <!-- =========================================================== -->
+  <section class="panel panel-faq">
+    <details>
+      <summary>How to use / FAQ</summary>
+      <div class="details-body prose">
+        <h4>Quick start</h4>
+        <ol>
+          <li><strong>Upload</strong> an audio file (or drag it onto the dropzone).</li>
+          <li><strong>Pick a use case</strong> — the right model auto-selects.</li>
+          <li>Click <strong>Separate audio</strong>. First run downloads the model (can be hundreds of MB).</li>
+          <li>Listen to each stem and download the ZIP if you want them all.</li>
+        </ol>
+
+        <h4>When to override the model</h4>
+        <ul>
+          <li><strong>Karaoke</strong> → <code>MelBand Roformer | Karaoke V2 by Gabox</code></li>
+          <li><strong>Clean a cappella</strong> → <code>BS-Roformer-Viperx-1297</code> (highest reported SDR)</li>
+          <li><strong>De-reverb</strong> → <code>MelBand Roformer | De-Reverb by anvuew</code></li>
+          <li><strong>De-noise</strong> → <code>Mel-Roformer-Denoise-Aufr33</code></li>
+          <li><strong>Multi-stem remix</strong> → <code>htdemucs_ft.yaml</code> (4 stems) or <code>htdemucs_6s.yaml</code> (6 stems)</li>
+          <li><strong>CPU-only / speed</strong> → <code>UVR-MDX-NET-Inst_HQ_3.onnx</code></li>
+        </ul>
+
+        <h4>Tips</h4>
+        <ul>
+          <li>For best results use lossless inputs (WAV/FLAC).</li>
+          <li>Models auto-cache — first run is slow, later runs are fast.</li>
+          <li>MP3 output is encoded at <strong>320 kbps</strong> (not the library's 128 kbps default).</li>
+          <li>Transient <code>librosa.ParameterError</code> failures are retried automatically.</li>
+        </ul>
+
+        <h4>Credits</h4>
+        <ul>
+          <li>Engine: <a href="https://github.com/nomadkaraoke/python-audio-separator" target="_blank" rel="noopener"><code>audio-separator</code></a> by @berevadb</li>
+          <li>Models: UVR community contributors (Gabox, Aufr33, Viperx, Sucial, anvuew, Unwa, …)</li>
+          <li>Architecture: <a href="https://huggingface.co/blog/introducing-gradio-server" target="_blank" rel="noopener">Gradio Server</a> + vanilla HTML/CSS/JS frontend</li>
+        </ul>
+      </div>
+    </details>
+  </section>
+
+  <!-- =========================================================== -->
+  <!--  Footer                                                     -->
+  <!-- =========================================================== -->
+  <footer class="app-footer">
+    <span>DEVICE <b id="footer-device">—</b></span>
+    <span class="dot">·</span>
+    <span>ENGINE <b id="footer-engine">—</b></span>
+    <span class="dot">·</span>
+    <span>FRONTEND <b>VANILLA JS</b></span>
+    <span class="dot">·</span>
+    <span>BACKEND <b>GRADIO.SERVER</b></span>
+  </footer>
+
+  <!-- =========================================================== -->
+  <!--  Gradio JS client (loaded as ESM from CDN, as the blog      -->
+  <!--  describes — no build step, no bundler on the client)        -->
+  <!--                                                                -->
+  <!--  We pin to @gradio/client@2.3.0 — the version that ships the  -->
+  <!--  `Client.connect()` API the blog uses. Newer versions may    -->
+  <!--  change the surface; older versions (<2.0) use a different    -->
+  <!--  factory API (`client()` lowercase).                          -->
+  <!-- =========================================================== -->
+  <script type="module">
+    import { Client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client@2.3.0/dist/index.min.js";
+    window.gradio = { Client, handle_file };
+    // Signal to app.js that the client is ready
+    window.dispatchEvent(new Event("gradio-client-ready"));
+  </script>
+
+  <!-- App logic (defer so it runs after DOM parse; waits for the client-ready event before init) -->
+  <script src="/static/app.js" defer></script>
+</body>
+</html>

static/style.css

@@ -0,0 +1,872 @@
+/* ============================================================ *
+ *  Audio Separator — Gradio Server Edition
+ *  Vanilla CSS — no framework, no build step.
+ *
+ *  Design philosophy (mirrors the Gradio Server blog post):
+ *    "Bring your own frontend" — we ship a self-contained design
+ *    system. No Gradio theme tokens on the client.
+ * ============================================================ */
+
+/* ---------------------------------------------------------------- *
+ *  Design tokens                                                   *
+ * ---------------------------------------------------------------- */
+:root {
+  /* Palette — pure black canvas, electric-lime accent */
+  --bg:           #000000;
+  --bg-elev-1:    #0a0a0c;
+  --bg-elev-2:    #121217;
+  --bg-elev-3:    #1b1b22;
+  --bg-elev-4:    #24242d;
+
+  --border:       #232330;
+  --border-soft:  #16161c;
+
+  --text:         #f5f5f7;
+  --text-dim:     #9b9bab;
+  --text-mute:    #5e5e6a;
+
+  --accent:       #c6ff00;
+  --accent-dim:   #86b300;
+  --accent-glow:  rgba(198, 255, 0, 0.18);
+  --accent-soft:  rgba(198, 255, 0, 0.06);
+
+  --danger:       #ff4d6d;
+  --success:      #00d68f;
+  --warning:      #ffb800;
+
+  /* Typography */
+  --font-display: "Syne", "Arial", sans-serif;
+  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
+  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
+
+  /* Geometry */
+  --radius:       14px;
+  --radius-sm:    8px;
+  --radius-xs:    4px;
+
+  /* Effects */
+  --shadow:       0 1px 0 rgba(255,255,255,0.04) inset,
+                  0 8px 24px rgba(0,0,0,0.45);
+  --shadow-lg:    0 1px 0 rgba(255,255,255,0.06) inset,
+                  0 16px 48px rgba(0,0,0,0.55);
+  --blur:         blur(14px) saturate(140%);
+
+  /* Layout */
+  --max-width:    1320px;
+  --gutter:       28px;
+}
+
+/* ---------------------------------------------------------------- *
+ *  Reset & base                                                     *
+ * ---------------------------------------------------------------- */
+*, *::before, *::after { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  padding: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-body);
+  font-size: 15px;
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  min-height: 100vh;
+}
+
+body {
+  position: relative;
+  overflow-x: hidden;
+}
+
+/* Fixed radial-gradient backdrop for depth on pure black */
+.bg-glow {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(900px 600px at 12% -10%, rgba(198,255,0,0.08), transparent 60%),
+    radial-gradient(700px 500px at 92% 8%, rgba(120,80,255,0.10), transparent 65%),
+    radial-gradient(800px 800px at 50% 120%, rgba(0,140,255,0.06), transparent 70%);
+}
+
+/* All content sits above the backdrop */
+.topbar, .hero, main, .panel-history, .panel-faq, .app-footer {
+  position: relative;
+  z-index: 1;
+}
+
+/* Constrain content width */
+.topbar, .hero, main, .panel-history, .panel-faq, .app-footer {
+  max-width: var(--max-width);
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--gutter);
+  padding-right: var(--gutter);
+}
+
+a {
+  color: var(--accent);
+  text-decoration: none;
+  border-bottom: 1px dashed rgba(198,255,0,0.4);
+  transition: border-style 0.15s ease;
+}
+a:hover { border-bottom-style: solid; }
+
+code {
+  font-family: var(--font-mono);
+  color: var(--accent);
+  background: var(--accent-soft);
+  border: 1px solid rgba(198,255,0,0.15);
+  padding: 1px 6px;
+  border-radius: var(--radius-xs);
+  font-size: 0.86em;
+}
+
+::selection { background: var(--accent); color: #000; }
+
+/* ---------------------------------------------------------------- *
+ *  Scrollbar                                                       *
+ * ---------------------------------------------------------------- */
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-track { background: var(--bg); }
+::-webkit-scrollbar-thumb {
+  background: var(--bg-elev-3);
+  border-radius: 5px;
+  border: 2px solid var(--bg);
+}
+::-webkit-scrollbar-thumb:hover { background: #2a2a36; }
+
+/* ---------------------------------------------------------------- *
+ *  Topbar                                                          *
+ * ---------------------------------------------------------------- */
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 18px;
+  padding-bottom: 18px;
+  border-bottom: 1px solid var(--border-soft);
+}
+.topbar-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 1.05rem;
+  letter-spacing: -0.01em;
+}
+.topbar-brand .accent { color: var(--accent); }
+.logo-dot {
+  width: 10px; height: 10px;
+  background: var(--accent);
+  border-radius: 50%;
+  box-shadow: 0 0 12px var(--accent);
+  animation: pulse 2.2s ease-in-out infinite;
+}
+@keyframes pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50%      { opacity: 0.4; transform: scale(0.75); }
+}
+.topbar-meta {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+}
+.badge {
+  padding: 4px 10px;
+  background: var(--bg-elev-2);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  color: var(--text-dim);
+  letter-spacing: 0.05em;
+}
+.topbar-link {
+  border: none;
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+}
+.topbar-link:hover { color: var(--accent); }
+
+@media (max-width: 720px) {
+  .topbar { flex-direction: column; gap: 12px; align-items: flex-start; }
+  .topbar-meta { flex-wrap: wrap; gap: 8px; }
+}
+
+/* ---------------------------------------------------------------- *
+ *  Hero                                                            *
+ * ---------------------------------------------------------------- */
+.hero {
+  padding: 56px 0 40px;
+}
+.hero h1 {
+  font-family: var(--font-display);
+  font-weight: 800;
+  font-size: clamp(2.4rem, 5.5vw, 4rem);
+  line-height: 1.05;
+  letter-spacing: -0.02em;
+  margin: 0 0 18px;
+  background: linear-gradient(180deg, #ffffff 0%, #b0b0b8 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.hero .accent-text {
+  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dim) 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.hero p {
+  font-size: 1.05rem;
+  color: var(--text-dim);
+  max-width: 720px;
+  margin: 0;
+}
+
+/* ---------------------------------------------------------------- *
+ *  Main grid — two columns on desktop, stacked on mobile           *
+ * ---------------------------------------------------------------- */
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+  padding-top: 8px;
+  padding-bottom: 32px;
+}
+@media (max-width: 980px) {
+  .grid { grid-template-columns: 1fr; }
+}
+
+/* ---------------------------------------------------------------- *
+ *  Panel — generic surface                                         *
+ * ---------------------------------------------------------------- */
+.panel {
+  background: var(--bg-elev-1);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 24px;
+  box-shadow: var(--shadow);
+}
+
+.section-label {
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--accent);
+  padding-bottom: 14px;
+  margin-bottom: 18px;
+  border-bottom: 1px solid var(--border-soft);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.section-label::before {
+  content: "";
+  width: 6px; height: 6px;
+  background: var(--accent);
+  border-radius: 50%;
+  box-shadow: 0 0 8px var(--accent);
+}
+.section-label.small {
+  font-size: 0.62rem;
+  letter-spacing: 0.14em;
+  padding-bottom: 8px;
+  margin-bottom: 12px;
+}
+
+/* ---------------------------------------------------------------- *
+ *  Dropzone                                                        *
+ * ---------------------------------------------------------------- */
+.dropzone {
+  border: 2px dashed var(--border);
+  border-radius: var(--radius);
+  padding: 32px 24px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background: var(--bg-elev-2);
+  margin-bottom: 18px;
+}
+.dropzone:hover, .dropzone:focus-visible {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  outline: none;
+}
+.dropzone.dragging {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  transform: scale(1.01);
+}
+.dropzone-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  color: var(--text-dim);
+}
+.dropzone-icon { color: var(--accent); }
+.dropzone-text { display: flex; flex-direction: column; gap: 2px; }
+.dropzone-text strong {
+  font-family: var(--font-display);
+  color: var(--text);
+  font-weight: 700;
+  font-size: 1rem;
+}
+.dropzone-text span { font-size: 0.82rem; color: var(--text-mute); }
+
+/* ---------------------------------------------------------------- *
+ *  Preview                                                         *
+ * ---------------------------------------------------------------- */
+.preview-wrap {
+  margin-bottom: 18px;
+  padding: 14px;
+  background: var(--bg-elev-2);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--accent);
+  border-radius: var(--radius-sm);
+}
+.preview-wrap audio {
+  width: 100%;
+  margin-bottom: 8px;
+}
+.preview-meta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  color: var(--text-dim);
+}
+.preview-name {
+  flex: 1;
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.link-btn {
+  background: none;
+  border: none;
+  color: var(--text-mute);
+  font-family: var(--font-mono);
+  font-size: 0.74rem;
+  cursor: pointer;
+  padding: 2px 6px;
+  border-bottom: 1px dashed var(--text-mute);
+}
+.link-btn:hover { color: var(--accent); border-bottom-color: var(--accent); }
+
+/* ---------------------------------------------------------------- *
+ *  Fields, inputs, sliders                                         *
+ * ---------------------------------------------------------------- */
+.field {
+  margin-bottom: 16px;
+}
+.field label {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+  font-weight: 500;
+  margin-bottom: 6px;
+}
+.field label .hint {
+  text-transform: none;
+  letter-spacing: 0;
+  color: var(--text-mute);
+  font-weight: 400;
+}
+.field label .val {
+  color: var(--accent);
+  font-weight: 600;
+}
+
+select, input[type="text"], input[type="number"], textarea {
+  width: 100%;
+  padding: 10px 12px;
+  background: var(--bg-elev-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  font-family: var(--font-body);
+  font-size: 0.92rem;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  appearance: none;
+  -webkit-appearance: none;
+}
+select {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239b9bab' d='M6 9L1 3h10z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  padding-right: 32px;
+}
+select:focus, input:focus, textarea:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-glow);
+}
+
+/* Range slider — electric-lime */
+input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 4px;
+  background: var(--bg-elev-3);
+  border-radius: 2px;
+  outline: none;
+}
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  background: var(--accent);
+  border-radius: 50%;
+  cursor: pointer;
+  border: 2px solid var(--bg);
+  box-shadow: 0 0 0 1px var(--accent-dim), 0 0 8px var(--accent-glow);
+  transition: transform 0.1s ease;
+}
+input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }
+input[type="range"]::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  background: var(--accent);
+  border-radius: 50%;
+  cursor: pointer;
+  border: 2px solid var(--bg);
+  box-shadow: 0 0 0 1px var(--accent-dim);
+}
+
+/* Toggle row (checkbox + label) */
+.toggle-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 0;
+  cursor: pointer;
+  user-select: none;
+}
+.toggle-row input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 18px;
+  height: 18px;
+  background: var(--bg-elev-3);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  cursor: pointer;
+  position: relative;
+  flex-shrink: 0;
+  transition: all 0.15s ease;
+}
+.toggle-row input[type="checkbox"]:checked {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+.toggle-row input[type="checkbox"]:checked::after {
+  content: "";
+  position: absolute;
+  top: 2px; left: 5px;
+  width: 5px; height: 9px;
+  border: solid #000;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+.toggle-row span { color: var(--text); font-size: 0.92rem; }
+.toggle-row .hint { color: var(--text-mute); font-size: 0.82rem; }
+
+/* ---------------------------------------------------------------- *
+ *  Sub-accordion (details/summary)                                 *
+ * ---------------------------------------------------------------- */
+.sub-accordion, .panel-history details, .panel-faq details {
+  margin-top: 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-elev-2);
+  overflow: hidden;
+}
+.sub-accordion summary,
+.panel-history details summary,
+.panel-faq details summary {
+  padding: 12px 14px;
+  cursor: pointer;
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: 0.92rem;
+  color: var(--text);
+  background: var(--bg-elev-3);
+  border-bottom: 1px solid transparent;
+  list-style: none;
+  transition: background 0.15s ease;
+}
+.sub-accordion summary::-webkit-details-marker,
+.panel-history details summary::-webkit-details-marker,
+.panel-faq details summary::-webkit-details-marker { display: none; }
+.sub-accordion summary::before,
+.panel-history details summary::before,
+.panel-faq details summary::before {
+  content: "›";
+  display: inline-block;
+  margin-right: 8px;
+  color: var(--accent);
+  transform: rotate(0deg);
+  transition: transform 0.15s ease;
+}
+.sub-accordion[open] summary::before,
+.panel-history details[open] summary::before,
+.panel-faq details[open] summary::before {
+  transform: rotate(90deg);
+}
+.sub-accordion summary:hover,
+.panel-history details summary:hover,
+.panel-faq details summary:hover {
+  background: var(--bg-elev-4);
+}
+.details-body {
+  padding: 16px;
+}
+.adv-group {
+  margin-bottom: 16px;
+}
+.adv-group:last-child { margin-bottom: 0; }
+
+/* ---------------------------------------------------------------- *
+ *  Action buttons                                                  *
+ * ---------------------------------------------------------------- */
+.actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 24px;
+}
+.btn {
+  flex: 1;
+  padding: 14px 20px;
+  border-radius: var(--radius-sm);
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 0.95rem;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: all 0.15s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+.btn-primary {
+  background: var(--accent);
+  color: #000;
+  border-color: var(--accent);
+  box-shadow:
+    0 6px 18px rgba(198,255,0,0.20),
+    0 1px 0 rgba(255,255,255,0.18) inset;
+}
+.btn-primary:hover:not(:disabled) {
+  filter: brightness(1.08);
+  transform: translateY(-1px);
+  box-shadow:
+    0 10px 28px rgba(198,255,0,0.35),
+    0 1px 0 rgba(255,255,255,0.22) inset;
+}
+.btn-primary:active:not(:disabled) { transform: translateY(0); filter: brightness(0.95); }
+.btn-primary:disabled {
+  background: var(--bg-elev-3);
+  color: var(--text-mute);
+  border-color: var(--border);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+.btn-secondary {
+  flex: 0 0 auto;
+  background: var(--bg-elev-2);
+  color: var(--text);
+  border-color: var(--border);
+  padding: 14px 18px;
+}
+.btn-secondary:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+  background: var(--accent-soft);
+}
+
+/* Spinner */
+.btn-spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(0,0,0,0.25);
+  border-top-color: #000;
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* ---------------------------------------------------------------- *
+ *  Metrics                                                         *
+ * ---------------------------------------------------------------- */
+.metrics {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+  margin-bottom: 16px;
+}
+@media (max-width: 540px) {
+  .metrics { grid-template-columns: 1fr; }
+}
+.metric-tile {
+  background: linear-gradient(180deg, var(--bg-elev-2), var(--bg-elev-1));
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--accent);
+  border-radius: var(--radius-sm);
+  padding: 14px 16px;
+  box-shadow: var(--shadow);
+}
+.metric-label {
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--text-mute);
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+.metric-value {
+  font-family: var(--font-display);
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--text);
+}
+
+/* ---------------------------------------------------------------- *
+ *  Status box                                                      *
+ * ---------------------------------------------------------------- */
+.status {
+  padding: 14px 18px;
+  background: var(--bg-elev-1);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--accent);
+  border-radius: var(--radius-sm);
+  margin-bottom: 18px;
+  font-size: 0.92rem;
+  color: var(--text);
+  transition: all 0.2s ease;
+}
+.status.ready { border-left-color: var(--text-mute); }
+.status.working { border-left-color: var(--warning); }
+.status.success { border-left-color: var(--success); }
+.status.error { border-left-color: var(--danger); }
+.status code {
+  color: var(--accent);
+  background: var(--accent-soft);
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-size: 0.88em;
+}
+
+/* ---------------------------------------------------------------- *
+ *  Stem cards                                                      *
+ * ---------------------------------------------------------------- */
+.stems {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+.stem-card {
+  background: var(--bg-elev-2);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--accent);
+  border-radius: var(--radius-sm);
+  padding: 14px;
+  animation: stem-in 0.3s ease;
+}
+@keyframes stem-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.stem-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+.stem-label {
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 1rem;
+  color: var(--text);
+}
+.stem-download {
+  font-family: var(--font-mono);
+  font-size: 0.74rem;
+  color: var(--text-dim);
+  background: var(--bg-elev-3);
+  padding: 4px 8px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  transition: all 0.15s ease;
+}
+.stem-download:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+}
+.stem-card audio { width: 100%; }
+
+/* ---------------------------------------------------------------- *
+ *  ZIP download card                                               *
+ * ---------------------------------------------------------------- */
+.zip-card {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 16px 18px;
+  background: linear-gradient(135deg, var(--accent-soft), transparent 60%);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--accent);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  text-decoration: none;
+  transition: all 0.15s ease;
+}
+.zip-card:hover {
+  border-color: var(--accent);
+  transform: translateY(-1px);
+  box-shadow: 0 8px 24px rgba(198,255,0,0.15);
+}
+.zip-card .zip-icon { font-size: 1.6rem; }
+.zip-card .zip-text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.zip-card .zip-text strong {
+  font-family: var(--font-display);
+  font-weight: 700;
+}
+.zip-card .zip-text span {
+  font-size: 0.82rem;
+  color: var(--text-dim);
+}
+.zip-card .zip-arrow {
+  font-size: 1.4rem;
+  color: var(--accent);
+  font-weight: 700;
+}
+
+/* ---------------------------------------------------------------- *
+ *  Empty state                                                     *
+ * ---------------------------------------------------------------- */
+.empty-state {
+  text-align: center;
+  padding: 40px 20px;
+  color: var(--text-mute);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+.empty-state svg { color: var(--text-mute); opacity: 0.6; }
+.empty-state p {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: 0.82rem;
+  letter-spacing: 0.08em;
+}
+.empty-state.hidden { display: none; }
+
+/* ---------------------------------------------------------------- *
+ *  History table                                                   *
+ * ---------------------------------------------------------------- */
+.history-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.86rem;
+}
+.history-table th {
+  text-align: left;
+  background: var(--bg-elev-3);
+  color: var(--accent);
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  letter-spacing: 0.10em;
+  text-transform: uppercase;
+  font-weight: 600;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border);
+}
+.history-table td {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border-soft);
+  color: var(--text-dim);
+}
+.history-table tr:hover td {
+  background: var(--accent-soft);
+  color: var(--text);
+}
+.history-table .empty-row td {
+  text-align: center;
+  color: var(--text-mute);
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+}
+
+/* ---------------------------------------------------------------- *
+ *  FAQ prose                                                       *
+ * ---------------------------------------------------------------- */
+.prose h4 {
+  font-family: var(--font-display);
+  font-weight: 700;
+  color: var(--text);
+  margin: 18px 0 8px;
+  font-size: 1.05rem;
+}
+.prose h4:first-child { margin-top: 0; }
+.prose ul, .prose ol { padding-left: 22px; }
+.prose li { margin: 4px 0; color: var(--text-dim); }
+
+/* ---------------------------------------------------------------- *
+ *  Footer                                                          *
+ * ---------------------------------------------------------------- */
+.app-footer {
+  margin-top: 40px;
+  padding: 20px 0 60px;
+  border-top: 1px solid var(--border);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  align-items: center;
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-mute);
+}
+.app-footer b {
+  color: var(--accent);
+  font-weight: 700;
+  margin-left: 6px;
+}
+.app-footer .dot { opacity: 0.4; }
+
+/* ---------------------------------------------------------------- *
+ *  Reduce motion                                                   *
+ * ---------------------------------------------------------------- */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+  .logo-dot { animation: none; opacity: 1; }
+}