tegnike / aituber-kit

AITuber Kit

English｜ 中文｜ 韓語

概要

以下の3つの機能があります。

1. AIキャラとの対話
2. AITuber配信
3. 外部連携モード

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

共通事前準備

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

npm install

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

npm run dev

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

AIキャラとの対話

• AIキャラと会話する機能です。
• このリポジトリの元になっているpixiv/ChatVRMの機能です。
• 各種LLMのAPIキーさえあれば比較的簡単に試すことが可能です。
• 直近の10会話文を記憶として保持します記憶として保持します。（数字は指定できるように更新予定）

使用方法

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

AITuber配信

• Youtubeの配信コメントを取得して発言することが可能です。
• Youtube APIキーが必要です。
• 「#」から始まるコメントは読まれません。（文字列は指定できるように更新予定）

使用方法

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

外部連携モード

• WebSocketでサーバーアプリにメッセージを送信して、レスポンスを取得することができます。
• 上記2つと異なり、フロントアプリで完結しないため少し難易度が高いです。

使用方法

1. サーバーアプリを起動し、ws://127.0.0.1:8000/ws エンドポイントを開きます。
2. 設定画面でWebSocketモードをONにします。
3. 他の設定は「AIキャラとの対話」と同様に行います。
4. サーバーアプリからのメッセージを待ち、キャラクターが反応するのを確認します。

関連

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

TIPS

VRMモデル、背景固定方法

• VRMモデルは public/AvatarSample_B.vrm のデータを変更してください。名称は変更しないでください。
• 背景画像は public/bg-c.jpg の画像を変更してください。名称は変更しないでください。

環境変数の設定

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

その他

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

スポンサー募集

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

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

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

利用規約

• ライセンスは pixiv/ChatVRM に準拠し、MITライセンスとしています。
• ロゴの利用規約
• VRMモデルの利用規約

新しい言語の追加方法

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

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 ディレクトリに追加してください。