added the style fix to the js

app.py

@@ -1,48 +1,56 @@
 import gradio as gr
 from fastapi import FastAPI, Request
 import json
+import matplotlib.pyplot as plt
 
-# ✅ Create FastAPI App
 app = FastAPI()
+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"]
+def update_transposition(value):
+    global transpose_amount
+    transpose_amount = value
+    print(f"🎚️ Transposition set to: {transpose_amount}")
+    return f"Transposition: {transpose_amount}"
 
-        print(f"🎹 Received MIDI Note: {note}, Velocity: {velocity}")
+def generate_piano_roll(phrase):
+    """ Generate a simple piano roll plot from MIDI phrase data """
+    if not phrase:
+        return None
 
-        # 🚀 Example Processing: Transpose + Modify Velocity
-        generated_note = (note + 5) % 128
-        generated_velocity = min(velocity + 10, 127)
+    fig, ax = plt.subplots(figsize=(10, 4))
 
-        return {"status": "success", "generated_note": generated_note, "generated_velocity": generated_velocity}
+    # ✅ Convert phrase data into a piano roll format
+    for note in phrase:
+        start_time = sum(n["inter_onset"] for n in phrase[:phrase.index(note)])  # Calculate note start time
+        ax.broken_barh([(start_time, note["duration"])], (note["note"] - 0.5, 1),
+                       facecolors='blue')
 
-    except Exception as e:
-        print(f"🚨 Error processing MIDI: {str(e)}")
-        return {"status": "error", "message": str(e)}
+    ax.set_xlabel("Time (ms)")
+    ax.set_ylabel("MIDI Note")
+    ax.set_yticks(range(21, 109, 12))  # Show octaves
+    ax.set_ylim(20, 110)
+    ax.grid(True)
 
+    return fig
 
 @app.post("/midi_phrase")
 async def process_midi_phrase(request: Request):
     try:
         data = await request.json()
-        phrase = data["phrase"]  # List of MIDI notes
+        phrase = data["phrase"]
 
         print(f"🎹 Received MIDI Phrase ({len(phrase)} notes)")
 
-        # 🚀 Example Processing: Transpose Each Note Up by 3 Semitones
+        # 🚀 Transpose and calculate start times
         generated_phrase = [
             {
-                "note": (note["note"] + 3) % 128,  # ✅ Transpose up by 3 semitones
+                "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"],
+                "start_time": sum(n["inter_onset"] for n in phrase[:i])  # Calculate start time
             }
-            for note in phrase
+            for i, note in enumerate(phrase)
         ]
 
         return {"status": "success", "generated_phrase": generated_phrase}
@@ -51,6 +59,7 @@ async def process_midi_phrase(request: Request):
         print(f"🚨 Error processing MIDI phrase: {str(e)}")
         return {"status": "error", "message": str(e)}
 
+
 # ✅ JavaScript Code Embedded as a String
 midi_js = """
 <script>
@@ -243,14 +252,19 @@ function playGeneratedPhrase(phrase) {
 </div>
 """
 
-# ✅ Inject JavaScript and HTML into Gradio
+
 with gr.Blocks() as demo:
-    gr.HTML(midi_js)  # ✅ Inject JavaScript
+    gr.Markdown("# 🎵 MIDI Processing App")
+    slider = gr.Slider(-12, 12, step=1, value=0, label="Transposition", interactive=True)
+    output_text = gr.Textbox("Transposition: 0", label="Selected Transposition", interactive=False)
+    piano_roll = gr.Plot(label="🎹 Piano Roll Visualization")
+
+    slider.change(fn=update_transposition, inputs=slider, outputs=output_text)
+    demo.load(generate_piano_roll, inputs=[], outputs=[piano_roll])
 
-# ✅ 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)
+    uvicorn.run(app, host="0.0.0.0", port=7860)