この記事では、写真のトリミング案をTop Nで提案するWebアプリを題材に、
生成AIとHTML / JavaScriptを組み合わせると、どんなWebアプリを作れるのか
という発想例を紹介します。
- サイト側でAIのAPIを直接利用せず、利用者自身のChatGPTを使ってもらうことで、API Keyを不要にする
- AIを使った簡単なツールを作りたいだけであれば、この手法を使うことで単一HTMLでも実装できる
- AIの出力をJSON形式にすることで、その後の処理をJavaScriptへ渡しやすくなる
- 「Top N」のように、1つのテーマに対して複数の候補をJSON形式で出力させることで、出力文字数を抑えつつ比較できる、情報量の多いサイトを作りやすくなる
- AIをアプリへ直接組み込まなくても、処理工程の一部として活用できる
といった考え方を紹介できればと思います。
Webアプリのアイデアを考える際の、発想のきっかけになれば幸いです。
先にサイトの紹介
仕組みの話へ入る前に、まずは今回作ったサイトを紹介します。
写真を見て、
「この写真、プロフィール用ならどこまで切り取ると良いんだろう？」
と悩むことがあります。
そこで、ChatGPTにおすすめのトリミング位置を複数提案してもらい、その結果をブラウザ上で実際に切り出すWebアプリを作ってみました。
実際に使う
ブラウザからそのまま利用できます。
ソースコードはこちらです。
どんなアプリ？
大まかな流れは次のようになっています。
- 「プロフィール写真」「孫の写真」など、写真の用途を指定する
- WebアプリでChatGPTへ渡すプロンプトを生成する
- 元画像とプロンプトをChatGPTへ渡す
- ChatGPTからトリミング候補をJSON形式で受け取る
- JSONと元画像をWebアプリへ読み込む
- 複数のトリミング結果を自動生成する
- 気に入った画像をダウンロードする
トリミング位置は、たとえば次のような形でChatGPTに考えてもらいます。
左から3%
上から0%
右から3%
下から12%
つまり、画像の四辺から「何％削るか」という情報です。
ブラウザ側では、この数値を使って実際に画像を切り出します。
さらに、複数のトリミング候補をまとめてZIP形式でダウンロードすることもできます。
このアプリで紹介したかったこと
このサイトは実用ツールとしても使えますが、個人的にはそれ以上に、
「生成AIと普通のHTML / JavaScriptを組み合わせると、どんなアプリを作れるのか」
という発想例として作っています。
生成AIを使ったアプリというと、
- APIを契約する
- サーバーを用意する
- APIキーを管理する
- バックエンドを書く
といった構成を想像することも多いと思います。
しかし今回のアプリでは、画像を見て判断する処理は普段使っているChatGPTに任せ、ブラウザ側ではChatGPTが出した結果だけを利用するという構成にしています。
流れを単純化すると、次のようになります。
人間
↓
Webアプリでプロンプトを生成
↓
ChatGPTで画像を判断
↓
JSONをコピー
↓
Webアプリで後処理
ChatGPTとWebアプリの間にコピー＆ペーストという手作業は入ります。
その代わり、
- APIキーをHTMLへ埋め込まなくてよい
- バックエンドを用意しなくてよい
- 単一HTMLでも試作しやすい
というメリットがあります。
「まずアイデアを試してみたい」という段階では、このような構成も使いやすいと思います。
「AIに全部やらせる」以外の発想
今回作っていて特に面白いと感じたのが、
AIそのものをWebアプリへ組み込まなくても、AIを処理工程の一部として利用できる
という点です。
たとえば今回のアプリは、
写真
→ AIに分析してもらう
→ JSON化
→ JavaScriptで加工
という構成です。
同じ考え方を使えば、
文章
→ AIに分類してもらう
→ JSON化
→ ブラウザで一覧表示
というツールも作れます。
ほかにも、
データ
→ AIに評価してもらう
→ JSON化
→ グラフやランキングを生成
といった使い方も考えられます。
重要なのは、AIに最終的な「答え」だけを作ってもらうのではなく、
AIにプログラムで扱いやすい中間データを作ってもらう
という考え方です。
なぜJSONにするのか
今回、ChatGPTの出力にはJSONを利用しています。
たとえば、単純化すると次のようなデータです。
{
"left": 3,
"top": 0,
"right": 3,
"bottom": 12
}
文章として、
左側を3％削って、上側は削らず、右側を3％、下側を12％削ってください。
と返してもらうこともできます。
しかし、JavaScript側で利用することを考えると、JSONのほうが扱いやすくなります。
たとえば、
data.left
data.top
data.right
data.bottom
のように、そのまま値を取り出せます。
また、説明文を大量に出力してもらうより、必要な情報だけをJSONとして返してもらえば、AIの出力を比較的コンパクトにしながら、プログラム側で必要な情報を受け取れます。
この考え方は、今回の画像トリミング以外にも使えます。
たとえば、
- おすすめ度
- 順位
- カテゴリ
- 座標
- 色
- 数値評価
- タグ
- コメント
- Yes / No判定
などをJSONにすれば、その後の表示や加工をJavaScript側へ任せることができます。
単一HTMLでも意外とできる
今回のWebアプリは、HTML・CSS・JavaScriptを1つのHTMLファイルへまとめています。
そのため、基本的にはHTMLファイルをブラウザで開くだけで動かせます。
もちろん、大規模なWebサービスを単一HTMLで作るのは現実的ではありません。
しかし、
- 画像加工
- テキスト整形
- JSON解析
- グラフ表示
- CSV生成
- ZIP生成
- 各種計算
- 入力内容からプロンプト生成
といった小規模なツールであれば、単一HTMLだけでもかなり色々なことができます。
そこへChatGPTを組み合わせることで、
「AIが得意な判断」と「JavaScriptが得意な機械的処理」を分担する
という作り方ができます。
今回であれば、
ChatGPT
→ 写真を見て、どこを切り取ると良いか考える
JavaScript
→ 指定された数値どおりに画像を切り取る
という役割分担です。
AIに画像加工そのものを毎回やってもらうのではなく、
「どこを加工するか」だけAIに考えてもらう
という構成にした点が、今回のアプリのポイントです。
ここから別のアイデアへ広げる
今回の記事で一番試してほしいのは、完成したサイトそのものより、
「この仕組みを別の用途へ置き換えたら、何が作れるだろう？」
と考えてみることです。
たとえば、
写真
→ AI
→ トリミング位置JSON
→ 画像加工
を、
旅行先の候補
→ AI
→ 評価JSON
→ ランキング表示
に置き換えることもできます。
あるいは、
文章
→ AI
→ カテゴリJSON
→ 自動振り分け
でも構いません。
さらに、
ゲームのデータ
→ AI
→ 評価値JSON
→ グラフ表示
のようなツールも考えられます。
つまり、
入力
↓
AIが判断
↓
構造化データに変換
↓
JavaScriptで加工・表示
という型をひとつ覚えておくと、そこから様々なWebアプリのアイデアへ発展させられます。
なお、ChatGPTを開く際は一時チャット（Temporary Chat）で開くようにしています。一時チャットでは、会話内容はモデルの学習には使用されず、アップロードした画像もChatGPTのLibraryには保存されません。
ただし、OpenAIの仕様上、安全上の目的などからデータが最大30日保持される場合があります。個人情報を含む写真や第三者の写真をアップロードする場合は、この点を理解したうえで利用してください。
まとめ
今回作ったサイト自体は、写真のおすすめトリミング候補を複数作るシンプルなツールです。
ただ、本当に試してほしいのは機能そのものより、
「ChatGPTにJSONを作らせて、その結果をブラウザで処理するなら、ほかに何が作れるだろう？」
と考えることです。
AIにすべての処理を任せなくても、
AIが考える
+
JavaScriptが処理する
という組み合わせだけで、作れるツールの幅はかなり広がります。
また、最初からAPIやサーバーを用意しなくても、
Webアプリ
→ ChatGPT
→ JSON
→ Webアプリ
という手作業を挟んだ構成であれば、比較的小さなHTMLファイルから試すことができます。
Webアプリのネタや生成AIの活用方法を考える練習として、こうした作り方も面白いと思います。
公開先
👇アクセスするだけで利用できる公開先
👇GitHub
GitHubのURLは、コードの内容をご自身で確認したい方向けに公開しています。
GitHub Pages版からそのまま利用できますが、個人的にはHTMLファイルをダウンロードし、ローカル環境で使用することを推奨します。
また、HTMLコードをChatGPTなどへ添付し、不審な処理や外部通信が含まれていないか確認してもらう方法もあります。この方法は「網羅性は無い」と判断した方が良いため、完全な安全性を保証できるものではない点に関しての注意が必要です。
必要に応じて、ChatGPTなどを利用して自分が使いやすいようにコードを改造してみるのもおすすめです。
より使いやすいツールを作成できた場合は、私も試してみたいので、公開していただけるとうれしいです。
なお、本リポジトリを元に改造したものを公開する場合は、MITライセンスの条件に従ってください。
具体的には、元の著作権表示およびMITライセンス文を含めたうえで公開してください。