Update app.py

app.py

@@ -1,8 +1,10 @@
 import gradio as gr
+import mido
+
 import glob
 
-def load_javascript():
-    scripts_list = glob.glob("javascript_app.js")
+def load_javascript(dir="javascript"):
+    scripts_list = glob.glob(f"{dir}/*.js")
     javascript = ""
     for path in scripts_list:
         with open(path, "r", encoding="utf8") as jsfile:
@@ -19,3 +21,47 @@ def load_javascript():
     gr.routes.templates.TemplateResponse = template_response
 
 load_javascript()
+
+
+
+def process_midi(file):
+    midi = mido.MidiFile(file.name)
+    events = []
+
+    for i, track in enumerate(midi.tracks):
+        absolute_time = 0
+        for msg in track:
+            absolute_time += msg.time
+            if msg.type == 'note_on' and msg.velocity > 0:
+                events.append(['note', absolute_time, i, msg.time, msg.channel, msg.note, msg.velocity])
+    
+    return events
+
+def play_midi(file):
+    events = process_midi(file)
+    script = f"""
+        <script>
+            const midiVisualizer = document.querySelector('midi-visualizer');
+            if (midiVisualizer) {{
+                midiVisualizer.clearMidiEvents();
+                {''.join([f'midiVisualizer.appendMidiEvent({event});' for event in events])}
+                midiVisualizer.finishAppendMidiEvent();
+                midiVisualizer.play();
+            }}
+        </script>
+    """
+    return script
+
+# Gradio Interface
+with gr.Blocks() as demo:
+    gr.Markdown("""
+        # MIDI Visualizer
+        Upload a MIDI file to visualize the notes.
+    """)
+    midi_file = gr.File(label="Upload MIDI File", file_types=[".mid", ".midi"])
+    play_button = gr.Button("Play MIDI")
+    output = gr.HTML()
+    
+    play_button.click(play_midi, inputs=midi_file, outputs=output)
+
+demo.launch()