debugged the phrase playing js function

app.py

@@ -5,49 +5,35 @@ import json
 # ✅ Create FastAPI App
 app = FastAPI()
 
+# ✅ Variable to store transposition value
+transpose_amount = 0
 
-# ✅ 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)}
+# ✅ Update transposition value when slider changes
+def update_transposition(value):
+    global transpose_amount
+    transpose_amount = value
+    print(f"🎚️ Transposition set to: {transpose_amount}")
+    return f"Transposition: {transpose_amount}"
 
 
+# ✅ MIDI Processing Function in Python
 @app.post("/midi_phrase")
 async def process_midi_phrase(request: Request):
     try:
+        global transpose_amount
         data = await request.json()
-        phrase = data["phrase"]  # List of MIDI notes
+        phrase = data["phrase"]
 
-        print(f"🎹 Received MIDI Phrase ({len(phrase)} notes)")
+        print(f"🎹 Received MIDI Phrase ({len(phrase)} notes) with transposition {transpose_amount}")
 
-        # 🚀 Process Phrase: Example - Transpose Each Note Up by 3 Semitones
+        # 🚀 Apply transposition based on user selection
         generated_phrase = [
             {
-                "note": (note["note"] + 3) % 128,
+                "note": (note["note"] + transpose_amount) % 128,
                 "velocity": note["velocity"],
-                "duration": note["duration"],  # ✅ Keep original duration
-                "inter_onset": note["inter_onset"]  # ✅ Keep inter-onset time
+                "duration": note["duration"],
+                "inter_onset": note["inter_onset"]
             }
             for note in phrase
         ]
@@ -59,24 +45,17 @@ async def process_midi_phrase(request: Request):
         return {"status": "error", "message": str(e)}
 
 
-# ✅ JavaScript to Capture and Send MIDI Data
+# ✅ JavaScript & HTML for the Web UI
 midi_js = """
 <script>
-
-let style = document.createElement("style");
-style.innerHTML = `
-    * {
-        font-family: Arial, sans-serif !important;
-    }
-`;
-document.head.appendChild(style);
-console.log("✅ Applied fallback font to prevent 404 error.");
-
 let midiAccess = null;
 let selectedInput = null;
 let selectedOutput = null;
+let midiPhrase = [];
+let activeNotes = new Map();
+let phraseTimeout = null;
+let lastNoteOnTime = 0;
 
-// ✅ Request MIDI Access
 navigator.requestMIDIAccess()
     .then(access => {
         console.log("✅ MIDI Access Granted!");
@@ -86,21 +65,15 @@ navigator.requestMIDIAccess()
     })
     .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;
-    }
+    if (!inputSelect || !outputSelect) 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;
@@ -108,7 +81,6 @@ function updateMIDIDevices() {
         inputSelect.appendChild(option);
     });
 
-    // Populate MIDI Output Devices
     midiAccess.outputs.forEach((output, key) => {
         let option = document.createElement("option");
         option.value = key;
@@ -119,14 +91,11 @@ function updateMIDIDevices() {
     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 (selectedInput) selectedInput.onmidimessage = null;
 
     if (midiAccess.inputs.has(inputId)) {
         selectedInput = midiAccess.inputs.get(inputId);
@@ -135,7 +104,6 @@ function selectMIDIInput() {
     }
 }
 
-// ✅ Handle MIDI Output Selection
 function selectMIDIOutput() {
     let outputSelect = document.getElementById("midiOutput");
     let outputId = outputSelect.value;
@@ -146,73 +114,31 @@ function selectMIDIOutput() {
     }
 }
 
-
-// ✅ 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 command = event.data[0] & 0xf0;
     let note = event.data[1];
     let velocity = event.data[2];
-    let timestamp = performance.now(); // ✅ Get precise timing
+    let timestamp = performance.now();
 
     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
 
+        activeNotes.set(note, timestamp);
         midiPhrase.push({ note, velocity, start_time: timestamp, duration: null, inter_onset: interOnsetTime });
 
-        console.log(`🎤 Note ON: ${note}, Velocity ${velocity}, IOT ${interOnsetTime}ms`);
+        console.log(`🎤 Note ON: ${note}, 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 (noteIndex !== -1) midiPhrase[noteIndex].duration = duration;
         }
 
-        // ✅ If no active notes, start phrase timeout (1s delay before sending)
         if (activeNotes.size === 0) {
             if (phraseTimeout) clearTimeout(phraseTimeout);
             phraseTimeout = setTimeout(sendPhraseToPython, 1000);
@@ -220,11 +146,10 @@ function handleMIDIMessage(event) {
     }
 }
 
-// ✅ 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
+    if (midiPhrase.length === 0 || activeNotes.size > 0) return;
 
-    console.log("📨 Sending MIDI phrase to Python:", midiPhrase);
+    console.log(`📨 Sending MIDI phrase to Python`);
 
     fetch("/midi_phrase", {
         method: "POST",
@@ -234,105 +159,48 @@ function sendPhraseToPython() {
     .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));
+        if (data.generated_phrase) playGeneratedPhrase(data.generated_phrase);
+    });
 
-    // ✅ 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;
-    }
+    if (!selectedOutput) return;
 
     console.log("🎵 Playing Generated Phrase:", phrase);
+    let accumulatedDelay = 0;
 
-let accumulatedDelay = 0;  // ✅ Track total delay from phrase start
-phrase.forEach((noteData, index) => {
-    accumulatedDelay += noteData.inter_onset; // ✅ Accumulate inter-onset time
-
-    setTimeout(() => {
-        let noteOnMessage = [0x90, noteData.note, noteData.velocity];
-        let noteOffMessage = [0x80, noteData.note, 0];
-
-        selectedOutput.send(noteOnMessage);
-        console.log(`🎶 Note ON: ${noteData.note}, Velocity: ${noteData.velocity}, Start Delay: ${accumulatedDelay}ms`);
+    phrase.forEach((noteData, index) => {
+        accumulatedDelay += noteData.inter_onset;
 
         setTimeout(() => {
-            selectedOutput.send(noteOffMessage);
-            console.log(`🔇 Note OFF: ${noteData.note}`);
-        }, noteData.duration); // ✅ Use stored duration
-
-    }, accumulatedDelay); // ✅ Use accumulated delay for precise timing
-});
-}
-
-
-// ✅ Attach Generate Button Event
-function attachButtonEvent() {
-    let generateButton = document.getElementById("generateButton");
+            let noteOnMessage = [0x90, noteData.note, noteData.velocity];
+            let noteOffMessage = [0x80, noteData.note, 0];
 
-    if (generateButton) {
-        console.log("✅ Generate button found! Attaching event listener...");
+            selectedOutput.send(noteOnMessage);
+            setTimeout(() => selectedOutput.send(noteOffMessage), noteData.duration);
 
-        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
-    }
+        }, accumulatedDelay);
+    });
 }
-
-// ✅ 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
+# ✅ Create Gradio App with Transposition Slider
 with gr.Blocks() as demo:
     gr.HTML(midi_js)
+    with gr.Row():
+        slider = gr.Slider(minimum=-12, maximum=12, step=1, value=0, label="Transposition", interactive=True)
+        gr.Textbox("Transposition: 0", label="Selected Transposition", interactive=False).bind(slider,
+                                                                                               update_transposition)
 
 # ✅ 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)

phrase_catching.py

@@ -255,16 +255,24 @@ function playGeneratedPhrase(phrase) {
 
     console.log("🎵 Playing Generated Phrase:", phrase);
 
-    phrase.forEach((noteData, index) => {
-        let delay = noteData.inter_onset; // ✅ Use stored inter-onset time
+let accumulatedDelay = 0;  // ✅ Track total delay from phrase start
+phrase.forEach((noteData, index) => {
+    accumulatedDelay += noteData.inter_onset; // ✅ Accumulate inter-onset time
+
+    setTimeout(() => {
+        let noteOnMessage = [0x90, noteData.note, noteData.velocity];
+        let noteOffMessage = [0x80, noteData.note, 0];
+
+        selectedOutput.send(noteOnMessage);
+        console.log(`🎶 Note ON: ${noteData.note}, Velocity: ${noteData.velocity}, Start Delay: ${accumulatedDelay}ms`);
+
         setTimeout(() => {
-            let noteOnMessage = [0x90, noteData.note, noteData.velocity];
-            let noteOffMessage = [0x80, noteData.note, 0];
+            selectedOutput.send(noteOffMessage);
+            console.log(`🔇 Note OFF: ${noteData.note}`);
+        }, noteData.duration); // ✅ Use stored duration
 
-            selectedOutput.send(noteOnMessage);
-            setTimeout(() => selectedOutput.send(noteOffMessage), noteData.duration); // ✅ Use stored duration
-        }, delay);
-    });
+    }, accumulatedDelay); // ✅ Use accumulated delay for precise timing
+});
 }