Update app.py

app.py

@@ -2,7 +2,7 @@ import gradio as gr
 import random
 import time
 
-# Matrix Music Hacker - Fixed Voice Recognition Version
+# Matrix Music Hacker - Complete Voice Recognition Version
 def create_interface():
     
     # Matrix-themed CSS
@@ -48,11 +48,19 @@ def create_interface():
     function() {
         console.log('🎵 Matrix Music Hacker v2.1 - Initializing...');
         
-        // Global variables
+        // Global variables for music code building
         let audioContext = null;
         let currentOscillators = [];
         let recognition = null;
         let isListening = false;
+        let currentMusicCode = [];  // Array to store building music code
+        let musicParams = {         // Current music parameters
+            tempo: 120,
+            volume: 0.7,
+            key: 'C',
+            scale: 'major',
+            effects: []
+        };
         
         // Initialize audio context
         function initAudio() {
@@ -328,7 +336,7 @@ def create_interface():
             currentOscillators = [];
         }
         
-        // Enhanced speech recognition with better error handling
+        // Enhanced continuous speech recognition
         function initSpeechRecognition() {
             if (isListening) {
                 stopSpeechRecognition();
@@ -345,42 +353,48 @@ def create_interface():
                 const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
                 recognition = new SpeechRecognition();
                 
-                recognition.continuous = false;
-                recognition.interimResults = false;
+                recognition.continuous = true;  // Enable continuous listening
+                recognition.interimResults = true;  // Show interim results
                 recognition.lang = 'en-US';
                 recognition.maxAlternatives = 1;
                 
                 recognition.onstart = function() {
                     isListening = true;
                     console.log('🎤 Speech recognition started');
-                    updateStatus('🎤 LISTENING... Speak your command!');
+                    updateStatus('🎤 CONTINUOUS LISTENING ACTIVE - Speak your commands!');
                 };
                 
                 recognition.onresult = function(event) {
-                    const command = event.results[0][0].transcript.toLowerCase().trim();
-                    const confidence = event.results[0][0].confidence;
-                    console.log('Voice command received:', command, 'Confidence:', confidence);
-                    
-                    processVoiceCommand(command);
+                    for (let i = event.resultIndex; i < event.results.length; i++) {
+                        if (event.results[i].isFinal) {
+                            const command = event.results[i][0].transcript.toLowerCase().trim();
+                            const confidence = event.results[i][0].confidence;
+                            console.log('Voice command received:', command, 'Confidence:', confidence);
+                            
+                            processVoiceCommand(command);
+                        }
+                    }
                 };
                 
                 recognition.onerror = function(event) {
                     console.error('Speech recognition error:', event.error);
-                    isListening = false;
                     
                     let errorMessage = '❌ VOICE ERROR: ';
                     switch(event.error) {
                         case 'no-speech':
-                            errorMessage += 'No speech detected. Try again.';
+                            errorMessage += 'No speech detected. Still listening...';
                             break;
                         case 'audio-capture':
                             errorMessage += 'Microphone not accessible.';
+                            isListening = false;
                             break;
                         case 'not-allowed':
                             errorMessage += 'Microphone permission denied.';
+                            isListening = false;
                             break;
                         case 'network':
                             errorMessage += 'Network error occurred.';
+                            isListening = false;
                             break;
                         default:
                             errorMessage += event.error;
@@ -389,12 +403,20 @@ def create_interface():
                 };
                 
                 recognition.onend = function() {
-                    isListening = false;
                     console.log('Speech recognition ended');
-                    if (document.querySelector('[data-testid="textbox"]')) {
+                    if (isListening) {
+                        // Restart recognition if we're still supposed to be listening
                         setTimeout(() => {
-                            updateStatus('🔰 MATRIX ONLINE - READY FOR VOICE INPUT');
-                        }, 2000);
+                            if (isListening) {
+                                try {
+                                    recognition.start();
+                                } catch (e) {
+                                    console.error('Failed to restart recognition:', e);
+                                    isListening = false;
+                                    updateStatus('❌ VOICE RECOGNITION STOPPED - Click button to restart');
+                                }
+                            }
+                        }, 1000);
                     }
                 };
                 
@@ -419,245 +441,550 @@ def create_interface():
         function processVoiceCommand(command) {
             console.log('Processing command:', command);
             
-            let soundType = '';
-            let codePattern = '';
             let statusMessage = '';
+            let codeAdded = false;
             
-            if (command.includes('deep house') || command.includes('house') || command.includes('deep')) {
-                soundType = 'deep_house';
-                codePattern = 'sound("bd").n("[0,2,4,6]").gain(0.8).room(0.3)';
-                statusMessage = '🏠 DEEP HOUSE PATTERN ACTIVATED';
-            } else if (command.includes('cyberpunk') || command.includes('synth') || command.includes('cyber')) {
-                soundType = 'cyberpunk';
-                codePattern = 'sound("lead").n("[0,2,7,12]").fast(2).lpf(1200)';
-                statusMessage = '⚡ CYBERPUNK SYNTH WAVE ENGAGED';
-            } else if (command.includes('bass') || command.includes('underground') || command.includes('sub')) {
-                soundType = 'bass';
-                codePattern = 'sound("bass").n("0,3,7").slow(2).lpf(200)';
-                statusMessage = '🔊 UNDERGROUND BASS SEQUENCE ACTIVE';
-            } else if (command.includes('ambient') || command.includes('atmosphere') || command.includes('pad')) {
-                soundType = 'ambient';
-                codePattern = 'sound("pad").n("0,4,7,11").slow(4).room(0.8).lpf(800)';
-                statusMessage = '🌌 AMBIENT MATRIX SOUNDSCAPE ONLINE';
-            } else if (command.includes('breakbeat') || command.includes('rave') || command.includes('break') || command.includes('beat')) {
-                soundType = 'breakbeat';
-                codePattern = 'sound("bd,sd").n("0,2,4,6").fast(1.5).gain(0.7)';
-                statusMessage = '💥 BREAKBEAT RAVE SEQUENCE INITIATED';
-            } else if (command.includes('stop') || command.includes('terminate') || command.includes('halt')) {
+            // Parse different types of commands
+            if (command.includes('clear') || command.includes('reset') || command.includes('start over')) {
+                clearMusicCode();
+                statusMessage = '🗑️ MUSIC CODE CLEARED - Starting fresh session';
+            }
+            else if (command.includes('tempo') || command.includes('speed') || command.includes('bpm')) {
+                handleTempoCommand(command);
+                codeAdded = true;
+            }
+            else if (command.includes('volume') || command.includes('loud') || command.includes('quiet') || command.includes('gain')) {
+                handleVolumeCommand(command);
+                codeAdded = true;
+            }
+            else if (command.includes('reverb') || command.includes('room') || command.includes('echo')) {
+                handleReverbCommand(command);
+                codeAdded = true;
+            }
+            else if (command.includes('filter') || command.includes('low pass') || command.includes('high pass') || command.includes('lpf') || command.includes('hpf')) {
+                handleFilterCommand(command);
+                codeAdded = true;
+            }
+            else if (command.includes('delay')) {
+                handleDelayCommand(command);
+                codeAdded = true;
+            }
+            else if (command.includes('add') || command.includes('layer') || command.includes('include')) {
+                handleAddCommand(command);
+                codeAdded = true;
+            }
+            else if (command.includes('remove') || command.includes('delete') || command.includes('drop')) {
+                handleRemoveCommand(command);
+                codeAdded = true;
+            }
+            else if (command.includes('change key') || command.includes('transpose')) {
+                handleKeyCommand(command);
+                codeAdded = true;
+            }
+            // Base sound commands
+            else if (command.includes('deep house') || command.includes('house') || command.includes('deep')) {
+                addMusicCode('deep_house', 'sound("bd").n("[0,2,4,6]").gain(' + musicParams.volume + ')');
+                playMatrixSound('deep_house');
+                statusMessage = '🏠 DEEP HOUSE PATTERN ADDED TO SESSION';
+                codeAdded = true;
+            } 
+            else if (command.includes('cyberpunk') || command.includes('synth') || command.includes('cyber')) {
+                addMusicCode('cyberpunk', 'sound("lead").n("[0,2,7,12]").fast(2)');
+                playMatrixSound('cyberpunk');
+                statusMessage = '⚡ CYBERPUNK SYNTH LAYER ADDED';
+                codeAdded = true;
+            } 
+            else if (command.includes('bass') || command.includes('underground') || command.includes('sub')) {
+                addMusicCode('bass', 'sound("bass").n("0,3,7").slow(2)');
+                playMatrixSound('bass');
+                statusMessage = '🔊 BASS LINE INTEGRATED INTO SESSION';
+                codeAdded = true;
+            } 
+            else if (command.includes('ambient') || command.includes('atmosphere') || command.includes('pad')) {
+                addMusicCode('ambient', 'sound("pad").n("0,4,7,11").slow(4)');
+                playMatrixSound('ambient');
+                statusMessage = '🌌 AMBIENT LAYER WOVEN INTO MATRIX';
+                codeAdded = true;
+            } 
+            else if (command.includes('breakbeat') || command.includes('rave') || command.includes('break') || command.includes('beat')) {
+                addMusicCode('breakbeat', 'sound("bd,sd").n("0,2,4,6").fast(1.5)');
+                playMatrixSound('breakbeat');
+                statusMessage = '💥 BREAKBEAT RHYTHM LOCKED INTO GRID';
+                codeAdded = true;
+            } 
+            else if (command.includes('drums') || command.includes('kick') || command.includes('snare')) {
+                addMusicCode('drums', 'sound("bd,sd,hh").n("0,[2,6],4")');
+                playMatrixSound('breakbeat');
+                statusMessage = '🥁 DRUM PATTERN SYNCHRONIZED';
+                codeAdded = true;
+            }
+            else if (command.includes('stop') || command.includes('terminate') || command.includes('halt')) {
                 stopAllSounds();
-                updateStatus('⏹️ ALL MATRIX SOUNDS TERMINATED');
-                updateCodeDisplay('// All oscillators terminated by voice command');
-                return;
-            } else {
-                statusMessage = `❓ UNKNOWN COMMAND: "${command}" - Try: deep house, cyberpunk, bass, ambient, breakbeat`;
+                statusMessage = '⏹️ ALL MATRIX SOUNDS TERMINATED - Code preserved';
+            } 
+            else if (command.includes('play') || command.includes('start') || command.includes('begin')) {
+                playCurrentCode();
+                statusMessage = '▶️ PLAYING CURRENT MUSIC CODE SESSION';
+            }
+            else {
+                statusMessage = `❓ UNKNOWN COMMAND: "${command}"`;
                 updateStatus(statusMessage);
                 return;
             }
             
-            // Play the sound and update displays
-            if (soundType) {
-                playMatrixSound(soundType);
-                updateStatus(statusMessage);
-                updateCodeDisplay(codePattern);
+            // Update displays if code was modified
+            if (codeAdded || statusMessage.includes('CLEARED')) {
+                updateCodeDisplay(buildFullMusicCode());
             }
+            
+            updateStatus(statusMessage);
         }
         
-        function updateStatus(message) {
-            const statusElement = document.querySelector('[data-testid="textbox"] textarea');
-            if (statusElement) {
-                statusElement.value = message;
-                statusElement.dispatchEvent(new Event('input', { bubbles: true }));
+        function handleTempoCommand(command) {
+            let tempo = musicParams.tempo;
+            if (command.includes('faster') || command.includes('speed up') || command.includes('quick')) {
+                tempo = Math.min(200, musicParams.tempo + 20);
+            } else if (command.includes('slower') || command.includes('slow down')) {
+                tempo = Math.max(60, musicParams.tempo - 20);
+            } else {
+                // Try to extract specific BPM
+                const bpmMatch = command.match(/(\d+)/);
+                if (bpmMatch) {
+                    tempo = Math.max(60, Math.min(200, parseInt(bpmMatch[1])));
+                }
             }
+            musicParams.tempo = tempo;
+            updateStatus(`🎵 TEMPO SET TO ${tempo} BPM`);
         }
         
-        function updateCodeDisplay(code) {
-            // Find the code element and update it
-            const codeElements = document.querySelectorAll('.gr-code pre code');
-            codeElements.forEach(element => {
-                if (element.textContent.includes('Voice commands will generate') || 
-                    element.textContent.includes('sound(') || 
-                    element.textContent.includes('//')) {
-                    element.textContent = code;
+        function handleVolumeCommand(command) {
+            let volume = musicParams.volume;
+            if (command.includes('louder') || command.includes('up')) {
+                volume = Math.min(1.0, musicParams.volume + 0.2);
+            } else if (command.includes('quieter') || command.includes('down') || command.includes('soft')) {
+                volume = Math.max(0.1, musicParams.volume - 0.2);
+            } else {
+                const volumeMatch = command.match(/(\d+)/);
+                if (volumeMatch) {
+                    volume = Math.max(0.1, Math.min(1.0, parseInt(volumeMatch[1]) / 100));
                 }
+            }
+            musicParams.volume = volume;
+            updateStatus(`🔊 VOLUME ADJUSTED TO ${Math.round(volume * 100)}%`);
+        }
+        
+        function handleReverbCommand(command) {
+            const reverbAmount = command.includes('more') || command.includes('heavy') ? '0.8' : '0.4';
+            const effect = `.room(${reverbAmount})`;
+            if (!musicParams.effects.includes('room')) {
+                musicParams.effects.push('room');
+                addEffectToLastCode(effect);
+                updateStatus(`🌊 REVERB EFFECT APPLIED (${reverbAmount})`);
+            }
+        }
+        
+        function handleFilterCommand(command) {
+            let filterCode = '';
+            if (command.includes('low pass') || command.includes('lpf') || command.includes('warm')) {
+                filterCode = '.lpf(800)';
+                updateStatus('🎛️ LOW-PASS FILTER ENGAGED');
+            } else if (command.includes('high pass') || command.includes('hpf') || command.includes('bright')) {
+                filterCode = '.hpf(200)';
+                updateStatus('🎛️ HIGH-PASS FILTER ACTIVATED');
+            }
+            if (filterCode) {
+                addEffectToLastCode(filterCode);
+            }
+        }
+        
+        function handleDelayCommand(command) {
+            const delayAmount = command.includes('long') || command.includes('heavy') ? '0.25' : '0.125';
+            const effect = `.delay(${delayAmount})`;
+            if (!musicParams.effects.includes('delay')) {
+                musicParams.effects.push('delay');
+                addEffectToLastCode(effect);
+                updateStatus(`⏰ DELAY EFFECT SYNCHRONIZED (${delayAmount})`);
+            }
+        }
+        
+        function handleAddCommand(command) {
+            if (command.includes('hihat') || command.includes('hi hat')) {
+                addMusicCode('hihat', 'sound("hh").n("0,2,4,6,8,10,12,14").gain(0.3)');
+                updateStatus('🎩 HI-HAT PATTERN ADDED');
+            } else if (command.includes('clap')) {
+                addMusicCode('clap', 'sound("cp").n("[~,2,~,6]").gain(0.5)');
+                updateStatus('👏 CLAP TRACK INTEGRATED');
+            } else if (command.includes('open hat')) {
+                addMusicCode('openhat', 'sound("oh").n("[~,~,4,~]").gain(0.4)');
+                updateStatus('🎩 OPEN HAT ACCENT ADDED');
+            } else if (command.includes('arpeggios') || command.includes('arp')) {
+                addMusicCode('arp', 'sound("arpy").n("0,2,4,7,9").fast(4).gain(0.6)');
+                updateStatus('🎹 ARPEGGIOS CASCADING');
+            } else if (command.includes('strings')) {
+                addMusicCode('strings', 'sound("string").n("0,4,7").slow(8).room(0.6)');
+                updateStatus('🎻 STRING SECTION HARMONIZING');
+            }
+        }
+        
+        function handleRemoveCommand(command) {
+            if (command.includes('bass')) {
+                removeMusicCode('bass');
+                updateStatus('🔇 BASS LAYER REMOVED');
+            } else if (command.includes('drums')) {
+                removeMusicCode('drums');
+                removeMusicCode('breakbeat');
+                updateStatus('🥁 DRUM LAYERS REMOVED');
+            } else if (command.includes('synth') || command.includes('lead')) {
+                removeMusicCode('cyberpunk');
+                updateStatus('⚡ SYNTH LAYER REMOVED');
+            } else if (command.includes('ambient') || command.includes('pad')) {
+                removeMusicCode('ambient');
+                updateStatus('🌌 AMBIENT LAYER REMOVED');
+            } else if (command.includes('last')) {
+                removeLastMusicCode();
+                updateStatus('🗑️ LAST ADDITION REMOVED');
+            }
+        }
+        
+        function handleKeyCommand(command) {
+            const keys = ['C', 'D', 'E', 'F', 'G', 'A', 'B'];
+            for (const key of keys) {
+                if (command.includes(key.toLowerCase()) || command.includes(`key of ${key.toLowerCase()}`)) {
+                    musicParams.key = key;
+                    updateStatus(`🎹 KEY CHANGED TO ${key} MAJOR`);
+                    break;
+                }
+            }
+        }
+        
+        function addMusicCode(type, code) {
+            // Remove existing code of the same type
+            currentMusicCode = currentMusicCode.filter(item => item.type !== type);
+            // Add new code
+            currentMusicCode.push({ type, code, timestamp: Date.now() });
+        }
+        
+        function removeMusicCode(type) {
+            currentMusicCode = currentMusicCode.filter(item => item.type !== type);
+        }
+        
+        function removeLastMusicCode() {
+            if (currentMusicCode.length > 0) {
+                currentMusicCode.pop();
+            }
+        }
+        
+        function addEffectToLastCode(effect) {
+            if (currentMusicCode.length > 0) {
+                const lastIndex = currentMusicCode.length - 1;
+                if (!currentMusicCode[lastIndex].code.includes(effect.split('(')[0])) {
+                    currentMusicCode[lastIndex].code += effect;
+                }
+            }
+        }
+        
+        function clearMusicCode() {
+            currentMusicCode = [];
+            musicParams = {
+                tempo: 120,
+                volume: 0.7,
+                key: 'C',
+                scale: 'major',
+                effects: []
+            };
+        }
+        
+        function buildFullMusicCode() {
+            if (currentMusicCode.length === 0) {
+                return '// Voice commands will build your music code here...\n// Try: "play deep house", then "add bass", then "make it faster"';
+            }
+            
+            let fullCode = `// 🎵 Matrix Music Session - ${currentMusicCode.length} layers active\n`;
+            fullCode += `// Tempo: ${musicParams.tempo} BPM | Volume: ${Math.round(musicParams.volume * 100)}% | Key: ${musicParams.key}\n\n`;
+            
+            if (currentMusicCode.length === 1) {
+                fullCode += currentMusicCode[0].code;
+            } else {
+                fullCode += 'stack(\n';
+                currentMusicCode.forEach((item, index) => {
+                    const indent = '  ';
+                    fullCode += `${indent}${item.code}`;
+                    if (index < currentMusicCode.length - 1) {
+                        fullCode += ',';
+                    }
+                    fullCode += `  // ${item.type}\n`;
+                });
+                fullCode += ')';
+            }
+            
+            // Add global effects
+            if (musicParams.tempo !== 120) {
+                fullCode += `.cpm(${musicParams.tempo})`;
+            }
+            if (musicParams.volume !== 0
+// Add global effects
+            if (musicParams.tempo !== 120) {
+                fullCode += `.cpm(${musicParams.tempo})`;
+            }
+            if (musicParams.volume !== 0.7) {
+                fullCode += `.gain(${musicParams.volume})`;
+            }
+            
+            return fullCode;
+        }
+        
+        function playCurrentCode() {
+            // Play all current sounds in sequence
+            currentMusicCode.forEach((item, index) => {
+                setTimeout(() => {
+                    if (item.type === 'deep_house') playMatrixSound('deep_house');
+                    else if (item.type === 'cyberpunk') playMatrixSound('cyberpunk');
+                    else if (item.type === 'bass') playMatrixSound('bass');
+                    else if (item.type === 'ambient') playMatrixSound('ambient');
+                    else if (item.type === 'breakbeat' || item.type === 'drums') playMatrixSound('breakbeat');
+                }, index * 200);
             });
         }
         
-        // Store functions globally for Gradio to access
-        window.playMatrixSound = playMatrixSound;
-        window.stopAllSounds = stopAllSounds;
-        window.initSpeechRecognition = initSpeechRecognition;
-        window.stopSpeechRecognition = stopSpeechRecognition;
-        window.updateStatus = updateStatus;
-        window.updateCodeDisplay = updateCodeDisplay;
+        function updateCodeDisplay(code) {
+            const codeElement = document.querySelector('#music-code textarea');
+            if (codeElement) {
+                codeElement.value = code;
+                // Trigger change event to update Gradio
+                codeElement.dispatchEvent(new Event('input', { bubbles: true }));
+            }
+        }
+        
+        function updateStatus(message) {
+            const statusElement = document.querySelector('#voice-status');
+            if (statusElement) {
+                statusElement.textContent = message;
+                console.log('Status:', message);
+            }
+        }
+        
+        // Initialize everything
+        createMatrixRain();
+        
+        // Global functions for button callbacks
+        window.startVoiceRecognition = function() {
+            const success = initSpeechRecognition();
+            return success ? "🎤 Voice Recognition Active" : "❌ Voice Recognition Failed";
+        };
+        
+        window.stopVoiceRecognition = function() {
+            stopSpeechRecognition();
+            return "⏹️ Voice Recognition Stopped";
+        };
+        
+        window.playDeepHouse = function() {
+            playMatrixSound('deep_house');
+            return "🏠 Deep House Activated";
+        };
+        
+        window.playCyberpunk = function() {
+            playMatrixSound('cyberpunk');
+            return "⚡ Cyberpunk Synth Engaged";
+        };
+        
+        window.playBass = function() {
+            playMatrixSound('bass');
+            return "🔊 Bass Line Active";
+        };
+        
+        window.playAmbient = function() {
+            playMatrixSound('ambient');
+            return "🌌 Ambient Atmosphere";
+        };
+        
+        window.playBreakbeat = function() {
+            playMatrixSound('breakbeat');
+            return "💥 Breakbeat Rhythm";
+        };
+        
+        window.stopAll = function() {
+            stopAllSounds();
+            return "⏹️ All Sounds Stopped";
+        };
+        
+        window.clearCode = function() {
+            clearMusicCode();
+            updateCodeDisplay(buildFullMusicCode());
+            return "🗑️ Music Code Cleared";
+        };
         
-        // Initialize matrix rain effect after a short delay
-        setTimeout(createMatrixRain, 1000);
+        console.log('🎵 Matrix Music Hacker v2.1 - Ready for voice commands!');
+        console.log('Voice commands: "play deep house", "add bass", "make it faster", "add reverb", etc.');
         
-        return "🎵 Matrix Music Hacker v2.1 - FULLY OPERATIONAL";
+        return "🎵 Matrix Music Hacker v2.1 - Initialization Complete";
     }
     """
     
-    with gr.Blocks(
-        title="Matrix Music Hacker v2.1",
-        css=custom_css,
-        js=matrix_js
-    ) as interface:
-        
-        gr.Markdown("""
-        # 🎵 Matrix Music Hacker v2.1
-        ### *Cyberpunk Voice-Controlled Music Synthesizer*
-        
-        > "Wake up, Neo... The Matrix has you... But now you have the beats."
+    # Create the Gradio interface
+    with gr.Blocks(css=custom_css, js=matrix_js, title="🎵 Matrix Music Hacker v2.1") as interface:
+        
+        gr.HTML("""
+        <div style="text-align: center; padding: 20px;">
+            <h1 style="color: #00ff00; text-shadow: 0 0 20px #00ff00; font-size: 2.5em; margin-bottom: 10px;">
+                🎵 MATRIX MUSIC HACKER v2.1
+            </h1>
+            <p style="color: #00ff00; font-size: 1.2em; text-shadow: 0 0 10px #00ff00;">
+                Voice-Controlled Music Generation System
+            </p>
+            <p style="color: #66ff66; font-size: 1em;">
+                Speak your commands: "play deep house", "add bass", "make it faster", "add reverb"
+            </p>
+        </div>
         """)
         
-        with gr.Row():
-            with gr.Column(scale=2):
-                # Control buttons
-                voice_btn = gr.Button("🎤 INITIATE VOICE HACK", variant="primary", size="lg")
-                
-                with gr.Row():
-                    deep_house_btn = gr.Button("🏠 Deep House", variant="secondary")
-                    cyberpunk_btn = gr.Button("⚡ Cyberpunk", variant="secondary")
-                    bass_btn = gr.Button("🔊 Underground Bass", variant="secondary")
-                
-                with gr.Row():
-                    ambient_btn = gr.Button("🌌 Ambient", variant="secondary")
-                    breakbeat_btn = gr.Button("💥 Breakbeat", variant="secondary")
-                    stop_btn = gr.Button("⏹️ TERMINATE", variant="stop")
-                
-            with gr.Column(scale=1):
-                status_display = gr.Textbox(
-                    label="🔰 SYSTEM STATUS",
-                    value="🔰 MATRIX ONLINE - READY FOR VOICE INPUT",
-                    interactive=False,
-                    lines=3,
-                    elem_id="voice-status"
-                )
-        
-        # Code display
-        code_display = gr.Code(
-            label="🔧 GENERATED STRUDEL CODE",
-            language="javascript",
-            value="// Voice commands will generate Strudel patterns here...\n// Try: 'play deep house drums' or 'make cyberpunk synth'\n// Commands: deep house, cyberpunk, bass, ambient, breakbeat, stop",
-            lines=6
+        # Voice Status Display
+        voice_status = gr.Textbox(
+            value="🎤 Click 'Start Voice Recognition' to begin",
+            label="🎙️ VOICE STATUS",
+            elem_id="voice-status",
+            interactive=False,
+            max_lines=2
         )
         
-        gr.Markdown("""
-        ### 🎯 Voice Commands to Try:
-        - **"play deep house"** / **"deep house drums"** - Generate deep house patterns
-        - **"create underground bass"** / **"bass"** - Synthesize bass lines  
-        - **"make cyberpunk synth"** / **"cyberpunk"** - Create cyberpunk leads
-        - **"play ambient sounds"** / **"ambient"** - Generate ambient textures
-        - **"start breakbeat"** / **"rave"** - Create breakbeat rhythms
-        - **"stop"** / **"terminate"** - Stop all sounds
-        
-        ### ⚡ Features:
-        - 🎤 **Enhanced Voice Recognition** - Better error handling & feedback
-        - 🎵 **Improved Audio Synthesis** - Web Audio API with filters & effects
-        - 💻 **Responsive Matrix Rain** - Adaptive background animation
-        - 🎛️ **Manual Controls** - Click buttons for instant sounds
-        - 🔊 **Full Cyberpunk Experience** - Complete Matrix aesthetic
-        
-        ### 🚀 Quick Start:
-        1. **Click "INITIATE VOICE HACK"** and allow microphone access when prompted
-        2. **Wait for "LISTENING..."** status message
-        3. **Speak clearly**: "play deep house" or "make cyberpunk synth"
-        4. **Watch the magic happen** - code generates and beats play!
-        5. **Use manual buttons** if voice isn't working in your environment
-        
-        ### 🔧 Troubleshooting:
-        - **Chrome/Firefox work best** for voice recognition
-        - **Allow microphone permissions** when prompted
-        - **Speak clearly** and wait for the listening status
-        - **Try manual buttons** if voice fails
-        - **Check browser console** for detailed error messages
-        """)
-        
-        # Event handlers with improved error handling
-        def handle_voice():
-            return "🎤 INITIALIZING VOICE HACK... Allow microphone access!"
+        # Voice Control Buttons
+        with gr.Row():
+            start_voice_btn = gr.Button("🎤 START VOICE RECOGNITION", variant="primary")
+            stop_voice_btn = gr.Button("⏹️ STOP VOICE RECOGNITION", variant="secondary")
         
-        def handle_deep_house():
-            return "🏠 DEEP HOUSE SEQUENCE ACTIVATED", "sound(\"bd\").n(\"[0,2,4,6]\").gain(0.8).room(0.3)"
+        # Music Code Display
+        music_code = gr.Code(
+            value="// Voice commands will build your music code here...\n// Try: \"play deep house\", then \"add bass\", then \"make it faster\"",
+            label="🎼 GENERATED MUSIC CODE",
+            language="javascript",
+            elem_id="music-code",
+            lines=15
+        )
         
-        def handle_cyberpunk():
-            return "⚡ CYBERPUNK SYNTH WAVE ENGAGED", "sound(\"lead\").n(\"[0,2,7,12]\").fast(2).lpf(1200)"
+        # Manual Sound Triggers
+        gr.HTML("<h3 style='color: #00ff00; text-align: center; margin-top: 30px;'>🎛️ MANUAL SOUND TRIGGERS</h3>")
         
-        def handle_bass():
-            return "🔊 UNDERGROUND BASS PUMPING", "sound(\"bass\").n(\"0,3,7\").slow(2).lpf(200)"
+        with gr.Row():
+            deep_house_btn = gr.Button("🏠 Deep House", variant="primary")
+            cyberpunk_btn = gr.Button("⚡ Cyberpunk", variant="primary")
+            bass_btn = gr.Button("🔊 Bass", variant="primary")
         
-        def handle_ambient():
-            return "🌌 AMBIENT MATRIX SOUNDSCAPE ONLINE", "sound(\"pad\").n(\"0,4,7,11\").slow(4).room(0.8).lpf(800)"
+        with gr.Row():
+            ambient_btn = gr.Button("🌌 Ambient", variant="primary")
+            breakbeat_btn = gr.Button("💥 Breakbeat", variant="primary")
+            stop_all_btn = gr.Button("⏹️ Stop All", variant="secondary")
         
-        def handle_breakbeat():
-            return "💥 BREAKBEAT RAVE SEQUENCE INITIATED", "sound(\"bd,sd\").n(\"0,2,4,6\").fast(1.5).gain(0.7)"
+        # Utility Buttons
+        with gr.Row():
+            clear_btn = gr.Button("🗑️ Clear Code", variant="secondary")
+        
+        # Voice Commands Help
+        gr.HTML("""
+        <div style="margin-top: 30px; padding: 20px; border: 1px solid #00ff00; border-radius: 10px;">
+            <h3 style="color: #00ff00; text-align: center;">🎙️ VOICE COMMAND REFERENCE</h3>
+            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 15px;">
+                <div>
+                    <h4 style="color: #66ff66;">🎵 Sound Commands:</h4>
+                    <ul style="color: #ccffcc;">
+                        <li>"play deep house" - Add house pattern</li>
+                        <li>"add bass" / "play bass" - Add bass line</li>
+                        <li>"play cyberpunk" - Add synth lead</li>
+                        <li>"add ambient" - Add atmospheric pad</li>
+                        <li>"play breakbeat" - Add drum pattern</li>
+                        <li>"add drums" - Add percussion</li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 style="color: #66ff66;">🎛️ Control Commands:</h4>
+                    <ul style="color: #ccffcc;">
+                        <li>"make it faster" / "slow it down"</li>
+                        <li>"louder" / "quieter" / "volume 80"</li>
+                        <li>"add reverb" / "add delay"</li>
+                        <li>"low pass filter" / "high pass filter"</li>
+                        <li>"stop" - Stop all sounds</li>
+                        <li>"clear" / "reset" - Clear session</li>
+                    </ul>
+                </div>
+            </div>
+            <div style="margin-top: 15px;">
+                <h4 style="color: #66ff66;">🎹 Advanced Commands:</h4>
+                <ul style="color: #ccffcc;">
+                    <li>"add hihat" / "add clap" / "add strings"</li>
+                    <li>"remove bass" / "remove drums"</li>
+                    <li>"change key to G" / "transpose to F"</li>
+                    <li>"tempo 140" - Set specific BPM</li>
+                </ul>
+            </div>
+        </div>
+        """)
         
-        def handle_stop():
-            return "⏹️ ALL MATRIX SOUNDS TERMINATED", "// All oscillators terminated - Matrix silence restored"
+        # Button Event Handlers
+        start_voice_btn.click(
+            fn=None,
+            js="() => window.startVoiceRecognition()",
+            outputs=voice_status
+        )
         
-        # Connect buttons with enhanced JavaScript integration
-        voice_btn.click(
-            handle_voice,
-            outputs=[status_display]
-        ).then(
-            lambda: None,
-            js="() => { window.initSpeechRecognition && window.initSpeechRecognition(); }"
+        stop_voice_btn.click(
+            fn=None,
+            js="() => window.stopVoiceRecognition()",
+            outputs=voice_status
         )
         
         deep_house_btn.click(
-            handle_deep_house,
-            outputs=[status_display, code_display]
-        ).then(
-            lambda: None,
-            js="() => { window.playMatrixSound && window.playMatrixSound('deep_house'); }"
+            fn=None,
+            js="() => window.playDeepHouse()",
+            outputs=voice_status
         )
         
         cyberpunk_btn.click(
-            handle_cyberpunk,
-            outputs=[status_display, code_display]
-        ).then(
-            lambda: None,
-            js="() => { window.playMatrixSound && window.playMatrixSound('cyberpunk'); }"
+            fn=None,
+            js="() => window.playCyberpunk()",
+            outputs=voice_status
         )
         
         bass_btn.click(
-            handle_bass,
-            outputs=[status_display, code_display]
-        ).then(
-            lambda: None,
-            js="() => { window.playMatrixSound && window.playMatrixSound('bass'); }"
+            fn=None,
+            js="() => window.playBass()",
+            outputs=voice_status
         )
         
         ambient_btn.click(
-            handle_ambient,
-            outputs=[status_display, code_display]
-        ).then(
-            lambda: None,
-            js="() => { window.playMatrixSound && window.playMatrixSound('ambient'); }"
+            fn=None,
+            js="() => window.playAmbient()",
+            outputs=voice_status
         )
         
         breakbeat_btn.click(
-            handle_breakbeat,
-            outputs=[status_display, code_display]
-        ).then(
-            lambda: None,
-            js="() => { window.playMatrixSound && window.playMatrixSound('breakbeat'); }"
+            fn=None,
+            js="() => window.playBreakbeat()",
+            outputs=voice_status
         )
         
-        stop_btn.click(
-            handle_stop,
-            outputs=[status_display, code_display]
-        ).then(
-            lambda: None,
-            js="() => { window.stopAllSounds && window.stopAllSounds(); }"
+        stop_all_btn.click(
+            fn=None,
+            js="() => window.stopAll()",
+            outputs=voice_status
         )
         
+        clear_btn.click(
+            fn=None,
+            js="() => window.clearCode()",
+            outputs=[voice_status, music_code]
+        )
+    
     return interface
 
+# Launch the application
 if __name__ == "__main__":
-    interface = create_interface()
-    interface.launch(
+    demo = create_interface()
+    print("🎵 Starting Matrix Music Hacker v2.1...")
+    print("🎤 Voice commands ready!")
+    print("🌐 Opening in browser...")
+    
+    demo.launch(
         server_name="0.0.0.0",
         server_port=7860,
-        share=False
+        share=True,  # Creates public link
+        debug=True,
+        show_error=True
     )