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

Transcript

1. 1 あなたの配信ワイワイたりていますか？？  配信を盛り上げるAI「waiwai-ai」を作った話 永⽥ 哲平 事業開発部 Alive Projectチーム 2025.02.01
2. 2 ⾃⼰紹介 事業開発部 Alive Project チーム 2024年 新卒⼊社 永⽥  哲平 Nagata Teppei valorantというFPSゲームにハマっています。 出⾝は⿅児島で今⽇は⿅児島から参加しています 🐟 好きな⿂はブリです • github:@te2wow • Twitter : @tetsuwo0717
3. 3 ⾃⼰紹介 事業開発部 Alive Project チーム 2024年 新卒⼊社 永⽥  哲平 Nagata Teppei ‧goやtypescriptでの開発 → 今⽇はpythonのお話 ‧フルスタックに開発 https://developers.gmo.jp/technology/59415/
4. 4 ⾃⼰紹介 事業開発部 Alive Project チーム 2024年 新卒⼊社 永⽥  哲平 Nagata Teppei ‧LLMアプリケーションやそのプラットフォームに興 味があり、同期と社内講習会を実施したりしてます。 同期がアウトプットしてくれました →https://developers.gmo.jp/technology/59393/
8. 最近では恋愛ゲーム風の素材を実装しました！
9. ところで、配信の話題がありましたが… みなさん配信をしたことありますか？？
10. 配信の課題 視聴者数の悩み 「誰も⾒てくれない…」 → 配信開始しても視聴者ゼロ。ひとりで話し続けるのが⾟い。 「リピーターが増えない…」 → 初⾒さんが来ても定着せず、毎回新規ばかり。どうしたらまた来てくれる？ 「数字ばかり気にしてしまう…」 → 視聴者数が増えたり減ったりすると、⼀喜⼀憂してしまう。 「有名配信者と⽐べて落ち込む…」 → ⾃分の配信を頑張っても、⼈気配信者との差を感じてしまう。 コメントの悩み 「コメントが盛り上がらない…」 → 話題を振っても反応がなく、ひとりで喋り続けるのが虚しい。 「同じ⼈しかコメントしてくれない…」 → コミュニティはできつつあるけど、新しい⼈が絡んでくれない。 「コメントが怖い…」 → 誰もいないよりマシだけど、⼼ない⾔葉や荒らしにメンタルがやられる。 配信のクオリティの悩み 「何を配信すればいいかわからない…」 → ネタ切れになって、配信の内容に迷う。 「機材や環境が整ってない…」 → マイクの⾳質や画質が気になるけど、お⾦をかける余裕がない。 「リアクションが⾜りないのかな…」 → 他の配信者と⽐べると、⾃分の反応が地味でつまらないかも。
11. 配信の課題 視聴者数の悩み 「誰も⾒てくれない…」 → 配信開始しても視聴者ゼロ。ひとりで話し続けるのが⾟い。 「リピーターが増えない…」 → 初⾒さんが来ても定着せず、毎回新規ばかり。どうしたらまた来てくれる？ 「数字ばかり気にしてしまう…」 → 視聴者数が増えたり減ったりすると、⼀喜⼀憂してしまう。 「有名配信者と⽐べて落ち込む…」 → ⾃分の配信を頑張っても、⼈気配信者との差を感じてしまう。 コメントの悩み 「コメントが盛り上がらない…」 → 話題を振っても反応がなく、ひとりで喋り続けるのが虚しい。 「同じ⼈しかコメントしてくれない…」 → コミュニティはできつつあるけど、新しい⼈が絡んでくれない。 「コメントが怖い…」 → 誰もいないよりマシだけど、⼼ない⾔葉や荒らしにメンタルがやられる。 配信のクオリティの悩み 「何を配信すればいいかわからない…」 → ネタ切れになって、配信の内容に迷う。 「機材や環境が整ってない…」 → マイクの⾳質や画質が気になるけど、お⾦をかける余裕がない。 「リアクションが⾜りないのかな…」 → 他の配信者と⽐べると、⾃分の反応が地味でつまらないかも。 ここへのアプローチ
12. さて、今回何を作ったのかというと・・・　 (社内slackの発表会スレにて)
13. さて、今回何を作ったのかというと・・・ まるで視聴者のように コメント 場を盛り上げてくれる 配信の音声と映像を理解し て内容に沿ったコメント こんな感じで 配信をコメントで盛り上げてくれると配信者も嬉しいですよね！
14. ということでデモとして、 今日はこのwaiwai-aiを搭載した想ふうかと一緒に発表したいと思います
15. アジェンダ 1.前提とアーキテクチャ 2.入力部分 3.AI生成部分 4.出力部分 5.まとめ 6.鹿児島 時間が余ったらこの子がスライド上で どうやって動いているか話します →
16. アジェンダ 1.前提とアーキテクチャ 2.入力部分 3.AI生成部分 4.出力部分 5.まとめ
17. 1.前提とアーキテクチャ 使用言語・・・Python パッケージ管理ツール・・・ rye 使用したAPI・・・SlackAPI・DifyAPI
18. 1.前提とアーキテクチャ 入力部 • pyaudio • speech_recognition • VB-Cable • OBS の仮想カメラ機能
19. 1.前提とアーキテクチャ わいわい生成部 • Dify • LLMマルチエージェントモデル • ハイパーパラメータのチューニング
20. 1.前提とアーキテクチャ 出力部 • Slack API • 正規表現 (Python)
21. 1.前提とアーキテクチャ かの有名なPythonのWebアプリケーションフレームワークFlaskを作成したArmin Ronacher氏が作成した Pythonパッケージ管理ツールで、Rust製なので動作がとにかく速い https://github.com/astral-sh/rye ※これからRyeの使用を検討される方は、（今の所使い心地に差異はないですが）Rye公式もアナウンスしています ので、uvの使用をお勧めします。 https://docs.astral.sh/uv/
22. アジェンダ 1.前提とアーキテクチャ 2.入力部分 3.AI生成部分 4.出力部分 5.まとめ
23. 2.入力部分 要件 ・配信の状況を文字と画像に起こしてDifyへに渡す 　→配信中は雑音やBGM、効果音などさまざまな音声が混在する環境 　→配信者の声だけではない→ストーリー系の実況等、配信者は常に話している訳ではない
24. 2.入力部分 OBS・・・ 映像や音声を統合してライブ配信や録画が行えるPC用の配信ソフトです。 ゲームプレイの映像や、自分を映した映像、お絵描きの様子などを音声付きでリアルタイムに配信した り、録画したりすることができます。 →　配信者のほとんどが OBSを用いて配信している
25. 2.入力部分 OBS→Python （音声）VB-Audio Cable →VB-Audio Cable は、仮想オーディオデバイスを提供するソフトウェアで、仮想のオーディオ ケーブルとして機能します。 （映像）OBSの仮想カメラ機能
26. 2.入力部分 一言で言えば 出力を入力として扱うことができます
27. 2.入力部分 一言で言えば 出力を入力として扱うことができます
28. 2.入力部分 一言で言えば 出力を入力として扱うことができます （余談） 設定すればmeetやzoomなどでも動画や音楽流せたりします
29. 2.入力部分 次に、OBSから取得した音声や映像をどのように処理してテキストと画 像へ処理しているかをお話しします。
30. 2.入力部分 音声 音声を入力するマイクの選択 マイクから音声の収録 音声から文字起こし ループ
31. 2.入力部分 音声 音声を入力するマイクの選択 マイクから音声の収録 音声から文字起こし ループ イマココ
32. 2.入力部分 PyAudio・・・PortAudioという低レベルのオーディオライブラリのPythonバインディング 　オーディオストリームの録音・再生だけでなく、オーディオデバイス（マイ　　　　　　 ク、スピーカー）の列挙まで担ってくれる https://pypi.org/project/PyAudio/ 音声を入力するマイクの選択
33. 2.入力部分 PyAudio・・・PortAudioという低レベルのオーディオライブラリのPythonバインディング 　オーディオストリームの録音・再生だけでなく、オーディオデバイス（マイ　　　　　　 ク、スピーカー）の列挙まで担ってくれる https://pypi.org/project/PyAudio/ 音声を入力するマイクの選択
34. 2.入力部分 マイクから音声の収録 録音もpyaudioのメソッド が使える キャンセルされるまで実 行し続ける 呼 び 出 し
35. 2.入力部分 音声から文字起こし Speech Recognition・・・音声をテキストに変換するための Python ライブラリです。複数の音声認 識エンジン（Google Speech Recognition, Whisper, IBM Watson など）に対応しています　→　 Googleのエンジンを使用→無料/最も日本語の認識精度が高い
36. 2.入力部分 音声から文字起こし Speech Recognition・・・音声をテキストに変換するための Python ライブラリです。複数の音声認 識エンジン（Google Speech Recognition, Whisper, IBM Watson など）に対応しています　→　 Googleのエンジンを使用→無料/最も日本語の認識精度が高い 音声ファイルを指定 日本語を指定
37. 2.入力部分 OpenCV（cv2）・・・コンピュータビジョンや画像処理を行えるのOSSです。機能としては機械学習と の統合して、顔検出/物体認識/特徴点検出を行えますが今回はこちらのcapture機能を使いました。 映像 APIリクエストの前段でBase64エンコード
38. アジェンダ 1.前提とアーキテクチャ 2.入力部分 3.AI生成部分 4.出力部分 5.まとめ
39. 3.AI生成部分 要件 ・リクエストの内容から配信に適したテキストを生成する 　→配信中はいろんな人が見る　→　同じようなコメントばかりではつまらない 　 →いろんな種類のコメントがあって欲しい 　例：単にすごいね！という人もいれば、〇〇がすごい！という褒め方をする人もいる
40. 3.AI生成部分 要件 ・配信を盛り上げる”わいわい”を生み出すために、LLMを用いることにした。そこで、当時少しずつ盛り上がり 始めていたDifyを用いてLLMアプリを開発することにしました。DifyはオープンソースのLLMアプリ開発プ ラットフォームで、LLMの設定や処理、ハイパーパラメータ設定をGUI上で簡単に操作することができます。 ディッフィーじゃないよ ディファイ だよ！！！
41. 3.AI生成部分 モデルの選択 プロンプト ここでチューニング コンテキスト ここであるあるコメントを読ませると精度 が上がりそう
42. 3.AI生成部分 こんな感じでワークフロー も構築できます
43. 3.AI生成部分 これもLLM これもLLM これもLLM これもLLM これもLLM
44. 3.AI生成部分 これもLLM これもLLM これもLLM これもLLM これもLLM 役割毎にチューニングできる
45. 3.AI生成部分 また、今回扱ったテキストデータはノイズ処理などをせずにそのまま用いることにしました。この判断の理由とし て、以下の点が挙げられます： ・入力部分で取得されるテキストデータの精度が実証済みで十分高い こと。 ・使用するLLMアプリケーションが、ある程度のノイズを処理できる性能 を有していること。 このため、入力部分から受け取ったテキストデータをそのまま LLMに渡して処理する設計としました。 なお、将来的に以下の状況が生じた場合には、入力部分とわいわい生成部分の間にデータの前処理を行う仕 組みが必要になると考えられます： ・入力部分から送られるデータにノイズが多く含まれる場合。 ・使用する LLMアプリケーションがノイズに対して脆弱な場合。 ノイズが結構入ってしまう環境でも かなり精度いいですよね
46. 3.AI生成部分 コメント生成部分の LLMアプリケーションについて LLMのユーモアに関する研究はいくつかあり、その中で手軽で効果の高そうな手法を応用すること にしました。それは、異なる人格の LLMをいくつか用意して、ランダムな LLMにユーモアを生成させる ものです。 今回の開発では、3種類の異なるキャラクターを持つ LLMを用意しました。それぞれ、 ①視聴者を積極的に褒めてくれる LLM ②状況を整理して褒める LLM ③自分のことを面白いと思っている少し自信過剰な LLM という特徴を持たせています。 また、複数のLLMモデルを用いたマルチエージェントモデル を用いることで、単一の LLMを使うよりも人間に近いコメント を出せるように工夫しました。
47. 3.AI生成部分 コメント生成部分の LLMアプリケーションについて LLMのユーモアに関する研究はいくつかあり、その中で手軽で効果の高そうな手法を応用すること にしました。それは、異なる人格の LLMをいくつか用意して、ランダムな LLMにユーモアを生成させる ものです。 今回の開発では、3種類の異なるキャラクターを持つ LLMを用意しました。それぞれ、 ①視聴者を積極的に褒めてくれる LLM ②状況を整理して褒める LLM ③自分のことを面白いと思っている少し自信過剰な LLM という特徴を持たせています。 また、複数のLLMモデルを用いたマルチエージェントモデル を用いることで、単一の LLMを使うよりも人間に近いコメント を出せるように工夫しました。 渡すTokenでハンドリン グしている
48. 3.AI生成部分 ①視聴者を積極的に褒めてくれる LLM ②状況を整理して褒める LLM ③自分のことを面白いと思っている少し自信過剰な LLM →　チャット botで実装
49. 3.AI生成部分 プロンプト例 ③自分のことを面白いと思っている少し自信過剰な LLM # 命令: 動画を視聴しているファンとして振る舞ってください。 動画の文章に対して、 {{comment_num}}個の動画コメントを生成してください。 あなたは最高に笑えるお笑い芸人です。 そのため、動画の内容に対して、ツッコミを交えて、面白く盛り上げます。たまに絵文字も使って良いです。 なるべく同じようなコメントばかりにならないように気をつけてください。内容に関係するコメントをしてください。 内容そのものを発言してはいけません。 注意を気をつけてください。 # 注意: コメントは必ず動画の文章の内容に関係するものでなければいけません。 コメントはポジティブで盛り上げるものでなければいけません。 コメントは動画の内容を楽しんでいなければいけません。 コメントは長すぎてはいけません。 たまに、一言のコメントを投げてください。 # 出力形式: 各コメントの間は ###で区切ってください。コメントのみを出力してください。 ## 出力例: 改行は入れないでください。 (コメントを入れる )###(コメントが入る )###(コメントが入る )##... # 文章
50. 3.AI生成部分 コメント生成部分のハイパーパラメータのチューニングについて さらに、LLMのハイパーパラメータを調整して、発言にランダムさを加え、配信ごとに異なるリアクショ ンを楽しめるようにしました。ここでハイパーパラメータのチューニングとは、機械学習モデルの 学習 プロセスや構造を制御するパラメータ（ハイパーパラメータ）を最適化することを指します。 これにより、視聴者が配信に参加するたびに新しい体験ができるようになっています。 LLMのハイ パーパラメータは以下です。 →詳しくはOpenAIのドキュメントも参考にみてください！
51. 3.AI生成部分
52. 3.AI生成部分 応答のランダム性やクリエイティビ ティを制御する。 上位P％の確率のトークンを選択す る。 応答内で同じトークンが繰り返され る頻度を抑える。 応答に含められるトークン（単語や記号 など）の最大数を指定する。
53. アジェンダ 1.前提とアーキテクチャ 2.入力部分 3.AI生成部分 4.出力部分 5.まとめ
54. 4.出力部分 要件 ・Difyのレスポンスの内容を適切に見れるようにする 　→SlackBotの発言として投稿 　→将来的にはYouTubeAPIでYoutubeやTwitchのコメントとして出したい 　
55. 4.出力部分 実装の手順 1.基本的な動作確認とデバッグを容易に行える環境を整えるため、コンソールへの出力 を実装する。 2.Slack APIの仕様を把握し、実際のユーザー環境での動作を確認するために、特定のチャンネルに出力 す る。 3.ユーザーとの自然なインタラクションを実現するため、スレッドのリンクを指定して返信できる機能を実装 する。 　
56. 4.出力部分 実装の手順 1.基本的な動作確認とデバッグを容易に行える環境を整えるため、コンソールへの出力 を実装する。 2.Slack APIの仕様を把握し、実際のユーザー環境での動作を確認するために、特定のチャンネルに出力 す る。 3.ユーザーとの自然なインタラクションを実現するため、スレッドのリンクを指定して返信できる機能を実装 する。 　 rye run waiwai --thread_url https://yourworkspace.slack.com/archives/C01ABCDEF/p1622547803000200 →コマンドで与えられたリンクを適切にパースして出力先を指定する
57. 4.出力部分 コンソールへの出力 waiwai-aiの基本となるコンソールへの出力と、AIから出力されたコメントの受け渡し形式を検討し ました。 また、以下のようなシンプルなクラスを作成し、answers リストに含まれるコメントをコンソールに出 力するメソッドを実装しました。 　
58. 4.出力部分 データ形式の設計と選択 　コメントの受け渡しには様々な方法がありますが、以下のような配列（リスト）形式での渡し方を 採用しました。 この配列を用いて、各コメントを順にコンソールへ出力するようにしま した。この形式を選んだ理由は主に以下の 3点です。 ・複数行コメントや順序付きの発言を扱いやすい ・チーム間でのデータ受け渡しがシンプル ・SlackやYouTubeなど、異なる出力先への拡張が容易
59. 4.出力部分 Slackの特定のチャンネルにそのまま出力する 　次に、Slackの特定のチャンネルに直接出力する機能を実装しました。これは、実際のユーザー環境 でコメントがどのように表示されるかを確認するための重要なプロセスです。
60. 4.出力部分 Slack APIの設定 Slack APIを利用するために、以下のOAuthスコープを設定しました。 channels・・・@waiwai-aiが追加されたパブリックチャンネル内のメッセージやその他のコンテンツを 閲覧するための権限です。 chat・・・@waiwai-aiとしてチャンネルにメッセージを送信するための権限です。 chat.customize・・・@waiwai-aiとして、カスタマイズされたユーザー名やアバターでメッセージを 送信するための権限です。 chat・・・ユーザーに代わってメッセージ 　　　　　　　　　　　を送信するための権限です。
61. 4.出力部分 Slack APIの設定 これらのスコープを設定した結果、以下の出力結果となりました
62. 4.出力部分 ここまでの実装では、SlackのチャンネルIDとメッセージのタイムスタンプ（thread_ts）を個別に指定す る必要がありました。しかし、ユーザーがこれらの情報を手動で取得して指定するのは手間がかかり、 UXの観点から改善の余地がありました。 そこで着目したのが、SlackのスレッドURLに含まれる情報です。SlackのスレッドURLの末尾には、そ のスレッドのタイムスタンプが含まれており、この点を活用することでユーザーの利便性を向上させるこ とができました。
63. 4.出力部分 ここで、 <workspace> はワークスペースの名前 <channel_id> はチャンネルのID <timestamp> はスレッドのタイムスタンプ（小数点が省略された形式） 例:タイムスタンプが 1622547803.000200 の場合、URLの末尾は p1622547803000200 となります。 このURLから以下の情報を抽出します。 ・チャンネルID: <channel_id> ・タイムスタンプ: <timestamp> に 　　　　　　　　　　小数点を挿入して元の形式に戻す
64. 4.出力部分 正規表現による情報抽出 URLからチャンネルIDとタイムスタンプを抽出するために、正規表現を使用しました。 正規表現パターンの 設計 タイムスタンプの 復元
65. 4.出力部分 outputSlack メソッドの修正 抽出したチャンネルIDとタイムスタンプを用いて、指定したスレッドにメッセージを投稿します。
66. 4.出力部分 使用例 このように、スレッドの URLを引数として渡すだけ で、該当するスレッドに対してメッセージを投稿で きるようになりました。
67. 4.出力部分 使用例 どうやって実行するか？ rye run waiwai --thread_url https://yourworkspace.slack.com/archives/C01ABCDEF/p1622547803000200
68. 4.出力部分 waiwai-aiを導入した結果、Slackのやり取りは大いに盛り上がりを見せました！画像にあるように、AIが生成したコメントが、視聴者のリ アクションを引き出し、自然な会話の流れを作り出しています。例えば「なるほどw」や「AIっぽいwww」といったリアクションが飛び交い、 AIがまるで本当の参加者のように受け入れられている様子が伺えます。 結果的に、わいわいAIは新規配信者でも視聴者とのやり取りが弾む楽しい配信空間を作り出すことができました。
69. どうやって動いてる？？
70. A.OBS上でMIXしている
71. ワイワイAIの出力をflaskで立てたサーバー上に表示
72. ワイワイAIの出力をflaskで立てたサーバー上に表示
73. ワイワイAIの出力をflaskで立てたサーバー上に表示 クロマキー 切り抜き
74. 5.まとめ waiwai-aiを作成しました！！ Pythonは豊富なライブラリと柔軟性を持ち、音声処理や映像キャプチャ、API連携など多岐にわたる機能を 実装するのに適しています。一方、DifyはLLMアプリケーションの開発を容易にし、GUI上での設定やハイ パーパラメータの調整が可能です。この組み合わせにより各コンポーネントの実装に集中でき、効率的な開 発が可能となりました。 特に、Difyの導入により、LLMのプロンプト設計やパラメータ調整が容易になり、試行錯誤のサイクルを迅速 に回すことができた点が印象的でした。また、Pythonの柔軟性とDifyの使いやすさが相まって、システム全 体の開発効率と拡張性が向上したなと感じました。
75. 5.今後の展望 YouTubeAPI /TwitchAPIを使用して実際にコメントを出力したい ・Botとして出す(人のように振る舞うが中はBotと同じ仕様) ・規制や利用規約みたいなところで考えることがありそう ・API利用制限 ・AliveStudioとしてリリースしたい！
76. 5.今後の展望 BuriKaigi 既に最高なので！
77. 5.今後の展望 BuriKaigi 既に最高なので！ →Kurogewagyu-Kaigi開催したいです。
78. 78 Thank you!