Draw the layout, paste the JSON — a visual prompt builder for MOSS Image

TL;DR: MOSS Image on Civitai accepts JSON layout prompts as plain prompt text — but hand-writing bounding-box coordinates is painful. MOSS-Image-SFT Canvas is a free web app where you draw boxes on a canvas, describe each element, and get the exact JSON to paste into the MOSS Image generator. No coordinate math, no hand-written JSON.

What it is

MOSS-Image-SFT Canvas is a visual bounding-box layout editor for MOSS-Image layout-to-image generation. It runs entirely in the browser:

• Canvas with real coordinates. Set the size (e.g. 1024×1024); all coordinates are pixels from the canvas center — the same space the model works in abs_centralized, format yxyx).

• Draw boxes with the mouse. Drag to draw a box; double-click it to edit its label, caption, the exact words to render via the text field, its color and precise coordinates. Drag list items to change z-order.

• Describe the scene like a prompt. Style tags go to meta, the scene gist to caption, and each element's own words to its label/caption — plain language, like a classic text-to-image prompt, just distributed across elements instead of stuffed into one blob.

• Live JSON. The layout JSON compiles in the right panel as you work: copy it, download it, or paste an existing layout back into the app and edit it visually.

It's a static app — no backend, no account. Hosted here: g1ts.github.io/moss-image-sft-canvas.

Using it with MOSS Image on Civitai

Both MOSS Image versions (SFT and Base) run in the Civitai generator, and JSON layout prompts work as plain prompt text. So the whole workflow is:

1. Open the canvas app and set the canvas size to the size you want to generate at.

2. Draw a box for each element you want placed, and describe each one. For exact rendered words (a poster title, a sign), put them in the box's text field — the model renders them inside that box.

3. Copy the JSON from the panel.

4. Open MOSS Image on Civitai, paste the JSON as the prompt and generate. Recommended: SFT version, 50 steps, CFG 3 (raise to ~5 for stricter box adherence), output size matching the canvas.

One rule of thumb: generate at the same width/height as your canvas — the coordinates are absolute pixels.

Example: a cat with different-colored eyes and ears

A 680×384 canvas with seven boxes: the cat, its two eyes, its two differently-colored ears, its tail, and a wooden sign. The labels carry the description ("bright blue eye", "pink ear", …) and the sign uses the text field for the exact words:

{
  "summary": {
    "meta": ["illustration style", "soft warm colors", "plain light beige background"],
    "canvas": "single",
    "caption": "a cute cream cat sitting next to a wooden sign"
  },
  "items": [
    { "label": "cute fluffy cream cat", "caption": "sitting upright", "bbox": [-146, -55, 180, 291] },
    { "label": "bright blue eye", "bbox": [-45, 136, -9, 183] },
    { "label": "green eye", "bbox": [-62, 208, -21, 252] },
    { "label": "pink ear", "bbox": [-145, 208, -66, 274] },
    { "label": "blue ear", "bbox": [-119, 93, -52, 150] },
    { "label": "object", "caption": "a wooden sign standing on the ground with the text painted in dark letters", "text": "MOSS-Image-SFT", "bbox": [-60, -320, 181, -95] },
    { "label": "fluffy tail", "caption": "lying on the ground to the left of the cat", "bbox": [99, -53, 178, 98] }
  ],
  "bbox_coord_space": "abs_centralized",
  "bbox_format": "yxyx"
}

Each eye and ear lands in its own box with the right color, and the sign carries the exact text:

Quick start

• No install: open https://g1ts.github.io/moss-image-sft-canvas/, draw, copy the JSON.

• Local dev: git clone https://github.com/g1ts/moss-image-sft-canvas && npm install && npm run dev (Node ≥ 20).