app.py

import gradio as gr
import openai
import os

# Set OpenAI API Key
openai.api_key = os.getenv("TRY_NEW_THINGS")
openai.api_base = "https://api.groq.com/openai/v1"

# Function to get response from GROQ API
def get_groq_response(message, category):
    system_message = ""
    if category == "Stress Management":
        system_message = "Provide soothing advice and tips to help the user manage stress. Be calm and empathetic."
    elif category == "Career Advice":
        system_message = "Provide professional and constructive career advice. Be encouraging and helpful."
    elif category == "General":
        system_message = "Provide general conversation. Be friendly and easygoing."
    elif category == "Friendly Buddy":
        system_message = "Respond as a supportive and fun friend. Be informal and light-hearted."

    try:
        response = openai.ChatCompletion.create(
            model="llama-3.1-70b-versatile",
            messages=[
                {"role": "system", "content": system_message},
                {"role": "user", "content": message}
            ]
        )
        return response.choices[0].message["content"]
    except Exception as e:
        return f"Error: {str(e)}"

# Chatbot function
def chatbot(user_input, category, history=[]):
    bot_response = get_groq_response(user_input, category)
    history.append({"role": "user", "content": user_input})
    history.append({"role": "assistant", "content": bot_response})
    return history, history

# 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, #a1c4fd, #c2e9fb);
    color: #333;
    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, #c2e9fb, #a1c4fd);
    transform: scale(1.05);
}
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);
}
.chat-container {
    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", type="messages")
    with gr.Row():
        # Custom HTML button
        gr.HTML("""
        <button id="copy-btn" style="
            background: linear-gradient(90deg, #f9f9f9, #e6e6e6);
            color: #555;
            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;
        ">Copy Response</button>
        <script>
        document.getElementById('copy-btn').addEventListener('click', () => {
            const responses = document.querySelectorAll('.bot-message');
            if (responses.length > 0) {
                const lastResponse = responses[responses.length - 1].innerText;
                navigator.clipboard.writeText(lastResponse)
                    .then(() => alert('Copied to clipboard!'))
                    .catch(() => alert('Failed to copy!'));
            } else {
                alert('No bot response to copy!');
            }
        });
        </script>
        """)

    # Add functionality to handle interactions
    send_button.click(
        chatbot,
        inputs=[user_input, category_dropdown, chatbot_output],
        outputs=[chatbot_output, chatbot_output]
    )

chat_interface.launch()