Update app.py

app.py

@@ -1,6 +1,7 @@
 #!/usr/bin/env python3
 """
 LibreChat Pyodide Code Interpreter - Client-Side Python Execution
+Enhanced version with better error handling and debugging
 """
 
 import gradio as gr
@@ -8,68 +9,186 @@ import gradio as gr
 def create_pyodide_interface():
     """Create a Gradio interface that uses Pyodide for client-side Python execution"""
     
-    # Enhanced HTML/JS with better error handling and status updates
+    # Enhanced HTML/JS with comprehensive error handling and debugging
     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... This may take 10-30 seconds on first load.
         </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: 300px; overflow-y: auto;"></pre>
+            <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>
     
-    <script src="https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js"></script>
+    <script src="https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js" 
+            onerror="handleCDNError()" 
+            onload="console.log('Pyodide CDN loaded successfully')"></script>
+    
     <script>
         let pyodide = null;
         let pyodideReady = false;
         let initializationStarted = false;
+        let debugMode = true;
+        
+        function handleCDNError() {
+            updateStatus('❌ Failed to load Pyodide from CDN', 'red');
+            debugLog('CDN load failed - check network or try different browser');
+            tryFallbackCDN();
+        }
+        
+        function tryFallbackCDN() {
+            debugLog('Attempting fallback CDN...');
+            const fallbackScript = document.createElement('script');
+            fallbackScript.src = 'https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js';
+            fallbackScript.onload = () => {
+                debugLog('Fallback CDN loaded successfully');
+                safeInitPyodide();
+            };
+            fallbackScript.onerror = () => {
+                updateStatus('❌ All CDN sources failed - check internet connection', 'red');
+                debugLog('All CDN attempts failed');
+            };
+            document.head.appendChild(fallbackScript);
+        }
         
         function updateStatus(message, color = 'black') {
             const statusDiv = document.getElementById('pyodide-status');
             statusDiv.innerHTML = message;
             statusDiv.style.color = color;
             console.log('Pyodide Status:', message);
+            debugLog(`Status: ${message}`);
+        }
+        
+        function debugLog(message) {
+            if (!debugMode) return;
+            console.log('DEBUG:', message);
+            const debugDiv = document.getElementById('debug-info');
+            const debugText = document.getElementById('debug-text');
+            debugDiv.style.display = 'block';
+            debugText.innerHTML += '<br>' + new Date().toLocaleTimeString() + ': ' + message;
+        }
+        
+        async function testBrowserCompatibility() {
+            debugLog('Testing browser compatibility...');
+            
+            // Test WebAssembly support
+            if (typeof WebAssembly === 'undefined') {
+                throw new Error('WebAssembly not supported in this browser');
+            }
+            debugLog('✓ WebAssembly supported');
+            
+            // Test fetch API
+            if (typeof fetch === 'undefined') {
+                throw new Error('Fetch API not supported');
+            }
+            debugLog('✓ Fetch API supported');
+            
+            // Test Promise support
+            if (typeof Promise === 'undefined') {
+                throw new Error('Promises not supported');
+            }
+            debugLog('✓ Promises supported');
+            
+            debugLog('Browser compatibility check passed');
         }
         
         async function initPyodide() {
-            if (initializationStarted) return;
+            if (initializationStarted) {
+                debugLog('Initialization already started, skipping');
+                return;
+            }
             initializationStarted = true;
             
             try {
-                updateStatus('🔄 Loading Pyodide core...', 'blue');
+                // Browser compatibility check
+                await testBrowserCompatibility();
+                
+                // Check if loadPyodide is available
+                if (typeof loadPyodide === 'undefined') {
+                    throw new Error('loadPyodide function not available - CDN loading failed');
+                }
+                debugLog('loadPyodide function is available');
+                
+                updateStatus('🔄 Initializing Pyodide core...', 'blue');
                 
                 pyodide = await loadPyodide({
-                    indexURL: "https://cdn.jsdelivr.net/pyodide/v0.24.1/full/"
+                    indexURL: "https://cdn.jsdelivr.net/pyodide/v0.25.0/full/",
+                    fullStdLib: false  // Faster loading
                 });
                 
-                updateStatus('📦 Loading Python packages (numpy, matplotlib, pandas, bokeh)...', 'blue');
+                debugLog('Pyodide core initialized successfully');
+                updateStatus('📦 Loading Python packages...', 'blue');
                 
-                await pyodide.loadPackage(["numpy", "matplotlib", "pandas", "bokeh"]);
-                updateStatus('📦 All packages loaded, setting up backends...', 'blue');
+                // Load packages with individual error handling
+                const packages = ['numpy', 'matplotlib', 'pandas'];
+                for (const pkg of packages) {
+                    try {
+                        debugLog(`Loading ${pkg}...`);
+                        await pyodide.loadPackage(pkg);
+                        debugLog(`✓ ${pkg} loaded successfully`);
+                    } catch (error) {
+                        debugLog(`⚠ Failed to load ${pkg}: ${error.message}`);
+                        // Continue with other packages
+                    }
+                }
                 
-                // Update the Python setup:
+                updateStatus('🔧 Setting up Python environment...', 'blue');
+                
+                // Test basic Python execution first
+                debugLog('Testing basic Python execution...');
+                const testResult = pyodide.runPython(`
+                    import sys
+                    print(f"Python {sys.version}")
+                    "Basic Python test successful"
+                `);
+                debugLog(`Basic test result: ${testResult}`);
+                
+                // Set up matplotlib and plotting infrastructure
                 pyodide.runPython(`
-                    import matplotlib
-                    matplotlib.use('AGG')
-                    import matplotlib.pyplot as plt
-                    import numpy as np
-                    import pandas as pd
-                    from bokeh.plotting import figure, show, output_file
-                    from bokeh.models import HoverTool
-                    from bokeh.io import export_png
-                    import io
-                    import base64
-                    
                     # Global variables for plot data
                     _current_plot_data = None
                     _current_bokeh_html = None
                     
+                    # Check what's available
+                    available_modules = []
+                    
+                    try:
+                        import matplotlib
+                        matplotlib.use('Agg')  # Use Agg backend
+                        import matplotlib.pyplot as plt
+                        available_modules.append('matplotlib')
+                        print("✓ Matplotlib configured")
+                    except ImportError as e:
+                        print(f"⚠ Matplotlib not available: {e}")
+                    
+                    try:
+                        import numpy as np
+                        available_modules.append('numpy')
+                        print("✓ NumPy available")
+                    except ImportError as e:
+                        print(f"⚠ NumPy not available: {e}")
+                    
+                    try:
+                        import pandas as pd
+                        available_modules.append('pandas')
+                        print("✓ Pandas available")
+                    except ImportError as e:
+                        print(f"⚠ Pandas not available: {e}")
+                    
+                    import io
+                    import base64
+                    
                     def capture_matplotlib():
                         global _current_plot_data
                         try:
+                            if 'matplotlib' not in available_modules:
+                                return None
                             if len(plt.get_fignums()) > 0:
                                 buffer = io.BytesIO()
                                 plt.savefig(buffer, format='png', bbox_inches='tight', dpi=100)
@@ -84,68 +203,63 @@ def create_pyodide_interface():
                             print(f"Matplotlib capture error: {e}")
                             return None
                     
-                    def capture_bokeh(bokeh_fig):
-                        global _current_bokeh_html
-                        try:
-                            from bokeh.embed import file_html
-                            from bokeh.resources import CDN
-                            _current_bokeh_html = file_html(bokeh_fig, CDN, "Bokeh Plot")
-                            return _current_bokeh_html
-                        except Exception as e:
-                            print(f"Bokeh capture error: {e}")
-                            return None
-                    
-                    # Override functions
-                    original_show = plt.show
-                    def custom_show(*args, **kwargs):
-                        return capture_matplotlib()
-                    plt.show = custom_show
-                    
-                    # Custom bokeh show function
-                    def show_bokeh(fig):
-                        return capture_bokeh(fig)
+                    # Override plt.show if matplotlib is available
+                    if 'matplotlib' in available_modules:
+                        original_show = plt.show
+                        def custom_show(*args, **kwargs):
+                            return capture_matplotlib()
+                        plt.show = custom_show
                     
                     def get_matplotlib_data():
                         return _current_plot_data
                     
-                    def get_bokeh_data():
-                        return _current_bokeh_html
-                    
                     def clear_plot_data():
-                        global _current_plot_data, _current_bokeh_html
+                        global _current_plot_data
                         _current_plot_data = None
-                        _current_bokeh_html = None
                     
-                    print("Pyodide ready with matplotlib AND bokeh support!")
+                    def get_available_modules():
+                        return available_modules
+                    
+                    print(f"Environment ready! Available modules: {available_modules}")
                 `);
                 
                 pyodideReady = true;
-                updateStatus('✅ Pyodide ready! You can now execute Python code.', 'green');
+                const availableModules = pyodide.runPython('get_available_modules()');
+                updateStatus(`✅ Pyodide ready! Available: ${availableModules}`, 'green');
+                debugLog(`Initialization complete. Available modules: ${availableModules}`);
                 
                 document.getElementById('pyodide-output').style.display = 'block';
-                document.getElementById('output-text').textContent = 'Pyodide initialization complete! Ready to execute Python code.';
+                document.getElementById('output-text').textContent = `Pyodide ready!\nAvailable modules: ${availableModules}\n\nTry some Python code!`;
                 
             } catch (error) {
-                console.error('Pyodide initialization error:', error);
-                updateStatus('❌ Failed to initialize Pyodide: ' + error.toString(), 'red');
+                console.error('Detailed Pyodide error:', error);
+                debugLog(`Initialization error: ${error.message}`);
+                debugLog(`Error stack: ${error.stack}`);
+                updateStatus(`❌ Failed: ${error.message}`, 'red');
                 pyodideReady = false;
             }
         }
         
         async function executePyodideCode(code) {
-            console.log('Execute called, pyodideReady:', pyodideReady);
+            debugLog(`Execution requested. Ready status: ${pyodideReady}`);
             
             if (!pyodideReady) {
-                updateStatus('⏳ Pyodide is still initializing. Please wait...', 'orange');
-                return "Pyodide is still loading. Please wait for the green 'ready' status above.";
+                const message = 'Pyodide is not ready yet. Please wait for initialization to complete.';
+                updateStatus('⏳ Not ready - please wait...', 'orange');
+                return message;
             }
             
             if (!pyodide) {
                 return "Error: Pyodide not available.";
             }
             
+            if (!code || code.trim() === '') {
+                return "Error: No code provided.";
+            }
+            
             try {
                 updateStatus('▶️ Executing Python code...', 'blue');
+                debugLog(`Executing code: ${code.substring(0, 100)}...`);
                 
                 // Clear any previous plot data
                 pyodide.runPython('clear_plot_data()');
@@ -160,22 +274,19 @@ def create_pyodide_interface():
                 
                 // Execute user code
                 let result = pyodide.runPython(code);
+                debugLog(`Code execution completed. Result type: ${typeof result}`);
                 
-                // Get captured output (this should NOT contain base64 data)
+                // Restore stdout and get captured output
                 let stdout = pyodide.runPython(`
                     sys.stdout = old_stdout
                     captured_output.getvalue()
                 `);
                 
-                // Get both types of plot data
-                let matplotlibData = pyodide.runPython('get_matplotlib_data()');
-                let bokehData = pyodide.runPython('get_bokeh_data()');
+                debugLog(`Stdout captured. Length: ${stdout ? stdout.length : 0}`);
                 
-                console.log('Stdout length:', stdout ? stdout.length : 0);
-                console.log('Matplotlib data length:', matplotlibData ? matplotlibData.length : 0);
-                console.log('Bokeh data length:', bokehData ? bokehData.length : 0);
-                console.log('Matplotlib data preview:', matplotlibData ? matplotlibData.substring(0, 50) + '...' : 'None');
-                console.log('Bokeh data preview:', bokehData ? bokehData.substring(0, 50) + '...' : 'None');
+                // Get plot data
+                let matplotlibData = pyodide.runPython('get_matplotlib_data()');
+                debugLog(`Matplotlib data: ${matplotlibData ? 'Available' : 'None'}`);
                 
                 // Display results
                 let outputDiv = document.getElementById('pyodide-output');
@@ -184,12 +295,20 @@ def create_pyodide_interface():
                 
                 outputDiv.style.display = 'block';
                 
-                let textOutput = stdout || (result !== undefined ? String(result) : '');
+                // Prepare text output
+                let textOutput = '';
+                if (stdout && stdout.trim()) {
+                    textOutput += stdout;
+                }
+                if (result !== undefined && result !== null && result !== '') {
+                    if (textOutput) textOutput += '\n';
+                    textOutput += `Return value: ${result}`;
+                }
+                
                 outputText.textContent = textOutput || 'Code executed successfully (no output)';
                 
                 // Display plots
                 let plotHtml = '';
-                
                 if (matplotlibData && matplotlibData.length > 100) {
                     plotHtml += `
                         <div style="margin: 10px 0;">
@@ -199,123 +318,228 @@ def create_pyodide_interface():
                                  alt="Matplotlib Plot">
                         </div>
                     `;
-                }
-                
-                if (bokehData) {
-                    plotHtml += `
-                        <div style="margin: 10px 0;">
-                            <h5>📊 Interactive Bokeh Plot:</h5>
-                            <div style="border: 1px solid #ddd; border-radius: 3px;">
-                                ${bokehData}
-                            </div>
-                        </div>
-                    `;
+                    debugLog('Matplotlib plot displayed');
                 }
                 
                 plotContainer.innerHTML = plotHtml;
                 
                 if (plotHtml) {
-                    if (textOutput.trim()) {
-                        outputText.textContent += '\\n\\n📊 Plot(s) generated and displayed below!';
-                    } else {
-                        outputText.textContent = '📊 Plot(s) generated and displayed below!';
-                    }
-                    updateStatus('✅ Code executed with plot(s) generated!', 'green');
+                    updateStatus('✅ Code executed with plot generated!', 'green');
                 } else {
                     updateStatus('✅ Code executed successfully!', 'green');
                 }
                 
+                debugLog('Execution completed successfully');
                 return textOutput || 'Code executed successfully';
                 
             } catch (error) {
-                console.error('Execution error:', error);
-                document.getElementById('output-text').textContent = 'Error: ' + error.toString();
-                updateStatus('❌ Execution error: ' + error.toString(), 'red');
-                return 'Error: ' + error.toString();
+                console.error('Python execution error:', error);
+                debugLog(`Execution error: ${error.message}`);
+                
+                let errorMessage = error.toString();
+                // Make Python errors more readable
+                if (errorMessage.includes('PythonError')) {
+                    errorMessage = errorMessage.replace('PythonError: ', '');
+                }
+                
+                document.getElementById('output-text').textContent = 'Error: ' + errorMessage;
+                updateStatus('❌ Execution error', 'red');
+                return 'Error: ' + errorMessage;
             }
         }
         
-        // Auto-retry initialization if it fails
-        async function safeInitPyodide() {
+        // Auto-retry initialization with exponential backoff
+        async function safeInitPyodide(retryCount = 0) {
             try {
                 await initPyodide();
             } catch (error) {
-                console.error('Init failed, retrying in 3 seconds:', error);
-                updateStatus('🔄 Initialization failed, retrying in 3 seconds...', 'orange');
-                setTimeout(safeInitPyodide, 3000);
+                console.error(`Init attempt ${retryCount + 1} failed:`, error);
+                debugLog(`Initialization attempt ${retryCount + 1} failed: ${error.message}`);
+                
+                if (retryCount < 3) {
+                    const delay = Math.pow(2, retryCount) * 2000; // 2s, 4s, 8s delays
+                    updateStatus(`🔄 Retrying in ${delay/1000} seconds... (attempt ${retryCount + 1}/3)`, 'orange');
+                    setTimeout(() => {
+                        initializationStarted = false; // Reset flag for retry
+                        safeInitPyodide(retryCount + 1);
+                    }, delay);
+                } else {
+                    updateStatus('❌ Initialization failed after 3 attempts', 'red');
+                    debugLog('All initialization attempts exhausted');
+                }
+            }
+        }
+        
+        // Check CDN accessibility first
+        async function checkCDNAccess() {
+            try {
+                debugLog('Testing CDN accessibility...');
+                const response = await fetch('https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js', {method: 'HEAD'});
+                if (response.ok) {
+                    debugLog('✓ Primary CDN accessible');
+                    return true;
+                } else {
+                    debugLog(`⚠ Primary CDN returned status: ${response.status}`);
+                    return false;
+                }
+            } catch (error) {
+                debugLog(`⚠ CDN test failed: ${error.message}`);
+                return false;
+            }
+        }
+        
+        // Enhanced initialization with pre-checks
+        async function enhancedInit() {
+            debugLog('Starting enhanced initialization...');
+            
+            // Pre-flight checks
+            if (!await checkCDNAccess()) {
+                updateStatus('⚠️ CDN issues detected, but proceeding...', 'orange');
+            }
+            
+            // Wait a bit for CDN script to load if needed
+            let attempts = 0;
+            while (typeof loadPyodide === 'undefined' && attempts < 10) {
+                debugLog(`Waiting for loadPyodide... attempt ${attempts + 1}`);
+                await new Promise(resolve => setTimeout(resolve, 1000));
+                attempts++;
             }
+            
+            if (typeof loadPyodide === 'undefined') {
+                updateStatus('❌ loadPyodide never became available', 'red');
+                return;
+            }
+            
+            await safeInitPyodide();
         }
         
-        // Initialize when page loads
+        // Utility functions for external access
+        function checkPyodideStatus() {
+            return {
+                ready: pyodideReady,
+                started: initializationStarted,
+                available: typeof loadPyodide !== 'undefined'
+            };
+        }
+        
+        function toggleDebugMode() {
+            debugMode = !debugMode;
+            const debugDiv = document.getElementById('debug-info');
+            debugDiv.style.display = debugMode ? 'block' : 'none';
+            return debugMode;
+        }
+        
+        // Initialize when DOM is ready
         if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', safeInitPyodide);
+            document.addEventListener('DOMContentLoaded', enhancedInit);
         } else {
-            safeInitPyodide();
+            enhancedInit();
         }
         
         // Make functions globally available
         window.executePyodideCode = executePyodideCode;
-        window.checkPyodideStatus = () => pyodideReady;
+        window.checkPyodideStatus = checkPyodideStatus;
+        window.toggleDebugMode = toggleDebugMode;
+        window.retryInit = () => {
+            initializationStarted = false;
+            pyodideReady = false;
+            enhancedInit();
+        };
+        
+        // Global error handler
+        window.addEventListener('error', (event) => {
+            if (event.filename && event.filename.includes('pyodide')) {
+                debugLog(`Global error in Pyodide: ${event.message}`);
+                updateStatus('❌ Pyodide error detected', 'red');
+            }
+        });
+        
     </script>
     """
     
     return pyodide_html
 
 # Create the Gradio interface
-with gr.Blocks(title="LibreChat Pyodide Code Interpreter") as demo:
-    gr.Markdown("# LibreChat Pyodide Code Interpreter")
+with gr.Blocks(title="LibreChat Pyodide Code Interpreter", theme=gr.themes.Soft()) as demo:
+    gr.Markdown("# 🐍 LibreChat Pyodide Code Interpreter")
     gr.Markdown("**Client-side Python execution** using Pyodide - Python runs directly in your browser!")
-    gr.Markdown("⏳ **Please wait for Pyodide to fully initialize before executing code (watch the status above).**")
+    gr.Markdown("⏳ **Please wait for the green 'ready' status before executing code.**")
     
     # Pyodide interface
     pyodide_interface = gr.HTML(create_pyodide_interface())
     
     with gr.Row():
-        with gr.Column():
+        with gr.Column(scale=2):
             code_input = gr.Textbox(
-                value="""# Simple test - try this first
-print("Hello from browser-based Python!")
-print("2 + 2 =", 2 + 2)
+                value="""# Test 1: Basic Python
+print("Hello from browser Python!")
+print("Python is working:", 2 + 2 == 4)
 
-# Then try this matplotlib example:
-# import matplotlib.pyplot as plt
+# Test 2: Try this after the first test works
 # import numpy as np
-# x = np.linspace(0, 10, 50)
-# plt.plot(x, np.sin(x))
-# plt.title('Sine Wave')
+# import matplotlib.pyplot as plt
+# 
+# x = np.linspace(0, 10, 100)
+# y = np.sin(x)
+# 
+# plt.figure(figsize=(10, 6))
+# plt.plot(x, y, 'b-', linewidth=2, label='sin(x)')
+# plt.title('Sine Wave Demo')
+# plt.xlabel('x')
+# plt.ylabel('sin(x)')
+# plt.legend()
+# plt.grid(True, alpha=0.3)
 # plt.show()""",
-                lines=15,
-                label="Python Code (executes in your browser)"
+                lines=20,
+                label="Python Code",
+                placeholder="Enter Python code here..."
             )
             
-            execute_btn = gr.Button("Execute with Pyodide", variant="primary")
-            check_status_btn = gr.Button("Check Pyodide Status", variant="secondary")
+            with gr.Row():
+                execute_btn = gr.Button("🚀 Execute Python", variant="primary", size="lg")
+                check_status_btn = gr.Button("📊 Check Status", variant="secondary")
+                retry_btn = gr.Button("🔄 Retry Init", variant="secondary")
         
-        with gr.Column():
-            gr.Markdown("### Execution Status")
+        with gr.Column(scale=1):
+            gr.Markdown("### 🔧 Control Panel")
+            
             status_display = gr.Textbox(
-                label="Last Execution Result",
+                label="Execution Status",
                 interactive=False,
-                lines=3
+                lines=4,
+                placeholder="Status will appear here..."
             )
+            
+            with gr.Row():
+                debug_btn = gr.Button("🐛 Toggle Debug", size="sm")
+                clear_btn = gr.Button("🗑️ Clear Output", size="sm")
+    
+    gr.Markdown("""
+    ### 📋 Usage Tips:
+    - **Wait for green status** before executing code
+    - **Start simple** - test basic Python first, then try imports
+    - **Check debug info** if something goes wrong
+    - **Matplotlib plots** will display automatically when you call `plt.show()`
+    - **Large datasets** work well with pandas and numpy
+    """)
     
-    # JavaScript execution
+    # JavaScript execution handlers
     execute_btn.click(
         fn=None,
         inputs=[code_input],
         outputs=[status_display],
         js="""
         function(code) {
+            console.log('Execute button clicked');
             if (window.executePyodideCode) {
                 return window.executePyodideCode(code);
             } else {
-                return "Pyodide functions not available. Check browser console for errors.";
+                return "❌ Pyodide functions not available. Check debug info.";
             }
         }
         """
     )
     
-    # Status check button
     check_status_btn.click(
         fn=None,
         inputs=[],
@@ -323,17 +547,62 @@ print("2 + 2 =", 2 + 2)
         js="""
         function() {
             if (window.checkPyodideStatus) {
-                return window.checkPyodideStatus() ? "✅ Pyodide is ready!" : "⏳ Pyodide is still loading...";
+                const status = window.checkPyodideStatus();
+                return `Ready: ${status.ready}\\nStarted: ${status.started}\\nAvailable: ${status.available}`;
+            } else {
+                return "❌ Status check not available.";
+            }
+        }
+        """
+    )
+    
+    retry_btn.click(
+        fn=None,
+        inputs=[],
+        outputs=[status_display],
+        js="""
+        function() {
+            if (window.retryInit) {
+                window.retryInit();
+                return "🔄 Retrying initialization...";
             } else {
-                return "❌ Pyodide not available.";
+                return "❌ Retry function not available.";
             }
         }
         """
     )
+    
+    debug_btn.click(
+        fn=None,
+        inputs=[],
+        outputs=[status_display],
+        js="""
+        function() {
+            if (window.toggleDebugMode) {
+                const debugOn = window.toggleDebugMode();
+                return debugOn ? "🐛 Debug mode ON" : "���� Debug mode OFF";
+            } else {
+                return "❌ Debug toggle not available.";
+            }
+        }
+        """
+    )
+    
+    clear_btn.click(
+        fn=lambda: ("", ""),
+        inputs=[],
+        outputs=[status_display, code_input]
+    )
 
 if __name__ == "__main__":
+    print("🚀 Starting LibreChat Pyodide Code Interpreter...")
+    print("📍 Server will be available at: http://localhost:7860")
+    print("🔧 Debug mode enabled by default")
+    
     demo.launch(
         server_name="0.0.0.0",
         server_port=7860,
-        share=False
+        share=False,
+        debug=True,
+        show_error=True
     )