あなたの配信ワイワイたりていますか？？　配信を盛り上げるAI「waiwai-ai」を作った話

by 永田哲平

Slide 1

Slide 1 text

1 あなたの配信ワイワイたりていますか？？配信を盛り上げるAI「waiwai-ai」を作った話永⽥哲平事業開発部 Alive Projectチーム 2025.02.01

Slide 2

Slide 2 text

2 ⾃⼰紹介事業開発部 Alive Project チーム 2024年新卒⼊社永⽥哲平 Nagata Teppei valorantというFPSゲームにハマっています。出⾝は⿅児島で今⽇は⿅児島から参加しています 🐟 好きな⿂はブリです ● github:@te2wow ● Twitter : @tetsuwo0717

Slide 3

Slide 3 text

3 ⾃⼰紹介事業開発部 Alive Project チーム 2024年新卒⼊社永⽥哲平 Nagata Teppei ‧goやtypescriptでの開発 → 今⽇はpythonのお話 ‧フルスタックに開発 https://developers.gmo.jp/technology/59415/

Slide 4

Slide 4 text

4 ⾃⼰紹介事業開発部 Alive Project チーム 2024年新卒⼊社永⽥哲平 Nagata Teppei ‧LLMアプリケーションやそのプラットフォームに興味があり、同期と社内講習会を実施したりしてます。同期がアウトプットしてくれました →https://developers.gmo.jp/technology/59393/

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

最近では恋愛ゲーム風の素材を実装しました！

Slide 9

Slide 9 text

ところで、配信の話題がありましたが… みなさん配信をしたことありますか？？

Slide 10

Slide 10 text

配信の課題視聴者数の悩み「誰も⾒てくれない…」 → 配信開始しても視聴者ゼロ。ひとりで話し続けるのが⾟い。「リピーターが増えない…」 → 初⾒さんが来ても定着せず、毎回新規ばかり。どうしたらまた来てくれる？「数字ばかり気にしてしまう…」 → 視聴者数が増えたり減ったりすると、⼀喜⼀憂してしまう。「有名配信者と⽐べて落ち込む…」 → ⾃分の配信を頑張っても、⼈気配信者との差を感じてしまう。コメントの悩み「コメントが盛り上がらない…」 → 話題を振っても反応がなく、ひとりで喋り続けるのが虚しい。「同じ⼈しかコメントしてくれない…」 → コミュニティはできつつあるけど、新しい⼈が絡んでくれない。「コメントが怖い…」 → 誰もいないよりマシだけど、⼼ない⾔葉や荒らしにメンタルがやられる。配信のクオリティの悩み「何を配信すればいいかわからない…」 → ネタ切れになって、配信の内容に迷う。「機材や環境が整ってない…」 → マイクの⾳質や画質が気になるけど、お⾦をかける余裕がない。「リアクションが⾜りないのかな…」 → 他の配信者と⽐べると、⾃分の反応が地味でつまらないかも。

Slide 11

Slide 11 text

Slide 12

Slide 12 text

さて、今回何を作ったのかというと・・・　 (社内slackの発表会スレにて)

Slide 13

Slide 13 text

さて、今回何を作ったのかというと・・・まるで視聴者のようにコメント場を盛り上げてくれる配信の音声と映像を理解して内容に沿ったコメントこんな感じで配信をコメントで盛り上げてくれると配信者も嬉しいですよね！

Slide 14

Slide 14 text

ということでデモとして、今日はこのwaiwai-aiを搭載した想ふうかと一緒に発表したいと思います

Slide 15

Slide 15 text

アジェンダ 1.前提とアーキテクチャ 2.入力部分 3.AI生成部分 4.出力部分 5.まとめ 6.鹿児島時間が余ったらこの子がスライド上でどうやって動いているか話します →

Slide 16

Slide 16 text

アジェンダ 1.前提とアーキテクチャ 2.入力部分 3.AI生成部分 4.出力部分 5.まとめ

Slide 17

Slide 17 text

1.前提とアーキテクチャ使用言語・・・Python パッケージ管理ツール・・・ rye 使用したAPI・・・SlackAPI・DifyAPI

Slide 18

Slide 18 text

1.前提とアーキテクチャ入力部 ● pyaudio ● speech_recognition ● VB-Cable ● OBS の仮想カメラ機能

Slide 19

Slide 19 text

1.前提とアーキテクチャわいわい生成部 ● Dify ● LLMマルチエージェントモデル ● ハイパーパラメータのチューニング

Slide 20

Slide 20 text

1.前提とアーキテクチャ出力部 ● Slack API ● 正規表現 (Python)

Slide 21

Slide 21 text

1.前提とアーキテクチャかの有名なPythonのWebアプリケーションフレームワークFlaskを作成したArmin Ronacher氏が作成した Pythonパッケージ管理ツールで、Rust製なので動作がとにかく速い https://github.com/astral-sh/rye ※これからRyeの使用を検討される方は、（今の所使い心地に差異はないですが）Rye公式もアナウンスしていますので、uvの使用をお勧めします。 https://docs.astral.sh/uv/

Slide 22

Slide 22 text

アジェンダ 1.前提とアーキテクチャ 2.入力部分 3.AI生成部分 4.出力部分 5.まとめ

Slide 23

Slide 23 text

2.入力部分要件・配信の状況を文字と画像に起こしてDifyへに渡す　→配信中は雑音やBGM、効果音などさまざまな音声が混在する環境　→配信者の声だけではない→ストーリー系の実況等、配信者は常に話している訳ではない

Slide 24

Slide 24 text

2.入力部分 OBS・・・映像や音声を統合してライブ配信や録画が行えるPC用の配信ソフトです。ゲームプレイの映像や、自分を映した映像、お絵描きの様子などを音声付きでリアルタイムに配信したり、録画したりすることができます。 →　配信者のほとんどが OBSを用いて配信している

Slide 25

Slide 25 text

2.入力部分 OBS→Python （音声）VB-Audio Cable →VB-Audio Cable は、仮想オーディオデバイスを提供するソフトウェアで、仮想のオーディオケーブルとして機能します。（映像）OBSの仮想カメラ機能

Slide 26

Slide 26 text

2.入力部分一言で言えば出力を入力として扱うことができます

Slide 27

Slide 27 text

2.入力部分一言で言えば出力を入力として扱うことができます

Slide 28

Slide 28 text

2.入力部分一言で言えば出力を入力として扱うことができます（余談）設定すればmeetやzoomなどでも動画や音楽流せたりします

Slide 29

Slide 29 text

2.入力部分次に、OBSから取得した音声や映像をどのように処理してテキストと画像へ処理しているかをお話しします。

Slide 30

Slide 30 text

2.入力部分音声音声を入力するマイクの選択マイクから音声の収録音声から文字起こしループ

Slide 31

Slide 31 text

2.入力部分音声音声を入力するマイクの選択マイクから音声の収録音声から文字起こしループイマココ

Slide 32

Slide 32 text

2.入力部分 PyAudio・・・PortAudioという低レベルのオーディオライブラリのPythonバインディング　オーディオストリームの録音・再生だけでなく、オーディオデバイス（マイ　　　　　　ク、スピーカー）の列挙まで担ってくれる https://pypi.org/project/PyAudio/ 音声を入力するマイクの選択

Slide 33

Slide 33 text

Slide 34

Slide 34 text

2.入力部分マイクから音声の収録録音もpyaudioのメソッドが使えるキャンセルされるまで実行し続ける呼び出し

Slide 35

Slide 35 text

2.入力部分音声から文字起こし Speech Recognition・・・音声をテキストに変換するための Python ライブラリです。複数の音声認識エンジン（Google Speech Recognition, Whisper, IBM Watson など）に対応しています　→　 Googleのエンジンを使用→無料/最も日本語の認識精度が高い

Slide 36

Slide 36 text

Slide 37

Slide 37 text

2.入力部分 OpenCV（cv2）・・・コンピュータビジョンや画像処理を行えるのOSSです。機能としては機械学習との統合して、顔検出/物体認識/特徴点検出を行えますが今回はこちらのcapture機能を使いました。映像 APIリクエストの前段でBase64エンコード

Slide 38

Slide 38 text

アジェンダ 1.前提とアーキテクチャ 2.入力部分 3.AI生成部分 4.出力部分 5.まとめ

Slide 39

Slide 39 text

3.AI生成部分要件・リクエストの内容から配信に適したテキストを生成する　→配信中はいろんな人が見る　→　同じようなコメントばかりではつまらない　 →いろんな種類のコメントがあって欲しい　例：単にすごいね！という人もいれば、〇〇がすごい！という褒め方をする人もいる

Slide 40

Slide 40 text

3.AI生成部分要件・配信を盛り上げる”わいわい”を生み出すために、LLMを用いることにした。そこで、当時少しずつ盛り上がり始めていたDifyを用いてLLMアプリを開発することにしました。DifyはオープンソースのLLMアプリ開発プラットフォームで、LLMの設定や処理、ハイパーパラメータ設定をGUI上で簡単に操作することができます。ディッフィーじゃないよディファイだよ！！！

Slide 41

Slide 41 text

3.AI生成部分モデルの選択プロンプトここでチューニングコンテキストここであるあるコメントを読ませると精度が上がりそう

Slide 42

Slide 42 text

3.AI生成部分こんな感じでワークフローも構築できます

Slide 43

Slide 43 text

3.AI生成部分これもLLM これもLLM これもLLM これもLLM これもLLM

Slide 44

Slide 44 text

3.AI生成部分これもLLM これもLLM これもLLM これもLLM これもLLM 役割毎にチューニングできる

Slide 45

Slide 45 text

3.AI生成部分また、今回扱ったテキストデータはノイズ処理などをせずにそのまま用いることにしました。この判断の理由として、以下の点が挙げられます：・入力部分で取得されるテキストデータの精度が実証済みで十分高いこと。・使用するLLMアプリケーションが、ある程度のノイズを処理できる性能を有していること。このため、入力部分から受け取ったテキストデータをそのまま LLMに渡して処理する設計としました。なお、将来的に以下の状況が生じた場合には、入力部分とわいわい生成部分の間にデータの前処理を行う仕組みが必要になると考えられます：・入力部分から送られるデータにノイズが多く含まれる場合。・使用する LLMアプリケーションがノイズに対して脆弱な場合。ノイズが結構入ってしまう環境でもかなり精度いいですよね

Slide 46

Slide 46 text

3.AI生成部分コメント生成部分の LLMアプリケーションについて LLMのユーモアに関する研究はいくつかあり、その中で手軽で効果の高そうな手法を応用することにしました。それは、異なる人格の LLMをいくつか用意して、ランダムな LLMにユーモアを生成させるものです。今回の開発では、3種類の異なるキャラクターを持つ LLMを用意しました。それぞれ、 ①視聴者を積極的に褒めてくれる LLM ②状況を整理して褒める LLM ③自分のことを面白いと思っている少し自信過剰な LLM という特徴を持たせています。また、複数のLLMモデルを用いたマルチエージェントモデルを用いることで、単一の LLMを使うよりも人間に近いコメントを出せるように工夫しました。

Slide 47

Slide 47 text

Slide 48

Slide 48 text

3.AI生成部分 ①視聴者を積極的に褒めてくれる LLM ②状況を整理して褒める LLM ③自分のことを面白いと思っている少し自信過剰な LLM →　チャット botで実装

Slide 49

Slide 49 text

3.AI生成部分プロンプト例 ③自分のことを面白いと思っている少し自信過剰な LLM # 命令: 動画を視聴しているファンとして振る舞ってください。動画の文章に対して、 {{comment_num}}個の動画コメントを生成してください。あなたは最高に笑えるお笑い芸人です。そのため、動画の内容に対して、ツッコミを交えて、面白く盛り上げます。たまに絵文字も使って良いです。なるべく同じようなコメントばかりにならないように気をつけてください。内容に関係するコメントをしてください。内容そのものを発言してはいけません。注意を気をつけてください。 # 注意: コメントは必ず動画の文章の内容に関係するものでなければいけません。コメントはポジティブで盛り上げるものでなければいけません。コメントは動画の内容を楽しんでいなければいけません。コメントは長すぎてはいけません。たまに、一言のコメントを投げてください。 # 出力形式: 各コメントの間は ###で区切ってください。コメントのみを出力してください。 ## 出力例: 改行は入れないでください。 (コメントを入れる )###(コメントが入る )###(コメントが入る )##... # 文章

Slide 50

Slide 50 text

3.AI生成部分コメント生成部分のハイパーパラメータのチューニングについてさらに、LLMのハイパーパラメータを調整して、発言にランダムさを加え、配信ごとに異なるリアクションを楽しめるようにしました。ここでハイパーパラメータのチューニングとは、機械学習モデルの学習プロセスや構造を制御するパラメータ（ハイパーパラメータ）を最適化することを指します。これにより、視聴者が配信に参加するたびに新しい体験ができるようになっています。 LLMのハイパーパラメータは以下です。 →詳しくはOpenAIのドキュメントも参考にみてください！

Slide 51

Slide 51 text

3.AI生成部分

Slide 52

Slide 52 text

3.AI生成部分応答のランダム性やクリエイティビティを制御する。上位P％の確率のトークンを選択する。応答内で同じトークンが繰り返される頻度を抑える。応答に含められるトークン（単語や記号など）の最大数を指定する。

Slide 53

Slide 53 text

アジェンダ 1.前提とアーキテクチャ 2.入力部分 3.AI生成部分 4.出力部分 5.まとめ

Slide 54

Slide 54 text

4.出力部分要件・Difyのレスポンスの内容を適切に見れるようにする　→SlackBotの発言として投稿　→将来的にはYouTubeAPIでYoutubeやTwitchのコメントとして出したい　

Slide 55

Slide 55 text

4.出力部分実装の手順 1.基本的な動作確認とデバッグを容易に行える環境を整えるため、コンソールへの出力を実装する。 2.Slack APIの仕様を把握し、実際のユーザー環境での動作を確認するために、特定のチャンネルに出力する。 3.ユーザーとの自然なインタラクションを実現するため、スレッドのリンクを指定して返信できる機能を実装する。　

Slide 56

Slide 56 text

Slide 57

Slide 57 text

4.出力部分コンソールへの出力 waiwai-aiの基本となるコンソールへの出力と、AIから出力されたコメントの受け渡し形式を検討しました。また、以下のようなシンプルなクラスを作成し、answers リストに含まれるコメントをコンソールに出力するメソッドを実装しました。　

Slide 58

Slide 58 text

4.出力部分データ形式の設計と選択　コメントの受け渡しには様々な方法がありますが、以下のような配列（リスト）形式での渡し方を採用しました。この配列を用いて、各コメントを順にコンソールへ出力するようにしました。この形式を選んだ理由は主に以下の 3点です。・複数行コメントや順序付きの発言を扱いやすい・チーム間でのデータ受け渡しがシンプル・SlackやYouTubeなど、異なる出力先への拡張が容易

Slide 59

Slide 59 text

4.出力部分 Slackの特定のチャンネルにそのまま出力する　次に、Slackの特定のチャンネルに直接出力する機能を実装しました。これは、実際のユーザー環境でコメントがどのように表示されるかを確認するための重要なプロセスです。

Slide 60

Slide 60 text

4.出力部分 Slack APIの設定 Slack APIを利用するために、以下のOAuthスコープを設定しました。 channels・・・@waiwai-aiが追加されたパブリックチャンネル内のメッセージやその他のコンテンツを閲覧するための権限です。 chat・・・@waiwai-aiとしてチャンネルにメッセージを送信するための権限です。 chat.customize・・・@waiwai-aiとして、カスタマイズされたユーザー名やアバターでメッセージを送信するための権限です。 chat・・・ユーザーに代わってメッセージ　　　　　　　　　　　を送信するための権限です。

Slide 61

Slide 61 text

4.出力部分 Slack APIの設定これらのスコープを設定した結果、以下の出力結果となりました

Slide 62

Slide 62 text

4.出力部分ここまでの実装では、SlackのチャンネルIDとメッセージのタイムスタンプ（thread_ts）を個別に指定する必要がありました。しかし、ユーザーがこれらの情報を手動で取得して指定するのは手間がかかり、 UXの観点から改善の余地がありました。そこで着目したのが、SlackのスレッドURLに含まれる情報です。SlackのスレッドURLの末尾には、そのスレッドのタイムスタンプが含まれており、この点を活用することでユーザーの利便性を向上させることができました。

Slide 63

Slide 63 text

4.出力部分ここで、はワークスペースの名前はチャンネルのID はスレッドのタイムスタンプ（小数点が省略された形式）例:タイムスタンプが 1622547803.000200 の場合、URLの末尾は p1622547803000200 となります。このURLから以下の情報を抽出します。・チャンネルID: ・タイムスタンプ: に　　　　　　　　　　小数点を挿入して元の形式に戻す

Slide 64

Slide 64 text

4.出力部分正規表現による情報抽出 URLからチャンネルIDとタイムスタンプを抽出するために、正規表現を使用しました。正規表現パターンの設計タイムスタンプの復元

Slide 65

Slide 65 text

4.出力部分 outputSlack メソッドの修正抽出したチャンネルIDとタイムスタンプを用いて、指定したスレッドにメッセージを投稿します。

Slide 66

Slide 66 text

4.出力部分使用例このように、スレッドの URLを引数として渡すだけで、該当するスレッドに対してメッセージを投稿できるようになりました。

Slide 67

Slide 67 text

4.出力部分使用例どうやって実行するか？ rye run waiwai --thread_url https://yourworkspace.slack.com/archives/C01ABCDEF/p1622547803000200

Slide 68

Slide 68 text

4.出力部分 waiwai-aiを導入した結果、Slackのやり取りは大いに盛り上がりを見せました！画像にあるように、AIが生成したコメントが、視聴者のリアクションを引き出し、自然な会話の流れを作り出しています。例えば「なるほどw」や「AIっぽいwww」といったリアクションが飛び交い、 AIがまるで本当の参加者のように受け入れられている様子が伺えます。結果的に、わいわいAIは新規配信者でも視聴者とのやり取りが弾む楽しい配信空間を作り出すことができました。

Slide 69

Slide 69 text

どうやって動いてる？？

Slide 70

Slide 70 text

A.OBS上でMIXしている

Slide 71

Slide 71 text

ワイワイAIの出力をflaskで立てたサーバー上に表示

Slide 72

Slide 72 text

ワイワイAIの出力をflaskで立てたサーバー上に表示

Slide 73

Slide 73 text

ワイワイAIの出力をflaskで立てたサーバー上に表示クロマキー切り抜き

Slide 74

Slide 74 text

5.まとめ waiwai-aiを作成しました！！ Pythonは豊富なライブラリと柔軟性を持ち、音声処理や映像キャプチャ、API連携など多岐にわたる機能を実装するのに適しています。一方、DifyはLLMアプリケーションの開発を容易にし、GUI上での設定やハイパーパラメータの調整が可能です。この組み合わせにより各コンポーネントの実装に集中でき、効率的な開発が可能となりました。特に、Difyの導入により、LLMのプロンプト設計やパラメータ調整が容易になり、試行錯誤のサイクルを迅速に回すことができた点が印象的でした。また、Pythonの柔軟性とDifyの使いやすさが相まって、システム全体の開発効率と拡張性が向上したなと感じました。

Slide 75

Slide 75 text

5.今後の展望 YouTubeAPI /TwitchAPIを使用して実際にコメントを出力したい・Botとして出す(人のように振る舞うが中はBotと同じ仕様) ・規制や利用規約みたいなところで考えることがありそう・API利用制限・AliveStudioとしてリリースしたい！

Slide 76

Slide 76 text

5.今後の展望 BuriKaigi 既に最高なので！

Slide 77

Slide 77 text

5.今後の展望 BuriKaigi 既に最高なので！ →Kurogewagyu-Kaigi開催したいです。

Slide 78

Slide 78 text

78 Thank you!