2 octive keys, keyboard utility, terminal for visuals and refactor for simplicity

.gitignore

@@ -73,3 +73,4 @@ coverage.xml
 # OS files
 .DS_Store
 Thumbs.db
+*.bak

README.md

@@ -14,6 +14,31 @@ short_description: A small virtual midi keyboard
 
 Minimal browser MIDI keyboard: play in the browser, record note events, export a .mid file.
 
+## Features
+
+- 🎹 Two-octave virtual piano keyboard
+- 🎵 Multiple instrument sounds (Synth, Piano, Organ, Bass, Pluck, FM)
+- ⌨️ Computer keyboard input support  
+- 📹 MIDI event recording with timestamps
+- 💾 Export recordings as .mid files
+- 📊 Real-time MIDI event monitor
+- 🎨 Clean, responsive interface
+
+## Project Structure
+
+```
+virtual_keyboard/
+├── app.py              # Gradio server + MIDI conversion
+├── keyboard.html       # Main UI structure
+├── static/
+│   ├── styles.css      # All application styles
+│   ├── keyboard.js     # Client-side logic
+│   └── README.md       # Static assets documentation
+├── requirements.txt    # Python dependencies
+├── pyproject.toml      # Project metadata
+└── README.md           # This file
+```
+
 ## Files
 
 - app.py: Gradio app + MIDI export API

app.py

@@ -1,3 +1,20 @@
+"""
+Virtual MIDI Keyboard - Gradio Application
+
+This application provides a browser-based MIDI keyboard that can:
+- Play notes with various synthesizer sounds (Tone.js)
+- Record MIDI events with timestamps
+- 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)
+- keyboard.html: Main UI structure
+- static/styles.css: All application styles
+- static/keyboard.js: Client-side logic and interactivity
+"""
+
 import base64
 import html
 import io
@@ -8,57 +25,81 @@ from mido import MidiFile, MidiTrack, Message, MetaMessage
 import gradio as gr
 
 
-# --- MIDI conversion helper ---
+# =============================================================================
+# MIDI CONVERSION
+# =============================================================================
+
+
 def events_to_midbytes(events, ticks_per_beat=480, tempo_bpm=120):
     """
-    events: list of {type:'note_on'|'note_off', note:int, velocity:int, time:float (seconds), channel:int}
-    returns: bytes of a .mid file
+    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
+
+    # Set tempo meta message
     tempo = mido.bpm2tempo(tempo_bpm)
     track.append(MetaMessage("set_tempo", tempo=tempo, time=0))
 
-    # sort by absolute time
+    # Sort events by time and convert to MIDI messages
     evs = sorted(events, key=lambda e: e.get("time", 0.0))
     last_time = 0.0
-    # convert delta seconds -> delta ticks
     for ev in evs:
-        # safety: skip malformed
+        # 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 = seconds * ticks_per_beat * bpm / 60
-        ticks = int(round(dt_sec * (ticks_per_beat * (tempo_bpm)) / 60.0))
+        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:
-            # treat anything else as note_off for now
             msg = Message(
                 "note_off", note=note, velocity=vel, time=ticks, channel=channel
             )
+
         track.append(msg)
 
-    # write to bytes
+    # Write to bytes buffer
     buf = io.BytesIO()
     mid.save(file=buf)
     buf.seek(0)
     return buf.read()
 
 
+# =============================================================================
+# API ENDPOINT
+# =============================================================================
+
+
 def save_midi_api(events):
     """
-    Gradio API: events is a list of MIDI event dicts from the browser.
-    Returns: JSON with base64-encoded MIDI bytes.
+    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
     """
     if not isinstance(events, list) or len(events) == 0:
         return {"error": "No events provided"}
@@ -68,28 +109,53 @@ def save_midi_api(events):
     return {"midi_base64": midi_b64}
 
 
-with open("keyboard.html", "r", encoding="utf-8") as handle:
-    keyboard_html = handle.read()
+# =============================================================================
+# GRADIO APPLICATION
+# =============================================================================
+
+# Load and combine HTML, CSS, and JS for the iframe
+with open("keyboard.html", "r", encoding="utf-8") as f:
+    html_content = f.read()
+
+with open("static/styles.css", "r", encoding="utf-8") as f:
+    css_content = f.read()
+
+with open("static/keyboard.js", "r", encoding="utf-8") as f:
+    js_content = f.read()
+
+# Inject CSS and JS into the HTML
+keyboard_html = html_content.replace(
+    '<link rel="stylesheet" href="/file=static/styles.css" />',
+    f"<style>{css_content}</style>",
+).replace(
+    '<script src="/file=static/keyboard.js"></script>', f"<script>{js_content}</script>"
+)
 
 iframe_html = (
     '<iframe srcdoc="'
     + html.escape(keyboard_html, quote=True)
-    + '" style="width:100%;height:420px;border:0;"></iframe>'
+    + '" style="width:100%;height:550px;border:0;"></iframe>'
 )
 
-# --- Gradio UI: embed the keyboard HTML in an iframe and expose an API ---
+# Create Gradio interface
 with gr.Blocks() as demo:
     gr.HTML(iframe_html)
-    api_input = gr.JSON(visible=False)
-    api_output = gr.JSON(visible=False)
-    api_trigger = gr.Button(visible=False)
-    api_trigger.click(
-        save_midi_api,
-        inputs=api_input,
-        outputs=api_output,
-        api_name="save_midi",
+
+    # Hidden API endpoint components (required for Gradio 6.x)
+    with gr.Row(visible=False):
+        api_input = gr.JSON()
+        api_output = gr.JSON()
+        api_btn = gr.Button("save")
+
+    # Connect API endpoint
+    api_btn.click(
+        fn=save_midi_api, inputs=api_input, outputs=api_output, api_name="save_midi"
     )
 
-# Run locally: python app.py
+
+# =============================================================================
+# MAIN
+# =============================================================================
+
 if __name__ == "__main__":
     demo.launch()

keyboard.html

@@ -1,216 +1,59 @@
 <!doctype html>
-<html>
+<html lang="en">
 <head>
   <meta charset="utf-8" />
-  <title>Virtual MIDI Keyboard (Gradio Prototype)</title>
-  <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <style>
-    body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; padding: 12px; }
-    #keyboard { display:flex; user-select:none; }
-    .key { width:42px; height:180px; border:1px solid #333; margin:0 1px; background:white; position:relative; display:flex; align-items:flex-end; justify-content:center; cursor:pointer; }
-    .key.black { width:30px; height:110px; background:#222; color:white; margin-left:-15px; margin-right:-15px; z-index:2; position:relative; }
-    .controls { margin-top:10px; display:flex; gap:8px; align-items:center; }
-    button { padding:8px 12px; }
-    #status { margin-left:8px; color:#666; }
-    #downloadLink { display:inline-block; margin-left:8px; }
-  </style>
+  <title>Virtual MIDI Keyboard</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="stylesheet" href="/file=static/styles.css" />
 </head>
 <body>
   <h3>Virtual MIDI Keyboard (prototype)</h3>
-  <div id="keyboard"></div>
-
-  <div class="controls">
-    <button id="recordBtn">Record</button>
-    <button id="stopBtn" disabled>Stop</button>
-    <button id="saveBtn" disabled>Save MIDI</button>
-    <span id="status">Idle</span>
+  
+  <div id="mainContainer">
+    <!-- Left Panel: Keyboard and Controls -->
+    <div id="leftPanel">
+      <div id="keyboard"></div>
+
+      <div class="controls">
+        <label>
+          Instrument:
+          <select id="instrumentSelect">
+            <option value="synth">Synth</option>
+            <option value="piano">Piano</option>
+            <option value="organ">Organ</option>
+            <option value="bass">Bass</option>
+            <option value="pluck">Pluck</option>
+            <option value="fm">FM Synth</option>
+          </select>
+        </label>
+        
+        <button id="recordBtn">Record</button>
+        <button id="stopBtn" disabled>Stop</button>
+        <button id="saveBtn" disabled>Save MIDI</button>
+        
+        <label>
+          <input type="checkbox" id="keyboardToggle">
+          Enable Keyboard Input
+        </label>
+        
+        <span id="status">Idle</span>
+      </div>
+    </div>
+
+    <!-- Right Panel: MIDI Monitor -->
+    <div id="rightPanel">
+      <div class="terminal-header">
+        <h4 style="margin: 0;">MIDI Monitor</h4>
+        <button id="clearTerminal">Clear</button>
+      </div>
+      <div id="terminal"></div>
+    </div>
   </div>
 
+  <!-- External Dependencies -->
   <script src="https://unpkg.com/tone@next/build/Tone.js"></script>
-  <script>
-    // --- keyboard layout: C4..B4 (one octave) ---
-    const baseMidi = 60; // C4
-    // keys order with sharps flagged
-    const keys = [
-      {name:'C',  offset:0,  black:false},
-      {name:'C#', offset:1,  black:true},
-      {name:'D',  offset:2,  black:false},
-      {name:'D#', offset:3,  black:true},
-      {name:'E',  offset:4,  black:false},
-      {name:'F',  offset:5,  black:false},
-      {name:'F#', offset:6,  black:true},
-      {name:'G',  offset:7,  black:false},
-      {name:'G#', offset:8,  black:true},
-      {name:'A',  offset:9,  black:false},
-      {name:'A#', offset:10, black:true},
-      {name:'B',  offset:11, black:false}
-    ];
-
-    // build keyboard DOM
-    const keyboardEl = document.getElementById('keyboard');
-    // create white key container so black keys can overlap visually
-    for (let i=0;i<keys.length;i++){
-      const k = keys[i];
-      const keyEl = document.createElement('div');
-      keyEl.className = 'key' + (k.black? ' black': '');
-      keyEl.dataset.midi = baseMidi + k.offset;
-      keyEl.innerHTML = `<div style="padding-bottom:6px;font-size:11px">${k.name}${4}</div>`;
-      keyboardEl.appendChild(keyEl);
-    }
-
-    // Tone.js synth
-    const synth = new Tone.PolySynth(Tone.Synth).toDestination();
-    // small envelope tweak for nicer touch
-    synth.set({options:{portamento:0}, voice: {oscillator: {type: 'sine'}}});
-
-    // recording state
-    let recording = false;
-    let startTime = 0;
-    let events = []; // {type, note, velocity, time, channel}
-
-    const statusEl = document.getElementById('status');
-    const recordBtn = document.getElementById('recordBtn');
-    const stopBtn = document.getElementById('stopBtn');
-    const saveBtn = document.getElementById('saveBtn');
-
-    function nowSec(){ return performance.now()/1000; }
-
-    function beginRecord(){
-      events = [];
-      recording = true;
-      startTime = nowSec();
-      statusEl.textContent = 'Recording...';
-      recordBtn.disabled = true;
-      stopBtn.disabled = false;
-      saveBtn.disabled = true;
-    }
-    function stopRecord(){
-      recording = false;
-      statusEl.textContent = `Recorded ${events.length} events`;
-      recordBtn.disabled = false;
-      stopBtn.disabled = true;
-      saveBtn.disabled = events.length === 0;
-    }
-
-    function noteOn(midiNote, velocity=100){
-      const freq = Tone.Frequency(midiNote, "midi").toFrequency();
-      synth.triggerAttack(freq, undefined, velocity/127);
-      if (recording) {
-        events.push({type:'note_on', note: midiNote, velocity: Math.max(1, velocity|0), time: nowSec() - startTime, channel: 0});
-      }
-    }
-    function noteOff(midiNote){
-      const freq = Tone.Frequency(midiNote, "midi").toFrequency();
-      synth.triggerRelease(freq);
-      if (recording) {
-        events.push({type:'note_off', note: midiNote, velocity: 0, time: nowSec() - startTime, channel: 0});
-      }
-    }
-
-    // attach pointer/mouse/touch events
-    keyboardEl.querySelectorAll('.key').forEach(k => {
-      let pressed = false;
-      k.addEventListener('pointerdown', (ev) => {
-        ev.preventDefault();
-        k.setPointerCapture(ev.pointerId);
-        if (!pressed){
-          pressed = true;
-          k.style.filter = 'brightness(0.85)';
-          const midi = parseInt(k.dataset.midi);
-          // velocity derived from pointer pressure if available
-          const vel = ev.pressure ? Math.round(ev.pressure * 127) : 100;
-          noteOn(midi, vel);
-        }
-      });
-      k.addEventListener('pointerup', (ev) => {
-        ev.preventDefault();
-        if (pressed){
-          pressed = false;
-          k.style.filter = '';
-          const midi = parseInt(k.dataset.midi);
-          noteOff(midi);
-        }
-      });
-      k.addEventListener('pointerleave', (ev) => {
-        // if pointer leaves while pressed, release
-        if (pressed){
-          pressed = false;
-          k.style.filter = '';
-          const midi = parseInt(k.dataset.midi);
-          noteOff(midi);
-        }
-      });
-    });
-
-    // buttons
-    recordBtn.addEventListener('click', async () => {
-      // start audio context on first user interaction (required by browsers)
-      await Tone.start();
-      beginRecord();
-    });
-
-    stopBtn.addEventListener('click', () => stopRecord());
-
-    saveBtn.addEventListener('click', async () => {
-      if (recording) stopRecord();
-      if (events.length === 0) return alert('No events recorded.');
-
-      statusEl.textContent = 'Uploading…';
-      saveBtn.disabled = true;
-      try {
-        const startResp = await fetch('/gradio_api/call/save_midi', {
-          method: 'POST',
-          headers: {'Content-Type':'application/json'},
-          body: JSON.stringify({data: [events]})
-        });
-        if (!startResp.ok) {
-          const txt = await startResp.text();
-          throw new Error('Server error: ' + txt);
-        }
-        const startJson = await startResp.json();
-        if (!startJson || !startJson.event_id) {
-          throw new Error('Invalid API response');
-        }
-        const resultResp = await fetch(`/gradio_api/call/save_midi/${startJson.event_id}`);
-        if (!resultResp.ok) {
-          const txt = await resultResp.text();
-          throw new Error('Server error: ' + txt);
-        }
-        const resultText = await resultResp.text();
-        const dataLine = resultText.split('\n').find(line => line.startsWith('data:'));
-        if (!dataLine) {
-          throw new Error('Invalid API response');
-        }
-        const payloadList = JSON.parse(dataLine.replace('data:', '').trim());
-        const payload = Array.isArray(payloadList) ? payloadList[0] : null;
-        if (!payload || payload.error || !payload.midi_base64) {
-          throw new Error(payload && payload.error ? payload.error : 'Invalid API response');
-        }
-        const binStr = atob(payload.midi_base64);
-        const bytes = new Uint8Array(binStr.length);
-        for (let i = 0; i < binStr.length; i++) {
-          bytes[i] = binStr.charCodeAt(i);
-        }
-        const blob = new Blob([bytes], {type: 'audio/midi'});
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = 'recording.mid';
-        a.click();
-        statusEl.textContent = 'Downloaded .mid';
-      } catch (err){
-        console.error(err);
-        statusEl.textContent = 'Error saving MIDI';
-        alert('Error: ' + err.message);
-      } finally {
-        saveBtn.disabled = false;
-      }
-    });
-
-    // initialize button states
-    recordBtn.disabled = false;
-    stopBtn.disabled = true;
-    saveBtn.disabled = true;
-  </script>
+  
+  <!-- Application Logic -->
+  <script src="/file=static/keyboard.js"></script>
 </body>
 </html>

main.py

@@ -1,109 +0,0 @@
-# main.py
-import io
-import json
-from fastapi import FastAPI, Request, Response
-from fastapi.responses import HTMLResponse
-from fastapi.middleware.cors import CORSMiddleware
-import mido
-from mido import MidiFile, MidiTrack, Message, MetaMessage
-
-import gradio as gr
-
-app = FastAPI(title="Virtual MIDI Keyboard - prototype")
-
-# allow local testing from browsers (same host) — adjust in production
-app.add_middleware(
-    CORSMiddleware,
-    allow_origins=["*"],  # in prod lock this down
-    allow_credentials=True,
-    allow_methods=["*"],
-    allow_headers=["*"],
-)
-
-
-# --- MIDI conversion helper ---
-def events_to_midbytes(events, ticks_per_beat=480, tempo_bpm=120):
-    """
-    events: list of {type:'note_on'|'note_off', note:int, velocity:int, time:float (seconds), channel:int}
-    returns: bytes of a .mid file
-    """
-    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 by absolute time
-    evs = sorted(events, key=lambda e: e.get("time", 0.0))
-    last_time = 0.0
-    # convert delta seconds -> delta ticks
-    for ev in evs:
-        # safety: skip malformed
-        if "time" not in ev or "type" not in ev or "note" not in ev:
-            continue
-        dt_sec = max(0.0, ev["time"] - last_time)
-        last_time = ev["time"]
-        # ticks = seconds * ticks_per_beat * bpm / 60
-        ticks = int(round(dt_sec * (ticks_per_beat * (tempo_bpm)) / 60.0))
-        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:
-            # treat anything else as note_off for now
-            msg = Message(
-                "note_off", note=note, velocity=vel, time=ticks, channel=channel
-            )
-        track.append(msg)
-
-    # write to bytes
-    buf = io.BytesIO()
-    mid.save(file=buf)
-    buf.seek(0)
-    return buf.read()
-
-
-# --- FastAPI route: accepts events JSON and returns .mid bytes ---
-@app.post("/save_midi")
-async def save_midi(request: Request):
-    """
-    Expects JSON: {"events": [ {type, note, velocity, time, channel}, ... ]}
-    Returns: application/octet-stream or audio/midi bytes of a .mid file
-    """
-    try:
-        payload = await request.json()
-    except Exception as e:
-        return Response(content=f"Invalid JSON: {e}", status_code=400)
-
-    events = payload.get("events")
-    if not isinstance(events, list) or len(events) == 0:
-        return Response(content="No events provided", status_code=400)
-
-    mid_bytes = events_to_midbytes(events)
-    return Response(content=mid_bytes, media_type="audio/midi")
-
-
-# --- FastAPI route: serve the standalone keyboard HTML ---
-@app.get("/keyboard", response_class=HTMLResponse)
-async def keyboard_page():
-    with open("keyboard.html", "r", encoding="utf-8") as handle:
-        return handle.read()
-
-
-# --- Gradio UI: embed the keyboard.html inside a simple Blocks app ---
-with gr.Blocks() as demo:
-    gr.HTML(
-        '<iframe src="/keyboard" style="width:100%;height:420px;border:0;"></iframe>'
-    )
-
-# Mount Gradio under /app so FastAPI root keeps /save_midi endpoint available
-# If you change the path, update the client fetch URL
-gr.mount_gradio_app(app, demo, path="/app")
-
-# If you want to run this file directly (uvicorn recommended), nothing else to add.
-# Run: uvicorn main:app --reload --port 8000

static/README.md

@@ -0,0 +1,18 @@
+# Static Assets
+
+This directory contains the client-side assets for the Virtual MIDI Keyboard.
+
+## Files
+
+- **styles.css** - All application styles including keyboard, controls, and MIDI terminal
+- **keyboard.js** - Client-side logic for:
+  - Keyboard rendering and layout
+  - Audio synthesis (Tone.js integration)
+  - MIDI event recording
+  - Computer keyboard input handling
+  - MIDI monitor/terminal
+  - File export functionality
+
+## Usage
+
+These files are loaded by `keyboard.html` via `/file=` paths in Gradio.

static/keyboard.js

@@ -0,0 +1,460 @@
+/**
+ * Virtual MIDI Keyboard - Main JavaScript
+ * 
+ * This file handles:
+ * - Keyboard rendering and layout
+ * - Audio synthesis (Tone.js)
+ * - MIDI event recording
+ * - Computer keyboard input
+ * - MIDI monitor/terminal
+ * - File export
+ */
+
+// =============================================================================
+// CONFIGURATION
+// =============================================================================
+
+const baseMidi = 60; // C4
+const numOctaves = 2;
+
+// Keyboard layout with sharps flagged
+const keys = [
+  {name:'C',  offset:0,  black:false},
+  {name:'C#', offset:1,  black:true},
+  {name:'D',  offset:2,  black:false},
+  {name:'D#', offset:3,  black:true},
+  {name:'E',  offset:4,  black:false},
+  {name:'F',  offset:5,  black:false},
+  {name:'F#', offset:6,  black:true},
+  {name:'G',  offset:7,  black:false},
+  {name:'G#', offset:8,  black:true},
+  {name:'A',  offset:9,  black:false},
+  {name:'A#', offset:10, black:true},
+  {name:'B',  offset:11, black:false}
+];
+
+// Computer keyboard mapping (C4 octave)
+const keyMap = {
+  'a': 60,  // C4
+  'w': 61,  // C#4
+  's': 62,  // D4
+  'e': 63,  // D#4
+  'd': 64,  // E4
+  'f': 65,  // F4
+  't': 66,  // F#4
+  'g': 67,  // G4
+  'y': 68,  // G#4
+  'h': 69,  // A4
+  'u': 70,  // A#4
+  'j': 71   // B4
+};
+
+// Keyboard shortcuts displayed on keys
+const keyShortcuts = {
+  60: 'A', 61: 'W', 62: 'S', 63: 'E', 64: 'D', 65: 'F',
+  66: 'T', 67: 'G', 68: 'Y', 69: 'H', 70: 'U', 71: 'J'
+};
+
+// =============================================================================
+// DOM ELEMENTS
+// =============================================================================
+
+const keyboardEl = document.getElementById('keyboard');
+const statusEl = document.getElementById('status');
+const recordBtn = document.getElementById('recordBtn');
+const stopBtn = document.getElementById('stopBtn');
+const saveBtn = document.getElementById('saveBtn');
+const keyboardToggle = document.getElementById('keyboardToggle');
+const instrumentSelect = document.getElementById('instrumentSelect');
+const terminal = document.getElementById('terminal');
+const clearTerminal = document.getElementById('clearTerminal');
+
+// =============================================================================
+// STATE
+// =============================================================================
+
+let synth = null;
+let recording = false;
+let startTime = 0;
+let events = [];
+const pressedKeys = new Set();
+
+// =============================================================================
+// INSTRUMENT CONFIGURATIONS
+// =============================================================================
+
+const instruments = {
+  synth: () => new Tone.PolySynth(Tone.Synth, {
+    oscillator: { type: 'sine' },
+    envelope: { attack: 0.005, decay: 0.1, sustain: 0.3, release: 1 }
+  }).toDestination(),
+  
+  piano: () => new Tone.PolySynth(Tone.Synth, {
+    oscillator: { type: 'triangle' },
+    envelope: { attack: 0.001, decay: 0.2, sustain: 0.1, release: 2 }
+  }).toDestination(),
+  
+  organ: () => new Tone.PolySynth(Tone.Synth, {
+    oscillator: { type: 'sine4' },
+    envelope: { attack: 0.001, decay: 0, sustain: 1, release: 0.1 }
+  }).toDestination(),
+  
+  bass: () => new Tone.PolySynth(Tone.Synth, {
+    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, {
+    oscillator: { type: 'triangle' },
+    envelope: { attack: 0.001, decay: 0.3, sustain: 0, release: 0.3 }
+  }).toDestination(),
+  
+  fm: () => new Tone.PolySynth(Tone.FMSynth, {
+    harmonicity: 3,
+    modulationIndex: 10,
+    envelope: { attack: 0.01, decay: 0.2, sustain: 0.2, release: 1 }
+  }).toDestination()
+};
+
+function loadInstrument(type) {
+  if (synth) {
+    synth.releaseAll();
+    synth.dispose();
+  }
+  synth = instruments[type]();
+}
+
+// =============================================================================
+// KEYBOARD RENDERING
+// =============================================================================
+
+function buildKeyboard() {
+  for (let octave = 0; octave < numOctaves; octave++) {
+    for (let i = 0; i < keys.length; i++) {
+      const k = keys[i];
+      const midiNote = baseMidi + (octave * 12) + k.offset;
+      const octaveNum = 4 + octave;
+      const keyEl = document.createElement('div');
+      keyEl.className = 'key' + (k.black ? ' black' : '');
+      keyEl.dataset.midi = midiNote;
+      
+      const shortcut = keyShortcuts[midiNote] || '';
+      const shortcutHtml = shortcut ? `<div style="font-size:10px;opacity:0.5;">${shortcut}</div>` : '';
+      keyEl.innerHTML = `<div style="padding-bottom:6px;font-size:11px">${shortcutHtml}${k.name}${octaveNum}</div>`;
+      
+      keyboardEl.appendChild(keyEl);
+    }
+  }
+}
+
+// =============================================================================
+// MIDI UTILITIES
+// =============================================================================
+
+const noteNames = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
+
+function midiToNoteName(midi) {
+  const octave = Math.floor(midi / 12) - 1;
+  const noteName = noteNames[midi % 12];
+  return `${noteName}${octave}`;
+}
+
+function nowSec() {
+  return performance.now() / 1000;
+}
+
+// =============================================================================
+// TERMINAL LOGGING
+// =============================================================================
+
+function logToTerminal(message, className = '') {
+  const line = document.createElement('div');
+  line.className = className;
+  line.textContent = message;
+  terminal.appendChild(line);
+  terminal.scrollTop = terminal.scrollHeight;
+  
+  // Keep terminal from getting too long (max 500 lines)
+  while (terminal.children.length > 500) {
+    terminal.removeChild(terminal.firstChild);
+  }
+}
+
+function initTerminal() {
+  logToTerminal('=== MIDI Monitor Ready ===', 'timestamp');
+  logToTerminal('Play notes to see MIDI events...', 'timestamp');
+}
+
+// =============================================================================
+// RECORDING 
+// =============================================================================
+
+function beginRecord() {
+  events = [];
+  recording = true;
+  startTime = nowSec();
+  statusEl.textContent = 'Recording...';
+  recordBtn.disabled = true;
+  stopBtn.disabled = false;
+  saveBtn.disabled = true;
+  logToTerminal('\n=== RECORDING STARTED ===', 'timestamp');
+}
+
+function stopRecord() {
+  recording = false;
+  statusEl.textContent = `Recorded ${events.length} events`;
+  recordBtn.disabled = false;
+  stopBtn.disabled = true;
+  saveBtn.disabled = events.length === 0;
+  logToTerminal(`=== RECORDING STOPPED (${events.length} events) ===\n`, 'timestamp');
+}
+
+// =============================================================================
+// MIDI NOTE HANDLING
+// =============================================================================
+
+function noteOn(midiNote, velocity = 100) {
+  const freq = Tone.Frequency(midiNote, "midi").toFrequency();
+  synth.triggerAttack(freq, undefined, velocity / 127);
+  
+  const noteName = midiToNoteName(midiNote);
+  const timestamp = recording ? (nowSec() - startTime).toFixed(3) : '--';
+  logToTerminal(
+    `[${timestamp}s] NOTE_ON  ${noteName} (${midiNote}) vel=${velocity}`, 
+    'note-on'
+  );
+  
+  if (recording) {
+    events.push({
+      type: 'note_on',
+      note: midiNote,
+      velocity: Math.max(1, velocity | 0),
+      time: nowSec() - startTime,
+      channel: 0
+    });
+  }
+}
+
+function noteOff(midiNote) {
+  const freq = Tone.Frequency(midiNote, "midi").toFrequency();
+  synth.triggerRelease(freq);
+  
+  const noteName = midiToNoteName(midiNote);
+  const timestamp = recording ? (nowSec() - startTime).toFixed(3) : '--';
+  logToTerminal(
+    `[${timestamp}s] NOTE_OFF ${noteName} (${midiNote})`, 
+    'note-off'
+  );
+  
+  if (recording) {
+    events.push({
+      type: 'note_off',
+      note: midiNote,
+      velocity: 0,
+      time: nowSec() - startTime,
+      channel: 0
+    });
+  }
+}
+
+// =============================================================================
+// COMPUTER KEYBOARD INPUT
+// =============================================================================
+
+function getKeyElement(midiNote) {
+  return keyboardEl.querySelector(`.key[data-midi="${midiNote}"]`);
+}
+
+document.addEventListener('keydown', async (ev) => {
+  if (!keyboardToggle.checked) return;
+  const key = ev.key.toLowerCase();
+  if (!keyMap[key] || pressedKeys.has(key)) return;
+  
+  ev.preventDefault();
+  pressedKeys.add(key);
+  
+  await Tone.start();
+  
+  const midiNote = keyMap[key];
+  const keyEl = getKeyElement(midiNote);
+  if (keyEl) keyEl.style.filter = 'brightness(0.85)';
+  noteOn(midiNote, 100);
+});
+
+document.addEventListener('keyup', (ev) => {
+  if (!keyboardToggle.checked) return;
+  const key = ev.key.toLowerCase();
+  if (!keyMap[key] || !pressedKeys.has(key)) return;
+  
+  ev.preventDefault();
+  pressedKeys.delete(key);
+  
+  const midiNote = keyMap[key];
+  const keyEl = getKeyElement(midiNote);
+  if (keyEl) keyEl.style.filter = '';
+  noteOff(midiNote);
+});
+
+// =============================================================================
+// MOUSE/TOUCH INPUT
+// =============================================================================
+
+function attachPointerEvents() {
+  keyboardEl.querySelectorAll('.key').forEach(k => {
+    let pressed = false;
+    
+    k.addEventListener('pointerdown', (ev) => {
+      ev.preventDefault();
+      k.setPointerCapture(ev.pointerId);
+      if (!pressed) {
+        pressed = true;
+        k.style.filter = 'brightness(0.85)';
+        const midi = parseInt(k.dataset.midi);
+        const vel = ev.pressure ? Math.round(ev.pressure * 127) : 100;
+        noteOn(midi, vel);
+      }
+    });
+    
+    k.addEventListener('pointerup', (ev) => {
+      ev.preventDefault();
+      if (pressed) {
+        pressed = false;
+        k.style.filter = '';
+        const midi = parseInt(k.dataset.midi);
+        noteOff(midi);
+      }
+    });
+    
+    k.addEventListener('pointerleave', (ev) => {
+      if (pressed) {
+        pressed = false;
+        k.style.filter = '';
+        const midi = parseInt(k.dataset.midi);
+        noteOff(midi);
+      }
+    });
+  });
+}
+
+// =============================================================================
+// MIDI FILE EXPORT
+// =============================================================================
+
+async function saveMIDI() {
+  if (recording) stopRecord();
+  if (events.length === 0) return alert('No events recorded.');
+
+  statusEl.textContent = 'Uploading…';
+  saveBtn.disabled = true;
+  
+  try {
+    const startResp = await fetch('/gradio_api/call/save_midi', {
+      method: 'POST',
+      headers: {'Content-Type':'application/json'},
+      body: JSON.stringify({data: [events]})
+    });
+    
+    if (!startResp.ok) {
+      const txt = await startResp.text();
+      throw new Error('Server error: ' + txt);
+    }
+    
+    const startJson = await startResp.json();
+    if (!startJson || !startJson.event_id) {
+      throw new Error('Invalid API response');
+    }
+    
+    const resultResp = await fetch(`/gradio_api/call/save_midi/${startJson.event_id}`);
+    if (!resultResp.ok) {
+      const txt = await resultResp.text();
+      throw new Error('Server error: ' + txt);
+    }
+    
+    const resultText = await resultResp.text();
+    const dataLine = resultText.split('\n').find(line => line.startsWith('data:'));
+    if (!dataLine) {
+      throw new Error('Invalid API response');
+    }
+    
+    const payloadList = JSON.parse(dataLine.replace('data:', '').trim());
+    const payload = Array.isArray(payloadList) ? payloadList[0] : null;
+    if (!payload || payload.error || !payload.midi_base64) {
+      throw new Error(payload && payload.error ? payload.error : 'Invalid API response');
+    }
+    
+    const binStr = atob(payload.midi_base64);
+    const bytes = new Uint8Array(binStr.length);
+    for (let i = 0; i < binStr.length; i++) {
+      bytes[i] = binStr.charCodeAt(i);
+    }
+    
+    const blob = new Blob([bytes], {type: 'audio/midi'});
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'recording.mid';
+    a.click();
+    statusEl.textContent = 'Downloaded .mid';
+  } catch (err) {
+    console.error(err);
+    statusEl.textContent = 'Error saving MIDI';
+    alert('Error: ' + err.message);
+  } finally {
+    saveBtn.disabled = false;
+  }
+}
+
+// =============================================================================
+// EVENT LISTENERS
+// =============================================================================
+
+instrumentSelect.addEventListener('change', () => {
+  loadInstrument(instrumentSelect.value);
+});
+
+keyboardToggle.addEventListener('change', () => {
+  if (!keyboardToggle.checked) {
+    // Release all currently pressed keyboard keys
+    pressedKeys.forEach(key => {
+      const midiNote = keyMap[key];
+      const keyEl = getKeyElement(midiNote);
+      if (keyEl) keyEl.style.filter = '';
+      noteOff(midiNote);
+    });
+    pressedKeys.clear();
+  }
+});
+
+clearTerminal.addEventListener('click', () => {
+  terminal.innerHTML = '';
+  logToTerminal('=== MIDI Monitor Ready ===', 'timestamp');
+});
+
+recordBtn.addEventListener('click', async () => {
+  await Tone.start();
+  beginRecord();
+});
+
+stopBtn.addEventListener('click', () => stopRecord());
+
+saveBtn.addEventListener('click', () => saveMIDI());
+
+// =============================================================================
+// INITIALIZATION
+// =============================================================================
+
+function init() {
+  loadInstrument('synth');
+  buildKeyboard();
+  attachPointerEvents();
+  initTerminal();
+  
+  // Set initial button states
+  recordBtn.disabled = false;
+  stopBtn.disabled = true;
+  saveBtn.disabled = true;
+}
+
+// Start the application
+init();

static/styles.css

@@ -0,0 +1,113 @@
+/* Virtual MIDI Keyboard - Styles */
+
+/* Layout */
+body { 
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; 
+  padding: 12px; 
+}
+
+#mainContainer { 
+  display: flex; 
+  gap: 20px; 
+}
+
+#leftPanel { 
+  flex: 0 0 auto; 
+}
+
+#rightPanel { 
+  flex: 1; 
+  min-width: 300px; 
+}
+
+/* Keyboard */
+#keyboard { 
+  display: flex; 
+  user-select: none; 
+}
+
+.key { 
+  width: 42px; 
+  height: 180px; 
+  border: 1px solid #333; 
+  margin: 0 1px; 
+  background: white; 
+  position: relative; 
+  display: flex; 
+  align-items: flex-end; 
+  justify-content: center; 
+  cursor: pointer; 
+}
+
+.key.black { 
+  width: 30px; 
+  height: 110px; 
+  background: #222; 
+  color: white; 
+  margin-left: -15px; 
+  margin-right: -15px; 
+  z-index: 2; 
+  position: relative; 
+}
+
+/* Controls */
+.controls { 
+  margin-top: 10px; 
+  display: flex; 
+  gap: 8px; 
+  align-items: center; 
+  flex-wrap: wrap; 
+}
+
+button { 
+  padding: 8px 12px; 
+}
+
+#status { 
+  margin-left: 8px; 
+  color: #666; 
+}
+
+#downloadLink { 
+  display: inline-block; 
+  margin-left: 8px; 
+}
+
+/* MIDI Terminal */
+#terminal { 
+  background: #1e1e1e; 
+  color: #00ff00; 
+  font-family: 'Courier New', monospace; 
+  font-size: 12px; 
+  padding: 12px; 
+  height: 400px; 
+  overflow-y: auto; 
+  border: 1px solid #333; 
+  border-radius: 4px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+#terminal .note-on { 
+  color: #00ff00; 
+}
+
+#terminal .note-off { 
+  color: #888; 
+}
+
+#terminal .timestamp { 
+  color: #448; 
+}
+
+.terminal-header { 
+  display: flex; 
+  justify-content: space-between; 
+  align-items: center; 
+  margin-bottom: 8px;
+}
+
+.terminal-header button { 
+  padding: 4px 8px; 
+  font-size: 11px; 
+}