Improve browsing controls and MIDI output

README.md

@@ -15,4 +15,11 @@ FastAPI web app for browsing the musical theme dictionary, playing catalog
 themes, generating new themes with variable-order Markov or transformer engines,
 and exporting MIDI, ABC, MusicXML, and Verovio-rendered SVG scores.
 
+This Space is based on Harold Barlow and Sam Morgenstern's *A Dictionary of
+Musical Themes* (Crown Publishers, New York, 1949), a printed reference catalog
+of classical themes intended for identifying works from short melodic incipits.
+The digitized working corpus lives in the GitHub repository
+[`fpachet/musical_themes`](https://github.com/fpachet/musical_themes), including
+the `midis/` directory used by the app.
+
 The Docker image starts `apps.theme_lab.app` on port 7860.

apps/theme_lab/app.py

@@ -142,6 +142,37 @@ def stats() -> dict[str, object]:
     }
 
 
+@app.get("/api/composers")
+def list_composers(
+    q: str = "",
+    limit: int = Query(12, ge=1, le=40),
+) -> dict[str, object]:
+    params: list[object] = []
+    where = ["parse_error IS NULL", "composer IS NOT NULL", "composer != ''"]
+    if q.strip():
+        words = [word for word in q.strip().split() if word]
+        for word in words:
+            where.append("composer LIKE ?")
+            params.append(f"%{word}%")
+    params.append(limit)
+    sql = f"""
+        SELECT composer, COUNT(*) AS count
+        FROM themes
+        WHERE {' AND '.join(where)}
+        GROUP BY composer
+        ORDER BY
+            CASE WHEN composer LIKE ? THEN 0 ELSE 1 END,
+            count DESC,
+            composer
+        LIMIT ?
+    """
+    starts_with = f"{q.strip()}%" if q.strip() else "%"
+    query_params = [*params[:-1], starts_with, params[-1]]
+    with connect_db() as conn:
+        rows = conn.execute(sql, query_params).fetchall()
+    return {"items": [dict(row) for row in rows]}
+
+
 @app.get("/api/themes")
 def list_themes(
     q: str = "",

apps/theme_lab/static/app.js

@@ -5,6 +5,9 @@ const state = {
   currentSource: null,
   audioContext: null,
   scheduled: [],
+  midiAccess: null,
+  midiOutputId: "",
+  composerSuggestTimer: null,
 };
 
 const $ = (id) => document.getElementById(id);
@@ -19,6 +22,11 @@ function setStatus(message, ok = true) {
   el.className = ok ? "status-ok" : "status-bad";
 }
 
+function debounceComposerSuggestions() {
+  window.clearTimeout(state.composerSuggestTimer);
+  state.composerSuggestTimer = window.setTimeout(loadComposerSuggestions, 160);
+}
+
 async function api(path, options = {}) {
   const response = await fetch(path, {
     headers: { "Content-Type": "application/json" },
@@ -37,6 +45,19 @@ async function api(path, options = {}) {
   return response.json();
 }
 
+async function loadComposerSuggestions() {
+  const query = $("composerInput").value.trim();
+  const payload = await api(`/api/composers?${new URLSearchParams({ q: query, limit: 14 })}`);
+  const list = $("composerSuggestions");
+  list.replaceChildren();
+  for (const item of payload.items) {
+    const option = document.createElement("option");
+    option.value = item.composer;
+    option.label = `${item.count} themes`;
+    list.append(option);
+  }
+}
+
 async function loadStats() {
   const [stats, health] = await Promise.all([api("/api/stats"), api("/api/health")]);
   $("statsLine").textContent = `${stats.themes.toLocaleString()} themes, ${stats.notes.toLocaleString()} notes`;
@@ -138,15 +159,109 @@ function midiToHz(pitch) {
 function stopPlayback() {
   for (const node of state.scheduled) {
     try {
-      node.stop();
+      if (typeof node === "number") {
+        window.clearTimeout(node);
+      } else {
+        node.stop();
+      }
     } catch {
       // Already stopped.
     }
   }
   state.scheduled = [];
+  const output = selectedMidiOutput();
+  if (output) {
+    if (typeof output.clear === "function") output.clear();
+    for (let channel = 0; channel < 16; channel += 1) {
+      output.send([0xb0 + channel, 123, 0]);
+      output.send([0xb0 + channel, 120, 0]);
+    }
+  }
+}
+
+function selectedMidiOutput() {
+  if (!state.midiAccess || !state.midiOutputId) return null;
+  return state.midiAccess.outputs.get(state.midiOutputId) || null;
+}
+
+async function requestMidiAccess() {
+  if (!("requestMIDIAccess" in navigator)) {
+    setStatus("Web MIDI is not available in this browser", false);
+    return null;
+  }
+  if (!state.midiAccess) {
+    state.midiAccess = await navigator.requestMIDIAccess();
+    state.midiAccess.addEventListener("statechange", renderMidiOutputs);
+  }
+  renderMidiOutputs();
+  return state.midiAccess;
+}
+
+function renderMidiOutputs() {
+  const select = $("midiOutputSelect");
+  const previous = select.value || state.midiOutputId;
+  select.replaceChildren();
+
+  const browser = document.createElement("option");
+  browser.value = "";
+  browser.textContent = "Browser audio";
+  select.append(browser);
+
+  if (state.midiAccess) {
+    for (const output of state.midiAccess.outputs.values()) {
+      const option = document.createElement("option");
+      option.value = output.id;
+      option.textContent = output.name || output.manufacturer || output.id;
+      select.append(option);
+    }
+  }
+
+  if ([...select.options].some((option) => option.value === previous)) {
+    select.value = previous;
+  }
+  state.midiOutputId = select.value;
+}
+
+async function refreshMidiOutputs() {
+  try {
+    await requestMidiAccess();
+    const count = state.midiAccess ? state.midiAccess.outputs.size : 0;
+    setStatus(count ? `${count} MIDI output${count === 1 ? "" : "s"}` : "No MIDI outputs found", Boolean(count));
+  } catch (error) {
+    setStatus(error.message, false);
+  }
+}
+
+function playMidiNotes(notes, bpm = 120, output) {
+  stopPlayback();
+  const secondsPerBeat = 60 / bpm;
+  const startAt = performance.now() + 70;
+  for (const note of notes) {
+    const pitch = Number(note.pitch);
+    const velocity = Math.max(1, Math.min(127, Number(note.velocity || 72)));
+    const begin = startAt + Number(note.start_beat) * secondsPerBeat * 1000;
+    const duration = Math.max(0.04, Number(note.duration_beats) * secondsPerBeat);
+    const end = begin + duration * 1000;
+    output.send([0x90, pitch, velocity], begin);
+    output.send([0x80, pitch, 0], end);
+  }
+  const lastEnd = Math.max(
+    0,
+    ...notes.map((note) => (Number(note.start_beat) + Number(note.duration_beats)) * secondsPerBeat * 1000),
+  );
+  const timeout = window.setTimeout(() => {
+    state.scheduled = state.scheduled.filter((item) => item !== timeout);
+  }, lastEnd + 200);
+  state.scheduled.push(timeout);
 }
 
 async function playNotes(notes, bpm = 120) {
+  const midiOutput = selectedMidiOutput();
+  if (midiOutput) {
+    playMidiNotes(notes, bpm, midiOutput);
+    return;
+  }
+
   stopPlayback();
   if (!state.audioContext) {
     state.audioContext = new AudioContext();
@@ -286,6 +401,13 @@ function bindEvents() {
   $("playTheme").addEventListener("click", playCurrentTheme);
   $("stopPlayback").addEventListener("click", stopPlayback);
   $("generateButton").addEventListener("click", generate);
+  $("refreshMidiOutputs").addEventListener("click", refreshMidiOutputs);
+  $("midiOutputSelect").addEventListener("change", (event) => {
+    state.midiOutputId = event.target.value;
+    stopPlayback();
+  });
+  $("composerInput").addEventListener("input", debounceComposerSuggestions);
+  $("composerInput").addEventListener("focus", loadComposerSuggestions);
 }
 
 async function init() {

apps/theme_lab/static/index.html

@@ -25,7 +25,8 @@
           <div class="field-row">
             <label>
               <span>Composer</span>
-              <input id="composerInput" type="search" placeholder="Bach" autocomplete="off" />
+              <input id="composerInput" type="search" placeholder="Bach" list="composerSuggestions" autocomplete="off" />
+              <datalist id="composerSuggestions"></datalist>
             </label>
             <label>
               <span>Key</span>
@@ -69,6 +70,15 @@
               <button id="stopPlayback" class="secondary">Stop</button>
             </div>
           </div>
+          <div class="playback-row">
+            <label>
+              <span>Output</span>
+              <select id="midiOutputSelect">
+                <option value="">Browser audio</option>
+              </select>
+            </label>
+            <button id="refreshMidiOutputs" type="button" class="secondary">Scan MIDI</button>
+          </div>
           <div class="score-surface">
             <img id="scoreImage" alt="" />
             <div id="emptyScore" class="empty-state">No score selected</div>

apps/theme_lab/static/styles.css

@@ -25,6 +25,12 @@ body {
   letter-spacing: 0;
 }
 
+@media (min-width: 941px) {
+  body {
+    overflow: hidden;
+  }
+}
+
 button,
 input,
 select {
@@ -73,7 +79,8 @@ a:hover {
 .app-shell {
   display: grid;
   grid-template-columns: minmax(320px, 390px) 1fr;
-  min-height: 100vh;
+  height: 100vh;
+  min-height: 0;
 }
 
 .sidebar {
@@ -81,7 +88,9 @@ a:hover {
   flex-direction: column;
   gap: 14px;
   min-width: 0;
+  min-height: 0;
   padding: 18px;
+  overflow: hidden;
   background: #eef1f5;
   border-right: 1px solid var(--line);
 }
@@ -159,7 +168,8 @@ select {
 
 .field-row,
 .toolbar,
-.export-row {
+.export-row,
+.playback-row {
   display: flex;
   gap: 8px;
   align-items: center;
@@ -171,9 +181,12 @@ select {
 
 .theme-list {
   display: grid;
+  flex: 1;
   gap: 8px;
+  min-height: 0;
   overflow: auto;
   padding-right: 2px;
+  overscroll-behavior: contain;
 }
 
 .theme-item {
@@ -233,6 +246,8 @@ select {
   grid-template-rows: minmax(380px, 58vh) minmax(320px, auto);
   gap: 16px;
   min-width: 0;
+  min-height: 0;
+  overflow: auto;
   padding: 18px;
 }
 
@@ -255,6 +270,7 @@ select {
   flex: 1;
   min-height: 260px;
   overflow: auto;
+  overscroll-behavior: contain;
   border: 1px solid var(--line);
   border-radius: 8px;
   background: #fff;
@@ -287,6 +303,15 @@ select {
   flex-wrap: wrap;
 }
 
+.playback-row {
+  align-items: end;
+}
+
+.playback-row label {
+  max-width: 320px;
+  flex: 1;
+}
+
 .export-row a {
   border: 1px solid var(--line);
   border-radius: 6px;
@@ -361,15 +386,23 @@ select {
 @media (max-width: 940px) {
   .app-shell {
     grid-template-columns: 1fr;
+    height: auto;
+    min-height: 100vh;
   }
 
   .sidebar {
     border-right: 0;
     border-bottom: 1px solid var(--line);
+    overflow: visible;
+  }
+
+  .theme-list {
+    max-height: 45vh;
   }
 
   .workspace {
     grid-template-rows: auto auto;
+    overflow: visible;
   }
 
   .generator-grid {
@@ -379,7 +412,8 @@ select {
 
 @media (max-width: 520px) {
   .field-row,
-  .toolbar {
+  .toolbar,
+  .playback-row {
     flex-wrap: wrap;
   }