Update app.py

app.py

@@ -173,61 +173,85 @@ body {
     background: linear-gradient(135deg, #0d0d0d, #ff5722);
     color: white;
 }
+
 h1 {
-    text-align: center;
-    color: white;
-    font-size: 36px;
+    background: #ffffff;
+    color: #000000;
+    border-radius: 8px;
+    padding: 10px;
     font-weight: bold;
+    text-align: center;
+    font-size: 2.5rem;
 }
-textarea {
-    width: 100%;
-    height: 150px;
-    background-color: #333333;
-    color: white;
-    border: 1px solid #ff5722;
-    border-radius: 5px;
-    font-size: 16px;
+
+textarea, input {
+    background: transparent;
+    color: black;
+    border: 2px solid orange;
+    padding: 8px;
+    font-size: 1rem;
+    caret-color: black;
+    outline: none;
+    border-radius: 8px;
+}
+
+textarea:focus, input:focus {
+    background: transparent;
+    color: black;
+    border: 2px solid orange;
+    outline: none;
+}
+
+textarea:hover, input:hover {
+    background: transparent;
+    color: black;
+    border: 2px solid orange;
+}
+
+.df-container {
+    background: white;
+    color: black;
+    border: 2px solid orange;
+    border-radius: 10px;
     padding: 10px;
+    font-size: 14px;
+    max-height: 400px;
+    height: auto;
+    overflow-y: auto;
 }
-button {
-    background-color: #ff5722;
+
+#suggestions-title {
+    text-align: center;
+    font-weight: bold;
     color: white;
-    font-size: 16px;
-    padding: 10px 20px;
-    border-radius: 5px;
-    border: none;
-    cursor: pointer;
-}
-button:hover {
-    background-color: #e64a19;
+    font-size: 1.8rem;
+    margin-bottom: 20px;
 }
 """
 
-# Gradio Interface Setup
+# Gradio Application
 with gr.Blocks(css=custom_css) as app:
-    gr.Markdown("# 🌟 Mental Health Chatbot App")
+    gr.HTML("<h1>🌟 Well-Being Companion</h1>")
     with gr.Row():
-        chatbot_output = gr.Chatbot(label="Chat History", elem_id="chatbox")
-        user_input = gr.Textbox(label="Your Message", placeholder="Type something...", interactive=True)
-    
-    gr.Markdown("### Sentiment, Emotion, and Suggestions")
-    sentiment_output = gr.Textbox(label="Sentiment Analysis")
-    emotion_output = gr.Textbox(label="Emotion Detected")
-    suggestions_output = gr.DataFrame(headers=["Title", "Link"], label="Suggestions")
+        user_input = gr.Textbox(label="Your Message")
+        location = gr.Textbox(label="Your Location")
+        query = gr.Textbox(label="Search Query")
+    chatbot = gr.Chatbot(label="Chat History")
+    sentiment = gr.Textbox(label="Detected Sentiment")
+    emotion = gr.Textbox(label="Detected Emotion")
     
-    gr.Markdown("### Locate Health Professionals (Optional)")
-    location_input = gr.Textbox(label="Your Location")
-    query_input = gr.Textbox(label="Query (e.g., therapist, clinic)", placeholder="Type something...", interactive=True)
+    # Adding Suggestions Title with Styled Markdown (Centered and Bold)
+    gr.Markdown("Suggestions", elem_id="suggestions-title")
     
-    professionals_output = gr.DataFrame(headers=["Professional", "Address"], label="Nearby Professionals")
-    map_output = gr.HTML(label="Map of Professionals")
-    
-    submit_button = gr.Button(value="Submit", elem_id="submit-btn")
-    submit_button.click(
+    suggestions = gr.DataFrame(headers=["Title", "Link"])  # Table for suggestions
+    professionals = gr.Textbox(label="Nearby Professionals", lines=6)
+    map_html = gr.HTML(label="Interactive Map")
+    submit = gr.Button(value="Submit", variant="primary")
+
+    submit.click(
         app_function,
-        inputs=[user_input, location_input, query_input, chatbot_output],
-        outputs=[chatbot_output, sentiment_output, emotion_output, suggestions_output, professionals_output, map_output]
+        inputs=[user_input, location, query, chatbot],
+        outputs=[chatbot, sentiment, emotion, suggestions, professionals, map_html],
     )
 
-# Run the App
-app.launch(share=True)
+app.launch()