met4citizen/TalkingHead

Talking Head (3D): A JavaScript class for real-time lip-sync using full-body 3D avatars.

TalkingHead (3D) – 功能簡介

TalkingHead 是一個 JavaScript 函式庫，可以將 3D 化身（帶有 Mixamo 相容骨骼的 GLB 模型）放入網頁中，並使其能夠即時說話、做手勢和展示面部表情。化身可以根據語音進行對口型，將表情符號顯示為面部姿態，並由各種 AI 服務（OpenAI、Google TTS、Whisper 等）驅動。它基於 Three.js 構建用於渲染，並完全在瀏覽器中運行——你可以透過 CDN 載入或透過 npm 安裝。

核心功能

功能	說明
即時對口型	從文字轉語音服務（預設為 Google Cloud TTS）或來自 `HeadAudio` 等音訊驅動模組生成唇形（visemes）。開箱即用支援多種語言（en, fi, de, fr, lt），並可以透過自定義模組進行擴充。
全身化身	接受帶有 Mixamo 骨骼、ARKit/Oculus blend-shape 定義以及用於頭髮和衣物的動態骨骼物理效果的 GLB 檔案。
表情符號到表情映射	內建的表情符號字典可將標準表情符號轉換為面部 blend-shape 值。
可插拔的 TTS 後端	支援 Google Cloud TTS、ElevenLabs、Azure Speech 或任何可以回傳單字級時間戳或唇形 ID 的服務。
LLM 驅動控制	範例演示展示了如何透過 OpenAI 函數呼叫（function calling）來驅動化身的手勢和語音。
支援 WebRTC	伴隨專案 (`HeadAudio`) 提供用於 WebRTC 上語音對語音通訊的低延遲音訊工作線程（audio worklet）。
插件生態系統	伴隨模組包括：`HeadTTS`（僅限瀏覽器的神經 TTS）、`HeadAudio`（音訊驅動的唇形檢測）以及 `MotionEngine`（具有 LLM 語義控制的高級手勢庫）。
可配置的渲染	透過龐大的配置物件公開了攝影機、燈光和化身層級的選項；你可以啟用/停用旋轉、平移、縮放，更改情緒等。

典型用例 (如 README 所示)

人機小組對話 – 用於 DialogLab 工具包中的多人聊天模擬。
基於 WebRTC 的即時 AI 語音 – HeadAudio 演示實現了帶對口型的語音對語音串流傳輸。
視訊會議化身 – 一個名為 Olivia 的化身演示，增加了轉錄和 AI 生成的回复功能。
全瀏覽器 AI 助手 – EdgeSpeaker 網站使用 WebGPU 在本地執行所有功能（LLM、TTS、對口型），無需外部 API 金鑰。
互動式 3D 體驗 – 回收顧問、Twitch 冒險世界、量子物理教學、AI 驅動的交友資料化身等。

入門指南 (快速開始)

引入函式庫 – 透過 npm (npm i @met4citizen/talkinghead) 或直接從 CDN 引入:

<script type="importmap">
{"imports":{"talkinghead":"https://cdn.jsdelivr.net/gh/met4citizen/TalkingHead@1.7/modules/talkinghead.mjs"}}
</script>

建立 TalkingHead 實例:

import { TalkingHead } from "talkinghead";
const head = new TalkingHead(document.getElementById('avatar'), {
  ttsEndpoint: "/gtts/",   // 指向 Google TTS 的代理
  jwtGet: myJwtFetcher,      // 可選的 SSO 令牌獲取函數
  lipsyncModules: ["en","fi"],
});

載入化身 (帶有正確骨骼的 GLB 檔案):

await head.showAvatar({
  url: "./avatars/avaturn.glb",
  body: "F",
  avatarMood: "neutral",
  ttsLang: "en-GB",
  lipsyncLang: "en",
});

讓它說話:
```
head.speakText("Hello, world!");
```

README 還提供了一個僅需 Google TTS API 金鑰即可運行的最小化 HTML 範例。

擴充 / 定制

添加你自己的 TTS – 實作一個可以回傳單字級時間戳或唇形 ID 的服務，並指向 ttsEndpoint（或使用 ttsApikey 快捷方式直接呼叫 Google）。
新語言 – 建立一個對口型語言模組並將其列入 lipsyncModules。
動態骨骼與物理效果 – 在化身選項中定義 modelDynamicBones（參見附錄 E）。
手勢函式庫 – 接入 MotionEngine 以實現語義化的 LLM 驅動手勢。
僅化身模式 – 設定 avatarOnly: true 以獲取僅用於整合到現有 Three.js 場景的骨骼物件。

誰會使用它？

研究人員 – 構建具身智能體、對話式 UI 研究或多模態互動實驗的人員。
開發者 – 創建虛擬主持人、AI 驅動的客戶服務化身或遊戲風格 NPC 的人員。
教育者 / 愛好者 – 希望在無需處理沉重後端基礎設施的情況下，快速在 Web 演示中添加會說話的 3D 角色的人員。

授權與可用性

該函式庫以開源授權發布（README 中包含 GitHub 發布版本和 npm 套件的連結）。所有程式碼、演示影片及伴隨模組均可公開存取。

總結： TalkingHead 是一個功能完備的、基於瀏覽器的 3D 化身框架，它連接了圖形學、語音合成及 LLM 控制，是任何構建互動式 AI 驅動虛擬角色的人的實用工具。