Public/automatic
1
0
Fork 0
mirror of https://github.com/vladmandic/automatic synced 2026-09-20 09:38:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

update wiki 

Signed-off-by: vladmandic <mandic00@live.com>
vladmandic
2026-04-17 13:40:08 +02:00
parent 26c4d7bf56
commit 1295f52bb3
1 changed files with 133 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Kanvas.md
+133 -88
@@ -1,61 +1,85 @@
# Kanvas
[Kanvas](https://github.com/vladmandic/sdnext-kanvas) is an advanced image editing module for [SD.Next](https://github.com/vladmandic/sdnext)
that provides a rich set of features for manipulating images before processing them using various models
It offers tools for uploading, mixing, resizing, painting, filtering and masking images,
making it a versatile tool for users looking to enhance their image editing capabilities
with tools for upload, paste, paint, resize, crop, filters, text, outpaint, masking, and multi-stage workflows.
![Image](https://github.com/user-attachments/assets/54b25586-b611-4d70-a28f-ee3360944034)
> [!NOTE]
> Kanvas is enabled by default and available in a unified **Control** interface in both *ModernUI* and *StandardUI*
> Legacy **Img2Img** interface continues to use standard *Gradio* image handling
### Stage
Stage is the main container for the Kanvas and contains two layers: **image layer** and **mask layer**
Each of the layers can contain multiple objects
> Kanvas is enabled by default and available in unified **Control** interfaces in both *ModernUI* and *StandardUI*.
> Legacy **Img2Img** continues to use standard *Gradio* image handling.
> [!TIP]
> To have a full-screen Kanvas experience, collapse left and right sidebars and output panel
> Quick shortcuts:
>
> | Action | Windows/Linux | macOS |
> | --- | --- | --- |
> | Undo | `Ctrl+Z` | `Cmd+Z` |
> | Redo | `Ctrl+Shift+Z` or `Ctrl+Y` | `Cmd+Shift+Z` |
> | Pan while zoomed | Hold `Ctrl` + drag | Hold `Ctrl` + drag |
### Stages
Kanvas supports multiple stages.
Each stage has its own **image layer** and **mask layer**, and each layer can contain multiple objects.
The stages panel appears above the shapes list and provides:
- Current active stage
- Stage thumbnails (from the stage image layer)
- Stage resolution
- Add stage (`+`)
- Delete stage (`×`) for non-primary stages
Rules and limits:
- Maximum of 10 stages
- Stage 1 cannot be deleted
- Clicking a stage switches active editing to that stage
- Clicking a stage without an image thumbnail opens upload
> [!IMPORTANT]
> Processing/export uses the **currently active stage only**.
> Switch to the stage you want before sending to SD.Next.
> [!TIP]
> For a full-screen Kanvas experience, collapse left/right sidebars and output panel.
### Working with Objects
Objects can be **images**, **paint shapes** or **text** and are organized in groups on each of image and mask layers
Kanvas allows you to work with any object on either layer: each object can be selected, moved, resized, cropped or deleted independently
Objects can be **images**, **painted shapes** (for example brush strokes), or **text**.
Objects are independent and can be selected, moved, transformed, cropped, filtered, or deleted.
*Example*:
1. Upload image
2. Click on image to select it
3. Click on *Move/Resize* button
4. Move or resize image using mouse or touch gestures
5. Upload another image, etc...
Example:
1. Upload an image.
2. Click the image to select it.
3. Click *Move/Resize*.
4. Move or resize using mouse/touch.
5. Add additional images or drawings as separate objects.
> [!TIP]
> By default, Kanvas stage is scaled to fit viewable area
> This may result in pixel-offset between mouse pointer and actual object position
> To perform precise editing, use *zoom lock* button to disable auto-scaling and work at 1:1 pixel ratio
> By default, the stage is auto-scaled to fit the visible area.
> For precise edits, enable *Zoom lock* and work at 1:1 scale.
> [!TIP]
> To pan entire stage when its zoomed in, hold *control* and drag with mouse or touch gestures
> To pan while zoomed in, hold *Ctrl* and drag.
> [!NOTE]
> Size indicator in the toolbar shows current stage size
### Shapes List
Kanvas shows a live shapes list for the active layer:
- Title shows active layer and shape count
- Every shape entry shows type and size
- Click a shape entry to select it on canvas
This is useful when shapes overlap and are hard to select directly.
### Text vs Image vs Inpaint
When you start processing, objects in both layers will determine which workflow SD.Next will use
- All objects on the **image layer** will be merged into single image and passed as input to SD.Next
- All objects on the **mask layer** will be merged into single mask and passed as input to SD.Next
SD.Next will then decide which workflow to use based on the presence of image and/or mask
- If image is empty, SD.Next will use standard *text-to-image* workflows
- If image is not empty, SD.Next will use *image-to-image* workflows
- If mask is not empty, SD.Next will use *inpainting* workflows
When processing starts, Kanvas rasterizes the **active stage** layers and SD.Next picks workflow by available inputs:
- If image is empty, SD.Next uses *text-to-image*
- If image exists, SD.Next uses *image-to-image*
- If mask exists, SD.Next uses *inpainting*
> [!NOTE]
> Before sending Kanvas to SD.Next processing, make sure to deselect any selected objects
> Deselecting active transforms before processing helps avoid accidental edits.
### Toolbar
@@ -63,82 +87,105 @@ SD.Next will then decide which workflow to use based on the presence of image an
### Layer Selection
Select active layer by clicking on either *image layer* or *mask layer* button in the toolbar
Use *image layer* or *mask layer* button to choose the active editing layer.
### Upload / Remove / Reset
### Upload / Paste / Remove / Reset
Use *upload* button to upload images to the active layer (image or mask) depending on the current selection
You can upload multiple images one by one and each immage will be added as a separate object on the active layer
Alternatively, you can drag-and-drop an image directly onto the stage and they will be added as separate objects on the active layer
Use *upload* to add images to the active layer.
Use *paste* to insert image content from clipboard.
You can also drag-and-drop image files onto Kanvas.
Use *remove* button to remove any selected object from the active layer
Remove button only affects currently selected object on the active layer which allows you to delete specific objects without affecting other objects on either layer
For example, you can select and delete one image or you can select and delete line segment which you've painted
Each uploaded image becomes a separate object.
Use *reset* button to clear all objects from both layers and reset the stage
Use *remove* to delete the currently selected object.
### Undo / Redo
Kanvas keeps a history of stage edits and supports both toolbar and keyboard undo/redo:
- Use toolbar buttons: *Undo* (`⟲`) and *Redo* (`⟳`)
- Keyboard:
- Undo: `Ctrl+Z` (or `Cmd+Z` on macOS)
- Redo: `Ctrl+Shift+Z`, `Cmd+Shift+Z`, or `Ctrl+Y`
History tracks structural edits (for example upload, remove, resize, filters, text, outpaint, stage operations),
as well as paint and wand operations.
> [!TIP]
> Magic wand drag is treated as a single history step, so one continuous drag can be undone in one action.
Use *reset* to clear Kanvas and reinitialize stage state (including stage list) to defaults.
### Opacity
Use *opacity* slider to adjust opacity of any selected object on either image or mask layer depending on the current selection
Use the opacity slider to change opacity of the selected object.
### Move / Resize
Use *move/resize* tool to move or resize any selected object on either image or mask layer depending on the current selection.
Use *Move/Resize* to transform selected objects.
> [!TIP]
> If you move objets around the stage, you may end up with large empty areas around the objects
> Simply double-click on an empty area to automatically resize the stage to fit all objects
> If you move objects and leave large empty space, double-click an empty canvas area to fit stage size to content bounds.
### Crop
Use *crop* tool to crop any selected object on either image or mask layer depending on the current selection
Use *crop* to crop selected image objects.
### Paint
Use *free paint* tool to draw on either image or mask layer depending on the current selection
Use *free paint* to draw on the active layer with brush settings.
### Magic Wand
Use *Magic Wand* to fill contiguous regions in the active layer based on color similarity:
- Works in both image and mask layers
- Uses the current brush color, opacity, and blend mode
- For mask layer painting, color is converted to grayscale
- Tolerance controls how broadly similar pixels are included
Wand matching source:
- Default: samples colors from the active layer
- Optional: enable *merged* to sample from combined image+mask view
Typical flow:
1. Select active layer (*image* or *mask*).
2. Click *Magic Wand*.
3. Adjust tolerance (and optionally enable *merged*).
4. Click or drag on canvas to fill matching contiguous areas.
### Outpaint
Outpaint is achieved by
1. Uploading an image to image layer
2. Resize image by changing its resolution to desired size
3. Select *move/resize* tool and move the image to a desired position on the stage
Optionally resize image, although that is not required
4. Click on *outpaint* button to enter outpaint mode
5. Set outpaint expand and blur parameters as necessary
6. click on *outpaint* button again to apply outpainting
7. Start processing
Typical outpaint flow:
1. Upload image to image layer.
2. Resize stage to target resolution.
3. Use *Move/Resize* to position the image.
4. Click *Outpaint* to enter outpaint mode.
5. Adjust blur/expand.
6. Click *Outpaint* again to apply.
7. Start SD.Next processing.
> [!NOTE]
> Larger the expand value, more overlap will be between existing image and outpainted area so model can blend them better
> Higher expand values increase overlap, which can improve blending.
> [!IMPORTANT]
> For outpainting to take effect, it is necessary *input -> denoising strength* in SD.Next processing settings
> Recommended values are 0.65-0.85
> You may need to re-roll a few times to get desired results
> Outpainting requires suitable *Input -> Denoising strength* in SD.Next (typically 0.65-0.85).
### Filters
Use *filter* tool to apply various filters to any selected object on either image or mask layer
depending on the current selection
To use filter tool:
1. Select an object
2. Click on *filter* button
3. Select desired filter from the dropdown menu and adjust filter parameters as needed
4. Click on *filter* button again to apply the filter
Use *Filters* on selected objects:
1. Select object.
2. Click *Filters*.
3. Pick filter and adjust value.
4. Click *Filters* again to apply.
### Text
Use *text* tool to add text objects by specifying font, color, brush mode and text content in the toolbar
and then dragging a text box on the stage from top-left to bottom-right
Kanvas will auto-size text to fit inside the box
Note that text will be drawn on the active layer (image or mask) depending on the current selection
Use *Text* by setting font and text value, then dragging a text box on the stage.
Text is created on the active layer.
### Zoom / Scale
Zoom in/out using mouse wheel, toolbar buttons or touch gestures
Use *zoom lock* button to toggle auto-scaling of the stage to fit viewable area
When *zoom lock* is enabled, stage will remain at 1:1 pixel ratio for precise editing
Zoom with mouse wheel, touch gestures, or toolbar buttons.
*Zoom lock* toggles auto-fit behavior to keep manual zoom/1:1 workflow.
### Settings
@@ -146,27 +193,25 @@ When *zoom lock* is enabled, stage will remain at 1:1 pixel ratio for precise ed
### Server-side Masking
SD.Next further enhances Kanvas capabilities by providing advanced masking options in the input panel
For example, you can skip drawing a mask in the Kanvas mask layer and instead use *Auto-segment* or *Auto-mask* in the *Input* panel to generate a mask based on the uploaded image
SD.Next can generate masks server-side from input image (for example *Auto-segment* or *Auto-mask*), even when Kanvas mask layer is empty.
*Example* auto-mask using `BEN2` model:
Example auto-mask using `BEN2` model:
<img width="1024" alt="Image" src="https://github.com/user-attachments/assets/85d44d3e-9a6f-4d7c-b88d-c8ebc61f8d41" />
Additionally, server options can post-process Kanvas masks:
- Blur: Gaussian blur
- Dilate/Erode: expand or shrink mask
Aditionaly, any server options are automatically applied to Kanvas mask when processing images:
- Blur: applies Gaussian blur to the Kanvas mask
- Dilate / Erode: shrinks or expands the Kanvas mask
Any server-side mask options can be rendered to preview panel before processing
These options can be previewed before processing.
### Disable Kanvas
> [!TIP]
> To disable Kanvas module and enable standard Gradio image handling, set the environment variable
> To disable Kanvas and use standard Gradio image handling, set:
> `SD_DISABLE_KANVAS=true`
### Implementation
Kanvas is maintained in a separate repository: [sdnext-kanvas](https://github.com/vladmandic/sdnext-kanvas) and is included as a submodule in the main SD.Next repository
Kanvas is built using [TypeScript](https://www.typescriptlang.org/) and leveraging the power of [Konva.js](https://konvajs.org/) library for canvas manipulation
Kanvas is maintained in [sdnext-kanvas](https://github.com/vladmandic/sdnext-kanvas) and included as a submodule in SD.Next.
It is built with [TypeScript](https://www.typescriptlang.org/) and [Konva.js](https://konvajs.org/) for canvas operations.