Initial MuScriptor ZeroGPU studio

.gitignore

@@ -0,0 +1,8 @@
+__pycache__/
+*.pyc
+.venv/
+.codex/
+rollout.jsonl
+*.rollout.jsonl
+*.session.jsonl
+verify*.png

README.md

@@ -1,13 +1,23 @@
 ---
-title: Muscriptor Studio
-emoji: 🏆
+title: MuScriptor Studio
+emoji: 🎼
 colorFrom: gray
-colorTo: yellow
+colorTo: indigo
 sdk: gradio
-sdk_version: 6.20.0
-python_version: '3.12'
+sdk_version: 6.10.0
 app_file: app.py
-pinned: false
+short_description: Multi-instrument audio transcription to editable MIDI
+startup_duration_timeout: 1h
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# MuScriptor Studio
+
+A custom ZeroGPU interface for [MuScriptor](https://github.com/muscriptor/muscriptor), the multi-instrument audio-to-MIDI model from Kyutai and Mirelo.
+
+The app runs the 307M-parameter medium checkpoint, streams transcription progress after each 5-second audio window, renders an interactive color-coded piano roll, and exports both the full arrangement and isolated instrument MIDI files.
+
+The checkpoint is gated under CC BY-NC 4.0. This Space requires an `HF_TOKEN` secret whose owner has accepted access to [`MuScriptor/muscriptor-medium`](https://huggingface.co/MuScriptor/muscriptor-medium).
+
+## API
+
+The Gradio endpoint is `/transcribe`. It accepts an audio file, optional exact instrument group names, a sampling toggle, and temperature. It returns the combined MIDI, all isolated track files, the browser visualization payload, and a machine-readable manifest.

app.py

@@ -0,0 +1,692 @@
+import os
+
+# ZeroGPU and library caches must be configured before any third-party import.
+os.environ.setdefault("HF_HOME", "/tmp/.cache/huggingface")
+os.environ.setdefault("HF_MODULES_CACHE", "/tmp/hf_modules")
+os.environ.setdefault("MPLCONFIGDIR", "/tmp/matplotlib")
+os.environ.setdefault("TOKENIZERS_PARALLELISM", "false")
+
+import spaces  # noqa: E402  # Must precede torch on ZeroGPU.
+
+import base64
+import hashlib
+import json
+import math
+import re
+import sys
+import tempfile
+import time
+from collections import defaultdict
+from pathlib import Path
+from typing import Any, Iterator
+
+import gradio as gr
+import soundfile as sf
+import torch
+from huggingface_hub import hf_hub_download
+from muscriptor.events import NoteEndEvent, NoteStartEvent, ProgressEvent
+from muscriptor.tokenizer.mt3 import MT3Tokenizer, MT3_FULL_PLUS_GROUP_NAMES
+from muscriptor.transcription_model import (
+    TranscriptionModel,
+    _build_model,
+    _remap_single_codebook_keys,
+    _resolve_config,
+    _resolve_source,
+)
+from safetensors.torch import load_file
+
+
+APP_ROOT = Path(__file__).resolve().parent
+ASSET_ROOT = APP_ROOT / "assets"
+MODEL_ID = "MuScriptor/muscriptor-medium"
+MODEL_VARIANT = "medium"
+MAX_AUDIO_SECONDS = 60.0
+
+# Initial deployment values. These are recalibrated from cold/warm live calls.
+GPU_BASE_SECONDS = 45
+GPU_SECONDS_PER_CHUNK = 18
+GPU_DURATION_CAP = 240
+
+COLORS = (
+    "#8b7cff",
+    "#35c8ff",
+    "#67e8a5",
+    "#f6c667",
+    "#fb7185",
+    "#c084fc",
+    "#2dd4bf",
+    "#60a5fa",
+    "#f472b6",
+    "#a3e635",
+)
+
+
+@spaces.GPU(duration=1)
+def _zerogpu_probe() -> str:
+    """Required lightweight ZeroGPU allocation probe."""
+    return "ready"
+
+
+def _load_model_zerogpu() -> TranscriptionModel:
+    """Build MuScriptor with CUDA attributes while loading weights on CPU.
+
+    ZeroGPU intercepts ``.to('cuda')`` at module scope and packs the singleton
+    for restoration inside decorated calls. Safetensors cannot target the fake
+    CUDA device at startup, so its state dictionary must first be read on CPU.
+    """
+
+    token = os.environ.get("HF_TOKEN")
+    if not token:
+        raise RuntimeError(
+            "HF_TOKEN is required. Add a read token whose owner has accepted "
+            f"the gated license at https://huggingface.co/{MODEL_ID}."
+        )
+
+    device = torch.device("cuda")
+    source = _resolve_source(MODEL_VARIANT)
+    weights_path = Path(
+        hf_hub_download(
+            repo_id=MODEL_ID,
+            filename="model.safetensors",
+            token=token,
+        )
+    )
+    config = _resolve_config(source, weights_path)
+
+    model = _build_model(device, config)
+    model.eval()
+    state_dict = load_file(str(weights_path), device="cpu")
+    state_dict = _remap_single_codebook_keys(state_dict)
+    model.load_state_dict(state_dict)
+    model.to("cuda")
+
+    tokenizer = MT3Tokenizer(
+        instrument_vocabulary="MT3_FULL_PLUS",
+        max_shift_steps=1001,
+    )
+    return TranscriptionModel(model=model, tokenizer=tokenizer, device=device)
+
+
+print(f"[MuScriptor Studio] Loading {MODEL_VARIANT} model once at startup…", flush=True)
+_model_load_started = time.perf_counter()
+MODEL = _load_model_zerogpu()
+print(
+    "[MuScriptor Studio] Model ready in "
+    f"{time.perf_counter() - _model_load_started:.2f}s.",
+    flush=True,
+)
+
+
+def _audio_path(value: Any) -> str | None:
+    if value is None:
+        return None
+    if isinstance(value, (str, Path)):
+        return str(value)
+    if isinstance(value, dict):
+        path = value.get("path") or value.get("name")
+        return str(path) if path else None
+    path = getattr(value, "path", None) or getattr(value, "name", None)
+    return str(path) if path else None
+
+
+def _audio_duration(path: str | None) -> float | None:
+    if not path:
+        return None
+    try:
+        return float(sf.info(path).duration)
+    except Exception:
+        return None
+
+
+def _estimate_gpu_duration(audio: Any, *args: Any, **kwargs: Any) -> int:
+    """Estimate allocation from 5-second chunks; accepts Gradio extras."""
+
+    duration = _audio_duration(_audio_path(audio))
+    chunks = max(1, math.ceil((duration or 15.0) / 5.0))
+    return min(GPU_DURATION_CAP, GPU_BASE_SECONDS + chunks * GPU_SECONDS_PER_CHUNK)
+
+
+def _display_name(name: str) -> str:
+    if name.startswith("program_"):
+        return f"MIDI program {name.removeprefix('program_')}"
+    special = {
+        "drums": "Drums",
+        "voice": "Voice",
+        "flutes": "Flutes",
+        "soprano_and_alto_sax": "Soprano & alto sax",
+    }
+    return special.get(name, name.replace("_", " ").title())
+
+
+def _color_for(name: str) -> str:
+    digest = hashlib.sha1(name.encode("utf-8")).digest()
+    return COLORS[int.from_bytes(digest[:2], "big") % len(COLORS)]
+
+
+def _slug(name: str) -> str:
+    return re.sub(r"[^a-z0-9]+", "-", name.lower()).strip("-") or "track"
+
+
+def _data_uri(data: bytes) -> str:
+    encoded = base64.b64encode(data).decode("ascii")
+    return f"data:audio/midi;base64,{encoded}"
+
+
+def _program_for(name: str) -> int:
+    if name == "drums":
+        return 0
+    try:
+        return int(MODEL._program_for_instrument(name))
+    except Exception:
+        if name.startswith("program_"):
+            try:
+                return int(name.removeprefix("program_"))
+            except ValueError:
+                pass
+        return 0
+
+
+def _notes_from_events(
+    events: list[NoteStartEvent | NoteEndEvent | ProgressEvent],
+) -> dict[str, list[dict[str, float | int]]]:
+    notes: dict[str, list[dict[str, float | int]]] = defaultdict(list)
+    for event in events:
+        if not isinstance(event, NoteEndEvent):
+            continue
+        start = event.start_event
+        notes[start.instrument].append(
+            {
+                "pitch": int(start.pitch),
+                "start": round(float(start.start_time), 4),
+                "end": round(max(float(event.end_time), float(start.start_time) + 0.01), 4),
+                "velocity": 100,
+            }
+        )
+    for instrument_notes in notes.values():
+        instrument_notes.sort(key=lambda note: (note["start"], note["pitch"]))
+    return dict(notes)
+
+
+def _track_payloads(
+    notes: dict[str, list[dict[str, float | int]]],
+    requested: list[str] | None = None,
+    midi_by_instrument: dict[str, bytes] | None = None,
+) -> list[dict[str, Any]]:
+    names = set(notes)
+    names.update(requested or [])
+    ordered = sorted(
+        names,
+        key=lambda name: (
+            notes.get(name, [{}])[0].get("start", float("inf")) if notes.get(name) else float("inf"),
+            name,
+        ),
+    )
+    tracks: list[dict[str, Any]] = []
+    for index, name in enumerate(ordered):
+        track_notes = notes.get(name, [])
+        midi = (midi_by_instrument or {}).get(name)
+        tracks.append(
+            {
+                "id": index,
+                "key": name,
+                "name": _display_name(name),
+                "color": _color_for(name),
+                "note_count": len(track_notes),
+                "program": _program_for(name),
+                "is_drum": name == "drums",
+                "midi": _data_uri(midi) if midi else "",
+                "notes": track_notes,
+            }
+        )
+    return tracks
+
+
+def _payload(
+    *,
+    state: str,
+    status: str,
+    progress: float,
+    audio_name: str,
+    elapsed: float,
+    duration: float,
+    tracks: list[dict[str, Any]],
+    full_midi: bytes | None = None,
+) -> str:
+    return json.dumps(
+        {
+            "state": state,
+            "status": status,
+            "progress": round(max(0.0, min(1.0, progress)), 4),
+            "audio_name": audio_name,
+            "elapsed": round(elapsed, 2),
+            "duration": round(duration, 2),
+            "note_count": sum(track["note_count"] for track in tracks),
+            "full_midi": _data_uri(full_midi) if full_midi else "",
+            "tracks": tracks,
+        },
+        separators=(",", ":"),
+    )
+
+
+def _event_is_for_instrument(
+    event: NoteStartEvent | NoteEndEvent | ProgressEvent,
+    instrument: str,
+) -> bool:
+    if isinstance(event, NoteStartEvent):
+        return event.instrument == instrument
+    if isinstance(event, NoteEndEvent):
+        return event.start_event.instrument == instrument
+    return False
+
+
+def _write_outputs(
+    events: list[NoteStartEvent | NoteEndEvent | ProgressEvent],
+    track_names: list[str],
+) -> tuple[Path, dict[str, Path], bytes, dict[str, bytes]]:
+    request_dir = Path(tempfile.mkdtemp(prefix="muscriptor-output-"))
+    full_bytes = MODEL.events_to_midi_bytes(iter(events))
+    full_path = request_dir / "muscriptor-transcription.mid"
+    full_path.write_bytes(full_bytes)
+
+    track_paths: dict[str, Path] = {}
+    midi_by_instrument: dict[str, bytes] = {}
+    for name in track_names:
+        filtered = [event for event in events if _event_is_for_instrument(event, name)]
+        track_bytes = MODEL.events_to_midi_bytes(iter(filtered))
+        track_path = request_dir / f"{_slug(name)}.mid"
+        track_path.write_bytes(track_bytes)
+        track_paths[name] = track_path
+        midi_by_instrument[name] = track_bytes
+    return full_path, track_paths, full_bytes, midi_by_instrument
+
+
+def _manifest(
+    *,
+    state: str,
+    audio_name: str,
+    elapsed: float,
+    duration: float,
+    tracks: list[dict[str, Any]],
+    full_path: Path | None = None,
+    track_paths: dict[str, Path] | None = None,
+    message: str | None = None,
+) -> dict[str, Any]:
+    result: dict[str, Any] = {
+        "state": state,
+        "model": MODEL_VARIANT,
+        "model_id": MODEL_ID,
+        "audio_name": audio_name,
+        "audio_duration_seconds": round(duration, 3),
+        "inference_seconds": round(elapsed, 3),
+        "note_count": sum(track["note_count"] for track in tracks),
+        "track_count": len(tracks),
+        "tracks": [
+            {
+                "instrument": track["key"],
+                "display_name": track["name"],
+                "note_count": track["note_count"],
+                "program": track["program"],
+                "is_drum": track["is_drum"],
+                "file": str(track_paths[track["key"]])
+                if track_paths and track["key"] in track_paths
+                else None,
+            }
+            for track in tracks
+        ],
+        "full_midi": str(full_path) if full_path else None,
+    }
+    if message:
+        result["message"] = message
+    return result
+
+
+@spaces.GPU(duration=_estimate_gpu_duration)
+def transcribe_audio(
+    audio: Any,
+    instruments: list[str] | None,
+    use_sampling: bool,
+    temperature: float,
+) -> Iterator[tuple[str | None, list[str] | None, str, dict[str, Any]]]:
+    """Stream chunk progress, then return combined and isolated MIDI files."""
+
+    path = _audio_path(audio)
+    if not path:
+        empty_tracks: list[dict[str, Any]] = []
+        message = "Drop an audio file before starting transcription."
+        yield (
+            None,
+            None,
+            _payload(
+                state="error",
+                status=message,
+                progress=0,
+                audio_name="",
+                elapsed=0,
+                duration=0,
+                tracks=empty_tracks,
+            ),
+            _manifest(
+                state="error",
+                audio_name="",
+                elapsed=0,
+                duration=0,
+                tracks=empty_tracks,
+                message=message,
+            ),
+        )
+        return
+
+    audio_name = Path(path).name
+    duration = _audio_duration(path) or 0.0
+    if duration > MAX_AUDIO_SECONDS:
+        tracks = _track_payloads({}, instruments)
+        message = f"This demo accepts audio up to {MAX_AUDIO_SECONDS:.0f} seconds."
+        yield (
+            None,
+            None,
+            _payload(
+                state="error",
+                status=message,
+                progress=0,
+                audio_name=audio_name,
+                elapsed=0,
+                duration=duration,
+                tracks=tracks,
+            ),
+            _manifest(
+                state="error",
+                audio_name=audio_name,
+                elapsed=0,
+                duration=duration,
+                tracks=tracks,
+                message=message,
+            ),
+        )
+        return
+
+    requested = list(dict.fromkeys(instruments or []))
+    started = time.perf_counter()
+    events: list[NoteStartEvent | NoteEndEvent | ProgressEvent] = []
+    last_completed = -1
+
+    try:
+        stream = MODEL.transcribe(
+            path,
+            instruments=requested or None,
+            use_sampling=bool(use_sampling),
+            temperature=float(temperature),
+            batch_size=1,
+        )
+        for event in stream:
+            events.append(event)
+            if not isinstance(event, ProgressEvent):
+                continue
+            if event.completed == last_completed:
+                continue
+            last_completed = event.completed
+            elapsed = time.perf_counter() - started
+            fraction = event.completed / max(1, event.total)
+            notes = _notes_from_events(events)
+            tracks = _track_payloads(notes, requested)
+            status = (
+                "GPU ready · preparing the first 5-second window"
+                if event.completed == 0
+                else f"Transcribed {event.completed} of {event.total} audio windows"
+            )
+            yield (
+                None,
+                None,
+                _payload(
+                    state="transcribing",
+                    status=status,
+                    progress=fraction,
+                    audio_name=audio_name,
+                    elapsed=elapsed,
+                    duration=duration,
+                    tracks=tracks,
+                ),
+                _manifest(
+                    state="running",
+                    audio_name=audio_name,
+                    elapsed=elapsed,
+                    duration=duration,
+                    tracks=tracks,
+                ),
+            )
+
+        elapsed = time.perf_counter() - started
+        notes = _notes_from_events(events)
+        preview_tracks = _track_payloads(notes, requested)
+        track_names = [track["key"] for track in preview_tracks]
+        full_path, track_paths, full_bytes, midi_by_instrument = _write_outputs(
+            events, track_names
+        )
+        tracks = _track_payloads(notes, requested, midi_by_instrument)
+        print(
+            "[MuScriptor Studio] "
+            f"{audio_name}: {duration:.2f}s audio, {len(tracks)} tracks, "
+            f"{sum(track['note_count'] for track in tracks)} notes, "
+            f"{elapsed:.2f}s inference.",
+            flush=True,
+        )
+        yield (
+            str(full_path),
+            [str(track_paths[track["key"]]) for track in tracks],
+            _payload(
+                state="complete",
+                status=f"Transcription complete in {elapsed:.1f} seconds",
+                progress=1,
+                audio_name=audio_name,
+                elapsed=elapsed,
+                duration=duration,
+                tracks=tracks,
+                full_midi=full_bytes,
+            ),
+            _manifest(
+                state="complete",
+                audio_name=audio_name,
+                elapsed=elapsed,
+                duration=duration,
+                tracks=tracks,
+                full_path=full_path,
+                track_paths=track_paths,
+            ),
+        )
+    except Exception as exc:
+        elapsed = time.perf_counter() - started
+        notes = _notes_from_events(events)
+        tracks = _track_payloads(notes, requested)
+        message = f"Transcription stopped: {type(exc).__name__}: {exc}"
+        print(f"[MuScriptor Studio] {message}", file=sys.stderr, flush=True)
+        yield (
+            None,
+            None,
+            _payload(
+                state="error",
+                status=message,
+                progress=0,
+                audio_name=audio_name,
+                elapsed=elapsed,
+                duration=duration,
+                tracks=tracks,
+            ),
+            _manifest(
+                state="error",
+                audio_name=audio_name,
+                elapsed=elapsed,
+                duration=duration,
+                tracks=tracks,
+                message=message,
+            ),
+        )
+
+
+def _read_asset(name: str) -> str:
+    return (ASSET_ROOT / name).read_text(encoding="utf-8")
+
+
+APP_CSS = _read_asset("app.css")
+VISUALIZER_TEMPLATE = _read_asset("visualizer.html")
+VISUALIZER_JS = _read_asset("visualizer.js")
+
+INSTRUMENT_CHOICES = [
+    (_display_name(name), name)
+    for name in sorted(MT3_FULL_PLUS_GROUP_NAMES, key=MT3_FULL_PLUS_GROUP_NAMES.get)
+]
+
+INITIAL_VISUALIZER = _payload(
+    state="idle",
+    status="Ready for audio",
+    progress=0,
+    audio_name="",
+    elapsed=0,
+    duration=0,
+    tracks=[],
+)
+
+HEADER = """
+<header class="masthead-inner">
+  <a class="brand" href="https://github.com/muscriptor/muscriptor" target="_blank" rel="noreferrer">
+    <span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
+    <span>MuScriptor</span>
+  </a>
+  <div class="header-meta">
+    <span id="model-badge"><b></b> Medium · 307M</span>
+    <span class="zerogpu-badge">ZeroGPU</span>
+  </div>
+</header>
+"""
+
+INTRO = """
+<div class="intro-copy">
+  <span class="eyebrow">Multitrack transcription</span>
+  <h1>Turn a recording into<br><em>editable music.</em></h1>
+  <p>MuScriptor separates notes by instrument and shapes them into MIDI—one 5-second window at a time.</p>
+</div>
+"""
+
+UPLOAD_HEADING = """
+<div class="section-heading">
+  <span class="step-number">01</span>
+  <div><h2>Choose audio</h2><p>WAV, MP3, FLAC or OGG · up to 60 seconds</p></div>
+</div>
+"""
+
+RESULT_HEADING = """
+<div class="section-heading result-heading">
+  <span class="step-number">02</span>
+  <div><h2>Transcription</h2><p>Live notes, isolated tracks and MIDI export</p></div>
+</div>
+"""
+
+FOOTNOTE = """
+<div class="footnote">
+  <span>Your audio is processed ephemerally and is not retained.</span>
+  <span>Kyutai × Mirelo · CC BY-NC 4.0 weights</span>
+</div>
+"""
+
+with gr.Blocks(title="MuScriptor — Audio to MIDI") as demo:
+    with gr.Column(elem_id="app-shell"):
+        gr.HTML(HEADER, elem_id="masthead")
+        gr.HTML(INTRO, elem_id="intro")
+
+        with gr.Row(elem_id="studio-grid", equal_height=False):
+            with gr.Column(scale=4, min_width=320, elem_id="upload-card"):
+                gr.HTML(UPLOAD_HEADING)
+                audio_input = gr.Audio(
+                    label="Drop audio here",
+                    sources=["upload"],
+                    type="filepath",
+                    elem_id="audio-input",
+                )
+                with gr.Accordion(
+                    "Guide the transcription",
+                    open=False,
+                    elem_id="advanced-settings",
+                ):
+                    instrument_input = gr.CheckboxGroup(
+                        choices=INSTRUMENT_CHOICES,
+                        value=[],
+                        label="Known instruments",
+                        info="Optional. Leave blank for automatic discovery.",
+                    )
+                    use_sampling_input = gr.Checkbox(
+                        label="Creative decoding",
+                        value=False,
+                        info="Uses stochastic sampling instead of deterministic decoding.",
+                    )
+                    temperature_input = gr.Slider(
+                        minimum=0.2,
+                        maximum=1.4,
+                        value=1.0,
+                        step=0.1,
+                        label="Temperature",
+                    )
+                transcribe_button = gr.Button(
+                    "Transcribe audio",
+                    variant="primary",
+                    elem_id="transcribe-button",
+                )
+                gr.HTML(
+                    '<p class="cold-note"><span></span> Cold starts can take a moment while ZeroGPU allocates the model.</p>'
+                )
+
+            with gr.Column(scale=7, min_width=420, elem_id="result-panel"):
+                gr.HTML(RESULT_HEADING)
+                visualizer_output = gr.HTML(
+                    value=INITIAL_VISUALIZER,
+                    html_template=VISUALIZER_TEMPLATE,
+                    js_on_load=VISUALIZER_JS,
+                    elem_id="visualizer-host",
+                )
+                full_midi_output = gr.File(
+                    label="Full arrangement MIDI",
+                    elem_id="download-output",
+                )
+                track_files_output = gr.File(
+                    label="Instrument MIDI files",
+                    file_count="multiple",
+                    visible=False,
+                )
+                manifest_output = gr.JSON(label="Transcription manifest", visible=False)
+
+        gr.HTML(FOOTNOTE)
+
+    transcribe_button.click(
+        fn=transcribe_audio,
+        inputs=[
+            audio_input,
+            instrument_input,
+            use_sampling_input,
+            temperature_input,
+        ],
+        outputs=[
+            full_midi_output,
+            track_files_output,
+            visualizer_output,
+            manifest_output,
+        ],
+        api_name="transcribe",
+        concurrency_limit=1,
+        concurrency_id="muscriptor-medium",
+        show_progress="full",
+    )
+
+demo.queue(default_concurrency_limit=1, max_size=8)
+
+
+if __name__ == "__main__":
+    demo.launch(
+        theme=gr.themes.Base(
+            primary_hue="indigo",
+            neutral_hue="slate",
+            font=["Inter", "ui-sans-serif", "system-ui", "sans-serif"],
+        ),
+        css=APP_CSS,
+        js="""() => {
+          document.documentElement.classList.add('dark');
+          try { localStorage.setItem('theme', 'dark'); } catch (_) {}
+        }""",
+        show_error=True,
+    )

assets/app.css

@@ -0,0 +1,1235 @@
+:root {
+  color-scheme: dark;
+  --ms-bg: #090b0f;
+  --ms-bg-elevated: #0d1016;
+  --ms-panel: rgba(18, 21, 29, 0.82);
+  --ms-panel-solid: #12151d;
+  --ms-panel-hover: #171b25;
+  --ms-border: rgba(255, 255, 255, 0.085);
+  --ms-border-strong: rgba(255, 255, 255, 0.14);
+  --ms-text: #f4f5f7;
+  --ms-text-soft: #b5bac6;
+  --ms-muted: #747b8c;
+  --ms-faint: #4f5564;
+  --ms-accent: #8b7cff;
+  --ms-accent-2: #5f8cff;
+  --ms-accent-soft: rgba(139, 124, 255, 0.15);
+  --ms-success: #63d8a2;
+  --ms-warning: #f4bf75;
+  --ms-danger: #ff758e;
+  --ms-radius-xl: 22px;
+  --ms-radius-lg: 16px;
+  --ms-radius-md: 12px;
+  --ms-shadow: 0 28px 80px rgba(0, 0, 0, 0.34), 0 1px 0 rgba(255, 255, 255, 0.025) inset;
+  --ms-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --ms-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+}
+
+html,
+body {
+  min-height: 100%;
+  background: var(--ms-bg) !important;
+}
+
+body {
+  margin: 0;
+  color: var(--ms-text);
+  font-family: var(--ms-font);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+body::before {
+  position: fixed;
+  z-index: -2;
+  inset: 0;
+  content: "";
+  pointer-events: none;
+  background:
+    radial-gradient(1000px 620px at 10% -10%, rgba(92, 75, 202, 0.18), transparent 62%),
+    radial-gradient(780px 500px at 96% 8%, rgba(53, 103, 175, 0.12), transparent 66%),
+    linear-gradient(180deg, #0a0c11 0%, #090b0f 50%, #080a0d 100%);
+}
+
+body::after {
+  position: fixed;
+  z-index: -1;
+  inset: 0;
+  content: "";
+  pointer-events: none;
+  opacity: 0.28;
+  background-image: linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
+  background-size: 32px 32px;
+  mask-image: linear-gradient(to bottom, black, transparent 78%);
+}
+
+.gradio-container,
+.gradio-container.dark {
+  min-height: 100vh !important;
+  background: transparent !important;
+  color: var(--ms-text) !important;
+  font-family: var(--ms-font) !important;
+}
+
+.gradio-container .prose,
+.gradio-container .prose * {
+  color: inherit;
+}
+
+#app-shell {
+  width: min(1180px, calc(100% - 40px));
+  margin: 0 auto;
+  padding: 38px 0 64px;
+  gap: 20px;
+}
+
+#masthead {
+  position: relative;
+  overflow: hidden;
+  padding: 18px 4px 28px;
+  border: 0 !important;
+  background: transparent !important;
+}
+
+#masthead .masthead-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+}
+
+#masthead .brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 11px;
+  color: var(--ms-text) !important;
+  font-size: 0.92rem;
+  font-weight: 680;
+  letter-spacing: -0.025em;
+  text-decoration: none;
+}
+
+.brand-mark {
+  display: flex;
+  align-items: end;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  gap: 2px;
+  padding: 7px;
+  border: 1px solid rgba(139, 124, 255, 0.3);
+  border-radius: 9px;
+  background: linear-gradient(145deg, rgba(139, 124, 255, 0.2), rgba(95, 140, 255, 0.08));
+  box-shadow: 0 8px 28px rgba(75, 60, 180, 0.2), inset 0 1px rgba(255, 255, 255, 0.13);
+}
+
+.brand-mark i {
+  display: block;
+  width: 2px;
+  border-radius: 3px;
+  background: #d8d4ff;
+}
+
+.brand-mark i:nth-child(1) { height: 6px; opacity: 0.62; }
+.brand-mark i:nth-child(2) { height: 12px; }
+.brand-mark i:nth-child(3) { height: 9px; opacity: 0.8; }
+.brand-mark i:nth-child(4) { height: 14px; }
+
+.header-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+#masthead #model-badge {
+  margin: 0 !important;
+}
+
+.zerogpu-badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 30px;
+  padding: 5px 10px;
+  border: 1px solid var(--ms-border);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.025);
+  color: var(--ms-muted);
+  font-family: var(--ms-mono);
+  font-size: 0.65rem;
+  font-weight: 620;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+}
+
+#intro {
+  padding: 30px 4px 34px;
+  border: 0 !important;
+  background: transparent !important;
+}
+
+.intro-copy {
+  max-width: 780px;
+}
+
+.eyebrow {
+  display: inline-block;
+  margin-bottom: 16px;
+  color: #aaa1ff;
+  font-family: var(--ms-mono);
+  font-size: 0.68rem;
+  font-weight: 670;
+  letter-spacing: 0.13em;
+  text-transform: uppercase;
+}
+
+.intro-copy h1 {
+  margin: 0;
+  color: var(--ms-text);
+  font-size: clamp(2.55rem, 7.2vw, 5.8rem);
+  font-weight: 590;
+  letter-spacing: -0.072em;
+  line-height: 0.94;
+}
+
+.intro-copy h1 em {
+  color: transparent;
+  background: linear-gradient(112deg, #d9d5ff 4%, #8b7cff 48%, #5f9cff 94%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  font-style: normal;
+}
+
+.intro-copy p {
+  max-width: 630px;
+  margin: 23px 0 0;
+  color: var(--ms-text-soft);
+  font-size: clamp(0.96rem, 1.8vw, 1.12rem);
+  line-height: 1.68;
+  letter-spacing: -0.015em;
+}
+
+#studio-grid {
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.section-heading {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 2px 2px 12px;
+}
+
+.section-heading .step-number {
+  color: var(--ms-faint);
+  font-family: var(--ms-mono);
+  font-size: 0.62rem;
+  letter-spacing: 0.08em;
+}
+
+.section-heading h2 {
+  margin: 0 0 4px;
+  color: var(--ms-text);
+  font-size: 0.9rem;
+  font-weight: 630;
+  letter-spacing: -0.02em;
+}
+
+.section-heading p {
+  margin: 0;
+  color: var(--ms-muted);
+  font-size: 0.68rem;
+  line-height: 1.4;
+}
+
+.cold-note {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin: 3px 2px 0 !important;
+  color: var(--ms-faint);
+  font-size: 0.65rem;
+  line-height: 1.5;
+}
+
+.cold-note > span {
+  width: 6px;
+  height: 6px;
+  flex: none;
+  margin-top: 3px;
+  border-radius: 50%;
+  background: var(--ms-warning);
+  box-shadow: 0 0 8px rgba(244, 191, 117, 0.38);
+}
+
+.footnote {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 14px 5px 0;
+  color: var(--ms-faint);
+  font-family: var(--ms-mono);
+  font-size: 0.58rem;
+  line-height: 1.5;
+}
+
+#masthead .prose {
+  max-width: 760px;
+}
+
+#masthead h1 {
+  margin: 0 0 13px;
+  color: var(--ms-text);
+  font-size: clamp(2.35rem, 6vw, 4.9rem);
+  font-weight: 620;
+  letter-spacing: -0.064em;
+  line-height: 0.96;
+}
+
+#masthead h1 strong,
+#masthead .accent {
+  color: transparent;
+  background: linear-gradient(112deg, #ffffff 8%, #beb7ff 52%, #77a6ff 94%);
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+
+#masthead p {
+  max-width: 610px;
+  margin: 0;
+  color: var(--ms-text-soft);
+  font-size: clamp(0.98rem, 1.6vw, 1.12rem);
+  line-height: 1.68;
+  letter-spacing: -0.012em;
+}
+
+#masthead a {
+  color: #d7d3ff;
+  text-decoration-color: rgba(215, 211, 255, 0.35);
+  text-underline-offset: 3px;
+}
+
+#model-badge {
+  display: inline-flex !important;
+  align-items: center;
+  width: max-content !important;
+  min-width: 0 !important;
+  min-height: 30px;
+  margin-bottom: 22px;
+  padding: 5px 11px !important;
+  border: 1px solid rgba(139, 124, 255, 0.22) !important;
+  border-radius: 999px !important;
+  background: rgba(139, 124, 255, 0.09) !important;
+  box-shadow: 0 0 32px rgba(111, 92, 255, 0.07) inset;
+  color: #cec8ff !important;
+  font-family: var(--ms-mono) !important;
+  font-size: 0.7rem !important;
+  font-weight: 650 !important;
+  letter-spacing: 0.08em !important;
+  line-height: 1 !important;
+  text-transform: uppercase;
+}
+
+#model-badge::before {
+  width: 6px;
+  height: 6px;
+  margin-right: 7px;
+  border-radius: 50%;
+  background: var(--ms-success);
+  box-shadow: 0 0 0 4px rgba(99, 216, 162, 0.1), 0 0 12px rgba(99, 216, 162, 0.62);
+  content: "";
+}
+
+#upload-card,
+#result-panel {
+  position: relative;
+  border: 1px solid var(--ms-border) !important;
+  border-radius: var(--ms-radius-xl) !important;
+  background: linear-gradient(145deg, rgba(20, 23, 32, 0.93), rgba(13, 16, 22, 0.9)) !important;
+  box-shadow: var(--ms-shadow) !important;
+  backdrop-filter: blur(22px);
+}
+
+#upload-card {
+  padding: clamp(16px, 2.5vw, 26px) !important;
+}
+
+#upload-card::before,
+#result-panel::before {
+  position: absolute;
+  top: 0;
+  right: 12%;
+  left: 12%;
+  height: 1px;
+  content: "";
+  pointer-events: none;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
+}
+
+#audio-input {
+  overflow: hidden;
+  min-height: 214px;
+  border: 1px dashed rgba(255, 255, 255, 0.16) !important;
+  border-radius: var(--ms-radius-lg) !important;
+  background: rgba(7, 9, 13, 0.46) !important;
+  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
+}
+
+#audio-input:hover,
+#audio-input:focus-within {
+  border-color: rgba(139, 124, 255, 0.54) !important;
+  background: rgba(139, 124, 255, 0.045) !important;
+}
+
+#audio-input .wrap,
+#audio-input > div,
+#audio-input .upload-container {
+  border: 0 !important;
+  background: transparent !important;
+}
+
+#audio-input .upload-container {
+  min-height: 190px;
+}
+
+#audio-input button,
+#audio-input .upload-button {
+  border-color: var(--ms-border-strong) !important;
+  border-radius: 10px !important;
+  background: rgba(255, 255, 255, 0.055) !important;
+  color: var(--ms-text) !important;
+  box-shadow: none !important;
+}
+
+#audio-input button:hover,
+#audio-input .upload-button:hover {
+  border-color: rgba(139, 124, 255, 0.42) !important;
+  background: rgba(139, 124, 255, 0.12) !important;
+}
+
+#audio-input audio {
+  width: 100%;
+  filter: saturate(0.75) contrast(0.96);
+}
+
+#audio-input label,
+#audio-input .label-wrap,
+#advanced-settings label,
+#advanced-settings .label-wrap {
+  color: var(--ms-text-soft) !important;
+  font-size: 0.78rem !important;
+  font-weight: 570 !important;
+  letter-spacing: -0.005em;
+}
+
+#transcribe-button {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  min-height: 50px;
+  margin-top: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.15) !important;
+  border-radius: 13px !important;
+  background: linear-gradient(128deg, #7a69eb 0%, #675ad2 48%, #4f75d5 100%) !important;
+  box-shadow: 0 10px 30px rgba(76, 66, 181, 0.25), 0 1px 0 rgba(255, 255, 255, 0.2) inset !important;
+  color: #fff !important;
+  font-size: 0.91rem !important;
+  font-weight: 650 !important;
+  letter-spacing: -0.012em;
+  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease !important;
+}
+
+#transcribe-button::after {
+  position: absolute;
+  inset: 0;
+  content: "";
+  pointer-events: none;
+  opacity: 0;
+  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.2) 48%, transparent 74%);
+  transform: translateX(-100%);
+}
+
+#transcribe-button:hover:not(:disabled) {
+  filter: brightness(1.08);
+  transform: translateY(-1px);
+  box-shadow: 0 14px 38px rgba(76, 66, 181, 0.32), 0 1px 0 rgba(255, 255, 255, 0.22) inset !important;
+}
+
+#transcribe-button:hover:not(:disabled)::after {
+  opacity: 1;
+  transform: translateX(100%);
+  transition: transform 650ms ease;
+}
+
+#transcribe-button:active:not(:disabled) {
+  transform: translateY(0) scale(0.995);
+}
+
+#transcribe-button:disabled,
+#transcribe-button[aria-busy="true"] {
+  cursor: wait;
+  filter: saturate(0.55) brightness(0.8);
+}
+
+#advanced-settings {
+  overflow: hidden;
+  border: 1px solid var(--ms-border) !important;
+  border-radius: var(--ms-radius-md) !important;
+  background: rgba(8, 10, 14, 0.42) !important;
+}
+
+#advanced-settings > button,
+#advanced-settings > .label-wrap,
+#advanced-settings summary {
+  min-height: 44px;
+  padding-inline: 14px !important;
+  background: transparent !important;
+  color: var(--ms-text-soft) !important;
+  font-size: 0.8rem !important;
+  font-weight: 570 !important;
+}
+
+#advanced-settings > div:not(.label-wrap) {
+  border-color: var(--ms-border) !important;
+  background: transparent !important;
+}
+
+#advanced-settings input,
+#advanced-settings textarea,
+#advanced-settings select {
+  border-color: var(--ms-border) !important;
+  border-radius: 9px !important;
+  background: rgba(255, 255, 255, 0.035) !important;
+  color: var(--ms-text) !important;
+}
+
+#advanced-settings input[type="range"] {
+  accent-color: var(--ms-accent);
+}
+
+#advanced-settings input[type="checkbox"] {
+  accent-color: var(--ms-accent);
+}
+
+#result-panel {
+  min-width: 0;
+  padding: clamp(12px, 2vw, 20px) !important;
+}
+
+#visualizer-host {
+  min-width: 0;
+  border: 0 !important;
+  background: transparent !important;
+}
+
+#visualizer-host > .wrap,
+#visualizer-host > div,
+#visualizer-host .html-container {
+  min-width: 0;
+  padding: 0 !important;
+  border: 0 !important;
+  background: transparent !important;
+}
+
+#download-output {
+  overflow: hidden;
+  border: 1px solid var(--ms-border) !important;
+  border-radius: var(--ms-radius-md) !important;
+  background: rgba(255, 255, 255, 0.025) !important;
+}
+
+#download-output a,
+#download-output button {
+  color: #d4d0ff !important;
+}
+
+/* Custom transcription visualizer */
+.msv-root {
+  --roll-height: 334px;
+  display: grid;
+  min-width: 0;
+  gap: 16px;
+  color: var(--ms-text);
+  font-family: var(--ms-font);
+}
+
+.msv-root *,
+.msv-root *::before,
+.msv-root *::after {
+  box-sizing: border-box;
+}
+
+.msv-topbar {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 3px 3px 0;
+}
+
+.msv-heading {
+  min-width: 0;
+}
+
+.msv-eyebrow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 7px;
+  color: var(--ms-muted);
+  font-family: var(--ms-mono);
+  font-size: 0.65rem;
+  font-weight: 650;
+  letter-spacing: 0.09em;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.msv-status-dot {
+  width: 7px;
+  height: 7px;
+  flex: none;
+  border-radius: 50%;
+  background: var(--ms-faint);
+  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.035);
+}
+
+.msv-root[data-state="queued"] .msv-status-dot,
+.msv-root[data-state="loading"] .msv-status-dot,
+.msv-root[data-state="cold_start"] .msv-status-dot,
+.msv-root[data-state="transcribing"] .msv-status-dot,
+.msv-root[data-state="processing"] .msv-status-dot {
+  background: var(--ms-warning);
+  box-shadow: 0 0 0 4px rgba(244, 191, 117, 0.1), 0 0 14px rgba(244, 191, 117, 0.38);
+  animation: msv-pulse 1.7s ease-in-out infinite;
+}
+
+.msv-root[data-state="complete"] .msv-status-dot,
+.msv-root[data-state="completed"] .msv-status-dot,
+.msv-root[data-state="ready"] .msv-status-dot {
+  background: var(--ms-success);
+  box-shadow: 0 0 0 4px rgba(99, 216, 162, 0.09), 0 0 13px rgba(99, 216, 162, 0.32);
+}
+
+.msv-root[data-state="error"] .msv-status-dot,
+.msv-root[data-state="failed"] .msv-status-dot {
+  background: var(--ms-danger);
+  box-shadow: 0 0 0 4px rgba(255, 117, 142, 0.1);
+}
+
+.msv-title {
+  overflow: hidden;
+  max-width: 640px;
+  margin: 0;
+  color: var(--ms-text);
+  font-size: clamp(1.05rem, 2vw, 1.35rem);
+  font-weight: 610;
+  letter-spacing: -0.032em;
+  line-height: 1.22;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.msv-subtitle {
+  margin: 7px 0 0;
+  color: var(--ms-muted);
+  font-size: 0.76rem;
+  line-height: 1.45;
+}
+
+.msv-actions {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 7px;
+}
+
+.msv-button,
+.msv-download,
+.msv-track-button,
+.msv-track-download {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--ms-border) !important;
+  border-radius: 9px;
+  background: rgba(255, 255, 255, 0.035);
+  box-shadow: none;
+  color: var(--ms-text-soft) !important;
+  font: 560 0.73rem/1 var(--ms-font);
+  text-decoration: none !important;
+  cursor: pointer;
+  transition: color 140ms ease, border-color 140ms ease, background 140ms ease, transform 140ms ease;
+}
+
+.msv-button {
+  width: 34px;
+  height: 34px;
+  padding: 0;
+}
+
+.msv-button svg,
+.msv-download svg,
+.msv-track-download svg {
+  width: 15px;
+  height: 15px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.8;
+}
+
+.msv-button:hover:not(:disabled),
+.msv-download:hover:not([aria-disabled="true"]),
+.msv-track-button:hover,
+.msv-track-download:hover:not([aria-disabled="true"]) {
+  border-color: rgba(139, 124, 255, 0.32) !important;
+  background: var(--ms-accent-soft);
+  color: #e4e1ff !important;
+  transform: translateY(-1px);
+}
+
+.msv-button:focus-visible,
+.msv-download:focus-visible,
+.msv-track-button:focus-visible,
+.msv-track-download:focus-visible {
+  outline: 2px solid rgba(139, 124, 255, 0.7);
+  outline-offset: 2px;
+}
+
+.msv-button:disabled,
+.msv-download[aria-disabled="true"],
+.msv-track-download[aria-disabled="true"] {
+  pointer-events: none;
+  opacity: 0.34;
+  cursor: not-allowed;
+}
+
+.msv-button[aria-pressed="true"] {
+  border-color: rgba(139, 124, 255, 0.34) !important;
+  background: rgba(139, 124, 255, 0.18);
+  color: #e7e4ff !important;
+}
+
+.msv-download {
+  height: 34px;
+  gap: 7px;
+  padding: 0 11px;
+}
+
+.msv-progress-wrap {
+  display: grid;
+  gap: 9px;
+  padding: 12px 14px;
+  border: 1px solid var(--ms-border);
+  border-radius: 12px;
+  background: rgba(8, 10, 14, 0.46);
+}
+
+.msv-progress-wrap[hidden] {
+  display: none;
+}
+
+.msv-progress-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.msv-progress-copy {
+  overflow: hidden;
+  color: var(--ms-text-soft);
+  font-size: 0.74rem;
+  line-height: 1.3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.msv-progress-value {
+  flex: none;
+  color: var(--ms-muted);
+  font-family: var(--ms-mono);
+  font-size: 0.67rem;
+}
+
+.msv-progress-track {
+  position: relative;
+  overflow: hidden;
+  height: 4px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.055);
+}
+
+.msv-progress-bar {
+  width: 0;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--ms-accent), #6b9bff);
+  box-shadow: 0 0 18px rgba(119, 102, 255, 0.45);
+  transition: width 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.msv-progress-wrap[data-indeterminate="true"] .msv-progress-bar {
+  width: 34% !important;
+  animation: msv-indeterminate 1.45s ease-in-out infinite;
+}
+
+.msv-stats {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  overflow: hidden;
+  border: 1px solid var(--ms-border);
+  border-radius: 12px;
+  background: rgba(8, 10, 14, 0.35);
+}
+
+.msv-stat {
+  min-width: 0;
+  padding: 11px 13px;
+}
+
+.msv-stat + .msv-stat {
+  border-left: 1px solid var(--ms-border);
+}
+
+.msv-stat-label {
+  display: block;
+  margin-bottom: 4px;
+  color: var(--ms-faint);
+  font-family: var(--ms-mono);
+  font-size: 0.58rem;
+  font-weight: 650;
+  letter-spacing: 0.075em;
+  text-transform: uppercase;
+}
+
+.msv-stat-value {
+  display: block;
+  overflow: hidden;
+  color: var(--ms-text-soft);
+  font-size: 0.78rem;
+  font-weight: 570;
+  letter-spacing: -0.01em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.msv-roll-shell {
+  position: relative;
+  overflow: hidden;
+  min-width: 0;
+  border: 1px solid var(--ms-border);
+  border-radius: 14px;
+  background: #0a0d12;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.025) inset;
+}
+
+.msv-roll-labelbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 38px;
+  padding: 0 12px 0 14px;
+  border-bottom: 1px solid var(--ms-border);
+  background: rgba(255, 255, 255, 0.018);
+}
+
+.msv-roll-label {
+  color: var(--ms-muted);
+  font-family: var(--ms-mono);
+  font-size: 0.62rem;
+  font-weight: 650;
+  letter-spacing: 0.075em;
+  text-transform: uppercase;
+}
+
+.msv-roll-hint {
+  color: var(--ms-faint);
+  font-size: 0.66rem;
+}
+
+.msv-roll-scroll {
+  position: relative;
+  overflow-x: auto;
+  overflow-y: hidden;
+  width: 100%;
+  height: var(--roll-height);
+  scrollbar-color: rgba(255, 255, 255, 0.13) transparent;
+  scrollbar-width: thin;
+}
+
+.msv-roll-scroll::-webkit-scrollbar {
+  height: 8px;
+}
+
+.msv-roll-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.msv-roll-scroll::-webkit-scrollbar-thumb {
+  border: 2px solid #0a0d12;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.14);
+}
+
+.msv-roll-stage {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-width: 100%;
+}
+
+.msv-roll-canvas,
+.msv-cursor-canvas {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.msv-cursor-canvas {
+  z-index: 2;
+  pointer-events: none;
+}
+
+.msv-empty {
+  position: absolute;
+  z-index: 3;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  pointer-events: none;
+  background: radial-gradient(circle at 50% 40%, rgba(139, 124, 255, 0.055), transparent 42%);
+}
+
+.msv-empty[hidden] {
+  display: none;
+}
+
+.msv-empty-inner {
+  max-width: 360px;
+  text-align: center;
+}
+
+.msv-empty-icon {
+  display: grid;
+  width: 42px;
+  height: 42px;
+  margin: 0 auto 13px;
+  border: 1px solid var(--ms-border);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.025);
+  color: var(--ms-muted);
+  place-items: center;
+}
+
+.msv-empty-icon svg {
+  width: 20px;
+  height: 20px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.55;
+}
+
+.msv-empty-title {
+  margin: 0;
+  color: var(--ms-text-soft);
+  font-size: 0.83rem;
+  font-weight: 580;
+}
+
+.msv-empty-copy {
+  margin: 6px 0 0;
+  color: var(--ms-faint);
+  font-size: 0.7rem;
+  line-height: 1.55;
+}
+
+.msv-root[data-state="queued"] .msv-empty-icon,
+.msv-root[data-state="loading"] .msv-empty-icon,
+.msv-root[data-state="cold_start"] .msv-empty-icon,
+.msv-root[data-state="transcribing"] .msv-empty-icon,
+.msv-root[data-state="processing"] .msv-empty-icon {
+  color: #bbb4ff;
+  animation: msv-float 2.5s ease-in-out infinite;
+}
+
+.msv-section-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 2px 3px 0;
+}
+
+.msv-section-heading h3 {
+  margin: 0;
+  color: var(--ms-text-soft);
+  font-size: 0.76rem;
+  font-weight: 610;
+  letter-spacing: -0.01em;
+}
+
+.msv-track-count {
+  color: var(--ms-faint);
+  font-family: var(--ms-mono);
+  font-size: 0.62rem;
+}
+
+.msv-track-list {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.msv-track-empty {
+  grid-column: 1 / -1;
+  padding: 15px;
+  border: 1px dashed var(--ms-border);
+  border-radius: 11px;
+  color: var(--ms-faint);
+  font-size: 0.72rem;
+  text-align: center;
+}
+
+.msv-track-card {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  min-width: 0;
+  min-height: 62px;
+  gap: 11px;
+  padding: 10px 11px;
+  border: 1px solid var(--ms-border);
+  border-radius: 11px;
+  background: rgba(255, 255, 255, 0.022);
+  transition: border-color 150ms ease, background 150ms ease, opacity 150ms ease;
+}
+
+.msv-track-card:hover {
+  border-color: var(--ms-border-strong);
+  background: rgba(255, 255, 255, 0.032);
+}
+
+.msv-track-card[data-muted="true"] {
+  opacity: 0.48;
+}
+
+.msv-track-card[data-inactive="true"] {
+  opacity: 0.56;
+}
+
+.msv-track-swatch {
+  width: 9px;
+  height: 34px;
+  border-radius: 999px;
+  background: var(--track-color, var(--ms-accent));
+  box-shadow: 0 0 17px color-mix(in srgb, var(--track-color, var(--ms-accent)) 27%, transparent);
+}
+
+.msv-track-copy {
+  min-width: 0;
+}
+
+.msv-track-name {
+  overflow: hidden;
+  margin: 0 0 5px;
+  color: var(--ms-text-soft);
+  font-size: 0.76rem;
+  font-weight: 590;
+  line-height: 1.15;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.msv-track-meta {
+  overflow: hidden;
+  color: var(--ms-faint);
+  font-family: var(--ms-mono);
+  font-size: 0.58rem;
+  letter-spacing: 0.015em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.msv-track-controls {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.msv-track-button,
+.msv-track-download {
+  width: 27px;
+  height: 27px;
+  padding: 0;
+  font-family: var(--ms-mono);
+  font-size: 0.62rem;
+}
+
+.msv-track-button[aria-pressed="true"] {
+  border-color: color-mix(in srgb, var(--track-color, var(--ms-accent)) 48%, transparent) !important;
+  background: color-mix(in srgb, var(--track-color, var(--ms-accent)) 15%, transparent);
+  color: #fff !important;
+}
+
+.msv-track-download svg {
+  width: 13px;
+  height: 13px;
+}
+
+.msv-sr-only {
+  position: absolute !important;
+  overflow: hidden !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  border: 0 !important;
+  margin: -1px !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+}
+
+@keyframes msv-pulse {
+  0%, 100% { opacity: 0.62; transform: scale(0.88); }
+  50% { opacity: 1; transform: scale(1); }
+}
+
+@keyframes msv-indeterminate {
+  0% { transform: translateX(-120%); }
+  55% { transform: translateX(190%); }
+  100% { transform: translateX(310%); }
+}
+
+@keyframes msv-float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-4px); }
+}
+
+@media (max-width: 800px) {
+  #app-shell {
+    width: min(100% - 24px, 1180px);
+    padding-top: 22px;
+  }
+
+  #masthead {
+    padding-bottom: 18px;
+  }
+
+  #intro {
+    padding: 22px 3px 27px;
+  }
+
+  #masthead h1 {
+    letter-spacing: -0.052em;
+  }
+
+  .msv-track-list {
+    grid-template-columns: 1fr;
+  }
+
+  .msv-root {
+    --roll-height: 308px;
+  }
+}
+
+@media (max-width: 600px) {
+  #app-shell {
+    width: min(100% - 16px, 1180px);
+    padding-bottom: 30px;
+    gap: 12px;
+  }
+
+  #upload-card,
+  #result-panel {
+    border-radius: 17px !important;
+  }
+
+  #upload-card {
+    padding: 12px !important;
+  }
+
+  #masthead .masthead-inner,
+  .footnote {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .header-meta {
+    width: 100%;
+  }
+
+  .intro-copy h1 {
+    font-size: clamp(2.65rem, 15vw, 4.2rem);
+    letter-spacing: -0.062em;
+  }
+
+  #result-panel {
+    padding: 10px !important;
+  }
+
+  #audio-input {
+    min-height: 180px;
+  }
+
+  .msv-root {
+    --roll-height: 276px;
+    gap: 12px;
+  }
+
+  .msv-topbar {
+    display: grid;
+    gap: 12px;
+  }
+
+  .msv-title {
+    font-size: 1.05rem;
+  }
+
+  .msv-actions {
+    width: 100%;
+  }
+
+  .msv-download {
+    flex: 1;
+  }
+
+  .msv-stats {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .msv-stat:nth-child(3) {
+    border-left: 0;
+    border-top: 1px solid var(--ms-border);
+  }
+
+  .msv-stat:nth-child(4) {
+    border-top: 1px solid var(--ms-border);
+  }
+
+  .msv-roll-hint {
+    display: none;
+  }
+
+  .msv-progress-copy {
+    max-width: calc(100vw - 118px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

assets/visualizer.html

@@ -0,0 +1,94 @@
+<section class="msv-root" data-state="idle" aria-label="MuScriptor transcription result">
+  <header class="msv-topbar">
+    <div class="msv-heading">
+      <p class="msv-eyebrow">
+        <span class="msv-status-dot" aria-hidden="true"></span>
+        <span data-field="state-label">Ready for audio</span>
+      </p>
+      <h2 class="msv-title" data-field="audio-name">Your transcription</h2>
+      <p class="msv-subtitle" data-field="status">Upload a recording to reveal its notes and instruments.</p>
+    </div>
+
+    <div class="msv-actions" aria-label="Playback and download controls">
+      <button class="msv-button" type="button" data-action="play" aria-label="Play transcription" title="Play transcription" disabled>
+        <svg viewBox="0 0 20 20" aria-hidden="true">
+          <path d="M6.8 4.7 15 10l-8.2 5.3V4.7Z"></path>
+        </svg>
+      </button>
+      <button class="msv-button" type="button" data-action="stop" aria-label="Stop playback" title="Stop playback" disabled>
+        <svg viewBox="0 0 20 20" aria-hidden="true">
+          <rect x="5.5" y="5.5" width="9" height="9" rx="1"></rect>
+        </svg>
+      </button>
+      <a class="msv-download" data-action="download-full" aria-label="Download full MIDI" aria-disabled="true" tabindex="-1">
+        <svg viewBox="0 0 20 20" aria-hidden="true">
+          <path d="M10 3.5v9m0 0 3.2-3.2M10 12.5 6.8 9.3M4.5 15.7h11"></path>
+        </svg>
+        <span>Full MIDI</span>
+      </a>
+    </div>
+  </header>
+
+  <div class="msv-progress-wrap" data-region="progress" hidden>
+    <div class="msv-progress-meta">
+      <span class="msv-progress-copy" data-field="progress-copy">Preparing inference…</span>
+      <span class="msv-progress-value" data-field="progress-value">0%</span>
+    </div>
+    <div class="msv-progress-track" role="progressbar" aria-label="Transcription progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
+      <div class="msv-progress-bar" data-field="progress-bar"></div>
+    </div>
+  </div>
+
+  <div class="msv-stats" aria-label="Transcription statistics">
+    <div class="msv-stat">
+      <span class="msv-stat-label">Duration</span>
+      <span class="msv-stat-value" data-field="duration">—</span>
+    </div>
+    <div class="msv-stat">
+      <span class="msv-stat-label">Notes</span>
+      <span class="msv-stat-value" data-field="note-count">—</span>
+    </div>
+    <div class="msv-stat">
+      <span class="msv-stat-label">Tracks</span>
+      <span class="msv-stat-value" data-field="track-count">—</span>
+    </div>
+    <div class="msv-stat">
+      <span class="msv-stat-label">Elapsed</span>
+      <span class="msv-stat-value" data-field="elapsed">—</span>
+    </div>
+  </div>
+
+  <div class="msv-roll-shell">
+    <div class="msv-roll-labelbar">
+      <span class="msv-roll-label">Piano roll</span>
+      <span class="msv-roll-hint">Scroll horizontally to explore</span>
+    </div>
+    <div class="msv-roll-scroll" data-region="roll-scroll" tabindex="0" aria-label="Scrollable piano roll">
+      <div class="msv-roll-stage" data-region="roll-stage">
+        <canvas class="msv-roll-canvas" data-canvas="notes" role="img" aria-label="Color-coded transcription piano roll"></canvas>
+        <canvas class="msv-cursor-canvas" data-canvas="cursor" aria-hidden="true"></canvas>
+      </div>
+      <div class="msv-empty" data-region="empty">
+        <div class="msv-empty-inner">
+          <div class="msv-empty-icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24">
+              <path d="M5 15.5V8.7m3 9.1V5.6m3 11.1V9.2m3 7.8V3.8m3 12.4V7.4m3 7.3v-4.1"></path>
+            </svg>
+          </div>
+          <p class="msv-empty-title" data-field="empty-title">A score will appear here</p>
+          <p class="msv-empty-copy" data-field="empty-copy">MuScriptor separates notes into individual, color-coded instrument tracks.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="msv-section-heading">
+    <h3>Instrument tracks</h3>
+    <span class="msv-track-count" data-field="track-summary">No tracks yet</span>
+  </div>
+  <div class="msv-track-list" data-region="tracks" aria-label="Instrument tracks">
+    <div class="msv-track-empty">Tracks will appear after transcription.</div>
+  </div>
+
+  <p class="msv-sr-only" data-region="announcer" role="status" aria-live="polite"></p>
+</section>

assets/visualizer.js

@@ -0,0 +1,898 @@
+const root = element.querySelector(".msv-root");
+
+if (!root) {
+  throw new Error("MuScriptor visualizer template is missing .msv-root");
+}
+
+const $ = (selector) => root.querySelector(selector);
+const notesCanvas = $('[data-canvas="notes"]');
+const cursorCanvas = $('[data-canvas="cursor"]');
+const rollScroll = $('[data-region="roll-scroll"]');
+const rollStage = $('[data-region="roll-stage"]');
+const emptyRegion = $('[data-region="empty"]');
+const tracksRegion = $('[data-region="tracks"]');
+const announcer = $('[data-region="announcer"]');
+const progressRegion = $('[data-region="progress"]');
+const progressTrack = progressRegion.querySelector('[role="progressbar"]');
+const playButton = $('[data-action="play"]');
+const stopButton = $('[data-action="stop"]');
+const fullDownload = $('[data-action="download-full"]');
+
+const fallbackColors = [
+  "#8b7cff",
+  "#5f9cff",
+  "#54c7a4",
+  "#f2b96f",
+  "#e878a6",
+  "#58c4dc",
+  "#b48cf2",
+  "#91c96f",
+];
+
+const stateLabels = {
+  idle: "Ready for audio",
+  queued: "ZeroGPU queued",
+  loading: "Loading model",
+  cold_start: "Starting ZeroGPU",
+  transcribing: "Transcribing",
+  processing: "Transcribing",
+  complete: "Transcription complete",
+  completed: "Transcription complete",
+  ready: "Transcription complete",
+  error: "Transcription failed",
+  failed: "Transcription failed",
+};
+
+const activeStates = new Set(["queued", "loading", "cold_start", "transcribing", "processing"]);
+const terminalStates = new Set(["complete", "completed", "ready", "error", "failed", "idle"]);
+const trackState = new Map();
+let snapshot = normalizePayload({});
+let geometry = null;
+let playback = null;
+let resizeFrame = 0;
+let announceTimer = 0;
+
+function asFinite(value, fallback = 0) {
+  const number = Number(value);
+  return Number.isFinite(number) ? number : fallback;
+}
+
+function clamp(value, minimum, maximum) {
+  return Math.min(maximum, Math.max(minimum, value));
+}
+
+function safeColor(value, index) {
+  const candidate = typeof value === "string" ? value.trim() : "";
+  if (candidate && typeof CSS !== "undefined" && CSS.supports("color", candidate)) {
+    return candidate;
+  }
+  return fallbackColors[index % fallbackColors.length];
+}
+
+function titleFromId(value) {
+  return String(value || "Instrument")
+    .replace(/[_-]+/g, " ")
+    .replace(/\b\w/g, (letter) => letter.toUpperCase());
+}
+
+function normalizeNote(note) {
+  const pitch = clamp(Math.round(asFinite(note && note.pitch, 60)), 0, 127);
+  const start = Math.max(0, asFinite(note && note.start, 0));
+  const end = Math.max(start + 0.015, asFinite(note && note.end, start + 0.12));
+  const velocity = clamp(Math.round(asFinite(note && note.velocity, 90)), 1, 127);
+  return { pitch, start, end, velocity };
+}
+
+function normalizeTrack(track, index) {
+  const id = String(track && track.id != null ? track.id : `track-${index + 1}`);
+  const notes = Array.isArray(track && track.notes)
+    ? track.notes.filter((note) => note && typeof note === "object").map(normalizeNote)
+    : [];
+  notes.sort((left, right) => left.start - right.start || left.pitch - right.pitch);
+  return {
+    id,
+    name: String((track && track.name) || titleFromId(id)),
+    color: safeColor(track && track.color, index),
+    note_count: Math.max(0, Math.round(asFinite(track && track.note_count, notes.length))),
+    program: track && track.program != null ? Math.round(asFinite(track.program, 0)) : null,
+    is_drum: Boolean(track && track.is_drum),
+    midi: typeof (track && track.midi) === "string" ? track.midi : "",
+    notes,
+  };
+}
+
+function parseIncoming(value) {
+  if (value && typeof value === "object") {
+    return value;
+  }
+  if (typeof value !== "string" || !value.trim()) {
+    return {};
+  }
+  try {
+    const parsed = JSON.parse(value);
+    return parsed && typeof parsed === "object" ? parsed : {};
+  } catch (error) {
+    return {
+      state: "error",
+      status: "The transcription response could not be read.",
+      _parse_error: true,
+    };
+  }
+}
+
+function normalizePayload(raw) {
+  const tracks = Array.isArray(raw && raw.tracks) ? raw.tracks.map(normalizeTrack) : [];
+  const notesFromTracks = tracks.reduce((total, track) => total + track.notes.length, 0);
+  const noteEnd = tracks.reduce(
+    (latest, track) => track.notes.reduce((trackEnd, note) => Math.max(trackEnd, note.end), latest),
+    0,
+  );
+  const suppliedDuration = Math.max(0, asFinite(raw && raw.duration, 0));
+  const inferredState = tracks.length || (raw && raw.full_midi) ? "complete" : "idle";
+  const state = String((raw && raw.state) || inferredState)
+    .trim()
+    .toLowerCase()
+    .replace(/[\s-]+/g, "_");
+  const rawProgress = Number(raw && raw.progress);
+  let progress = Number.isFinite(rawProgress) ? rawProgress : null;
+  if (progress != null && progress > 1) {
+    progress /= 100;
+  }
+  if (progress != null) {
+    progress = clamp(progress, 0, 1);
+  }
+  return {
+    state,
+    status: typeof (raw && raw.status) === "string" ? raw.status.trim() : "",
+    progress,
+    audio_name: typeof (raw && raw.audio_name) === "string" ? raw.audio_name.trim() : "",
+    elapsed: Math.max(0, asFinite(raw && raw.elapsed, 0)),
+    duration: Math.max(suppliedDuration, noteEnd),
+    note_count: Math.max(0, Math.round(asFinite(raw && raw.note_count, notesFromTracks))),
+    full_midi: typeof (raw && raw.full_midi) === "string" ? raw.full_midi : "",
+    tracks,
+    _parse_error: Boolean(raw && raw._parse_error),
+  };
+}
+
+function stateCopy(payload) {
+  if (payload.status) {
+    return payload.status;
+  }
+  switch (payload.state) {
+    case "queued":
+      return "Waiting briefly for a ZeroGPU worker…";
+    case "loading":
+    case "cold_start":
+      return "Waking the model. A cold start can take a little longer.";
+    case "transcribing":
+    case "processing":
+      return "Listening in five-second windows and separating instruments…";
+    case "complete":
+    case "completed":
+    case "ready":
+      return "Every color is an independently playable instrument track.";
+    case "error":
+    case "failed":
+      return "Something interrupted the transcription. Please try again.";
+    default:
+      return "Upload a recording to reveal its notes and instruments.";
+  }
+}
+
+function formatClock(seconds) {
+  if (!Number.isFinite(Number(seconds)) || Number(seconds) <= 0) {
+    return "—";
+  }
+  const total = Math.round(Number(seconds));
+  const minutes = Math.floor(total / 60);
+  const remainder = total % 60;
+  return `${minutes}:${String(remainder).padStart(2, "0")}`;
+}
+
+function formatElapsed(seconds) {
+  if (!Number.isFinite(Number(seconds)) || Number(seconds) <= 0) {
+    return "—";
+  }
+  if (Number(seconds) < 60) {
+    return `${Number(seconds).toFixed(Number(seconds) < 10 ? 1 : 0)}s`;
+  }
+  return formatClock(seconds);
+}
+
+function fileStem(name) {
+  const raw = String(name || "muscriptor").replace(/\.[a-z0-9]{1,5}$/i, "");
+  const safe = raw
+    .normalize("NFKD")
+    .replace(/[^a-z0-9]+/gi, "-")
+    .replace(/^-+|-+$/g, "")
+    .toLowerCase();
+  return safe || "muscriptor";
+}
+
+function normalizeMidiHref(value) {
+  const midi = String(value || "").trim();
+  if (!midi) {
+    return "";
+  }
+  if (/^(data:|blob:|https?:\/\/|\/)/i.test(midi)) {
+    return midi;
+  }
+  return `data:audio/midi;base64,${midi.replace(/\s+/g, "")}`;
+}
+
+function setText(selector, value) {
+  const target = $(selector);
+  if (target) {
+    target.textContent = value;
+  }
+}
+
+function announce(message) {
+  window.clearTimeout(announceTimer);
+  announcer.textContent = "";
+  announceTimer = window.setTimeout(() => {
+    announcer.textContent = message;
+  }, 60);
+}
+
+function hasSolo() {
+  return snapshot.tracks.some((track) => trackState.get(track.id)?.solo);
+}
+
+function isAudible(trackId) {
+  const state = trackState.get(trackId) || { solo: false, muted: false };
+  return !state.muted && (!hasSolo() || state.solo);
+}
+
+function syncTrackState(tracks) {
+  const currentIds = new Set(tracks.map((track) => track.id));
+  for (const id of trackState.keys()) {
+    if (!currentIds.has(id)) {
+      trackState.delete(id);
+    }
+  }
+  tracks.forEach((track) => {
+    if (!trackState.has(track.id)) {
+      trackState.set(track.id, { solo: false, muted: false });
+    }
+  });
+}
+
+function updateDownload(anchor, midi, filename) {
+  const href = normalizeMidiHref(midi);
+  if (href) {
+    anchor.href = href;
+    anchor.download = filename;
+    anchor.removeAttribute("aria-disabled");
+    anchor.removeAttribute("tabindex");
+  } else {
+    anchor.removeAttribute("href");
+    anchor.removeAttribute("download");
+    anchor.setAttribute("aria-disabled", "true");
+    anchor.setAttribute("tabindex", "-1");
+  }
+}
+
+function trackMeta(track) {
+  const notes = `${track.note_count.toLocaleString()} ${track.note_count === 1 ? "note" : "notes"}`;
+  if (track.is_drum) {
+    return `${notes} · percussion`;
+  }
+  if (track.program != null) {
+    return `${notes} · program ${track.program}`;
+  }
+  return notes;
+}
+
+function downloadIcon() {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("viewBox", "0 0 20 20");
+  svg.setAttribute("aria-hidden", "true");
+  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  path.setAttribute("d", "M10 3.5v9m0 0 3.2-3.2M10 12.5 6.8 9.3M4.5 15.7h11");
+  svg.append(path);
+  return svg;
+}
+
+function renderTracks() {
+  tracksRegion.replaceChildren();
+  const stem = fileStem(snapshot.audio_name);
+
+  if (!snapshot.tracks.length) {
+    const empty = document.createElement("div");
+    empty.className = "msv-track-empty";
+    empty.textContent = activeStates.has(snapshot.state)
+      ? "Instrument tracks will arrive as transcription completes."
+      : "Tracks will appear after transcription.";
+    tracksRegion.append(empty);
+    return;
+  }
+
+  snapshot.tracks.forEach((track) => {
+    const state = trackState.get(track.id);
+    const card = document.createElement("article");
+    card.className = "msv-track-card";
+    card.dataset.trackId = track.id;
+    card.dataset.muted = String(Boolean(state.muted));
+    card.dataset.inactive = String(!isAudible(track.id));
+    card.style.setProperty("--track-color", track.color);
+    card.setAttribute("aria-label", `${track.name}, ${trackMeta(track)}`);
+
+    const swatch = document.createElement("span");
+    swatch.className = "msv-track-swatch";
+    swatch.setAttribute("aria-hidden", "true");
+
+    const copy = document.createElement("div");
+    copy.className = "msv-track-copy";
+    const name = document.createElement("h4");
+    name.className = "msv-track-name";
+    name.textContent = track.name;
+    const meta = document.createElement("div");
+    meta.className = "msv-track-meta";
+    meta.textContent = trackMeta(track);
+    copy.append(name, meta);
+
+    const controls = document.createElement("div");
+    controls.className = "msv-track-controls";
+    controls.setAttribute("aria-label", `${track.name} controls`);
+
+    const solo = document.createElement("button");
+    solo.className = "msv-track-button";
+    solo.type = "button";
+    solo.textContent = "S";
+    solo.title = `Solo ${track.name}`;
+    solo.setAttribute("aria-label", `Solo ${track.name}`);
+    solo.setAttribute("aria-pressed", String(Boolean(state.solo)));
+    solo.addEventListener("click", () => {
+      state.solo = !state.solo;
+      renderTracks();
+      refreshTrackMix();
+      drawPianoRoll();
+      announce(`${track.name} solo ${state.solo ? "on" : "off"}.`);
+    });
+
+    const mute = document.createElement("button");
+    mute.className = "msv-track-button";
+    mute.type = "button";
+    mute.textContent = "M";
+    mute.title = `Mute ${track.name}`;
+    mute.setAttribute("aria-label", `Mute ${track.name}`);
+    mute.setAttribute("aria-pressed", String(Boolean(state.muted)));
+    mute.addEventListener("click", () => {
+      state.muted = !state.muted;
+      renderTracks();
+      refreshTrackMix();
+      drawPianoRoll();
+      announce(`${track.name} mute ${state.muted ? "on" : "off"}.`);
+    });
+
+    const download = document.createElement("a");
+    download.className = "msv-track-download";
+    download.title = `Download ${track.name} MIDI`;
+    download.setAttribute("aria-label", `Download ${track.name} MIDI`);
+    download.append(downloadIcon());
+    updateDownload(download, track.midi, `${stem}-${fileStem(track.name)}.mid`);
+
+    controls.append(solo, mute, download);
+    card.append(swatch, copy, controls);
+    tracksRegion.append(card);
+  });
+}
+
+function refreshTrackMix() {
+  if (!playback) {
+    return;
+  }
+  const now = playback.context.currentTime;
+  playback.trackGains.forEach((gain, id) => {
+    gain.gain.cancelScheduledValues(now);
+    gain.gain.setTargetAtTime(isAudible(id) ? 1 : 0.0001, now, 0.018);
+  });
+}
+
+function renderProgress() {
+  const active = activeStates.has(snapshot.state);
+  progressRegion.hidden = !active;
+  if (!active) {
+    return;
+  }
+
+  const determinate = snapshot.progress != null;
+  const percent = Math.round((snapshot.progress || 0) * 100);
+  progressRegion.dataset.indeterminate = String(!determinate);
+  setText('[data-field="progress-copy"]', stateCopy(snapshot));
+  setText('[data-field="progress-value"]', determinate ? `${percent}%` : "Working");
+  $('[data-field="progress-bar"]').style.width = `${percent}%`;
+  progressTrack.setAttribute("aria-valuenow", String(percent));
+  progressTrack.setAttribute("aria-valuetext", determinate ? `${percent}%` : "In progress");
+}
+
+function renderEmptyState(visibleTracks) {
+  const noteTotal = snapshot.tracks.reduce((total, track) => total + track.notes.length, 0);
+  const hasAudibleNotes = visibleTracks.some((track) => track.notes.length);
+  let title = "A score will appear here";
+  let copy = "MuScriptor separates notes into individual, color-coded instrument tracks.";
+
+  if (snapshot.state === "queued" || snapshot.state === "loading" || snapshot.state === "cold_start") {
+    title = "Waking ZeroGPU";
+    copy = "The first run can take a little longer while the model is allocated and loaded.";
+  } else if (snapshot.state === "transcribing" || snapshot.state === "processing") {
+    title = "Listening in five-second windows";
+    copy = "Notes and instrument tracks will appear as soon as transcription finishes.";
+  } else if (snapshot.state === "error" || snapshot.state === "failed") {
+    title = "Transcription could not finish";
+    copy = stateCopy(snapshot);
+  } else if (noteTotal && !hasAudibleNotes) {
+    title = "All tracks are muted";
+    copy = "Unmute a track or change the solo selection to bring its notes back.";
+  } else if (snapshot.tracks.length && !noteTotal) {
+    title = "No pitched notes detected";
+    copy = "The MIDI tracks are available below even though the piano roll is empty.";
+  }
+
+  setText('[data-field="empty-title"]', title);
+  setText('[data-field="empty-copy"]', copy);
+  emptyRegion.hidden = hasAudibleNotes;
+}
+
+function niceTimeStep(duration) {
+  if (duration <= 12) return 1;
+  if (duration <= 45) return 2;
+  if (duration <= 120) return 5;
+  if (duration <= 360) return 10;
+  return 30;
+}
+
+function setupCanvas(canvas, width, height, ratio) {
+  const pixelWidth = Math.max(1, Math.round(width * ratio));
+  const pixelHeight = Math.max(1, Math.round(height * ratio));
+  if (canvas.width !== pixelWidth || canvas.height !== pixelHeight) {
+    canvas.width = pixelWidth;
+    canvas.height = pixelHeight;
+  }
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+  const context = canvas.getContext("2d");
+  context.setTransform(ratio, 0, 0, ratio, 0, 0);
+  return context;
+}
+
+function roundedRect(context, x, y, width, height, radius) {
+  const r = Math.min(radius, width / 2, height / 2);
+  context.beginPath();
+  context.moveTo(x + r, y);
+  context.arcTo(x + width, y, x + width, y + height, r);
+  context.arcTo(x + width, y + height, x, y + height, r);
+  context.arcTo(x, y + height, x, y, r);
+  context.arcTo(x, y, x + width, y, r);
+  context.closePath();
+}
+
+function computePitchRange(tracks) {
+  let minimumPitch = 128;
+  let maximumPitch = -1;
+  tracks.forEach((track) => {
+    track.notes.forEach((note) => {
+      minimumPitch = Math.min(minimumPitch, note.pitch);
+      maximumPitch = Math.max(maximumPitch, note.pitch);
+    });
+  });
+  if (maximumPitch < 0) {
+    return { minimum: 36, maximum: 84 };
+  }
+  let minimum = clamp(minimumPitch - 2, 0, 127);
+  let maximum = clamp(maximumPitch + 2, 0, 127);
+  if (maximum - minimum < 24) {
+    const missing = 24 - (maximum - minimum);
+    minimum = clamp(minimum - Math.ceil(missing / 2), 0, 127);
+    maximum = clamp(minimum + 24, 0, 127);
+    minimum = Math.max(0, maximum - 24);
+  }
+  return { minimum, maximum };
+}
+
+function drawPianoRoll() {
+  const visibleTracks = snapshot.tracks.filter((track) => isAudible(track.id));
+  renderEmptyState(visibleTracks);
+
+  const viewportWidth = Math.max(320, rollScroll.clientWidth || root.clientWidth || 720);
+  const height = Math.max(220, rollScroll.clientHeight || 334);
+  const duration = Math.max(snapshot.duration, 1);
+  const timePixels = duration <= 15 ? 72 : duration <= 60 ? 54 : duration <= 180 ? 38 : 25;
+  const width = Math.round(Math.max(viewportWidth, Math.min(9000, 68 + duration * timePixels)));
+  const ratio = width > 4200 ? 1 : Math.min(2, window.devicePixelRatio || 1);
+  const keyWidth = 52;
+  const rulerHeight = 24;
+  const rightPadding = 14;
+  const plotWidth = Math.max(1, width - keyWidth - rightPadding);
+  const rangeSource = visibleTracks.some((track) => track.notes.length) ? visibleTracks : snapshot.tracks;
+  const pitchRange = computePitchRange(rangeSource);
+  const pitchCount = pitchRange.maximum - pitchRange.minimum + 1;
+  const rowHeight = (height - rulerHeight) / pitchCount;
+
+  rollStage.style.width = `${width}px`;
+  const context = setupCanvas(notesCanvas, width, height, ratio);
+  setupCanvas(cursorCanvas, width, height, ratio).clearRect(0, 0, width, height);
+  context.clearRect(0, 0, width, height);
+  context.fillStyle = "#0a0d12";
+  context.fillRect(0, 0, width, height);
+
+  context.fillStyle = "#0e1118";
+  context.fillRect(0, 0, width, rulerHeight);
+
+  const blackNotes = new Set([1, 3, 6, 8, 10]);
+  for (let pitch = pitchRange.minimum; pitch <= pitchRange.maximum; pitch += 1) {
+    const row = pitchRange.maximum - pitch;
+    const y = rulerHeight + row * rowHeight;
+    if (blackNotes.has(pitch % 12)) {
+      context.fillStyle = "rgba(255,255,255,0.013)";
+      context.fillRect(keyWidth, y, width - keyWidth, rowHeight);
+    }
+    context.beginPath();
+    context.moveTo(keyWidth, Math.round(y) + 0.5);
+    context.lineTo(width, Math.round(y) + 0.5);
+    context.strokeStyle = pitch % 12 === 0 ? "rgba(255,255,255,0.068)" : "rgba(255,255,255,0.026)";
+    context.lineWidth = 1;
+    context.stroke();
+  }
+
+  const step = niceTimeStep(duration);
+  context.font = '9px "SFMono-Regular", Consolas, monospace';
+  context.textBaseline = "middle";
+  for (let second = 0; second <= duration + 0.001; second += step) {
+    const x = keyWidth + (second / duration) * plotWidth;
+    context.beginPath();
+    context.moveTo(Math.round(x) + 0.5, 0);
+    context.lineTo(Math.round(x) + 0.5, height);
+    context.strokeStyle = second === 0 ? "rgba(255,255,255,0.1)" : "rgba(255,255,255,0.045)";
+    context.lineWidth = 1;
+    context.stroke();
+    context.fillStyle = "rgba(180,185,198,0.55)";
+    const label = second < 60 ? `${Math.round(second)}s` : formatClock(second);
+    context.fillText(label, x + 5, rulerHeight / 2 + 0.5);
+  }
+
+  context.fillStyle = "#10141b";
+  context.fillRect(0, rulerHeight, keyWidth, height - rulerHeight);
+  context.beginPath();
+  context.moveTo(keyWidth - 0.5, 0);
+  context.lineTo(keyWidth - 0.5, height);
+  context.strokeStyle = "rgba(255,255,255,0.1)";
+  context.stroke();
+
+  context.font = '8px "SFMono-Regular", Consolas, monospace';
+  context.textAlign = "right";
+  for (let pitch = pitchRange.minimum; pitch <= pitchRange.maximum; pitch += 1) {
+    const row = pitchRange.maximum - pitch;
+    const y = rulerHeight + row * rowHeight;
+    const isBlack = blackNotes.has(pitch % 12);
+    if (isBlack) {
+      context.fillStyle = "#090b10";
+      context.fillRect(0, y, keyWidth * 0.66, rowHeight);
+    }
+    if (pitch % 12 === 0 && rowHeight >= 4.5) {
+      context.fillStyle = "rgba(191,196,209,0.52)";
+      context.textBaseline = "middle";
+      context.fillText(`C${Math.floor(pitch / 12) - 1}`, keyWidth - 7, y + rowHeight / 2);
+    }
+  }
+  context.textAlign = "left";
+
+  visibleTracks.forEach((track) => {
+    track.notes.forEach((note) => {
+      const x = keyWidth + (clamp(note.start, 0, duration) / duration) * plotWidth;
+      const endX = keyWidth + (clamp(note.end, 0, duration) / duration) * plotWidth;
+      const widthPx = Math.max(2.2, endX - x);
+      const row = pitchRange.maximum - clamp(note.pitch, pitchRange.minimum, pitchRange.maximum);
+      const y = rulerHeight + row * rowHeight + Math.max(0.65, rowHeight * 0.12);
+      const heightPx = Math.max(2, rowHeight * 0.76);
+      context.globalAlpha = 0.56 + (note.velocity / 127) * 0.38;
+      context.fillStyle = track.color;
+      roundedRect(context, x, y, widthPx, heightPx, Math.min(2.5, heightPx * 0.34));
+      context.fill();
+      if (heightPx >= 4) {
+        context.globalAlpha = 0.24;
+        context.fillStyle = "#ffffff";
+        roundedRect(context, x + 0.7, y + 0.7, Math.max(1, widthPx - 1.4), 1, 0.5);
+        context.fill();
+      }
+    });
+  });
+  context.globalAlpha = 1;
+
+  geometry = { width, height, ratio, duration, keyWidth, plotWidth };
+  const audibleNames = visibleTracks.map((track) => track.name).join(", ");
+  notesCanvas.setAttribute(
+    "aria-label",
+    visibleTracks.length
+      ? `Piano roll with ${visibleTracks.length} audible tracks: ${audibleNames}`
+      : "Piano roll with no audible tracks",
+  );
+}
+
+function clearCursor() {
+  if (!geometry) return;
+  const context = setupCanvas(cursorCanvas, geometry.width, geometry.height, geometry.ratio);
+  context.clearRect(0, 0, geometry.width, geometry.height);
+}
+
+function drawCursor(seconds, follow = false) {
+  if (!geometry) return;
+  const context = setupCanvas(cursorCanvas, geometry.width, geometry.height, geometry.ratio);
+  context.clearRect(0, 0, geometry.width, geometry.height);
+  const x = geometry.keyWidth + (clamp(seconds, 0, geometry.duration) / geometry.duration) * geometry.plotWidth;
+  const gradient = context.createLinearGradient(x, 0, x + 10, 0);
+  gradient.addColorStop(0, "rgba(238,235,255,0.92)");
+  gradient.addColorStop(0.18, "rgba(150,133,255,0.22)");
+  gradient.addColorStop(1, "rgba(150,133,255,0)");
+  context.fillStyle = gradient;
+  context.fillRect(x, 0, 12, geometry.height);
+  context.fillStyle = "#f3f1ff";
+  context.fillRect(Math.round(x), 0, 1.25, geometry.height);
+
+  if (follow && x > rollScroll.scrollLeft + rollScroll.clientWidth * 0.82) {
+    rollScroll.scrollTo({ left: Math.max(0, x - rollScroll.clientWidth * 0.28), behavior: "smooth" });
+  }
+}
+
+function noteFrequency(pitch) {
+  return clamp(440 * 2 ** ((pitch - 69) / 12), 28, 4200);
+}
+
+function scheduleNote(track, note, currentElapsed) {
+  if (!playback) return;
+  const context = playback.context;
+  const trackGain = playback.trackGains.get(track.id);
+  if (!trackGain) return;
+
+  const scheduledStart = playback.startedAt + note.start;
+  const start = Math.max(context.currentTime + 0.006, scheduledStart);
+  const naturalLength = Math.max(0.025, note.end - Math.max(note.start, currentElapsed));
+  const length = track.is_drum ? Math.min(0.13, naturalLength) : Math.min(8, naturalLength);
+  const end = start + length;
+  const oscillator = context.createOscillator();
+  const envelope = context.createGain();
+  const amplitude = (note.velocity / 127) * (track.is_drum ? 0.05 : 0.075);
+
+  oscillator.type = track.is_drum ? "square" : ["sine", "triangle", "sine", "triangle"][
+    Math.abs(track.id.split("").reduce((sum, letter) => sum + letter.charCodeAt(0), 0)) % 4
+  ];
+  oscillator.frequency.setValueAtTime(track.is_drum ? 52 + (note.pitch % 24) * 7 : noteFrequency(note.pitch), start);
+  if (track.is_drum) {
+    oscillator.frequency.exponentialRampToValueAtTime(34, end);
+  }
+
+  envelope.gain.setValueAtTime(0.0001, start);
+  envelope.gain.exponentialRampToValueAtTime(Math.max(0.0002, amplitude), start + Math.min(0.012, length * 0.25));
+  envelope.gain.exponentialRampToValueAtTime(0.0001, end);
+  oscillator.connect(envelope);
+  envelope.connect(trackGain);
+  oscillator.start(start);
+  oscillator.stop(end + 0.01);
+  playback.nodes.add(oscillator);
+  oscillator.addEventListener("ended", () => playback && playback.nodes.delete(oscillator), { once: true });
+}
+
+function runScheduler() {
+  if (!playback) return;
+  const elapsed = playback.context.currentTime - playback.startedAt;
+  const horizon = elapsed + 0.42;
+  snapshot.tracks.forEach((track) => {
+    let index = playback.nextNote.get(track.id) || 0;
+    while (index < track.notes.length && track.notes[index].start <= horizon) {
+      const note = track.notes[index];
+      if (note.end > elapsed) {
+        scheduleNote(track, note, elapsed);
+      }
+      index += 1;
+    }
+    playback.nextNote.set(track.id, index);
+  });
+}
+
+function playbackFrame() {
+  if (!playback) return;
+  const elapsed = Math.max(0, playback.context.currentTime - playback.startedAt);
+  drawCursor(elapsed, true);
+  if (elapsed >= playback.duration + 0.08) {
+    stopPlayback(true);
+    announce("Playback finished.");
+    return;
+  }
+  playback.frame = window.requestAnimationFrame(playbackFrame);
+}
+
+async function startPlayback() {
+  const AudioContextClass = window.AudioContext || window.webkitAudioContext;
+  const hasNotes = snapshot.tracks.some((track) => track.notes.length);
+  if (!AudioContextClass || !hasNotes) {
+    announce(AudioContextClass ? "There are no notes to play." : "WebAudio is not available in this browser.");
+    return;
+  }
+  stopPlayback(false);
+
+  const context = new AudioContextClass({ latencyHint: "interactive" });
+  if (context.state === "suspended") {
+    await context.resume();
+  }
+  const master = context.createGain();
+  const compressor = context.createDynamicsCompressor();
+  master.gain.value = 0.62;
+  compressor.threshold.value = -14;
+  compressor.knee.value = 14;
+  compressor.ratio.value = 8;
+  compressor.attack.value = 0.004;
+  compressor.release.value = 0.12;
+  master.connect(compressor);
+  compressor.connect(context.destination);
+
+  const trackGains = new Map();
+  snapshot.tracks.forEach((track) => {
+    const gain = context.createGain();
+    gain.gain.value = isAudible(track.id) ? 1 : 0.0001;
+    gain.connect(master);
+    trackGains.set(track.id, gain);
+  });
+
+  playback = {
+    context,
+    master,
+    trackGains,
+    nodes: new Set(),
+    nextNote: new Map(snapshot.tracks.map((track) => [track.id, 0])),
+    startedAt: context.currentTime + 0.07,
+    duration: Math.max(snapshot.duration, 0.1),
+    timer: 0,
+    frame: 0,
+  };
+  runScheduler();
+  playback.timer = window.setInterval(runScheduler, 90);
+  playback.frame = window.requestAnimationFrame(playbackFrame);
+  playButton.disabled = true;
+  playButton.setAttribute("aria-pressed", "true");
+  stopButton.disabled = false;
+  announce("Playback started.");
+}
+
+function stopPlayback(resetCursor = true) {
+  if (playback) {
+    window.clearInterval(playback.timer);
+    window.cancelAnimationFrame(playback.frame);
+    playback.nodes.forEach((node) => {
+      try {
+        node.stop();
+      } catch (error) {
+        // A node that has already ended cannot be stopped again.
+      }
+    });
+    playback.context.close().catch(() => {});
+    playback = null;
+  }
+  const hasNotes = snapshot.tracks.some((track) => track.notes.length);
+  playButton.disabled = !hasNotes;
+  playButton.setAttribute("aria-pressed", "false");
+  stopButton.disabled = true;
+  if (resetCursor) {
+    clearCursor();
+  }
+}
+
+function render(nextSnapshot, options = {}) {
+  const previousState = snapshot.state;
+  const previousSignature = snapshot.tracks
+    .map((track) => `${track.id}:${track.notes.length}:${track.notes.at(-1)?.end || 0}`)
+    .join("|");
+  const nextSignature = nextSnapshot.tracks
+    .map((track) => `${track.id}:${track.notes.length}:${track.notes.at(-1)?.end || 0}`)
+    .join("|");
+  if (playback && previousSignature !== nextSignature) {
+    stopPlayback(true);
+  }
+
+  snapshot = nextSnapshot;
+  syncTrackState(snapshot.tracks);
+  root.dataset.state = snapshot.state || "idle";
+  setText('[data-field="state-label"]', stateLabels[snapshot.state] || titleFromId(snapshot.state));
+  setText('[data-field="audio-name"]', snapshot.audio_name || "Your transcription");
+  setText('[data-field="status"]', stateCopy(snapshot));
+  setText('[data-field="duration"]', formatClock(snapshot.duration));
+  setText('[data-field="note-count"]', snapshot.note_count ? snapshot.note_count.toLocaleString() : "—");
+  setText('[data-field="track-count"]', snapshot.tracks.length ? snapshot.tracks.length.toLocaleString() : "—");
+  setText('[data-field="elapsed"]', formatElapsed(snapshot.elapsed));
+  setText(
+    '[data-field="track-summary"]',
+    snapshot.tracks.length
+      ? `${snapshot.tracks.length} ${snapshot.tracks.length === 1 ? "track" : "tracks"}`
+      : "No tracks yet",
+  );
+
+  updateDownload(fullDownload, snapshot.full_midi, `${fileStem(snapshot.audio_name)}-full.mid`);
+  renderProgress();
+  renderTracks();
+  drawPianoRoll();
+
+  const hasNotes = snapshot.tracks.some((track) => track.notes.length);
+  if (!playback) {
+    playButton.disabled = !hasNotes;
+    stopButton.disabled = true;
+  }
+
+  const submitButton = findSubmitButton();
+  if (submitButton && terminalStates.has(snapshot.state)) {
+    submitButton.removeAttribute("aria-busy");
+  }
+
+  if (!options.silent && (previousState !== snapshot.state || options.local)) {
+    announce(`${stateLabels[snapshot.state] || titleFromId(snapshot.state)}. ${stateCopy(snapshot)}`);
+  }
+}
+
+function updateFromProps() {
+  render(normalizePayload(parseIncoming(props.value)));
+}
+
+function findSubmitButton() {
+  const localRoot = element.getRootNode && element.getRootNode();
+  return (localRoot && localRoot.querySelector && localRoot.querySelector("#transcribe-button"))
+    || document.querySelector("#transcribe-button");
+}
+
+function bindSubmitButton() {
+  const button = findSubmitButton();
+  if (!button || button.__muscriptorVisualizerBound) {
+    return Boolean(button);
+  }
+  button.__muscriptorVisualizerBound = true;
+  button.addEventListener("click", () => {
+    if (button.matches(":disabled") || button.getAttribute("aria-disabled") === "true") {
+      return;
+    }
+    button.setAttribute("aria-busy", "true");
+    render(
+      normalizePayload({
+        ...snapshot,
+        state: "queued",
+        status: "Request sent. Allocating a ZeroGPU worker…",
+        progress: 0.01,
+        elapsed: 0,
+        duration: 0,
+        note_count: 0,
+        full_midi: "",
+        tracks: [],
+      }),
+      { local: true },
+    );
+  }, { capture: true });
+  return true;
+}
+
+playButton.addEventListener("click", () => {
+  startPlayback().catch(() => {
+    stopPlayback(true);
+    announce("Playback could not start. Check this browser's audio permissions.");
+  });
+});
+stopButton.addEventListener("click", () => {
+  stopPlayback(true);
+  announce("Playback stopped.");
+});
+
+const resizeObserver = new ResizeObserver(() => {
+  window.cancelAnimationFrame(resizeFrame);
+  resizeFrame = window.requestAnimationFrame(drawPianoRoll);
+});
+resizeObserver.observe(rollScroll);
+
+if (!bindSubmitButton()) {
+  const buttonObserver = new MutationObserver(() => {
+    if (bindSubmitButton()) {
+      buttonObserver.disconnect();
+    }
+  });
+  buttonObserver.observe(document.body, { childList: true, subtree: true });
+  window.setTimeout(() => buttonObserver.disconnect(), 15000);
+}
+
+updateFromProps();
+watch("value", updateFromProps);

requirements.txt

@@ -0,0 +1,9 @@
+gradio==6.10.0
+spaces==0.51.0
+muscriptor==0.2.1
+numpy==2.3.5
+einops==0.8.2
+mido==1.3.3
+soundfile==0.14.0
+safetensors==0.8.0
+huggingface_hub==1.21.0