Update app.py

app.py

@@ -316,4 +316,253 @@ def schedule_appointment(therapist, time_slot, date, user_email, state):
 
 # Custom CSS for beautiful UI
 custom_css = """
-/
+/* General Styling */
+body {
+    font-family: 'Inter', sans-serif;
+    background-color: #f0f4f8;
+}
+
+/* Containers */
+.gradio-container {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 20px;
+    background: white;
+    border-radius: 16px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+/* Headings */
+h1 {
+    color: #2c3e50;
+    font-size: 2.5em;
+    text-align: center;
+    margin-bottom: 10px;
+}
+
+h2, h3 {
+    color: #34495e;
+}
+
+/* Inputs and Buttons */
+input, select, textarea {
+    border-radius: 8px !important;
+    border: 1px solid #d1d9e0 !important;
+    padding: 10px !important;
+    transition: border-color 0.2s;
+}
+
+input:focus, select:focus, textarea:focus {
+    border-color: #3498db !important;
+    outline: none;
+}
+
+button {
+    background: linear-gradient(90deg, #3498db, #2980b9) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 8px !important;
+    padding: 12px 24px !important;
+    font-weight: 600 !important;
+    transition: transform 0.2s, box-shadow 0.2s !important;
+}
+
+button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
+}
+
+/* Chatbox */
+textarea[readonly] {
+    background: #f8fafc !important;
+    border-radius: 12px !important;
+    padding: 15px !important;
+}
+
+/* Appointment Section */
+#appointment-section .gr-box {
+    background: #e6f0fa !important;
+    border-radius: 12px !important;
+    padding: 20px !important;
+}
+
+/* Date and Time Pickers */
+#date-picker input, #time-picker input {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #d1d9e0;
+    border-radius: 8px;
+    font-size: 1em;
+    cursor: pointer;
+}
+
+#date-picker input::-webkit-calendar-picker-indicator,
+#time-picker input::-webkit-calendar-picker-indicator {
+    cursor: pointer;
+}
+
+/* Responsive Design */
+@media (max-width: 600px) {
+    .gradio-container {
+        padding: 15px;
+    }
+    button {
+        padding: 10px 20px !important;
+    }
+}
+"""
+
+# JavaScript to convert textboxes to date/time pickers
+custom_js = """
+document.addEventListener('DOMContentLoaded', function() {
+    // Convert date textbox to date picker
+    const dateInput = document.querySelector('#date-picker input');
+    if (dateInput) {
+        dateInput.type = 'date';
+        dateInput.placeholder = 'Select a date';
+    }
+    
+    // Convert time textbox to time picker
+    const timeInput = document.querySelector('#time-picker input');
+    if (timeInput) {
+        timeInput.type = 'time';
+        timeInput.step = '1800'; // 30-minute intervals
+        timeInput.placeholder = 'Select a time';
+    }
+});
+"""
+
+# Gradio Interface
+with gr.Blocks(title="Mental Health Support Chatbot", css=custom_css, js=custom_js) as demo:
+    state = gr.State({"chat_history": [], "mood_journal": [], "feedback": [], "appointments": [], "failed_emails": []})
+    
+    gr.Markdown("# Mental Health Support Chatbot")
+    gr.Markdown("A safe space to share how you're feeling, with tools to support your well-being.")
+    
+    with gr.Row():
+        with gr.Column(scale=3):
+            mood = gr.Dropdown(
+                choices=["Select mood (optional)", "Happy", "Sad", "Anxious", "Stressed", "Other"],
+                label="How are you feeling today?",
+                value="Select mood (optional)"
+            )
+            conversation_mode = gr.Radio(
+                choices=["Neutral", "Calm", "Motivational"],
+                label="Conversation Style",
+                value="Neutral"
+            )
+            region = gr.Dropdown(
+                choices=["USA", "India", "UK", "Global"],
+                label="Your Region",
+                value="Global"
+            )
+        with gr.Column(scale=7):
+            chatbot = gr.Textbox(
+                label="Conversation",
+                value="",
+                interactive=False,
+                lines=12,
+                show_copy_button=True
+            )
+            user_input = gr.Textbox(
+                placeholder="Type your message here...",
+                label="Your Message",
+                lines=2
+            )
+            with gr.Row():
+                submit_btn = gr.Button("Send")
+                clear_btn = gr.Button("Clear Chat")
+    
+    emergency_btn = gr.Button("Emergency Resources")
+    emergency_output = gr.Markdown("")
+    
+    with gr.Accordion("Mood Journal"):
+        log_mood_btn = gr.Button("Log Mood")
+        mood_log_output = gr.Textbox(label="Mood Log Status", interactive=False)
+        mood_trend_btn = gr.Button("Show Mood Trends")
+        mood_trend_output = gr.Plot()
+    
+    with gr.Accordion("Provide Feedback"):
+        feedback_text = gr.Textbox(label="Your Feedback", placeholder="How can we improve?")
+        feedback_rating = gr.Slider(minimum=1, maximum=5, step=1, label="Rate this interaction")
+        feedback_btn = gr.Button("Submit Feedback")
+        feedback_output = gr.Textbox(label="Feedback Status", interactive=False)
+    
+    with gr.Accordion("Schedule Appointment", elem_id="appointment-section"):
+        therapist = gr.Dropdown(
+            choices=list(therapists.keys()),
+            label="Select a Therapist"
+        )
+        date = gr.Textbox(
+            label="Appointment Date",
+            placeholder="Select a date (YYYY-MM-DD)",
+            elem_id="date-picker"
+        )
+        time_slot = gr.Textbox(
+            label="Appointment Time",
+            placeholder="Select a time (HH:MM)",
+            elem_id="time-picker"
+        )
+        user_email = gr.Textbox(
+            label="Your Email Address",
+            placeholder="e.g., [email protected]"
+        )
+        schedule_btn = gr.Button("Book Appointment")
+        schedule_output = gr.Textbox(label="Booking Status", interactive=False)
+    
+    submit_btn.click(
+        fn=chatbot_function,
+        inputs=[user_input, mood, conversation_mode, region, state],
+        outputs=[chatbot, state]
+    )
+    user_input.submit(
+        fn=chatbot_function,
+        inputs=[user_input, mood, conversation_mode, region, state],
+        outputs=[chatbot, state]
+    )
+    clear_btn.click(
+        fn=clear_chat,
+        inputs=[state],
+        outputs=[chatbot, state]
+    )
+    emergency_btn.click(
+        fn=show_emergency_resources,
+        inputs=None,
+        outputs=emergency_output
+    )
+    log_mood_btn.click(
+        fn=log_mood,
+        inputs=[mood, state],
+        outputs=[mood_log_output, state]
+    )
+    mood_trend_btn.click(
+        fn=show_mood_trends,
+        inputs=[state],
+        outputs=[mood_trend_output, state]
+    )
+    feedback_btn.click(
+        fn=submit_feedback,
+        inputs=[feedback_text, feedback_rating, state],
+        outputs=[feedback_output, state]
+    )
+    therapist.change(
+        fn=get_available_times,
+        inputs=therapist,
+        outputs=schedule_output
+    )
+    schedule_btn.click(
+        fn=schedule_appointment,
+        inputs=[therapist, time_slot, date, user_email, state],
+        outputs=[schedule_output, state]
+    )
+
+    gr.Markdown("""
+    ---
+    **Helpful Resources:**
+    - [National Suicide Prevention Lifeline](https://suicidepreventionlifeline.org/)
+    - [MentalHealth.gov](https://www.mentalhealth.gov/)
+    - [Crisis Text Line](https://www.crisistextline.org/)
+    """)
+
+if __name__ == "__main__":
+    demo.launch()