import gradio as gr
from huggingface_hub import InferenceClient

client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")

def respond(message, history, system_message, max_tokens, temperature, top_p):
    messages = [{"role": "system", "content": system_message}]
    for user, assistant in history:
        if user:
            messages.append({"role": "user", "content": user})
        if assistant:
            messages.append({"role": "assistant", "content": assistant})
    messages.append({"role": "user", "content": message})

    response = ""
    for message in client.chat_completion(
        messages,
        max_tokens=max_tokens,
        stream=True,
        temperature=temperature,
        top_p=top_p,
    ):
        token = message.choices[0].delta.content
        response += token
        yield response

# Custom CSS for improved visual appeal
custom_css = """
body {
    background-color: #f0f4f8;
    font-family: 'Arial', sans-serif;
}
.gradio-container {
    max-width: 800px !important;
    margin: auto;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: white;
}
.chat-window {
    border-radius: 10px;
    border: 1px solid #e0e0e0;
}
.chat-message {
    padding: 10px 15px;
    border-radius: 8px;
    margin: 5px 0;
}
.user-message {
    background-color: #e3f2fd;
}
.bot-message {
    background-color: #f1f8e9;
}
"""

# Create the ChatInterface with custom styling
demo = gr.ChatInterface(
    respond,
    additional_inputs=[
        gr.Textbox(value="You are a friendly Chatbot.", label="System Message", lines=2),
        gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max New Tokens"),
        gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature"),
        gr.Slider(minimum=0.1, maximum=1.0, value=0.95, step=0.05, label="Top-p (Nucleus Sampling)"),
    ],
    title="Enhanced AI Chatbot",
    description="Engage in a conversation with an AI powered by the Zephyr-7b-beta model.",
    theme="soft",
    css=custom_css,
    examples=[
        ["Tell me a short story about a robot learning to paint."],
        ["What are the main challenges in space exploration?"],
        ["Explain quantum computing to a 10-year-old."]
    ],
)


if __name__ == "__main__":
    demo.launch()