Update app.py

app.py

@@ -1,22 +1,17 @@
 #!/usr/bin/env python3
 """
-Plotly Express Integration Fix - Address the Root Cause
+Minimal Working Plotly - Simple and Clean
 """
 
 import gradio as gr
 
-def create_pyodide_interface():
-    """Fix Express by converting it to Graph Objects under the hood"""
-    
-    pyodide_html = '''
-    <div id="pyodide-container" style="border: 1px solid #ddd; padding: 15px; border-radius: 5px; margin: 10px 0;">
-        <div id="status" style="font-weight: bold; padding: 10px; background: #f0f0f0; border-radius: 3px;">
-            🔄 Loading with Express fix...
-        </div>
-        <div id="output" style="display:none; margin-top: 10px;">
-            <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>
+def create_interface():
+    html = '''
+    <div style="border: 1px solid #ddd; padding: 20px; border-radius: 5px;">
+        <div id="status">🔄 Loading...</div>
+        <div id="output" style="display:none; margin-top: 20px;">
+            <pre id="text" style="background: #f5f5f5; padding: 10px; max-height: 150px; overflow-y: auto;"></pre>
+            <div id="plots"></div>
         </div>
     </div>
     
@@ -24,364 +19,121 @@ def create_pyodide_interface():
     <script src="https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js"></script>
     
     <script>
-        let pyodide = null;
-        let ready = false;
-        let plotCount = 0;
+        let pyodide, ready = false, plotNum = 0;
         
-        function updateStatus(msg, color = 'black') {
+        function status(msg, color = 'black') {
             document.getElementById('status').innerHTML = msg;
             document.getElementById('status').style.color = color;
         }
         
-        window.renderPlot = function(data, layout) {
-            try {
-                plotCount++;
-                const plotId = 'plot-' + plotCount;
-                const plotsDiv = document.getElementById('plots');
-                
-                const plotDiv = document.createElement('div');
-                plotDiv.innerHTML = `
-                    <h5>📊 Plot ${plotCount}</h5>
-                    <div id="${plotId}" style="width: 100%; height: 450px; border: 1px solid #ccc; margin: 10px 0;"></div>
-                `;
-                plotsDiv.appendChild(plotDiv);
-                
-                if (typeof data === 'string') data = JSON.parse(data);
-                if (typeof layout === 'string') layout = JSON.parse(layout);
-                
-                Plotly.newPlot(plotId, data, layout, {responsive: true});
-                console.log('Plot rendered:', plotId);
-                return true;
-                
-            } catch (error) {
-                console.error('Plot error:', error);
-                return false;
-            }
+        window.makePlot = function(data, layout) {
+            const id = 'plot' + (++plotNum);
+            const div = document.createElement('div');
+            div.innerHTML = `<h4>Plot ${plotNum}</h4><div id="${id}" style="width:100%; height:400px; border:1px solid #ccc;"></div>`;
+            document.getElementById('plots').appendChild(div);
+            
+            Plotly.newPlot(id, JSON.parse(data), JSON.parse(layout));
+            return true;
         };
         
         async function init() {
-            try {
-                updateStatus('🔄 Loading Pyodide...', 'blue');
-                pyodide = await loadPyodide();
-                
-                updateStatus('📦 Installing packages...', 'blue');
-                await pyodide.loadPackage(['numpy', 'pandas', 'micropip']);
-                
-                updateStatus('📈 Installing Plotly...', 'blue');
-                await pyodide.runPythonAsync(`
-                    import micropip
-                    await micropip.install('plotly')
-                `);
-                
-                updateStatus('🔧 Fixing Express integration...', 'blue');
-                
-                // The key fix: properly handle Express vs Graph Objects
-                pyodide.runPython(`
-import json
-import numpy as np
-from js import renderPlot
-
-def convert_numpy_to_lists(obj):
-    """Recursively convert numpy arrays to Python lists"""
-    if isinstance(obj, np.ndarray):
-        return obj.tolist()
-    elif isinstance(obj, dict):
-        return {k: convert_numpy_to_lists(v) for k, v in obj.items()}
-    elif isinstance(obj, list):
-        return [convert_numpy_to_lists(item) for item in obj]
-    else:
-        return obj
-
-def show_any_figure(fig):
-    """Universal show function that works for both Express and Graph Objects"""
-    try:
-        print(f"Rendering figure of type: {type(fig)}")
-        
-        # Convert figure to dictionary
-        fig_dict = fig.to_dict()
-        
-        print(f"Figure has {len(fig_dict.get('data', []))} traces")
-        
-        # Process each trace
-        fixed_data = []
-        for i, trace in enumerate(fig_dict.get('data', [])):
-            print(f"Processing trace {i}: type={trace.get('type', 'unknown')}")
+            status('Loading...', 'blue');
+            pyodide = await loadPyodide();
+            await pyodide.loadPackage(['numpy', 'pandas', 'micropip']);
+            await pyodide.runPythonAsync('import micropip; await micropip.install("plotly")');
             
-            # Create a copy of the trace
-            fixed_trace = dict(trace)
-            
-            # Fix x data
-            if 'x' in fixed_trace:
-                x_data = fixed_trace['x']
-                if isinstance(x_data, dict) and 'bdata' in x_data:
-                    # NumPy binary data - convert from original figure
-                    original_trace = fig.data[i]
-                    if hasattr(original_trace, 'x') and hasattr(original_trace.x, 'tolist'):
-                        fixed_trace['x'] = original_trace.x.tolist()
-                        print(f"  Converted x from NumPy: {fixed_trace['x']}")
-                else:
-                    # Regular data - ensure it's a list
-                    fixed_trace['x'] = convert_numpy_to_lists(x_data)
-                    print(f"  X data: {fixed_trace['x']}")
-            
-            # Fix y data
-            if 'y' in fixed_trace:
-                y_data = fixed_trace['y']
-                if isinstance(y_data, dict) and 'bdata' in y_data:
-                    # NumPy binary data
-                    original_trace = fig.data[i]
-                    if hasattr(original_trace, 'y') and hasattr(original_trace.y, 'tolist'):
-                        fixed_trace['y'] = original_trace.y.tolist()
-                        print(f"  Converted y from NumPy: {fixed_trace['y']}")
-                else:
-                    # Regular data
-                    fixed_trace['y'] = convert_numpy_to_lists(y_data)
-                    print(f"  Y data: {fixed_trace['y']}")
-            
-            fixed_data.append(fixed_trace)
-        
-        # Create the plot data
-        plot_data = json.dumps(fixed_data)
-        plot_layout = json.dumps(fig_dict.get('layout', {}))
-        
-        print(f"Sending to JavaScript - data length: {len(plot_data)}")
-        
-        # Render the plot
-        success = renderPlot(plot_data, plot_layout)
-        
-        if success:
-            print("✅ Plot rendered successfully!")
-        else:
-            print("❌ Plot rendering failed")
-        
-        return success
-        
-    except Exception as e:
-        print(f"❌ Figure rendering error: {e}")
-        import traceback
-        traceback.print_exc()
-        return False
+            pyodide.runPython(`
+import json, numpy as np
+from js import makePlot
+
+def show(fig):
+    d = fig.to_dict()
+    # Convert numpy arrays to lists
+    for trace in d.get('data', []):
+        if 'x' in trace and hasattr(trace['x'], 'tolist'):
+            trace['x'] = trace['x'].tolist()
+        if 'y' in trace and hasattr(trace['y'], 'tolist'):
+            trace['y'] = trace['y'].tolist()
+    
+    makePlot(json.dumps(d['data']), json.dumps(d.get('layout', {})))
+    print("Plot created!")
 
-# Setup both Graph Objects and Express
-try:
-    import plotly.graph_objects as go
-    import plotly.express as px
-    import pandas as pd
-    
-    # Replace the show method for Graph Objects
-    go.Figure.show = lambda self, *args, **kwargs: show_any_figure(self)
-    
-    # The key insight: Express functions return Figure objects
-    # So we don't need to patch px functions individually
-    # Our go.Figure.show patch will handle Express figures too!
-    
-    print("✅ Both Graph Objects and Express patched!")
-    print("✅ Universal figure rendering enabled!")
-    
-except Exception as e:
-    print(f"❌ Setup error: {e}")
-    import traceback
-    traceback.print_exc()
-
-print("🎉 Environment ready with Express fix!")
-                `);
-                
-                ready = true;
-                updateStatus('✅ Ready with Express fix!', 'green');
-                
-                document.getElementById('output').style.display = 'block';
-                document.getElementById('text-output').textContent = 'Express integration fixed! Both px and go should work now.';
-                
-            } catch (error) {
-                console.error('Init error:', error);
-                updateStatus('❌ Error: ' + error.message, 'red');
-            }
+import plotly.graph_objects as go
+import plotly.express as px
+go.Figure.show = lambda self: show(self)
+            `);
+            
+            ready = true;
+            status('✅ Ready!', 'green');
+            document.getElementById('output').style.display = 'block';
+            document.getElementById('text').textContent = 'Ready to plot!';
         }
         
-        async function runCode(code) {
+        async function run(code) {
             if (!ready) return 'Not ready';
             
-            try {
-                updateStatus('▶️ Running...', 'blue');
-                
-                document.getElementById('plots').innerHTML = '';
-                
-                pyodide.runPython(`
+            document.getElementById('plots').innerHTML = '';
+            
+            pyodide.runPython(`
 import sys
 from io import StringIO
-old_stdout = sys.stdout
-sys.stdout = capture = StringIO()
-                `);
-                
-                pyodide.runPython(code);
-                
-                let output = pyodide.runPython(`
-sys.stdout = old_stdout
-capture.getvalue()
-                `);
-                
-                document.getElementById('text-output').textContent = output || 'Code executed';
-                updateStatus('✅ Complete', 'green');
-                
-                return output || 'Success';
-                
-            } catch (error) {
-                const err = 'Error: ' + error.toString();
-                document.getElementById('text-output').textContent = err;
-                updateStatus('❌ Error', 'red');
-                return err;
-            }
+old = sys.stdout
+sys.stdout = cap = StringIO()
+            `);
+            
+            pyodide.runPython(code);
+            
+            const output = pyodide.runPython('sys.stdout = old; cap.getvalue()');
+            document.getElementById('text').textContent = output || 'Done';
+            
+            return output || 'Success';
         }
         
-        function waitForReady() {
+        // Start
+        setTimeout(() => {
             if (typeof loadPyodide !== 'undefined' && typeof Plotly !== 'undefined') {
                 init();
-            } else {
-                setTimeout(waitForReady, 1000);
             }
-        }
-        
-        waitForReady();
-        
-        window.runCode = runCode;
+        }, 1000);
         
+        window.run = run;
     </script>
     '''
-    
-    return pyodide_html
+    return html
 
 with gr.Blocks() as demo:
-    gr.Markdown("# 🔧 Plotly Express Fix")
-    gr.Markdown("**Universal fix** for both Graph Objects and Express data display issues")
+    gr.Markdown("# 📊 Simple Plotly")
     
-    pyodide_interface = gr.HTML(create_pyodide_interface())
+    interface = gr.HTML(create_interface())
     
     with gr.Row():
-        with gr.Column():
-            code_input = gr.Textbox(
-                value="""# Test the Express fix
-import plotly.express as px
+        code = gr.Textbox(
+            value="""# Test 1: Graph Objects
 import plotly.graph_objects as go
-import pandas as pd
-import numpy as np
-
-print("=== Test 1: Express Scatter ===")
-df = pd.DataFrame({
-    'x': [1, 2, 3, 4, 5],
-    'y': [2, 4, 6, 8, 10]
-})
-fig1 = px.scatter(df, x='x', y='y', title='Express Scatter - Fixed!')
-fig1.show()
-
-print("=== Test 2: Express Line ===")
-fig2 = px.line(df, x='x', y='y', title='Express Line - Fixed!')
-fig2.show()
-
-print("=== Test 3: Graph Objects (should still work) ===")
-x = np.array([1, 2, 3, 4, 5])
-y = np.array([1, 4, 9, 16, 25])
-
-fig3 = go.Figure()
-fig3.add_trace(go.Scatter(x=x, y=y, mode='markers+lines', name='GO Test'))
-fig3.update_layout(title='Graph Objects - Should Still Work')
-fig3.show()
+fig = go.Figure()
+fig.add_trace(go.Scatter(x=[1,2,3,4], y=[1,4,9,16], mode='markers+lines'))
+fig.show()
 
-print("✅ All tests complete! Check if data points are visible.")""",
-                lines=18,
-                label="Test Code"
-            )
-            
-            run_btn = gr.Button("🧪 Test Fix", variant="primary", size="lg")
-            
-        with gr.Column():
-            # Quick test buttons
-            express_test_btn = gr.Button("📊 Quick Express Test")
-            go_test_btn = gr.Button("📊 Quick GO Test") 
-            comparison_btn = gr.Button("📊 Side-by-Side Test")
-            
-            status_output = gr.Textbox(
-                label="Result",
-                interactive=False,
-                lines=4
-            )
-    
-    gr.Markdown("""
-    ### 🔑 **The Key Insight:**
-    
-    **Problem**: Plotly Express functions return `Figure` objects, but they have different internal data structures than Graph Objects figures.
-    
-    **Solution**: Create a **universal figure renderer** that handles both:
-    - ✅ **Graph Objects**: Direct trace creation
-    - ✅ **Express**: Converts Express figures using same logic
-    
-    ### 🎯 **What This Fix Does:**
-    
-    1. **Universal Handler**: One function handles both `px.scatter()` and `go.Figure()`
-    2. **Smart Data Conversion**: Detects and converts NumPy arrays in both cases
-    3. **Type Detection**: Identifies figure source and processes accordingly
-    
-    ### 🧪 **Expected Results:**
-    
-    After this fix, **ALL** of these should show data points:
-    - ✅ `px.scatter()`, `px.line()`, `px.bar()` 
-    - ✅ `go.Figure().add_trace()`
-    - ✅ Both with DataFrames and NumPy arrays
-    """)
-    
-    def get_express_test():
-        return """# Quick Express test
+# Test 2: Express  
 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='Express Test')
-fig.show()
-print("Express test done!")"""
+fig = px.scatter(df, x='x', y='y')
+fig.show()""",
+            lines=10,
+            label="Code"
+        )
+        
+        result = gr.Textbox(label="Result", lines=2, interactive=False)
     
-    def get_go_test():
-        return """# Quick Graph Objects test
-import plotly.graph_objects as go
-
-fig = go.Figure()
-fig.add_trace(go.Scatter(x=[1,2,3,4], y=[1,4,9,16], mode='markers'))
-fig.update_layout(title='Graph Objects Test')
-fig.show()
-print("GO test done!")"""
+    btn = gr.Button("▶️ Run")
     
-    def get_comparison():
-        return """# Side-by-side comparison
-import plotly.express as px
-import plotly.graph_objects as go
-import pandas as pd
-
-# Same data, different methods
-data_x = [1, 2, 3, 4, 5]
-data_y = [2, 4, 6, 8, 10]
-
-print("Creating Express version...")
-df = pd.DataFrame({'x': data_x, 'y': data_y})
-fig1 = px.scatter(df, x='x', y='y', title='Express Method')
-fig1.show()
-
-print("Creating Graph Objects version...")
-fig2 = go.Figure()
-fig2.add_trace(go.Scatter(x=data_x, y=data_y, mode='markers', name='GO Method'))
-fig2.update_layout(title='Graph Objects Method')
-fig2.show()
-
-print("Both should now show identical data points!")"""
-    
-    # Event handlers
-    run_btn.click(
+    btn.click(
         fn=None,
-        inputs=[code_input],
-        outputs=[status_output],
-        js="(code) => window.runCode ? window.runCode(code) : 'Not ready'"
+        inputs=[code],
+        outputs=[result],
+        js="(code) => window.run ? window.run(code) : 'Loading...'"
     )
-    
-    express_test_btn.click(fn=get_express_test, outputs=[code_input])
-    go_test_btn.click(fn=get_go_test, outputs=[code_input])
-    comparison_btn.click(fn=get_comparison, outputs=[code_input])
 
 if __name__ == "__main__":
-    demo.launch(server_name="0.0.0.0", server_port=7860, share=False)
+    demo.launch(server_name="0.0.0.0", server_port=7860)