app.py

import gradio as gr
from huggingface_hub import InferenceClient

# Initialize the Hugging Face Inference Client
client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")

# Function to handle chatbot responses
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


# Gradio Interface with UI Customization
with gr.Blocks(theme="soft") as demo:
    gr.HTML(
        """
        <div style="background-color: #f0f4ff; padding: 10px; border-radius: 10px; text-align: center;">
            <h1 style="color: #4a90e2;">AI Chat Interface</h1>
            <p style="font-size: 16px; color: #4a4a4a;">
                Powered by Hugging Face's Zephyr-7B model. Customize your system message and parameters for a tailored chat experience.
            </p>
        </div>
        """
    )

    with gr.Row():
        with gr.Column(scale=2):
            chat = gr.ChatInterface(
                respond,
                additional_inputs=[
                    gr.Textbox(
                        value="You are a friendly Chatbot.",
                        label="System message",
                        lines=2,
                        max_lines=3,
                        interactive=True,
                        elem_id="system_message_box",
                    ),
                    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)",
                    ),
                ],
            )
        with gr.Column(scale=1):
            gr.HTML(
                """
                <div style="background-color: #eaf4f4; padding: 15px; border-radius: 10px;">
                    <h3 style="color: #2c7873;">Tips for Better Interaction:</h3>
                    <ul style="font-size: 14px; color: #4a4a4a;">
                        <li>Provide clear and concise messages for optimal responses.</li>
                        <li>Adjust the <strong>Temperature</strong> for more creative or focused answers.</li>
                        <li>Use <strong>Top-p</strong> for better control over randomness in responses.</li>
                    </ul>
                </div>
                """
            )

    # Styling the background
    demo.css = """
    body {
        background-color: #f9fafb;
    }
    .gr-textbox {
        border: 1px solid #e1e4e8;
        border-radius: 5px;
    }
    #system_message_box {
        border: 2px dashed #4a90e2;
        background-color: #f0f9ff;
    }
    .gr-slider {
        background-color: #e9f7fc;
    }
    """

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