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


# Custom CSS for 16k quality black and white transparent RGB colors
css = """
    .gradio-container {
        background: rgba(0, 0, 0, 0.9);  /* Black background with transparency */
        color: white;
        font-family: Arial, sans-serif;
    }
    
    .gradio-input, .gradio-output {
        background: rgba(255, 255, 255, 0.1);  /* Transparent white background */
        border: 2px solid rgba(255, 255, 255, 0.3);  /* Light white border */
        border-radius: 10px;
        color: white;
    }

    .gradio-input:focus, .gradio-output:focus {
        border-color: rgba(255, 255, 255, 0.6);  /* Focus effect */
    }
    
    .gradio-textbox {
        color: rgb(255, 255, 255);  /* Text color */
        background-color: rgba(0, 0, 0, 0.5);  /* Dark background for the textbox */
    }
    
    .gradio-slider .slider {
        background: rgba(255, 255, 255, 0.4);  /* Transparent slider background */
        color: rgb(255, 255, 255);  /* Slider color */
    }

    .gradio-button {
        background-color: rgb(0, 0, 0);  /* Black button */
        color: rgb(255, 255, 255);  /* White text */
        border-radius: 8px;
    }

    .gradio-button:hover {
        background-color: rgb(80, 80, 80);  /* Darker on hover */
    }

    .gradio-interface {
        border: 2px solid rgba(255, 255, 255, 0.3);  /* Light border */
    }

    .gradio-header {
        color: rgb(255, 255, 255);  /* Header text color */
        font-size: 24px;
    }

    .gradio-footer {
        color: rgba(255, 255, 255, 0.5);  /* Footer text color */
    }

    /* Chatbox customization */
    .chatbox .gradio-output {
        padding: 10px;
        border-radius: 15px;
        background: rgba(0, 0, 0, 0.8);  /* Dark chat background */
        color: rgba(255, 255, 255, 0.9);  /* Light text */
    }

    .chatbox .gradio-input {
        padding: 10px;
        border-radius: 15px;
        background: rgba(255, 255, 255, 0.1);  /* Transparent input box */
        color: rgba(255, 255, 255, 0.9);
    }
"""

demo = gr.ChatInterface(
    respond,
    additional_inputs=[
        gr.Textbox(value="You are a friendly Chatbot.", label="System message"),
        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)",
        ),
    ],
    css=css  # Add custom CSS
)

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