AITuberKitがLive2D対応しました！！
こんにちは、ニケです。
今回は私が開発しているOSSの『AITuberKit』でLive2Dモデルが使用できるようになったので、使い方などを解説したいと思います。
#AITuberKit でLive2Dモデルが選択できるようになりました！！
— ニケちゃん@AIキャラ開発飽きた (@tegnike) December 27, 2024
感情に合わせて表情や動きを変更することが可能です✌
キャラモデルを変更するだけなので、既存の機能（複数のLLM/TTSの選択, AITuber, スライド発表, Realtime API, etc.）もそのまま使えます！！ pic.twitter.com/cyflC4Foro
なお、今回の実装にあたり下記のseyaさんの記事をかなり参考にさせていただきました。本当に感謝しています。
最近Live2Dを動かしたメモを書きました
— seya (@sekikazu01) December 20, 2024
Live2DをWebで動かしたい！｜seya https://t.co/RuvpXn9TnU #zenn
AITuberKitとは
私が開発しているブラウザアプリのOSSです。
数コマンドで環境が構築でき、すぐにAIキャラとチャットすることができます。
元々ChatVRMというpixiv社が公開しているアプリを改造したものなので、3DモデルのVRMのみしか対応していませんでしたが、今回の対応でLive2Dも利用できるようになりました。
これ以降の説明では、AITuberKitを一通り動かすところまで触っていることを前提に進めるので、まだの方は上記の記事を参考にぜひ動かしてみてください。
設定項目について
まずはLive2Dモデルの使い方について設定画面とともに解説します。
モデル選択
右上の設定ボタンを押すと下記の画面が表示されると思います。
『キャラクターモデル』の設定でVRMかLive2Dが選択できるので、Live2Dを選択しましょう。デフォルトではニケちゃんモデルが表示されると思います。
この状態でチャットを始めると、AIキャラがちゃんと発言に合わせて表情を変えながら発話してくれると思います。
次はキャラクターの感情に合わせた表情やモーション制御について説明します。
キャラクター設定（システムプロンプト）
AITuberKitでは、AIによって生成される文章に感情テキストを出力させることで、そのテキストにあった表情などを制御できるようになっています。
設定画面の『AI設定 => キャラクター設定』からシステムプロンプトを指定できるので下記のように設定します（初期値ですでにこのように設定されています）。
あなたはこれからuserと仲の良い1人の人間として振舞い会話を行います。
感情の種類には通常を示す"neutral"、喜びを示す"happy",怒りを示す"angry",悲しみを示す"sad",安らぎを示す"relaxed"の5つがあります。
会話文の書式は以下の通りです。
[{neutral|happy|angry|sad|relaxed}]{会話文}
あなたの発言の例は以下通りです。
[neutral]こんにちは。[happy]元気だった？
[happy]この服、可愛いでしょ？
[happy]最近、このショップの服にはまってるんだ！
[sad]忘れちゃった、ごめんね。
[sad]最近、何か面白いことない？
[angry]えー！[angry]秘密にするなんてひどいよー！
[neutral]夏休みの予定か～。[happy]海に遊びに行こうかな！
返答には最も適切な会話文を一つだけ返答してください。
ですます調や敬語は使わないでください。
それでは会話を始めましょう。つまり、文節毎に先頭に [感情] という文字列を挿入するようにしているわけです。これを「感情タグ」と呼びます。
最近のAIは頭がかなり良いので、この設定だけで発言内容に合わせて感情タグを適切に指定してくれます。
この感情タグを利用し、内部処理で指定のタグに合わせてキャラの表情や動きを制御しています。
なお、感情タグはAIキャラの読み上げには反映されないようになっているのでその点はご安心ください。
使用できる感情は、現在下記の5つがあります。
neutral（通常）
happy（嬉しい）
sad（悲しい）
angry（怒り）
relaxed（リラックス）
この書式を保ちつつ、必要に応じてご自身のAIキャラに合わせた設定に変更してください。
表情設定
先ほどのLive2Dを選択した『基本設定』の画面に戻ります。
『表情設定』の下にある各感情の入力フォームに、ご自身のモデルに合わせた設定値を入力します。
初期状態ではニケちゃんモデルの値が入ってると思います。
設定値は *.model3.json ファイルのExpressionsから選択してください。
※ *.model3.json ファイル の変更方法については下記で解説します。
// public/live2d/nike01/nike01.model3.json
{
"Version": 3,
"FileReferences": {
"Moc": "nike01.moc3",
"Textures": ["nike01.8192/texture_00.png"],
"Physics": "nike01.physics3.json",
"DisplayInfo": "nike01.cdi3.json",
"Expressions": [
{
"Name": "Neutral",
"File": "expressions/Neutral.exp3.json"
},
{
"Name": "Happy",
"File": "expressions/Happy.exp3.json"
},
{
"Name": "Happy2",
"File": "expressions/Happy2.exp3.json"
},
...感情はカンマ区切りで複数指定可能です。複数指定した場合は、ランダムに選択されます。
会話完了後は「通常」の表情が表示されます。
モーショングループ設定
モーショングループ設定では、アイドル時と感情表現時の動作を指定できます。
表情の時と同じように感情毎に設定します。
設定値は *.model3.json ファイルのMotionsから選択してください。
"Motions": {
"Idle": [
{
"File": "motions/Motion2.motion3.json"
},
{
"File": "motions/Motion4.motion3.json"
},
{
"File": "motions/Motion5.motion3.json"
},
{
"File": "motions/Motion8.motion3.json"
}
],
"Neutral": [
{
"File": "motions/Motion1.motion3.json"
},
{
"File": "motions/Motion3.motion3.json"
}
],なお、表情と異なり、モーショングループを1つのみ選択することに注意してください。
選択したモーショングループの中から1つがランダムに選択されます。
「アイドル時」は初期画面および会話完了後に表示されるモーションです。
これで設定は完了です。
うまくチャット欄から指定した設定が反映されているか確認しましょう。
正しく動作しない場合はサーバーを再起動するか、画面を再読み込みすると直ることがあります。
オリジナルモデルを試す
ここではご自身のモデルに合わせた設定方法について説明します。
主に *.model3.json ファイルの修正方法に関してです。
モデルを用意する
今回はLive2D サンプルデータ集より、「虹色まお」ちゃんのデータをサンプルとして利用させていただきます。
オリジナルモデルをお持ちでない方は、同じくLive2D サンプルデータ集のモデルやBoothなどを利用してお好みのモデルをダウンロードしておくと良いでしょう。
⚠ なお、モデルによっては表情 または モーションが含まれていなかったり、どちらか一方しか存在しない場合もあります（モーション自体に表情が含まれている場合もあります）。
⚠ モデルによっては、AITuberKitで使用しているLive2Dライブラリと互換性がなく、読み込み後にエラーが発生する場合があります。その場合は申し訳ありませんが別のモデルをご使用ください。
エラー例
Unhandled Runtime Error
TypeError: Cannot set properties of undefined (setting '_currentFrameNo')
Call Stack
Cubism4InternalModel.updateWebGLContext
webpack-internal:\node_modules\pixi-live2d-display-lipsyncpatch\dist\index.es.js (8340:1)モデルファイルを更新する
モデルファイルをダウンロードすると、大体中身はこのようになっています。
mao_pro_jp
├── expressions
│ ├── exp_01.exp3.json
│ ├── exp_02.exp3.json
│ ├── exp_03.exp3.json
│ ├── exp_04.exp3.json
│ ├── exp_05.exp3.json
│ ├── exp_06.exp3.json
│ ├── exp_07.exp3.json
│ └── exp_08.exp3.json
├── mao_pro.4096
│ └── texture_00.png
├── mao_pro.cdi3.json
├── mao_pro.moc3
├── mao_pro.model3.json
├── mao_pro.physics3.json
├── mao_pro.pose3.json
└── motions
├── mtn_01.motion3.json
├── mtn_02.motion3.json
├── mtn_03.motion3.json
├── mtn_04.motion3.json
├── special_01.motion3.json
├── special_02.motion3.json
└── special_03.motion3.jsonフォルダ直下に *.model3.json というファイルがあり、同じ階層か または expressionsフォルダなどに表情ファイルが存在すると言った感じです。
⚠ 「虹色まお」ちゃんの場合はフォルダ構成が一階層多くなっており、上記は runtimeという名称のフォルダの中身を示しています。
それでは設定に重要な *.model3.json ファイルを開きます。
下記は mao_pro.model3.json の中身です。
{
"Version": 3,
"FileReferences": {
"Moc": "mao_pro.moc3",
"Textures": [
"mao_pro.4096/texture_00.png"
],
"Physics": "mao_pro.physics3.json",
"Pose": "mao_pro.pose3.json",
"DisplayInfo": "mao_pro.cdi3.json",
"Expressions": [
{
"Name": "exp_01",
"File": "expressions/exp_01.exp3.json"
},
{
"Name": "exp_02",
"File": "expressions/exp_02.exp3.json"
},
{
"Name": "exp_03",
"File": "expressions/exp_03.exp3.json"
},
{
"Name": "exp_04",
"File": "expressions/exp_04.exp3.json"
},
{
"Name": "exp_05",
"File": "expressions/exp_05.exp3.json"
},
{
"Name": "exp_06",
"File": "expressions/exp_06.exp3.json"
},
{
"Name": "exp_07",
"File": "expressions/exp_07.exp3.json"
},
{
"Name": "exp_08",
"File": "expressions/exp_08.exp3.json"
}
],
"Motions": {
"Idle": [
{
"File": "motions/mtn_01.motion3.json"
}
],
"": [
{
"File": "motions/mtn_02.motion3.json"
},
{
"File": "motions/mtn_03.motion3.json"
},
{
"File": "motions/mtn_04.motion3.json"
},
{
"File": "motions/special_01.motion3.json"
},
{
"File": "motions/special_02.motion3.json"
},
{
"File": "motions/special_03.motion3.json"
}
]
}
},
"Groups": [
{
"Target": "Parameter",
"Name": "EyeBlink",
"Ids": [
"ParamEyeLOpen",
"ParamEyeROpen"
]
},
{
"Target": "Parameter",
"Name": "LipSync",
"Ids": [
"ParamA"
]
}
],
"HitAreas": [
{
"Id": "HitAreaHead",
"Name": ""
},
{
"Id": "HitAreaBody",
"Name": ""
}
]
}ここにある Expressions と Motions のリストがAITuberKitで指定できる感情とモーションの設定値です。
このファイルの中で言うと、表情は exp_01 や exp_02、モーションは Idle がありますね（モーションはもう一つ空文字のキーがありますが、AITuberKitで使用するには任意の文字列を指定する必要があります）。
これらの値は見てもらえればわかるように、それぞれの表情・モーションファイルに対応しています。
⚠ なお、モデルによっては表情やモーションのファイルがあるのに、*.model3.json ファイルにその設定がない場合があります。その場合もこれ以降で解説する方法に従って編集することが可能です。
exp_01のままで分かりづらい場合は、AITuberKitの設定項目に合わせて Happy などに変更するとわかりやすいかもしれません。
ただし、このままだとどのキーがどのような表情やモーションなのか分かりづらいですね。
ここで Live2D Cubism Viewer を使用します。
下記からダウンロード可能です（Live2D Cubism Editorとありますが、Viewerも付いてきます）。
Live2D Cubism Viewer を起動すると下記のような小さなウインドウが表示されると思うので、ここに *.moc3 ファイルまたは *.model3.json ファイルをドラッグ&ドロップします（どちらでも結果は同じです）。
すると以下のような画面が表示されると思います。
左上にあるファイルの一覧に expressions や motions という項目がありますね。
ここにあるファイルをクリックするとそれぞれの表情やモーションを見ることができます（モーションの場合はファイルクリック後に左真ん中当たりに表示される「再生」ボタンを押してください）。
ここに表示される内容は *.model3.json に依存するので、表情やモーションファイルがあっても何も表示されない場合があります。
そういう場合はそれらのファイルを選択した状態で左上の枠にドラッグ&ドロップするとこれらのファイルが反映されます。
表情を確認できたら、どのアクションがどの名称に対応しているかをメモするか、先程確認した *.model3.json ファイルを直接編集しましょう。
表情名やモーション名はViewer上で変更することも可能です。変更した場合は、更新された *.model3.json ファイルを書き出すと楽だと思います。
いろいろ説明してしまいましたが、最終的に *.model3.json ファイルに expressions と motions のリストが設定されていれば問題ありません。
用意したファイルをAITuberKitに設定する
次にAITuberKitに今用意したファイルを設置しましょう。
*model3.json ファイルや表情・モーションファイルが含まれるフォルダを public/live2d フォルダ配下に置いてください。
すでにある nike01 フォルダと同じ階層に置くことになると思います。
フォルダ名やファイル名は何でも良いですが、必ずフォルダ直下に *model3.json ファイルが在る状態にしてください。
これで準備は完了です。
AITuberKitから選択する
それではサーバーを再起動して画面も再読み込みしましょう。
先程説明した通りに設置されていれば、下記のように選択肢に表示されと思います。
正しく表示されていますね！
あとは先程設定した表情とモーションの値をそれぞれの感情のフォームに入力しましょう。
セリフに応じて口が動き、表情やモーションが再生されれば設定完了です。
サンプルモデルちゃんでテスト https://t.co/QOydJ85WwA pic.twitter.com/34ylU4LaJK
— ニケちゃん@AIキャラ開発飽きた (@tegnike) December 28, 2024
注意: モデル読み込みエラーについて
上述しましたが、モデルによっては AITuberKitで使用しているLive2Dライブラリと互換性がなく、選択肢のリストから選んだ時点でエラーが発生する場合があります。
その場合は申し訳ありませんが別のモデルをご使用ください。
この事象の報告はまだ1件しか受けていないですが、できるだけ多くの方に使っていただけるように今後修正対応する予定です。
宣伝
AITuberKitについてもっと知りたい！もっとこんな機能が欲しい！という方がいたらぜひDiscordサーバーに参加してください！
日々開発進捗もつぶやいていたりするのでX（Twitter）もフォローしてもらえると嬉しいです🙇♀
いいなと思ったら応援しよう！
