AIに実況させる / AI Streamer

リンクありバージョン: https://docs.google.com/presentation/d/11_rx8VqqfLhS2ovE-cFPAANj8X0nGOGU5JzM0fC1kao/edit

Transcript

1. AIに実況させる motemen 2025/05/29 Kyoto Tech Talk #8
2. こんにちは • id:motemen / @motemen / @motemen.works • 株式会社はてな CTO • 趣味はポケモン対戦です
3. はてな サマーインターンシップ 2025 3
5. ずんだもん • 東北地方のマスコットキャラクター • 音声合成ソフト VOICEVOX で利用できることで有名 • 坂本アヒルさんの立ち絵とともに動画にも多数出演 • この人にしゃべってもらいます
6. 完成イメージ図 https://youtu.be/mnrNTDE8vkQ
7. Background: 対人戦勝てない問題 • 勝てない → 続かない → 強くならない ◦ ビジネスパーソンとして成長しない • 勝つために ◦ ① ふりかえりを行う ◦ ② 場数を踏む
8. OBS Studio • 無料で使える配信・録画ソフトウェア • 複数の入力（ソース）を組み合わせること ができる • WebSocket API などもあって高機能
9. 1. 対戦の録画と分析 • OBS Studio + 激安キャプチャカードによる録画 • 動画を解析して相手の構築と勝敗などを記録する $ uv run eapu2.py video.mp4 INFO 対戦相手の構築: パオジアン/カイリュー/水オーガポン/キョジオーン/ハバタクカミ/ミミッキュ INFO Scene change detected: SceneKind.PARTY_SELECTION INFO Scene change detected: SceneKind.IN_BATTLE INFO [02:24] 対面: ブリジュラスvsミミッキュ INFO [02:44] メッセージ: 相手の ミミッキュの おにび！ INFO [02:52] メッセージ: プリジュラスは やけどを負った！ INFO [02:55] メッセージ: プリジュラスの ステルスロック！ INFO [03:00] メッセージ: 相手の周りに とかった岩が ただよい始めた！ INFO [03:05] メッセージ: プリジュラスは やけどのダメージを受けた！ ...
10. 2. 配信でモチベを強制的に維持 • 誰も観てなくても、10分で辞めるみたいなことがしづらくなる • せっかくなのでずんだもん画像を配置してみると急にそれっぽくなる • 前述の解析スクリプトをリアルタイムに実行すれば喋れるのでは？ ◦ → ゲームそっちのけで開発へ…
11. 全体像
12. プレイ動画分析くん（ eapu2） • 動画のフレームから以下のシーンを検出、情報抽出 ◦ 選出画面 / 対戦中 / 結果画面 ◦ ※ 素朴に OCR & 画像のテンプレートマッチング ▪ OpenCV ▪ Vision API (macOS)
13. 技術: OBS Browser Source • Chromium ベースのブラウザ画面 をソースとして取り込む • ゲーム画面の上にHTMLを重ねるよ うなイメージ • 描画を更新すれば反映される • ページ上で再生した音声もいける • つまりなんでもできる
14. ai-streamer • ふつうのリアルタイムWebアプリケーションを書けばよい • サーバ: 台詞生成（OpenAI）→ 音声生成（VOICEVOX） ◦ POST /api/chat • フロントエンド（OBS 内）: ◦ Server-Sent Events でリアルタイムにコマンドを受け取り… ◦ 音声を再生 ◦ 表情を変える ◦ 字幕を表示
15. 実況っぽくする工夫 • レイテンシを下げるため Streaming response + 句読点で分割 ◦ for await (chunk of responseStream) しつつ ◦ 句読点がやってきたらすぐに音声生成へ • n秒間発話がなかったら雑談 ◦ 発話が終わったことはフロントエンド側でしかわからない ◦ ので、フロント側から POST /api/idle する • 過去の発話もプロンプトに含めて、一貫性を維持 ◦ これがないと毎回新鮮な反応を返すbotになってしまう…
16. いい感じにプロンプトしてやる 40文字程度の短文を3つほどで、対戦相手のパーティー を吟味してください。 相手のポケモン: リザードン・グラードン・… <こちらのパーティー情報> 個別のポケモンの性能情報として、以下の情報も使って ください: ---- リザードンは「ほのお・ひこう」タイプで、特に「サン パワー」と晴れ状態を組み合わせることで超火力の炎技 が使える特殊アタッカー。… ----
17. 🐱 🥄
18. Model Context Protocol
19. MCP経由で喋らせる • ずんだもんによるライブコーディングにも対応 • やります
20. prompt = """あなたは、VSCodeを使ってライブコーディング中のプログラマーです。 状況を伝えるので、視聴者にわかりやすく現在の状況を120文字程度で説明してください。 音声での発言を想定しているので、コードスニペットなどは使用しないでください。 語尾に『のだ』や『なのだ』をつけて話します。少しとぼけた雰囲気で、親しみやすく話してくだ さい。敬語は使わず、フレンドリーな口調を維持してください。 """ [[replace]] from = "AIStreamer" to = "エーアイストリーマー" [[replace]] from = "GitHub" to = "ギットハブ" [idle] timeout = 5000 prompt = "生活感のある雑談をしてください" 設定例
21. motemen/ai-streamer
22. Epilogue: ポケモン対戦、強くなったのか • Nintendo Switch が壊れたので遊べてません 😅 • Switch 2 も当選していない状態