wiki and more (#4)

* add main README
* add the node list
* improve wiki: XY Plot node references, various adjustments
* ...
This commit is contained in:
Bug, Ltd.
2025-01-22 17:51:37 +01:00
committed by GitHub
parent cc6775802d
commit 24910e33a6
93 changed files with 321 additions and 98 deletions
+17 -13
View File
@@ -12,12 +12,12 @@
# Node overview
**The complete list of nodes can be found in the [wiki / node reference](./wiki/node%20reference/)**
**The complete list of nodes can be found in the [wiki / node list](./wiki/node_list.md)**
## XY Plot - build beautiful and unique grids
## XY Plot - _build beautiful and unique grids_
**Auto-queue**, make virtually **anything vary** (checkpoints, LoRAs, ...), **not restricted to KSampler**, pagination, ...\
**Many configuration options**: page header / footer, custom fonts (even your own), background,...\
**Auto-queue**, make virtually **anything vary** (checkpoints, LoRAs, ...), **not restricted to KSampler**, ...\
**Many configuration options**: pagination, page header / footer, custom fonts (even your own), background,...\
**Make it RGBA** and add a custom background image for a very unique look.
<details>
@@ -45,10 +45,10 @@
> More information in the [XY Plot node reference](./wiki/node%20reference/xy%20plot/) and the [dedicated tutorials](./wiki/tutorials/XY%20Plot/), from simple to advanced.\
> You can also check the [examples](./wiki/examples/), they will be frequently extended.
## Output Config - dynamic outputs from a config file
## Output Config - _dynamic outputs from a config file_
The `Output Config` nodes allow you to load custom config files, to **dynamically create any number of custom outputs**, that you can later connect to other nodes before executing the workflow.\
Very **useful to standardize your workflows**, and keep a collection of configurations / test cases separately. Or many more, depending on you specific case...
Use the `Output Config` nodes to load custom config files, and **dynamically create any number of custom outputs**, that you can later connect to other nodes before executing the workflow.\
Very **useful to standardize your workflows**, and keep a collection of configurations / test cases separately, share them with others... and many other applications.
<details>
<summary><strong>Detailed features</strong> <i>(click to show)</i></summary>
@@ -63,29 +63,32 @@ Very **useful to standardize your workflows**, and keep a collection of configur
> More information in the [Output Config node reference](./wiki/node%20reference/output%20config.md) and the [dedicated tutorials](./wiki/tutorials/Output%20Config/).\
> You can also check the [examples](./wiki/examples/), they will be frequently extended.
## Format String - one node to rule them all
## Format String - _one node to rule them all_
Take advantage of the powerful **Python string `format()`** method, to build strings using placeholders.\
Very useful for many operations: **replace, concatenate, prefix / append, pad, limit**, ...\
Very useful for many operations: **insert / prefix / append, concatenate, pad, truncate**, ...\
**Any number of inputs** _(credits to [@melMass](https://github.com/melMass) and his [comfy_mtb](https://github.com/melMass/comfy_mtb) extension for the trick!)_.\
Compatible with **integers, floats, booleans.**\
Exist in 2 flavors: **simple string and multiline**.\
Safe to use (no arbitary code execution, ...): a well-proven, standard Python method.
Exist in 2 flavors: **simple string and multiline**.
> More information in the [Format String node reference](./wiki/node%20reference/format.md) and the [dedicated tutorials](./wiki/tutorials/Format/).\
> You can also check the [examples](./wiki/examples/), they will be frequently extended.
## Queue - efficient and simple to use
## Queue - _efficient and simple to use_
Exist in 3 flavors: **Generic**, **File**, **Image**.\
Very simple to use: **auto-queuing** (with error / interruption detection), no counter to reset or batch size to set.
## List utilities - make lists as you want
## List utilities - _make lists as you want_
A set of nodes to **create lists** (from string, file, individual elements).\
**Parse and convert** strings to integers, floats, ...\
**Merge / limit** lists.
## More utilities
Please check the [node list](./wiki/node_list.md).
# Documentation
<ins>Important note:</ins> all nodes in this extension has been adjusted with custom tooltips.\
@@ -93,6 +96,7 @@ By simply **moving the mouse pointer over** a node or its inputs / widgets / out
In addition, more detailed information in the [wiki](./wiki/):
- [Node list](./wiki/node_list.md)
- [Node reference](./wiki/node%20reference/)
- [Tutorials](./wiki/tutorials/)
- [Examples](./wiki/examples/)
+1 -1
View File
@@ -18,4 +18,4 @@ Changelog = "https://github.com/bugltd/ComfyLab-Pack/blob/main/CHANGELOG.md"
[tool.comfy]
PublisherId = "bugltd"
DisplayName = "ComfyLab Pack"
Icon = "https://avatars.githubusercontent.com/u/194549623?s=400&&v=4"
Icon = "https://github.com/bugltd/ComfyLab-Pack/blob/main/.images/repo_icon.jpg"
+14 -8
View File
@@ -7,12 +7,16 @@ Here you will find plenty of information / tricks to help you discover the nodes
Please take the time to read the pages if you face difficulties, and before [creating an issue](https://github.com/bugltd/ComfyLab-Pack/issues).
Apart from these pages, I also customized most of the labels and tooltips.\
You can get **useful contextual information in tooltips**, by just hovering (putting the mouse pointer) over the node title, or inputs / widgets / outputs. It's not perfect, but should be enough in the most standard cases.
You can get **useful contextual information in tooltips**, by just hovering (putting the mouse pointer over) the node title, or its inputs / widgets / outputs. It's not perfect, but should be enough in the most standard cases.
> If you can, do not hesitate to propose a Pull Request to improve this wiki, and benefit to the community:\
> English is not my native language, so there is certainly a lot to do to improve it.
That being said, have a good read, dear friends!
That being said, have a good read!
---
**[Comprehensive list of nodes](./node_list.md)**
---
@@ -21,17 +25,19 @@ That being said, have a good read, dear friends!
- [Output Config (Load / Retrieve)](./node%20reference/output%20config.md)
- [Format (String / Multiline)](./node%20reference/format.md)
- [XY Plot](./node%20reference/xy%20plot/)
- [00 - Core concepts](./node%20reference/xy%20plot/00%20-%20core%20concepts.md)
- [0 - Core concepts](./node%20reference/xy%20plot/0%20-%20core%20concepts.md)
- [1 - Queue and Render](./node%20reference/xy%20plot/1%20-%20queue%20and%20render.md)
- [2 - Config nodes](./node%20reference/xy%20plot/2%20-%20config%20nodes.md)
---
**[Tutorials](./tutorials/)**:
- [OutputConfig](./tutorials/Output%20Config/)
- [01 - simple (value & label)](<./tutorials/Output%20Config/01%20-%20simple%20(value%20and%20label)/>)
- [02 - more options](./tutorials/Output%20Config/02%20-%20more%20options/)
- [1 - simple (value & label)](<./tutorials/Output%20Config/1%20-%20simple%20(value%20and%20label)/>)
- [2 - more options](./tutorials/Output%20Config/2%20-%20more%20options/)
- [XY Plot](./tutorials/XY%20Plot/)
- [01 - the basics](./tutorials/XY%20Plot/01%20-%20the%20basics/)
- [02 - pimp my grid](./tutorials/XY%20Plot/02%20-%20pimp%20my%20grid/)
- [03 - advanced techniques](./tutorials/XY%20Plot/03%20-%20advanced%20techniques/)
- [1 - the basics](./tutorials/XY%20Plot/1%20-%20the%20basics/)
- [2 - pimp my grid](./tutorials/XY%20Plot/2%20-%20pimp%20my%20grid/)
- [3 - advanced techniques](./tutorials/XY%20Plot/3%20-%20advanced%20techniques/)
- [Format](./tutorials/Format/)
+5 -1
View File
@@ -1,9 +1,13 @@
# Node reference
For the comprehensive list of nodes, please check [this page](../node_list.md)
**[Output Config (Load / Retrieve)](./output%20config.md)**
**[XY Plot](./xy%20plot/)**:
- [00 - Core concepts](./xy%20plot/00%20-%20core%20concepts.md)
- [0 - Core concepts](./xy%20plot/0%20-%20core%20concepts.md)
- [1 - Queue and Render](./xy%20plot/1%20-%20queue%20and%20render.md)
- [2 - Config nodes](./xy%20plot/2%20-%20config%20nodes.md)
**[Format (String / Multiline)](./format.md)**
+1 -1
View File
@@ -33,7 +33,7 @@ For more details and advanced techniques, you can check:
- [the tutorials of the `Format` nodes](../tutorials/Format/)
- [a guide with different possible techniques (padding, ...)](https://pyformat.info/)
- [the official page on python.org](https://docs.python.org/3/tutorial/inputoutput.html#the-string-format-method)
- [format specification mini-language (python.org)](https://docs.python.org/3/library/string.html#format-specification-mini-language)
## Inputs / Widgets / Outputs
@@ -1,8 +1,8 @@
# Node reference / XY Plot: 00 - Core concepts
# Node reference / XY Plot: 0 - Core concepts
As a minimum, to use the `XY Plot`, you need to integrate 2 nodes, `XY Plot: Queue` and `XY Plot: Render`: the first one will organize the queue, the second one will render the grid(s).
![standard nodes](./images/nodes.jpg)
<img src="./images/queue_render.jpg" alt="XY Plot standard nodes" width="80%">
They must be connected by the specific `XY plot data` link : that is the way the queue can inform the render node about the current processing state.
@@ -10,7 +10,7 @@ What is processed between them (from `dim1 value` / `dim2 value` outputs of `Que
## XY Plot: Queue
As you can see in the screenshot, there is no concept of row / column or X / Y here, as in many other plot / grid implementations:
As you can see in the screenshot, there is no concept of row / column or X / Y in the `Queue` node, as in many other plot / grid implementations:
- instead, we talk about `dim1` and `dim2` (dimensions 1 & 2)
- this is intended, to improve performance: but we'll talk about that later
@@ -1,21 +0,0 @@
# Node reference / XY Plot: 01 - Queue and Render
**Work in Progress**
## Node overview
![standard nodes](./images/nodes.jpg)
### XY Plot: Render
As per the widgets:
- `dim1: header format` and `dim2: header format`
- enter here a template string, following the syntax of Python string `format()` method
- the `{dim1}` and `{dim2}` placeholders will be replaced by the current dim1 / dim2 value
- very handy if you want to prefix the row / column headers, for example:
- if you have CFG values in dim1, by default the headers will be `7.5`, `8`, ...
- just change the dim1 header format to `CFG: {dim1}` and you will get: `CFG: 7.5`, `CFG: 8`, ...
- there are plenty of advanced techniques, but you will probably not use them here
- however if you want to learn more, you can check the [`Format` node reference](../format.md)
- `direction`: whether dim1 values are displayed as rows, or columns
@@ -1,3 +0,0 @@
# Node reference / XY Plot: 02 - Config nodes
**Work in Progress**
@@ -0,0 +1,84 @@
# Node reference / XY Plot: 1 - Queue and Render
## Node overview
<img src="./images/queue_render.jpg" alt="XY Plot standard nodes" width="80%">
## XY Plot: Queue
Important notes:
- `dim` and `dim2` take lists as inputs, and sends each combination of values in outputs
- as the node cannot anticipate what is the type of input list values, the outputs are set to type Any (`"*"`)
- it means that you can connect the outputs everywhere
- but you must ensure that the type of data in input correspond to the expected in destination node
- **what you send is what you get**
- `dim1` and `dim2` are processed following the rule: **for a given `dim1` value, we process all values of `dim2` before switching to the next `dim1` value**
- the node will manage auto-queuing: ensure set **the batch size is set to 1**
For more detailed explanations, please check the [core concepts](./0%20-%20core%20concepts.md).
### Inputs / Widgets / Outputs
#### Inputs
| input name | type | description | comment |
| :--------: | :--: | :---------------------: | :------ |
| dim1 | LIST | input list #1 | |
| dim2 | LIST | optional: input list #2 | |
#### Widgets
| widget name | type | description | comment |
| :----------------: | :--: | :------------------------: | :------------- |
| dim1: max per page | INT | pagination for dim1 values | `0` to disable |
| dim2: max per page | INT | pagination for dim2 values | `0` to disable |
#### Outputs
| output name | type | description | comment |
| :----------: | :---------: | :-------------------------------: | :-------------------------- |
| XY Plot data | XYPLOT_DATA | queue processing data | linked to `XY Plot: Render` |
| dim1 value | ANY (`*`) | list element from dim1 input list | |
| dim2 value | ANY (`*`) | list element from dim2 input list | |
## XY Plot: Render
Note:
- `dim1: header format` and `dim2: header format`
- enter here a template string, following the syntax of Python string `format()` method
- the `{dim1}` and `{dim2}` placeholders will be replaced by the current dim1 / dim2 value
- very handy if you want to prefix the row / column headers, for example:
- if you have CFG values in dim1, by default the headers will be `7.5`, `8`, ...
- just change the dim1 header format to `CFG: {dim1}` and you will get: `CFG: 7.5`, `CFG: 8`, ...
- there are plenty of advanced techniques, but you will probably not use them here
- however if you want to learn more, you can check the [`Format` node reference](../format.md)
- `direction`: whether dim1 values are displayed as rows, or columns
### Inputs / Widgets / Outputs
#### Inputs
| input name | type | description | comment |
| :----------: | :--------------: | :-----------------------------------------------: | :--------------------------------------- |
| XY Plot data | XYPLOT_DATA | queue processing data | linked from `XY Plot: Queue` |
| image | IMAGE | image generated by the subprocess (KSampler, ...) | |
| config: grid | PLOT_CONFIG_GRID | optional: grid configuration | linked from `Plot Config: Grid` |
| config: grid | PLOT_CONFIG_HF | optional: page header configuration | linked from `Plot Config: Header/Footer` |
| config: grid | PLOT_CONFIG_HF | optional: page footer configuration | linked from `Plot Config: Header/Footer` |
#### Widgets
| widget name | type | description | comment |
| :-----------------: | :-----: | :-----------------------------: | :---------------------------------------------------- |
| dim1: header format | STRING | dim1 template string | use placeholder `{dim1}` to insert current dim1 value |
| dim2: header format | STRING | dim2 template string | use placeholder `{dim2}` to insert current dim2 value |
| direction | BOOLEAN | display dim1 as rows or columns | |
#### Outputs
| output name | type | description | comment |
| :---------: | :---: | :---------------------: | :--------------------------------------------- |
| grid | IMAGE | generated grid(s) | outputs when enough images have been collected |
| image | IMAGE | image received in input | individual image as received in input |
@@ -0,0 +1,76 @@
# Node reference / XY Plot: 2 - Config nodes
<img src="./images/config.jpg" alt="XY Plot config nodes" width="70%">
## Overview
In addition to the standard [Queue and Render nodes](./1%20-%20queue%20and%20render.md), you can customize many visual aspects of the grid, thanks to 2 optional nodes, `Plot Config: Grid` and `Plot Config: Header/Footer`, than can be plugged into `XY Plot: Render`.\
They allow you to customize the grid, and either the page header or footer (or both), all configurable separately.
To see them in action, please refer to [tutorial #2 - pimp my grid](../../tutorials/XY%20Plot/2%20-%20pimp%20my%20grid/).
While some configuration options are specfic, they share some similarities:
### Font
You can specify the font type, as well as its size and color.
The font type can be either:
- one of the 4 fonts shipped with the extension: _Roboto-Regular.ttf_ / _Roboto-Bold.ttf_ / _Roboto-Italic.ttf_ / _Roboto-BoldItalic.ttf_,
- or the full path to a locally-installed TTF font
The color can expressed either as RGB hex notation (e.g. `#e9e9e9`), or by name (e.g. `blue`).
### Background color
As for the font color, you can use either the RGB hex notation, or a color name.
In addition, you can also use the special value `transparent`:
- in the `Plot Config: Header/Footer`, it means the header / footer will use the same bg color as the grid
- while in `Plot Config: Grid`, it will make the grid RGBA
- useful if you want to add a background image
## Plot Config: Grid
### Widgets / Outputs
#### Widgets
| input name | type | description | comment |
| :-------------------------------------------: | :----: | :-------------------------------------------------------------------------------: | :------------------------------------------------------------------------------- |
| gap | INT | gap between grid cells (pixels) | |
| background colot | STRING | background color | use `transparent` to render the grid as RGBA |
| font | STRING | font type | either one the 4 standard fonts<br/>or full path to a locally-installed TTF font |
| font size | INT | font size (pixels) | |
| font color | STRING | font color | either RGB hex notation or color name |
| col headers: padding<br/>row headers: padding | INT | padding to apply to row/col headers<br/>vertically and horizontally, respectively | |
| col headers: wrap<br/>row headers: wrap | INT | number of characters before wrapping (new line) | "smart wrap" when possible (break on hyphens) |
#### Outputs
| output name | type | description | comment |
| :----------: | :--------------: | :---------: | :-------------------------- |
| config: grid | PLOT_CONFIG_GRID | grid config | linked to `XY Plot: Render` |
## Plot Config: Header/Footer
### Widgets / Outputs
#### Widgets
| input name | type | description | comment |
| :--------------------------------------------: | :----: | :-------------------------------------------------------------------------------: | :------------------------------------------------------------------------------- |
| text (left)<br/>text (center)<br/>text (right) | STRING | text to include in the header or footer<br/>at left / center / right respectively | also aligned depending on position |
| background colot | STRING | background color | use `transparent` to use the same as grid |
| font | STRING | font type | either one the 4 standard fonts<br/>or full path to a locally-installed TTF font |
| font size | INT | font size (pixels) | |
| font color | STRING | font color | either RGB hex notation or color name |
| padding | INT | vertical padding above and below text | |
#### Outputs
| output name | type | description | comment |
| :---------------------: | :------------: | :--------------------------: | :-------------------------- |
| config: header / footer | PLOT_CONFIG_HF | page header or footer config | linked to `XY Plot: Render` |
+3 -1
View File
@@ -1,3 +1,5 @@
# Node reference / XY Plot
[00 - Core concepts](./00%20-%20core%20concepts.md)
[0 - Core concepts](./0%20-%20core%20concepts.md)\
[1 - Queue and Render](./1%20-%20queue%20and%20render.md)\
[2 - Config nodes](./2%20-%20config%20nodes.md)
Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 37 KiB

+62
View File
@@ -0,0 +1,62 @@
# Node list
All extension nodes, organized by category.
## XY Plot
| Node name | Description | Reference | Tutorial |
| :----------------------------: | :----------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| **XY Plot: Queue** | queue dim1 / dim2 input lists into values | [core concepts](./node%20reference/xy%20plot/0%20-%20core%20concepts.md)<br/>[reference](./node%20reference/xy%20plot/1%20-%20queue%20and%20render.md) | [tutorial #1](./tutorials/XY%20Plot/1%20-%20the%20basics/)<br/>[tutorial #2](./tutorials/XY%20Plot/2%20-%20pimp%20my%20grid/)<br/>[tutorial #3](./tutorials/XY%20Plot/3%20-%20advanced%20techniques/) |
| **XY Plot: Render** | render the XY Plot grid | [core concepts](./node%20reference/xy%20plot/0%20-%20core%20concepts.md)<br/>[reference](./node%20reference/xy%20plot/1%20-%20queue%20and%20render.md) | [tutorial #1](./tutorials/XY%20Plot/1%20-%20the%20basics/)<br/>[tutorial #2](./tutorials/XY%20Plot/2%20-%20pimp%20my%20grid/)<br/>[tutorial #3](./tutorials/XY%20Plot/3%20-%20advanced%20techniques/) |
| **Plot Config: Grid** | configure the grid | [reference](./node%20reference/xy%20plot/2%20-%20config%20nodes.md) | [tutorial #2](./tutorials/XY%20Plot/2%20-%20pimp%20my%20grid/)<br/>[tutorial #3](./tutorials/XY%20Plot/3%20-%20advanced%20techniques/) |
| **Plot Config: Header/Footer** | configure either page header or footer | [reference](./node%20reference/xy%20plot/2%20-%20config%20nodes.md) | [tutorial #2](./tutorials/XY%20Plot/2%20-%20pimp%20my%20grid/)<br/>[tutorial #3](./tutorials/XY%20Plot/3%20-%20advanced%20techniques/) |
| **XY Plot: Split Data** | split XY Plot data into page index / count | [reference](./node%20reference/xy%20plot/2%20-%20config%20nodes.md) | [tutorial #2](./tutorials/XY%20Plot/2%20-%20pimp%20my%20grid/)<br/>[tutorial #3](./tutorials/XY%20Plot/3%20-%20advanced%20techniques/) |
## Output Config
| Node name | Description | Reference | Tutorial |
| :-----------------------------------: | :-----------------------------------------------: | :------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------: |
| **Output Config: Load** | create dynamic outputs from a local config file | [reference](./node%20reference/output%20config.md) | [tutorial #1](<./tutorials/Output%20Config/1%20-%20simple%20(value%20and%20label)/>)<br/>[tutorial #2](./tutorials/Output%20Config/2%20-%20more%20options/) |
| **Output Config: Retrieve (backend)** | create dynamic outputs from a backend config file | [reference](./node%20reference/output%20config.md) | [tutorial #1](<./tutorials/Output%20Config/1%20-%20simple%20(value%20and%20label)/>)<br/>[tutorial #2](./tutorials/Output%20Config/2%20-%20more%20options/) |
## Utils
| Node name | Description | Reference | Tutorial |
| :--------------------------: | :------------------------------------------------------------------------------------------------------: | :---------------------------------------: | :------: |
| **Format: String** | format a string, with any number of inputs | [reference](./node%20reference/format.md) | |
| **Format: Multiline** | format a string, with any number of inputs | [reference](./node%20reference/format.md) | |
| **Load Image (RGBA)** | load an image as RGBA, with 2 different available methods to generate the mask | | |
| **Save Text File** | save text content to a file | | |
| **Sleep** | delay execution for the given amount of seconds | | |
| **Convert to Any** | convert any value to type Any ('\*) | | |
| **Resolution to Dimensions** | split a resolution (as string, ex. '1024x1024') to dimensions,<br/>optionally multiplied by scale factor | | |
## List
| Node name | Description | Reference | Tutorial |
| :---------------------------: | :-----------------------------------------------------------------------------------------------------------------: | :-------: | :------: |
| **List: from String** | split a single string into elements delimited by a separator<br/>optionally convert values to integers, flotas, ... | | |
| **List: from Multiline** | split a multiline string, each line being a value<br/>optionally convert values to integers, flotas, ... | | |
| **List: from File (backend)** | read a multiline text file from backend,<br/>and send its content as a list | | |
| **List: from Elements** | create a list from any number of individual elements | | |
| **List: Merge** | merge any number of lists into one | | |
| **List: Limit** | limit list to a given size | | |
## Queue
| Node name | Description | Reference | Tutorial |
| :---------------: | :------------------------------------------------------------: | :-------: | :------: |
| **Generic Queue** | loop through all values of input list | | |
| **File Queue** | loop through all files in folder matching the pattern(s) | | |
| **Image Queue** | loop through all image files in folder matching the pattern(s) | | |
## Input
| Node name | Description | Reference | Tutorial |
| :------------------: | :----------------------------------------------------------: | :-------: | :------: |
| **Input: Folder** | simple input for a folder,<br/>optionally checking it exists | | |
| **Input: Integer** | simple node to provide an integer | | |
| **Input: Float** | simple node to provide a float | | |
| **Input: Boolean** | simple node to provide a boolean | | |
| **Input: String** | simple node to provide a string | | |
| **Input: Multiline** | input a multiline string, with comments optionally stripped | | |
@@ -1,4 +1,4 @@
# Tutorials / Output Config: 01 - simple (value & label)
# Tutorials / Output Config: 1 - simple (value & label)
In this first tutorial, we cover the core principles of `Output Config: Load` with the good old KSampler workflow, and some basic output configuration.
@@ -94,4 +94,4 @@ We have covered most of the core principles of the `Output Config: Load` node:
In the next tutorial, we will see other configuration options (to make your node look like a christmas garland if you wish), and how validation errors are handled.
To jump to it: **[follow the link](../02%20-%20more%20options/)**
To jump to it: **[follow the link](../2%20-%20more%20options/)**

Before

Width:  |  Height:  |  Size: 197 KiB

After

Width:  |  Height:  |  Size: 197 KiB

@@ -1,6 +1,6 @@
# Tutorials / Output Config: 02 - more options
# Tutorials / Output Config: 2 - more options
In [the first tutorial](<../01%20-%20simple%20(value%20and%20label)/>), we have seen how to use and modify a config file to add any number of custom outputs, setting the value and optionally the label.
In [the first tutorial](<../1%20-%20simple%20(value%20and%20label)/>), we have seen how to use and modify a config file to add any number of custom outputs, setting the value and optionally the label.
In this second tutorial, we are going to see more configuration options, and also how validation errors are handled. \
While I don't recommend to customize the color or shape too much, to preserve the standard look of ComfyUI, these options exist in the standard code so they are available for you to play with in your configs. Once again, your config, your choice!
@@ -11,7 +11,7 @@ If you have no time yet to follow it, you can jump to [the conclusion](#tldr--co
### Init the workflow
We will start with the same workflow as in [the first tutorial](<../01%20-%20simple%20(value%20and%20label)/>), so you can either reuse it or download it from here (it's the same).
We will start with the same workflow as in [the first tutorial](<../1%20-%20simple%20(value%20and%20label)/>), so you can either reuse it or download it from here (it's the same).
### Let's make our eyes bleed (a little)
@@ -67,7 +67,7 @@ However, as you can see, in some cases it can open locked doors, and make your c
Last but not least, we need to cover one aspect you will most certainly face: validation errors.
The config must follow strict rules, checked before the outputs are created. For those interested, this validation is performed thanks to a JSON schema, that can be found [here](https://github.com/bugltd/ComfyLab-Pack/blob/doc/src/schema/config.output.schema.json).
The config must follow strict rules, checked before the outputs are created. For those interested, this validation is performed thanks to a JSON schema, that can be found [here](https://github.com/bugltd/ComfyLab-Pack/blob/main/src/schema/config.output.schema.json).
To help you identify errors in your config, the `Output Config: Load` node can inform you about what failed.
@@ -93,7 +93,7 @@ And, of course, the status at the bottom of the node is updated accordingly:
With this second tutorial, we have seen:
- the other available options: `shape`, `color_on`, `color_off`, `type`
- `type` is probably not useful is most cases, as the output type is deducted from the value: string, integer / float, boolean, list, ...
- `type` is probably not useful in most cases, as the output type is deducted from the value: string, integer / float, boolean, list, ...
- however, sometimes we may need to use `type: "*"`, to bypass the typing checks (for combo widgets in particular)
- detailed validation errors can be displayed, to help you understand what needs to be corrected in your config

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 8.4 KiB

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

Before

Width:  |  Height:  |  Size: 197 KiB

After

Width:  |  Height:  |  Size: 197 KiB

+4 -4
View File
@@ -7,9 +7,9 @@ They will also help you understand how you can solve some issues (checkpoints co
If needed, you can also check the [node reference](../../node%20reference/output%20config.md).
## Tutorial 01 - simple (value & label)
## Tutorial 1 - simple (value & label)
**[>> Go to the tutorial](<./01%20-%20simple%20(value%20and%20label)/>)**
**[>> Go to the tutorial](<./1%20-%20simple%20(value%20and%20label)/>)**
Contents:
@@ -17,9 +17,9 @@ Contents:
- how to set output name and value, as well as a custom label
- automatic deduction of the value type
## Tutorial 02 - more options
## Tutorial 2 - more options
**[>> Go to the tutorial](./02%20-%20more%20options/)**
**[>> Go to the tutorial](./2%20-%20more%20options/)**
Contents:
+5 -5
View File
@@ -2,13 +2,13 @@
**[Output Config](./Output%20Config/):**
- [01 - simple (value & label)](<./Output%20Config/01%20-%20simple%20(value%20and%20label)/>)
- [02 - more options](./Output%20Config/02%20-%20more%20options/)
- [1 - simple (value & label)](<./Output%20Config/1%20-%20simple%20(value%20and%20label)/>)
- [2 - more options](./Output%20Config/2%20-%20more%20options/)
**[XY Plot](./XY%20Plot/):**
- [01 - the basics](./XY%20Plot/01%20-%20the%20basics/)
- [02 - pimp my grid](./XY%20Plot/02%20-%20pimp%20my%20grid/)
- [03 - advanced techniques](./XY%20Plot/03%20-%20advanced%20techniques/)
- [1 - the basics](./XY%20Plot/1%20-%20the%20basics/)
- [2 - pimp my grid](./XY%20Plot/2%20-%20pimp%20my%20grid/)
- [3 - advanced techniques](./XY%20Plot/3%20-%20advanced%20techniques/)
**[Format](./Format/)**
@@ -1,4 +1,4 @@
# Tutorials / XY Plot: 01 - the basics
# Tutorials / XY Plot: 1 - the basics
In this first tutorial, we are going to generate our first grids, using the 2 standard XY Plot nodes.
We will also focus a bit on some useful utility nodes, and play with string templating, pagination, and switch rows / headers as we wish.
@@ -10,7 +10,7 @@ Tutorial sections:
- [Part 3 - rows / columns and pagination](#part-3---rows--columns-and-pagination)
- [TL;DR / Conclusion](#tldr--conclusion)
To keep it simple, we will not detail the core concepts here. But if you are interested, now or later, you can check the [dedicated page](../../../node%20reference/xy%20plot/00%20-%20core%20concepts.md).
To keep it simple, we will not detail the core concepts here. But if you are interested, now or later, you can check the [dedicated page](../../../node%20reference/xy%20plot/0%20-%20core%20concepts.md).
> As for all nodes in this extension, you can get useful contextual information, by just **moving the mouse pointer over a node or its inputs / widgets / outputs**. This should help you understand some details, without reading the more detailed wiki pages (yet).
@@ -25,7 +25,7 @@ And as always, if you do not want to follow all the steps, you can jump directly
Adjust the checkpoint to one available in your ComfyUI instance.\
Execute the workflow.
You should get something like this (obviously not exactly the same images):
You should get something like this (obviously not exactly the same images):\
![result - part 1](./details/result%20-%20part%201.jpg)
What do we see?
@@ -37,7 +37,7 @@ What do we see?
#### The inputs
The `Queue` node takes lists as inputs. For this we use the nodes `Format: from Multiline` and `Format: from String`, available in the ComfyLab extension.\
The `Queue` node takes lists as inputs. For this we use the nodes `List: from Multiline` and `List: from String`, available in the ComfyLab extension.\
Of course, you can choose nodes from other extensions, as long as they provide lists.
> There are other list-related nodes in the ComfyLab collection if you need
@@ -46,22 +46,31 @@ Let's focus a bit:
##### prompt input (multiline)
If you look at the first one, you'll see that we haven't generated images of an astronaut. That's because the line starts with a `#`, and the node is set to strip comments.\
![strip comments](./details/detail%20-%20part%201%20-%20comments.jpg)\
<p>
<img src="./details/detail%20-%20part%201%20-%20comments.jpg" alt="strip comments" align="left" hspace="20"/>
If you look at the first input, you see that we haven't generated images of an astronaut.<br/>
<br/>
That's because the line starts with a `#`, and the node is set to strip comments.<br/>
<br/>
Just remove the `#` and you will get an astronaut!
</p>
<br clear="left"/>
##### CFG input (string with seperator)
![float conversion](./details/detail%20-%20part%201%20-%20float.jpg)\
<img src="./details/detail%20-%20part%201%20-%20float.jpg" alt="float conversion" hspace="20"/>
- we have set the values in a string, separated by `, `: `5.5, 7, 10.5`
- the separator is configured accordingly, you can use any character you want: `/`, `|`, `&`, ...
- and we have configured the conversion: `convert: float`
- that is a very important [core concept](../../../node%20reference/xy%20plot/00%20-%20core%20concepts.md):
- that is a very important [core concept](../../../node%20reference/xy%20plot/0%20-%20core%20concepts.md):
- the `Queue` node cannot determine to which input you will connect the dim values
- that is why the output type is `*` (Any): you can connect them anywhere, but **you must ensure the type of input values corresponds to where you will use them**
For the test, just set the `convert` widget to `disabled`. You will get an error on execution: CFG expects a float, and we sent strings.\
<br/>
For the test, just set the `convert` widget to `disabled`.\
You will get an error on execution: CFG expects a float, and we sent strings.\
![conversion error](./details/detail%20-%20part%201%20-%20convert%20error.jpg)
#### processing / auto-queuing
@@ -79,7 +88,7 @@ Let's do our first customizations, that will be short:
- in the dim1 multiline input, you can see that all lines start with `a photograpgy of`
- that's redundant, and make row headers too long: let's optimize this
- in the grid, the columns just display the CFG values. Let's add a prefix `CFG: `
- in the grid, the columns just display the CFG values. Let's add prefix `CFG: `
**Load either `workflow - part 2.json` or `workflow - part 2.png` into ComfyUI**.\
Execute the workflow.
@@ -93,7 +102,7 @@ What did we change?
First, we have inserted the [`Format: String` node](../../../node%20reference/format.md), between the dim1 output of the queue, and the CLIP Text Encode node.\
![format node](./details/detail%20-%20part%202%20-%20prompt.jpg)\
It is as simple as it is powerful:
It is as powerful as it is simple to use:
- it takes advantage of Python string `format()` method, to allow string replacement, and many other things, by using placeholders: here `{arg0}`, as the name of the input
- this node also takes any number of inputs, even though we have just used one here
@@ -141,4 +150,4 @@ We have covered many important things in this first tutorial:
Okay, that's nice, we have created grids, but TBH they have nothing special for the moment...\
**Where ComfyLab's XY Plot really shines is its configurability**, to help you design the grids you want, like you want:\
That's exactly what we are going to see in the **next tutoral: [02 - pimp my grid](../02%20-%20pimp%20my%20grid/)**
That's exactly what we are going to see in the **next tutoral: [2 - pimp my grid](../2%20-%20pimp%20my%20grid/)**

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 9.3 KiB

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 9.4 KiB

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 42 KiB

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 37 KiB

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

Before

Width:  |  Height:  |  Size: 278 KiB

After

Width:  |  Height:  |  Size: 278 KiB

Before

Width:  |  Height:  |  Size: 289 KiB

After

Width:  |  Height:  |  Size: 289 KiB

Before

Width:  |  Height:  |  Size: 290 KiB

After

Width:  |  Height:  |  Size: 290 KiB

@@ -1,4 +1,4 @@
# Tutorials / XY Plot: 02 - pimp my grid
# Tutorials / XY Plot: 2 - pimp my grid
In this second tutorial, we are going to discover the true power of ComfyLab's XY Plot: its configurability.\
First by tweaking the grid itself, then by adding header and footer to the page.\
@@ -39,7 +39,7 @@ In details:
- either one of the fonts shipped in the extension: _Roboto-Regular.ttf_ / _Roboto-Bold.ttf_ / _Roboto-Italic.ttf_ / _Roboto-BoldItalic.ttf_,
- or the full path to a locally-installed TTF font
- this way you can make your grid really different
- `padding`: you can adjust the space surrounding the row / col headers
- `padding`: adjust the space surrounding the row / col headers
- `wrap`: wrap the row / col headers to a given number of characters, if they are too long
With just this simple optional node, we have already completely changed the look of our grid.\
@@ -61,9 +61,9 @@ This way **you can configure them separately, or just add a footer for example**
Some of the configuration options are similar to the `Plot Config: Grid` (font, ...), and some are new:
- `text`: you add text, and position it either at left / center / right
- `text`: add some text, either at left / center / right
- of course you can add multiple texts, as we have done in the footer
- `background color`: you can set a color (as in header), or use the special value `transparent` (as in footer) to keep the grid bg color
- `background color`: set a color (as in header), or use the special value `transparent` (as in footer) to keep the grid bg color
- `padding`: add vertical space above and below the header / footer text
> a note about colors (either font or background, in all the `Plot Config` nodes):\
@@ -83,7 +83,7 @@ Execute the workflow.
What did we do?
First, in the `Plot Config: Grid` node, we set the `background color` to the special value `transparent`:
First, in the `Plot Config: Grid` node, we set the `background color` to the special value `transparent`, it will make the image RGBA:\
![transparent background](./details/detail%20-%20part%203%20-%20background.jpg)
Then, we pipe the `grid` output from `XY Plot: Render` to the standard node `Split Image with Alpha`, then IMAGE and MASK to `ImageCompositeMasked`:
@@ -148,11 +148,11 @@ But please note there are **many advanced techniques you can apply with ComfyLab
- with the [ComfyLab `Output Config` node](../../Output%20Config/)
- ...
If you want to dive deeper, I propose we move to the **next (and last) tutorial of the XY Plot series: 03 - advanced techniques**.\
If you want to dive deeper, I propose we move to the **next (and last) tutorial of the XY Plot series: 3 - advanced techniques**.\
But before doing that, please note:
- it addresses some edge cases that may not be needed for most
- it is not as detailed as those 2 first tutorials, we'll go faster
- if you haven't done it yet, I strongly advise you read the [XY Plot core concepts](../../../node%20reference/xy%20plot/00%20-%20core%20concepts.md): it's not long, and you may learn some important design choices there.
- if you haven't done it yet, I strongly advise you read the [XY Plot core concepts](../../../node%20reference/xy%20plot/0%20-%20core%20concepts.md): it's not long, and you may learn some important design choices there.
Interested? Let's go to the next tutorial: **[03 - advanced techniques](../03%20-%20advanced%20techniques/)**
Interested? Let's go to the next tutorial: **[3 - advanced techniques](../3%20-%20advanced%20techniques/)**

Before

Width:  |  Height:  |  Size: 482 KiB

After

Width:  |  Height:  |  Size: 482 KiB

Before

Width:  |  Height:  |  Size: 158 KiB

After

Width:  |  Height:  |  Size: 158 KiB

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 72 KiB

Before

Width:  |  Height:  |  Size: 98 KiB

After

Width:  |  Height:  |  Size: 98 KiB

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 94 KiB

Before

Width:  |  Height:  |  Size: 95 KiB

After

Width:  |  Height:  |  Size: 95 KiB

Before

Width:  |  Height:  |  Size: 361 KiB

After

Width:  |  Height:  |  Size: 361 KiB

Before

Width:  |  Height:  |  Size: 450 KiB

After

Width:  |  Height:  |  Size: 450 KiB

Before

Width:  |  Height:  |  Size: 579 KiB

After

Width:  |  Height:  |  Size: 579 KiB

Before

Width:  |  Height:  |  Size: 630 KiB

After

Width:  |  Height:  |  Size: 630 KiB

@@ -1,4 +1,4 @@
# Tutorials / XY Plot: 03 - advanced techniques
# Tutorials / XY Plot: 3 - advanced techniques
Welcome to this third (and last) tutorial of the XY Plot series!
@@ -6,7 +6,7 @@ Here we are going to see a few advanced techniques you may find useful.\
Of course, I cannot anticipate all the use cases, but by following this tutorial, I hope you will see the versatility of the ComfyLab XY Plot nodes, and understand how to adapt for your scenario.\
Here, no frills, we'll go straight to the point, to focus of the functionalities rather than fancy grid customization.
If you haven't yet, I highly recommend you follow (at least read) the first 2 tutorials ([1](../01%20-%20the%20basics/) & [2](../02%20-%20pimp%20my%20grid/)), and read the [XY Plot core concepts](../../../node%20reference/xy%20plot/00%20-%20core%20concepts.md).
If you haven't yet, I highly recommend you follow (at least read) the first 2 tutorials ([1](../1%20-%20the%20basics/) & [2](../2%20-%20pimp%20my%20grid/)), and read the [XY Plot core concepts](../../../node%20reference/xy%20plot/0%20-%20core%20concepts.md).
Tutorial sections:
@@ -44,7 +44,7 @@ What is to be noticed:
- the `chkpt_name` widget does not accept any string, but a string that exists in the list
- so to bypass this limitation we simply convert the text output to Any, thanks to the `Convert to Any` node
- ![Any output](./details/detail%20-%20part%201%20-%20any.jpg)
- you can read more about the Any output in the [XY Plot core concepts](../../../node%20reference/xy%20plot/00%20-%20core%20concepts.md), and the [2nd tutorial of the `Output Config` node](../../Output%20Config/02%20-%20more%20options)
- you can read more about the Any output in the [XY Plot core concepts](../../../node%20reference/xy%20plot/0%20-%20core%20concepts.md), and the [2nd tutorial of the `Output Config` node](../../Output%20Config/2%20-%20more%20options)
- seeds:
- theoritically, we should have converted the list values to integers, thanks to the `convert` combo widget
- but it also works (for seeds only AFAIK)

Before

Width:  |  Height:  |  Size: 139 KiB

After

Width:  |  Height:  |  Size: 139 KiB

Before

Width:  |  Height:  |  Size: 103 KiB

After

Width:  |  Height:  |  Size: 103 KiB

Before

Width:  |  Height:  |  Size: 376 KiB

After

Width:  |  Height:  |  Size: 376 KiB

Before

Width:  |  Height:  |  Size: 370 KiB

After

Width:  |  Height:  |  Size: 370 KiB

+7 -7
View File
@@ -17,11 +17,11 @@ The `XY Plot` nodes allow you to create the grids you want, with virtually no li
- padding, wrap, ...
- mix any image resolution / aspect ratio
If needed, you can also check the [node references](../../node%20reference/xy%20plot/) for the [core concepts](../../node%20reference/xy%20plot/00%20-%20core%20concepts.md) and detailed node information.
If needed, you can also check the [node references](../../node%20reference/xy%20plot/) for the [core concepts](../../node%20reference/xy%20plot/0%20-%20core%20concepts.md) and detailed node information.
## Tutorial 01 - the basics
## Tutorial 1 - the basics
**[>> Go to the tutorial](./01%20-%20the%20basics/)**
**[>> Go to the tutorial](./1%20-%20the%20basics/)**
Contents:
@@ -29,9 +29,9 @@ Contents:
- string templating
- rows / columns and pagination
## Tutorial 02 - pimp my grid
## Tutorial 2 - pimp my grid
**[>> Go to the tutorial](./02%20-%20pimp%20my%20grid/)**
**[>> Go to the tutorial](./2%20-%20pimp%20my%20grid/)**
Contents:
@@ -40,9 +40,9 @@ Contents:
- make the grid RGBA to add a custom background inage
- display 'page X / Y'
## Tutorial 03 - advanced techniques
## Tutorial 3 - advanced techniques
**[>> Go to the tutorial](./03%20-%20advanced%20techniques/)**
**[>> Go to the tutorial](./3%20-%20advanced%20techniques/)**
Contents: