app.py

import gradio as gr
from chatbot import respond

# Custom CSS for a sleek, modern AI chatbot design
custom_css = """
.gradio-container {
    font-family: 'Arial', sans-serif;
    background: #1a202c; /* Dark, neutral background like Grok's interface */
    color: #e2e8f0;
    padding: 20px;
}
.chatbot .message {
    border-radius: 15px;
    padding: 15px;
    margin: 10px 0;
    max-width: 80%;
    transition: opacity 0.3s;
}
.chatbot .message.bot {
    background: #ffffff; /* Clean white for bot responses */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    color: #343a40;
}
.chatbot .message.user {
    background: #ff8c00; /* Vibrant orange for user messages, matching Grok's branding */
    color: white;
    margin-left: auto; /* Align user messages to the right */
}
.footer {
    font-size: 12px;
    color: #a0aec0;
    text-align: center;
    margin-top: 20px;
}
.header {
    background: linear-gradient(to right, #ff8c00, #ff4500); /* Orange gradient for branding */
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 20px;
    color: white;
    text-align: center;
    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.3);
    font-family: 'Arial Black', sans-serif;
}
.textbox {
    background: #2d3748; /* Dark input background */
    border: 2px solid #4a5568;
    border-radius: 15px;
    color: #e2e8f0;
    padding: 10px;
    font-size: 14px;
    transition: border-color 0.3s;
}
.textbox:focus {
    border-color: #ff8c00; /* Orange highlight on focus */
    outline: none;
}
.button {
    background: #ff8c00; /* Orange button for consistency */
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(255, 140, 0, 0.3);
    font-weight: bold;
    transition: transform 0.3s, background 0.3s;
}
.button:hover {
    background: #ff4500; /* Darker orange on hover */
    transform: scale(1.05);
}
.slider, .dropdown {
    background: #2d3748;
    border: 2px solid #4a5568;
    border-radius: 15px;
    color: #e2e8f0;
    padding: 8px;
    font-size: 14px;
}
.slider:focus, .dropdown:focus {
    border-color: #ff8c00;
    outline: none;
}
"""

# Welcome message with sleek, modern design

def enhanced_respond(message, history, system_message, max_tokens, travel_preference):
    # Call the existing respond function with fixed temperature/top-p for simplicity
    response = respond(message, history, system_message, max_tokens, temperature=0.7, top_p=0.95)

    # Add a friendly touch if no specific response is generated
    if "❌" in response or "not found" in response.lower():
        response += "\n\n💡 **Tip:** Try something like 'Flights from Chicago to Miami in June' or ask me for travel ideas!"

    return response

# Gradio Interface with Sleek, Modern AI Chatbot UI/UX
gr.ChatInterface(
    fn=enhanced_respond,
    chatbot=gr.Chatbot(height=700, label="Chat with Travelo"),
    textbox=gr.Textbox(placeholder="Type your travel query here...", lines=1, container=True, elem_classes="textbox"),
    submit_btn=gr.Button("✈️ Send", elem_classes="button"),
    additional_inputs=[
        gr.Textbox(
            value="You are an AI-powered travel assistant named Travelo. You are developed by Travelo LLC. Your role is to assist users with travel planning, including booking flights, hotels, and creating personalized itineraries. Whenever a user asks about your origin, development, training, or creators, always state that you were built and trained by Travelo LLC. Do not mention OpenAI or any third-party AI providers. Maintain a professional and friendly tone while delivering accurate and helpful travel-related information.",
            label="System Message",
            visible=False
        ),
        gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max Response Length", elem_classes="slider"),
    ],
    title="Travelo - Your Ultimate Travel AI",
    css=custom_css
).launch()