added the style fix to the js

app.py

@@ -1,73 +1,61 @@
 import gradio as gr
 from fastapi import FastAPI, Request
 import json
-import uvicorn
 
 # ✅ Create FastAPI App
 app = FastAPI()
 
-# ✅ MIDI Processing Function
-@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: Transpose + Increase Velocity
-        generated_note = (note + 3) % 128
-        generated_velocity = min(velocity + 10, 127)
-
-        return {"status": "success", "generated_note": generated_note, "generated_velocity": generated_velocity}
-    except Exception as e:
-        return {"status": "error", "message": str(e)}
-
-# ✅ JavaScript for MIDI
+# ✅ JavaScript to Capture and Send MIDI Data
 midi_js = """
 <script>
-console.log("✅ JavaScript is running");
+console.log("JavaScript is running");
 
+// ✅ Detect MIDI Access
 navigator.requestMIDIAccess()
     .then(access => {
         console.log("✅ MIDI Access Granted!");
-        const inputs = access.inputs.values();
-        for (let input of inputs) {
-            input.onmidimessage = handleMIDIMessage;
-        }
     })
     .catch(err => console.error("🚨 MIDI API Error:", err));
 
-function handleMIDIMessage(event) {
-    let [command, note, velocity] = event.data;
-    if (command === 144 && velocity > 0) { 
-        console.log(`🎤 Sending MIDI Note: ${note}, Velocity: ${velocity}`);
-        sendMIDI(note, velocity);
-    }
-}
-
-function sendMIDI(note, velocity) {
+// ✅ Dummy Button Function
+function sendMIDI() {
+    console.log("🎹 Sending Test MIDI Note");
     fetch("/midi_input", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ note, velocity })
+        body: JSON.stringify({ note: 60, velocity: 100 })
     })
     .then(response => response.json())
-    .then(data => console.log("📩 Python Response:", data))
+    .then(data => {
+        console.log("📩 Python Response:", data);
+        document.getElementById("output").innerText = "MIDI Sent! Response: " + JSON.stringify(data);
+    })
     .catch(error => console.error("🚨 Error sending MIDI:", error));
 }
 </script>
+
+<!-- 🎛 Simple UI -->
+<div>
+    <h2>🎹 MIDI Controller</h2>
+    <button onclick="sendMIDI()">Send Test MIDI Note</button>
+    <p id="output">Waiting for MIDI response...</p>
+</div>
 """
 
-# ✅ Inject JavaScript in Gradio UI
+# ✅ 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 FastAPI Server
+# ✅ Dummy API Endpoint (For Testing)
+@app.post("/midi_input")
+async def process_midi(request: Request):
+    data = await request.json()
+    return {"status": "success", "received_note": data["note"], "received_velocity": data["velocity"]}
+
 if __name__ == "__main__":
+    import uvicorn
     print("🚀 Starting FastAPI with Gradio...")
     uvicorn.run(app, host="0.0.0.0", port=7860)