Full refactoring and design of the repo

app.py

@@ -1,111 +1,30 @@
 """
 Virtual MIDI Keyboard - Gradio Application
 
-This application provides a browser-based MIDI keyboard that can:
-- Play notes with various synthesizer sounds (Tone.js)
+A browser-based MIDI keyboard that can:
+- Play notes with various synthesizer sounds
 - Record MIDI events with timestamps
-- Process recordings through various engines
 - Export recordings as .mid files
 - Support computer keyboard input
 - Monitor MIDI events in real-time
-
-File Structure:
-- app.py: Gradio server and MIDI conversion (this file)
-- engines.py: MIDI processing engines
-- keyboard.html: Main UI structure
-- static/styles.css: All application styles
-- static/keyboard.js: Client-side logic and interactivity
-- static/engine.js: Client-side engine abstraction
 """
 
 import base64
 import html
-import io
-import json
-
-import mido
-from mido import MidiFile, MidiTrack, Message, MetaMessage
-
 import gradio as gr
-from engines import EngineRegistry, ParrotEngine
-
-
-# =============================================================================
-# MIDI CONVERSION
-# =============================================================================
-
-
-def events_to_midbytes(events, ticks_per_beat=480, tempo_bpm=120):
-    """
-    Convert browser MIDI events to a .mid file format.
-
-    Args:
-        events: List of dicts with {type, note, velocity, time, channel}
-        ticks_per_beat: MIDI ticks per beat resolution (default: 480)
-        tempo_bpm: Tempo in beats per minute (default: 120)
-
-    Returns:
-        bytes: Complete MIDI file as bytes
-    """
-    mid = MidiFile(ticks_per_beat=ticks_per_beat)
-    track = MidiTrack()
-    mid.tracks.append(track)
 
-    # Set tempo meta message
-    tempo = mido.bpm2tempo(tempo_bpm)
-    track.append(MetaMessage("set_tempo", tempo=tempo, time=0))
-
-    # Sort events by time and convert to MIDI messages
-    evs = sorted(events, key=lambda e: e.get("time", 0.0))
-    last_time = 0.0
-    for ev in evs:
-        # Skip malformed events
-        if "time" not in ev or "type" not in ev or "note" not in ev:
-            continue
-
-        # Calculate delta time in ticks
-        dt_sec = max(0.0, ev["time"] - last_time)
-        last_time = ev["time"]
-        ticks = int(round(dt_sec * (ticks_per_beat * tempo_bpm) / 60.0))
-        # Create MIDI message
-        ev_type = ev["type"]
-        note = int(ev["note"])
-        vel = int(ev.get("velocity", 0))
-        channel = int(ev.get("channel", 0))
-
-        if ev_type == "note_on":
-            msg = Message(
-                "note_on", note=note, velocity=vel, time=ticks, channel=channel
-            )
-        else:
-            msg = Message(
-                "note_off", note=note, velocity=vel, time=ticks, channel=channel
-            )
-
-        track.append(msg)
-
-    # Write to bytes buffer
-    buf = io.BytesIO()
-    mid.save(file=buf)
-    buf.seek(0)
-    return buf.read()
+from config import INSTRUMENTS, KEYBOARD_KEYS, KEYBOARD_SHORTCUTS
+from midi import events_to_midbytes
+from engines import EngineRegistry
 
 
 # =============================================================================
-# API ENDPOINT
+# API ENDPOINTS
 # =============================================================================
 
 
 def save_midi_api(events):
-    """
-    Gradio API endpoint for converting recorded events to MIDI file.
-
-    Args:
-        events: List of MIDI event dictionaries from the browser
-
-    Returns:
-        Dict with 'midi_base64' or 'error' key
-    """
+    """Export recorded MIDI events to .mid file"""
     if not isinstance(events, list) or len(events) == 0:
         return {"error": "No events provided"}
 
@@ -114,33 +33,21 @@ def save_midi_api(events):
     return {"midi_base64": midi_b64}
 
 
-# =============================================================================
-# ENGINE API ENDPOINTS
-# =============================================================================
-
-
-def list_engines():
-    """
-    API endpoint to list available MIDI engines
-
-    Returns:
-        List of engine info dictionaries
-    """
-    engines = EngineRegistry.list_engines()
-    return {"engines": [EngineRegistry.get_engine_info(e) for e in engines]}
+def get_config():
+    """Provide frontend with instruments and keyboard layout"""
+    return {
+        "instruments": INSTRUMENTS,
+        "keyboard_keys": KEYBOARD_KEYS,
+        "keyboard_shortcuts": KEYBOARD_SHORTCUTS,
+        "engines": [
+            {"id": engine_id, "name": EngineRegistry.get_engine_info(engine_id)["name"]}
+            for engine_id in EngineRegistry.list_engines()
+        ],
+    }
 
 
 def process_with_engine(engine_id: str, events: list):
-    """
-    API endpoint to process MIDI events through an engine
-
-    Args:
-        engine_id: The engine to use (e.g. 'parrot')
-        events: List of MIDI event dictionaries
-
-    Returns:
-        Processed events or error message
-    """
+    """Process MIDI events through selected engine"""
     if not engine_id or not events:
         return {"error": "Missing engine_id or events"}
 
@@ -154,59 +61,11 @@ def process_with_engine(engine_id: str, events: list):
         return {"error": f"Processing error: {str(e)}"}
 
 
-def process_engine_api(payload: dict):
-    """
-    Wrapper API endpoint that accepts JSON payload
-
-    Args:
-        payload: Dict with 'engine_id' and 'events' keys
-
-    Returns:
-        Processed events or error message
-    """
-    try:
-        print(f"[DEBUG] process_engine_api called with payload type: {type(payload)}")
-        print(
-            f"[DEBUG] payload keys: {payload.keys() if isinstance(payload, dict) else 'N/A'}"
-        )
-
-        # Handle both direct dict and wrapped dict formats
-        data = payload
-        if isinstance(payload, dict) and "data" in payload:
-            # If wrapped in a data field, unwrap it
-            data = payload["data"]
-            if isinstance(data, list) and len(data) > 0:
-                data = data[0]
-
-        print(
-            f"[DEBUG] extracted data type: {type(data)}, has engine_id: {'engine_id' in data if isinstance(data, dict) else False}"
-        )
-
-        engine_id = data.get("engine_id") if isinstance(data, dict) else None
-        events = data.get("events", []) if isinstance(data, dict) else []
-
-        print(
-            f"[DEBUG] engine_id: {engine_id}, events count: {len(events) if isinstance(events, list) else 'N/A'}"
-        )
-
-        result = process_with_engine(engine_id, events)
-        print(
-            f"[DEBUG] process_engine_api returning: {result.keys() if isinstance(result, dict) else type(result)}"
-        )
-        return result
-    except Exception as e:
-        print(f"[DEBUG] Exception in process_engine_api: {str(e)}")
-        import traceback
-
-        traceback.print_exc()
-        return {"error": f"API error: {str(e)}"}
-
-
 # =============================================================================
-# GRADIO APPLICATION
+# GRADIO UI
 # =============================================================================
 
-# Load and combine HTML, CSS, and JS for the iframe
+# Load HTML and CSS
 with open("keyboard.html", "r", encoding="utf-8") as f:
     html_content = f.read()
 
@@ -216,7 +75,7 @@ with open("static/styles.css", "r", encoding="utf-8") as f:
 with open("static/keyboard.js", "r", encoding="utf-8") as f:
     js_content = f.read()
 
-# Inject CSS and JS into the HTML
+# Inject CSS and JS into HTML
 keyboard_html = html_content.replace(
     '<link rel="stylesheet" href="/file=static/styles.css" />',
     f"<style>{css_content}</style>",
@@ -230,34 +89,41 @@ iframe_html = (
     + '" style="width:100%;height:750px;border:0;"></iframe>'
 )
 
-# Create Gradio interface
+# Create Gradio app
 with gr.Blocks(title="Virtual MIDI Keyboard") as demo:
     gr.HTML(iframe_html)
 
-    # Hidden API endpoints using Gradio's function API
-    with gr.Group(visible=False) as api_group:
-        # Process engine endpoint
-        engine_input = gr.Textbox(label="engine_payload")
-        engine_output = gr.Textbox(label="engine_result")
-
-        def call_engine_api(payload_json):
-            """Wrapper to call engine API with JSON input"""
-            import json
+    # Hidden config API
+    with gr.Group(visible=False):
+        config_input = gr.Textbox(label="_")
+        config_output = gr.JSON(label="_")
+        config_btn = gr.Button("get_config", visible=False)
+        config_btn.click(
+            fn=lambda x: get_config(),
+            inputs=config_input,
+            outputs=config_output,
+            api_name="config",
+        )
 
-            try:
-                payload = (
-                    json.loads(payload_json)
-                    if isinstance(payload_json, str)
-                    else payload_json
-                )
-                result = process_engine_api(payload)
-                return json.dumps(result)
-            except Exception as e:
-                return json.dumps({"error": str(e)})
+        # MIDI save API
+        midi_input = gr.JSON(label="_")
+        midi_output = gr.JSON(label="_")
+        midi_btn = gr.Button("save_midi", visible=False)
+        midi_btn.click(
+            fn=save_midi_api,
+            inputs=midi_input,
+            outputs=midi_output,
+            api_name="save_midi",
+        )
 
+        # Engine processing API
+        engine_input = gr.JSON(label="_")
+        engine_output = gr.JSON(label="_")
         engine_btn = gr.Button("process_engine", visible=False)
         engine_btn.click(
-            fn=call_engine_api,
+            fn=lambda payload: process_with_engine(
+                payload.get("engine_id"), payload.get("events", [])
+            ),
             inputs=engine_input,
             outputs=engine_output,
             api_name="process_engine",

config.py

@@ -0,0 +1,142 @@
+"""
+Virtual MIDI Keyboard Configuration
+
+Centralized configuration for instruments, keyboard layout, and defaults.
+This is the single source of truth for all settings.
+"""
+
+# =============================================================================
+# KEYBOARD LAYOUT
+# =============================================================================
+
+KEYBOARD_BASE_MIDI = 60  # C4
+KEYBOARD_OCTAVES = 2
+KEYBOARD_POLYPHONY = 24
+
+# Keyboard key layout (white keys first, then black keys in order)
+KEYBOARD_KEYS = [
+    {"midi": 60, "name": "C4", "type": "white"},
+    {"midi": 61, "name": "C#4", "type": "black"},
+    {"midi": 62, "name": "D4", "type": "white"},
+    {"midi": 63, "name": "D#4", "type": "black"},
+    {"midi": 64, "name": "E4", "type": "white"},
+    {"midi": 65, "name": "F4", "type": "white"},
+    {"midi": 66, "name": "F#4", "type": "black"},
+    {"midi": 67, "name": "G4", "type": "white"},
+    {"midi": 68, "name": "G#4", "type": "black"},
+    {"midi": 69, "name": "A4", "type": "white"},
+    {"midi": 70, "name": "A#4", "type": "black"},
+    {"midi": 71, "name": "B4", "type": "white"},
+    {"midi": 72, "name": "C5", "type": "white"},
+    {"midi": 73, "name": "C#5", "type": "black"},
+    {"midi": 74, "name": "D5", "type": "white"},
+    {"midi": 75, "name": "D#5", "type": "black"},
+    {"midi": 76, "name": "E5", "type": "white"},
+    {"midi": 77, "name": "F5", "type": "white"},
+    {"midi": 78, "name": "F#5", "type": "black"},
+    {"midi": 79, "name": "G5", "type": "white"},
+    {"midi": 80, "name": "G#5", "type": "black"},
+    {"midi": 81, "name": "A5", "type": "white"},
+    {"midi": 82, "name": "A#5", "type": "black"},
+    {"midi": 83, "name": "B5", "type": "white"},
+]
+
+# Computer keyboard shortcuts to MIDI notes
+KEYBOARD_SHORTCUTS = {
+    60: "A",  # C4
+    61: "W",  # C#4
+    62: "S",  # D4
+    63: "E",  # D#4
+    64: "D",  # E4
+    65: "F",  # F4
+    66: "T",  # F#4
+    67: "G",  # G4
+    68: "Y",  # G#4
+    69: "H",  # A4
+    70: "U",  # A#4
+    71: "J",  # B4
+}
+
+# =============================================================================
+# MIDI DEFAULTS
+# =============================================================================
+
+MIDI_DEFAULTS = {
+    "tempo_bpm": 120,
+    "ticks_per_beat": 480,
+    "velocity_default": 100,
+}
+
+# =============================================================================
+# INSTRUMENTS
+# =============================================================================
+
+INSTRUMENTS = {
+    "synth": {
+        "name": "Synth",
+        "type": "Synth",
+        "oscillator": "sine",
+        "envelope": {
+            "attack": 0.005,
+            "decay": 0.1,
+            "sustain": 0.3,
+            "release": 1,
+        },
+    },
+    "piano": {
+        "name": "Piano",
+        "type": "Synth",
+        "oscillator": "triangle",
+        "envelope": {
+            "attack": 0.001,
+            "decay": 0.2,
+            "sustain": 0.1,
+            "release": 2,
+        },
+    },
+    "organ": {
+        "name": "Organ",
+        "type": "Synth",
+        "oscillator": "sine4",
+        "envelope": {
+            "attack": 0.001,
+            "decay": 0.0,
+            "sustain": 1.0,
+            "release": 0.1,
+        },
+    },
+    "bass": {
+        "name": "Bass",
+        "type": "Synth",
+        "oscillator": "sawtooth",
+        "envelope": {
+            "attack": 0.01,
+            "decay": 0.1,
+            "sustain": 0.4,
+            "release": 1.5,
+        },
+    },
+    "pluck": {
+        "name": "Pluck",
+        "type": "Synth",
+        "oscillator": "triangle",
+        "envelope": {
+            "attack": 0.001,
+            "decay": 0.3,
+            "sustain": 0.0,
+            "release": 0.3,
+        },
+    },
+    "fm": {
+        "name": "FM Synth",
+        "type": "FMSynth",
+        "harmonicity": 3,
+        "modulationIndex": 10,
+        "envelope": {
+            "attack": 0.01,
+            "decay": 0.2,
+            "sustain": 0.2,
+            "release": 1,
+        },
+    },
+}

engines.py

@@ -1,13 +1,11 @@
 """
 Virtual MIDI Keyboard - Engines
 
-This module contains MIDI processing engines that can transform,
-analyze, or manipulate MIDI events in various ways.
+MIDI processing engines that transform, analyze, or manipulate MIDI events.
 """
 
 from abc import ABC, abstractmethod
-from typing import List, Dict, Any, Callable
-import time
+from typing import List, Dict, Any
 
 
 # =============================================================================
@@ -20,8 +18,6 @@ class MIDIEngine(ABC):
 
     def __init__(self, name: str):
         self.name = name
-        self.recordings = {}
-        self.current_recording_id = None
 
     @abstractmethod
     def process(self, events: List[Dict[str, Any]]) -> List[Dict[str, Any]]:
@@ -36,99 +32,36 @@ class MIDIEngine(ABC):
         """
         pass
 
-    def start_recording(self, recording_name: str = None) -> str:
-        """Start recording a new performance"""
-        if recording_name is None:
-            recording_name = f"recording_{int(time.time() * 1000)}"
-
-        self.current_recording_id = recording_name
-        self.recordings[recording_name] = {
-            "name": recording_name,
-            "events": [],
-            "created_at": time.time(),
-        }
-        return recording_name
-
-    def stop_recording(self) -> Dict[str, Any]:
-        """Stop recording and return the recording"""
-        if not self.current_recording_id:
-            return None
-
-        recording_id = self.current_recording_id
-        self.current_recording_id = None
-        return self.recordings[recording_id]
-
-    def add_event(self, event: Dict[str, Any]) -> bool:
-        """Add event to current recording"""
-        if not self.current_recording_id:
-            return False
-
-        recording = self.recordings[self.current_recording_id]
-        recording["events"].append(event)
-        return True
-
-    def get_recording(self, recording_id: str) -> Dict[str, Any]:
-        """Get a recording by ID"""
-        return self.recordings.get(recording_id)
-
-    def get_all_recordings(self) -> List[Dict[str, Any]]:
-        """Get all recordings"""
-        return list(self.recordings.values())
-
-    def delete_recording(self, recording_id: str) -> bool:
-        """Delete a recording"""
-        if recording_id in self.recordings:
-            if self.current_recording_id == recording_id:
-                self.stop_recording()
-            del self.recordings[recording_id]
-            return True
-        return False
-
 
 # =============================================================================
-# PARROT ENGINE - Returns exactly what was played
+# PARROT ENGINE
 # =============================================================================
 
 
 class ParrotEngine(MIDIEngine):
     """
-    Parrot Engine - Captures and plays back MIDI exactly as recorded.
+    Parrot Engine - plays back MIDI exactly as recorded.
 
     This is the simplest engine - it just repeats what the user played.
-    Perfect for learning and basic playback.
     """
 
     def __init__(self):
         super().__init__("Parrot")
-        self.description = "Captures and plays back MIDI exactly as recorded"
 
     def process(self, events: List[Dict[str, Any]]) -> List[Dict[str, Any]]:
-        """
-        Process MIDI events - in Parrot mode, just return them unchanged.
-
-        Args:
-            events: List of MIDI event dictionaries
-
-        Returns:
-            The same events unmodified
-        """
+        """Return events unchanged"""
         if not events:
             return []
-
-        # Simply return the events as-is
-        processed_events = []
-        for event in events:
-            processed_events.append(
-                {
-                    "type": event.get("type"),
-                    "note": event.get("note"),
-                    "velocity": event.get("velocity"),
-                    "time": event.get("time"),
-                    "channel": event.get("channel", 0),
-                }
-            )
-
-        return processed_events
+        return [
+            {
+                "type": e.get("type"),
+                "note": e.get("note"),
+                "velocity": e.get("velocity"),
+                "time": e.get("time"),
+                "channel": e.get("channel", 0),
+            }
+            for e in events
+        ]
 
 
 # =============================================================================
@@ -163,18 +96,8 @@ class EngineRegistry:
         """Get info about an engine"""
         if engine_id not in cls._engines:
             raise ValueError(f"Unknown engine: {engine_id}")
-
         engine = cls._engines[engine_id]()
         return {
             "id": engine_id,
             "name": engine.name,
-            "description": getattr(engine, "description", "No description"),
         }
-
-
-# =============================================================================
-# GLOBAL ENGINE INSTANCES
-# =============================================================================
-
-# Create default engine instance
-default_engine = ParrotEngine()

keyboard.html

@@ -9,8 +9,7 @@
 <body>
   <!-- Welcome Header -->
   <div class="welcome-header">
-    <h1 class="neon-text">🎹 VIRTUAL MIDI KEYBOARD</h1>
-    <p class="subtitle">Play chords & melodies • Full polyphony (24 voices) • Record & export • Real-time MIDI monitoring</p>
+    <h1 class="neon-text">SYNTH<i>IA</i></h1>
   </div>
   
   <div id="mainContainer">
@@ -65,9 +64,6 @@
   <!-- External Dependencies -->
   <script src="https://unpkg.com/tone@next/build/Tone.js"></script>
   
-  <!-- Engine -->
-  <script src="/file=static/engine.js"></script>
-  
   <!-- Application Logic -->
   <script src="/file=static/keyboard.js"></script>
 </body>

midi.py

@@ -0,0 +1,86 @@
+"""
+MIDI Utilities
+
+Functions for working with MIDI events and files.
+"""
+
+import io
+import mido
+from mido import MidiFile, MidiTrack, Message, MetaMessage
+from config import MIDI_DEFAULTS
+
+
+def events_to_midbytes(events, ticks_per_beat=None, tempo_bpm=None):
+    """
+    Convert browser MIDI events to a .mid file format.
+
+    Args:
+        events: List of dicts with {type, note, velocity, time, channel}
+        ticks_per_beat: MIDI ticks per beat resolution (default: from config)
+        tempo_bpm: Tempo in beats per minute (default: from config)
+
+    Returns:
+        bytes: Complete MIDI file as bytes
+    """
+    if ticks_per_beat is None:
+        ticks_per_beat = MIDI_DEFAULTS["ticks_per_beat"]
+    if tempo_bpm is None:
+        tempo_bpm = MIDI_DEFAULTS["tempo_bpm"]
+
+    mid = MidiFile(ticks_per_beat=ticks_per_beat)
+    track = MidiTrack()
+    mid.tracks.append(track)
+
+    # Set tempo meta message
+    tempo = mido.bpm2tempo(tempo_bpm)
+    track.append(MetaMessage("set_tempo", tempo=tempo, time=0))
+
+    # Sort events by time and convert to MIDI messages
+    evs = sorted(events, key=lambda e: e.get("time", 0.0))
+    last_time = 0.0
+    for ev in evs:
+        # Skip malformed events
+        if "time" not in ev or "type" not in ev or "note" not in ev:
+            continue
+
+        # Calculate delta time in ticks
+        dt_sec = max(0.0, ev["time"] - last_time)
+        last_time = ev["time"]
+        ticks = int(round(dt_sec * (ticks_per_beat * tempo_bpm) / 60.0))
+
+        # Create MIDI message
+        ev_type = ev["type"]
+        note = int(ev["note"])
+        vel = int(ev.get("velocity", 0))
+        channel = int(ev.get("channel", 0))
+
+        if ev_type == "note_on":
+            msg = Message(
+                "note_on", note=note, velocity=vel, time=ticks, channel=channel
+            )
+        else:
+            msg = Message(
+                "note_off", note=note, velocity=vel, time=ticks, channel=channel
+            )
+
+        track.append(msg)
+
+    # Write to bytes buffer
+    buf = io.BytesIO()
+    mid.save(file=buf)
+    buf.seek(0)
+    return buf.read()
+
+
+def validate_event(event: dict) -> bool:
+    """
+    Validate that an event has required fields.
+
+    Args:
+        event: MIDI event dictionary
+
+    Returns:
+        bool: True if valid, False otherwise
+    """
+    required = {"type", "note", "time", "velocity"}
+    return all(field in event for field in required)

static/engine.js

@@ -1,242 +0,0 @@
-/**
- * Virtual MIDI Keyboard - Engine
- * 
- * The engine processes MIDI signals and can:
- * - Capture and store MIDI events
- * - Play back captured sequences
- * - Process and transform MIDI data
- * 
- * This is the core processing unit for all signal manipulation.
- */
-
-// =============================================================================
-// ENGINE STATE
-// =============================================================================
-
-class MIDIEngine {
-  constructor() {
-    this.recordings = {}; // Store multiple recordings
-    this.currentRecordingId = null;
-    this.isPlayingBack = false;
-    this.playbackSpeed = 1.0; // 1.0 = normal speed
-    this.callbacks = {
-      onNoteOn: null,
-      onNoteOff: null,
-      onPlaybackStart: null,
-      onPlaybackEnd: null,
-      onProgress: null
-    };
-  }
-
-  /**
-   * Start recording a new performance
-   * Returns the recording ID
-   */
-  startRecording(recordingName = 'Recording_' + Date.now()) {
-    this.currentRecordingId = recordingName;
-    this.recordings[recordingName] = {
-      name: recordingName,
-      events: [],
-      startTime: performance.now(),
-      duration: 0,
-      metadata: {
-        createdAt: new Date().toISOString(),
-        instrument: 'default'
-      }
-    };
-    return recordingName;
-  }
-
-  /**
-   * Stop recording and return the recording
-   */
-  stopRecording() {
-    if (!this.currentRecordingId) return null;
-
-    const recording = this.recordings[this.currentRecordingId];
-    if (recording && recording.events.length > 0) {
-      const lastEvent = recording.events[recording.events.length - 1];
-      recording.duration = lastEvent.time;
-    }
-
-    const recordingId = this.currentRecordingId;
-    this.currentRecordingId = null;
-    return recording;
-  }
-
-  /**
-   * Add a MIDI event to the current recording
-   */
-  addEvent(event) {
-    if (!this.currentRecordingId) return false;
-
-    const recording = this.recordings[this.currentRecordingId];
-    if (!recording) return false;
-
-    recording.events.push({
-      ...event,
-      id: recording.events.length
-    });
-
-    return true;
-  }
-
-  /**
-   * Get a recording by ID
-   */
-  getRecording(recordingId) {
-    return this.recordings[recordingId];
-  }
-
-  /**
-   * Get all recordings
-   */
-  getAllRecordings() {
-    return Object.values(this.recordings);
-  }
-
-  /**
-   * Delete a recording
-   */
-  deleteRecording(recordingId) {
-    if (this.currentRecordingId === recordingId) {
-      this.stopRecording();
-    }
-    delete this.recordings[recordingId];
-  }
-
-  /**
-   * Play back a recording
-   * Calls the provided callbacks for each note
-   */
-  async playback(recordingId, callbacks = {}) {
-    const recording = this.getRecording(recordingId);
-    if (!recording || recording.events.length === 0) {
-      console.warn('No recording found or recording is empty');
-      return;
-    }
-
-    // Merge provided callbacks with instance callbacks
-    const finalCallbacks = { ...this.callbacks, ...callbacks };
-
-    this.isPlayingBack = true;
-    if (finalCallbacks.onPlaybackStart) {
-      finalCallbacks.onPlaybackStart(recording);
-    }
-
-    const events = recording.events;
-    let playbackStartTime = performance.now();
-
-    for (let i = 0; i < events.length; i++) {
-      if (!this.isPlayingBack) break; // Stop if playback was cancelled
-
-      const event = events[i];
-      const scheduledTime = (event.time / this.playbackSpeed) * 1000; // ms
-      const now = performance.now() - playbackStartTime;
-      const waitTime = scheduledTime - now;
-
-      if (waitTime > 0) {
-        await this.sleep(waitTime);
-      }
-
-      // Execute the event callback
-      if (event.type === 'note_on' && finalCallbacks.onNoteOn) {
-        finalCallbacks.onNoteOn(event);
-      } else if (event.type === 'note_off' && finalCallbacks.onNoteOff) {
-        finalCallbacks.onNoteOff(event);
-      }
-
-      // Progress callback
-      if (finalCallbacks.onProgress) {
-        finalCallbacks.onProgress({
-          currentIndex: i,
-          totalEvents: events.length,
-          currentTime: event.time,
-          totalDuration: recording.duration,
-          progress: (i / events.length) * 100
-        });
-      }
-    }
-
-    this.isPlayingBack = false;
-    if (finalCallbacks.onPlaybackEnd) {
-      finalCallbacks.onPlaybackEnd(recording);
-    }
-  }
-
-  /**
-   * Stop playback
-   */
-  stopPlayback() {
-    this.isPlayingBack = false;
-  }
-
-  /**
-   * Set playback speed (1.0 = normal, 2.0 = double speed, etc.)
-   */
-  setPlaybackSpeed(speed) {
-    this.playbackSpeed = Math.max(0.1, Math.min(2.0, speed));
-  }
-
-  /**
-   * Export recording as JSON
-   */
-  exportAsJSON(recordingId) {
-    const recording = this.getRecording(recordingId);
-    if (!recording) return null;
-    return JSON.stringify(recording, null, 2);
-  }
-
-  /**
-   * Import recording from JSON
-   */
-  importFromJSON(jsonString, recordingName = null) {
-    try {
-      const recording = JSON.parse(jsonString);
-      const id = recordingName || recording.name || 'imported_' + Date.now();
-      this.recordings[id] = recording;
-      return id;
-    } catch (error) {
-      console.error('Failed to import recording:', error);
-      return null;
-    }
-  }
-
-  /**
-   * Get recording statistics
-   */
-  getStats(recordingId) {
-    const recording = this.getRecording(recordingId);
-    if (!recording) return null;
-
-    const events = recording.events;
-    const noteOnEvents = events.filter(e => e.type === 'note_on');
-    const noteOffEvents = events.filter(e => e.type === 'note_off');
-
-    return {
-      recordingName: recording.name,
-      totalEvents: events.length,
-      noteOnCount: noteOnEvents.length,
-      noteOffCount: noteOffEvents.length,
-      duration: recording.duration,
-      avgNotesPerSecond: (noteOnEvents.length / recording.duration).toFixed(2),
-      minNote: Math.min(...noteOnEvents.map(e => e.note)),
-      maxNote: Math.max(...noteOnEvents.map(e => e.note)),
-      instrument: recording.metadata?.instrument || 'unknown'
-    };
-  }
-
-  /**
-   * Helper: Sleep for ms milliseconds
-   */
-  sleep(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
-  }
-}
-
-// =============================================================================
-// EXPORT
-// =============================================================================
-
-// Create a global engine instance
-const midiEngine = new MIDIEngine();

static/keyboard.js

@@ -81,50 +81,91 @@ let startTime = 0;
 let events = [];
 const pressedKeys = new Set();
 let selectedEngine = 'parrot'; // Default engine
+let serverConfig = null; // Will hold instruments and keyboard config from server
 
 // =============================================================================
-// INSTRUMENT CONFIGURATIONS
+// INSTRUMENT FACTORY
 // =============================================================================
 
-const instruments = {
-  synth: () => new Tone.PolySynth(Tone.Synth, {
-    maxPolyphony: 24,
-    oscillator: { type: 'sine' },
-    envelope: { attack: 0.005, decay: 0.1, sustain: 0.3, release: 1 }
-  }).toDestination(),
+function buildInstruments(instrumentConfigs) {
+  /**
+   * Build Tone.js synth instances from config
+   * instrumentConfigs: Object from server with instrument definitions
+   */
+  const instruments = {};
   
-  piano: () => new Tone.PolySynth(Tone.Synth, {
-    maxPolyphony: 24,
-    oscillator: { type: 'triangle' },
-    envelope: { attack: 0.001, decay: 0.2, sustain: 0.1, release: 2 }
-  }).toDestination(),
-  
-  organ: () => new Tone.PolySynth(Tone.Synth, {
-    maxPolyphony: 24,
-    oscillator: { type: 'sine4' },
-    envelope: { attack: 0.001, decay: 0, sustain: 1, release: 0.1 }
-  }).toDestination(),
-  
-  bass: () => new Tone.PolySynth(Tone.Synth, {
-    maxPolyphony: 24,
-    oscillator: { type: 'sawtooth' },
-    envelope: { attack: 0.01, decay: 0.1, sustain: 0.4, release: 1.5 },
-    filter: { Q: 2, type: 'lowpass', rolloff: -12 }
-  }).toDestination(),
-  
-  pluck: () => new Tone.PolySynth(Tone.Synth, {
-    maxPolyphony: 24,
-    oscillator: { type: 'triangle' },
-    envelope: { attack: 0.001, decay: 0.3, sustain: 0, release: 0.3 }
-  }).toDestination(),
+  for (const [key, config] of Object.entries(instrumentConfigs)) {
+    const baseOptions = {
+      maxPolyphony: 24,
+      oscillator: config.oscillator ? { type: config.oscillator } : undefined,
+      envelope: config.envelope,
+    };
+    
+    // Remove undefined keys
+    Object.keys(baseOptions).forEach(k => baseOptions[k] === undefined && delete baseOptions[k]);
+    
+    if (config.type === 'FMSynth') {
+      baseOptions.harmonicity = config.harmonicity;
+      baseOptions.modulationIndex = config.modulationIndex;
+      instruments[key] = () => new Tone.PolySynth(Tone.FMSynth, baseOptions).toDestination();
+    } else {
+      instruments[key] = () => new Tone.PolySynth(Tone.Synth, baseOptions).toDestination();
+    }
+  }
   
-  fm: () => new Tone.PolySynth(Tone.FMSynth, {
-    maxPolyphony: 24,
-    harmonicity: 3,
-    modulationIndex: 10,
-    envelope: { attack: 0.01, decay: 0.2, sustain: 0.2, release: 1 }
-  }).toDestination()
-};
+  return instruments;
+}
+
+let instruments = {}; // Will be populated after config is fetched
+
+// =============================================================================
+// INITIALIZATION FROM SERVER CONFIG
+// =============================================================================
+
+async function initializeFromConfig() {
+  /**
+   * Fetch configuration from Python server and initialize UI
+   */
+  try {
+    const response = await fetch('/gradio_api/api/config');
+    if (!response.ok) throw new Error(`Config fetch failed: ${response.status}`);
+    
+    serverConfig = await response.json();
+    
+    // Build instruments from config
+    instruments = buildInstruments(serverConfig.instruments);
+    
+    // Build keyboard shortcut maps from server config
+    window.keyboardShortcutsFromServer = serverConfig.keyboard_shortcuts;
+    window.keyMapFromServer = {};
+    for (const [midiStr, key] of Object.entries(serverConfig.keyboard_shortcuts)) {
+      window.keyMapFromServer[key.toLowerCase()] = parseInt(midiStr);
+    }
+    
+    console.log('✓ Configuration loaded from server');
+    console.log(`✓ ${Object.keys(instruments).length} instruments ready`);
+    console.log(`✓ ${Object.keys(window.keyboardShortcutsFromServer).length} keyboard shortcuts configured`);
+    
+    // Render keyboard after config is loaded
+    buildKeyboard();
+    
+  } catch (error) {
+    console.error('Failed to load configuration:', error);
+    // Fallback: Use hardcoded values for development/debugging
+    console.warn('Using fallback hardcoded configuration');
+    instruments = buildInstruments({
+      'synth': {name: 'Synth', type: 'Synth', oscillator: 'sine', envelope: {attack: 0.005, decay: 0.1, sustain: 0.3, release: 1}},
+      'piano': {name: 'Piano', type: 'Synth', oscillator: 'triangle', envelope: {attack: 0.001, decay: 0.2, sustain: 0.1, release: 2}},
+      'organ': {name: 'Organ', type: 'Synth', oscillator: 'sine4', envelope: {attack: 0.001, decay: 0, sustain: 1, release: 0.1}},
+      'bass': {name: 'Bass', type: 'Synth', oscillator: 'sawtooth', envelope: {attack: 0.01, decay: 0.1, sustain: 0.4, release: 1.5}},
+      'pluck': {name: 'Pluck', type: 'Synth', oscillator: 'triangle', envelope: {attack: 0.001, decay: 0.3, sustain: 0, release: 0.3}},
+      'fm': {name: 'FM', type: 'FMSynth', harmonicity: 3, modulationIndex: 10, envelope: {attack: 0.01, decay: 0.2, sustain: 0.2, release: 1}}
+    });
+    window.keyboardShortcutsFromServer = keyShortcuts; // Use hardcoded as fallback
+    window.keyMapFromServer = keyMap; // Use hardcoded as fallback
+    buildKeyboard();
+  }
+}
 
 function loadInstrument(type) {
   if (synth) {
@@ -139,6 +180,9 @@ function loadInstrument(type) {
 // =============================================================================
 
 function buildKeyboard() {
+  // Clear any existing keys
+  keyboardEl.innerHTML = '';
+  
   for (let octave = 0; octave < numOctaves; octave++) {
     for (let i = 0; i < keys.length; i++) {
       const k = keys[i];
@@ -148,7 +192,9 @@ function buildKeyboard() {
       keyEl.className = 'key' + (k.black ? ' black' : '');
       keyEl.dataset.midi = midiNote;
       
-      const shortcut = keyShortcuts[midiNote] || '';
+      // Use server config shortcuts if available, otherwise fallback to hardcoded
+      const shortcutsMap = window.keyboardShortcutsFromServer || keyShortcuts;
+      const shortcut = shortcutsMap[midiNote] || '';
       const shortcutHtml = shortcut ? `<div class="shortcut-hint">${shortcut}</div>` : '';
       keyEl.innerHTML = `<div style="padding-bottom:6px;font-size:11px">${shortcutHtml}${k.name}${octaveNum}</div>`;
       
@@ -212,9 +258,6 @@ function beginRecord() {
   playbackBtn.disabled = true;
   saveBtn.disabled = true;
   
-  // Start engine recording
-  const recordingId = midiEngine.startRecording('keyboard_' + Date.now());
-  
   logToTerminal('', '');
   logToTerminal('▶▶▶ RECORDING STARTED ◀◀◀', 'timestamp');
   logToTerminal('', '');
@@ -228,9 +271,6 @@ function stopRecord() {
   saveBtn.disabled = events.length === 0;
   playbackBtn.disabled = events.length === 0;
   
-  // Stop engine recording
-  midiEngine.stopRecording();
-  
   logToTerminal('', '');
   logToTerminal(`■■■ RECORDING STOPPED (${events.length} events captured) ■■■`, 'timestamp');
   logToTerminal('', '');
@@ -260,8 +300,6 @@ function noteOn(midiNote, velocity = 100) {
       channel: 0
     };
     events.push(event);
-    // Also add to engine
-    midiEngine.addEvent(event);
   }
 }
 
@@ -285,8 +323,6 @@ function noteOff(midiNote) {
       channel: 0
     };
     events.push(event);
-    // Also add to engine
-    midiEngine.addEvent(event);
   }
 }
 
@@ -301,6 +337,7 @@ function getKeyElement(midiNote) {
 document.addEventListener('keydown', async (ev) => {
   if (!keyboardToggle.checked) return;
   const key = ev.key.toLowerCase();
+  const keyMap = window.keyMapFromServer || keyMap; // Use server config if available, fallback to hardcoded
   if (!keyMap[key] || pressedKeys.has(key)) return;
   
   ev.preventDefault();
@@ -317,6 +354,7 @@ document.addEventListener('keydown', async (ev) => {
 document.addEventListener('keyup', (ev) => {
   if (!keyboardToggle.checked) return;
   const key = ev.key.toLowerCase();
+  const keyMap = window.keyMapFromServer || keyMap; // Use server config if available, fallback to hardcoded
   if (!keyMap[key] || !pressedKeys.has(key)) return;
   
   ev.preventDefault();
@@ -336,12 +374,16 @@ function attachPointerEvents() {
   keyboardEl.querySelectorAll('.key').forEach(k => {
     let pressed = false;
     
-    k.addEventListener('pointerdown', (ev) => {
+    k.addEventListener('pointerdown', async (ev) => {
       ev.preventDefault();
       k.setPointerCapture(ev.pointerId);
       if (!pressed) {
         pressed = true;
         k.style.filter = 'brightness(0.85)';
+        
+        // Ensure Tone.js audio context is started
+        await Tone.start();
+        
         const midi = parseInt(k.dataset.midi);
         const vel = ev.pressure ? Math.round(ev.pressure * 127) : 100;
         noteOn(midi, vel);
@@ -568,13 +610,19 @@ playbackBtn.addEventListener('click', async () => {
 
 saveBtn.addEventListener('click', () => saveMIDI());
 
+// =============================================================================
 // =============================================================================
 // INITIALIZATION
 // =============================================================================
 
-function init() {
+async function init() {
+  // First, load configuration from server
+  await initializeFromConfig();
+  
+  // Then load default instrument (synth)
   loadInstrument('synth');
-  buildKeyboard();
+  
+  // Setup keyboard event listeners and UI
   attachPointerEvents();
   initTerminal();
   
@@ -583,7 +631,9 @@ function init() {
   stopBtn.disabled = true;
   saveBtn.disabled = true;
   playbackBtn.disabled = true;
+  
+  console.log('✓ Virtual MIDI Keyboard initialized');
 }
 
-// Start the application
-init();
+// Start the application when DOM is ready
+document.addEventListener('DOMContentLoaded', init);

static/styles.css

@@ -32,14 +32,6 @@ body {
   letter-spacing: 2px;
 }
 
-.subtitle {
-  font-size: 1em;
-  color: #00ffff;
-  margin: 0;
-  text-shadow: 0 0 5px #00ffff;
-  opacity: 0.9;
-}
-
 #mainContainer { 
   display: flex;
   flex-direction: column;