Update app.py

app.py

@@ -4,6 +4,7 @@ import gradio as gr
 from components.auth import register, login, logout
 from components.predict import predict
 
+# --- Style and Theme ---
 css = """
 .gradio-container { max-width: 1000px !important; margin: auto !important; }
 .centered-text { text-align: center; }
@@ -11,16 +12,59 @@ css = """
 
 with gr.Blocks(title="DiaSpark: Your spark for early detection", css=css) as demo:
 
+    # The user_state now includes a 'gender' field, which is populated on login
     user_state = gr.State({"email": None, "id": None, "logged_in": False, "gender": None})
 
+    # --- Header ---
     gr.Markdown("# 🩺 Welcome to DiaSpark: An AI-based Diabetes Detector")
     gr.Markdown("#### Your Proactive Partner in Health Awareness")
         
+    # --- Main Tabs ---
     with gr.Tabs() as main_tabs:
-        with gr.TabItem("Home", id="home_tab"):
-            # Homepage content... (omitted for brevity)
-            gr.Markdown("Content...")
 
+        # --- Homepage Tab ---
+        with gr.TabItem("Home", id="home_tab"):
+            gr.Markdown(
+                "<h2 class='centered-text'>A Smart First Step in Understanding Your Health</h2>",
+                elem_classes="centered-text"
+            )
+            gr.Markdown(
+                """
+                DiaSpark is a confidential tool that uses machine learning to provide an educational analysis of your diabetes risk factors.
+                Our goal is to promote health awareness, not to provide a medical diagnosis.
+                """
+            )
+            gr.Markdown("---")
+            
+            with gr.Accordion("🎯 Our Mission: The 'Why'", open=True):
+                gr.Markdown(
+                    """
+                    We believe that awareness is the first and most powerful step towards a healthier life. 
+                    This tool was built to help you:
+                    *   **Gain Insight:** Understand how key health metrics can contribute to your overall risk profile.
+                    *   **Encourage Proactive Care:** Use this information as a starting point for meaningful conversations with your doctor.
+                    *   **Do It All Privately:** Your health data is sensitive. Our secure login ensures your prediction history is for your eyes only.
+                    """
+                )
+            
+            with gr.Accordion("🚀 Getting Started: The 'How'", open=False):
+                gr.Markdown(
+                    """
+                    1.  **Create Your Secure Account:** Navigate to the **'Login / Signup'** tab. The process is quick and requires only an email, password, and gender.
+                    2.  **Enter Your Health Metrics:** Once logged in, go to the **'Prediction'** tab. Fill in the fields with your most recent health information.
+                    3.  **Receive Your Instant Analysis:** Click the 'Predict My Risk' button. Our AI model will provide an immediate, educational assessment based on your data.
+                    """
+                )
+            
+            with gr.Accordion("⚠️ Important Disclaimer", open=False):
+                gr.Markdown(
+                    """
+                    **This tool is NOT a substitute for professional medical advice, diagnosis, or treatment.**
+                    The results from DiaSpark are for informational purposes only. Always seek the advice of your physician or another qualified health provider with any questions you may have regarding a medical condition. Never disregard professional medical advice or delay in seeking it because of something you have read or seen on this application.
+                    """
+                )
+
+        # --- Authentication Tab ---
         with gr.TabItem("Login / Signup", id="auth_tab"):
             auth_message = gr.Markdown()
             
@@ -34,21 +78,30 @@ with gr.Blocks(title="DiaSpark: Your spark for early detection", css=css) as dem
             with gr.Column(visible=False) as signup_col:
                 gr.Markdown("### Create a New Account")
                 email_signup = gr.Textbox(label="Email", placeholder="Enter your email")
-                pwd_signup = gr.Textbox(label="Password", type="password", placeholder="Create a password", info="Must be at least 6 characters long.")
-                # Add Gender Radio button
-                gender_signup = gr.Radio(["Female", "Male"], label="Gender")
+                pwd_signup = gr.Textbox(
+                    label="Password",
+                    type="password",
+                    placeholder="Create a password",
+                    info="Must be at least 6 characters long."
+                )
+                # NEW: Gender radio buttons for signup
+                gender_signup = gr.Radio(["Female", "Male"], label="Gender", info="This determines if the 'Pregnancies' field is shown.")
                 signup_btn = gr.Button("Sign Up", variant="primary")
                 show_login_btn = gr.Button("Already have an account? Login.", variant="secondary")
 
+        # --- Prediction Tab ---
         with gr.TabItem("Prediction", id="prediction_tab"):
+            
+            # This container is shown to logged-in users
             with gr.Column(visible=False) as prediction_view:
                 gr.Markdown("### Enter Your Health Metrics for Prediction")
                 gr.Markdown("---")
                 
-                # Wrap Pregnancies in its own row to control visibility
+                # NEW: The pregnancies field is now in its own row to control its visibility
                 with gr.Row(visible=False) as pregnancies_row:
                     preg = gr.Number(label="Pregnancies", info="Number of times pregnant")
 
+                # The rest of the prediction fields
                 with gr.Row():
                     with gr.Column():
                         glucose = gr.Number(label="Glucose", info="Plasma glucose concentration")
@@ -64,10 +117,20 @@ with gr.Blocks(title="DiaSpark: Your spark for early detection", css=css) as dem
                 result_output = gr.Textbox(label="Prediction Result", interactive=False)
                 logout_btn = gr.Button("Logout", variant="stop")
 
+            # This container is shown to logged-out users
             with gr.Column(visible=True) as logged_out_view:
-                gr.Markdown("<div style='text-align:center; padding: 50px;'><h2>🔒 Please log in...</h2></div>")
+                gr.Markdown(
+                    """
+                    <div style="text-align:center; padding: 50px;">
+                        <h2>🔒 Please log in to access the prediction tool.</h2>
+                        <p>You can create an account or log in via the 'Login / Signup' tab.</p>
+                    </div>
+                    """
+                )
+
+
+    # --- Component Logic (Event Handlers) ---
 
-    # --- Event Handlers ---
     def switch_to_signup():
         return gr.update(visible=False), gr.update(visible=True)
 
@@ -92,25 +155,30 @@ with gr.Blocks(title="DiaSpark: Your spark for early detection", css=css) as dem
             auth_message, user_state, main_tabs,
             email_login, pwd_login,
             preg, glucose, bp, insulin, bmi, age, result_output,
-            pregnancies_row
+            pregnancies_row  # Add pregnancies_row to be cleared/hidden on logout
         ]
     )
     
     predict_btn.click(fn=predict, inputs=[preg, glucose, bp, insulin, bmi, age, user_state], outputs=[result_output])
     
+    # NEW: Updated function to handle visibility of both prediction view AND pregnancies row
     def handle_user_state_change(user_data):
         """Controls visibility of UI elements based on login state and gender."""
         is_logged_in = user_data.get("logged_in", False)
         is_female = user_data.get("gender") == "Female"
-        # Prediction view is visible if logged in.
-        # Pregnancies row is visible if logged in AND gender is Female.
+        
+        # The main prediction form is visible only if the user is logged in.
+        # The pregnancies row is visible only if the user is logged in AND their gender is 'Female'.
         return gr.update(visible=is_logged_in), gr.update(visible=not is_logged_in), gr.update(visible=is_female)
 
+    # The user_state listener now controls three components
     user_state.change(
         fn=handle_user_state_change,
         inputs=user_state,
         outputs=[prediction_view, logged_out_view, pregnancies_row]
     )
 
+
+# --- Launch the App ---
 if __name__ == "__main__":
     demo.launch()