個人開発でPromptMakerというAI画像用のプロンプト生成・管理ツールを作成しました。全体としては1週間足らずといった感じですが、開発全体のこだわりなどを備忘録でまとめておこうと思います。
開発して思いましたが、定期的に呪文生成してる人って意外と少なそうで、結構ニッチなアプリになった気がします笑
どんなツール？
プロンプトに使用するキーワードの組み合わせを設置してアウトプットボタンを押すとランダムな組み合わせを出力するシンプルなプロンプト生成ツールです。また、データをローカルストレージに保存していてjsonデータでのエクスポート機能も置いたのでプロンプトの管理ツールとしても使用できます。
ユーティリティとしては、無数のバリエーションを管理できるので、良いアウトプットができるプロンプトを見つけたら、キーワードのパターンを追加することでそのプロンプトに沿った新たなプロンプトを無数に生成できるようになります。
具体的には以下の様なユースケースを想定しています。
- キャラクターデザイン用のプロンプトを無数に作成する（性別、人種、年齢など定性データの組み合わせでバリエーション豊かなプロンプトを生成する）
- NFTコレクション用のイラストを作成する
- 単純にプロンプトを管理する
- プロンプトをメンバー間で共有して何らかのプロジェクトを合理的に進める
- その他
なぜ、作りたいと思ったのか？
開発のきっかけを簡単に整理していきます。
背景
2022年の一番の衝撃はChatGPTでしたが、StableDiffusionをはじめとしてAIによる画像生成ツールの台頭も衝撃的でした。
AIによる画像生成ツールをいくつか試した結果、私はmidjourneyがクオリティ高く画像を生成できて気に入りました。さまざまなプロンプトを試しているとパラメータ調整と組み合わせの問題にあたり、手動でキーワードやその組み合わせを調整するのが面倒に感じ、これを解決したいと思ったことが開発のきっかけです。
ざっと探したところ、いくつかプロンプトの生成に使えるツールは見かけたものの、自分に適したプロンプト生成用のツールは見当たらなかったので自分で作ることにしました。
考え方
組み合わせるキーワードが増えるごとに組み合わせの数は指数的に増えていきます。仮に兆単位（10^12）の組み合わせが発生した際、全てを一度に出力するのはテキスト量やファイルサイズなどの観点から扱いづらいと思います。
また、AI画像生成時は同じキーワードでも出力される画像自体もランダムであるので、キーワードの組み合わせが重複していることは気にならない特徴があります。
であれば、カラムごとにキーワードを抽出して並び替えるだけシンプルなアプリでプロンプトを管理・生成する用のアプリができそうです。
どのように開発したのか？
技術スタック
- figma
- Typescript
- React
- TailwindCSS
- DaisyUI
- jotai
初期UIはDaisyUIで適当に作って、何となくアプリケーションのイメージができた段階でfigmaでUI作成、開発を進めていきました。
アクセスを限定するため簡易的なログイン機能を置いていましたが、あまり意味ないなと思ってログイン機能は排除しています。
データはjotai v1系でローカルストレージに保存しています。（v2ではdelayInit機能が外されて思うような挙動にならなかった）
モダンな開発環境ですが、実装内容は恥ずかしいくらいアナログです。外部DBに接続していないので、低負荷でサーバー側の負担もないのが楽で良き。次はAIまわりのAPIを使った開発とかも考えています。
工夫した点
UI/UX面
1. サンプルデータを置いてみた
サンプルデータを置いて、初回アクセス時に使用イメージがつきやすいようにしました。
2. テキストの前後にテキスト配置可能
接頭語や接尾語などを配置しやすい設計にしました。
例えば、a piece of xxx, yyy backgroundのように前後に固定の単語を置きたい場合があったので、自分が使いやすいよう置いています。
3. ドラッグ＆ドロップで並び替え
カラムの並び替えも簡単にできます。
※スマホだとあまりに使いづらかったのでPC限定。
4. jsonデータをインポート/エクスポート
作成したデータはjson形式でインポート・エクスポートできます。自身のプロンプト管理はもちろん、他者への共有もできるようにしました。
5. タブで複数のプロンプトのテンプレートを管理
タブで複数のテンプレートを管理できます。
データ構造は、一つのオブジェクト配列の中に全てのデータがあり、そこにデータを追加・削除していく形で完治しています。
開発面
1.DaisyUIで開発工数の圧縮
DaisyUIを入れてUI開発の工数を削減しました。DaisyUIは無料で使えて使い勝手の良いコンポーネントライブラリです。
2.ローカルストレージで全部管理
データはほぼjotaiのローカルストレージに突っ込んでいます。一度設定してしまえば、グローバルに変数を呼び出して使えるので簡単です。ただ、jotai v2になって仕様が変わってしまったため、仕方なくv1系に戻して使っています。
jotaiのストレージ管理はいいなと思いましたが、v2で仕様が変わったため最適解かは未だわからずです。
3.Buy me a coffee置いてみた
Reactで設置する際は少し癖がありましたが、Buy me a coffeeを入れてみました。500円とかでもお金になったら嬉しいなと。
Stripeと連携することで良い感じに投げ銭機能を追加できます。
改善したい点一覧（メモ）
1.マニュアル作成する？
使い方が分からない場合もあると思うので、分かりやすいマニュアルを作成した方が良いかもしれません。
2.スマホで使いづらい
スマホで並び替えができない、jsonファイルのインポートやエクスポートができないといった機能面で不十分な点があるのでどうしようかと。
今のところはPC前提としてスマホでは最低限の機能があればいいかなと放置しています。
3/画像とプロンプトを紐づけてパッケージで魅せる？
アイデアとして、プロンプトに対してどういった出力結果が得られそうか置いてみるのはどうか。自前のプロンプトで引きを作るアイデア。
4.確認アラートをモーダル化
確認アラートをシステムの機能を使ってるので、モーダルウィンドウでポップアップ表示する形にしたい。
5.メタ情報をindex.htmlに直書きしてるんだけど...
react-helmet-asyncというパッケージでSEO関連の設定をしようとしましたが上手く動作しなかったので、index.htmlにメタデータを直書きしています。カッコ悪いので調整したい。
6.全体のリファクタリング
コードの並びを調整してなかったりするので調整する。
7.JSONデータのURLインポート機能
スマホでjsonファイルを管理するのは難しいので、URLからインポート・エクスポートの処理をできるようにする。
8.キーワードのテンプレートを用意する
例えば、年齢や色などの定性的なデータを追加する際は、自分で作成するのではなくアプリ内で選択して追加できる形にした方が使い勝手は良さそうです。
8.課金機能
万が一利用者が増えた際には、テンプレートの数を制限するなどして、月額で少し課金機能を付けるとかもありなのかなと。（妄想）
作ってみた感想
数日で実装できるレベルでシンプルに設計できたことと、個人でもAI画像を生成する際に使うことができている（最低限のユーティリティ）点は満足しています。
ただ、個人開発まわりのPR面の課題は非常に重く感じていて、どうしたものかと。プロダクトハントに掲載してみたり、色々と考えていく必要がありそうです。
まとめ
最近になってやっと開発の上でのMVPの概念が何となく掴めてきた気がします。最小限の機能で...といっても、機能を詰め込みすぎてしまったりと実際に開発に落とし込むのは非常に難しいんですよね。開発スピードも上げていって年内に良い感じにバズるプロダクトを開発したいです。
p.s.
呪文生成したことのある方はぜひ使ってみてください。ChatGPTなどと組み合わせて使えばキーワード設定に困ることがなくておすすめです。
試してみる
改善点などフィードバック等あればぜひ聞かせてください！
ProductHuntにも掲載したので良かったらUpvoteお願いします！
Discussion