How I Built an In-Browser AI Image-to-Image Studio with Character Consistency (Next.js, Cloudflare Pages & FLUX.1)
When generating images with modern AI models, one of the most frustrating limitations is character and composition drift . You enter a prompt, get an interesting portrait, change one word to alter the outfit or background, and the face completely changes. To solve this, I designed and built Photo2Photo AI — a browser-based image-to-image studio focused specifically on consistent character…
Creating an AI image-to-image studio with consistent character rendering presented a significant challenge. Modern AI models tend to hallucinate geometry from scratch when generating images, causing character and composition drift when altering prompts. To address this issue, I developed Photo2Photo AI, a browser-based image-to-image platform focused on preserving subject identity during image transformations, such as sketch-to-photo conversion and high-fidelity photo restyling.
This article delves into the system architecture, dual-tier AI inference pipeline, and engineering decisions for edge rendering on Cloudflare Pages.
The high-level architecture consists of several components:
1. Browser Client: This layer is responsible for client-side WebP compression (up to 2048px in size) and image processing.
2. Cloudflare Pages Edge Network: This network includes static assets, ISR pages, Turnstile human verification, Cloudflare D1 (Serverless SQLite Ledger), and Cloudflare R2 (object storage).
3. Multi-Engine Inference Gateway: This component comprises a Fast Tier (ByteDance Seedream 5.0 Flash) and a Studio Pro (FLUX.1 Kontext Pro) tier.
4. Cloudflare D1 (Serverless SQLite Ledger) and Cloudflare R2 (Object Storage): These provide serverless SQLite functionality and object storage for reference photos.
The choice of Next.js 15 compiled via @cloudflare/next-on-pages served two purposes: providing zero cold-start times worldwide and built-in bot protection. Cloudflare R2 offers decentralized storage for uploaded reference photos, with automatic lifecycle expiration rules to purge free user outputs after 24 hours.
A core challenge in image-to-image generation is preserving identity. To tackle this, users can upload up to four reference photos of the same subject. The reference embeddings are then mapped to spatial cross-attention layers to maintain facial bone structure, skin tone, and hair textures while allowing alterations to background and lighting.
Dedicated presets are available for consistent character AI studio, sketch-to-image AI converter, old photo restoration, and AI product photography studio, catering to various workflows and user budgets.
A key engineering decision was implementing client-side WebP compression to prevent uploading heavy payloads to the server. By compressing images in the browser to a maximum of 2048px, we reduced median upload times from 4.2 seconds to just 320ms, improving overall user experience.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
