Update app.py

app.py

@@ -41,24 +41,16 @@ def create_pyodide_interface():
             try {
                 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");
+                await pyodide.loadPackage(["numpy", "matplotlib", "pandas"]);
                 updateStatus('⚙️ Setting up matplotlib backend...', 'blue');
                 
-                // Set up matplotlib backend for web
+                // Set up matplotlib backend for web - IMPROVED VERSION
                 pyodide.runPython(`
                     import matplotlib
                     matplotlib.use('AGG')
@@ -68,22 +60,40 @@ def create_pyodide_interface():
                     import io
                     import base64
                     
-                    def show_plot():
+                    # Global variable to store plot data
+                    _current_plot_data = None
+                    
+                    def capture_plot():
+                        global _current_plot_data
                         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()
+                            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')  # Close all figures
+                                return _current_plot_data
+                            else:
+                                _current_plot_data = None
+                                return None
                         except Exception as e:
+                            print(f"Plot capture error: {e}")
+                            _current_plot_data = None
                             return None
                     
-                    # Override plt.show() to capture plots
+                    def get_plot_data():
+                        return _current_plot_data
+                    
+                    def clear_plot_data():
+                        global _current_plot_data
+                        _current_plot_data = None
+                    
+                    # Override plt.show() to capture plots automatically
                     original_show = plt.show
                     def custom_show(*args, **kwargs):
-                        return show_plot()
+                        return capture_plot()
                     plt.show = custom_show
                     
                     print("Pyodide Python environment ready!")
@@ -92,7 +102,6 @@ def create_pyodide_interface():
                 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.';
                 
@@ -118,6 +127,9 @@ def create_pyodide_interface():
             try {
                 updateStatus('▶️ Executing Python code...', 'blue');
                 
+                // Clear any previous plot data
+                pyodide.runPython('clear_plot_data()');
+                
                 // Capture stdout
                 pyodide.runPython(`
                     import sys
@@ -129,24 +141,18 @@ def create_pyodide_interface():
                 // Execute user code
                 let result = pyodide.runPython(code);
                 
-                // Get captured output
+                // Get captured output (this should NOT contain base64 data)
                 let stdout = pyodide.runPython(`
                     sys.stdout = old_stdout
                     captured_output.getvalue()
                 `);
                 
-                // Check for plots separately - don't mix with stdout
-                let plotData = null;
-                try {
-                    plotData = pyodide.runPython(`
-                        if plt.get_fignums():
-                            show_plot()
-                        else:
-                            None
-                    `);
-                } catch (e) {
-                    console.log('No plot generated or plot error:', e);
-                }
+                // Get plot data separately
+                let plotData = pyodide.runPython('get_plot_data()');
+                
+                console.log('Stdout length:', stdout ? stdout.length : 0);
+                console.log('Plot data length:', plotData ? plotData.length : 0);
+                console.log('Plot data preview:', plotData ? plotData.substring(0, 50) + '...' : 'None');
                 
                 // Display results
                 let outputDiv = document.getElementById('pyodide-output');
@@ -155,29 +161,34 @@ def create_pyodide_interface():
                 
                 outputDiv.style.display = 'block';
                 
-                // Clean text output - exclude any base64 data that might have leaked
-                let cleanOutput = stdout || (result !== undefined ? String(result) : '');
-                // Filter out any base64 image data that might have accidentally been printed
-                cleanOutput = cleanOutput.replace(/iVBORw0KGgoAAAANSUhEUgAA[A-Za-z0-9+/=]+/g, '[Image data filtered]');
-                
-                outputText.textContent = cleanOutput || 'Code executed successfully (no output)';
+                // Display clean text output
+                let textOutput = stdout || (result !== undefined ? String(result) : '');
+                outputText.textContent = textOutput || 'Code executed successfully (no output)';
                 
                 // Display plot if generated
-                if (plotData && plotData.length > 100) { // Valid base64 should be long
-                    plotContainer.innerHTML = `<img src="data:image/png;base64,${plotData}" style="max-width: 100%; height: auto; border: 1px solid #ddd;" alt="Generated Plot">`;
+                if (plotData && plotData.length > 100) {
+                    console.log('Displaying plot...');
+                    plotContainer.innerHTML = `
+                        <div style="margin: 10px 0;">
+                            <h5>📊 Generated Plot:</h5>
+                            <img src="data:image/png;base64,${plotData}" 
+                                 style="max-width: 100%; height: auto; border: 1px solid #ddd; border-radius: 3px;" 
+                                 alt="Generated Plot">
+                        </div>
+                    `;
                     
-                    // Add plot success message to text (but not the raw base64)
-                    if (cleanOutput.trim()) {
+                    if (textOutput.trim()) {
                         outputText.textContent += '\\n\\n📊 Plot generated and displayed below!';
                     } else {
                         outputText.textContent = '📊 Plot generated and displayed below!';
                     }
                     updateStatus('✅ Code executed with plot generated!', 'green');
-                    return 'Code executed successfully with plot generated';
+                    return 'Code executed successfully with plot';
                 } else {
+                    console.log('No plot data detected');
                     plotContainer.innerHTML = '';
                     updateStatus('✅ Code executed successfully!', 'green');
-                    return cleanOutput || 'Code executed successfully';
+                    return textOutput || 'Code executed successfully';
                 }
                 
             } catch (error) {
@@ -206,7 +217,7 @@ def create_pyodide_interface():
             safeInitPyodide();
         }
         
-        // Make function globally available
+        // Make functions globally available
         window.executePyodideCode = executePyodideCode;
         window.checkPyodideStatus = () => pyodideReady;
     </script>