Update app.py

app.py

@@ -45,10 +45,10 @@ def create_pyodide_interface():
                     indexURL: "https://cdn.jsdelivr.net/pyodide/v0.24.1/full/"
                 });
                 
-                updateStatus('📦 Loading Python packages (numpy, matplotlib, pandas)...', 'blue');
+                updateStatus('📦 Loading Python packages (numpy, matplotlib, pandas, plotly)...', 'blue');
                 
-                await pyodide.loadPackage(["numpy", "matplotlib", "pandas"]);
-                updateStatus('⚙️ Setting up matplotlib backend...', 'blue');
+                await pyodide.loadPackage(["numpy", "matplotlib", "pandas", "plotly"]);
+                updateStatus('📦 All packages loaded, setting up backends...', 'blue');
                 
                 // Set up matplotlib backend for web - IMPROVED VERSION
                 pyodide.runPython(`
@@ -57,13 +57,18 @@ def create_pyodide_interface():
                     import matplotlib.pyplot as plt
                     import numpy as np
                     import pandas as pd
+                    import plotly.graph_objects as go
+                    import plotly.express as px
+                    import plotly
                     import io
                     import base64
+                    import json
                     
-                    # Global variable to store plot data
+                    # Global variables for plot data
                     _current_plot_data = None
+                    _current_plotly_data = None
                     
-                    def capture_plot():
+                    def capture_matplotlib():
                         global _current_plot_data
                         try:
                             if len(plt.get_fignums()) > 0:
@@ -73,30 +78,46 @@ def create_pyodide_interface():
                                 plot_data = buffer.getvalue()
                                 buffer.close()
                                 _current_plot_data = base64.b64encode(plot_data).decode()
-                                plt.close('all')  # Close all figures
+                                plt.close('all')
                                 return _current_plot_data
-                            else:
-                                _current_plot_data = None
-                                return None
+                            return None
                         except Exception as e:
-                            print(f"Plot capture error: {e}")
-                            _current_plot_data = None
+                            print(f"Matplotlib capture error: {e}")
                             return None
                     
-                    def get_plot_data():
-                        return _current_plot_data
-                    
-                    def clear_plot_data():
-                        global _current_plot_data
-                        _current_plot_data = None
+                    def capture_plotly(fig):
+                        global _current_plotly_data
+                        try:
+                            _current_plotly_data = fig.to_html(include_plotlyjs='cdn', div_id='plotly-div')
+                            return _current_plotly_data
+                        except Exception as e:
+                            print(f"Plotly capture error: {e}")
+                            return None
                     
-                    # Override plt.show() to capture plots automatically
+                    # Override functions
                     original_show = plt.show
                     def custom_show(*args, **kwargs):
-                        return capture_plot()
+                        return capture_matplotlib()
                     plt.show = custom_show
                     
-                    print("Pyodide Python environment ready!")
+                    # Override plotly show
+                    original_plotly_show = go.Figure.show
+                    def custom_plotly_show(self, *args, **kwargs):
+                        return capture_plotly(self)
+                    go.Figure.show = custom_plotly_show
+                    
+                    def get_matplotlib_data():
+                        return _current_plot_data
+                    
+                    def get_plotly_data():
+                        return _current_plotly_data
+                    
+                    def clear_plot_data():
+                        global _current_plot_data, _current_plotly_data
+                        _current_plot_data = None
+                        _current_plotly_data = None
+                    
+                    print("Pyodide ready with matplotlib AND plotly support!")
                 `);
                 
                 pyodideReady = true;
@@ -147,12 +168,15 @@ def create_pyodide_interface():
                     captured_output.getvalue()
                 `);
                 
-                // Get plot data separately
-                let plotData = pyodide.runPython('get_plot_data()');
+                // Get both types of plot data
+                let matplotlibData = pyodide.runPython('get_matplotlib_data()');
+                let plotlyData = pyodide.runPython('get_plotly_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');
+                console.log('Matplotlib data length:', matplotlibData ? matplotlibData.length : 0);
+                console.log('Plotly data length:', plotlyData ? plotlyData.length : 0);
+                console.log('Matplotlib data preview:', matplotlibData ? matplotlibData.substring(0, 50) + '...' : 'None');
+                console.log('Plotly data preview:', plotlyData ? plotlyData.substring(0, 50) + '...' : 'None');
                 
                 // Display results
                 let outputDiv = document.getElementById('pyodide-output');
@@ -161,36 +185,49 @@ def create_pyodide_interface():
                 
                 outputDiv.style.display = 'block';
                 
-                // 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) {
-                    console.log('Displaying plot...');
-                    plotContainer.innerHTML = `
+                // Display plots
+                let plotHtml = '';
+                
+                if (matplotlibData && matplotlibData.length > 100) {
+                    plotHtml += `
                         <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">
+                            <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) {
+                    plotHtml += `
+                        <div style="margin: 10px 0;">
+                            <h5>📊 Interactive Plotly Plot:</h5>
+                            <div style="border: 1px solid #ddd; border-radius: 3px;">
+                                ${plotlyData}
+                            </div>
+                        </div>
+                    `;
+                }
+                
+                plotContainer.innerHTML = plotHtml;
+                
+                if (plotHtml) {
                     if (textOutput.trim()) {
-                        outputText.textContent += '\\n\\n📊 Plot generated and displayed below!';
+                        outputText.textContent += '\\n\\n📊 Plot(s) generated and displayed below!';
                     } else {
-                        outputText.textContent = '📊 Plot generated and displayed below!';
+                        outputText.textContent = '📊 Plot(s) generated and displayed below!';
                     }
-                    updateStatus('✅ Code executed with plot generated!', 'green');
-                    return 'Code executed successfully with plot';
+                    updateStatus('✅ Code executed with plot(s) generated!', 'green');
                 } else {
-                    console.log('No plot data detected');
-                    plotContainer.innerHTML = '';
                     updateStatus('✅ Code executed successfully!', 'green');
-                    return textOutput || 'Code executed successfully';
                 }
                 
+                return textOutput || 'Code executed successfully';
+                
             } catch (error) {
                 console.error('Execution error:', error);
                 document.getElementById('output-text').textContent = 'Error: ' + error.toString();