File size: 2,603 Bytes
7f843eb
 
c3742e3
7f8762e
 
 
 
 
 
c3742e3
7f843eb
 
 
7f8762e
7f843eb
c3742e3
7f843eb
7f8762e
 
 
 
7f843eb
 
 
 
 
c3742e3
7f843eb
 
 
 
 
 
 
 
c3742e3
7f843eb
 
 
c3742e3
7f8762e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7f843eb
7f8762e
7f843eb
c3742e3
7f8762e
7f843eb
c3742e3
7f843eb
 
 
 
 
 
 
c3742e3
7f843eb
c3742e3
7f8762e
7f843eb
 
7f8762e
c3742e3
7f8762e
 
 
e911bfe
7f8762e
c3742e3
7f8762e
 
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
# βœ… Imports
from openai import OpenAI
import gradio as gr
import os

# βœ… Load API key from Hugging Face Secrets (environment variables)
api_key = os.getenv("OPENROUTER_API_KEY")
if not api_key:
    raise ValueError("⚠️ OPENROUTER_API_KEY not found. Add it in HF Spaces > Settings > Secrets.")

# βœ… OpenRouter API client setup
client = OpenAI(
    base_url="https://openrouter.ai/api/v1",
    api_key=api_key,
)

# βœ… Chat function using Kimi-K2
def ask_kimi(prompt, history=None):
    if history is None:
        history = []

    messages = [{"role": "system", "content": "Wewe ni msaidizi mzuri wa kujifunza programu kwa Kiswahili."}]
    for user, bot in history:
        messages.append({"role": "user", "content": user})
        messages.append({"role": "assistant", "content": bot})
    messages.append({"role": "user", "content": prompt})

    completion = client.chat.completions.create(
        model="moonshotai/kimi-k2:free",
        messages=messages,
        extra_headers={
            "HTTP-Referer": "https://your-site.com",
            "X-Title": "NextDev Academy",
        }
    )

    reply = completion.choices[0].message.content
    history.append((prompt, reply))
    return reply, history

# βœ… Optional inline CSS
custom_css = """
<style>
body {
    background-color: #f9f9f9;
}
.gradio-container {
    max-width: 700px;
    margin: auto;
}
.gradio-chatbot {
    background-color: #eef2f7;
    border-radius: 10px;
    padding: 10px;
}
</style>
"""

# βœ… Gradio UI with proper layout and "messages" type
with gr.Blocks() as demo:
    gr.HTML(custom_css)  # Inject custom styles
    gr.Markdown("## πŸ€– Kimi K2 Chatbot kwa Kiswahili (Powered by OpenRouter)")

    chatbot = gr.Chatbot(label="Kimi K2", type="messages")
    state = gr.State([])

    with gr.Row():
        msg = gr.Textbox(
            placeholder="Uliza swali kuhusu programu au teknolojia...",
            show_label=False,
            scale=4
        )
        submit = gr.Button("➑️ Tuma", scale=1)

    clear = gr.Button("πŸ”„ Anza upya")

    # Chat submission logic - return updated chat history and clear input box
    def user_submit(user_message, history):
        response, updated_history = ask_kimi(user_message, history)
        return updated_history, updated_history, ""

    # Bind submit with Enter or button click
    msg.submit(user_submit, [msg, state], [chatbot, state, msg])
    submit.click(user_submit, [msg, state], [chatbot, state, msg])

    clear.click(lambda: ([], [], ""), None, [chatbot, state, msg])

# βœ… Launch the app (do NOT use css= arg here)
demo.launch()