Image Lab

Draw a rough sketch. Pick a style. Watch AI turn the doodle into a playful image.

Image Lab is a canvas-first AI image playground for casual users, kids, and testers. It is meant to feel like a toy, not a pro tool: draw something messy, choose a visual style, decide how closely to keep the sketch, add an optional text nudge, and generate one more variation.

The app keeps the technical parts out of the way. The browser handles the sketching experience, while generation runs through a server-only provider boundary so API keys never reach the client.

What it does

• Sketch to image: draw on a simple canvas, then generate an AI interpretation.
• Style chips: pick a focused visual treatment without advanced settings.
• Interpretation control: keep the original doodle or let Image Lab reimagine it.
• Prompt nudges: add a short instruction when the sketch needs extra context.
• Latest-only previews: rapid edits do not let stale generations overwrite newer ones.
• Safe demos: run with a deterministic mock provider when no BFL key is available.

Product direction

Image Lab should feel bright, forgiving, and immediately usable. There are no dense controls, no professional editing workflow, and no generic AI-SaaS dashboard. The core loop is simple:

1. Draw on the canvas.
2. Choose a style and interpretation.
3. Generate a preview.
4. Reset, tweak, or try again.

Tech stack

• TanStack Start
• React
• TypeScript
• Vite
• Official BFL HTTP API, called only from the server

Quick start

pnpm install
cp .env.example .env
pnpm dev

By default, Image Lab uses the real BFL provider. For local demos without credentials, set:

IMAGE_LAB_PROVIDER_MODE=mock

Environment variables

Variable	Required	Description
IMAGE_LAB_PROVIDER_MODE	Optional	Defaults to bfl. Set to mock for deterministic local demo images.
BFL_API_KEY	Required in BFL mode	Server-only key for BFL FLUX.2 Klein generation. Never exposed to the browser.

Commands

pnpm dev         # Start locally
pnpm build       # Build production output
pnpm preview     # Preview the Cloudflare build locally
pnpm deploy      # Build and deploy with Wrangler
pnpm cf-typegen  # Generate Cloudflare binding types
pnpm typecheck   # TypeScript verification
pnpm test        # Vitest tests

Project map

• src/routes/-image-lab-page.tsx — main Image Lab page and server function.
• src/components/SketchCanvas.tsx — drawing, erasing, reset, colors, and PNG export.
• src/components/ImageControls.tsx — style, interpretation, and prompt controls.
• src/components/GenerationPanel.tsx — preview, status, download, latency, and errors.
• src/lib/prompts/presets.ts — canonical styles, interpretations, and composed generation prompts.
• src/lib/client/use-live-generation.ts — latest-only generation loop.
• src/lib/server/bfl.ts — server-only BFL API integration.
• src/lib/server/mock-generation.ts — explicit mock provider for local demos/tests.

Cloudflare deploy

This app is configured for Cloudflare Workers with @cloudflare/vite-plugin and wrangler.jsonc.

One-time setup:

pnpm wrangler secret put BFL_API_KEY

For GitHub Actions deploys, add repository secrets:

• CLOUDFLARE_API_TOKEN
• CLOUDFLARE_ACCOUNT_ID

Production notes

Image Lab runs with a server runtime so the BFL key stays private. In Cloudflare, keep BFL_API_KEY as a Worker secret and leave mock mode disabled unless you are intentionally running a demo. The Workers rate-limit binding caps generation requests per client IP before any paid BFL job is created.