Update app.py

app.py

@@ -251,9 +251,64 @@ def predict_disease(symptoms):
     
     return "\n".join(markdown_output)
 
+# Custom CSS for Styling
+custom_css = """
+body {
+    font-family: 'Arial', sans-serif;
+    background-color: #f0f4f7; /* Light background for better contrast */
+}
+
+h1 {
+    background: linear-gradient(135deg, #3c6487, #355f7a); /* Gradient using your color */
+    color: #ffffff;
+    border-radius: 12px;
+    padding: 15px;
+    text-align: center;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect */
+}
+
+textarea, input {
+    background: white; /* Input background */
+    color: black;
+    border: 2px solid #3c6487; /* Matching border color */
+    padding: 10px;
+    font-size: 1rem;
+    border-radius: 10px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Light shadow for inputs */
+}
+
+.gr-button {
+    background-color: #ae1c93; /* Set the button color */
+    color: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Shadow on button */
+}
+
+.gr-button:hover {
+    background-color: #8f167b; /* Darker shade on hover */
+}
+
+.gr-button:active {
+    background-color: #7f156b; /* Even darker shade on active */
+}
+
+.df-container {
+    background: white;
+    color: black;
+    border: 2px solid #3c6487; /* Matching border color for data frames */
+    border-radius: 10px;
+    padding: 10px;
+    font-size: 14px;
+    max-height: 400px;
+    height: auto;
+    overflow-y: auto;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Light shadow for data frame */
+}
+"""
+
 # Gradio Application Interface
-with gr.Blocks() as app:
-    gr.HTML("<h1>🌟 Well-Being For ALL</h1>")
+with gr.Blocks(css=custom_css) as app:
+    gr.HTML("<h1>🌟 Well-Being For All </h1>")
     
     with gr.Tab("Well-Being Chatbot"):
         with gr.Row():
@@ -261,13 +316,13 @@ with gr.Blocks() as app:
             location = gr.Textbox(label="Please Enter Your Current Location Here")
             query = gr.Textbox(label="Please Enter Which Health Professional You Want To Search Nearby")
         
-        submit_chatbot = gr.Button(value="Submit Your Message", variant="primary")
+        submit_chatbot = gr.Button(value="Submit Your Message Here", variant="primary")
 
         chatbot = gr.Chatbot(label="Chat History")
         sentiment = gr.Textbox(label="Detected Sentiment")
         emotion = gr.Textbox(label="Detected Emotion")
         
-        suggestions_markdown = gr.Markdown(label="Suggestions")  # Markdown for displaying clickable links
+        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")