先日、とある会社のオフィスを訪問するとエントランスにAIと連携した3Dの社員が設置されており面白いと思った。 アニメ風かつ口パクなら自分でも似たようなもの作れるんじゃないか？と考え、 最近遊んでいるさくらのAI Engineを使って会話文、音声データを生成するものを作ってみた。 コードと画像は普段使っているgeminiで生成した。

デモ動画

会話がインチキすぎて成り立たず笑ってしまったw

リポジトリ

ai_conversation

仕組み

1. 「会話生成API」にて回答と感情の抽出 ブラウザで認識した音声をテキスト化し、さくらのAI Engine の会話生成APIへリクエストを送信します。プロンプトによって回答の冒頭に [happy] などの感情タグを付与するように制御しており、バックエンド側でこのタグを解析することで、回答文と「キャラクターの今の感情」を切り分けて抽出しています。

2. 「音声合成API」による発話データの生成 音声データの生成(再生)は３パターンに対応した。複数対応した理由はさくらのAI Engineの音声合成APIは無料枠が限られているため。

• さくらのAI Engine の音声合成APIに渡して固有の音声データ生成
• edge-tts
• Chromeブラウザ内蔵TTS

3. ブラウザ側での感情表現とリップシンク制御 フロントエンドは、受け取った感情データに基づいてキャラクターの画像を切り替えながら、音声の再生時間に合わせて「口の開閉画像」を一定間隔でループさせることで、口パクを実装しました。これにより、AIの回答とキャラクターの動きが同期した自然な対話体験を作っています。

作ってみて

キャラクター画像と設定ファイルを用意すればどんなキャラクターにも対応できるので面白いと思った。 例えばアニメのキャラクター画像を生成して子供と会話させてみたり。