Generate iPhone device mockups from screenshots using a full-stack Next.js app.

npm install
cp .env.local.example .env.local
npm run dev

Open http://localhost:3000.

iphone-mockup/
├── app/        # App Router pages + API route handlers
├── components/ # UI components
├── lib/        # Detection/compositing/frame loading logic
├── frames/     # Frame image assets
└── package.json

Set FRAMES_BASE_URL in .env.local if you want to load frame assets from a remote bucket.

Default:

FRAMES_BASE_URL=https://pub-7ad0d44bcb4948a2a359b34d35bc8fc8.r2.dev

• GET /api
• GET /api/models
• POST /api/detect
• POST /api/generate

Deploy this repository root as a Next.js Node.js app (for example on Vercel).