Update app.py

app.py

@@ -1,18 +1,17 @@
 #!/usr/bin/env python3
 """
-LibreChat Pyodide Code Interpreter - Fixed JavaScript Syntax
+LibreChat Pyodide Code Interpreter - With Plotly Support
 """
 
 import gradio as gr
 
 def create_pyodide_interface():
-    """Create a Gradio interface that uses Pyodide for client-side Python execution"""
+    """Create a Gradio interface with Pyodide + Plotly support"""
     
-    # 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;">
-            🔄 Loading Pyodide... This may take 10-30 seconds on first load.
+            🔄 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>
@@ -25,6 +24,9 @@ def create_pyodide_interface():
         </div>
     </div>
     
+    <!-- Load Plotly.js first -->
+    <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
+    
     <script>
         // Global variables
         let pyodide = null;
@@ -61,48 +63,63 @@ def create_pyodide_interface():
             initializationStarted = true;
             
             try {
-                // Check if loadPyodide is available
+                // Check prerequisites
                 if (typeof loadPyodide === 'undefined') {
-                    throw new Error('loadPyodide function not available');
+                    throw new Error('Pyodide CDN not loaded');
+                }
+                if (typeof Plotly === 'undefined') {
+                    throw new Error('Plotly CDN not loaded');
                 }
                 
                 updateStatus('🔄 Loading Pyodide core...', 'blue');
-                debugLog('Starting Pyodide initialization...');
+                debugLog('Starting Pyodide with Plotly support...');
                 
                 pyodide = await loadPyodide({
                     indexURL: "https://cdn.jsdelivr.net/pyodide/v0.25.0/full/"
                 });
                 
                 debugLog('Pyodide core loaded');
-                updateStatus('📦 Loading packages...', 'blue');
+                updateStatus('📦 Installing Python packages...', 'blue');
                 
-                // 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
+                // Install plotly and other packages
+                const packages = ['numpy', 'pandas', 'matplotlib'];
+                
+                for (const pkg of packages) {
                     try {
-                        await pyodide.loadPackage(['numpy']);
-                        debugLog('Loaded numpy only');
-                    } catch (minError) {
-                        debugLog('Even numpy failed: ' + minError.message);
+                        debugLog(`Installing ${pkg}...`);
+                        await pyodide.loadPackage(pkg);
+                        debugLog(`✓ ${pkg} installed`);
+                    } catch (error) {
+                        debugLog(`⚠ ${pkg} failed: ${error.message}`);
                     }
                 }
                 
-                updateStatus('🔧 Setting up environment...', 'blue');
+                // Install plotly via pip in Pyodide
+                updateStatus('📦 Installing Plotly via pip...', 'blue');
+                try {
+                    await pyodide.loadPackage(['micropip']);
+                    await pyodide.runPythonAsync(`
+                        import micropip
+                        await micropip.install('plotly')
+                    `);
+                    debugLog('✓ Plotly installed via micropip');
+                } catch (error) {
+                    debugLog('⚠ Plotly installation failed: ' + error.message);
+                }
+                
+                updateStatus('🔧 Setting up plotting environment...', 'blue');
                 
-                // Setup Python environment with proper escaping
+                // Setup Python environment with Plotly support
                 pyodide.runPython(`
 import sys
 print("Python " + sys.version)
 
-# Global plot data storage
-_current_plot_data = None
+# Global storage for plots
+_matplotlib_data = None
+_plotly_data = None
 
 def capture_matplotlib():
-    global _current_plot_data
+    global _matplotlib_data
     try:
         import matplotlib.pyplot as plt
         import io
@@ -114,56 +131,102 @@ def capture_matplotlib():
             buffer.seek(0)
             plot_data = buffer.getvalue()
             buffer.close()
-            _current_plot_data = base64.b64encode(plot_data).decode()
+            _matplotlib_data = base64.b64encode(plot_data).decode()
             plt.close('all')
-            return _current_plot_data
+            return _matplotlib_data
+        return None
+    except Exception as e:
+        print("Matplotlib capture error: " + str(e))
         return None
+
+def capture_plotly(fig):
+    global _plotly_data
+    try:
+        # Convert plotly figure to HTML
+        import plotly.offline as pyo
+        _plotly_data = pyo.plot(fig, output_type='div', include_plotlyjs=False)
+        return _plotly_data
     except Exception as e:
-        print("Plot capture error: " + str(e))
+        print("Plotly capture error: " + str(e))
         return None
 
-def get_plot_data():
-    return _current_plot_data
+def get_matplotlib_data():
+    return _matplotlib_data
+
+def get_plotly_data():
+    return _plotly_data
 
 def clear_plot_data():
-    global _current_plot_data
-    _current_plot_data = None
+    global _matplotlib_data, _plotly_data
+    _matplotlib_data = None
+    _plotly_data = None
 
-# Try to set up matplotlib
+# Setup matplotlib if available
 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")
+    print("✅ Matplotlib configured")
 except ImportError:
-    print("Matplotlib not available")
+    print("❌ Matplotlib not available")
+
+# Setup plotly if available
+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)
+    
+    # Monkey patch plotly's show
+    original_plotly_show = go.Figure.show
+    def custom_plotly_show(self, *args, **kwargs):
+        return capture_plotly(self)
+    go.Figure.show = custom_plotly_show
+    
+    print("✅ Plotly configured")
+    print("Available: plotly.graph_objects as 'go', plotly.express as 'px'")
+except ImportError as e:
+    print("❌ Plotly not available: " + str(e))
+
+# Test basic functionality
+try:
+    import numpy as np
+    print("✅ NumPy available")
+except ImportError:
+    print("❌ NumPy not available")
 
-print("Python environment ready!")
+try:
+    import pandas as pd
+    print("✅ Pandas available")
+except ImportError:
+    print("❌ Pandas not available")
+
+print("Environment setup complete!")
                 `);
                 
                 pyodideReady = true;
-                updateStatus('✅ Pyodide ready!', 'green');
-                debugLog('Initialization complete');
+                updateStatus('✅ Pyodide + Plotly ready!', 'green');
+                debugLog('Full initialization complete');
                 
                 // Show output area
                 const outputDiv = document.getElementById('pyodide-output');
-                if (outputDiv) {
-                    outputDiv.style.display = 'block';
-                }
+                if (outputDiv) outputDiv.style.display = 'block';
+                
                 const outputText = document.getElementById('output-text');
                 if (outputText) {
-                    outputText.textContent = 'Pyodide ready! You can now execute Python code.';
+                    outputText.textContent = 'Pyodide ready with Plotly support!\\n\\nTry the examples below or write your own code.';
                 }
                 
             } catch (error) {
-                console.error('Pyodide initialization error:', error);
+                console.error('Initialization error:', error);
                 debugLog('Init error: ' + error.message);
                 updateStatus('❌ Failed: ' + error.message, 'red');
                 pyodideReady = false;
@@ -174,21 +237,16 @@ print("Python environment ready!")
             debugLog('Execute function called');
             
             if (!pyodideReady) {
-                updateStatus('⏳ Not ready yet...', 'orange');
                 return 'Pyodide is not ready. Please wait for green status.';
             }
             
-            if (!pyodide) {
-                return 'Error: Pyodide not available.';
-            }
-            
             if (!code || code.trim() === '') {
                 return 'Error: No code provided.';
             }
             
             try {
-                updateStatus('▶️ Executing...', 'blue');
-                debugLog('Executing code: ' + code.substring(0, 50) + '...');
+                updateStatus('▶️ Executing Python...', 'blue');
+                debugLog('Executing: ' + code.substring(0, 50) + '...');
                 
                 // Clear previous plots
                 pyodide.runPython('clear_plot_data()');
@@ -211,7 +269,8 @@ captured_output.getvalue()
                 `);
                 
                 // Get plot data
-                let plotData = pyodide.runPython('get_plot_data()');
+                let matplotlibData = pyodide.runPython('get_matplotlib_data()');
+                let plotlyData = pyodide.runPython('get_plotly_data()');
                 
                 debugLog('Execution completed');
                 
@@ -219,22 +278,48 @@ captured_output.getvalue()
                 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 (no output)';
+                    outputText.textContent = textOutput || 'Code executed successfully (no text output)';
                 }
                 
                 // 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');
+                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) {
+                    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 {
-                    if (plotContainer) plotContainer.innerHTML = '';
                     updateStatus('✅ Executed successfully!', 'green');
                 }
                 
@@ -242,7 +327,7 @@ captured_output.getvalue()
                 
             } catch (error) {
                 console.error('Execution error:', error);
-                debugLog('Execution error: ' + error.message);
+                debugLog('Error: ' + error.message);
                 
                 const outputText = document.getElementById('output-text');
                 if (outputText) {
@@ -253,38 +338,66 @@ captured_output.getvalue()
             }
         }
         
-        // Initialize when ready
-        function safeInit() {
-            setTimeout(function() {
-                if (typeof loadPyodide !== 'undefined') {
-                    debugLog('loadPyodide available, starting init');
-                    initPyodide();
-                } else {
-                    debugLog('loadPyodide not available yet, retrying...');
-                    updateStatus('⏳ Waiting for CDN...', 'orange');
+        // Safe initialization with retry
+        async function safeInit() {
+            let retries = 0;
+            const maxRetries = 3;
+            
+            while (retries < maxRetries) {
+                try {
+                    if (typeof loadPyodide !== 'undefined' && typeof Plotly !== 'undefined') {
+                        await initPyodide();
+                        return;
+                    }
+                } catch (error) {
+                    debugLog(`Init attempt ${retries + 1} failed: ${error.message}`);
+                }
+                
+                retries++;
+                if (retries < maxRetries) {
+                    debugLog(`Retrying in ${retries * 2} seconds...`);
+                    await new Promise(resolve => setTimeout(resolve, retries * 2000));
+                }
+            }
+            
+            updateStatus('❌ Initialization failed after ' + maxRetries + ' attempts', 'red');
+        }
+        
+        // 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 initialization
+        // Start when DOM is ready
         if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', safeInit);
+            document.addEventListener('DOMContentLoaded', waitForCDNs);
         } else {
-            safeInit();
+            waitForCDNs();
         }
         
         // Global functions
         window.executePyodideCode = executePyodideCode;
-        window.checkPyodideStatus = function() {
-            return pyodideReady;
-        };
+        window.checkPyodideStatus = () => pyodideReady;
         window.toggleDebugMode = function() {
             debugMode = !debugMode;
             const debugDiv = document.getElementById('debug-info');
-            if (debugDiv) {
-                debugDiv.style.display = debugMode ? 'block' : 'none';
-            }
+            if (debugDiv) debugDiv.style.display = debugMode ? 'block' : 'none';
             return debugMode;
         };
         
@@ -295,69 +408,179 @@ captured_output.getvalue()
     return pyodide_html
 
 # 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** - Python runs in your browser!")
+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():
+        with gr.Column(scale=2):
             code_input = gr.Textbox(
-                value="""# Start with this simple test:
-print("Hello from Python!")
-print("2 + 2 =", 2 + 2)
+                value="""# Plotly Example 1: Simple Line Chart
+import plotly.graph_objects as go
+import numpy as np
 
-# Check what's available:
-import sys
-print("Python version:", sys.version_info[:2])
+# Generate data
+x = np.linspace(0, 10, 100)
+y1 = np.sin(x)
+y2 = np.cos(x)
 
-try:
-    import numpy as np
-    print("✅ NumPy available")
-    print("Random number:", np.random.rand())
-except ImportError:
-    print("❌ NumPy not available")
+# 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')))
 
-try:
-    import matplotlib.pyplot as plt
-    print("✅ Matplotlib available")
-except ImportError:
-    print("❌ Matplotlib not available")""",
-                lines=15,
-                label="Python Code"
+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"
             )
             
-            execute_btn = gr.Button("🚀 Execute", variant="primary")
+            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")
             
-        with gr.Column():
             status_display = gr.Textbox(
                 label="Status",
                 interactive=False,
-                lines=3
+                lines=4
             )
             
-            check_btn = gr.Button("📊 Check Status")
-            debug_btn = gr.Button("🐛 Toggle Debug")
+            with gr.Row():
+                check_btn = gr.Button("📊 Status", size="sm")
+                debug_btn = gr.Button("🐛 Debug", size="sm")
     
-    # Fixed JavaScript handlers with proper escaping
+    # 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) {
-            console.log('Execute button clicked');
             try {
                 if (window.executePyodideCode) {
                     return window.executePyodideCode(code);
                 } else {
-                    return 'executePyodideCode function not available';
+                    return 'Execution function not available';
                 }
             } catch (error) {
-                console.error('JS execution error:', error);
-                return 'JavaScript error: ' + error.message;
+                return 'Error: ' + error.message;
             }
         }
         """
@@ -370,14 +593,10 @@ except ImportError:
         js="""
         function() {
             try {
-                if (window.checkPyodideStatus) {
-                    const ready = window.checkPyodideStatus();
-                    return ready ? '✅ Pyodide is ready!' : '⏳ Pyodide still loading...';
-                } else {
-                    return '❌ Status function not available';
-                }
+                const ready = window.checkPyodideStatus ? window.checkPyodideStatus() : false;
+                return ready ? '✅ Ready for Plotly!' : '⏳ Still loading...';
             } catch (error) {
-                return 'Status check error: ' + error.message;
+                return 'Status error: ' + error.message;
             }
         }
         """
@@ -391,19 +610,18 @@ except ImportError:
         function() {
             try {
                 if (window.toggleDebugMode) {
-                    const debugOn = window.toggleDebugMode();
-                    return debugOn ? '🐛 Debug ON' : '🐛 Debug OFF';
-                } else {
-                    return '❌ Debug toggle not available';
+                    return window.toggleDebugMode() ? '🐛 Debug ON' : '🐛 Debug OFF';
                 }
+                return 'Debug toggle unavailable';
             } catch (error) {
-                return 'Debug toggle error: ' + error.message;
+                return 'Debug error: ' + error.message;
             }
         }
         """
     )
 
 if __name__ == "__main__":
+    print("🚀 Starting Pyodide + Plotly Interpreter...")
     demo.launch(
         server_name="0.0.0.0",
         server_port=7860,