File size: 3,459 Bytes
43e3a76 a797c51 43e3a76 a797c51 43e3a76 a797c51 43e3a76 a797c51 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | 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
# Custom CSS for 16k quality black and white transparent RGB colors
css = """
.gradio-container {
background: rgba(0, 0, 0, 0.9); /* Black background with transparency */
color: white;
font-family: Arial, sans-serif;
}
.gradio-input, .gradio-output {
background: rgba(255, 255, 255, 0.1); /* Transparent white background */
border: 2px solid rgba(255, 255, 255, 0.3); /* Light white border */
border-radius: 10px;
color: white;
}
.gradio-input:focus, .gradio-output:focus {
border-color: rgba(255, 255, 255, 0.6); /* Focus effect */
}
.gradio-textbox {
color: rgb(255, 255, 255); /* Text color */
background-color: rgba(0, 0, 0, 0.5); /* Dark background for the textbox */
}
.gradio-slider .slider {
background: rgba(255, 255, 255, 0.4); /* Transparent slider background */
color: rgb(255, 255, 255); /* Slider color */
}
.gradio-button {
background-color: rgb(0, 0, 0); /* Black button */
color: rgb(255, 255, 255); /* White text */
border-radius: 8px;
}
.gradio-button:hover {
background-color: rgb(80, 80, 80); /* Darker on hover */
}
.gradio-interface {
border: 2px solid rgba(255, 255, 255, 0.3); /* Light border */
}
.gradio-header {
color: rgb(255, 255, 255); /* Header text color */
font-size: 24px;
}
.gradio-footer {
color: rgba(255, 255, 255, 0.5); /* Footer text color */
}
/* Chatbox customization */
.chatbox .gradio-output {
padding: 10px;
border-radius: 15px;
background: rgba(0, 0, 0, 0.8); /* Dark chat background */
color: rgba(255, 255, 255, 0.9); /* Light text */
}
.chatbox .gradio-input {
padding: 10px;
border-radius: 15px;
background: rgba(255, 255, 255, 0.1); /* Transparent input box */
color: rgba(255, 255, 255, 0.9);
}
"""
demo = gr.ChatInterface(
respond,
additional_inputs=[
gr.Textbox(value="You are a friendly Chatbot.", 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=css # Add custom CSS
)
if __name__ == "__main__":
demo.launch() |