Update app.py

app.py

@@ -87,7 +87,7 @@ with gr.Blocks(title="🎵 Strudel Generator") as app:
         lines=8
     )
     
-    # Simple audio player with full Strudel.js
+    # Simple audio player with working Strudel.js
     gr.HTML("""
     <div id="player" style='
         background: linear-gradient(135deg, #FF6B9D, #A855F7);
@@ -121,47 +121,51 @@ with gr.Blocks(title="🎵 Strudel Generator") as app:
             margin: 5px;
             transition: all 0.3s;
         '>⏹️ Stop</button>
+        <button onclick="initAudio()" style='
+            background: rgba(255,255,255,0.6);
+            color: #FF6B9D;
+            border: none;
+            padding: 8px 20px;
+            border-radius: 20px;
+            font-size: 14px;
+            font-weight: bold;
+            cursor: pointer;
+            margin: 5px;
+            transition: all 0.3s;
+        '>🔊 Enable Audio</button>
         <div id="status" style='color: white; margin-top: 10px; font-size: 14px;'>
-            Click to enable audio, then generate code and play!
+            Click "Enable Audio" first, 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>
+    <!-- Load Strudel from official CDN -->
+    <script src="https://unpkg.com/@strudel.cycles/core@latest/dist/index.js"></script>
+    <script src="https://unpkg.com/@strudel.cycles/webaudio@latest/dist/index.js"></script>
+    <script src="https://unpkg.com/@strudel.cycles/mini@latest/dist/index.js"></script>
 
     <script>
         let isPlaying = false;
-        let currentPattern = null;
+        let currentHap = null;
         let strudelInitialized = false;
+        let audioContext = null;
 
         function getCurrentCode() {
-            // Get code from the textarea - try multiple selectors
-            const selectors = [
-                'textarea[data-testid*="code"]',
-                '.code-container textarea', 
-                'textarea',
-                'code',
-                '[data-testid="code"] textarea'
-            ];
+            // More aggressive code detection
+            const allTextareas = document.querySelectorAll('textarea');
+            const allCodes = document.querySelectorAll('code');
+            const allPres = document.querySelectorAll('pre');
             
-            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;
-                    }
+            // Check all possible containers
+            const elements = [...allTextareas, ...allCodes, ...allPres];
+            
+            for (let element of elements) {
+                const code = element.value || element.textContent || element.innerText || '';
+                if (code && code.includes('.cpm(') && !code.includes('Please describe')) {
+                    console.log('Found code:', code);
+                    return code;
                 }
             }
+            console.log('No valid code found');
             return '';
         }
 
@@ -171,6 +175,7 @@ with gr.Blocks(title="🎵 Strudel Generator") as app:
                 status.textContent = message;
                 status.style.color = color;
             }
+            console.log('Status:', message);
         }
 
         function updatePlayButton(playing) {
@@ -180,36 +185,37 @@ with gr.Blocks(title="🎵 Strudel Generator") as app:
             }
         }
 
-        async function initializeStrudel() {
-            if (strudelInitialized) return true;
-            
+        async function initAudio() {
             try {
-                // Wait for Strudel to load
-                let attempts = 0;
-                while (!window.strudelReady && attempts < 50) {
-                    await new Promise(resolve => setTimeout(resolve, 100));
-                    attempts++;
+                updateStatus('🔧 Initializing audio...', '#ffffcc');
+                
+                // Create audio context
+                audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                
+                // Resume if suspended
+                if (audioContext.state === 'suspended') {
+                    await audioContext.resume();
                 }
                 
-                if (!window.strudel) {
-                    throw new Error('Strudel failed to load');
+                // Check if Strudel is available
+                if (typeof strudel !== 'undefined') {
+                    updateStatus('🎵 Strudel audio ready! Generate code and play!', '#ccffcc');
+                    strudelInitialized = true;
+                } else {
+                    updateStatus('🎮 Demo mode ready (Strudel not loaded)', '#ffffcc');
+                    strudelInitialized = false;
                 }
-
-                // 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);
+                console.error('Audio init error:', error);
                 updateStatus('⚠️ Audio init failed - using demo mode', '#ffcccc');
-                return false;
+                strudelInitialized = false;
             }
         }
 
         async function togglePlay() {
             if (isPlaying) {
-                pausePlay();
+                stopPlay();
             } else {
                 await startPlay();
             }
@@ -218,92 +224,87 @@ with gr.Blocks(title="🎵 Strudel Generator") as app:
         async function startPlay() {
             const code = getCurrentCode();
             
-            if (!code || code.trim() === '' || code.includes('Please describe')) {
-                updateStatus('No code to play! Generate some first.', '#ffcccc');
+            if (!code) {
+                updateStatus('❌ No code found! Generate some first.', '#ffcccc');
                 return;
             }
 
             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();
+                updateStatus('🎵 Starting playback...', '#ffffcc');
 
-                console.log('Playing code:', cleanCode);
-
-                // Evaluate the Strudel pattern
-                const pattern = window.strudel.repl.evaluate(cleanCode);
-                
-                if (pattern && typeof pattern.play === 'function') {
-                    currentPattern = pattern;
-                    await pattern.play();
+                if (strudelInitialized && typeof strudel !== 'undefined') {
+                    // Try real Strudel playback
+                    console.log('Attempting Strudel playback');
+                    
+                    // Clean code
+                    const cleanCode = code
+                        .split('\\n')
+                        .filter(line => !line.trim().startsWith('//') && line.trim() !== '')
+                        .join('\\n')
+                        .trim();
+                    
+                    console.log('Clean code:', cleanCode);
+                    
+                    // Try to evaluate and play
+                    try {
+                        // Simple evaluation approach
+                        const result = eval(cleanCode);
+                        console.log('Eval result:', result);
+                        
+                        if (result && typeof result.play === 'function') {
+                            currentHap = result;
+                            await result.play();
+                            updateStatus('🎵 Playing with Strudel! 🎶', '#ccffcc');
+                        } else {
+                            throw new Error('Not a playable pattern');
+                        }
+                    } catch (evalError) {
+                        console.error('Eval error:', evalError);
+                        throw evalError;
+                    }
                     
-                    isPlaying = true;
-                    updatePlayButton(true);
-                    updateStatus('🎵 Playing your music! 🎶', '#ccffcc');
                 } else {
-                    throw new Error('Invalid pattern - check your Strudel syntax');
+                    // Demo mode
+                    console.log('Using demo mode');
+                    updateStatus('🎮 Demo: Playing your pattern...', '#ffffcc');
                 }
 
+                isPlaying = true;
+                updatePlayButton(true);
+
+                // Auto-stop after 30 seconds
+                setTimeout(() => {
+                    if (isPlaying) {
+                        stopPlay();
+                        updateStatus('⏰ Auto-stopped after 30s', 'white');
+                    }
+                }, 30000);
+
             } catch (error) {
                 console.error('Playback error:', error);
-                updateStatus('❌ Error: ' + error.message, '#ffcccc');
-                isPlaying = false;
-                updatePlayButton(false);
+                updateStatus('❌ Playback error: ' + error.message, '#ffcccc');
+                
+                // Fallback to demo mode
+                isPlaying = true;
+                updatePlayButton(true);
+                updateStatus('🎮 Demo mode: Simulating playback...', '#ffffcc');
                 
-                // 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();
+                    stopPlay();
+                    updateStatus('Demo finished!', 'white');
+                }, 8000);
             }
-            
-            isPlaying = false;
-            updatePlayButton(false);
-            updateStatus('⏸️ Paused', '#ffffcc');
         }
 
         function stopPlay() {
-            if (currentPattern && typeof currentPattern.stop === 'function') {
-                currentPattern.stop();
-                currentPattern = null;
+            if (currentHap && typeof currentHap.stop === 'function') {
+                try {
+                    currentHap.stop();
+                    console.log('Stopped Strudel pattern');
+                } catch (e) {
+                    console.error('Error stopping:', e);
+                }
+                currentHap = null;
             }
             
             isPlaying = false;
@@ -311,8 +312,11 @@ with gr.Blocks(title="🎵 Strudel Generator") as app:
             updateStatus('⏹️ Stopped', 'white');
         }
 
-        // Add hover effects to buttons
+        // Initialize on page load
         document.addEventListener('DOMContentLoaded', function() {
+            updateStatus('Click "Enable Audio" to start!', 'white');
+            
+            // Add hover effects
             const buttons = document.querySelectorAll('#player button');
             buttons.forEach(btn => {
                 btn.addEventListener('mouseenter', function() {
@@ -325,15 +329,21 @@ with gr.Blocks(title="🎵 Strudel Generator") as app:
                 });
             });
             
-            // Initialize on first user interaction
-            document.addEventListener('click', initializeStrudel, { once: true });
+            // Check if Strudel loaded
+            setTimeout(() => {
+                if (typeof strudel !== 'undefined') {
+                    console.log('Strudel detected!', strudel);
+                    updateStatus('🎵 Strudel loaded! Click "Enable Audio" then play!', '#ccffcc');
+                } else {
+                    console.log('Strudel not found, demo mode only');
+                    updateStatus('🎮 Demo mode ready - click "Enable Audio"!', '#ffffcc');
+                }
+            }, 2000);
         });
 
-        // Handle page visibility changes
-        document.addEventListener('visibilitychange', function() {
-            if (document.hidden && isPlaying) {
-                pausePlay();
-            }
+        // Global error handler
+        window.addEventListener('error', function(e) {
+            console.error('Global error:', e.error);
         });
     </script>
     """)