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

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. 入力フォームからキャラクターと会話を開始します。マイク入力も可能。

• 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】」を読んでください。

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

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

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

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

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

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

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

• ライセンスは 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_fr.md), ロゴ利用規約 (logo_licence_fr.md), VRMモデル利用規約 (vrm_licence_fr.md) を docs ディレクトリに追加してください。