用 Laravel 和 Vue3 打造 AI 虛擬人互動系統：從零開始的專案骨架與 RAG 實踐
專案背景與目標
隨著生成式 AI 的蓬勃發展，我們能以更低成本、更有效率的方式來打造具備互動能力的虛擬角色。本專案旨在提供一個完整的 AI 虛擬人互動管理系統，讓開發者能夠快速建立一個平台，實現使用者創建虛擬角色、與其對話，並能透過上傳知識庫文件來為 AI 角色注入專屬的背景知識。
您可以透過以下 GitHub 連結檢閱本專案的原始碼：https://github.com/BpsEason/ai-virtual-human-system.git
本系統的核心目標與功能包括：
使用者管理：提供完整的註冊、登入與登出功能，並使用 Laravel Sanctum 進行 API 權杖驗證。
AI 虛擬人管理：支援對 AI 虛擬人角色進行新增、讀取、更新和刪除（CRUD）操作。
知識庫管理：允許使用者上傳文件（txt, pdf, docx）作為 AI 虛擬人的知識來源。
即時聊天：提供一個即時聊天室，支援對話歷史紀錄，並透過 Redis 實現事件廣播。
系統儀表板：顯示專案的概覽統計數據，例如總使用者數、AI 虛擬人數量等。
系統架構
本專案採用前後端分離的架構，並透過 Docker Compose 實現一鍵部署，確保開發與生產環境的一致性。
系統主要由以下服務構成:
前端 (Vue3 + Vite)：負責單頁應用程式 (SPA) 的呈現，使用 Axios 進行 API 請求，Vite 提供高效的熱模組重載開發體驗。
Web 伺服器 (Nginx)：作為反向代理，將 HTTP 請求路由至後端 PHP-FPM 服務，並負責提供前端的靜態檔案。
後端 API (Laravel)：提供 RESTful API 端點，處理商業邏輯、資料庫互動與身份驗證。
資料庫 (MySQL)：儲存結構化資料，如使用者、AI 虛擬人、文件與聊天訊息等。
快取與事件 (Redis)：用於處理快取、管理 Session 以及即時聊天所需的事件廣播。
後端開發環境 (PHP-FPM)：運行 Laravel 應用程式，並處理來自 Nginx 的請求。
前端開發環境 (Node.js)：用於運行 Vite 開發伺服器，支援前端開發。
核心功能實現
1. 身分驗證
我們使用 Laravel Sanctum 實現基於權杖的 API 驗證。當使用者成功註冊或登入後，後端會為其建立一個 API 權杖，並將其傳回給前端。前端則將此權杖儲存在瀏覽器的 localStorage 中，並在後續的每個 API 請求中透過 Axios 攔截器自動附加 Authorization 標頭。
註冊邏輯 (backend/app/Http/Controllers/AuthController.php)：
public function register(Request $request)
{
// ... 驗證邏輯
$user = User::create([
'name' => $request->name,
'email' => $request->email,
'password' => Hash::make($request->password),
]);
$token = $user->createToken('auth-token')->plainTextToken;
return ApiResponse::success([
'user' => $user,
'token' => $token,
], 'User registered successfully', 201);
}
2. 知識庫管理與 AI 整合（RAG）
專案預留了知識庫功能，允許使用者上傳文件來擴充 AI 虛擬人的知識。此功能旨在實現 檢索增強生成 (RAG) 的流程。KnowledgeBaseService 服務類別會處理文件上傳，並預留了將文件內容解析、分塊、向量化並儲存至向量資料庫的邏輯。
知識庫服務 (backend/app/Services/KnowledgeBaseService.php)：
<?php
namespace App\Services;
use App\Models\Document;
use Illuminate\Http\UploadedFile;
use Illuminate\Support\Facades\Storage;
class KnowledgeBaseService
{
/**
* 上傳文件並建立文件紀錄。
*/
public function uploadDocument(UploadedFile $file): Document
{
$path = $file->store('knowledge_base', 'public');
$document = Document::create([
'file_name' => $file->getClientOriginalName(),
'file_path' => $path,
'status' => 'uploaded',
]);
// 這裡可以加入處理文件內容的邏輯，例如：
// 1. 將文件內容解析為純文字
// 2. 將純文字切分成塊 (chunks)
// 3. 將每個塊轉換為向量嵌入 (vector embeddings)
// 4. 儲存這些向量到向量資料庫中 (如 ChromaDB, Pinecone 等)
// 這部分需要整合外部服務，在此僅為範例
// 假設處理成功，更新狀態
$document->update(['status' => 'processed']);
return $document;
}
/**
* 刪除文件及文件紀錄。
*/
public function deleteDocument(Document $document): bool
{
Storage::disk('public')->delete($document->file_path);
return $document->delete();
}
}
3. 即時聊天功能
即時聊天功能透過 Laravel 的事件廣播 (Event Broadcasting) 和 Redis 來實現。當使用者或 AI 發送訊息時，後端會觸發一個 ChatMessageSent 事件，此事件會透過 Redis 廣播到指定的頻道，前端的 WebSocket 客戶端即可接收到即時更新的訊息。
聊天訊息控制器 (backend/app/Http/Controllers/ChatMessageController.php)：
<?php
namespace App\Http\Controllers;
use App\Events\ChatMessageSent;
use App\Http\Responses\ApiResponse;
use App\Models\ChatMessage;
use Illuminate\Http\Request;
class ChatMessageController extends Controller
{
public function index(Request $request)
{
$messages = ChatMessage::where('character_id', $request->character_id)
->orderBy('created_at', 'asc')
->get();
return ApiResponse::success($messages);
}
public function store(Request $request)
{
$request->validate([
'character_id' => 'required|exists:characters,id',
'sender' => 'required|in:user,ai',
'message' => 'required|string',
]);
$message = ChatMessage::create($request->all());
// 觸發事件
event(new ChatMessageSent($message));
return ApiResponse::success($message, 'Message sent successfully', 201);
}
}
部署與開發體驗
本專案提供了一個完整的 docker-compose.yml 檔案，讓您能夠透過單一指令快速啟動所有服務，包括 Nginx、PHP-FPM、MySQL 和 Node.js。
部署步驟：
啟動所有服務：在專案根目錄下執行以下指令，即可啟動所有容器。
Bashdocker-compose up -d --build設定後端專案：進入
php容器，安裝依賴並執行資料庫遷移。Bashdocker-compose exec php cp .env.example .env docker-compose exec php php artisan key:generate docker-compose exec php php artisan migrate設定前端專案：進入
node容器，安裝前端依賴。Bashdocker-compose exec node npm install啟動前端開發伺服器：在
node容器中執行，即可透過http://localhost:5173訪問前端頁面。Bashdocker-compose exec node npm run dev
專案目錄結構與核心檔案已透過腳本自動生成，大幅簡化了專案初始化過程。
未來擴展
此專案已具備良好的擴展性，您可以根據需求進行以下優化：
RAG 優化：整合外部服務（如 Pinecone 或 ChromaDB）以實現高效的向量搜尋，提供更精準的知識檢索。
LLM 整合：串接 OpenAI 或其他大型語言模型 API，實現 AI 虛擬人的對話生成功能。
WebSocket 強化：使用 Laravel Echo 搭配 Pusher 或 Socket.io 等服務，提供更穩定的即時通訊體驗。
多模型支援：建立抽象層，讓系統能輕鬆切換不同的 LLM 模型，例如 GPT-4、Gemini 或其他開源模型。
透過這個專案骨架，您將能快速上手 AI 虛擬人系統的開發，並專注於實作更進階的 AI 互動邏輯。
沒有留言:
張貼留言