Update app.py

app.py

@@ -39,18 +39,18 @@ net = tflearn.regression(net)
 chatbot_model = tflearn.DNN(net)
 chatbot_model.load("MentalHealthChatBotmodel.tflearn")
 
-# Sentiment Analysis with Hugging Face
+# Model for sentiment detection
 tokenizer_sentiment = AutoTokenizer.from_pretrained("cardiffnlp/twitter-roberta-base-sentiment")
 model_sentiment = AutoModelForSequenceClassification.from_pretrained("cardiffnlp/twitter-roberta-base-sentiment")
 
-# Emotion Detection
+# Model for emotion detection
 tokenizer_emotion = AutoTokenizer.from_pretrained("j-hartmann/emotion-english-distilroberta-base")
 model_emotion = AutoModelForSequenceClassification.from_pretrained("j-hartmann/emotion-english-distilroberta-base")
 
-# Google Maps API Client
+# Google Maps API client
 gmaps = googlemaps.Client(key=os.getenv('GOOGLE_API_KEY'))
 
-# Chatbot Logic
+# Chatbot logic
 def bag_of_words(s, words):
     bag = [0] * len(words)
     s_words = word_tokenize(s)
@@ -77,7 +77,7 @@ def chatbot(message, history):
     history.append((message, response))
     return history, response
 
-# Sentiment Analysis
+# Sentiment analysis
 def analyze_sentiment(user_input):
     inputs = tokenizer_sentiment(user_input, return_tensors="pt")
     with torch.no_grad():
@@ -86,7 +86,7 @@ def analyze_sentiment(user_input):
     sentiment_map = ["Negative 😔", "Neutral 😐", "Positive 😊"]
     return sentiment_map[sentiment_class]
 
-# Emotion Detection
+# Emotion detection
 def detect_emotion(user_input):
     pipe = pipeline("text-classification", model=model_emotion, tokenizer=tokenizer_emotion)
     result = pipe(user_input)
@@ -139,14 +139,13 @@ def app_function(message, location, query, history):
     professionals, map_html = get_health_professionals_and_map(location, query)
     return chatbot_history, sentiment, emotion, suggestions, professionals, map_html
 
-# Enhanced CSS for Black-Themed Table and UI
+# Enhanced CSS for Custom Title and Styling
 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: 'Roboto', sans-serif;
-    text-align: center;
 }
 button {
     background-color: #ff5722 !important;
@@ -156,7 +155,6 @@ button {
     font-size: 16px;
     border-radius: 8px;
     cursor: pointer;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
 }
 button:hover {
     background-color: #e64a19 !important;
@@ -169,29 +167,25 @@ textarea, input[type="text"], .gr-chatbot {
     border-radius: 8px !important;
     font-size: 14px;
 }
-.gr-textbox {
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
-}
-.output-container, .gr-html, .gr-textbox, .gr-dataframe {
+.gr-dataframe, .gr-textbox {
     background: #000000 !important;
     color: white !important;
     border: 2px solid #ff5722 !important;
     border-radius: 8px !important;
-    padding: 10px;
-}
-.gr-dataframe {
     font-size: 14px;
-    height: 400px; /* Larger table */
-    overflow-y: scroll; /* Scroll if content exceeds table height */
-    background: #000000 !important;
-    color: white !important;
-    border: 2px solid #ff5722;
+}
+.suggestions-title {
+    font-size: 1.5rem !important;
+    font-weight: bold;
+    color: white;
+    margin-top: 20px;
 }
 h1 {
-    font-size: 3.5rem;
+    font-size: 4rem;
     font-weight: bold;
     margin-bottom: 10px;
     color: white;
+    text-align: center;
     text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
 }
 h2 {
@@ -200,6 +194,12 @@ h2 {
     color: white;
     text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
 }
+.input-title, .output-title {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: black;
+    margin-bottom: 10px;
+}
 """
 
 # Gradio Interface
@@ -208,17 +208,26 @@ with gr.Blocks(css=custom_css) as app:
     gr.HTML("<h2>Empowering Your Well-Being Journey 💚</h2>")
 
     with gr.Row():
-        user_message = gr.Textbox(label="Your Message", placeholder="Enter your message...")
-        user_location = gr.Textbox(label="Your Location", placeholder="Enter your location...")
-        search_query = gr.Textbox(label="Query", placeholder="Search for professionals...")
-        submit_btn = gr.Button("Submit")
+        gr.Markdown("<div class='input-title'>Your Message</div>")
+        user_message = gr.Textbox(label=None, placeholder="Enter your message...")
+        gr.Markdown("<div class='input-title'>Your Location</div>")
+        user_location = gr.Textbox(label=None, placeholder="Enter your location...")
+        gr.Markdown("<div class='input-title'>Your Query</div>")
+        search_query = gr.Textbox(label=None, placeholder="Search for professionals...")
 
     chatbot_box = gr.Chatbot(label="Chat History")
-    emotion_output = gr.Textbox(label="Detected Emotion")
-    sentiment_output = gr.Textbox(label="Detected Sentiment")
-    suggestions_output = gr.DataFrame(headers=["Title", "Links"], label="Suggestions")  # Enlarged table
-    map_output = gr.HTML(label="Nearby Professionals Map")
-    professional_display = gr.Textbox(label="Nearby Professionals", lines=5)
+    gr.Markdown("<div class='output-title'>Detected Emotion</div>")
+    emotion_output = gr.Textbox(label=None)
+    gr.Markdown("<div class='output-title'>Detected Sentiment</div>")
+    sentiment_output = gr.Textbox(label=None)
+    gr.Markdown("<div class='suggestions-title'>Suggestions</div>")
+    suggestions_output = gr.DataFrame(headers=["Title", "Links"], label=None)
+
+    gr.Markdown("<h2 class='suggestions-title'>Health Professionals Nearby</h2>")
+    map_output = gr.HTML(label=None)
+    professional_display = gr.Textbox(label=None, lines=5)
+
+    submit_btn = gr.Button("Submit")
 
     submit_btn.click(
         app_function,