Upload 8 files

frontend/app.css

@@ -1,28 +1,171 @@
-body { background: radial-gradient(circle at 50% -20%, #1a1630 0, #0b0e15 34%, #080b11 68%); }
-.gradio-container { max-width: 1580px !important; margin: 0 auto; padding: 0 22px 42px !important; background: transparent !important; }
-.studio-masthead { margin: 18px 0 16px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #292f3b; border-radius: 18px; background: linear-gradient(135deg, #111620, #0d1118); box-shadow: 0 15px 45px rgba(0,0,0,.2); }
-.studio-brand { display: flex; align-items: center; gap: 13px; }
-.studio-logo { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #ddd6fe; background: #6d4aff; font-size: 24px; }
-.studio-brand strong, .studio-brand small { display: block; }
-.studio-brand strong { color: #f8fafc; font-size: 20px; letter-spacing: -.02em; }
-.studio-brand small { margin-top: 2px; color: #7f8999; font-size: 11px; }
-.studio-badges { display: flex; gap: 7px; }
-.studio-badges span { padding: 6px 9px; border: 1px solid #303746; border-radius: 999px; color: #aab3c2; background: #111722; font-size: 10px; font-weight: 700; }
-.studio-badges .gpu-badge { color: #86efac; border-color: #22543d; background: #0c251c; }
-#input-grid { margin-bottom: 16px; gap: 16px !important; align-items: stretch !important; flex-wrap: wrap !important; }
-.input-card, .settings-card { padding: 19px !important; border: 1px solid #292f3b !important; border-radius: 18px !important; background: linear-gradient(145deg, #111620, #0d1118) !important; box-shadow: 0 14px 36px rgba(0,0,0,.16); }
-.input-card h3, .settings-card h3 { margin-top: 0 !important; color: #f1f5f9; }
-#transcribe-button { min-height: 48px; border-radius: 11px; font-weight: 750; }
-#generate-score-button { min-height: 42px; margin-top: 7px; border-color: #6650c8; border-radius: 10px; color: #ede9fe; background: #1b1730; font-weight: 720; }
-#generate-score-button:disabled { border-color: #323846; color: #697383; background: #11161e; }
-#studio-viewer { margin: 0 0 16px; border-radius: 18px; }
-#downloads-panel { margin: 0 0 28px; overflow: hidden; border: 1px solid #292f3b; border-radius: 15px; background: #0d1118; }
-#downloads-row { margin: 0; padding: 4px 14px 14px; display: flex !important; flex-wrap: wrap !important; gap: 10px; border: 0; background: transparent; }
-#downloads-row > div { min-width: min(220px, 100%); flex: 1 1 220px !important; }
-@media (max-width: 700px) {
-  .gradio-container { padding: 0 10px 30px !important; }
-  .studio-masthead { align-items: flex-start; }
-  .studio-badges { display: none; }
-  .studio-brand small { max-width: 26ch; }
-  .input-card, .settings-card { min-width: 100% !important; }
+:root {
+  color-scheme: dark;
+  --ms-bg: #090b0f;
+  --ms-bg-elevated: #0d1016;
+  --ms-panel: rgba(18, 21, 29, .86);
+  --ms-border: rgba(255, 255, 255, .085);
+  --ms-border-strong: rgba(255, 255, 255, .15);
+  --ms-text: #f4f5f7;
+  --ms-text-soft: #b5bac6;
+  --ms-muted: #747b8c;
+  --ms-faint: #4f5564;
+  --ms-accent: #8b7cff;
+  --ms-success: #63d8a2;
+  --ms-warning: #f4bf75;
+  --ms-radius-xl: 22px;
+  --ms-radius-lg: 16px;
+  --ms-radius-md: 12px;
+  --ms-shadow: 0 28px 80px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.025);
+  --ms-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --ms-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+}
+
+:host {
+  display: block;
+  min-height: 100vh;
+  color-scheme: dark;
+  background:
+    radial-gradient(1000px 620px at 10% -10%, rgba(92,75,202,.18), transparent 62%),
+    radial-gradient(780px 500px at 96% 8%, rgba(53,103,175,.12), transparent 66%),
+    linear-gradient(180deg, #0a0c11 0%, #090b0f 50%, #080a0d 100%);
+}
+
+html, body { min-height: 100%; background: var(--ms-bg) !important; }
+body { margin: 0; color: var(--ms-text); font-family: var(--ms-font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
+body::before {
+  position: fixed;
+  z-index: -2;
+  inset: 0;
+  content: "";
+  pointer-events: none;
+  background:
+    radial-gradient(1000px 620px at 10% -10%, rgba(92,75,202,.18), transparent 62%),
+    radial-gradient(780px 500px at 96% 8%, rgba(53,103,175,.12), transparent 66%),
+    linear-gradient(180deg, #0a0c11 0%, #090b0f 50%, #080a0d 100%);
+}
+body::after {
+  position: fixed;
+  z-index: -1;
+  inset: 0;
+  content: "";
+  pointer-events: none;
+  opacity: .28;
+  background-image: linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
+  background-size: 32px 32px;
+  mask-image: linear-gradient(to bottom, black, transparent 78%);
+}
+
+.gradio-container, .gradio-container.dark {
+  min-height: 100vh !important;
+  max-width: none !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  background: transparent !important;
+  color: var(--ms-text) !important;
+  font-family: var(--ms-font) !important;
+}
+.gradio-container .prose, .gradio-container .prose * { color: inherit; }
+.gradio-container footer { display: none !important; }
+
+#app-shell {
+  width: min(1240px, calc(100% - 40px));
+  margin: 0 auto;
+  padding: 34px 0 58px;
+  gap: 18px;
+}
+
+#masthead, #intro { border: 0 !important; background: transparent !important; }
+#masthead { padding: 16px 4px 24px; }
+#masthead .masthead-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
+#masthead .brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ms-text) !important; font-size: .92rem; font-weight: 680; letter-spacing: -.025em; text-decoration: none; }
+.brand-mark { display: flex; align-items: end; justify-content: center; width: 30px; height: 30px; gap: 2px; padding: 7px; border: 1px solid rgba(139,124,255,.3); border-radius: 9px; background: linear-gradient(145deg, rgba(139,124,255,.2), rgba(95,140,255,.08)); box-shadow: 0 8px 28px rgba(75,60,180,.2), inset 0 1px rgba(255,255,255,.13); }
+.brand-mark i { display: block; width: 2px; border-radius: 3px; background: #d8d4ff; }
+.brand-mark i:nth-child(1) { height: 6px; opacity: .62; }
+.brand-mark i:nth-child(2) { height: 12px; }
+.brand-mark i:nth-child(3) { height: 9px; opacity: .8; }
+.brand-mark i:nth-child(4) { height: 14px; }
+.header-meta { display: flex; align-items: center; gap: 8px; }
+#model-badge, .zerogpu-badge { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 10px; border: 1px solid var(--ms-border); border-radius: 999px; font: 620 .64rem/1 var(--ms-mono); letter-spacing: .07em; text-transform: uppercase; }
+#model-badge { border-color: rgba(139,124,255,.22); background: rgba(139,124,255,.09); color: #cec8ff; }
+#model-badge::before { width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--ms-success); box-shadow: 0 0 0 4px rgba(99,216,162,.1), 0 0 12px rgba(99,216,162,.62); content: ""; }
+.zerogpu-badge { background: rgba(255,255,255,.025); color: var(--ms-muted); }
+
+#intro { padding: 28px 4px 32px; }
+.intro-copy { max-width: 850px; }
+.eyebrow { display: inline-block; margin-bottom: 16px; color: #aaa1ff; font: 670 .67rem var(--ms-mono); letter-spacing: .13em; text-transform: uppercase; }
+.intro-copy h1 { margin: 0; color: var(--ms-text); font-size: clamp(2.7rem, 7vw, 5.9rem); font-weight: 590; letter-spacing: -.072em; line-height: .94; }
+.intro-copy h1 em { color: transparent; background: linear-gradient(112deg, #d9d5ff 4%, #8b7cff 48%, #5f9cff 94%); -webkit-background-clip: text; background-clip: text; font-style: normal; }
+.intro-copy p { max-width: 690px; margin: 23px 0 0; color: var(--ms-text-soft); font-size: clamp(.95rem,1.8vw,1.1rem); line-height: 1.68; letter-spacing: -.015em; }
+
+#studio-grid { align-items: flex-start; gap: 16px; }
+.section-heading { display: flex; align-items: center; gap: 12px; padding: 2px 2px 12px; }
+.section-heading .step-number { color: var(--ms-faint); font: .61rem var(--ms-mono); letter-spacing: .08em; }
+.section-heading h2 { margin: 0 0 4px; color: var(--ms-text); font-size: .9rem; font-weight: 630; letter-spacing: -.02em; }
+.section-heading p { margin: 0; color: var(--ms-muted); font-size: .68rem; line-height: 1.4; }
+
+#upload-card, #result-panel {
+  position: relative;
+  min-width: 0;
+  border: 1px solid var(--ms-border) !important;
+  border-radius: var(--ms-radius-xl) !important;
+  background: linear-gradient(145deg, rgba(20,23,32,.93), rgba(13,16,22,.9)) !important;
+  box-shadow: var(--ms-shadow) !important;
+  backdrop-filter: blur(22px);
+}
+#upload-card::before, #result-panel::before { position: absolute; top: 0; right: 12%; left: 12%; height: 1px; content: ""; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); }
+#upload-card { padding: clamp(16px,2.5vw,25px) !important; }
+#result-panel { padding: clamp(12px,2vw,19px) !important; }
+
+#audio-input { overflow: hidden; min-height: 214px; border: 1px dashed rgba(255,255,255,.16) !important; border-radius: var(--ms-radius-lg) !important; background: rgba(7,9,13,.46) !important; transition: border-color 180ms ease, background 180ms ease; }
+#audio-input:hover, #audio-input:focus-within { border-color: rgba(139,124,255,.54) !important; background: rgba(139,124,255,.045) !important; }
+#audio-input .wrap, #audio-input > div, #audio-input .upload-container { border: 0 !important; background: transparent !important; }
+#audio-input .upload-container { min-height: 190px; }
+#audio-input button, #audio-input .upload-button { border-color: var(--ms-border-strong) !important; border-radius: 10px !important; background: rgba(255,255,255,.055) !important; color: var(--ms-text) !important; box-shadow: none !important; }
+#audio-input audio { width: 100%; filter: saturate(.75) contrast(.96); }
+
+#advanced-settings, #score-settings, #downloads-panel { overflow: hidden; border: 1px solid var(--ms-border) !important; border-radius: var(--ms-radius-md) !important; background: rgba(8,10,14,.42) !important; box-shadow: none !important; }
+#advanced-settings > button, #advanced-settings summary, #score-settings > button, #score-settings summary, #downloads-panel > button, #downloads-panel summary { min-height: 43px; padding-inline: 13px !important; background: transparent !important; color: var(--ms-text-soft) !important; font-size: .76rem !important; font-weight: 580 !important; }
+#advanced-settings > div, #score-settings > div, #downloads-panel > div { border-color: var(--ms-border) !important; background: transparent !important; }
+#advanced-settings label, #score-settings label, #downloads-panel label { color: var(--ms-text-soft) !important; font-size: .73rem !important; }
+#advanced-settings input, #advanced-settings textarea, #advanced-settings select, #score-settings input, #score-settings textarea, #score-settings select { border-color: var(--ms-border) !important; border-radius: 9px !important; background: rgba(255,255,255,.035) !important; color: var(--ms-text) !important; }
+#advanced-settings input[type="range"], #advanced-settings input[type="checkbox"], #score-settings input[type="range"], #score-settings input[type="checkbox"] { accent-color: var(--ms-accent); }
+
+#transcribe-button { position: relative; overflow: hidden; width: 100%; min-height: 50px; margin-top: 3px; border: 1px solid rgba(255,255,255,.15) !important; border-radius: 13px !important; background: linear-gradient(128deg, #7a69eb 0%, #675ad2 48%, #4f75d5 100%) !important; box-shadow: 0 10px 30px rgba(76,66,181,.25), inset 0 1px rgba(255,255,255,.2) !important; color: #fff !important; font-size: .9rem !important; font-weight: 650 !important; transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease !important; }
+#transcribe-button:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 14px 38px rgba(76,66,181,.32), inset 0 1px rgba(255,255,255,.22) !important; }
+#transcribe-button:disabled, #transcribe-button[aria-busy="true"] { cursor: wait; filter: saturate(.55) brightness(.8); }
+.cold-note { display: flex; align-items: flex-start; gap: 8px; margin: 2px !important; color: var(--ms-faint); font-size: .64rem; line-height: 1.5; }
+.cold-note > span { width: 6px; height: 6px; flex: none; margin-top: 3px; border-radius: 50%; background: var(--ms-warning); box-shadow: 0 0 8px rgba(244,191,117,.38); }
+
+#studio-viewer, #visualizer-host { min-width: 0; margin: 0; padding: 0 !important; border: 0 !important; background: transparent !important; }
+#studio-viewer > .wrap, #studio-viewer > div, #studio-viewer .html-container { min-width: 0; padding: 0 !important; border: 0 !important; background: transparent !important; }
+#score-settings { margin-top: 3px; }
+#generate-score-button { min-height: 42px; margin-top: 5px; border: 1px solid rgba(139,124,255,.44) !important; border-radius: 10px !important; background: rgba(139,124,255,.14) !important; color: #ede9fe !important; font-weight: 680 !important; }
+#generate-score-button:hover:not(:disabled) { background: rgba(139,124,255,.22) !important; }
+#generate-score-button:disabled { border-color: var(--ms-border) !important; background: rgba(255,255,255,.025) !important; color: var(--ms-faint) !important; }
+#downloads-panel { margin-top: 0; }
+#downloads-row { margin: 0; padding: 3px 11px 12px; display: flex !important; flex-wrap: wrap !important; gap: 8px; border: 0; background: transparent; }
+#downloads-row > div { min-width: min(190px,100%); flex: 1 1 190px !important; overflow: hidden; border: 1px solid var(--ms-border) !important; border-radius: 9px !important; background: rgba(255,255,255,.022) !important; }
+
+.footnote { display: flex; justify-content: space-between; gap: 16px; padding: 14px 5px 0; color: var(--ms-faint); font: .57rem/1.5 var(--ms-mono); }
+
+@media (max-width: 860px) {
+  #app-shell { width: min(100% - 24px,1240px); padding-top: 22px; }
+  #intro { padding: 22px 3px 27px; }
+  #studio-grid { flex-direction: column !important; }
+  #upload-card, #result-panel { width: 100% !important; min-width: 100% !important; }
+}
+
+@media (max-width: 600px) {
+  #app-shell { width: min(100% - 16px,1240px); padding-bottom: 30px; gap: 12px; }
+  #masthead .masthead-inner, .footnote { align-items: flex-start; flex-direction: column; }
+  .header-meta { width: 100%; }
+  .intro-copy h1 { font-size: clamp(2.65rem,15vw,4.2rem); letter-spacing: -.062em; }
+  #upload-card, #result-panel { border-radius: 17px !important; }
+  #upload-card { padding: 12px !important; }
+  #result-panel { padding: 10px !important; }
+  #audio-input { min-height: 180px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
 }

frontend/studio.css

@@ -1,96 +1,291 @@
-:root { color-scheme: dark; --bg: #090c11; --panel: #0f141c; --line: #282f3a; --text: #f5f7fb; --muted: #8a94a5; --violet: #8b6df6; }
+:root {
+  color-scheme: dark;
+  --ms-bg: #090b0f;
+  --ms-panel: #11151d;
+  --ms-line: rgba(255, 255, 255, .085);
+  --ms-line-strong: rgba(255, 255, 255, .15);
+  --ms-text: #f4f5f7;
+  --ms-soft: #b5bac6;
+  --ms-muted: #747b8c;
+  --ms-faint: #505766;
+  --ms-accent: #8b7cff;
+  --ms-success: #63d8a2;
+  --ms-warning: #f4bf75;
+  --ms-danger: #ff758e;
+  --ms-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+}
+
 * { box-sizing: border-box; }
-.ms-root { width: 100%; min-width: 0; height: 780px; min-height: 780px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; color: var(--text); background: var(--bg); box-shadow: 0 20px 55px rgba(0,0,0,.24); font-family: Inter, ui-sans-serif, system-ui, sans-serif; container-type: inline-size; }
+
+.ms-root {
+  display: grid;
+  min-width: 0;
+  gap: 14px;
+  color: var(--ms-text);
+  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  container-type: inline-size;
+}
+
 .ms-root [hidden] { display: none !important; }
-.ms-root button, .ms-root input { font: inherit; }
-.ms-statusbar { min-height: 76px; flex: 0 0 76px; padding: 15px 18px; display: grid; grid-template-columns: 1fr minmax(180px, 1fr) minmax(220px, .7fr); align-items: center; gap: 20px; border-bottom: 1px solid var(--line); background: #0d1118; }
-.ms-status-copy, .ms-song { display: flex; align-items: center; gap: 10px; min-width: 0; }
-.ms-status-copy strong, .ms-status-copy span, .ms-song strong, .ms-song span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ms-status-copy strong, .ms-song strong { font-size: 12px; }
-.ms-status-copy span, .ms-song span { margin-top: 3px; color: var(--muted); font-size: 10px; }
-.ms-state-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #64748b; }
-.ms-root[data-state="transcribing"] .ms-state-dot { background: #fbbf24; box-shadow: 0 0 12px #fbbf24; }
-.ms-root[data-state="ready"] .ms-state-dot, .ms-root[data-state="complete"] .ms-state-dot { background: #4ade80; box-shadow: 0 0 12px #4ade80; }
-.ms-root[data-state="error"] .ms-state-dot, .ms-root[data-state="notation_error"] .ms-state-dot { background: #fb7185; }
-.ms-progress > div { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 9px; }
-.ms-progress i { display: block; height: 4px; margin-top: 7px; overflow: hidden; border-radius: 99px; background: #222834; }
-.ms-progress i span { display: block; height: 100%; border-radius: inherit; background: var(--violet); transition: width .25s ease; }
-.ms-empty { min-height: 0; flex: 1 1 auto; padding: 50px 24px; display: grid; place-content: center; justify-items: center; text-align: center; }
-.ms-empty-icon { width: 68px; height: 68px; display: grid; place-items: center; border: 1px solid #35304c; border-radius: 20px; color: #c4b5fd; background: #181426; font-size: 34px; }
-.ms-empty h2 { margin: 20px 0 8px; font-size: 20px; }
-.ms-empty p { max-width: 48ch; margin: 0; color: var(--muted); font-size: 12px; }
-.ms-workspace { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; }
-.ms-transport { min-height: 60px; flex: 0 0 60px; padding: 9px 14px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid var(--line); background: #0c1017; }
-.ms-transport button { border: 0; cursor: pointer; }
-.ms-play { width: 38px; height: 38px; border-radius: 50%; color: white; background: #6f4de8; }
-.ms-icon-button { width: 28px; height: 28px; border-radius: 7px; color: #8993a2; background: transparent; }
-.ms-transport > span { min-width: 45px; color: #aab3c2; font: 600 10px ui-monospace, monospace; }
-.ms-transport > input { min-width: 90px; flex: 1; accent-color: var(--violet); }
-.ms-transport label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; }
-.ms-transport label input { width: 72px; accent-color: var(--violet); }
-.ms-source-mix { height: 32px; padding: 3px; display: flex; align-items: center; gap: 5px; border: 1px solid #303744; border-radius: 9px; background: #111721; }
-.ms-source-mix button { height: 24px; padding: 0 7px; border-radius: 6px; color: #9da7b6; background: transparent; font-size: 8px; font-weight: 750; }
-.ms-source-mix button[aria-pressed="true"] { color: #fff; background: #5f43ca; }
-.ms-source-mix input { width: 70px; accent-color: var(--violet); }
-.ms-stereo-toggle { height: 32px; padding: 0 8px; border: 1px solid #303744; border-radius: 9px; white-space: nowrap; background: #111721; cursor: pointer; }
-.ms-stereo-toggle input { width: auto !important; }
-.ms-stereo-toggle[data-active="true"] { color: #ddd6fe; border-color: #6f57ca; background: #1b1730; }
-.ms-synth-state { min-width: 130px !important; padding: 5px 8px; border: 1px solid #343b47; border-radius: 999px; color: #9da7b6 !important; background: #141a23; text-align: center; white-space: nowrap; }
-.ms-synth-state[data-kind="loading"] { color: #fde68a !important; border-color: #5b4a20; }
-.ms-synth-state[data-kind="ready"] { color: #86efac !important; border-color: #22543d; background: #0c251c; }
-.ms-synth-state[data-kind="error"] { color: #fda4af !important; border-color: #5b2631; }
-.ms-grid { min-width: 0; min-height: 0; flex: 1 1 auto; display: grid; grid-template-columns: minmax(205px, 250px) minmax(0, 1fr) minmax(185px, 215px); overflow: hidden; }
-.ms-tracks-panel, .ms-info-panel { min-width: 0; min-height: 0; overflow: hidden; background: #0d1118; }
-.ms-tracks-panel { border-right: 1px solid var(--line); }
-.ms-info-panel { padding: 18px 15px; overflow-y: auto; border-left: 1px solid var(--line); }
-.ms-tracks-panel > header { min-height: 65px; padding: 14px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
-.ms-tracks-panel > header strong, .ms-kicker { display: block; }
-.ms-tracks-panel > header strong { margin-top: 4px; font-size: 12px; }
-.ms-kicker { color: #7f8999; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
-.ms-tracks-panel > header button { padding: 5px 8px; border: 1px solid #333b48; border-radius: 7px; color: #aab3c2; background: #141a23; cursor: pointer; font-size: 9px; }
-.ms-track-list { height: calc(100% - 65px); display: grid; align-content: start; overflow: auto; overscroll-behavior: contain; scrollbar-color: #343b47 transparent; }
-.ms-track-row { min-height: 69px; padding: 11px 12px; display: grid; grid-template-columns: 5px minmax(80px, 1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid #202631; background: #0e131a; }
-.ms-track-row[data-inactive="true"] { opacity: .42; }
-.ms-track-color { width: 5px; height: 37px; border-radius: 99px; background: var(--track); box-shadow: 0 0 10px color-mix(in srgb, var(--track) 55%, transparent); }
-.ms-track-copy { overflow: hidden; }
+.ms-root button, .ms-root input, .ms-root select { font: inherit; }
+
+.ms-topbar {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+  min-width: 0;
+  padding: 2px 2px 0;
+}
+
+.ms-heading { min-width: 0; }
+.ms-heading h2 {
+  overflow: hidden;
+  max-width: 620px;
+  margin: 0;
+  color: var(--ms-text);
+  font-size: clamp(1.04rem, 2vw, 1.3rem);
+  font-weight: 620;
+  letter-spacing: -.032em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ms-subtitle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 6px 0 0;
+  color: var(--ms-muted);
+  font-size: .74rem;
+  line-height: 1.45;
+}
+.ms-subtitle b { color: var(--ms-faint); font: 560 .57rem var(--ms-mono); white-space: nowrap; }
+.ms-subtitle b::before { margin-right: 8px; content: "·"; }
+
+.ms-eyebrow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 7px;
+  color: var(--ms-muted);
+  font: 650 .62rem/1 var(--ms-mono);
+  letter-spacing: .09em;
+  text-transform: uppercase;
+}
+
+.ms-state-dot {
+  width: 7px;
+  height: 7px;
+  flex: none;
+  border-radius: 50%;
+  background: var(--ms-faint);
+  box-shadow: 0 0 0 3px rgba(255,255,255,.035);
+}
+.ms-root[data-state="queued"] .ms-state-dot,
+.ms-root[data-state="loading"] .ms-state-dot,
+.ms-root[data-state="transcribing"] .ms-state-dot {
+  background: var(--ms-warning);
+  box-shadow: 0 0 0 4px rgba(244,191,117,.1), 0 0 14px rgba(244,191,117,.38);
+  animation: ms-pulse 1.7s ease-in-out infinite;
+}
+.ms-root[data-state="complete"] .ms-state-dot,
+.ms-root[data-state="ready"] .ms-state-dot {
+  background: var(--ms-success);
+  box-shadow: 0 0 0 4px rgba(99,216,162,.09), 0 0 13px rgba(99,216,162,.32);
+}
+.ms-root[data-state="error"] .ms-state-dot,
+.ms-root[data-state="notation_error"] .ms-state-dot { background: var(--ms-danger); }
+
+.ms-quick-downloads { display: flex; flex: none; gap: 6px; }
+.ms-quick-downloads a,
+.ms-tracks-heading button,
+.ms-track-controls button,
+.ms-track-controls a {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--ms-line);
+  border-radius: 9px;
+  background: rgba(255,255,255,.035);
+  color: var(--ms-soft);
+  cursor: pointer;
+  text-decoration: none;
+  transition: color 140ms ease, border-color 140ms ease, background 140ms ease, transform 140ms ease;
+}
+.ms-quick-downloads a { min-height: 33px; padding: 0 10px; font-size: .66rem; font-weight: 620; }
+.ms-quick-downloads a:hover:not([aria-disabled="true"]),
+.ms-tracks-heading button:hover,
+.ms-track-controls button:hover,
+.ms-track-controls a:hover:not([aria-disabled="true"]) {
+  border-color: rgba(139,124,255,.38);
+  background: rgba(139,124,255,.13);
+  color: #e4e1ff;
+  transform: translateY(-1px);
+}
+.ms-quick-downloads a[aria-disabled="true"], .ms-track-controls a[aria-disabled="true"] {
+  pointer-events: none;
+  opacity: .3;
+}
+
+.ms-progress {
+  display: grid;
+  gap: 8px;
+  padding: 11px 13px;
+  border: 1px solid var(--ms-line);
+  border-radius: 11px;
+  background: rgba(7,9,13,.45);
+}
+.ms-progress > div { display: flex; justify-content: space-between; gap: 12px; color: var(--ms-soft); font-size: .7rem; }
+.ms-progress b { color: var(--ms-muted); font: 600 .64rem var(--ms-mono); }
+.ms-progress i { display: block; overflow: hidden; height: 4px; border-radius: 99px; background: rgba(255,255,255,.055); }
+.ms-progress i span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ms-accent), #6b9bff); box-shadow: 0 0 18px rgba(119,102,255,.45); transition: width 320ms ease; }
+
+.ms-empty {
+  min-height: 420px;
+  display: grid;
+  align-content: center;
+  justify-items: center;
+  padding: 34px 20px;
+  border: 1px solid var(--ms-line);
+  border-radius: 14px;
+  background: radial-gradient(circle at 50% 42%, rgba(139,124,255,.06), transparent 36%), #0a0d12;
+  text-align: center;
+}
+.ms-empty-icon { display: grid; width: 44px; height: 44px; border: 1px solid var(--ms-line); border-radius: 12px; background: rgba(255,255,255,.025); color: #aaa1ff; font-size: 20px; place-items: center; }
+.ms-empty h3 { margin: 14px 0 6px; color: var(--ms-soft); font-size: .88rem; }
+.ms-empty p { max-width: 430px; margin: 0; color: var(--ms-faint); font-size: .7rem; line-height: 1.6; }
+
+.ms-workspace { display: grid; min-width: 0; gap: 12px; }
+
+.ms-stats {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0,1fr));
+  overflow: hidden;
+  border: 1px solid var(--ms-line);
+  border-radius: 11px;
+  background: rgba(7,9,13,.36);
+}
+.ms-stats > div { min-width: 0; padding: 10px 12px; }
+.ms-stats > div + div { border-left: 1px solid var(--ms-line); }
+.ms-stats span { display: block; margin-bottom: 4px; color: var(--ms-faint); font: 650 .55rem var(--ms-mono); letter-spacing: .07em; text-transform: uppercase; }
+.ms-stats strong { display: block; overflow: hidden; color: var(--ms-soft); font-size: .75rem; font-weight: 590; text-overflow: ellipsis; white-space: nowrap; }
+
+.ms-transport {
+  display: grid;
+  gap: 9px;
+  padding: 10px;
+  border: 1px solid var(--ms-line);
+  border-radius: 12px;
+  background: rgba(7,9,13,.46);
+}
+.ms-transport-main, .ms-transport-options { display: flex; align-items: center; min-width: 0; gap: 8px; }
+.ms-play, .ms-stop {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  flex: none;
+  border: 1px solid var(--ms-line-strong);
+  border-radius: 50%;
+  color: #fff;
+  background: linear-gradient(135deg, #7a69eb, #5576d7);
+  cursor: pointer;
+  place-items: center;
+}
+.ms-stop { width: 29px; height: 29px; border-radius: 8px; color: var(--ms-soft); background: rgba(255,255,255,.04); }
+.ms-play:disabled, .ms-stop:disabled { cursor: not-allowed; filter: saturate(.3); opacity: .38; }
+.ms-transport-main > span { min-width: 44px; color: var(--ms-muted); font: 600 .62rem var(--ms-mono); text-align: center; }
+.ms-seek { min-width: 80px; flex: 1; accent-color: var(--ms-accent); }
+.ms-transport-options { flex-wrap: wrap; padding-left: 71px; }
+
+.ms-source-mix { display: flex; align-items: center; gap: 5px; min-height: 32px; padding: 3px; border: 1px solid var(--ms-line); border-radius: 9px; background: rgba(255,255,255,.025); }
+.ms-source-mix button { height: 24px; padding: 0 7px; border: 0; border-radius: 6px; color: var(--ms-muted); background: transparent; cursor: pointer; font-size: .58rem; font-weight: 720; }
+.ms-source-mix button[aria-pressed="true"] { color: #fff; background: rgba(139,124,255,.32); }
+.ms-source-mix input { width: 82px; accent-color: var(--ms-accent); }
+.ms-stereo-toggle, .ms-volume { display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px; border: 1px solid var(--ms-line); border-radius: 9px; color: var(--ms-muted); background: rgba(255,255,255,.025); font-size: .6rem; white-space: nowrap; }
+.ms-stereo-toggle { cursor: pointer; }
+.ms-stereo-toggle input { accent-color: var(--ms-accent); }
+.ms-stereo-toggle[data-active="true"] { border-color: rgba(139,124,255,.46); color: #dcd7ff; background: rgba(139,124,255,.12); }
+.ms-volume input { width: 64px; accent-color: var(--ms-accent); }
+.ms-synth-state { margin-left: auto; color: var(--ms-faint); font: 570 .56rem var(--ms-mono); }
+.ms-synth-state[data-kind="loading"] { color: var(--ms-warning); }
+.ms-synth-state[data-kind="ready"] { color: var(--ms-success); }
+.ms-synth-state[data-kind="error"] { color: var(--ms-danger); }
+
+.ms-view-shell { overflow: hidden; min-width: 0; border: 1px solid var(--ms-line); border-radius: 14px; background: #0a0d12; }
+.ms-tabs { display: flex; align-items: center; min-height: 42px; gap: 20px; padding: 0 13px; border-bottom: 1px solid var(--ms-line); background: rgba(255,255,255,.018); }
+.ms-tabs button { align-self: stretch; padding: 0 1px; border: 0; border-bottom: 2px solid transparent; color: var(--ms-muted); background: transparent; cursor: pointer; font-size: .64rem; font-weight: 720; text-transform: uppercase; }
+.ms-tabs button[aria-selected="true"] { border-bottom-color: var(--ms-accent); color: var(--ms-text); }
+.ms-tabs > span { overflow: hidden; margin-left: auto; color: var(--ms-faint); font: .57rem var(--ms-mono); text-overflow: ellipsis; white-space: nowrap; }
+.ms-tabs label { display: flex; align-items: center; gap: 5px; color: var(--ms-faint); font-size: .58rem; }
+.ms-tabs input { width: 62px; accent-color: var(--ms-accent); }
+
+.ms-roll-view { height: 420px; min-width: 0; padding: 11px; }
+.ms-roll-view canvas { display: block; width: 100%; height: 370px; border-radius: 8px; background: #090c11; cursor: crosshair; }
+.ms-roll-view p { margin: 7px 1px 0; color: var(--ms-faint); font-size: .58rem; text-align: right; }
+.ms-score-view { height: 420px; overflow: auto; padding: 14px; background: #11151b; overscroll-behavior: contain; }
+.ms-score-empty { min-height: 100%; display: grid; align-content: center; justify-items: center; color: var(--ms-muted); text-align: center; }
+.ms-score-empty span { color: var(--ms-accent); font-size: 36px; }
+.ms-score-empty strong { margin-top: 9px; color: var(--ms-soft); font-size: .82rem; }
+.ms-score-empty p { max-width: 420px; margin: 5px 0 0; font-size: .66rem; line-height: 1.5; }
+.ms-score-paper { min-width: 720px; padding: 18px; border-radius: 4px; background: #fffdf7; box-shadow: 0 12px 36px rgba(0,0,0,.3); }
+.ms-score-paper svg { display: block; width: 100%; height: auto; color: #111; }
+
+.ms-notation-info { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border: 1px solid var(--ms-line); border-radius: 10px; background: rgba(255,255,255,.022); }
+.ms-notation-info > span { color: #aaa1ff; font: 650 .58rem var(--ms-mono); letter-spacing: .08em; text-transform: uppercase; }
+.ms-notation-info dl { display: flex; flex: 1; gap: 14px; margin: 0; }
+.ms-notation-info dl div { display: flex; gap: 5px; }
+.ms-notation-info dt, .ms-notation-info dd { margin: 0; font-size: .58rem; }
+.ms-notation-info dt { color: var(--ms-faint); }
+.ms-notation-info dd { color: var(--ms-soft); }
+
+.ms-tracks-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 2px 0; }
+.ms-tracks-heading strong, .ms-kicker { display: block; }
+.ms-kicker { color: var(--ms-soft); font-size: .72rem; font-weight: 620; }
+.ms-tracks-heading strong { margin-top: 3px; color: var(--ms-faint); font: .58rem var(--ms-mono); }
+.ms-tracks-heading button { min-height: 29px; padding: 0 9px; font-size: .59rem; }
+.ms-track-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
+.ms-track-placeholder { grid-column: 1 / -1; padding: 15px; border: 1px dashed var(--ms-line); border-radius: 11px; color: var(--ms-faint); font-size: .68rem; text-align: center; }
+.ms-track-row { display: grid; grid-template-columns: 6px minmax(0,1fr) auto; align-items: center; min-width: 0; min-height: 68px; gap: 10px; padding: 10px 11px; border: 1px solid var(--ms-line); border-radius: 11px; background: rgba(255,255,255,.022); transition: opacity 150ms ease, border-color 150ms ease, background 150ms ease; }
+.ms-track-row:hover { border-color: var(--ms-line-strong); background: rgba(255,255,255,.034); }
+.ms-track-row[data-inactive="true"] { opacity: .48; }
+.ms-track-color { width: 6px; height: 36px; border-radius: 99px; background: var(--track); box-shadow: 0 0 15px color-mix(in srgb, var(--track) 35%, transparent); }
+.ms-track-copy { min-width: 0; overflow: hidden; }
 .ms-track-copy strong, .ms-track-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ms-track-copy strong { font-size: 11px; }
-.ms-track-copy span { margin-top: 4px; color: var(--muted); font-size: 9px; }
-.ms-program-select { width: 100%; max-width: 150px; margin-top: 6px; padding: 3px 20px 3px 5px; overflow: hidden; border: 1px solid #303743; border-radius: 5px; color: #aeb7c5; background: #111721; font-size: 8px; text-overflow: ellipsis; }
+.ms-track-copy strong { color: var(--ms-soft); font-size: .74rem; font-weight: 600; }
+.ms-track-copy span { margin-top: 4px; color: var(--ms-faint); font: .56rem var(--ms-mono); }
+.ms-program-select { width: min(100%, 158px); margin-top: 6px; padding: 3px 20px 3px 5px; border: 1px solid var(--ms-line); border-radius: 6px; background: #111721; color: var(--ms-soft); font-size: .57rem; }
 .ms-track-controls { display: flex; gap: 4px; }
-.ms-track-controls button, .ms-track-controls a { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #343b47; border-radius: 6px; color: #949eac; background: #111721; cursor: pointer; font-size: 9px; font-weight: 800; text-decoration: none; }
-.ms-track-controls button[aria-pressed="true"] { color: white; border-color: var(--track); background: color-mix(in srgb, var(--track) 25%, #111721); }
-.ms-track-controls a[aria-disabled="true"] { opacity: .25; pointer-events: none; }
-.ms-main-panel { min-width: 0; min-height: 0; overflow: hidden; background: #090c11; }
-.ms-tabs { height: 50px; padding: 0 18px; display: flex; gap: 25px; border-bottom: 1px solid var(--line); background: #0d1118; }
-.ms-tabs button { padding: 0 2px; border: 0; border-bottom: 2px solid transparent; color: #7f8999; background: transparent; cursor: pointer; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
-.ms-tabs button[aria-selected="true"] { color: #f1f5f9; border-bottom-color: var(--violet); }
-.ms-roll-view { height: calc(100% - 50px); min-height: 0; padding: 14px; display: flex; flex-direction: column; overflow: hidden; }
-.ms-roll-toolbar { height: 30px; display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; }
-.ms-roll-toolbar label { display: flex; gap: 7px; align-items: flex-start; }
-.ms-roll-toolbar input { width: 78px; accent-color: var(--violet); }
-.ms-roll-view canvas { width: 100%; min-height: 260px; flex: 1 1 auto; display: block; border: 1px solid #202631; border-radius: 8px; cursor: crosshair; }
-.ms-roll-view p { margin: 8px 0 0; color: #566171; font-size: 9px; text-align: right; }
-.ms-score-view { height: calc(100% - 50px); min-height: 0; padding: 18px; overflow: auto; overscroll-behavior: contain; background: #11151b; }
-.ms-score-empty { min-height: 100%; display: grid; place-content: center; justify-items: center; color: var(--muted); text-align: center; }
-.ms-score-empty span { font-size: 40px; color: #8b6df6; }
-.ms-score-empty strong { margin-top: 12px; color: #d8dce4; }
-.ms-score-empty p { margin: 5px 0 0; font-size: 10px; }
-.ms-score-paper { width: max(100%, 720px); min-width: 0; padding: 20px; border-radius: 3px; background: #fffdf7; box-shadow: 0 12px 36px rgba(0,0,0,.3); }
-.ms-score-paper svg { display: block; width: 100%; height: auto; color: #111; }
-.ms-info-panel dl { margin: 9px 0 20px; }
-.ms-info-panel dl div { padding: 8px 0; display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid #232a34; }
-.ms-info-panel dt, .ms-info-panel dd { margin: 0; font-size: 9px; }
-.ms-info-panel dt { color: var(--muted); }
-.ms-info-panel dd { color: #dce1e9; }
-.ms-notation-info { margin-top: 20px; }
-.ms-downloads { margin-top: 22px; display: grid; gap: 7px; }
-.ms-downloads .ms-kicker { margin-bottom: 3px; }
-.ms-downloads a { padding: 9px 10px; border: 1px solid #323946; border-radius: 7px; color: #d5d9e1; background: #141a23; font-size: 9px; text-decoration: none; }
-.ms-downloads a[aria-disabled="true"] { opacity: .3; pointer-events: none; }
-.ms-downloads small { margin-top: 4px; color: #626c7a; font-size: 8px; line-height: 1.5; }
-.ms-announcer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
-@container (max-width: 1100px) { .ms-grid { grid-template-columns: minmax(195px, 225px) minmax(0, 1fr); } .ms-info-panel { display: none; } .ms-synth-state { display: none; } }
-@container (max-width: 820px) { .ms-volume { display: none !important; } .ms-source-mix input { width: 56px; } }
-@container (max-width: 760px) { .ms-root { height: 920px; min-height: 920px; } .ms-statusbar { min-height: 66px; flex-basis: 66px; grid-template-columns: 1fr; gap: 8px; } .ms-song, .ms-progress { display: none; } .ms-transport { min-height: 94px; flex-basis: 94px; flex-wrap: wrap; } .ms-transport > input { min-width: calc(100% - 135px); } .ms-source-mix { margin-left: 86px; } .ms-grid { grid-template-columns: 1fr; grid-template-rows: 230px minmax(0, 1fr); } .ms-tracks-panel { border-right: 0; } .ms-track-list { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .ms-main-panel { border-top: 1px solid var(--line); } .ms-score-view { padding: 10px; } }
-@container (max-width: 500px) { .ms-root { height: 940px; min-height: 940px; } .ms-statusbar { padding: 12px; } .ms-transport { padding: 8px; gap: 6px; } .ms-transport > span { min-width: 38px; font-size: 9px; } .ms-source-mix { margin-left: 0; } .ms-source-mix input { width: 42px; } .ms-roll-view { padding: 9px; } .ms-track-list { grid-template-columns: 1fr; } }
+.ms-track-controls button, .ms-track-controls a { width: 27px; height: 27px; padding: 0; font: 700 .58rem var(--ms-mono); }
+.ms-track-controls button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--track) 52%, transparent); background: color-mix(in srgb, var(--track) 18%, transparent); color: #fff; }
+
+.ms-announcer { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0 0 0 0); }
+
+@keyframes ms-pulse { 0%,100% { opacity:.62; transform:scale(.88); } 50% { opacity:1; transform:scale(1); } }
+
+@container (max-width: 760px) {
+  .ms-topbar { display: grid; }
+  .ms-quick-downloads { width: 100%; }
+  .ms-quick-downloads a { flex: 1; }
+  .ms-transport-options { padding-left: 0; }
+  .ms-synth-state { width: 100%; margin-left: 0; }
+  .ms-track-list { grid-template-columns: 1fr; }
+}
+
+@container (max-width: 520px) {
+  .ms-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
+  .ms-stats > div:nth-child(3) { border-top: 1px solid var(--ms-line); border-left: 0; }
+  .ms-stats > div:nth-child(4) { border-top: 1px solid var(--ms-line); }
+  .ms-transport-main { flex-wrap: wrap; }
+  .ms-seek { min-width: calc(100% - 134px); }
+  .ms-source-mix { width: 100%; }
+  .ms-source-mix input { flex: 1; }
+  .ms-tabs > span { display: none; }
+  .ms-roll-view, .ms-score-view { height: 330px; }
+  .ms-roll-view canvas { height: 282px; }
+  .ms-notation-info { align-items: flex-start; }
+  .ms-notation-info dl { display: grid; grid-template-columns: repeat(2,1fr); gap: 6px 12px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ms-root *, .ms-root *::before, .ms-root *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
+}

frontend/studio.html

@@ -1,87 +1,95 @@
-<main class="ms-root" data-state="idle">
-  <section class="ms-statusbar">
-    <div class="ms-status-copy">
-      <span class="ms-state-dot"></span>
-      <div><strong data-field="state">Prêt</strong><span data-field="status">Importez un enregistrement pour commencer.</span></div>
+<section class="ms-root" data-state="idle" aria-label="MuScriptor transcription studio">
+  <header class="ms-topbar">
+    <div class="ms-heading">
+      <p class="ms-eyebrow"><span class="ms-state-dot" aria-hidden="true"></span><span data-field="state">Ready for audio</span></p>
+      <h2 data-field="audio-name">Your transcription</h2>
+      <p class="ms-subtitle"><span data-field="status">Upload a recording to reveal its notes and instruments.</span><b data-field="summary">—</b></p>
     </div>
-    <div class="ms-song"><strong data-field="audio-name">Aucun morceau</strong><span data-field="summary">—</span></div>
-    <div class="ms-progress" hidden>
-      <div><span data-field="progress-label">Préparation</span><b data-field="progress-value">0%</b></div>
-      <i><span data-field="progress-bar"></span></i>
+    <div class="ms-quick-downloads" aria-label="Quick exports">
+      <a data-download="midi" aria-disabled="true">MIDI</a>
+      <a data-download="musicxml" aria-disabled="true">MusicXML</a>
+      <a data-download="svg" aria-disabled="true">Score SVG</a>
     </div>
-  </section>
+  </header>
+
+  <div class="ms-progress" hidden>
+    <div><span data-field="progress-label">Preparing inference…</span><b data-field="progress-value">0%</b></div>
+    <i role="progressbar" aria-valuemin="0" aria-valuemax="100"><span data-field="progress-bar"></span></i>
+  </div>
 
   <section class="ms-empty">
-    <div class="ms-empty-icon">♫</div>
-    <h2>La transcription apparaîtra ici</h2>
-    <p>Le piano roll et les pistes MIDI apparaîtront après la transcription. La partition pourra ensuite être générée à la demande.</p>
+    <div class="ms-empty-icon" aria-hidden="true">♫</div>
+    <h3>A piano roll will appear here</h3>
+    <p>MuScriptor separates notes into color-coded instrument tracks. Generate an editable score after transcription when you need one.</p>
   </section>
 
   <section class="ms-workspace" hidden>
-    <div class="ms-transport">
-      <button type="button" data-action="play" class="ms-play" aria-label="Lecture">▶</button>
-      <button type="button" data-action="stop" class="ms-icon-button" aria-label="Retour au début">■</button>
-      <span data-field="clock">0:00.0</span>
-      <input data-action="seek" type="range" min="0" max="1" step="0.01" value="0" aria-label="Position">
-      <span data-field="duration">0:00.0</span>
-      <div class="ms-source-mix" title="Fondu entre l’enregistrement original et la transcription MIDI">
-        <button type="button" data-source="original">Original</button>
-        <input data-action="source-mix" type="range" min="0" max="1" step="0.01" value="0.55" aria-label="Mix original et MIDI">
-        <button type="button" data-source="midi">MIDI</button>
+    <div class="ms-stats" aria-label="Transcription statistics">
+      <div><span>Duration</span><strong data-field="info-duration">—</strong></div>
+      <div><span>Notes</span><strong data-field="note-count">—</strong></div>
+      <div><span>Tracks</span><strong data-field="info-tracks">—</strong></div>
+      <div><span>Elapsed</span><strong data-field="elapsed">—</strong></div>
+    </div>
+
+    <div class="ms-transport" aria-label="Playback controls">
+      <div class="ms-transport-main">
+        <button type="button" data-action="play" class="ms-play" aria-label="Play" disabled>▶</button>
+        <button type="button" data-action="stop" class="ms-stop" aria-label="Return to start" disabled>■</button>
+        <span data-field="clock">0:00.0</span>
+        <input data-action="seek" class="ms-seek" type="range" min="0" max="1" step="0.01" value="0" aria-label="Playback position">
+        <span data-field="duration">0:00.0</span>
+      </div>
+      <div class="ms-transport-options">
+        <div class="ms-source-mix" title="Blend the original recording and MIDI transcription">
+          <button type="button" data-source="original">Original</button>
+          <input data-action="source-mix" type="range" min="0" max="1" step="0.01" value="0.5" aria-label="Original to MIDI mix">
+          <button type="button" data-source="midi">MIDI</button>
+        </div>
+        <label class="ms-stereo-toggle" title="Original on the left, MIDI on the right"><input data-action="stereo" type="checkbox"> Split L/R</label>
+        <label class="ms-volume">Volume <input data-action="volume" type="range" min="0" max="1" step="0.01" value="0.72"></label>
+        <span data-field="synth-state" class="ms-synth-state">SoundFont loads on first play</span>
       </div>
-      <label class="ms-stereo-toggle" title="Place l’original à gauche et le MIDI à droite"><input data-action="stereo" type="checkbox"> L/R</label>
-      <label class="ms-volume">Volume <input data-action="volume" type="range" min="0" max="1" step="0.01" value="0.65"></label>
-      <span data-field="synth-state" class="ms-synth-state">SoundFont au premier play</span>
     </div>
 
-    <div class="ms-grid">
-      <aside class="ms-tracks-panel">
-        <header><div><span class="ms-kicker">PISTES</span><strong data-field="track-count">0 piste</strong></div><button type="button" data-action="reset-mix">Tout</button></header>
-        <div data-region="tracks" class="ms-track-list"></div>
-      </aside>
+    <section class="ms-view-shell">
+      <nav class="ms-tabs" aria-label="Visualization">
+        <button type="button" data-tab="roll" aria-selected="true">Piano roll</button>
+        <button type="button" data-tab="score" aria-selected="false">Score</button>
+        <span data-field="pitch-range">Waiting for notes</span>
+        <label>Zoom <input data-action="zoom" type="range" min="1" max="8" step="1" value="1"></label>
+      </nav>
 
-      <section class="ms-main-panel">
-        <nav class="ms-tabs" aria-label="Visualisation">
-          <button type="button" data-tab="roll" aria-selected="true">Piano roll</button>
-          <button type="button" data-tab="score" aria-selected="false">Partition</button>
-        </nav>
-        <div data-view="roll" class="ms-roll-view">
-          <div class="ms-roll-toolbar"><span data-field="pitch-range">—</span><label>Zoom <input data-action="zoom" type="range" min="1" max="8" step="1" value="1"></label></div>
-          <canvas data-canvas="roll" height="470" aria-label="Piano roll multipiste"></canvas>
-          <p>Cliquez dans le piano roll pour déplacer la tête de lecture.</p>
-        </div>
-        <div data-view="score" class="ms-score-view" hidden>
-          <div data-region="score-empty" class="ms-score-empty"><span>♩</span><strong>Aucune partition générée</strong><p>Après la transcription, utilisez le bouton « Generate score » dans les paramètres.</p></div>
-          <div data-region="score" class="ms-score-paper"></div>
-        </div>
-      </section>
+      <div data-view="roll" class="ms-roll-view">
+        <canvas data-canvas="roll" height="410" aria-label="Color-coded multitrack piano roll"></canvas>
+        <p>Click the piano roll to seek. Use zoom to inspect dense passages.</p>
+      </div>
 
-      <aside class="ms-info-panel">
-        <span class="ms-kicker">SESSION</span>
-        <dl>
-          <div><dt>Durée</dt><dd data-field="info-duration">—</dd></div>
-          <div><dt>Notes</dt><dd data-field="note-count">—</dd></div>
-          <div><dt>Pistes</dt><dd data-field="info-tracks">—</dd></div>
-          <div><dt>Calcul</dt><dd data-field="elapsed">—</dd></div>
-        </dl>
-        <div class="ms-notation-info" hidden>
-          <span class="ms-kicker">PARTITION</span>
-          <dl>
-            <div><dt>Tempo</dt><dd data-field="tempo">—</dd></div>
-            <div><dt>Mesure</dt><dd data-field="meter">—</dd></div>
-            <div><dt>Grille</dt><dd data-field="quantization">—</dd></div>
-            <div><dt>Pages</dt><dd data-field="pages">—</dd></div>
-          </dl>
-        </div>
-        <div class="ms-downloads">
-          <span class="ms-kicker">EXPORT RAPIDE</span>
-          <a data-download="midi" aria-disabled="true">MIDI complet</a>
-          <a data-download="musicxml" aria-disabled="true">MusicXML</a>
-          <a data-download="svg" aria-disabled="true">SVG de la partition</a>
-          <small>Les exports PDF, pistes séparées et ZIP sont disponibles sous le visualiseur.</small>
+      <div data-view="score" class="ms-score-view" hidden>
+        <div data-region="score-empty" class="ms-score-empty">
+          <span aria-hidden="true">♩</span>
+          <strong>No score generated yet</strong>
+          <p>After transcription, open “Create an editable score” below and generate it manually.</p>
         </div>
-      </aside>
+        <div data-region="score" class="ms-score-paper" hidden></div>
+      </div>
+    </section>
+
+    <div class="ms-notation-info" hidden>
+      <span>Score</span>
+      <dl>
+        <div><dt>Tempo</dt><dd data-field="tempo">—</dd></div>
+        <div><dt>Time</dt><dd data-field="meter">—</dd></div>
+        <div><dt>Grid</dt><dd data-field="quantization">—</dd></div>
+        <div><dt>Pages</dt><dd data-field="pages">—</dd></div>
+      </dl>
     </div>
+
+    <div class="ms-tracks-heading">
+      <div><span class="ms-kicker">Instrument tracks</span><strong data-field="track-count">No tracks yet</strong></div>
+      <button type="button" data-action="reset-mix">Reset mute &amp; solo</button>
+    </div>
+    <div data-region="tracks" class="ms-track-list" aria-label="Instrument tracks"></div>
   </section>
+
   <div class="ms-announcer" aria-live="polite"></div>
-</main>
+</section>

frontend/studio.js

@@ -20,7 +20,8 @@ const ui = {
 const state = {
   data: null, audio: null, master: null, compressor: null, gains: new Map(),
   midiGain: null, midiPanner: null, originalGain: null, originalPanner: null,
-  originalElement: null, originalSource: null, originalSources: new WeakMap(), originalFallback: false,
+  originalElement: null, originalUrl: '', originalBuffer: null,
+  originalBufferPromise: null, originalBufferSource: null, originalFailed: false,
   sourceMix: Number(ui.sourceMix.value), stereo: Boolean(ui.stereo.checked),
   synth: null, synthPromise: null, synthFailed: false, channels: new Map(), nextChannel: 0,
   programOverrides: new Map(),
@@ -35,7 +36,7 @@ const formatTime = (seconds) => {
   const minutes = Math.floor(safe / 60);
   return `${minutes}:${(safe % 60).toFixed(1).padStart(4, '0')}`;
 };
-const noteName = (pitch) => `${['Do','Do♯','Ré','Mi♭','Mi','Fa','Fa♯','Sol','La♭','La','Si♭','Si'][pitch % 12]}${Math.floor(pitch / 12) - 1}`;
+const noteName = (pitch) => `${['C','C♯','D','E♭','E','F','F♯','G','A♭','A','B♭','B'][pitch % 12]}${Math.floor(pitch / 12) - 1}`;
 const setText = (selector, value) => { const target = $(selector); if (target) target.textContent = value; };
 
 function normalize(value) {
@@ -94,21 +95,21 @@ function setSynthStatus(label, kind = '') {
 async function initSoundFont() {
   const library = globalThis.MuScriptorSynthLib;
   if (!library?.WorkletSynthesizer || !library?.processorUrl) {
-    throw new Error('SpessaSynth indisponible');
+    throw new Error('SpessaSynth is unavailable');
   }
-  setSynthStatus('Chargement du moteur…', 'loading');
+  setSynthStatus('Loading audio engine…', 'loading');
   await state.audio.audioWorklet.addModule(library.processorUrl);
   const synth = new library.WorkletSynthesizer(state.audio);
   synth.connect(state.midiGain);
   await synth.isReady;
-  setSynthStatus('SoundFont 38 Mo…', 'loading');
+  setSynthStatus('Loading 38 MB SoundFont…', 'loading');
   const response = await fetch(SOUNDFONT_URL);
   if (!response.ok) throw new Error(`SoundFont HTTP ${response.status}`);
   await synth.soundBankManager.addSoundBank(await response.arrayBuffer(), 'MuseScore General');
   state.synth = synth;
   state.channels.clear();
   state.nextChannel = 0;
-  setSynthStatus('MuseScore General prêt', 'ready');
+  setSynthStatus('MuseScore General ready', 'ready');
   refreshMix();
   return synth;
 }
@@ -132,12 +133,11 @@ function ensureAudio() {
   state.originalGain.connect(state.originalPanner).connect(state.master);
   state.master.connect(state.compressor).connect(state.audio.destination);
   rebuildGains();
-  setupOriginalAudio();
   applySourceMix();
   state.synthPromise = initSoundFont().catch((error) => {
     state.synthFailed = true;
-    console.warn('SoundFont indisponible, fallback WebAudio:', error);
-    setSynthStatus('Synthèse légère (fallback)', 'error');
+    console.warn('SoundFont unavailable, using WebAudio fallback:', error);
+    setSynthStatus('Lightweight synth fallback', 'error');
     return null;
   });
 }
@@ -164,48 +164,101 @@ function findOriginalAudio() {
   return null;
 }
 
-function setupOriginalAudio() {
-  if (!state.audio || !state.originalGain) return null;
+function stopOriginalBufferSource() {
+  if (!state.originalBufferSource) return;
+  try { state.originalBufferSource.stop(); } catch (_) {}
+  try { state.originalBufferSource.disconnect(); } catch (_) {}
+  state.originalBufferSource = null;
+}
+
+function resetOriginalAudio() {
+  stopOriginalBufferSource();
+  state.originalElement = null;
+  state.originalUrl = '';
+  state.originalBuffer = null;
+  state.originalBufferPromise = null;
+  state.originalFailed = false;
+}
+
+function discoverOriginalAudio() {
   const audio = findOriginalAudio();
-  if (!audio) { applySourceMix(); return null; }
-  if (audio === state.originalElement) { applySourceMix(); return audio; }
-  if (state.originalElement && !state.originalElement.paused) state.originalElement.pause();
-  if (state.originalSource) { try { state.originalSource.disconnect(); } catch (_) {} }
+  if (!audio) return null;
+  const url = String(audio.currentSrc || audio.src || '');
+  if (!url) return null;
+  if (url !== state.originalUrl) {
+    stopOriginalBufferSource();
+    state.originalUrl = url;
+    state.originalBuffer = null;
+    state.originalBufferPromise = null;
+    state.originalFailed = false;
+  }
   state.originalElement = audio;
-  state.originalFallback = false;
-  try {
-    let source = state.originalSources.get(audio);
-    if (!source) {
-      source = state.audio.createMediaElementSource(audio);
-      state.originalSources.set(audio, source);
-    }
-    try { source.disconnect(); } catch (_) {}
-    source.connect(state.originalGain);
-    state.originalSource = source;
-    audio.volume = 1;
-  } catch (error) {
-    console.warn('Routage WebAudio de la source originale indisponible:', error);
-    state.originalSource = null;
-    state.originalFallback = true;
+  if (!audio.paused) audio.pause();
+  return url;
+}
+
+async function loadOriginalBuffer() {
+  if (!state.audio) return null;
+  const url = discoverOriginalAudio();
+  if (!url) return null;
+  if (state.originalBuffer) return state.originalBuffer;
+  if (!state.originalBufferPromise) {
+    const requestedUrl = url;
+    state.originalBufferPromise = fetch(url)
+      .then((response) => {
+        if (!response.ok) throw new Error(`Original audio HTTP ${response.status}`);
+        return response.arrayBuffer();
+      })
+      .then((data) => state.audio.decodeAudioData(data.slice(0)))
+      .then((buffer) => {
+        if (state.originalUrl !== requestedUrl) return null;
+        state.originalBuffer = buffer;
+        state.originalFailed = false;
+        applySourceMix();
+        return buffer;
+      })
+      .catch((error) => {
+        console.warn('Original audio could not be decoded:', error);
+        if (state.originalUrl === requestedUrl) {
+          state.originalBufferPromise = null;
+          state.originalFailed = true;
+          applySourceMix();
+        }
+        return null;
+      });
   }
-  audio.preload = 'auto';
-  applySourceMix();
-  return audio;
+  return state.originalBufferPromise;
+}
+
+function startOriginalBufferSource(startAt, offset) {
+  stopOriginalBufferSource();
+  if (!state.audio || !state.originalGain || !state.originalBuffer) return;
+  const safeOffset = clamp(offset, 0, Math.max(0, state.originalBuffer.duration - .001));
+  if (safeOffset >= state.originalBuffer.duration) return;
+  const source = state.audio.createBufferSource();
+  source.buffer = state.originalBuffer;
+  source.connect(state.originalGain);
+  source.addEventListener('ended', () => {
+    if (state.originalBufferSource === source) state.originalBufferSource = null;
+  }, { once: true });
+  source.start(startAt, safeOffset);
+  state.originalBufferSource = source;
 }
 
 function applySourceMix() {
   const mix = clamp(Number(state.sourceMix), 0, 1);
-  const hasOriginal = Boolean(state.originalElement);
-  const originalLevel = hasOriginal ? Math.cos(mix * Math.PI / 2) : 0;
-  const midiLevel = hasOriginal ? Math.sin(mix * Math.PI / 2) : 1;
+  const hasOriginal = Boolean(state.originalBuffer || (!state.originalFailed && discoverOriginalAudio()));
+  // Match the official client: a predictable linear blend in normal mode,
+  // with split mode overriding the blend so both sources remain audible.
+  const originalLevel = state.stereo && hasOriginal ? .62 : (hasOriginal ? 1 - mix : 0);
+  const midiLevel = state.stereo && hasOriginal ? .62 : (hasOriginal ? mix : 1);
   if (state.audio) {
     const now = state.audio.currentTime;
-    state.originalGain?.gain.setTargetAtTime(state.originalFallback ? 0 : Math.max(.0001, originalLevel), now, .018);
+    state.originalGain?.gain.setTargetAtTime(Math.max(.0001, originalLevel), now, .018);
     state.midiGain?.gain.setTargetAtTime(Math.max(.0001, midiLevel), now, .018);
     state.originalPanner?.pan.setTargetAtTime(state.stereo && hasOriginal ? -1 : 0, now, .018);
     state.midiPanner?.pan.setTargetAtTime(state.stereo && hasOriginal ? 1 : 0, now, .018);
   }
-  if (state.originalElement && state.originalFallback) state.originalElement.volume = originalLevel;
   $$('[data-source]').forEach((button) => {
     const selected = button.dataset.source === 'original' ? mix <= .01 : mix >= .99;
     button.setAttribute('aria-pressed', String(selected));
@@ -254,18 +307,19 @@ function waveform(track) {
 }
 
 function scheduleNote(track, note, nowSong) {
+  const scheduledStart = state.originAudio + (note.start - state.originSong);
+  const scheduledEnd = state.originAudio + (note.end - state.originSong);
+  const startAt = Math.max(state.audio.currentTime + .006, scheduledStart);
+  const endAt = Math.max(startAt + .03, scheduledEnd);
   if (state.synth) {
     const channel = channelFor(track);
-    const startAt = state.audio.currentTime + Math.max(.006, note.start - nowSong);
-    const endAt = startAt + clamp(note.end - Math.max(note.start, nowSong), .03, 12);
     state.synth.noteOn(channel, note.pitch, Math.round(note.velocity), { time: startAt });
-    state.synth.noteOff(channel, note.pitch, { time: endAt });
+    state.synth.noteOff(channel, note.pitch, { time: Math.min(endAt, startAt + 12) });
     return;
   }
   const gain = state.gains.get(track.id);
   if (!state.audio || !gain) return;
-  const startAt = state.audio.currentTime + Math.max(.006, note.start - nowSong);
-  const duration = clamp(note.end - Math.max(note.start, nowSong), .03, 8);
+  const duration = clamp(endAt - startAt, .03, 8);
   const oscillator = state.audio.createOscillator();
   const envelope = state.audio.createGain();
   oscillator.type = waveform(track);
@@ -279,10 +333,12 @@ function scheduleNote(track, note, nowSong) {
 }
 
 function exactTime() {
-  if (state.playing && state.originalElement && !state.originalElement.paused && Number.isFinite(state.originalElement.currentTime)) {
-    return state.originalElement.currentTime;
-  }
-  return state.playing && state.audio ? state.originSong + state.audio.currentTime - state.originAudio : state.songTime;
+  if (!state.playing || !state.audio) return state.songTime;
+  return clamp(
+    state.originSong + Math.max(0, state.audio.currentTime - state.originAudio),
+    0,
+    state.data?.duration || Number.POSITIVE_INFINITY,
+  );
 }
 
 function lowerBound(time) {
@@ -294,14 +350,11 @@ function lowerBound(time) {
 function stopPlayback(reset = false) {
   if (state.playing) state.songTime = clamp(exactTime(), 0, state.data?.duration || 0);
   state.playing = false; cancelAnimationFrame(state.animation);
-  if (state.originalElement && !state.originalElement.paused) state.originalElement.pause();
+  stopOriginalBufferSource();
   state.nodes.forEach((node) => { try { node.stop(); } catch (_) {} }); state.nodes.clear();
   state.synth?.stopAll();
-  if (reset) {
-    state.songTime = 0;
-    if (state.originalElement) { try { state.originalElement.currentTime = 0; } catch (_) {} }
-  }
-  ui.play.textContent = '▶'; ui.play.setAttribute('aria-label', 'Lecture');
+  if (reset) state.songTime = 0;
+  ui.play.textContent = '▶'; ui.play.setAttribute('aria-label', 'Play');
   updateTimeline();
 }
 
@@ -309,20 +362,21 @@ async function startPlayback() {
   if (!state.data || !state.notes.length || state.playing) return;
   ensureAudio(); if (!state.audio) return;
   await state.audio.resume();
-  if (state.synthPromise && !state.synthFailed) await state.synthPromise;
+  const originalPromise = loadOriginalBuffer();
+  await Promise.all([
+    state.synthPromise && !state.synthFailed ? state.synthPromise : Promise.resolve(null),
+    originalPromise,
+  ]);
   if (state.songTime >= state.data.duration - .02) state.songTime = 0;
-  const original = setupOriginalAudio();
-  if (original) {
-    try {
-      original.currentTime = state.songTime;
-      await original.play();
-    } catch (error) {
-      console.warn('Lecture de la source originale indisponible:', error);
-    }
-  }
-  state.originSong = state.songTime; state.originAudio = state.audio.currentTime;
-  state.nextNote = lowerBound(Math.max(0, state.songTime - .01)); state.playing = true;
-  ui.play.textContent = '❚❚'; ui.play.setAttribute('aria-label', 'Pause'); frame();
+  state.originSong = state.songTime;
+  state.originAudio = state.audio.currentTime + .065;
+  startOriginalBufferSource(state.originAudio, state.songTime);
+  // Include sustained notes that began before a seek position. Twelve seconds
+  // matches the scheduler's maximum rendered note length.
+  state.nextNote = lowerBound(Math.max(0, state.songTime - 12)); state.playing = true;
+  ui.play.textContent = '❚❚'; ui.play.setAttribute('aria-label', 'Pause');
+  applySourceMix();
+  frame();
 }
 
 function frame() {
@@ -338,7 +392,6 @@ function frame() {
 
 function seekTo(time) {
   const resume = state.playing; stopPlayback(false); state.songTime = clamp(time, 0, state.data.duration);
-  if (state.originalElement) { try { state.originalElement.currentTime = state.songTime; } catch (_) {} }
   updateTimeline(); if (resume) startPlayback();
 }
 
@@ -349,15 +402,24 @@ function updateTimeline() {
 
 function renderTracks() {
   ui.tracks.replaceChildren();
+  if (!state.data.tracks.length) {
+    const empty = document.createElement('div');
+    empty.className = 'ms-track-placeholder';
+    empty.textContent = ['queued', 'loading', 'transcribing'].includes(state.data.state)
+      ? 'Instrument tracks will appear as transcription progresses.'
+      : 'Tracks will appear after transcription.';
+    ui.tracks.append(empty);
+    return;
+  }
   state.data.tracks.forEach((track) => {
     const row = document.createElement('article'); row.className = 'ms-track-row'; row.dataset.track = track.id; row.style.setProperty('--track', track.color);
     const dot = document.createElement('i'); dot.className = 'ms-track-color';
     const copy = document.createElement('div'); copy.className = 'ms-track-copy';
     const name = document.createElement('strong'); name.textContent = track.name;
-    const meta = document.createElement('span'); meta.textContent = `${track.note_count.toLocaleString('fr-FR')} notes${track.is_drum ? ' · drums' : ''}`; copy.append(name, meta);
+    const meta = document.createElement('span'); meta.textContent = `${track.note_count.toLocaleString('en-US')} notes${track.is_drum ? ' · drums' : ''}`; copy.append(name, meta);
     if (!track.is_drum) {
       const select = document.createElement('select');
-      select.className = 'ms-program-select'; select.dataset.program = track.id; select.setAttribute('aria-label', `Timbre de ${track.name}`);
+      select.className = 'ms-program-select'; select.dataset.program = track.id; select.setAttribute('aria-label', `Sound for ${track.name}`);
       const selectedProgram = state.programOverrides.get(track.id) ?? track.program;
       GM_PROGRAMS.forEach(([program, label]) => {
         const option = document.createElement('option'); option.value = String(program); option.textContent = label; option.selected = program === selectedProgram; select.append(option);
@@ -369,22 +431,23 @@ function renderTracks() {
     }
     const controls = document.createElement('div'); controls.className = 'ms-track-controls';
     ['solo', 'mute'].forEach((kind) => { const button = document.createElement('button'); button.type = 'button'; button.dataset.mix = kind; button.textContent = kind === 'solo' ? 'S' : 'M'; button.title = kind === 'solo' ? 'Solo' : 'Mute'; button.setAttribute('aria-pressed', 'false'); controls.append(button); });
-    const download = document.createElement('a'); download.textContent = '↓'; download.title = `Télécharger ${track.name}`;
+    const download = document.createElement('a'); download.textContent = '↓'; download.title = `Download ${track.name}`;
     if (track.midi) { download.href = track.midi; download.download = `${track.key}.mid`; } else download.setAttribute('aria-disabled', 'true');
     controls.append(download); row.append(dot, copy, controls); ui.tracks.append(row);
   });
 }
 
 function drawRoll() {
-  if (!state.data || !state.data.tracks.length || state.activeTab !== 'roll') return;
+  if (!state.data || state.activeTab !== 'roll') return;
   const canvas = ui.canvas, rect = canvas.getBoundingClientRect(); if (!rect.width) return;
   const dpr = Math.min(window.devicePixelRatio || 1, 2), width = Math.round(rect.width * dpr), height = Math.round(rect.height * dpr);
   if (canvas.width !== width || canvas.height !== height) { canvas.width = width; canvas.height = height; }
   const ctx = canvas.getContext('2d'); ctx.setTransform(dpr, 0, 0, dpr, 0, 0); const w = rect.width, h = rect.height;
   ctx.clearRect(0, 0, w, h); ctx.fillStyle = '#090c11'; ctx.fillRect(0, 0, w, h);
   const allPitches = state.notes.map((item) => item.note.pitch); const minPitch = Math.min(...allPitches, 48) - 2, maxPitch = Math.max(...allPitches, 72) + 2, pitchSpan = maxPitch - minPitch + 1;
-  const zoom = Number(ui.zoom.value), span = Math.max(.1, state.data.duration / zoom);
-  const start = zoom === 1 ? 0 : clamp(state.songTime - span * .32, 0, Math.max(0, state.data.duration - span)); const end = Math.min(state.data.duration, start + span);
+  const duration = Math.max(.1, state.data.duration);
+  const zoom = Number(ui.zoom.value), span = Math.max(.1, duration / zoom);
+  const start = zoom === 1 ? 0 : clamp(state.songTime - span * .32, 0, Math.max(0, duration - span)); const end = Math.min(duration, start + span);
   state.viewStart = start; state.viewEnd = end;
   ctx.lineWidth = 1; ctx.strokeStyle = 'rgba(255,255,255,.055)';
   for (let pitch = minPitch; pitch <= maxPitch; pitch++) { const y = h - ((pitch - minPitch + 1) / pitchSpan) * h; if ([1,3,6,8,10].includes(pitch % 12)) { ctx.fillStyle = 'rgba(255,255,255,.012)'; ctx.fillRect(0, y - h / pitchSpan, w, h / pitchSpan); } if (pitch % 12 === 0) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke(); } }
@@ -406,6 +469,7 @@ function render(data) {
   if (state.playing && previousSignature !== nextSignature) stopPlayback(true);
   if (audioChanged) {
     stopPlayback(true);
+    resetOriginalAudio();
     state.synth?.stopAll();
     state.channels.clear();
     state.nextChannel = 0;
@@ -415,15 +479,15 @@ function render(data) {
   root.dataset.state = data.state; const active = ['queued', 'loading', 'transcribing'].includes(data.state);
   const hasResults = data.tracks.length > 0 || active;
   ui.empty.hidden = hasResults; ui.workspace.hidden = !hasResults;
-  ui.state.textContent = ({ idle: 'Prêt', transcribing: 'Transcription', complete: 'MIDI prêt', ready: 'Terminé', error: 'Erreur', notation_error: 'MIDI prêt' })[data.state] || data.state;
-  ui.status.textContent = data.status; ui.audioName.textContent = data.audio_name || 'Aucun morceau';
-  ui.summary.textContent = data.audio_name ? `${data.note_count.toLocaleString('fr-FR')} notes · ${data.tracks.length} pistes` : '—';
+  ui.state.textContent = ({ idle: 'Ready for audio', queued: 'ZeroGPU queued', loading: 'Loading model', transcribing: 'Transcribing', complete: 'MIDI ready', ready: 'Score ready', error: 'Error', notation_error: 'MIDI ready' })[data.state] || data.state;
+  ui.status.textContent = data.status; ui.audioName.textContent = data.audio_name || 'Your transcription';
+  ui.summary.textContent = data.audio_name ? `${data.note_count.toLocaleString('en-US')} notes · ${data.tracks.length} tracks` : '—';
   ui.progress.hidden = !active; ui.progressLabel.textContent = data.status; ui.progressValue.textContent = `${Math.round(data.progress * 100)}%`; ui.progressBar.style.width = `${data.progress * 100}%`;
   ui.duration.textContent = formatTime(data.duration); ui.seek.max = String(Math.max(.01, data.duration));
-  setText('[data-field="track-count"]', `${data.tracks.length} piste${data.tracks.length > 1 ? 's' : ''}`);
-  setText('[data-field="info-duration"]', formatTime(data.duration)); setText('[data-field="note-count"]', data.note_count ? data.note_count.toLocaleString('fr-FR') : '—');
+  setText('[data-field="track-count"]', data.tracks.length ? `${data.tracks.length} track${data.tracks.length > 1 ? 's' : ''}` : 'No tracks yet');
+  setText('[data-field="info-duration"]', formatTime(data.duration)); setText('[data-field="note-count"]', data.note_count ? data.note_count.toLocaleString('en-US') : '—');
   setText('[data-field="info-tracks"]', data.tracks.length || '—'); setText('[data-field="elapsed"]', data.elapsed ? `${data.elapsed.toFixed(1)} s` : '—');
-  const pitches = state.notes.map((item) => item.note.pitch); setText('[data-field="pitch-range"]', pitches.length ? `${noteName(Math.min(...pitches))} → ${noteName(Math.max(...pitches))}` : 'En attente de notes');
+  const pitches = state.notes.map((item) => item.note.pitch); setText('[data-field="pitch-range"]', pitches.length ? `${noteName(Math.min(...pitches))} → ${noteName(Math.max(...pitches))}` : 'Waiting for notes');
   state.muted.forEach((id) => { if (!data.tracks.some((track) => track.id === id)) state.muted.delete(id); }); state.solo.forEach((id) => { if (!data.tracks.some((track) => track.id === id)) state.solo.delete(id); });
   renderTracks(); rebuildGains();
   ui.score.replaceChildren();
@@ -435,7 +499,7 @@ function render(data) {
   const stem = (data.audio_name || 'muscriptor').replace(/\.[^.]+$/, '');
   updateDownload('[data-download="midi"]', data.full_midi, `${stem}.mid`); updateDownload('[data-download="musicxml"]', notation.musicxml || '', `${stem}.musicxml`); updateDownload('[data-download="svg"]', notation.svg || '', `${stem}.svg`);
   ui.play.disabled = !state.notes.length; ui.stop.disabled = !state.notes.length; updateTimeline();
-  if (state.audio) setupOriginalAudio();
+  if (state.audio) discoverOriginalAudio();
   applySourceMix();
   if (data.state === 'ready') switchTab('score');
   announce(`${ui.state.textContent}. ${data.status}`);
@@ -445,14 +509,14 @@ ui.play.addEventListener('click', () => {
   if (state.playing) stopPlayback(false);
   else startPlayback().catch((error) => {
     console.error(error);
-    setSynthStatus('Lecture impossible', 'error');
+    setSynthStatus('Playback unavailable', 'error');
   });
 });
 ui.stop.addEventListener('click', () => stopPlayback(true));
 ui.seek.addEventListener('input', () => state.data && seekTo(Number(ui.seek.value)));
 ui.volume.addEventListener('input', () => { if (state.master && state.audio) state.master.gain.setTargetAtTime(Number(ui.volume.value), state.audio.currentTime, .02); });
 ui.sourceMix.addEventListener('input', () => { state.sourceMix = Number(ui.sourceMix.value); applySourceMix(); });
-ui.stereo.addEventListener('change', () => { state.stereo = ui.stereo.checked; applySourceMix(); announce(state.stereo ? 'Mode stéréo : original à gauche, MIDI à droite.' : 'Mode stéréo désactivé.'); });
+ui.stereo.addEventListener('change', () => { state.stereo = ui.stereo.checked; applySourceMix(); announce(state.stereo ? 'Split mode: original left, MIDI right.' : 'Split mode off.'); });
 $$('[data-source]').forEach((button) => button.addEventListener('click', () => {
   state.sourceMix = button.dataset.source === 'original' ? 0 : 1;
   ui.sourceMix.value = String(state.sourceMix);
@@ -473,7 +537,7 @@ ui.tracks.addEventListener('change', (event) => {
     state.synth.stopAll();
     state.synth.programChange(channel, program);
   }
-  announce(`Timbre changé : ${select.options[select.selectedIndex].textContent}.`);
+  announce(`Sound changed to ${select.options[select.selectedIndex].textContent}.`);
 });
 $$('[data-tab]').forEach((button) => button.addEventListener('click', () => switchTab(button.dataset.tab)));
 new ResizeObserver(() => drawRoll()).observe(ui.canvas);