Image studio appPro

A complete image generation studio on scripted fixtures: projects and collections, the imagine bar, runs that arrive through the dither reveal on honest progress, a virtualized history, a viewer with variations and edit history, inpaint mode, credits and a paywall.

Markdown

On this page

ProGenerate with Enter and watch the run arrive through the dither reveal. Open an image for variations, upscales and its history, or edit it with the brush. The second run of gpt-image-1 lands behind the paywall.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/image-studio-app

The template installs as a folder under components/chatcn/pro/image-studio-app/: the app, the rail, the latest run, inpaint mode and the scripted engine, each a file you own and edit.

Usage

tsx

import { ImageStudioApp } from "@/components/chatcn/pro/image-studio-app/image-studio-app"

<ImageStudioApp
  projects={projects}
  collections={collections}
  groups={history}
  models={models}
  pool={demoImages}
  credits={account.credits}
/>

Give it a height: it fills its parent. Everything runs on the scripted engine in use-studio-engine.ts, which turns an imagine request into images with a queue wait and diffusion step progress. To go live, replace its start with your API and feed the job's progress events into the same shape; the reveal, the feed and the credits follow on their own.

Examples

On a phone

Below 768 px the rail moves into a drawer (swipe in from the edge, or the button in the header), the feed drops to two columns and every control keeps a 44 px target. Pass layout="mobile" to force it inside a device frame.

ProThe same studio at phone width: projects in a drawer, two feed columns and 44 px targets.

What is inside

The shell is the free ChatLayout: the rail collapses to icons with Cmd+B and becomes a drawer under 768 px.
ImagineBar with models, styles, enhance, reroll and reference images. Remix and Use as reference in the viewer fill it.
The latest run on DitherReveal, driven by real progress. A run that costs more than the balance arrives behind LimitPaywall; upgrading resolves the dots into the pictures.
The history on GenerationFeed, virtualized, with save, vary and edit on every tile. Collections show their saved images in the same feed.
GenerationLightbox with VariationActions (vary, upscale, remix, reference, download) and an EditHistoryStrip per image that grows with every upscale and inpaint.
Inpaint mode on InpaintBrush, with the cost on the button. Applying the edit adds a step and returns to the image.
CreditBalance in the header with spend by action, CreditTopUp in a dialog, and every shortcut in KeyboardShortcuts.

Props

Prop	Type	Notes
`projects`	`{ id, name }[]`	The first one opens
`collections`	`{ id, name, imageIds }[]`	The first is where the bookmark saves
`groups`	`(GenerationGroup & { projectId? })[]`	The history, newest first, with intrinsic image sizes
`models`, `styles`	`StudioImageModel[]`, `StylePreset[]`	For the imagine bar
`pool`	`{ src, thumbnail?, alt }[]`	Pictures the scripted engine hands out as results
`credits`, `spend`	`number`, `CreditSpend[]`	Balance and recent spend at the start
`upgrade`	`PaywallPlan & { credits }`	The plan the paywall offers and the credits it adds
`packs`	`CreditPack[]`	For the top up dialog
`account`	`{ name, plan }`	The account menu at the foot of the rail
`defaultParams`	`Partial<ImagineParams>`	Imagine bar settings. Default 4 images at 3:2
`layout`	`"auto" \| "desktop" \| "mobile"`	Force the phone layout inside a device frame
`defaultPrompt`, `inpaintCost`, `now`		First prompt, credits per edit, reference time

Keyboard

Key	Action
`/`	Write a prompt
`Cmd+B` or `Ctrl+B`	Collapse or expand the rail
`Cmd+/` or `Ctrl+/`	Every shortcut, grouped by area
`Enter`, `Alt+R`, `Escape`	Generate, run the last prompt again, stop
Arrows, `Page Up`, `Page Down`, `Enter`	Move through the feed and open an image
`V`, `U`, `R`, `I`, `D`, `E`	In the viewer: vary, upscale, remix, use as reference, download, edit with brush

Accessibility

Landmarks from the layout, a skip link to the studio, and a named navigation for projects and collections with aria-current on the open one.
The latest run is aria-busy while it generates and says how many images are ready in a polite live region, once. Progress ticks are never announced.
Every composed part keeps its own semantics: the feed is one tab stop, the viewer is a modal dialog, the brush is a labeled group, the paywall names its offer.
Saves, upgrades and edits are announced politely.

Motion

Each composed component keeps its own motion: the reveal follows real progress, the viewer fades from 0.98, the drawer slides on the drawer curve, credits roll their digits.
Moving between projects, collections and inpaint mode is instant.
Under reduced motion the reveal holds a still frame until the run is done, then the image fades in; nothing else moves.