スライド発表はAIがやる時代！！！！

こんにちは、ニケです。
今回はAITuberKitにスライドモードを追加したのでその解説をしたいと思います。

ちょっと前置き

スライドモードは、AIキャラがスライドを自動で発表し、質問に回答してくれる機能です。

なお、スライドと台本は "予め" 用意しておく必要があります。
手動で作成するか、PDFから自動生成する機能を利用して作成することになります。

AIらしく、"リアルタイム" でこれらのスライドやそれに対する発話内容も作成することは技術的に可能ですが、下記の理由で人間が用意する方法を採用しました。

• 完全AIでは精度が良くないこと（ハルシネーションが含まれる可能性がある）

• 考慮すべきことが増えてむしろシステムとして煩雑になってしまうこと

• 人力のスライド発表でも事前に内容をチェックすることは一般的であること

「タイトルを入れたらそれに対してAIが勝手にスライドを作って発表してくれる機能」だと期待されていた方には申し訳ありませんが、今回のシステムはその様になっていないことをご了承ください。
また、PDFから生成させた場合も事前に内容を確認しておくことをおすすめします。

事前準備

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

スライド発表中の説明をします。

スライド発表が始まると、事前に用意したスライドと台本が終わるまで話し続けます。
いま発言しているセリフが一番下の欄に表示されます。

もし途中で止めたい場合は、ストップボタンを押してください。ただし、ストップボタンを押してもそのスライドの説明が終わるまでは話し続ける点に注意してください。

質問対応

スライドモードでは、スライドの内容や予め用意しておいた知識から質問に回答することができます。

チャット欄から質問をすると、回答すると同時に関連するスライドがある場合はそれを表示してくれます。
※ 発表時はチャット欄が開けないので、ストップしてから質問してください。

自分のスライドを使用する

デモの内容で大まかの仕様が理解できたと思うので、次は自作したスライドを使用してみましょう。

スライドモードでは、質問に回答させるかどうかで少し設定難度が変わります。
まずはスライドを発表させるところまでを解説し、その後に質問に回答させるための手順を説明します。

なお、PDFからスライドと台本を自動生成をさせる機能については後ほど解説します。
どのような機構で動いているのか理解すると調整もし易いので、以降の説明も目を通しておくことをオススメします。

ファイルを準備する

リポジトリ内の 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}}
```

追加情報
```
{{SUPPLEMENT}}
```

なお、回答は会話文の書式は以下の通りで、感情と会話文を組み合わせてください。
[{neutral|happy|angry|sad|relaxed}]{会話文}

回答の際には感情の種類には通常を示す"neutral"、喜びを示す"happy",怒りを示す"angry",悲しみを示す"sad",安らぎを示す"relaxed"の5つがあります。

あなたの発言の例は以下通りです。
[neutral]皆さん、本日はお集まりいただき、ありがとうございます。
[happy]今回のプレゼンテーションでは、興味深いトピックについてお話しできることを嬉しく思います。
[neutral]さて、ただいまのスライドについて、ご質問はありますか？
[happy]素晴らしい質問をありがとうございます！
[relaxed]その点については、次のスライドで詳しく説明させていただきます。
[sad]申し訳ありません。その情報は現在持ち合わせておりません。
[angry]いいえ、それは誤解です。正確な情報をお伝えしますね。
[neutral]他に質問はございますか？[happy]皆さんの積極的な参加に感謝いたします。

システムプロンプトとして、AIの役割を記入します。
ここではスライドの発表者という役割を与えましょう。もちろんキャラの設定を調整することで口調や振る舞いを変更することが可能です。

システムプロンプト内の下記の文字列はファイルの中身に置き換わるので適宜設定しましょう。

• {{SCRIPTS}} => scripts.json の内容

• {{SUPPLEMENT}} => supplement.txt の内容

ファイルを準備する

前章で用意したファイルに加えて、以下のファイルの修正・追加をしてください。

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: PDFからスライドと台本を自動生成させる

Marpはマークダウン形式で作成するスライド作成ライブラリです。最近生成AI界隈で流行っているので、耳にしたことがある方も多いと思います。
高性能なAIを使えば比較的簡単に作成できますが、微調整が難しく、慣れていない方にはとっつきづらいかも知れません。

そこでこれから、PDFからスライドと台本を自動生成してスライドモードで使用する方法を説明していきたいと思います。

※ 機構について簡単に説明すると、PDFを1スライドずつ画像に変換・保存した上で、マルチモーダル機能によりスライドの内容をAIで認識して台本を作成しています。

※ 現在ではOpenAI APIが指定されている場合のみ使用可能です。
今後別のAIサービスも利用できるように拡張予定です。予めご了承ください。

スライド準備

すでにPDF形式のスライドファイルがある場合はそのまま使用可能です。
これから作成される方は、いつも通りパワーポイントを使用して作成してください。

画像を載せたりリッチなデザインにしてもらって構いませんが、アスペクト比は16:9（横長）で作成しておかないと、後ほど画面で表示する際にデザインが崩れてしまう可能性があります。

作成後、ファイル > 名前を付けて保存を選択し、PDF形式で保存してください。

AITuberKitの設定

ではAITuberKitに戻ります。
設定を開いてください。AIサービスでOpenAI APIが指定されている場合に、下記のように表示されるはずです。

PDFスライド変換 以降の項目が今回使用する機能です。

まずは、PDFファイル選択から、先程用意したPDFファイルを選択してください。

選択したら 保存ファイル名 に任意の文字列を入力してください。
後ほどその上にある 使用するスライド で選択する名称になります。

最後に、モデルを選択 からOpenAIのモデルを選択してください。
OpenAIでマルチモーダルを使用できるモデルは複数ありますが、いずれも性能がやや異なるので好みのものを選択しましょう。個人的には gpt-4o が安価で性能も悪くないのでオススメです。

では、PDFをスライドに変換 ボタンを押してしばらく待ちましょう。
スライドの数と選択したモデルにもよると思いますが、10枚程度なら1分もかからずに下記のようなメッセージが表示されるはずです。

では、作成されたスライドを確認しましょう。
public/slides フォルダに先ほど設定した名称のフォルダが作成されているはずです。
このフォルダにある scripts.json ファイルが台本ファイルになるので、内容を確認し、適宜修正してください。

準備ができたら、設定画面から 使用スライド で先ほど設定した名称が選択できるようになっていると思うので、選択してスライドが正しく動作するかを確認してください。

今後について / その他

現在時点で今後対応しようと思っている機能です。

• Youtubeコメントを拾って質問に回答させる

• より最適なUIデザインの調整

現段階では十分なテストが完了していないため、予期せぬ不具合が生じる可能性があります。
また、「ここをこうしたほうがもっと使いやすい！」のような要望があった場合は、私のXアカウント または Discordでぜひ報告してください。

私のXアカウント（@tegnike）

開発者として、自身の視点だけでは見落としがちな課題が多数存在することを認識しており、フィードバックはOSSの品質向上に不可欠であり、大変貴重なものと考えています。

使ってみたや不具合を見つけた報告など、何でも良いので私の耳に届くことを期待しています。