/aituber-kit

AITuberKit is chat application with AI character.

Primary LanguageTypeScriptOtherNOASSERTION

AITuberKit

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

GitHub Last Commit GitHub Top Language GitHub Tag License: Custom

GitHub stars GitHub forks GitHub contributors GitHub issues

X (Twitter) Discord GitHub Sponsor

English｜ 中文｜ 韓語

概要

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

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

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

今日からあなたもAITuberデベロッパー｜ニケちゃん

開発環境

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

  • Node.js: ^20.0.0
  • npm: 10.8.1

共通事前準備

  1. リポジトリをローカルにクローンします。
git clone https://github.com/tegnike/aituber-kit.git
  1. フォルダを開きます。
cd aituber-kit
  1. パッケージインストールします。
npm install
  1. 開発モードでアプリケーションを起動します。
npm run dev
  1. 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キーの入力が必要です。
  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. 入力フォームからリクエストを送信し、サーバーアプリからのリクエストが返却されるのを確認します。

関連

スライドモード

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

使用方法

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

関連

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キットの開発と改善に大きく貢献します。

GitHub Sponsor

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

morioki3 hodachi-axcxept coderabbitai ai-bootcamp-tokyo wmoto-ai JunzoKamahara darkgaldragon usagi917 ochisamu mo0013 tsubouchi bunkaich seiki-aliveland rossy8417 gijigae takm-reason haoling FoundD-oka terisuke konpeita

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

利用規約

ライセンス

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

  • 無償利用

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

  • 商用ライセンス

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

その他

コントリビューター用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 ディレクトリに追加してください。