Update app.py

app.py

@@ -1,96 +1,69 @@
 #!/usr/bin/env python3
 """
-LibreChat Pyodide Code Interpreter - Working Plotly Integration
+LibreChat Pyodide Code Interpreter - With Plotly Support
 """
 
 import gradio as gr
 
 def create_pyodide_interface():
-    """Create a Gradio interface with working Plotly support"""
+    """Create a Gradio interface with Pyodide + Plotly support"""
     
     pyodide_html = """
     <div id="pyodide-container" style="border: 1px solid #ddd; padding: 15px; border-radius: 5px; margin: 10px 0;">
         <div id="pyodide-status" style="font-weight: bold; padding: 10px; background: #f0f0f0; border-radius: 3px;">
-            🔄 Loading Pyodide with Plotly...
+            🔄 Loading Pyodide with Plotly... This may take 15-30 seconds.
+        </div>
+        <div id="debug-info" style="display:none; margin-top: 10px; padding: 10px; background: #fff3cd; border-radius: 3px; font-size: 12px;">
+            <strong>Debug Info:</strong>
+            <div id="debug-text"></div>
         </div>
         <div id="pyodide-output" style="display:none; margin-top: 10px;">
             <h4>Execution Results:</h4>
-            <pre id="output-text" style="background: #f8f8f8; padding: 10px; border-radius: 3px; max-height: 200px; overflow-y: auto; white-space: pre-wrap;"></pre>
-            <div id="plot-container" style="margin-top: 15px;"></div>
+            <pre id="output-text" style="background: #f8f8f8; padding: 10px; border-radius: 3px; max-height: 300px; overflow-y: auto; white-space: pre-wrap;"></pre>
+            <div id="plot-container" style="text-align: center; margin-top: 10px;"></div>
         </div>
     </div>
     
-    <!-- Load Plotly.js -->
+    <!-- Load Plotly.js first -->
     <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
     
     <script>
+        // Global variables
         let pyodide = null;
         let pyodideReady = false;
-        let plotCounter = 0;
+        let initializationStarted = false;
+        let debugMode = true;
         
-        function updateStatus(message, color = 'black') {
+        function updateStatus(message, color) {
+            color = color || 'black';
             const statusDiv = document.getElementById('pyodide-status');
             if (statusDiv) {
                 statusDiv.innerHTML = message;
                 statusDiv.style.color = color;
             }
-            console.log('Status:', message);
+            console.log('Pyodide Status:', message);
         }
         
-        // Custom Plotly renderer for Pyodide
-        window.renderPlotlyFromPython = function(plotData, plotLayout, plotConfig) {
-            try {
-                plotCounter++;
-                const plotId = 'pyodide-plot-' + plotCounter;
-                const plotContainer = document.getElementById('plot-container');
-                
-                if (!plotContainer) {
-                    console.error('Plot container not found');
-                    return false;
-                }
-                
-                // Create new plot div
-                const plotDiv = document.createElement('div');
-                plotDiv.id = plotId;
-                plotDiv.style.width = '100%';
-                plotDiv.style.height = '500px';
-                plotDiv.style.margin = '10px 0';
-                plotDiv.style.border = '1px solid #ddd';
-                plotDiv.style.borderRadius = '5px';
-                
-                // Add title
-                const title = document.createElement('h5');
-                title.textContent = '📈 Interactive Plotly Chart #' + plotCounter;
-                title.style.margin = '10px 0 5px 0';
-                
-                plotContainer.appendChild(title);
-                plotContainer.appendChild(plotDiv);
-                
-                // Parse data if it's a string
-                if (typeof plotData === 'string') {
-                    plotData = JSON.parse(plotData);
-                }
-                if (typeof plotLayout === 'string') {
-                    plotLayout = JSON.parse(plotLayout);
-                }
-                if (typeof plotConfig === 'string') {
-                    plotConfig = JSON.parse(plotConfig);
-                }
-                
-                // Create the plot
-                Plotly.newPlot(plotId, plotData, plotLayout, plotConfig || {responsive: true});
-                
-                console.log('Plotly chart rendered successfully:', plotId);
-                return true;
-                
-            } catch (error) {
-                console.error('Plotly rendering error:', error);
-                return false;
+        function debugLog(message) {
+            if (!debugMode) return;
+            console.log('DEBUG:', message);
+            const debugDiv = document.getElementById('debug-info');
+            const debugText = document.getElementById('debug-text');
+            if (debugDiv && debugText) {
+                debugDiv.style.display = 'block';
+                debugText.innerHTML += '<br>' + new Date().toLocaleTimeString() + ': ' + message;
             }
-        };
+        }
         
         async function initPyodide() {
+            if (initializationStarted) {
+                debugLog('Initialization already started');
+                return;
+            }
+            initializationStarted = true;
+            
             try {
+                // Check prerequisites
                 if (typeof loadPyodide === 'undefined') {
                     throw new Error('Pyodide CDN not loaded');
                 }
@@ -98,99 +71,168 @@ def create_pyodide_interface():
                     throw new Error('Plotly CDN not loaded');
                 }
                 
-                updateStatus('🔄 Loading Pyodide...', 'blue');
+                updateStatus('🔄 Loading Pyodide core...', 'blue');
+                debugLog('Starting Pyodide with Plotly support...');
                 
                 pyodide = await loadPyodide({
                     indexURL: "https://cdn.jsdelivr.net/pyodide/v0.25.0/full/"
                 });
                 
-                updateStatus('📦 Installing packages...', 'blue');
+                debugLog('Pyodide core loaded');
+                updateStatus('📦 Installing Python packages...', 'blue');
                 
-                // Install packages
-                await pyodide.loadPackage(['numpy', 'pandas']);
+                // Install plotly and other packages
+                const packages = ['numpy', 'pandas', 'matplotlib'];
                 
-                // Install plotly via micropip
-                await pyodide.loadPackage(['micropip']);
-                await pyodide.runPythonAsync(`
-                    import micropip
-                    await micropip.install('plotly')
-                `);
+                for (const pkg of packages) {
+                    try {
+                        debugLog(`Installing ${pkg}...`);
+                        await pyodide.loadPackage(pkg);
+                        debugLog(`✓ ${pkg} installed`);
+                    } catch (error) {
+                        debugLog(`⚠ ${pkg} failed: ${error.message}`);
+                    }
+                }
+                
+                // Install plotly via pip in Pyodide
+                updateStatus('📦 Installing Plotly via pip...', 'blue');
+                try {
+                    await pyodide.loadPackage(['micropip']);
+                    await pyodide.runPythonAsync(`
+                        import micropip
+                        await micropip.install('plotly')
+                    `);
+                    debugLog('✓ Plotly installed via micropip');
+                } catch (error) {
+                    debugLog('⚠ Plotly installation failed: ' + error.message);
+                }
                 
-                updateStatus('🔧 Setting up Plotly integration...', 'blue');
+                updateStatus('🔧 Setting up plotting environment...', 'blue');
                 
-                // Setup Python environment with proper Plotly integration
+                // Setup Python environment with Plotly support
                 pyodide.runPython(`
 import sys
-import json
-from js import renderPlotlyFromPython
-
-print("Setting up Plotly integration...")
+print("Python " + sys.version)
 
-# Global storage
-_plots_created = 0
+# Global storage for plots
+_matplotlib_data = None
+_plotly_data = None
 
-def show_plotly_figure(fig):
-    """Custom show function that renders plots in the browser"""
-    global _plots_created
+def capture_matplotlib():
+    global _matplotlib_data
     try:
-        # Convert figure to JSON
-        fig_json = fig.to_json()
-        fig_dict = json.loads(fig_json)
+        import matplotlib.pyplot as plt
+        import io
+        import base64
         
-        # Extract components
-        data = json.dumps(fig_dict.get('data', []))
-        layout = json.dumps(fig_dict.get('layout', {}))
-        config = json.dumps({'responsive': True, 'displayModeBar': True})
-        
-        # Call JavaScript renderer
-        success = renderPlotlyFromPython(data, layout, config)
+        if len(plt.get_fignums()) > 0:
+            buffer = io.BytesIO()
+            plt.savefig(buffer, format='png', bbox_inches='tight', dpi=100)
+            buffer.seek(0)
+            plot_data = buffer.getvalue()
+            buffer.close()
+            _matplotlib_data = base64.b64encode(plot_data).decode()
+            plt.close('all')
+            return _matplotlib_data
+        return None
+    except Exception as e:
+        print("Matplotlib capture error: " + str(e))
+        return None
+
+def capture_plotly(fig):
+    global _plotly_data
+    try:
+        # Convert plotly figure to HTML div
+        import plotly.offline as pyo
+        import plotly.io as pio
         
-        if success:
-            _plots_created += 1
-            print(f"✅ Plot #{_plots_created} rendered successfully!")
-            return True
-        else:
-            print("❌ Plot rendering failed")
-            return False
+        # Method 1: Try offline plot
+        try:
+            _plotly_data = pyo.plot(fig, output_type='div', include_plotlyjs=False, div_id='plotly-div')
+            print("Plotly captured via offline.plot")
+            return _plotly_data
+        except:
+            # Method 2: Try to_html
+            _plotly_data = fig.to_html(include_plotlyjs=False, div_id='plotly-div')
+            print("Plotly captured via to_html")
+            return _plotly_data
             
     except Exception as e:
-        print(f"❌ Plot error: {e}")
-        return False
+        print("Plotly capture error: " + str(e))
+        # Method 3: Fallback to JSON
+        try:
+            import json
+            _plotly_data = json.dumps(fig.to_dict())
+            print("Plotly captured as JSON (fallback)")
+            return _plotly_data
+        except:
+            return None
+
+def get_matplotlib_data():
+    return _matplotlib_data
+
+def get_plotly_data():
+    return _plotly_data
 
-# Patch Plotly's show methods
+def clear_plot_data():
+    global _matplotlib_data, _plotly_data
+    _matplotlib_data = None
+    _plotly_data = None
+
+# Setup matplotlib if available
+try:
+    import matplotlib
+    matplotlib.use('Agg')
+    import matplotlib.pyplot as plt
+    
+    original_show = plt.show
+    def custom_show(*args, **kwargs):
+        return capture_matplotlib()
+    plt.show = custom_show
+    
+    print("✅ Matplotlib configured")
+except ImportError:
+    print("❌ Matplotlib not available")
+
+# Setup plotly if available
 try:
     import plotly.graph_objects as go
     import plotly.express as px
     
-    # Override the show method for graph_objects
-    original_show = go.Figure.show
-    def custom_show(self, *args, **kwargs):
-        return show_plotly_figure(self)
-    go.Figure.show = custom_show
+    # Custom show function for Plotly
+    def show_plotly(fig):
+        return capture_plotly(fig)
     
-    print("✅ Plotly graph_objects patched")
-    
-    # Test basic functionality
-    print("✅ Plotly integration ready!")
-    print("Use fig.show() to display interactive plots")
+    # Monkey patch plotly's show
+    original_plotly_show = go.Figure.show
+    def custom_plotly_show(self, *args, **kwargs):
+        return capture_plotly(self)
+    go.Figure.show = custom_plotly_show
     
+    print("✅ Plotly configured")
+    print("Available: plotly.graph_objects as 'go', plotly.express as 'px'")
 except ImportError as e:
-    print(f"❌ Plotly import failed: {e}")
+    print("❌ Plotly not available: " + str(e))
 
-# Also set up matplotlib fallback
+# Test basic functionality
 try:
-    import matplotlib
-    matplotlib.use('Agg')
-    import matplotlib.pyplot as plt
-    print("✅ Matplotlib also available")
+    import numpy as np
+    print("✅ NumPy available")
 except ImportError:
-    print("❌ Matplotlib not available")
+    print("❌ NumPy not available")
+
+try:
+    import pandas as pd
+    print("✅ Pandas available")
+except ImportError:
+    print("❌ Pandas not available")
 
-print("🎉 Python environment ready!")
+print("Environment setup complete!")
                 `);
                 
                 pyodideReady = true;
                 updateStatus('✅ Pyodide + Plotly ready!', 'green');
+                debugLog('Full initialization complete');
                 
                 // Show output area
                 const outputDiv = document.getElementById('pyodide-output');
@@ -198,31 +240,34 @@ print("🎉 Python environment ready!")
                 
                 const outputText = document.getElementById('output-text');
                 if (outputText) {
-                    outputText.textContent = 'Pyodide ready with Plotly support! Try the examples.';
+                    outputText.textContent = 'Pyodide ready with Plotly support!\\n\\nTry the examples below or write your own code.';
                 }
                 
             } catch (error) {
                 console.error('Initialization error:', error);
+                debugLog('Init error: ' + error.message);
                 updateStatus('❌ Failed: ' + error.message, 'red');
                 pyodideReady = false;
             }
         }
         
         async function executePyodideCode(code) {
+            debugLog('Execute function called');
+            
             if (!pyodideReady) {
-                return 'Pyodide not ready. Please wait for green status.';
+                return 'Pyodide is not ready. Please wait for green status.';
             }
             
             if (!code || code.trim() === '') {
-                return 'No code provided.';
+                return 'Error: No code provided.';
             }
             
             try {
-                updateStatus('▶️ Executing...', 'blue');
+                updateStatus('▶️ Executing Python...', 'blue');
+                debugLog('Executing: ' + code.substring(0, 50) + '...');
                 
                 // Clear previous plots
-                const plotContainer = document.getElementById('plot-container');
-                if (plotContainer) plotContainer.innerHTML = '';
+                pyodide.runPython('clear_plot_data()');
                 
                 // Capture stdout
                 pyodide.runPython(`
@@ -241,53 +286,383 @@ sys.stdout = old_stdout
 captured_output.getvalue()
                 `);
                 
-                // Display text output
+                // Get plot data
+                let matplotlibData = pyodide.runPython('get_matplotlib_data()');
+                let plotlyData = pyodide.runPython('get_plotly_data()');
+                
+                debugLog('Execution completed');
+                
+                // Display results
                 const outputText = document.getElementById('output-text');
+                const plotContainer = document.getElementById('plot-container');
+                
+                // Handle text output
                 if (outputText) {
                     let textOutput = stdout || '';
                     if (result !== undefined && result !== null && result !== '') {
                         if (textOutput) textOutput += '\\n';
                         textOutput += 'Return: ' + result;
                     }
-                    outputText.textContent = textOutput || 'Code executed successfully';
+                    outputText.textContent = textOutput || 'Code executed successfully (no text output)';
+                }
+                
+                // Handle plots
+                let plotHTML = '';
+                
+                if (matplotlibData && matplotlibData.length > 100) {
+                    plotHTML += `
+                        <div style="margin: 10px 0;">
+                            <h5>📊 Matplotlib Plot:</h5>
+                            <img src="data:image/png;base64,${matplotlibData}" 
+                                 style="max-width: 100%; height: auto; border: 1px solid #ddd;" 
+                                 alt="Matplotlib Plot">
+                        </div>
+                    `;
+                }
+                
+                if (plotlyData && plotlyData.length > 100) {
+                    // Check if it's JSON (fallback method)
+                    if (plotlyData.startsWith('{') || plotlyData.startsWith('[')) {
+                        try {
+                            const plotData = JSON.parse(plotlyData);
+                            plotHTML += `
+                                <div style="margin: 10px 0;">
+                                    <h5>📈 Interactive Plotly Chart:</h5>
+                                    <div id="plotly-chart-${Date.now()}" style="width: 100%; height: 500px; border: 1px solid #ddd;"></div>
+                                </div>
+                            `;
+                            // Render after DOM update
+                            setTimeout(() => {
+                                const chartId = document.querySelector('[id^="plotly-chart-"]').id;
+                                Plotly.newPlot(chartId, plotData.data, plotData.layout);
+                            }, 100);
+                        } catch (e) {
+                            debugLog('JSON plot rendering failed: ' + e.message);
+                        }
+                    } else {
+                        // HTML method
+                        plotHTML += `
+                            <div style="margin: 10px 0;">
+                                <h5>📈 Interactive Plotly Chart:</h5>
+                                <div style="border: 1px solid #ddd; border-radius: 5px; padding: 10px;">
+                                    ${plotlyData}
+                                </div>
+                            </div>
+                        `;
+                    }
+                }
+                
+                if (plotContainer) {
+                    plotContainer.innerHTML = plotHTML;
+                }
+                
+                if (plotHTML) {
+                    updateStatus('✅ Executed with plot(s)!', 'green');
+                } else {
+                    updateStatus('✅ Executed successfully!', 'green');
                 }
                 
-                updateStatus('✅ Executed!', 'green');
                 return stdout || 'Code executed successfully';
                 
             } catch (error) {
                 console.error('Execution error:', error);
+                debugLog('Error: ' + error.message);
                 
                 const outputText = document.getElementById('output-text');
                 if (outputText) {
                     outputText.textContent = 'Error: ' + error.toString();
                 }
-                updateStatus('❌ Error', 'red');
+                updateStatus('❌ Execution failed', 'red');
                 return 'Error: ' + error.toString();
             }
         }
         
-        // Wait for both CDNs
-        function waitForReady() {
-            if (typeof loadPyodide !== 'undefined' && typeof Plotly !== 'undefined') {
-                console.log('Both CDNs loaded, initializing...');
-                initPyodide();
-            } else {
-                console.log('Waiting for CDNs... Pyodide:', typeof loadPyodide !== 'undefined', 'Plotly:', typeof Plotly !== 'undefined');
-                setTimeout(waitForReady, 1000);
+        // Safe initialization with retry
+        async function safeInit() {
+            let retries = 0;
+            const maxRetries = 3;
+            
+            while (retries < maxRetries) {
+                try {
+                    if (typeof loadPyodide !== 'undefined' && typeof Plotly !== 'undefined') {
+                        await initPyodide();
+                        return;
+                    }
+                } catch (error) {
+                    debugLog(`Init attempt ${retries + 1} failed: ${error.message}`);
+                }
+                
+                retries++;
+                if (retries < maxRetries) {
+                    debugLog(`Retrying in ${retries * 2} seconds...`);
+                    await new Promise(resolve => setTimeout(resolve, retries * 2000));
+                }
             }
+            
+            updateStatus('❌ Initialization failed after ' + maxRetries + ' attempts', 'red');
         }
         
-        // Start when ready
+        // Wait for both CDNs to load
+        function waitForCDNs() {
+            const checkInterval = setInterval(() => {
+                if (typeof loadPyodide !== 'undefined' && typeof Plotly !== 'undefined') {
+                    clearInterval(checkInterval);
+                    debugLog('Both CDNs loaded, starting init');
+                    safeInit();
+                } else {
+                    debugLog('Waiting for CDNs... Pyodide: ' + (typeof loadPyodide !== 'undefined') + ', Plotly: ' + (typeof Plotly !== 'undefined'));
+                }
+            }, 1000);
+            
+            // Timeout after 30 seconds
+            setTimeout(() => {
+                clearInterval(checkInterval);
+                if (!pyodideReady) {
+                    updateStatus('❌ CDN loading timeout', 'red');
+                }
+            }, 30000);
+        }
+        
+        // Start when DOM is ready
         if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', waitForReady);
+            document.addEventListener('DOMContentLoaded', waitForCDNs);
         } else {
-            waitForReady();
+            waitForCDNs();
         }
         
         // Global functions
         window.executePyodideCode = executePyodideCode;
         window.checkPyodideStatus = () => pyodideReady;
+        window.toggleDebugMode = function() {
+            debugMode = !debugMode;
+            const debugDiv = document.getElementById('debug-info');
+            if (debugDiv) debugDiv.style.display = debugMode ? 'block' : 'none';
+            return debugMode;
+        };
         
     </script>
-    <script src="https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js" async></script>
+    <script src="https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js" async></script>
+    """
+    
+    return pyodide_html
+
+# Create the Gradio interface
+with gr.Blocks(title="Pyodide + Plotly Code Interpreter") as demo:
+    gr.Markdown("# 🐍📈 Pyodide + Plotly Code Interpreter")
+    gr.Markdown("**Interactive Python with Plotly charts** - runs entirely in your browser!")
+    
+    # Pyodide interface
+    pyodide_interface = gr.HTML(create_pyodide_interface())
+    
+    with gr.Row():
+        with gr.Column(scale=2):
+            code_input = gr.Textbox(
+                value="""# Plotly Example 1: Simple Line Chart
+import plotly.graph_objects as go
+import numpy as np
+
+# Generate data
+x = np.linspace(0, 10, 100)
+y1 = np.sin(x)
+y2 = np.cos(x)
+
+# Create figure
+fig = go.Figure()
+fig.add_trace(go.Scatter(x=x, y=y1, name='sin(x)', line=dict(color='blue')))
+fig.add_trace(go.Scatter(x=x, y=y2, name='cos(x)', line=dict(color='red')))
+
+fig.update_layout(
+    title='Interactive Sine and Cosine Waves',
+    xaxis_title='X values',
+    yaxis_title='Y values',
+    hovermode='x unified'
+)
+
+fig.show()
+print("Interactive Plotly chart created! 🎉")""",
+                lines=18,
+                label="Python Code with Plotly"
+            )
+            
+            with gr.Row():
+                execute_btn = gr.Button("🚀 Execute", variant="primary", size="lg")
+                examples_btn = gr.Button("📋 Load Examples", variant="secondary")
+            
+        with gr.Column(scale=1):
+            gr.Markdown("### 🎛️ Controls")
+            
+            status_display = gr.Textbox(
+                label="Status",
+                interactive=False,
+                lines=4
+            )
+            
+            with gr.Row():
+                check_btn = gr.Button("📊 Status", size="sm")
+                debug_btn = gr.Button("🐛 Debug", size="sm")
+    
+    # Example code snippets
+    examples = {
+        "Plotly Bar Chart": """import plotly.express as px
+import pandas as pd
+
+# Sample data
+data = {
+    'Category': ['A', 'B', 'C', 'D', 'E'],
+    'Values': [23, 45, 56, 78, 32],
+    'Colors': ['red', 'blue', 'green', 'orange', 'purple']
+}
+df = pd.DataFrame(data)
+
+# Create bar chart
+fig = px.bar(df, x='Category', y='Values', color='Colors',
+             title='Interactive Bar Chart',
+             labels={'Values': 'Count'})
+
+fig.show()
+print("Bar chart created!")""",
+        
+        "Plotly 3D Scatter": """import plotly.graph_objects as go
+import numpy as np
+
+# Generate 3D data
+n = 100
+x = np.random.randn(n)
+y = np.random.randn(n)
+z = np.random.randn(n)
+colors = np.random.randn(n)
+
+# Create 3D scatter plot
+fig = go.Figure(data=go.Scatter3d(
+    x=x, y=y, z=z,
+    mode='markers',
+    marker=dict(
+        size=8,
+        color=colors,
+        colorscale='Viridis',
+        showscale=True
+    )
+))
+
+fig.update_layout(
+    title='Interactive 3D Scatter Plot',
+    scene=dict(
+        xaxis_title='X Axis',
+        yaxis_title='Y Axis',
+        zaxis_title='Z Axis'
+    )
+)
+
+fig.show()
+print("3D scatter plot created!")""",
+
+        "Plotly Dashboard": """import plotly.graph_objects as go
+from plotly.subplots import make_subplots
+import numpy as np
+
+# Generate sample data
+x = np.linspace(0, 10, 50)
+y1 = np.sin(x)
+y2 = np.cos(x)
+y3 = np.random.normal(0, 0.1, len(x))
+
+# Create subplots
+fig = make_subplots(
+    rows=2, cols=2,
+    subplot_titles=('Line Plot', 'Histogram', 'Box Plot', 'Heatmap'),
+    specs=[[{"secondary_y": True}, {}],
+           [{}, {}]]
+)
+
+# Add line plot
+fig.add_trace(go.Scatter(x=x, y=y1, name='sin(x)'), row=1, col=1)
+fig.add_trace(go.Scatter(x=x, y=y2, name='cos(x)', yaxis='y2'), row=1, col=1, secondary_y=True)
+
+# Add histogram
+fig.add_trace(go.Histogram(x=np.random.normal(0, 1, 1000), name='Normal Dist'), row=1, col=2)
+
+# Add box plot
+categories = ['A', 'B', 'C']
+values = [np.random.normal(i, 0.5, 100) for i in range(len(categories))]
+for i, (cat, vals) in enumerate(zip(categories, values)):
+    fig.add_trace(go.Box(y=vals, name=cat), row=2, col=1)
+
+# Add heatmap
+z = np.random.randn(10, 10)
+fig.add_trace(go.Heatmap(z=z, colorscale='RdBu'), row=2, col=2)
+
+fig.update_layout(height=600, title_text="Multi-Plot Dashboard")
+fig.show()
+print("Dashboard created with multiple charts!")"""
+    }
+    
+    def load_example():
+        return examples["Plotly Bar Chart"]
+    
+    examples_btn.click(
+        fn=load_example,
+        inputs=[],
+        outputs=[code_input]
+    )
+    
+    # Event handlers
+    execute_btn.click(
+        fn=None,
+        inputs=[code_input],
+        outputs=[status_display],
+        js="""
+        function(code) {
+            try {
+                if (window.executePyodideCode) {
+                    return window.executePyodideCode(code);
+                } else {
+                    return 'Execution function not available';
+                }
+            } catch (error) {
+                return 'Error: ' + error.message;
+            }
+        }
+        """
+    )
+    
+    check_btn.click(
+        fn=None,
+        inputs=[],
+        outputs=[status_display],
+        js="""
+        function() {
+            try {
+                const ready = window.checkPyodideStatus ? window.checkPyodideStatus() : false;
+                return ready ? '✅ Ready for Plotly!' : '⏳ Still loading...';
+            } catch (error) {
+                return 'Status error: ' + error.message;
+            }
+        }
+        """
+    )
+    
+    debug_btn.click(
+        fn=None,
+        inputs=[],
+        outputs=[status_display],
+        js="""
+        function() {
+            try {
+                if (window.toggleDebugMode) {
+                    return window.toggleDebugMode() ? '🐛 Debug ON' : '🐛 Debug OFF';
+                }
+                return 'Debug toggle unavailable';
+            } catch (error) {
+                return 'Debug error: ' + error.message;
+            }
+        }
+        """
+    )
+
+if __name__ == "__main__":
+    print("🚀 Starting Pyodide + Plotly Interpreter...")
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=False
+    )