Update app.py

app.py

@@ -1,90 +1,72 @@
 #!/usr/bin/env python3
 """
-LibreChat Pyodide Code Interpreter - Working Plotly Integration
+Fixed Plotly + Pyodide Integration - No Syntax Errors
 """
 
 import gradio as gr
 
 def create_pyodide_interface():
-    """Create a Gradio interface with working Plotly support"""
+    """Create a working Pyodide + Plotly interface with proper string escaping"""
     
-    pyodide_html = """
+    # Use proper string escaping to avoid syntax errors
+    pyodide_html = '''
     <div id="pyodide-container" style="border: 1px solid #ddd; padding: 15px; border-radius: 5px; margin: 10px 0;">
-        <div id="pyodide-status" style="font-weight: bold; padding: 10px; background: #f0f0f0; border-radius: 3px;">
-            🔄 Loading Pyodide with Plotly...
+        <div id="status" style="font-weight: bold; padding: 10px; background: #f0f0f0; border-radius: 3px;">
+            🔄 Initializing Pyodide + Plotly...
         </div>
-        <div id="pyodide-output" style="display:none; margin-top: 10px;">
-            <h4>Execution Results:</h4>
-            <pre id="output-text" style="background: #f8f8f8; padding: 10px; border-radius: 3px; max-height: 200px; overflow-y: auto; white-space: pre-wrap;"></pre>
-            <div id="plot-container" style="margin-top: 15px;"></div>
+        <div id="output" style="display:none; margin-top: 10px;">
+            <h4>Results:</h4>
+            <pre id="text-output" style="background: #f8f8f8; padding: 10px; border-radius: 3px; max-height: 200px; overflow-y: auto;"></pre>
+            <div id="plots" style="margin-top: 15px;"></div>
         </div>
     </div>
     
-    <!-- Load Plotly.js -->
-    <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js"></script>
     
     <script>
         let pyodide = null;
-        let pyodideReady = false;
-        let plotCounter = 0;
+        let ready = false;
+        let plotId = 0;
         
-        function updateStatus(message, color = 'black') {
-            const statusDiv = document.getElementById('pyodide-status');
-            if (statusDiv) {
-                statusDiv.innerHTML = message;
-                statusDiv.style.color = color;
+        function updateStatus(msg, color = 'black') {
+            const statusEl = document.getElementById('status');
+            if (statusEl) {
+                statusEl.innerHTML = msg;
+                statusEl.style.color = color;
             }
-            console.log('Status:', message);
+            console.log('Status:', msg);
         }
         
-        // Custom Plotly renderer for Pyodide
-        window.renderPlotlyFromPython = function(plotData, plotLayout, plotConfig) {
+        // Function to render Plotly from Python
+        window.renderPlot = function(plotData, plotLayout) {
             try {
-                plotCounter++;
-                const plotId = 'pyodide-plot-' + plotCounter;
-                const plotContainer = document.getElementById('plot-container');
+                plotId++;
+                const containerId = 'plot-' + plotId;
+                const plotsDiv = document.getElementById('plots');
                 
-                if (!plotContainer) {
-                    console.error('Plot container not found');
-                    return false;
-                }
+                if (!plotsDiv) return false;
                 
-                // Create new plot div
+                // Create plot container
                 const plotDiv = document.createElement('div');
-                plotDiv.id = plotId;
-                plotDiv.style.width = '100%';
-                plotDiv.style.height = '500px';
-                plotDiv.style.margin = '10px 0';
-                plotDiv.style.border = '1px solid #ddd';
-                plotDiv.style.borderRadius = '5px';
-                
-                // Add title
-                const title = document.createElement('h5');
-                title.textContent = '📈 Interactive Plotly Chart #' + plotCounter;
-                title.style.margin = '10px 0 5px 0';
-                
-                plotContainer.appendChild(title);
-                plotContainer.appendChild(plotDiv);
+                plotDiv.innerHTML = `
+                    <h5>📈 Plot ${plotId}</h5>
+                    <div id="${containerId}" style="width: 100%; height: 500px; border: 1px solid #ccc; margin: 10px 0;"></div>
+                `;
+                plotsDiv.appendChild(plotDiv);
                 
-                // Parse data if it's a string
-                if (typeof plotData === 'string') {
-                    plotData = JSON.parse(plotData);
-                }
-                if (typeof plotLayout === 'string') {
-                    plotLayout = JSON.parse(plotLayout);
-                }
-                if (typeof plotConfig === 'string') {
-                    plotConfig = JSON.parse(plotConfig);
-                }
+                // Parse JSON if needed
+                if (typeof plotData === 'string') plotData = JSON.parse(plotData);
+                if (typeof plotLayout === 'string') plotLayout = JSON.parse(plotLayout);
                 
-                // Create the plot
-                Plotly.newPlot(plotId, plotData, plotLayout, plotConfig || {responsive: true});
+                // Render with Plotly
+                Plotly.newPlot(containerId, plotData, plotLayout, {responsive: true});
                 
-                console.log('Plotly chart rendered successfully:', plotId);
+                console.log('Plot rendered:', containerId);
                 return true;
                 
             } catch (error) {
-                console.error('Plotly rendering error:', error);
+                console.error('Plot render error:', error);
                 return false;
             }
         };
@@ -92,25 +74,19 @@ def create_pyodide_interface():
         async function initPyodide() {
             try {
                 if (typeof loadPyodide === 'undefined') {
-                    throw new Error('Pyodide CDN not loaded');
+                    throw new Error('Pyodide CDN failed to load');
                 }
                 if (typeof Plotly === 'undefined') {
-                    throw new Error('Plotly CDN not loaded');
+                    throw new Error('Plotly CDN failed to load');
                 }
                 
-                updateStatus('🔄 Loading Pyodide...', 'blue');
-                
-                pyodide = await loadPyodide({
-                    indexURL: "https://cdn.jsdelivr.net/pyodide/v0.25.0/full/"
-                });
+                updateStatus('🔄 Loading Pyodide core...', 'blue');
+                pyodide = await loadPyodide();
                 
                 updateStatus('📦 Installing packages...', 'blue');
+                await pyodide.loadPackage(['numpy', 'pandas', 'micropip']);
                 
-                // Install packages
-                await pyodide.loadPackage(['numpy', 'pandas']);
-                
-                // Install plotly via micropip
-                await pyodide.loadPackage(['micropip']);
+                updateStatus('📈 Installing Plotly...', 'blue');
                 await pyodide.runPythonAsync(`
                     import micropip
                     await micropip.install('plotly')
@@ -118,118 +94,82 @@ def create_pyodide_interface():
                 
                 updateStatus('🔧 Setting up Plotly integration...', 'blue');
                 
-                // Setup Python environment with proper Plotly integration
+                // Setup Python environment with PROPER string escaping
                 pyodide.runPython(`
-import sys
 import json
-from js import renderPlotlyFromPython
+from js import renderPlot
 
-print("Setting up Plotly integration...")
+# Global plot counter
+plot_count = 0
 
-# Global storage
-_plots_created = 0
-
-def show_plotly_figure(fig):
-    """Custom show function that renders plots in the browser"""
-    global _plots_created
+def show_plot(fig):
+    global plot_count
     try:
-        # Convert figure to JSON
-        fig_json = fig.to_json()
-        fig_dict = json.loads(fig_json)
+        # Convert figure to dict
+        fig_dict = fig.to_dict()
         
-        # Extract components
-        data = json.dumps(fig_dict.get('data', []))
-        layout = json.dumps(fig_dict.get('layout', {}))
-        config = json.dumps({'responsive': True, 'displayModeBar': True})
+        # Extract data and layout
+        data = fig_dict.get('data', [])
+        layout = fig_dict.get('layout', {})
         
-        # Call JavaScript renderer
-        success = renderPlotlyFromPython(data, layout, config)
+        # Call JavaScript render function
+        success = renderPlot(json.dumps(data), json.dumps(layout))
         
         if success:
-            _plots_created += 1
-            print(f"✅ Plot #{_plots_created} rendered successfully!")
+            plot_count += 1
+            print(f"Plot {plot_count} displayed successfully!")
             return True
         else:
-            print("❌ Plot rendering failed")
+            print("Plot rendering failed")
             return False
             
     except Exception as e:
-        print(f"❌ Plot error: {e}")
+        print(f"Plot error: {e}")
         return False
 
-# Patch Plotly's show methods
+# Patch Plotly
 try:
     import plotly.graph_objects as go
     import plotly.express as px
     
-    # Override the show method for graph_objects
+    # Replace show method
     original_show = go.Figure.show
-    def custom_show(self, *args, **kwargs):
-        return show_plotly_figure(self)
-    go.Figure.show = custom_show
-    
-    print("✅ Plotly graph_objects patched")
+    go.Figure.show = lambda self, *args, **kwargs: show_plot(self)
     
-    # Test basic functionality
-    print("✅ Plotly integration ready!")
-    print("Use fig.show() to display interactive plots")
+    print("Plotly patched successfully!")
     
 except ImportError as e:
-    print(f"❌ Plotly import failed: {e}")
-
-# Also set up matplotlib fallback
-try:
-    import matplotlib
-    matplotlib.use('Agg')
-    import matplotlib.pyplot as plt
-    print("✅ Matplotlib also available")
-except ImportError:
-    print("❌ Matplotlib not available")
+    print(f"Plotly import failed: {e}")
 
-print("🎉 Python environment ready!")
+print("Environment setup complete!")
                 `);
                 
-                pyodideReady = true;
-                updateStatus('✅ Pyodide + Plotly ready!', 'green');
-                
-                // Show output area
-                const outputDiv = document.getElementById('pyodide-output');
-                if (outputDiv) outputDiv.style.display = 'block';
+                ready = true;
+                updateStatus('✅ Plotly + Pyodide ready!', 'green');
                 
-                const outputText = document.getElementById('output-text');
-                if (outputText) {
-                    outputText.textContent = 'Pyodide ready with Plotly support! Try the examples.';
-                }
+                document.getElementById('output').style.display = 'block';
+                document.getElementById('text-output').textContent = 'Ready! Try executing some Plotly code.';
                 
             } catch (error) {
-                console.error('Initialization error:', error);
+                console.error('Initialization failed:', error);
                 updateStatus('❌ Failed: ' + error.message, 'red');
-                pyodideReady = false;
             }
         }
         
-        async function executePyodideCode(code) {
-            if (!pyodideReady) {
-                return 'Pyodide not ready. Please wait for green status.';
-            }
-            
-            if (!code || code.trim() === '') {
-                return 'No code provided.';
+        async function executeUserCode(code) {
+            if (!ready) {
+                return 'System not ready. Please wait for green status.';
             }
             
             try {
-                updateStatus('▶️ Executing...', 'blue');
-                
-                // Clear previous plots
-                const plotContainer = document.getElementById('plot-container');
-                if (plotContainer) plotContainer.innerHTML = '';
+                updateStatus('▶️ Running...', 'blue');
                 
                 // Capture stdout
                 pyodide.runPython(`
 import sys
 from io import StringIO
 old_stdout = sys.stdout
-sys.stdout = captured_output = StringIO()
+sys.stdout = output_capture = StringIO()
                 `);
                 
                 // Execute user code
@@ -238,56 +178,160 @@ sys.stdout = captured_output = StringIO()
                 // Get captured output
                 let stdout = pyodide.runPython(`
 sys.stdout = old_stdout
-captured_output.getvalue()
+output_capture.getvalue()
                 `);
                 
-                // Display text output
-                const outputText = document.getElementById('output-text');
-                if (outputText) {
-                    let textOutput = stdout || '';
-                    if (result !== undefined && result !== null && result !== '') {
-                        if (textOutput) textOutput += '\\n';
-                        textOutput += 'Return: ' + result;
-                    }
-                    outputText.textContent = textOutput || 'Code executed successfully';
-                }
+                // Display output
+                document.getElementById('text-output').textContent = stdout || 'Code executed successfully';
+                updateStatus('✅ Complete!', 'green');
                 
-                updateStatus('✅ Executed!', 'green');
-                return stdout || 'Code executed successfully';
+                return stdout || 'Success';
                 
             } catch (error) {
-                console.error('Execution error:', error);
-                
-                const outputText = document.getElementById('output-text');
-                if (outputText) {
-                    outputText.textContent = 'Error: ' + error.toString();
-                }
-                updateStatus('❌ Error', 'red');
-                return 'Error: ' + error.toString();
+                const errorMsg = 'Error: ' + error.toString();
+                document.getElementById('text-output').textContent = errorMsg;
+                updateStatus('❌ Error occurred', 'red');
+                return errorMsg;
             }
         }
         
-        // Wait for both CDNs
-        function waitForReady() {
+        // Initialize when both CDNs are loaded
+        function checkAndInit() {
             if (typeof loadPyodide !== 'undefined' && typeof Plotly !== 'undefined') {
-                console.log('Both CDNs loaded, initializing...');
+                console.log('Both CDNs loaded, starting initialization');
                 initPyodide();
             } else {
-                console.log('Waiting for CDNs... Pyodide:', typeof loadPyodide !== 'undefined', 'Plotly:', typeof Plotly !== 'undefined');
-                setTimeout(waitForReady, 1000);
+                console.log('Waiting for CDNs...');
+                setTimeout(checkAndInit, 1000);
             }
         }
         
-        // Start when ready
+        // Start when DOM is ready
         if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', waitForReady);
+            document.addEventListener('DOMContentLoaded', checkAndInit);
         } else {
-            waitForReady();
+            checkAndInit();
         }
         
-        // Global functions
-        window.executePyodideCode = executePyodideCode;
-        window.checkPyodideStatus = () => pyodideReady;
+        // Make functions globally available
+        window.executeUserCode = executeUserCode;
+        window.checkReady = () => ready;
         
     </script>
-    <script src="https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js" async></script>
+    '''
+    
+    return pyodide_html
+
+# Create Gradio app
+with gr.Blocks(title="Fixed Plotly Pyodide") as demo:
+    gr.Markdown("# 🐍📈 Fixed Plotly + Pyodide")
+    gr.Markdown("**No more syntax errors!** Interactive Plotly charts in browser.")
+    
+    # Pyodide interface
+    pyodide_interface = gr.HTML(create_pyodide_interface())
+    
+    with gr.Row():
+        with gr.Column(scale=2):
+            code_input = gr.Textbox(
+                value="""# Working Plotly Example
+import plotly.graph_objects as go
+import numpy as np
+
+print("Creating Plotly chart...")
+
+# Simple data
+x = np.array([1, 2, 3, 4, 5])
+y = x ** 2
+
+# Create figure
+fig = go.Figure()
+fig.add_trace(go.Scatter(
+    x=x, 
+    y=y, 
+    mode='lines+markers',
+    name='x²',
+    line=dict(color='blue', width=3),
+    marker=dict(size=8, color='red')
+))
+
+fig.update_layout(
+    title='Interactive Quadratic Function',
+    xaxis_title='X values',
+    yaxis_title='Y values',
+    template='plotly_white'
+)
+
+fig.show()
+print("Chart should appear above! ✅")""",
+                lines=18,
+                label="Python Code"
+            )
+            
+            execute_btn = gr.Button("🚀 Execute Code", variant="primary", size="lg")
+            
+        with gr.Column(scale=1):
+            status_display = gr.Textbox(
+                label="Execution Status",
+                interactive=False,
+                lines=3
+            )
+            
+            check_btn = gr.Button("📊 Check Status")
+            
+            gr.Markdown("""
+            ### 📋 Quick Tests:
+            1. **Wait for green status**
+            2. **Run the default example**
+            3. **Look for interactive chart**
+            4. **Check browser console** if issues
+            """)
+    
+    # Button handlers with simple JS
+    execute_btn.click(
+        fn=None,
+        inputs=[code_input],
+        outputs=[status_display],
+        js="""
+        function(code) {
+            try {
+                if (window.executeUserCode) {
+                    return window.executeUserCode(code);
+                } else {
+                    return 'Execute function not available';
+                }
+            } catch (error) {
+                return 'JS Error: ' + error.message;
+            }
+        }
+        """
+    )
+    
+    check_btn.click(
+        fn=None,
+        inputs=[],
+        outputs=[status_display],
+        js="""
+        function() {
+            try {
+                if (window.checkReady) {
+                    return window.checkReady() ? '✅ System Ready' : '⏳ Still Loading';
+                } else {
+                    return '❌ Check function not available';
+                }
+            } catch (error) {
+                return 'Status Error: ' + error.message;
+            }
+        }
+        """
+    )
+
+if __name__ == "__main__":
+    print("🚀 Starting Fixed Plotly + Pyodide Server...")
+    print("📍 Access at: http://localhost:7860")
+    
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=False,
+        debug=True
+    )