ChatVRMをオリキャラのために改造したい【前編/ChatVRMと戯れる】
リアルで、とある先生に「ChatGPTとかいうヤバいサービスが出てきたから今すぐ登録して使い倒せ」と言われてはや半年、この世界はAIの話で持ちきりです。それは人間のあらゆる知的生産活動の代替に加え、人間が話す事柄の文脈を理解し心を通わせる話し相手となってくれるポテンシャルがあるのです。
私はその可能性を開くアーキテクチャの1つが、ChatVRMだと思っています。私もChatVRMを自分好みに改造して遊んでみました。ChatVRMはAI開発者のみならず、プログラミングなんていの一度もやったことがない人たちにも、非常に扱いやすく親しみやすいUIでAIの魅力を引き立ててくれました（ChatGPTをはじめとするGUIが発達した文章生成AI全体に言えることですが）。
現在pixivさんは爆増するAIのイラスト生成品の責任と対応に追われて大変な思いをしているでしょうが、一方でこうした開発を通じてAIの可能性について提唱し続けてくれることに本当に感謝したいと思います。
このブログ記事では、私がChatVRMに行なったコードなどの改変（前編）と、オリキャラのキャラクター設定を深めるプロンプト（後編）について、ひとかじりですが、プログラミングやプロンプトエンジニアリングの初学者にも雰囲気をつかめるように説明していきます。私はReactなどのモダンJSのアーキテクチャを用いた開発経験がわずかながらあり人並みよりはこのアプリの機構について分かっているつもりですが、それでもプロのWeb開発者に比べたらまだまだ初心者。というか今は本職プログラミングじゃなくて動画だしね。解説が雑と感じるかもしれませんが、ガチでプログラミングを全然触ったことがないという人にもググる（あるいはそれこそGPTに聞く？）ためのキーワードを与えれるくらいにはかみ砕いて説明するよう気を付けているつもりです。
この記事は前編です。キャラクターやプロンプトエンジニアリングメインは後編なのでこちらからどうぞ↓
自分の3Dキャラクター（VRM）に人格を与える夢のようなアーキテクチャ
AI関連のニュースは、毎週新しいiPhoneの新機種が出てきているみたいで日毎に状況が目まぐるしく変わっていきます。その中の一つとして、最近pixivからChatVRMなるものが発表されました。
ChatVRMとは、ブラウザで簡単に3Dキャラクターと会話できるオープンソースの技術デモアプリケーションであり、VRM形式のアバターを利用して会話できるGUIです。ChatGPTのAPIを介して会話文を生成することができます。
この記事に興味を持ってくれた人の中には、こんなことを考えている人が多いのではないのでしょうか。
・「VRMでなんかいい感じのキャラクター作ったけど、彼女/彼は普段どんなことを考え、どんなことを喋っているんだろう」
・「自分が発想したオリジナルキャラクターの設定をちゃんと考えてみたい」
もちろん素のChatGPT（GPT-3.5）にやらせても十分ブレインストーミングには使えると思いますが、なんというか、やっぱりプロンプトエンジニアっリングを意識させられる無機質なチャット画面よりは可愛いキャラクターがそこにいた方が映えるでしょ！というロマン的問題からChatVRMを選択したい人もいると思います。この記事はそんな方に向けた記事です。
もちろん、GPTをうまく乗りこなすためのプロンプトエンジニアリング（特に今回はロールプレイまわり）は気をつけていただきたいんですが、ぶっちゃけ日本語（と、英語）ができればあとはなんでもできます。
その他に、VRMファイルを持っているなら各自用意（VRM1.0も対応）。ローカルにコピーして開発者としてUIをいじるときはReact・NextJS・ThreeJSなどの各ライブラリ、CSS、各APIに関する素養が必要になります。
ChatVRMを動かすにあたって
最初に、OpenAIのアカウント取得とAPIキーの取得が必要となります。どちらの作業も簡単で、あまり詳しくは言及しませんが、sk-****のようなAPIキーさえ記憶してかつ公開しなければ作業自体はごく簡単です。そもそもWeb版すらAPIキーはないと通れない仕様になってますからね。
元々クレジットカードを登録しなくても18ドル分の容量が確保されてましたが、あれは幻です（個人の感想）。私の場合、お金払う設定をしないとエラー吐かれました。素直にクレジットカードを登録して課金した方が無難です。毎日API経由で何百メッセージも送ったり、GPT-4を使って酷使したりしない限りは高額な料金を取られることもないと思います。それに利用できる金額の上限も設定できるはずです。というか、自分が愛しているキャラクターのためなら厭わずに貢げるでしょう！
ChatVRMはWebアプリケーションであり、pixivではVRMファイルをアップロードしてキャラクターを変更と、キャラクター設定のプロンプトを変更できたりできます。Web周りの技術的知識が全くない人はこちらのサイトから試すのがおすすめ（以降、便宜上pixivによる本家のこちらのサイトを「Web版デモ」と呼びます）。
しかし、背景や文字色を変えたり、新たな感情の概念の導入といった詳細なプロンプトの制御やUIの部分をいじったりするにはダウンロードしてコマンドラインを使用した環境構築が必要になります。このソフトはライセンス的にもMITライセンスということでコード部分は合法的な商用利用・改変・再配布が認められています。今回は、ChatVRMをローカルで動かしてみました。
ローカルで動かそう
ChatVRMのReadmeの実行欄に書いてある通りに環境構築をします。
ダウンロード自体は、gitのところはzipファイルで何とかなります（ですが、git/GitHubを使える人はgitの方がいいです。私は事情があってzipでダウンロードしています）。ローカルでの動作には、Node.jsというWeb開発用のライブラリが必要になるので、npmがインストールされてなくてエラーになった人はNode.jsのホームページから環境に合ったものをダウンロードしましょう。これをインストールするとnpmのコマンドが使えるようになるはずでず。
「npm install」はコマンドラインで最初に一回だけ、「npm run dev」はコマンドラインを開きなおす度に毎回実行するコマンドです。どちらもコマンドラインで、cdコマンドで「ChatVRM-main」フォルダの直下まで移動してから入力します。ここまで入力できたら、http://localhost:3000にアクセスします。
この画面が表示されたら成功です。Webアプリケーションなので出てくる画面自体はWeb版デモと一緒ですが、URLが違い、ローカルから実行されていることがわかります。
ちょっと改造
さて、ここからが本題です。ここからはChatVRMを自分好みに改造していきます。Web版デモを方は使っている方は適宜読み飛ばして結構です。
1. introduction画面、不要なUIの整理
最初に目に付く、こちらのintroduction画面を整理します。Web版デモでは、広く様々な方に使ってもらうことを前提に初めての方向けに、この画面でChatVRMの使い方を表示しています。ページを開きなおす度に毎回この画面が出てくるのはいやですよね。
これの解決策は二つあります。一つはintroduction画面を出させない、もう一つはAPIキーの入力部分だけ残す、です。前者ではintroduction画面を出さず直接VRMのキャラクターがいる画面に遷移します。やり方は簡単で、introductionの部品を出している部分をコメントアウトして非表示にします。その部分は/src/pages/index.tsx（各部品を統合し、最終的な画面を出力しているページ）の182行目あたりにあります。
右上に居座るGitHubのForkボタンも同様の要領でコメントアウトするのもいいでしょう。こちらは同200行目くらいのところにあります。
// 例：
// /src/pages/index.tsx
// Line 182-183
{// <Introduction openAiKey={openAiKey} onChangeAiKey={setOpenAiKey} />
}
// Line 200-201
{// <GitHubLink />
}このやり方にはデメリットがあって、それはChatGPTのAPIキーを入力する手間が増えること。これハンバーガーからいちいち設定開いてAPIキー叩くんかいねと。馬鹿らしいです。
ローカルでやって絶対にどこにも公開しないならコード内にskから始まる値（APIキー）を直接書いても気づかれませんが、もしあなたが改変したコードをGitHubなんかで世に公開するなら、それは禁じ手！APIキーを公開するとシャレになりません。基本的にAPIというものは無償じゃないので、APIのキーは環境変数とかで定義したりして、コードを公開する場合であっても普通は空白にしたり環境変数の部分をgitignoreとかで公開しないといった工夫が必要、エチケットです。これをやらないといつの間にか悪用されて、気づいたらChatGPT APIの上限に達してその分のお金をOpenAIに請求される可能性があります。この事故だけは防がねばなりません。
そこで、introductionの、APIキーの入力部分だけ残すという発想をとりました。Web版と入力のコストは変わりませんが、いちいち設定を開く必要がないので。
まず先ほどのintroductionのコメントアウトを削除して表示できるようにします。続いて/src/components/introduction.tsx（introduction画面で何を表示するかを定義している場所）を開き、原文コードの21～73行目をコメントアウトまたは削除すると、最初の画面は以下のようになります。
画面が小さくなったことで向こうにこれから自分が対峙するVRMが見えるようになりました。なんというか、このUIから感じる「今からこの子と話すんだ」というわくわく感…いいですよね（分かれ）
VRMの3Dモデルが一瞬ロードの関係か変な挙動をすることが確認できます。もしかしたらそれを隠すために画面が大きかったんでしょうか。
加えて、このポップアップビューを真ん中に寄せたり、この画面に扱うキャラクターの情報や挨拶を書いておくと、開発のテンションが上がりそう。
2. VRMの差し替え
続いて、デフォルトで指定されているアバターを変更します。GUIの設定でも変更ができますが、いきなり設定なしに好きなアバターを表示させるにはコードをいじるしかありません。
/publicフォルダー内には、AvatarSample_B.vrmというVRMファイルがあります。このデフォルトアバターを自分の好きなアバターに置き換えて、コード中にAvatarSample_B.vrmと書かれている場所（src/components/VrmViewer.tsxの12行目）をそのVRMファイルの名前で置き換えます。
VRMファイル自体は、@pixiv/three-vrmというライブラリーで表示されており、VRM1.0にも対応がなされています。
私はかつて動画に出演させたキャラクターがおり、この度そのアップデート版となるVRMアバターを作成したので差し替えてみました。なんだか、スーツでバチっと服装決めてるから優秀な女性同僚みたいな感じで、まさにChatGPTが擬人化されたみたいですね(笑)（どちらかというとBingちゃん？？）
このようにすると、いきなり自分の好きなキャラクターを表示させることができます。またこの要領で、背景画面や待機モーションを変更できます。
3. 背景画像、待機モーションを変更する
お気に入りのモデルを選んだら、UIを変更します。背景画像、文字のフォント、枠やボタンの色など、カスタマイズのしがいのある項目は画面の隅々にまで渡ります。
まず、/publicフォルダーを見てください。５つのファイルがあります。github-mark-white.svgとogp.pngは基本使わないと思いますので、ここではアバター、背景画像、待機モーションを変更できます。何か新しい画像やファイルを読み込むときには、ここにファイルを入れて、プログラムで名前を変えるなどしてそれらのファイルを参照するようにすればよいです。ファイルの詳細に関しては以下の通りです。
ChatVRM/public/
├ AvatarSample_B.vrm
│ サンプルBのVRMアバター。
├ bg-c.png
│ 背景画像。ピンク色のやつ。大きさは1194 x 755。
├ github-mark-white.svg
│ GitHubのマーク。
├ idle_loop.vrma
│ 待機モーション（体の揺れのみ）を定義するVRMAファイル。瞬きやリップシンクについてはコード内で定義
└ ogp.png
README.mdに出てきたサンプル画面の画像。
.vrmaという見慣れない拡張子を見つけましたが、本家のコードではgltfのファイルとしてロードしているようでした。VRMAファイルはVRMファイルと同じ.glbがベースの、こちらはおそらくVRM用アニメーション格納ファイルだと思われます。あまり情報が出回っていないのではっきりとしたことは言えませんが、VRMファイルはアニメーションの情報をサポートしていないようなので、VRMのアニメーション用にVRMAファイルというものを別に定義しているのでしょう。
試しに、拡張子をglbに変えてBlenderで読み込んでみました。右側トランスフォームの部分を見ると、キーフレームが250フレーム分打たれており、再生すると黒い線の集合体が体を揺らしていることが確認できました。最初と最後のキーフレームの値は同じで、待機モーションのループ素材として使われているようです。
私は3Dアニメーションに関してはペーペーなので何とも言えませんが、凝った待機モーションが欲しい人はBlenderなどで編集してこだわってみてはいかがでしょうか。また、コード上で動きを定義することもできそうです。
4.UIを変更する
UIは、component（コンポーネント）と呼ばれる部品を/componentsの中のファイルで定義し、index.tsxで統合しております。このあたりの改変にはReactとNext.jsの知識が必要になります。基本的にcomponentsの部分をいじったり、コマンドラインから新しいcomponentを追加したりして、サンプルコードを改変していきます。CSSはTailwindで、一部プリセットを使っている部分もあります。
それ以外にも、プリセットボタンをシチュエーションを制御して背景などを変えるボタンにしたり、Koeiro APIの声が気に食わないという場合には別の発話サービス・APIを探してその音源に差し替えるといったことができます。COEIROINK, VOICEVOXのAPIとか良さげですよね。
しかし、UIに具体的にどんな変更をすればいいかというのは、ここでは言及しません。なぜなら、私が思うに優れたキャラクターとのチャット画面のUIは、キャラクターの性格と作者の感性によって異なるんだと思うんですよ。想定されるシチュエーションごとでも最適なUIは異なります。その根幹の部分を定義するのは、まさにキャラクター設定のプロンプトなんですね。
他にも、感情回路をChatGPT内に構築させてより解像度の高い感情に応じて変化させるなど、実装のしがいがありそうだと感じておりますが、そこらへんはthree-vrmなどへの深い理解が必要ですし、そもそもCSS自体どこから手を付けたらいいかわからないということもあり、私の時間の都合上UI変更の実装はあきらめました。
本当技術者として終わってますよね。昔は今よりももう少しだけ自信があったのに、余計な活動をやるようになって腕が落ちすぎました。これ以上書くと自分の悪口ばっかりになりそうなので、いい技術者がさらに改善してくれることを期待して後編へ行きたいと思います。
後編に続く
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？