🧛

吸血鬼 — 會說話的 AI 虛擬人助理

將智能虛擬人嵌入你的網站,一行代碼即可擁有會聽、會說、會反應的 AI 助理
支援粵語、普通話,即刻提升用戶體驗

💬 即時體驗 📋 查看代碼 ☕ Buy me a coffee

核心功能

六大功能,讓你的網站擁有智能互動體驗

🎤

智能語音輸入

告別打字時代。支援中文、英文、粵語即時語音識別,一鍵開始,隨時暫停。

Speech Recognition Web Speech API
🗣️

自然語音合成

雙引擎 TTS 系統:瀏覽器引擎完全免費無需設定;MiniMax 神經引擎提供 HD 粵語/普通話,12 種聲線任選。

Web Speech API MiniMax Neural Cantonese HD
🧠

AI 智能大腦

DeepSeek LLM 加持,理解上下文、生成自然回覆。可選本地知識庫問答模式,無需 API Key 也可使用。

DeepSeek LLM Knowledge Base
🎭

豐富表情動作

12 種表情 + 4 種手勢道具,開心、害羞、憤怒、驚訝⋯根據對話內容自動切換,生動自然。

Live2D Cubism 5 Auto Emotion
📦

一行代碼嵌入

一行 script 標籤即可在任何網站展示吸血鬼助理。支援自訂模型、聲線、知識庫,靈活配置。

Script Tag iframe Embed Customizable
🔗

Reactive API

與你的應用深度整合。透過 postMessage 觸發表情、回覆、動作,適合教育遊戲、客服系統、問答模塊。

postMessage Event-Driven Integration

怎麼開始

五個步驟,輕鬆上手

1

體驗虛擬人

點擊右下角按鈕,召喚吸血鬼少女。拖曳移動、雙擊切換表情,感受 Live2D 的流暢動態。

2

選擇輸入方式

支援文字聊天與語音輸入。開啟麥克風權限後,可直接對虛擬人說話,AI 會即時回應。

3

切換語音模式

在設定中選擇瀏覽器 TTS(免費)或 MiniMax Neural TTS(HD 粵語/國語,12 種聲線)。後者需自備 API Key。

4

自訂設定

調整模型縮放、透明度、語速、音量,或上傳自訂知識庫,打造專屬的 AI 夥伴。

5

嵌入網站

複製下方嵌入代碼,將虛擬人加入你的網站。支援多種 data-* 參數,無需後端即可運作。

技術棧

驅動虛擬人的核心技術

Live2D Cubism 5 DeepSeek LLM MiniMax TTS Web Speech API FastAPI Cloudflare Pages WebSocket postMessage API

嵌入你的網站

複製以下代碼,貼到任何 HTML 頁面即可使用

嵌入代碼

📌 可用參數

data-position bottom-right / bottom-left / top-right / top-left
data-size Widget 寬度(px),預設 280
data-theme dark / light,預設 dark
data-greeting 自訂初次見面問候語
data-lang zh-TW / zh-CN / en,預設 zh-TW
data-backend 自訂後端 URL(可選)

部署資訊

快速了解專案架構

🌐 Cloudflare Pages 🐍 FastAPI Backend 🔗 Cloudflare Tunnel 📦 NSSM Service 🗄️ SQLite 🖼️ Live2D Static

Reactive API 測試

透過 postMessage 與虛擬人互動(需已載入 Widget)