Implement modal popup for registration - fixes visibility bug completely

app.py

@@ -709,53 +709,10 @@ with gr.Blocks(title="AnatomyBot - MBBS Anatomy Tutor") as demo:
     current_question_idx = gr.State(0)
     current_topic = gr.State("")
     current_image_state = gr.State(None)
+    is_registered = gr.State(False)  # Track if user has registered
     
-    # Welcome Screen (shown first)
-    with gr.Column(visible=True) as welcome_screen:
-        gr.Markdown(
-            """
-            # 🩺 Welcome to AnatomyBot
-            ### Your Personal MBBS Anatomy Tutor
-            
-            Master anatomy through AI-powered learning and interactive VIVA practice!
-            """
-        )
-        gr.Markdown("---")
-        gr.Markdown("## 👨‍⚕️ Let's Get Started!")
-        gr.Markdown("Please enter your information to begin your personalized learning journey.")
-        
-        with gr.Row():
-            with gr.Column(scale=1):
-                pass  # Empty column for centering
-            with gr.Column(scale=2):
-                welcome_name_input = gr.Textbox(
-                    label="Your Name",
-                    placeholder="Enter your name (e.g., Ahmed, Sarah, etc.)",
-                    lines=1,
-                    scale=1
-                )
-                welcome_school_input = gr.Textbox(
-                    label="Medical School",
-                    placeholder="Enter your medical school (e.g., King Saud University)",
-                    lines=1,
-                    scale=1
-                )
-                welcome_year_input = gr.Dropdown(
-                    label="Year/Level",
-                    choices=["MBBS 1st Year", "MBBS 2nd Year", "MBBS 3rd Year", "MBBS Final Year", "Intern"],
-                    value=None,
-                    interactive=True
-                )
-                welcome_submit_btn = gr.Button(
-                    "🚀 Start Learning",
-                    variant="primary",
-                    size="lg"
-                )
-            with gr.Column(scale=1):
-                pass  # Empty column for centering
-    
-    # Main Application (hidden initially)
-    with gr.Column(visible=False, elem_id="main_app_container") as main_app:
+    # Main Application (always visible now)
+    with gr.Column() as main_app:
         gr.Markdown(
             """
             # 🩺 AnatomyBot - Your MBBS Anatomy Tutor
@@ -970,50 +927,71 @@ with gr.Blocks(title="AnatomyBot - MBBS Anatomy Tutor") as demo:
                         interactive=False,
                         wrap=True
                     )
-        
+    
+    # Registration Modal Popup (shown on first load)
+    with gr.Column(visible=True, elem_id="registration_modal") as registration_modal:
+        with gr.Row():
+            with gr.Column(scale=1):
+                pass  # Spacer
+            with gr.Column(scale=2):
+                gr.Markdown(
+                    """
+                    # 👨‍⚕️ Welcome to AnatomyBot!
+                    ### Please enter your information to get started
+                    """
+                )
+                modal_name_input = gr.Textbox(
+                    label="Your Name",
+                    placeholder="Enter your name",
+                    lines=1
+                )
+                modal_school_input = gr.Textbox(
+                    label="Medical School",
+                    placeholder="Enter your medical school",
+                    lines=1
+                )
+                modal_year_input = gr.Dropdown(
+                    label="Year/Level",
+                    choices=["MBBS 1st Year", "MBBS 2nd Year", "MBBS 3rd Year", "MBBS Final Year", "Intern"],
+                    value=None
+                )
+                modal_submit_btn = gr.Button(
+                    "✅ Start Learning",
+                    variant="primary",
+                    size="lg"
+                )
+            with gr.Column(scale=1):
+                pass  # Spacer
 
     
-    # Welcome Screen Handler
-    def handle_welcome_submit(name, medical_school, year):
-        """Handle welcome screen submission."""
+    # Event Handlers
+    
+    # Welcome Screen Handler (now for modal)
+    def handle_modal_submit(name, medical_school, year):
+        """Handle registration modal submission."""
         if not name or not name.strip():
-            return gr.update(), gr.update(), gr.update(), gr.update(), ""  # Don't proceed if name is empty
+            return gr.update(), gr.update(), ""  # Don't proceed if name is empty
         
         if not medical_school or not medical_school.strip():
-            return gr.update(), gr.update(), gr.update(), gr.update(), ""  # Don't proceed if medical school is empty
+            return gr.update(), gr.update(), ""  # Don't proceed if medical school is empty
         
         if not year:
-            return gr.update(), gr.update(), gr.update(), gr.update(), ""  # Don't proceed if year is not selected
+            return gr.update(), gr.update(), ""  # Don't proceed if year is not selected
         
         # Save to database
         save_student(name.strip(), medical_school.strip(), year)
         
         greeting = f"**Welcome, Doctor {name}!** 👋 from {medical_school} ({year})"
         return (
-            gr.update(visible=False),  # Hide welcome screen
-            gr.update(visible=True),   # Show main app
-            gr.update(visible=True),   # Show tabs
+            gr.update(visible=False),  # Hide modal
             greeting,                   # Display greeting
             name                        # Store name in state
         )
     
-    welcome_submit_btn.click(
-        fn=handle_welcome_submit,
-        inputs=[welcome_name_input, welcome_school_input, welcome_year_input],
-        outputs=[welcome_screen, main_app, tabs, student_name_display, student_name_state]
-    )
-    
-    # Also allow Enter key to submit
-    welcome_name_input.submit(
-        fn=handle_welcome_submit,
-        inputs=[welcome_name_input, welcome_school_input, welcome_year_input],
-        outputs=[welcome_screen, main_app, tabs, student_name_display, student_name_state]
-    )
-    
-    welcome_school_input.submit(
-        fn=handle_welcome_submit,
-        inputs=[welcome_name_input, welcome_school_input, welcome_year_input],
-        outputs=[welcome_screen, main_app, tabs, student_name_display, student_name_state]
+    modal_submit_btn.click(
+        fn=handle_modal_submit,
+        inputs=[modal_name_input, modal_school_input, modal_year_input],
+        outputs=[registration_modal, student_name_display, student_name_state]
     )
     
     # Event handlers for Learning Mode