Blink Documentation Blink

What we're building: A web-based image editor with AI superpowers. Remove backgrounds in one click, upscale images 4x, apply artistic styles, and generate variations—all powered by AI.

Time: ~2 hours | Difficulty: Intermediate 🖼️ Image upload & management — Drag-drop upload, gallery view ✂️ Background removal — One-click AI-powered removal 📐 Image upscaling — 2x and 4x enhancement 🎨 Style transfer — Apply artistic styles to photos 🔄 AI variations — Generate similar images 💾 Export — Download in multiple formats and sizes 💳 Credit system — Pay-per-use AI features Start in Chat Mode to plan. 📋 Planning Prompt I want to build an AI image editing studio called "PixelMagic". Help me plan: 1.

CORE FEATURES - Background removal (like remove.bg) - Image upscaling (2x, 4x) - Style transfer (make photo look like painting) - Object removal (remove unwanted items) - AI image variations 2. USER FLOW - How does someone upload and edit an image? - What's the editing workspace layout? - How do they download the result? 3. AI SERVICES - Which AI models/APIs are best for each feature? - What about using Replicate for the AI endpoints? - How long do these operations typically take? 4.

MONETIZATION - Credit-based system (like Canva) - How many credits per operation? - Free tier vs paid plans? Ask clarifying questions before we finalize. Switch to Agent Mode now.

🏠 Landing Page Create landing page for PixelMagic: HERO SECTION: - Headline: "Edit Images with AI Magic" - Subheading: "Remove backgrounds, upscale, enhance—all in seconds" - Large upload area with dashed border: * Drag & drop zone * "or click to browse" * Supported formats: PNG, JPG, WebP up to 20MB - Below: "No signup required to try" FEATURE SHOWCASE: Row of 4 features with before/after sliders: 1. Background Removal - Person with complex background → clean cutout 2. Upscaling - Small blurry image → crisp 4x version 3.

Style Transfer - Photo → Van Gogh style 4. Object Removal - Beach with person → empty beach Each has "Try it" button.

SOCIAL PROOF: - "Trusted by 50,000+ creators" - Logo row: Shopify, Etsy sellers, Instagram creators - "4.9/5 from 2,000+ reviews" PRICING PREVIEW: - "Start free with 10 credits" - "Pro from $9/mo for 100 credits" - "Try Free →" CTA FOOTER: - Links: Pricing, API, Help, Terms, Privacy - Made with ❤️ by PixelMagic 🎨 Editor Layout Build the main editor workspace at /editor: LAYOUT (3-column): LEFT SIDEBAR (80px, icons only with tooltips): - Upload new (Upload icon) - Divider - Background Removal (Scissors) - Upscale (ArrowsExpand) - Style Transfer (Palette) - Object Remove (Eraser) - Variations (Sparkles) - Divider - Crop (Crop) - Adjust (Sliders) - Filters (Image) - Divider - Undo / Redo - Download CENTER (flex, main area): - Canvas showing current image - Zoom controls bottom-left (-, 100%, +, Fit) - Pan with drag when zoomed in - Checkerboard background for transparency RIGHT SIDEBAR (300px, collapsible): - Appears when tool is selected - Tool-specific options - Preview of changes - "Apply" and "Cancel" buttons TOP BAR: - Project name (editable): "Untitled Project" - Image dimensions: "1920 × 1080" - Credits remaining: "⚡ 47 credits" - "Save" and "Export" buttons LOADING STATES: - When AI is processing, show: * Overlay on canvas with spinner * Progress text: "Removing background...

45%" * "This usually takes 10-15 seconds" ✂️ Background Removal Build the Background Removal tool panel: WHEN SELECTED (right sidebar): Header: "Remove Background" Credit cost: "⚡ 2 credits" OPTIONS: - Output: "Transparent PNG" (default) | "White" | "Custom color" - If Custom: Color picker - Edge refinement: Slider (Soft to Hard) - Preview toggle: Show/hide original "Remove Background" button (blue, full width) PROCESSING: - Button shows spinner: "Processing..." - Canvas shows progress overlay - Use AI Gateway to call background removal model - Typical time: 5-15 seconds RESULT: - Show before/after slider on canvas - Right sidebar shows: * "✓ Background removed" * Preview thumbnail * "Apply to Image" button * "Try Again" link * "Download Cutout" quick button APPLY: - Replaces current image with result - Adds to undo history - Updates canvas 📐 Upscaling Tool Build the Upscale tool panel: WHEN SELECTED: Header: "AI Upscale" INFO: - Current size: "1920 × 1080" - "Enhance resolution using AI" OPTIONS: - Scale factor: 2x (default) | 4x - Output size preview: * 2x: "3840 × 2160" * 4x: "7680 × 4320" - Denoise strength: Slider (None to Strong) - Face enhancement: Toggle (for portraits) CREDIT COST (updates with selection): - 2x: "⚡ 3 credits" - 4x: "⚡ 5 credits" "Upscale Image" button PROCESSING: - Progress: "Enhancing...

60%" - Takes 15-30 seconds for 4x RESULT: - Side-by-side comparison - Zoom controls to see detail difference - "Apply" or "Cancel" - File size warning if >10MB 🎨 Style Transfer Build the Style Transfer tool: WHEN SELECTED: Header: "Style Transfer" Credit cost: "⚡ 4 credits" STYLE GRID (3 columns): Predefined styles with thumbnail previews: - Van Gogh (Starry Night) - Monet (Water Lilies) - Picasso (Cubism) - Pop Art - Anime/Manga - Pencil Sketch - Oil Painting - Watercolor - Neon Glow - Pixel Art - Comic Book - Vintage Film Selected style: Blue border + checkmark OPTIONS: - Style strength: Slider 0-100% (default 75%) - Preserve colors: Toggle - Preview: Show style preview on thumbnail "Apply Style" button PROCESSING: - "Applying Van Gogh style...

Apply to image" - "Try another style" link 🔄 Generate Variations Build the Variations tool: WHEN SELECTED: Header: "AI Variations" Credit cost: "⚡ 5 credits per variation" DESCRIPTION: "Generate similar images inspired by your original" OPTIONS: - Number of variations: 1 | 2 | 4 - Variation strength: Slider (Subtle to Creative) * Subtle: Minor changes, same composition * Creative: More freedom, surprising results - Preserve: Checkboxes * [ ] Color palette * [ ] Subject/main element * [ ] Style/mood "Generate Variations" button PROCESSING: - "Creating 4 variations...

25%" - Takes 20-40 seconds RESULT: - Grid of generated images - Click to select one - "Use this image" replaces canvas - "Generate more" creates new set - "Download all" as ZIP 💾 Export Options Build export/download modal: TRIGGER: "Export" button in top bar MODAL: Header: "Export Image" FORMAT: - PNG (default) - "Best for transparency" - JPG - "Smaller file size" - WebP - "Modern format, best compression" QUALITY (for JPG/WebP): - Slider: 70% to 100% - File size estimate updates live SIZE: - Original (current dimensions) - Preset sizes: * Social: Instagram (1080×1080), Twitter (1200×675), Facebook (1200×630) * Web: Large (1920), Medium (1280), Small (800) - Custom: Width × Height inputs with lock ratio toggle BACKGROUND (if transparent): - Keep transparent - White - Black - Custom color PREVIEW: - Thumbnail of export result - File size estimate: "~2.4 MB" ACTIONS: - "Download" button - downloads file - "Copy to clipboard" - for quick paste - "Get shareable link" - uploads and generates URL (Pro feature) 🔐 Auth Setup Add authentication: FLOW: - Landing page works without login - User can upload and preview tools - When clicking "Apply" or "Download", prompt signup: "Create a free account to save your work and get 10 free credits" AUTH OPTIONS: - Google login (primary) - Email + password SIGNUP FLOW: 1.

"Continue with Google" or email signup 2. Welcome modal: "You've got 10 free credits! 🎉" 3. Quick tour: "Here's what you can do..." 4.

Return to editor with image preserved USER MENU (top right when logged in): - Avatar + name - Credits badge: "⚡ 47" - Dropdown: My Projects, Billing, Settings, Sign Out SAVED PROJECTS: - Auto-save edits to cloud - "My Projects" gallery view - Resume editing any time 💳 Credit System Implement credit system: DATABASE: users: add credits column (default: 10 for new users) credit_transactions: - id, user_id, amount (+/-), action, created_at - action: "signup_bonus", "purchase", "bg_removal", "upscale_2x", etc.

CREDIT COSTS: - Background removal: 2 credits - Upscale 2x: 3 credits - Upscale 4x: 5 credits - Style transfer: 4 credits - Variations (each): 5 credits - Object removal: 4 credits CHECK BEFORE AI OPERATION: - If credits < cost: Show upgrade modal - If credits >= cost: Deduct and proceed LOW CREDITS WARNING: - When credits < 5: Yellow badge - When credits = 0: Red badge, block AI features - "Get more credits →" link CREDIT PURCHASE (Stripe): - 50 credits: $9 - 150 credits: $19 (Save 20%) - 500 credits: $49 (Save 35%) - Monthly Pro: $19/mo for 200 credits + priority processing 🧠 Background Removal API Create edge function for background removal: ENDPOINT: POST /api/ai/remove-background Process: 1.

Receive image (base64 or URL) 2. Call AI model (use Replicate's rembg or similar): - Model: "cjwbw/rembg" - Input: image URL - Output: PNG with transparent background 3. Wait for completion (poll or webhook) 4. Deduct credits from user 5. Return processed image URL EDGE FUNCTION CODE: - Use Replicate API with REPLICATE_API_KEY - Handle timeout (max 60s) - Return progress updates for long operations ERROR HANDLING: - Image too large: "Image must be under 20MB" - Invalid format: "Please upload PNG, JPG, or WebP" - AI error: "Processing failed.

Credits not deducted. Please try again." - Timeout: "Taking longer than usual. We'll email you when ready." RESPONSE: { success: true, result_url: "https://...", credits_remaining: 45, processing_time_ms: 12340 } 📐 Upscaling API Create edge function for upscaling: ENDPOINT: POST /api/ai/upscale Input: { image_url, scale: 2 | 4, denoise: 0-1, face_enhance: boolean } Process: 1. Validate image and scale factor 2. Call Real-ESRGAN model via Replicate: - Model: "nightmareai/real-esrgan" - Input: image, scale, face_enhance 3. Poll for completion (can take 30-60s for 4x) 4. Deduct credits based on scale 5.

Return upscaled image URL PROGRESS UPDATES: - Use Server-Sent Events or polling - Return progress: "processing", "25%", "50%", "75%", "complete" SIZE LIMITS: - Input: Max 4096×4096 for 2x, Max 2048×2048 for 4x - If larger, prompt user to crop first 🎨 Style Transfer API Create edge function for style transfer: ENDPOINT: POST /api/ai/style-transfer Input: { image_url, style: string, strength: 0-100 } Process: 1. Map style name to model/prompt: - "van_gogh": Use neural style transfer model - "anime": Use anime style model - "sketch": Use pencil sketch model 2.

Call appropriate model via AI Gateway 3. Apply strength parameter (blend with original) 4. Deduct credits 5.

Return styled image MODELS BY STYLE: - Painting styles: Neural style transfer - Anime/cartoon: Specialized anime model - Sketch: img2img with sketch LoRA - Filter-like: Can use faster image processing Return: { success: true, result_url: "https://...", style_applied: "van_gogh", strength: 75 } 📁 Save & Load Projects Implement project saving: DATABASE: projects: - id, user_id, name, thumbnail_url - original_image_url - current_image_url - edit_history (JSON array of operations) - created_at, updated_at AUTO-SAVE: - Save after each AI operation completes - Save on export - Save every 30 seconds if changes made - Show "Saved" indicator in header MY PROJECTS PAGE (/projects): - Grid of project thumbnails - Hover: Project name, last edited date - Actions: Open, Duplicate, Delete - "New Project" card at start - Sort by: Recent | Name | Size - Empty state: "No projects yet.

Start creating!" LOAD PROJECT: - Click opens /editor?project=xxx - Load original and current images - Reconstruct edit history for undo/redo 🎯 SEO & Marketing SEO and marketing pages: LANDING PAGE META: - Title: "PixelMagic - AI Image Editor | Remove Backgrounds, Upscale & More" - Description: "Free online AI image editor. Remove backgrounds in 5 seconds, upscale images 4x, apply artistic styles.

No software to install." - Keywords: background remover, image upscaler, AI photo editor DEDICATED TOOL PAGES (for SEO): /remove-background: - "Free Background Remover" - Direct upload to this specific tool - FAQ about background removal - Examples gallery /upscale: - "AI Image Upscaler" - Comparison slider showing before/after - "Upscale your images up to 4x without losing quality" /style-transfer: - "AI Art Style Transfer" - Gallery of style examples - "Turn your photos into masterpieces" SCHEMA MARKUP: - SoftwareApplication structured data - FAQ schema on landing page - Review schema 📱 Mobile Experience Mobile-specific design: EDITOR ON MOBILE: - Full-screen canvas (no sidebars) - Bottom toolbar with tool icons - Tool options: Bottom sheet slides up - Pinch to zoom on canvas - Two-finger pan when zoomed NAVIGATION: - Floating menu button (bottom right) - Opens tool selection overlay - Swipe down to dismiss UPLOAD: - Camera option in addition to gallery - "Take Photo" uses device camera - Optimize images on upload (resize if >4096px) EXPORT: - "Share" button uses native share sheet - Direct share to Instagram, WhatsApp, etc.

GESTURES: - Swipe left/right between tools - Double-tap to reset zoom - Long press image for quick actions You've built a complete AI image editing studio: ✅ Drag-and-drop image upload ✅ AI background removal in seconds ✅ 2x and 4x image upscaling ✅ Artistic style transfer (10+ styles) ✅ AI image variations ✅ Export in multiple formats and sizes ✅ Credit-based monetization with Stripe ✅ Project saving and management ✅ Mobile-optimized editor ✅ SEO-optimized tool pages Next steps: Add object removal (inpainting) Image generation from text (DALL-E integration) Batch processing for multiple images API access for developers Photoshop/Figma plugins

People Also Asked

• Welcome | Blink Documentation
• Meet Blink - Blink Docs
• Blink Documentation | Blink
• Blink
• Home - BlinkOps Documentation
• Blink Documentation
• Blog | bLink Docs