Update app.py

app.py

@@ -118,30 +118,36 @@ def get_system_stats() -> str:
 
 def create_optimized_gradio_interface():
     with gr.Blocks(
-        css=get_custom_css(),
+        css=get_custom_css() + """
+        #role-selection-box {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 90vh;
+            gap: 1rem;
+        }
+        .gr-button {
+            width: 350px;
+            font-size: 1.1rem;
+        }
+        """,
         title="🏥 Optimized Gaza First Aid Assistant",
         theme=gr.themes.Soft(primary_hue="blue", secondary_hue="green", neutral_hue="slate")
     ) as interface:
-        
-        # Track the selected role
+
         user_role = gr.State()
 
-        # === STEP 1: Start Screen (Role Selection) ===
-        
-        with gr.Group(visible=True) as role_selection_group:
+        # Role Selection UI
+        with gr.Column(elem_id="role-selection-box", visible=True) as role_selection_group:
             role_title = gr.Markdown("### 🧑‍⚕️ Select Your Role to Begin")
-            with gr.Row():
-                with gr.Column():
-                    volunteer_btn = gr.Button("🙋 I'm a Volunteer", size="lg")
-                    with gr.Column():
-                        organizer_btn = gr.Button("📋 I'm an Event Organizer", size="lg")
+            volunteer_btn = gr.Button("👯 I'm a Volunteer")
+            organizer_btn = gr.Button("📋 I'm an Event Organizer")
 
-        
         divider = gr.Markdown("---")
 
-        # === STEP 2: Main UI (initially hidden) ===
+        # Main UI (Hidden at first)
         with gr.Column(visible=False) as main_ui:
-
             with gr.Row(elem_classes=["main-container"]):
                 create_header_section()
 
@@ -170,7 +176,6 @@ def create_optimized_gradio_interface():
             with gr.Row(elem_classes=["main-container"]):
                 create_example_scenarios(query_input)
 
-            # === Interactions ===
             submit_btn.click(
                 process_medical_query_with_progress,
                 inputs=query_input,
@@ -218,45 +223,45 @@ def create_optimized_gradio_interface():
                 outputs=stats_display
             )
 
-        # === STEP 3: Button logic to reveal main interface ===
-
+        # Button Logic
         def set_user_role(role):
             return (
-                role,                 # set user_role state
+                role,
                 gr.update(visible=True),   # show main UI
                 gr.update(visible=False),  # hide role title
                 gr.update(visible=False),  # hide volunteer_btn
                 gr.update(visible=False),  # hide organizer_btn
-                gr.update(visible=False),  # hide whole group
-            )
-            
-            volunteer_btn.click(
-                lambda: set_user_role("volunteer"),
-                outputs=[
-                    user_role,
-                    main_ui,
-                    role_title,
-                    volunteer_btn,
-                    organizer_btn,
-                    role_selection_group
-                ]
+                gr.update(visible=False)   # hide full group
             )
-            
-            organizer_btn.click(
-                lambda: set_user_role("organizer"),
-                outputs=[
-                    user_role,
-                    main_ui,
-                    role_title,
-                    volunteer_btn,
-                    organizer_btn,
-                    role_selection_group
-                ]
-            )
-            
+
+        volunteer_btn.click(
+            lambda: set_user_role("volunteer"),
+            outputs=[
+                user_role,
+                main_ui,
+                role_title,
+                volunteer_btn,
+                organizer_btn,
+                role_selection_group
+            ]
+        )
+
+        organizer_btn.click(
+            lambda: set_user_role("organizer"),
+            outputs=[
+                user_role,
+                main_ui,
+                role_title,
+                volunteer_btn,
+                organizer_btn,
+                role_selection_group
+            ]
+        )
+
     return interface
 
 
+
 def main():
     logger.info("🚀 Starting Optimized Gaza First Aid Assistant")