Update app.py

app.py

@@ -251,11 +251,15 @@ def predict_disease(symptoms):
     
     return "\n".join(markdown_output)
 
-# Custom CSS for Styling
+from gradio.components import HTML
+
+# Custom CSS for styling
 custom_css = """
 body {
     font-family: 'Arial', sans-serif;
     background-color: #f0f4f7; /* Light background for better contrast */
+    margin: 0;
+    padding: 0;
 }
 
 h1 {
@@ -282,6 +286,9 @@ 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 {
@@ -292,6 +299,10 @@ textarea, input {
     background-color: #7f156b; /* Even darker shade on active */
 }
 
+.gr-button .fa {
+    margin-right: 10px;
+}
+
 .df-container {
     background: white;
     color: black;
@@ -304,6 +315,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
@@ -312,13 +350,14 @@ with gr.Blocks(css=custom_css) as app:
     
     with gr.Tab("Well-Being Chatbot"):
         with gr.Row():
-            user_input = gr.Textbox(label="Please Enter Your Message Here")
-            location = gr.Textbox(label="Please Enter Your Current Location Here")
-            query = gr.Textbox(label="Please Enter Which Health Professional You Want To Search Nearby")
+            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)
         
-        submit_chatbot = gr.Button(value="Submit Your Message", variant="primary")
-
-        chatbot = gr.Chatbot(label="Chat History")
+        submit_chatbot = gr.Button(value="Submit Your Message", variant="primary", elem_id="submit-chatbot", icon="fa-paper-plane")
+        
+        # Adding the loading prop for the chatbot button
+        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")
         
@@ -330,8 +369,9 @@ with gr.Blocks(css=custom_css) as app:
             app_function_chatbot,
             inputs=[user_input, location, query, chatbot],
             outputs=[chatbot, sentiment, emotion, suggestions_markdown, professionals, map_html],
+            loading=True  # Enable loading spinner on button click
         )
-
+        
     with gr.Tab("Disease Prediction"):
         symptom1 = gr.Dropdown(X_train.columns.tolist(), label="Select Symptom 1")
         symptom2 = gr.Dropdown(X_train.columns.tolist(), label="Select Symptom 2")
@@ -339,7 +379,9 @@ with gr.Blocks(css=custom_css) as app:
         symptom4 = gr.Dropdown(X_train.columns.tolist(), label="Select Symptom 4")
         symptom5 = gr.Dropdown(X_train.columns.tolist(), label="Select Symptom 5")
         
-        submit_disease = gr.Button(value="Predict Disease", variant="primary")
+        submit_disease = gr.Button(value="Predict Disease", variant="primary", icon="fa-stethoscope")
+        
+        # Adding the loading prop for the disease prediction button
         disease_prediction_result = gr.Markdown(label="Predicted Diseases")  # Use Markdown for predictions
 
         submit_disease.click(
@@ -347,6 +389,7 @@ with gr.Blocks(css=custom_css) as app:
                 [symptom1, symptom2, symptom3, symptom4, symptom5]),
             inputs=[symptom1, symptom2, symptom3, symptom4, symptom5],
             outputs=disease_prediction_result,
+            loading=True  # Enable loading spinner on button click
         )
 
 # Launch the Gradio application