File size: 3,380 Bytes
bcf9fc0
 
 
cb9643e
bcf9fc0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
cb9643e
bcf9fc0
 
 
cb9643e
bcf9fc0
 
 
cb9643e
 
 
 
bcf9fc0
4d3f3d3
cb9643e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
384392e
 
 
bcf9fc0
 
 
 
7c6b19a
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
import gradio as gr
from huggingface_hub import InferenceClient

# Set up the InferenceClient for the chatbot
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 the interface with styling and customization
demo = gr.ChatInterface(
    respond,
    additional_inputs=[
        gr.Textbox(value="You are a friendly Chatbot.", label="System message", lines=1),
        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 to style the interface */
        .gradio-container {
            background-color: #222222; /* Dark background */
            color: #f4f4f4; /* Light text */
            font-family: 'Arial', sans-serif;
            border-radius: 12px;
            padding: 20px;
        }

        .gradio-button {
            background-color: #ff4081; /* Pink buttons */
            color: white;
            border-radius: 10px;
            font-size: 16px;
            padding: 12px 24px;
        }

        .gradio-button:hover {
            background-color: #e91e63; /* Darker pink on hover */
        }

        .gradio-textbox {
            background-color: #333333; /* Dark background for textboxes */
            border-radius: 12px;
            color: #f4f4f4; /* Light text inside the textboxes */
            padding: 12px;
        }

        .gradio-chat {
            background-color: #333333;
            border-radius: 12px;
            padding: 16px;
        }

        .gradio-chat .gradio-message-user {
            background-color: #ff4081; /* Pink background for user messages */
            border-radius: 12px;
            color: #f4f4f4;
        }

        .gradio-chat .gradio-message-assistant {
            background-color: #555555; /* Darker background for assistant messages */
            border-radius: 12px;
            color: #f4f4f4;
        }

        .gradio-container h1 {
            color: #ff4081; /* Title in pink */
            font-size: 36px;
            text-align: center;
        }

        .gradio-container .gradio-textbox input {
            font-size: 16px;
        }
        .gradio-container p {
            color: #bdbdbd; /* Light grey description text */
            text-align: center;
            font-size: 14px;
        }
    """,
    title="Cuddly Chatbot 🐾",
    description="A sweet and friendly assistant for all your questions! πŸ’–",
)

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