trying end phrase detection and processing with python

app.py

@@ -31,6 +31,28 @@ async def process_midi(request: Request):
         print(f"🚨 Error processing MIDI: {str(e)}")
         return {"status": "error", "message": str(e)}
 
+
+@app.post("/midi_phrase")
+async def process_midi_phrase(request: Request):
+    try:
+        data = await request.json()
+        phrase = data["phrase"]  # List of MIDI notes
+
+        print(f"🎹 Received MIDI Phrase ({len(phrase)} notes)")
+
+        # 🚀 Example Processing: Transpose Each Note Up by 3 Semitones
+        generated_phrase = [
+            {"note": (note["note"] + 3) % 128, "velocity": note["velocity"]}
+            for note in phrase
+        ]
+
+        return {"status": "success", "generated_phrase": generated_phrase}
+
+    except Exception as e:
+        print(f"🚨 Error processing MIDI phrase: {str(e)}")
+        return {"status": "error", "message": str(e)}
+
+
 # ✅ JavaScript to Capture and Send MIDI Data
 midi_js = """
 <script>
@@ -134,35 +156,71 @@ function playMIDINote(note, velocity) {
 
 // ✅ Send MIDI Data to Python
 // ✅ Handle Incoming MIDI Messages and Send to Python
+let midiPhrase = [];  // ✅ Buffer to store incoming notes
+let phraseTimeout = null;  // ✅ Timer to detect phrase end
+
+// ✅ Handle Incoming MIDI Messages (Phrase Buffering)
 function handleMIDIMessage(event) {
-    let originalNote = event.data[1];
+    let note = event.data[1];
     let velocity = event.data[2];
+    let timestamp = event.timeStamp;
+
+    // ✅ Store note in buffer
+    midiPhrase.push({ note, velocity, timestamp });
+
+    console.log(`🎤 MIDI Input: Note ${note}, Velocity ${velocity} (Stored in phrase)`);
+
+    // ✅ Reset phrase timeout (wait for 1 second of silence)
+    if (phraseTimeout) clearTimeout(phraseTimeout);
+    phraseTimeout = setTimeout(sendPhraseToPython, 1000);
+}
 
-    let midiData = {
-        note: originalNote,
-        velocity: velocity
-    };
+// ✅ Send the Phrase to Python After 1 Second of Silence
+function sendPhraseToPython() {
+    if (midiPhrase.length === 0) return; // If no phrase, do nothing
 
-    console.log(`🎤 MIDI Input: Note ${originalNote}, Velocity ${velocity}`);
+    console.log("📨 Sending MIDI phrase to Python:", midiPhrase);
 
-    // ✅ Send MIDI data to Python backend
-    fetch("/midi_input", {
+    fetch("/midi_phrase", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(midiData)
+        body: JSON.stringify({ phrase: midiPhrase })
     })
     .then(response => response.json())
     .then(data => {
-        console.log("📨 MIDI sent to Python. Response:", data);
-
-        // ✅ Play the generated MIDI response
-        if (data.status === "success") {
-            playMIDINote(data.generated_note, data.generated_velocity);
+        console.log("📩 Python Response:", data);
+        if (data.generated_phrase) {
+            playGeneratedPhrase(data.generated_phrase);
         }
     })
-    .catch(error => console.error("🚨 Error sending MIDI data:", error));
+    .catch(error => console.error("🚨 Error sending MIDI phrase:", error));
+
+    // ✅ Clear the phrase buffer
+    midiPhrase = [];
+}
+
+// ✅ Play Generated MIDI Phrase from Python
+function playGeneratedPhrase(phrase) {
+    if (!selectedOutput) {
+        console.warn("⚠️ No MIDI output selected.");
+        return;
+    }
+
+    console.log("🎵 Playing Generated Phrase:", phrase);
+
+    phrase.forEach((noteData, index) => {
+        let delay = index * 200; // Add slight delay between notes
+        setTimeout(() => {
+            let noteOnMessage = [0x90, noteData.note, noteData.velocity];
+            let noteOffMessage = [0x80, noteData.note, 0];
+
+            selectedOutput.send(noteOnMessage);
+            setTimeout(() => selectedOutput.send(noteOffMessage), 300);
+        }, delay);
+    });
 }
 
+
 // ✅ Attach Generate Button Event
 function attachButtonEvent() {
     let generateButton = document.getElementById("generateButton");

working_interaction.py

@@ -0,0 +1,229 @@
+import gradio as gr
+from fastapi import FastAPI, Request
+import json
+# THIS VERSION WORKS
+# AND SENDS BACK A NOTE A FIFTH HIGHER THAN THE INPUT NOT ON THE SELECTED PORT
+#
+# ✅ Create FastAPI App
+app = FastAPI()
+
+
+# ✅ MIDI Processing Function in Python
+@app.post("/midi_input")
+async def process_midi(request: Request):
+    try:
+        midi_data = await request.json()
+        note = midi_data["note"]
+        velocity = midi_data["velocity"]
+
+        print(f"🎹 Received MIDI Note: {note}, Velocity: {velocity}")
+
+        # 🚀 Process MIDI data (example: Transpose + Generate New Notes)
+        generated_note = (note + 5) % 128  # Transpose up by 3 semitones
+        generated_velocity = min(velocity + 10, 127)  # Increase velocity slightly
+
+        # ✅ Send MIDI Response Back to Client
+        return {
+            "status": "success",
+            "generated_note": generated_note,
+            "generated_velocity": generated_velocity,
+            "original_note": note
+        }
+
+    except Exception as e:
+        print(f"🚨 Error processing MIDI: {str(e)}")
+        return {"status": "error", "message": str(e)}
+
+
+# ✅ JavaScript to Capture and Send MIDI Data
+midi_js = """
+<script>
+let midiAccess = null;
+let selectedInput = null;
+let selectedOutput = null;
+
+// ✅ Request MIDI Access
+navigator.requestMIDIAccess()
+    .then(access => {
+        console.log("✅ MIDI Access Granted!");
+        midiAccess = access;
+        updateMIDIDevices();
+        midiAccess.onstatechange = updateMIDIDevices;
+    })
+    .catch(err => console.error("🚨 MIDI API Error:", err));
+
+// ✅ Update MIDI Input & Output Menus
+function updateMIDIDevices() {
+    let inputSelect = document.getElementById("midiInput");
+    let outputSelect = document.getElementById("midiOutput");
+
+    if (!inputSelect || !outputSelect) {
+        console.error("❌ MIDI dropdowns not found!");
+        return;
+    }
+
+    // Clear existing options
+    inputSelect.innerHTML = '<option value="">Select MIDI Input</option>';
+    outputSelect.innerHTML = '<option value="">Select MIDI Output</option>';
+
+    // Populate MIDI Input Devices
+    midiAccess.inputs.forEach((input, key) => {
+        let option = document.createElement("option");
+        option.value = key;
+        option.textContent = input.name || `MIDI Input ${key}`;
+        inputSelect.appendChild(option);
+    });
+
+    // Populate MIDI Output Devices
+    midiAccess.outputs.forEach((output, key) => {
+        let option = document.createElement("option");
+        option.value = key;
+        option.textContent = output.name || `MIDI Output ${key}`;
+        outputSelect.appendChild(option);
+    });
+
+    console.log("🎛 Updated MIDI Input & Output devices.");
+}
+
+// ✅ Handle MIDI Input Selection
+function selectMIDIInput() {
+    let inputSelect = document.getElementById("midiInput");
+    let inputId = inputSelect.value;
+
+    if (selectedInput) {
+        selectedInput.onmidimessage = null;
+    }
+
+    if (midiAccess.inputs.has(inputId)) {
+        selectedInput = midiAccess.inputs.get(inputId);
+        selectedInput.onmidimessage = handleMIDIMessage;
+        console.log(`🎤 MIDI Input Selected: ${selectedInput.name}`);
+    }
+}
+
+// ✅ Handle MIDI Output Selection
+function selectMIDIOutput() {
+    let outputSelect = document.getElementById("midiOutput");
+    let outputId = outputSelect.value;
+
+    if (midiAccess.outputs.has(outputId)) {
+        selectedOutput = midiAccess.outputs.get(outputId);
+        console.log(`🎹 MIDI Output Selected: ${selectedOutput.name}`);
+    }
+}
+
+
+// ✅ Play a MIDI Note Sent Back from Python
+function playMIDINote(note, velocity) {
+    if (!selectedOutput) {
+        console.warn("⚠️ No MIDI output selected.");
+        return;
+    }
+
+    let noteOnMessage = [0x90, note, velocity];  // Note On
+    let noteOffMessage = [0x80, note, 0];  // Note Off
+
+    console.log(`🎵 Playing Generated MIDI Note ${note}, Velocity ${velocity}`);
+
+    try {
+        selectedOutput.send(noteOnMessage);
+        setTimeout(() => {
+            selectedOutput.send(noteOffMessage);
+            console.log(`🔇 Note Off ${note}`);
+        }, 500);
+    } catch (error) {
+        console.error("🚨 Error playing MIDI note:", error);
+    }
+}
+
+// ✅ Send MIDI Data to Python
+// ✅ Handle Incoming MIDI Messages and Send to Python
+function handleMIDIMessage(event) {
+    let originalNote = event.data[1];
+    let velocity = event.data[2];
+
+    let midiData = {
+        note: originalNote,
+        velocity: velocity
+    };
+
+    console.log(`🎤 MIDI Input: Note ${originalNote}, Velocity ${velocity}`);
+
+    // ✅ Send MIDI data to Python backend
+    fetch("/midi_input", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(midiData)
+    })
+    .then(response => response.json())
+    .then(data => {
+        console.log("📨 MIDI sent to Python. Response:", data);
+
+        // ✅ Play the generated MIDI response
+        if (data.status === "success") {
+            playMIDINote(data.generated_note, data.generated_velocity);
+        }
+    })
+    .catch(error => console.error("🚨 Error sending MIDI data:", error));
+}
+
+// ✅ Attach Generate Button Event
+function attachButtonEvent() {
+    let generateButton = document.getElementById("generateButton");
+
+    if (generateButton) {
+        console.log("✅ Generate button found! Attaching event listener...");
+
+        generateButton.addEventListener("click", function () {
+            console.log("🎹 Generate button clicked.");
+
+            if (!selectedOutput) {
+                alert("⚠️ Please select a MIDI Output first!");
+                return;
+            }
+
+            let randomNote = 60 + Math.floor(Math.random() * 12);  // Random note from C4 to B4
+            console.log(`🎵 Generating MIDI Note: ${randomNote}`);
+            playMIDINote(randomNote, 100);
+        });
+
+    } else {
+        console.log("⏳ Waiting for button to be available...");
+        setTimeout(attachButtonEvent, 500);  // Try again in 500ms
+    }
+}
+
+// ✅ Ensure the Button and Menus Are Loaded
+window.onload = function() {
+    console.log("✅ Page fully loaded. Checking for elements...");
+    updateMIDIDevices();
+    attachButtonEvent();
+};
+</script>
+
+<!-- 🎛 MIDI Input & 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>
+
+<!-- 🎶 "Generate MIDI" Button -->
+<button id="generateButton">🎵 Generate MIDI Note</button>
+
+"""
+
+# ✅ Inject JavaScript and HTML
+with gr.Blocks() as demo:
+    gr.HTML(midi_js)
+
+# ✅ Mount FastAPI with Gradio
+app = gr.mount_gradio_app(app, demo, path="/")
+
+# ✅ Run the app
+if __name__ == "__main__":
+    import uvicorn
+
+    uvicorn.run(app, host="0.0.0.0", port=7860)