AIが写真をモンスターに変換！「モンスター占い」Webアプリ【ソース有】

はじめに

以前、OpenAIのAPIを利用したWebアプリを非常に簡単に作成・実行・配布する方法を提案させていただきました。その記事を読まれていない方は、まず、こちらをご覧下さい。

せっかくなので、この仕組みを利用した何かしらのWebアプリを作ってみたいところです。可能であれば、簡単に作成出来、Webならではのコンテンツの方が面白そうですよね！

…ということで、今回はブラウザのWebカメラを利用したマルチモーダルなアプリケーションを作成してみたいと思います！

なぜ、このWebアプリなのか？

私が作成したコンテンツで、チャットモンスター…通称「チャトモン」というコンテンツがあります。

チャトモン（ChatMon）Webアプリを遊ぼう！

これは２枚のモンスター画像を用意して闘わせる…という遊びです。非常にシンプルで、大人も子供も簡単に楽しめるコンテンツなのですが…ひとつ問題があります。
それは…

「対戦させる画像を準備するのが大変！」

…というところです。
何回かチャトモンのイベントを行いましたが、結構な頻度で発生したのが…

「画像を生成するのに時間がかかるため、画像生成で行列が出来、対戦側に空き時間が出来てしまう！」

…という問題です。
チャトモンのイベントは親子連れが多く、親子がコミュニケーションとりながらお子さんが…「思い通りの絵が描けるまで、こだわりたい！」…とやっていると、どうしても時間がかかってしまいます。

そこで、プロンプトエンジニアリングの知識も不要で、時間をかけずに画像生成が出来、かつ、生成AIの面白さも体験出来るコンテンツがないかを考えてみました。
そのコンテンツの名前は…

「モンスター占い！」

…になります！

「モンスター占い」とは？

「モンスター占い」とはどのようなものでしょう？
簡単に説明すると…
ブラウザのWebカメラで貴方の顔の写真を撮影し、その顔からAIが人相学や想像力を駆使し、「どのようなモンスターのタイプか？」を占い「あなたの未来と過ごし方のアドバイス」が表示されるというコンテンツです！そして、その貴方をイメージしたモンスターの画像まで生成されます！

…つまり、占いで生成されたモンスターを自分の代理として「チャトモン」でお友達と対戦出来る！という事なのです！

対戦までの流れは下記のようになります。

顔写真撮影 → 占い結果の表示 → モンスター画像が作成 → モンスターの画像から能力表示 → お友達モンスターと対戦

こんな流れで、自分という素材を使って、いろいろな体験と発見が出来るような…そういう世界を目指す！という感じですね！

自分の写真が恥ずかしい…という場合は、自分の描いた絵を写真に撮っても同じ事が可能です！

モンスター占いの遊び方

このアプリを動かすと、このような画面になります。

画面イメージ

左上に「Webカメラ」、左下に「貴方をモンスターにした画像」、その間に「写真の人を占う」ボタンがあります。
右側に「モンスター占いの結果」が表示されています。

なお、左上のWebカメラの部分ですが…劇画調の絵が描かれていますが、実際はここにカメラで映された貴方の顔が表示される事になります。自分の顔が映るのは恥ずかしいので差し替えさせていただきましたw

これをベースに操作方法をご説明します。

① のステップ

まず、ブラウザを開いたらカメラの許可を求められるので許可をします。ノートPCの場合はオンライン会議などで自分の姿が映るようにカメラがついているはずです。そこのカメラから自分の姿が映されますので、すぐ下の「写真の人を占う」ボタンで写真を撮影しましょう！
この写真はAIで処理しますのでOpenAIに送信されます。情報漏洩は無いかと思いますが…節度を超えるような写真は送らない方が良いかと思います。なお、このWebアプリ自体では写真の保存はしません。

② のステップ

「写真の人を占う」ボタンが消え、Webカメラの下に撮影した写真が表示されます。そして…しばらく待つと右に占い結果が表示されます。占いの結果は表情にも左右されますので、いろいろ試してみると面白いかもしれません。人ではなくても占えます。
真剣に考えず、ネタとして楽しむぐらいでいきましょう！

③ のステップ

これで、最後です。
さらに待つと、Webカメラで撮影した画像がモンスターの画像に差し変わります。その画像をチャトモンなどに利用したい場合は右クリックして画像を保存するようにして下さい。続けて①から操作できますが、今表示されているモンスター占いの結果やモンスター画像は消えてしまいますので、必要であれば手作業で保存しておいて下さい。

セキュリティ的な問題について

モンスター画像が生成されたので、これをワンクリックでダウンロードさせたり、その絵を元にカード化させたりしたくなると思います。しかし、これはラウザのセキュリティエラーに引っかかり、うまく動作しません。そのため、画像が欲しい場合は右クリックで保存する以外ありません。
これをどうしても何とかしたい場合は、こちらを参考にしてみて下さい。

こちらについては、私の方でもまた試してみたいと思います。

もうひとつの問題として、ブラウザのカメラ機能はHTTPSでの通信が必須なる事が挙げられます。このため、普通のホームページサービスでは対応していない可能性があります。多くの人に公開したい場合は注意して下さい。

ただし、今回のように、自分のPCで実行する（ローカルホストでの実行：http://localhost）ではHTTPでもカメラ機能を使うことができます。

このWebアプリのプログラムソース

このWebアプリは「HTMLファイルひとつでOpenAI-APIを使いこなす！」という過去の記事の通り…

「今回もHTMLファイルひとつで動きます！」

プログラムのソースファイルは下記の通りとなります。htmlフォルダに適当なサブフォルダを作成し、下記のソースをindex.htmlというファイル名で保存しましょう。