Update app.py

app.py

@@ -87,7 +87,7 @@ with gr.Blocks(title="🎵 Strudel Generator") as app:
         lines=8
     )
     
-    # Simple audio player
+    # Simple audio player with full Strudel.js
     gr.HTML("""
     <div id="player" style='
         background: linear-gradient(135deg, #FF6B9D, #A855F7);
@@ -122,20 +122,47 @@ with gr.Blocks(title="🎵 Strudel Generator") as app:
             transition: all 0.3s;
         '>⏹️ Stop</button>
         <div id="status" style='color: white; margin-top: 10px; font-size: 14px;'>
-            Generate code and click play!
+            Click to enable audio, then generate code and play!
         </div>
     </div>
 
+    <!-- Load Strudel.js libraries -->
+    <script type="module">
+        import { repl, controls, mini, initAudioOnFirstClick } from 'https://strudel.cc/strudel.mjs';
+        
+        // Make Strudel available globally
+        window.strudel = { repl, controls, mini, initAudioOnFirstClick };
+        window.strudelReady = true;
+        
+        console.log('Strudel.js loaded successfully!');
+        updateStatus('🎵 Strudel.js ready! Generate code and play!', 'white');
+    </script>
+
     <script>
         let isPlaying = false;
-        let playTimer = null;
+        let currentPattern = null;
+        let strudelInitialized = false;
 
         function getCurrentCode() {
-            // Get code from the textarea
-            const codeArea = document.querySelector('textarea[data-testid*="code"]') || 
-                           document.querySelector('.code-container textarea') ||
-                           document.querySelector('textarea');
-            return codeArea ? codeArea.value : '';
+            // Get code from the textarea - try multiple selectors
+            const selectors = [
+                'textarea[data-testid*="code"]',
+                '.code-container textarea', 
+                'textarea',
+                'code',
+                '[data-testid="code"] textarea'
+            ];
+            
+            for (let selector of selectors) {
+                const element = document.querySelector(selector);
+                if (element && (element.value || element.textContent)) {
+                    const code = element.value || element.textContent;
+                    if (code && !code.includes('Please describe') && code.includes('cpm')) {
+                        return code;
+                    }
+                }
+            }
+            return '';
         }
 
         function updateStatus(message, color = 'white') {
@@ -153,15 +180,42 @@ with gr.Blocks(title="🎵 Strudel Generator") as app:
             }
         }
 
-        function togglePlay() {
+        async function initializeStrudel() {
+            if (strudelInitialized) return true;
+            
+            try {
+                // Wait for Strudel to load
+                let attempts = 0;
+                while (!window.strudelReady && attempts < 50) {
+                    await new Promise(resolve => setTimeout(resolve, 100));
+                    attempts++;
+                }
+                
+                if (!window.strudel) {
+                    throw new Error('Strudel failed to load');
+                }
+
+                // Initialize audio on first click
+                await window.strudel.initAudioOnFirstClick();
+                strudelInitialized = true;
+                updateStatus('🎵 Audio ready! Generate code and play!', '#ccffcc');
+                return true;
+            } catch (error) {
+                console.error('Strudel initialization failed:', error);
+                updateStatus('⚠️ Audio init failed - using demo mode', '#ffcccc');
+                return false;
+            }
+        }
+
+        async function togglePlay() {
             if (isPlaying) {
                 pausePlay();
             } else {
-                startPlay();
+                await startPlay();
             }
         }
 
-        function startPlay() {
+        async function startPlay() {
             const code = getCurrentCode();
             
             if (!code || code.trim() === '' || code.includes('Please describe')) {
@@ -169,37 +223,92 @@ with gr.Blocks(title="🎵 Strudel Generator") as app:
                 return;
             }
 
-            isPlaying = true;
-            updatePlayButton(true);
-            updateStatus('🎵 Playing your music...', '#ccffcc');
+            try {
+                // Initialize Strudel if needed
+                const initialized = await initializeStrudel();
+                
+                if (!initialized || !window.strudel) {
+                    // Fallback to demo mode
+                    updateStatus('🎮 Demo: Playing ' + code.split('\\n')[0] + '...', '#ffffcc');
+                    isPlaying = true;
+                    updatePlayButton(true);
+                    
+                    setTimeout(() => {
+                        stopPlay();
+                        updateStatus('Demo playback finished!', 'white');
+                    }, 8000);
+                    return;
+                }
+
+                // Stop any current pattern
+                if (currentPattern) {
+                    currentPattern.stop();
+                }
+
+                updateStatus('🎵 Evaluating code...', '#ffffcc');
+
+                // Clean the code (remove comments)
+                const cleanCode = code
+                    .split('\\n')
+                    .filter(line => !line.trim().startsWith('//'))
+                    .join('\\n')
+                    .trim();
+
+                console.log('Playing code:', cleanCode);
 
-            // Simulate playback for 10 seconds
-            playTimer = setTimeout(() => {
-                stopPlay();
-                updateStatus('Playback finished!', 'white');
-            }, 10000);
+                // Evaluate the Strudel pattern
+                const pattern = window.strudel.repl.evaluate(cleanCode);
+                
+                if (pattern && typeof pattern.play === 'function') {
+                    currentPattern = pattern;
+                    await pattern.play();
+                    
+                    isPlaying = true;
+                    updatePlayButton(true);
+                    updateStatus('🎵 Playing your music! 🎶', '#ccffcc');
+                } else {
+                    throw new Error('Invalid pattern - check your Strudel syntax');
+                }
+
+            } catch (error) {
+                console.error('Playback error:', error);
+                updateStatus('❌ Error: ' + error.message, '#ffcccc');
+                isPlaying = false;
+                updatePlayButton(false);
+                
+                // Try demo mode as fallback
+                setTimeout(() => {
+                    updateStatus('🎮 Falling back to demo mode...', '#ffffcc');
+                    isPlaying = true;
+                    updatePlayButton(true);
+                    
+                    setTimeout(() => {
+                        stopPlay();
+                        updateStatus('Demo playback finished!', 'white');
+                    }, 5000);
+                }, 1000);
+            }
         }
 
         function pausePlay() {
+            if (currentPattern && typeof currentPattern.stop === 'function') {
+                currentPattern.stop();
+            }
+            
             isPlaying = false;
             updatePlayButton(false);
             updateStatus('⏸️ Paused', '#ffffcc');
-            
-            if (playTimer) {
-                clearTimeout(playTimer);
-                playTimer = null;
-            }
         }
 
         function stopPlay() {
+            if (currentPattern && typeof currentPattern.stop === 'function') {
+                currentPattern.stop();
+                currentPattern = null;
+            }
+            
             isPlaying = false;
             updatePlayButton(false);
             updateStatus('⏹️ Stopped', 'white');
-            
-            if (playTimer) {
-                clearTimeout(playTimer);
-                playTimer = null;
-            }
         }
 
         // Add hover effects to buttons
@@ -215,6 +324,16 @@ with gr.Blocks(title="🎵 Strudel Generator") as app:
                     this.style.boxShadow = 'none';
                 });
             });
+            
+            // Initialize on first user interaction
+            document.addEventListener('click', initializeStrudel, { once: true });
+        });
+
+        // Handle page visibility changes
+        document.addEventListener('visibilitychange', function() {
+            if (document.hidden && isPlaying) {
+                pausePlay();
+            }
         });
     </script>
     """)