import gradio as gr
from huggingface_hub import InferenceClient

# Connect to Hugging Face model
client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")

# Define the chat response function
def respond(
    message,
    history: list[tuple[str, str]],
    system_message,
    max_tokens,
    temperature,
    top_p,
):
    messages = [{"role": "system", "content": system_message}]

    for val in history:
        if val[0]:
            messages.append({"role": "user", "content": val[0]})
        if val[1]:
            messages.append({"role": "assistant", "content": val[1]})

    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

# Gradio interface layout
demo = gr.ChatInterface(
    respond,
    additional_inputs=[
        gr.Textbox(value="You are a friendly Chatbot.", label="System message"),
    ],
    css=".gradio-container {background-color: #ffeef8;} .gr-button {background-color: #ff88cc; color: white; border-radius: 12px;} .gr-input {border: 2px solid #ff66b2; border-radius: 10px;} .gr-output {border: 2px solid #ff66b2; border-radius: 10px; padding: 10px;} .gr-button:hover {background-color: #ff66b2;} .gr-textbox {background-color: #fff1f5;}",
    theme="huggingface",  # Hugging Face's default theme
    title="Cuddly Chatbot 🐾",  # Title for the app
    description="Welcome to the most adorable chatbot! 💖",
)

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