Column
Feb 26, 2023 06:35 AM
Date
‣
Hashtags
プログラミング
日本語
Slug
AI_TRPG_cb4938a05f3f450db55064fcdae5dc14
Published
Published
OpenAI APIを使い、AIがゲームマスターとして行動の成功率を決めてくれるブラウザゲーム「TRPG_AI」を作ったのでその開発ブログを書きたいと思います。
現在APIの利用料金がかさんだため、ユーザー自身のOpenAIのAPIキーを公式ページから取得し、下記のリンクからプレイしてみてください。
プレイ動画は下のツイートから再生できます。
目次
1. ゲームの紹介
ゲームプレイの動画はツイートから見てみてください。
ありがたいことにたくさんの人に遊んでもらい、僕が思いつかない面白い勇者の行動とかをツイートしていただけたのでいくつかここに紹介します。
2. 背景と目的
僕は現在シアトルに留学中のコミュカレ生です。小学生のときにScratchでプログラミングを学び、ちょうど1年前からMLの勉強をはじめました。この1年で、Kaggleでデータサイエンスのコンペに参加したり、Bertを転移学習してレビューがサイト上で評価された数を推定するモデルを作ったりしていました。
最近FlutterやNext.jsを使って、AIを利用したサービスを作りたいと思っており、Stable Diffusionを使った動画フィルターであるD-Filterなども開発しています。
僕自身は都会のトム＆ソーヤ(小学生のとき好きだった児童小説)のゲーム・ブックをやったことがあるぐらいで、本格的なゲームブックやTRPG自体は未経験でしたが、自由度の高さやプレイする人によって物語が変わっていくという点に興味が湧き、TRPGをプレイしてみたいと思っていました。
そして、OpenAIのChatGPTが話題になったことで、TRPGのようなゲームを作ることができるかもしれないと思い立ち、今回の「TRPG_AI」を作ることにしました。
僕は小説やアニメで、「このすば」や「ワートリ」のように工夫して敵を倒していく作品が好きです。しかし、多くのRPGゲームでは会話の選択がゲームの進行に影響がない場合が多いです。もちろん、どんな選択もできるようなゲームを作ることは現実的ではありませんが、生成AIであるOpenAIのGPT-3 APIを使ってプレイヤーがどんな行動でもとれるゲームを作りました。
3. 技術的な話
基本的な構成はNext.jsでサイトを作り、「用意したゲームを成り立たせるプロンプト+ユーザーの入力文」をOpenAI APIのGPT-3に渡すことでゲームとして動くようにしています。
開発自体にかかった期間は1週間です。日にち順に何をどうやって実装したかなどを絡めて書いていきます。
2/10
Few-shot(少量のデモンストレーションを与え望んだタスクを解かせる手法)を使って、ゲームとして進行していくのに必要な文章や値を生成できるのではないかと思い、OpenAI APIのPlaygroundで色々試してみました。
その結果、上のようにゴブリンに遭遇や、迷宮で遭難といった「ゲームの状況」プロンプトと、数個の「勇者の行動」の例および行動成功確率を与えると、様々な「勇者の行動」に対して比較的正確な結果や、起こりうる状況の文章、行動成功の確率を生成してくれることがわかりました。
AIがゲームマスターとして振る舞ってくるということがわかったので、実際にブラウザゲームとして動くようにインターフェイス部分の開発をNext.jsではじめました。
2/11
Next.js自体は結構使っていて、Notionをエディターとして使えるブログシステムもNext.jsで作ったりしています。その開発ブログはこちらです。
「TRPG_AI」のデザインのためのcssフレームワークはTailwind.cssを採用しました。htmlのクラスにTailwind.cssが用意したutility classをいくつか書き込んでいくだけでデザインを適用させることができるので、実装速度がとても早いです。例えば w-full をdivに追加するだけで width: 100% がスタイルとして適用されます。
文字をChatGPTみたいにタイプライター形式で出したかったのでTypewriterJSというライブラリを使いました。
そして、エピソードを表示し、そのあとユーザーが入力した勇者の行動を、用意したプロンプトと合わせてAPIに送り、GPT-3にその行動の成功確率を考えてもらうところまで2日目で作れました。そのときの動画はこちらです。
2/12
開発3日目にゲームとして一応遊べるところまで完成させました。
そのときのスクショはこんな感じです。
このゲームの処理部分の流れはこのようになっています。
- ストーリー(ゴブリンに遭遇したなどの状況まで)表示
- 勇者の入力受付
- 事前に作ったプロンプトと、入力された勇者の行動をあわせてAPIを叩く
- 生成された文章をパース(状況文章や成功確率の取得)
- 成功確率をもとに乱数でどっちか決定(ゲーム要素、サイコロを降るような感じ)
- 次のエピソードへ
2/13~15
前日にサイトをVercelで公開し、何人かの知り合いに使ってもらってアドバイスを貰いました。
成功確率を表示するバーを分かりやすくしたり、プロンプトを変更したりしました。
以外と細かいところを作るのが大変で、説明文を追加したり、細かい文章を変更したりといったところが、ゲームとして大本の仕組みを作るよりたくさんの時間をかける必要があり、自分以外の人にも使われることを想定したウェブサービスを作ることの大変さを知りました。
自分用にストーリー配列や、プロンプト配列を編集できるエディターを作りました。その機能を使って、英語版のストーリーとプロンプトを書いてこっちも知り合いに遊んでもらい英語のおかしいところがないかなどのアドバイスを貰いました。
また、スクショ機能や、twitterへの投稿機能も作りました。
2/16
日中ゲームとして公開できるところまで完成させ、twitterへつぶやいてから寝ました。
2/17
寝ている間に多くの人に遊んでもらい、OpenAIの利用上限に達してしまったりバグがあったり色々トラブルが起きてしまい大変でしたが、自分の作ったものが多くの人に使ってもらえるということがとても嬉しかったです。
4. ツイートについて
コードを書いて分析したわけではありませんが、リツイートしてくれた人の多くはエンジニアではなく、TPRG好きや二次創作小説を書いている人たちでした。
今回のツイートで思ったのは動画の重要性です。プレイ動画で文章より分かりやすく情報量が多いのはもちろん、リツイート時に目に止まりやすいのは動画だと実感しました。
このツイートを見てゲームへのリンクを踏んでくれたのは1.9%でしたが、6.9%の人が動画を9秒時点まで、3.5%の人は最後まで見てくれました。
途中apiの制限に達してしまい、ユーザー自身のapiの入力をしないといけなくなってからは、ほとんどの人は独自api key誘導のポップアップが出た途端サイトから離れていってしまいました。
上はVercelの分析機能で、Top Pagesの /custom が独自apiを使うページのアクセス数です。ツイートからサイトをアクセスしてきてくれた人でも、75%の人はホームから /custom に行かずに帰ってしまいます。
また圧倒的にiosユーザーが多いので、モバイルを想定してサイトのUIを考えたのは正しかったなと思いました。
今回のブログを書くにあたって改めてデータを眺めてみましたが、やはり遊ぶのに手間が必要なところはボトルネックだなと実感しました。
5. あとがき
現在 buymeacoffee で投げ銭していただいた方に、β版のストーリーやプロンプト編集機能を試して頂いてます。「TRPG_AI」の今後の展望として編集機能に加え、誰でもそのストーリーを公開できるようにしたいなと思います。
動画としてみたときに視覚的にインパクトがあり面白いものは、OpenAI APIを使ったアイデア次第で作れそうだなと思いました。
ゲーム以外のエンジニア向けツールなどであれば、API key入力を最初に受け付けても抵抗が少ないかと思うので、そういったウェブサービスもいくつか作っていきたいです。
やはりLLMは高性能ですが、処理時間やコストが高いと感じました。
Stable DiffusionでもGPTでもユーザーごとに入力を受け付けるのではなく、開発側が事前に生成物を大量に作る形でのサービスや、転移学習でタスク特化させた、tfjsでブラウザ上でも動く軽いモデルを作り、それを利用したサービスを開発したいです。
自分のAPIキーを入力する必要はありますが、下のリンクからぜひプレイし、感想を #TRPG_AI でつぶやいてくれると嬉しいです。
