app.py

import gradio as gr
from huggingface_hub import InferenceClient

client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")

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

# Define custom CSS
custom_css = """
/* Add your custom CSS styles here */
body {
    font-family: Arial, sans-serif;
    background-color: white;
}
.gradio-container {
    border: linear-gradient(90deg, rgba(0,0,0,1) 1%, rgba(15,6,83,1) 53%, rgba(22,9,121,1) 100%, rgba(0,212,255,1) 100%);
    border-radius: 10px;
    padding: 20px;
    background-color: #ffffff;
    box-shadow:0 0 12px 12px solid black; 
}
.gradio-input {
    border-radius: 5px;
    border: 1px solid #ddd;
    padding: 10px;
}
.gradio-button {
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
}
.gradio-output {
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    box-shadow:0 0 12px 12px solid grey; 
}
<script>
    window.onload = function() {
        setTimeout(function() {
            let inputField = document.querySelector("textarea");
            if (inputField) {
                inputField.blur();  // Removes focus from the input field
            }
        }, 100);
    };
</script>
"""

# Create a Gradio chat interface with custom CSS
demo = gr.ChatInterface(
    fn=respond,
    additional_inputs=[
        gr.Textbox(value="You are a Chatbot.Your name is Evy.Your are Developed By Joe.", label="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)",
        ),
    ],
    css=custom_css,
    autofocus=False
)

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