app.py

import gradio as gr
from huggingface_hub import InferenceClient

"""
For more information on `huggingface_hub` Inference API support, please check the docs: https://huggingface.co/docs/huggingface_hub/v0.22.2/en/guides/inference
"""
client = InferenceClient("meta-llama/Llama-3.2-3B-Instruct")


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


# CSS for styling the interface
css = """
body {
    background-color: #121212; /* Dark background */
    color: white; /* Text color for better visibility */
}

.gr-button {
    background-color: white !important; /* White button color */
    color: black !important; /* Black text for contrast */
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 5px !important;
}

.gr-button:hover {
    background-color: #e0e0e0 !important; /* Slightly lighter button on hover */
}

.gr-slider-container {
    color: white !important; /* Slider labels in white */
}
"""

"""
For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
"""
demo = gr.ChatInterface(
    respond,
    css=css,  # Pass the custom CSS here
)


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