Hé Lộ Bí Mật VFriend: Cách Biến Chatbot AI Thành "Bạn Bè" Có Trí Nhớ Sâu Sắc!
Lê Lân
0
VFriend: Kiến Trúc Hệ Thống và Thiết Kế Chatbot AI 20.000 Từ
Mở Đầu
VFriend là một ứng dụng chatbot nổi bật với khả năng mô phỏng cuộc trò chuyện thực tế cùng các nhân vật AI đa tầng, dựa trên bộ prompt 20.000 từ cực kỳ chi tiết và hệ thống bộ nhớ 3 lớp độc đáo.
Trong bài viết đầu tiên, tác giả đã giới thiệu tổng quan về VFriend và những tính năng nổi bật như: prompt chi tiết, bộ nhớ nhân tạo theo 3 tầng, tính năng Trio Mode cho 3 nhân vật trò chuyện cùng lúc, cùng giao diện người dùng được chăm chút kỹ lưỡng. Ở phần này, chúng ta đi sâu vào kiến trúc hệ thống, quy trình xử lý, cũng như cách thiết kế prompt và tích hợp OpenAI API để hiểu rõ cách vận hành đằng sau.
Các nội dung chính bao gồm:
Các thành phần công nghệ và cấu trúc ứng dụng
Quy trình xử lý tin nhắn và cập nhật bộ nhớ
Cách xây dựng và quản lý prompt dài hơn 20.000 ký tự
Phân tích mô hình AI được sử dụng cho từng tác vụ
Tổng Quan Dự Án
Triết Lý và Kiến Trúc Ứng Dụng
VFriend được thiết kế để tạo prompt động với dung lượng vượt 20.000 ký tự cho mỗi lượt trò chuyện. Ứng dụng gọi API OpenAI, xử lý phản hồi thời gian thực, đồng thời cập nhật bộ nhớ của nhân vật. Mọi tầng trong hệ thống được phân chia rõ trách nhiệm, nhằm duy trì sự mượt mà và mở rộng dễ dàng.
Kiến trúc hướng tầng, tích hợp frontend và backend chặt chẽ, đảm bảo đáp ứng cả các trạng thái trò chuyện phức tạp như Trio Mode cùng lúc ba nhân vật.
Công Nghệ Sử Dụng
Thành phần
Công nghệ/Gói thư viện
Backend
Laravel với Breeze (xác thực multi-guard)
Frontend
React (qua Inertia.js)
Giao diện chat
chat-ui-kit-react
Cơ sở dữ liệu
MySQL
AI Interface
OpenAI API (GPT-4.1 & GPT-4.1-mini)
Triển khai
Amazon Lightsail
Cấu Trúc Thư Mục Chính
app/
├── Http/
│ ├── Controllers/
│ │ ├── Admin/
│ │ ├── Auth/
│ │ ├── ChatController.php
│ │ └── ProfileController.php
│ ├── Middleware/
│ └── Requests/
├── Jobs/
│ └── UpdateSummaryMemory.php
├── Models/
│ ├── Admin.php
│ ├── Prompt.php
│ └── User.php
├── Notifications/
├── Prompts/
│ ├── ChatPromptBuilder.php
│ └── SummaryPromptBuilder.php
├── Providers/
└── Services/
└── ChatService.php
resources/
├── css/
├── js/
│ ├── Components/
│ ├── Layouts/
│ ├── Pages/
│ ├── styles/
│ ├── types/
│ ├── app.tsx
│ ├── bootstrap.ts
│ └── ziggy.js
└── views/
└── app.blade.php
Thiết Lập Môi Trường Phát Triển
VFriend sử dụng Laravel Sail kết hợp MySQL làm môi trường local. Laravel Breeze được dùng cho xác thực người dùng với multi-guard để phân tách luồng đăng nhập user và admin.
Sản phẩm được triển khai lên Amazon Lightsail đảm bảo tính ổn định, khả năng vận hành trơn tru trong môi trường production.
Thiết Kế Giao Diện và Trải Nghiệm Người Dùng
Hệ Thống Thiết Kế
Dựa trên hệ thống design Figma lấy cảm hứng từ hướng dẫn UI của Japan's Digital Agency, phần frontend được port từ Next.js sang React với Inertia.js, thay thế hoàn toàn giao diện mặc định của Laravel Breeze.
Giao Diện Chat (Chat.tsx)
Dựa trên chat-ui-kit-react
Hỗ trợ Avatars đại diện nhân vật
Hiển thị chỉ báo đang gõ (TypingIndicator)
Tự động cuộn khi có tin nhắn mới
Render Markdown với react-markdown, bảo vệ XSS bằng dompurify + rehype-raw
Giao diện đòi hỏi sự mượt mà, chuẩn xác và bảo mật để không làm gián đoạn trải nghiệm người dùng khi trò chuyện đa nhân vật.
Xử Lý Trò Chuyện và Bộ Nhớ Nhân Vật
ChatController.php – Điều phối phiên chat
Quản lý session đọc/ghi
Chuyển đổi chế độ Solo hoặc Trio
Sinh prompt theo từng nhân vật
Gọi ChatService thực thi API
Khởi chạy job UpdateSummaryMemory sau mỗi 5 lượt trò chuyện
ChatService.php – Tương tác với OpenAI API
Cấu hình mô hình GPT, tham số nhiệt độ, giới hạn token
Thực hiện prompt gọi API
Phân tích và trả về phản hồi hợp lệ
UpdateSummaryMemory.php – Cập nhật bộ nhớ tóm tắt (Async Job)
Được chạy sau 5 lượt tương tác
Tóm tắt các thông tin quan trọng từ bộ nhớ theo dạng JSON
Lưu trữ và cập nhật lại session, dữ liệu Backend
Quy Trình Xử Lý Tin Nhắn
Khi Tải Trang
Nạp prompt hệ thống, dữ liệu user, bộ nhớ tóm tắt và lịch sử chat từ DB
Lưu vào session frontend, hiển thị đoạn chat trước
Khi Gửi Tin Nhắn
Hiển thị trạng thái "Typing..." và khoá phần nhập liệu
Lấy dữ liệu session: prompt hệ thống, thông tin user, bộ nhớ (nhanh, tuần tự, tóm tắt)
Sinh prompt cho từng nhân vật lần lượt và gọi API:
Nhân vật 1 → API → Phản hồi + hiển thị
Nhân vật 2 (dựa trên phản hồi nhân vật 1) → API → Phản hồi + hiển thị
Nhân vật 3 (dựa trên các phản hồi trước) → API → Phản hồi + hiển thị
Lưu bộ 3 phản hồi làm lượt mới
Cập nhật bộ nhớ tuần tự (giới hạn 10 lượt - xoá lượt cũ nhất)
Lưu vào cơ sở dữ liệu
Xoá bộ nhớ tức thời (instant memory)
Sau mỗi 5 lượt gọi job cập nhật bộ nhớ tóm tắt
Quy trình này kết hợp đồng bộ với bất đồng bộ, cho phép tăng khả năng mở rộng và duy trì trạng thái bộ nhớ dài hạn cho các nhân vật AI.
Thiết Kế Prompt Với Hơn 20.000 Ký Tự
Kiến Trúc Prompt
Hai loại prompt chính:
Chat Prompt: Dùng trong hội thoại thực tế
Summary Prompt: Dùng để tóm tắt và cập nhật bộ nhớ dài hạn
Định dạng Markdown + JSON, tổ chức dữ liệu phân tầng để GPT hiểu cấu trúc phức tạp
Cấu Trúc Chat Prompt
Thành phần
Kích thước (kí tự)
Nội dung chính
You (Nhân vật)
~3000
Mô tả nhân vật, phong cách, cảm xúc, chủ đề
User (Người dùng)
~2000
Hồ sơ chi tiết người dùng
Rules (Luật chơi)
-
Quy tắc nhân vật, vai trò, kịch bản
Memory (Bộ nhớ)
15,000+
Bộ nhớ tức thời, tuần tự và tóm tắt
Ví dụ bố cục 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ớ Dưới 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"
}
]
}
}
Thiết Kế Summary Prompt
Được gửi cho “summarizer” (AI tóm tắt)
Bao gồm cấu trúc nhân vật và người dùng (~4000 kí tự)
Dẫn dắt meta-instruction về bộ nhớ cập nhật
Bộ nhớ cần tóm tắt (tuần tự, tức thời,...)
Lựa Chọn Mô Hình GPT
Tác vụ
Mô hình GPT
Đặc điểm
Sinh hội thoại chat
GPT-4.1-mini
Tốc độ cao, tần suất gọi lớn (200K RPM)
Tóm tắt bộ nhớ dài hạn
GPT-4.1
Độ chính xác cao, chi phí cao hơn
Điều chỉnh mô hình theo nhiệm vụ giúp cân bằng chi phí và hiệu năng, đồng thời duy trì tính cách và bộ nhớ nhân vật một cách nhất quán.
Kết Luận
Chúng ta đã cùng khám phá kiến trúc và cách vận hành từng lớp của VFriend — từ backend Laravel, frontend React, đến tích hợp AI với OpenAI API và hệ thống bộ nhớ nhân vật đa tầng. Thiết kế prompt đặc biệt với hơn 20,000 ký tự, được tổ chức khoa học qua Markdown và JSON, giúp nhân vật phát triển, ghi nhớ và tương tác tự nhiên hơn.
Hệ thống xử lý tin nhắn kết hợp đồng bộ cùng các tác vụ bất đồng bộ (cập nhật bộ nhớ), tạo nên trải nghiệm chat mượt mà, sống động, nhất là trong chế độ Trio với ba nhân vật tương tác đồng thời.
Nếu bạn quan tâm đến kỹ thuật xây dựng chatbot AI phức tạp, VFriend là một ví dụ điển hình về sự phối hợp giữa công nghệ backend, frontend, và trí tuệ nhân tạo tiên tiến.
Chúng tôi sẽ tiếp tục với phần cuối cùng chia sẻ quá trình phát triển, các thử thách gặp phải và trải nghiệm xây dựng VFriend trong thời gian ngắn.