VRM を作成し、ChatVRM を使ってキャラクターとお話ししてみた
Pixiv が OpenSource で公開している、 ChatVRM を使ってキャラクターとお話をしてみました。
デモも用意されているようですが、今回はローカルで動かしてみたいと思います。 クローンして動かす
リポジトリをクローンします。
Next.js で記述されているようなので、 Node.js >= 16 以上をインストールしておくと良いです。
code:sh
npm install
npm run dev
これだけで画面が表示できました。
OpenAI の API キーを入力することでお話しできます。
https://gyazo.com/6e31871fe7e69721f66b622c5affe522
VR モデルを作成する
とはいえ、自分好みのアバターにしたいところ。
この辺りは私もほとんど知識がないので、調べてみました。
Unity を使えば作れそうに見えましたが、Pixiv が提供している VRoid Studio を使うと簡単に作れそうなので試してみました。
こちらから端末にアプリケーションをインストールします。
1 GB くらいはストレージが必要そうです。
チュートリアル資料も用意されているので、こちらの通りにやればすぐできました。
これはこだわる人多そうだな、と思いつつ、私はプリセットのもので作成。
https://gyazo.com/b0f5710862259125801f45762b9ac92f
これを「名前をつけて保存」の方で Save すると、 vroid 拡張子で保存されます。
アプリケーションで使用するには vrm 拡張子にする必要があるので、画面右側のエクスポートから vrm 形式でエクスポートします。
ChatVRM に設定する
アプリケーションの画面左上の設定から VRM を設定できます。
すぐにアバターが変わります。
https://gyazo.com/4c0f912f5982a1828bc5eae693d8261f
プロンプトや声も設定できるようです。
https://gyazo.com/5e20eeb3f2eee7dd532894e5fe11b89d
リロードした時の挙動を変える
リロードすると、元のアバターに戻り、 OpenAI の API キーもリセットされてしまいます。
アバターを更新したい場合は、 /public/AvatarSample_B.vrm ファイルを上書きすれば良さそうです。
ただ、環境変数で指定しておけば楽かな、と考え、以下のように修正しました。
プロジェクトルートに .env ファイルを作成し、以下のように設定すれば使用できます。
code:.env
NEXT_PUBLIC_OPENAI_KEY=xxxxx
NEXT_PUBLIC_AVATAR_FILE_NAME=my-avatar.vrm
また、チャット入力後、 Enter を押したら送信できるようにもしたかったので、以下のように修正もしました。
とはいえ、このアプリケーションは音声入力もできるので、そんなに必要ない気もしています。
さいごに
これを作られた Pixiv チームに感謝するばかりです。
こういうものがオープンソースで出てくるあたり、技術変化が進んでいるなと感じるばかりです。