Update app.py

app.py

@@ -202,9 +202,9 @@ def gradio_app(message, location, health_query, submit_button, history, state):
         return history, "", "", "", "", gr.DataFrame([], headers=["Title", "Subject", "Link"]), state
 
 # Gradio UI components
-message_input = gr.Textbox(lines=1, label="Message")
-location_input = gr.Textbox(value="Honolulu, HI", label="Current Location")
-health_query_input = gr.Textbox(value="doctor", label="Health Professional Query (e.g., doctor, psychiatrist, psychologist)")
+message_input = gr.Textbox(lines=1, label="Message", placeholder="Type your message here...")
+location_input = gr.Textbox(value="Honolulu, HI", label="Current Location", placeholder="Enter your current location...")
+health_query_input = gr.Textbox(value="doctor", label="Health Professional Query (e.g., doctor, health professional, well-being professional", placeholder="Search for health professionals...")
 submit_button = gr.Button("Submit")
 
 # Updated chat history component with 'messages' type
@@ -217,6 +217,72 @@ route_info_output = gr.Textbox(label="Health Professionals Information")
 map_output = gr.HTML(label="Map with Health Professionals")
 suggestions_output = gr.DataFrame(label="Well-Being Suggestions", headers=["Title", "Subject", "Link"])
 
+# Custom CSS for styling
+custom_css = """
+<style>
+body {
+    background-color: #f0f8ff;
+    color: #333;
+    font-family: Arial, sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    color: #0056b3;
+}
+
+.gradio-app {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.gradio-input, .gradio-output {
+    margin-bottom: 15px;
+}
+
+.gradio-button {
+    background-color: #0056b3;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.gradio-button:hover {
+    background-color: #004080;
+}
+
+.gradio-dataframe {
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    overflow: hidden;
+}
+
+.gradio-dataframe th, .gradio-dataframe td {
+    padding: 10px;
+    text-align: left;
+}
+
+.gradio-dataframe th {
+    background-color: #0056b3;
+    color: #fff;
+}
+
+.gradio-dataframe a {
+    color: #0056b3;
+    text-decoration: none;
+}
+
+.gradio-dataframe a:hover {
+    text-decoration: underline;
+}
+</style>
+"""
+
 # Create Gradio interface
 iface = gr.Interface(
     fn=gradio_app, 
@@ -224,7 +290,8 @@ iface = gr.Interface(
     outputs=[chat_history, sentiment_output, emotion_output, route_info_output, map_output, suggestions_output, gr.State()],
     allow_flagging="never",
     live=False,
-    title="Well-Being App: Support, Sentiment, Emotion Detection & Health Professional Search"
+    title="Well-Being App: Support, Sentiment, Emotion Detection & Health Professional Search",
+    css=custom_css
 )
 
 # Launch the Gradio interface