Next.js 13 と Supabase で AI 画像生成アプリを構築していきます。
OpenAI の DALL・E モデルを使用して、画像を生成する方法を学びます。
OpenAI の画像生成 API には、画像を操作する 3 つの機能があります。
- テキストプロンプトから画像を生成する
- 画像を編集する
- 画像のバリエーションを作成する
今回は、テキストプロンプトを入力すると画像が生成されるアプリを構築します。
これから画像生成の精度があがることを期待して、AI 画像生成アプリを作ってみましょう。
デザインは TailwindCSS を使用していきます。
※2023/02
Next.js 13のApp Directoryはベータ版のため、今後ディレクトリ構成が変わる可能性があります。
完成
目標
下記を学習していきます。
- Supabase データベース構築
- Supabase ストレージ構築
- Supabase SQL Editor での構築
- OpenAI の画像生成 API の使い方
- Next.js13 でデータ取得と作成
動画チュートリアル
動画でも解説しています。
ぜひ参考にして下さい。
機能
- 画像生成
- 画像保存
- 画像投稿
- 投稿画像一覧
App Directory
Next.js 13 App Directory での構築方法の詳細はこちらを参考にしてください。
ブログを構築しながら、認証機能や作成、取得、編集、削除(CRUD)の方法を学びます。
こちらを参考にすると、認証付きのアプリを構築することができます。
エラーが発生した場合
詳しいコードの解説は、Next.js、Supabase の公式ページを参考にして下さい。
ソースコード
LINE 登録すると全ての講座のソースコードがダウンロードできます。
ぜひ登録をお願いします。
LINE お友達登録
もしエラーが発生したり、分かりにくい箇所は下記のソースコードを参考にして下さい。
前提知識
このチュートリアルを始める前に、下記は学習しておいて下さい。
- React
- Next.js
- HTML
- CSS
- JavaScript
では、始めて行きましょう！！