VFriend: Hành Trình Giải Mã Ứng Dụng Chatbot AI (Phần 2) - "Ruột Gan" Của Một Siêu Phẩm AI
Lê Lân
0
VFriend: Kiến Trúc Hệ Thống và Thiết Kế Prompt cho Chatbot AI Đa Nhân Vật
Mở Đầu
VFriend là một ứng dụng chatbot đột phá với khả năng mô phỏng các cuộc hội thoại chân thực giữa người dùng và các nhân vật AI có cá tính riêng biệt.
Trong phần đầu tiên, VFriend được giới thiệu với những điểm nổi bật như: prompt cực kỳ chi tiết để mô phỏng tính cách, hệ thống bộ nhớ 3 lớp mang tính nhân bản (ngay lập tức, tuần tự và tóm tắt), và tính năng Trio Mode cho phép ba nhân vật tương tác đồng thời. Bài viết này tập trung giải mã toàn bộ kiến trúc kỹ thuật, luồng xử lý logic, và cách xây dựng prompt đằng sau bức màn đó.
Nội dung chính bao gồm: ngăn xếp công nghệ, cấu trúc app, quy trình xử lý hội thoại, cách xây dựng và quản lý prompt hơn 20,000 ký tự. Nếu bạn muốn hiểu sâu về hoạt động của VFriend, hãy tiếp tục đọc.
Tổng Quan Dự Án
Kiến Trúc và Triết Lý Thiết Kế
VFriend vận hành bằng cách tạo prompt dài hơn 20,000 ký tự ở mỗi lượt chat, gọi API OpenAI và xử lý các phản hồi cũng như cập nhật bộ nhớ theo thời gian thực. Đây là hệ thống phức tạp với từng lớp được thiết kế rõ ràng đảm bảo trách nhiệm riêng biệt trong luồng này.
Sự rõ ràng trong thiết kế lớp là chìa khóa để quản lý phức tạp của ứng dụng.
Ngăn Xếp Công Nghệ
Thành phần
Công nghệ sử dụng
Backend
Laravel (Breeze với multi-guard)
Frontend
React (qua Inertia.js)
UI Chat
chat-ui-kit-react
Cơ sở dữ liệu
MySQL
AI Interface
OpenAI API (GPT-4.1 và GPT-4.1-mini)
Triển khai
Amazon Lightsail
Ứng dụng tận dụng Laravel Breeze để xử lý xác thực với multi-guard cho người dùng và quản trị viên riêng biệt, React phục vụ UI hiện đại, và OpenAI API làm nền tảng AI.
Cấu Trúc Thư Mục Chính
app/: chứa logic backend, controller, job, model, dịch vụ chat, và bộ tạo prompt
resources/: frontend assets, bao gồm CSS, React components, layouts, và views blade
database và các cấu hình khác không đề cập chi tiết
Thiết Lập Môi Trường
VFriend sử dụng Laravel Sail cùng MySQL cho môi trường phát triển, chạy Laravel Breeze đa guard cho phép tách biệt luồng đăng nhập user và admin. Môi trường sản xuất trên Amazon Lightsail đảm bảo khả năng mở rộng và độ ổn định.
Hệ Thống Giao Diện Người Dùng (UI)
Chat.tsx
Frontend dùng chat-ui-kit-react kết hợp các tính năng:
Avatar đại diện nhân vật
Hiển thị trạng thái “Typing…” khi AI trả lời
Tự động cuộn khi có tin nhắn mới
Hiển thị markdown an toàn, bảo vệ XSS với dompurify và rehype-raw
UI được thiết kế để tạo trải nghiệm tương tác chân thực, mượt mà cho người dùng.
Luồng Xử Lý Hội Thoại
Khi Mở Trang
Tải dữ liệu: prompt hệ thống, dữ liệu người dùng, bộ nhớ tóm tắt, lịch sử chat
Đưa vào session để duy trì trạng thái
Hiển thị lại hội thoại trước đó
Khi Gửi Tin Nhắn
Hiển thị trạng thái gõ tin nhắn và khóa input
Lấy session data gồm: prompt hệ thống, profile user, bộ nhớ các lớp (instant, sequential, summary)
Tạo prompt cho nhân vật 1 → gọi API → hiển thị câu trả lời
Tương tự cho nhân vật 2 dựa trên phản hồi nhân vật 1
Nhân vật 3 dựa trên toàn bộ câu trả lời trước đó
Lưu bộ ba câu trả lời thành một lượt hội thoại
Cập nhật bộ nhớ tuần tự, xóa tin nhắn instant cũ
Lưu trạng thái vào database
Mỗi 5 lượt chat, chạy job cập nhật bộ nhớ tóm tắt bất đồng bộ
Việc tách luồng đồng bộ và bất đồng bộ giúp hệ thống phản hồi nhanh và duy trì bộ nhớ dài hạn.
Thiết Kế Prompt và Bộ Nhớ
Cấu Trúc Prompt Chính
Prompt chat bao gồm các phần:
Nhân vật (You): định nghĩa bản thân chi tiết (~3000 ký tự)
Người dùng (User): Bộ hồ sơ cá nhân (~2000 ký tự)
Luật chơi: quy tắc nhập vai, bộ nhớ và giao tiếp
Bộ nhớ: năng lượng chính trong hội thoại gồm memory instant, sequential, summary (~15,000+ ký tự)
Ví dụ Layout Prompt
# You (Character) – ~3000 chars
## Common
### EQ – Empathy Axis
### EX – Behavior Axis
## Personal
### Character Profile
### Conversation Style
### Personality & Emotion Handling
### Topics & Expressions
# User – ~2000 chars
## Nickname
## Life Summary
# Roleplay Rules
# Memory Rules
# Conversation Guidelines
# Instructions
Bộ Nhớ Đính Kèm Dạng JSON
{
"memory":{
"summary":{
"character1":"...",
"character2":"...",
"character3":"..."
},
"sequential":[
{
"turn":[
{
"message":"Hi!",
"sender":"user"
},
{
"message":"Hello!",
"sender":"character1"
}
]
}
],
"instant":[
{
"message":"What’s your favorite color?",
"sender":"user"
},
{
"message":"Pink, obviously!",
"sender":"character1"
}
]
}
}
Prompt Tóm Tắt Bộ Nhớ
Gửi riêng cho một agent AI tóm tắt “the summarizer”
Bao gồm cấu trúc tương tự nhân vật và người dùng (~4000 ký tự)
Meta-instruction xác định mode và mục tiêu tóm tắt
Các block bộ nhớ cần được nén lại (sequential memory, vv.)
Chọn Mô Hình AI
Nhiệm vụ
Mô hình sử dụng
Đặc điểm
Sinh hội thoại
GPT-4.1-mini
Tốc độ cao, giới hạn token lớn, chi phí thấp
Tóm tắt bộ nhớ
GPT-4.1
Chính xác, chi phí cao hơn
Việc sử dụng linh hoạt các mô hình cho phép cân bằng giữa chất lượng và hiệu năng chi phí cho từng tác vụ.
Công Việc Cập Nhật Bộ Nhớ Tóm Tắt
Cứ mỗi 5 lượt hội thoại, hệ thống kích hoạt job bất đồng bộ:
Thu thập bộ nhớ mới nhất
Tạo prompt tóm tắt
Gọi mô hình GPT-4.1 tóm tắt nội dung
Lưu trữ kết quả JSON cập nhật
Cập nhật session và prompt kịp thời cho các lượt chat tiếp theo
Kết Luận
VFriend là một hệ thống chatbot AI phức tạp với kiến trúc backend và frontend chặt chẽ, được thiết kế tối ưu để xử lý prompt siêu dài, duy trì bộ nhớ đa lớp và hỗ trợ hội thoại đa nhân vật trong thời gian thực. Hệ thống đa tầng này sử dụng đa mô hình GPT tạo nên trải nghiệm hội thoại sâu, nhân bản và liên tục phát triển theo tương tác người dùng.
Với cấu trúc prompt tinh vi, cơ chế bộ nhớ thông minh và luồng xử lý song song, VFriend không chỉ tái hiện các cuộc trò chuyện mà còn tạo ra các nhân vật có chiều sâu và linh hoạt.
Nếu bạn hứng thú, hãy theo dõi phần cuối trong series để xem quá trình phát triển, những thử thách và bài học kinh nghiệm khi xây dựng sản phẩm độc đáo này.
Tham Khảo
Haru Creator. (2024). When I Fed 20,000 Words Into An AI Prompt, It Gained A Personality – Part 1 Overview. dev.to