Image generation
A prompt with styles, shape and count, pictures that resolve out of grain, and a gallery of earlier ones.
Image generation is a prompt with style chips, a shape and how many pictures, and an optional
model; the pictures it makes resolve the way an image model works — Composing (a grid of dots in
the picture's colours grows out of grain), Adding detail (the blur lifts while a scan line sweeps
down and leaves the picture behind it) and Upscaling (the last softness and grain go). Every
picture moves at its own speed, one can fail with Retry, and a finished one can be upscaled,
varied, downloaded, opened larger or used as a reference. Beside it sit a gallery of earlier
pictures, newest first, and a few style presets; narrower, they take the feed's place under a
Create / Gallery / Styles switch. onGenerate makes the pictures and reports how far each has come.
Usage
<!-- include core.css + image-generation.css + image-generation.js -->
<div class="card wide" data-c="image-generation">
<div class="stage-in">
<div class="igx" role="region" aria-label="Image generation"><!-- composer, feed and gallery --></div>
</div>
</div>Properties
| Name | Type | Description |
|---|---|---|
title | string | The project, shown after the section in the header. |
section | string | The first part of the header. Defaults to Images. |
prompt / defaultPrompt | string | The prompt in the composer (controlled or uncontrolled). |
styles | string[] | The style chips under the prompt. Defaults to Editorial, Poster, Surreal and 35mm. |
selectedStyles / defaultSelectedStyles | string[] | The chips that are on. |
shape / defaultShape | 1:1 | 3:4 | 16:9 | The picture's shape. |
count / defaultCount | number | How many pictures Generate makes, 1 to 4. |
models | ImageModel[] | The models in the model menu. Leave it out to hide the menu. |
gallery | GeneratedImage[] | Earlier pictures, newest first. Pictures made here join them at the top. |
presets | ImageStylePreset[] | The Styles tab. Picking one sets the style chips. |
onGenerate | (request, update) => void | Makes the pictures: call update(slot, …) for each one as it goes. Also called for Retry and Vary with count 1. |
onAction | (action, image) => void | Called for each action on a picture (upscale, download, reference, like, dislike, copy). |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). The
panels sit on a surface with the card shadow; a picture's placeholder gradient and the scan line
read against either theme. In Blueprint the dots are square cells and the picture shows through
them at half strength with a hard scan line in the accent's mark; in Soft the composer, chips and
tiles are rounder. With reduced motion a picture fades in once it is done rather than resolving
step by step.