Update app.py

app.py

@@ -161,65 +161,90 @@ def generate_suggestions(emotion):
 
     return suggestions.get(emotion, [])
 
-# Gradio interface
-def gradio_app(message, location, health_query, submit_button, history, state):
-    if submit_button:
-        # Chatbot interaction
-        history, _ = chatbot(message, history)
-        
-        # Sentiment analysis
-        sentiment_response = analyze_sentiment(message)
-        
-        # Emotion detection
-        emotion_response = detect_emotion(message)
-        
-        # Health professional search and map display
-        route_info, map_html = get_health_professionals_and_map(location, health_query)
-        
-        # Generate suggestions based on the detected emotion
-        suggestions = generate_suggestions(emotion_response.split(': ')[1])
-        
-        # Create a DataFrame for displaying suggestions
-        suggestions_df = pd.DataFrame(suggestions)
-        
-        return history, sentiment_response, emotion_response, route_info, map_html, gr.DataFrame(suggestions_df, headers=["Title", "Subject", "Link"]), state
-    else:
-        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)")
-submit_button = gr.Button("🚀 Submit")
-
-# Updated chat history component with 'messages' type
-chat_history = gr.Chatbot(label="Well-Being Chat History", type='messages')
-
-# Outputs
-sentiment_output = gr.Textbox(label="💬 Sentiment Analysis Result")
-emotion_output = gr.Textbox(label="😊 Emotion Detection Result")
-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"])
-
-# Create Gradio interface with custom CSS for gradient background
-css = """
+# Custom CSS for green gradient background and button
+custom_css = """
+/* Gradient Background */
 body {
-    background: linear-gradient(to right, #6ab04c, #34e89e);
+    background: linear-gradient(135deg, #00b894, #1dd1a1);
     font-family: Arial, sans-serif;
+    color: white;
+    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1), 0 0 30px rgba(0, 0, 0, 0.1);
+}
+
+/* Green gradient submit button */
+.gradio-button {
+    background: linear-gradient(45deg, #00b894, #1dd1a1);
+    border: none;
+    color: white;
+    font-weight: bold;
+    font-size: 16px;
+    padding: 10px 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: background 0.3s ease, box-shadow 0.3s ease;
+}
+
+/* Hover effect for the submit button */
+.gradio-button:hover {
+    background: linear-gradient(45deg, #1dd1a1, #00b894);
+    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
+}
+
+/* Styling for the input box and other components */
+.gradio-input, .gradio-output, .gradio-chatbot {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    border: none;
+    padding: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.gradio-input:focus {
+    outline: none;
+    background: rgba(255, 255, 255, 0.2);
+}
+
+/* Shadow effect on components */
+.gradio-box {
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
 }
 """
 
-# Create Gradio interface
-iface = gr.Interface(
-    fn=gradio_app, 
-    inputs=[message_input, location_input, health_query_input, submit_button, gr.State()],
-    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",
-    css=css
-)
-
-# Launch the Gradio interface
-iface.launch()
+# Gradio app code (as before)
+def gradio_app(message, location, health_query, history, state):
+    # Chatbot interaction
+    history, _ = chatbot(message, history)
+    
+    # Sentiment analysis
+    sentiment_response = analyze_sentiment(message)
+    
+    # Emotion detection
+    emotion_response = detect_emotion(message)
+    
+    # Health professional search and map display
+    route_info, map_html = get_health_professionals_and_map(location, health_query)
+    
+    # Generate suggestions based on the detected emotion
+    suggestions = generate_suggestions(emotion_response.split(': ')[1])
+    
+    # Create a DataFrame for displaying suggestions
+    suggestions_df = pd.DataFrame(suggestions)
+    
+    return history, sentiment_response, emotion_response, route_info, map_html, gr.DataFrame(suggestions_df, headers=["Title", "Subject", "Link"]), state
+
+# Gradio UI components
+message_input = gr.Textbox(lines=1, label="💬 Message")
+location_input = gr.Textbox(value="Honolulu, HI", lines=1, label="📍 Your Location")
+health_query_input = gr.Textbox(value="psychologist", lines=1, label="👩‍⚕️ Health Professional Query")
+history_output = gr.Chatbot()
+sentiment_output = gr.Textbox()
+emotion_output = gr.Textbox()
+route_info_output = gr.Textbox()
+map_output = gr.HTML()
+suggestions_output = gr.DataFrame()
+
+# Interface with custom CSS
+gr.Interface(fn=gradio_app, inputs=[message_input, location_input, health_query_input, history_output, gr.State()],
+             outputs=[history_output, sentiment_output, emotion_output, route_info_output, map_output, suggestions_output],
+             live=True, 
+             css=custom_css).launch()