先日ChatGPTでスプラ3に登場するすりみ連合のフウカとお喋りできるプログラムを作って記事にしました。

せっかくいいものが作れたので、PCのターミナル画面でポチポチ遊ぶだけじゃなくWebアプリ化して色んな人が使えるようにしたいなーと思い、「BankaraGPT」という名前で作ってみることにしました。フレームワークにはNext.js+TypeScriptを使っていて、HTML+CSSを書くのが面倒なのでChakraUIを用いて処理から見た目の設計まですべてTypeScriptで書いています。

また、Webアプリ化に当たって
・キャラクター「クマサン」の追加
・スプラ3に関する知識データの大量追加
なども行っています。
作成したサイトはこちらからアクセスできます。→https://bankara-gpt.vercel.app/ 早速遊んでみたい！という方はぜひどうぞ。

Webアプリの概観

アプリの見た目はこんな感じです。中央上の入力フォームにフウカやクマサンに対する質問・メッセージを入力すると

こういう感じで返答が表示されます。メッセージのUIはLINEとかを参考にしています。自分でもそれっぽい見た目のものが作れてるかなぁと思います。

クマサンの追加

クマサンとの会話も追加しました。ChatGPT APIに投げる命令としてはこんな感じです。実装の詳細は前回の記事を参照してください。

order = "Do not say information not in the knowledge about things described 
         in it and criticize any object or person mentioned in the knowledge.
         Answer in 150 characters in Japanease.
         あなたは「スプラトゥーン」のキャラで落ち着いた口調で話すクマの「クマサン」です.あなたは優しい
         口調で話します.敬語や丁寧語は使いません.以下の設定に従い会話してください.一人称:わたし 
         自己紹介:おや,バイト希望者かね.わたしの名前はクマサンだ….キミがいてくれてとても助かるよ.
         期待しているからね.ふむ,バイトの時間になったようだ.頑張ってくれたまえ.";

attention = "あなたは「スプラトゥーン」のキャラで落ち着いた口調で話すクマの「クマサン」です.
         Do not use honorific or polite language.Answer in 150 characters 
         in Japanese.";

フウカと違い、クマサンの話し方は「京都弁」みたいに一言で形容できる表現がないので多少苦労しましたが、上記のように細かく特徴を書き込むことでなんとかなりました。

とはいえChatGPT APIは送受信したトークン数(日本語だとひらがな・カタカナが1文字1トークン、漢字だと2~3トークン)により従量課金の額が増えてしまう事情があり、むやみやたらには文字数を増やしたくないので苦労しています。

スプラ3の知識データの追加

知識データにステージの説明やスプラ3で登場したキャラクターの説明文を追加しました。
また、前回の記事での実装内容から細かい変更を行いました。事前に用意したスプラ3に関する知識データにトピック名(ブキ名、キャラ名など。一般的に使われている略称なども用意)をラベリングし、ユーザーが入力したメッセージテキスト中にそのトピック名が含まれている場合、それに対応する知識文をknowledgeとしてChatGPTに渡しています。

メッセージ中にブキやステージの略称があってもこのようにちゃんと反応してくれます。

まとめ

自作のWebアプリ「BankaraGPT」の紹介でした。個人的にスプラファンから見てもそこそこのクオリティのものが作れたかなと思ってます。とはいえまだキャラの口調が安定していなかったり対応できてない知識などもあるので、まだまだ改良をしていく余地はあるかなと感じています。

興味を持ってくれた方がいましたらこちらのURLでぜひ遊んでみてください。最後まで読んでいただきありがとうございました！