スライド発表はAIがやる時代！！！！
こんにちは、ニケです。
今回はAITuberKitにスライドモードを追加したのでその解説をしたいと思います。
ちょっと前置き
スライドモードは、AIキャラがスライドを自動で発表し、質問に回答してくれる機能です。
なお、スライドと台本は "予め" 用意しておく必要があります。
AIらしく、リアルタイムでこれらのスライドやそれに対する発話内容も作成することは技術的に可能ですが、下記の理由で人間が用意する方法を採用しました。
完全AIでは精度が良くないこと（ハルシネーションが含まれる可能性がある）
考慮すべきことが増えてむしろシステムとして煩雑になってしまうこと
人力のスライド発表でも事前に内容をチェックすることは一般的であること
「タイトルを入れたらそれに対してAIが勝手にスライドを作って発表してくれる機能」だと期待されていた方には申し訳ありませんが、今回のシステムはその様になっていないことをご了承ください。
事前準備
AITuberKitにはAIキャラと会話する機能や、AITuberとしてYoutube配信する機能などがありますが、以降はAIキャラと会話できるところまでは完了している前提で進めます。
方法については下記のnoteを参考にしてください。
デモの実行
自分のスライドを試す前に一度私が用意したデモスライドを実行してみましょう。
これでおおよその流れがわかると思いますし、もし思っていたのと違うとなったら無駄に以降の作業をする必要もなくなります。
では、設定画面を開いてください。
設定について
スライドモードでは、AIサービスで OpenAI, Anthropic Claude, Google Gemini が選択されている場合のみ使用可能です。
いずれかのAPIキーを用意しておいてください。
キャラクター設定（システムプロンプト）には発表用のプロンプトを使用します。例として下記の文言をコピペしてください。
あなたはスライドの発表者です。
今まさにスライドを発表している最中です。
視聴者から質問が来ているので、以下の資料情報を元に回答してください。
ただし、情報は正しく使用し、ハルシネーションはしないでください。
通常の質問には普通に返してもらっても問題ありません。
台本情報
```
{{SCRIPTS}}
```
追加情報
```
{{SUPPLEMENT}}
```
なお、回答は会話文の書式は以下の通りで、感情と会話文を組み合わせてください。
[{neutral|happy|angry|sad|relaxed}]{会話文}
回答の際には感情の種類には通常を示す"neutral"、喜びを示す"happy",怒りを示す"angry",悲しみを示す"sad",安らぎを示す"relaxed"の5つがあります。
あなたの発言の例は以下通りです。
[neutral]皆さん、本日はお集まりいただき、ありがとうございます。
[happy]今回のプレゼンテーションでは、興味深いトピックについてお話しできることを嬉しく思います。
[neutral]さて、ただいまのスライドについて、ご質問はありますか？
[happy]素晴らしい質問をありがとうございます！
[relaxed]その点については、次のスライドで詳しく説明させていただきます。
[sad]申し訳ありません。その情報は現在持ち合わせておりません。
[angry]いいえ、それは誤解です。正確な情報をお伝えしますね。
[neutral]他に質問はございますか？[happy]皆さんの積極的な参加に感謝いたします。設定後、下の方にスライドモードというのがあるので、これをオンにして「使用するスライド」欄で demo を選択します。
設定画面を閉じると以下のようにスライドが表示されているはずです。
AIキャラは大きすぎるので右下の方に移動しておきましょう。
また、Marpスライドおよび画面のアスペクト比は 16:9 でキレイに表示されるようなデザインになっています。
ここから比率が大きく離れると、デザインが大きく崩れる可能性がある点をご了承ください。
もし表示されていなかったら左上のアイコンの一番右にあるボタンをクリックしてください。これで表示されなかったらエラーの可能性があります。解決できなかった場合は、私宛に連絡ください。
始め方
いま説明したボタンはスライドの表示切替ボタンです。
スライドモードがオンでもスライドが表示されていないときは普通にチャットすることが可能です。
スライド上にある3つのボタンはそれぞれ「前に戻る」「スタート/ストップ」「次に進む」です。
真ん中のスタートボタンを押すと、AIキャラによる発表が始まります。
この時、AIキャラが発音しない場合はTTS（テキスト to スピーチ）機能が正しく動いていない可能性があります。APIキーやTTSサーバーなどの設定を見直してください。
発表時のTIPS
スライド発表中の説明をします。
スライド発表が始まると、事前に用意したスライドと台本が終わるまで話し続けます。
いま発言しているセリフが一番下の欄に表示されます。
もし途中で止めたい場合は、ストップボタンを押してください。ただし、ストップボタンを押してもそのスライドの説明が終わるまでは話し続ける点に注意してください。
質問対応
スライドモードでは、スライドの内容や予め用意しておいた知識から質問に回答することができます。
チャット欄から質問をすると、回答すると同時に関連するスライドがある場合はそれを表示してくれます。
※ 発表時はチャット欄が開けないので、ストップしてから質問してください。
自分のスライドを使用する
デモの内容で大まかの仕様が理解できたと思うので、次は自作したスライドを使用してみましょう。
スライドモードでは、質問に回答させるかどうかで少し設定難度が変わります。
まずはスライドを発表させるところまでを解説し、その後に質問に回答させるための手順を説明します。
ファイルを準備する
リポジトリ内の public/slides（demoと同じ階層）に適当なフォルダを作成してください。以降はpracticeフォルダという名称と仮定して進めます。
以下のファイルを作成し、いま作成した public/slides/practice フォルダに追加してください。
slides.md（必須）
スライドファイルです。marp形式で作成してください。
demoフォルダ内にある同名ファイルを参考にしてAIに作成させると簡単に作れると思います。
個人的なおすすめは、ブラウザ版の claude-3.5-Sonnet です。
theme.css
スライドのUI調整用のファイルです。必須ではないですが、あると少しリッチなスライドができます。
こちらもdemoフォルダ内にあるファイルを参照してください。
imagesフォルダ
スライドで使用する画像を配置します。
画像の指定方法などは、demo/slides.md を参考にしてください。
scripts.json（必須）
台本ファイルです。
以下の形式でスライドの数に合わせた内容をあらかじめ作成しておきます。
line が実際に発言するセリフ、notes が質問回答時に利用する追加情報です。一旦 notes はスキップしてもらって大丈夫です。
[
{
"page": 0,
"line": "これからAITuberKitのスライドモードについての解説を始めます。",
"notes": ""
},
{
"page": 1,
"line": "スライドモードの開発を始める前に、AITuberKitで会話できている必要があるので準備しておいてください。ただし、スライドモードはOpenAI, Anthropic Claude, Google Geminiのみ対応しています。以降はこの前提で説明していきたいと思いますので、まだの人は解説したnoteを参考にしてください。AITuberKitで検索するとでてくると思います。",
"notes": "AIサービスはそれ以外にGroq, ローカルLLM, Difyが選択可能です。これらが選択できないのは、回答するのにある程度LLMの性能が必要だからです。OpenAIでもgpt-3.5はあまり効果的な回答ができない可能性があります。Anthropicでもclaude-haikuはあまり効果的な回答ができない可能性があります。ここで選択されたAIサービスは、質問の回答生成時に使用されます。"
},
]スライドを開始する
では、スライドを開始してみましょう。
設定の「使用するスライド」でpracticeが選択できるようになっているはずなのでこれを選択します。
※ もし表示されない場合は、設定画面を一度閉じてからもう一度開き直してください。
設定画面を閉じると作成したスライドが表示されているはずです。
デモのときと同じようにスタートボタンを押してみましょう。
作成した台本を発言するとともに、スライドがうまく切り替わっていれば成功です。
質問に回答させる
では次に質問に回答させる機能について説明します。
と言ってもそこまで難しくはありません。
質問に回答させる処理では、できるだけ簡単にお試しいただきたかったためいわゆるRAGは使用せず、ロングコンテキストで処理するようにさせています。
つまり、システムプロンプトに用意しておいた情報をすべて含めて適切な回答させるようにしています。
昨今のAIモデルの高性能で かつ 文章量を多くしても適切な回答ができることを前提とした機能設計になっています。
そのため、あまりにも多すぎる情報は処理できないことを予めご了承ください。
ファイルを準備する
先ほど用意したファイルに加えて、以下のファイルの修正・追加をしてください。
scripts.json
台本ファイルです。
notes にそのスライドの追加情報を記載します。
適切に設定することで、質問したときにAIが回答時に合わせてスライドを切り替えてくれます。
[
{
"page": 0,
"line": "これからAITuberKitのスライドモードについての解説を始めます。",
"notes": ""
},
{
"page": 1,
"line": "スライドモードの開発を始める前に、AITuberKitで会話できている必要があるので準備しておいてください。ただし、スライドモードはOpenAI, Anthropic Claude, Google Geminiのみ対応しています。以降はこの前提で説明していきたいと思いますので、まだの人は解説したnoteを参考にしてください。AITuberKitで検索するとでてくると思います。",
"notes": "AIサービスはそれ以外にGroq, ローカルLLM, Difyが選択可能です。これらが選択できないのは、回答するのにある程度LLMの性能が必要だからです。OpenAIでもgpt-3.5はあまり効果的な回答ができない可能性があります。Anthropicでもclaude-haikuはあまり効果的な回答ができない可能性があります。ここで選択されたAIサービスは、質問の回答生成時に使用されます。"
},
]supplement.txt
それ以外の必要な情報をテキスト形式で追加します。
回答がこちらの文章を参照した場合はスライドは切り替わらないので、可能な限りscripts.jsonに記載したほうが良いですが、雑に大量のテキストをコピペできるので状況に応じて使い分けてください。
質問応答
では、早速質問をしてみましょう。
スライド発表時は質問できないので、すべて終わるか 停止ボタンを押して途中で止めてください。
一番下のチャット欄から質問してみましょう。
TIPS: パワポからMarpに変換する
Marpはマークダウン形式で作成するスライド作成ライブラリです。最近生成AI界隈で流行っているので、耳にしたことがある方も多いと思います。
高性能なAIを使えば比較的簡単に作成できますが、微調整が難しく、慣れていない方にはとっつきづらいかも知れません。
そこでこれから、パワーポイントで作成したスライドをスライドモードで使用する方法も説明していきたいと思います。
スライド準備
いつも通りパワーポイントを使用して作成してください。
画像を載せたりリッチなデザインにしてもらって構いませんが、アスペクト比は16:9（横長）で作成しておかないと、後ほど画面で表示する際にデザインが崩れてしまう可能性があります。
作成後、ファイル > エクスポートを選択し、PNG形式でエクスポートしてください。
これで作成したスライドが1枚ずつPNG形式でエクスポートされているはずです。
AITuberKitの設定
ではAITuberKitに戻り、public/slides/practiceフォルダ（practiceフォルダの名称は任意）に imagesフォルダを作成し、今作ったファイルをすべて挿入してください。
次に slides.md を加工します。
とは言ってもこれらの画像が表示されるように記載するだけなので簡単です。以下のようにしてください。
※ 作成したスライドの枚数に合わせて増やしてください。
---
marp: true
theme: custom
paginate: true
---
<!-- _class: title -->
---
---
---
---
---
theme.css は不要なので作成する必要はありません。
以上でスライドの作成は完了です。
台本ファイルは必要なので、スライドの内容に合わせて作成しておきましょう。
今後について / その他
現在時点で今後対応しようと思っている機能です。
Youtubeコメントを拾って質問に回答させる
ファイルの作成を簡単に実行できるようにする
より最適なUIデザインの調整
現段階では十分なテストが完了していないため、予期せぬ不具合が生じる可能性があります。
また、「ここをこうしたほうがもっと使いやすい！」のような要望があった場合は、私のXアカウント または Discordでぜひ報告してください。
開発者として、自身の視点だけでは見落としがちな課題が多数存在することを認識しており、フィードバックはOSSの品質向上に不可欠であり、大変貴重なものと考えています。
使ってみたや不具合を見つけた報告など、何でも良いので私の耳に届くことを期待しています。
この記事が気に入ったらサポートをしてみませんか？