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

English｜ 中文｜ 韓語

概要

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

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

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

開発環境

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

• 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サーバーを起動しておく必要があります。
   • GSVI TTS: ローカルAPIサーバーを起動しておく必要があります。
   • ElevenLabs: 様々な言語の選択が可能です。APIキーの入力が必要です。
   • OpenAI: APIキーの入力が必要です。
   • Azure OpenAI: 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. 設定画面でWebSocketモードを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

VRMモデル、背景固定方法

• VRMモデルは public/AvatarSample_B.vrm のデータを変更してください。名称は変更しないでください。
• 背景画像は 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モデルの利用規約

コントリビューター用TIPS

新しい言語の追加方法

新しい言語をプロジェクトに追加するには、以下の手順に従ってください。

1. 言語ファイルの追加:

   • locales ディレクトリに新しい言語のディレクトリを作成し、その中に translation.json ファイルを作成します。
   • 例: locales/fr/translation.json (フランス語の場合)

2. 翻訳の追加:

   • translation.json ファイルに、既存の言語ファイルを参考にして翻訳を追加します。

3. 言語設定の更新:

   • src/lib/i18n.js ファイルを開き、resources オブジェクトに新しい言語を追加します。

   resources: {
     ...,
     fr: {  // 新しい言語コード
       translation: require("../../locales/fr/translation.json"),
     },
   },

4. 言語選択オプションの追加:

   • ユーザーが言語を選択できるように、UIの適切な部分（例えば設定画面の言語選択ドロップダウン）に新しい言語オプションを追加します。

   <select>
     ...,
     <option value="FR">フランス語 - French</option>
   </select>

5. テスト:

   • 新しい言語でアプリケーションが正しく表示されるかテストします。

これで新しい言語のサポートがプロジェクトに追加されます。

音声言語コードの追加

• 音声言語コードの対応も追加する必要があります。
• Introduction コンポーネント内の getVoiceLanguageCode 関数に新しい言語コードを追加します。

const getVoiceLanguageCode = (selectLanguage: string) => {
  switch (selectLanguage) {
    case 'JP':
      return 'ja-JP';
    case 'EN':
      return 'en-US';
    case 'ZH':
      return 'zh-TW';
    case 'zh-TW':
      return 'zh-TW';
    case 'KO':
      return 'ko-KR';
    case 'FR':
      return 'fr-FR';
    default:
      return 'ja-JP';
  }
}

READMEの追加

• 新しい言語のREADME (README_fr.md), ロゴ利用規約 (logo_licence_fr.md), VRMモデル利用規約 (vrm_licence_fr.md) を docs ディレクトリに追加してください。