File size: 2,709 Bytes
1b9e6e3
 
 
e972600
421af5a
e972600
 
421af5a
2bfec82
421af5a
 
 
 
2bfec82
421af5a
 
 
 
dbaa4dc
421af5a
 
846f316
421af5a
dbaa4dc
96da2bc
8babc85
96da2bc
 
 
 
1b9e6e3
e972600
421af5a
1b9e6e3
 
 
 
 
 
 
 
 
 
e972600
1b9e6e3
 
 
 
 
e972600
1b9e6e3
e972600
1b9e6e3
e972600
1b9e6e3
 
 
 
 
 
 
 
 
 
 
2bfec82
 
e972600
 
363ecd9
e972600
 
 
 
363ecd9
 
 
e972600
2bfec82
 
363ecd9
2bfec82
1b9e6e3
 
e972600
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
import gradio as gr
from huggingface_hub import InferenceClient

# Custom background CSS with forced title styling
css = """
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Playfair+Display&display=swap');

body {
  background-image: url('https://cdn-uploads.huggingface.co/production/uploads/67351c643fe51cb1aa28f2e5/wuyd5UYTh9jPrMJGmV9yC.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#chat-panel {
  background-color: rgba(255, 255, 255, 0.85);
  padding: 2rem;
  border-radius: 12px;
  max-width: 700px;
  height: 70vh;
  margin: auto;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
}
.gradio-container .chatbot .header {
  color: #d63384 !important;
  font-family: 'Myriad', serif !important;
  font-size: 1.8rem !important;
  font-weight: bold !important;
  text-align: center !important;
}
"""

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

with gr.Blocks(css=css) as demo:
    with gr.Column(elem_id="chat-panel"):
        gr.Markdown("## 🇯🇵 Japanese Tutor Chatbot")

        with gr.Accordion("⚙️ Settings", open=False):
            system_message = gr.Textbox(
                value="You are an expert Japanese tutor. Help users understand Japanese grammar, vocabulary, sentence structure, particles, and kanji readings. Reply clearly in English unless the user specifies otherwise.",
                label="System message"
            )
            max_tokens = gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens")
            temperature = gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature")
            top_p = gr.Slider(minimum=0.1, maximum=1.0, value=0.95, step=0.05, label="Top-p (nucleus sampling)")

        gr.ChatInterface(
            respond,
            additional_inputs=[system_message, max_tokens, temperature, top_p]
        )

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