Update app.py

app.py

@@ -1,17 +1,17 @@
 #!/usr/bin/env python3
 """
-Simple, Reliable Plotly + Pyodide - Back to Basics
+Plotly Express Test Interface - Try Different Examples
 """
 
 import gradio as gr
 
 def create_pyodide_interface():
-    """Simple working interface without complex conversions"""
+    """Simple interface to test different Express examples"""
     
     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 Pyodide + Plotly...
+            🔄 Loading Pyodide...
         </div>
         <div id="output" style="display:none; margin-top: 10px;">
             <h4>Output:</h4>
@@ -31,10 +31,8 @@ def create_pyodide_interface():
         function updateStatus(msg, color = 'black') {
             document.getElementById('status').innerHTML = msg;
             document.getElementById('status').style.color = color;
-            console.log('Status:', msg);
         }
         
-        // Simple plot renderer
         window.createPlot = function(data, layout) {
             try {
                 plotCount++;
@@ -43,17 +41,15 @@ def create_pyodide_interface():
                 
                 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>
+                    <h5>📊 Plot ${plotCount}</h5>
+                    <div id="${plotId}" style="width: 100%; height: 400px; border: 1px solid #ccc; margin: 10px 0;"></div>
                 `;
                 plotsDiv.appendChild(plotDiv);
                 
-                // Parse if strings
                 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 created:', plotId);
                 return true;
                 
             } catch (error) {
@@ -62,274 +58,182 @@ def create_pyodide_interface():
             }
         };
         
-        async function initPyodide() {
+        async function init() {
             try {
-                updateStatus('🔄 Loading Pyodide...', 'blue');
+                updateStatus('🔄 Loading...', '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('🔧 Setting up environment...', 'blue');
-                
-                // Simple Python setup - no complex conversions
                 pyodide.runPython(`
 import json
 from js import createPlot
 
-def simple_show(fig):
+def show_plot(fig):
     try:
-        # Get the figure as dict
         fig_dict = fig.to_dict()
-        
-        # Simple approach: let Python handle the conversion
         data_json = json.dumps(fig_dict.get('data', []))
         layout_json = json.dumps(fig_dict.get('layout', {}))
-        
-        # Call JavaScript
         success = createPlot(data_json, layout_json)
-        
         if success:
-            print("Plot created!")
-            return True
-        else:
-            print("Plot failed")
-            return False
-            
+            print("Plot displayed!")
+        return success
     except Exception as e:
         print(f"Plot error: {e}")
         return False
 
-# Setup Plotly
 try:
     import plotly.graph_objects as go
     import plotly.express as px
-    
-    # Replace show method
-    go.Figure.show = lambda self, *args, **kwargs: simple_show(self)
-    
+    go.Figure.show = lambda self, *args, **kwargs: show_plot(self)
     print("Plotly ready!")
-    
 except Exception as e:
-    print(f"Plotly setup error: {e}")
-
-print("Environment ready!")
+    print(f"Setup error: {e}")
                 `);
                 
                 ready = true;
                 updateStatus('✅ Ready!', 'green');
                 
                 document.getElementById('output').style.display = 'block';
-                document.getElementById('text-output').textContent = 'System ready. Try the simple examples.';
+                document.getElementById('text-output').textContent = 'Ready to test Plotly Express examples!';
                 
             } catch (error) {
-                console.error('Initialization error:', error);
                 updateStatus('❌ Error: ' + error.message, 'red');
             }
         }
         
         async function runCode(code) {
-            if (!ready) return 'System not ready';
+            if (!ready) return 'Not ready';
             
             try {
                 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 = output = StringIO()
+sys.stdout = capture = StringIO()
                 `);
                 
-                // Run code
                 pyodide.runPython(code);
                 
-                // Get output
-                let result = pyodide.runPython(`
+                let output = pyodide.runPython(`
 sys.stdout = old_stdout
-output.getvalue()
+capture.getvalue()
                 `);
                 
-                document.getElementById('text-output').textContent = result || 'Code executed';
-                updateStatus('✅ Complete', 'green');
+                document.getElementById('text-output').textContent = output || 'Code executed';
+                updateStatus('✅ Done', 'green');
                 
-                return result || 'Success';
+                return output || 'Success';
                 
             } catch (error) {
-                const errorMsg = 'Error: ' + error.toString();
-                document.getElementById('text-output').textContent = errorMsg;
+                const err = 'Error: ' + error.toString();
+                document.getElementById('text-output').textContent = err;
                 updateStatus('❌ Error', 'red');
-                return errorMsg;
+                return err;
             }
         }
         
-        // Initialize
-        function startInit() {
+        function waitForCDN() {
             if (typeof loadPyodide !== 'undefined' && typeof Plotly !== 'undefined') {
-                initPyodide();
+                init();
             } else {
-                setTimeout(startInit, 1000);
+                setTimeout(waitForCDN, 1000);
             }
         }
         
-        startInit();
+        waitForCDN();
         
-        // Global functions
         window.runCode = runCode;
-        window.isReady = () => ready;
         
     </script>
     '''
     
     return pyodide_html
 
-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 1: Absolute basics with Python lists
-import plotly.graph_objects as go
-
-print("Creating basic plot with Python lists...")
+# Example templates
+examples = {
+    "Minimal Test": '''# Absolute minimal test
+import plotly.express as px
 
-# Use plain Python lists (no NumPy)
-x_list = [1, 2, 3, 4, 5]
-y_list = [1, 4, 9, 16, 25]
+print("Testing minimal Express...")
+fig = px.scatter(x=[1, 2], y=[1, 2], title="Minimal")
+fig.show()
+print("Minimal test complete!")''',
+    
+    "Direct Arrays": '''# Test without DataFrame
+import plotly.express as px
 
-print(f"X: {x_list}")
-print(f"Y: {y_list}")
+print("Testing direct arrays...")
+fig = px.scatter(x=[1, 2, 3, 4], y=[1, 4, 9, 16], title="Direct Arrays")
+fig.show()
+print("Direct arrays test complete!")''',
+    
+    "Simple DataFrame": '''# Simple DataFrame test
+import plotly.express as px
+import pandas as pd
 
-fig = go.Figure()
-fig.add_trace(go.Scatter(
-    x=x_list,
-    y=y_list,
-    mode='markers+lines',
-    name='Basic Test'
-))
+print("Creating DataFrame...")
+df = pd.DataFrame({
+    'x': [1, 2, 3, 4, 5],
+    'y': [2, 4, 6, 8, 10]
+})
+print("DataFrame:")
+print(df)
 
-fig.update_layout(title='Basic Test - Python Lists Only')
+print("Creating plot...")
+fig = px.scatter(df, x='x', y='y', title='DataFrame Test')
 fig.show()
-
-print("Basic test complete!")""",
-                lines=15,
-                label="Test Code"
-            )
-            
-            run_btn = gr.Button("🚀 Run Test", variant="primary")
-            
-        with gr.Column():
-            status_output = gr.Textbox(
-                label="Result",
-                interactive=False,
-                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("""
-    ### 🎯 **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()`
-    
-    ### 📝 **Test Examples:**
-    
-    **Safe Python Lists:**
-    ```python
-    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))
-    ```
-    
-    **Manual NumPy Conversion:**
-    ```python
-    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()
-    ```
-    """)
+print("DataFrame test complete!")''',
     
-    def get_basic_test():
-        return """# Basic Python Lists Test
-import plotly.graph_objects as go
+    "Line Chart": '''# Line chart test
+import plotly.express as px
+import pandas as pd
 
-x = [1, 2, 3, 4, 5]
-y = [2, 4, 6, 8, 10]
+df = pd.DataFrame({
+    'x': [1, 2, 3, 4, 5],
+    'y': [1, 4, 2, 8, 5]
+})
 
-fig = go.Figure()
-fig.add_trace(go.Scatter(x=x, y=y, mode='markers+lines'))
-fig.update_layout(title='Python Lists Test')
+fig = px.line(df, x='x', y='y', title='Line Chart')
 fig.show()
-print("Python lists test done!")"""
+print("Line chart complete!")''',
     
-    def get_express_test():
-        return """# Plotly Express Test
+    "Bar Chart": '''# Bar chart test
 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')
+df = pd.DataFrame({
+    'category': ['A', 'B', 'C', 'D'],
+    'values': [20, 35, 30, 25]
+})
+
+fig = px.bar(df, x='category', y='values', title='Bar Chart')
 fig.show()
-print("Express test done!")"""
+print("Bar chart complete!")''',
     
-    def get_numpy_manual_test():
-        return """# NumPy with Manual Conversion
-import plotly.graph_objects as go
+    "Data Types": '''# Test different data types
+import plotly.express as px
+import pandas as pd
 import numpy as np
 
-print("Creating NumPy arrays...")
-x = np.array([1, 2, 3, 4, 5])
-y = np.array([1, 4, 9, 16, 25])
+print("Creating mixed data types...")
+df = pd.DataFrame({
+    'int_col': [1, 2, 3, 4],
+    'float_col': [1.1, 2.2, 3.3, 4.4], 
+    'numpy_col': np.array([1, 2, 3, 4])
+})
 
-print("Converting to lists manually...")
-x_list = x.tolist()  # Manual conversion
-y_list = y.tolist()  # Manual conversion
+print("DataFrame info:")
+print(df.dtypes)
 
-print(f"Converted X: {x_list}")
-print(f"Converted Y: {y_list}")
-
-fig = go.Figure()
-fig.add_trace(go.Scatter(
-    x=x_list, 
-    y=y_list, 
-    mode='markers+lines',
-    marker=dict(size=8, color='red')
-))
-fig.update_layout(title='NumPy Manual Conversion')
+fig = px.scatter(df, x='int_col', y='float_col', title='Data Types')
 fig.show()
-print("Manual NumPy conversion test done!")"""
-    
-    # Event handlers
-    run_btn.click(
-        fn=None,
-        inputs=[code_input],
-        outputs=[status_output],
-        js="(code) => window.runCode ? window.runCode(code) : 'Not ready'"
-    )
-    
-    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)
+print("Data typ