Update app.py

app.py

@@ -4,18 +4,25 @@ import gradio as gr
 from components.auth import register, login, logout
 from components.predict import predict
 
-# --- 1. New Theme and Style ---
-# We are using the "Glass" theme for a modern, clean look.
-# Custom CSS is added to center the content and give it a max-width for better readability on large screens.
-theme = gr.themes.Glass(
-    primary_hue="teal",
-    secondary_hue="sky",
+# --- 1. New High-Contrast Theme and Custom Style ---
+# We use the Monochrome theme for maximum text visibility and a clean look.
+# Custom CSS provides a soft background and centers key text elements.
+theme = gr.themes.Monochrome(
+    primary_hue="indigo",
+    secondary_hue="blue",
     neutral_hue="slate"
-).set(
-    body_background_fill='linear-gradient(to right, #F0F8FF, #E6E6FA)',
 )
 
-with gr.Blocks(title="Diabetech Predict", theme=theme, css=".gradio-container {max-width: 1000px; margin: auto;}") as demo:
+css = """
+.gradio-container {
+    max-width: 1000px !important; 
+    margin: auto !important;
+    background-color: #F7F7F7 !important; /* Soft off-white background for the whole app */
+}
+.centered-text { text-align: center; }
+"""
+
+with gr.Blocks(title="DiaSpark: Your spark for early detection", theme=theme, css=css) as demo:
 
     # A state object to hold the user's session information
     user_state = gr.State({"email": None, "logged_in": False})
@@ -23,7 +30,7 @@ with gr.Blocks(title="Diabetech Predict", theme=theme, css=".gradio-container {m
     # --- Header ---
     with gr.Row(equal_height=False):
         with gr.Column(scale=4):
-            gr.Markdown("# 🩺 Welcome to Diabetech Predict")
+            gr.Markdown("# 🩺 Welcome to DiaSpark : An AI based Diabetes Detector")
             gr.Markdown("#### Your Proactive Partner in Health Awareness")
         
         with gr.Column(scale=1, min_width=200):
@@ -37,49 +44,52 @@ with gr.Blocks(title="Diabetech Predict", theme=theme, css=".gradio-container {m
     # --- Main Tabs ---
     with gr.Tabs():
 
-        # --- 2. New Homepage Tab with Richer Content ---
+        # --- 2. Redesigned Homepage with Accordions for a Clean Look ---
         with gr.TabItem("Home"):
-            gr.Markdown("## Understand Your Diabetes Risk, Privately and Securely")
             gr.Markdown(
-                """
-                **Diabetech Predict is a free, confidential tool designed to help you understand your potential risk factors for type 2 diabetes.** 
-                By using a machine learning model, our application provides an instant analysis based on key health metrics. This is not a diagnosis, but an educational first step to empower you on your health journey.
-                """
+                "<h2 class='centered-text'>A Smart First Step in Understanding Your Health</h2>",
+                elem_classes="centered-text"
             )
-            gr.Markdown("---")
-            
-            with gr.Row():
-                with gr.Column():
-                    gr.Markdown("### Why Use Diabetech Predict?")
-                    gr.Markdown(
-                        """
-                        *   **📈 Gain Insight:** Learn how different health factors like Glucose levels and BMI contribute to your risk profile.
-                        *   **🧠 Promote Awareness:** Being aware of potential risks is the first step towards preventive care and healthier lifestyle choices.
-                        *   **🔒 Completely Private:** Your data is your own. With our secure login system, your prediction history is tied to your account and is never shared.
-                        """
-                    )
-                with gr.Column():
-                    gr.Markdown("### How It Works")
-                    gr.Markdown(
-                        """
-                        1.  **Create Your Secure Account:** Use the 'Login / Signup' tab to create a free, private account.
-                        2.  **Enter Your Health Metrics:** Navigate to the 'Prediction' tab and input your information into the provided fields.
-                        3.  **Receive Your Instant Analysis:** Our model will provide an immediate risk assessment based on the data you provided.
-                        """
-                    )
-
-            gr.Markdown("### An Important Note on Your Health")
             gr.Markdown(
                 """
-                **Disclaimer:** This tool is for informational and educational purposes **only**. 
-                The prediction it provides is not a medical diagnosis. Please consult with a qualified healthcare professional for any health concerns, diagnosis, or before making any decisions related to your health.
+                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.
                 """
             )
-
-
-        # --- Authentication Tab (No changes here) ---
+            gr.Markdown("---")
+            
+            # Accordion layout prevents a cluttered look
+            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 and password.
+                    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 (No changes needed, theme will fix visibility) ---
         with gr.TabItem("Login / Signup"):
-            auth_message = gr.Markdown() 
+            auth_message = gr.Markdown()
             with gr.Row():
                 with gr.Column(scale=1):
                     gr.Markdown("### Sign Up")
@@ -100,7 +110,7 @@ with gr.Blocks(title="Diabetech Predict", theme=theme, css=".gradio-container {m
 
             logout_btn = gr.Button("Logout")
 
-        # --- Prediction Tab (No changes here) ---
+        # --- Prediction Tab (No changes needed, theme will fix visibility) ---
         with gr.TabItem("Prediction"):
             with gr.Row():
                 with gr.Column():