AITuberKit × Dify で超簡単チャットボット構築
こんにちは、ニケです。
今回は、私の想像よりもAITuberKitとDifyの連携に反響があったということで、これらを使用したAIキャラと会話を始めるまでの環境構築方法を解説していきたいと思います。
Dify連携機能実装したときは、「何か流行ってるし追加したらウケいいかな」くらいにしか思ってなかったのですが、今では私自身も開発する時の第一選択肢としてDifyを選びます
— ニケちゃん@AIキャラ開発 (@tegnike) July 17, 2024
そんなAITuberKitですが、コマンド4つで環境構築できるので興味ある方はぜひ試してみてください〜https://t.co/41moOfGM0j https://t.co/EojL5QsCX0 pic.twitter.com/FJnMCxZI60
※ 今回は以下のライブラリやサービスを使用するので、必要に応じて前準備しておいてください。
git（コマンドが使用できる環境）
npm（コマンドが使用できる環境）
docker-compose（コマンドが使用できる環境）
VOICEVOX（デスクトップアプリ）
OpenAI APIキー
MacとWindowsで動作を確認しています。
AITuberKitの準備
gitとnpmコマンドが実行できればすぐに始められます。
これらが使用できない方は調べて実行できるようにしておきましょう。
環境構築
以下のリポジトリをクローンします。
git clone https://github.com/tegnike/aituber-kit.gitフォルダを移動し、
cd aituber-kit必要ライブラリをインストールして、ローカルサーバーを起動します。
npm install
npm run devこれで localhost:3000 を開けば下記の画面が表示されたら環境構築は完了です。
すでに3000ポートが使用されている場合は、それ以外（通常は連番なので3001）のポートが npm install を実行した下に表示されると思うので、そのURLを開きましょう。
AITuberKitの設定
細かい設定をしていきます。
とはいえ、Difyを使用する場合はそこまで必要な作業は多くありません。
まず、左上にある歯車アイコンから設定画面を開きましょう。
必要な部分だけ説明していきます。
言語設定
言語を日・英・中・韓から選択できます。
キャラクター名
画面上に表示する名称を設定します。ただし、ここに設定した名称はAIの回答に影響しません。
キャラクターモデル
ご自身のVRMモデルをお持ちの場合は、ここからアップロードします。
作ってみたい方は下記のVRoid Studioから作成してみましょう。
AIサービスを選択
ここではDifyを選択してください。
Difyを用いてOpenAIを使用する場合でも必ずDifyにすること。
Dify API キー
後ほど設定します。
URLを入力
基本的には「例：〜」にあるURLをそのまま入力すれば問題ないはずです。
Difyを起動した時のポート番号を変更した場合はここも変更する必要があることを忘れずに。
（デフォルトはlocalhost:80です。）
キャラクター設定（システムプロンプト）
ここは未設定で問題ありません。AIサービスでOpenAIなどを使用した場合はこちらの設定が反映されますが、Difyの場合はDify側で設定することになります。
合成エンジンの選択
テキストを音声に変換するサービス（TTS）を選択します。
ここでは最も簡単なVOICEVOXを解説します。
下記のサイトから、ご自身の環境（WindowsやMacなど）にあったVOICEVOXのデスクトップアプリをダウンロードします。
ダウンロード後、インストーラーを起動して、指示にしたがってアプリをインストールします。
インストールが完了したら、アプリを起動しましょう。
以下のようなアプリが準備は完了です。
AITuberKitの説明に戻り、ボイス選択から適当なキャラクターを選択して「ボイスを視聴する」ボタンを押してみてください。
ここでキャラクターボイスが流れたらVOICEVOXとの接続はうまくいっています。
これでAITuberKit側の準備は一旦完了です。
もっとAITuberKitについて知りたい！と思った方は、下記の記事も参考にしてみてください。
Dify以外のAIサービスやVOICEVOX以外のTTSサービスの使用方法、AITuberとしてYoutubeと連携させる方法も載せています。
Difyの準備
では、次にDifyの準備を進めます。
Difyにはサービス版とローカル版がありますが、今回は自分で環境を構築するローカル版で進めていきます。
Difyではdocker-composeコマンドを使える環境が必要なので、必要に応じて準備しておきましょう。
環境構築
まず、AITuberKitと同じようにリポジトリをクローンします。
git clone https://github.com/langgenius/dify.gitフォルダを移動します。
cd dify
cd docker各種コンテナを起動します。
docker-compose up -d少し時間がかかるので待ちます。
しばらくしてから localhost:80 へアクセスすると下記のような画面が表示されると思います。
これで環境構築自体は完了ですが、とりあえずログインするところまでは進めておきましょう。
この画面で、求められている値を入力します。
メールアドレスとパスワードは今後ログインで求められるので記録しておきましょう。
その後下記の画面に遷移するので、今入力した値を入力してログインします。
下記の画面に遷移したらチャットボットを作成するまでの前準備は完了です。
チャットボットを作成する
では、次にチャットボットを作成します。
左上の灰色の枠から、「最初から作成」を選択します。
Difyでは、「チャットボット」「テキストジェネレーター」「エージェント」「ワークフロー」という4つのタイプからアプリを作成できますが、AITuberKitでは「チャットボット」のみサポートしています。
まずはシンプルにただ返事を返すだけのチャットボットを作ってみましょう。
「基本」を選択したまま、「名前」と「説明」を入力して作成するボタンを押します。
ここで、チャットボットを作成する前に、OpenAI APIキーを設定しておきます。
これが無いとチャットボットは回答を生成することができません。
OpenAI APIキーはあらかじめクレジットを支払っておく必要があるので、注意してください。
APIキーを取得したら、上記の画面の右側の青いバタン「設定に移動」をクリックします。
すると、様々なサービスの設定画面が表示されるので、このうちOpenAIを選択します。
一番上の「API Key」に先ほど準備したAPIキーを入力し、「保存」をクリックします。
これでOpenAIの設定は完了です。他のAIサービスを使用したい場合は適宜設定して下さい。
では、チャットボットの作成を進めます。
左上の「手順」にこのチャットボットの説明を加えます。いわゆるシステムプロンプトというやつです。
ここでは一旦、AITuberKitで使用しているデフォルトのプロンプトを使用しましょう。
下記をそのままコピペしてください。
あなたはこれからuserと仲の良い1人の人間として振舞い会話を行います。
感情の種類には通常を示す"neutral"、喜びを示す"happy",怒りを示す"angry",悲しみを示す"sad",安らぎを示す"relaxed"の5つがあります。
会話文の書式は以下の通りです。
[{neutral|happy|angry|sad|relaxed}]{会話文}
あなたの発言の例は以下通りです。
[neutral]こんにちは。[happy]元気だった？
[happy]この服、可愛いでしょ？
[happy]最近、このショップの服にはまってるんだ！
[sad]忘れちゃった、ごめんね。
[sad]最近、何か面白いことない？
[angry]えー！[angry]秘密にするなんてひどいよー！
[neutral]夏休みの予定か～。[happy]海に遊びに行こうかな！
返答には最も適切な会話文を一つだけ返答してください。
ですます調や敬語は使わないでください。
それでは会話を始めましょう。
これで、チャットボットの最低限の設定が完了しました。
画面右上の「公開する」を押してチャットボットが外部アプリ（ここではAITuberKitのこと）から使用できるようにします。
次にAPIキーを取得します。
左のサイドバーにある、「APIアクセス」をクリックします。
画面が切り替わり、右上に「APIキー」というボタンが表示されるので、ここから取得してください。
ではAITuberKitに戻り、
設定から「Dify API キー」に入力してください。
これでAITuberKitからDifyチャットボットが使えるようになりました。
会話してみる
では早速会話してみましょう。
設定画面を閉じ、下の入力フォームからテキストを入力します。
テキストが表示され、キャラクターが喋り出したら成功です！！
また、Difyの画面では今した会話が保存されているので、ちゃんとAITuberKitと接続できているか確認してみましょう。
左側のサイドバーから「ログ＆アナウンス」をクリックすることで見ることができます。
もっと便利にする
いま作ったのはシンプルなチャットボットなのであまり面白くありません。
もう少し改良してみましょう。
知識をつける
まずはチャットボットに知識を付けてみます。
これでAIが知らない内容についても回答できるようになります。
Difyの設定画面に戻り、真ん中らへんにある「コンテキスト」から「追加」ボタンを押します。
追加するための知識がまだないので画像のように表示されるはずです。
「作成に進む」をクリックしてください。
このような画面が表示されます。
Difyでは、「テキスト」「Notion」「ウェブサイト」から知識を作成することが可能です。
今回の説明では、例として AITuberKit のREADMEファイルを使用しますが、ぜひご自身が知識として与えたいファイルをご準備してアップロードしてみてください。
ドラッグ&ドロップでアップロードし、「次へ」ボタンを押します。
いろいろ説明が出てきますが、今回はそのまま「保存して処理」ボタンを押してみます。
しばらくすると、ナレッジ（知識）が作成された旨の表示が出てきます。
では、チャットボットに戻って知識を与えてみましょう。
左上のロゴからトップページに戻れます。
コンテキストを押すと今度は先ほど作成した知識が表示されるので、これを選択した状態で「追加」ボタンを押します。
これでチャットボットに知識が追加されました。
では、この更新を反映するために、左上の「公開する」からチャットボットを更新してください。
これで AITuberKit は先程の知識を取得できたはずです。
AITuberKitについての質問をしてみます。
AIが持っていないはずの AITuberKit の説明がちゃんとできているのが確認できますね。
Difyでは簡単にチャットボットに知識を与えることができるので、是非いろいろ試してみてください。
※ このようにAIが外部知識ソースから関連情報を取得し、それを基に回答を生成する技術をRAGと言います。
今回はデフォルトの設定のまま進めましたが、より適切に回答させる場合は適したデータファイルの準備や設定をする必要があるので、興味のある方は調べて挑戦してみましょう。
Chatflowを使う
次にDifyチャットボットで、より複雑な回答を作ることができるChatflowを試してみます。
改めてチャットボットの作成画面を開いてみましょう。
「基本」の右隣に「Chatflow」というのがあるのでこれを選択します。
名前と説明を入れて作成してください。
次のような画面が表示されると思います。
Chatflowでは、チャットボットがユーザからの入力（今回はAITuberKitからの入力）を受け取ってから、どのように回答するかをカスタマイズすることができます。
デフォルトの設定では、受け取った入力をそのままOpenAIモデルに渡し、回答をそのまま返しているようです。
このままでもチャットボットとしての機能は十分ですが、せっかくなので少し変更してみます。
今回はDifyでよく使われる機能の「質問分類器」を試してみましょう。
質問分類器を使用すると、与えられた値がどの分類になるかをAIが判定し、処理を分岐させてくれます。
例として、設定は簡単に以下の2分類にしてみます。
挨拶なら、固定文言を返す。
それ以外なら、AIを使って回答する。
では、下の方にある ＋ボタン から「質問分類器」を選択してみましょう。
すると、質問分類器というブロックが出てきます。
質問分類器ブロックをクリックすると、右側に設定が出てくるので、先程の分類「挨拶」「挨拶以外」をクラスに設定します。
AIモデルはお好みのものを選択してください。
次に、質問分類器ブロックカーソルを近づけると、ブロックの左右に ＋ボタン が現れるので、ドラッグしてすでにある開始ブロックやLLMブロックと適切に接続させます。
「挨拶」クラスのときは固定文言を返したいので、再度下の ＋ボタンをクリックし、今度は「回答」ブロックを選択します。
出てきた回答ブロックを質問分類器に接続します。
この回答ブロックをクリックして固定文言を設定しましょう。以下のようにしてみます。
チャットボットへようこそ！何でも好きなことを聞いてね！
では、このChatflowを公開します。
先ほどと同じように右上のボタンを押してください。
いま作成したChatflowは、先ほど作成したチャットボットとは異なるアプリとして設定されているので、APIキーは別のものを用意する必要があります。
チャットボットの時と同じ手順で、左サイドバーの「APIアクセス」からAPIキーを取得し、AITuberKitの設定画面からAPIキーを改めて設定します。
では、挨拶とそれ以外の発言をしてみましょう。
ちゃんと「挨拶」のときは固定文言を、「挨拶以外」のときはAIが生成した回答が返ってきていますね！
このようにDifyのChatflowを使用すると、簡単にカスタマイズされたチャットボットを作成することができます。
Chatflowには、Web検索や画像生成、他サービスとの連携などの便利ツールが山ほどあるので、ぜひ他の機能も試してみましょう。
おわりに
以上で、AITuberKitとDifyを使ったチャットボットの構築方法の解説を終わります。
ここまで読んでいただき、ありがとうございました。この記事で紹介した方法は、あくまでも入り口に過ぎません。
ぜひ、自分なりのアイデアを加えて、オリジナルのAIチャットボットを作り上げてみてください。
宣伝
AITuberKitを使用する上で困ったことがあったら、ぜひこの記事のコメント欄やDMで質問してください！
私一人では気づかない点も多いので、質問や要望は大歓迎です！！
また、開発進捗やバグ報告、今後の方針などは私のXアカウント または Discordで発信していくので、興味のある方はぜひフォロー&Joinしていただけると嬉しいです！！
いいなと思ったら応援しよう！
