Zenn
🎙️

チャット欄に答えて雑談配信する「AI VTuber」の作り方

2023/01/22に公開
8件
AI
#
vtuber
#
人工知能
mebo
ChatGPT
tech

概要

最近、AIがYouTubeの配信を行う、いわゆる「AI VTuber」という言葉を見かけるようになってきました。
今回は、そんなAI VTuberを作る方法について見ていきたいと思います。

(参考)最近話題のAI VTuber
https://togetter.com/li/2038624

過去の試み

この記事を執筆する前に、何度かAI VTuberの配信を試してみています。

  1. Live2Dを利用した雑談LIVE配信

https://youtu.be/T6p_1FVwVUE

  1. デジタルヒューマンを利用したLIVE配信

https://note.com/makunugi/n/n5a1a546fd341

AI VTuberの仕様

さて、今回作り方を解説するAI VTuberの仕様を整理します。
下記のような仕様のAI VTuberを作ってみましょう。

  1. YouTubeのLIVE配信ができること (1人のAI VTuber)
  2. LIVE中にチャット欄に寄せられるコメントに自動で応答ができること

仕様はこの２点のみです。ゲーム実況と連動したような機能はこの記事では想定せず、配信に訪れたユーザーと雑談メインの交流ができるようなAI VTuberを目指します。

作り方

まずは、静止画のAIキャラクターのイラストを用意して、YouTube LIVE上で配信を行うところまでを試していきましょう。Live2D連携に関しては別途記事を書こうと思います。

全体像

それでは、まずは全体構成を確認していきましょう。

本体

キャラクターを設置し会話を行わせる画面です。今回はローカル環境で動作するWebページを作成します。もちろんUnity等の開発環境を利用して構築することも可能ですが、一番手軽な方法ということで、今回はシンプルなWebページを作って試します。このWebページをキャプチャし、YouTubeに配信します。

OBS

OBSを利用すると、前述の本体のウィンドウをキャプチャし、YouTubeに配信することができます。
https://obsproject.com/ja/download

YouTube Data API

YouTubeの情報を取り扱うことができる公式のAPIです。YouTube LIVEのコメントを拾うのに利用します。
https://developers.google.com/youtube/v3/getting-started

VOICEVOX

AI VTuberの声(音声合成)は、VOICEVOXを利用します。
https://voicevox.hiroshiba.jp/

mebo(ミーボ)

AI VTuberの会話エンジンは「mebo(ミーボ)」を利用します。
https://mebo.work/

作成手順

下記の1~5の順で作業を進めていきましょう。

  1. meboで会話ができるAIキャラクターを作成する
  2. VOICEVOXを利用できるようにする
  3. YouTube Data APIのAPIキーを入手する
  4. 利用する画像を用意する
  5. 本体画面を用意する
  6. YouTube LIVE配信の設定
  7. OBSの設定を行う
  8. YouTube LIVE開始

1. meboで会話ができるAIキャラクターを作成する

まずはmeboを利用して会話ができるAIを作成しましょう。

下記からmeboにサインインしましょう。
https://mebo.work/

meboの「Chara.AI Generator」という機能を利用すると、スムーズにAIキャラクターを生成できます。
詳しくは下記の記事をご参照ください。
https://mebo.work/generator

meboは最近GPT-3.5も利用できるようになりました。費用もかかるので気軽な利用は難しいと思いますが、超高精度な会話をさせたい場合はぜひお試しください。作成方法は下記の記事をご参照ください。
https://zenn.dev/makunugi/articles/001ac46ff35718

ちなみに、冒頭で紹介したAI VTuberはGPT-3.5ではなく、meboがデフォルトで備えている「高精度雑談AI」を用いています。

meboでAIを生成できたら、「公開設定画面」で「限定公開」を行いましょう。
https://mebo-admin.work/admin/publish

限定公開を行うと、公開設定画面のページ下部にある「APIの有効化」が押せるようになります。APIを有効化し、APIキーとエージェントIDをコピーして控えましょう。(後ほど使います。)

2. VOICEVOXを利用できるようにする

声の読み上げはVOICEVOXを利用します。 下記からVOICEVOXをインストールし、起動してください。
https://voicevox.hiroshiba.jp/
VOICEVOXが起動されることで、ローカル環境にAPIが立ち上がります。
後述する「本体ページ」では、内部でローカルに立ち上がったVOICEVOXのAPIを利用するようになっています。

尚、VOICEVOXを利用してYouTube配信をする場合は、ライセンス表記が必要です。概要欄などできちんと明記をして利用しましょう。
https://voicevox.hiroshiba.jp/term/

3. YouTube Data APIのAPIキーを入手する

YouTubeライブ配信のコメントを取得するため、YouTube Data APIのAPIキーを利用します。 APIキーの取得方法は、下記のこちらが大変わかりやすくまとめられていました。

4. 利用する画像を用意する

以下の３つの画像を利用します。

  1. AI VTuberキャラクターの画像 -> chara.png
  2. AI VTuberキャラクターの画像(瞬きをしている瞬間) -> chara_blinking
  3. 背景画像 -> background.png

それぞれ、上記の名前で画像を保存しておいてください。
今回は静止画でライブを行うことを想定しているので、せめてもの動きをつけるため、まばたきようの画像を用意しています。

今回私は、個人開発アプリでも利用させていただいている、「ドロイドちゃん」というキャラクター(フリー素材)で試しました。ドロイドちゃんの素材はこちらで提供されています。
https://samugari.com/droid-chan/

まばたきが不要な場合は、同じ画像で２種類のファイル名に分けておいてください。

5. 本体画面を用意する

いよいよ、本体画面を用意していきましょう。本体画面のソースコードの雛形は下記に用意してあります。
https://github.com/k-masashi/sample-chat-ai-vtuber

こちらからソースコードをダウンロードしましょう。

「Download ZIP」でファイルをダウンロードできます。zipファイルをダウンロードしたら解凍しましょう。

index.htmlというファイルが、本体画面になります。ダブルクリックしてブラウザで起動してみましょう。

今は真っ白な画面になっていると思います。このフォルダに先程の３枚の画像を移動してください。

再度、index.htmlブラウザで読み込むと、キャラクターが表示されます。

これで画面の準備は完了です。次に、

  • 会話エンジン
  • YouTube Data API
    との接続を行っていきます。

フォルダ内のaivtuber.jsを開きましょう。下記の箇所をそれぞれ変更していきます。

meboのAPIキー・エージェントIDの設定

meboで取得したAPIキーおよびエージェントIDをダブルクォーテーション内に記述します。

const MEBO_API_KEY = "<meboのAPIキーを入力してください。>";
const MEBO_AGENT_ID = "<meboのAgent IDを入力してください。>";

YouTube Data APIのAPIキーの設定

先程取得したYouTube Data APIのAPIキーを下記に記述しましょう。

const YOUTUBE_DATA_API_KEY = '<YouTube Data APIのAPIキーを入力してください。>';

後１点、下記の箇所も変更が必要ですが、YouTube LIVE配信を設定してからでないとIDが取得できないので後回しにします。

const YOUTUBE_VIDEO_ID = '<YouTube Video IDを入力してください。>';

ここまで完了したら、試しにページ下部にあるテキスト入力欄からコメントを送信してみましょう。

AIの応答が表示され、応答が読み上げられたら成功です！

本番はLIVE開始を押してスタートです。ただし、LIVEにつなぐ場合に応答のテストが必要です。その際は、上記のように、ページ下部の入力欄を使って応答のテストをしましょう。LIVE開始を押すと、入力欄は非表示になります。

6. YouTube LIVE配信の設定

いよいよYouTube上でLIVE配信の設定をしていきましょう！
YouTube Studioにアクセスします。
https://studio.youtube.com/

右上の「ライブ配信を開始」をクリックします。

この項目がない場合は、ライブ配信が有効になっていない可能性があります。お手持ちのチャンネルでライブ配信ができるよう有効化しましょう。

有効化の手順(外部記事)
https://help.piascore.com/hc/ja/articles/360059733011-YouTube-ライブ配信を有効化する

ライブ配信の準備ができると、この待機画面が表示されます。

右上の共有ボタンから動画リンクを取得できます。

リンクをコピーして、動画の閲覧画面に飛びましょう。

動画ページに移動すると、リダイレクトして動画の個別URLがブラウザ上部に表示されます。
このURLのv=より後の文字列(v=は含めない)をコピーします。これがYouTubeのVideo IDです。

こちらをaivtuber.jsの下記の項目に記述します。

const YOUTUBE_VIDEO_ID = '<YouTube Video IDを入力してください。>';

これで、AI VTuberが配信のコメントを拾えるようになります。
また、待機画面にはストリームキーが表示されています。後でOBSに設定するので、控えておきましょう。

7. OBSの設定を行う

OBSを起動しましょう。OBSで行う設定は3つです。

a. ウィンドウキャプチャ
b. 音声出力設定
c. 配信設定

OBSの画面

a. ウィンドウキャプチャ

まずは、OBSのウィンドウキャプチャで本体画面のブラウザの画面をキャプチャします。

配信画面に収まるようにサイズを調整しましょう。

b. 音声出力設定

次に音声を出力するための設定です。

Windowsの場合

Windowsの場合は音声出力設定に「デスクトップ音声」を配信できる設定がOBSにデフォルトであります。そちらの機能を使えばすぐに配信ができます。ただし、その設定だと、PCから発せられる音声が全て配信されてしまいます。それが許容できない場合は、下記のような設定が必要になります。

(外部記事)
https://note.com/s_numaguchi/n/na10077fe41ba

Macの場合

MacはWindowsと違い、OBSにデフォルトでPCの音声を配信する仕組みが整っていません。
そこで、下記のような設定を行う必要があります。

(外部記事)
https://vook.vc/n/5076

c. 配信設定

YouTube Studioで取得したストリームキーをOBSに設定して準備は完了です。
OBSの右下にある「設定」を開き、配信設定でストリームキーを登録します。

設定が完了したら、OBS右下の「配信開始」を押しましょう。

しばらくするとYouTube Studioの配信画面に映像が送られてきます。映像が送られてきたのが確認できたらライブを開始しましょう！

注意事項

1. AIの発言に注意する

AIは何を発言するかわかりません。mebo内で利用が可能な「高精度雑談AI」や「GPT-3.5」は積極的に過激な発言をしたりすることはほとんどありません。しかし、ユーザーがそういった内容をコメントで誘導をしてしまうと、YouTubeの規約に接触するような、発言をしてしまう可能性もゼロではありません。

対策としては下記の２点があります。

A. mebo内でAIの応答にNGワードを設定する

meboのエージェント設定画面で、AIの応答にNGワードを設定できます。NGワードを登録しておき、そういったワードの含まれる発言がAIによって応答されないようにします。

B. YouTube LIVEの設定でNGワードを設定する

YouTubeのチャットやコメントにもNGワードを設定できます。
下記の記事が大変参考になりました。

(外部記事)
https://www.iscle.com/web-it/g-drive/youtube/yt-ng-word.html

2. 視聴者が集まらないとなかなか盛り上がらない・・・

AIが1人でコメントを拾い続けるだけだと、視聴者がいない場合、沈黙の時間が続いてしまい、なかなかコンテンツとして盛り上がりません。AIを2人にして掛け合いをさせたり、ゲーム実況としての要素を盛り込むなど、まだこの領域で何が盛り上がるのかは手探りな状況だと思います。この記事のサンプルをきっかけに、何か面白いアイデアが生まれたら嬉しいです。

3. YouTube Data APIの利用上限に注意する

コメントを拾うために利用するYouTube Data APIですが、1日あたりの利用上限があります。上限を超えるとコメントが取得できなくなります。上限は余程の回数使わない限り超えないと思いますが、上限引き上げの交渉もできるようなので、気になる方はご留意ください。

(参考記事)
https://masaki-blog.net/youtube-data-api-quotas

また、aivtuber.js内の下記のインターバル時間を調整すると、コメントを取得しにいくタイミングを調整できます。

// コメントの取得インターバル (ms)
const INTERVAL_MILL_SECONDS_RETRIEVING_COMMENTS = 10000;
// QUEUEに積まれたコメントを捌くインターバル (ms)
const INTERVAL_MILL_SECONDS_HANDLING_COMMENTS = 3000;

コメント取得のインターバルを長くすれば、それだけAPIの利用回数は少なくなります。

まとめ

AIが雑談配信をするAI VTuberの作り方についてまとめてみました。
AIを絡めたYouTubeコンテンツはこれから少しずつ増えていくと思います。本記事の内容を、新しいコンテンツを作るにあたっての良い材料にしていただけると幸いです。

尚、今回は静止画のキャラクターによる配信でしたが、Live２Dによる実装も今後紹介していく予定です。改めて記事を書きますので、ぜひこのアカウントもしくは下記Twitterをフォローの上お待ちください！

最後までお読みいただきありがとうございました！この記事についての質問やご意見は下記のTwitterまでお気軽にお寄せください！

https://twitter.com/makunugi

Discussion

サクノフサクノフ

手順5.の「本体画面を用意するまで」の所でファイルにドロイドちゃんの絵を指定されたファイル名に変えてフォルダ内に入れても真っ白のままになります、Googleクロームも最新Verです。

dennoucoil4423dennoucoil4423

meboまでコメントはいくんだけれども、返信が返ってこない。meboサイト内では返答されている状況。
あとVoiceVoxでの読み上げができなかった。

Live２D版待ってます！

giogiogiogio

まったく同じところでとん挫しました、、これめちゃすごいです、、

好青年好青年

なんとか実装することができました！とてもわかりやすく、ワクワクする内容でした！

▼アウトプット
https://twitter.com/kouseinen_real/status/1628598636652421120

いくつか、途中の壁の解決方法を記します。ご参考になれればと思います。
いずれも、僕は開発環境での設定に原因がありました。
その際の解決方法を掲載した記事を↓こちらに引用いたします。

■meboからの応答が画面に表示されない
https://qiita.com/kai_kou/items/54b61a274b77977add54

■音声読み上げがされない
https://note.com/natukichan/n/n016bcd171da0

maKunugimaKunugi

詳細にまとめていただいてありがとうございます！！
本記事でそこまで考慮できておらず、大変お手間をおかけしましたｍ

tonicyumetonicyume

躓いてしまったので質問させてください。
「作り方」→「本体画面を用意する」→「フォルダ内のaivtuber.jsを開きましょう。」のところでaivtuber.jsをクリックしても画像のエラーが表示されて開けません。
どうしたらいいでしょうか？よろしくお願いいたします。

arcdaarcda

これすごいです。
こんなに簡単に作れるのは感激です。
もしかしてニコ生や他の配信サイトでもできるのではないでしょうか？