生成AIをフル活用したイラストサイトを作ってみた
作ったもの
誰でも無料で使えるイラストサイトを作ってみました🎉
「AIを使って人間では作りきれない数のイラストを作ったらどうなるんだろう？」という興味を形にしています。
技術構成はNext.jsとSupabaseを使っています。
作るにあたって工夫したこと
- ストレスを減らすためにイラストがすぐに表示される
- 検索機能や関連イラスト機能を簡単に実装する
- なるべく手間なく大量のイラストを作成・登録する
- SEO対策を施す
ストレスを減らすためにイラストがすぐに表示される
アクセスをしてからすぐに画像が表示されるように、Next.jsを使ってSSRとキャッシュを行っています。
AppRouterを使って画像のURLをサーバサイドで取得し、Image Componentで描画をすることでVercelがキャッシュを行ってくれるため、２回目以降の描画が早くなります。
検索機能や関連イラスト機能を簡単に実装する
以下のような検索機能と関連イラスト機能を実装しています。
実はこの二つ、同じ関数で実装しています。
OpenAIのEmbeddingsを活用しています。
Embeddingsは簡単にいうと、テキストデータを数値ベクトルデータに変換する機能です。
Embeddingsを活用することで、以下のようなことができます。
- 検索（クエリ文字列の関連性に基づいて結果がランク付けされる）
- クラスタリング（テキスト文字列が類似性によってグループ化される）
- 推薦（関連するテキスト文字列を持つアイテムが推奨される）
- 異常検知（類似性の低い外れ値が識別される）
- 多様性測定（類似性分布が分析される）
- 分類（テキスト文字列が最も類似したラベルによって分類される）
あらかじめ、各イラストのテキストをEmbeddingsでベクトル化してデータベースに保存をしておきます。
検索機能は、ユーザの入力をEmbeddingsでベクトル化して、データベースから近い順に画像を取得することで実装しています。
また、関連イラスト機能は、現在開いているイラストのベクトルデータに近い画像を取得して実装しています。
なるべく手間なく大量のイラストを作成・登録する
AIイラストを作成するには、いくつかの手順を踏む必要があります。
- プロンプトの作成
- 画像の生成
- 画像の透過
- 画像の説明文の作成
- データ登録
この一連の流れを自動化させました。
プロンプトの作成は、イラストとして需要がありそうなジャンルをChatGPTに考えてもらい、そのジャンルに適するプロンプトを複数考えてもらいます。
そのプロンプトを使ってLoRA学習済みStable Diffusionを使って画像を生成し、rembgというライブラリを使って背景を透過します。
画像の説明文はChatGPTに画像をインプットしてタイトルと説明文を作成します。
最後にクオリティチェックをChatGPTで行い、問題なければデータベースに登録します。
SEO対策
イラストサイトは基本的に流入は検索エンジンからとなるので、最低限のSEO対策を行います。
Web DeveloperというChrome拡張のView Document Outlineを使ってH1タグ等が適切に設定されているかを確認します。
また、ページ遷移はJSを使わずに全てaタグにしています。
最後にNext.jsのsitemap機能を使って全ページ分のsitemapを作って、Search Consoleに登録します。
早速、いくつかのイラストが画像検索で引っ掛かることを確認しました。
最後に
Next.jsとSupabaseを使うことで、フリープランでイラストサイトを作ることができました。
運用費用がほぼ０円でサイトを維持することができます(OpenAI Embeddings APIのコストがかかるが、100万文字で3円程度)。
生成AIをフル活用したサイトになっているので、ぜひご覧ください。
Discussion