技術継承担当のAIキャラを作りたい！①の続編です。

今回の目標

複数のアプリで動かしていたノアを統合したい！
前回作成したAIマネージャーノアはVMagicMirror,AivisSpeechをバラバラに起動しており、チャット画面においてはターミナルをそのまま使用していました。さすがに起動がめんどいしデザインにも悪いです。
そこで今回はReactとThree.jsを使用しローカルホストでノアとお話しできるようにしようと思います！
※音声はまた次回…

技術選定

上記の通りですが以下のライブラリやフレームワークを使用します。

フロントエンド

React
three.js
@pixiv/three-vrm

バックエンド

Python
geminiAPI
python-socketio

フロントエンドとバックエンドはwebsocket通信を用いてリアルタイムで通信しています。

完成図

This work is based on "Surveillance room" (https://sketchfab.com/3d-models/surveillance-room-7fd56cd3917443a99966352beefd8304) by ra_fuq (https://sketchfab.com/nevidaes) licensed under CC-BY-NC-ND-4.0 (http://creativecommons.org/licenses/by-nc-nd/4.0/)

こだわり

正直な話ReactもThree.jsもweb系の開発も経験が無く、ほぼほぼclineでごり押したので特にこだわったコードはありません。ただcloude君にもかわいいノアの見せ方はわからないらしいので、動きやカメラの画角などは時間をかけて調整しました。

1,デフォルトのポーズ

これが一番苦労しました。VRMAで動きやポーズを付けられるのですが、無償で公開されているVRMAの何と少ないこと！！(まあお金かけずに開発する前提も大概なのですが)mixamoのfbxからvrmaに変換できるとの情報もちょいちょい見かけたのですが、mixamoのモーション(ポーズ)にあまり好みのものがなかったのでblenderで自作することにしました。

blenderは大昔にちょっと触って以降全く触っていなかったので操作方法が全く分かりませんでしたが、なんやかんや2時間くらいの格闘の末いい感じのポーズを作成することができました。ちなみに座り方は僕の趣味です。かわいい

2,マウスのトラッキング

これはVMagicMirrorにもある機能でVRMがマウスのカーソルを目線で追ってくれるというものです。VMagicMirrorで遊んでいた時にこのモーションがとてもかわいかったので、今回のGUIにも実装することにしました。cloudeで実装した当初はneckのボーンしか使用されておらず、マウスカーソルの追い方に違和感がありましたが、最終的にはneck40%+head60%の二段階に分けたものと、目の動きを追加することで滑らかに違和感なく動かすことに成功しました。マウスカーソルを追う領域にも制限を付けることであまりに無理な角度への振り向きも防いでいます。

今回は呼吸モーションや定期的に発動するモーションは追加できませんでしたが、マウスのトラッキングがあるだけで大分いい感じになります。VRMを使った開発をする際にはかなりおすすめです。かわいい

3,まばたき

呼吸が難しくてもせめて瞬きくらいしてほしい！そう思いcloudeに作らせました。瞬きの間隔は3~7秒程度でそれ以外のタイミングでもVRMをクリックしてあげることで目をつむってくれます！かわいい

バックエンド

もうお察しだとおもいますが前回から何も変わっていません。
強いていうのであれば常時起動しても重くないようにGemini以外のモデルは使わないように設定しました。GeminiAPI最強!!geminiAPI最強!!geminiAPI最強!!geminiAPI最強!!

今後の展望

音声化

やっぱり声が聞こえないと少し寂しいです。ただAivisSpeechを常時起動しておけるほどのVRAMは私のPCにはありません。そんな時にたまたま記事で見かけたのですがUTAUを利用した軽量のTTSがあるらしい。だれが声用意すんねん問題はありますができたら実装してみたい。

RAG

前回に引き続きめんどくて作業が進んでいません！！ベクトル検索の検証は成功しているので多分すぐに実装できるはず！!...

ファンクションコーリング

予定の管理とかサッカーロボットの動作検証とかいろんな機能を外付けしたい。
流行りのMCPサーバーとかも勉強もしたいし暇だったらこれで実装するのもあり。
服着替えたりギアスの目になったりするみたいな隠し要素とかも入れときたい

モーションの追加

外注するなりblender勉強するなりして待機モーションが作りたい。
特に返信してくれる時にはスマホとかPCを触るモーションがあればすごくいい

最後に

もう4月になっちゃって退部の時期も近づいてきていますが、果たして完成するのでしょうか？まあ少なくともあと一回は長めの記事が書けるようなおもしろめの機能追加の予定があるのでお楽しみに！

宣伝

生成AIなんでも展示会Vol.3にNoa.hとして部活のメンバーと参加させていただくことになりました！うちのノアも連れて行くのでよかったら話しかけてあげてください！