Update app.py

app.py

@@ -1,384 +1,343 @@
 import gradio as gr
-import random
+import requests
+import json
+import os
+from huggingface_hub import InferenceClient
 
-# Simple music generation logic
-class StrudelGenerator:
-    def __init__(self):
-        self.patterns = {
-            'drums': ['"bd*4"', '"bd ~ sd ~"', '"bd*2 sd*2"'],
-            'bass': ['"c2 [~ c2] f2 [~ f2]"', '"c2*4"', '"c1 ~ f1 ~"'],
-            'chords': ['"<C^7 F^7 G^7 C^7>".voicing()', '"<c\'maj7 f\'maj7 g\'7 c\'maj7>".voicing()'],
-            'melody': ['"c5 d5 e5 f5"', '"c5 e5 g5 c6"']
-        }
+# Initialize the Hugging Face Inference Client
+# You can use different models - here are some good options:
+# - "microsoft/DialoGPT-medium" (free)
+# - "mistralai/Mixtral-8x7B-Instruct-v0.1" (may require HF Pro)
+# - "meta-llama/Llama-2-7b-chat-hf" (may require access request)
+
+client = InferenceClient("microsoft/DialoGPT-medium")
+
+def create_strudel_prompt(user_text):
+    """Create a detailed prompt for generating Strudel code"""
+    return f"""Convert the following description into Strudel live coding syntax. Strudel uses a functional approach for creating musical patterns.
+
+Key Strudel concepts:
+- Use note() for melodies: note("c d e f")
+- Use sound() for samples: sound("bd hh sd hh")
+- Use .fast() to speed up: .fast(2)
+- Use .slow() to slow down: .slow(2)
+- Chain functions with dots: note("c d e f").fast(2)
+- Use < > for groupings: note("c <e g> f")
+- Use * for repetition: note("c*4")
+- Use ~ for rests: note("c ~ e ~")
+- Use / for subdivision: note("c/2 d/2 e")
+- Use [] for sequences: note("[c d] [e f]")
+
+User request: {user_text}
+
+Generate only the Strudel code without explanation:"""
 
-    def generate_code(self, description: str, tempo: int = 120) -> str:
-        """Generate simple Strudel code"""
-        desc = description.lower()
-        patterns = []
+def generate_strudel_code(user_text):
+    """Generate Strudel code using LLM"""
+    try:
+        prompt = create_strudel_prompt(user_text)
         
-        # Simple keyword detection
-        if any(word in desc for word in ['drum', 'beat', 'kick']):
-            patterns.append(random.choice(self.patterns['drums']) + '.gain(0.8)')
+        # Use the inference client to generate text
+        response = client.text_generation(
+            prompt, 
+            max_new_tokens=200,
+            temperature=0.7,
+            return_full_text=False
+        )
         
-        if any(word in desc for word in ['bass', 'low']):
-            patterns.append(random.choice(self.patterns['bass']) + '.sound("sawtooth").gain(0.6)')
-            
-        if any(word in desc for word in ['chord', 'harmony', 'piano']):
-            patterns.append(random.choice(self.patterns['chords']) + '.sound("piano").gain(0.4)')
-            
-        if any(word in desc for word in ['melody', 'lead', 'tune']):
-            patterns.append(random.choice(self.patterns['melody']) + '.sound("sine").gain(0.5)')
+        # Clean up the response
+        strudel_code = response.strip()
         
-        # Default if nothing detected
-        if not patterns:
-            patterns = [
-                '"bd ~ sd ~".gain(0.7)',
-                '"<C^7 F^7 G^7 C^7>".voicing().sound("piano").gain(0.4)'
-            ]
+        # Basic validation and cleanup
+        if not strudel_code:
+            strudel_code = 'note("c d e f").slow(2)'
         
-        # Build code
-        if len(patterns) == 1:
-            code = patterns[0]
-        else:
-            code = "stack(\n"
-            for i, pattern in enumerate(patterns):
-                comma = "," if i < len(patterns) - 1 else ""
-                code += f"  {pattern}{comma}\n"
-            code += ")"
+        # Remove any markdown code blocks if present
+        if strudel_code.startswith('```'):
+            lines = strudel_code.split('\n')
+            strudel_code = '\n'.join(lines[1:-1]) if len(lines) > 2 else strudel_code
         
-        code += f".cpm({tempo})"
-        return code
-
-generator = StrudelGenerator()
-
-def generate_music(description, tempo):
-    """Generate music code"""
-    if not description.strip():
-        return "// Please describe your music first!"
-    
-    code = generator.generate_code(description, tempo)
-    return code
+        return strudel_code
+        
+    except Exception as e:
+        print(f"Error generating code: {e}")
+        # Fallback to a simple pattern
+        return 'note("c d e f").slow(2)'
 
-# Create simple interface
-with gr.Blocks(title="🎵 Strudel Generator") as app:
-    
-    gr.HTML("""
-    <div style='text-align: center; margin-bottom: 30px;'>
-        <h1 style='color: #FF6B9D; font-size: 2.5rem; margin: 0;'>🎵 Strudel Music Generator</h1>
-        <p style='color: #666; font-size: 1.1rem;'>Describe your music and generate Strudel code!</p>
-    </div>
-    """)
-    
-    # Simple input
-    description = gr.Textbox(
-        label="Describe your music",
-        placeholder="e.g., 'upbeat drums with piano chords'",
-        lines=2
-    )
-    
-    tempo = gr.Slider(60, 180, 120, step=5, label="Tempo (BPM)")
-    
-    generate_btn = gr.Button("🚀 Generate Code", variant="primary")
-    
-    # Code output
-    code_output = gr.Code(
-        label="Generated Strudel Code",
-        language="javascript",
-        lines=8
-    )
-    
-    # Simple audio player with working Strudel.js
-    gr.HTML("""
-    <div id="player" style='
-        background: linear-gradient(135deg, #FF6B9D, #A855F7);
-        padding: 20px;
-        border-radius: 15px;
-        text-align: center;
-        margin: 20px 0;
-    '>
-        <h3 style='color: white; margin: 0 0 15px 0;'>🎵 Audio Player</h3>
-        <button id="playBtn" onclick="togglePlay()" style='
-            background: white;
-            color: #FF6B9D;
+def create_strudel_html(strudel_code):
+    """Create HTML with embedded Strudel player"""
+    html_template = f"""
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Strudel Player</title>
+    <script src="https://unpkg.com/@strudel.cycles/core"></script>
+    <script src="https://unpkg.com/@strudel.cycles/webaudio"></script>
+    <script src="https://unpkg.com/@strudel.cycles/mini"></script>
+    <style>
+        body {{
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            background: #1a1a1a;
+            color: #fff;
+        }}
+        .player-container {{
+            background: #2d2d2d;
+            border-radius: 8px;
+            padding: 20px;
+            margin: 20px 0;
+        }}
+        .controls {{
+            margin: 20px 0;
+            text-align: center;
+        }}
+        button {{
+            background: #4CAF50;
+            color: white;
             border: none;
-            padding: 12px 30px;
-            border-radius: 25px;
-            font-size: 16px;
-            font-weight: bold;
-            cursor: pointer;
+            padding: 10px 20px;
             margin: 5px;
-            transition: all 0.3s;
-        '>▶️ Play</button>
-        <button onclick="stopPlay()" style='
-            background: rgba(255,255,255,0.8);
-            color: #FF6B9D;
-            border: none;
-            padding: 12px 30px;
-            border-radius: 25px;
-            font-size: 16px;
-            font-weight: bold;
+            border-radius: 4px;
             cursor: pointer;
-            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: 16px;
+        }}
+        button:hover {{
+            background: #45a049;
+        }}
+        button:disabled {{
+            background: #666;
+            cursor: not-allowed;
+        }}
+        .stop {{
+            background: #f44336;
+        }}
+        .stop:hover {{
+            background: #da190b;
+        }}
+        .code-display {{
+            background: #333;
+            border: 1px solid #555;
+            border-radius: 4px;
+            padding: 15px;
+            margin: 10px 0;
+            font-family: 'Courier New', monospace;
             font-size: 14px;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }}
+        .status {{
+            text-align: center;
+            margin: 10px 0;
             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 "Enable Audio" first, then generate code and play!
+        }}
+        .error {{
+            color: #ff6b6b;
+        }}
+        .playing {{
+            color: #4CAF50;
+        }}
+    </style>
+</head>
+<body>
+    <div class="player-container">
+        <h2>🎵 Strudel Player</h2>
+        
+        <div class="code-display">{strudel_code}</div>
+        
+        <div class="controls">
+            <button id="playBtn" onclick="playPattern()">▶️ Play</button>
+            <button id="stopBtn" onclick="stopPattern()" disabled>⏹️ Stop</button>
         </div>
+        
+        <div id="status" class="status">Ready to play</div>
     </div>
 
-    <!-- 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>
+    <script type="module">
+        import {{ repl, controls, evalScope }} from 'https://unpkg.com/@strudel.cycles/core';
+        import {{ webaudioOutput }} from 'https://unpkg.com/@strudel.cycles/webaudio';
+        
+        let currentPattern = null;
         let isPlaying = false;
-        let currentHap = null;
-        let strudelInitialized = false;
-        let audioContext = null;
-
-        function getCurrentCode() {
-            // More aggressive code detection
-            const allTextareas = document.querySelectorAll('textarea');
-            const allCodes = document.querySelectorAll('code');
-            const allPres = document.querySelectorAll('pre');
-            
-            // 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 '';
-        }
-
-        function updateStatus(message, color = 'white') {
-            const status = document.getElementById('status');
-            if (status) {
-                status.textContent = message;
-                status.style.color = color;
-            }
-            console.log('Status:', message);
-        }
-
-        function updatePlayButton(playing) {
-            const btn = document.getElementById('playBtn');
-            if (btn) {
-                btn.textContent = playing ? '⏸️ Pause' : '▶️ Play';
-            }
-        }
-
-        async function initAudio() {
-            try {
-                updateStatus('🔧 Initializing audio...', '#ffffcc');
+        
+        // Initialize Strudel
+        const ctx = new (window.AudioContext || window.webkitAudioContext)();
+        
+        window.playPattern = async function() {{
+            try {{
+                const playBtn = document.getElementById('playBtn');
+                const stopBtn = document.getElementById('stopBtn');
+                const status = document.getElementById('status');
                 
-                // Create audio context
-                audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                if (isPlaying) return;
                 
-                // Resume if suspended
-                if (audioContext.state === 'suspended') {
-                    await audioContext.resume();
-                }
+                // Resume audio context if needed
+                if (ctx.state === 'suspended') {{
+                    await ctx.resume();
+                }}
                 
-                // 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;
-                }
+                status.textContent = 'Starting...';
+                status.className = 'status';
                 
-            } catch (error) {
-                console.error('Audio init error:', error);
-                updateStatus('⚠️ Audio init failed - using demo mode', '#ffcccc');
-                strudelInitialized = false;
-            }
-        }
-
-        async function togglePlay() {
-            if (isPlaying) {
-                stopPlay();
-            } else {
-                await startPlay();
-            }
-        }
-
-        async function startPlay() {
-            const code = getCurrentCode();
-            
-            if (!code) {
-                updateStatus('❌ No code found! Generate some first.', '#ffcccc');
-                return;
-            }
-
-            try {
-                updateStatus('🎵 Starting playback...', '#ffffcc');
-
-                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;
-                    }
+                const code = `{strudel_code}`;
+                
+                // Evaluate the Strudel code
+                const pattern = evalScope(code, {{
+                    note: (notes) => repl.note(notes),
+                    sound: (sounds) => repl.sound(sounds),
+                    // Add more Strudel functions as needed
+                }});
+                
+                if (pattern) {{
+                    currentPattern = pattern.output(webaudioOutput);
+                    await currentPattern.start();
                     
-                } else {
-                    // 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) {
+                    isPlaying = true;
+                    playBtn.disabled = true;
+                    stopBtn.disabled = false;
+                    status.textContent = '🎵 Playing...';
+                    status.className = 'status playing';
+                }}
+                
+            }} catch (error) {{
                 console.error('Playback error:', error);
-                updateStatus('❌ Playback error: ' + error.message, '#ffcccc');
+                document.getElementById('status').textContent = `Error: ${{error.message}}`;
+                document.getElementById('status').className = 'status error';
+            }}
+        }}
+        
+        window.stopPattern = function() {{
+            try {{
+                if (currentPattern) {{
+                    currentPattern.stop();
+                    currentPattern = null;
+                }}
                 
-                // Fallback to demo mode
-                isPlaying = true;
-                updatePlayButton(true);
-                updateStatus('🎮 Demo mode: Simulating playback...', '#ffffcc');
+                isPlaying = false;
+                document.getElementById('playBtn').disabled = false;
+                document.getElementById('stopBtn').disabled = true;
+                document.getElementById('status').textContent = 'Stopped';
+                document.getElementById('status').className = 'status';
                 
-                setTimeout(() => {
-                    stopPlay();
-                    updateStatus('Demo finished!', 'white');
-                }, 8000);
-            }
-        }
-
-        function stopPlay() {
-            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;
-            updatePlayButton(false);
-            updateStatus('⏹️ Stopped', 'white');
-        }
-
-        // 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() {
-                    this.style.transform = 'scale(1.05)';
-                    this.style.boxShadow = '0 5px 15px rgba(0,0,0,0.2)';
-                });
-                btn.addEventListener('mouseleave', function() {
-                    this.style.transform = 'scale(1)';
-                    this.style.boxShadow = 'none';
-                });
-            });
-            
-            // 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);
-        });
-
-        // Global error handler
-        window.addEventListener('error', function(e) {
-            console.error('Global error:', e.error);
-        });
+            }} catch (error) {{
+                console.error('Stop error:', error);
+            }}
+        }}
+        
+        // Cleanup on page unload
+        window.addEventListener('beforeunload', () => {{
+            if (currentPattern) {{
+                currentPattern.stop();
+            }}
+        }});
     </script>
-    """)
-    
-    # Quick examples
-    gr.HTML("<h3 style='margin-top: 30px;'>🎨 Quick Examples:</h3>")
+</body>
+</html>
+"""
+    return html_template
+
+def process_text_to_music(user_input):
+    """Main function to process user input and return HTML player"""
+    if not user_input.strip():
+        return "<p>Please enter a description for your music!</p>"
     
-    with gr.Row():
-        ex1 = gr.Button("🎮 Chiptune", size="sm")
-        ex2 = gr.Button("🌙 Lofi", size="sm") 
-        ex3 = gr.Button("⚡ Techno", size="sm")
-        ex4 = gr.Button("🎹 Jazz", size="sm")
+    # Generate Strudel code
+    strudel_code = generate_strudel_code(user_input)
     
-    # Event handlers
-    generate_btn.click(
-        fn=generate_music,
-        inputs=[description, tempo],
-        outputs=[code_output]
-    )
+    # Create HTML player
+    html_player = create_strudel_html(strudel_code)
     
-    # Example handlers
-    ex1.click(lambda: "8-bit chiptune with bouncy melody and simple drums", outputs=[description])
-    ex2.click(lambda: "mellow lofi with soft piano chords and gentle drums", outputs=[description])
-    ex3.click(lambda: "driving techno with heavy bass and pounding kick", outputs=[description])
-    ex4.click(lambda: "smooth jazz with walking bass and chord progressions", outputs=[description])
+    return html_player
 
-    gr.HTML("""
-    <div style='text-align: center; margin-top: 30px; opacity: 0.7;'>
-        <p>Made for National Make Music Day 🎵</p>
-    </div>
-    """)
+# Create Gradio interface
+def create_interface():
+    with gr.Blocks(
+        title="Text to Strudel Music Generator",
+        theme=gr.themes.Dark(),
+        css="""
+        .gradio-container {
+            max-width: 1000px !important;
+        }
+        """
+    ) as app:
+        
+        gr.Markdown("""
+        # 🎵 Text to Strudel Music Generator
+        
+        Describe the music you want and I'll generate Strudel live coding syntax for it!
+        
+        **Examples to try:**
+        - "A simple drum beat with kick and hi-hat"
+        - "Peaceful melody in C major"
+        - "Fast electronic arpeggios"
+        - "Jazz chord progression"
+        """)
+        
+        with gr.Row():
+            with gr.Column(scale=1):
+                user_input = gr.Textbox(
+                    label="Describe your music",
+                    placeholder="Enter a description of the music you want to create...",
+                    lines=3
+                )
+                
+                generate_btn = gr.Button("🎵 Generate Music", variant="primary")
+                
+                gr.Markdown("""
+                ### How it works:
+                1. Describe the music you want
+                2. Click "Generate Music" 
+                3. Click "Play" in the player below
+                4. Use "Stop" to stop playback
+                
+                *Note: You may need to click play twice the first time to initialize audio.*
+                """)
+        
+        with gr.Row():
+            with gr.Column():
+                output_html = gr.HTML(
+                    label="Strudel Player",
+                    value="<p>Enter a description above and click 'Generate Music' to create your Strudel pattern!</p>"
+                )
+        
+        generate_btn.click(
+            fn=process_text_to_music,
+            inputs=[user_input],
+            outputs=[output_html]
+        )
+        
+        # Example buttons
+        gr.Markdown("### Quick Examples:")
+        with gr.Row():
+            example_btns = [
+                gr.Button("🥁 Simple Drum Beat"),
+                gr.Button("🎹 Peaceful Melody"),
+                gr.Button("⚡ Fast Arpeggios"),
+                gr.Button("🎷 Jazz Chords")
+            ]
+        
+        # Set up example button clicks
+        example_texts = [
+            "A simple drum beat with kick and hi-hat alternating",
+            "A peaceful melody in C major, slow and calming",
+            "Fast electronic arpeggios going up and down",
+            "Jazz chord progression with swing rhythm"
+        ]
+        
+        for btn, text in zip(example_btns, example_texts):
+            btn.click(
+                fn=lambda t=text: [t, process_text_to_music(t)],
+                outputs=[user_input, output_html]
+            )
+    
+    return app
 
+# Create and launch the app
 if __name__ == "__main__":
+    app = create_interface()
     app.launch(
-        share=False,
+        share=True,
         server_name="0.0.0.0",
         server_port=7860
     )