<h1 id="orion4d-generative-paint">Orion4D Generative Paint</h1><a target="_blank" rel="ugc" href="https://github.com/orion4d/Orion4D_generative_paint">https://github.com/orion4d/Orion4D_generative_paint</a>Orion4D Generative Paint is a custom node for ComfyUI that adds an advanced painting interface directly usable from the browser.It allows you to create, modify, compose, and export a layered image, with tools similar to a mini graphic editor: layers, brushes, shapes, selections, gradients, fill, palettes, imported images, transformations, and project saving.The node is designed for creative workflows where you want to quickly prepare:<ul><li>a base image;</li><li>a mask;</li><li>a graphic composition;</li><li>a texture;</li><li>a silhouette;</li><li>a workspace for inpainting;</li><li>a visual base before generation or post-processing in ComfyUI.</li></ul><hr /><h2 id="project-objective">Project Objective</h2>Generative Paint is not intended to replace Photoshop, Krita, or GIMP.Its objective is different: to offer a lightweight, local graphic editor integrated into ComfyUI, which can be used quickly while building a workflow.It is used to create or modify an image without leaving ComfyUI, and then directly send the result back into the node as usable outputs.<hr /><h2 id="main-features">Main Features</h2><h3 id="integrated-painting-interface">Integrated Painting Interface</h3><ul><li>HTML interface opened in the browser.</li><li>Interactive canvas.</li><li>Zoom.</li><li>View panning.</li><li>Optional grid.</li><li>Snap to grid.</li><li>Predefined formats.</li><li>Manual dimensions.</li><li>Project saving.</li><li>Retrieval of the final image in ComfyUI.</li><li>Project preview directly within the node.</li></ul><hr /><h2 id="node-outputs">Node Outputs</h2>The node returns several outputs usable in ComfyUI:OutputDescription<code>image</code>RGB image with background applied according to the chosen setting<code>rgba</code>RGBA image with preserved transparency<code>mask</code>Mask generated from the transparencyThese outputs allow Generative Paint to be used to prepare final images as well as masks or intermediate layers.<hr /><h2 id="project-management">Project Management</h2>Generative Paint uses a local project system.Each saved project contains:<ul><li>the layers;</li><li>the canvas parameters;</li><li>the colour information;</li><li>the palettes;</li><li>the imported images;</li><li>the editable composition;</li><li>a PNG image for preview and output.</li></ul>The formats defined in the node are used to create a new project. When an existing project is reopened, it retains its original size saved in the project file.Example:<pre><code>Project created in 1500 × 1500 px
→ it remains 1500 × 1500 px upon next load,
even if the node is subsequently set to 2048 × 2048 or 16:9.
</code></pre><hr /><h2 id="layers">Layers</h2>The layer system allows you to work in a flexible and non-destructive manner.Available functions:<ul><li>layer creation;</li><li>new layer placed above the active layer;</li><li>duplication;</li><li>deletion;</li><li>merging;</li><li>renaming;</li><li>visibility;</li><li>transparency lock;</li><li>opacity;</li><li>blending modes;</li><li>movement within the stack;</li><li>active layer selection;</li><li>Mute/Solo button to quickly isolate a layer.</li></ul>Copy, cut, and paste operations automatically create a new layer above the active layer.<hr /><h2 id="drawing-tools">Drawing Tools</h2>Generative Paint offers several drawing and composition tools.<h3 id="main-tools">Main Tools</h3><ul><li>Brush;</li><li>Eraser;</li><li>Fill;</li><li>Shapes;</li><li>Gradient;</li><li>Move;</li><li>Rotate;</li><li>Scale;</li><li>Lasso;</li><li>Rectangle selection;</li><li>Ellipse selection;</li><li>Zoom;</li><li>Pan.</li></ul><h3 id="available-shapes">Available Shapes</h3><ul><li>line;</li><li>circle;</li><li>ellipse;</li><li>rectangle;</li><li>triangle;</li><li>star;</li><li>hexagon;</li><li>octagon;</li><li>text;</li><li>imported image.</li></ul><hr /><h2 id="generative-parameters">Generative Parameters</h2>The tool relies on a parameter system that allows producing repeated, symmetrical, or random shapes.Available parameters depending on the tools:<ul><li>rotation;</li><li>opacity;</li><li>branches;</li><li>offset;</li><li>line thickness;</li><li>size;</li><li>step;</li><li>smoothing;</li><li>fixed colour;</li><li>random colour;</li><li>colours from palette;</li><li>HSL variation;</li><li>symmetry.</li></ul>Multiple parameters can be randomised to obtain graphic effects quickly.<hr /><h2 id="selections">Selections</h2>The application has several selection tools:<ul><li>lasso;</li><li>rectangular selection;</li><li>elliptical selection.</li></ul>Available behaviours:<ul><li>active selection visible with an animated outline;</li><li>click outside selection to deselect;</li><li>double-click on the selection tool to deactivate the selection;</li><li>deletion of selected pixels;</li><li>copy;</li><li>cut;</li><li>paste onto a new layer;</li><li>move selected pixels;</li><li>rotate selected pixels;</li><li>scale selected pixels;</li><li>move the selection itself by holding right-click;</li><li>add to selection;</li><li>subtract from selection;</li><li>perfect circle;</li><li>perfect square.</li></ul>Combined selections retain their actual mask. A lasso subtraction within a rectangular selection thus produces a truly cut-out shape, and not simply a bounding rectangle.<hr /><h2 id="gradients">Gradients</h2>The Gradient tool allows applying different types of gradients to the active layer.Available modes:<ul><li>1 colour to transparent;</li><li>2 colours;</li><li>3 colours;</li><li>gradient eraser.</li></ul>Types of gradients:<ul><li>linear;</li><li>radial;</li><li>angular;</li><li>reflected;</li><li>diamond.</li></ul>Available options:<ul><li>thumbnail preview;</li><li>quick colour inversion;</li><li>editing stops;</li><li>selectable colours from the Gradient palette;</li><li>double-click on a colour to open the native picker;</li><li>Existing pixels only option to limit the effect to pixels already present;</li><li>adjustable intensity for eraser mode.</li></ul><hr /><h2 id="palettes">Palettes</h2>Generative Paint includes a system for local palettes.Available functions:<ul><li>main colour palette;</li><li>dedicated gradient palette;</li><li>direct selection from the swatches;</li><li>import palette;</li><li>export palette;</li><li>local saving;</li><li>load saved palettes;</li><li>delete palettes.</li></ul>Palettes are stored in the folder:<pre><code>palettes/
</code></pre><hr /><h2 id="user-images">User Images</h2>It is possible to use external images in the editor.User images can be placed in the folder:<pre><code>user_images/
</code></pre>They can then be used as graphic elements in the interface.<hr /><h2 id="fonts">Fonts</h2>The <code>fonts/</code> folder allows you to add fonts usable by the text tool.<pre><code>fonts/
</code></pre>Recommended formats:<pre><code>.ttf
.otf
.woff
.woff2
</code></pre><hr /><h2 id="custom-effects">Custom Effects</h2>Generative Paint can load custom effects from the custom node folder or from the folder:<pre><code>effects/
</code></pre>Effect scripts can be written in JavaScript or Python depending on their integration.Examples of recognised names:<pre><code>effect_example.js
effect_example.py
my_effect.gp_effect.js
my_effect.gp_effect.py
</code></pre>This approach allows extending the editor without directly modifying the application's core.<hr /><h2 id="installation">Installation</h2><ol><li>Close ComfyUI.</li><li>Copy the custom node folder to:</li></ol><pre><code>ComfyUI/custom_nodes/Orion4D_generative_paint/
</code></pre><ol><li>Ensure the structure looks like this:</li></ol><pre><code>Orion4D_generative_paint/
├── __init__.py
├── node.py
├── web/
│ ├── generative_paint_comfy.html
│ ├── generative-paint-web.js
│ └── generative_paint_node.js
├── effects/
├── fonts/
├── gradient/
├── palettes/
├── presets/
├── projects/
└── user_images/
</code></pre><ol><li>Restart ComfyUI.</li><li>Add the node:</li></ol><pre><code>Orion4D Generative Paint Projects
</code></pre>into a workflow.<hr /><h2 id="quick-start">Quick Start</h2>Typical workflow:<ol><li>Add the Orion4D Generative Paint Projects node in ComfyUI.</li><li>Choose an existing project or select <code>__new__</code>.</li><li>Define a project name.</li><li>Choose a predefined or manual format.</li><li>Click on Open App.</li><li>Paint, compose, or modify the image.</li><li>Save from the interface.</li><li>Return to ComfyUI.</li><li>The image is updated in the node.</li></ol><hr /><h2 id="keyboard-shortcuts">Keyboard Shortcuts</h2>ShortcutAction<code>B</code>Brush<code>G</code>Eraser<code>F</code>Fill<code>L</code>Lasso<code>V</code>Move<code>R</code>Rotate<code>E</code>Clear active layer<code>Ctrl + C</code>Copy selection<code>Ctrl + X</code>Cut selection<code>Ctrl + V</code>Paste onto a new layer<code>Ctrl + D</code>Deselect<code>Delete</code> / <code>Del</code>Delete selected pixels or delete the layer depending on context<code>Alt + selection</code>Add to active selection<code>Ctrl + selection</code>Subtract from active selection<code>Shift + ellipse</code>Perfect circle<code>Shift + rectangle</code>Perfect squareHold Right-ClickMove the active selection<hr /><h2 id="project-folders">Project Folders</h2><h3 id="web"><code>web/</code></h3>Contains the interface and browser-side logic.<pre><code>web/generative_paint_comfy.html
web/generative-paint-web.js
web/generative_paint_node.js
</code></pre><h3 id="projects"><code>projects/</code></h3>Contains the saved projects.<pre><code>projects/
</code></pre>Each project uses a safe name derived from the name entered in the node.<h3 id="palettes"><code>palettes/</code></h3>Contains the colour palettes.<pre><code>palettes/
</code></pre><h3 id="gradient"><code>gradient/</code></h3>Contains the saved gradients.<pre><code>gradient/
</code></pre><h3 id="presets"><code>presets/</code></h3>Contains the presets used by the interface.<pre><code>presets/
</code></pre><h3 id="user_images"><code>user_images/</code></h3>Contains the user images available in the application.<pre><code>user_images/
</code></pre><h3 id="fonts"><code>fonts/</code></h3>Contains the fonts added by the user.<pre><code>fonts/
</code></pre><h3 id="effects"><code>effects/</code></h3>Contains custom effects.<pre><code>effects/
</code></pre><hr /><h2 id="usage-tips">Usage Tips</h2><ul><li>Use multiple layers to keep a flexible workflow.</li><li>Duplicate a layer before a major transformation.</li><li>Use selections to limit fills, gradients, and transformations.</li><li>Use <code>Alt + selection</code> and <code>Ctrl + selection</code> to build complex masks.</li><li>Use the Mute/Solo button to quickly isolate a layer while working.</li><li>Keep important projects in the <code>projects/</code> folder.</li><li>Avoid project names that are too long or contain special characters.</li><li>Reload the project list in the node if a newly created project does not appear immediately.</li></ul><hr /><h2 id="development">Development</h2>The project mainly relies on three files:<pre><code>node.py
web/generative_paint_comfy.html
web/generative-paint-web.js
</code></pre>The following file manages the integration of the node into the ComfyUI interface:<pre><code>web/generative_paint_node.js
</code></pre><hr /><h2 id="troubleshooting">Troubleshooting</h2><h3 id="the-project-does-not-open">The project does not open</h3>Verify that the project file is present in:<pre><code>projects/
</code></pre>Also check that ComfyUI has been restarted after installation or replacing files.<hr /><h3 id="the-browser-keeps-an-old-version-of-the-interface">The browser keeps an old version of the interface</h3>Perform a hard reload:<pre><code>Ctrl + F5
</code></pre>or clear the browser cache for the ComfyUI local address.<hr /><h3 id="the-project-does-not-appear-in-the-list">The project does not appear in the list</h3>Click on:<pre><code>Refresh Projects
</code></pre>in the node.If necessary, restart ComfyUI.<hr /><h3 id="the-image-displayed-in-the-node-is-not-up-to-date">The image displayed in the node is not up to date</h3>Click on:<pre><code>Refresh Projects
</code></pre>or relaunch the workflow.<hr /><h3 id="the-canvas-does-not-have-the-expected-size">The canvas does not have the expected size</h3>For a new project, the size comes from the node settings.For an existing project, the size comes from the saved project. This is intentional to avoid distorting an existing image.<hr /><h2 id="compatibility">Compatibility</h2>The custom node is designed for ComfyUI and a modern browser.Recommended browsers:<ul><li>Chrome;</li><li>Edge;</li><li>Recent Firefox.</li></ul>The project was designed for local use with ComfyUI.<hr /><h2 id="current-limitations">Current Limitations</h2>This first version is functional, but certain limits may still exist:<ul><li>the interface depends on the browser;</li><li>some shortcuts may be captured differently depending on the system;</li><li>very large canvases may consume a lot of memory;</li><li>custom effects require a correct script structure;</li><li>the project system is local to the custom node folder.</li></ul>

Files with SHA256: e419d10bce07235ab66d3441e2449dba669f7f1ab59a7f5a1d915860e0742c67