Fix MIDI player rendering via gr.HTML head/html_template/js_on_load custom component API

app.py

@@ -94,35 +94,62 @@ midi-player { width: 100%; display: block; margin-bottom: 8px; }
 midi-visualizer { width: 100%; display: block; overflow: auto; }
 """
 
-# Loads the html-midi-player web components (<midi-player> / <midi-visualizer>)
-# from Magenta.js + Tone.js via jsDelivr. Injected once alongside the player.
-_MIDI_PLAYER_SCRIPT = (
+# The html-midi-player web components (<midi-player> / <midi-visualizer>) rely
+# on Magenta.js + Tone.js. Following Gradio's official custom-HTML-components
+# guide (https://gradio.app/guides/custom-HTML-components), the library is
+# loaded via the gr.HTML `head` parameter instead of embedding <script> tags in
+# the component value — Gradio sanitizes value HTML and strips <script> tags,
+# which is why the raw-HTML approach never mounted the web components.
+_MIDI_PLAYER_HEAD = (
     '<script src="https://cdn.jsdelivr.net/combine/'
     "npm/tone@14.7.58,"
     "npm/@magenta/music@1.23.1/es6/core.js,"
     'npm/html-midi-player@1.5.0"></script>'
 )
 
+# Static markup for the player/visualizer. js_on_load wires the transcribed
+# MIDI (a base64 data URI passed as the component value) into the <midi-player>
+# and links it to the <midi-visualizer> so both mount and render.
+_MIDI_PLAYER_TEMPLATE = (
+    '<div class="midi-player-container">'
+    '<midi-player sound-font visualizer=".midi-visualizer"></midi-player>'
+    '<midi-visualizer class="midi-visualizer" type="piano-roll"></midi-visualizer>'
+    "</div>"
+)
+
+# Runs once when the component loads. `element` is the component's DOM node,
+# `props.value` is the base64 data URI (or "" when there's nothing yet).
+# `watch('value', ...)` re-runs the sync every time the server pushes a new
+# value (i.e. after each transcription), so the web components actually update.
+_MIDI_PLAYER_JS = """
+function syncPlayer() {
+    const player = element.querySelector('midi-player');
+    const container = element.querySelector('.midi-player-container');
+    if (!player || !container) { return; }
+    if (props.value) {
+        container.style.display = 'block';
+        player.src = props.value;
+    } else {
+        container.style.display = 'none';
+        player.removeAttribute('src');
+    }
+}
+syncPlayer();
+watch('value', syncPlayer);
+"""
 
-def _midi_player_html(midi_bytes: bytes | None) -> str:
-    """Build an HTML snippet that visualizes and plays back a MIDI file.
+
+def _midi_player_src(midi_bytes: bytes | None) -> str:
+    """Return the transcribed MIDI as a base64 data URI for the player.
 
     The MIDI data is embedded directly as a base64 data URI so it needs no
-    separate file-serving route. Uses the html-midi-player web components
-    (Magenta.js <midi-player> / <midi-visualizer>).
+    separate file-serving route. The <midi-player> / <midi-visualizer> web
+    components consume this via the gr.HTML custom component's js_on_load.
     """
     if not midi_bytes:
         return ""
     b64 = base64.b64encode(midi_bytes).decode("ascii")
-    src = f"data:audio/midi;base64,{b64}"
-    return (
-        f"{_MIDI_PLAYER_SCRIPT}"
-        '<div class="midi-player-container">'
-        f'<midi-player src="{src}" sound-font '
-        'visualizer=".midi-visualizer"></midi-player>'
-        '<midi-visualizer class="midi-visualizer" type="piano-roll"></midi-visualizer>'
-        "</div>"
-    )
+    return f"data:audio/midi;base64,{b64}"
 
 
 @spaces.GPU(duration=120)
@@ -190,9 +217,9 @@ def transcribe_audio(
         f"Play it back below or download the MIDI file."
     )
 
-    player_html = _midi_player_html(midi_bytes)
+    player_src = _midi_player_src(midi_bytes)
 
-    return tmp.name, summary, player_html
+    return tmp.name, summary, player_src
 
 
 with gr.Blocks() as demo:
@@ -239,7 +266,13 @@ with gr.Blocks() as demo:
 
         transcribe_btn = gr.Button("Transcribe", variant="primary")
 
-        midi_player = gr.HTML(label="MIDI playback & visualization")
+        midi_player = gr.HTML(
+            value="",
+            label="MIDI playback & visualization",
+            head=_MIDI_PLAYER_HEAD,
+            html_template=_MIDI_PLAYER_TEMPLATE,
+            js_on_load=_MIDI_PLAYER_JS,
+        )
         midi_output = gr.File(label="Download MIDI file")
         summary_output = gr.Textbox(label="Summary", interactive=False)