お知らせ: 本プロジェクトはバージョン v2.0.0 以降、カスタムライセンスを採用しています。商用目的でご利用の場合は、利用規約 セクションをご確認ください。
主に以下の2つの機能があります。
- AIキャラとの対話
- AITuber配信
下記の記事に詳細な使用方法を記載しました。
このプロジェクトは以下の環境で開発されています:
- Node.js: ^20.0.0
- npm: 10.8.1
- リポジトリをローカルにクローンします。
git clone https://github.com/tegnike/aituber-kit.git
- フォルダを開きます。
cd aituber-kit
- パッケージインストールします。
npm install
- 開発モードでアプリケーションを起動します。
npm run dev
- URLを開きます。http://localhost:3000
- AIキャラと会話する機能です。
- このリポジトリの元になっている pixiv/ChatVRM を拡張した機能です。
- 各種LLMのAPIキーさえあれば簡単に始めることが可能です。
- 直近の会話文を記憶として保持します。
- マルチモーダルで、カメラからの映像やアップロードした画像を認識して回答を生成することが可能です。
- 設定画面で各種LLMのAPIキーを入力します。
- OpenAI
- Anthropic
- Google Gemini
- Azure OpenAI
- Groq
- Cohere
- Mistral AI
- Perplexity
- Fireworks
- ローカルLLM
- Dify(Chatbot or Agent)
- 必要に応じてキャラクターの設定プロンプトを編集します。
- 必要に応じてキャラクターのVRMファイルおよび背景ファイルをアップロードします。
- 音声合成エンジンを選択し、必要に応じて声の設定を行います。
- VOICEVOX: 複数の選択肢から話者を選ぶことができます。予めVOICEVOXアプリを起動しておく必要があります。
- Koeiromap: 細かく音声を調整することが可能です。APIキーの入力が必要です。
- Google TTS: 日本語以外の言語も選択可能です。credential情報が必要です。
- Style-Bert-VITS2: ローカルAPIサーバーを起動しておく必要があります。
- GSVI TTS: ローカルAPIサーバーを起動しておく必要があります。
- ElevenLabs: 様々な言語の選択が可能です。APIキーの入力が必要です。
- OpenAI: APIキーの入力が必要です。
- Azure OpenAI: APIキーの入力が必要です。
- 入力フォームからキャラクターと会話を開始します。マイク入力も可能です。
- Youtubeの配信コメントを取得して発言することが可能です。
- Youtube APIキーが必要です。
- 「#」から始まるコメントは読まれません。
- 設定画面でYoutubeモードをONにします。
- Youtube APIキーとYoutube Live IDを入力します。
- 他の設定は「AIキャラとの対話」と同様に行います。
- Youtubeの配信を開始し、キャラクターがコメントに反応するのを確認します。
- 会話継続モードをONにすると、コメントが無いときにAIが自ら発言することができます。
- WebSocketでサーバーアプリにリクエストを送信して、レスポンスを取得することができます。
- 別途サーバーアプリを用意する必要があります。
- サーバーアプリを起動し、
ws://127.0.0.1:8000/ws
エンドポイントを開きます。 - 設定画面でWebSocketモードをONにします。
- 他の設定は「AIキャラとの対話」と同様に行います。
- 入力フォームからリクエストを送信し、サーバーアプリからのリクエストが返却されるのを確認します。
- こちらのサーバーアプリのリポジトリですぐに試すことが可能です。tegnike/aituber-server
- 詳しい設定は「美少女と一緒に開発しようぜ!!【Open Interpreter】」をお読みください。
- スライドをAIキャラが自動で発表するモードです。
- 予めスライドと台本ファイルを用意しておく必要があります。
- AIキャラと対話できるところまで進めておきます。
- スライドフォルダと台本ファイルを指定のフォルダに配置します。
- 設定画面でスライドモードをONにします。
- スライド開始ボタンを押して発表を開始します。
- 詳しい設定は「スライド発表はAIがやる時代!!!!」をお読みください。
- OpenAIのRealtime APIを使用して、低遅延でキャラと対話できるモードです。
- 関数実行を定義することができます。
- AIサービスでOpenAIまたはAzure OpenAIを選択します。
- Realtime APIモードをONにします。
- マイクを使用して話しかけます。
- src/components/realtimeAPITools.tsx, src/components/realtimeAPITools.json に新しい関数を定義します。
- 既存の get_current_weather 関数を参考にしてください。
- VRMモデルは
public/AvatarSample_B.vrm
のデータを変更してください。名称は変更しないでください。 - 背景画像は
public/bg-c.png
の画像を変更してください。名称は変更しないでください。
- 一部の設定値は
.env
ファイルの内容を参照することができます。 - 設定画面で入力した場合は、環境変数で指定された値よりも優先されます。
- Alt (or option) キーを押している間入力受付 => 離したら送信
- マイクボタンをクリック(一度押したら入力受付)=> もう一度クリックで送信
- 設定情報・会話履歴は設定画面でリセットすることができます。
- 各種設定項目はブラウザにローカルストレージとして保存されます。
- コードブロックで囲まれた要素はTTSで読まれません。
- 今日からあなたもAITuberデベロッパー|ニケちゃん
- 美少女と一緒に開発しようぜ!!【Open Interpreter】
- スライド発表はAIがやる時代!!!!
- AITuberKitにマルチモーダル機能を追加したのでAIキャラと宅飲みしてみる
- AITuberKit × Dify で超簡単チャットボット構築
- DifyをXserverでインターネットに公開する
- 高度な音声モード こと Realtime API を試してみる
開発を継続するためにスポンサーの方を募集しています。
あなたの支援は、AITuberキットの開発と改善に大きく貢献します。
他、プライベートスポンサー 複数名
本プロジェクトは、バージョン v2.0.0 以降、カスタムライセンスを採用しています。
-
無償利用
- 営利目的以外での個人利用、教育目的、非営利目的での使用は無償で利用可能です。
-
商用ライセンス
- 商用目的での使用に関しては、別途商用ライセンスの取得が必要です。
- 詳細は、ライセンスについてをご確認ください。
新しい言語をプロジェクトに追加するには、以下の手順に従ってください。
-
言語ファイルの追加:
locales
ディレクトリに新しい言語のディレクトリを作成し、その中にtranslation.json
ファイルを作成します。- 例:
locales/fr/translation.json
(フランス語の場合)
-
翻訳の追加:
translation.json
ファイルに、既存の言語ファイルを参考にして翻訳を追加します。
-
言語設定の更新:
src/lib/i18n.js
ファイルを開き、resources
オブジェクトに新しい言語を追加します。
resources: { ..., fr: { // 新しい言語コード translation: require("../../locales/fr/translation.json"), }, },
-
言語選択オプションの追加:
- ユーザーが言語を選択できるように、UIの適切な部分(例えば設定画面の言語選択ドロップダウン)に新しい言語オプションを追加します。
<select> ..., <option value="FR">フランス語 - French</option> </select>
-
テスト:
- 新しい言語でアプリケーションが正しく表示されるかテストします。
これで新しい言語のサポートがプロジェクトに追加されます。
- 音声言語コードの対応も追加する必要があります。
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
ディレクトリに追加してください。