import gradio as gr
from huggingface_hub import InferenceClient

# Cliente da Inference API
client = InferenceClient("lambdaindie/lambdai")

# Função para responder no chatbot
def respond(
    message,
    history: list[tuple[str, str]],
    system_message,
    max_tokens,
    temperature,
    top_p,
):
    messages = [{"role": "system", "content": system_message}]

    # Adicionando a história da conversa
    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 = ""

    # Fluxo de resposta do cliente da API
    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


# Interface do Gradio com chat customizado
demo = gr.ChatInterface(
    respond,
    additional_inputs=[
        gr.Textbox(value="", label="System message", lines=1, placeholder="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)",
        ),
    ],
    theme="huggingface",  # Usando tema do Hugging Face para um estilo moderno
    title="Lambda Chatbot",  # Título na interface
    description="Chatbot alimentado pelo modelo Lambdai",  # Descrição simples
  
    css="""
        .chatbox {
            background-color: #0e1117; 
            color: #f5f5f5; 
            font-family: 'JetBrains Mono', monospace; 
            border-radius: 8px;
            border: 1px solid #444;
        }
        .gradio-container {
            background-color: #121212;
            padding: 20px;
            border-radius: 10px;
        }
        .gr-button {
            background-color: #4a90e2;
            color: #fff;
            font-family: 'JetBrains Mono', monospace;
            border-radius: 5px;
        }
        .gr-button:hover {
            background-color: #357ab7;
        }
        .gr-slider {
            background-color: #333;
            color: #f5f5f5;
            border-radius: 8px;
        }
        .gr-slider .slider {
            background-color: #444;
        }
        .gr-chatbox-container {
            background-color: #181a1f;
            border-radius: 10px;
        }
        .gr-output {
            font-family: 'JetBrains Mono', monospace;
            color: #f5f5f5;
        }
    """,  # Customização de CSS
)

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