🧛 吸血鬼 (Vampire) — AI 虛擬人 Widget

☕ Buy me a coffee

網頁右下角會出現一位語音 AI 虛擬人 — 你可以「跟她說話」，她會聽懂、回答、開口說話並即時對嘴。
預設免費 Web Speech API；撳一下 💎 切換至 MiniMax 神經語音 享用粵語 HD。DeepSeek / WebLLM 兩個大腦任選。

怎麼玩（建議用 Chrome 桌機）

  1. 看右下角那位吸血鬼 — 點她一下，她會打招呼並自我介紹（首次載入需數秒下載 Live2D 模型）。
  2. 撳 🎤 說話 准許麥克風 → 直接問她；不開麥亦可直接打字（支援中文、英文、IME 組字）。
  3. 撳 🌐 免費 / 💎 MiniMax 切換 TTS 路線：免費 Web Speech API 零成本；MiniMax 享有粵語神經語音 HD 及 12 種聲線。
  4. 撳 🗣️ 語音 揀聲線：MiniMax 模式 12 個粵語/普通話聲線；瀏覽器模式 9 個系統內建 zh-HK / zh-TW / zh-CN / en-US 聲線。
  5. 撳 🧠 輸入您的 DeepSeek API Key 啟用「大腦」（金鑰只存在您的瀏覽器，不外漏）。
  6. 撳 😊 切換表情 / 🔊 靜音 / 1.0× 調語速（瀏覽器模式） / ✕ 收起。

部署資訊

本 demo 部署於 Cloudflare Pages 靜態託管，透過 Cloudflare 全球 CDN 公開於 vampire.kitahim.uk。Live2D 模型：吸血鬼 (11.47 MB · Cubism 5.x)，已優化至 2048×2048 textures。

Cloudflare Pages FastAPI + WebSocket 60FPS Live2D Cubism 5.x Self-hosted vendor JS (769 KB) Cantonese TTS (MiniMax) DeepSeek LLM (optional) Strict CSP + nosniff CORS-safe iframe embed 一行 <script> 嵌入

💡 一行嵌入範例（最簡）：

<script src="https://vampire.kitahim.uk/static/embed/embed.js"></script>

⚙️ 可選參數（data-* 覆寫預設）：

<script src=".../embed.js"
  data-model="你的 Live2D model3.json 網址"
  data-knowledge="你的 FAQ JSON 網址"
  data-api="/api/tts"  data-voice="cantonese-female"></script>

🧪 Reactive API Smoke Test (v39)

下邊三個 control 會 postMessage 到吸血鬼 widget（右下角）試 type: 'react'。睇下 widget 嘅表情 + 動作 + 語音反應。

💡 吸血鬼 widget 擋住輸入框? 拖拽 widget 頂部藍色橫條 (cursor 會變 move) 去其他位置, 位置會記住。

💡 想更聰明嘅反應? 撳 widget 右上角 ⚙️ → 「一般」tab → 貼 DeepSeek API key。咁吸血鬼會用 LLM 真正讀你寫嘅嘢 (依家 fallback 用 keyword + sentiment word list)。

⚠️ 如果 drag/送出無反應: 按 Ctrl+Shift+R (Mac: Cmd+Shift+R) 強制 reload 清 cache。

📓 1. 日記模擬

Enter = 送出 / Shift+Enter = 換行 / 停寫 3s = 自動送出

Tip: 試打「今日好慘」、「我答啱咗」、「好嬲」等。冇 DeepSeek key 嘅話會用 keyword fallback。

✅ 2. Yes/No 答題模擬

問題：「1 + 1 = 2 係咪啱?」

撳「啱」→ 吸血鬼會慶祝 (happy + 揸 mic)。撳「唔啱」→ 佢會鼓勵你再試 (sad)。

🔄 3. Reset

重設 widget iframe 並清除 parent page 嘅 xiaob_* / deepseek_key 等 localStorage。