Update app.py

app.py

@@ -325,6 +325,8 @@ async def unified_chat_handler(message, history, session_id, current_img_path):
         history.append({"role": "user", "content": f"![](file={image_path})\n\n{user_text}"})
         history.append({"role": "assistant", "content": "🔄 Starting analysis (Model loading may take a moment)..."})
 
+        # YIELD 1: Set initial visibility state ONCE
+        # Hide Welcome, Show Loading, Hide Results
         yield history, session_id, image_path, gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), *empty_slider_updates, None, gr.update(visible=False), gr.update(visible=True), gr.update(visible=False)
         
         final_result = None
@@ -333,12 +335,16 @@ async def unified_chat_handler(message, history, session_id, current_img_path):
             updated_history = result[0].copy()
             if files and len(updated_history) > 0:
                 updated_history[0] = {"role": "user", "content": f"![](file={image_path})\n\n{user_text}"}
-            yield (updated_history, result[1], image_path, *result[2:], None, gr.update(visible=False), gr.update(visible=True), gr.update(visible=False))
+            
+            # YIELD LOOP: Pass gr.update() for visibility to prevent flickering
+            yield (updated_history, result[1], image_path, *result[2:], None, gr.update(), gr.update(), gr.update())
         
         if final_result:
             updated_history = final_result[0].copy()
             if files and len(updated_history) > 0:
                 updated_history[0] = {"role": "user", "content": f"![](file={image_path})\n\n{user_text}"}
+            
+            # YIELD FINAL: Show Results, Hide Loading
             yield (updated_history, final_result[1], image_path, *final_result[2:], None, gr.update(visible=False), gr.update(visible=False), gr.update(visible=True))
         return
 
@@ -379,8 +385,8 @@ async def unified_chat_handler(message, history, session_id, current_img_path):
 custom_css = """
 /* 1. Global Margin Setting */
 #main_container {
-    margin-left: 10% !important;
-    margin-right: 10% !important;
+    margin-left: 20% !important;
+    margin-right: 20% !important;
     width: auto !important;
 }
 
@@ -437,7 +443,7 @@ with gr.Blocks(title="Cellemetry Agent", css=custom_css) as demo:
                 # Welcome overlay (Visible Initially)
                 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="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 780px; padding: 40px; background: #ffffff; 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;">
@@ -466,7 +472,6 @@ with gr.Blocks(title="Cellemetry Agent", css=custom_css) as demo:
                     """)
                 
                 # Results tabs (Hidden Initially)
-                # FIX: Added bordered-panel class for consistent blue border
                 with gr.Column(visible=False, elem_classes=["bordered-panel"]) as results_container:
                     with gr.Tabs() as results_tabs:
                         with gr.Tab("🔍 Segmentation"):