Update app.py

app.py

@@ -62,7 +62,7 @@ def bag_of_words(s, words):
     return np.array(bag)
 
 def chatbot(message, history):
-    """Generate chatbot response and append to history (as tuples)."""
+    """Generate chatbot response and append to history."""
     history = history or []
     try:
         results = chatbot_model.predict([bag_of_words(message, words)])
@@ -74,8 +74,6 @@ def chatbot(message, history):
                 break
     except Exception as e:
         response = f"Error: {str(e)} 💥"
-
-    # Append the message and response as a tuple
     history.append((message, response))
     return history, response
 
@@ -141,12 +139,14 @@ def app_function(message, location, query, history):
     professionals, map_html = get_health_professionals_and_map(location, query)  # Find professionals & map
     return chatbot_history, sentiment, emotion, suggestions, professionals, map_html
 
-# Custom CSS for Visual Styling
+# Enhanced CSS for Black-Themed Interface
 custom_css = """
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 body {
     background: linear-gradient(135deg, #000000, #ff5722);
     color: white;
-    font-family: 'Arial', sans-serif;
+    font-family: 'Roboto', sans-serif;
+    text-align: center;
 }
 button {
     background-color: #ff5722 !important;
@@ -161,27 +161,42 @@ button {
 button:hover {
     background-color: #e64a19 !important;
 }
-textarea, input[type="text"] {
-    background: rgba(255, 255, 255, 0.1) !important;
+textarea, input[type="text"], .gr-chatbot {
+    background: #000000 !important;
     color: white !important;
     border: 2px solid #ff5722 !important;
     padding: 12px !important;
     border-radius: 8px !important;
     font-size: 14px;
 }
-#components-container {
-    margin-top: 20px;
+.gr-textbox {
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
 }
-.gradio-container {
-    padding: 16px !important;
-    box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.6);
+.output-container, .gr-html, .gr-textbox, .gr-dataframe {
+    background: #000000 !important;
+    color: white !important;
+    border: 2px solid #ff5722 !important;
+    border-radius: 8px !important;
+    padding: 10px;
+}
+h1 {
+    font-size: 3rem;
+    font-weight: bold;
+    margin-bottom: 10px;
+    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
+}
+h2 {
+    font-weight: 400;
+    font-size: 1.8rem;
+    color: white;
+    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
 }
 """
 
 # Gradio Interface
 with gr.Blocks(css=custom_css) as app:
-    gr.Markdown("# 🌟 Well-Being Companion")
-    gr.Markdown("Empowering Your Well-Being Journey 💚")
+    gr.HTML("<h1>🌟 Well-Being Companion</h1>")
+    gr.HTML("<h2>Empowering Your Well-Being Journey 💚</h2>")
 
     with gr.Row():
         user_message = gr.Textbox(label="Your Message", placeholder="Enter your message...")
@@ -189,7 +204,7 @@ with gr.Blocks(css=custom_css) as app:
         search_query = gr.Textbox(label="Query", placeholder="Search for professionals...")
         submit_btn = gr.Button("Submit")
 
-    chatbot_box = gr.Chatbot(label="Chat History")  # Corrected history format (list of tuples)
+    chatbot_box = gr.Chatbot(label="Chat History")  # Chatbot history (black background)
     emotion_output = gr.Textbox(label="Detected Emotion")
     sentiment_output = gr.Textbox(label="Detected Sentiment")
     suggestions_output = gr.DataFrame(headers=["Title", "Links"], label="Suggestions")