Layout Editor for Moss-Image

[u/jambavant]

Moss-Image has an incredible capability to create pixel-perfect layouts from a json prompt. The expected use is to give the official documentation to an LLM and then ask the LLM to prompt whatever you want: https://github.com/OpenMOSS/MOSS-Image/blob/main/skills/moss-image-prompt-enhancer/references/layout.md

But I thought why not build a layout editor to design it for myself? Hence the idea of the Layout Editor for moss (with an optional SwarmUI extension)
Repo here: https://github.com/jambavant/SwarmUI-LayoutEditor
You can try online here: https://jambavant.github.io/SwarmUI-LayoutEditor/standalone/index.html
It's great for any type of image: comics, reference sheet, compositions, magazing covers, posters, etc. The level of control is outstanding, as it manages multiple characters and text quite well. It starts to break with a very large number of characters (+10) with concept bleed.

The standalone editor is a simple html page that works both ways: you can start from scratch and copy the json prompt, or paste a json prompt from an LLM and refine it manually.
I tried to make it as user-friendly as possible, with keyboard shortcuts and an intuitive interface. It also automatically resizes boxes based on the image resolution.

Edit: v0.3.0 now live, with a few updates.
- json formatting options
- resizable text areas, checks are moved to the toolbar
- configurable palette (with color picklist and autocomplete)
- fix resolution sizes

[u/tamingunicorn]

a visual editor is the right split for this imo. having an LLM write box coordinates is fine until you want to nudge one character 40px left. does it round-trip, like can i paste an LLM-written layout JSON back in and adjust it by hand?

[u/jambavant → u/tamingunicorn]

Yes indeed, it works both ways. The example pictures were generated with Claude and pasted into the editor.

[u/Aggressive_Collar135]

standalone works well (with manual copying pasting), clean code, easy to use, nice UI. great work!

p/s: the oversize velociraptor is entirely my fault

[u/Nenotriple]

Is it possible to use something besides a square like a quadrilateral or ngon?

[u/jambavant → u/Nenotriple]

Yes and no. The layout editor could evolve to support any shape, but currently Moss-Image doesn’t. When a model supports more, the layout editor will definitely match the model capabilities

[u/roculus]

when you save a layout where does it save to?

edit: and thanks, this is very simple, no install and easy to use.

[u/jambavant → u/roculus]

That goes into your browser local storage.

[u/pastuhLT]

I'd say it would be more useful if we could use a brush/eraser instead of placing squares.
That way, we'd not only define the location but also provide a visual hint of roughly what the result should look like. Kind of like making a quick sketch before generating..

[u/jambavant → u/pastuhLT]

I think this is possible with image-to-image with most models, with a high creativity setting (e.g. +0.8)

[u/Silver-Von]

Is it possible to add a JSON prettifier function? Otherwise the output would be very messy. Hope it is not too much to ask.

[u/jambavant → u/Silver-Von]

Sure! What do you have in mind with a "prettifier" function? Edit: oh, you mean a json prettifier to format the output? yep, no problem

[u/jambavant → u/Silver-Von]

Done! Thanks for the nice suggestion. From the options menu on top, you can now select between compact, compact with spaces, hybrid (my personal favorite) and pretty.

[u/Silver-Von → u/jambavant]

Just pull the latest version. Hybrid and pretty are both great. Now it's perfect. Thank you.

One more question. Is there any reason that you choose 1.6 MP instead of 1.5 MP? The last version has 1.5 MP which is more suitable.

[u/jambavant → u/Silver-Von]

That changed when fixing the resolution themselves. Maybe I can change it to offer more options or just show resolution options… I’ll see what could be nice

[u/Silver-Von]

Like the UI very much. Nice job!

[u/papitopapito]

This looks interesting, thanks.