LINEスタンプジェネレータを作ってみた話（Google AI Studio）

LINEスタンプをAIで作るという発想

noteを見ていたら、次の記事が目にとまりました。

LINEスタンプは、これまで作ったことがなかったのですが、確かにAIを使えばLINEスタンプなど造作もなく作れそうです。

そう思って、試しにAIで作ってみたのですが、すぐに大きな壁にぶち当たりました。それは、

一度にまとめて40個作るのって、たいへ～ん

てこと。もっと少なくてもいいのでしょうが、どうせ作るなら多いほうがいいに違いありません。

そして、こらえ性のない私は、ちまちまプロンプトを作って、出力して、という繰り返しに、すぐ飽きがきてしまいましたとさ。

画像生成アプリの自作記事に遭遇

そんなとき、とてもタイムリーなことに、先日フォローさせていただいた「ごまめ」さんの次の記事が公開されました。

内容は、GoogleがAI開発者のために公開している「Google AI Studio」を使って、画像生成アプリを作ってみたというものです。ちなみに、この記事には、元ネタ記事があり、それが次です。

ざっくり説明すると、上記記事のオーナー「SHO」さんが画像生成アプリの「ひな形」となる「Prompt Flow Studio」のソースコードを公開。それを使って、「ごまめ」さんが自分用の画像生成アプリ「Gomame AI Studio」に作り替えてみた、という話です。

画像生成アプリで効率アップ

ちなみに、

画像生成アプリって何だ？

についてですが、AIで画像生成というと、通常はチャット画面でプロンプトを与えて、1枚（もしくはそのバリエーションを数枚程度）生成するという流れが一般的です。ChatGPTでもSoraでも、AIチャットはこの方法で生成するようになっています。

これをアプリ化（今回のはWebアプリ）することで、もっとユーザービリティの高いインターフェイスで、簡単かつ効率的に画像生成を行うことができるようになります。

具体例ですが、たとえば、画面にキャラクターの種類、ヘアスタイル、コスチューム、アングル、ライティングなどをメニュー化しておくことで、ユーザーはそれらを選ぶだけで画像生成できることになります。

「SHO」さんの「Prompt Flow Studio」は、AIで画像を生成するための機能が、汎用的かつ多機能な形で実装されていましたので、

「ひな型」としてこれは使える

と直感。

LINEスタンプジェネレータ

私が考えたLINEスタンプ作成アプリ、は次のような仕様にしたいと考えました。

• 一度に複数のLINEスタンプ用画像が生成できる

• 生成したスタンプ用画像はまとめて保存できる

• スタンプの画像が似たようなものにならないようにする

結果的に次のようなUIになりました。

実際に生成されたLINEスタンプイメージです。

UIの詳細は次の通りです。

基本設定

AIモデル

「高速モード」と「高画質モード」が選択できます。それぞれ、画像生成のAIモデルが異なります。高速モードのほうがリソースを食いません。有料API使用のときには従量課金の料金が違ってきます。

生成枚数

一度に最大8枚まで作成可能です。作りかえれば40枚まとめて生成もできますが、APIで使えるリソースを考えて制限してあります。

キャラクター

どんなキャラクターを描きたいか「ボブカットの女性」とか「かわいい三毛猫」などと記入します。このとき、キャラクター設定画像を添付することもできます。

参照画像を使用

キャラクター設定画像などの画像を読み込ませることができます。

オプションとバリエーション

LINEスタンプ用オプション

LINEスタンプならではのオプションを設けてあります。

• 背景なし（白背景にする）

• 吹き出しを入れる

• 文字を入れない（AIが表示する文字が割とデタラメです…なので文字は後入れしたほうがいいように思い、このオプションを加えました）

• キャラクターに白枠をつける（よくある装飾）

これらについては、正しく動作するかは保証はできません。あまりうまく機能しないかもしれません。

バリエーション指示

LINEスタンプでは、キャラクターが全部同じような表情、ポーズ、アングルだとおもしろくないと考えています。そこで、生成画像ごとに変化をつけることを考えて、「バリエーション指示」という欄を設けました。

バリエーション指示欄は、1行が1枚に対応していて、これにより「笑顔で手をする（おはよう）」とか、「両手で合わせてお辞儀（ありがとう）」といったバリエーション画像を生成してくれます。

バリエーション指示欄は手入力してもいいですが、「AIにおまかせ生成」ボタンを押すことでAIが自動的に生成してくれるようになっています。

次は、

「米粒を擬人化した、"こめっち"というキャラクター」
「3Dレンダリング風」

というキャラ設定でAIに生成してもらったバリエーション指示です。8枚を選択したので8行分作成されています。

ガッツポーズをしながら、キラキラの目で「がんばるぞ！」と意気込む「こめっち」
額の汗を拭い、ホッと一息ついて「おつかれさま」と微笑む「こめっち」
目に涙を浮かべ、しょんぼり肩を落とし「悲しい…」と呟く「こめっち」
顔を真っ赤にして湯気を吹き出し、「ぷんぷん！」と怒る「こめっち」

小さな布団をかぶり、すやすやと眠る「おやすみ」な「こめっち」
両手で大きなハートマークを作り、最高の笑顔で「ありがとう！」と言う「こめっち」
親指を立ててウィンクし、「OK！」と自信満々に頷く「こめっち」
目をこすりながら、大きく伸びをして「おはよう！」と言う「こめっち」

「日本語プロンプトを生成」ボタン

画像に関する情報から、日本語プロンプトを作りたいときに押すボタンです。

プロンプト

日本語プロンプト

「日本語プロンプトを生成」ボタンを押したときに、日本語プロンプトを表示する場所です。

「英語プロンプトへ反映」ボタン

日本語プロンプトを、英語プロンプトに変換するときに押すボタンです。日本語プロンプトが存在しないとアクティブになりません。日本語プロンプトを英語プロンプトに翻訳する以外に、基本的なプロンプトを追加します。

英語プロンプト

「英語プロンプトへ反映」ボタンを押すと、英語プロンプトが表示される場所です。

「画像生成」ボタン

画像を生成したいときに押すボタンです。英語プロンプトと、1枚ごとのバリエーション指示が、画像生成AIに対して送信されます。

生成画像グループ

生成画像

プロンプトの下にある「画像生成」ボタンを押して生成された画像は、ここに表示されます。

「もう一度生成」ボタン

画像生成しなおしたいときに押すボタンです。

「すべて保存」ボタン

生成された画像を、まとめてローカルディスクに保存するときに押すボタンです。

APIキー設定

APIキー設定

APIキーを設定するためのダイアログです。「Google AI Studio」のプレビュー画面で実行しているときには、デフォルトのAPIキーが自動的に使用されるようにしています。

LINEスタンプを生成する手順

指定した数量のLINEスタンプ画像を生成し、保存するまでの最短ルートを記します。

1.「AIモデル」を選択する

2.生成枚数を選択する

3.キャラクターを入力する

4.「AIにおまかせ生成」ボタンを押す

5.「英語プロンプトへ反映」ボタンを押す

6.「画像生成」ボタンを押す

7.「すべて保存」ボタンを押す

配布と使用上の注意

アプリのシェア

本アプリは次のURLでシェアしてみました。興味あるかたはご利用ください。

※アプリへのアクセス方法については「アプリを実行できるようにするまで」をご覧ください。
※もしアクセスできなかったときにはコメントで教えてください。

APIキーについて

本アプリは、APIでAIを呼び出しているため、実行するにはAPIキーが必要です。Google AI Studio上であれば、デフォルトのAPIキーが使用されるため、無料であっても割り当てリソースの範囲で生成できます。

割当量を超えた場合には制限がかかり、生成に失敗します。制限がかかった場合には、数分から1日、時間を置くことで制限が解除されるようです。

アプリを実行できるようにするまで

シェアしたアプリ「LINEスタンプジェネレータ」について、実際に、自分の「Google AI Studio」環境で実行する手順はこちらです。

1. シェアしたリンクにアクセスする

「アプリのシェア」のリンクをクリックします。

2. Goolgleアカウントでログインする

ログイン画面が表示されたら、自分のGoolgeアカウントにログインします。

3. 次の警告が表示されるので先に進める

「自動保存します」という警告が出るので「Got it」（わかりました）をクリックする。

4. 次の警告が表示されるので先に進める

「このアプリは別の開発者によるものです」という警告が出るので、「Continue to the app」（アプリに進む）をクリックする

5. 次の警告が表示されるので先に進める

「クッキー使用の同意」が求められるので「同意する」をクリックする。

6. アプリ画面が表示される

次の画面が表示される。これは、シェアしたアプリが表示されている状態であり、まだ実行はできない。

7. 「Copy app」ボタンを押す

画面右上の一番右のアイコン（マウスをあわせると「Copy app」と文字表示される）をクリックする。

8. コピー作成ダイアログで「Save」をクリック

「Make a new copy in Drive」（ドライブにコピーを作成する）ダイアログが表示されるので「Save」（保存）ボタンをクリックする。
このとき、「Copy of LINE_gen_Ver0.4」のように、ファイル名の先頭に「Copy of」が追加される。

9. アプリがコピーされる

数秒待つと、自分の開発環境にアプリがコピーされ、コピーされたアプリ画面になる。コピーされたアプリ画面になっているかは、アプリの名前が「Copy of LINE_gen_Ver0.4」となっていることで確認できる。

10. アプリが表示される

アプリが表示される。
このときブラウザの横サイズを広くしたほうが、一度に全体が表示されるのでお勧め（下記画像のようになる）。
赤枠部分がアプリ本体。

11. 手順に従ってアプリを操作する

前の章の「LINEスタンプを生成する手順」に従って、アプリを操作する。

謝辞

本アプリは、「SHO」さんの「Prompt Flow Studio」をベースにしています。いろいろ説明しましたが、基本的な部分は、オリジナルのままといってもいいでしょう。この「ひな形」がなければ、こんなにスピーディーに作ることはできませんでした。

「SHO」さんおよび、このアプリの存在を取り上げてくれた「ごまめ」さんには、心から感謝です。ありがとうございます。

追記：MAX40バージョン

試しに、一度に最大40枚までの生成を試みるバージョンとなる、

LINE_gen_Ver0.5_max40

を作成しました（以後MAX40と呼称）。40枚となると、APIのリソース不足で失敗する可能性が高まるわけですが、実際にどうなるかの検証も兼ねています。

シェアリンクはこちらです。

※アプリへのアクセス方法については「アプリを実行できるようにするまで」をご覧ください。
※もしアクセスできなかったときにはコメントで教えてください。

UIについて（生成枚数）

MAX40では、生成枚数の選択に、10枚、20枚、30枚、40枚が選択可能になっています。

MAX40のメリット

40枚を選択しておくと、「バリエーション指示」の「AIにおまかせ生成」ボタンを押したときに、一度に40枚のバリエーション指示を作成してくれます。

次は、キャラクターを「萌えキャラ」と設定して、実際に生成してみたバリエーション指示です。

おはよう (眠そうに目をこすりながらあくび)
ありがとう (両手を胸の前で合わせてお辞儀、満面の笑み)
OK (ウインクしながら親指を立てる)
悲しい (涙をこぼしながら肩を落とす)
怒り (頬を膨らませて、頭から湯気)
おやすみ (すやすやと眠り、Zzzマーク)
やったー！ (両手を上げて飛び跳ねる、輝く笑顔)
ごめんね (困った顔で手を合わせる)
いいね！ (にっこり笑顔でサムズアップ)
え！？ (目を大きく見開いて、口をOの形に)
がんばれ！ (拳を握りしめて、応援ポーズ)
うーん… (顎に手を当てて、考え込む)
よろしくね！ (片手を振って、にっこり挨拶)
おつかれさま (座り込んで、ほっと一息)
わーい！ (両手を広げてスキップ、嬉しそう)
そうだね！ (指を一本立ててひらめきポーズ)
無理… (両手で顔を覆って、しょんぼり)
いってきます！ (元気よく手を振って、笑顔)
ただいま！ (ドアを開けて、ほっとした表情)
大好き！ (両手でハートマーク、とびきりの笑顔)
びっくり！ (両手で口を覆い、目を見開く)
何それ？ (首を傾げて、疑問符)
早く！ (腕を組み、つま先をトントン)
へえ～ (感心したように、目をキラキラさせる)
じー (一点を見つめて、無言のプレッシャー)
了解！ (片目を閉じて敬礼ポーズ)
おめでとう！ (クラッカーを鳴らし、満面の笑顔)
泣 (大粒の涙を流して号泣)
うわあ… (顔色を青くして、絶望的な表情)
マジ！？ (口元に手を当てて、驚きで固まる)
えへへ (照れたように頬を赤らめて、目をつむる)
こっちだよ！ (片手を上げて、優しく誘導)
集中 (真剣な表情で、一点を見つめる)
どうしよう… (頭を抱えて、焦る表情)
プンスカ！ (頬を膨らませて、腕を組みながらジト目)
キラキラ～ (笑顔で両手を広げ、周りに星が舞う)
もぐもぐ (美味しそうに何かを食べる)
ん？ (耳を傾けて、小首を傾げる)
お願い！ (両手を合わせて、上目遣いで懇願)
バイバイ！ (笑顔で手を振る)

40枚一度に生成してみた結果

そのまま40枚の生成を試みた結果、次のようになりました。

結果的には、10枚生成され、それ以外は、

API呼び出しに失敗しました。詳細はコンソールを確認してください。

という警告が表示されました。APIのリソースを使いつくして失敗となったようです。状況によって結果は変わるかもしれませんが、リソースが不足するとこのような警告が出ることがわかりました。

一方、10枚は生成されました。スクロールしてみたら「すべて保存」ボタンが見えたのでクリックしたら保存もできました。

MAX40の使い方のセオリー

次のような使い方をするのが妥当かもしれません。

1. いったん生成枚数を40枚にして、40行分のバリエーション指示リストをゲットしておく

2. 生成枚数を10枚程度にして、バリエーション指示に10行ずつ貼り付けて生成する

生成枚数を10枚程度にして「AIにおまかせ生成」をすると、4回繰り返したときに毎回同じような結果になる可能性が高いです。そこで、バリエーション生成のみ40枚まとめて作成しておいて、あとはAPI警告が出ないように少ない枚数で少しずつ生成すると良いだろうと思われます。

例：バリエーション指示を次のように10個ずつ分割して作成する。

おはよう！と元気いっぱいに手を振る笑顔
ありがとう！と両手を合わせてにっこりお礼
OK！と親指を立ててウィンクするポーズ
えーん…と涙をこぼしてしょんぼりする表情
プンプン！と頬を膨らませて怒るポーズ
やったー！と飛び跳ねて喜ぶ満面の笑み
おやすみ…と布団に潜り込んで目を閉じる
ごめんね、と手を合わせて困った顔
びっくり！と目を丸くして口元に手を当てる
うーん…と顎に手を当てて考え込む表情

大好き！と両腕を広げてハートマーク
がんばれー！とポンポンと応援するポーズ
はーい！と元気よく返事して挙手
てへっ、と照れて頬を染めるポーズ
ふふふ、と口元を押さえて微笑む
おつかれさま、とほっと息をつく表情
いってきます！と鞄を持って笑顔で出発
ただいま！と玄関で手を振る元気な姿
ドンマイ！と肩を叩いて励ます表情

わーい！と両手を上げてはしゃぐ姿
しーん…とポカンと口を開けて呆れる表情
Zzz…とすやすや眠る横顔
もぐもぐ、と美味しそうにご飯を食べる姿
きゅん！と胸に手を当ててときめく表情
ぎゅー、と抱きしめるようなポーズ
え？と小首を傾げて疑問に思う表情
やだー！と両腕をバツにして拒否するポーズ
キラキラ！と瞳を輝かせて期待する表情
あちゃー…と頭を抱えてがっかりするポーズ

ルンルン♪とスキップする楽しげな姿
うわぁ…と少し引いたような困惑の表情
ガーン…とショックを受けて固まる姿
そろそろね、と時計を見て促すポーズ
よろしくね！とぺこりとお辞儀
ほっ…と安堵のため息をつく表情
えへへ、といたずらっぽく笑う
さむいー、と震えながら身を縮めるポーズ
あついー、と汗をかいて扇ぐポーズ
にゃーん、と猫のポーズでかわいくアピール
ばいばい！と手を振って笑顔で別れ

有料APIキー

制限を受けずに、「えいやっ」と一度に40枚生成したい！　という場合は有料APIキーを使えば可能になるものと思われます（試してないですが・・・）。

追記：MAX40バージョン：ウェイト版

MAX40で、生成数に40枚を指定するとAPI呼び出しに失敗という警告が表示されて、画像生成に失敗します。これを回避する、

LINE_gen_Ver0.6_max40_wait

を作りました。具体的な回避策ですが、状況的に考えて、

「高速モード」であれば一度に10枚の生成は可能
また、1分程度の間をあければ、再び生成可能

そうです。そこで、新たに次の機能を追加しました。

• 「一度に生成する枚数」の指定

• 生成後の「間隔」の指定

「一度に生成する枚数」は、4枚、6枚、8枚、10枚（デフォルトは10枚）から選択可。「間隔」は、1分、2分、3分（デフォルトは1分）から選択可にしてあります。

検証結果

「生成枚数」を40枚、「一度に生成する枚数」はデフォルトの10枚、「間隔」もデフォルトの1分、にして実行してみました。動作としては、

10枚生成　→　1分ウェイト　→
10枚生成　→　1分ウェイト　→
10枚生成　→　1分ウェイト　→
10枚生成　→　終了

のように処理されました。全部で3分＋アルファかかったわけですが、特に警告もでずに40枚の画像が生成されました。思惑通りとはいえ、ちゃんと生成できたことに驚きです。

ただし、その後、あまり時間をおかずに同じ条件で再度生成したところ、API警告がでまくりました。結果的には15枚生成できただけで、それ以外は失敗でした。

無料APIで大量の画像を生成する場合には、どらくらい空ければ失敗しないか、わかった方がいたら教えていただけると嬉しいです。

「すべて保存ボタン」が見えない

1つ問題がありました。それは、

画像が多すぎて「すべて保存」ボタンが表示されない問題

です。せっかく生成した画像が保存できないのは悲しいです。これについてはブラウザの横幅を小さくして、左右の枠を縦並びにすると見えるようになると思うのでやってみてください。

LINE_gen_Ver0.6_max40_waitアプリのシェアリンクはこちらです。

以上。