見出し画像

今日からあなたもAITuberデベロッパー

ニケちゃん

こんにちは、ニケです。
今回は誰でも簡単にAITuberを開発できるお試しキットを公開したので使い方を解説をします。

⚠ 更新情報はこのnoteの記事よりも リリースノート の方が早く反映されるので、必要があったらこちらをご確認ください。


概要

AITuberキット は、React/TypeScriptを使用して作成されたブラウザアプリです。
pixiv社が公開している、簡単にAIキャラクターと会話ができるChatVRMというアプリを改造して作成されています。
AIキャラクターのモデルはVRMという形式のファイルを使用しています。

AITuberキットには大きく分けて下記の2つの機能が含まれます。

  • AIキャラとの対話

  • AITuber配信

これから、これらの機能について順次解説していきます。

以降は可能な限り最新のmainブランチの説明を記載していくので、動作や画面に不整合があったら最新版があるかチェックするようにしてください。

最新版に更新するコマンドはこちらです。

git pull

npm install

※ Windows（Microsoft Edgeブラウザ）とMac（Google Chromeブラウザ）の両方で動作することを確認しています。

AIキャラとの対話

まずAITuber配信をする前にAIキャラと対話してみましょう。
すぐにYoutubeで配信したい方もいると思いますが、基本設定を含む大部分がこちらの機能と共通なので、まずはこちらから読んで仕様について理解するようにしてください。

事前準備

1．使用するLLMを選択する
AIサービスを複数の選択肢から選択します。一部のサービスは準備するまでに少し手間がかかるので、ご自身のレベルに合わせたものを選択してください。

1-1．商用AIサービスを利用する（難易度：低）
OpenAI, Anthropic, Google Gemini などから選択できます。
それぞれAPIキーが必要なので、持っていない方は各Webサイトからログインして取得しましょう。

比較的どのサービスも取得することはそこまで大変ではないですが、OpenAIのAPIは今後AIを開発する上で使用する場面が多くなってくると思うので、取得しておくに越したことはないと思います。
ただし、クレジットが先払いであることに注意してください。

1-2．ローカルLLMを利用する（難易度：高）
ローカルLLMを使用する場合は予めLLM APIサーバーを起動しておく必要があります。
初心者の方にはOllamaがおすすめです。下記の記事がとてもわかりやすいので参考にしてみてください。

1-3．Difyを利用する（難易度：高）
Difyを使用する場合は予め Chatbot または Chatflow を作成し、APIとして公開しておく必要があります。
少し手順が複雑ですが、簡単に記憶ストレージを持ったAI（RAG）を作れるので、気になった方は挑戦してみてください。
下記の記事で詳細な設定手順を説明しています。

2．使用するText to Speachサービスを選択する
現在AITuberKitで使用できるText to Speach（以後、TTS）サービスは次の4つです。
いずれか1つを準備してください。オススメはVOICEVOXです。

2-1．VOICEVOX（難易度：低）
30種を超えるキャラクターから好みの声を選ぶことができます。ずんだもんが有名ですね。予めVOICEVOXデスクトップアプリを起動しておく必要があります。

b) Koeiromap（難易度：低）
XとYの2つのパラメータを使用して細かく音声を調整することが可能です。APIキーの入力が必要なので下記から取得してください。

c) Google Cloud Text-to-Speech（難易度：中）
日本語以外の指定が可能です。credentials.jsonを取得しておく必要があります。

d) Style-Bert-VITS2（難易度：高）
ローカルで動くTTSサーバーです。他の選択肢より準備するハードルが高いですが、高品質なモデルを使用した際の合成音声のクオリティはその他と比較して段違いです。

e) GSVI TTS（難易度：高）
中国語の合成音声サービスとして良く使用されます。

f) ElevenLabs（難易度：低）
最近流行っているTTSサービスです。既存のモデル以外にも、自身の音声ファイルから本物そっくりのモデルを作成することも可能です。APIキーが必要です。

環境構築

ブラウザアプリの起動にはnpmを使用します。
お持ちのPCにで実行できない場合はインストールしておいてください。「windowsでnpmをインストールしたい」のようにChatGPTに聞くと教えてくれると思います。

それでは、ターミナルを開いて下記の通り実行してください。

# リポジトリクローン
git clone https://github.com/tegnike/aituber-kit.git
 
# ディレクトリ移動
cd aituber-kit
 
# パッケージインストール
npm install
 
# アプリ起動
npm run dev

これで http://localhost:3000 を開くと下記のような画面が表示されると思います（3000ポートがすでに利用中の場合は他のポートになることもあるので注意）。

ここで下記の画面が開かない場合は何かしらのエラーが画面かターミナルに表示されているはずなので、ChatGPTなどに内容を記載し解決を試みてください。
どうしてもわからない場合は、最後に紹介しているDiscordサーバーで私宛に質問してください。

このページでは何もせずに閉じてしまって大丈夫です。
デフォルトで設定されている私のキャラクターモデルが表示されるかと思います。

各種設定

では左上の歯車ボタンをクリックしてください。
いろいろ設定項目が表示されるはずです。一つずつ説明していきます。

1) 基本設定

言語設定からは日・英・中・韓から選択できます。
ただしこれはブラウザ上の言語設定であり、AIキャラクターの回答が英語になるわけではありません。
キャラの言語は後ほど紹介するシステムプロンプトで指定できます。

キャラクター名では表示上のキャラクターの名称を決定します。
こちらもあくまで表示上の設定で、AIの回答には関係ない項目です。

キャラクターモデルをクリックするとファイル選択のポップアップが表示されるため、ご自身のキャラクターVRMファイルがある場合はこちらから指定してください。

ちなみにVRMファイルはVroid Studioというサービスで簡単に作れるので、ぜひこの機会に試してみてください。
オリジナルのAIキャラクターを作成してみましょう。

背景画像をクリックすると背景画像が変更できます。

2) AI設定

外部連携モードでは、Pythonなどを使用したサーバーアプリとWebsocketを介して連携し、回答を取得する機能です。
少し上級者よりの機能になるので、今回の記事では説明しません。気になる方は以下の記事を参考に実装してみてください。

AIサービスを選択で、OpenAI, Anthropic, Google Gemini, ローカルLLM, Dify, その他から1つを選択します。

OpenAI, Anthropic, Geminiなどの商用AIサービスの場合は、選択したサービスにあったAPIキーを設定してください。
合わせて使用したいモデルも選択します。

ローカルLLMとDifyを選択した場合は、適切にURLおよびその他の設定情報を入力してください。

キャラクター設定はシステムプロンプトです。
キャラの性格や名前、ロールなどを設定しましょう。英語で回答させたい場合はその旨を記載することを忘れずに。

なお、初期値は次のようになっています。

あなたはこれからuserと仲の良い1人の人間として振舞い会話を行います。
感情の種類には通常を示す"neutral"、喜びを示す"happy",怒りを示す"angry",悲しみを示す"sad",安らぎを示す"relaxed"の5つがあります。

会話文の書式は以下の通りです。
[{neutral|happy|angry|sad|relaxed}]{会話文}

あなたの発言の例は以下通りです。
[neutral]こんにちは。[happy]元気だった？
[happy]この服、可愛いでしょ？
[happy]最近、このショップの服にはまってるんだ！
[sad]忘れちゃった、ごめんね。
[sad]最近、何か面白いことない？
[angry]えー！[angry]秘密にするなんてひどいよー！
[neutral]夏休みの予定か～。[happy]海に遊びに行こうかな！

返答には最も適切な会話文を一つだけ返答してください。
ですます調や敬語は使わないでください。
それでは会話を始めましょう。

少し特殊な書き方になっていますね。
実は上記のような形式で出力させることでキャラクターの表情を制御することが可能になっています。

文字のみが結果として返却された場合は、必ずneutralが指定されてキャラクターのデフォルトの表情が表示されます。
無くても問題はないですが、せっかくなので上記のシステムプロンプトに則った方法で記載することをオススメします。

なお、AIサービスでDifyを選択した場合は、Dify側で設定することになるのでこの項目の内容はAIの回答に反映されません。

3) Youtube設定

YoutubeモードをONにすることで、Youtubeのライブ配信チャット欄から回答を取得し、その内容に合わせて回答してくれるようになります。
こちらに関しては後ほど説明するので、今回はいったんOFFのまま進めてください。

4) 音声設定

合成音声エンジンの選択では、先程紹介した6つの選択肢からTTSサービスを選ぶことになります。
指示に従って各サービスに合わせた設定を行いましょう。

5) スライド設定

スライドモードを使用することでAIキャラクターに予め用意した資料を発表させることができます。
詳細な使い方などは下記を参考にしてください。

6) その他

回答欄にキャラクター名を表示するでは、下記の欄の上半分にキャラクター名を表示するかどうかの切り替えができます。

多くのTTSサービスでは「AITuber」のことを「エーアイティーユービーイーアール」と読んでしまいますが、英単語を日本語で読み上げるをONにすると、「アイチューバー」のように適切に発言してくれるようになります。

設定ボタンを表示のオンオフを切り替えることで右上の歯車ボタンの表示切替ができます。
一般公開するときなど、設定画面を開いてほしくないときなどにご活用ください。

会話履歴は、今までの話した内容がここに表示されます。初期状態では何も表示されてないはずです。
今回のAIキャラクターは過去数回分の会話内容を踏まえたうえで回答を生成するので、最初から試したい場合は「会話リセット」ボタンを押して削除しましょう。

会話開始！

それでは準備が完了したので設定画面を閉じて会話を始めてみましょう。
下のフォームに適当な文字を入力してみます。ちなみに左のマイクボタンを押せば音声入力も可能です。

回答してくれましたね！
合成音声の設定がうまくいっていたら音声も再生されるはずです。

上手く回答が生成されない・音声が再生されない場合は次のような問題が発生している可能性があります。
開発者コンソールを開いてエラーを特定してみましょう。ChatGPTに聞いたら解決策を提示してくれると思います。

  • 選択したAIサービスのAPIキーが設定されていない または 誤っている

  • 選択したAIサービスのAPIの支払い情報が正しく設定されていない

  • VOICEVOXのデスクトップアプリが起動していない

  • Koeiromap APIキーが設定されていない または 誤っている

  • Google credentials.jsonファイルが適切な位置に置かれていない

また、左上の会話ログボタンをクリックすると会話履歴を表示させることも可能です。

これでAIキャラとの対話ができましたね！

ちなみに、現在の設定では過去10個までの会話が記憶としてAIサービスに渡されるようになっています。
つまりそれ以上過去の会話は忘れてしまうということです。
過去の記憶をどのように保たせるかはAITuber開発の重要な課題なので、ハマった方はぜひご自身で考えた方法で実装してみてください。

また、マルチモーダル機能を使用することで、カメラの映像や画像を共有したAIキャラとの会話も可能です。気になった方はこちらも試してみてください。

さて、ここまで上手くいっていたら次のAITuber配信も問題なく進められると思います。

AITuber配信

では、早速始めていきましょう。

準備事項

1．Youtube APIキーを取得する
配信するので必須ですね。下記の記事がわかりやすかったので参考にして取得してください。

2．配信IDを取得する
Youtubeで配信を開始し、配信IDを取得してください。
下記のようなURLの場合、xxxxxxxxxxxがそれに当たります。

https://youtube.com/live/xxxxxxxxxxx

配信方法やOBSの設定は説明しないため、適宜調べてみてください。

Youtube設定

では、Youtube配信用の設定をします。
とはいえ難しいことは全くありません。

YoutubeモードをONにすると、YouTube API キー と YouTube Live ID を入力する欄が表示されると思うので、先ほど取得した値を入力します。
これだけでもう配信コメントを取得する状態に入りました。

それでは左上のYoutubeボタンを押してみましょう。
コメントを拾ってくれるはずです。

現在の実装では、下記の仕様になっています。

  • 発話終了後、5秒毎にコメントを取得APIが実行される

  • 前回取得したコメント以降のコメントをフィルタリングする

  • 複数存在した場合は、その中から文脈に合った1つを選択する

  • 選択されたコメントが過去の会話ログと共にLLMに渡されて回答が生成される

  • 『#』から始まるコメントは読まれない

なお、Youtube配信モードがONになっている場合でも入力フォームは動作するので、コメントがない場合などに直接AIと会話することも可能です。

ベータ版として新しく会話継続モードを追加しました。
ONにすることで、下記の機能が使用できます。

  • コメントが無いときにAIが自ら会話を継続しようとするモードです。

  • 下記の図のように処理が遷移します。

ただし精度安定のため、現在はAIサービスでOpenAI, Anthropic または Googleが選択された場合のみ対応しています。gpt-4o、gpt-4-turbo、Claude-3-Opus または Claude-3.5-Sonnetで比較的安定動作することを確認しています。

⚠ 一度の回答で複数回LLMを呼び出すため、API利用料が増える可能性があります。ご注意ください。

会話継続モードに関しては、別途記事を作成する予定です。

その他TIPS

キャラクターモデルや背景を固定したい

現在の仕様では、ブラウザを表示するたびにこれらの設定を変更する必要があり、少しめんどうくさいです。
それぞれ下記のファイルを上書きすることで固定できます。ただし、名称は変更しないでください。

  • VRMモデル： public/AvatarSample_B.vrm

  • 背景画像：public/bg-c.jpg

その他の設定を固定したい

それ以外の一部の設定項目は .envファイル を作成することで固定することが可能です。
リポジトリ直下にある .env.template をコピーして .env という名称のファイルを作成し、記載されている内容にあった項目値（APIキーなど）を入力してください。

最後に

いかがでしたでしょうか？
ここまで上記の解説通りに実行できたら無事AITuber配信デビューできていることかと思います。

とはいえ、AITuberはこれだけで終わりではありません。
途中に書いた記憶機構のように、AITuberをちゃんと面白く作るにはこの「キット」だけでは不十分だということがわかるでしょう。
ぜひ今回の記事で興味を持たれた方はご自身のやり方でAITuberを育ててみてあげてください。

そして私はそれをサポートできるように随時機能追加を実装していく予定です。

おまけ

開発進捗やバグ報告、今後の方針などは私のXアカウント または Discordで発信していくので、興味のある方はぜひフォロー&Joinしていただけると嬉しいです！！

私のXアカウント（@tegnike）


いいなと思ったら応援しよう！

ニケちゃん
いただいたサポートは主にOSSの開発継続費用として役立てます。