東京AI祭のイベントでのご紹介となりました、Webアプリ版のチャトモン（ChatMon）を皆さんに遊んでいただけるように公開いたします！

チャトモン（ChatMon）について


チャトモンが何か？を知りたいという事でしたら、この記事が最も詳しいと思いますので、よろしければ読んでいただければと思います。

https://note.com/t_tokuwa/n/nf379f3899094
ChatGPT時代の新しいモンスター対戦ゲーム “ChatMon” 【CDLE名古屋×CDLE生成モデル コラボイベント：入場無料】｜徳和 貴成
画像一枚あれば対戦可能！ChatGPTを利用した新しい対戦ゲームのご提案です！ 私はCDLEというコミュニティで、CDLE名古屋というグループのリーダー、およびCDLE生成モデルというグループの運営サポーターも担当しております。 そして、そのCDLE名古屋とCDLE生成モデルがコラボし、生成AI時代の新しい対戦ゲームを提案します。 その名も… ChatGPT モンスターバトル！！ 略して…ChatMon（チャトモン）です！ CDLE内の告知画像 参加は簡単！モンスターの画像を一枚用意するだけ！あとはAIが画像を元に対戦を行なってくれます！ この対戦ゲームのイベントをリアル開催
note.com

チャトモン（ChatMon）のGPTｓも作成しました。下記のURLからご利用できます。
https://chat.openai.com/g/g-RnQMbkHGI-tiyatutogptmonsutabatoru-chatmon
ChatGPT - チャットGPTモンスターバトル（ChatMon）
好きな画像や生成した画像でバトル！ChatGPTを使って白熱のバトルを体験しましょう！！ - Provided by CDLE Nagoya
chat.openai.com

WEBアプリ版チャトモンの遊び方

チャトモンを遊ぶにはOpenAIのAPIキーが必要です。もちろんご利用者様の契約になりますので、遊んだ分のお金がかかりますので、ご注意下さい。APIキーの情報漏洩については発生しないような仕組みにしております。詳しくは次章を参照下さい。

利用するモデルについてです。
画像からモンスターの能力を決めてカード化するところですが、「gpt-4-vision-preview」（最新版ではGPT-4oに変更されました）という画像から文字を出力モデルを利用しています。ここは比較的お金がかかりますので、使いすぎに注意してください。

対戦の方については「gpt-3.5-turbo」（最新版ではGPT-4oに変更されました）というモデルを利用しています。こちらもお金がかかりますが凄く安いですので、対戦については気にせずガンガン使っていただいても問題ありません。

いずれにしても、最小限のAPIの呼び出しかしておりませんので、一回の対戦で多くお金が発生することはございません。

【動作環境】
・Google Chrome
・Microsoft Edge（Chromium）
※OSはWindows10/11。Macでも動いたという話あり
※スマートフォンやタブレットはアップロードが出来ないため未対応


まず、下記のURLを開いてください

http://www1.m2.mediacat.ne.jp/tokuwa/ChatMon/
Chat Monster Battle(ChatMon)
www1.m2.mediacat.ne.jp

① 「APIキーを入力して開始」を押して下さい
image.png 2.82 MB
② ダイアログが表示されますので、Open AIのAPIキーを入力してください
        ※APIキーの入力についてセキュリティ的に大丈夫？という方は次の章を参照下さい。
image.png 3.53 MB
③ 「モンスターバトル」をクリックします。
image.png 2.54 MB
④ まずは「左側のカード」をクリックします。
image.png 3.01 MB
⑤ 「モンスターを呼ぶ」をクリックします。
image.png 3.11 MB
⑥ ローカルPC上に保存している、ご利用者様が用意した戦わせたいモンスターの画像を選択します。
image.png 1.14 MB
⑦ モンスターのカードが生成されますので、しばらくお待ちください。
image.png 3.22 MB
⑧ 生成されました！「戻る」で戻って下さい。
image.png 2.46 MB
⑨ 「右側のカード」をクリックし、同じようにモンスターカードを生成します。
image.png 2.79 MB
⑩ カードが２枚そろうと「モンスターバトル」ボタンが押せるようになります。
image.png 2.77 MB
⑪ 「モンスターバトル」ボタンを押したら「戦いの準備」となります。お待ちください。
image.png 2.67 MB
⑫ 戦いの準備が終わったら対戦です！対戦をお楽しみください！
image.png 2.42 MB

APIキーの情報漏洩は発生しないの？

Open AIのAPIキーの入力がありますので、そのキーが他者に知られてしまうのでは？という懸念があるかと思います。結論から言いますと・・・

「その心配は不要です！！」

このWEBアプリ版チャトモンですが・・・「静的コンテンツです」それがどういう事かと言うと・・・

Open AIのAPIキーの入力は「HTMLとJavaScriptを受信した後」ですので、その後にチャットモンのサーバーへのアクセスは全くありません。
普通のネットサービスのオマケとしてついてくるホームページサービスでの公開です。このようなホームページサービスは一方的に情報を見るのみですので、Open AIのAPIキーを送って保持する仕組は実装できません。

もちろんOpen AIにはAPIキーをHTTPS通信で送っていますが、それ以外のサイトへのアクセスは行っておりません。（全てJavaScriptで処理しますので必要がないからとなります）
ネットワークの監視が可能でしたら、アクセスがない事を確かめていただだけるのですが…簡単ではないと思いますので、そこは、信用していただければと考えております。

このような公開方針にした理由

ChatMonはChatGPTを使ったサービスですが、一般的にはサーバー側でOpenAIのAPIを呼び出すのが普通です。しかし、その場合はAPIの利用料、サーバーでプログラムの実行する費用など、サービス提供側が金を払わなくてはいけません。

私たちは営利企業ではなく一般企業に勤めているメンバーが集まった有志団体です。そのため、利用料をいただいたり広告をつけてお金を貰ったりする事は簡単ではありません。これらのサービスにかかる費用は自分のポケットマネーから必要なお金を払うことになります。

その為、サービスを公開して多くの方々が制限なく使い始めると…その費用は結構な額になる可能性があります。それもあり、このようなサービスの公開には踏み切れない現状がありました。ですが、今回のような仕組みの場合、サービス提供側が全くお金をかける必要がありません。ですので、安心して公開できたという事になりす。

今後、この仕組みを利用し、GPTsみたいにカスタムAIをWebアプリとして提供出来る仕組みを展開できたらとは考えております。

さあ！対戦画像を用意して、チャトモンを始めましょう！

image.png 575.28 KBぜひ！楽しんでください！



イベントなどで使いたい場合、ご連絡いただければと思います！

（連絡先）
CDLE名古屋    代表：徳和 貴成（Takanari Tokuwa）
MAIL：t-tok@a.email.ne.jp