wiki and more (#4)

* add main README * add the node list * improve wiki: XY Plot node references, various adjustments * ...
2025-01-22 17:51:37 +01:00
parent cc6775802d
commit 24910e33a6
93 changed files with 321 additions and 98 deletions
@@ -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/)**
@@ -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

@@ -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:

@@ -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/)**
@@ -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/)**
@@ -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)
@@ -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: