Update app.py

app.py

@@ -1,7 +1,6 @@
 #!/usr/bin/env python3
 """
-LibreChat Pyodide Code Interpreter - Client-Side Python Execution
-Enhanced version with better error handling and debugging
+LibreChat Pyodide Code Interpreter - Fixed JavaScript Syntax
 """
 
 import gradio as gr
@@ -9,7 +8,7 @@ import gradio as gr
 def create_pyodide_interface():
     """Create a Gradio interface that uses Pyodide for client-side Python execution"""
     
-    # Enhanced HTML/JS with comprehensive error handling and debugging
+    # Fixed HTML/JS with proper string escaping
     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;">
@@ -26,43 +25,21 @@ def create_pyodide_interface():
         </div>
     </div>
     
-    <script src="https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js" 
-            onerror="handleCDNError()" 
-            onload="console.log('Pyodide CDN loaded successfully')"></script>
-    
     <script>
+        // Global variables
         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') {
+        function updateStatus(message, color) {
+            color = color || 'black';
             const statusDiv = document.getElementById('pyodide-status');
-            statusDiv.innerHTML = message;
-            statusDiv.style.color = color;
+            if (statusDiv) {
+                statusDiv.innerHTML = message;
+                statusDiv.style.color = color;
+            }
             console.log('Pyodide Status:', message);
-            debugLog(`Status: ${message}`);
         }
         
         function debugLog(message) {
@@ -70,460 +47,301 @@ def create_pyodide_interface():
             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');
+            if (debugDiv && debugText) {
+                debugDiv.style.display = 'block';
+                debugText.innerHTML += '<br>' + new Date().toLocaleTimeString() + ': ' + message;
             }
-            debugLog('✓ Promises supported');
-            
-            debugLog('Browser compatibility check passed');
         }
         
         async function initPyodide() {
             if (initializationStarted) {
-                debugLog('Initialization already started, skipping');
+                debugLog('Initialization already started');
                 return;
             }
             initializationStarted = true;
             
             try {
-                // Browser compatibility check
-                await testBrowserCompatibility();
-                
                 // Check if loadPyodide is available
                 if (typeof loadPyodide === 'undefined') {
-                    throw new Error('loadPyodide function not available - CDN loading failed');
+                    throw new Error('loadPyodide function not available');
                 }
-                debugLog('loadPyodide function is available');
                 
-                updateStatus('🔄 Initializing Pyodide core...', 'blue');
+                updateStatus('🔄 Loading Pyodide core...', 'blue');
+                debugLog('Starting Pyodide initialization...');
                 
                 pyodide = await loadPyodide({
-                    indexURL: "https://cdn.jsdelivr.net/pyodide/v0.25.0/full/",
-                    fullStdLib: false  // Faster loading
+                    indexURL: "https://cdn.jsdelivr.net/pyodide/v0.25.0/full/"
                 });
                 
-                debugLog('Pyodide core initialized successfully');
-                updateStatus('📦 Loading Python packages...', 'blue');
+                debugLog('Pyodide core loaded');
+                updateStatus('📦 Loading packages...', 'blue');
                 
-                // Load packages with individual error handling
-                const packages = ['numpy', 'matplotlib', 'pandas'];
-                for (const pkg of packages) {
+                // Load packages with error handling
+                try {
+                    await pyodide.loadPackage(['numpy', 'matplotlib', 'pandas']);
+                    debugLog('All packages loaded successfully');
+                } catch (pkgError) {
+                    debugLog('Package loading error: ' + pkgError.message);
+                    // Try minimal 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
+                        await pyodide.loadPackage(['numpy']);
+                        debugLog('Loaded numpy only');
+                    } catch (minError) {
+                        debugLog('Even numpy failed: ' + minError.message);
                     }
                 }
                 
-                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}`);
+                updateStatus('🔧 Setting up environment...', 'blue');
                 
-                // Set up matplotlib and plotting infrastructure
+                // Setup Python environment with proper escaping
                 pyodide.runPython(`
-                    # 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)
-                                buffer.seek(0)
-                                plot_data = buffer.getvalue()
-                                buffer.close()
-                                _current_plot_data = base64.b64encode(plot_data).decode()
-                                plt.close('all')
-                                return _current_plot_data
-                            return None
-                        except Exception as e:
-                            print(f"Matplotlib capture error: {e}")
-                            return None
-                    
-                    # 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 clear_plot_data():
-                        global _current_plot_data
-                        _current_plot_data = None
-                    
-                    def get_available_modules():
-                        return available_modules
-                    
-                    print(f"Environment ready! Available modules: {available_modules}")
+import sys
+print("Python " + sys.version)
+
+# Global plot data storage
+_current_plot_data = None
+
+def capture_matplotlib():
+    global _current_plot_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()
+            _current_plot_data = base64.b64encode(plot_data).decode()
+            plt.close('all')
+            return _current_plot_data
+        return None
+    except Exception as e:
+        print("Plot capture error: " + str(e))
+        return None
+
+def get_plot_data():
+    return _current_plot_data
+
+def clear_plot_data():
+    global _current_plot_data
+    _current_plot_data = None
+
+# Try to set up matplotlib
+try:
+    import matplotlib
+    matplotlib.use('Agg')
+    import matplotlib.pyplot as plt
+    
+    # Override show function
+    original_show = plt.show
+    def custom_show(*args, **kwargs):
+        return capture_matplotlib()
+    plt.show = custom_show
+    
+    print("Matplotlib configured successfully")
+except ImportError:
+    print("Matplotlib not available")
+
+print("Python environment ready!")
                 `);
                 
                 pyodideReady = true;
-                const availableModules = pyodide.runPython('get_available_modules()');
-                updateStatus(`✅ Pyodide ready! Available: ${availableModules}`, 'green');
-                debugLog(`Initialization complete. Available modules: ${availableModules}`);
+                updateStatus('✅ Pyodide ready!', 'green');
+                debugLog('Initialization complete');
                 
-                document.getElementById('pyodide-output').style.display = 'block';
-                document.getElementById('output-text').textContent = `Pyodide ready!\nAvailable modules: ${availableModules}\n\nTry some Python code!`;
+                // Show output area
+                const outputDiv = document.getElementById('pyodide-output');
+                if (outputDiv) {
+                    outputDiv.style.display = 'block';
+                }
+                const outputText = document.getElementById('output-text');
+                if (outputText) {
+                    outputText.textContent = 'Pyodide ready! You can now execute Python code.';
+                }
                 
             } catch (error) {
-                console.error('Detailed Pyodide error:', error);
-                debugLog(`Initialization error: ${error.message}`);
-                debugLog(`Error stack: ${error.stack}`);
-                updateStatus(`❌ Failed: ${error.message}`, 'red');
+                console.error('Pyodide initialization error:', error);
+                debugLog('Init error: ' + error.message);
+                updateStatus('❌ Failed: ' + error.message, 'red');
                 pyodideReady = false;
             }
         }
         
         async function executePyodideCode(code) {
-            debugLog(`Execution requested. Ready status: ${pyodideReady}`);
+            debugLog('Execute function called');
             
             if (!pyodideReady) {
-                const message = 'Pyodide is not ready yet. Please wait for initialization to complete.';
-                updateStatus('⏳ Not ready - please wait...', 'orange');
-                return message;
+                updateStatus('⏳ Not ready yet...', 'orange');
+                return 'Pyodide is not ready. Please wait for green status.';
             }
             
             if (!pyodide) {
-                return "Error: Pyodide not available.";
+                return 'Error: Pyodide not available.';
             }
             
             if (!code || code.trim() === '') {
-                return "Error: No code provided.";
+                return 'Error: No code provided.';
             }
             
             try {
-                updateStatus('▶️ Executing Python code...', 'blue');
-                debugLog(`Executing code: ${code.substring(0, 100)}...`);
+                updateStatus('▶️ Executing...', 'blue');
+                debugLog('Executing code: ' + code.substring(0, 50) + '...');
                 
-                // Clear any previous plot data
+                // Clear previous plots
                 pyodide.runPython('clear_plot_data()');
                 
                 // Capture stdout
                 pyodide.runPython(`
-                    import sys
-                    from io import StringIO
-                    old_stdout = sys.stdout
-                    sys.stdout = captured_output = StringIO()
+import sys
+from io import StringIO
+old_stdout = sys.stdout
+sys.stdout = captured_output = StringIO()
                 `);
                 
                 // Execute user code
                 let result = pyodide.runPython(code);
-                debugLog(`Code execution completed. Result type: ${typeof result}`);
                 
-                // Restore stdout and get captured output
+                // Get captured output
                 let stdout = pyodide.runPython(`
-                    sys.stdout = old_stdout
-                    captured_output.getvalue()
+sys.stdout = old_stdout
+captured_output.getvalue()
                 `);
                 
-                debugLog(`Stdout captured. Length: ${stdout ? stdout.length : 0}`);
-                
                 // Get plot data
-                let matplotlibData = pyodide.runPython('get_matplotlib_data()');
-                debugLog(`Matplotlib data: ${matplotlibData ? 'Available' : 'None'}`);
+                let plotData = pyodide.runPython('get_plot_data()');
                 
-                // Display results
-                let outputDiv = document.getElementById('pyodide-output');
-                let outputText = document.getElementById('output-text');
-                let plotContainer = document.getElementById('plot-container');
+                debugLog('Execution completed');
                 
-                outputDiv.style.display = 'block';
-                
-                // 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 results
+                const outputText = document.getElementById('output-text');
+                const plotContainer = document.getElementById('plot-container');
                 
-                // Display 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>
-                    `;
-                    debugLog('Matplotlib plot displayed');
+                if (outputText) {
+                    let textOutput = stdout || '';
+                    if (result !== undefined && result !== null && result !== '') {
+                        if (textOutput) textOutput += '\\n';
+                        textOutput += 'Return: ' + result;
+                    }
+                    outputText.textContent = textOutput || 'Code executed (no output)';
                 }
                 
-                plotContainer.innerHTML = plotHtml;
-                
-                if (plotHtml) {
-                    updateStatus('✅ Code executed with plot generated!', 'green');
+                // Handle plots
+                if (plotContainer && plotData && plotData.length > 100) {
+                    plotContainer.innerHTML = '<div style="margin: 10px 0;"><h5>📊 Plot:</h5><img src="data:image/png;base64,' + plotData + '" style="max-width: 100%; height: auto; border: 1px solid #ddd;" alt="Plot"></div>';
+                    updateStatus('✅ Executed with plot!', 'green');
+                    debugLog('Plot generated and displayed');
                 } else {
-                    updateStatus('✅ Code executed successfully!', 'green');
+                    if (plotContainer) plotContainer.innerHTML = '';
+                    updateStatus('✅ Executed successfully!', 'green');
                 }
                 
-                debugLog('Execution completed successfully');
-                return textOutput || 'Code executed successfully';
+                return stdout || 'Code executed successfully';
                 
             } catch (error) {
-                console.error('Python execution error:', error);
-                debugLog(`Execution error: ${error.message}`);
+                console.error('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: ', '');
+                const outputText = document.getElementById('output-text');
+                if (outputText) {
+                    outputText.textContent = 'Error: ' + error.toString();
                 }
-                
-                document.getElementById('output-text').textContent = 'Error: ' + errorMessage;
-                updateStatus('❌ Execution error', 'red');
-                return 'Error: ' + errorMessage;
+                updateStatus('❌ Execution failed', 'red');
+                return 'Error: ' + error.toString();
             }
         }
         
-        // Auto-retry initialization with exponential backoff
-        async function safeInitPyodide(retryCount = 0) {
-            try {
-                await initPyodide();
-            } catch (error) {
-                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;
+        // Initialize when ready
+        function safeInit() {
+            setTimeout(function() {
+                if (typeof loadPyodide !== 'undefined') {
+                    debugLog('loadPyodide available, starting init');
+                    initPyodide();
                 } else {
-                    debugLog(`⚠ Primary CDN returned status: ${response.status}`);
-                    return false;
+                    debugLog('loadPyodide not available yet, retrying...');
+                    updateStatus('⏳ Waiting for CDN...', 'orange');
+                    safeInit();
                 }
-            } catch (error) {
-                debugLog(`⚠ CDN test failed: ${error.message}`);
-                return false;
-            }
+            }, 1000);
         }
         
-        // 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();
-        }
-        
-        // 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
+        // Start initialization
         if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', enhancedInit);
+            document.addEventListener('DOMContentLoaded', safeInit);
         } else {
-            enhancedInit();
+            safeInit();
         }
         
-        // Make functions globally available
+        // Global functions
         window.executePyodideCode = executePyodideCode;
-        window.checkPyodideStatus = checkPyodideStatus;
-        window.toggleDebugMode = toggleDebugMode;
-        window.retryInit = () => {
-            initializationStarted = false;
-            pyodideReady = false;
-            enhancedInit();
+        window.checkPyodideStatus = function() {
+            return pyodideReady;
         };
-        
-        // 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');
+        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="LibreChat Pyodide Code Interpreter", theme=gr.themes.Soft()) as demo:
+with gr.Blocks(title="LibreChat Pyodide Code Interpreter") 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 the green 'ready' status before executing code.**")
+    gr.Markdown("**Client-side Python execution** - Python runs in your browser!")
     
     # Pyodide interface
     pyodide_interface = gr.HTML(create_pyodide_interface())
     
     with gr.Row():
-        with gr.Column(scale=2):
+        with gr.Column():
             code_input = gr.Textbox(
-                value="""# Test 1: Basic Python
-print("Hello from browser Python!")
-print("Python is working:", 2 + 2 == 4)
+                value="""# Start with this simple test:
+print("Hello from Python!")
+print("2 + 2 =", 2 + 2)
+
+# Check what's available:
+import sys
+print("Python version:", sys.version_info[:2])
+
+try:
+    import numpy as np
+    print("✅ NumPy available")
+    print("Random number:", np.random.rand())
+except ImportError:
+    print("❌ NumPy not available")
 
-# Test 2: Try this after the first test works
-# import numpy as np
-# 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=20,
-                label="Python Code",
-                placeholder="Enter Python code here..."
+try:
+    import matplotlib.pyplot as plt
+    print("✅ Matplotlib available")
+except ImportError:
+    print("❌ Matplotlib not available")""",
+                lines=15,
+                label="Python Code"
             )
             
-            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(scale=1):
-            gr.Markdown("### 🔧 Control Panel")
+            execute_btn = gr.Button("🚀 Execute", variant="primary")
             
+        with gr.Column():
             status_display = gr.Textbox(
-                label="Execution Status",
+                label="Status",
                 interactive=False,
-                lines=4,
-                placeholder="Status will appear here..."
+                lines=3
             )
             
-            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
-    """)
+            check_btn = gr.Button("📊 Check Status")
+            debug_btn = gr.Button("🐛 Toggle Debug")
     
-    # JavaScript execution handlers
+    # Fixed JavaScript handlers with proper escaping
     execute_btn.click(
         fn=None,
         inputs=[code_input],
@@ -531,42 +349,35 @@ print("Python is working:", 2 + 2 == 4)
         js="""
         function(code) {
             console.log('Execute button clicked');
-            if (window.executePyodideCode) {
-                return window.executePyodideCode(code);
-            } else {
-                return "❌ Pyodide functions not available. Check debug info.";
-            }
-        }
-        """
-    )
-    
-    check_status_btn.click(
-        fn=None,
-        inputs=[],
-        outputs=[status_display],
-        js="""
-        function() {
-            if (window.checkPyodideStatus) {
-                const status = window.checkPyodideStatus();
-                return `Ready: ${status.ready}\\nStarted: ${status.started}\\nAvailable: ${status.available}`;
-            } else {
-                return "❌ Status check not available.";
+            try {
+                if (window.executePyodideCode) {
+                    return window.executePyodideCode(code);
+                } else {
+                    return 'executePyodideCode function not available';
+                }
+            } catch (error) {
+                console.error('JS execution error:', error);
+                return 'JavaScript error: ' + error.message;
             }
         }
         """
     )
     
-    retry_btn.click(
+    check_btn.click(
         fn=None,
         inputs=[],
         outputs=[status_display],
         js="""
         function() {
-            if (window.retryInit) {
-                window.retryInit();
-                return "🔄 Retrying initialization...";
-            } else {
-                return "❌ Retry function not available.";
+            try {
+                if (window.checkPyodideStatus) {
+                    const ready = window.checkPyodideStatus();
+                    return ready ? '✅ Pyodide is ready!' : '⏳ Pyodide still loading...';
+                } else {
+                    return '❌ Status function not available';
+                }
+            } catch (error) {
+                return 'Status check error: ' + error.message;
             }
         }
         """
@@ -578,31 +389,23 @@ print("Python is working:", 2 + 2 == 4)
         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.";
+            try {
+                if (window.toggleDebugMode) {
+                    const debugOn = window.toggleDebugMode();
+                    return debugOn ? '🐛 Debug ON' : '🐛 Debug OFF';
+                } else {
+                    return '❌ Debug toggle not available';
+                }
+            } catch (error) {
+                return 'Debug toggle error: ' + error.message;
             }
         }
         """
     )
-    
-    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,
-        debug=True,
-        show_error=True
+        share=False
     )