Update app.py

app.py

@@ -1,69 +1,96 @@
 #!/usr/bin/env python3
 """
-LibreChat Pyodide Code Interpreter - With Plotly Support
+LibreChat Pyodide Code Interpreter - Working Plotly Integration
 """
 
 import gradio as gr
 
 def create_pyodide_interface():
-    """Create a Gradio interface with Pyodide + Plotly support"""
+    """Create a Gradio interface with working 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... 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>
+            🔄 Loading Pyodide with Plotly...
         </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: 300px; overflow-y: auto; white-space: pre-wrap;"></pre>
-            <div id="plot-container" style="text-align: center; margin-top: 10px;"></div>
+            <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>
         </div>
     </div>
     
-    <!-- Load Plotly.js first -->
+    <!-- Load Plotly.js -->
     <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
     
     <script>
-        // Global variables
         let pyodide = null;
         let pyodideReady = false;
-        let initializationStarted = false;
-        let debugMode = true;
+        let plotCounter = 0;
         
-        function updateStatus(message, color) {
-            color = color || 'black';
+        function updateStatus(message, color = 'black') {
             const statusDiv = document.getElementById('pyodide-status');
             if (statusDiv) {
                 statusDiv.innerHTML = message;
                 statusDiv.style.color = color;
             }
-            console.log('Pyodide Status:', message);
+            console.log('Status:', message);
         }
         
-        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;
+        // 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;
             }
-        }
+        };
         
         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');
                 }
@@ -71,168 +98,99 @@ def create_pyodide_interface():
                     throw new Error('Plotly CDN not loaded');
                 }
                 
-                updateStatus('🔄 Loading Pyodide core...', 'blue');
-                debugLog('Starting Pyodide with Plotly support...');
+                updateStatus('🔄 Loading Pyodide...', 'blue');
                 
                 pyodide = await loadPyodide({
                     indexURL: "https://cdn.jsdelivr.net/pyodide/v0.25.0/full/"
                 });
                 
-                debugLog('Pyodide core loaded');
-                updateStatus('📦 Installing Python packages...', 'blue');
+                updateStatus('📦 Installing packages...', 'blue');
                 
-                // Install plotly and other packages
-                const packages = ['numpy', 'pandas', 'matplotlib'];
+                // Install packages
+                await pyodide.loadPackage(['numpy', 'pandas']);
                 
-                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);
-                }
+                // Install plotly via micropip
+                await pyodide.loadPackage(['micropip']);
+                await pyodide.runPythonAsync(`
+                    import micropip
+                    await micropip.install('plotly')
+                `);
                 
-                updateStatus('🔧 Setting up plotting environment...', 'blue');
+                updateStatus('🔧 Setting up Plotly integration...', 'blue');
                 
-                // Setup Python environment with Plotly support
+                // Setup Python environment with proper Plotly integration
                 pyodide.runPython(`
 import sys
-print("Python " + sys.version)
+import json
+from js import renderPlotlyFromPython
 
-# Global storage for plots
-_matplotlib_data = None
-_plotly_data = None
+print("Setting up Plotly integration...")
 
-def capture_matplotlib():
-    global _matplotlib_data
-    try:
-        import matplotlib.pyplot as plt
-        import io
-        import base64
-        
-        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
+# Global storage
+_plots_created = 0
 
-def capture_plotly(fig):
-    global _plotly_data
+def show_plotly_figure(fig):
+    """Custom show function that renders plots in the browser"""
+    global _plots_created
     try:
-        # Convert plotly figure to HTML div
-        import plotly.offline as pyo
-        import plotly.io as pio
+        # Convert figure to JSON
+        fig_json = fig.to_json()
+        fig_dict = json.loads(fig_json)
         
-        # 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
+        # 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 success:
+            _plots_created += 1
+            print(f"✅ Plot #{_plots_created} rendered successfully!")
+            return True
+        else:
+            print("❌ Plot rendering failed")
+            return False
             
     except Exception as e:
-        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
+        print(f"❌ Plot error: {e}")
+        return False
 
-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
+# Patch Plotly's show methods
 try:
     import plotly.graph_objects as go
     import plotly.express as px
     
-    # Custom show function for Plotly
-    def show_plotly(fig):
-        return capture_plotly(fig)
+    # 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
     
-    # 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 graph_objects patched")
+    
+    # Test basic functionality
+    print("✅ Plotly integration ready!")
+    print("Use fig.show() to display interactive plots")
     
-    print("✅ Plotly configured")
-    print("Available: plotly.graph_objects as 'go', plotly.express as 'px'")
 except ImportError as e:
-    print("❌ Plotly not available: " + str(e))
-
-# Test basic functionality
-try:
-    import numpy as np
-    print("✅ NumPy available")
-except ImportError:
-    print("❌ NumPy not available")
+    print(f"❌ Plotly import failed: {e}")
 
+# Also set up matplotlib fallback
 try:
-    import pandas as pd
-    print("✅ Pandas available")
+    import matplotlib
+    matplotlib.use('Agg')
+    import matplotlib.pyplot as plt
+    print("✅ Matplotlib also available")
 except ImportError:
-    print("❌ Pandas not available")
+    print("❌ Matplotlib not available")
 
-print("Environment setup complete!")
+print("🎉 Python environment ready!")
                 `);
                 
                 pyodideReady = true;
                 updateStatus('✅ Pyodide + Plotly ready!', 'green');
-                debugLog('Full initialization complete');
                 
                 // Show output area
                 const outputDiv = document.getElementById('pyodide-output');
@@ -240,34 +198,31 @@ print("Environment setup complete!")
                 
                 const outputText = document.getElementById('output-text');
                 if (outputText) {
-                    outputText.textContent = 'Pyodide ready with Plotly support!\\n\\nTry the examples below or write your own code.';
+                    outputText.textContent = 'Pyodide ready with Plotly support! Try the examples.';
                 }
                 
             } 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 is not ready. Please wait for green status.';
+                return 'Pyodide not ready. Please wait for green status.';
             }
             
             if (!code || code.trim() === '') {
-                return 'Error: No code provided.';
+                return 'No code provided.';
             }
             
             try {
-                updateStatus('▶️ Executing Python...', 'blue');
-                debugLog('Executing: ' + code.substring(0, 50) + '...');
+                updateStatus('▶️ Executing...', 'blue');
                 
                 // Clear previous plots
-                pyodide.runPython('clear_plot_data()');
+                const plotContainer = document.getElementById('plot-container');
+                if (plotContainer) plotContainer.innerHTML = '';
                 
                 // Capture stdout
                 pyodide.runPython(`
@@ -286,383 +241,53 @@ sys.stdout = old_stdout
 captured_output.getvalue()
                 `);
                 
-                // Get plot data
-                let matplotlibData = pyodide.runPython('get_matplotlib_data()');
-                let plotlyData = pyodide.runPython('get_plotly_data()');
-                
-                debugLog('Execution completed');
-                
-                // Display results
+                // Display text output
                 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 (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');
+                    outputText.textContent = textOutput || 'Code executed successfully';
                 }
                 
+                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('❌ Execution failed', 'red');
+                updateStatus('❌ Error', 'red');
                 return 'Error: ' + error.toString();
             }
         }
         
-        // 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));
-                }
+        // 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);
             }
-            
-            updateStatus('❌ Initialization failed after ' + maxRetries + ' attempts', 'red');
         }
         
-        // 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
+        // Start when ready
         if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', waitForCDNs);
+            document.addEventListener('DOMContentLoaded', waitForReady);
         } else {
-            waitForCDNs();
+            waitForReady();
         }
         
         // 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>
-    """
-    
-    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
-    )
+    <script src="https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js" async></script>