Update app.py

app.py

@@ -65,7 +65,7 @@ CSS = """
 }
 """
 
-# --- Helper Functions ---
+# --- Helper and Core Functions (Unchanged) ---
 def safe_exec(code_string: str, local_vars: dict):
     output_buffer = io.StringIO()
     try:
@@ -78,7 +78,6 @@ def safe_exec(code_string: str, local_vars: dict):
     except Exception as e:
         return None, None, None, f"Execution Error: {str(e)}"
 
-# --- Core Data Processing & State Management ---
 def load_and_process_file(file_obj, state_dict):
     if file_obj is None: return state_dict, "Please upload a file.", *[gr.update(visible=False)] * 4
     try:
@@ -111,23 +110,15 @@ def extract_dataset_metadata(df: pd.DataFrame):
     return {'shape': (rows, cols), 'columns': df.columns.tolist(), 'numeric_cols': numeric_cols, 'categorical_cols': categorical_cols,
             'datetime_cols': datetime_cols, 'dtypes': df.dtypes.to_string(), 'head': df.head().to_string(), 'data_quality': data_quality}
 
-# --- Page Navigation ---
 def switch_page(page_name):
     return (gr.update(visible=page_name=="cockpit"), gr.update(visible=page_name=="deep_dive"), gr.update(visible=page_name=="co-pilot"))
 
-# --- Page 1: Data Cockpit ---
 def get_ai_suggestions(state_dict, api_key):
     if not api_key: return "Enter your Gemini API key to get suggestions.", *[gr.update(visible=False)]*5
     if not state_dict: return "Upload data first.", *[gr.update(visible=False)]*5
-    
     metadata = state_dict['metadata']
     prompt = f"""
-    Based on the following dataset metadata, generate 3 to 5 specific, actionable, and interesting analytical questions a user might want to ask. Frame them as questions.
-    - **Columns:** {', '.join(metadata['columns'])}
-    - **Numeric:** {', '.join(metadata['numeric_cols'])}
-    - **Categorical:** {', '.join(metadata['categorical_cols'])}
-    - **Datetime:** {', '.join(metadata['datetime_cols'])}
-    
+    Based on the following dataset metadata, generate 3 to 5 specific, actionable, and interesting analytical questions...
     Return ONLY a JSON list of strings. Example: ["What is the trend of sales over time?", "Which category has the highest average price?"]
     """
     try:
@@ -138,22 +129,18 @@ def get_ai_suggestions(state_dict, api_key):
         buttons = [gr.Button(s, variant="secondary", visible=True) for s in suggestions]
         buttons += [gr.Button(visible=False)] * (5 - len(buttons))
         return gr.update(visible=False), *buttons
-    except Exception as e:
-        return f"Could not generate suggestions: {e}", *[gr.update(visible=False)]*5
+    except Exception as e: return f"Could not generate suggestions: {e}", *[gr.update(visible=False)]*5
 
 def handle_suggestion_click(question_text):
     return (gr.update(visible=False), gr.update(visible=False), gr.update(visible=True), question_text)
 
-# --- Page 2: Deep Dive Dashboard ---
 def add_plot_to_dashboard(state_dict, x_col, y_col, plot_type):
     if not x_col:
         gr.Warning("Please select at least an X-axis column.")
         return state_dict, state_dict.get('dashboard_plots', [])
-    
     df = state_dict['df']
     title = f"{plot_type.capitalize()}: {y_col} by {x_col}" if y_col else f"Distribution of {x_col}"
     fig = None
-    
     try:
         if plot_type == 'histogram': fig = px.histogram(df, x=x_col, title=title)
         elif plot_type == 'box': fig = px.box(df, x=x_col, y=y_col, title=title)
@@ -162,12 +149,9 @@ def add_plot_to_dashboard(state_dict, x_col, y_col, plot_type):
             counts = df[x_col].value_counts().nlargest(20)
             fig = px.bar(counts, x=counts.index, y=counts.values, title=f"Top 20 Categories for {x_col}")
             fig.update_xaxes(title=x_col)
-        
         if fig:
             fig.update_layout(template="plotly_dark")
             state_dict['dashboard_plots'].append(fig)
-        
-        # CORRECTED: Return the list of plots to the Gallery component
         return state_dict, state_dict['dashboard_plots']
     except Exception as e:
         gr.Warning(f"Plotting Error: {e}")
@@ -175,18 +159,15 @@ def add_plot_to_dashboard(state_dict, x_col, y_col, plot_type):
 
 def clear_dashboard(state_dict):
     state_dict['dashboard_plots'] = []
-    # CORRECTED: Return an empty list to clear the Gallery
     return state_dict, []
 
-# --- Page 3: AI Co-pilot ---
 def respond_to_chat(user_message, history, state_dict, api_key):
     if not api_key:
-        history.append((user_message, "I need a Gemini API key to function. Please provide it in the sidebar."))
+        history.append((user_message, "I need a Gemini API key to function..."))
         return history, *[gr.update(visible=False)] * 4
     if not state_dict:
         history.append((user_message, "Please upload a dataset first."))
         return history, *[gr.update(visible=False)] * 4
-
     history.append((user_message, None))
     metadata = state_dict['metadata']
     prompt = f"""
@@ -203,9 +184,7 @@ def respond_to_chat(user_message, history, state_dict, api_key):
         thought = response_json.get("thought", "Thinking...")
         code_to_run = response_json.get("code", "")
         explanation = response_json.get("explanation", "Here is the result.")
-        
         stdout, fig_result, df_result, error = safe_exec(code_to_run, {'df': state_dict['df'], 'px': px, 'pd': pd, 'np': np})
-
         history[-1] = (user_message, f"🤔 **Thought:** *{thought}*")
         
         output_updates = [gr.update(visible=False, value=None)] * 4
@@ -218,10 +197,9 @@ def respond_to_chat(user_message, history, state_dict, api_key):
             output_updates[0] = gr.update(visible=True, value=new_explanation)
         if error:
             output_updates[0] = gr.update(visible=True, value=f"**Phoenix Co-pilot:** I encountered an error. Here's the details:\n\n`{error}`")
-
         return history, *output_updates
     except Exception as e:
-        history[-1] = (user_message, f"A critical error occurred: {e}. The AI may have returned an invalid response.")
+        history[-1] = (user_message, f"A critical error occurred: {e}.")
         return history, *[gr.update(visible=False)] * 4
 
 # --- Gradio UI Definition ---
@@ -229,58 +207,105 @@ def create_gradio_interface():
     with gr.Blocks(theme=gr.themes.Glass(primary_hue="indigo", secondary_hue="blue"), css=CSS, title="Phoenix AI Data Explorer") as demo:
         global_state = gr.State({})
 
+        # --- CORRECTED: "Define-Then-Place" Pattern ---
+        # 1. DEFINE all interactive components first.
+        
+        # Sidebar components
+        cockpit_btn = gr.Button("📊 Data Cockpit", elem_classes="selected")
+        deep_dive_btn = gr.Button("🔍 Deep Dive Builder")
+        copilot_btn = gr.Button("🤖 AI Co-pilot")
+        file_input = gr.File(label="📁 Upload New CSV", file_types=[".csv"])
+        status_output = gr.Markdown("Status: Awaiting data...")
+        api_key_input = gr.Textbox(label="🔑 Gemini API Key", type="password", placeholder="Enter key here...")
+        suggestion_btn = gr.Button("Get Smart Suggestions", variant="secondary")
+        
+        # Cockpit page components
+        rows_stat = gr.Textbox("0", show_label=False, elem_classes="stat-card-value", interactive=False)
+        cols_stat = gr.Textbox("0", show_label=False, elem_classes="stat-card-value", interactive=False)
+        quality_stat = gr.Textbox("0%", show_label=False, elem_classes="stat-card-value", interactive=False)
+        time_cols_stat = gr.Textbox("0", show_label=False, elem_classes="stat-card-value", interactive=False)
+        suggestion_status = gr.Markdown(visible=True)
+        suggestion_buttons = [gr.Button(visible=False) for _ in range(5)]
+        
+        # Deep Dive page components
+        plot_type_dd = gr.Dropdown(['histogram', 'bar', 'scatter', 'box'], label="Plot Type", value='histogram')
+        x_col_dd = gr.Dropdown([], label="X-Axis / Column")
+        y_col_dd = gr.Dropdown([], label="Y-Axis (for Scatter/Box)")
+        add_plot_btn = gr.Button("Add to Dashboard", variant="primary")
+        clear_plots_btn = gr.Button("Clear Dashboard")
+        dashboard_gallery = gr.Gallery(label="📊 Your Custom Dashboard", height="auto", columns=2, preview=True)
+
+        # Co-pilot page components
+        chatbot = gr.Chatbot(height=400, label="Conversation with Co-pilot", show_copy_button=True)
+        copilot_explanation = gr.Markdown(visible=False, elem_classes="explanation-block")
+        copilot_code = gr.Code(language="python", visible=False, label="Executed Python Code")
+        copilot_plot = gr.Plot(visible=False, label="Generated Visualization")
+        copilot_table = gr.Dataframe(visible=False, label="Generated Table", wrap=True)
+        chat_input = gr.Textbox(label="Your Question", placeholder="e.g., 'What is the correlation between age and salary?'", scale=4)
+        chat_submit_btn = gr.Button("Submit", variant="primary")
+        
+        # 2. PLACE the defined components into the layout.
         with gr.Row():
-            # Sidebar
+            # Sidebar Layout
             with gr.Column(scale=1, elem_classes="sidebar"):
                 gr.Markdown("## 🚀 Phoenix UI")
-                cockpit_btn = gr.Button("📊 Data Cockpit", elem_classes="selected")
-                deep_dive_btn = gr.Button("🔍 Deep Dive Builder")
-                copilot_btn = gr.Button("🤖 AI Co-pilot")
+                cockpit_btn
+                deep_dive_btn
+                copilot_btn
                 gr.Markdown("---")
-                file_input = gr.File(label="📁 Upload New CSV", file_types=[".csv"])
-                status_output = gr.Markdown("Status: Awaiting data...")
+                file_input
+                status_output
                 gr.Markdown("---")
-                api_key_input = gr.Textbox(label="🔑 Gemini API Key", type="password", placeholder="Enter key here...")
-                suggestion_btn = gr.Button("Get Smart Suggestions", variant="secondary")
+                api_key_input
+                suggestion_btn
 
-            # Main Content Area
+            # Main Content Layout
             with gr.Column(scale=4):
                 with gr.Column(visible=True) as welcome_page:
                     gr.Markdown("# Welcome to the AI Data Explorer (Phoenix UI)")
                     gr.Markdown("Please **upload a CSV file** and **enter your Gemini API key** in the sidebar to begin.")
-                    gr.Image(value="workflow.png", label="Workflow", show_label=False, show_download_button=False, container=False)
+                    gr.Image(value="workflow.png", show_label=False, show_download_button=False, container=False)
 
                 with gr.Column(visible=False) as cockpit_page:
                     gr.Markdown("## 📊 Data Cockpit")
-                    # ... [Stat cards code remains the same] ...
-                    suggestion_status = gr.Markdown(visible=True)
+                    with gr.Row():
+                        with gr.Column(elem_classes="stat-card"):
+                            gr.Markdown("<div class='stat-card-title'>Rows</div>"); rows_stat
+                        with gr.Column(elem_classes="stat-card"):
+                            gr.Markdown("<div class='stat-card-title'>Columns</div>"); cols_stat
+                        with gr.Column(elem_classes="stat-card"):
+                            gr.Markdown("<div class='stat-card-title'>Data Quality</div>"); quality_stat
+                        with gr.Column(elem_classes="stat-card"):
+                            gr.Markdown("<div class='stat-card-title'>Date/Time Cols</div>"); time_cols_stat
+                    suggestion_status
                     with gr.Accordion(label="✨ AI Smart Suggestions", open=True):
-                         suggestion_buttons = [gr.Button(visible=False) for _ in range(5)]
+                        for btn in suggestion_buttons:
+                            btn
 
                 with gr.Column(visible=False) as deep_dive_page:
                     gr.Markdown("## 🔍 Deep Dive Dashboard Builder")
                     gr.Markdown("Create a custom dashboard by adding multiple plots to the gallery below.")
                     with gr.Row():
-                        plot_type_dd = gr.Dropdown(['histogram', 'bar', 'scatter', 'box'], label="Plot Type", value='histogram')
-                        x_col_dd = gr.Dropdown([], label="X-Axis / Column")
-                        y_col_dd = gr.Dropdown([], label="Y-Axis (for Scatter/Box)")
+                        plot_type_dd; x_col_dd; y_col_dd
                     with gr.Row():
-                        add_plot_btn = gr.Button("Add to Dashboard", variant="primary")
-                        clear_plots_btn = gr.Button("Clear Dashboard")
-                    
-                    # CORRECTED: Replaced Accordion with Gallery
-                    dashboard_gallery = gr.Gallery(label="📊 Your Custom Dashboard", height="auto", columns=2)
+                        add_plot_btn; clear_plots_btn
+                    dashboard_gallery
 
                 with gr.Column(visible=False) as copilot_page:
                     gr.Markdown("## 🤖 AI Co-pilot")
-                    # ... [Co-pilot code remains the same] ...
+                    chatbot
+                    with gr.Accordion("Co-pilot's Response Details", open=True):
+                        copilot_explanation; copilot_code; copilot_plot; copilot_table
+                    with gr.Row():
+                        chat_input; chat_submit_btn
 
-        # --- Event Handlers ---
+        # 3. DEFINE all event handlers. Now all component variables are guaranteed to exist.
         pages = [cockpit_page, deep_dive_page, copilot_page]
         nav_buttons = [cockpit_btn, deep_dive_btn, copilot_btn]
         
         for i, btn in enumerate(nav_buttons):
-            btn.click(lambda i=i: switch_page(nav_buttons[i].value.lower().replace(" ", "_").split(" ")[-1]), outputs=pages) \
+            page_name = btn.value.lower().replace(" ", "_").split(" ")[-1]
+            btn.click(lambda name=page_name: switch_page(name), outputs=pages) \
                .then(lambda i=i: [gr.update(elem_classes="selected" if j==i else "") for j in range(len(nav_buttons))], outputs=nav_buttons)
 
         file_input.upload(load_and_process_file, [file_input, global_state],
@@ -296,7 +321,6 @@ def create_gradio_interface():
             btn.click(handle_suggestion_click, inputs=[btn], outputs=[cockpit_page, deep_dive_page, copilot_page, chat_input]) \
                .then(lambda: (gr.update(elem_classes=""), gr.update(elem_classes=""), gr.update(elem_classes="selected")), outputs=nav_buttons)
 
-        # CORRECTED: Event handlers now output to the gallery
         add_plot_btn.click(add_plot_to_dashboard, [global_state, x_col_dd, y_col_dd, plot_type_dd], [global_state, dashboard_gallery])
         clear_plots_btn.click(clear_dashboard, [global_state], [global_state, dashboard_gallery])