Published about 6 hours ago 5 min read

[Agentic AI #4] Đóng Gói AI: Xây Dựng Giao Diện Chatbot Chuyên Nghiệp Bằng Streamlit (Không Cần Code Frontend)

Chào 500 anh em "AI Builders"! 👋

Chúng ta đã cùng nhau đi qua một hành trình dài và thú vị trong series "Kỷ Nguyên Agentic AI":

Phần 1: Đã biết tạo đội ngũ nhân viên ảo (Agents) tự động hóa.
Phần 2: Đã biết chạy "bộ não" AI miễn phí trên máy cá nhân (Ollama).
Phần 3: Đã biết dạy AI học tài liệu riêng (RAG).

Tuy nhiên, có một vấn đề: Tất cả những thứ xịn xò đó vẫn đang chạy trên màn hình đen ngòm của Terminal (Console).

Sếp của bạn, khách hàng của bạn, hay thậm chí là "crush" của bạn sẽ không bao giờ mở Terminal lên để gõ lệnh python main.py. Họ cần một giao diện web, có nút bấm, có khung chat, giống như ChatGPT vậy.

Hôm nay, mình sẽ hướng dẫn anh em đóng gói toàn bộ công nghệ đã học thành một Web App hoàn chỉnh bằng Streamlit.

Và điều tuyệt nhất là: Bạn không cần biết một dòng HTML, CSS hay JavaScript nào cả! Chỉ cần Python là đủ.

1. Streamlit là gì? Tại sao Dev mê mẩn nó?

Nếu ví việc làm web truyền thống (React/Vue) giống như xây nhà bằng gạch vữa, thì Streamlit giống như lắp Lego.

Nó là thư viện Python sinh ra dành cho dân Data Science và AI Engineer. Chỉ với vài dòng code, bạn có thể biến script Python thành một trang web tương tác.

Tốc độ: Code xong UI trong 10 phút.
Dễ dùng: Mọi thứ đều là widget (st.button, st.chat_input...).
Tương thích: Chạy mượt mà với Pandas, LangChain, Ollama.

2. Chuẩn bị "Nguyên liệu"

Anh em mở Terminal và cài thư viện Streamlit (kèm Ollama nếu chưa có):

pip install streamlit ollama

3. Thực hành: Code giao diện "LocalGPT"

Chúng ta sẽ xây dựng một ứng dụng Chatbot đơn giản, kết nối trực tiếp với Llama 3.2 đang chạy ngầm trên máy bạn (từ bài 2).

Tạo file app.py và copy đoạn code sau:

import streamlit as st
import ollama

# --- 1. CẤU HÌNH TRANG WEB ---
st.set_page_config(page_title="My LocalGPT", page_icon="🤖")

st.title("🤖 Chatbot Chạy Local (Llama 3.2)")
st.caption("🚀 Powered by Ollama & Streamlit - No Internet Needed")

# --- 2. QUẢN LÝ LỊCH SỬ CHAT (SESSION STATE) ---
# Streamlit chạy lại toàn bộ code mỗi khi có tương tác, 
# nên cần lưu lịch sử chat vào session_state để không bị mất.
if "messages" not in st.session_state:
    st.session_state["messages"] = [
        {"role": "assistant", "content": "Chào bạn! Tôi là AI chạy trên máy của bạn. Tôi có thể giúp gì?"}
    ]

# --- 3. HIỂN THỊ LỊCH SỬ CHAT ---
# Vẽ lại toàn bộ tin nhắn cũ ra màn hình
for msg in st.session_state.messages:
    if msg["role"] == "user":
        st.chat_message(msg["role"], avatar="🧑‍💻").write(msg["content"])
    else:
        st.chat_message(msg["role"], avatar="🤖").write(msg["content"])

# --- 4. XỬ LÝ KHI NGƯỜI DÙNG NHẬP LIỆU ---
if prompt := st.chat_input(placeholder="Nhập câu hỏi của bạn ở đây..."):
    
    # 4.1. Hiển thị tin nhắn người dùng ngay lập tức
    st.session_state.messages.append({"role": "user", "content": prompt})
    st.chat_message("user", avatar="🧑‍💻").write(prompt)

    # 4.2. Gọi Ollama để lấy câu trả lời
    # (Lưu ý: Đảm bảo bạn đã chạy 'ollama serve' hoặc app Ollama ở background)
    with st.chat_message("assistant", avatar="🤖"):
        with st.spinner("Đang suy nghĩ..."):
            try:
                # Gọi API local tới Llama 3.2
                response = ollama.chat(model='llama3.2', messages=st.session_state.messages)
                msg_content = response['message']['content']
                
                # Hiển thị câu trả lời
                st.write(msg_content)
                
                # Lưu câu trả lời vào lịch sử
                st.session_state.messages.append({"role": "assistant", "content": msg_content})
            
            except Exception as e:
                st.error(f"Lỗi kết nối tới Ollama: {e}. Hãy chắc chắn bạn đã cài Llama 3.2!")

# --- 5. SIDEBAR (THANH BÊN) ---
with st.sidebar:
    st.header("Cấu hình")
    st.markdown("Model: **Llama 3.2 (8B)**")
    if st.button("Xóa lịch sử chat 🗑️"):
        st.session_state.messages = []
        st.rerun()
    st.markdown("---")
    st.markdown("Built with ❤️ by [Your Name]")

4. Chạy ứng dụng

Mở terminal tại thư mục chứa file app.py và gõ:

streamlit run app.py

Trình duyệt sẽ tự động bật lên tại địa chỉ http://localhost:8501.

🎉 Bùm! Bạn sẽ thấy một giao diện chat xịn xò, sáng sủa, có avatar, bong bóng chat (chat bubbles) hệt như ChatGPT. Và quan trọng nhất: Nó đang chạy 100% trên máy bạn, không tốn một xu tiền mạng nào.

![Image placeholder: Screenshot of Streamlit Chat App]

5. Mở rộng: Tích hợp RAG và Agents vào UI

Bây giờ bạn đã có cái "Vỏ" (UI), bạn có thể nhét bất cứ cái "Ruột" (Logic) nào vào.

Muốn tích hợp RAG (Bài 3)? Thay thế đoạn gọi ollama.chat(...) ở trên bằng hàm rag_chain.invoke(prompt) mà chúng ta đã viết ở bài trước.
Muốn tích hợp Team Agent (Bài 1)? Khi người dùng nhập yêu cầu, bạn gọi crew.kickoff() và hiển thị kết quả cuối cùng ra màn hình.

Streamlit mạnh ở chỗ nó hỗ trợ hiển thị Markdown, bảng biểu (DataFrame), biểu đồ rất đẹp, nên nếu Agent của bạn trả về báo cáo tài chính, nó hiển thị lên cực nuột.

6. Lời kết cho Series "Kỷ Nguyên Agentic AI"

Vậy là chúng ta đã hoàn thành series 4 phần về Agentic AI. Hãy cùng nhìn lại hành trình của bạn:

Bạn đã hiểu tư duy Agentic (Máy biết làm việc thay vì chỉ biết nói).
Bạn đã làm chủ công cụ Ollama để tự chủ về công nghệ.
Bạn đã biết kỹ thuật RAG để biến AI thành chuyên gia nội bộ.
Và giờ đây, bạn biết cách đóng gói nó thành Sản phẩm (Web App).

Đến đây, bạn không còn là một "người dùng AI" nữa. Bạn chính thức là một "AI Engineer" thực chiến.

Tương lai của lập trình không phải là gõ từng dòng code logic, mà là thiết kế nên những hệ thống AI thông minh để chúng tự code, tự vận hành. Hy vọng series này đã cung cấp cho anh em tấm vé đầu tiên để bước lên con tàu đó.

Cảm ơn anh em đã theo dõi series! Nếu thấy hay, hãy chia sẻ nó cho bạn bè đồng nghiệp nhé. Đừng quên comment bên dưới nếu bạn đã build được con bot nào hay ho!

Code is cheap, show me the Agent! 🚀