3Dアバター × RAG知識ベース × 高品質日本語音声
ユーザーが質問してから音声が始まるまで。文1が再生されている間に残りの文が並行で生成・変換されるため、途切れなく会話が続きます。
/stream-with-timestamps APIで音声と同時に各文字の開始・終了時刻(秒)を取得。| イベント名 | タイミング | データ | ブラウザ側の処理 |
|---|---|---|---|
text |
Claudeからチャンク受信時 | { "text": "WACCとは" } |
チャット欄にリアルタイム表示 |
audio |
ElevenLabsから音声変換完了時 | { "audio": "base64...", "timestamps": [...], "text": "文1全文" } |
AudioBuffer作成 → 再生キューへ |
viseme |
audioと同時 | { "words": [...], "wtimes": [...], "wdurations": [...] } |
TalkingHead speakAudio()に渡す |
done |
全文生成完了時 | { "full_text": "..." } |
会話履歴に保存 |
error |
エラー発生時 | { "error": "..." } |
エラーメッセージ表示 |
| キー | 用途 | 取得先 | 無料枠 |
|---|---|---|---|
ANTHROPIC_API_KEY |
Claude API (LLM応答生成) | console.anthropic.com | $5クレジット（新規） |
ELEVENLABS_API_KEY |
音声合成 + タイムスタンプ | elevenlabs.io | 10,000文字/月 |
VOYAGE_API_KEY |
RAG検索クエリ埋め込み | dash.voyageai.com | ✅ 設定済み |
CFO/webapp/ ├── server.py # FastAPI: Claude + RAG + ElevenLabs + SSE │ ├── POST /api/chat # メインチャット（SSEストリーミング） │ ├── GET /api/health # ヘルスチェック │ └── GET / # 静的ファイル配信 ├── requirements.txt └── static/ ├── index.html # メインページ ├── css/ │ └── style.css # ダークテーマ └── js/ ├── app.js # 初期化・統合 ├── chat.js # SSE受信 + チャットUI ├── voice.js # STT + 音声再生キュー └── avatar.js # TalkingHead + ビジムマッピング
1回の回答: 約200文字（3-5文）
| サービス | 消費量 | 月額 |
|---|---|---|
| Claude API (Sonnet) | ~300回 × 2K tokens | ~$3-5 |
| ElevenLabs | 300回 × 200文字 = 60,000文字 | $5 (Starterプラン) |
| Voyage AI | 300回 × 1クエリ | ~$0.1 |
| 合計 | ~$8-10/月 |