主に以下の2つの機能があります。
- AIキャラとの対話
- AITuber配信
下記の記事に詳細な使用方法を記載しました。
- リポジトリをローカルにクローンします。
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
- Groq
- ローカルLLM（APIキーは不要ですが、ローカルAPIサーバーを起動しておく必要があります。）
- Dify Chatbot（APIキーは不要ですが、ローカルAPIサーバーを起動しておく必要があります。）
- 必要に応じてキャラクターの設定プロンプトを編集します。
- 用意がある場合は、VRMファイルおよび背景ファイルをアップロードします。
- 音声合成エンジンを選択し、必要に応じて声の設定を行います。
- VOICEVOXの場合は複数の選択肢から話者を選ぶことができます。予めVOICEVOXアプリを起動しておく必要があります。
- Koeiromapの場合は、細かく音声を調整することが可能です。APIキーの入力が必要です。
- Google TTSの場合は日本語以外の言語も選択可能です。credential情報が必要です。
- Style-Bert-VITS2は、ローカルAPIサーバーを起動しておく必要があります。
- GSVI TTSは、ローカルAPIサーバーを起動しておく必要があります。
- ElevenLabsは様々な言語の選択が可能です。APIキーを入力してください。
- 入力フォームからキャラクターと会話を開始します。マイク入力も可能。
- Youtubeの配信コメントを取得して発言することが可能です。
- Youtube APIキーが必要です。
- 「#」から始まるコメントは読まれません。
- 設定画面でYoutubeモードをONにします。
- Youtube APIキーとYoutube Live IDを入力します。
- 他の設定は「AIキャラとの対話」と同様に行います。
- Youtubeの配信を開始し、キャラクターがコメントに反応するのを確認します。
- 会話継続モードをONにすると、コメントが無いときにAIが自ら発言することができます。
- WebSocketでサーバーアプリにメッセージを送信して、レスポンスを取得することができます。
- 上記2つと異なり、フロントアプリで完結しないため少し難易度が高いです。
- ⚠ 現在メンテナンスしきれていないため、動かない可能性があります。
- サーバーアプリを起動し、
ws://127.0.0.1:8000/wsエンドポイントを開きます。 - 設定画面でWebSocketモードをONにします。
- 他の設定は「AIキャラとの対話」と同様に行います。
- サーバーアプリからのメッセージを待ち、キャラクターが反応するのを確認します。
- 私が作成したサーバーアプリのリポジトリで試すことが可能です。tegnike/aituber-server
- 詳しい設定は「美少女と一緒に開発しようぜ！！【Open Interpreter】」を読んでください。
- スライドをAIキャラが自動で発表するモードです。
- 予めスライドと台本ファイルを用意しておく必要があります。
- 予めAIキャラと対話できるところまで進めておきます。
- スライドフォルダと台本ファイルを指定のフォルダに配置します。
- 設定画面でスライドモードをONにします。
- スライド開始ボタンを押して発表を開始します。
- VRMモデルは
public/AvatarSample_B.vrmのデータを変更してください。名称は変更しないでください。 - 背景画像は
public/bg-c.jpgの画像を変更してください。名称は変更しないでください。
- 一部の設定値は
.envファイルの内容を参照することができます。 - 設定画面で入力した場合は、その値が優先されます。
- 会話履歴は設定画面でリセットすることができます。
- 各種設定項目はブラウザに保存されます。
- コードブロックで囲まれた要素はTTSで読まれません。
開発を継続するためにスポンサーの方を募集しています。
あなたの支援は、AITuberキットの開発と改善に大きく貢献します。
他、プライベートスポンサー 複数名
- ライセンスは pixiv/ChatVRM に準拠し、MITライセンスとしています。
- ロゴの利用規約
- VRMモデルの利用規約
新しい言語をプロジェクトに追加するには、以下の手順に従ってください。
-
言語ファイルの追加:
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ディレクトリに追加してください。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent