import gradio as gr
from openai import OpenAI
import os

# Custom CSS for the Deadpool theme
css = '''
.gradio-container {
    max-width: 1000px !important;
    background-color: black !important;
    color: red !important;
    font-family: 'Courier New', monospace !important;
    padding: 20px !important;
    border-radius: 5px !important;
}
h1 {
    text-align: center;
    color: red !important;
    font-family: 'Impact', sans-serif !important;
}
footer {
    visibility: hidden;
}
textarea, input, select, button {
    background-color: black !important;
    color: red !important;
    border: 2px solid blue !important;
    font-family: 'Courier New', monospace !important;
}
button:hover {
    background-color: blue !important;
    color: white !important;
}
.chatbot {
    background-color: black !important;
    color: red !important;
    border: 2px solid blue !important;
    font-family: 'Courier New', monospace !important;
}
'''

ACCESS_TOKEN = os.getenv("HF_TOKEN")

client = OpenAI(
    base_url="https://api-inference.huggingface.co/v1/",
    api_key=ACCESS_TOKEN,
)

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.completions.create(
        model="meta-llama/Meta-Llama-3.1-8B-Instruct",
        max_tokens=max_tokens,
        stream=True,
        temperature=temperature,
        top_p=top_p,
        messages=messages,
    ):
        token = message.choices[0].delta.content
        
        response += token
        yield response

demo = gr.ChatInterface(
    respond,
    additional_inputs=[
        gr.Textbox(value="", 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",
        ),
    ],
    css=css,
    title="Deadpool Chat",
    theme="default"
)

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