initial commit

.gitignore

@@ -0,0 +1,75 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+pip-wheel-metadata/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+
+# Virtual environments
+.venv/
+venv/
+ENV/
+env/
+
+# UV lock file
+uv.lock
+
+# PyInstaller
+*.manifest
+*.spec
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+
+# IDEs
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# Environment variables
+.env
+.env.local
+
+# Logs
+*.log
+
+# OS files
+.DS_Store
+Thumbs.db

README.md

@@ -0,0 +1,47 @@
+# Virtual MIDI Keyboard
+
+Minimal browser MIDI keyboard: play in the browser, record note events, export a .mid file.
+
+## Files
+
+- app.py: Gradio app + MIDI export API
+- keyboard.html: client-side keyboard (Tone.js)
+
+## Run locally
+
+```bash
+uv venv
+uv pip install -r requirements.txt
+uv run python app.py
+```
+
+Open http://127.0.0.1:7860
+
+## Deploy to Hugging Face Spaces (Gradio SDK)
+
+Include these files at the repo root:
+
+- app.py
+- keyboard.html
+- requirements.txt
+
+Then create a Gradio Space and push the repo.
+
+## API
+
+The browser posts events to the Gradio call endpoint:
+
+```
+POST /gradio_api/call/save_midi
+{
+  "data": [events]
+}
+```
+
+The response returns an event_id. Fetch the result from:
+
+```
+GET /gradio_api/call/save_midi/{event_id}
+```
+
+The response includes base64 MIDI data at data[0].midi_base64.

app.py

@@ -0,0 +1,95 @@
+import base64
+import html
+import io
+
+import mido
+from mido import MidiFile, MidiTrack, Message, MetaMessage
+
+import gradio as gr
+
+
+# --- 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()
+
+
+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.
+    """
+    if not isinstance(events, list) or len(events) == 0:
+        return {"error": "No events provided"}
+
+    mid_bytes = events_to_midbytes(events)
+    midi_b64 = base64.b64encode(mid_bytes).decode("ascii")
+    return {"midi_base64": midi_b64}
+
+
+with open("keyboard.html", "r", encoding="utf-8") as handle:
+    keyboard_html = handle.read()
+
+iframe_html = (
+    '<iframe srcdoc="'
+    + html.escape(keyboard_html, quote=True)
+    + '" style="width:100%;height:420px;border:0;"></iframe>'
+)
+
+# --- Gradio UI: embed the keyboard HTML in an iframe and expose an API ---
+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",
+    )
+
+# Run locally: python app.py
+if __name__ == "__main__":
+    demo.launch()

keyboard.html

@@ -0,0 +1,216 @@
+<!doctype html>
+<html>
+<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>
+</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>
+
+  <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>
+</body>
+</html>

main.py

@@ -0,0 +1,109 @@
+# 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

pyproject.toml

@@ -0,0 +1,10 @@
+[project]
+name = "virtual-keyboard"
+version = "0.1.0"
+description = "Add your description here"
+readme = "README.md"
+requires-python = ">=3.10"
+dependencies = [
+    "gradio>=6.5.1",
+    "mido>=1.3.3",
+]

requirements.txt

@@ -0,0 +1,2 @@
+gradio
+mido