Update app.py

app.py

@@ -1,12 +1,12 @@
 #!/usr/bin/env python3
 """
-Final Working Plotly + Pyodide - NumPy Array Fix
+Targeted NumPy Fix for Plotly Graph Objects
 """
 
 import gradio as gr
 
 def create_pyodide_interface():
-    """Create the final working interface"""
+    """Interface with specific NumPy conversion fix"""
     
     pyodide_html = '''
     <div id="pyodide-container" style="border: 1px solid #ddd; padding: 15px; border-radius: 5px; margin: 10px 0;">
@@ -37,7 +37,7 @@ def create_pyodide_interface():
             console.log('Status:', msg);
         }
         
-        // Simple, reliable plot renderer
+        // Enhanced plot renderer with better NumPy handling
         window.renderPlot = function(figureJson) {
             try {
                 plotId++;
@@ -46,10 +46,11 @@ def create_pyodide_interface():
                 
                 if (!plotsDiv) return false;
                 
-                // Parse figure
                 const figDict = JSON.parse(figureJson);
                 
-                // Create container
+                // Debug what we received
+                console.log('Rendering plot with data:', figDict.data);
+                
                 const plotWrapper = document.createElement('div');
                 plotWrapper.innerHTML = `
                     <div style="margin: 15px 0;">
@@ -59,14 +60,13 @@ def create_pyodide_interface():
                 `;
                 plotsDiv.appendChild(plotWrapper);
                 
-                // Render plot
                 Plotly.newPlot(containerId, figDict.data, figDict.layout, {responsive: true});
                 
-                console.log('Plot rendered:', containerId);
+                console.log('Plot created successfully');
                 return true;
                 
             } catch (error) {
-                console.error('Plot error:', error);
+                console.error('Plot rendering error:', error);
                 return false;
             }
         };
@@ -85,70 +85,107 @@ def create_pyodide_interface():
                     await micropip.install('plotly')
                 `);
                 
-                updateStatus('🔧 Setting up integration...', 'blue');
+                updateStatus('🔧 Setting up NumPy conversion...', 'blue');
                 
                 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
 
-def show_plot(fig):
+def show_plot_with_conversion(fig):
     try:
-        # Convert figure to dict
+        print("Converting figure data...")
+        
+        # Get the raw figure dict
         fig_dict = fig.to_dict()
         
-        # Fix NumPy array serialization
-        for trace in fig_dict.get('data', []):
-            # Convert x data from NumPy binary to list
-            if isinstance(trace.get('x'), dict) and 'bdata' in trace.get('x', {}):
-                for fig_trace in fig.data:
-                    if hasattr(fig_trace, 'x') and hasattr(fig_trace.x, 'tolist'):
-                        trace['x'] = fig_trace.x.tolist()
-                        break
+        # Method 1: Try to convert the data traces directly
+        for i, trace in enumerate(fig_dict.get('data', [])):
+            print(f"Processing trace {i}...")
             
-            # Convert y data from NumPy binary to list
-            if isinstance(trace.get('y'), dict) and 'bdata' in trace.get('y', {}):
-                for fig_trace in fig.data:
-                    if hasattr(fig_trace, 'y') and hasattr(fig_trace.y, 'tolist'):
-                        trace['y'] = fig_trace.y.tolist()
-                        break
+            # 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")
         
         # Convert to JSON and render
         fig_json = json.dumps(fig_dict)
         success = renderPlot(fig_json)
         
         if success:
-            print("✅ Plot displayed successfully!")
+            print("✅ Plot with converted NumPy data displayed!")
         else:
             print("❌ Plot rendering failed")
             
         return success
         
     except Exception as e:
-        print(f"❌ Plot error: {e}")
+        print(f"❌ Plot conversion error: {e}")
+        import traceback
+        traceback.print_exc()
         return False
 
-# Setup Plotly
+# Setup Plotly with our conversion fix
 try:
     import plotly.graph_objects as go
     import plotly.express as px
-    import numpy as np
     
-    # Replace show method
-    go.Figure.show = lambda self, *args, **kwargs: show_plot(self)
+    # Keep the original show methods
+    original_go_show = go.Figure.show
     
-    print("✅ Plotly ready with NumPy fix!")
+    # Replace Graph Objects show with conversion
+    go.Figure.show = lambda self, *args, **kwargs: show_plot_with_conversion(self)
+    
+    # Plotly Express should work as-is (you said it works)
+    # px functions already return converted data
+    
+    print("✅ Plotly setup complete with NumPy conversion!")
     
 except Exception as e:
-    print(f"❌ Setup failed: {e}")
+    print(f"❌ Plotly setup failed: {e}")
+    import traceback
+    traceback.print_exc()
 
 print("🎉 Environment ready!")
                 `);
                 
                 ready = true;
-                updateStatus('✅ Ready!', 'green');
+                updateStatus('✅ Ready with NumPy fix!', 'green');
                 
                 document.getElementById('output').style.display = 'block';
-                document.getElementById('text-output').textContent = 'Ready! NumPy arrays will be automatically converted.';
+                document.getElementById('text-output').textContent = 'Ready! Graph Objects with NumPy should now work.';
                 
             } catch (error) {
                 console.error('Init error:', error);
@@ -160,12 +197,10 @@ print("🎉 Environment ready!")
             if (!ready) return 'Not ready';
             
             try {
-                updateStatus('▶️ Running...', 'blue');
+                updateStatus('▶️ Executing...', 'blue');
                 
-                // Clear plots
                 document.getElementById('plots').innerHTML = '';
                 
-                // Capture output
                 pyodide.runPython(`
 import sys
 from io import StringIO
@@ -173,16 +208,14 @@ old_stdout = sys.stdout
 sys.stdout = capture = StringIO()
                 `);
                 
-                // Execute
                 pyodide.runPython(code);
                 
-                // Get output
                 let output = pyodide.runPython(`
 sys.stdout = old_stdout
 capture.getvalue()
                 `);
                 
-                document.getElementById('text-output').textContent = output || 'Success';
+                document.getElementById('text-output').textContent = output || 'Executed successfully';
                 updateStatus('✅ Done!', 'green');
                 
                 return output || 'Success';
@@ -195,7 +228,6 @@ capture.getvalue()
             }
         }
         
-        // Initialize
         function init() {
             if (typeof loadPyodide !== 'undefined' && typeof Plotly !== 'undefined') {
                 initPyodide();
@@ -215,94 +247,118 @@ capture.getvalue()
     return pyodide_html
 
 with gr.Blocks() as demo:
-    gr.Markdown("# 🎉 Working Plotly + Pyodide")
-    gr.Markdown("**NumPy arrays automatically converted!** Data points will now display correctly.")
+    gr.Markdown("# 🎯 NumPy Graph Objects Fix")
+    gr.Markdown("**Targeted fix** for `go.Figure()` with NumPy arrays. Plotly Express already works!")
     
     pyodide_interface = gr.HTML(create_pyodide_interface())
     
     with gr.Row():
         with gr.Column():
             code_input = gr.Textbox(
-                value="""# This should now work perfectly!
+                value="""# Test both methods
 import plotly.graph_objects as go
+import plotly.express as px
+import pandas as pd
 import numpy as np
 
-print("Creating plot with NumPy arrays...")
+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()
 
-# NumPy arrays (these will be auto-converted)
+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])
 
-print(f"X: {x}")
-print(f"Y: {y}")
+print(f"NumPy x: {x}")
+print(f"NumPy y: {y}")
 
-# Create plot
-fig = go.Figure()
-fig.add_trace(go.Scatter(
-    x=x,  # NumPy array - will be auto-converted
-    y=y,  # NumPy array - will be auto-converted  
+fig2 = go.Figure()
+fig2.add_trace(go.Scatter(
+    x=x,  # NumPy array
+    y=y,  # NumPy array
     mode='markers+lines',
-    name='Quadratic',
-    marker=dict(size=10, color='red'),
+    name='Graph Objects',
+    marker=dict(size=12, color='red'),
     line=dict(color='blue', width=2)
 ))
 
-fig.update_layout(
-    title='Working Plot with NumPy Arrays!',
-    xaxis_title='X Values',
-    yaxis_title='Y Values',
-    template='plotly_white'
-)
+fig2.update_layout(title='Graph Objects with NumPy - Fixed!')
+fig2.show()
 
-fig.show()
-print("✅ Plot complete - data points should be visible!")""",
+print("\\n✅ Both plots should now display data points!")""",
                 lines=18,
-                label="Python Code"
+                label="Test Both Methods"
             )
             
-            execute_btn = gr.Button("🚀 Execute", variant="primary")
+            execute_btn = gr.Button("🧪 Test Both", 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",
                 interactive=False,
-                lines=3
+                lines=4
             )
-            
-            check_btn = gr.Button("📊 Check")
     
     gr.Markdown("""
-    ### ✅ **What's Fixed:**
-    - **NumPy arrays** automatically converted to JavaScript arrays
-    - **Data points** will now display correctly  
-    - **Interactive features** (zoom, pan, hover) working
-    - **No manual .tolist()** conversion needed
-    
-    ### 🧪 **Try These Examples:**
+    ### 🔍 **What This Fixes:**
     
-    **Simple Test:**
+    **✅ Works (Plotly Express):**
     ```python
-    import plotly.express as px
-    import pandas as pd
-    df = pd.DataFrame({'x': [1,2,3,4], 'y': [1,4,9,16]})
-    fig = px.scatter(df, x='x', y='y', title='Simple Test')
-    fig.show()
+    fig = px.scatter(df, x='x', y='y')  # ✅ Data shows
     ```
     
-    **3D Plot:**
+    **❌ Broken → ✅ Fixed (Graph Objects):**
     ```python
-    import plotly.graph_objects as go
-    import numpy as np
-    
-    x = np.random.randn(100)
-    y = np.random.randn(100) 
-    z = np.random.randn(100)
-    
-    fig = go.Figure(data=go.Scatter3d(x=x, y=y, z=z, mode='markers'))
-    fig.show()
+    fig = go.Figure()
+    fig.add_trace(go.Scatter(x=numpy_array, y=numpy_array))  # ✅ Now works!
     ```
+    
+    ### 🔧 **The Fix:**
+    - Detects NumPy binary data in Graph Objects
+    - Automatically converts to JavaScript arrays
+    - Leaves Plotly Express unchanged (already works)
     """)
     
+    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')
+fig.show()
+print("Express test complete!")"""
+    
+    def get_go_test():
+        return """# Graph Objects Test  
+import plotly.graph_objects as go
+import numpy as np
+
+x = np.array([1, 2, 3, 4, 5])
+y = np.array([10, 15, 13, 17, 20])
+
+fig = go.Figure()
+fig.add_trace(go.Scatter(
+    x=x, y=y, 
+    mode='markers+lines',
+    marker=dict(size=10, color='green')
+))
+
+fig.update_layout(title='Graph Objects with NumPy Test')
+fig.show()
+print("Graph Objects test complete!")"""
+    
     execute_btn.click(
         fn=None,
         inputs=[code_input],
@@ -310,13 +366,17 @@ print("✅ Plot complete - data points should be visible!")""",
         js="(code) => window.executeCode ? window.executeCode(code) : 'Not ready'"
     )
     
-    check_btn.click(
-        fn=None,
+    test1_btn.click(
+        fn=get_express_test,
         inputs=[],
-        outputs=[status_display],
-        js="() => window.checkReady ? (window.checkReady() ? '✅ Ready' : '⏳ Loading') : '❌ Error'"
+        outputs=[code_input]
+    )
+    
+    test2_btn.click(
+        fn=get_go_test,
+        inputs=[],
+        outputs=[code_input]
     )
 
 if __name__ == "__main__":
-    print("🚀 Starting Final Working Plotly + Pyodide...")
     demo.launch(server_name="0.0.0.0", server_port=7860, share=False)