見出し画像

AIキャラクターが喋りながら動く——Live2Dアバター機能を自作チャットアプリに組み込んだ話

自分で作ったAIチャットアプリに、Live2Dキャラクターを喋らせる機能を実装しました。

マイクに話しかけると、ローカルのAI(LLM)が返答を生成して音声合成。そのTTS音声に合わせてLive2Dのキャラクターがリアルタイムで口パクし、テキストの感情に応じて表情も変わる——そういうものができあがりました。
また、翻訳も出来るアプリであるため、同時通訳的な使い方も出来ています。

Youtubeのリアルタイム翻訳をさせてるところ。
Live2D モデルを追加することで他のモデルでも動くように。

きっかけ

もともとVoice Bridgeというアプリを作っていました。マイクで話しかけるとずんだもんやリリンちゃんの声でAIが返答してくれる、というものです。音声だけでも十分楽しいのですが、「喋っているときにキャラクターが動いてくれたら、もっと会話している感じがするのでは?」と思ったのが始まりです。

どういう仕組みになっているか

大まかな流れはこうなっています。

あなたがマイクに話す
    ↓
Python側でAIが返答を考える
    ↓
テキストを音声(mp3)に変換(VOICEVOX等)
    ↓
mp3をElectronアプリ(キャラクター画面)に送信
    ↓
Electronがmp3を再生しながら音量を計測
    ↓
音量データをLive2Dのパラメータに反映 → 口が動く
    ↓
テキストの感情を推定して → 表情も変わる

面白いのは、音声の再生をElectron(フロントエンド)側でやっているところです。Pythonが音声ファイルを生成したら、それをWebSocketでElectronに送り、キャラクターを表示しているブラウザエンジン側で再生します。こうすることで「Web Audio API」という仕組みを使ってリアルタイムに音量を取れて、音声と口の動きがズレなくなります。

Pythonで音声を再生しながらElectronにも送るとどうしても同期がズレるので、この設計が重要でした。

一番ハマったこと

Live2Dモデルのパラメータ名がモデルごとに違う問題です。

「口の開閉」を表すパラメータ名が、あるモデルでは ParamMouthOpenY、別のモデルでは PARAM_MOUTH_OPEN_Y だったりします。最初は公式サンプルの「Haru」で動作確認していたので気づかず、別のモデルを入れたら口が全く動かなくて焦りました。

解決策はElectronのデバッグ画面(DevTools)でモデルのパラメータ一覧を直接確認すること。コンソールにコードを1行打ち込むと全パラメータ名が出てくるので、それを設定ファイルに書けばOKです。

感情表現について

返答テキストから感情を推定する部分は、シンプルなキーワードマッチで実装しています。「嬉しい」「やった」などが含まれていればhappy、「悲しい」「ごめん」ならsad……という具合です。

AIを使った高精度な感情分析も検討しましたが、応答速度を優先してキーワードベースにしました。これだけでも「笑顔で返事する」「謝るときに眉が下がる」くらいの動きは十分実現できています。

感情ごとにLive2Dのパラメータ(眉の角度、口の形、頬の赤みなど)をどう動かすかは emotionMap.ts というファイルで定義していて、モデルに合わせて自由に調整できるようにしました。

使ってみた感想

実際に動かすと、想像以上に「会話している感」があります。特に、長めの返答をしているときにキャラクターがずっとしゃべり続けているのは面白い。AIが怒ったり照れたりする表情を見せてくれるのも予想外に楽しかったです。

音声だけより、視覚的なフィードバックがあるほうが圧倒的に「相手がいる」気がします。これはやってみてはじめてわかった感覚でした。

使い方・入手先

リポジトリはこちらです:https://github.com/zephel01/voice-bridge

ローカルLLM(Ollama)とVOICEVOXまたはCoeiroInkを用意すれば動かせます。Live2DモデルとCubism SDKは別途ダウンロードが必要ですが、Live2D公式の無料サンプルモデルで試せます。

詳細なセットアップ手順はリポジトリの docs/guides/LIVE2D_SETUP.md にまとめています。

ベースは出来たので今後はLive2D用のデータ自体を作成などをしてみたいと思います。

おわりに

Live2DとPythonの連携は事例が少なくて手探りでしたが、「音声再生をフロントに委ねる」という設計にたどり着いてからはスムーズに進みました。

技術的な詳細(アーキテクチャ設計・コード解説・ハマりポイントの全リスト)はZennに別記事を書いているのでそちらも参考にしてみてください。

Voice Bridge / MIT License / https://github.com/zephel01/voice-bridge

いいなと思ったら応援しよう!

zephel01 サーバー代とコーヒー代になります☕ 役に立ったら応援よろしくお願いします!