asanchezyali/talking-avatar-with-ai

AI付きトークアバター

何であるか – 小さなオープンソースのデモで、3D「デジタル人間」（Jackと名付けられた）と会話できる。アバターはWhisperで聞く（音声入力）、OpenAIのGPT-3/ChatGPTで考える（思考）、Eleven Labs TTSで話す（音声出力）、Rhubarb Lip-Syncと事前定義されたアニメーションクリップで口元と表情を動かす（口パクと表情変化）。全体のスタックはTypeScript/ReactフロントエンドとNode/Yarnモノレポバックエンドで接続されている。

コアコンポーネント

• LLMブレイン – @langchain/openaiは、応答としてtext、facialExpression、animationを含むJSON配列を返すようにプロンプトを構築する。応答はzodでパースされ、構造の整合性が保証される。
• 音声認識 – OpenAI Whisperはユーザーの音声入力をテキストに変換する。
• テキスト音声変換 – Eleven LabsはLLMの応答から高品質な音声ファイルを生成する。
• ビゼム生成 – Rhubarb Lip-Syncは音声を口の動きデータ（visemeタイムスタンプ）に変換し、3D顔の口パクを可能にする。
• フロントエンド – Reactアプリ（Tailwind CSSとReact-Three-Fiberを使用）はアバターをレンダリングし、選択されたアニメーション/表情を適用し、音声を再生する。

動作フロー（概要）

1. ユーザー入力 – タイプしたテキストまたは音声録音のいずれか。
2. 音声認識（音声入力時のみ） – Whisper → テキスト。
3. LLM呼び出し – テキストはカスタムプロンプト付きでOpenAIのGPTモデルに送信され、text、facialExpression、animationを含むJSONペイロードを要求する。
4. TTS – textフィールドはEleven Labsに送信され、音声ファイルが返される。
5. 口パク同期 – 音声ファイルはRhubarbに送られ、mouthCues（口の動きタイムスタンプ）が出力される。
6. レンダリング – フロントエンドはJSONを読み取り、アバターの表情とアニメーションを切り替え、音声を再生し、ビゼムデータを使って口パクを制御する。

導入手順

1. 前提条件 – OpenAI、Eleven Labs、Rhubarbのアカウント（有料プラン推奨）、ffmpeg、最新のNode/Yarn環境。
2. クローンとインストール

   git clone git@github.com:asanchezyali/talking-avatar-with-ai.git
   cd digital-human
   yarn   # モノレポパッケージをインストール
   

3. 設定 – /apps/backend/.envにOpenAIとEleven LabsのキーとIDを記載。
4. 実行 – yarn devを実行し、http://localhost:5173/を開く。

表示されるもの – 3Dアバターがあなたの発話または入力に応じて適切な表情（笑顔、悲しみ、怒り、驚き、ユーモラスな顔、デフォルト）と身体アニメーション（Idle、TalkingOne、TalkingThreeなど）で反応するウェブページ。アバターの声はEleven Labsから、Rhubarbによる口パク同期により唇がリアルに動く。

制限事項 / 備考

• デモは外部の有料APIに依存しており、無料プランではレート制限に達し、アバターが停止する可能性がある。
• 表情とアニメーションは固定されたセットのみサポート。拡張にはプロンプトの編集と新しいアニメーションアセットの追加が必要。
• リポジトリはプロダクション向けフレームワークではなく、プロトタイプとしてのもの。エラーハンドリング、スケーラビリティ、UIの洗練は最小限。

有用なリンク

• 詳細チュートリアル: https://monadical.com/posts/build-a-digital-human-with-large-language-models.html
• Discordサポートチャンネル: https://discord.gg/gJ3vCgSWeh
• Rhubarb Lip-Syncリポジトリ: https://github.com/DanielSWolf/rhubarb-lip-sync

---

上記のすべての情報はリポジトリのREADMEから直接取得したものであり、追加機能は想定していない。