app.py

import gradio as gr
from utils import generate_response

# Define chatbot interaction function
def chat(user_input, chat_history):
    try:
        # Generate response
        response = generate_response(user_input)
        # Update chat history
        chat_history.append(("User", user_input))
        chat_history.append(("AI", response))
        # Format chat history for display
        formatted_history = "\n".join(
            [f"{role}: {message}" for role, message in chat_history]
        )
        return formatted_history, chat_history
    except Exception as e:
        return f"Error: {e}", chat_history

# Create Gradio interface with vertical alignment and background color
with gr.Blocks(css="""
    body {
        background-color: #121212;
        color: #f1f1f1;
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }
    .gradio-container {
        width: 100%;
        max-width: 600px;
        background-color: #1e1e1e;
        padding: 20px;
        border-radius: 10px;
    }
    .gradio-container .textbox, .gradio-container .button {
        background-color: #333;
        color: #f1f1f1;
        border: 1px solid #444;
        border-radius: 8px;
    }
    .gradio-container .textbox:focus, .gradio-container .button:focus {
        border-color: #007bff;
    }
    .gradio-container .button:hover {
        background-color: #007bff;
        cursor: pointer;
    }
    .textbox {
        margin-bottom: 15px;
    }
    #chatbox {
        height: 400px;
        overflow-y: auto;
        border: 2px solid #444;
        padding: 15px;
        border-radius: 8px;
        background-color: #2a2a2a;
        color: #f1f1f1;
        margin-bottom: 20px;
    }
""") as demo:
    gr.Markdown("## 🤖 Professional Groq Chatbot")
    gr.Markdown("Type your message below to chat with the AI!")

    # Define layout with vertical alignment
    with gr.Column():
        user_input = gr.Textbox(
            label="Your Message",
            placeholder="Ask me anything!",
            lines=2,
            interactive=True,
        )
        submit_button = gr.Button("Send")
        clear_button = gr.Button("Clear Chat")

        chatbot_output = gr.Textbox(
            label="Chat History",
            placeholder="AI's responses will appear here.",
            lines=15,
            interactive=False,
            elem_id="chatbox",
        )

    # State to hold chat history
    chat_history = gr.State([])

    # Button functionalities
    submit_button.click(
        fn=chat,
        inputs=[user_input, chat_history],
        outputs=[chatbot_output, chat_history],
    )

    clear_button.click(
        fn=lambda: ("", []),
        inputs=[],
        outputs=[chatbot_output, chat_history],
    )

# Launch locally
if __name__ == "__main__":
    demo.launch()