trying midi api

app.py

@@ -1,7 +1,151 @@
 import gradio as gr
+import json
+from flask import Flask, request, jsonify
+import threading
 
-def greet(name):
-    return "Hello " + name + "!!"
+# Flask app for MIDI handling
+from flask_cors import CORS
 
-demo = gr.Interface(fn=greet, inputs="text", outputs="text")
-demo.launch()
+app = Flask(__name__)
+CORS(app, resources={r"/*": {"origins": "*"}})  # Allow all origins
+
+
+# Shared MIDI data with thread lock
+midi_data = {"note": "-", "velocity": "-", "timestamp": "-"}
+midi_lock = threading.Lock()  # Lock for thread-safe access
+
+@app.route("/midi_input", methods=["POST"])
+def midi_input():
+    """Handles incoming MIDI data from JavaScript."""
+    global midi_data
+    data = request.json  # Get MIDI data from JavaScript
+    with midi_lock:  # Ensure thread-safe update
+        midi_data = {
+            "note": data.get("note", "-"),
+            "velocity": data.get("velocity", "-"),
+            "timestamp": data.get("timestamp", "-")
+        }
+    print(f"Received MIDI: {midi_data}")
+
+    # Example processing: Transpose note up by 2 semitones
+    processed_note = (int(midi_data["note"]) + 2) % 128
+
+    return jsonify({"processed_note": processed_note})
+
+
+# Start Flask server in a separate thread
+def run_flask():
+    app.run(port=5000, debug=False, use_reloader=False)
+
+
+threading.Thread(target=run_flask, daemon=True).start()
+
+# JavaScript Code for MIDI Handling (Embedded)
+midi_js = """
+<script>
+let midiAccess;
+let selectedInput = null;
+let selectedOutput = null;
+
+// Function to handle MIDI messages
+function handleMIDIMessage(event) {
+    let data = {
+        note: event.data[1],  // MIDI Note Number
+        velocity: event.data[2],  // Note Velocity
+        timestamp: event.timeStamp
+    };
+
+    // Send MIDI data to Python backend
+    fetch("http://127.0.0.1:5000/midi_input", {
+        method: "POST",
+        body: JSON.stringify(data),
+        headers: { "Content-Type": "application/json" }
+    }).then(response => response.json())
+    .then(processed => console.log("Processed MIDI:", processed));
+    window.postMessage(data, "*");
+
+}
+
+// Function to update available MIDI devices
+function updateMIDIDevices() {
+    let inputSelect = document.getElementById("midiInput");
+    let outputSelect = document.getElementById("midiOutput");
+
+    inputSelect.innerHTML = '<option value="">Select MIDI Input</option>';
+    outputSelect.innerHTML = '<option value="">Select MIDI Output</option>';
+
+    midiAccess.inputs.forEach((input, key) => {
+        let option = document.createElement("option");
+        option.value = key;
+        option.textContent = input.name;
+        inputSelect.appendChild(option);
+    });
+
+    midiAccess.outputs.forEach((output, key) => {
+        let option = document.createElement("option");
+        option.value = key;
+        option.textContent = output.name;
+        outputSelect.appendChild(option);
+    });
+}
+
+// Function to handle input selection
+function selectMIDIInput() {
+    let inputSelect = document.getElementById("midiInput");
+    let inputId = inputSelect.value;
+
+    if (selectedInput) {
+        selectedInput.onmidimessage = null;
+    }
+
+    if (inputId && midiAccess.inputs.has(inputId)) {
+        selectedInput = midiAccess.inputs.get(inputId);
+        selectedInput.onmidimessage = handleMIDIMessage;
+        console.log(`MIDI Input selected: ${selectedInput.name}`);
+    }
+}
+
+// Function to handle output selection
+function selectMIDIOutput() {
+    let outputSelect = document.getElementById("midiOutput");
+    let outputId = outputSelect.value;
+
+    if (outputId && midiAccess.outputs.has(outputId)) {
+        selectedOutput = midiAccess.outputs.get(outputId);
+        console.log(`MIDI Output selected: ${selectedOutput.name}`);
+    }
+}
+
+// Request MIDI Access
+navigator.requestMIDIAccess()
+    .then(access => {
+        midiAccess = access;
+        updateMIDIDevices();
+        midiAccess.onstatechange = updateMIDIDevices;
+    })
+    .catch(err => console.log("MIDI API Error: ", err));
+</script>
+
+<!-- MIDI Input and Output Selection -->
+<div>
+    <label for="midiInput">MIDI Input: </label>
+    <select id="midiInput" onchange="selectMIDIInput()"></select>
+
+    <label for="midiOutput">MIDI Output: </label>
+    <select id="midiOutput" onchange="selectMIDIOutput()"></select>
+</div>
+"""
+
+
+# Gradio UI
+def display_midi():
+    """Returns real-time MIDI data for display in Gradio."""
+    return f"Note: {midi_data['note']}, Velocity: {midi_data['velocity']}"
+
+
+with gr.Blocks() as demo:
+    gr.HTML(midi_js)  # Inject JavaScript into the Gradio UI
+    gr.Interface(fn=display_midi, inputs=[], outputs="text", live=True)
+
+# Launch Gradio
+demo.launch(share=True, server_port=7860)

app_basic.py

@@ -0,0 +1,7 @@
+import gradio as gr
+
+def greet(name):
+    return "Hello " + name + "!!"
+
+demo = gr.Interface(fn=greet, inputs="text", outputs="text")
+demo.launch()