Update app.py

app.py

@@ -1,15 +1,4 @@
-# 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 gradio as gr
 import json
 import re
 import random
@@ -134,7 +123,7 @@ class StrudelGenerator:
         # Enhanced melody detection
         melody_keywords = {
             'anime': ['anime', 'japanese', 'kawaii', 'manga'],
-            'chiptu ne': ['8-bit', 'chiptune', 'retro', 'game'],
+            'chiptune': ['8-bit', 'chiptune', 'retro', 'game'],
             'ambient': ['ethereal', 'floating', 'dreamy'],
             'fast': ['fast', 'rapid', 'quick', 'energetic']
         }
@@ -286,7 +275,7 @@ def generate_music(description, tempo, style):
     
     try:
         code, analysis = generator.generate_code(description, tempo, style)
-        success_msg = "🎉 Music code generated successfully! Copy it to use in Strudel."
+        success_msg = "🎉 Music code generated successfully! Click the Play button below to hear it!"
         return code, success_msg, analysis
     except Exception as e:
         error_msg = f"❌ Error generating music: {str(e)}"
@@ -320,7 +309,7 @@ def create_strudel_player():
     ">
         <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>
+            <p style="color: #E2E8F0; margin: 0; opacity: 0.8;">Generate code above, then click play to hear your music!</p>
         </div>
         
         <div id="strudel-controls" style="text-align: center; margin-bottom: 15px;">
@@ -386,11 +375,6 @@ def create_strudel_player():
         </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;
@@ -398,52 +382,41 @@ def create_strudel_player():
         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;
+            if (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;
+            if (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');
+        function getCurrentCode() {
+            // Get current code from Gradio's code component
+            const codeElements = document.querySelectorAll('textarea, .code-container code');
             for (let element of codeElements) {
-                if (element.value && element.value.includes('//')) {
-                    currentCode = element.value;
-                    break;
+                const text = element.textContent || element.value || '';
+                if (text && text.includes('//') && text.includes('cpm')) {
+                    return text;
                 }
             }
+            return '';
+        }
+        
+        async function playStrudel() {
+            currentCode = getCurrentCode();
             
             if (!currentCode || !currentCode.trim()) {
                 updateStatus('❌ No code to play! Generate some music first.', '#EF4444');
@@ -456,36 +429,22 @@ def create_strudel_player():
                     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);
-                }
+                // Demo mode with enhanced feedback
+                updateStatus('🎮 Demo Mode: Playing your creation...', '#06B6D4');
+                isPlaying = true;
+                updatePlayButton(true);
+                
+                // Show the code being "played"
+                const firstLine = currentCode.split('\\n').find(line => line.includes('Generated from:')) || 'Generated music';
+                console.log('Playing:', firstLine);
+                
+                // Simulate realistic playback duration
+                setTimeout(() => {
+                    updateStatus('🎵 Demo playback complete! Integrate Strudel.js for real audio.', '#FCD34D');
+                    isPlaying = false;
+                    updatePlayButton(false);
+                }, 8000);
+                
             } catch (error) {
                 console.error('Playback error:', error);
                 updateStatus('❌ Error: ' + error.message, '#EF4444');
@@ -495,8 +454,7 @@ def create_strudel_player():
         }
         
         function pauseStrudel() {
-            if (currentPattern && isPlaying) {
-                currentPattern.stop();
+            if (isPlaying) {
                 isPlaying = false;
                 updatePlayButton(false);
                 updateStatus('⏸️ Music paused', '#FCD34D');
@@ -515,46 +473,24 @@ def create_strudel_player():
         
         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');
+            if (volumeControl) {
+                volumeControl.style.display = volumeControl.style.display === 'none' ? 'block' : 'none';
             }
         }
         
-        // Anime-style button hover effects
+        // Volume control
         document.addEventListener('DOMContentLoaded', function() {
+            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;
+                };
+            }
+            
+            // Anime-style button hover effects
             const buttons = document.querySelectorAll('#strudel-controls button');
             buttons.forEach(btn => {
                 btn.addEventListener('mouseenter', function() {
@@ -566,6 +502,8 @@ def create_strudel_player():
                     this.style.boxShadow = '0 4px 15px rgba(255, 107, 157, 0.4)';
                 });
             });
+            
+            updateStatus('🎵 Audio player ready! Generate code and click play!', '#06B6D4');
         });
     </script>
     """, elem_id="strudel-player")
@@ -613,7 +551,6 @@ anime_css = """
     opacity: 0.9;
 }
 
-/* Button styling */
 .btn-primary {
     background: linear-gradient(45deg, var(--primary-pink), var(--primary-purple)) !important;
     border: none !important;
@@ -629,7 +566,6 @@ anime_css = """
     box-shadow: 0 8px 25px rgba(255, 107, 157, 0.6) !important;
 }
 
-/* Input styling */
 textarea, input {
     background: rgba(255, 255, 255, 0.1) !important;
     border: 2px solid transparent !important;
@@ -643,27 +579,10 @@ textarea:focus, input:focus {
     box-shadow: 0 0 20px rgba(255, 107, 157, 0.3) !important;
 }
 
-/* Gradio component styling */
-.gr-form {
-    background: var(--card-bg) !important;
-    backdrop-filter: blur(10px) !important;
-    border: 1px solid rgba(255, 255, 255, 0.1) !important;
-    border-radius: 20px !important;
-    padding: 1.5rem !important;
-    margin: 1rem 0 !important;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
-}
-
-/* Animations */
 @keyframes sparkle {
     0%, 100% { opacity: 1; transform: scale(1); }
     50% { opacity: 0.5; transform: scale(1.2); }
 }
-
-.sparkle::after {
-    content: "✨";
-    animation: sparkle 2s infinite;
-}
 </style>
 """
 
@@ -788,22 +707,24 @@ with gr.Blocks(
         - Use the "Add Magic" button for instant variations!
         - Click the Play button to hear your generated music!
         
-        **🎵 Audio Playback:**
+        **🎵 Audio Playbook:**
         - 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
         """)
     
-    # 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()
+    # Event handlers
+    generate_btn.click(
+        fn=generate_music,
+        inputs=[description, tempo, style],
+        outputs=[code_output, status_output, analysis_output]
+    )
     
-    code_output.change(
-        fn=update_player_code,
+    magic_btn.click(
+        fn=add_magic,
         inputs=[code_output],
-        outputs=[]
+        outputs=[code_output, status_output]
     )
     
     # Example button handlers