trying end phrase detection and processing with python

app.py

@@ -1,10 +1,13 @@
 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):
@@ -31,30 +34,6 @@ 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)")
-
-        # 🚀 Process Phrase: Example - Transpose Each Note Up by 3 Semitones
-        generated_phrase = [
-            {
-                "note": (note["note"] + 3) % 128,
-                "velocity": note["velocity"],
-                "duration": note["duration"],  # ✅ Keep original duration
-                "inter_onset": note["inter_onset"]  # ✅ Keep inter-onset time
-            }
-            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 = """
@@ -110,7 +89,7 @@ function updateMIDIDevices() {
 function selectMIDIInput() {
     let inputSelect = document.getElementById("midiInput");
     let inputId = inputSelect.value;
-    
+
     if (selectedInput) {
         selectedInput.onmidimessage = null;
     }
@@ -159,102 +138,35 @@ 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 activeNotes = new Map();  // ✅ Track active notes with start times
-let phraseTimeout = null;  // ✅ Timer to detect phrase end
-let lastNoteOnTime = null;  // ✅ Track previous note-on time for inter-onset calculation
-
-// ✅ Handle Incoming MIDI Messages (Phrase Buffering)
 function handleMIDIMessage(event) {
-    let command = event.data[0] & 0xf0; // Extract MIDI command
-    let note = event.data[1];
+    let originalNote = event.data[1];
     let velocity = event.data[2];
-    let timestamp = performance.now(); // ✅ Get precise timing
-
-    if (command === 0x90 && velocity > 0) {
-        // ✅ Note On: Store start time and inter-onset interval
-        let interOnsetTime = lastNoteOnTime ? timestamp - lastNoteOnTime : 0;
-        lastNoteOnTime = timestamp;
-        console.log(interOnsetTime);
-
-        activeNotes.set(note, timestamp); // ✅ Store note start time
-
-        midiPhrase.push({ note, velocity, start_time: timestamp, duration: null, inter_onset: interOnsetTime });
-
-        console.log(`🎤 Note ON: ${note}, Velocity ${velocity}, IOT ${interOnsetTime}ms`);
-    } 
-    else if (command === 0x80 || (command === 0x90 && velocity === 0)) {
-        // ✅ Note Off: Calculate duration and update phrase
-        if (activeNotes.has(note)) {
-            let startTime = activeNotes.get(note);
-            let duration = timestamp - startTime;
-            activeNotes.delete(note);
-
-            // ✅ Find the note in the phrase and update duration
-            let noteIndex = midiPhrase.findIndex(n => n.note === note && n.duration === null);
-            if (noteIndex !== -1) {
-                midiPhrase[noteIndex].duration = duration;
-                console.log(`🎹 Note OFF: ${note}, Duration ${duration}ms`);
-            }
-        }
-
-        // ✅ If no active notes, start phrase timeout (1s delay before sending)
-        if (activeNotes.size === 0) {
-            if (phraseTimeout) clearTimeout(phraseTimeout);
-            phraseTimeout = setTimeout(sendPhraseToPython, 1000);
-        }
-    }
-}
 
-// ✅ Send the Phrase to Python After 1 Second of Silence
-function sendPhraseToPython() {
-    if (midiPhrase.length === 0 || activeNotes.size > 0) return; // ✅ Do not send if notes are still active
+    let midiData = {
+        note: originalNote,
+        velocity: velocity
+    };
 
-    console.log("📨 Sending MIDI phrase to Python:", midiPhrase);
+    console.log(`🎤 MIDI Input: Note ${originalNote}, Velocity ${velocity}`);
 
-    fetch("/midi_phrase", {
+    // ✅ Send MIDI data to Python backend
+    fetch("/midi_input", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ phrase: midiPhrase })
+        body: JSON.stringify(midiData)
     })
     .then(response => response.json())
     .then(data => {
-        console.log("📩 Python Response:", data);
-        if (data.generated_phrase) {
-            playGeneratedPhrase(data.generated_phrase);
+        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 phrase:", error));
-
-    // ✅ Clear the phrase buffer
-    midiPhrase = [];
-    lastNoteOnTime = null;
-
+    .catch(error => console.error("🚨 Error sending MIDI data:", error));
 }
 
-// ✅ Play Generated MIDI Phrase from Python (Keeping Timing)
-function playGeneratedPhrase(phrase) {
-    if (!selectedOutput) {
-        console.warn("⚠️ No MIDI output selected.");
-        return;
-    }
-
-    console.log("🎵 Playing Generated Phrase:", phrase);
-
-    phrase.forEach((noteData, index) => {
-        let delay = noteData.inter_onset; // ✅ Use stored inter-onset time
-        setTimeout(() => {
-            let noteOnMessage = [0x90, noteData.note, noteData.velocity];
-            let noteOffMessage = [0x80, noteData.note, 0];
-
-            selectedOutput.send(noteOnMessage);
-            setTimeout(() => selectedOutput.send(noteOffMessage), noteData.duration); // ✅ Use stored duration
-        }, delay);
-    });
-}
-
-
 // ✅ Attach Generate Button Event
 function attachButtonEvent() {
     let generateButton = document.getElementById("generateButton");
@@ -264,7 +176,7 @@ function attachButtonEvent() {
 
         generateButton.addEventListener("click", function () {
             console.log("🎹 Generate button clicked.");
-            
+
             if (!selectedOutput) {
                 alert("⚠️ Please select a MIDI Output first!");
                 return;
@@ -310,7 +222,8 @@ with gr.Blocks() as demo:
 # ✅ Mount FastAPI with Gradio
 app = gr.mount_gradio_app(app, demo, path="/")
 
+# ✅ Run the app
 if __name__ == "__main__":
     import uvicorn
-    print("🚀 Starting FastAPI with Gradio...")
-    uvicorn.run(app, host="0.0.0.0", port=7860)
+
+    uvicorn.run(app, host="0.0.0.0", port=7860)

phrase_catching.py

@@ -0,0 +1,320 @@
+import gradio as gr
+from fastapi import FastAPI, Request
+import json
+
+# ✅ 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)}
+
+
+@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)")
+
+        # 🚀 Process Phrase: Example - Transpose Each Note Up by 3 Semitones
+        generated_phrase = [
+            {
+                "note": (note["note"] + 3) % 128,
+                "velocity": note["velocity"],
+                "duration": note["duration"],  # ✅ Keep original duration
+                "inter_onset": note["inter_onset"]  # ✅ Keep inter-onset time
+            }
+            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>
+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
+
+let midiPhrase = [];  // ✅ Buffer to store incoming notes
+let activeNotes = new Map();  // ✅ Track active notes with start times
+let phraseTimeout = null;  // ✅ Timer to detect phrase end
+let lastNoteOnTime = null;  // ✅ Track previous note-on time for inter-onset calculation
+
+// ✅ Handle Incoming MIDI Messages (Phrase Buffering)
+function handleMIDIMessage(event) {
+    let command = event.data[0] & 0xf0; // Extract MIDI command
+    let note = event.data[1];
+    let velocity = event.data[2];
+    let timestamp = performance.now(); // ✅ Get precise timing
+
+    if (command === 0x90 && velocity > 0) {
+        // ✅ Note On: Store start time and inter-onset interval
+        let interOnsetTime = lastNoteOnTime ? timestamp - lastNoteOnTime : 0;
+        lastNoteOnTime = timestamp;
+        console.log(interOnsetTime);
+
+        activeNotes.set(note, timestamp); // ✅ Store note start time
+
+        midiPhrase.push({ note, velocity, start_time: timestamp, duration: null, inter_onset: interOnsetTime });
+
+        console.log(`🎤 Note ON: ${note}, Velocity ${velocity}, IOT ${interOnsetTime}ms`);
+    } 
+    else if (command === 0x80 || (command === 0x90 && velocity === 0)) {
+        // ✅ Note Off: Calculate duration and update phrase
+        if (activeNotes.has(note)) {
+            let startTime = activeNotes.get(note);
+            let duration = timestamp - startTime;
+            activeNotes.delete(note);
+
+            // ✅ Find the note in the phrase and update duration
+            let noteIndex = midiPhrase.findIndex(n => n.note === note && n.duration === null);
+            if (noteIndex !== -1) {
+                midiPhrase[noteIndex].duration = duration;
+                console.log(`🎹 Note OFF: ${note}, Duration ${duration}ms`);
+            }
+        }
+
+        // ✅ If no active notes, start phrase timeout (1s delay before sending)
+        if (activeNotes.size === 0) {
+            if (phraseTimeout) clearTimeout(phraseTimeout);
+            phraseTimeout = setTimeout(sendPhraseToPython, 1000);
+        }
+    }
+}
+
+// ✅ Send the Phrase to Python After 1 Second of Silence
+function sendPhraseToPython() {
+    if (midiPhrase.length === 0 || activeNotes.size > 0) return; // ✅ Do not send if notes are still active
+
+    console.log("📨 Sending MIDI phrase to Python:", midiPhrase);
+
+    fetch("/midi_phrase", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ phrase: midiPhrase })
+    })
+    .then(response => response.json())
+    .then(data => {
+        console.log("📩 Python Response:", data);
+        if (data.generated_phrase) {
+            playGeneratedPhrase(data.generated_phrase);
+        }
+    })
+    .catch(error => console.error("🚨 Error sending MIDI phrase:", error));
+
+    // ✅ Clear the phrase buffer
+    midiPhrase = [];
+    lastNoteOnTime = null;
+
+}
+
+// ✅ Play Generated MIDI Phrase from Python (Keeping Timing)
+function playGeneratedPhrase(phrase) {
+    if (!selectedOutput) {
+        console.warn("⚠️ No MIDI output selected.");
+        return;
+    }
+
+    console.log("🎵 Playing Generated Phrase:", phrase);
+
+    phrase.forEach((noteData, index) => {
+        let delay = noteData.inter_onset; // ✅ Use stored inter-onset time
+        setTimeout(() => {
+            let noteOnMessage = [0x90, noteData.note, noteData.velocity];
+            let noteOffMessage = [0x80, noteData.note, 0];
+
+            selectedOutput.send(noteOnMessage);
+            setTimeout(() => selectedOutput.send(noteOffMessage), noteData.duration); // ✅ Use stored duration
+        }, delay);
+    });
+}
+
+
+// ✅ 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="/")
+
+if __name__ == "__main__":
+    import uvicorn
+
+    print("🚀 Starting FastAPI with Gradio...")
+    uvicorn.run(app, host="0.0.0.0", port=7860)