added the style fix to the js

app.py

@@ -1,28 +1,32 @@
 import gradio as gr
 from fastapi import FastAPI, Request
-import json
 import uvicorn
 
 # ✅ Create FastAPI App
 app = FastAPI()
 
-# ✅ JavaScript to Capture and Send MIDI Data
+# ✅ Define FastAPI Endpoint
+@app.post("/api/midi_input")  # Ensure it's reachable at /api/midi_input
+async def process_midi(request: Request):
+    data = await request.json()
+    print(f"📩 Received MIDI: {data}")  # Debugging log
+    return {"status": "success", "received_note": data["note"], "received_velocity": data["velocity"]}
+
+# ✅ JavaScript for MIDI Data Sending
 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!");
-    })
+    .then(access => console.log("✅ MIDI Access Granted!"))
     .catch(err => console.error("🚨 MIDI API Error:", err));
 
-// ✅ Dummy Button Function
+// ✅ Function to Send MIDI Note
 function sendMIDI() {
     console.log("🎹 Sending Test MIDI Note");
 
-    fetch("/api/midi_input", {  // ✅ Fix: Use /api prefix
+    fetch("/api/midi_input", {  // ✅ Now sending to the correct endpoint
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ note: 60, velocity: 100 })
@@ -44,20 +48,19 @@ function sendMIDI() {
 </div>
 """
 
-# ✅ Inject JavaScript and HTML
+# ✅ Inject JavaScript into Gradio
 with gr.Blocks() as demo:
     gr.HTML(midi_js)
 
-# ✅ Mount Gradio on a separate path (prevents API conflicts)
-app = gr.mount_gradio_app(app, demo, path="/")
+# ✅ Mount Gradio on `/` but **keep API routes separate**
+app.mount("/", gr.mount_gradio_app(app, demo))
 
-# ✅ Define FastAPI Endpoint (Fixing Not Found Issue)
-@app.post("/api/midi_input")  # ✅ Fix: Ensure endpoint is under /api
-async def process_midi(request: Request):
-    data = await request.json()
-    return {"status": "success", "received_note": data["note"], "received_velocity": data["velocity"]}
+# ✅ Debug: Print all registered FastAPI routes
+print("🚀 FastAPI Routes Registered:")
+for route in app.routes:
+    print(route.path, "→", route.name)
 
-# ✅ Run FastAPI & Gradio Server
+# ✅ Run Server
 if __name__ == "__main__":
     print("🚀 Starting FastAPI with Gradio...")
     uvicorn.run(app, host="0.0.0.0", port=7860)