File size: 2,598 Bytes
5e29399 4ee5d8c 826b159 56b4d4e 5828241 56b4d4e 5828241 56b4d4e 5828241 56b4d4e 5828241 56b4d4e 5828241 56b4d4e 5828241 56b4d4e 85212a8 20ffc0b 85212a8 20ffc0b 9ac349d 20ffc0b 85212a8 20ffc0b 85212a8 20ffc0b 85212a8 56b4d4e 20ffc0b 85212a8 09d5069 85212a8 9a415c7 56b4d4e 85212a8 |
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 |
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() |