add example and new viz

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.ogg filter=lfs diff=lfs merge=lfs -text
+*.json filter=lfs diff=lfs merge=lfs -text

app.py

@@ -1,6 +1,9 @@
 """midmid3: Guitar Hero Chart Generator Demo"""
 
+import json
 import os
+from pathlib import Path
+
 import gradio as gr
 
 # ZeroGPU: import spaces if available (no-op locally)
@@ -13,6 +16,31 @@ except ImportError:
 from pipeline import generate_chart
 from visualizer import build_visualizer_html
 
+EXAMPLES_DIR = Path(__file__).parent / "examples"
+
+
+def _load_example():
+    """Load pre-computed demo - no GPU needed."""
+    chart_path = EXAMPLES_DIR / "hot_mess.json"
+    zip_path = EXAMPLES_DIR / "Hot Mess - Friday Pilots Club.zip"
+    audio_path = EXAMPLES_DIR / "hot_mess_input.ogg"
+
+    with open(chart_path) as f:
+        chart_json = json.load(f)
+
+    viz_html = build_visualizer_html(chart_json)
+    return (
+        str(audio_path),              # audio_input
+        "Hot Mess",                   # title
+        "Friday Pilots Club",         # artist
+        "",                           # album
+        "2022",                       # year
+        "rock",                       # genre
+        viz_html,                     # viz_output
+        str(zip_path),                # zip_output
+    )
+
+
 PLACEHOLDER_HTML = """
 <div style="font-family: system-ui, sans-serif; background: #111; border-radius: 12px;
     padding: 60px 20px; text-align: center; color: #666; max-width: 900px; margin: 0 auto;">
@@ -61,7 +89,7 @@ with gr.Blocks(
     )
 
     with gr.Row():
-        with gr.Column(scale=1):
+        with gr.Column(scale=1, min_width=280):
             audio_input = gr.Audio(
                 label="Upload audio",
                 type="filepath",
@@ -77,10 +105,11 @@ with gr.Blocks(
             genre_input = gr.Textbox(label="Genre", placeholder="rock", value="rock")
 
             generate_btn = gr.Button("Generate Chart", variant="primary", elem_id="generate-btn")
+            example_btn = gr.Button("Load Example", variant="secondary", size="sm")
+            zip_output = gr.File(label="Download song package (.zip)")
 
-        with gr.Column(scale=2):
+        with gr.Column(scale=3):
             viz_output = gr.HTML(value=PLACEHOLDER_HTML, label="Chart Preview")
-            zip_output = gr.File(label="Download song package (.zip)")
 
     generate_btn.click(
         fn=_generate_wrapper,
@@ -88,6 +117,12 @@ with gr.Blocks(
         outputs=[viz_output, zip_output],
     )
 
+    example_btn.click(
+        fn=_load_example,
+        inputs=[],
+        outputs=[audio_input, title_input, artist_input, album_input, year_input, genre_input, viz_output, zip_output],
+    )
+
     gr.Markdown(
         "---\n"
         "*Powered by [midmid3](https://huggingface.co/markury/midmid3-19m-0326) — "
@@ -105,8 +140,5 @@ with gr.Blocks(
 if __name__ == "__main__":
     demo.launch(
         theme=gr.themes.Base(primary_hue="purple", neutral_hue="gray"),
-        css="""
-        .gradio-container { max-width: 960px !important; }
-        #generate-btn { min-height: 48px; font-size: 16px; }
-        """,
+        css="#generate-btn { min-height: 48px; font-size: 16px; }",
     )

examples/Hot Mess - Friday Pilots Club.zip

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0a29a48c187fbb6ebbe9621ff9705f7471bc47eff1c54eb4705fa4e9bc4eea80
+size 2623981

examples/hot_mess.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:13e70f6bea0b482f7e0645f4dae0160024c66b0d2c167099c517256dbec55242
+size 3614477

examples/hot_mess_input.ogg

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2b2d6ff38f42882a56b6db92ec383e96133c9a1078257faa864ba9a38cf8d575
+size 2624840

static/visualizer.js

@@ -0,0 +1,743 @@
+/**
+ * midmid chart visualizer – Guitar Hero-style vertical track
+ *
+ * Standalone module — same rendering logic used in the Gradio Space.
+ * Edit this file, Vite HMR picks it up instantly.
+ *
+ * To export back to the Space: the buildVisualizerHTML() in visualizer.py
+ * inlines this into an iframe. Keep the DOM structure and DATA contract
+ * the same so it stays compatible.
+ *
+ * DATA contract (chart JSON):
+ *   resolution: number (ticks per quarter, usually 192)
+ *   bpm: number
+ *   tempo_events: [{tick, bpm}, ...]
+ *   time_signatures: [{tick, num, den}, ...]
+ *   sections: [{tick, label}, ...]
+ *   beats: [{tick, downbeat}, ...]
+ *   notes: { expert: [{tick, frets: number[], sustain, hopo}, ...], hard: [...], ... }
+ *   audio_b64: string (base64-encoded OGG)
+ *   audio_format: string
+ */
+
+// ─── Colors & constants ──────────────────────────────────────────
+const FRET_COLORS = ['#22c55e', '#ef4444', '#eab308', '#3b82f6', '#f97316'];
+const FRET_GLOW   = ['#4ade80', '#f87171', '#facc15', '#60a5fa', '#fb923c'];
+const LANE_COUNT  = 5;
+
+// ─── Track geometry tunables ─────────────────────────────────────
+const VISIBLE_SEC     = 4.5;   // seconds of future notes visible on track
+const CANVAS_ASPECT   = 0.72;  // height = width * aspect (responsive)
+const CANVAS_MIN_H    = 400;
+const CANVAS_MAX_H    = 700;
+const STRIKE_Y_FRAC   = 0.88;  // strikeline Y (fraction from top)
+const TOP_Y_FRAC      = 0.04;  // top of visible track
+const BOTTOM_W_FRAC   = 0.52;  // track width at strikeline
+const TOP_W_FRAC      = 0.14;  // track width at far end
+const NOTE_LANE_RATIO = 0.42;  // note rx as fraction of lane width (~84% diameter)
+const NOTE_SQUISH     = 0.40;  // constant ellipse squish (width:height ratio)
+
+// ─── State ───────────────────────────────────────────────────────
+let DATA = null, audio = null, canvas, ctx;
+let W, H;
+let currentDiff = 'expert';
+let playing = false;
+let noteCache = [], beatCache = [], sectionCache = [];
+let tempoMap = [], RES = 192, totalDuration = 0;
+
+// Computed on resize
+let strikeY, topY, centerX, bottomW, topW, zFar, sFar, noteRX;
+
+// ─── Timing ──────────────────────────────────────────────────────
+
+function tickToSec(tick) {
+  let sec = 0, prevTick = 0, bpm = tempoMap[0].bpm;
+  for (let i = 1; i < tempoMap.length; i++) {
+    if (tempoMap[i].tick > tick) break;
+    sec += (tempoMap[i].tick - prevTick) / RES * 60 / bpm;
+    prevTick = tempoMap[i].tick;
+    bpm = tempoMap[i].bpm;
+  }
+  return sec + (tick - prevTick) / RES * 60 / bpm;
+}
+
+// ─── Caching ─────────────────────────────────────────────────────
+
+function buildNoteCache(diff) {
+  return (DATA.notes[diff] || []).map(n => ({
+    sec: tickToSec(n.tick),
+    frets: n.frets,
+    sustainSec: n.sustain > 0 ? tickToSec(n.tick + n.sustain) - tickToSec(n.tick) : 0,
+    hopo: n.hopo,
+  }));
+}
+
+function rebuildCaches() {
+  tempoMap = DATA.tempo_events.map(e => ({ tick: e.tick, bpm: e.bpm }));
+  RES = DATA.resolution;
+  noteCache = buildNoteCache(currentDiff);
+
+  // 3-level beat subdivisions (Moonscraper style):
+  //   level 0 = measure line, 1 = beat line, 2 = sub-beat (eighth note)
+  const rawBeats = DATA.beats.map(b => ({ sec: tickToSec(b.tick), downbeat: b.downbeat }));
+  beatCache = [];
+  for (let i = 0; i < rawBeats.length; i++) {
+    beatCache.push({ sec: rawBeats[i].sec, level: rawBeats[i].downbeat ? 0 : 1 });
+    if (i < rawBeats.length - 1) {
+      beatCache.push({ sec: (rawBeats[i].sec + rawBeats[i + 1].sec) / 2, level: 2 });
+    }
+  }
+
+  sectionCache = DATA.sections.map(s => ({ sec: tickToSec(s.tick), label: s.label }));
+}
+
+// ─── Duration & format ───────────────────────────────────────────
+
+function getDuration() {
+  if (totalDuration && isFinite(totalDuration)) return totalDuration;
+  const all = Object.values(DATA.notes).flat().map(n => tickToSec(n.tick + (n.sustain || 0)));
+  return all.length ? Math.max(...all) + 5 : 120;
+}
+
+function fmt(s) {
+  const m = Math.floor(s / 60), sc = Math.floor(s % 60);
+  return m + ':' + (sc < 10 ? '0' : '') + sc;
+}
+
+// ─── Resize ──────────────────────────────────────────────────────
+
+function resize() {
+  const container = document.getElementById('midmid-viz');
+  W = container.clientWidth;
+  H = Math.round(Math.max(CANVAS_MIN_H, Math.min(CANVAS_MAX_H, W * CANVAS_ASPECT)));
+  canvas.width  = W * devicePixelRatio;
+  canvas.height = H * devicePixelRatio;
+  canvas.style.height = H + 'px';
+  ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
+
+  centerX  = W / 2;
+  strikeY  = H * STRIKE_Y_FRAC;
+  topY     = H * TOP_Y_FRAC;
+  bottomW  = W * BOTTOM_W_FRAC;
+  topW     = W * TOP_W_FRAC;
+  // Perspective derived from the taper: the width ratio IS the depth ratio
+  zFar = BOTTOM_W_FRAC / TOP_W_FRAC;   // ≈ 3.71
+  sFar = 1 / zFar;                      // ≈ 0.269
+  // Note size proportional to lane width (Moonscraper: ~1:1 sprite in 1-unit lane)
+  noteRX = (bottomW / LANE_COUNT) * NOTE_LANE_RATIO;
+}
+
+// ─── True perspective projection ─────────────────────────────────
+// One 1/z calculation drives everything: Y position, track width,
+// note size, and lane spacing — so beat-line gaps look correct.
+
+const clamp01 = v => Math.max(0, Math.min(1, v));
+
+/** Project a time-offset into screen space.
+ *  Returns { y, w, s } where s is the perspective scale factor (1 at
+ *  strikeline, sFar at the far end). Width, note size, etc. all scale by s. */
+function project(secAhead) {
+  const t = clamp01(secAhead / VISIBLE_SEC);   // 0 → 1 in world space
+  const z = 1 + t * (zFar - 1);                // linear depth
+  const s = 1 / z;                              // perspective scale
+  const y = strikeY - (1 - s) / (1 - sFar) * (strikeY - topY);
+  const w = bottomW * s;
+  return { y, w, s };
+}
+
+/** Screen position for a lane at a given time offset from strikeline */
+function getPoint(lane, secAhead) {
+  const { y, w, s } = project(Math.max(0, secAhead));
+  const lw = w / LANE_COUNT;
+  const x  = centerX - w / 2 + (lane + 0.5) * lw;
+  return { x, y, scale: s };
+}
+
+// ─── Color helpers ───────────────────────────────────────────────
+
+function hexRgb(hex) {
+  return [parseInt(hex.slice(1, 3), 16), parseInt(hex.slice(3, 5), 16), parseInt(hex.slice(5, 7), 16)];
+}
+function rgba(r, g, b, a) { return `rgba(${r},${g},${b},${a})`; }
+function colorAlpha(hex, a) { const [r, g, b] = hexRgb(hex); return rgba(r, g, b, a); }
+
+// ─── Drawing: track surface ──────────────────────────────────────
+
+function drawTrackSurface() {
+  const bL = centerX - bottomW / 2, bR = centerX + bottomW / 2;
+  const tL = centerX - topW / 2,    tR = centerX + topW / 2;
+
+  const grad = ctx.createLinearGradient(0, topY, 0, strikeY);
+  grad.addColorStop(0, '#0d0d0d');
+  grad.addColorStop(0.6, '#141414');
+  grad.addColorStop(1, '#1a1a1a');
+
+  ctx.beginPath();
+  ctx.moveTo(bL, strikeY);
+  ctx.lineTo(tL, topY);
+  ctx.lineTo(tR, topY);
+  ctx.lineTo(bR, strikeY);
+  ctx.closePath();
+  ctx.fillStyle = grad;
+  ctx.fill();
+
+  // Edge rails
+  ctx.strokeStyle = '#2a2a2a';
+  ctx.lineWidth = 2;
+  ctx.beginPath(); ctx.moveTo(bL, strikeY); ctx.lineTo(tL, topY); ctx.stroke();
+  ctx.beginPath(); ctx.moveTo(bR, strikeY); ctx.lineTo(tR, topY); ctx.stroke();
+}
+
+function drawLaneLines() {
+  for (let i = 1; i < LANE_COUNT; i++) {
+    const frac = i / LANE_COUNT;
+    const bx = centerX - bottomW / 2 + frac * bottomW;
+    const tx = centerX - topW / 2 + frac * topW;
+    ctx.beginPath();
+    ctx.moveTo(bx, strikeY);
+    ctx.lineTo(tx, topY);
+    ctx.strokeStyle = '#1f1f1f';
+    ctx.lineWidth = 1;
+    ctx.stroke();
+  }
+}
+
+function drawBeatLines(t) {
+  // 3-level line styles matching Moonscraper:
+  //   0 = measure (bold), 1 = beat (medium), 2 = sub-beat (faint)
+  const styles = [
+    { color: 'rgba(255,255,255,0.25)', width: 2 },
+    { color: 'rgba(255,255,255,0.10)', width: 1 },
+    { color: 'rgba(255,255,255,0.04)', width: 0.5 },
+  ];
+  for (const beat of beatCache) {
+    const ahead = beat.sec - t;
+    if (ahead < 0 || ahead > VISIBLE_SEC) continue;
+    const { y, w } = project(ahead);
+    const st = styles[beat.level];
+    ctx.beginPath();
+    ctx.moveTo(centerX - w / 2, y);
+    ctx.lineTo(centerX + w / 2, y);
+    ctx.strokeStyle = st.color;
+    ctx.lineWidth = st.width;
+    ctx.stroke();
+  }
+}
+
+function drawSectionMarkers(t) {
+  for (const sec of sectionCache) {
+    const ahead = sec.sec - t;
+    if (ahead < 0 || ahead > VISIBLE_SEC) continue;
+    const { y, w, s } = project(ahead);
+    const right = centerX + w / 2;
+
+    if (s > 0.25) {
+      ctx.fillStyle = colorAlpha('#7c3aed', 0.4 + 0.5 * s);
+      ctx.font = `${Math.max(9, Math.round(11 * s))}px system-ui`;
+      ctx.textAlign = 'left';
+      ctx.fillText(sec.label, right + 8, y + 4);
+    }
+  }
+}
+
+// ─── Drawing: strikeline & fret buttons ──────────────────────────
+
+function drawStrikeline() {
+  const left = centerX - bottomW / 2, right = centerX + bottomW / 2;
+
+  // Glow band
+  const grad = ctx.createLinearGradient(0, strikeY - 14, 0, strikeY + 14);
+  grad.addColorStop(0, 'rgba(255,255,255,0)');
+  grad.addColorStop(0.5, 'rgba(255,255,255,0.08)');
+  grad.addColorStop(1, 'rgba(255,255,255,0)');
+  ctx.fillStyle = grad;
+  ctx.fillRect(left, strikeY - 14, right - left, 28);
+
+  // Line
+  ctx.beginPath();
+  ctx.moveTo(left, strikeY);
+  ctx.lineTo(right, strikeY);
+  ctx.strokeStyle = 'rgba(255,255,255,0.55)';
+  ctx.lineWidth = 2;
+  ctx.stroke();
+}
+
+function drawFretButtons(fretRise) {
+  for (let i = 0; i < LANE_COUNT; i++) {
+    const pt = getPoint(i, 0);
+    const cx = pt.x, cy = strikeY;
+    const rx = noteRX * 1.1;
+    const ry = rx * NOTE_SQUISH;
+    const color = FRET_COLORS[i];
+    const rise = fretRise[i];            // 0 = idle, 1 = fully raised
+    const active = rise > 0.05;
+
+    // Soft pulse glow (scales with rise)
+    if (active) {
+      const gr = rx * 1.6;
+      const pulse = ctx.createRadialGradient(cx, cy, rx * 0.5, cx, cy, gr);
+      pulse.addColorStop(0, colorAlpha(color, 0.25 * rise));
+      pulse.addColorStop(1, colorAlpha(color, 0));
+      ctx.beginPath();
+      ctx.ellipse(cx, cy, gr, gr * NOTE_SQUISH, 0, 0, Math.PI * 2);
+      ctx.fillStyle = pulse;
+      ctx.fill();
+    }
+
+    // Base body
+    ctx.beginPath();
+    ctx.ellipse(cx, cy, rx * 1.08, ry * 1.08, 0, 0, Math.PI * 2);
+    ctx.fillStyle = '#1a1a1a';
+    ctx.fill();
+
+    // Coloured outer ring (brightens with rise)
+    ctx.beginPath();
+    ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
+    ctx.strokeStyle = active ? color : colorAlpha(color, 0.7);
+    ctx.lineWidth = 3 + rise;
+    ctx.stroke();
+
+    // Smooth rise offset (shorter travel = reaches full height quicker visually)
+    const riseH = ry * 0.38 * rise;
+    const rY = cy - riseH;
+
+    // Dark cylinder wall (visible proportional to rise)
+    if (active) {
+      ctx.beginPath();
+      ctx.ellipse(cx, cy, rx * 0.9, ry * 0.9, 0, 0, Math.PI * 2);
+      ctx.fillStyle = '#222';
+      ctx.fill();
+    }
+
+    // Silver ring (rises smoothly) — radial gradient for metallic look
+    ctx.beginPath();
+    ctx.ellipse(cx, rY, rx * 0.9, ry * 0.9, 0, 0, Math.PI * 2);
+    const silver = ctx.createRadialGradient(
+      cx - rx * 0.2, rY - ry * 0.15, rx * 0.05,
+      cx, rY, rx * 0.9
+    );
+    silver.addColorStop(0, '#d8d8d8');
+    silver.addColorStop(0.3, '#b0b0b0');
+    silver.addColorStop(0.7, '#808080');
+    silver.addColorStop(1, '#606060');
+    ctx.fillStyle = silver;
+    ctx.fill();
+
+    // Dark gap inside silver ring
+    ctx.beginPath();
+    ctx.ellipse(cx, rY, rx * 0.75, ry * 0.75, 0, 0, Math.PI * 2);
+    ctx.fillStyle = '#111';
+    ctx.fill();
+
+    // Center: dark when idle, glowing lane colour when raised (fades with rise)
+    const [cr, cg, cb] = hexRgb(color);
+    if (rise > 0.05) {
+      const glow = ctx.createRadialGradient(cx, rY, 0, cx, rY, rx * 0.62);
+      glow.addColorStop(0, rgba(
+        Math.round(10 + (Math.min(255, cr + 80) - 10) * rise),
+        Math.round(10 + (Math.min(255, cg + 80) - 10) * rise),
+        Math.round(10 + (Math.min(255, cb + 80) - 10) * rise), 1));
+      glow.addColorStop(0.7, rgba(
+        Math.round(10 + cr * rise), Math.round(10 + cg * rise), Math.round(10 + cb * rise), 1));
+      glow.addColorStop(1, rgba(
+        Math.round(10 + Math.max(0, cr - 20) * rise),
+        Math.round(10 + Math.max(0, cg - 20) * rise),
+        Math.round(10 + Math.max(0, cb - 20) * rise), 1));
+      ctx.beginPath();
+      ctx.ellipse(cx, rY, rx * 0.65, ry * 0.65, 0, 0, Math.PI * 2);
+      ctx.fillStyle = glow;
+      ctx.fill();
+    } else {
+      ctx.beginPath();
+      ctx.ellipse(cx, rY, rx * 0.65, ry * 0.65, 0, 0, Math.PI * 2);
+      ctx.fillStyle = '#0a0a0a';
+      ctx.fill();
+    }
+  }
+}
+
+// ─── Drawing: note puck (3D layered) ─────────────────────────────
+// Matches the real GH note structure visible in reference screenshots:
+//   black base → dark coloured side → dark ring gap → bright top face → solid white cap
+
+function drawNotePuck(cx, cy, scale, color, isHopo) {
+  const rx = noteRX * scale;
+  const ry = rx * NOTE_SQUISH;
+  if (rx < 3) return;
+
+  const [cr, cg, cb] = hexRgb(color);
+  const pH = ry * 0.6;  // visible side-band height
+
+  // 1 ── Shadow on track
+  ctx.beginPath();
+  ctx.ellipse(cx, cy + pH + ry * 0.12, rx * 1.04, ry * 0.45, 0, 0, Math.PI * 2);
+  ctx.fillStyle = 'rgba(0,0,0,0.4)';
+  ctx.fill();
+
+  // 2 ── Black base rim
+  ctx.beginPath();
+  ctx.ellipse(cx, cy + pH, rx * 1.01, ry, 0, 0, Math.PI * 2);
+  ctx.fillStyle = '#080808';
+  ctx.fill();
+
+  // 3 ── Side band (white/silver rim — the visible puck edge below the colour)
+  ctx.beginPath();
+  ctx.ellipse(cx, cy + pH * 0.45, rx, ry, 0, 0, Math.PI * 2);
+  ctx.fillStyle = '#c8c8c8';
+  ctx.fill();
+
+  // 4 ── Dark separation ring — drawn full-size, then top face covers most
+  //      of it, leaving a visible dark border (the groove between top & side)
+  ctx.beginPath();
+  ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
+  ctx.fillStyle = '#0e0e0e';
+  ctx.fill();
+
+  // 5 ── Top face — inset slightly so the dark ring shows as a hard border
+  ctx.beginPath();
+  ctx.ellipse(cx, cy - ry * 0.04, rx * 0.92, ry * 0.85, 0, 0, Math.PI * 2);
+  const topGrad = ctx.createLinearGradient(cx - rx, cy - ry, cx + rx * 0.3, cy + ry * 0.5);
+  topGrad.addColorStop(0, rgba(Math.min(255, cr + 40), Math.min(255, cg + 40), Math.min(255, cb + 40), 1));
+  topGrad.addColorStop(0.5, rgba(cr, cg, cb, 1));
+  topGrad.addColorStop(1, rgba(Math.max(0, cr - 15), Math.max(0, cg - 15), Math.max(0, cb - 15), 1));
+  ctx.fillStyle = topGrad;
+  ctx.fill();
+
+  // 6 ── White cap — shifted toward top of face (perspective: looking down at puck)
+  //      Dark ring around cap eats into the "forehead", leaving big coloured "chin"
+  const capY = cy - ry * 0.32;
+
+  if (!isHopo) {
+    // Dark ring around cap — large enough to merge with outer dark ring at
+    // the top, so zero colour is visible above the cap (no "forehead")
+    ctx.beginPath();
+    ctx.ellipse(cx, capY, rx * 0.55, ry * 0.58, 0, 0, Math.PI * 2);
+    ctx.fillStyle = '#0e0e0e';
+    ctx.fill();
+
+    // Cap base (grey edge — gives the cap its own visible thickness)
+    ctx.beginPath();
+    ctx.ellipse(cx, capY, rx * 0.46, ry * 0.42, 0, 0, Math.PI * 2);
+    ctx.fillStyle = 'rgba(175,175,175,0.95)';
+    ctx.fill();
+
+    // Cap top (bright white)
+    ctx.beginPath();
+    ctx.ellipse(cx, capY - ry * 0.06, rx * 0.39, ry * 0.33, 0, 0, Math.PI * 2);
+    ctx.fillStyle = 'rgba(238,238,238,0.97)';
+    ctx.fill();
+
+    // Cap highlight
+    ctx.beginPath();
+    ctx.ellipse(cx, capY - ry * 0.12, rx * 0.24, ry * 0.19, 0, 0, Math.PI * 2);
+    ctx.fillStyle = '#fff';
+    ctx.fill();
+  } else {
+    // HOPO: dark open center, same position
+    ctx.beginPath();
+    ctx.ellipse(cx, capY, rx * 0.55, ry * 0.58, 0, 0, Math.PI * 2);
+    ctx.fillStyle = '#0e0e0e';
+    ctx.fill();
+    ctx.beginPath();
+    ctx.ellipse(cx, capY, rx * 0.32, ry * 0.28, 0, 0, Math.PI * 2);
+    ctx.fillStyle = '#080808';
+    ctx.fill();
+  }
+}
+
+// ─── Drawing: sustain tails ──────────────────────────────────────
+
+function drawSustainTail(fret, startSec, endSec, t, color, isPlaying) {
+  const clipStart = Math.max(startSec - t, 0);
+  const clipEnd   = Math.min(endSec - t, VISIBLE_SEC);
+  if (clipStart >= clipEnd) return;
+
+  const steps = Math.max(8, Math.ceil((clipEnd - clipStart) * 8));
+  const [cr, cg, cb] = hexRgb(color);
+
+  // When actively playing, the "consumed" portion glows like a lightsaber
+  const playing = isPlaying && startSec <= t;
+
+  // Cache sampled points along the sustain
+  const pts = [];
+  for (let i = 0; i <= steps; i++) {
+    pts.push(getPoint(fret, clipStart + (clipEnd - clipStart) * (i / steps)));
+  }
+
+  // Outer glow — use shadowBlur for soft falloff instead of a wide hard shape
+  ctx.save();
+  if (playing) {
+    ctx.shadowColor = rgba(cr, cg, cb, 0.8);
+    ctx.shadowBlur = noteRX * 0.5;
+  }
+
+  // Main sustain strip
+  ctx.beginPath();
+  for (let i = 0; i <= steps; i++) {
+    const hw = Math.max(1, noteRX * pts[i].scale * (playing ? 0.16 : 0.12));
+    if (i === 0) ctx.moveTo(pts[i].x - hw, pts[i].y);
+    else ctx.lineTo(pts[i].x - hw, pts[i].y);
+  }
+  for (let i = steps; i >= 0; i--) {
+    ctx.lineTo(pts[i].x + Math.max(1, noteRX * pts[i].scale * (playing ? 0.16 : 0.12)), pts[i].y);
+  }
+  ctx.closePath();
+  ctx.fillStyle = playing ? rgba(Math.min(255,cr+60), Math.min(255,cg+60), Math.min(255,cb+60), 0.9)
+                          : rgba(cr, cg, cb, 0.45);
+  ctx.fill();
+  ctx.shadowBlur = 0;
+  ctx.restore();
+
+  // White-hot center when playing (lightsaber core)
+  if (playing) {
+    ctx.beginPath();
+    for (let i = 0; i <= steps; i++) {
+      const hw = Math.max(0.3, noteRX * pts[i].scale * 0.05);
+      if (i === 0) ctx.moveTo(pts[i].x - hw, pts[i].y);
+      else ctx.lineTo(pts[i].x - hw, pts[i].y);
+    }
+    for (let i = steps; i >= 0; i--) {
+      ctx.lineTo(pts[i].x + Math.max(0.3, noteRX * pts[i].scale * 0.05), pts[i].y);
+    }
+    ctx.closePath();
+    ctx.fillStyle = 'rgba(255,255,255,0.7)';
+    ctx.fill();
+  }
+}
+
+// ─── Fade overlay at vanishing end ───────────────────────────────
+
+function drawFadeOverlay() {
+  const h = (strikeY - topY) * 0.18;
+  const grad = ctx.createLinearGradient(0, topY - 5, 0, topY + h);
+  grad.addColorStop(0, '#0a0a0a');
+  grad.addColorStop(1, 'rgba(10,10,10,0)');
+  ctx.fillStyle = grad;
+  ctx.fillRect(0, 0, W, topY + h);
+}
+
+// ─── Main draw loop ──────────────────────────────────────────────
+
+function draw() {
+  const t   = audio ? audio.currentTime || 0 : 0;
+  const dur = getDuration();
+
+  // Update UI controls
+  const seekFill = document.getElementById('viz-seekfill');
+  const timeDiv  = document.getElementById('viz-time');
+  const secDiv   = document.getElementById('viz-sections');
+  if (seekFill) seekFill.style.width = (t / dur * 100) + '%';
+  if (timeDiv) timeDiv.textContent = fmt(t) + ' / ' + fmt(dur);
+  let curSec = '';
+  for (let i = sectionCache.length - 1; i >= 0; i--) {
+    if (sectionCache[i].sec <= t) { curSec = sectionCache[i].label; break; }
+  }
+  if (secDiv) secDiv.textContent = curSec;
+
+  // ── Clear ──
+  ctx.fillStyle = '#0a0a0a';
+  ctx.fillRect(0, 0, W, H);
+
+  // ── Track structure ──
+  drawTrackSurface();
+  drawLaneLines();
+  drawBeatLines(t);
+  drawSectionMarkers(t);
+
+  // ── Collect visible notes (future only — past notes vanish) ──
+  const viewEnd = t + VISIBLE_SEC;
+  const visible = [];
+  for (const note of noteCache) {
+    if (note.sec > viewEnd) break;
+    if (note.sec + Math.max(note.sustainSec, 0) < t) continue;
+    visible.push(note);
+  }
+
+  // ── Sustain tails (back-to-front: furthest first) ──
+  for (let i = visible.length - 1; i >= 0; i--) {
+    const note = visible[i];
+    if (note.sustainSec <= 0) continue;
+    for (const fret of note.frets) {
+      if (fret > 4) continue;
+      const playing = note.sec <= t && note.sec + note.sustainSec > t;
+      drawSustainTail(fret, note.sec, note.sec + note.sustainSec, t, FRET_COLORS[fret], playing);
+    }
+  }
+
+  // ── Per-fret rise animation (0 = idle, 1 = fully raised) ──
+  // Also track which frets are actively sustaining (for glow)
+  const fretRise = [0, 0, 0, 0, 0];
+  const fretSustaining = [false, false, false, false, false];
+  const RISE_BEFORE = 0.10; // start early so cylinder is up before note touches fret
+  const RISE_HOLD   = 0.04; // hold at full rise after note passes before falling
+  const RISE_AFTER  = 0.08; // fall back with gravity ease
+  for (const note of noteCache) {
+    const ahead = note.sec - t;
+    const noteEnd = note.sec + note.sustainSec;
+    const endAhead = noteEnd - t;
+    if (ahead > RISE_BEFORE + 0.5) break;
+    if (endAhead < -RISE_HOLD - RISE_AFTER - 0.5 && ahead < -RISE_HOLD - RISE_AFTER - 0.5) continue;
+    let rise = 0;
+    if (note.sustainSec > 0 && ahead <= 0 && endAhead > 0) {
+      // Sustain actively playing — fully raised
+      rise = 1;
+      for (const fret of note.frets) {
+        if (fret <= 4) fretSustaining[fret] = true;
+      }
+    } else if (ahead > 0 && ahead < RISE_BEFORE) {
+      // Approaching — rise up
+      rise = 1 - ahead / RISE_BEFORE;
+    } else {
+      // Falling back — use the END of the note (or sustain) as reference
+      const fallRef = note.sustainSec > 0 ? endAhead : ahead;
+      if (fallRef <= 0 && fallRef > -RISE_HOLD) {
+        // Hold at peak briefly
+        rise = 1;
+      } else if (fallRef <= -RISE_HOLD && fallRef > -RISE_HOLD - RISE_AFTER) {
+        // Then fall with gravity
+        const f = 1 + (fallRef + RISE_HOLD) / RISE_AFTER;
+        rise = f * f;
+      }
+    }
+    for (const fret of note.frets) {
+      if (fret <= 4) fretRise[fret] = Math.max(fretRise[fret], rise);
+    }
+  }
+
+  // ── Notes (back-to-front: furthest first) ──
+  for (let i = visible.length - 1; i >= 0; i--) {
+    const note = visible[i];
+    const ahead = note.sec - t;
+    if (ahead < 0) continue; // already played — vanish
+
+    for (const fret of note.frets) {
+      if (fret > 4) continue;
+      const pt = getPoint(fret, ahead);
+
+      // Glow when approaching strikeline
+      if (ahead < 0.2) {
+        const intensity = 1 - ahead / 0.2;
+        const gr = noteRX * pt.scale * 2.5;
+        const glow = ctx.createRadialGradient(pt.x, pt.y, 0, pt.x, pt.y, gr);
+        glow.addColorStop(0, colorAlpha(FRET_GLOW[fret], 0.35 * intensity));
+        glow.addColorStop(1, colorAlpha(FRET_GLOW[fret], 0));
+        ctx.fillStyle = glow;
+        ctx.beginPath();
+        ctx.arc(pt.x, pt.y, gr, 0, Math.PI * 2);
+        ctx.fill();
+      }
+      drawNotePuck(pt.x, pt.y, pt.scale, FRET_COLORS[fret], note.hopo);
+    }
+  }
+
+  // ── Overlays ──
+  drawFadeOverlay();
+  drawStrikeline();
+  drawFretButtons(fretRise);
+
+  // ── HUD text ──
+  ctx.fillStyle = '#555';
+  ctx.font = '11px system-ui';
+  ctx.textAlign = 'right';
+  ctx.fillText(`${noteCache.length} notes (${currentDiff})`, W - 16, 20);
+  ctx.textAlign = 'left';
+
+  requestAnimationFrame(draw);
+}
+
+// ─── UI scaffolding ──────────────────────────────────────────────
+
+function buildUI(container) {
+  container.style.background = '#0a0a0a';
+  container.style.borderRadius = '12px';
+  container.style.overflow = 'hidden';
+
+  container.innerHTML = `
+    <div style="display:flex; align-items:center; gap:12px; padding:10px 16px; background:#111; border-bottom:1px solid #222;">
+      <button id="viz-play" style="background:none; border:none; color:#fff; font-size:22px; cursor:pointer; padding:4px 8px;" title="Play/Pause">&#9654;</button>
+      <div id="viz-time" style="color:#aaa; font-size:13px; min-width:80px;">0:00 / 0:00</div>
+      <div style="flex:1; position:relative; height:6px; background:#222; border-radius:3px; cursor:pointer;" id="viz-seekbar">
+        <div id="viz-seekfill" style="height:100%; background:#7c3aed; border-radius:3px; width:0%; pointer-events:none;"></div>
+      </div>
+      <select id="viz-diff" style="background:#1a1a1a; color:#fff; border:1px solid #333; border-radius:4px; padding:2px 6px; font-size:13px;">
+        <option value="expert">Expert</option>
+        <option value="hard">Hard</option>
+        <option value="medium">Medium</option>
+        <option value="easy">Easy</option>
+      </select>
+    </div>
+    <canvas id="viz-canvas" style="width:100%; display:block;"></canvas>
+    <div id="viz-sections" style="padding:6px 16px 10px; background:#111; border-top:1px solid #222; color:#666; font-size:11px; min-height:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"></div>
+  `;
+
+  canvas = document.getElementById('viz-canvas');
+  ctx = canvas.getContext('2d');
+
+  document.getElementById('viz-play').addEventListener('click', () => {
+    if (!audio) return;
+    if (playing) {
+      audio.pause(); playing = false;
+      document.getElementById('viz-play').textContent = '\u25B6';
+    } else {
+      audio.play(); playing = true;
+      document.getElementById('viz-play').textContent = '\u23F8';
+    }
+  });
+
+  document.getElementById('viz-seekbar').addEventListener('click', e => {
+    if (!audio) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    audio.currentTime = ((e.clientX - rect.left) / rect.width) * getDuration();
+  });
+
+  document.getElementById('viz-diff').addEventListener('change', e => {
+    currentDiff = e.target.value;
+    noteCache = buildNoteCache(currentDiff);
+  });
+
+  resize();
+  window.addEventListener('resize', resize);
+}
+
+// ─── Init ────────────────────────────────────────────────────────
+
+async function init() {
+  const container = document.getElementById('midmid-viz');
+  if (!container) { console.error('No #midmid-viz element'); return; }
+
+  // Space injects window.CHART_DATA; viz-dev fetches from file
+  if (window.CHART_DATA) {
+    DATA = window.CHART_DATA;
+  } else {
+    const resp = await fetch('/demo-data.json');
+    if (!resp.ok) {
+      container.innerHTML = '<div style="padding:40px; text-align:center; color:#f66;">No demo-data.json found. Run: bun run extract</div>';
+      return;
+    }
+    DATA = await resp.json();
+  }
+
+  buildUI(container);
+  rebuildCaches();
+
+  if (DATA.audio_b64) {
+    audio = new Audio();
+    audio.src = 'data:audio/' + DATA.audio_format + ';base64,' + DATA.audio_b64;
+    audio.preload = 'auto';
+    audio.addEventListener('loadedmetadata', () => { totalDuration = audio.duration; });
+    audio.addEventListener('ended', () => {
+      playing = false;
+      document.getElementById('viz-play').textContent = '\u25B6';
+    });
+  }
+
+  requestAnimationFrame(draw);
+}
+
+init();
+
+// Vite HMR
+if (typeof import.meta !== 'undefined' && import.meta.hot) {
+  import.meta.hot.accept(() => {});
+  import.meta.hot.dispose(() => { window.removeEventListener('resize', resize); });
+}

visualizer.py

@@ -1,287 +1,43 @@
 """Build the HTML/JS/CSS for the chart visualizer.
 
-Returns an iframe with a base64 data URL so that scripts actually execute
-(Gradio's gr.HTML sets content via innerHTML which doesn't run <script> tags).
+Reads static/visualizer.js and injects chart data via window.CHART_DATA.
+Returns an iframe with srcdoc for Chrome/Arc compatibility.
 """
 
-import base64
+import html
 import json
+from pathlib import Path
+
+_JS_PATH = Path(__file__).parent / "static" / "visualizer.js"
 
 
 def build_visualizer_html(chart_json: dict) -> str:
-    """Return an iframe whose srcdoc contains the full visualizer."""
     data_json = json.dumps(chart_json, separators=(",", ":"))
-    full_html = TEMPLATE.replace("__CHART_DATA__", data_json)
-    b64 = base64.b64encode(full_html.encode("utf-8")).decode("ascii")
+    js_code = _JS_PATH.read_text(encoding="utf-8")
+
+    full_html = _TEMPLATE.replace("__JS_CODE__", js_code).replace("__CHART_DATA__", data_json)
+    escaped = html.escape(full_html, quote=True)
     return (
-        f'<iframe src="data:text/html;base64,{b64}" '
-        f'style="width:100%; height:460px; border:none; border-radius:12px;" '
-        f'allow="autoplay" sandbox="allow-scripts allow-same-origin"></iframe>'
+        f'<iframe srcdoc="{escaped}" '
+        f'style="width:100%; height:75vw; max-height:780px; min-height:480px; border:none; border-radius:12px;" '
+        f'allow="autoplay" sandbox="allow-scripts"></iframe>'
     )
 
 
-TEMPLATE = """<!DOCTYPE html>
+_TEMPLATE = """<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <style>
   * { margin: 0; padding: 0; box-sizing: border-box; }
-  body { font-family: system-ui, -apple-system, sans-serif; background: #111; overflow: hidden; }
+  body { font-family: system-ui, -apple-system, sans-serif; background: #0a0a0a; overflow: hidden; }
 </style>
 </head>
 <body>
-
-<div id="midmid-viz" style="background: #111; overflow: hidden;">
-
-<!-- Controls bar -->
-<div style="display:flex; align-items:center; gap:12px; padding:10px 16px; background:#1a1a1a; border-bottom:1px solid #333;">
-  <button id="viz-play" style="background:none; border:none; color:#fff; font-size:22px; cursor:pointer; padding:4px 8px;" title="Play/Pause">&#9654;</button>
-  <div id="viz-time" style="color:#aaa; font-size:13px; min-width:80px;">0:00 / 0:00</div>
-  <div style="flex:1; position:relative; height:6px; background:#333; border-radius:3px; cursor:pointer;" id="viz-seekbar">
-    <div id="viz-seekfill" style="height:100%; background:#7c3aed; border-radius:3px; width:0%; pointer-events:none;"></div>
-  </div>
-  <select id="viz-diff" style="background:#222; color:#fff; border:1px solid #444; border-radius:4px; padding:2px 6px; font-size:13px;">
-    <option value="expert">Expert</option>
-    <option value="hard">Hard</option>
-    <option value="medium">Medium</option>
-    <option value="easy">Easy</option>
-  </select>
-</div>
-
-<!-- Canvas -->
-<canvas id="viz-canvas" style="width:100%; display:block;"></canvas>
-
-<!-- Section labels row -->
-<div id="viz-sections" style="padding:6px 16px 10px; background:#1a1a1a; border-top:1px solid #333; color:#888; font-size:11px; min-height:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"></div>
-
-</div>
-
-<script>
-(function() {
-  const DATA = __CHART_DATA__;
-
-  const FRET_COLORS = ['#22c55e','#ef4444','#eab308','#3b82f6','#f97316'];
-  const FRET_GLOW   = ['#4ade80','#f87171','#facc15','#60a5fa','#fb923c'];
-  const LANE_COUNT = 5;
-  const NOTE_RADIUS = 14;
-  const CANVAS_PAD_LEFT = 80;
-  const CANVAS_PAD_RIGHT = 20;
-  const RES = DATA.resolution;
-
-  const tempoMap = DATA.tempo_events.map(e => ({tick: e.tick, bpm: e.bpm}));
-
-  function tickToSec(tick) {
-    let sec = 0, prevTick = 0, bpm = tempoMap[0].bpm;
-    for (let i = 1; i < tempoMap.length; i++) {
-      if (tempoMap[i].tick > tick) break;
-      sec += (tempoMap[i].tick - prevTick) / RES * 60.0 / bpm;
-      prevTick = tempoMap[i].tick;
-      bpm = tempoMap[i].bpm;
-    }
-    sec += (tick - prevTick) / RES * 60.0 / bpm;
-    return sec;
-  }
-
-  // --- Audio ---
-  const audio = new Audio();
-  audio.src = 'data:audio/' + DATA.audio_format + ';base64,' + DATA.audio_b64;
-  audio.preload = 'auto';
-
-  // --- Canvas ---
-  const canvas = document.getElementById('viz-canvas');
-  const ctx = canvas.getContext('2d');
-  let W, H, pxPerSec;
-  const VISIBLE_SEC = 8;
-
-  function resize() {
-    const container = document.getElementById('midmid-viz');
-    W = container.clientWidth;
-    H = 360;
-    canvas.width = W * devicePixelRatio;
-    canvas.height = H * devicePixelRatio;
-    canvas.style.height = H + 'px';
-    ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
-    pxPerSec = (W - CANVAS_PAD_LEFT - CANVAS_PAD_RIGHT) / VISIBLE_SEC;
-  }
-  resize();
-  window.addEventListener('resize', resize);
-
-  // --- State ---
-  let currentDiff = 'expert';
-  let playing = false;
-
-  function buildNoteCache(diff) {
-    return (DATA.notes[diff] || []).map(n => ({
-      sec: tickToSec(n.tick),
-      frets: n.frets,
-      sustainSec: n.sustain > 0 ? tickToSec(n.tick + n.sustain) - tickToSec(n.tick) : 0,
-      hopo: n.hopo,
-    }));
-  }
-
-  let noteCache = buildNoteCache(currentDiff);
-
-  const beatCache = DATA.beats.map(b => ({
-    sec: tickToSec(b.tick),
-    downbeat: b.downbeat,
-  }));
-
-  const sectionCache = DATA.sections.map(s => ({
-    sec: tickToSec(s.tick),
-    label: s.label,
-  }));
-
-  let totalDuration = 0;
-  audio.addEventListener('loadedmetadata', () => { totalDuration = audio.duration; });
-  const allNoteSecs = Object.values(DATA.notes).flat().map(n => tickToSec(n.tick + (n.sustain || 0)));
-  const estimatedDuration = allNoteSecs.length ? Math.max(...allNoteSecs) + 5 : 120;
-  function getDuration() { return (totalDuration && isFinite(totalDuration)) ? totalDuration : estimatedDuration; }
-
-  // --- Controls ---
-  const playBtn = document.getElementById('viz-play');
-  const timeDiv = document.getElementById('viz-time');
-  const seekBar = document.getElementById('viz-seekbar');
-  const seekFill = document.getElementById('viz-seekfill');
-  const diffSelect = document.getElementById('viz-diff');
-  const sectionsDiv = document.getElementById('viz-sections');
-
-  playBtn.addEventListener('click', () => {
-    if (playing) {
-      audio.pause(); playing = false;
-      playBtn.textContent = '\u25B6';
-    } else {
-      audio.play(); playing = true;
-      playBtn.textContent = '\u23F8';
-    }
-  });
-
-  seekBar.addEventListener('click', (e) => {
-    const rect = seekBar.getBoundingClientRect();
-    audio.currentTime = ((e.clientX - rect.left) / rect.width) * getDuration();
-  });
-
-  diffSelect.addEventListener('change', () => {
-    currentDiff = diffSelect.value;
-    noteCache = buildNoteCache(currentDiff);
-  });
-
-  audio.addEventListener('ended', () => { playing = false; playBtn.textContent = '\u25B6'; });
-
-  function fmt(s) {
-    const m = Math.floor(s / 60), sc = Math.floor(s % 60);
-    return m + ':' + (sc < 10 ? '0' : '') + sc;
-  }
-
-  // --- Render loop ---
-  function draw() {
-    const t = audio.currentTime || 0;
-    const dur = getDuration();
-
-    seekFill.style.width = (t / dur * 100) + '%';
-    timeDiv.textContent = fmt(t) + ' / ' + fmt(dur);
-
-    let curSec = '';
-    for (let i = sectionCache.length - 1; i >= 0; i--) {
-      if (sectionCache[i].sec <= t) { curSec = sectionCache[i].label; break; }
-    }
-    sectionsDiv.textContent = curSec;
-
-    ctx.fillStyle = '#111';
-    ctx.fillRect(0, 0, W, H);
-
-    const playheadX = CANVAS_PAD_LEFT + 40;
-    const secToX = (sec) => playheadX + (sec - t) * pxPerSec;
-    const viewStart = t - 1, viewEnd = t + VISIBLE_SEC + 1;
-    const laneTop = 20, laneBottom = H - 20;
-    const laneHeight = laneBottom - laneTop;
-    const laneH = laneHeight / LANE_COUNT;
-
-    // Lane separators
-    for (let i = 0; i <= LANE_COUNT; i++) {
-      const y = laneTop + (laneHeight / LANE_COUNT) * i;
-      ctx.strokeStyle = '#2a2a2a'; ctx.lineWidth = 1;
-      ctx.beginPath(); ctx.moveTo(CANVAS_PAD_LEFT - 10, y); ctx.lineTo(W - CANVAS_PAD_RIGHT, y); ctx.stroke();
-    }
-
-    // Beat lines
-    for (const beat of beatCache) {
-      if (beat.sec < viewStart || beat.sec > viewEnd) continue;
-      const x = secToX(beat.sec);
-      ctx.strokeStyle = beat.downbeat ? '#444' : '#222';
-      ctx.lineWidth = beat.downbeat ? 1.5 : 0.5;
-      ctx.beginPath(); ctx.moveTo(x, laneTop); ctx.lineTo(x, laneBottom); ctx.stroke();
-    }
-
-    // Section boundaries
-    for (const sec of sectionCache) {
-      if (sec.sec < viewStart || sec.sec > viewEnd) continue;
-      const x = secToX(sec.sec);
-      ctx.strokeStyle = '#7c3aed55'; ctx.lineWidth = 2;
-      ctx.beginPath(); ctx.moveTo(x, laneTop); ctx.lineTo(x, laneBottom); ctx.stroke();
-      ctx.fillStyle = '#7c3aed'; ctx.font = '10px system-ui';
-      ctx.fillText(sec.label, x + 4, laneTop - 4);
-    }
-
-    // Playhead
-    ctx.strokeStyle = '#fff'; ctx.lineWidth = 2;
-    ctx.beginPath(); ctx.moveTo(playheadX, laneTop - 2); ctx.lineTo(playheadX, laneBottom + 2); ctx.stroke();
-
-    // Notes
-    for (const note of noteCache) {
-      if (note.sec + note.sustainSec < viewStart || note.sec > viewEnd) continue;
-      const x = secToX(note.sec);
-
-      for (const fret of note.frets) {
-        if (fret > 4) continue;
-        const laneY = laneTop + fret * laneH + laneH / 2;
-        const color = FRET_COLORS[fret];
-        const glow = FRET_GLOW[fret];
-
-        // Sustain tail
-        if (note.sustainSec > 0) {
-          const endX = secToX(note.sec + note.sustainSec);
-          ctx.fillStyle = color + '55'; ctx.fillRect(x, laneY - 4, endX - x, 8);
-          ctx.fillStyle = color + '99'; ctx.fillRect(x, laneY - 2, endX - x, 4);
-        }
-
-        // Note
-        const isPast = note.sec < t;
-        ctx.beginPath(); ctx.arc(x, laneY, NOTE_RADIUS - 2, 0, Math.PI * 2);
-        if (isPast) {
-          ctx.fillStyle = color + '44'; ctx.fill();
-          ctx.strokeStyle = color + '66'; ctx.lineWidth = 1.5; ctx.stroke();
-        } else {
-          if (note.sec - t < 0.3) { ctx.shadowColor = glow; ctx.shadowBlur = 12; }
-          ctx.fillStyle = color; ctx.fill();
-          ctx.shadowBlur = 0;
-          ctx.strokeStyle = '#fff'; ctx.lineWidth = 2; ctx.stroke();
-          if (note.hopo) {
-            ctx.beginPath(); ctx.arc(x, laneY, NOTE_RADIUS - 6, 0, Math.PI * 2);
-            ctx.fillStyle = '#111'; ctx.fill();
-          }
-        }
-      }
-    }
-
-    // Fret labels
-    const fretAbbrev = ['G', 'R', 'Y', 'B', 'O'];
-    ctx.font = 'bold 13px system-ui';
-    for (let i = 0; i < LANE_COUNT; i++) {
-      const y = laneTop + i * laneH + laneH / 2;
-      ctx.fillStyle = FRET_COLORS[i]; ctx.textAlign = 'right';
-      ctx.fillText(fretAbbrev[i], CANVAS_PAD_LEFT - 20, y + 5);
-    }
-    ctx.textAlign = 'left';
-
-    // Note count
-    ctx.fillStyle = '#666'; ctx.font = '11px system-ui';
-    ctx.fillText(noteCache.length + ' notes (' + currentDiff + ')', W - CANVAS_PAD_RIGHT - 140, laneTop - 4);
-
-    requestAnimationFrame(draw);
-  }
-
-  requestAnimationFrame(draw);
-})();
+<div id="midmid-viz"></div>
+<script>window.CHART_DATA = __CHART_DATA__;</script>
+<script type="module">
+__JS_CODE__
 </script>
 </body>
 </html>"""