import gradio as gr
from huggingface_hub import InferenceClient

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

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

demo = gr.ChatInterface(
    respond,
    additional_inputs=[
        gr.Textbox(value="You are a friendly Chatbot.", label="System message"),
    ],
    css="""
    .gradio-container {background-color: #ffeef8; font-family: 'Comic Sans MS', sans-serif;}
    .gr-button {background-color: #ff88cc; color: white; border-radius: 12px; padding: 10px;}
    .gr-input {border: 2px solid #ff66b2; border-radius: 10px; background-color: #fff1f5; font-size: 18px;}
    .gr-output {border: 2px solid #ff66b2; border-radius: 10px; padding: 15px; background-color: #ffffff; font-size: 18px; font-weight: bold;}
    .gr-button:hover {background-color: #ff66b2; transition: background-color 0.3s;}
    .gr-textbox {background-color: #fff1f5;}
    .gradio-interface {padding: 20px; margin: 20px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);}
    .gradio-container input, .gradio-container button {font-family: 'Comic Sans MS', sans-serif;}
    """,
    title="Cuddly Chatbot 🐾",
    description="A sweet and friendly assistant for all your questions! 💖",
)

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