Chainlit - "Mặc áo mới" cho Jarvis (Giao diện chuẩn ChatGPT trong 5 phút)

[AI Hunter]

Đã bao lâu rồi anh em mình cứ phải nhìn cái màn hình Terminal đen ngòm với dòng chữ trắng tẻ nhạt?

User: Hi
Bot: Hello

Nhìn chán đời thực sự!

Hôm nay, chúng ta sẽ "đập đi xây lại" mặt tiền cho Jarvis. Chúng ta sẽ biến nó từ một script Python chạy ngầm thành một Web App xịn xò với đầy đủ tính năng:

• Giao diện Chat như ChatGPT.
• Chữ chạy mượt mà (Streaming Response).
• Hiển thị "Luồng suy nghĩ" (Chain of Thought - Bước 1 tìm DB, Bước 2 suy luận...).
• Upload file, Dark mode tự động.

Và tin vui là: Bạn KHÔNG CẦN biết HTML/CSS/JS. Chỉ cần Python là đủ.

1. Vũ khí: Chainlit​

Tại sao không dùng Streamlit?
Streamlit rất ngon để làm Dashboard dữ liệu, nhưng để làm Chatbot thì Chainlit mới là trùm. Nó được sinh ra chuyên biệt cho LLM, hỗ trợ sẵn việc xử lý đa luồng (Async) và Streaming cực tốt.

Cài đặt:

pip install chainlit openai

2. Hello World: Chào sân cực gắt​

Tạo file

app.py

và gõ vài dòng này vào:

[CODE lang="python"]
import chainlit as cl

@cl.on_chat_start
async def start():
# Gửi tin nhắn chào mừng khi user vào web
await cl.Message(content="Jarvis online! Sếp cần sai bảo gì không? ").send()

@cl.on_message
async def main(message: cl.Message):
# Nhại lại lời user (Echo Bot)
await cl.Message(
content=f"Sếp vừa nói là: {message.content}",
).send()
[/CODE]

Chạy server:

chainlit run app.py -w

(-w là watch mode, sửa code tự reload web)

Bùm! Trình duyệt sẽ tự bật lên `http://localhost:8000`. Bạn đã có ngay một giao diện Chat chuyên nghiệp.

3. Ghép não Jarvis vào UI (Streaming)​

Bây giờ chúng ta sẽ nối OpenAI (hoặc Ollama) vào đây. Điểm "ăn tiền" nhất của Chainlit là hỗ trợ Streaming (chữ hiện ra từng từ giống phim viễn tưởng).

[CODE lang="python"]
import chainlit as cl
from openai import AsyncOpenAI
import os

# Cấu hình Client (Dùng Ollama thì đổi base_url)
client = AsyncOpenAI(api_key="sk-proj-xxxx")

# Cấu hình model
settings = {
"model": "gpt-4o-mini",
"temperature": 0.7,
"max_tokens": 500,
"top_p": 1,
"frequency_penalty": 0,
"presence_penalty": 0,
}

@cl.on_chat_start
async def start():
cl.user_session.set("settings", settings)
await cl.Message(content="Hệ thống đã sẵn sàng! ").send()

@cl.on_message
async def main(message: cl.Message):
settings = cl.user_session.get("settings")

# Tạo tin nhắn rỗng để hứng Stream
msg = cl.Message(content="")
await msg.send()

# Gọi OpenAI với chế độ stream=True
stream = await client.chat.completions.create(
messages=[
{"role": "system", "content": "Bạn là trợ lý ảo Jarvis hài hước."},
{"role": "user", "content": message.content}
],
stream=True,
**settings
)

# Đổ từng từ (chunk) vào giao diện
async for part in stream:
if token := part.choices[0].delta.content or "":
await msg.stream_token(token)

# Kết thúc stream
await msg.update()
[/CODE]

4. Tính năng "Thần thánh": Step Visualization (Hiển thị suy nghĩ)​

Khi Jarvis thực hiện các tác vụ phức tạp (như RAG, Memory), người dùng sẽ muốn biết nó đang làm gì. Chainlit hỗ trợ

cl.Step

để hiển thị tiến trình.

[CODE lang="python"]
@cl.on_message
async def main(message: cl.Message):
# Bước 1: Giả vờ đang tìm trong Memory
async with cl.Step(name="Long-term Memory") as step:
step.input = message.content
await cl.sleep(2) # Giả lập độ trễ
step.output = "Tìm thấy: User thích ăn phở."

# Bước 2: Giả vờ đang tìm GraphRAG
async with cl.Step(name="GraphRAG Search") as step:
step.input = message.content
await cl.sleep(2)
step.output = "Tìm thấy tài liệu liên quan đến Hà Nội."

# Bước 3: Trả lời cuối cùng
await cl.Message(content="Dựa trên ký ức và dữ liệu, tôi gợi ý quán Phở Thìn.").send()
[/CODE]

Kết quả trên giao diện sẽ hiện ra các khối "Thinking..." có thể mở ra đóng vào (Collapse/Expand) nhìn cực kỳ "Nguy hiểm" và chuyên nghiệp.

5. Tùy biến Giao diện (Config)​

Bạn muốn đổi tên Bot, Avatar, hay câu chào mừng?
Tạo file

.chainlit/config.toml

(tự sinh ra sau lần chạy đầu).

[CODE lang="toml"]
[project]
name = "Jarvis AI"

[UI]
name = "Jarvis Assistant"
description = "Hệ thống AI tối thượng của tôi"
# Thay đường dẫn ảnh avatar local hoặc online
# https://github.com/Chainlit/chainlit/blob/main/frontend/public/favicon.svg
[/CODE]

Tổng kết​

Chỉ với khoảng 50 dòng code, bạn đã biến script Python thô sơ thành một sản phẩm Web App hoàn chỉnh.

Giờ đây, bạn có thể tự tin mở laptop lên, gõ `chainlit run app.py` và demo cho bạn bè xem Jarvis hoạt động:
1. User hỏi.
2. Jarvis hiện Step: "Đang lục lọi ký ức...".
3. Jarvis hiện Step: "Đang đọc tài liệu...".
4. Jarvis trả lời (chữ chạy vù vù).