画像生成アプリを自作したよ！その名も「Gomame AI Studio」【Google AI Studio】

こんにちは、ごまめです！🙌

最近こんな感じで、

サムネイルにごまめちゃんの1枚絵を使うことが多くなってきたんですよ。

『Nano-Banana』を使えばすぐにできることではあるんですが、

と思っていたところに、昨日こんな記事が。

なんとSHOさんが自作で画像生成アプリを作ったと言っているではありませんか。

「ま～た面白そうな記事を出して🥰」

と最後まで読んでみると

「HTMLファイルを公開している・・・だと！？」

「・・・🤔」

「もしかして、SHOさんのこれをつかえば、ごまめちゃん専用の画像生成アプリが作れちゃうんじゃないか！？！？」

というわけで、今回はこのSHOさんのHTMLファイルをありがた～～～く使用させていただき

ごまめちゃん画像に特化した画像生成アプリを作ってみた！

という内容の記事となります！

今回、アプリの作り方まで書くととんでもない量になるので

「どんなことをしたか」

だけを語ってます😌

質問等はじゃんじゃん受け付けてますので、是非気になった部分があればコメントしてくださいね🙌

それでは早速まいりましょう！

📝完成したアプリ！

SHOさんのHTMLファイルをもとに、こねくり回すこと約1時間半・・・

ついに「Gomame AI Studio」が出来上がりました🎉🎉🎉

UI部分をほぼ流用して作れたとはいえ、これが90分で実装出来ることにマジで感動してます。

本当にSHOさんありがとう🙏

📝使用例

では、ざっくり使い方を見ていきましょう！

今回のサムネイルの画像を出力した例で説明しますね🙌

出力まで、たったの４ステップのみ！

✒️STEP1 : 好きなごまめちゃんを選ぶ

✒️STEP2 : シーンを設定

✒️STEP3 : ボタン押下でプロンプトが自動生成

✒️STEP4 : ボタン押下で画像を生成！

📝どんなことをやったのか

さてここからは、どんな機能を実装したかを簡潔に書いていきます。

SHOさんが作っていたのは

「プルダウン形式で、簡単にプロンプトが作成できる汎用的な画像生成アプリ」

でした。

基本は、プロンプトから画像を作るのがメインで、元画像がある場合はアップロードをする感じでしたね。

それを、ごまめちゃん専用の画像生成アプリにするために、以下の3機能を実装していきました。

✒️ごまめちゃんを毎回アップロードしなくてもいいように設計

こんな感じで、クリックするだけになったので、めちゃくちゃ便利です🥰

👉こだわりポイント

ごまめちゃん画像をCloudflareに置き、随時APIで呼び出すよう設計してます。

GoogleDriveは、認証処理を実装するのがめんどくさかったという理由で、不採用にしてます。

Cloudflareは、アップロードした画像にURLが生成されるため、こういう時に活躍してくれますね🙌

✒️元画像ありきのUIに修正

プロンプトのみで画像を生成する機能は、今回のメイン機能ではありません。

なので、「ごまめちゃん画像を使って生成する」という導線を基本としてUIを作り変えてます。

具体的には

「ごまめちゃんモードをデフォルトで選択」
「ごまめちゃんボタンを配置」
「ネガティブ記載欄を詳細タブに」

などですね。

UIに関しては、正直もっと考えることはあると思います。

けど、UIって考えだしたらきりがないですよね。

一旦最低限を実装するのが鉄板だということで、こんな感じにしてます。

✒️ごまめちゃんモードとフリーモード

自由記述で画像生成できる機能も残しました。

👉こだわりポイント

フリーテキストといいつつ、人物パラメーターには以下をデフォルト入力してます。

そう、これはごまめちゃんのパラメーターなんです！

この機能を使うと、より独創的なごまめちゃんになるので、それはそれでいいですよね！

なので、あえてこの機能は残しています💪

✒️さいごに

いかがでしたでしょうか！

まさに、ごまめちゃん専用の画像生成アプリになったんじゃないかなと思います！☺️

時間も限られていたので、とりあえずミニマムな機能ですが

今後はより効率化したり、機能を追加してもいいな～と思ってます。

今回、このようなことをやろうと思えたきっかけを作ってくれたSHOさん、本当にありがとうございます🙏

SHOさんのHTMLファイルが神すぎて、めちゃくちゃ満足いくアプリが作れました🥰

私はUIダメダメ人間なので、本当に助かりました😂

あ～～～これ作るの、超楽しかった～～～！！！

こういうのずっとできちゃうから、だれか止めてほしい(切実)