A beautiful frontend app for generating images using Replicate's AI models through the Hypery backend.
- 🎨 Generate images with AI using FLUX, Stable Diffusion, and more
- 🔐 OAuth authentication with Hypery
- 📜 Image generation history
- 🎯 Multiple model selection (FLUX Schnell, FLUX Dev, FLUX Pro, SDXL)
- 💾 Download and delete generated images
- 💳 Credits-based billing through Hypery
- Hypery backend running on
http://localhost:3001 - A registered app in Hypery with OAuth credentials
Create .env.local in the /apps/imagine directory:
NEXT_PUBLIC_CORE_APP_URL=http://localhost:3001
NEXT_PUBLIC_CLIENT_ID=your_client_id_here
CLIENT_SECRET=your_client_secret_here
NEXT_PUBLIC_REDIRECT_URI=http://localhost:3003/auth/callback# From the /apps/imagine directory
npm installnpm run devThe app will be available at http://localhost:3003
- Go to
http://localhost:3001/appsin the Hypery - Create a new app or use an existing one
- Set the redirect URI to
http://localhost:3003/auth/callback - Copy the Client ID and Client Secret to your
.env.local
The Imagine app is a lightweight frontend that:
- Authenticates with Hypery using OAuth 2.0
- Makes REST API calls to
/api/v1/images/*endpoints - Hypery backend handles:
- Replicate API integration
- Credit management
- Image storage and history
- Cost calculation
- Next.js 15 - React framework
- Tailwind CSS - Styling
- Lucide React - Icons
- OAuth 2.0 - Authentication with Hypery
POST /api/v1/images/generate- Generate a new imageGET /api/v1/images- Get image historyGET /api/v1/images/models- Get available modelsDELETE /api/v1/images?id={id}- Delete an image
- FLUX Schnell - Fast, high-quality (recommended)
- FLUX Dev - Better quality, slower
- FLUX Pro - Best quality, professional
- Stable Diffusion XL - High-resolution
- Stable Diffusion - Classic model