Update app.py

app.py

@@ -19,7 +19,7 @@ from google.adk.runners import InMemoryRunner
 from google.genai import types
 
 # Project Imports
-# Wrap imports to prevent immediate crash if dependencies are missing or slow to load
+# Wrap imports to prevent immediate crash if dependencies are missing
 try:
     from cellemetry import root_agent
     from cellemetry.config import AnalysisDeps
@@ -178,7 +178,6 @@ async def run_analysis(image_path_str, user_prompt, session_id_state):
     # Lazy Load: Ensure model is loaded before inference
     if not MODEL_CACHE["loaded"]:
         yield [], None, None, [], None, waiting_df, waiting_df, waiting_df, *empty_slider_updates
-        # Load model synchronously if triggered here
         load_models() 
 
     if not image_path_str:
@@ -359,79 +358,106 @@ async def unified_chat_handler(message, history, session_id, current_img_path):
         yield history, session_id, current_img_path, gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), *empty_slider_updates, None, gr.update(), gr.update(), gr.update()
 
 # --- UI Layout ---
-with gr.Blocks(title="Cellemetry Agent") as demo:
+
+# CSS to handle margins and width consistency
+custom_css = """
+/* 1. Global Margin Setting */
+#main_container {
+    margin-left: 20% !important;
+    margin-right: 20% !important;
+    width: auto !important;
+}
+
+/* 2. Fix Tab Width Consistency (Right Panel) */
+/* We enforce a minimum width so the panel doesn't shrink when switching to empty dataframes */
+.right-panel {
+    min-width: 600px !important;
+    flex-grow: 2 !important;
+}
+"""
+
+with gr.Blocks(title="Cellemetry Agent", css=custom_css) as demo:
     session_id_state = gr.State(None)
     current_image_path = gr.State(None)
     
-    with gr.Row():
-        with gr.Column(scale=1):
-            chatbot = gr.Chatbot(
-                label="Agent Conversation", 
-                height=600, 
-                value=[{"role": "assistant", "content": "👋 Welcome to Cellemetry! Upload a microscopy image and describe what you'd like to analyze."}],
-                show_label=True
-                # REMOVED: type="messages" (This caused the TypeError on older Gradio versions)
-            )
-            chat_input = gr.MultimodalTextbox(
-                file_types=["image"],
-                placeholder="Upload an image and describe your analysis...",
-                show_label=False,
-                submit_btn="Send"
-            )
-
-        with gr.Column(scale=2):
-            with gr.Column(visible=True, elem_id="welcome-overlay") as welcome_overlay:
-                gr.HTML(f"""
-                    <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 780px; padding: 40px; background: #f8f9fa; border-radius: 8px; border: 2px solid #3498db;">
-                        <div style="text-align: center;">
-                            <div style='text-align: center;'>
-                                <img src="https://raw.githubusercontent.com/hmgill/Cellemetry/main/logo.png" alt="Logo" style="height:200px; display: block; margin: 0 auto;">
-                            </div>
-                            <h2 style="color: #333; margin: 20px 0 10px; font-weight: 600; font-size: 28px;">Welcome to Cellemetry</h2>
-                            <p style="color: #666; font-size: 16px; max-width: 400px; margin: 0 auto 30px; line-height: 1.6;">Upload a microscopy image to get started with AI-powered cell analysis and segmentation</p>
-                            <div style="padding: 20px; background: #fff; border-radius: 8px; border-left: 4px solid #3498db; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
-                                <p style="color: #555; margin: 0; font-size: 14px;">👈 Use the chat on the left to begin</p>
+    # WRAPPER to apply 20% margins
+    with gr.Column(elem_id="main_container"):
+        
+        with gr.Row():
+            # --- LEFT COLUMN (Chat) ---
+            with gr.Column(scale=1, min_width=300):
+                chatbot = gr.Chatbot(
+                    label="Agent Conversation", 
+                    height=600, 
+                    value=[{"role": "assistant", "content": "👋 Welcome to Cellemetry! Upload a microscopy image and describe what you'd like to analyze."}],
+                    show_label=True
+                )
+                chat_input = gr.MultimodalTextbox(
+                    file_types=["image"],
+                    placeholder="Upload an image and describe your analysis...",
+                    show_label=False,
+                    submit_btn="Send"
+                )
+
+            # --- RIGHT COLUMN (Results) ---
+            # Added 'right-panel' class for CSS width enforcement
+            with gr.Column(scale=2, elem_classes=["right-panel"]):
+                
+                # Welcome overlay
+                with gr.Column(visible=True, elem_id="welcome-overlay") as welcome_overlay:
+                    gr.HTML(f"""
+                        <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 780px; padding: 40px; background: #f8f9fa; border-radius: 8px; border: 2px solid #3498db;">
+                            <div style="text-align: center;">
+                                <div style='text-align: center;'>
+                                    <img src="https://raw.githubusercontent.com/hmgill/Cellemetry/main/logo.png" alt="Logo" style="height:200px; display: block; margin: 0 auto;">
+                                </div>
+                                <h2 style="color: #333; margin: 20px 0 10px; font-weight: 600; font-size: 28px;">Welcome to Cellemetry</h2>
+                                <p style="color: #666; font-size: 16px; max-width: 400px; margin: 0 auto 30px; line-height: 1.6;">Upload a microscopy image to get started with AI-powered cell analysis and segmentation</p>
+                                <div style="padding: 20px; background: #fff; border-radius: 8px; border-left: 4px solid #3498db; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
+                                    <p style="color: #555; margin: 0; font-size: 14px;">👈 Use the chat on the left to begin</p>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                    """
-                )
-            
-            with gr.Column(visible=False, elem_id="loading-overlay") as loading_overlay:
-                gr.HTML("""
-                    <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 780px; background: rgba(255, 255, 255, 0.95); border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
-                        <div style="text-align: center;">
-                            <div style="border: 8px solid #f3f3f3; border-top: 8px solid #3498db; border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; margin: 0 auto 20px;"></div>
-                            <h3 style="color: #555; margin: 0;">⚙️ Analysis in Progress</h3>
-                            <p style="color: #888; margin-top: 10px;">Please wait while we process your microscopy image...</p>
+                        """
+                    )
+                
+                # Loading overlay
+                with gr.Column(visible=False, elem_id="loading-overlay") as loading_overlay:
+                    gr.HTML("""
+                        <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 780px; background: rgba(255, 255, 255, 0.95); border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
+                            <div style="text-align: center;">
+                                <div style="border: 8px solid #f3f3f3; border-top: 8px solid #3498db; border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; margin: 0 auto 20px;"></div>
+                                <h3 style="color: #555; margin: 0;">⚙️ Analysis in Progress</h3>
+                                <p style="color: #888; margin-top: 10px;">Please wait while we process your microscopy image...</p>
+                            </div>
+                            <style>@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }</style>
                         </div>
-                        <style>@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }</style>
-                    </div>
-                """)
-            
-            with gr.Tabs(visible=False) as results_tabs:
-                with gr.Tab("🔍 Segmentation"):
-                    with gr.Row():
-                        with gr.Column(scale=3):
-                            overlay_output = gr.Image(label="Segmentation Result", height=780, type="pil")
-                        with gr.Column(scale=1):
-                            gr.Markdown("**Layer Controls**")
-                            layer_checkboxes = gr.CheckboxGroup(label="Visible Layers", choices=[], value=[], interactive=True)
-                            gr.Markdown("**Opacity Controls**")
-                            opacity_slider_1 = gr.Slider(minimum=0, maximum=1, value=0.6, step=0.1, label="Layer 1 Opacity", visible=False)
-                            opacity_slider_2 = gr.Slider(minimum=0, maximum=1, value=0.6, step=0.1, label="Layer 2 Opacity", visible=False)
-                            opacity_slider_3 = gr.Slider(minimum=0, maximum=1, value=0.6, step=0.1, label="Layer 3 Opacity", visible=False)
-                            opacity_slider_4 = gr.Slider(minimum=0, maximum=1, value=0.6, step=0.1, label="Layer 4 Opacity", visible=False)
+                    """)
                 
-                with gr.Tab("📊 Quantitative Results"):
-                    download_btn = gr.File(label="Download Excel Report")
-                    with gr.Tabs():
-                        with gr.Tab("Morphology"):
-                            tbl_morph = gr.Dataframe(interactive=False, wrap=True)
-                        with gr.Tab("Spatial"):
-                            tbl_spatial = gr.Dataframe(interactive=False, wrap=True)
-                        with gr.Tab("Relational"):
-                            tbl_rel = gr.Dataframe(interactive=False, wrap=True)
+                # Results tabs
+                with gr.Tabs(visible=False) as results_tabs:
+                    with gr.Tab("🔍 Segmentation"):
+                        with gr.Row():
+                            with gr.Column(scale=3):
+                                overlay_output = gr.Image(label="Segmentation Result", height=780, type="pil")
+                            with gr.Column(scale=1):
+                                gr.Markdown("**Layer Controls**")
+                                layer_checkboxes = gr.CheckboxGroup(label="Visible Layers", choices=[], value=[], interactive=True)
+                                gr.Markdown("**Opacity Controls**")
+                                opacity_slider_1 = gr.Slider(minimum=0, maximum=1, value=0.6, step=0.1, label="Layer 1 Opacity", visible=False)
+                                opacity_slider_2 = gr.Slider(minimum=0, maximum=1, value=0.6, step=0.1, label="Layer 2 Opacity", visible=False)
+                                opacity_slider_3 = gr.Slider(minimum=0, maximum=1, value=0.6, step=0.1, label="Layer 3 Opacity", visible=False)
+                                opacity_slider_4 = gr.Slider(minimum=0, maximum=1, value=0.6, step=0.1, label="Layer 4 Opacity", visible=False)
+                    
+                    with gr.Tab("📊 Quantitative Results"):
+                        download_btn = gr.File(label="Download Excel Report")
+                        with gr.Tabs():
+                            with gr.Tab("Morphology"):
+                                tbl_morph = gr.Dataframe(interactive=False, wrap=True)
+                            with gr.Tab("Spatial"):
+                                tbl_spatial = gr.Dataframe(interactive=False, wrap=True)
+                            with gr.Tab("Relational"):
+                                tbl_rel = gr.Dataframe(interactive=False, wrap=True)
 
     def regenerate_overlay_with_opacity(img_path, selected_layers, op1, op2, op3, op4):
         if not img_path or not selected_layers: return None