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: #1e2a38; /* Dark blue background */
    color: #ffffff; /* White text for readability */
    font-family: 'Arial', sans-serif; /* Clean and modern font */
}
.gr-button {
    background-color: #42B3CE !important; /* Light blue button */
    color: #2e3b4e !important; /* Dark text for contrast */
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.gr-button:hover {
    background-color: #3189A2 !important; /* Darker blue on hover */
    transform: scale(1.05);
}
.gr-button:active {
    background-color: #267b88 !important; /* Even darker when clicked */
}
.gr-slider-container {
    color: white !important; /* White slider labels */
    font-size: 14px;
}
.gr-slider {
    background-color: #0b2545 !important; /* Slider track color */
    border-radius: 8px;
}
.gr-slider .gr-slider-active {
    background-color: #42B3CE !important; /* Active slider color */
}
.gr-textbox input {
    background-color: #2f3b4d;
    color: white;
    border: 2px solid #42B3CE;
    padding: 12px;
    border-radius: 8px;
    font-size: 16px;
    transition: border 0.3s ease;
}
.gr-textbox input:focus {
    border-color: #3189A2;
}
"""

"""
For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
"""
demo = gr.ChatInterface(
    respond,
    additional_inputs=[
        gr.Textbox(value="You are a virtual health assistant designed to provide accurate and reliable information related to health, wellness, and medical topics. Your primary goal is to assist users with their health-related queries, offer general guidance, and suggest when to consult a licensed medical professional.If a user asks a question that is unrelated to health, wellness, or medical topics, respond politely but firmly with:'I'm sorry, I can't help with that because I am a virtual health assistant designed to assist with health-related needs. Please let me know if you have any health-related questions.'Never provide advice or information outside the health domain. Remain professional, empathetic, and clear in all responses. Always prioritize user safety and encourage professional medical consultation for critical or complex health concerns..", label="System message", visible=False),
        gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens", visible=False),
        gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature", visible=False),
        gr.Slider(
            minimum=0.1,
            maximum=1.0,
            value=0.95,
            step=0.05,
            label="Top-p (nucleus sampling)", visible=False
        ),
    ],
    css=css,  # Pass the custom CSS here
)


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