Upload app.py with huggingface_hub

app.py

@@ -8,6 +8,7 @@ import sys
 import io
 import json
 import re
+import base64
 from pathlib import Path
 
 from safetensors.torch import load_file
@@ -89,8 +90,40 @@ INSTRUMENT_CHOICES = sorted(MT3_FULL_PLUS_GROUP_NAMES.keys(), key=lambda k: MT3_
 CSS = """
 #col-container { max-width: 1100px; margin: 0 auto; }
 .dark .gradio-container { color: var(--body-text-color); }
+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 = (
+    '<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>'
+)
+
+
+def _midi_player_html(midi_bytes: bytes | None) -> str:
+    """Build an HTML snippet that visualizes and plays back a MIDI file.
+
+    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>).
+    """
+    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>"
+    )
+
 
 @spaces.GPU(duration=120)
 def transcribe_audio(
@@ -115,7 +148,7 @@ def transcribe_audio(
         temperature: Sampling temperature (only used when use_sampling is True).
     """
     if audio_path is None:
-        return None, "Please upload an audio file first."
+        return None, "Please upload an audio file first.", ""
 
     t0 = time.perf_counter()
 
@@ -128,7 +161,7 @@ def transcribe_audio(
             temperature=temperature,
         )
     except Exception as e:
-        return None, f"Transcription failed: {e}"
+        return None, f"Transcription failed: {e}", ""
 
     elapsed = time.perf_counter() - t0
 
@@ -154,10 +187,12 @@ def transcribe_audio(
     summary = (
         f"Transcription complete in {elapsed:.1f}s. "
         f"Found {note_count} notes across {len(instrument_set)} instrument program(s). "
-        f"Download the MIDI file below."
+        f"Play it back below or download the MIDI file."
     )
 
-    return tmp.name, summary
+    player_html = _midi_player_html(midi_bytes)
+
+    return tmp.name, summary, player_html
 
 
 with gr.Blocks() as demo:
@@ -204,13 +239,14 @@ with gr.Blocks() as demo:
 
         transcribe_btn = gr.Button("Transcribe", variant="primary")
 
+        midi_player = gr.HTML(label="MIDI playback & visualization")
         midi_output = gr.File(label="Download MIDI file")
         summary_output = gr.Textbox(label="Summary", interactive=False)
 
     transcribe_btn.click(
         fn=transcribe_audio,
         inputs=[audio_input, instrument_checkbox, use_sampling, temperature],
-        outputs=[midi_output, summary_output],
+        outputs=[midi_output, summary_output, midi_player],
         api_name="transcribe",
     )
 
@@ -218,9 +254,12 @@ with gr.Blocks() as demo:
         examples=[
             ["example_piano.wav", [], False, 1.0],
             ["example_melody.wav", [], False, 1.0],
+            ["example_medicine.mp3", [], False, 1.0],
+            ["example_organic_flow.mp3", [], False, 1.0],
+            ["example_water_afro_pop.mp3", [], False, 1.0],
         ],
         inputs=[audio_input, instrument_checkbox, use_sampling, temperature],
-        outputs=[midi_output, summary_output],
+        outputs=[midi_output, summary_output, midi_player],
         fn=transcribe_audio,
         cache_examples=True,
         cache_mode="lazy",