Update app.py

app.py

@@ -1,4 +1,15 @@
-import gradio as gr
+# Event handlers
+    generate_btn.click(
+        fn=generate_music,
+        inputs=[description, tempo, style],
+        outputs=[code_output, status_output, analysis_output]
+    )
+    
+    magic_btn.click(
+        fn=add_magic,
+        inputs=[code_output],
+        outputs=[code_output, status_output]
+    )import gradio as gr
 import json
 import re
 import random
@@ -296,6 +307,269 @@ def load_example(example_key):
     """Load example description"""
     return examples.get(example_key, "")
 
+def create_strudel_player():
+    """Create HTML component with Strudel.js player"""
+    return gr.HTML("""
+    <div id="strudel-container" style="
+        background: linear-gradient(135deg, rgba(255, 107, 157, 0.1), rgba(168, 85, 247, 0.1));
+        border: 2px solid rgba(255, 107, 157, 0.3);
+        border-radius: 20px;
+        padding: 20px;
+        margin: 10px 0;
+        backdrop-filter: blur(10px);
+    ">
+        <div style="text-align: center; margin-bottom: 15px;">
+            <h3 style="color: #FF6B9D; margin: 0 0 10px 0;">🎵 Strudel Audio Player</h3>
+            <p style="color: #E2E8F0; margin: 0; opacity: 0.8;">Click play to hear your generated music!</p>
+        </div>
+        
+        <div id="strudel-controls" style="text-align: center; margin-bottom: 15px;">
+            <button id="play-btn" onclick="playStrudel()" style="
+                background: linear-gradient(45deg, #FF6B9D, #A855F7);
+                color: white;
+                border: none;
+                border-radius: 25px;
+                padding: 12px 24px;
+                margin: 5px;
+                font-weight: 600;
+                cursor: pointer;
+                transition: all 0.3s ease;
+                box-shadow: 0 4px 15px rgba(255, 107, 157, 0.4);
+            ">▶️ Play</button>
+            
+            <button id="stop-btn" onclick="stopStrudel()" style="
+                background: linear-gradient(45deg, #EF4444, #F59E0B);
+                color: white;
+                border: none;
+                border-radius: 25px;
+                padding: 12px 24px;
+                margin: 5px;
+                font-weight: 600;
+                cursor: pointer;
+                transition: all 0.3s ease;
+                box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
+            ">⏹️ Stop</button>
+            
+            <button id="volume-btn" onclick="toggleVolume()" style="
+                background: linear-gradient(45deg, #06B6D4, #3B82F6);
+                color: white;
+                border: none;
+                border-radius: 25px;
+                padding: 12px 24px;
+                margin: 5px;
+                font-weight: 600;
+                cursor: pointer;
+                transition: all 0.3s ease;
+                box-shadow: 0 4px 15px rgba(6, 182, 212, 0.4);
+            ">🔊 Volume</button>
+        </div>
+        
+        <div id="strudel-status" style="
+            text-align: center;
+            color: #E2E8F0;
+            font-size: 14px;
+            opacity: 0.8;
+            margin-bottom: 10px;
+        ">Ready to play music ✨</div>
+        
+        <div id="volume-control" style="display: none; text-align: center; margin: 10px 0;">
+            <input type="range" id="volume-slider" min="0" max="100" value="70" style="
+                width: 200px;
+                height: 6px;
+                border-radius: 5px;
+                background: linear-gradient(to right, #FF6B9D, #A855F7);
+                outline: none;
+                opacity: 0.8;
+                transition: opacity 0.2s;
+            ">
+            <div style="color: #E2E8F0; font-size: 12px; margin-top: 5px;">Volume: <span id="volume-display">70</span>%</div>
+        </div>
+    </div>
+
+    <!-- Strudel.js Integration -->
+    <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 currentPattern = null;
+        let isPlaying = false;
+        let audioContext = null;
+        let currentCode = '';
+        let volume = 0.7;
+        
+        // Initialize Strudel
+        async function initStrudel() {
+            try {
+                if (typeof strudel !== 'undefined') {
+                    // Initialize audio context on first user interaction
+                    if (!audioContext) {
+                        audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                        await strudel.initAudio();
+                    }
+                    updateStatus('🎵 Strudel ready! Generate some code and hit play!', '#06B6D4');
+                } else {
+                    // Fallback mode
+                    updateStatus('🎮 Demo mode - Generate code to see it in action!', '#FCD34D');
+                }
+            } catch (error) {
+                console.error('Strudel init error:', error);
+                updateStatus('⚠️ Audio initialization failed - check browser permissions', '#EF4444');
+            }
+        }
+        
+        function updateStatus(message, color = '#E2E8F0') {
+            const status = document.getElementById('strudel-status');
+            status.innerHTML = message;
+            status.style.color = color;
+        }
+        
+        function updatePlayButton(playing) {
+            const btn = document.getElementById('play-btn');
+            if (playing) {
+                btn.innerHTML = '⏸️ Pause';
+                btn.onclick = pauseStrudel;
+            } else {
+                btn.innerHTML = '▶️ Play';
+                btn.onclick = playStrudel;
+            }
+        }
+        
+        async function playStrudel() {
+            // Get current code from the code editor
+            const codeElements = document.querySelectorAll('textarea');
+            for (let element of codeElements) {
+                if (element.value && element.value.includes('//')) {
+                    currentCode = element.value;
+                    break;
+                }
+            }
+            
+            if (!currentCode || !currentCode.trim()) {
+                updateStatus('❌ No code to play! Generate some music first.', '#EF4444');
+                return;
+            }
+            
+            try {
+                // Stop any currently playing pattern
+                if (currentPattern) {
+                    currentPattern.stop();
+                }
+                
+                if (typeof strudel !== 'undefined' && strudel.Pattern) {
+                    // Real Strudel playback
+                    updateStatus('🎵 Evaluating Strudel code...', '#FCD34D');
+                    
+                    // Remove comments and evaluate
+                    const cleanCode = currentCode.replace(/\/\/.*$/gm, '').trim();
+                    const pattern = eval(cleanCode);
+                    
+                    if (pattern && typeof pattern.play === 'function') {
+                        currentPattern = pattern;
+                        await currentPattern.play();
+                        isPlaying = true;
+                        updatePlayButton(true);
+                        updateStatus('🎵 Playing your music! ✨', '#10B981');
+                    } else {
+                        throw new Error('Invalid Strudel pattern - check your code syntax');
+                    }
+                } else {
+                    // Demo mode with visual feedback
+                    updateStatus('🎮 Demo Mode: Playing ' + currentCode.split('\\n')[0] + '...', '#06B6D4');
+                    isPlaying = true;
+                    updatePlayButton(true);
+                    
+                    // Simulate playback
+                    setTimeout(() => {
+                        updateStatus('🎵 Demo playback complete! Integrate Strudel.js for real audio.', '#FCD34D');
+                        isPlaying = false;
+                        updatePlayButton(false);
+                    }, 5000);
+                }
+            } catch (error) {
+                console.error('Playback error:', error);
+                updateStatus('❌ Error: ' + error.message, '#EF4444');
+                isPlaying = false;
+                updatePlayButton(false);
+            }
+        }
+        
+        function pauseStrudel() {
+            if (currentPattern && isPlaying) {
+                currentPattern.stop();
+                isPlaying = false;
+                updatePlayButton(false);
+                updateStatus('⏸️ Music paused', '#FCD34D');
+            }
+        }
+        
+        function stopStrudel() {
+            if (currentPattern) {
+                currentPattern.stop();
+                currentPattern = null;
+            }
+            isPlaying = false;
+            updatePlayButton(false);
+            updateStatus('⏹️ Music stopped', '#6B7280');
+        }
+        
+        function toggleVolume() {
+            const volumeControl = document.getElementById('volume-control');
+            volumeControl.style.display = volumeControl.style.display === 'none' ? 'block' : 'none';
+        }
+        
+        // Volume control
+        const volumeSlider = document.getElementById('volume-slider');
+        const volumeDisplay = document.getElementById('volume-display');
+        
+        if (volumeSlider && volumeDisplay) {
+            volumeSlider.oninput = function() {
+                volume = this.value / 100;
+                volumeDisplay.textContent = this.value;
+                
+                // Apply volume to current pattern if playing
+                if (currentPattern && typeof currentPattern.gain === 'function') {
+                    currentPattern.gain(volume);
+                }
+            };
+        }
+        
+        // Initialize when page loads
+        document.addEventListener('DOMContentLoaded', initStrudel);
+        
+        // Handle browser audio context restrictions
+        document.addEventListener('click', async function() {
+            if (audioContext && audioContext.state === 'suspended') {
+                await audioContext.resume();
+            }
+        }, { once: true });
+        
+        // Update code when Gradio updates
+        function updateCurrentCode(newCode) {
+            currentCode = newCode;
+            if (isPlaying) {
+                stopStrudel();
+                updateStatus('🔄 Code updated - click play to hear changes!', '#06B6D4');
+            }
+        }
+        
+        // Anime-style button hover effects
+        document.addEventListener('DOMContentLoaded', function() {
+            const buttons = document.querySelectorAll('#strudel-controls button');
+            buttons.forEach(btn => {
+                btn.addEventListener('mouseenter', function() {
+                    this.style.transform = 'translateY(-2px) scale(1.05)';
+                    this.style.boxShadow = '0 8px 25px rgba(255, 107, 157, 0.6)';
+                });
+                btn.addEventListener('mouseleave', function() {
+                    this.style.transform = 'translateY(0) scale(1)';
+                    this.style.boxShadow = '0 4px 15px rgba(255, 107, 157, 0.4)';
+                });
+            });
+        });
+    </script>
+    """, elem_id="strudel-player")
+
 # Custom CSS for anime theme
 anime_css = """
 <style>
@@ -467,6 +741,10 @@ with gr.Blocks(
                 label="🔍 Musical Analysis"
             )
     
+    # Audio Player Section
+    gr.Markdown("### 🎵 Audio Playback")
+    strudel_player = create_strudel_player()
+    
     # Examples section
     gr.Markdown("### 🎨 Try These Anime-Inspired Examples")
     
@@ -508,19 +786,24 @@ with gr.Blocks(
         - Mention specific instruments or sounds
         - Describe the genre or style for better results
         - Use the "Add Magic" button for instant variations!
+        - Click the Play button to hear your generated music!
+        
+        **🎵 Audio Playback:**
+        - Generate code first, then click the ▶️ Play button
+        - Use ⏹️ Stop to halt playback
+        - Adjust volume with the 🔊 Volume button
+        - The player works in demo mode and with full Strudel.js integration
         """)
     
-    # Event handlers
-    generate_btn.click(
-        fn=generate_music,
-        inputs=[description, tempo, style],
-        outputs=[code_output, status_output, analysis_output]
-    )
+    # Update code in player when it changes
+    def update_player_code(code):
+        # This will trigger the JavaScript to update the current code
+        return gr.update()
     
-    magic_btn.click(
-        fn=add_magic,
+    code_output.change(
+        fn=update_player_code,
         inputs=[code_output],
-        outputs=[code_output, status_output]
+        outputs=[]
     )
     
     # Example button handlers