Update app.py

app.py

@@ -253,25 +253,39 @@ def predict_disease(symptoms):
 
 from gradio.components import HTML
 
+# Custom CSS for styling
 # Custom CSS for styling
 custom_css = """
+/* Importing Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
+/* General Body Styling */
 body {
-    font-family: 'Arial', sans-serif;
+    font-family: 'Roboto', sans-serif;
     background-color: #f0f4f7; /* Light background for better contrast */
 }
 
+/* Header Styling */
+h1, h2, h3, h4 {
+    font-weight: bold; /* Make all headings bold */
+    color: #3c6487; /* Theme color for headings */
+}
+
 h1 {
+    font-size: 2.5rem; /* Bigger header size */
     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 */
+    margin-bottom: 20px; /* Spacing below the header */
 }
 
+/* Input and Textarea Styling */
 textarea, input {
-    background: #3c6487; /* Darker background for input boxes */
-    color: white; /* White text for better contrast */
+    background: white; /* Input background */
+    color: black;
     border: 2px solid #3c6487; /* Matching border color */
     padding: 10px;
     font-size: 1rem;
@@ -279,6 +293,12 @@ textarea, input {
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Light shadow for inputs */
 }
 
+textarea:focus, input:focus {
+    border-color: #ae1c93; /* Highlight border color on focus */
+    box-shadow: 0 0 5px rgba(174, 28, 147, 0.5); /* Shadow on focus */
+}
+
+/* Button Styling */
 .gr-button {
     background-color: #ae1c93; /* Button color */
     color: white;
@@ -288,6 +308,7 @@ textarea, input {
     border: none; /* No border */
     cursor: pointer; /* Pointer on hover */
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Shadow on button */
+    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transition for hover effects */
 }
 
 .gr-button:hover {
@@ -298,10 +319,11 @@ textarea, input {
     background-color: #7f156b; /* Even darker shade on active */
 }
 
+/* DataFrame Container Styling */
 .df-container {
     background: white; /* Background for data frames */
     color: black; /* Text color */
-    border: 2px solid #3c6487; /* Matching border color */
+    border: 2px solid #3c6487; /* Matching border color for data frames */
     border-radius: 10px;
     padding: 10px;
     font-size: 14px;
@@ -321,7 +343,7 @@ textarea, input {
 
 @media (max-width: 768px) {
     h1 {
-        font-size: 1.5rem; /* Adjusted font size for smaller screens */
+        font-size: 2rem; /* Smaller font size for smaller screens */
         padding: 10px;
     }
 
@@ -347,13 +369,13 @@ with gr.Blocks(css=custom_css) as app:
             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")
+        submit_chatbot = gr.Button(value="Submit Your Message", variant="primary", icon="fa-paper-plane")
         
-        chatbot = gr.Chatbot(label="Chat History", show_label=False, elem_id="chat-history")
+        chatbot = gr.Chatbot(label="Chat History", show_label=False)
         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
+        suggestions_markdown = gr.Markdown(label="Suggestions")
         professionals = gr.DataFrame(label="Nearby Health Professionals", headers=["Name", "Address"])
         map_html = gr.HTML(label="Interactive Map")