AI Avatar Generator - アバター自動生成SaaS

写真をアップロードするとAIが自動でアバター（イラスト）を生成するSaaSアプリケーション

🎯 機能

• ✅ ユーザー認証（Supabase Auth）
• ✅ プラン選択（無料/ベーシック）
• ✅ 利用規約同意フロー（チェックボックス必須）
• ✅ Stripe決済統合
• ✅ 顔検出（Google Cloud Vision API）
• ✅ アバター生成（Nanobanana API対応準備完了）
• ✅ 画像保存・管理
• ✅ 生成回数制限管理

🚀 技術スタック

• フレームワーク: Next.js 15 (App Router)
• 言語: TypeScript
• スタイリング: Tailwind CSS + DaisyUI
• 認証: Supabase Auth
• データベース: Supabase (PostgreSQL)
• ストレージ: Supabase Storage
• 決済: Stripe
• 画像処理: Google Cloud Vision API
• 通知: React Hot Toast

📋 セットアップ

1. 依存関係のインストール

npm install

2. 環境変数の設定

.env.local ファイルに以下の環境変数を設定してください：

# Supabase
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key

# Stripe
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key
STRIPE_SECRET_KEY=your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret
STRIPE_PRICE_BASIC_MONTHLY=price_xxxxx
STRIPE_PRICE_ADDON=price_xxxxx

# Google Cloud Vision
GOOGLE_CLOUD_VISION_API_KEY=your_google_cloud_vision_key
GOOGLE_APPLICATION_CREDENTIALS=path_to_service_account_json

# Nanobanana API
NANOBANANA_API_KEY=AIzaSyDJofwPdo_2df0VQOilJe_MSQzsltNVVLs

# App URL
NEXT_PUBLIC_APP_URL=http://localhost:3000

3. Supabaseのセットアップ

SupabaseダッシュボードでSQLエディタを開き、データベーススキーマを実行してください。 詳細は public/supabase-schema.sql を参照してください。

4. 開発サーバーの起動

npm run dev

ブラウザで http://localhost:3000 を開いてください。

📱 使い方

1. プラン選択: 無料プランまたはベーシックプランを選択
2. 利用規約同意: チェックボックスで利用規約に同意（必須）
3. アカウント作成: メールアドレスとパスワードで登録
4. 写真アップロード: 顔写真をアップロード
5. アバター生成: AIが自動でアバターを生成
6. ダウンロード: 生成されたアバターをダウンロード

📦 プラン詳細

無料プラン

• 週1回生成
• 1スタイル
• 透かしあり
• 保存期間：当日

ベーシックプラン（¥1,000/月）

• 月20回生成
• 3スタイル選択可能
• 透かしなし
• 保存期間：1週間
• 商用利用可能

🔧 主な実装箇所

• 認証: lib/supabase/
• 決済: app/api/stripe/
• 顔検出: app/api/detect-face/
• アバター生成: app/api/generate/
• UIコンポーネント: components/

📄 ライセンス

MIT