PCいらずのAITuber実践ガイド:GitHub Codespaces × AItuber-kit で始めるAITuber環境構築

以前からAITuberAIVTuber?のようなものを作成したいなと思っていたました。(違いがよくわからないので以降AITuber

自分の想像していたAITuberの定義はこんな感じ

  • チャットやマイクのインターフェースを使用してLLMによって応答を生成しコミュニケーションできる
  • 画面上にCGキャラクターが表示されている
  • LLMによって生成されたテキストを 音声出力してくれる

従来のAITuberのようなシステムはGPU搭載の高性能PCでの実行が一般的で、機材の準備や持ち運びに大きな負担があります😫

ただ、以前の調査でGitHub Codespacesで軽量なLLMであれば動作することがわかりました。

参考

uepon.hatenadiary.com

更に調べてみるとaituber-kitというプロダクトがあり、これにより3Dモデル(VRM形式、Live2D形式)を表示し、テキストインターフェース、マイク入力のインターフェースがあるだけでなく、LLMとの接続(一般的なAPIOllamaのどちらも使用可能)、Voicevoxなど各種TTSシステムとの接続にも対応していることがわかりました。

参考リンクについて

参考 note.com

github.com

こちらの記事も参考にしております

qiita.com

そこで今回はクラウド上の環境であるGitHub CodespacesAITuberを動作させようという試みになります。

AITuberの環境設定

以下のような手順で環境整備を行います。

  1. GitHub Codespacesでサーバ起動
  2. aituber-kitのインストールと初回起動
  3. Dockerを用いたvoicevox_engineの起動
  4. Ollamaの導入とモデルのインストール
  5. 各システムとaituber-kitとの接続

1. GitHub Codespacesのサーバ起動

まずは、GitHubにログインし、新規にリポジトリを作成します。 そのままGitHub Codespaces(以下Codesapces)のサーバを起動します。

環境設定や必要なファイルの取得は起動後のCodespaces上のサーバで作業するので、特になにもしなくて大丈夫です。

リポジトリを作成したら、Codespaces(サーバ環境)を作成します。

【Create a codespace】ボタンをクリックし、

【Create new codespace】ボタンをクリックし、

すると、このリポジトリに紐づいたCodespacesのサーバが立ち上がります。

このコンソールを使用して動作環境設定を行います。

2. aituber-kitの導入と設定

前述のaituber-kitニケちゃんさんの作成されたものであり、ドキュメントもしっかりしているので詳細はそちらを確認していただいたほうが良いと思います。

再掲

note.com

github.com

まず、先ほど作成し起動したCodesapcesaituber-kitをクローンします。

$ git clone https://github.com/tegnike/aituber-kit.git

クローンしたフォルダに移動し

$ cd aituber-kit

必要となるパッケージをインストールしていきます。

$ npm install

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

$ npm run dev

コマンド起動後に画面下部にブラウザを開くかを尋ねられます。【OK】ボタンをクリックすると新規にブラウザでタブが開きます。このタブではCodespacesのサーバでのport:3000相当でのアクセス画面が表示されます。(ポートに割り当てられたURLが自動的に発行されます)

初回ブラウザにアプリの説明が表示されますが、【閉じる】ボタンを押すと!

ブラウザにはAItuberの姿が!これだけでもかなり感動できます🤩🤩🤩

3. Ollamaの導入とモデルのインストール

Codespacesの実行環境のメモリはかなり小さく8Gibなので、あまり大きなLLMを使用することはできません。今回は日本語が使用できるある程度小さなモデルであるschroneko/gemma-2-2b-jpn-itを使用させていただくことにしました。こちらはgemma-2-2bモデルをベースとした日本語対応モデルになります。

参考

ollama.com

Codesapcesで新規にターミナルを開き、

以下のコマンドを実行していきます。

# Ollamaのインストール
$ curl -fsSL https://ollama.com/install.sh | sh
# ollamaの実行
$ ollama serve
# 新規にターミナルを開いて、schroneko/gemma-2-2b-jpn-itの実行(初回時はモデルのダウンロードも行います)
$ ollama run schroneko/gemma-2-2b-jpn-it
# プロンプト入力を試す
# /exitで終了

以下はollama runコマンドを実行して、LLMを使ってチャットのテストを行っています。

これで準備完了です。

一度、ollama runコマンドでLLMのダウンロードが終わっていれば、2回目以降の起動は以下のコマンドのみで大丈夫です。

$ ollama serve

4. Dockerを用いたvoicevox_engineの起動

LLMで生成された返答を音声化するため、今回は音声合成システムのVoicevoxを使用します。

voicevox.hiroshiba.jp

Voicevoxは多目的な機能のあるアプリですが、今回はREST APIで動作する機能のみを使用するので、プロダクトに含まれているvoicevox_engineという音声合成のエンジン部分のみを使用します。

参考

github.com

また、voicevox_engineDockerで動作させることができ、Codesapcesの実行環境にもDockerが入っています。そこで今回はDocker経由でvoicevox_engineを実行します。先ほどのOllamaとvoicevox_engineのDockerを合わせてギリギリメモリに収まってくれます。

Dockerもデフォルトでインストールされているのが嬉しい。

新しくCodesapcesで新規にターミナルを開き、

以下を実行することでvoicevox_engineを実行することが出来ます。

$ docker run --rm -p '127.0.0.1:50021:50021' voicevox/voicevox_engine:cpu-latest

※ポート番号は50021を使用し、終了後にコンテナを削除するので--rmをオプションをつけています。

5. 各システムとaituber-kitとの接続

今回使用するパーツの設定が整ったので、あとはaituber-kitで接続するための処理を行っていくだけとなります。

5.1 LLMOllama)との接続

まずはaituber-kitのチャット文面をOllama上のLLMに送信して生成する設定をします。

画面左上にある【⚙】アイコンをクリックします。

設定画面が開くので以下のように設定を行います。

  1. 左側のメニューから【AI設定】をクリック
  2. 【AIサービスの選択】でローカルLLMを選択
  3. 【URLを入力】では画面内にあるOllamaのURL:http://localhost:11434/v1/chat/completionsを入力
  4. 【モデルを選択】では先程ダウンロードしたschroneko/gemma-2-2b-jpn-itを入力

これでaituber-kitからLLMOllama)を呼び出す設定が完了しました。

保存ボタンはありませんが、自動的に設定は保存されます。【❌️】ボタンで設定画面を閉じることが出来ます。

5.2 voicevox_engineとの接続

続いてはOllama上のLLMが生成した文面をvoicevox_engineに送信し、音声合成で読み上げる設定を行います。

画面左上にある【⚙】アイコンをクリックします。

設定画面が開くので以下のように設定を行います。

  1. 左側のメニューから【音声設定】をクリック
  2. 【合成音声エンジンの選択】でVOICEBOXを使用するを選択
  3. 【VOICEBOXサーバーURL】ではhttp://0.0.0.0:50021を入力
  4. ボイスタイプ選択】ではずんだもん/普通を選択

これでaituber-kitでの音声合成を使用した読み上げ設定が完了しました。 設定を確認するには設定後に【ボイスを視聴する】ボタンをクリックしてください。

保存ボタンはありませんが、自動的に設定は保存されます。【❌️】ボタンで設定画面を閉じることが出来ます。

AITuberを試す

ここまでできたら後は実際に試してみるだけです。画面下部にテキストを入力することで、LLMとのやり取りがテキスト・音声の両方で出力されます。また、AITuberにはマイクでの音声入力ができるようになっているのでぜひそれも試してください。

初回のやり取りではモデルをメモリにロードするなどの処理がありかなり遅い反応ですが、2回目以降はちょっと遅いなというレベルになります。また、商用サービスなどを使用するとかなり高速なやり取りも可能になります。私はClaude3.5も使用しましたがさすがにやり取りは快適でした。LLMの生成部分がレイテンシーの大部分といえるのかもしれません。

youtu.be

今回のこのシステムはGitHubCodespacesの無料枠を使用しているので稼働時間に制限があります。 使用可能時間がもったいないので、使用しないときには意識してサーバーを停止するようにしてください。サーバーは停止しても状態が保持されますが、費用頻度が下がると自動的に削除されます。

サーバーの停止方法

また、一定時間経つとサーバーとの接続が切断されます、その点はご注意ください。

接続時間の変更設定の参考

uepon.hatenadiary.com

おわりに

今回はGitHub Codesspacesを活用して、手軽にAITuber環境を構築する方法を紹介しました。従来のAITuber開発では高性能なPCが必要とされていましたが、このアプローチを使えば、ブラウザさえあれば誰でも気軽にAITuber開発に挑戦できます。

特筆すべきは、この環境がメモリ8Gibという限られたリソースでも動作する点です。軽量なLLMVOICEVOXを組み合わせることで、実用的なAITuberシステムを実現できました。

もちろん、商用サービスのLLMを使用すればより高速な応答も可能です。この記事が、AITuber開発に興味を持つ方々の入り口となり、多くの人がAIエージェント開発にチャレンジするきっかけになれば幸いです。今後も手軽にAIエージェントを開発・活用できる方法を探っていきたいと思います。

/* -----codeの行番号----- */