Update app.py

app.py

@@ -1,12 +1,12 @@
 #!/usr/bin/env python3
 """
-Targeted NumPy Fix for Plotly Graph Objects
+Simple, Reliable Plotly + Pyodide - Back to Basics
 """
 
 import gradio as gr
 
 def create_pyodide_interface():
-    """Interface with specific NumPy conversion fix"""
+    """Simple working interface without complex conversions"""
     
     pyodide_html = '''
     <div id="pyodide-container" style="border: 1px solid #ddd; padding: 15px; border-radius: 5px; margin: 10px 0;">
@@ -14,8 +14,8 @@ def create_pyodide_interface():
             🔄 Loading Pyodide + Plotly...
         </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; white-space: pre-wrap;"></pre>
+            <h4>Output:</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>
@@ -26,47 +26,38 @@ def create_pyodide_interface():
     <script>
         let pyodide = null;
         let ready = false;
-        let plotId = 0;
+        let plotCount = 0;
         
         function updateStatus(msg, color = 'black') {
-            const statusEl = document.getElementById('status');
-            if (statusEl) {
-                statusEl.innerHTML = msg;
-                statusEl.style.color = color;
-            }
+            document.getElementById('status').innerHTML = msg;
+            document.getElementById('status').style.color = color;
             console.log('Status:', msg);
         }
         
-        // Enhanced plot renderer with better NumPy handling
-        window.renderPlot = function(figureJson) {
+        // Simple plot renderer
+        window.createPlot = function(data, layout) {
             try {
-                plotId++;
-                const containerId = 'plot-' + plotId;
+                plotCount++;
+                const plotId = 'plot-' + plotCount;
                 const plotsDiv = document.getElementById('plots');
                 
-                if (!plotsDiv) return false;
-                
-                const figDict = JSON.parse(figureJson);
-                
-                // Debug what we received
-                console.log('Rendering plot with data:', figDict.data);
-                
-                const plotWrapper = document.createElement('div');
-                plotWrapper.innerHTML = `
-                    <div style="margin: 15px 0;">
-                        <h5>📈 Plot ${plotId}</h5>
-                        <div id="${containerId}" style="width: 100%; height: 500px; border: 1px solid #ccc; border-radius: 5px;"></div>
-                    </div>
+                const plotDiv = document.createElement('div');
+                plotDiv.innerHTML = `
+                    <h5>📈 Plot ${plotCount}</h5>
+                    <div id="${plotId}" style="width: 100%; height: 500px; border: 1px solid #ccc; margin: 10px 0;"></div>
                 `;
-                plotsDiv.appendChild(plotWrapper);
+                plotsDiv.appendChild(plotDiv);
                 
-                Plotly.newPlot(containerId, figDict.data, figDict.layout, {responsive: true});
+                // Parse if strings
+                if (typeof data === 'string') data = JSON.parse(data);
+                if (typeof layout === 'string') layout = JSON.parse(layout);
                 
-                console.log('Plot created successfully');
+                Plotly.newPlot(plotId, data, layout, {responsive: true});
+                console.log('Plot created:', plotId);
                 return true;
                 
             } catch (error) {
-                console.error('Plot rendering error:', error);
+                console.error('Plot error:', error);
                 return false;
             }
         };
@@ -85,298 +76,260 @@ def create_pyodide_interface():
                     await micropip.install('plotly')
                 `);
                 
-                updateStatus('🔧 Setting up NumPy conversion...', 'blue');
+                updateStatus('🔧 Setting up environment...', 'blue');
                 
+                // Simple Python setup - no complex conversions
                 pyodide.runPython(`
 import json
-from js import renderPlot
-import numpy as np
-
-def convert_numpy_data(data):
-    """Recursively convert NumPy arrays to lists"""
-    if isinstance(data, np.ndarray):
-        return data.tolist()
-    elif isinstance(data, dict):
-        return {key: convert_numpy_data(value) for key, value in data.items()}
-    elif isinstance(data, list):
-        return [convert_numpy_data(item) for item in data]
-    else:
-        return data
+from js import createPlot
 
-def show_plot_with_conversion(fig):
+def simple_show(fig):
     try:
-        print("Converting figure data...")
-        
-        # Get the raw figure dict
+        # Get the figure as dict
         fig_dict = fig.to_dict()
         
-        # Method 1: Try to convert the data traces directly
-        for i, trace in enumerate(fig_dict.get('data', [])):
-            print(f"Processing trace {i}...")
-            
-            # Check x data
-            if 'x' in trace:
-                original_x = trace['x']
-                if isinstance(original_x, dict) and 'bdata' in original_x:
-                    # This is a NumPy array encoded as binary data
-                    print(f"Found NumPy x data, converting...")
-                    # Get the actual data from the figure object
-                    actual_trace = fig.data[i]
-                    if hasattr(actual_trace, 'x') and hasattr(actual_trace.x, 'tolist'):
-                        trace['x'] = actual_trace.x.tolist()
-                        print(f"X converted: {trace['x']}")
-                    else:
-                        print("Could not convert x data")
-                
-            # Check y data
-            if 'y' in trace:
-                original_y = trace['y']
-                if isinstance(original_y, dict) and 'bdata' in original_y:
-                    print(f"Found NumPy y data, converting...")
-                    actual_trace = fig.data[i]
-                    if hasattr(actual_trace, 'y') and hasattr(actual_trace.y, 'tolist'):
-                        trace['y'] = actual_trace.y.tolist()
-                        print(f"Y converted: {trace['y']}")
-                    else:
-                        print("Could not convert y data")
+        # Simple approach: let Python handle the conversion
+        data_json = json.dumps(fig_dict.get('data', []))
+        layout_json = json.dumps(fig_dict.get('layout', {}))
         
-        # Convert to JSON and render
-        fig_json = json.dumps(fig_dict)
-        success = renderPlot(fig_json)
+        # Call JavaScript
+        success = createPlot(data_json, layout_json)
         
         if success:
-            print("✅ Plot with converted NumPy data displayed!")
+            print("Plot created!")
+            return True
         else:
-            print("❌ Plot rendering failed")
+            print("Plot failed")
+            return False
             
-        return success
-        
     except Exception as e:
-        print(f"❌ Plot conversion error: {e}")
-        import traceback
-        traceback.print_exc()
+        print(f"Plot error: {e}")
         return False
 
-# Setup Plotly with our conversion fix
+# Setup Plotly
 try:
     import plotly.graph_objects as go
     import plotly.express as px
     
-    # Keep the original show methods
-    original_go_show = go.Figure.show
-    
-    # Replace Graph Objects show with conversion
-    go.Figure.show = lambda self, *args, **kwargs: show_plot_with_conversion(self)
+    # Replace show method
+    go.Figure.show = lambda self, *args, **kwargs: simple_show(self)
     
-    # Plotly Express should work as-is (you said it works)
-    # px functions already return converted data
-    
-    print("✅ Plotly setup complete with NumPy conversion!")
+    print("Plotly ready!")
     
 except Exception as e:
-    print(f"❌ Plotly setup failed: {e}")
-    import traceback
-    traceback.print_exc()
+    print(f"Plotly setup error: {e}")
 
-print("🎉 Environment ready!")
+print("Environment ready!")
                 `);
                 
                 ready = true;
-                updateStatus('✅ Ready with NumPy fix!', 'green');
+                updateStatus('✅ Ready!', 'green');
                 
                 document.getElementById('output').style.display = 'block';
-                document.getElementById('text-output').textContent = 'Ready! Graph Objects with NumPy should now work.';
+                document.getElementById('text-output').textContent = 'System ready. Try the simple examples.';
                 
             } catch (error) {
-                console.error('Init error:', error);
-                updateStatus('❌ Failed: ' + error.message, 'red');
+                console.error('Initialization error:', error);
+                updateStatus('❌ Error: ' + error.message, 'red');
             }
         }
         
-        async function executeCode(code) {
-            if (!ready) return 'Not ready';
+        async function runCode(code) {
+            if (!ready) return 'System not ready';
             
             try {
-                updateStatus('▶️ Executing...', 'blue');
+                updateStatus('▶️ Running...', 'blue');
                 
+                // Clear plots
                 document.getElementById('plots').innerHTML = '';
                 
+                // Capture output
                 pyodide.runPython(`
 import sys
 from io import StringIO
 old_stdout = sys.stdout
-sys.stdout = capture = StringIO()
+sys.stdout = output = StringIO()
                 `);
                 
+                // Run code
                 pyodide.runPython(code);
                 
-                let output = pyodide.runPython(`
+                // Get output
+                let result = pyodide.runPython(`
 sys.stdout = old_stdout
-capture.getvalue()
+output.getvalue()
                 `);
                 
-                document.getElementById('text-output').textContent = output || 'Executed successfully';
-                updateStatus('✅ Done!', 'green');
+                document.getElementById('text-output').textContent = result || 'Code executed';
+                updateStatus('✅ Complete', 'green');
                 
-                return output || 'Success';
+                return result || 'Success';
                 
             } catch (error) {
-                const err = 'Error: ' + error.toString();
-                document.getElementById('text-output').textContent = err;
+                const errorMsg = 'Error: ' + error.toString();
+                document.getElementById('text-output').textContent = errorMsg;
                 updateStatus('❌ Error', 'red');
-                return err;
+                return errorMsg;
             }
         }
         
-        function init() {
+        // Initialize
+        function startInit() {
             if (typeof loadPyodide !== 'undefined' && typeof Plotly !== 'undefined') {
                 initPyodide();
             } else {
-                setTimeout(init, 1000);
+                setTimeout(startInit, 1000);
             }
         }
         
-        init();
+        startInit();
         
-        window.executeCode = executeCode;
-        window.checkReady = () => ready;
+        // Global functions
+        window.runCode = runCode;
+        window.isReady = () => ready;
         
     </script>
     '''
     
     return pyodide_html
 
-with gr.Blocks() as demo:
-    gr.Markdown("# 🎯 NumPy Graph Objects Fix")
-    gr.Markdown("**Targeted fix** for `go.Figure()` with NumPy arrays. Plotly Express already works!")
+with gr.Blocks(title="Simple Plotly Test") as demo:
+    gr.Markdown("# 🔧 Simple Plotly Test")
+    gr.Markdown("**Back to basics** - Let's get the fundamental setup working first.")
     
     pyodide_interface = gr.HTML(create_pyodide_interface())
     
     with gr.Row():
         with gr.Column():
             code_input = gr.Textbox(
-                value="""# Test both methods
+                value="""# Test 1: Absolute basics with Python lists
 import plotly.graph_objects as go
-import plotly.express as px
-import pandas as pd
-import numpy as np
 
-print("=== Testing Plotly Express (should work) ===")
-df = pd.DataFrame({'x': [1,2,3,4], 'y': [1,4,9,16]})
-fig1 = px.scatter(df, x='x', y='y', title='Plotly Express - Works!')
-fig1.show()
+print("Creating basic plot with Python lists...")
 
-print("\\n=== Testing Graph Objects with NumPy (should now work!) ===")
-x = np.array([1, 2, 3, 4, 5])
-y = np.array([1, 4, 9, 16, 25])
+# Use plain Python lists (no NumPy)
+x_list = [1, 2, 3, 4, 5]
+y_list = [1, 4, 9, 16, 25]
 
-print(f"NumPy x: {x}")
-print(f"NumPy y: {y}")
+print(f"X: {x_list}")
+print(f"Y: {y_list}")
 
-fig2 = go.Figure()
-fig2.add_trace(go.Scatter(
-    x=x,  # NumPy array
-    y=y,  # NumPy array
+fig = go.Figure()
+fig.add_trace(go.Scatter(
+    x=x_list,
+    y=y_list,
     mode='markers+lines',
-    name='Graph Objects',
-    marker=dict(size=12, color='red'),
-    line=dict(color='blue', width=2)
+    name='Basic Test'
 ))
 
-fig2.update_layout(title='Graph Objects with NumPy - Fixed!')
-fig2.show()
+fig.update_layout(title='Basic Test - Python Lists Only')
+fig.show()
 
-print("\\n✅ Both plots should now display data points!")""",
-                lines=18,
-                label="Test Both Methods"
+print("Basic test complete!")""",
+                lines=15,
+                label="Test Code"
             )
             
-            execute_btn = gr.Button("🧪 Test Both", variant="primary")
+            run_btn = gr.Button("🚀 Run Test", variant="primary")
             
         with gr.Column():
-            # Separate test buttons
-            test1_btn = gr.Button("Test 1: Express Only", variant="secondary")
-            test2_btn = gr.Button("Test 2: Graph Objects Only", variant="secondary")
-            
-            status_display = gr.Textbox(
-                label="Status",
+            status_output = gr.Textbox(
+                label="Result",
                 interactive=False,
-                lines=4
+                lines=3
             )
+            
+            # Quick test buttons
+            basic_btn = gr.Button("Test: Python Lists", variant="secondary")
+            express_btn = gr.Button("Test: Plotly Express", variant="secondary")
+            numpy_manual_btn = gr.Button("Test: NumPy Manual", variant="secondary")
     
     gr.Markdown("""
-    ### 🔍 **What This Fixes:**
+    ### 🎯 **Testing Strategy:**
+    
+    1. **Python Lists** - Should work (no NumPy conversion issues)
+    2. **Plotly Express** - You said this works
+    3. **NumPy Manual** - Convert arrays manually with `.tolist()`
     
-    **✅ Works (Plotly Express):**
+    ### 📝 **Test Examples:**
+    
+    **Safe Python Lists:**
     ```python
-    fig = px.scatter(df, x='x', y='y')  # ✅ Data shows
+    x = [1, 2, 3, 4, 5]  # Plain list
+    y = [1, 4, 9, 16, 25]  # Plain list
+    fig.add_trace(go.Scatter(x=x, y=y))
     ```
     
-    **❌ Broken → ✅ Fixed (Graph Objects):**
+    **Manual NumPy Conversion:**
     ```python
-    fig = go.Figure()
-    fig.add_trace(go.Scatter(x=numpy_array, y=numpy_array))  # ✅ Now works!
+    x = np.array([1, 2, 3, 4, 5])
+    y = np.array([1, 4, 9, 16, 25])
+    fig.add_trace(go.Scatter(x=x.tolist(), y=y.tolist()))  # Manual .tolist()
     ```
-    
-    ### 🔧 **The Fix:**
-    - Detects NumPy binary data in Graph Objects
-    - Automatically converts to JavaScript arrays
-    - Leaves Plotly Express unchanged (already works)
     """)
     
+    def get_basic_test():
+        return """# Basic Python Lists Test
+import plotly.graph_objects as go
+
+x = [1, 2, 3, 4, 5]
+y = [2, 4, 6, 8, 10]
+
+fig = go.Figure()
+fig.add_trace(go.Scatter(x=x, y=y, mode='markers+lines'))
+fig.update_layout(title='Python Lists Test')
+fig.show()
+print("Python lists test done!")"""
+    
     def get_express_test():
         return """# Plotly Express Test
 import plotly.express as px
 import pandas as pd
 
-df = pd.DataFrame({
-    'x': [1, 2, 3, 4, 5], 
-    'y': [2, 5, 3, 8, 7],
-    'category': ['A', 'B', 'A', 'B', 'A']
-})
-
-fig = px.scatter(df, x='x', y='y', color='category', 
-                title='Plotly Express Test')
+df = pd.DataFrame({'x': [1,2,3,4], 'y': [1,4,9,16]})
+fig = px.scatter(df, x='x', y='y', title='Express Test')
 fig.show()
-print("Express test complete!")"""
+print("Express test done!")"""
     
-    def get_go_test():
-        return """# Graph Objects Test  
+    def get_numpy_manual_test():
+        return """# NumPy with Manual Conversion
 import plotly.graph_objects as go
 import numpy as np
 
+print("Creating NumPy arrays...")
 x = np.array([1, 2, 3, 4, 5])
-y = np.array([10, 15, 13, 17, 20])
+y = np.array([1, 4, 9, 16, 25])
+
+print("Converting to lists manually...")
+x_list = x.tolist()  # Manual conversion
+y_list = y.tolist()  # Manual conversion
+
+print(f"Converted X: {x_list}")
+print(f"Converted Y: {y_list}")
 
 fig = go.Figure()
 fig.add_trace(go.Scatter(
-    x=x, y=y, 
+    x=x_list, 
+    y=y_list, 
     mode='markers+lines',
-    marker=dict(size=10, color='green')
+    marker=dict(size=8, color='red')
 ))
-
-fig.update_layout(title='Graph Objects with NumPy Test')
+fig.update_layout(title='NumPy Manual Conversion')
 fig.show()
-print("Graph Objects test complete!")"""
+print("Manual NumPy conversion test done!")"""
     
-    execute_btn.click(
+    # Event handlers
+    run_btn.click(
         fn=None,
         inputs=[code_input],
-        outputs=[status_display],
-        js="(code) => window.executeCode ? window.executeCode(code) : 'Not ready'"
+        outputs=[status_output],
+        js="(code) => window.runCode ? window.runCode(code) : 'Not ready'"
     )
     
-    test1_btn.click(
-        fn=get_express_test,
-        inputs=[],
-        outputs=[code_input]
-    )
-    
-    test2_btn.click(
-        fn=get_go_test,
-        inputs=[],
-        outputs=[code_input]
-    )
+    basic_btn.click(fn=get_basic_test, outputs=[code_input])
+    express_btn.click(fn=get_express_test, outputs=[code_input])
+    numpy_manual_btn.click(fn=get_numpy_manual_test, outputs=[code_input])
 
 if __name__ == "__main__":
+    print("🚀 Starting Simple Plotly Test...")
     demo.launch(server_name="0.0.0.0", server_port=7860, share=False)