Included the reverse parrot, more keyboard keys and panic button

README.md

@@ -1,98 +1,62 @@
 ---
-title: Virtual Keyboard
+title: SYNTHIA
 emoji: 🎹
-colorFrom: red
-colorTo: gray
+colorFrom: purple
+colorTo: cyan
 sdk: gradio
 sdk_version: 6.5.1
 app_file: app.py
 pinned: false
-short_description: A small virtual midi keyboard
+short_description: Browser-based MIDI keyboard with recording and synthesis
 ---
 
-# Virtual MIDI Keyboard
+# SYNTHIA
 
-Minimal browser MIDI keyboard: play in the browser, record note events, export a .mid file.
+A minimal, responsive browser-based MIDI keyboard. Play live, record performances, and export as MIDI files. 🎹
 
-## 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
+## 🗂️ Project Structure
 
 ```
-virtual_keyboard/
-├── app.py              # Gradio server + MIDI conversion
-├── keyboard.html       # Main UI structure
+.
+├── app.py                  # Gradio server & API endpoints
+├── config.py               # Centralized configuration
+├── engines.py              # MIDI processing engines
+├── midi.py                 # MIDI file utilities
+├── keyboard.html           # HTML 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
+│   ├── keyboard.js         # Client-side audio (Tone.js)
+│   └── styles.css          # Styling & animations
+├── requirements.txt        # Python dependencies
+└── README.md               # This file
 ```
 
-## Files
-
-- app.py: Gradio app + MIDI export API
-- keyboard.html: client-side keyboard (Tone.js)
-
-## Run locally
+## 🚀 Quick Start
 
 ```bash
-uv venv
+# Install dependencies
 uv pip install -r requirements.txt
+
+# Run the app
 uv run python app.py
 ```
 
-Open http://127.0.0.1:7860
-
-## Deploy to Hugging Face Spaces
-
-### Quick Setup
-
-1. **Create a Space**
-   - Go to https://huggingface.co/spaces
-   - Click "Create new Space"
-   - Choose **Gradio SDK**
-   - Name it (e.g., `virtual_keyboard`)
+Open **http://127.0.0.1:7861**
 
-2. **Add HF remote and push**
-   ```bash
-   git remote add hf git@hf.co:spaces/YOUR_USERNAME/virtual_keyboard
-   git push hf main
-   ```
-
-That's it! Your Space will automatically deploy.
-
-### Push to Both GitHub and HF
+## 🌐 Deploy to Hugging Face Spaces
 
 ```bash
-git push origin main && git push hf main
+git remote add hf git@hf.co:spaces/YOUR_USERNAME/synthia
+git push hf main
 ```
 
-## API
+## 🔧 Technology
 
-The browser posts events to the Gradio call endpoint:
+- **Frontend**: Tone.js v6+ (Web Audio API)
+- **Backend**: Gradio 6.x + Python 3.10+
+- **MIDI**: mido library
 
-```
-POST /gradio_api/call/save_midi
-{
-  "data": [events]
-}
-```
+## 📝 License
 
-The response returns an event_id. Fetch the result from:
-
-```
-GET /gradio_api/call/save_midi/{event_id}
-```
+Open source - free to use and modify.
 
-The response includes base64 MIDI data at data[0].midi_base64.

config.py

@@ -43,6 +43,7 @@ KEYBOARD_KEYS = [
 
 # Computer keyboard shortcuts to MIDI notes
 KEYBOARD_SHORTCUTS = {
+    # First octave (C4-B4)
     60: "A",  # C4
     61: "W",  # C#4
     62: "S",  # D4
@@ -55,6 +56,12 @@ KEYBOARD_SHORTCUTS = {
     69: "H",  # A4
     70: "U",  # A#4
     71: "J",  # B4
+    # Second octave (C5-E5)
+    72: "K",  # C5
+    73: "O",  # C#5
+    74: "L",  # D5
+    75: "P",  # D#5
+    76: ";",  # E5
 }
 
 # =============================================================================
@@ -80,7 +87,7 @@ INSTRUMENTS = {
             "attack": 0.005,
             "decay": 0.1,
             "sustain": 0.3,
-            "release": 1,
+            "release": 0.2,
         },
     },
     "piano": {
@@ -91,7 +98,7 @@ INSTRUMENTS = {
             "attack": 0.001,
             "decay": 0.2,
             "sustain": 0.1,
-            "release": 2,
+            "release": 0.3,
         },
     },
     "organ": {
@@ -113,7 +120,7 @@ INSTRUMENTS = {
             "attack": 0.01,
             "decay": 0.1,
             "sustain": 0.4,
-            "release": 1.5,
+            "release": 0.3,
         },
     },
     "pluck": {
@@ -136,7 +143,7 @@ INSTRUMENTS = {
             "attack": 0.01,
             "decay": 0.2,
             "sustain": 0.2,
-            "release": 1,
+            "release": 0.2,
         },
     },
 }

engines.py

@@ -64,6 +64,67 @@ class ParrotEngine(MIDIEngine):
         ]
 
 
+# =============================================================================
+# REVERSE PARROT ENGINE
+# =============================================================================
+
+
+class ReverseParrotEngine(MIDIEngine):
+    """
+    Reverse Parrot Engine - plays back MIDI in reverse order.
+
+    Takes the recorded performance and reverses the sequence of notes,
+    playing them backwards while maintaining their timing relationships.
+    """
+
+    def __init__(self):
+        super().__init__("Reverse Parrot")
+
+    def process(self, events: List[Dict[str, Any]]) -> List[Dict[str, Any]]:
+        """Reverse the sequence of note numbers while keeping timing and event types"""
+        if not events:
+            return []
+
+        # Separate note_on and note_off events
+        note_on_events = [e for e in events if e.get("type") == "note_on"]
+        note_off_events = [e for e in events if e.get("type") == "note_off"]
+        
+        # Extract note numbers from note_on events and reverse them
+        on_notes = [e.get("note") for e in note_on_events]
+        reversed_on_notes = list(reversed(on_notes))
+        
+        # Extract note numbers from note_off events and reverse them
+        off_notes = [e.get("note") for e in note_off_events]
+        reversed_off_notes = list(reversed(off_notes))
+        
+        # Reconstruct events with reversed notes but original structure
+        result = []
+        on_index = 0
+        off_index = 0
+        
+        for event in events:
+            if event.get("type") == "note_on":
+                result.append({
+                    "type": "note_on",
+                    "note": reversed_on_notes[on_index],
+                    "velocity": event.get("velocity"),
+                    "time": event.get("time"),
+                    "channel": event.get("channel", 0),
+                })
+                on_index += 1
+            elif event.get("type") == "note_off":
+                result.append({
+                    "type": "note_off",
+                    "note": reversed_off_notes[off_index],
+                    "velocity": event.get("velocity"),
+                    "time": event.get("time"),
+                    "channel": event.get("channel", 0),
+                })
+                off_index += 1
+
+        return result
+
+
 # =============================================================================
 # ENGINE REGISTRY
 # =============================================================================
@@ -72,7 +133,7 @@ class ParrotEngine(MIDIEngine):
 class EngineRegistry:
     """Registry for managing available MIDI engines"""
 
-    _engines = {"parrot": ParrotEngine}
+    _engines = {"parrot": ParrotEngine, "reverse_parrot": ReverseParrotEngine}
 
     @classmethod
     def register(cls, engine_id: str, engine_class: type):

keyboard.html

@@ -34,6 +34,7 @@
           Engine:
           <select id="engineSelect">
             <option value="parrot">Parrot</option>
+            <option value="reverse_parrot">Reverse Parrot</option>
           </select>
         </label>
         
@@ -41,6 +42,7 @@
         <button id="stopBtn" disabled>Stop</button>
         <button id="playbackBtn" disabled>Playback</button>
         <button id="saveBtn" disabled>Save MIDI</button>
+        <button id="panicBtn" style="background: #ff4444; color: white;">Panic 🚨</button>
         
         <label>
           <input type="checkbox" id="keyboardToggle">

static/keyboard.js

@@ -33,7 +33,7 @@ const keys = [
   {name:'B',  offset:11, black:false}
 ];
 
-// Computer keyboard mapping (C4 octave)
+// Computer keyboard mapping (fallback)
 const keyMap = {
   'a': 60,  // C4
   'w': 61,  // C#4
@@ -46,13 +46,19 @@ const keyMap = {
   'y': 68,  // G#4
   'h': 69,  // A4
   'u': 70,  // A#4
-  'j': 71   // B4
+  'j': 71,  // B4
+  'k': 72,  // C5
+  'o': 73,  // C#5
+  'l': 74,  // D5
+  'p': 75,  // D#5
+  ';': 76   // E5
 };
 
-// Keyboard shortcuts displayed on keys
+// Keyboard shortcuts displayed on keys (fallback)
 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'
+  66: 'T', 67: 'G', 68: 'Y', 69: 'H', 70: 'U', 71: 'J',
+  72: 'K', 73: 'O', 74: 'L', 75: 'P', 76: ';'
 };
 
 // =============================================================================
@@ -65,6 +71,7 @@ const recordBtn = document.getElementById('recordBtn');
 const stopBtn = document.getElementById('stopBtn');
 const playbackBtn = document.getElementById('playbackBtn');
 const saveBtn = document.getElementById('saveBtn');
+const panicBtn = document.getElementById('panicBtn');
 const keyboardToggle = document.getElementById('keyboardToggle');
 const instrumentSelect = document.getElementById('instrumentSelect');
 const engineSelect = document.getElementById('engineSelect');
@@ -142,10 +149,6 @@ async function initializeFromConfig() {
       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();
     
@@ -154,12 +157,12 @@ async function initializeFromConfig() {
     // 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}},
+      'synth': {name: 'Synth', type: 'Synth', oscillator: 'sine', envelope: {attack: 0.005, decay: 0.1, sustain: 0.3, release: 0.2}},
+      'piano': {name: 'Piano', type: 'Synth', oscillator: 'triangle', envelope: {attack: 0.001, decay: 0.2, sustain: 0.1, release: 0.3}},
       '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}},
+      'bass': {name: 'Bass', type: 'Synth', oscillator: 'sawtooth', envelope: {attack: 0.01, decay: 0.1, sustain: 0.4, release: 0.3}},
       '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}}
+      'fm': {name: 'FM', type: 'FMSynth', harmonicity: 3, modulationIndex: 10, envelope: {attack: 0.01, decay: 0.2, sustain: 0.2, release: 0.2}}
     });
     window.keyboardShortcutsFromServer = keyShortcuts; // Use hardcoded as fallback
     window.keyMapFromServer = keyMap; // Use hardcoded as fallback
@@ -529,6 +532,14 @@ engineSelect.addEventListener('change', (e) => {
 playbackBtn.addEventListener('click', async () => {
   if (events.length === 0) return alert('No recording to play back');
   
+  // Ensure all notes are off before starting playback
+  if (synth) {
+    synth.releaseAll();
+  }
+  keyboardEl.querySelectorAll('.key').forEach(k => {
+    k.style.filter = '';
+  });
+  
   statusEl.textContent = 'Playing back...';
   playbackBtn.disabled = true;
   recordBtn.disabled = true;
@@ -538,11 +549,47 @@ playbackBtn.addEventListener('click', async () => {
   logToTerminal('', '');
   
   try {
-    // For now, skip engine processing and directly play recorded events
-    // TODO: Call engine API when Gradio routing is figured out
-    const processedEvents = events;
+    // Process events through the selected engine
+    let processedEvents = events;
+    const selectedEngine = engineSelect.value;
     
-    console.log(`Playing back ${processedEvents.length} events`);
+    if (selectedEngine && selectedEngine !== 'parrot') {
+      // Step 1: Start the engine processing call
+      const startResp = await fetch('/gradio_api/call/process_engine', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          data: [{
+            engine_id: selectedEngine,
+            events: events
+          }]
+        })
+      });
+      
+      if (!startResp.ok) {
+        console.error('Engine API start failed:', startResp.status);
+      } else {
+        const startJson = await startResp.json();
+
+        
+        // Step 2: Poll for the result
+        if (startJson && startJson.event_id) {
+          const resultResp = await fetch(`/gradio_api/call/process_engine/${startJson.event_id}`);
+          if (resultResp.ok) {
+            const resultText = await resultResp.text();
+            const dataLine = resultText.split('\n').find(line => line.startsWith('data:'));
+            if (dataLine) {
+              const payloadList = JSON.parse(dataLine.replace('data:', '').trim());
+              const result = Array.isArray(payloadList) ? payloadList[0] : null;
+              
+              if (result && result.events) {
+                processedEvents = result.events;
+              }
+            }
+          }
+        }
+      }
+    }
     
     // Play back the recorded events
     statusEl.textContent = 'Playing back...';
@@ -550,7 +597,16 @@ playbackBtn.addEventListener('click', async () => {
     
     const playEvent = () => {
       if (eventIndex >= processedEvents.length) {
-        // Playback complete
+        // Playback complete - ensure all notes are off
+        if (synth) {
+          synth.releaseAll();
+        }
+        
+        // Clear all key highlights
+        keyboardEl.querySelectorAll('.key').forEach(k => {
+          k.style.filter = '';
+        });
+        
         statusEl.textContent = 'Playback complete';
         playbackBtn.disabled = false;
         recordBtn.disabled = false;
@@ -605,11 +661,36 @@ playbackBtn.addEventListener('click', async () => {
     statusEl.textContent = 'Playback error: ' + err.message;
     playbackBtn.disabled = false;
     recordBtn.disabled = false;
+    
+    // Ensure all notes are off on error
+    if (synth) {
+      synth.releaseAll();
+    }
+    keyboardEl.querySelectorAll('.key').forEach(k => {
+      k.style.filter = '';
+    });
   }
 });
 
 saveBtn.addEventListener('click', () => saveMIDI());
 
+panicBtn.addEventListener('click', () => {
+  // Stop all notes immediately
+  if (synth) {
+    synth.releaseAll();
+  }
+  
+  // Clear all pressed keys
+  pressedKeys.clear();
+  
+  // Reset all visual key highlights
+  keyboardEl.querySelectorAll('.key').forEach(k => {
+    k.style.filter = '';
+  });
+  
+  logToTerminal('🚨 PANIC - All notes stopped', 'timestamp');
+});
+
 // =============================================================================
 // =============================================================================
 // INITIALIZATION
@@ -631,8 +712,6 @@ async function init() {
   stopBtn.disabled = true;
   saveBtn.disabled = true;
   playbackBtn.disabled = true;
-  
-  console.log('✓ Virtual MIDI Keyboard initialized');
 }
 
 // Start the application when DOM is ready