Update app.py

app.py

@@ -8,7 +8,6 @@ openai.api_base = "https://api.groq.com/openai/v1"
 
 # Function to get response from GROQ API
 def get_groq_response(message, category):
-    # System message to tailor responses based on the category
     system_message = ""
     if category == "Stress Management":
         system_message = "Provide soothing advice and tips to help the user manage stress. Be calm and empathetic."
@@ -34,21 +33,91 @@ def get_groq_response(message, category):
 # Chatbot function
 def chatbot(user_input, category, history=[]):
     bot_response = get_groq_response(user_input, category)
-    history.append((user_input, bot_response))
+    history.append((f"You: {user_input}", f"Bot: {bot_response}"))
     return history, history
 
-# Gradio Interface setup
-chat_interface = gr.Interface(
-    fn=chatbot,
-    inputs=[
-        "text",  # User input
-        gr.Dropdown(choices=["Stress Management", "Career Advice", "General", "Friendly Buddy"], label="Choose Chat Category"),  # Category selection
-        "state"  # History
-    ],
-    outputs=["chatbot", "state"],
-    live=False,
-    title="Meet your Personal Assistant: Your Helpful and Caring Chatbot",
-    description="This chatbot is here to help you with anything you need, whether it’s answering questions, offering support, or guiding you through tasks. With a friendly and empathetic approach, it listens carefully to your concerns and provides thoughtful, understanding responses. Whether you’re seeking information or just someone to chat with, our chatbot is designed to make you feel heard and supported. It’s more than just a tool—it’s a companion dedicated to making your day easier and more enjoyable."
-)
+# Gradio Interface with enhanced styling
+chat_interface = gr.Blocks(css="""
+body {
+    font-family: 'Poppins', sans-serif;
+    background: linear-gradient(120deg, #ff9a9e, #fad0c4, #a1c4fd);
+    animation: gradientBG 10s ease infinite;
+    margin: 0;
+    padding: 0;
+    color: #333;
+}
+
+@keyframes gradientBG {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+button {
+    background: linear-gradient(90deg, #6a11cb, #2575fc);
+    color: white;
+    padding: 0.8rem 1.5rem;
+    font-size: 1rem;
+    font-weight: bold;
+    border-radius: 20px;
+    border: none;
+    cursor: pointer;
+    transition: transform 0.2s ease, background 0.2s ease;
+}
+
+button:hover {
+    background: linear-gradient(90deg, #2575fc, #6a11cb);
+    transform: scale(1.1);
+}
+
+header {
+    text-align: center;
+    margin-bottom: 20px;
+    padding: 10px;
+    border-radius: 15px;
+    background: linear-gradient(90deg, #ff758c, #ff7eb3);
+    color: white;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.chatbot-output {
+    border: 2px solid #ff7eb3;
+    background: rgba(255, 255, 255, 0.8);
+    border-radius: 15px;
+    padding: 15px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    max-height: 300px;
+    overflow-y: auto;
+}
+""")
+
+with chat_interface:
+    with gr.Row():
+        gr.Markdown("<h1 style='text-align:center;'>🌟 Vibrant Personal Assistant Chatbot 🌈</h1>")
+    with gr.Row():
+        gr.Markdown("<p style='text-align:center;'>Select a category and type your message to get tailored responses.</p>")
+    with gr.Row():
+        user_input = gr.Textbox(label="Your Message", placeholder="Type something...", lines=2)
+        category_dropdown = gr.Dropdown(
+            choices=["Stress Management", "Career Advice", "General", "Friendly Buddy"],
+            label="Choose Chat Category"
+        )
+    with gr.Row():
+        send_button = gr.Button("Send")
+    with gr.Row():
+        chatbot_output = gr.Chatbot(label="Chat History", css_class="chatbot-output")
+    
+    # Add functionality to handle interactions
+    def handle_chat(user_input, category, history):
+        if not user_input.strip():
+            return history, history
+        updated_history, _ = chatbot(user_input, category, history)
+        return updated_history, updated_history
+    
+    send_button.click(
+        handle_chat,
+        inputs=[user_input, category_dropdown, chatbot_output],
+        outputs=[chatbot_output, chatbot_output]
+    )
 
 chat_interface.launch()