Update app.py

app.py

@@ -13,19 +13,22 @@ from contextlib import redirect_stdout
 
 # --- Configuration ---
 warnings.filterwarnings('ignore')
+
+# --- NEW: Expert-Crafted Dark Theme CSS ---
+# This CSS is designed to work with a dark theme, ensuring all elements are visible and stylish.
 CSS = """
-/* --- Phoenix UI Custom CSS --- */
+/* --- Phoenix UI Custom Dark CSS --- */
 /* Stat Card Styling */
 .stat-card {
     border-radius: 12px !important;
     padding: 20px !important;
-    background: #f7fafc; /* light gray background */
-    border: 1px solid #e2e8f0;
+    background: #1f2937 !important; /* Dark blue-gray background */
+    border: 1px solid #374151 !important;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     text-align: center;
 }
-.stat-card-title { font-size: 16px; font-weight: 500; color: #4a5568; margin-bottom: 8px; }
-.stat-card-value { font-size: 32px; font-weight: 700; color: #2d3748; }
+.stat-card-title { font-size: 16px; font-weight: 500; color: #9ca3af !important; margin-bottom: 8px; }
+.stat-card-value { font-size: 32px; font-weight: 700; color: #f9fafb !important; }
 
 /* General Layout & Feel */
 .gradio-container { font-family: 'Inter', sans-serif; }
@@ -33,9 +36,9 @@ CSS = """
 
 /* Sidebar Styling */
 .sidebar {
-    background-color: #f9fafb;
+    background-color: #111827 !important; /* Very dark blue-gray */
     padding: 15px;
-    border-right: 1px solid #e5e7eb;
+    border-right: 1px solid #374151 !important;
     min-height: 100vh;
 }
 .sidebar .gr-button {
@@ -44,18 +47,23 @@ CSS = """
     background: none !important;
     border: none !important;
     box-shadow: none !important;
-    color: #374151 !important;
+    color: #d1d5db !important; /* Light gray text for readability */
     font-size: 16px !important;
     padding: 12px 10px !important;
     margin-bottom: 8px !important;
     border-radius: 8px !important;
 }
-.sidebar .gr-button:hover { background-color: #e5e7eb !important; }
-.sidebar .gr-button.selected { background-color: #d1d5db !important; font-weight: 600 !important; }
+.sidebar .gr-button:hover { background-color: #374151 !important; } /* Hover state */
+.sidebar .gr-button.selected { background-color: #4f46e5 !important; font-weight: 600 !important; color: white !important; } /* Selected state with primary color */
 
 /* AI Co-pilot Styling */
-.code-block { border: 1px solid #e5e7eb; border-radius: 8px; }
-.explanation-block { background-color: #f0f9ff; border-left: 4px solid #3b82f6; padding: 12px; }
+.code-block { border: 1px solid #374151 !important; border-radius: 8px; }
+.explanation-block {
+    background-color: #1e3a8a !important; /* Dark blue background */
+    border-left: 4px solid #3b82f6 !important; /* Brighter blue border */
+    padding: 12px;
+    color: #e5e7eb !important;
+}
 """
 
 # --- Helper Functions ---
@@ -140,8 +148,8 @@ def switch_page(page_name):
 # --- Page 1: Data Cockpit ---
 def get_ai_suggestions(state_dict, api_key):
     """Generates proactive analytical suggestions from the AI."""
-    if not api_key: return "Enter your Gemini API key to get suggestions.", gr.update(visible=False)
-    if not state_dict: return "Upload data first.", gr.update(visible=False)
+    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"""
@@ -159,9 +167,7 @@ def get_ai_suggestions(state_dict, api_key):
         response = model.generate_content(prompt)
         suggestions = json.loads(response.text)
         
-        # Create a button for each suggestion
         buttons = [gr.Button(s, variant="secondary", visible=True) for s in suggestions]
-        # Pad with hidden buttons to always have 5 outputs
         buttons += [gr.Button(visible=False)] * (5 - len(buttons))
 
         return gr.update(visible=False), *buttons
@@ -197,9 +203,9 @@ def add_plot_to_dashboard(state_dict, x_col, y_col, plot_type):
             fig.update_xaxes(title=x_col)
         
         if fig:
+            fig.update_layout(template="plotly_dark") # Ensure plots match the dark theme
             state_dict['dashboard_plots'].append(fig)
         
-        # Rebuild the accordion with all plots
         accordion_children = [gr.Plot(fig, visible=True) for fig in state_dict['dashboard_plots']]
         return state_dict, gr.Accordion(label="Your Dashboard Plots", children=accordion_children, open=True)
     except Exception as e:
@@ -232,7 +238,7 @@ def respond_to_chat(user_message, history, state_dict, api_key):
     2.  Formulate a plan (thought process).
     3.  Write Python code to execute that plan.
     4.  The code can use pandas (pd), numpy (np), and plotly.express (px).
-    5.  **For plots, assign the figure to a variable `fig` (e.g., `fig = px.histogram(...)`).**
+    5.  **For plots, assign the figure to a variable `fig` (e.g., `fig = px.histogram(...)`). IMPORTANT: you MUST add `template='plotly_dark'` to all plotly figures to match the UI theme.**
     6.  **For table-like results, assign the final DataFrame to a variable `result_df` (e.g., `result_df = df.describe()`).**
     7.  Do not modify the original `df`. Use `df.copy()` if needed.
     8.  Provide a brief, user-friendly explanation of the result.
@@ -264,15 +270,13 @@ def respond_to_chat(user_message, history, state_dict, api_key):
         bot_message = f"🤔 **Thought:** *{thought}*"
         history[-1] = (user_message, bot_message)
         
-        # Prepare outputs, making them visible only if they contain content
-        output_updates = [gr.update(visible=False, value=None)] * 4 # [explanation, code, plot, table]
+        output_updates = [gr.update(visible=False, value=None)] * 4
         
         if explanation: output_updates[0] = gr.update(visible=True, value=f"**Phoenix Co-pilot:** {explanation}")
         if code_to_run: output_updates[1] = gr.update(visible=True, value=code_to_run)
         if fig_result: output_updates[2] = gr.update(visible=True, value=fig_result)
         if df_result is not None: output_updates[3] = gr.update(visible=True, value=df_result)
         if stdout:
-            # Append stdout to explanation if it exists
             new_explanation = (output_updates[0]['value'] if output_updates[0]['visible'] else "") + f"\n\n**Console Output:**\n```\n{stdout}\n```"
             output_updates[0] = gr.update(visible=True, value=new_explanation)
         if error:
@@ -288,14 +292,14 @@ def respond_to_chat(user_message, history, state_dict, api_key):
 
 # --- Gradio UI Definition ---
 def create_gradio_interface():
-    with gr.Blocks(theme=gr.themes.Monochrome(primary_hue="indigo", secondary_hue="blue"), css=CSS, title="Phoenix AI Data Explorer") as demo:
+    # --- CORRECTED: Using a standard dark theme + custom dark CSS ---
+    with gr.Blocks(theme=gr.themes.Default(primary_hue="indigo", secondary_hue="blue").dark(), css=CSS, title="Phoenix AI Data Explorer") as demo:
         global_state = gr.State({})
 
         with gr.Row():
             # --- Sidebar ---
             with gr.Column(scale=1, elem_classes="sidebar"):
-                gr.Markdown("# 🚀 Phoenix UI")
-                gr.Markdown("AI Data Explorer")
+                gr.Markdown("## 🚀 Phoenix UI")
                 
                 # Navigation buttons
                 cockpit_btn = gr.Button("📊 Data Cockpit", elem_classes="selected")
@@ -316,7 +320,6 @@ def create_gradio_interface():
                 with gr.Column(visible=True) as welcome_page:
                     gr.Markdown("# Welcome to the AI Data Explorer (Phoenix UI)", elem_id="welcome-header")
                     gr.Markdown("Please **upload a CSV file** and **enter your Gemini API key** in the sidebar to begin.")
-                    # CORRECTED: Uses a local file, 'workflow.png', which must be in the same directory.
                     gr.Image(value="workflow.png", label="Workflow", show_label=False, show_download_button=False, container=False)
 
                 # Page 1: Data Cockpit (Hidden initially)
@@ -324,16 +327,16 @@ def create_gradio_interface():
                     gr.Markdown("## 📊 Data Cockpit")
                     with gr.Row():
                         with gr.Column(elem_classes="stat-card"):
-                            gr.Markdown("<div class='stat-card-title'>Rows</div>", elem_classes="stat-card-content")
+                            gr.Markdown("<div class='stat-card-title'>Rows</div>")
                             rows_stat = gr.Textbox("0", show_label=False, elem_classes="stat-card-value")
                         with gr.Column(elem_classes="stat-card"):
-                            gr.Markdown("<div class='stat-card-title'>Columns</div>", elem_classes="stat-card-content")
+                            gr.Markdown("<div class='stat-card-title'>Columns</div>")
                             cols_stat = gr.Textbox("0", show_label=False, elem_classes="stat-card-value")
                         with gr.Column(elem_classes="stat-card"):
-                            gr.Markdown("<div class='stat-card-title'>Data Quality</div>", elem_classes="stat-card-content")
+                            gr.Markdown("<div class='stat-card-title'>Data Quality</div>")
                             quality_stat = gr.Textbox("0%", show_label=False, elem_classes="stat-card-value")
                         with gr.Column(elem_classes="stat-card"):
-                            gr.Markdown("<div class='stat-card-title'>Date/Time Cols</div>", elem_classes="stat-card-content")
+                            gr.Markdown("<div class='stat-card-title'>Date/Time Cols</div>")
                             time_cols_stat = gr.Textbox("0", show_label=False, elem_classes="stat-card-value")
 
                     suggestion_status = gr.Markdown(visible=True)
@@ -374,13 +377,8 @@ def create_gradio_interface():
         nav_buttons = [cockpit_btn, deep_dive_btn, copilot_btn]
         
         for i, btn in enumerate(nav_buttons):
-            btn.click(
-                lambda i=i: (gr.update(visible=i==0), gr.update(visible=i==1), gr.update(visible=i==2)),
-                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
-            )
+            btn.click(lambda i=i: (gr.update(visible=i==0), gr.update(visible=i==1), gr.update(visible=i==2)), 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(
             fn=load_and_process_file,
@@ -388,41 +386,22 @@ def create_gradio_interface():
             outputs=[global_state, status_output, welcome_page, cockpit_page, deep_dive_page, copilot_page,
                      rows_stat, cols_stat, quality_stat, time_cols_stat,
                      x_col_dd, y_col_dd, plot_type_dd]
-        ).then(
-            lambda: (gr.update(visible=True), gr.update(visible=False), gr.update(visible=False)), outputs=pages
-        ).then(
-            lambda: (gr.update(elem_classes="selected"), gr.update(elem_classes=""), gr.update(elem_classes="")), outputs=nav_buttons
-        )
+        ).then(lambda: (gr.update(visible=True), gr.update(visible=False), gr.update(visible=False)), outputs=pages) \
+         .then(lambda: (gr.update(elem_classes="selected"), gr.update(elem_classes=""), gr.update(elem_classes="")), outputs=nav_buttons)
         
-        suggestion_btn.click(
-            get_ai_suggestions,
-            [global_state, api_key_input],
-            [suggestion_status, *suggestion_buttons]
-        )
+        suggestion_btn.click(get_ai_suggestions, [global_state, api_key_input], [suggestion_status, *suggestion_buttons])
         
         for btn in suggestion_buttons:
-            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
-            )
+            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)
 
         add_plot_btn.click(add_plot_to_dashboard, [global_state, x_col_dd, y_col_dd, plot_type_dd], [global_state, dashboard_accordion])
         clear_plots_btn.click(clear_dashboard, [global_state], [global_state, dashboard_accordion])
 
-        chat_submit_btn.click(
-            respond_to_chat, 
-            [chat_input, chatbot, global_state, api_key_input], 
-            [chatbot, copilot_explanation, copilot_code, copilot_plot, copilot_table]
-        ).then(lambda: "", outputs=[chat_input])
-        chat_input.submit(
-            respond_to_chat, 
-            [chat_input, chatbot, global_state, api_key_input], 
-            [chatbot, copilot_explanation, copilot_code, copilot_plot, copilot_table]
-        ).then(lambda: "", outputs=[chat_input])
+        chat_submit_btn.click(respond_to_chat, [chat_input, chatbot, global_state, api_key_input], [chatbot, copilot_explanation, copilot_code, copilot_plot, copilot_table]) \
+                       .then(lambda: "", outputs=[chat_input])
+        chat_input.submit(respond_to_chat, [chat_input, chatbot, global_state, api_key_input], [chatbot, copilot_explanation, copilot_code, copilot_plot, copilot_table]) \
+                     .then(lambda: "", outputs=[chat_input])
 
     return demo