Update app.py

app.py

@@ -8,25 +8,55 @@ import gradio as gr
 def create_pyodide_interface():
     """Create a Gradio interface that uses Pyodide for client-side Python execution"""
     
-    # Custom HTML/JS that loads and uses Pyodide
+    # Enhanced HTML/JS with better error handling and status updates
     pyodide_html = """
-    <div id="pyodide-container">
-        <div id="pyodide-status">Loading Pyodide...</div>
-        <div id="pyodide-output" style="display:none;">
-            <pre id="output-text"></pre>
-            <div id="plot-container"></div>
+    <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="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>
+            <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>
         let pyodide = null;
-        let plotCounter = 0;
+        let pyodideReady = false;
+        let initializationStarted = false;
+        
+        function updateStatus(message, color = 'black') {
+            const statusDiv = document.getElementById('pyodide-status');
+            statusDiv.innerHTML = message;
+            statusDiv.style.color = color;
+            console.log('Pyodide Status:', message);
+        }
         
         async function initPyodide() {
+            if (initializationStarted) return;
+            initializationStarted = true;
+            
             try {
-                pyodide = await loadPyodide();
-                await pyodide.loadPackage(["numpy", "matplotlib", "pandas"]);
+                updateStatus('🔄 Loading Pyodide core...', 'blue');
+                
+                // Load Pyodide with error handling
+                pyodide = await loadPyodide({
+                    indexURL: "https://cdn.jsdelivr.net/pyodide/v0.24.1/full/"
+                });
+                
+                updateStatus('📦 Loading Python packages (numpy, matplotlib, pandas)...', 'blue');
+                
+                // Load packages one by one with progress
+                await pyodide.loadPackage("numpy");
+                updateStatus('📦 numpy loaded, loading matplotlib...', 'blue');
+                
+                await pyodide.loadPackage("matplotlib");
+                updateStatus('📦 matplotlib loaded, loading pandas...', 'blue');
+                
+                await pyodide.loadPackage("pandas");
+                updateStatus('⚙️ Setting up matplotlib backend...', 'blue');
                 
                 // Set up matplotlib backend for web
                 pyodide.runPython(`
@@ -39,35 +69,55 @@ def create_pyodide_interface():
                     import base64
                     
                     def show_plot():
-                        buffer = io.BytesIO()
-                        plt.savefig(buffer, format='png', bbox_inches='tight', dpi=100)
-                        buffer.seek(0)
-                        plot_data = buffer.getvalue()
-                        buffer.close()
-                        plt.close()
-                        return base64.b64encode(plot_data).decode()
+                        try:
+                            buffer = io.BytesIO()
+                            plt.savefig(buffer, format='png', bbox_inches='tight', dpi=100)
+                            buffer.seek(0)
+                            plot_data = buffer.getvalue()
+                            buffer.close()
+                            plt.close()
+                            return base64.b64encode(plot_data).decode()
+                        except Exception as e:
+                            return None
                     
                     # Override plt.show() to capture plots
                     original_show = plt.show
                     def custom_show(*args, **kwargs):
                         return show_plot()
                     plt.show = custom_show
+                    
+                    print("Pyodide Python environment ready!")
                 `);
                 
-                document.getElementById('pyodide-status').textContent = 'Pyodide ready!';
-                document.getElementById('pyodide-status').style.color = 'green';
+                pyodideReady = true;
+                updateStatus('✅ Pyodide ready! You can now execute Python code.', 'green');
+                
+                // Show a test message
+                document.getElementById('pyodide-output').style.display = 'block';
+                document.getElementById('output-text').textContent = 'Pyodide initialization complete! Ready to execute Python code.';
+                
             } catch (error) {
-                document.getElementById('pyodide-status').textContent = 'Error loading Pyodide: ' + error;
-                document.getElementById('pyodide-status').style.color = 'red';
+                console.error('Pyodide initialization error:', error);
+                updateStatus('❌ Failed to initialize Pyodide: ' + error.toString(), 'red');
+                pyodideReady = false;
             }
         }
         
         async function executePyodideCode(code) {
+            console.log('Execute called, pyodideReady:', pyodideReady);
+            
+            if (!pyodideReady) {
+                updateStatus('⏳ Pyodide is still initializing. Please wait...', 'orange');
+                return "Pyodide is still loading. Please wait for the green 'ready' status above.";
+            }
+            
             if (!pyodide) {
-                return "Pyodide not ready yet. Please wait...";
+                return "Error: Pyodide not available.";
             }
             
             try {
+                updateStatus('▶️ Executing Python code...', 'blue');
+                
                 // Capture stdout
                 pyodide.runPython(`
                     import sys
@@ -95,7 +145,7 @@ def create_pyodide_interface():
                             None
                     `);
                 } catch (e) {
-                    // No plot generated
+                    console.log('No plot generated or plot error:', e);
                 }
                 
                 // Display results
@@ -110,38 +160,55 @@ def create_pyodide_interface():
                 
                 // Display plot if generated
                 if (plotData) {
-                    plotContainer.innerHTML = `<img src="data:image/png;base64,${plotData}" style="max-width: 100%; height: auto;" alt="Generated Plot">`;
-                    outputText.textContent += '\n\n📊 Plot generated successfully!';
+                    plotContainer.innerHTML = `<img src="data:image/png;base64,${plotData}" style="max-width: 100%; height: auto; border: 1px solid #ddd;" alt="Generated Plot">`;
+                    outputText.textContent += '\\n\\n📊 Plot generated successfully!';
+                    updateStatus('✅ Code executed with plot generated!', 'green');
                 } else {
                     plotContainer.innerHTML = '';
+                    updateStatus('✅ Code executed successfully!', 'green');
                 }
                 
-                return output + (plotData ? '\n📊 Plot displayed below' : '');
+                return output + (plotData ? '\\n📊 Plot displayed above' : '');
                 
             } 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();
             }
         }
         
-        // Initialize Pyodide when page loads
-        initPyodide();
+        // Auto-retry initialization if it fails
+        async function safeInitPyodide() {
+            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);
+            }
+        }
+        
+        // Initialize when page loads
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', safeInitPyodide);
+        } else {
+            safeInitPyodide();
+        }
         
         // Make function globally available
         window.executePyodideCode = executePyodideCode;
+        window.checkPyodideStatus = () => pyodideReady;
     </script>
     """
     
     return pyodide_html
 
-def python_executor_fallback(code):
-    """Fallback Python executor for server-side processing"""
-    return "Pyodide is client-side only. Use the interface above to execute Python code in your browser."
-
 # Create the Gradio interface
 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 Pyodide to fully initialize before executing code (watch the status above).**")
     
     # Pyodide interface
     pyodide_interface = gr.HTML(create_pyodide_interface())
@@ -149,39 +216,35 @@ with gr.Blocks(title="LibreChat Pyodide Code Interpreter") as demo:
     with gr.Row():
         with gr.Column():
             code_input = gr.Textbox(
-                placeholder="""# Try this example:
-import matplotlib.pyplot as plt
-import numpy as np
-
-x = np.linspace(0, 10, 100)
-y = np.sin(x)
-
-plt.figure(figsize=(10, 6))
-plt.plot(x, y, 'b-', linewidth=2)
-plt.title('Sine Wave - Generated with Pyodide!')
-plt.xlabel('X values')
-plt.ylabel('Y values')
-plt.grid(True, alpha=0.3)
-plt.show()
+                value="""# Simple test - try this first
+print("Hello from browser-based Python!")
+print("2 + 2 =", 2 + 2)
 
-print("Plot created with client-side Python!")""",
+# Then try this matplotlib example:
+# import matplotlib.pyplot as plt
+# import numpy as np
+# x = np.linspace(0, 10, 50)
+# plt.plot(x, np.sin(x))
+# plt.title('Sine Wave')
+# plt.show()""",
                 lines=15,
                 label="Python Code (executes in your browser)"
             )
             
             execute_btn = gr.Button("Execute with Pyodide", variant="primary")
+            check_status_btn = gr.Button("Check Pyodide Status", variant="secondary")
         
         with gr.Column():
-            gr.Markdown("### Results will appear above in the Pyodide container")
+            gr.Markdown("### Execution Status")
             status_display = gr.Textbox(
-                label="Execution Status",
+                label="Last Execution Result",
                 interactive=False,
                 lines=3
             )
     
     # JavaScript execution
     execute_btn.click(
-        fn=None,  # No Python function needed
+        fn=None,
         inputs=[code_input],
         outputs=[status_display],
         js="""
@@ -189,57 +252,27 @@ print("Plot created with client-side Python!")""",
             if (window.executePyodideCode) {
                 return window.executePyodideCode(code);
             } else {
-                return "Pyodide not ready yet. Please wait for initialization.";
+                return "Pyodide functions not available. Check browser console for errors.";
             }
         }
         """
     )
     
-    # Examples
-    gr.Markdown("## Examples")
-    
-    gr.Code("""
-# Data Analysis Example
-import pandas as pd
-import numpy as np
-
-# Create sample data
-data = {
-    'Name': ['Alice', 'Bob', 'Charlie', 'Diana'],
-    'Age': [25, 30, 35, 28],
-    'Score': [85, 92, 78, 96]
-}
-
-df = pd.DataFrame(data)
-print("Sample DataFrame:")
-print(df)
-print(f"\\nAverage Score: {df['Score'].mean():.1f}")
-""", language="python", label="Data Analysis with Pandas")
-    
-    gr.Code("""
-# Visualization Example
-import matplotlib.pyplot as plt
-import numpy as np
-
-# Generate data
-categories = ['A', 'B', 'C', 'D', 'E']
-values = np.random.randint(10, 50, 5)
-
-# Create bar chart
-plt.figure(figsize=(10, 6))
-bars = plt.bar(categories, values, color=['red', 'blue', 'green', 'orange', 'purple'])
-plt.title('Random Bar Chart - Pyodide Demo')
-plt.xlabel('Categories')
-plt.ylabel('Values')
-
-# Add value labels on bars
-for bar, value in zip(bars, values):
-    plt.text(bar.get_x() + bar.get_width()/2, bar.get_height() + 1, 
-             str(value), ha='center', va='bottom')
-
-plt.show()
-print(f"Generated chart with values: {values}")
-""", language="python", label="Matplotlib Visualization")
+    # Status check button
+    check_status_btn.click(
+        fn=None,
+        inputs=[],
+        outputs=[status_display],
+        js="""
+        function() {
+            if (window.checkPyodideStatus) {
+                return window.checkPyodideStatus() ? "✅ Pyodide is ready!" : "⏳ Pyodide is still loading...";
+            } else {
+                return "❌ Pyodide not available.";
+            }
+        }
+        """
+    )
 
 if __name__ == "__main__":
     demo.launch(