AITuberKit

お知らせ: 本プロジェクトはバージョン v2.0.0 以降、カスタムライセンスを採用しています。商用目的でご利用の場合は、利用規約 セクションをご確認ください。

English｜ 中文｜ 韓語

概要

主に以下の2つの機能があります。

1. AIキャラとの対話
2. AITuber配信

下記の記事に詳細な使用方法を記載しました。

⚠️ セキュリティに関する重要な注意事項

このリポジトリは、個人利用やローカル環境での開発はもちろん、適切なセキュリティ対策を施した上での商用利用も想定しています。ただし、Web環境にデプロイする際は以下の点にご注意ください：

• APIキーの取り扱い: バックエンドサーバーを経由してAIサービス（OpenAI, Anthropic等）やTTSサービスのAPIを呼び出す仕様となっているため、APIキーの適切な管理が必要です。

本番環境での利用について

本番環境で利用する場合は、以下のいずれかの対応を推奨します：

1. バックエンドサーバーの実装: APIキーの管理をサーバーサイドで行い、クライアントからの直接的なAPIアクセスを避ける
2. 利用者への適切な説明: 各利用者が自身のAPIキーを使用する場合は、セキュリティ上の注意点について説明する
3. アクセス制限の実装: 必要に応じて、適切な認証・認可の仕組みを実装する

開発環境

このプロジェクトは以下の環境で開発されています：

• Node.js: ^20.0.0
• npm: 10.8.1

共通事前準備

1. リポジトリをローカルにクローンします。

git clone https://github.com/tegnike/aituber-kit.git

2. フォルダを開きます。

cd aituber-kit

3. パッケージインストールします。

npm install

4. 開発モードでアプリケーションを起動します。

npm run dev

5. URLを開きます。http://localhost:3000

AIキャラとの対話

• AIキャラと会話する機能です。
• このリポジトリの元になっている pixiv/ChatVRM を拡張した機能です。
• 各種LLMのAPIキーさえあれば簡単に始めることが可能です。
• 直近の会話文を記憶として保持します。
• マルチモーダルで、カメラからの映像やアップロードした画像を認識して回答を生成することが可能です。

使用方法

1. 設定画面で選択したLLMのAPIキーを入力します。
   • OpenAI
   • Anthropic
   • Google Gemini
   • Azure OpenAI
   • Groq
   • Cohere
   • Mistral AI
   • Perplexity
   • Fireworks
   • ローカルLLM
   • Dify（Chatbot or Agent）
2. 必要に応じてキャラクターの設定プロンプトを編集します。
3. 必要に応じてキャラクターのVRMファイルおよび背景ファイルをアップロードします。
4. 音声合成エンジンを選択し、必要に応じて声の設定を行います。
   • VOICEVOX: 複数の選択肢から話者を選ぶことができます。予めVOICEVOXアプリを起動しておく必要があります。
   • Koeiromap: 細かく音声を調整することが可能です。APIキーの入力が必要です。
   • Google TTS: 日本語以外の言語も選択可能です。credential情報が必要です。
   • Style-Bert-VITS2: ローカルAPIサーバーを起動しておく必要があります。
   • AivisSpeech: 予めAivisSpeechアプリを起動しておく必要があります。
   • GSVI TTS: ローカルAPIサーバーを起動しておく必要があります。
   • ElevenLabs: 様々な言語の選択が可能です。APIキーの入力が必要です。
   • OpenAI: APIキーの入力が必要です。
   • Azure OpenAI: APIキーの入力が必要です。
   • にじボイス: APIキーの入力が必要です。
5. 入力フォームからキャラクターと会話を開始します。マイク入力も可能です。

AITuber配信

• Youtubeの配信コメントを取得して発言することが可能です。
• Youtube APIキーが必要です。
• 「#」から始まるコメントは読まれません。

使用方法

1. 設定画面でYoutubeモードをONにします。
2. Youtube APIキーとYoutube Live IDを入力します。
3. 他の設定は「AIキャラとの対話」と同様に行います。
4. Youtubeの配信を開始し、キャラクターがコメントに反応するのを確認します。
5. 会話継続モードをONにすると、コメントが無いときにAIが自ら発言することができます。

その他の機能

外部連携モード

• WebSocketでサーバーアプリにリクエストを送信して、レスポンスを取得することができます。
• 別途サーバーアプリを用意する必要があります。

使用方法

1. サーバーアプリを起動し、ws://127.0.0.1:8000/ws エンドポイントを開きます。
2. 設定画面で外部連携モードをONにします。
3. 他の設定は「AIキャラとの対話」と同様に行います。
4. 入力フォームからリクエストを送信し、サーバーアプリからのリクエストが返却されるのを確認します。

関連

• こちらのサーバーアプリのリポジトリですぐに試すことが可能です。tegnike/aituber-server
• 詳しい設定は「美少女と一緒に開発しようぜ！！【Open Interpreter】」をお読みください。

スライドモード

• スライドをAIキャラが自動で発表するモードです。
• 予めスライドと台本ファイルを用意しておく必要があります。

使用方法

1. AIキャラと対話できるところまで進めておきます。
2. スライドフォルダと台本ファイルを指定のフォルダに配置します。
3. 設定画面でスライドモードをONにします。
4. スライド開始ボタンを押して発表を開始します。

関連

• 詳しい設定は「スライド発表はAIがやる時代！！！！」をお読みください。

Realtime APIモード

• OpenAIのRealtime APIを使用して、低遅延でキャラと対話できるモードです。
• 関数実行を定義することができます。

使用方法

1. AIサービスでOpenAIまたはAzure OpenAIを選択します。
2. Realtime APIモードをONにします。
3. マイクを使用して話しかけます。

関数実行

• src/components/realtimeAPITools.tsx, src/components/realtimeAPITools.json に新しい関数を定義します。
• 既存の get_current_weather 関数を参考にしてください。

TIPS

背景固定方法

• 背景画像は public/bg-c.png の画像を変更してください。名称は変更しないでください。

環境変数の設定

• 一部の設定値は .env ファイルの内容を参照することができます。
• 設定画面で入力した場合は、環境変数で指定された値よりも優先されます。

マイク入力方法（2パターン）

1. Alt (or option) キーを押している間入力受付 => 離したら送信
2. マイクボタンをクリック（一度押したら入力受付）=> もう一度クリックで送信

その他

• 設定情報・会話履歴は設定画面でリセットすることができます。
• 各種設定項目はブラウザにローカルストレージとして保存されます。
• コードブロックで囲まれた要素はTTSで読まれません。

関連記事

• 今日からあなたもAITuberデベロッパー｜ニケちゃん
• 美少女と一緒に開発しようぜ！！【Open Interpreter】
• スライド発表はAIがやる時代！！！！
• AITuberKitにマルチモーダル機能を追加したのでAIキャラと宅飲みしてみる
• AITuberKit × Dify で超簡単チャットボット構築
• DifyをXserverでインターネットに公開する
• 高度な音声モード こと Realtime API を試してみる

スポンサー募集

開発を継続するためにスポンサーの方を募集しています。
あなたの支援は、AITuberキットの開発と改善に大きく貢献します。

協力者の皆様（ご支援いただいた順）

他、プライベートスポンサー 複数名

利用規約

ライセンス

本プロジェクトは、バージョン v2.0.0 以降、カスタムライセンスを採用しています。

• 無償利用

  • 営利目的以外での個人利用、教育目的、非営利目的での使用は無償で利用可能です。

• 商用ライセンス

  • 商用目的での使用に関しては、別途商用ライセンスの取得が必要です。
  • 詳細は、ライセンスについてをご確認ください。

その他

• ロゴの利用規約
• VRMモデルの利用規約