# PromptMotion AI 🎬✨

**Platform Prompt Generator AI Profesional** untuk Seedance, Gemini Omni Flash, Kling Motion Control, Higgsfield, dan UGC TikTok.

---

## Tech Stack

| Layer | Technology |
|---|---|
| Framework | Next.js 14 (App Router) |
| Language | TypeScript strict mode |
| Styling | Tailwind CSS + shadcn/ui |
| Forms | React Hook Form + Zod |
| Auth & DB | Supabase Auth + PostgreSQL |
| Storage | Supabase Storage |
| AI | OpenAI / Anthropic / Google AI (abstracted) |
| State | Zustand + React state |
| Toasts | Sonner |

---

## Struktur Folder

```
src/
├── app/
│   ├── (dashboard)/          # Protected routes
│   │   ├── dashboard/        # Dashboard utama
│   │   ├── generator/[platform]/ # Generator per platform
│   │   ├── history/          # Riwayat prompt
│   │   ├── templates/        # Template library
│   │   └── products/         # Product library
│   ├── api/
│   │   ├── generate/         # POST /api/generate
│   │   ├── history/          # GET/PATCH/DELETE /api/history
│   │   ├── templates/        # GET/POST /api/templates
│   │   └── upload/           # POST /api/upload
│   └── auth/
│       ├── login/
│       └── register/
├── components/
│   ├── generator/
│   │   ├── GeneratorLayout.tsx
│   │   ├── GeneratorForm.tsx   # Dynamic form per platform
│   │   ├── GeneratorOutput.tsx # Tab output: Text/JSON/Shot List/Script
│   │   └── GeneratorSkeleton.tsx
│   └── layout/
│       ├── Sidebar.tsx
│       └── TopBar.tsx
├── lib/
│   ├── adapters/             # Platform adapters
│   │   ├── base.adapter.ts
│   │   ├── seedance.adapter.ts
│   │   ├── gemini-omni.adapter.ts
│   │   ├── kling-motion.adapter.ts
│   │   ├── higgsfield.adapter.ts
│   │   └── tiktok-ugc.adapter.ts
│   ├── ai/
│   │   └── provider.ts       # Server-side AI provider abstraction
│   ├── schemas/
│   │   └── universal-prompt.schema.ts  # Zod schemas
│   ├── supabase/
│   │   ├── client.ts         # Browser client
│   │   ├── server.ts         # Server client
│   │   └── middleware.ts     # Auth middleware
│   ├── rate-limit.ts
│   └── utils.ts
└── types/
    └── index.ts
```

---

## Instalasi

### 1. Clone & Install

```bash
git clone <repo-url>
cd promptmotion-ai
npm install
```

### 2. Setup Environment

```bash
cp .env.local.example .env.local
```

Edit `.env.local`:

```env
# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJxxxxx
SUPABASE_SERVICE_ROLE_KEY=eyJxxxxx

# AI Provider (minimal 1)
OPENAI_API_KEY=sk-xxxxx
# atau
ANTHROPIC_API_KEY=sk-ant-xxxxx
# atau
GOOGLE_AI_API_KEY=AIzaSyxxxxx

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

### 3. Setup Supabase

1. Buat project di [supabase.com](https://supabase.com)
2. Buka **SQL Editor** dan jalankan isi file `supabase/schema-all.sql`
   > File ini menggabungkan semua schema: core tables, user settings, encrypted env vars, admin panel, dan atomic RPC.
   > *(Jika ingin run manual per-bagian: jalankan `schema.sql` → `schema-settings.sql` → `schema-env-vars.sql` → `schema-admin.sql` → `rpc_increment_usage.sql` secara berurutan)*
3. Buka **Storage** dan buat 3 bucket:
   - `reference-images` (private)
   - `product-images` (private)
   - `avatars` (public)

### 4. Jalankan Development Server

```bash
npm run dev
```

Buka [http://localhost:3000](http://localhost:3000)

---

## Rate Limiting (Production)

> ⚠️ **Penting:** Rate limiter default menggunakan in-memory Map sebagai fallback. Di lingkungan serverless (Vercel, AWS Lambda), setiap invocation bisa spawn instance baru sehingga Map selalu kosong — artinya rate limit **tidak berfungsi** di production tanpa Redis.

### Setup Upstash Redis (Wajib untuk Production)

1. Daftar gratis di [upstash.com](https://upstash.com) (free tier: 10.000 req/hari)
2. Buat database Redis → copy REST URL dan REST Token
3. Tambahkan ke environment variables:

```env
UPSTASH_REDIS_REST_URL=https://xxxxxxxx.upstash.io
UPSTASH_REDIS_REST_TOKEN=AXxxxxxxxxxx
```

Tanpa kedua variabel ini, fallback in-memory aktif — aman hanya untuk development lokal.

---

## Deployment ke Vercel

```bash
npm install -g vercel
vercel login
vercel --prod
```

Tambahkan semua environment variables di **Vercel Dashboard > Project > Settings > Environment Variables**.

---

## Fitur Lengkap

### Generator Platform
| Platform | Kemampuan |
|---|---|
| 🎬 Seedance | Camera motion, angle, lighting, color grading, FPS |
| ✨ Gemini Omni Flash | Image/Video/Audio, aspect ratio, quality |
| 🎯 Kling Motion Control | Camera path, subject motion, background |
| 🌊 Higgsfield | Physics simulation, particle effects, fluid |
| 📱 UGC TikTok | Hook, persona, script, shot list |

### Output Format
- **Text Prompt** — siap paste ke platform AI
- **JSON** — structured output dengan syntax highlight
- **Shot List** — breakdown per shot dengan camera notes
- **Script** — full script dengan direction

### Actions
- ✅ Copy ke clipboard
- ✅ Download TXT
- ✅ Download JSON
- ✅ Favorite & unfavorite
- ✅ History lengkap dengan filter
- ✅ Template library

### AI Features
- ✅ Generate 1, 3, atau 5 variasi sekaligus
- ✅ Auto negative prompt
- ✅ Input Bahasa Indonesia → output English
- ✅ Simple Mode & Advanced Mode
- ✅ Validation retry (max 2x) bila output tidak valid

### Security
- ✅ API key **tidak pernah** di frontend
- ✅ Semua AI call melalui server route
- ✅ Rate limiting: 10 req/menit per user
- ✅ Usage limit dengan reset bulanan
- ✅ Row Level Security di Supabase

---

## Platform Adapters

Setiap adapter mengimplementasi interface:

```typescript
interface PromptAdapter<TInput> {
  validateInput(input: unknown): AdapterValidationResult;
  constructSystemPrompt(input: TInput, variationCount: number): string;
  constructUserPrompt(input: TInput, variationIndex: number): string;
  transformOutput(rawOutput: string, input: TInput): PromptVariation;
  generateTextPrompt(input: TInput): string;
  generateJsonOutput(input: TInput): Record<string, unknown>;
}
```

Untuk menambahkan platform baru:
1. Buat schema Zod di `universal-prompt.schema.ts`
2. Buat adapter di `src/lib/adapters/`
3. Register di `src/lib/adapters/index.ts`
4. Tambahkan config di `src/types/index.ts` (PLATFORM_CONFIGS)
5. Tambahkan field config di `GeneratorForm.tsx`

---

## Menambahkan AI Provider

Edit `src/lib/ai/provider.ts` dan tambahkan fungsi baru. Provider dipilih otomatis berdasarkan API key yang tersedia (urutan: OpenAI → Anthropic → Google AI).

---

## Usage Limits

| Plan | Limit |
|---|---|
| Free | 50 generasi/bulan |
| Pro | 500 generasi/bulan |
| Enterprise | Unlimited |

Update limit di tabel `profiles` atau tambahkan logika upgrade plan.

---

## Kontribusi

Pull request welcome! Baca CONTRIBUTING.md (segera hadir).

---

Made with ❤️ for Indonesian AI creators
