Update app.py

app.py

@@ -4,29 +4,26 @@ import gradio as gr
 from components.auth import register, login, logout
 from components.predict import predict
 
-# --- 1. New Theme and Style ---
-# By removing a specific theme and custom background, Gradio will automatically 
-# adapt to the user's system Light or Dark mode, ensuring visibility.
+# --- Style and Theme ---
+# Using default theme for automatic light/dark mode compatibility.
 css = """
 .gradio-container { max-width: 1000px !important; margin: auto !important; }
 .centered-text { text-align: center; }
 """
 
-# The theme argument is removed to enable automatic light/dark mode detection.
 with gr.Blocks(title="DiaSpark: Your spark for early detection", css=css) as demo:
 
-    # A state object to hold the user's session information. This is now invisible to the user.
+    # A state object to hold the user's session information.
     user_state = gr.State({"email": None, "logged_in": False})
 
     # --- Header ---
-    # The "Current User" box has been completely removed for a cleaner look.
     gr.Markdown("# 🩺 Welcome to DiaSpark: An AI-based Diabetes Detector")
     gr.Markdown("#### Your Proactive Partner in Health Awareness")
         
     # --- Main Tabs ---
     with gr.Tabs():
 
-        # --- Homepage Tab (Retaining the clean Accordion layout) ---
+        # --- Homepage Tab ---
         with gr.TabItem("Home"):
             gr.Markdown(
                 "<h2 class='centered-text'>A Smart First Step in Understanding Your Health</h2>",
@@ -68,29 +65,32 @@ with gr.Blocks(title="DiaSpark: Your spark for early detection", css=css) as dem
                     """
                 )
 
-        # --- Authentication Tab ---
+        # --- NEW: Revamped Authentication Tab ---
         with gr.TabItem("Login / Signup"):
-            # This Markdown component will now be the primary place for login/logout status messages.
             auth_message = gr.Markdown()
-            with gr.Row():
-                with gr.Column(scale=1):
-                    gr.Markdown("### Sign Up")
-                    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."
-                    )
-                    signup_btn = gr.Button("Sign Up", variant="primary")
-                
-                with gr.Column(scale=1):
-                    gr.Markdown("### Login")
-                    email_login = gr.Textbox(label="Email", placeholder="Enter your email")
-                    pwd_login = gr.Textbox(label="Password", type="password", placeholder="Enter your password")
-                    login_btn = gr.Button("Login", variant="primary")
-
-            logout_btn = gr.Button("Logout")
+            
+            # --- Login Form (Initially Visible) ---
+            with gr.Column(visible=True) as login_col:
+                gr.Markdown("### Login to Your Account")
+                email_login = gr.Textbox(label="Email", placeholder="Enter your email")
+                pwd_login = gr.Textbox(label="Password", type="password", placeholder="Enter your password")
+                login_btn = gr.Button("Login", variant="primary")
+                show_signup_btn = gr.Button("New user? Sign up here.", variant="secondary")
+                logout_btn = gr.Button("Logout")
+
+            # --- Signup Form (Initially Hidden) ---
+            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."
+                )
+                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"):
@@ -111,12 +111,30 @@ with gr.Blocks(title="DiaSpark: Your spark for early detection", css=css) as dem
 
 
     # --- Component Logic (Event Handlers) ---
+
+    # --- NEW: Handlers to switch between Login and Signup forms ---
+    def switch_to_signup():
+        return gr.update(visible=False), gr.update(visible=True)
+
+    def switch_to_login():
+        return gr.update(visible=True), gr.update(visible=False)
+
+    show_signup_btn.click(
+        fn=switch_to_signup, 
+        inputs=None, 
+        outputs=[login_col, signup_col]
+    )
+    
+    show_login_btn.click(
+        fn=switch_to_login,
+        inputs=None,
+        outputs=[login_col, signup_col]
+    )
+
+    # Existing handlers for auth and prediction
     signup_btn.click(fn=register, inputs=[email_signup, pwd_signup], outputs=[auth_message])
     login_btn.click(fn=login, inputs=[email_login, pwd_login, user_state], outputs=[auth_message, user_state])
     logout_btn.click(fn=logout, inputs=[user_state], outputs=[auth_message, user_state])
-
-    # The logic to update the old user status box has been removed.
-    
     predict_btn.click(fn=predict, inputs=[preg, glucose, bp, insulin, bmi, age, user_state], outputs=[result_output])
 
 # --- Launch the App ---