概要
LLMによるエージェントとの音声対話を手軽に試せるChatVRMをフォークして、自分好みに改変したコードを公開しました。
記事執筆時点（v0.0.7）で以下の変更をしています。
- 音声合成エンジンをkoeiromapからVoiceVoxにした
- OpenAIのモデル、APIキー、VoiceVoxのホストなどを環境変数で設定可能にした
- 環境変数がフロントに露出しないように、OpenAI、VoiceVoxの呼び出しをバックエンドにした
備忘録として、変更の背景やコードの変更点などをメモします。
なおTypeScriptを書くのは今回が初めてのため、間違いが含まれるかもしれません。
なにかお気づきの点があればご指摘いただけると幸いです。
背景
ChatVRMはLLMを用いたVRMキャラクターとの音声対話を気軽に試せるプログラムです。
2024年7月にpublic archiveとなっています。
ChatVRMでは、LLMとしてOpenAI、音声合成エンジンとしてkoeiromapが使用されています。
また、設定画面からAPIキーやプロンプトなどを登録できます。
このままでも使えはするのですが、自環境で繰り返し使う可能性を考慮して、
音声合成エンジンは使い慣れたVoiceVoxに変更し、APIキーやモデルなどはUIからではなく環境変数から設定できるようにすることにしました。
合わせてAPIキーなどがフロントに露出することを避けるため、LLMや音声合成の処理をバックエンドで実施することにしました。
なおChatVRMをベースにしつつ多様なLLMや音声合成エンジンを利用できるように拡張したリポジトリはいくつかあるのですが（e.g. aituber-kit（v1はMITライセンス））、コードベースを理解するのに時間がかかりそうだったため、今回はChatVRMからスタートすることにしました。
実装
詳細はリポジトリをご確認ください。
要点だけ簡単に記載します。
音声合成エンジンをVoiceVoxに
ChatVRMではもともと音声合成エンジンとしてkoeiromapが使われていましたが、API利用料などを気にせずに試したかったのと、他のプロジェクトでも使用経験があったことなどから、VoiceVoxに変更することにしました。
APIキーや各種設定を環境変数で行えるように
ChatVRMでは、APIキーを用いたLLMや音声合成の呼び出しがフロントエンドのみで行われます。
デモページでユーザが自身のAPIキーを使って安心して試せるようにそうなっていると思われますが、逆に開発者が自身のAPIキーを登録したアプリを公開しようと思うと、APIキーがフロントに露出してしまい不便です。
そこで、LLMや音声合成を呼び出すバックエンドの処理を実装し、APIキーも環境変数からバックエンド側でのみ読み取るようにしました。
ChatVRMにはもともとsrc/pages/apiにバックエンドでLLMを呼び出す実装が存在するのですが、ストリーミングに対応していないなど、そのまま使いやすい感じではなかったので、新規に実装しました。
OpenAIの呼び出しはvercelのai-sdkを、voicevoxの呼び出しはvoicevox-clientを使用しました。
OpenAIのモデル名などがハードコーディングされていたので、APIキーなどと同様に、環境変数に記載できるようにしました。
ルーティング方式を従来のpages routerから新しい方式であるapp routerに変更しました。
jestを用いて、LLMや音声合成の呼び出しなどをマニュアルテストできるようにしました。
おわりに
とりあえずVoiceVoxで喋るようになったので良かったです。
LLMや音声合成は現状1種類しか使えませんが、ある程度抽象化したので、必要に応じて増やそうと思います。