Update app.py

app.py

@@ -258,8 +258,6 @@ custom_css = """
 body {
     font-family: 'Arial', sans-serif;
     background-color: #f0f4f7; /* Light background for better contrast */
-    margin: 0;
-    padding: 0;
 }
 
 h1 {
@@ -286,9 +284,6 @@ textarea, input {
     color: white;
     border-radius: 8px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Shadow on button */
-    display: flex;
-    align-items: center;
-    justify-content: center;
 }
 
 .gr-button:hover {
@@ -299,10 +294,6 @@ textarea, input {
     background-color: #7f156b; /* Even darker shade on active */
 }
 
-.gr-button .fa {
-    margin-right: 10px;
-}
-
 .df-container {
     background: white;
     color: black;
@@ -315,61 +306,33 @@ textarea, input {
     overflow-y: auto;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Light shadow for data frame */
 }
-
-@media (max-width: 768px) {
-    h1 {
-        font-size: 1.5rem;
-        padding: 10px;
-    }
-
-    .gr-button {
-        font-size: 0.9rem;
-        padding: 10px;
-    }
-
-    .gr-row {
-        flex-direction: column;
-        align-items: center;
-    }
-
-    textarea, input {
-        width: 100%;
-        margin-bottom: 10px;
-    }
-
-    .gr-chatbot {
-        max-height: 300px;
-        overflow-y: auto;
-    }
-}
 """
 
 # Gradio Application Interface
 with gr.Blocks(css=custom_css) as app:
-    gr.HTML("<h1>🌟 Well-Being For All </h1>")
+    gr.HTML("<h1>🌟 Well-Being Companion</h1>")
     
-    with gr.Tab("Well-Being Chatbot"):
+    with gr.Tab("Mental Health Chatbot"):
         with gr.Row():
             user_input = gr.Textbox(label="Please Enter Your Message Here", placeholder="Type your message here...", max_lines=3)
-            location = gr.Textbox(label="Please Enter Your Current Location Here", placeholder="E.g., New York", max_lines=1)
-            query = gr.Textbox(label="Please Enter Which Health Professional You Want To Search Nearby", placeholder="E.g., therapist", max_lines=1)
+            location = gr.Textbox(label="Please Enter Your Current Location Here", placeholder="E.g., Karachi", max_lines=1)
+            query = gr.Textbox(label="Please Enter Which Health Professional You Want To Search Nearby", placeholder="E.g., Doctors", max_lines=1)
         
         submit_chatbot = gr.Button(value="Submit Your Message", variant="primary", elem_id="submit-chatbot", icon="fa-paper-plane")
         
-        chatbot = gr.Chatbot(label="Chat History", elem_id="chat-history", show_label=True)
-        sentiment = gr.Textbox(label="Detected Sentiment")
-        emotion = gr.Textbox(label="Detected Emotion")
+        chatbot = gr.Chatbot(label="Chat History", show_label=False, elem_id="chat-history")
+        sentiment = gr.Textbox(label="Detected Sentiment", show_label=False)
+        emotion = gr.Textbox(label="Detected Emotion", show_label=False)
         
         suggestions_markdown = gr.Markdown(label="Suggestions")  # Markdown for displaying suggestions
         professionals = gr.DataFrame(label="Nearby Health Professionals", headers=["Name", "Address"])
         map_html = gr.HTML(label="Interactive Map")
 
-        # Here we add the loading state on the button itself
         submit_chatbot.click(
             app_function_chatbot,
             inputs=[user_input, location, query, chatbot],
-            outputs=[chatbot, sentiment, emotion, suggestions_markdown, professionals, map_html]
-        ).then(submit_chatbot.update(loading=True))
+            outputs=[chatbot, sentiment, emotion, suggestions_markdown, professionals, map_html],
+        )
 
     with gr.Tab("Disease Prediction"):
         symptom1 = gr.Dropdown(X_train.columns.tolist(), label="Select Symptom 1")
@@ -387,7 +350,7 @@ with gr.Blocks(css=custom_css) as app:
                 [symptom1, symptom2, symptom3, symptom4, symptom5]),
             inputs=[symptom1, symptom2, symptom3, symptom4, symptom5],
             outputs=disease_prediction_result
-        ).then(submit_disease.update(loading=True))
+        )
 
 # Launch the Gradio application
 app.launch()