Update app.py

app.py

@@ -127,13 +127,15 @@ def create_optimized_gradio_interface():
         user_role = gr.State()
 
         # === STEP 1: Start Screen (Role Selection) ===
-        with gr.Row():
-            gr.Markdown("## 👤 Select Your Role to Begin")
+        
+        with gr.Group(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")
 
-        with gr.Row():
-            with gr.Column():
-                volunteer_btn = gr.Button("🧑‍🤝‍🧑 I'm a Volunteer", size="lg")
-                organizer_btn = gr.Button("📋 I'm an Event Organizer", size="lg")
         
         divider = gr.Markdown("---")
 
@@ -219,17 +221,39 @@ def create_optimized_gradio_interface():
         # === STEP 3: Button logic to reveal main interface ===
 
         def set_user_role(role):
-            return role, gr.update(visible=True), gr.update(visible=False), gr.update(visible=False), gr.update(visible=False)
+    return (
+        role,                 # set user_role state
+        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
+    ]
+)
 
-        volunteer_btn.click(
-            lambda: set_user_role("volunteer"),
-            outputs=[user_role, main_ui, volunteer_btn, organizer_btn, divider]
-        )
+organizer_btn.click(
+    lambda: set_user_role("organizer"),
+    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, volunteer_btn, organizer_btn, divider]
-        )
 
     return interface