Launch bold Server Mode UI and Taiko audition

README.md

@@ -4,7 +4,7 @@ emoji: 🥁
 colorFrom: red
 colorTo: yellow
 sdk: gradio
-sdk_version: 5.9.1
+sdk_version: 6.20.0
 python_version: "3.11"
 app_file: app.py
 pinned: false
@@ -25,9 +25,20 @@ from the Hugging Face Hub via `from_pretrained`.
 - **SoftChart v15** ([softchart-v15](https://huggingface.co/JacobLinCool/softchart-v15)) — unified slot + time + beat model; slot mode emits exact TJA lattice indices when the beat grid is trusted
 - **Planner** ([softchart-planner](https://huggingface.co/JacobLinCool/softchart-planner)) — audio → song-level plan (density envelope, breathing gaps, climax)
 
+The Space uses Gradio Server mode with a fully custom, responsive interface.
 Upload a song, pick a difficulty, and get a full-song mel/plan preview, a
-full TJA chart image, and a `.tja` playable in TJAPlayer3 / OpenTaiko. The
-generated TJA keeps the uploaded audio filename in its `WAVE` field.
+full TJA chart image, a `.tja` playable in TJAPlayer3 / OpenTaiko, and a
+synchronized WAV mix that lets you hear the generated chart performed over
+the source music immediately. The game-style wadaiko kit is synthesized by
+SoftChart and does not contain audio taken from a commercial game.
+
+The generation API streams the real processing stages to the interface:
+audio analysis, beat-grid fitting, song-level planning, note generation,
+chart rendering, and taiko preview mixing. The final audio is timed from the
+exported TJA itself, including `OFFSET` and `#BPMCHANGE`, so the audition and
+downloadable chart share the same timing.
+
+The generated TJA keeps the uploaded audio filename in its `WAVE` field.
 Planner climax blocks are emitted as TJA `#GOGOSTART` / `#GOGOEND` sections.
 The chart image uses a server-side renderer modeled on the row layout used by
 MIT-licensed [tja-tools](https://github.com/WHMHammer/tja-tools), without

app.py

@@ -1,4 +1,4 @@
-"""SoftChart — Gradio demo for Hugging Face Spaces.
+"""SoftChart — custom Gradio Server app for Hugging Face Spaces.
 
 Generate a Taiko no Tatsujin chart from any audio file, using the full system:
   - SoftChartGenerator  (main model, plan-conditioned)
@@ -7,23 +7,32 @@ Generate a Taiko no Tatsujin chart from any audio file, using the full system:
 All models load from the Hub via from_pretrained. MIT licensed.
 """
 
+import logging
 import os
 import re
+import shutil
 import tempfile
+from pathlib import Path
 
 import gradio as gr
 import numpy as np
 import torch
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
 
 from softchart.generate import generate_song, generate_song_slot, load_hf
 from softchart.fonts import cjk_font_path
 from softchart.grid import debias_to_grid, fit_grid_fixed_bpm, fit_grid_piecewise
 from softchart.hf import SoftChartPlanner
+from softchart.preview_audio import synthesize_taiko_preview
 from softchart.rhythm import snap_chart
 from softchart.tja import append_measure_with_gogo, gogo_measure_mask, write_tja_slots
 from softchart.tja_image import render_tja_image
 from softchart.vocab import FPS, HOP, N_FFT, N_MELS, SR
 
+LOGGER = logging.getLogger("softchart.space")
+STATIC_DIR = Path(__file__).with_name("static")
+
 V15_REPO = os.environ.get("SC_V15", "JacobLinCool/softchart-v15")
 PLAN_REPO = os.environ.get("SC_PLAN", "JacobLinCool/softchart-planner")
 DEVICE = "cuda" if torch.cuda.is_available() else "cpu"
@@ -32,22 +41,21 @@ COURSE_DENS = {"easy": 1, "normal": 2, "hard": 4, "oni": 7}
 CHAR = {"don": "1", "ka": "2", "don_big": "3", "ka_big": "4",
         "roll": "5", "roll_big": "6", "balloon": "7"}
 SUB = 96
-DEFAULT_TEMPERATURE = 0.8
-DEFAULT_TOP_P = 0.9
 
 _MODELS = {}
 
 
-def get_models():
-    if not _MODELS:
+def get_models(*, include_planner=False):
+    if "gen" not in _MODELS:
         u = load_hf(V15_REPO, device=DEVICE)
-        if not getattr(u, "_dual", False) or u.beat is None:
-            raise RuntimeError(f"{V15_REPO} must be a dual-mode generator with a beat head")
+        if (not getattr(u, "_dual", False) or u.beat is None
+                or not getattr(u, "_has_plan", False)):
+            raise RuntimeError(
+                f"{V15_REPO} must provide dual generation, beat, and plan conditioning"
+            )
         _MODELS.update(gen=u, slot=u, beat=u)
-        try:
-            _MODELS["plan"] = SoftChartPlanner.from_pretrained(PLAN_REPO).to(DEVICE).eval()
-        except Exception:
-            _MODELS["plan"] = None
+    if include_planner and "plan" not in _MODELS:
+        _MODELS["plan"] = SoftChartPlanner.from_pretrained(PLAN_REPO).to(DEVICE).eval()
     return _MODELS
 
 
@@ -135,15 +143,15 @@ def group_quantize(times, phase, grid, min_run=3):
 
 
 def upload_wave_name(audio_path):
-    name = os.path.basename(str(audio_path)).strip()
-    name = re.sub(r"[\r\n]+", " ", name)
+    name = os.path.basename(str(audio_path).replace("\\", "/")).strip()
+    name = re.sub(r"[\x00-\x1f\x7f]+", " ", name).strip()
     return name or "song.ogg"
 
 
-def output_tja_path(wave_name, course):
+def output_tja_path(wave_name, course, directory):
     stem = os.path.splitext(os.path.basename(wave_name))[0].strip() or "softchart"
-    stem = re.sub(r"[^0-9A-Za-z._ -]+", "_", stem).strip(" ._") or "softchart"
-    return os.path.join(tempfile.mkdtemp(), f"{stem}_{course}.tja")
+    stem = re.sub(r"[<>:\"/\\|?*\x00-\x1f]+", "_", stem).strip(" ._") or "softchart"
+    return os.path.join(directory, f"{stem}_{course}.tja")
 
 
 def write_tja(gen, bpm, title, course, level, wave, downbeats=None, grid_fit=None,
@@ -218,7 +226,7 @@ def write_tja(gen, bpm, title, course, level, wave, downbeats=None, grid_fit=Non
         "", "#START", *lines, "#END"]) + "\n"
 
 
-def render_audio_plan(mel, title, course, plan=None):
+def render_audio_plan(mel, title, course, out_path, plan=None):
     import matplotlib
     matplotlib.use("Agg")
     from matplotlib import font_manager
@@ -257,158 +265,260 @@ def render_audio_plan(mel, title, course, plan=None):
         ax1.grid(axis="x", alpha=0.18)
     else:
         ax0.set_xlabel("time (s)")
-    out = tempfile.mktemp(suffix=".png")
-    fig.savefig(out, dpi=130, bbox_inches="tight")
+    fig.savefig(out_path, dpi=130, bbox_inches="tight")
     plt.close(fig)
-    return out
-
-
-def generate(audio, course, level, bpm_override, auto_plan_on, use_beat, use_planner,
-             sampling, temperature, top_p, progress=gr.Progress()):
-    if audio is None:
-        raise gr.Error("Please upload an audio file.")
-
-    def P(frac, desc):  # progress is a no-op when called outside a Gradio event
-        try:
-            progress(frac, desc=desc)
-        except Exception:
-            pass
-
-    P(0.01, "Loading models (first run downloads them from the Hub)…")
-    M = get_models()
-    P(0.08, "Computing log-mel…")
-    mel, wav = load_logmel(audio)
-    grid = dbs = None
-    if use_beat and M["beat"] is not None:
-        P(0.14, "Fitting beat grid…")
-        # global robust (period, phase) fit over the whole song — much more
-        # precise than per-peak use (each raw peak carries ~±23 ms bin noise)
-        grid = fit_grid_piecewise(M["beat"], mel, device=DEVICE)
-        if grid is not None:
-            # rigid synthesized barlines when the fit is trustworthy; raw peaks
-            # (plan-block edges only, no anchoring) when it is not
-            dbs = grid["downbeats"] if grid["ok"] else grid["db_peaks"]
-            if not grid["ok"]:
-                grid = None
-    if bpm_override and bpm_override > 0:
-        bpm = float(bpm_override)
-        if use_beat and M["beat"] is not None and (grid is None or abs(grid["bpm"] - bpm) > 0.5):
-            # the user KNOWS the tempo: phase-only fit with a trusted period —
-            # much easier than the free fit, often unlocks the slot-exact path
-            g2 = fit_grid_fixed_bpm(M["beat"], mel, bpm, device=DEVICE)
-            grid = g2 if (g2 is not None and g2["ok"]) else None
-            if grid is not None:
-                dbs = grid["downbeats"]
-    elif grid is not None:
-        bpm = grid["bpm"]  # already integer-snapped when the residual allows
-    elif dbs is not None and len(dbs) > 4:
-        period = float(np.median(np.diff(dbs)))  # downbeat gap = one 4/4 bar
-        bpm = 240.0 / period if period > 0 else 0.0
-        while bpm >= 210:  # octave guard
-            bpm /= 2.0
-        while 0 < bpm < 70:
-            bpm *= 2.0
-    else:
-        import librosa
-        bpm = float(np.atleast_1d(librosa.beat.beat_track(y=wav, sr=SR)[0])[0])
-    if grid is None and abs(bpm - round(bpm)) < 0.06:
-        bpm = float(round(bpm))
-    temperature = float(np.clip(temperature or DEFAULT_TEMPERATURE, 0.2, 1.2))
-    top_p = float(np.clip(top_p or DEFAULT_TOP_P, 0.5, 1.0))
-
-    plan = None
-    P(0.28, "Planning song structure…")
-    if any(getattr(m, "_has_plan", False) for m in (M["gen"], M["slot"]) if m is not None):
-        if use_planner and M["plan"] is not None:
-            plan = learned_plan(M["plan"], mel, course, bpm, dbs)
-        elif auto_plan_on:
-            plan = auto_plan(mel, bpm, dbs)
-
-    wave_name = upload_wave_name(audio)
-    title = os.path.splitext(wave_name)[0]
-    slot_used = False
-    if grid is not None and M["slot"] is not None:
-        # slot-exact path: the decoder emits TJA lattice indices directly —
-        # no quantization, tuplets even by construction
-        g = generate_song_slot(
-            M["slot"], mel, grid, course, level=int(level),
-            density_bucket=COURSE_DENS[course], greedy=not sampling, seed=0,
-            temperature=temperature, top_p=top_p, device=DEVICE, plan=plan,
-            on_progress=lambda d, t: P(0.32 + 0.58 * d / max(t, 1),
-                                       f"Generating notes (slot-exact)… {d}/{t} windows"))
-        tja = write_tja_slots(g, grid, title, course, int(level), wave_name,
-                              plan=plan)
-        slot_used = True
-    else:
-        g = generate_song(
-            M["gen"], mel, course, level=int(level),
-            density_bucket=COURSE_DENS[course], greedy=not sampling,
-            temperature=temperature, top_p=top_p, seed=0, device=DEVICE, plan=plan,
-            on_progress=lambda d, t: P(0.32 + 0.58 * d / max(t, 1),
-                                       f"Generating notes… {d}/{t} windows"))
-        g = snap_chart(g, bpm)
-        tja = write_tja(g, bpm, title, course, int(level), wave_name, dbs,
-                        grid_fit=grid, plan=plan)
-    P(0.92, "Writing TJA…")
-    tja_path = output_tja_path(wave_name, course)
-    with open(tja_path, "w", encoding="utf-8") as f:
-        f.write(tja)
-    P(0.95, "Rendering preview…")
-    audio_plan_img = render_audio_plan(mel, title, course, plan=plan)
-    tja_img = render_tja_image(tja)
-    if grid is not None:
-        grid_info = (f" · grid: rms {grid['rms_ms']:.1f}ms ({grid['inlier_frac']:.0%} inlier)"
-                     + (f" · {grid['n_segments']} tempo segs" if grid.get("piecewise") else "")
-                     + (" · slot-exact" if slot_used else ""))
-    elif use_beat and M["beat"] is not None:
-        grid_info = " · grid: unreliable, barline anchoring off"
-    else:
-        grid_info = ""
-    sampling_info = f" · sampling T {temperature:.2f}, top-p {top_p:.2f}" if sampling else ""
-    info = (f"BPM {bpm:.1f} · {len(g['hits'])} notes · {len(g['spans'])} spans" + grid_info + sampling_info
-            + (f" · plan: {sum(1 for b in plan if b[3]==1)} gaps, {sum(1 for b in plan if b[3]==2)} climax" if plan else ""))
-    return tja_path, info, tja_img, audio_plan_img
-
-
-with gr.Blocks(title="SoftChart — AI Taiko chart generator") as demo:
-    gr.Markdown(
-        "# 🥁 SoftChart\n"
-        "Generate a **Taiko no Tatsujin** chart from any song. 8M-param plan-conditioned "
-        "model + learned planner + beat-anchoring — all MIT-licensed.\n\n"
-        "Outputs a full-song mel/plan preview, a full TJA chart image, and a playable `.tja`. "
-        "*MIT-licensed.*"
+    return out_path
+
+
+def _progress(stage, fraction, title, detail):
+    return {
+        "kind": "progress",
+        "stage": stage,
+        "progress": fraction,
+        "title": title,
+        "detail": detail,
+    }
+
+
+def _uploaded_file(value, original_name):
+    if value is None:
+        raise ValueError("Upload a music file to begin.")
+    if not isinstance(original_name, str) or not original_name.strip():
+        raise ValueError("The upload is missing its original filename. Please select it again.")
+    data = value if isinstance(value, gr.FileData) else gr.FileData.model_validate(value)
+    path = os.path.realpath(data.path)
+    if not os.path.isfile(path):
+        raise ValueError("The uploaded file is no longer available. Please select it again.")
+    return path, upload_wave_name(original_name)
+
+
+def _validate_controls(course, level, bpm, temperature, top_p, drum_volume):
+    if course not in COURSE_DENS:
+        raise ValueError(f"Unsupported difficulty: {course}")
+    if not 1 <= int(level) <= 10:
+        raise ValueError("Level must be between 1 and 10 stars.")
+    if bpm != 0 and not 30 <= float(bpm) <= 400:
+        raise ValueError("Manual BPM must be between 30 and 400; use 0 for auto-detection.")
+    if not 0.2 <= float(temperature) <= 1.2:
+        raise ValueError("Temperature must be between 0.2 and 1.2.")
+    if not 0.5 <= float(top_p) <= 1.0:
+        raise ValueError("Top-p must be between 0.5 and 1.0.")
+    if not 0 <= float(drum_volume) <= 1.5:
+        raise ValueError("Taiko volume must be between 0% and 150%.")
+
+
+def _file_data(path, *, name=None, mime_type=None):
+    return gr.FileData(
+        path=os.path.realpath(path),
+        orig_name=name or os.path.basename(path),
+        mime_type=mime_type,
+    ).model_dump()
+
+
+app = gr.Server(
+    title="SoftChart",
+    description="Conditional Taiko chart generation with synchronized audio preview.",
+)
+app.mount("/static", StaticFiles(directory=STATIC_DIR), name="static")
+
+
+@app.get("/", include_in_schema=False)
+async def homepage():
+    return FileResponse(
+        STATIC_DIR / "index.html",
+        headers={"Cache-Control": "no-cache"},
     )
-    with gr.Row():
-        with gr.Column():
-            audio = gr.Audio(type="filepath", label="Song (any format)")
-            course = gr.Dropdown(["easy", "normal", "hard", "oni"], value="oni", label="Difficulty (course)")
-            level = gr.Slider(1, 10, value=9, step=1, label="Level (1–10 stars)")
-            bpm = gr.Number(label="BPM (0 = auto-detect)", value=0)
-            with gr.Row():
-                auto_plan_on = gr.Checkbox(label="Auto-plan (heuristic structure)", value=True)
-                use_planner = gr.Checkbox(label="Learned planner", value=True)
-            with gr.Row():
-                use_beat = gr.Checkbox(label="Beat-anchor barlines", value=True)
-                sampling = gr.Checkbox(label="Sampling (diverse) vs greedy (best)", value=False)
-            with gr.Row():
-                temperature = gr.Slider(0.2, 1.2, value=DEFAULT_TEMPERATURE, step=0.05,
-                                        label="Temperature", interactive=False)
-                top_p = gr.Slider(0.5, 1.0, value=DEFAULT_TOP_P, step=0.01,
-                                  label="Top-p", interactive=False)
-            btn = gr.Button("Generate chart", variant="primary")
-        with gr.Column():
-            out_tja = gr.File(label="Download .tja")
-            out_info = gr.Textbox(label="Result", interactive=False)
-            out_chart = gr.Image(label="TJA chart")
-            out_img = gr.Image(label="Full-song mel + plan")
-    sampling.change(
-        lambda enabled: (gr.update(interactive=enabled), gr.update(interactive=enabled)),
-        sampling, [temperature, top_p])
-    btn.click(generate, [audio, course, level, bpm, auto_plan_on, use_beat, use_planner,
-                         sampling, temperature, top_p],
-              [out_tja, out_info, out_chart, out_img])
+
+
+@app.get("/health", include_in_schema=False)
+async def health():
+    return {"status": "ok", "device": DEVICE, "models_loaded": "gen" in _MODELS}
+
+
+@app.api(
+    name="generate_chart",
+    description="Generate a TJA chart, visual previews, and a synchronized taiko audio mix.",
+    concurrency_limit=1,
+    concurrency_id="generation-gpu",
+    queue=True,
+    stream_every=0.1,
+)
+def generate_chart(
+    audio: gr.FileData,
+    audio_name: str,
+    course: str,
+    level: int,
+    bpm_override: float,
+    auto_plan_on: bool,
+    use_beat: bool,
+    use_planner: bool,
+    sampling: bool,
+    temperature: float,
+    top_p: float,
+    drum_volume: float,
+) -> dict[str, object]:
+    """Stream the actual inference stages to the custom frontend."""
+    workdir = tempfile.mkdtemp(prefix="softchart-request-")
+    try:
+        audio_path, wave_name = _uploaded_file(audio, audio_name)
+        _validate_controls(course, level, bpm_override, temperature, top_p, drum_volume)
+        level = int(level)
+        bpm_override = float(bpm_override)
+        temperature = float(temperature)
+        top_p = float(top_p)
+        drum_volume = float(drum_volume)
+
+        yield _progress(
+            "loading", 0.03, "Preparing",
+            "Loading SoftChart.",
+        )
+        models = get_models(include_planner=use_planner)
+
+        yield _progress(
+            "audio", 0.11, "Listening",
+            "Mapping rhythm, melody, and timbre.",
+        )
+        mel, wav = load_logmel(audio_path)
+
+        yield _progress(
+            "beat", 0.21, "Finding the beat",
+            "Finding beats and tempo.",
+        )
+        grid = dbs = None
+        if use_beat:
+            grid = fit_grid_piecewise(models["beat"], mel, device=DEVICE)
+            if grid is not None:
+                dbs = grid["downbeats"] if grid["ok"] else grid["db_peaks"]
+                if not grid["ok"]:
+                    grid = None
+        if bpm_override > 0:
+            bpm = bpm_override
+            if use_beat and (grid is None or abs(grid["bpm"] - bpm) > 0.5):
+                fixed_grid = fit_grid_fixed_bpm(models["beat"], mel, bpm, device=DEVICE)
+                grid = fixed_grid if fixed_grid is not None and fixed_grid["ok"] else None
+                if grid is not None:
+                    dbs = grid["downbeats"]
+        elif grid is not None:
+            bpm = float(grid["bpm"])
+        elif dbs is not None and len(dbs) > 4:
+            period = float(np.median(np.diff(dbs)))
+            if period <= 0:
+                raise RuntimeError("The beat model returned an invalid downbeat interval.")
+            bpm = 240.0 / period
+            while bpm >= 210:
+                bpm /= 2.0
+            while bpm < 70:
+                bpm *= 2.0
+        else:
+            import librosa
+            bpm = float(np.atleast_1d(librosa.beat.beat_track(y=wav, sr=SR)[0])[0])
+        if not np.isfinite(bpm) or bpm <= 0:
+            raise RuntimeError("Could not determine a reliable BPM. Enter it in Advanced settings.")
+        if grid is None and abs(bpm - round(bpm)) < 0.06:
+            bpm = float(round(bpm))
+
+        yield _progress(
+            "plan", 0.34, "Shaping the arc",
+            "Planning density and climaxes.",
+        )
+        plan = None
+        if getattr(models["gen"], "_has_plan", False):
+            if use_planner:
+                plan = learned_plan(models["plan"], mel, course, bpm, dbs)
+            elif auto_plan_on:
+                plan = auto_plan(mel, bpm, dbs)
+
+        yield _progress(
+            "generate", 0.47, "Writing the chart",
+            "Writing playable Taiko patterns.",
+        )
+        title = os.path.splitext(wave_name)[0]
+        slot_used = grid is not None
+        if slot_used:
+            generated = generate_song_slot(
+                models["slot"], mel, grid, course, level=level,
+                density_bucket=COURSE_DENS[course], greedy=not sampling, seed=0,
+                temperature=temperature, top_p=top_p, device=DEVICE, plan=plan,
+            )
+            tja = write_tja_slots(
+                generated, grid, title, course, level, wave_name, plan=plan,
+            )
+        else:
+            generated = generate_song(
+                models["gen"], mel, course, level=level,
+                density_bucket=COURSE_DENS[course], greedy=not sampling,
+                temperature=temperature, top_p=top_p, seed=0,
+                device=DEVICE, plan=plan,
+            )
+            generated = snap_chart(generated, bpm)
+            tja = write_tja(
+                generated, bpm, title, course, level, wave_name, dbs,
+                grid_fit=grid, plan=plan,
+            )
+
+        yield _progress(
+            "export", 0.81, "Rendering",
+            "Building the TJA and previews.",
+        )
+        tja_path = output_tja_path(wave_name, course, workdir)
+        with open(tja_path, "w", encoding="utf-8") as output_file:
+            output_file.write(tja)
+        chart_image_path = os.path.join(workdir, "chart.png")
+        plan_image_path = os.path.join(workdir, "song-plan.png")
+        render_tja_image(tja, out_path=chart_image_path)
+        render_audio_plan(mel, title, course, plan=plan, out_path=plan_image_path)
+
+        yield _progress(
+            "mix", 0.91, "Mixing",
+            "Mixing Taiko with your track.",
+        )
+        stem = Path(tja_path).stem
+        preview_path = os.path.join(workdir, f"{stem}_taiko-preview.wav")
+        mix_stats = synthesize_taiko_preview(
+            audio_path,
+            tja,
+            preview_path,
+            drum_gain=drum_volume,
+            sample_rate=44100,
+        )
+
+        grid_rms = round(float(grid["rms_ms"]), 1) if grid is not None else None
+        metrics = {
+            "bpm": round(float(bpm), 1),
+            "notes": len(generated["hits"]),
+            "spans": len(generated["spans"]),
+            "timing": "slot-exact" if slot_used else "time-quantized",
+            "grid_rms_ms": grid_rms,
+            "preview_hits": int(mix_stats["rendered_hit_count"]),
+        }
+        yield {
+            "kind": "complete",
+            "stage": "complete",
+            "progress": 1.0,
+            "title": "Ready",
+            "detail": "Play it or download it.",
+            "metrics": metrics,
+            "files": {
+                "tja": _file_data(tja_path, mime_type="text/plain"),
+                "audio": _file_data(preview_path, mime_type="audio/wav"),
+                "chart_image": _file_data(chart_image_path, mime_type="image/png"),
+                "plan_image": _file_data(plan_image_path, mime_type="image/png"),
+            },
+        }
+    except Exception as exc:
+        LOGGER.exception("SoftChart generation failed")
+        detail = (str(exc) if isinstance(exc, (ValueError, RuntimeError))
+                  else "The server could not complete this chart. Please try again shortly.")
+        yield {
+            "kind": "error",
+            "stage": "error",
+            "progress": 0.0,
+            "title": "Generation did not complete",
+            "detail": detail,
+        }
+    finally:
+        shutil.rmtree(workdir, ignore_errors=True)
+
 
 if __name__ == "__main__":
-    # show_api=False avoids a gradio_client schema-introspection bug
-    # ("bool is not iterable") that can appear on some versions
-    demo.launch(show_api=False)
+    app.launch(max_file_size="200mb")

requirements.txt

@@ -6,8 +6,8 @@ numba>=0.60
 soundfile
 matplotlib
 pillow
-gradio==5.9.1
-gradio_client==1.5.2
-pydantic==2.10.6
-huggingface_hub>=0.26,<1.0
+gradio==6.20.0
+gradio_client==2.5.0
+pydantic>=2.10,<3
+huggingface_hub>=1.2,<2.0
 safetensors

softchart/preview_audio.py

@@ -0,0 +1,547 @@
+"""Deterministic game-style wadaiko preview synthesis.
+
+The chart is the timing authority: :func:`parse_tja_events` converts the
+repo-emitted TJA subset to audio-clock events, including OFFSET, measure-local
+subdivisions, and piecewise BPM changes.  Drum timbres are synthesized from
+membrane/rim resonances and filtered noise; no recorded or proprietary game
+assets are used.
+"""
+
+from __future__ import annotations
+
+import math
+import os
+import wave
+from dataclasses import dataclass
+from fractions import Fraction
+
+import numpy as np
+from scipy.signal import butter, resample_poly, sosfilt
+
+
+_HIT_KIND = {"1": "don", "2": "ka", "3": "don_big", "4": "ka_big"}
+_SPAN_KIND = {"5": "roll", "6": "roll_big", "7": "balloon"}
+_ALLOWED_COMMANDS = {"#GOGOSTART", "#GOGOEND"}
+_PCM16_CEILING = int(math.floor(32767 * 10.0 ** (-1.0 / 20.0)))
+
+
+@dataclass(frozen=True)
+class TaikoEvent:
+    """One chart event on the source-audio clock.
+
+    ``duration`` is non-zero for rolls and balloons.  ``hit_count`` is one for
+    ordinary notes, the BALLOON header value for balloons, and zero for rolls
+    whose autoplay cadence is derived from their duration.
+    """
+
+    time: float
+    kind: str
+    duration: float = 0.0
+    hit_count: int = 1
+
+
+@dataclass(frozen=True)
+class _OpenSpan:
+    time: float
+    kind: str
+    hit_count: int
+
+
+@dataclass(frozen=True)
+class _Strike:
+    time: float
+    kind: str
+    pan: float
+    duck_depth: float
+    autoplay: bool
+
+
+def _finite_float(value: str, field: str) -> float:
+    try:
+        result = float(value)
+    except (TypeError, ValueError) as exc:
+        raise ValueError(f"TJA {field} must be numeric, got {value!r}") from exc
+    if not math.isfinite(result):
+        raise ValueError(f"TJA {field} must be finite")
+    return result
+
+
+def _strip_comment(line: str) -> str:
+    return line.split("//", 1)[0].strip()
+
+
+def parse_tja_events(tja_text: str) -> list[TaikoEvent]:
+    """Parse the single-course TJA subset emitted by SoftChart.
+
+    Event times use the source-audio clock.  TJA's OFFSET convention therefore
+    becomes ``audio_time = score_time - OFFSET``.  Every measure is 4/4, and a
+    measure's character count defines its exact subdivision.  ``#BPMCHANGE``
+    is accepted at measure boundaries, matching :mod:`softchart.tja`.
+
+    The parser is intentionally strict.  A malformed/unterminated span or an
+    unsupported timing command raises ``ValueError`` instead of producing an
+    audibly plausible but incorrectly synchronized preview.
+    """
+
+    if not isinstance(tja_text, str) or not tja_text.strip():
+        raise ValueError("TJA text must be a non-empty string")
+
+    lines = [_strip_comment(line) for line in tja_text.splitlines()]
+    headers: dict[str, str] = {}
+    start_index: int | None = None
+    for index, line in enumerate(lines):
+        if not line:
+            continue
+        upper = line.upper()
+        if upper.startswith("#START"):
+            start_index = index + 1
+            break
+        if line.startswith("#"):
+            raise ValueError(f"unsupported command before #START: {line}")
+        if ":" in line:
+            key, value = line.split(":", 1)
+            headers[key.strip().upper()] = value.strip()
+
+    if start_index is None:
+        raise ValueError("TJA chart is missing #START")
+    if "BPM" not in headers:
+        raise ValueError("TJA chart is missing BPM")
+    if "OFFSET" not in headers:
+        raise ValueError("TJA chart is missing OFFSET")
+
+    bpm = _finite_float(headers["BPM"], "BPM")
+    offset = _finite_float(headers["OFFSET"], "OFFSET")
+    if bpm <= 0.0:
+        raise ValueError("TJA BPM must be greater than zero")
+
+    balloon_counts: list[int] = []
+    balloon_field = headers.get("BALLOON", "").strip()
+    if balloon_field:
+        try:
+            balloon_counts = [int(part.strip()) for part in balloon_field.split(",")]
+        except ValueError as exc:
+            raise ValueError("TJA BALLOON values must be integers") from exc
+        if any(count <= 0 for count in balloon_counts):
+            raise ValueError("TJA BALLOON values must be greater than zero")
+
+    score_time = 0.0
+    measure_buffer: list[str] = []
+    events: list[TaikoEvent] = []
+    open_span: _OpenSpan | None = None
+    balloon_index = 0
+    measure_count = 0
+    found_end = False
+
+    def finish_measure() -> None:
+        nonlocal score_time, open_span, balloon_index, measure_count
+        if not measure_buffer:
+            raise ValueError("TJA contains an empty measure")
+        measure = "".join(measure_buffer)
+        measure_buffer.clear()
+        division = len(measure)
+        measure_seconds = 240.0 / bpm
+
+        for position, symbol in enumerate(measure):
+            if symbol == "0":
+                continue
+            event_time = score_time + measure_seconds * position / division - offset
+            if symbol in _HIT_KIND:
+                events.append(TaikoEvent(time=event_time, kind=_HIT_KIND[symbol]))
+            elif symbol in _SPAN_KIND:
+                if open_span is not None:
+                    raise ValueError("TJA contains overlapping roll/balloon spans")
+                hit_count = 0
+                if symbol == "7":
+                    if balloon_index >= len(balloon_counts):
+                        raise ValueError("TJA balloon has no matching BALLOON count")
+                    hit_count = balloon_counts[balloon_index]
+                    balloon_index += 1
+                open_span = _OpenSpan(event_time, _SPAN_KIND[symbol], hit_count)
+            elif symbol == "8":
+                if open_span is None:
+                    raise ValueError("TJA contains a span end (8) without a start")
+                duration = event_time - open_span.time
+                if duration <= 0.0:
+                    raise ValueError("TJA roll/balloon duration must be positive")
+                events.append(TaikoEvent(open_span.time, open_span.kind,
+                                         duration, open_span.hit_count))
+                open_span = None
+            else:
+                raise ValueError(f"unsupported TJA note symbol: {symbol}")
+
+        score_time += measure_seconds
+        measure_count += 1
+
+    for line in lines[start_index:]:
+        if not line:
+            continue
+        upper = line.upper()
+        if upper.startswith("#END"):
+            if measure_buffer:
+                raise ValueError("TJA measure before #END is missing a comma")
+            found_end = True
+            break
+        if upper.startswith("#BPMCHANGE"):
+            if measure_buffer:
+                raise ValueError("#BPMCHANGE is only supported at measure boundaries")
+            parts = line.split(maxsplit=1)
+            if len(parts) != 2:
+                raise ValueError("#BPMCHANGE requires a BPM value")
+            bpm = _finite_float(parts[1], "#BPMCHANGE")
+            if bpm <= 0.0:
+                raise ValueError("#BPMCHANGE BPM must be greater than zero")
+            continue
+        if upper in _ALLOWED_COMMANDS:
+            if measure_buffer:
+                raise ValueError(f"{line} is only supported at measure boundaries")
+            continue
+        if line.startswith("#"):
+            raise ValueError(f"unsupported command in preview TJA: {line}")
+
+        for char in line:
+            if char.isspace():
+                continue
+            if char == ",":
+                finish_measure()
+            elif char in "012345678":
+                measure_buffer.append(char)
+            else:
+                raise ValueError(f"unsupported character in TJA measure: {char!r}")
+
+    if not found_end:
+        raise ValueError("TJA chart is missing #END")
+    if measure_count == 0:
+        raise ValueError("TJA chart has no measures")
+    if open_span is not None:
+        raise ValueError("TJA roll/balloon span is missing its end marker (8)")
+    return sorted(events, key=lambda event: event.time)
+
+
+def _filtered_noise(rng: np.random.Generator, length: int, sample_rate: int,
+                    low_hz: float, high_hz: float) -> np.ndarray:
+    nyquist = sample_rate / 2.0
+    low = max(20.0, min(low_hz, nyquist * 0.90))
+    high = max(low + 20.0, min(high_hz, nyquist * 0.97))
+    sos = butter(3, (low, high), btype="bandpass", fs=sample_rate, output="sos")
+    noise = sosfilt(sos, rng.standard_normal(length)).astype(np.float64)
+    rms = float(np.sqrt(np.mean(noise * noise)))
+    return noise / max(rms, 1e-12)
+
+
+def _falling_mode(t: np.ndarray, start_hz: float, end_hz: float,
+                  pitch_tau: float, decay: float) -> np.ndarray:
+    phase = 2.0 * np.pi * (
+        end_hz * t + (start_hz - end_hz) * pitch_tau * (1.0 - np.exp(-t / pitch_tau))
+    )
+    return np.sin(phase) * np.exp(-t / decay)
+
+
+def _add_reflection(signal: np.ndarray, sample_rate: int, delay_seconds: float,
+                    gain: float) -> None:
+    delay = max(1, int(round(delay_seconds * sample_rate)))
+    if delay < len(signal):
+        signal[delay:] += gain * signal[:-delay]
+
+
+def _make_don(sample_rate: int, variant: int, big: bool = False,
+              tap: bool = False) -> np.ndarray:
+    duration = 0.19 if tap else (0.62 if big else 0.43)
+    n = int(round(duration * sample_rate))
+    t = np.arange(n, dtype=np.float64) / sample_rate
+    rng = np.random.default_rng(12_710 + 101 * variant + 1_009 * int(big) + 7_003 * int(tap))
+    pitch = (0.965, 0.985, 1.010, 1.030)[variant % 4] * (0.84 if big else 1.0)
+    if tap:
+        pitch *= 1.10
+    attack = 1.0 - np.exp(-t / 0.00075)
+
+    modes = np.zeros(n, dtype=np.float64)
+    frequencies = (104.0, 166.0, 248.0, 362.0)
+    weights = (1.00, 0.54, 0.31, 0.17)
+    decays = (0.27, 0.19, 0.125, 0.080)
+    decay_scale = 0.55 if tap else (1.35 if big else 1.0)
+    for frequency, weight, decay in zip(frequencies, weights, decays):
+        end_hz = frequency * pitch
+        modes += weight * _falling_mode(
+            t, end_hz * (1.24 + 0.015 * variant), end_hz,
+            0.017 if tap else 0.026, decay * decay_scale,
+        )
+
+    skin = _filtered_noise(rng, n, sample_rate, 150.0, 3_600.0)
+    skin *= np.exp(-t / (0.012 if tap else 0.021))
+    stick = _filtered_noise(rng, n, sample_rate, 900.0, 7_200.0)
+    stick *= np.exp(-t / 0.0045)
+    signal = attack * modes + 0.26 * skin + 0.075 * stick
+    if big:
+        signal += 0.34 * _falling_mode(t, 89.0, 66.0, 0.038, 0.38)
+    _add_reflection(signal, sample_rate, 0.0083, 0.075 if tap else 0.11)
+    _add_reflection(signal, sample_rate, 0.0171, 0.035 if tap else 0.065)
+    signal *= np.exp(-np.maximum(t - duration * 0.78, 0.0) / 0.035)
+    target = 0.43 if tap else (0.94 if big else 0.78)
+    signal *= target / max(float(np.max(np.abs(signal))), 1e-12)
+    return signal.astype(np.float32)
+
+
+def _make_ka(sample_rate: int, variant: int, big: bool = False) -> np.ndarray:
+    duration = 0.35 if big else 0.25
+    n = int(round(duration * sample_rate))
+    t = np.arange(n, dtype=np.float64) / sample_rate
+    rng = np.random.default_rng(37_901 + 131 * variant + 2_003 * int(big))
+    pitch = (0.970, 0.992, 1.015, 1.035)[variant % 4] * (0.90 if big else 1.0)
+    attack = 1.0 - np.exp(-t / 0.00035)
+
+    rim = _filtered_noise(rng, n, sample_rate, 620.0, 9_200.0)
+    rim *= np.exp(-t / (0.024 if big else 0.016))
+    modes = np.zeros(n, dtype=np.float64)
+    for frequency, weight, decay in (
+        (535.0, 0.48, 0.105), (885.0, 0.36, 0.074),
+        (1_410.0, 0.27, 0.050), (2_270.0, 0.16, 0.032),
+    ):
+        phase = 2.0 * np.pi * frequency * pitch * t + variant * 0.31
+        modes += weight * np.sin(phase) * np.exp(-t / (decay * (1.25 if big else 1.0)))
+    signal = 0.72 * rim + attack * modes
+    _add_reflection(signal, sample_rate, 0.0047, 0.16)
+    _add_reflection(signal, sample_rate, 0.0119, 0.085 if big else 0.060)
+    signal *= np.exp(-np.maximum(t - duration * 0.72, 0.0) / 0.025)
+    target = 0.90 if big else 0.70
+    signal *= target / max(float(np.max(np.abs(signal))), 1e-12)
+    return signal.astype(np.float32)
+
+
+_BANKS: dict[int, dict[str, tuple[np.ndarray, ...]]] = {}
+
+
+def _sample_bank(sample_rate: int) -> dict[str, tuple[np.ndarray, ...]]:
+    bank = _BANKS.get(sample_rate)
+    if bank is None:
+        bank = {
+            "don": tuple(_make_don(sample_rate, i) for i in range(4)),
+            "ka": tuple(_make_ka(sample_rate, i) for i in range(4)),
+            "don_big": tuple(_make_don(sample_rate, i, big=True) for i in range(4)),
+            "ka_big": tuple(_make_ka(sample_rate, i, big=True) for i in range(4)),
+            "roll": tuple(_make_don(sample_rate, i, tap=True) for i in range(4)),
+            "roll_big": tuple(_make_don(sample_rate, i, big=True, tap=True) for i in range(4)),
+            "balloon": tuple(_make_don(sample_rate, i, tap=True) for i in range(4)),
+        }
+        _BANKS[sample_rate] = bank
+    return bank
+
+
+def _expand_strikes(events: list[TaikoEvent]) -> tuple[list[_Strike], int]:
+    strikes: list[_Strike] = []
+    autoplay_count = 0
+    ordinary_index = 0
+    for event in events:
+        if event.kind in {"don", "ka", "don_big", "ka_big"}:
+            if event.kind == "ka":
+                pan = -0.28 if ordinary_index % 2 == 0 else 0.28
+            elif event.kind == "ka_big":
+                pan = -0.10 if ordinary_index % 2 == 0 else 0.10
+            else:
+                pan = -0.035 if ordinary_index % 2 == 0 else 0.035
+            depth = 0.20 if event.kind.endswith("_big") else 0.145
+            strikes.append(_Strike(event.time, event.kind, pan, depth, False))
+            ordinary_index += 1
+            continue
+
+        if event.kind == "balloon":
+            times = event.time + np.arange(event.hit_count, dtype=np.float64) * (
+                event.duration / event.hit_count
+            )
+            kind = "balloon"
+            depth = 0.070
+        else:
+            interval = 0.074 if event.kind == "roll_big" else 0.086
+            count = max(1, int(math.ceil(max(0.0, event.duration - 0.018) / interval)))
+            times = event.time + np.arange(count, dtype=np.float64) * interval
+            times = times[times < event.time + event.duration - 0.008]
+            if len(times) == 0:
+                times = np.asarray([event.time])
+            kind = event.kind
+            depth = 0.085 if event.kind == "roll_big" else 0.060
+        for index, time in enumerate(times):
+            pan_width = 0.24 if kind == "roll_big" else 0.18
+            pan = -pan_width if index % 2 == 0 else pan_width
+            strikes.append(_Strike(float(time), kind, pan, depth, True))
+            autoplay_count += 1
+    strikes.sort(key=lambda strike: strike.time)
+    return strikes, autoplay_count
+
+
+def _load_stereo_audio(audio_path: str, sample_rate: int) -> np.ndarray:
+    import soundfile as sf
+
+    audio, source_rate = sf.read(audio_path, dtype="float32", always_2d=True)
+    if source_rate <= 0 or audio.shape[0] == 0:
+        raise ValueError("input audio must contain at least one sample")
+    if not np.all(np.isfinite(audio)):
+        raise ValueError("input audio contains non-finite samples")
+
+    channels = audio.shape[1]
+    if channels == 1:
+        audio = np.repeat(audio, 2, axis=1)
+    elif channels > 2:
+        ambience = np.mean(audio[:, 2:], axis=1)
+        left = (audio[:, 0] + 0.5 * ambience) / 1.5
+        right = (audio[:, 1] + 0.5 * ambience) / 1.5
+        audio = np.stack((left, right), axis=1)
+    else:
+        audio = audio[:, :2]
+
+    if source_rate != sample_rate:
+        ratio = Fraction(sample_rate, int(source_rate)).limit_denominator()
+        expected_frames = int(round(len(audio) * sample_rate / source_rate))
+        audio = resample_poly(
+            audio, ratio.numerator, ratio.denominator, axis=0,
+            window=("kaiser", 10.0), padtype="line",
+        )
+        if len(audio) < expected_frames:
+            audio = np.pad(audio, ((0, expected_frames - len(audio)), (0, 0)))
+        audio = audio[:expected_frames]
+    return np.ascontiguousarray(audio, dtype=np.float32)
+
+
+def _place_strike(drums: np.ndarray, sample: np.ndarray, strike: _Strike,
+                  sample_rate: int) -> bool:
+    start = int(round(strike.time * sample_rate))
+    sample_start = max(0, -start)
+    output_start = max(0, start)
+    count = min(len(sample) - sample_start, len(drums) - output_start)
+    if count <= 0:
+        return False
+
+    angle = (float(np.clip(strike.pan, -1.0, 1.0)) + 1.0) * np.pi / 4.0
+    left_gain, right_gain = math.cos(angle), math.sin(angle)
+    segment = sample[sample_start:sample_start + count]
+    drums[output_start:output_start + count, 0] += segment * left_gain
+    drums[output_start:output_start + count, 1] += segment * right_gain
+
+    # A quiet, opposite-side early reflection creates believable width while
+    # preserving a precise, dry transient at the chart time.
+    reflection_delay = int(round(0.011 * sample_rate))
+    reflected_start = output_start + reflection_delay
+    reflected_count = min(count, len(drums) - reflected_start)
+    if reflected_count > 0:
+        reflected = segment[:reflected_count] * 0.095
+        drums[reflected_start:reflected_start + reflected_count, 0] += reflected * right_gain
+        drums[reflected_start:reflected_start + reflected_count, 1] += reflected * left_gain
+    return True
+
+
+def _duck_envelope(frame_count: int, strikes: list[_Strike], sample_rate: int,
+                   drum_gain: float) -> tuple[np.ndarray, float]:
+    reduction = np.zeros(frame_count, dtype=np.float32)
+    attack_frames = max(1, int(round(0.006 * sample_rate)))
+    release_frames = max(1, int(round(0.115 * sample_rate)))
+    attack = 0.5 - 0.5 * np.cos(np.linspace(0.0, np.pi, attack_frames, dtype=np.float32))
+    release = np.exp(-np.arange(release_frames, dtype=np.float32) /
+                     max(1.0, 0.042 * sample_rate))
+    shape = np.concatenate((attack, release))
+    gain_scale = min(drum_gain / 0.8, 1.0) if drum_gain > 0.0 else 0.0
+
+    for strike in strikes:
+        hit_frame = int(round(strike.time * sample_rate))
+        start = hit_frame - attack_frames
+        source_start = max(0, -start)
+        output_start = max(0, start)
+        count = min(len(shape) - source_start, frame_count - output_start)
+        if count <= 0:
+            continue
+        envelope = shape[source_start:source_start + count] * strike.duck_depth * gain_scale
+        target = reduction[output_start:output_start + count]
+        np.maximum(target, envelope, out=target)
+
+    np.minimum(reduction, 0.32, out=reduction)
+    gain = 1.0 - reduction
+    max_duck_db = -20.0 * math.log10(max(float(np.min(gain)), 1e-12))
+    return gain, max_duck_db
+
+
+def _write_pcm16_wav(out_path: str, pcm: np.ndarray, sample_rate: int) -> None:
+    parent = os.path.dirname(os.path.abspath(out_path))
+    os.makedirs(parent, exist_ok=True)
+    with wave.open(out_path, "wb") as wav:
+        wav.setnchannels(2)
+        wav.setsampwidth(2)
+        wav.setframerate(sample_rate)
+        wav.writeframes(np.ascontiguousarray(pcm.astype("<i2", copy=False)).tobytes())
+
+
+def synthesize_taiko_preview(
+    audio_path: str,
+    tja_text: str,
+    out_path: str,
+    drum_gain: float = 0.8,
+    sample_rate: int = 44_100,
+) -> dict[str, float | int]:
+    """Mix a synchronized stereo PCM16 WAV preview and return numeric stats.
+
+    Music is held at 2 dB of mix headroom and briefly ducked under each drum
+    transient.  The final mix uses transparent global peak reduction when
+    needed and is quantized below a -1 dBFS sample-peak ceiling.
+    """
+
+    if not isinstance(sample_rate, int) or sample_rate < 16_000 or sample_rate > 192_000:
+        raise ValueError("sample_rate must be an integer from 16000 to 192000")
+    if not math.isfinite(drum_gain) or not 0.0 <= drum_gain <= 2.0:
+        raise ValueError("drum_gain must be finite and between 0.0 and 2.0")
+    if not out_path:
+        raise ValueError("out_path must be provided")
+
+    events = parse_tja_events(tja_text)
+    music = _load_stereo_audio(audio_path, sample_rate)
+    strikes, autoplay_count = _expand_strikes(events)
+    bank = _sample_bank(sample_rate)
+    source_frames = len(music)
+    output_frames = source_frames
+    for index, strike in enumerate(strikes):
+        sample = bank[strike.kind][index % len(bank[strike.kind])]
+        output_frames = max(
+            output_frames,
+            max(0, int(round(strike.time * sample_rate)) + len(sample)),
+        )
+    if output_frames > source_frames:
+        music = np.pad(music, ((0, output_frames - source_frames), (0, 0)))
+    drums = np.zeros_like(music)
+    audible_strikes: list[_Strike] = []
+
+    for index, strike in enumerate(strikes):
+        samples = bank[strike.kind]
+        sample = samples[index % len(samples)]
+        if _place_strike(drums, sample, strike, sample_rate):
+            audible_strikes.append(strike)
+
+    duck_gain, max_duck_db = _duck_envelope(
+        len(music), audible_strikes, sample_rate, drum_gain,
+    )
+    music_gain = 10.0 ** (-2.0 / 20.0)
+    mixed = music * (music_gain * duck_gain[:, None])
+    mixed += drums * float(drum_gain)
+
+    pre_limit_peak = float(np.max(np.abs(mixed))) if mixed.size else 0.0
+    float_ceiling = _PCM16_CEILING / 32767.0
+    limiter_gain = min(1.0, float_ceiling / pre_limit_peak) if pre_limit_peak > 0.0 else 1.0
+    mixed *= limiter_gain
+    np.clip(mixed, -float_ceiling, float_ceiling, out=mixed)
+    pcm = np.rint(mixed * 32767.0).astype(np.int16)
+    _write_pcm16_wav(out_path, pcm, sample_rate)
+
+    pcm_peak = int(np.max(np.abs(pcm.astype(np.int32)))) if pcm.size else 0
+    peak_dbfs = 20.0 * math.log10(pcm_peak / 32768.0) if pcm_peak else -120.0
+    gain_reduction_db = -20.0 * math.log10(max(limiter_gain, 1e-12))
+    audible_autoplay = sum(1 for strike in audible_strikes if strike.autoplay)
+    return {
+        "sample_rate": sample_rate,
+        "frames": len(music),
+        "duration_seconds": len(music) / sample_rate,
+        "source_frames": source_frames,
+        "event_count": len(events),
+        "rendered_hit_count": len(audible_strikes),
+        "autoplay_hit_count": audible_autoplay,
+        "scheduled_autoplay_hit_count": autoplay_count,
+        "peak_dbfs": peak_dbfs,
+        "gain_reduction_db": gain_reduction_db,
+        "max_duck_db": max_duck_db,
+    }
+
+
+__all__ = ["TaikoEvent", "parse_tja_events", "synthesize_taiko_preview"]

static/app.css

@@ -0,0 +1,1694 @@
+@charset "UTF-8";
+
+:root {
+  color-scheme: light;
+  --paper: #f6f3ec;
+  --paper-deep: #eee9df;
+  --surface: rgba(255, 253, 248, 0.92);
+  --surface-solid: #fffdf8;
+  --ink: #1f2023;
+  --ink-soft: #626166;
+  --ink-faint: #8f8c89;
+  --line: #ded9cf;
+  --line-strong: #c9c2b7;
+  --red: #d9473e;
+  --red-deep: #ac2e2c;
+  --red-soft: #f7ddda;
+  --blue: #276f91;
+  --blue-soft: #d9ecf4;
+  --green: #2d7657;
+  --green-soft: #dcece3;
+  --shadow: 0 18px 60px rgba(52, 42, 31, 0.08);
+  --radius-lg: 26px;
+  --radius-md: 16px;
+  --radius-sm: 10px;
+  --ease: cubic-bezier(.22, .8, .25, 1);
+  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
+  font-synthesis: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+  background: var(--paper);
+}
+
+body {
+  min-width: 320px;
+  margin: 0;
+  color: var(--ink);
+  background:
+    radial-gradient(circle at 11% 2%, rgba(217, 71, 62, .06), transparent 28rem),
+    radial-gradient(circle at 95% 28%, rgba(39, 111, 145, .055), transparent 30rem),
+    var(--paper);
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+}
+
+body::before {
+  position: fixed;
+  z-index: -1;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
+  content: "";
+  pointer-events: none;
+}
+
+button,
+input,
+summary {
+  font: inherit;
+}
+
+button,
+summary,
+label,
+[role="button"] {
+  -webkit-tap-highlight-color: transparent;
+}
+
+button,
+[role="button"],
+summary {
+  cursor: pointer;
+}
+
+button:focus-visible,
+input:focus-visible,
+summary:focus-visible,
+a:focus-visible,
+[role="button"]:focus-visible {
+  outline: 3px solid rgba(39, 111, 145, .35);
+  outline-offset: 3px;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.skip-link {
+  position: absolute;
+  z-index: 100;
+  top: 10px;
+  left: 10px;
+  padding: 9px 14px;
+  color: white;
+  background: var(--ink);
+  border-radius: 8px;
+  transform: translateY(-160%);
+  transition: transform .2s;
+}
+
+.skip-link:focus {
+  transform: translateY(0);
+}
+
+.site-header {
+  width: min(1420px, calc(100% - 48px));
+  height: 86px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid rgba(31, 32, 35, .12);
+}
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--ink);
+  text-decoration: none;
+  font-size: 19px;
+  font-weight: 760;
+  letter-spacing: -.03em;
+}
+
+.brand-mark {
+  width: 38px;
+  height: 38px;
+  color: var(--red);
+}
+
+.brand-edition {
+  margin-left: 2px;
+  padding-left: 12px;
+  color: var(--ink-faint);
+  border-left: 1px solid var(--line-strong);
+  font-size: 9px;
+  font-weight: 720;
+  letter-spacing: .18em;
+}
+
+.connection {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--ink-soft);
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.connection-dot {
+  width: 7px;
+  height: 7px;
+  background: #d39334;
+  border-radius: 99px;
+  box-shadow: 0 0 0 4px rgba(211, 147, 52, .12);
+  animation: connection-pulse 1.6s ease-in-out infinite;
+}
+
+.connection.is-ready .connection-dot {
+  background: var(--green);
+  box-shadow: 0 0 0 4px rgba(45, 118, 87, .12);
+  animation: none;
+}
+
+.connection.is-error .connection-dot {
+  background: var(--red);
+  box-shadow: 0 0 0 4px rgba(217, 71, 62, .12);
+  animation: none;
+}
+
+main {
+  width: min(1420px, calc(100% - 48px));
+  margin: 0 auto;
+}
+
+.hero {
+  display: block;
+  padding: 96px 2.5vw 82px;
+}
+
+.eyebrow,
+.section-kicker,
+.process-eyebrow {
+  margin: 0;
+  color: var(--red);
+  font-size: 10px;
+  line-height: 1.2;
+  font-weight: 800;
+  letter-spacing: .17em;
+}
+
+.eyebrow span {
+  padding: 0 5px;
+  color: var(--line-strong);
+}
+
+.hero h1 {
+  max-width: 1080px;
+  margin: 0;
+  font-family: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
+  font-size: clamp(64px, 8vw, 112px);
+  font-weight: 760;
+  line-height: .92;
+  letter-spacing: -.065em;
+}
+
+.hero h1 em {
+  color: var(--red);
+  font-style: normal;
+}
+
+.hero-lede {
+  max-width: 540px;
+  margin: 28px 0 0;
+  color: var(--ink-soft);
+  font-size: clamp(16px, 1.5vw, 20px);
+  font-weight: 650;
+}
+
+.hero-features {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 13px 28px;
+  padding: 0;
+  margin: 44px 0 0;
+  list-style: none;
+}
+
+.hero-features li {
+  position: relative;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding-left: 17px;
+}
+
+.hero-features li::before {
+  position: absolute;
+  left: 0;
+  width: 6px;
+  height: 6px;
+  background: var(--red);
+  border-radius: 50%;
+  content: "";
+}
+
+.hero-features strong {
+  color: var(--ink);
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: .13em;
+  text-transform: uppercase;
+}
+
+.studio-grid {
+  display: grid;
+  grid-template-columns: minmax(380px, 460px) minmax(0, 1fr);
+  gap: 28px;
+  align-items: start;
+  padding-bottom: 100px;
+}
+
+.panel {
+  background: var(--surface);
+  border: 1.5px solid rgba(31, 32, 35, .12);
+  border-radius: 26px;
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(18px);
+}
+
+.setup-panel,
+.process-panel,
+.result-panel {
+  padding: clamp(28px, 2.7vw, 38px);
+}
+
+.setup-panel {
+  position: sticky;
+  top: 20px;
+}
+
+.output-column {
+  display: grid;
+  gap: 22px;
+}
+
+.panel-heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 20px;
+  margin-bottom: 22px;
+}
+
+.panel-heading h2 {
+  margin: 0;
+  font-family: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
+  font-size: clamp(28px, 2.7vw, 38px);
+  line-height: 1.08;
+  letter-spacing: -.045em;
+}
+
+.step-chip,
+.status-chip {
+  flex: none;
+  padding: 7px 10px;
+  color: var(--ink-faint);
+  background: var(--paper-deep);
+  border-radius: 99px;
+  font-size: 9px;
+  line-height: 1;
+  font-weight: 800;
+  letter-spacing: .13em;
+}
+
+.status-chip.is-active {
+  color: var(--blue);
+  background: var(--blue-soft);
+}
+
+.status-chip.is-complete,
+.complete-chip {
+  color: var(--green);
+  background: var(--green-soft);
+}
+
+.status-chip.is-error {
+  color: var(--red-deep);
+  background: var(--red-soft);
+}
+
+.form-section {
+  padding: 2px 0 20px;
+}
+
+.split-rule {
+  padding-top: 20px;
+  border-top: 1px solid var(--line);
+}
+
+.label-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+
+label,
+legend,
+.group-label {
+  color: var(--ink);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.field-hint,
+.field-note {
+  color: var(--ink-faint);
+  font-size: 10.5px;
+}
+
+.dropzone {
+  position: relative;
+  display: flex;
+  min-height: 190px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--ink-soft);
+  background:
+    radial-gradient(circle at 50% 30%, rgba(217, 71, 62, .12), transparent 58%),
+    rgba(246, 243, 236, .72);
+  border: 1.5px solid rgba(217, 71, 62, .2);
+  border-radius: var(--radius-md);
+  transition: color .22s, background-color .22s, transform .22s var(--ease);
+}
+
+.dropzone:hover,
+.dropzone.is-dragging {
+  color: var(--red);
+  background-color: rgba(247, 221, 218, .38);
+  transform: translateY(-2px);
+}
+
+#file-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.upload-icon {
+  width: 54px;
+  height: 54px;
+  margin-bottom: 10px;
+}
+
+.drop-title {
+  color: var(--ink);
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.drop-subtitle {
+  margin-top: 2px;
+  color: var(--ink-faint);
+  font-size: 11px;
+}
+
+.source-card {
+  padding: 14px;
+  background: var(--paper);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+}
+
+.source-info {
+  display: grid;
+  grid-template-columns: 38px minmax(0, 1fr) 32px;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.file-badge {
+  display: grid;
+  width: 38px;
+  height: 38px;
+  place-items: center;
+  color: var(--red);
+  background: var(--red-soft);
+  border-radius: 50%;
+  font-weight: 800;
+}
+
+.file-copy {
+  min-width: 0;
+}
+
+.file-copy strong,
+.file-copy span {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-copy strong {
+  font-size: 12px;
+}
+
+.file-copy span {
+  color: var(--ink-faint);
+  font-size: 10px;
+}
+
+.icon-button {
+  display: grid;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  place-items: center;
+  color: var(--ink-soft);
+  background: transparent;
+  border: 0;
+  border-radius: 50%;
+}
+
+.icon-button:hover {
+  color: var(--red);
+  background: var(--red-soft);
+}
+
+.icon-button svg {
+  width: 18px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+}
+
+audio {
+  display: block;
+  width: 100%;
+  height: 38px;
+  color-scheme: light;
+}
+
+.field-error {
+  margin: 8px 0 0;
+  color: var(--red-deep);
+  font-size: 11px;
+  font-weight: 650;
+}
+
+.field-group {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+.field-group legend {
+  padding: 0;
+  margin-bottom: 11px;
+}
+
+.course-selector {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  padding: 4px;
+  background: var(--paper-deep);
+  border-radius: 13px;
+}
+
+.course-selector label {
+  position: relative;
+}
+
+.course-selector input {
+  position: absolute;
+  opacity: 0;
+}
+
+.course-selector span {
+  display: flex;
+  min-height: 55px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--ink-soft);
+  border: 1px solid transparent;
+  border-radius: 10px;
+  font-size: 12px;
+  transition: color .18s, background .18s, box-shadow .18s;
+}
+
+.course-selector small {
+  margin-bottom: 1px;
+  color: var(--ink-faint);
+  font-family: "Noto Serif TC", "Songti TC", serif;
+  font-size: 9px;
+  font-weight: 650;
+}
+
+.course-selector input:checked + span {
+  color: var(--red-deep);
+  background: var(--surface-solid);
+  border-color: rgba(217, 71, 62, .14);
+  box-shadow: 0 4px 14px rgba(52, 42, 31, .07);
+}
+
+.course-selector input:focus-visible + span {
+  outline: 3px solid rgba(39, 111, 145, .35);
+  outline-offset: 2px;
+}
+
+.two-column-fields,
+.parameter-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+  margin-top: 24px;
+}
+
+.value-output {
+  color: var(--red-deep);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  font-weight: 750;
+}
+
+.range {
+  --range-progress: 88.89%;
+  width: 100%;
+  height: 18px;
+  padding: 0;
+  margin: 3px 0;
+  appearance: none;
+  background: transparent;
+}
+
+.range::-webkit-slider-runnable-track {
+  height: 3px;
+  background: linear-gradient(90deg, var(--red) var(--range-progress), var(--line) var(--range-progress));
+  border-radius: 99px;
+}
+
+.range::-moz-range-track {
+  height: 3px;
+  background: linear-gradient(90deg, var(--red) var(--range-progress), var(--line) var(--range-progress));
+  border-radius: 99px;
+}
+
+.range::-webkit-slider-thumb {
+  width: 17px;
+  height: 17px;
+  margin-top: -7px;
+  appearance: none;
+  background: var(--surface-solid);
+  border: 4px solid var(--red);
+  border-radius: 50%;
+  box-shadow: 0 1px 5px rgba(31, 32, 35, .2);
+}
+
+.range::-moz-range-thumb {
+  width: 10px;
+  height: 10px;
+  background: var(--surface-solid);
+  border: 4px solid var(--red);
+  border-radius: 50%;
+  box-shadow: 0 1px 5px rgba(31, 32, 35, .2);
+}
+
+.range:disabled {
+  opacity: .4;
+}
+
+.range:disabled::-webkit-slider-thumb {
+  border-color: var(--ink-faint);
+}
+
+.range-labels {
+  display: flex;
+  justify-content: space-between;
+  color: var(--ink-faint);
+  font-size: 9px;
+}
+
+.input-with-unit {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  background: var(--paper);
+  border: 1px solid var(--line);
+  border-radius: 10px;
+}
+
+.input-with-unit:focus-within {
+  border-color: var(--blue);
+  box-shadow: 0 0 0 3px rgba(39, 111, 145, .12);
+}
+
+.input-with-unit input {
+  width: 100%;
+  min-width: 0;
+  padding: 10px 4px 10px 12px;
+  color: var(--ink);
+  background: transparent;
+  border: 0;
+  outline: 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+}
+
+.input-with-unit span {
+  flex: none;
+  padding: 0 11px;
+  color: var(--ink-faint);
+  font-size: 9px;
+}
+
+.toggle-list {
+  display: grid;
+  gap: 8px;
+}
+
+.toggle-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas: "copy switch";
+  gap: 16px;
+  align-items: center;
+  padding: 12px 13px;
+  background: rgba(246, 243, 236, .65);
+  border: 1px solid transparent;
+  border-radius: 12px;
+  transition: border-color .2s, background .2s;
+}
+
+.toggle-card:hover {
+  background: var(--paper);
+  border-color: var(--line);
+}
+
+.toggle-card > span:first-child {
+  grid-area: copy;
+}
+
+.toggle-card strong,
+.toggle-card small {
+  display: block;
+}
+
+.toggle-card strong {
+  font-size: 12px;
+}
+
+.toggle-card small {
+  margin-top: 2px;
+  color: var(--ink-faint);
+  font-size: 9.5px;
+  font-weight: 500;
+}
+
+.toggle-card input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.switch {
+  position: relative;
+  grid-area: switch;
+  width: 37px;
+  height: 21px;
+  background: var(--line-strong);
+  border-radius: 99px;
+  transition: background .2s;
+}
+
+.switch::after {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 15px;
+  height: 15px;
+  background: white;
+  border-radius: 50%;
+  box-shadow: 0 1px 4px rgba(31, 32, 35, .2);
+  content: "";
+  transition: transform .22s var(--ease);
+}
+
+.toggle-card input:checked + .switch {
+  background: var(--red);
+}
+
+.toggle-card input:checked + .switch::after {
+  transform: translateX(16px);
+}
+
+.toggle-card input:focus-visible + .switch {
+  outline: 3px solid rgba(39, 111, 145, .35);
+  outline-offset: 3px;
+}
+
+.advanced {
+  padding-bottom: 20px;
+}
+
+.advanced summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  list-style: none;
+}
+
+.advanced summary::-webkit-details-marker {
+  display: none;
+}
+
+.advanced summary strong,
+.advanced summary small {
+  display: block;
+}
+
+.advanced summary strong {
+  font-size: 13px;
+}
+
+.advanced summary small {
+  margin-top: 2px;
+  color: var(--ink-faint);
+  font-size: 10px;
+}
+
+.advanced summary svg {
+  width: 20px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.5;
+  transition: transform .22s;
+}
+
+.advanced[open] summary svg {
+  transform: rotate(180deg);
+}
+
+.advanced-body {
+  padding-top: 16px;
+}
+
+.advanced-body > .toggle-card {
+  margin-top: 8px;
+}
+
+.toggle-card.compact {
+  padding: 11px 12px;
+}
+
+.parameter-grid {
+  margin-top: 20px;
+  transition: opacity .2s;
+}
+
+.parameter-grid[aria-disabled="true"] {
+  opacity: .48;
+}
+
+.drum-volume-field {
+  padding-top: 21px;
+  margin-top: 22px;
+  border-top: 1px solid var(--line);
+}
+
+.field-note {
+  margin: 6px 0 0;
+}
+
+.primary-button,
+.secondary-button {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  border-radius: 13px;
+  font-weight: 750;
+  transition: background .2s, color .2s, transform .2s var(--ease), box-shadow .2s;
+}
+
+.primary-button {
+  min-height: 64px;
+  color: white;
+  background: var(--red);
+  border: 1px solid var(--red);
+  box-shadow: 0 10px 22px rgba(172, 46, 44, .2);
+}
+
+.primary-button:hover:not(:disabled) {
+  background: var(--red-deep);
+  border-color: var(--red-deep);
+  box-shadow: 0 12px 26px rgba(172, 46, 44, .28);
+  transform: translateY(-2px);
+}
+
+.primary-button:disabled {
+  cursor: not-allowed;
+  opacity: .6;
+}
+
+.primary-button svg {
+  width: 20px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.8;
+}
+
+.primary-button.is-running svg {
+  animation: button-arrow 1s ease-in-out infinite;
+}
+
+.submit-note {
+  margin: 9px 0 0;
+  color: var(--ink-faint);
+  font-size: 9.5px;
+  text-align: center;
+}
+
+.process-panel {
+  overflow: hidden;
+}
+
+.stage-canvas {
+  position: relative;
+  overflow: hidden;
+  aspect-ratio: 1.55 / 1;
+  color: var(--red);
+  background:
+    radial-gradient(circle at 32% 38%, rgba(217, 71, 62, .18), transparent 45%),
+    radial-gradient(circle at 72% 64%, rgba(39, 111, 145, .12), transparent 48%),
+    linear-gradient(145deg, #f7eee7, #f1eee9 55%, #e9eee9);
+  border: 1px solid rgba(201, 194, 183, .72);
+  border-radius: 22px;
+}
+
+.stage-canvas::after {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
+  content: "";
+  pointer-events: none;
+  transform: translateX(-120%);
+}
+
+.stage-canvas.is-running::after {
+  animation: canvas-sheen 4s ease-in-out infinite;
+}
+
+.stage-visual {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  visibility: hidden;
+  opacity: 0;
+  transform: scale(.98);
+  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s;
+}
+
+.stage-visual.is-active {
+  visibility: visible;
+  opacity: 1;
+  transform: scale(1);
+  transition-delay: 0s;
+}
+
+.stage-visual svg {
+  width: 100%;
+  height: 100%;
+}
+
+.process-copy {
+  padding: 18px 2px 0;
+}
+
+.process-title-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 18px;
+}
+
+.process-eyebrow {
+  display: none;
+}
+
+.process-title-row h3 {
+  margin: 0;
+  font-size: clamp(22px, 2.2vw, 30px);
+  line-height: 1.1;
+  letter-spacing: -.035em;
+}
+
+.progress-number {
+  color: var(--red);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 28px;
+  font-variant-numeric: tabular-nums;
+}
+
+.process-copy > p {
+  min-height: 2.8em;
+  margin: 9px 0 22px;
+  color: var(--ink-soft);
+  font-size: 12px;
+}
+
+.progress-track {
+  width: 100%;
+  height: 4px;
+  overflow: hidden;
+  background: var(--line);
+  border-radius: 99px;
+}
+
+.progress-track span {
+  display: block;
+  width: 0;
+  height: 100%;
+  background: linear-gradient(90deg, var(--red), #ed7b53);
+  border-radius: inherit;
+  transition: width .5s var(--ease);
+}
+
+.queue-row {
+  display: flex;
+  min-height: 28px;
+  align-items: end;
+  justify-content: space-between;
+  gap: 12px;
+  padding-top: 9px;
+  color: var(--ink-faint);
+  font-size: 9.5px;
+}
+
+.text-button {
+  padding: 2px 0;
+  color: var(--ink-soft);
+  background: transparent;
+  border: 0;
+  font-size: 10px;
+  font-weight: 700;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.text-button:hover {
+  color: var(--red);
+}
+
+.process-error {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 3px 14px;
+  padding: 14px 16px;
+  margin-top: 20px;
+  color: var(--red-deep);
+  background: var(--red-soft);
+  border-radius: 12px;
+  font-size: 11px;
+}
+
+.process-error strong,
+.process-error span {
+  grid-column: 1;
+}
+
+.process-error .text-button {
+  grid-row: 1 / 3;
+  grid-column: 2;
+  align-self: center;
+  color: var(--red-deep);
+}
+
+/* Loading */
+.loading-orbit,
+.loading-dot,
+.loading-core,
+.metronome,
+.beat-pulses circle,
+.plan-cursor,
+.note,
+.export-sheet,
+.mix-wave,
+.mix-drum,
+.mix-spark,
+.complete-rings,
+.complete-check,
+.confetti {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+.is-active .orbit-a { animation: orbit-spin 9s linear infinite; }
+.is-active .orbit-b { animation: orbit-spin-reverse 6s linear infinite; }
+.is-active .loading-core { animation: core-breathe 1.7s ease-in-out infinite; }
+.is-active .dot-a { animation: dot-breathe 1.2s ease-in-out infinite; }
+.is-active .dot-b { animation: dot-breathe 1.2s .3s ease-in-out infinite; }
+
+/* Audio */
+.audio-line {
+  stroke-dasharray: 720;
+  stroke-dashoffset: 720;
+}
+.is-active .audio-line { animation: draw-line 2.4s var(--ease) infinite; }
+.audio-playhead { transform: translateX(24px); }
+.is-active .audio-playhead { animation: audio-scan 2.4s var(--ease) infinite; }
+
+/* Beat */
+.metronome { transform-origin: 0 100%; }
+.is-active .metronome { animation: metronome 1s ease-in-out infinite alternate; }
+.is-active .beat-pulses circle { animation: beat-pulse 2s ease-out infinite; }
+.is-active .beat-pulses circle:nth-child(2) { animation-delay: .4s; }
+.is-active .beat-pulses circle:nth-child(3) { animation-delay: .8s; }
+.is-active .beat-pulses circle:nth-child(4) { animation-delay: 1.2s; }
+.is-active .beat-pulses circle:nth-child(5) { animation-delay: 1.6s; }
+
+/* Plan */
+.plan-bars rect { fill: currentColor; opacity: .13; }
+.plan-bars .plan-climax { fill: var(--red); opacity: .42; }
+.is-active .plan-bars rect { animation: plan-rise 1.9s var(--ease) infinite alternate; transform-box: fill-box; transform-origin: center bottom; }
+.is-active .plan-bars rect:nth-child(2) { animation-delay: .12s; }
+.is-active .plan-bars rect:nth-child(3) { animation-delay: .24s; }
+.is-active .plan-bars rect:nth-child(4) { animation-delay: .36s; }
+.is-active .plan-bars rect:nth-child(5) { animation-delay: .48s; }
+.is-active .plan-bars rect:nth-child(6) { animation-delay: .6s; }
+.is-active .plan-bars rect:nth-child(7) { animation-delay: .72s; }
+.is-active .plan-bars rect:nth-child(8) { animation-delay: .84s; }
+.plan-path { stroke-dasharray: 520; stroke-dashoffset: 520; }
+.is-active .plan-path { animation: plan-draw 2.2s var(--ease) infinite; }
+.is-active .plan-cursor { animation: plan-cursor 2.2s var(--ease) infinite; }
+
+/* Generate */
+.note { fill: var(--red); transform: translate(560px, 140px); }
+.note .ka,
+.export-dots .ka { fill: var(--blue); }
+.is-active .note { animation: note-travel 3.2s linear infinite; }
+.is-active .note-2 { animation-delay: -.65s; }
+.is-active .note-3 { animation-delay: -1.3s; }
+.is-active .note-4 { animation-delay: -1.95s; }
+.is-active .note-5 { animation-delay: -2.6s; }
+.is-active .generate-gate { animation: gate-pulse 1.05s ease-out infinite; transform-box: fill-box; transform-origin: center; }
+
+/* Export */
+.export-lines { opacity: .28; stroke-dasharray: 120; stroke-dashoffset: 120; }
+.is-active .export-sheet { animation: sheet-float 2.4s ease-in-out infinite; }
+.is-active .export-lines { animation: export-write 2.2s var(--ease) infinite; }
+.is-active .export-arrow { animation: export-arrow 1.4s ease-in-out infinite; }
+
+/* Mix */
+.mix-wave { stroke-dasharray: 35 12; }
+.wave-top { opacity: .65; }
+.wave-bottom { color: var(--blue); opacity: .65; }
+.is-active .wave-top { animation: wave-flow 2s linear infinite; }
+.is-active .wave-bottom { animation: wave-flow-reverse 2.4s linear infinite; }
+.is-active .mix-drum { animation: drum-hit 1.2s var(--ease) infinite; }
+.is-active .mix-spark { animation: spark-pulse 1.2s var(--ease) infinite; }
+
+/* Complete */
+.complete-rings { transform: scale(.65); opacity: 0; }
+.complete-check { stroke-dasharray: 82; stroke-dashoffset: 82; }
+.confetti { opacity: 0; }
+.is-active .complete-rings { animation: complete-pop .7s var(--ease) forwards; }
+.is-active .complete-check { animation: check-draw .45s .35s var(--ease) forwards; }
+.is-active .confetti { animation: confetti-pop .8s .25s var(--ease) forwards; }
+
+.result-panel {
+  animation: result-enter .55s var(--ease) both;
+}
+
+.audition-card {
+  padding: 18px;
+  color: var(--ink);
+  background: linear-gradient(135deg, var(--red-soft), #f7e8d9);
+  border: 1px solid rgba(217, 71, 62, .18);
+  border-radius: var(--radius-md);
+}
+
+.audition-heading {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  margin-bottom: 13px;
+}
+
+.audition-icon {
+  display: grid;
+  width: 38px;
+  height: 38px;
+  place-items: center;
+  color: var(--red);
+  background: rgba(255, 253, 248, .7);
+  border-radius: 50%;
+}
+
+.audition-icon svg {
+  width: 27px;
+}
+
+.audition-icon circle {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.6;
+}
+
+.audition-icon path {
+  fill: currentColor;
+}
+
+.audition-heading strong,
+.audition-heading small {
+  display: block;
+}
+
+.audition-heading strong {
+  font-size: 13px;
+}
+
+.audition-heading small {
+  color: var(--ink-soft);
+  font-size: 9.5px;
+}
+
+.metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+  margin: 14px 0 28px;
+}
+
+.metric {
+  min-width: 0;
+  padding: 13px 12px;
+  background: var(--paper);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+}
+
+.metric dt,
+.metric dd {
+  overflow: hidden;
+  margin: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metric dt {
+  color: var(--ink-faint);
+  font-size: 8.5px;
+  font-weight: 750;
+  letter-spacing: .07em;
+  text-transform: uppercase;
+}
+
+.metric dd {
+  margin-top: 4px;
+  color: var(--ink);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 14px;
+  font-weight: 760;
+}
+
+.preview-tabs {
+  display: flex;
+  gap: 20px;
+  border-bottom: 1px solid var(--line);
+}
+
+.preview-tab {
+  position: relative;
+  padding: 10px 1px 11px;
+  color: var(--ink-faint);
+  background: transparent;
+  border: 0;
+  font-size: 11px;
+  font-weight: 750;
+}
+
+.preview-tab::after {
+  position: absolute;
+  right: 0;
+  bottom: -1px;
+  left: 0;
+  height: 2px;
+  background: var(--red);
+  content: "";
+  transform: scaleX(0);
+  transition: transform .2s var(--ease);
+}
+
+.preview-tab.is-active {
+  color: var(--ink);
+}
+
+.preview-tab.is-active::after {
+  transform: scaleX(1);
+}
+
+.preview-frame {
+  display: grid;
+  min-height: 260px;
+  max-height: 470px;
+  overflow: auto;
+  place-items: center;
+  margin-top: 14px;
+  background: var(--paper);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+}
+
+.preview-frame > div {
+  width: 100%;
+}
+
+.preview-frame img {
+  width: 100%;
+  height: auto;
+}
+
+.preview-empty {
+  padding: 70px 20px;
+  margin: 0;
+  color: var(--ink-faint);
+  font-size: 11px;
+  text-align: center;
+}
+
+.download-group {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  margin-top: 22px;
+}
+
+.download-button {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 24px;
+  gap: 10px;
+  align-items: center;
+  padding: 14px 15px;
+  color: var(--ink);
+  background: var(--paper);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  text-decoration: none;
+  transition: border-color .2s, background .2s, transform .2s var(--ease);
+}
+
+.download-button:hover {
+  background: var(--surface-solid);
+  border-color: var(--line-strong);
+  transform: translateY(-2px);
+}
+
+.download-button strong,
+.download-button small {
+  display: block;
+}
+
+.download-button strong {
+  font-size: 11px;
+}
+
+.download-button small {
+  margin-top: 2px;
+  color: var(--ink-faint);
+  font-size: 8.5px;
+}
+
+.download-button svg {
+  width: 21px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.7;
+}
+
+.primary-download {
+  color: white;
+  background: var(--ink);
+  border-color: var(--ink);
+}
+
+.primary-download:hover {
+  color: white;
+  background: #313238;
+  border-color: #313238;
+}
+
+.primary-download small {
+  color: rgba(255, 255, 255, .62);
+}
+
+.secondary-button {
+  min-height: 46px;
+  margin-top: 10px;
+  color: var(--ink-soft);
+  background: transparent;
+  border: 1px solid var(--line);
+  font-size: 11px;
+}
+
+.secondary-button:hover {
+  color: var(--red);
+  background: var(--red-soft);
+  border-color: rgba(217, 71, 62, .22);
+}
+
+footer {
+  width: min(1420px, calc(100% - 48px));
+  min-height: 100px;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 30px;
+  align-items: center;
+  margin: 0 auto;
+  color: var(--ink-faint);
+  border-top: 1px solid var(--line-strong);
+  font-size: 10px;
+}
+
+footer > span {
+  color: var(--ink);
+  font-size: 13px;
+  font-weight: 760;
+}
+
+footer p {
+  margin: 0;
+}
+
+footer a {
+  justify-self: end;
+  color: var(--ink-soft);
+  text-decoration: none;
+}
+
+footer a:hover {
+  color: var(--red);
+}
+
+@keyframes connection-pulse {
+  50% { opacity: .45; }
+}
+
+@keyframes button-arrow {
+  50% { transform: translateX(4px); }
+}
+
+@keyframes canvas-sheen {
+  0%, 45% { transform: translateX(-120%); }
+  75%, 100% { transform: translateX(120%); }
+}
+
+@keyframes orbit-spin { to { transform: rotate(360deg); } }
+@keyframes orbit-spin-reverse { to { transform: rotate(-360deg); } }
+@keyframes core-breathe { 50% { opacity: .55; transform: scale(.72); } }
+@keyframes dot-breathe { 50% { opacity: .3; transform: scale(.6); } }
+
+@keyframes draw-line {
+  0% { stroke-dashoffset: 720; }
+  55%, 100% { stroke-dashoffset: 0; }
+}
+
+@keyframes audio-scan {
+  0% { transform: translateX(24px); opacity: 0; }
+  10% { opacity: 1; }
+  80% { transform: translateX(472px); opacity: 1; }
+  100% { transform: translateX(472px); opacity: 0; }
+}
+
+@keyframes metronome {
+  from { transform: rotate(-28deg); }
+  to { transform: rotate(28deg); }
+}
+
+@keyframes beat-pulse {
+  0%, 18% { opacity: 1; transform: scale(1.6); }
+  48%, 100% { opacity: .16; transform: scale(.75); }
+}
+
+@keyframes plan-rise {
+  0% { opacity: .12; transform: scaleY(.45); }
+  100% { opacity: .35; transform: scaleY(1); }
+}
+
+@keyframes plan-draw {
+  0% { stroke-dashoffset: 520; }
+  75%, 100% { stroke-dashoffset: 0; }
+}
+
+@keyframes plan-cursor {
+  0% { transform: translate(0, 0); opacity: 0; }
+  8% { opacity: 1; }
+  12% { transform: translate(0, 0); }
+  23% { transform: translate(54px, -23px); }
+  34% { transform: translate(108px, -13px); }
+  45% { transform: translate(162px, -62px); }
+  56% { transform: translate(216px, -40px); }
+  67% { transform: translate(270px, -83px); }
+  78% { transform: translate(324px, -114px); }
+  89%, 100% { transform: translate(378px, -49px); opacity: 1; }
+}
+
+@keyframes note-travel {
+  from { transform: translate(560px, 140px); }
+  to { transform: translate(25px, 140px); }
+}
+
+@keyframes gate-pulse {
+  0% { opacity: 1; transform: scale(.92); }
+  70%, 100% { opacity: .25; transform: scale(1.12); }
+}
+
+@keyframes sheet-float {
+  50% { transform: translateY(-7px) rotate(-1deg); }
+}
+
+@keyframes export-write {
+  0% { stroke-dashoffset: 120; }
+  45%, 100% { stroke-dashoffset: 0; }
+}
+
+@keyframes export-arrow {
+  50% { transform: translateY(8px); }
+}
+
+@keyframes wave-flow { to { stroke-dashoffset: -94; } }
+@keyframes wave-flow-reverse { to { stroke-dashoffset: 94; } }
+@keyframes drum-hit {
+  0%, 100% { transform: scale(1); }
+  12% { transform: scale(.88); }
+  28% { transform: scale(1.08); }
+}
+@keyframes spark-pulse {
+  0%, 100% { opacity: 0; transform: scale(.6); }
+  20% { opacity: .8; transform: scale(1.2); }
+}
+
+@keyframes complete-pop {
+  to { opacity: 1; transform: scale(1); }
+}
+@keyframes check-draw { to { stroke-dashoffset: 0; } }
+@keyframes confetti-pop {
+  0% { opacity: 0; transform: scale(.5) rotate(-8deg); }
+  55%, 100% { opacity: .75; transform: scale(1) rotate(0); }
+}
+@keyframes result-enter {
+  from { opacity: 0; transform: translateY(15px); }
+}
+
+@media (max-width: 1040px) {
+  .hero {
+    padding-top: 68px;
+  }
+
+  .hero-features {
+    display: flex;
+  }
+
+  .hero-features li {
+    padding-right: 0;
+  }
+
+  .studio-grid {
+    grid-template-columns: minmax(360px, .8fr) minmax(430px, 1.2fr);
+  }
+
+  .metrics-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 820px) {
+  .site-header,
+  main,
+  footer {
+    width: min(100% - 30px, 680px);
+  }
+
+  .site-header {
+    height: 72px;
+  }
+
+  .hero {
+    padding: 58px 0 60px;
+  }
+
+  .hero-features {
+    display: flex;
+  }
+
+  .studio-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .setup-panel {
+    position: static;
+  }
+
+  .output-column {
+    grid-row: 2;
+  }
+
+  footer {
+    grid-template-columns: 1fr auto;
+  }
+
+  footer p {
+    display: none;
+  }
+}
+
+@media (max-width: 520px) {
+  .site-header,
+  main,
+  footer {
+    width: calc(100% - 22px);
+  }
+
+  .brand-edition {
+    display: none;
+  }
+
+  .hero {
+    padding: 42px 3px 38px;
+  }
+
+  .hero h1 {
+    font-size: clamp(50px, 15vw, 68px);
+    line-height: .92;
+  }
+
+  .hero-lede {
+    margin-top: 20px;
+    font-size: 15px;
+  }
+
+  .hero-features {
+    display: none;
+  }
+
+  .panel {
+    border-radius: 20px;
+  }
+
+  .setup-panel,
+  .process-panel,
+  .result-panel {
+    padding: 22px 18px;
+  }
+
+  .panel-heading {
+    margin-bottom: 25px;
+  }
+
+  .course-selector span {
+    min-height: 52px;
+    font-size: 11px;
+  }
+
+  .two-column-fields,
+  .parameter-grid,
+  .download-group {
+    grid-template-columns: 1fr;
+  }
+
+  .two-column-fields {
+    gap: 18px;
+  }
+
+  .toggle-card {
+    padding: 11px 9px;
+  }
+
+  .stage-canvas {
+    aspect-ratio: 4 / 3;
+  }
+
+  .metrics-grid {
+    gap: 6px;
+  }
+
+  .metric {
+    padding: 11px 9px;
+  }
+
+  .preview-frame {
+    min-height: 190px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    animation-duration: .001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: .001ms !important;
+  }
+
+  .complete-rings,
+  .complete-check,
+  .confetti {
+    opacity: 1;
+    transform: none;
+    stroke-dashoffset: 0;
+  }
+}

static/app.js

@@ -0,0 +1,680 @@
+import { Client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client@2.3.1/+esm";
+
+const ENDPOINT = "/generate_chart";
+
+const $ = (selector, root = document) => root.querySelector(selector);
+const $$ = (selector, root = document) => [...root.querySelectorAll(selector)];
+
+const ui = {
+  form: $("#generate-form"),
+  fileInput: $("#file-input"),
+  dropzone: $("#dropzone"),
+  sourceCard: $("#source-card"),
+  sourceAudio: $("#source-audio"),
+  fileName: $("#file-name"),
+  fileMeta: $("#file-meta"),
+  removeFile: $("#remove-file"),
+  fileError: $("#file-error"),
+  level: $("#level"),
+  levelOutput: $("#level-output"),
+  bpm: $("#bpm"),
+  autoPlan: $("#auto-plan"),
+  useBeat: $("#use-beat"),
+  usePlanner: $("#use-planner"),
+  sampling: $("#sampling"),
+  samplingParameters: $("#sampling-parameters"),
+  temperature: $("#temperature"),
+  temperatureOutput: $("#temperature-output"),
+  topP: $("#top-p"),
+  topPOutput: $("#top-p-output"),
+  drumVolume: $("#drum-volume"),
+  drumVolumeOutput: $("#drum-volume-output"),
+  generateButton: $("#generate-button"),
+  connection: $("#connection"),
+  connectionLabel: $("#connection-label"),
+  processPanel: $("#process-panel"),
+  stageCanvas: $("#stage-canvas"),
+  statusChip: $("#status-chip"),
+  stageEyebrow: $("#stage-eyebrow"),
+  stageTitle: $("#stage-title"),
+  stageDetail: $("#stage-detail"),
+  progressNumber: $("#progress-number"),
+  progressTrack: $("#progress-track"),
+  progressBar: $("#progress-bar"),
+  queueLabel: $("#queue-label"),
+  cancelButton: $("#cancel-button"),
+  processError: $("#process-error"),
+  processErrorMessage: $("#process-error-message"),
+  retryButton: $("#retry-button"),
+  resultPanel: $("#result-panel"),
+  auditionCard: $("#audition-card"),
+  resultAudio: $("#result-audio"),
+  metricsGrid: $("#metrics-grid"),
+  previewBlock: $(".preview-block"),
+  chartTab: $("#chart-tab"),
+  planTab: $("#plan-tab"),
+  chartPreview: $("#chart-preview"),
+  planPreview: $("#plan-preview"),
+  chartImage: $("#chart-image"),
+  planImage: $("#plan-image"),
+  chartEmpty: $("#chart-empty"),
+  planEmpty: $("#plan-empty"),
+  downloadTja: $("#download-tja"),
+  downloadAudio: $("#download-audio"),
+  newChartButton: $("#new-chart-button"),
+  announcer: $("#announcer")
+};
+
+const stageDefaults = {
+  loading: {
+    eyebrow: "PREPARING",
+    title: "Preparing",
+    detail: "Loading SoftChart."
+  },
+  audio: {
+    eyebrow: "LISTENING",
+    title: "Listening",
+    detail: "Mapping rhythm, melody, and timbre."
+  },
+  beat: {
+    eyebrow: "ALIGNING",
+    title: "Finding the beat",
+    detail: "Finding beats and tempo."
+  },
+  plan: {
+    eyebrow: "PLANNING",
+    title: "Shaping the arc",
+    detail: "Planning density and climaxes."
+  },
+  generate: {
+    eyebrow: "COMPOSING",
+    title: "Writing the chart",
+    detail: "Writing playable Taiko patterns."
+  },
+  export: {
+    eyebrow: "RENDERING",
+    title: "Rendering",
+    detail: "Building the TJA and previews."
+  },
+  mix: {
+    eyebrow: "MIXING",
+    title: "Mixing",
+    detail: "Mixing Taiko with your track."
+  },
+  complete: {
+    eyebrow: "COMPLETE",
+    title: "Ready",
+    detail: "Play it or download it."
+  }
+};
+
+const metricLabels = {
+  bpm: "BPM",
+  notes: "Notes",
+  spans: "Drumroll sections",
+  timing: "Timing mode",
+  grid_rms_ms: "Grid error",
+  preview_hits: "Audition hits"
+};
+
+let client = null;
+let connectPromise = null;
+let currentFile = null;
+let sourceObjectUrl = "";
+let currentJob = null;
+let currentRun = 0;
+let running = false;
+let receivedTerminalPayload = false;
+
+function announce(message) {
+  ui.announcer.textContent = "";
+  window.setTimeout(() => {
+    ui.announcer.textContent = message;
+  }, 40);
+}
+
+function setConnection(state, label) {
+  ui.connection.classList.toggle("is-ready", state === "ready");
+  ui.connection.classList.toggle("is-error", state === "error");
+  ui.connectionLabel.textContent = label;
+}
+
+async function connect() {
+  if (client) return client;
+  if (connectPromise) return connectPromise;
+
+  setConnection("connecting", "Connecting");
+  connectPromise = Client.connect(new URL(".", window.location.href).href, {
+    events: ["status", "data"]
+  }).then((connectedClient) => {
+    client = connectedClient;
+    setConnection("ready", "Service ready");
+    return client;
+  }).catch((error) => {
+    connectPromise = null;
+    setConnection("error", "Connection lost");
+    throw error;
+  });
+
+  return connectPromise;
+}
+
+function formatBytes(bytes) {
+  if (!Number.isFinite(bytes) || bytes < 0) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  const units = ["KB", "MB", "GB"];
+  let value = bytes / 1024;
+  let unit = units[0];
+  for (let index = 1; index < units.length && value >= 1024; index += 1) {
+    value /= 1024;
+    unit = units[index];
+  }
+  const precision = value >= 100 ? 0 : value >= 10 ? 1 : 2;
+  return `${value.toFixed(precision)} ${unit}`;
+}
+
+function formatDuration(seconds) {
+  if (!Number.isFinite(seconds) || seconds <= 0) return "";
+  const rounded = Math.round(seconds);
+  const minutes = Math.floor(rounded / 60);
+  const remainder = String(rounded % 60).padStart(2, "0");
+  return `${minutes}:${remainder}`;
+}
+
+function isSupportedAudio(file) {
+  return /\.(mp3|wav|flac|ogg)$/i.test(file.name);
+}
+
+function clearFileError() {
+  ui.fileError.hidden = true;
+  ui.fileError.textContent = "";
+}
+
+function showFileError(message) {
+  ui.fileError.textContent = message;
+  ui.fileError.hidden = false;
+  announce(message);
+}
+
+function clearFile() {
+  if (sourceObjectUrl) URL.revokeObjectURL(sourceObjectUrl);
+  sourceObjectUrl = "";
+  currentFile = null;
+  ui.fileInput.value = "";
+  ui.sourceAudio.removeAttribute("src");
+  ui.sourceAudio.load();
+  ui.sourceCard.hidden = true;
+  ui.dropzone.hidden = false;
+  clearFileError();
+}
+
+function selectFile(file) {
+  clearFileError();
+  if (!file) return;
+  if (!isSupportedAudio(file)) {
+    showFileError("Choose an MP3, WAV, FLAC, or OGG audio file.");
+    return;
+  }
+
+  if (sourceObjectUrl) URL.revokeObjectURL(sourceObjectUrl);
+  currentFile = file;
+  sourceObjectUrl = URL.createObjectURL(file);
+  ui.fileName.textContent = file.name;
+  ui.fileMeta.textContent = formatBytes(file.size);
+  ui.sourceAudio.src = sourceObjectUrl;
+  ui.dropzone.hidden = true;
+  ui.sourceCard.hidden = false;
+  ui.sourceAudio.addEventListener("loadedmetadata", () => {
+    const size = formatBytes(file.size);
+    const duration = formatDuration(ui.sourceAudio.duration);
+    ui.fileMeta.textContent = [size, duration].filter(Boolean).join(" · ");
+  }, { once: true });
+  announce(`Selected ${file.name}`);
+}
+
+function setRangeState(input, output, formatter) {
+  const min = Number(input.min);
+  const max = Number(input.max);
+  const value = Number(input.value);
+  const progress = ((value - min) / (max - min)) * 100;
+  input.style.setProperty("--range-progress", `${progress}%`);
+  output.textContent = formatter(value);
+}
+
+function updateRanges() {
+  setRangeState(ui.level, ui.levelOutput, (value) => `★ ${value.toFixed(0)}`);
+  setRangeState(ui.temperature, ui.temperatureOutput, (value) => value.toFixed(2));
+  setRangeState(ui.topP, ui.topPOutput, (value) => value.toFixed(2));
+  setRangeState(ui.drumVolume, ui.drumVolumeOutput, (value) => `${Math.round(value * 100)}%`);
+}
+
+function setSamplingEnabled(enabled) {
+  ui.temperature.disabled = !enabled;
+  ui.topP.disabled = !enabled;
+  ui.samplingParameters.setAttribute("aria-disabled", String(!enabled));
+}
+
+function normalizeStage(stage) {
+  const value = String(stage || "").trim().toLowerCase();
+  if (Object.hasOwn(stageDefaults, value)) return value;
+  throw new Error(`Unsupported generation stage: ${value}`);
+}
+
+function setStage(stage, data = {}) {
+  const normalized = normalizeStage(stage);
+  $$(".stage-visual", ui.stageCanvas).forEach((visual) => {
+    visual.classList.toggle("is-active", visual.dataset.stage === normalized);
+  });
+
+  const defaults = stageDefaults[normalized];
+  ui.stageEyebrow.textContent = defaults.eyebrow;
+  ui.stageTitle.textContent = typeof data.title === "string" && data.title.trim()
+    ? data.title.trim()
+    : defaults.title;
+  ui.stageDetail.textContent = typeof data.detail === "string" && data.detail.trim()
+    ? data.detail.trim()
+    : defaults.detail;
+}
+
+function progressPercent(progress) {
+  const numeric = Number(progress);
+  if (!Number.isFinite(numeric)) return 0;
+  const percent = numeric <= 1 ? numeric * 100 : numeric;
+  return Math.min(100, Math.max(0, percent));
+}
+
+function setProgress(progress) {
+  const percent = progressPercent(progress);
+  const rounded = Math.round(percent);
+  ui.progressBar.style.width = `${percent}%`;
+  ui.progressNumber.textContent = `${rounded}%`;
+  ui.progressTrack.setAttribute("aria-valuenow", String(rounded));
+}
+
+function setStatusChip(state, text) {
+  ui.statusChip.className = `status-chip is-${state}`;
+  ui.statusChip.textContent = text;
+}
+
+function setBusy(isBusy) {
+  running = isBusy;
+  ui.generateButton.disabled = isBusy;
+  ui.removeFile.disabled = isBusy;
+  ui.generateButton.classList.toggle("is-running", isBusy);
+  ui.stageCanvas.classList.toggle("is-running", isBusy);
+  ui.processPanel.setAttribute("aria-busy", String(isBusy));
+  $("span", ui.generateButton).textContent = isBusy ? "Generating chart" : "Generate chart";
+  ui.cancelButton.hidden = !isBusy;
+}
+
+function resetProcess() {
+  setBusy(false);
+  setStage("loading", {
+    title: "Waiting for your music",
+    detail: "Upload a song, choose a difficulty, and start creating your chart."
+  });
+  ui.stageEyebrow.textContent = "STANDBY";
+  setProgress(0);
+  setStatusChip("idle", "Ready");
+  ui.queueLabel.textContent = "Not started";
+  ui.processError.hidden = true;
+  ui.processErrorMessage.textContent = "";
+}
+
+function showProcessError(message) {
+  const friendlyMessage = typeof message === "string" && message.trim()
+    ? message.trim()
+    : "An unexpected error occurred. Please try again shortly.";
+  setBusy(false);
+  setStatusChip("error", "Error");
+  ui.processErrorMessage.textContent = friendlyMessage;
+  ui.processError.hidden = false;
+  ui.queueLabel.textContent = "Generation incomplete";
+  announce(`Generation incomplete: ${friendlyMessage}`);
+}
+
+function handleQueueStatus(message) {
+  const status = String(message.stage || "").toLowerCase();
+  if (status === "pending") {
+    const position = Number(message.position);
+    const queueSize = Number(message.size);
+    const eta = Number(message.eta);
+    const parts = [];
+    if (Number.isFinite(position)) parts.push(`${Math.max(0, position)} job${position === 1 ? "" : "s"} ahead`);
+    if (Number.isFinite(queueSize)) parts.push(`${queueSize} job${queueSize === 1 ? "" : "s"} in queue`);
+    if (Number.isFinite(eta) && eta > 0) parts.push(`about ${Math.ceil(eta)} sec`);
+    ui.queueLabel.textContent = parts.length ? parts.join(" · ") : "Added to the generation queue";
+    setStatusChip("active", "Queued");
+    return;
+  }
+
+  if (status === "generating") {
+    ui.queueLabel.textContent = "The GPU is processing your song";
+    setStatusChip("active", "Generating");
+    return;
+  }
+
+  if (status === "error") {
+    showProcessError(message.message || "The server could not complete this generation.");
+  }
+}
+
+function fileDescriptor(value) {
+  if (!value) return { url: "", name: "" };
+  if (typeof value !== "object") return { url: "", name: "" };
+  return {
+    url: typeof value.url === "string" ? value.url : "",
+    name: typeof value.orig_name === "string" ? value.orig_name : ""
+  };
+}
+
+function resolvedFile(value) {
+  const descriptor = fileDescriptor(value);
+  if (!descriptor.url) return descriptor;
+  try {
+    const url = new URL(descriptor.url, window.location.href);
+    if (!["http:", "https:", "blob:"].includes(url.protocol)) return { url: "", name: "" };
+    return { url: url.href, name: descriptor.name };
+  } catch {
+    return { url: "", name: "" };
+  }
+}
+
+function setImage(image, emptyState, fileValue) {
+  const file = resolvedFile(fileValue);
+  if (file.url) {
+    image.src = file.url;
+    image.hidden = false;
+    emptyState.hidden = true;
+    return true;
+  }
+  image.removeAttribute("src");
+  image.hidden = true;
+  emptyState.hidden = false;
+  return false;
+}
+
+function setDownload(anchor, fileValue, defaultName) {
+  const file = resolvedFile(fileValue);
+  if (!file.url) {
+    anchor.hidden = true;
+    anchor.removeAttribute("href");
+    return false;
+  }
+  anchor.href = file.url;
+  anchor.download = file.name || defaultName;
+  anchor.hidden = false;
+  return true;
+}
+
+function metricValue(key, value) {
+  if (value === null || value === undefined || value === "") return "—";
+  if (key === "timing") {
+    if (value === "slot-exact") return "Grid-exact";
+    if (value === "time-quantized") return "Time-quantized";
+  }
+  if (key === "grid_rms_ms" && Number.isFinite(Number(value))) return `${Number(value).toFixed(1)} ms`;
+  if (key === "bpm" && Number.isFinite(Number(value))) return Number(value).toFixed(1);
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (typeof value === "number") return Number.isInteger(value) ? String(value) : value.toFixed(2);
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value).replaceAll("_", " ");
+}
+
+function renderMetrics(metrics) {
+  ui.metricsGrid.replaceChildren();
+  if (!metrics || typeof metrics !== "object" || Array.isArray(metrics)) {
+    ui.metricsGrid.hidden = true;
+    return;
+  }
+
+  const entries = Object.entries(metricLabels).map(([key, label]) => [
+    key,
+    label,
+    metrics[key]
+  ]);
+  ui.metricsGrid.hidden = entries.length === 0;
+  entries.forEach(([key, label, value]) => {
+    const wrapper = document.createElement("div");
+    const term = document.createElement("dt");
+    const description = document.createElement("dd");
+    wrapper.className = "metric";
+    term.textContent = label;
+    description.textContent = metricValue(key, value);
+    description.title = description.textContent;
+    wrapper.append(term, description);
+    ui.metricsGrid.append(wrapper);
+  });
+}
+
+function activatePreview(name, focus = false) {
+  const chartActive = name === "chart";
+  ui.chartTab.classList.toggle("is-active", chartActive);
+  ui.planTab.classList.toggle("is-active", !chartActive);
+  ui.chartTab.setAttribute("aria-selected", String(chartActive));
+  ui.planTab.setAttribute("aria-selected", String(!chartActive));
+  ui.chartTab.tabIndex = chartActive ? 0 : -1;
+  ui.planTab.tabIndex = chartActive ? -1 : 0;
+  ui.chartPreview.hidden = !chartActive;
+  ui.planPreview.hidden = chartActive;
+  if (focus) (chartActive ? ui.chartTab : ui.planTab).focus();
+}
+
+function renderResult(payload) {
+  const files = payload.files && typeof payload.files === "object" ? payload.files : {};
+  const audio = resolvedFile(files.audio);
+  if (audio.url) {
+    ui.resultAudio.src = audio.url;
+    ui.auditionCard.hidden = false;
+  } else {
+    ui.resultAudio.removeAttribute("src");
+    ui.resultAudio.load();
+    ui.auditionCard.hidden = true;
+  }
+
+  renderMetrics(payload.metrics);
+  const hasChart = setImage(ui.chartImage, ui.chartEmpty, files.chart_image);
+  const hasPlan = setImage(ui.planImage, ui.planEmpty, files.plan_image);
+  ui.previewBlock.hidden = !hasChart && !hasPlan;
+  ui.chartTab.hidden = !hasChart;
+  ui.planTab.hidden = !hasPlan;
+  activatePreview(hasChart ? "chart" : "plan");
+
+  setDownload(ui.downloadTja, files.tja, "softchart.tja");
+  setDownload(ui.downloadAudio, files.audio, "softchart-taiko-preview.wav");
+  ui.resultPanel.hidden = false;
+}
+
+function handlePayload(payload) {
+  if (!payload || typeof payload !== "object") return;
+  const kind = String(payload.kind || "progress").toLowerCase();
+
+  // Gradio may replay the generator's final yield before its terminal status.
+  if (kind === "complete" && receivedTerminalPayload) return;
+
+  if (kind === "error") {
+    receivedTerminalPayload = true;
+    showProcessError(payload.detail || payload.title || "The server could not complete this generation.");
+    return;
+  }
+
+  setStage(payload.stage, payload);
+  setProgress(payload.progress);
+  ui.processError.hidden = true;
+
+  if (kind === "complete") {
+    receivedTerminalPayload = true;
+    setStage("complete", payload);
+    setProgress(100);
+    setBusy(false);
+    setStatusChip("complete", "Complete");
+    ui.queueLabel.textContent = "All outputs are ready";
+    renderResult(payload);
+    announce("The chart, audition audio, and previews are ready");
+  }
+}
+
+function requestValues() {
+  const selectedCourse = $('input[name="course"]:checked', ui.form);
+  const bpm = ui.bpm.value.trim() === "" ? 0 : Number(ui.bpm.value);
+  return [
+    handle_file(currentFile),
+    currentFile.name,
+    selectedCourse ? selectedCourse.value : "oni",
+    Number.parseInt(ui.level.value, 10),
+    Number.isFinite(bpm) ? bpm : 0,
+    ui.autoPlan.checked,
+    ui.useBeat.checked,
+    ui.usePlanner.checked,
+    ui.sampling.checked,
+    Number(ui.temperature.value),
+    Number(ui.topP.value),
+    Number(ui.drumVolume.value)
+  ];
+}
+
+async function generate(event) {
+  event.preventDefault();
+  if (running) return;
+  clearFileError();
+  if (!currentFile) {
+    showFileError("Choose a song before generating a chart.");
+    ui.dropzone.focus();
+    return;
+  }
+
+  const bpm = ui.bpm.value.trim() === "" ? 0 : Number(ui.bpm.value);
+  if (!Number.isFinite(bpm) || (bpm !== 0 && (bpm < 30 || bpm > 400))) {
+    showFileError("Manual BPM must be between 30 and 400, or left blank for automatic detection.");
+    ui.bpm.focus();
+    return;
+  }
+
+  const runId = ++currentRun;
+  receivedTerminalPayload = false;
+  ui.resultPanel.hidden = true;
+  ui.processError.hidden = true;
+  setBusy(true);
+  setStage("loading");
+  setProgress(1);
+  setStatusChip("active", "Preparing");
+  ui.queueLabel.textContent = "Connecting to the generation service";
+  ui.processPanel.scrollIntoView({ behavior: "smooth", block: "start" });
+  announce("Chart generation submitted");
+
+  try {
+    const app = await connect();
+    if (runId !== currentRun) return;
+    currentJob = app.submit(ENDPOINT, requestValues());
+
+    for await (const message of currentJob) {
+      if (runId !== currentRun) break;
+      if (message.type === "status") {
+        handleQueueStatus(message);
+      } else if (message.type === "data") {
+        const payload = Array.isArray(message.data) ? message.data[0] : message.data;
+        handlePayload(payload);
+      }
+    }
+
+    if (runId === currentRun && running && !receivedTerminalPayload) {
+      showProcessError("The generation connection ended before a complete result arrived. Please try again.");
+    }
+  } catch (error) {
+    if (runId !== currentRun) return;
+    const message = error instanceof Error ? error.message : String(error);
+    showProcessError(message || "Could not connect to the SoftChart service.");
+    setConnection("error", "Connection lost");
+  } finally {
+    if (runId === currentRun) currentJob = null;
+  }
+}
+
+async function cancelGeneration() {
+  if (!running) return;
+  const job = currentJob;
+  currentRun += 1;
+  currentJob = null;
+  if (job && typeof job.cancel === "function") {
+    try {
+      await job.cancel();
+    } catch {
+      // The local job is still detached below even if it already started remotely.
+    }
+  }
+  setBusy(false);
+  setStatusChip("idle", "Cancelled");
+  setStage("loading", {
+    title: "Generation cancelled",
+    detail: "Adjust the settings whenever you are ready to try again."
+  });
+  ui.stageEyebrow.textContent = "CANCELLED";
+  ui.queueLabel.textContent = "Stopped receiving generation results";
+  announce("Generation cancelled");
+}
+
+function bindEvents() {
+  ui.form.addEventListener("submit", generate);
+  ui.fileInput.addEventListener("change", () => selectFile(ui.fileInput.files[0]));
+  ui.dropzone.addEventListener("click", () => ui.fileInput.click());
+  ui.dropzone.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      ui.fileInput.click();
+    }
+  });
+
+  ["dragenter", "dragover"].forEach((name) => {
+    ui.dropzone.addEventListener(name, (event) => {
+      event.preventDefault();
+      if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
+      ui.dropzone.classList.add("is-dragging");
+    });
+  });
+  ["dragleave", "dragend"].forEach((name) => {
+    ui.dropzone.addEventListener(name, () => ui.dropzone.classList.remove("is-dragging"));
+  });
+  ui.dropzone.addEventListener("drop", (event) => {
+    event.preventDefault();
+    ui.dropzone.classList.remove("is-dragging");
+    selectFile(event.dataTransfer?.files?.[0]);
+  });
+
+  ui.removeFile.addEventListener("click", clearFile);
+  [ui.level, ui.temperature, ui.topP, ui.drumVolume].forEach((range) => {
+    range.addEventListener("input", updateRanges);
+  });
+  ui.sampling.addEventListener("change", () => setSamplingEnabled(ui.sampling.checked));
+  ui.cancelButton.addEventListener("click", cancelGeneration);
+  ui.retryButton.addEventListener("click", () => ui.form.requestSubmit());
+  ui.newChartButton.addEventListener("click", () => {
+    ui.resultPanel.hidden = true;
+    clearFile();
+    resetProcess();
+    ui.form.scrollIntoView({ behavior: "smooth", block: "start" });
+  });
+
+  ui.chartTab.addEventListener("click", () => activatePreview("chart"));
+  ui.planTab.addEventListener("click", () => activatePreview("plan"));
+  $$(".preview-tab").forEach((tab) => {
+    tab.addEventListener("keydown", (event) => {
+      if (!["ArrowLeft", "ArrowRight"].includes(event.key)) return;
+      event.preventDefault();
+      const next = tab === ui.chartTab ? "plan" : "chart";
+      const target = next === "chart" ? ui.chartTab : ui.planTab;
+      if (!target.hidden) activatePreview(next, true);
+    });
+  });
+
+  window.addEventListener("beforeunload", () => {
+    if (sourceObjectUrl) URL.revokeObjectURL(sourceObjectUrl);
+  });
+}
+
+bindEvents();
+updateRanges();
+setSamplingEnabled(ui.sampling.checked);
+resetProcess();
+connect().catch(() => {
+  ui.queueLabel.textContent = "We will reconnect when you start generation";
+});

static/index.html

@@ -0,0 +1,361 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="SoftChart turns music into playable, musical Taiko charts with an instant drum-mix audition.">
+  <meta name="theme-color" content="#f6f3ec">
+  <title>SoftChart — AI Taiko Chart Studio</title>
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='25' fill='%23e14b3f'/%3E%3Ccircle cx='32' cy='32' r='18' fill='%23fff8ed'/%3E%3Ccircle cx='32' cy='32' r='9' fill='%23e14b3f'/%3E%3C/svg%3E">
+  <link rel="stylesheet" href="./static/app.css">
+  <script type="module" src="./static/app.js"></script>
+</head>
+<body>
+  <a class="skip-link" href="#main-content">Skip to main content</a>
+
+  <header class="site-header">
+    <a class="brand" href="./" aria-label="SoftChart home">
+      <svg class="brand-mark" viewBox="0 0 48 48" aria-hidden="true">
+        <circle cx="24" cy="24" r="20" fill="currentColor" opacity=".12"/>
+        <circle cx="24" cy="24" r="14.5" fill="none" stroke="currentColor" stroke-width="2.5"/>
+        <circle cx="24" cy="24" r="5.5" fill="currentColor"/>
+        <path d="M8.5 24h5M34.5 24h5" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
+      </svg>
+      <span>SoftChart</span>
+      <span class="brand-edition">STUDIO</span>
+    </a>
+    <div class="connection" id="connection" role="status" aria-live="polite">
+      <span class="connection-dot" aria-hidden="true"></span>
+      <span id="connection-label">Connecting</span>
+    </div>
+  </header>
+
+  <main id="main-content">
+    <section class="hero" aria-labelledby="hero-title">
+      <div class="hero-copy">
+        <h1 id="hero-title">Music in.<br><em>Taiko out.</em></h1>
+        <p class="hero-lede">Upload a track. Get a playable TJA. Hear it instantly.</p>
+      </div>
+      <ul class="hero-features" aria-label="Key features">
+        <li><strong>Beat-locked</strong></li>
+        <li><strong>Structure-aware</strong></li>
+        <li><strong>Instant audition</strong></li>
+      </ul>
+    </section>
+
+    <section class="studio-grid" aria-label="Taiko chart generation studio">
+      <form class="panel setup-panel" id="generate-form">
+        <div class="panel-heading">
+          <h2>Create</h2>
+        </div>
+
+        <div class="form-section">
+          <div class="label-row">
+            <label id="upload-label" for="file-input">Music</label>
+            <span class="field-hint">MP3, WAV, FLAC, OGG</span>
+          </div>
+          <input id="file-input" type="file" accept=".mp3,.wav,.flac,.ogg" tabindex="-1" aria-hidden="true">
+          <div class="dropzone" id="dropzone" role="button" tabindex="0" aria-labelledby="upload-label upload-help">
+            <svg class="upload-icon" viewBox="0 0 56 56" aria-hidden="true">
+              <circle cx="28" cy="28" r="27" fill="currentColor" opacity=".08"/>
+              <path d="M28 36V18m0 0-7 7m7-7 7 7M17 38.5h22" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            <span class="drop-title">Drop audio</span>
+            <span class="drop-subtitle" id="upload-help">or browse</span>
+          </div>
+
+          <div class="source-card" id="source-card" hidden>
+            <div class="source-info">
+              <span class="file-badge" aria-hidden="true">♪</span>
+              <span class="file-copy">
+                <strong id="file-name"></strong>
+                <span id="file-meta"></span>
+              </span>
+              <button type="button" class="icon-button" id="remove-file" aria-label="Remove music">
+                <svg viewBox="0 0 20 20" aria-hidden="true"><path d="m6 6 8 8m0-8-8 8"/></svg>
+              </button>
+            </div>
+            <audio id="source-audio" controls preload="metadata">Your browser does not support audio playback.</audio>
+          </div>
+          <p class="field-error" id="file-error" role="alert" hidden></p>
+        </div>
+
+        <div class="form-section split-rule">
+          <fieldset class="field-group">
+            <legend>Difficulty</legend>
+            <div class="course-selector">
+              <label><input type="radio" name="course" value="easy"><span><small>E</small>Easy</span></label>
+              <label><input type="radio" name="course" value="normal"><span><small>N</small>Normal</span></label>
+              <label><input type="radio" name="course" value="hard"><span><small>H</small>Hard</span></label>
+              <label><input type="radio" name="course" value="oni" checked><span><small>O</small>Oni</span></label>
+            </div>
+          </fieldset>
+
+          <div class="two-column-fields">
+            <div class="field-group">
+              <div class="label-row">
+                <label for="level">Star level</label>
+                <output class="value-output" id="level-output" for="level">★ 9</output>
+              </div>
+              <input class="range" id="level" type="range" min="1" max="10" value="9" step="1">
+            </div>
+            <div class="field-group">
+              <div class="label-row">
+                <label for="bpm">BPM</label>
+              </div>
+              <div class="input-with-unit">
+                <input id="bpm" type="number" min="0" max="400" step="0.1" inputmode="decimal" placeholder="AUTO">
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <details class="advanced split-rule" id="advanced-settings">
+          <summary>
+            <span><strong>Advanced</strong></span>
+            <svg viewBox="0 0 20 20" aria-hidden="true"><path d="m6 8 4 4 4-4"/></svg>
+          </summary>
+          <div class="advanced-body">
+            <div class="toggle-list">
+              <label class="toggle-card compact">
+                <span><strong>Structure</strong></span>
+                <input id="auto-plan" type="checkbox" checked>
+                <span class="switch" aria-hidden="true"></span>
+              </label>
+              <label class="toggle-card compact">
+                <span><strong>Beat grid</strong></span>
+                <input id="use-beat" type="checkbox" checked>
+                <span class="switch" aria-hidden="true"></span>
+              </label>
+              <label class="toggle-card compact">
+                <span><strong>AI planner</strong></span>
+                <input id="use-planner" type="checkbox" checked>
+                <span class="switch" aria-hidden="true"></span>
+              </label>
+            </div>
+            <label class="toggle-card compact">
+              <span><strong>Creative sampling</strong></span>
+              <input id="sampling" type="checkbox">
+              <span class="switch" aria-hidden="true"></span>
+            </label>
+            <div class="parameter-grid" id="sampling-parameters" aria-disabled="true">
+              <div class="field-group">
+                <div class="label-row">
+                  <label for="temperature">Variation</label>
+                  <output class="value-output" id="temperature-output" for="temperature">0.80</output>
+                </div>
+                <input class="range" id="temperature" type="range" min="0.2" max="1.2" value="0.8" step="0.05" disabled>
+              </div>
+              <div class="field-group">
+                <div class="label-row">
+                  <label for="top-p">Candidate range</label>
+                  <output class="value-output" id="top-p-output" for="top-p">0.90</output>
+                </div>
+                <input class="range" id="top-p" type="range" min="0.5" max="1" value="0.9" step="0.01" disabled>
+              </div>
+            </div>
+            <div class="field-group drum-volume-field">
+              <div class="label-row">
+                <label for="drum-volume">Taiko preview volume</label>
+                <output class="value-output" id="drum-volume-output" for="drum-volume">80%</output>
+              </div>
+              <input class="range" id="drum-volume" type="range" min="0" max="1.5" value="0.8" step="0.05">
+            </div>
+          </div>
+        </details>
+
+        <button class="primary-button" id="generate-button" type="submit">
+          <span>Generate chart</span>
+          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14m-5-5 5 5-5 5"/></svg>
+        </button>
+      </form>
+
+      <div class="output-column">
+        <section class="panel process-panel" id="process-panel" aria-labelledby="process-title">
+          <div class="panel-heading">
+            <h2 id="process-title">Progress</h2>
+            <span class="status-chip is-idle" id="status-chip">Ready</span>
+          </div>
+
+          <div class="stage-canvas" id="stage-canvas">
+            <div class="stage-visual is-active" data-stage="loading" aria-hidden="true">
+              <svg viewBox="0 0 520 280">
+                <g class="loading-grid" stroke="currentColor" opacity=".07"><path d="M0 56h520M0 112h520M0 168h520M0 224h520M104 0v280M208 0v280M312 0v280M416 0v280"/></g>
+                <g transform="translate(260 140)">
+                  <circle class="loading-orbit orbit-a" r="68" fill="none" stroke="currentColor" stroke-width="1.5" stroke-dasharray="10 12" opacity=".25"/>
+                  <circle class="loading-orbit orbit-b" r="48" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="3 9" opacity=".4"/>
+                  <circle r="27" fill="currentColor" opacity=".1"/>
+                  <circle class="loading-core" r="12" fill="currentColor"/>
+                  <circle class="loading-dot dot-a" cx="0" cy="-68" r="5" fill="currentColor"/>
+                  <circle class="loading-dot dot-b" cx="48" cy="0" r="4" fill="currentColor"/>
+                </g>
+              </svg>
+            </div>
+
+            <div class="stage-visual" data-stage="audio" aria-hidden="true">
+              <svg viewBox="0 0 520 280">
+                <path class="audio-line-back" d="M24 140C54 140 61 112 84 112s28 68 51 68 31-115 55-115 30 150 53 150 33-104 57-104 30 59 55 59 29-76 52-76 29 46 49 46h40" fill="none" stroke="currentColor" stroke-width="2" opacity=".14"/>
+                <path class="audio-line" d="M24 140C54 140 61 112 84 112s28 68 51 68 31-115 55-115 30 150 53 150 33-104 57-104 30 59 55 59 29-76 52-76 29 46 49 46h40" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
+                <g class="audio-playhead"><path d="M0 48v184" stroke="currentColor" stroke-width="1.5" opacity=".45"/><circle cy="140" r="7" fill="currentColor"/></g>
+                <g fill="currentColor" opacity=".22"><circle cx="84" cy="112" r="4"/><circle cx="190" cy="65" r="4"/><circle cx="300" cy="111" r="4"/><circle cx="407" cy="94" r="4"/></g>
+              </svg>
+            </div>
+
+            <div class="stage-visual" data-stage="beat" aria-hidden="true">
+              <svg viewBox="0 0 520 280">
+                <path d="M72 205h376" stroke="currentColor" stroke-width="2" opacity=".14"/>
+                <g class="beat-ticks" stroke="currentColor" opacity=".26"><path d="M100 192v26M180 192v26M260 185v40M340 192v26M420 192v26"/></g>
+                <path class="beat-arc" d="M182 199a78 78 0 0 1 156 0" fill="none" stroke="currentColor" stroke-width="3" opacity=".18"/>
+                <g class="metronome" transform="translate(260 199)">
+                  <path d="M0 0 54-118" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>
+                  <circle cx="54" cy="-118" r="10" fill="currentColor"/>
+                </g>
+                <g class="beat-pulses" fill="currentColor"><circle cx="100" cy="205" r="7"/><circle cx="180" cy="205" r="7"/><circle cx="260" cy="205" r="10"/><circle cx="340" cy="205" r="7"/><circle cx="420" cy="205" r="7"/></g>
+              </svg>
+            </div>
+
+            <div class="stage-visual" data-stage="plan" aria-hidden="true">
+              <svg viewBox="0 0 520 280">
+                <g class="plan-bars">
+                  <rect x="42" y="166" width="45" height="60" rx="5"/>
+                  <rect x="96" y="143" width="45" height="83" rx="5"/>
+                  <rect x="150" y="153" width="45" height="73" rx="5"/>
+                  <rect x="204" y="105" width="45" height="121" rx="5"/>
+                  <rect x="258" y="127" width="45" height="99" rx="5"/>
+                  <rect x="312" y="83" width="45" height="143" rx="5"/>
+                  <rect x="366" y="53" width="45" height="173" rx="5" class="plan-climax"/>
+                  <rect x="420" y="118" width="45" height="108" rx="5"/>
+                </g>
+                <path class="plan-path" d="M64 158 118 135l54 10 54-49 54 22 54-43 54-31 54 65" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+                <circle class="plan-cursor" cx="64" cy="158" r="7" fill="currentColor"/>
+              </svg>
+            </div>
+
+            <div class="stage-visual" data-stage="generate" aria-hidden="true">
+              <svg viewBox="0 0 520 280">
+                <path d="M20 94h480M20 186h480" stroke="currentColor" stroke-width="2" opacity=".13"/>
+                <path d="M20 140h480" stroke="currentColor" stroke-width="1.5" stroke-dasharray="5 10" opacity=".13"/>
+                <g class="note-stream">
+                  <g class="note note-1"><circle r="20"/><circle r="11" fill="#fff8ed" opacity=".2"/></g>
+                  <g class="note note-2"><circle r="20" class="ka"/><circle r="11" fill="#fff8ed" opacity=".2"/></g>
+                  <g class="note note-3"><circle r="27"/><circle r="15" fill="#fff8ed" opacity=".2"/></g>
+                  <g class="note note-4"><circle r="20" class="ka"/><circle r="11" fill="#fff8ed" opacity=".2"/></g>
+                  <g class="note note-5"><circle r="20"/><circle r="11" fill="#fff8ed" opacity=".2"/></g>
+                </g>
+                <g class="generate-gate" transform="translate(93 140)"><circle r="42" fill="none" stroke="currentColor" stroke-width="2" opacity=".22"/><circle r="31" fill="none" stroke="currentColor" stroke-width="2" opacity=".38"/><path d="M0-49v98" stroke="currentColor" stroke-width="3"/></g>
+              </svg>
+            </div>
+
+            <div class="stage-visual" data-stage="export" aria-hidden="true">
+              <svg viewBox="0 0 520 280">
+                <g class="export-sheet" transform="translate(175 34)">
+                  <path d="M8 0h126l42 42v189H8z" fill="currentColor" opacity=".08"/>
+                  <path d="M134 0v42h42" fill="none" stroke="currentColor" stroke-width="2" opacity=".35"/>
+                  <g class="export-lines" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M38 77h108M38 104h78M38 131h108M38 158h91"/></g>
+                  <g class="export-dots" fill="currentColor"><circle cx="48" cy="194" r="8"/><circle cx="76" cy="194" r="8" class="ka"/><circle cx="104" cy="194" r="8"/><circle cx="132" cy="194" r="8" class="ka"/></g>
+                </g>
+                <path class="export-arrow" d="M366 91v105m0 0-20-20m20 20 20-20" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </div>
+
+            <div class="stage-visual" data-stage="mix" aria-hidden="true">
+              <svg viewBox="0 0 520 280">
+                <g class="mix-wave wave-top" fill="none" stroke="currentColor" stroke-width="3"><path d="M35 93c26 0 26-32 52-32s26 64 52 64 26-64 52-64 26 64 52 64 26-64 52-64 26 64 52 64 26-64 52-64 26 32 52 32h46"/></g>
+                <g class="mix-wave wave-bottom" fill="none" stroke="currentColor" stroke-width="3"><path d="M35 187c34 0 34-22 68-22s34 44 68 44 34-44 68-44 34 44 68 44 34-44 68-44 34 22 68 22h72"/></g>
+                <g class="mix-drum" transform="translate(260 140)"><circle r="48" fill="#fff8ed" stroke="currentColor" stroke-width="4"/><circle r="35" fill="currentColor" opacity=".12"/><circle r="13" fill="currentColor"/></g>
+                <g class="mix-spark" fill="currentColor"><circle cx="201" cy="119" r="5"/><circle cx="319" cy="161" r="5"/><circle cx="312" cy="100" r="3"/><circle cx="211" cy="177" r="3"/></g>
+              </svg>
+            </div>
+
+            <div class="stage-visual" data-stage="complete" aria-hidden="true">
+              <svg viewBox="0 0 520 280">
+                <g class="complete-rings" transform="translate(260 140)"><circle r="81" fill="none" stroke="currentColor" stroke-width="2" opacity=".12"/><circle r="64" fill="currentColor" opacity=".1"/><circle r="47" fill="currentColor"/></g>
+                <path class="complete-check" d="m235 140 17 17 35-38" fill="none" stroke="#fff8ed" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
+                <g class="confetti" fill="currentColor"><rect x="165" y="65" width="7" height="18" rx="3" transform="rotate(-35 168 74)"/><rect x="350" y="70" width="7" height="18" rx="3" transform="rotate(28 353 79)"/><circle cx="177" cy="201" r="6"/><circle cx="350" cy="207" r="5"/><path d="m387 139 12-7-1 14z"/><path d="m126 132 13-5-3 14z"/></g>
+              </svg>
+            </div>
+          </div>
+
+          <div class="process-copy">
+            <div class="process-title-row">
+              <div>
+                <p class="process-eyebrow" id="stage-eyebrow">STANDBY</p>
+                <h3 id="stage-title">Waiting for your music</h3>
+              </div>
+              <strong class="progress-number" id="progress-number">0%</strong>
+            </div>
+            <p class="sr-only" id="stage-detail">Upload a track to begin.</p>
+            <div class="progress-track" id="progress-track" role="progressbar" aria-label="Chart generation progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
+              <span id="progress-bar"></span>
+            </div>
+            <div class="queue-row">
+              <span id="queue-label">Not started</span>
+              <button class="text-button" type="button" id="cancel-button" hidden>Cancel generation</button>
+            </div>
+          </div>
+          <div class="process-error" id="process-error" role="alert" hidden>
+            <strong>Generation incomplete</strong>
+            <span id="process-error-message"></span>
+            <button class="text-button" type="button" id="retry-button">Try again</button>
+          </div>
+        </section>
+
+        <section class="panel result-panel" id="result-panel" aria-labelledby="result-title" hidden>
+          <div class="panel-heading">
+            <h2 id="result-title">Ready</h2>
+          </div>
+
+          <div class="audition-card" id="audition-card">
+            <div class="audition-heading">
+              <span class="audition-icon" aria-hidden="true">
+                <svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="12"/><path d="m13 10 9 6-9 6z"/></svg>
+              </span>
+              <span><strong>Taiko audition</strong></span>
+            </div>
+            <audio id="result-audio" controls preload="metadata">Your browser does not support audio playback.</audio>
+          </div>
+
+          <dl class="metrics-grid" id="metrics-grid" aria-label="Generation summary"></dl>
+
+          <div class="preview-block">
+            <div class="preview-tabs" role="tablist" aria-label="Preview type">
+              <button id="chart-tab" class="preview-tab is-active" type="button" role="tab" aria-selected="true" aria-controls="chart-preview">Chart preview</button>
+              <button id="plan-tab" class="preview-tab" type="button" role="tab" aria-selected="false" aria-controls="plan-preview" tabindex="-1">Song structure</button>
+            </div>
+            <div class="preview-frame">
+              <div id="chart-preview" role="tabpanel" aria-labelledby="chart-tab">
+                <img id="chart-image" alt="Preview of the generated Taiko chart">
+                <p class="preview-empty" id="chart-empty" hidden>No chart preview is available.</p>
+              </div>
+              <div id="plan-preview" role="tabpanel" aria-labelledby="plan-tab" hidden>
+                <img id="plan-image" alt="Song energy and chart section plan">
+                <p class="preview-empty" id="plan-empty" hidden>No song structure preview is available.</p>
+              </div>
+            </div>
+          </div>
+
+          <div class="download-group">
+            <a class="download-button primary-download" id="download-tja" href="#" download hidden>
+              <span><strong>Download TJA</strong></span>
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4v11m0 0 4-4m-4 4-4-4M5 20h14"/></svg>
+            </a>
+            <a class="download-button" id="download-audio" href="#" download hidden>
+              <span><strong>Download audio</strong></span>
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4v11m0 0 4-4m-4 4-4-4M5 20h14"/></svg>
+            </a>
+          </div>
+
+          <button class="secondary-button" id="new-chart-button" type="button">Create another chart</button>
+        </section>
+      </div>
+    </section>
+  </main>
+
+  <footer>
+    <span>SoftChart</span>
+    <a href="https://github.com/JacobLinCool/SoftChart" target="_blank" rel="noreferrer">GitHub <span aria-hidden="true">↗</span></a>
+  </footer>
+
+  <div class="sr-only" id="announcer" aria-live="assertive" aria-atomic="true"></div>
+</body>
+</html>