Upload 1182 files

.gitattributes

@@ -33,3 +33,13 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+custom_nodes/ComfyUI_LayerStyle/font/Alibaba-PuHuiTi-Heavy.ttf filter=lfs diff=lfs merge=lfs -text
+custom_nodes/ComfyUI_LayerStyle/workflow/1280x768_city.png filter=lfs diff=lfs merge=lfs -text
+custom_nodes/ComfyUI_LayerStyle/workflow/1344x768_beach.png filter=lfs diff=lfs merge=lfs -text
+custom_nodes/ComfyUI_LayerStyle/workflow/1344x768_hair.png filter=lfs diff=lfs merge=lfs -text
+custom_nodes/ComfyUI_LayerStyle/workflow/768x1344_beach.png filter=lfs diff=lfs merge=lfs -text
+custom_nodes/ComfyUI_LayerStyle/workflow/768x1344_dress.png filter=lfs diff=lfs merge=lfs -text
+custom_nodes/ComfyUI_LayerStyle/workflow/girl_dino_1024.png filter=lfs diff=lfs merge=lfs -text
+custom_nodes/was-node-suite-comfyui/repos/SAM/assets/masks1.png filter=lfs diff=lfs merge=lfs -text
+custom_nodes/was-node-suite-comfyui/repos/SAM/assets/minidemo.gif filter=lfs diff=lfs merge=lfs -text
+custom_nodes/was-node-suite-comfyui/repos/SAM/assets/notebook2.png filter=lfs diff=lfs merge=lfs -text

custom_nodes/ComfyUI-Custom-Scripts/.github/workflows/publish.yml

@@ -0,0 +1,21 @@
+name: Publish to Comfy registry
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+    paths:
+      - "pyproject.toml"
+
+jobs:
+  publish-node:
+    name: Publish Custom Node to registry
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v4
+      - name: Publish Custom Node
+        uses: Comfy-Org/publish-node-action@main
+        with:
+          ## Add your own personal access token to your Github Repository secrets and reference it here.
+          personal_access_token: ${{ secrets.REGISTRY_ACCESS_TOKEN }}

custom_nodes/ComfyUI-Custom-Scripts/.gitignore

@@ -0,0 +1,5 @@
+__pycache__
+pysssss.json
+user/autocomplete.txt
+web/js/assets/favicon.user.ico
+web/js/assets/favicon-active.user.ico

custom_nodes/ComfyUI-Custom-Scripts/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 pythongosssss
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

custom_nodes/ComfyUI-Custom-Scripts/README.md

@@ -0,0 +1,160 @@
+# ComfyUI-Custom-Scripts
+
+### ⚠️ While these extensions work for the most part, i'm very busy at the moment and so unable to keep on top of everything here, thanks for your patience!
+
+# Installation
+
+1. Clone the repository:
+`git clone https://github.com/pythongosssss/ComfyUI-Custom-Scripts.git`  
+to your ComfyUI `custom_nodes` directory
+
+   The script will then automatically install all custom scripts and nodes.  
+   It will attempt to use symlinks and junctions to prevent having to copy files and keep them up to date.
+
+- For uninstallation:
+  - Delete the cloned repo in `custom_nodes`
+  - Ensure `web/extensions/pysssss/CustomScripts` has also been removed
+
+# Update
+1. Navigate to the cloned repo e.g. `custom_nodes/ComfyUI-Custom-Scripts`
+2. `git pull`
+
+# Features
+
+## Autocomplete
+![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/125205205/b5971135-414f-4f4e-a6cf-2650dc01085f)  
+Provides embedding and custom word autocomplete. You can view embedding details by clicking on the info icon on the list.  
+Define your list of custom words via the settings.  
+![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/125205205/160ef61c-7d7e-49d0-b60f-5a1501b74c9d)  
+You can quickly default to danbooru tags using the Load button, or load/manage other custom word lists.  
+![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/125205205/cc180b35-5f45-442f-9285-3ddf3fa320d0)
+
+## Auto Arrange Graph
+![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/125205205/04b06081-ca6f-4c0f-8584-d0a157c36747)  
+Adds a menu option to auto arrange the graph in order of execution, this makes very wide graphs!
+
+## Always Snap to Grid
+![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/125205205/66f36d1f-e579-4959-9880-9a9624922e3a)  
+Adds a setting to make moving nodes always snap to grid.
+
+## [Testing] "Better" Loader Lists
+![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/125205205/664caa71-f25f-4a96-a04a-1466d6b2b8b4)  
+Adds custom Lora and Checkpoint loader nodes, these have the ability to show preview images, just place a png or jpg next to the file and it'll display in the list on hover (e.g. sdxl.safetensors and sdxl.png).  
+Optionally enable subfolders via the settings:  
+![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/125205205/e15b5e83-4f9d-4d57-8324-742bedf75439)   
+Adds an "examples" widget to load sample prompts, triggerwords, etc:  
+![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/125205205/ad1751e4-4c85-42e7-9490-e94fb1cbc8e7)  
+These should be stored in a folder matching the name of the model, e.g. if it is `loras/add_detail.safetensors` put your files in as  `loras/add_detail/*.txt`  
+To quickly save a generated image as the preview to use for the model, you can right click on an image on a node, and select Save as Preview and choose the model to save the preview for:  
+![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/125205205/9fa8e9db-27b3-45cb-85c2-0860a238fd3a)
+
+## Checkpoint/LoRA/Embedding Info
+![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/125205205/6b67bf40-ee17-4fa6-a0c1-7947066bafc2)
+![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/125205205/32405df6-b367-404f-a5df-2d4347089a9e)  
+Adds "View Info" menu option to view details about the selected LoRA or Checkpoint. To view embedding details, click the info button when using embedding autocomplete.
+
+## Constrain Image
+Adds a node for resizing an image to a max & min size optionally cropping if required.
+
+## Custom Colors
+![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/125205205/fa7883f3-f81c-49f6-9ab6-9526e4debab6)  
+Adds a custom color picker to nodes & groups
+
+## Favicon Status
+![image](https://user-images.githubusercontent.com/125205205/230171227-31f061a6-6324-4976-bed9-723a87500cf3.png)
+![image](https://user-images.githubusercontent.com/125205205/230171445-c7202a45-b511-4d69-87fa-945ad44c063f.png)  
+Adds a favicon and title to the window, favicon changes color while generating and the window title includes the number of prompts in the queue
+
+## Image Feed
+![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/125205205/caea0d48-85b9-4ca9-9771-5c795db35fbc)
+Adds a panel showing images that have been generated in the current session, you can control the direction that images are added and the position of the panel via the ComfyUI settings screen and the size of the panel and the images via the sliders at the top of the panel.  
+![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/125205205/ca093d38-41a3-4647-9223-5bd0b9ee4f1e)
+
+## KSampler (Advanced) denoise helper
+Provides a simple method to set custom denoise on the advanced sampler  
+![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/125205205/42946bd8-0078-4c7a-bfe9-7adb1382b5e2)
+![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/125205205/7cfccb22-f155-4848-934b-a2b2a6efe16f)
+
+## Math Expression
+Allows for evaluating complex expressions using values from the graph. You can input `INT`, `FLOAT`, `IMAGE` and `LATENT` values.  
+![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/125205205/1593edde-67b8-45d8-88cb-e75f52dba039)  
+Other nodes values can be referenced via the `Node name for S&R` via the `Properties` menu item on a node, or the node title.  
+Supported operators: `+ - * /` (basic ops) `//` (floor division) `**` (power) `^` (xor) `%` (mod)  
+Supported functions `floor(num, dp?)` `floor(num)` `ceil(num)` `randomint(min,max)`  
+If using a `LATENT` or `IMAGE` you can get the dimensions using `a.width` or `a.height` where `a` is the input name.
+
+## Node Finder
+![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/125205205/177d2b67-acbc-4ec3-ab31-7c295a98c194)  
+Adds a menu item for following/jumping to the executing node, and a menu to quickly go to a node of a specific type.
+
+## Preset Text
+![image](https://user-images.githubusercontent.com/125205205/230173939-08459efc-785b-46da-93d1-b02f0300c6f4.png)  
+Adds a node that lets you save and use text presets (e.g. for your 'normal' negatives)
+
+## Quick Nodes
+![image](https://user-images.githubusercontent.com/125205205/230174266-5232831a-a03b-4bf7-bc8b-c45466a0bc64.png)  
+Adds various menu items to some nodes for quickly setting up common parts of graphs
+
+## Play Sound
+![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/125205205/9bcf9fb3-5898-4432-a974-fb1e17d3b7e8)  
+Plays a sound when the node is executed, either after each prompt or only when the queue is empty for queuing multiple prompts.  
+You can customize the sound by replacing the mp3 file `ComfyUI/custom_nodes/ComfyUI-Custom-Scripts/web/js/assets/notify.mp3`
+
+## System Notification
+![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/30354775/993fd783-5cd6-4779-aa97-173bc06cc405)
+![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/30354775/e45227fb-5714-4f45-b96b-6601902ef6e2)
+
+Sends a system notification via the browser when the node is executed, either after each prompt or only when the queue is empty for queuing multiple prompts.
+
+## [WIP] Repeater
+![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/125205205/ec0dac25-14e4-4d44-b975-52193656709d)
+Node allows you to either create a list of N repeats of the input node, or create N outputs from the input node.  
+You can optionally decide if you want to reuse the input node, or create a new instance each time (e.g. a Checkpoint Loader would want to be re-used, but a random number would want to be unique)
+TODO: Type safety on the wildcard outputs to require match with input
+
+## Show Text
+![image](https://user-images.githubusercontent.com/125205205/230174888-c004fd48-da78-4de9-81c2-93a866fcfcd1.png)  
+Takes input from a node that produces a string and displays it, useful for things like interrogator, prompt generators, etc.
+
+## Show Image on Menu
+![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/125205205/b6ab58f2-583b-448c-bcfc-f93f5cdab0fc)  
+Shows the current generating image on the menu at the bottom, you can disable this via the settings menu.
+
+## String Function
+![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/125205205/01107137-8a93-4765-bae0-fcc110a09091)  
+Supports appending and replacing text  
+`tidy_tags` will add commas between parts when in `append` mode.  
+`replace` mode supports regex replace by using `/your regex here/` and you can reference capturing groups using `\number` e.g. `\1`
+
+## Touch Support
+Provides basic support for touch screen devices, its not perfect but better than nothing
+
+## Widget Defaults
+![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/125205205/3d675032-2b19-4da8-a7d7-fa2d7c555daa)  
+Allows you to specify default values for widgets when adding new nodes, the values are configured via the settings menu  
+![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/125205205/7b57a3d8-98d3-46e9-9b33-6645c0da41e7)
+
+## Workflows
+Adds options to the menu for saving + loading workflows:  
+![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/125205205/7b5a3012-4c59-47c6-8eea-85cf534403ea)
+
+## Workflow Images
+![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/125205205/06453fd2-c020-46ee-a7db-2b8bf5bcba7e)  
+Adds menu options for importing/exporting the graph as SVG and PNG showing a view of the nodes
+
+## (Testing) Reroute Primitive
+![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/125205205/8b870eef-d572-43f9-b394-cfa7abbd2f98)  Provides a node that allows rerouting primitives.  
+The node can also be collapsed to a single point that you can drag around.  
+![image](https://github.com/pythongosssss/ComfyUI-Custom-Scripts/assets/125205205/a9bd0112-cf8f-44f3-af6d-f9a8fed152a7)  
+Warning: Don't use normal reroutes or primitives with these nodes, it isn't tested and this node replaces their functionality.
+
+<br>
+<br>
+
+
+## WD14 Tagger
+Moved to: https://github.com/pythongosssss/ComfyUI-WD14-Tagger
+
+## ~~Lock Nodes & Groups~~
+This is now a standard feature of ComfyUI  
+~~Adds a lock option to nodes & groups that prevents you from moving them until unlocked~~

custom_nodes/ComfyUI-Custom-Scripts/__init__.py

@@ -0,0 +1,25 @@
+import importlib.util
+import glob
+import os
+import sys
+from .pysssss import init, get_ext_dir
+
+NODE_CLASS_MAPPINGS = {}
+NODE_DISPLAY_NAME_MAPPINGS = {}
+
+if init():
+    py = get_ext_dir("py")
+    files = glob.glob(os.path.join(py, "*.py"), recursive=False)
+    for file in files:
+        name = os.path.splitext(file)[0]
+        spec = importlib.util.spec_from_file_location(name, file)
+        module = importlib.util.module_from_spec(spec)
+        sys.modules[name] = module
+        spec.loader.exec_module(module)
+        if hasattr(module, "NODE_CLASS_MAPPINGS") and getattr(module, "NODE_CLASS_MAPPINGS") is not None:
+            NODE_CLASS_MAPPINGS.update(module.NODE_CLASS_MAPPINGS)
+            if hasattr(module, "NODE_DISPLAY_NAME_MAPPINGS") and getattr(module, "NODE_DISPLAY_NAME_MAPPINGS") is not None:
+                NODE_DISPLAY_NAME_MAPPINGS.update(module.NODE_DISPLAY_NAME_MAPPINGS)
+
+WEB_DIRECTORY = "./web"
+__all__ = ["NODE_CLASS_MAPPINGS", "NODE_DISPLAY_NAME_MAPPINGS", "WEB_DIRECTORY"]

custom_nodes/ComfyUI-Custom-Scripts/py/autocomplete.py

@@ -0,0 +1,29 @@
+from server import PromptServer
+from aiohttp import web
+import os
+import folder_paths
+
+dir = os.path.abspath(os.path.join(__file__, "../../user"))
+if not os.path.exists(dir):
+    os.mkdir(dir)
+file = os.path.join(dir, "autocomplete.txt")
+
+
+@PromptServer.instance.routes.get("/pysssss/autocomplete")
+async def get_autocomplete(request):
+    if os.path.isfile(file):
+        return web.FileResponse(file)
+    return web.Response(status=404)
+
+
+@PromptServer.instance.routes.post("/pysssss/autocomplete")
+async def update_autocomplete(request):
+    with open(file, "w", encoding="utf-8") as f:
+        f.write(await request.text())
+    return web.Response(status=200)
+
+
+@PromptServer.instance.routes.get("/pysssss/loras")
+async def get_loras(request):
+    loras = folder_paths.get_filename_list("loras")
+    return web.json_response(list(map(lambda a: os.path.splitext(a)[0], loras)))

custom_nodes/ComfyUI-Custom-Scripts/py/better_combos.py

@@ -0,0 +1,197 @@
+import glob
+import os
+from nodes import LoraLoader, CheckpointLoaderSimple
+import folder_paths
+from server import PromptServer
+from folder_paths import get_directory_by_type
+from aiohttp import web
+import shutil
+
+
+@PromptServer.instance.routes.get("/pysssss/view/{name}")
+async def view(request):
+    name = request.match_info["name"]
+    pos = name.index("/")
+    type = name[0:pos]
+    name = name[pos+1:]
+
+    image_path = folder_paths.get_full_path(
+        type, name)
+    if not image_path:
+        return web.Response(status=404)
+
+    filename = os.path.basename(image_path)
+    return web.FileResponse(image_path, headers={"Content-Disposition": f"filename=\"{filename}\""})
+
+
+@PromptServer.instance.routes.post("/pysssss/save/{name}")
+async def save_preview(request):
+    name = request.match_info["name"]
+    pos = name.index("/")
+    type = name[0:pos]
+    name = name[pos+1:]
+
+    body = await request.json()
+
+    dir = get_directory_by_type(body.get("type", "output"))
+    subfolder = body.get("subfolder", "")
+    full_output_folder = os.path.join(dir, os.path.normpath(subfolder))
+
+    filepath = os.path.join(full_output_folder, body.get("filename", ""))
+
+    if os.path.commonpath((dir, os.path.abspath(filepath))) != dir:
+        return web.Response(status=400)
+
+    image_path = folder_paths.get_full_path(type, name)
+    image_path = os.path.splitext(
+        image_path)[0] + os.path.splitext(filepath)[1]
+
+    shutil.copyfile(filepath, image_path)
+
+    return web.json_response({
+        "image":  type + "/" + os.path.basename(image_path)
+    })
+
+
+@PromptServer.instance.routes.get("/pysssss/examples/{name}")
+async def get_examples(request):
+    name = request.match_info["name"]
+    pos = name.index("/")
+    type = name[0:pos]
+    name = name[pos+1:]
+
+    file_path = folder_paths.get_full_path(
+        type, name)
+    if not file_path:
+        return web.Response(status=404)
+    
+    file_path_no_ext = os.path.splitext(file_path)[0]
+    examples = []
+
+    if os.path.isdir(file_path_no_ext):
+        examples += sorted(map(lambda t: os.path.relpath(t, file_path_no_ext),
+                        glob.glob(file_path_no_ext + "/*.txt")))
+        
+    if os.path.isfile(file_path_no_ext + ".txt"):
+        examples += ["notes"]
+   
+    return web.json_response(examples)
+
+@PromptServer.instance.routes.post("/pysssss/examples/{name}")
+async def save_example(request):
+    name = request.match_info["name"]
+    pos = name.index("/")
+    type = name[0:pos]
+    name = name[pos+1:]
+    body = await request.json()
+    example_name = body["name"]
+    example = body["example"]
+
+    file_path = folder_paths.get_full_path(
+        type, name)
+    if not file_path:
+        return web.Response(status=404)
+    
+    if not example_name.endswith(".txt"):
+        example_name += ".txt"
+
+    file_path_no_ext = os.path.splitext(file_path)[0]
+    example_file = os.path.join(file_path_no_ext, example_name)
+    if not os.path.exists(file_path_no_ext):
+        os.mkdir(file_path_no_ext)
+    with open(example_file, 'w', encoding='utf8') as f:
+        f.write(example)
+
+    return web.Response(status=201)
+
+
+def populate_items(names, type):
+    for idx, item_name in enumerate(names):
+
+        file_name = os.path.splitext(item_name)[0]
+        file_path = folder_paths.get_full_path(type, item_name)
+
+        if file_path is None:
+            print(f"(pysssss:better_combos) Unable to get path for {type} {item_name}")
+            continue
+
+        file_path_no_ext = os.path.splitext(file_path)[0]
+
+        for ext in ["png", "jpg", "jpeg", "preview.png", "preview.jpeg"]:
+            has_image = os.path.isfile(file_path_no_ext + "." + ext)
+            if has_image:
+                item_image = f"{file_name}.{ext}"
+                break
+
+        names[idx] = {
+            "content": item_name,
+            "image": f"{type}/{item_image}" if has_image else None,
+        }
+    names.sort(key=lambda i: i["content"].lower())
+
+
+class LoraLoaderWithImages(LoraLoader):
+    RETURN_TYPES = (*LoraLoader.RETURN_TYPES, "STRING",)
+
+    @classmethod
+    def INPUT_TYPES(s):
+        types = super().INPUT_TYPES()
+        names = types["required"]["lora_name"][0]
+        populate_items(names, "loras")
+        types["optional"] = { "prompt": ("HIDDEN",) }
+        return types
+
+    @classmethod
+    def VALIDATE_INPUTS(s, lora_name):
+        types = super().INPUT_TYPES()
+        names = types["required"]["lora_name"][0]
+
+        name = lora_name["content"]
+        if name in names:
+            return True
+        else:
+            return f"Lora not found: {name}"
+
+    def load_lora(self, **kwargs):
+        kwargs["lora_name"] = kwargs["lora_name"]["content"]
+        prompt = kwargs.pop("prompt", "")
+        return (*super().load_lora(**kwargs), prompt)
+
+
+class CheckpointLoaderSimpleWithImages(CheckpointLoaderSimple):
+    RETURN_TYPES = (*CheckpointLoaderSimple.RETURN_TYPES, "STRING",)
+    
+    @classmethod
+    def INPUT_TYPES(s):
+        types = super().INPUT_TYPES()
+        names = types["required"]["ckpt_name"][0]
+        populate_items(names, "checkpoints")
+        types["optional"] = { "prompt": ("HIDDEN",) }
+        return types
+
+    @classmethod
+    def VALIDATE_INPUTS(s, ckpt_name):
+        types = super().INPUT_TYPES()
+        names = types["required"]["ckpt_name"][0]
+
+        name = ckpt_name["content"]
+        if name in names:
+            return True
+        else:
+            return f"Checkpoint not found: {name}"
+
+    def load_checkpoint(self, **kwargs):
+        kwargs["ckpt_name"] = kwargs["ckpt_name"]["content"]
+        prompt = kwargs.pop("prompt", "")
+        return (*super().load_checkpoint(**kwargs), prompt)
+
+
+NODE_CLASS_MAPPINGS = {
+    "LoraLoader|pysssss": LoraLoaderWithImages,
+    "CheckpointLoader|pysssss": CheckpointLoaderSimpleWithImages,
+}
+
+NODE_DISPLAY_NAME_MAPPINGS = {
+    "LoraLoader|pysssss": "Lora Loader 🐍",
+    "CheckpointLoader|pysssss": "Checkpoint Loader 🐍",
+}

custom_nodes/ComfyUI-Custom-Scripts/py/constrain_image.py

@@ -0,0 +1,71 @@
+import torch
+import numpy as np
+from PIL import Image
+
+class ConstrainImage:
+    """
+    A node that constrains an image to a maximum and minimum size while maintaining aspect ratio.
+    """
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "images": ("IMAGE",),
+                "max_width": ("INT", {"default": 1024, "min": 0}),
+                "max_height": ("INT", {"default": 1024, "min": 0}),
+                "min_width": ("INT", {"default": 0, "min": 0}),
+                "min_height": ("INT", {"default": 0, "min": 0}),
+                "crop_if_required": (["yes", "no"], {"default": "no"}),
+            },
+        }
+
+    RETURN_TYPES = ("IMAGE",)
+    FUNCTION = "constrain_image"
+    CATEGORY = "image"
+    OUTPUT_IS_LIST = (True,)
+
+    def constrain_image(self, images, max_width, max_height, min_width, min_height, crop_if_required):
+        crop_if_required = crop_if_required == "yes"
+        results = []
+        for image in images:
+            i = 255. * image.cpu().numpy()
+            img = Image.fromarray(np.clip(i, 0, 255).astype(np.uint8)).convert("RGB")
+
+            current_width, current_height = img.size
+            aspect_ratio = current_width / current_height
+
+            constrained_width = min(max(current_width, min_width), max_width)
+            constrained_height = min(max(current_height, min_height), max_height)
+
+            if constrained_width / constrained_height > aspect_ratio:
+                constrained_width = max(int(constrained_height * aspect_ratio), min_width)
+                if crop_if_required:
+                    constrained_height = int(current_height / (current_width / constrained_width))
+            else:
+                constrained_height = max(int(constrained_width / aspect_ratio), min_height)
+                if crop_if_required:
+                    constrained_width = int(current_width / (current_height / constrained_height))
+
+            resized_image = img.resize((constrained_width, constrained_height), Image.LANCZOS)
+
+            if crop_if_required and (constrained_width > max_width or constrained_height > max_height):
+                left = max((constrained_width - max_width) // 2, 0)
+                top = max((constrained_height - max_height) // 2, 0)
+                right = min(constrained_width, max_width) + left
+                bottom = min(constrained_height, max_height) + top
+                resized_image = resized_image.crop((left, top, right, bottom))
+
+            resized_image = np.array(resized_image).astype(np.float32) / 255.0
+            resized_image = torch.from_numpy(resized_image)[None,]
+            results.append(resized_image)
+                
+        return (results,)
+
+NODE_CLASS_MAPPINGS = {
+    "ConstrainImage|pysssss": ConstrainImage,
+}
+
+NODE_DISPLAY_NAME_MAPPINGS = {
+    "ConstrainImage|pysssss": "Constrain Image 🐍",
+}

custom_nodes/ComfyUI-Custom-Scripts/py/constrain_image_for_video.py

@@ -0,0 +1,72 @@
+import torch
+import numpy as np
+from PIL import Image
+
+class ConstrainImageforVideo:
+    """
+    A node that constrains an image to a maximum and minimum size while maintaining aspect ratio.
+    """
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "images": ("IMAGE",),
+                "max_width": ("INT", {"default": 1024, "min": 0}),
+                "max_height": ("INT", {"default": 1024, "min": 0}),
+                "min_width": ("INT", {"default": 0, "min": 0}),
+                "min_height": ("INT", {"default": 0, "min": 0}),
+                "crop_if_required": (["yes", "no"], {"default": "no"}),
+            },
+        }
+
+    RETURN_TYPES = ("IMAGE",)
+    RETURN_NAMES = ("IMAGE",)
+    FUNCTION = "constrain_image_for_video"
+    CATEGORY = "image"
+
+    def constrain_image_for_video(self, images, max_width, max_height, min_width, min_height, crop_if_required):
+        crop_if_required = crop_if_required == "yes"
+        results = []
+        for image in images:
+            i = 255. * image.cpu().numpy()
+            img = Image.fromarray(np.clip(i, 0, 255).astype(np.uint8)).convert("RGB")
+
+            current_width, current_height = img.size
+            aspect_ratio = current_width / current_height
+
+            constrained_width = max(min(current_width, min_width), max_width)
+            constrained_height = max(min(current_height, min_height), max_height)
+
+            if constrained_width / constrained_height > aspect_ratio:
+                constrained_width = max(int(constrained_height * aspect_ratio), min_width)
+                if crop_if_required:
+                    constrained_height = int(current_height / (current_width / constrained_width))
+            else:
+                constrained_height = max(int(constrained_width / aspect_ratio), min_height)
+                if crop_if_required:
+                    constrained_width = int(current_width / (current_height / constrained_height))
+
+            resized_image = img.resize((constrained_width, constrained_height), Image.LANCZOS)
+
+            if crop_if_required and (constrained_width > max_width or constrained_height > max_height):
+                left = max((constrained_width - max_width) // 2, 0)
+                top = max((constrained_height - max_height) // 2, 0)
+                right = min(constrained_width, max_width) + left
+                bottom = min(constrained_height, max_height) + top
+                resized_image = resized_image.crop((left, top, right, bottom))
+
+            resized_image = np.array(resized_image).astype(np.float32) / 255.0
+            resized_image = torch.from_numpy(resized_image)[None,]
+            results.append(resized_image)
+            all_images = torch.cat(results, dim=0)
+                
+        return (all_images, all_images.size(0),)
+
+NODE_CLASS_MAPPINGS = {
+    "ConstrainImageforVideo|pysssss": ConstrainImageforVideo,
+}
+
+NODE_DISPLAY_NAME_MAPPINGS = {
+    "ConstrainImageforVideo|pysssss": "Constrain Image for Video 🐍",
+}

custom_nodes/ComfyUI-Custom-Scripts/py/math_expression.py

@@ -0,0 +1,252 @@
+import ast
+import math
+import random
+import operator as op
+
+# Hack: string type that is always equal in not equal comparisons
+class AnyType(str):
+    def __ne__(self, __value: object) -> bool:
+        return False
+
+
+# Our any instance wants to be a wildcard string
+any = AnyType("*")
+
+operators = {
+    ast.Add: op.add,
+    ast.Sub: op.sub,
+    ast.Mult: op.mul,
+    ast.Div: op.truediv,
+    ast.FloorDiv: op.floordiv,
+    ast.Pow: op.pow,
+    ast.BitXor: op.xor,
+    ast.USub: op.neg,
+    ast.Mod: op.mod,
+    ast.BitAnd: op.and_,
+    ast.BitOr: op.or_,
+    ast.Invert: op.invert,
+    ast.And: lambda a, b: 1 if a and b else 0,
+    ast.Or: lambda a, b: 1 if a or b else 0,
+    ast.Not: lambda a: 0 if a else 1,
+    ast.RShift: op.rshift,
+    ast.LShift: op.lshift
+}
+
+# TODO: restructure args to provide more info, generate hint based on args to save duplication
+functions = {
+    "round": {
+        "args": (1, 2),
+        "call": lambda a, b = None: round(a, b),
+        "hint": "number, dp? = 0"
+    },
+    "ceil": {
+        "args": (1, 1),
+        "call": lambda a: math.ceil(a),
+        "hint": "number"
+    },
+    "floor": {
+        "args": (1, 1),
+        "call": lambda a: math.floor(a),
+        "hint": "number"
+    },
+    "min": {
+        "args": (2, None),
+        "call": lambda *args: min(*args),
+        "hint": "...numbers"
+    },
+    "max": {
+        "args": (2, None),
+        "call": lambda *args: max(*args),
+        "hint": "...numbers"
+    },
+    "randomint": {
+        "args": (2, 2),
+        "call": lambda a, b: random.randint(a, b),
+        "hint": "min, max"
+    },
+    "randomchoice": {
+        "args": (2, None),
+        "call": lambda *args: random.choice(args),
+        "hint": "...numbers"
+    },
+    "sqrt": {
+        "args": (1, 1),
+        "call": lambda a: math.sqrt(a),
+        "hint": "number"
+    },
+    "int": {
+        "args": (1, 1),
+        "call": lambda a = None: int(a),
+        "hint": "number"
+    },
+    "iif": {
+        "args": (3, 3),
+        "call": lambda a, b, c = None: b if a else c,
+        "hint": "value, truepart, falsepart"
+    },
+}
+
+autocompleteWords = list({
+    "text": x,
+    "value": f"{x}()",
+    "showValue": False,
+    "hint": f"{functions[x]['hint']}",
+    "caretOffset": -1
+} for x in functions.keys())
+
+
+class MathExpression:
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "expression": ("STRING", {"multiline": True, "dynamicPrompts": False, "pysssss.autocomplete": {
+                    "words": autocompleteWords,
+                    "separator": ""
+                }}),
+            },
+            "optional": {
+                "a": (any, ),
+                "b": (any,),
+                "c": (any, ),
+            },
+            "hidden": {"extra_pnginfo": "EXTRA_PNGINFO",
+                       "prompt": "PROMPT"},
+        }
+
+    RETURN_TYPES = ("INT", "FLOAT", )
+    FUNCTION = "evaluate"
+    CATEGORY = "utils"
+    OUTPUT_NODE = True
+
+    @classmethod
+    def IS_CHANGED(s, expression, **kwargs):
+        if "random" in expression:
+            return float("nan")
+        return expression
+
+    def get_widget_value(self, extra_pnginfo, prompt, node_name, widget_name):
+        workflow = extra_pnginfo["workflow"] if "workflow" in extra_pnginfo else { "nodes": [] }
+        node_id = None
+        for node in workflow["nodes"]:
+            name = node["type"]
+            if "properties" in node:
+                if "Node name for S&R" in node["properties"]:
+                    name = node["properties"]["Node name for S&R"]
+            if name == node_name:
+                node_id = node["id"]
+                break
+            if "title" in node:
+                name = node["title"]
+            if name == node_name:
+                node_id = node["id"]
+                break
+        if node_id is not None:
+            values = prompt[str(node_id)]
+            if "inputs" in values:
+                if widget_name in values["inputs"]:
+                    value = values["inputs"][widget_name]
+                    if isinstance(value, list):
+                        raise ValueError("Converted widgets are not supported via named reference, use the inputs instead.")
+                    return value
+            raise NameError(f"Widget not found: {node_name}.{widget_name}")
+        raise NameError(f"Node not found: {node_name}.{widget_name}")
+
+    def get_size(self, target, property):
+        if isinstance(target, dict) and "samples" in target:
+            # Latent
+            if property == "width":
+                return target["samples"].shape[3] * 8
+            return target["samples"].shape[2] * 8
+        else:
+            # Image
+            if property == "width":
+                return target.shape[2]
+            return target.shape[1]
+
+    def evaluate(self, expression, prompt, extra_pnginfo={}, a=None, b=None, c=None):
+        expression = expression.replace('\n', ' ').replace('\r', '')
+        node = ast.parse(expression, mode='eval').body
+
+        lookup = {"a": a, "b": b, "c": c}
+
+        def eval_op(node, l, r):
+            l = eval_expr(l)
+            r = eval_expr(r)
+            l = l if isinstance(l, int) else float(l)
+            r = r if isinstance(r, int) else float(r)
+            return operators[type(node.op)](l, r)
+
+        def eval_expr(node):
+            if isinstance(node, ast.Constant) or isinstance(node, ast.Num):
+                return node.n
+            elif isinstance(node, ast.BinOp):
+                return eval_op(node, node.left, node.right)
+            elif isinstance(node, ast.BoolOp):
+                return eval_op(node, node.values[0], node.values[1])
+            elif isinstance(node, ast.UnaryOp):
+                return operators[type(node.op)](eval_expr(node.operand))
+            elif isinstance(node, ast.Attribute):
+                if node.value.id in lookup:
+                    if node.attr == "width" or node.attr == "height":
+                        return self.get_size(lookup[node.value.id], node.attr)
+
+                return self.get_widget_value(extra_pnginfo, prompt, node.value.id, node.attr)
+            elif isinstance(node, ast.Name):
+                if node.id in lookup:
+                    val = lookup[node.id]
+                    if isinstance(val, (int, float, complex)):
+                        return val
+                    else:
+                        raise TypeError(
+                            f"Compex types (LATENT/IMAGE) need to reference their width/height, e.g. {node.id}.width")
+                raise NameError(f"Name not found: {node.id}")
+            elif isinstance(node, ast.Call):
+                if node.func.id in functions:
+                    fn = functions[node.func.id]
+                    l = len(node.args)
+                    if l < fn["args"][0] or (fn["args"][1] is not None and l > fn["args"][1]):
+                        if fn["args"][1] is None:
+                            toErr = " or more"
+                        else:
+                            toErr = f" to {fn['args'][1]}"
+                        raise SyntaxError(
+                            f"Invalid function call: {node.func.id} requires {fn['args'][0]}{toErr} arguments")
+                    args = []
+                    for arg in node.args:
+                        args.append(eval_expr(arg))
+                    return fn["call"](*args)
+                raise NameError(f"Invalid function call: {node.func.id}")
+            elif isinstance(node, ast.Compare):
+                l = eval_expr(node.left)
+                r = eval_expr(node.comparators[0])
+                if isinstance(node.ops[0], ast.Eq):
+                    return 1 if l == r else 0
+                if isinstance(node.ops[0], ast.NotEq):
+                    return 1 if l != r else 0
+                if isinstance(node.ops[0], ast.Gt):
+                    return 1 if l > r else 0
+                if isinstance(node.ops[0], ast.GtE):
+                    return 1 if l >= r else 0
+                if isinstance(node.ops[0], ast.Lt):
+                    return 1 if l < r else 0
+                if isinstance(node.ops[0], ast.LtE):
+                    return 1 if l <= r else 0
+                raise NotImplementedError(
+                    "Operator " + node.ops[0].__class__.__name__ + " not supported.")
+            else:
+                raise TypeError(node)
+
+        r = eval_expr(node)
+        return {"ui": {"value": [r]}, "result": (int(r), float(r),)}
+
+
+NODE_CLASS_MAPPINGS = {
+    "MathExpression|pysssss": MathExpression,
+}
+
+NODE_DISPLAY_NAME_MAPPINGS = {
+    "MathExpression|pysssss": "Math Expression 🐍",
+}
+

custom_nodes/ComfyUI-Custom-Scripts/py/model_info.py

@@ -0,0 +1,115 @@
+import hashlib
+import json
+from aiohttp import web
+from server import PromptServer
+import folder_paths
+import os
+
+
+def get_metadata(filepath):
+    with open(filepath, "rb") as file:
+        # https://github.com/huggingface/safetensors#format
+        # 8 bytes: N, an unsigned little-endian 64-bit integer, containing the size of the header
+        header_size = int.from_bytes(file.read(8), "little", signed=False)
+
+        if header_size <= 0:
+            raise BufferError("Invalid header size")
+
+        header = file.read(header_size)
+        if header_size <= 0:
+            raise BufferError("Invalid header")
+
+        header_json = json.loads(header)
+        return header_json["__metadata__"] if "__metadata__" in header_json else None
+
+
+@PromptServer.instance.routes.post("/pysssss/metadata/notes/{name}")
+async def save_notes(request):
+    name = request.match_info["name"]
+    pos = name.index("/")
+    type = name[0:pos]
+    name = name[pos+1:]
+
+    file_path = None
+    if type == "embeddings" or type == "loras":
+        name = name.lower()
+        files = folder_paths.get_filename_list(type)
+        for f in files:
+            lower_f = f.lower()
+            if lower_f == name:
+                file_path = folder_paths.get_full_path(type, f)
+            else:
+                n = os.path.splitext(f)[0].lower()
+                if n == name:
+                    file_path = folder_paths.get_full_path(type, f)
+
+            if file_path is not None:
+                break
+    else:
+        file_path = folder_paths.get_full_path(
+            type, name)
+    if not file_path:
+        return web.Response(status=404)
+
+    file_no_ext = os.path.splitext(file_path)[0]
+    info_file = file_no_ext + ".txt"
+    with open(info_file, "w") as f:
+        f.write(await request.text())
+
+    return web.Response(status=200)
+
+
+@PromptServer.instance.routes.get("/pysssss/metadata/{name}")
+async def load_metadata(request):
+    name = request.match_info["name"]
+    pos = name.index("/")
+    type = name[0:pos]
+    name = name[pos+1:]
+
+    file_path = None
+    if type == "embeddings" or type == "loras":
+        name = name.lower()
+        files = folder_paths.get_filename_list(type)
+        for f in files:
+            lower_f = f.lower()
+            if lower_f == name:
+                file_path = folder_paths.get_full_path(type, f)
+            else:
+                n = os.path.splitext(f)[0].lower()
+                if n == name:
+                    file_path = folder_paths.get_full_path(type, f)
+
+            if file_path is not None:
+                break
+    else:
+        file_path = folder_paths.get_full_path(
+            type, name)
+    if not file_path:
+        return web.Response(status=404)
+
+    try:
+        meta = get_metadata(file_path)
+    except:
+        meta = None
+
+    if meta is None:
+        meta = {}
+
+    file_no_ext = os.path.splitext(file_path)[0]
+
+    info_file = file_no_ext + ".txt"
+    if os.path.isfile(info_file):
+        with open(info_file, "r") as f:
+            meta["pysssss.notes"] = f.read()
+
+    hash_file = file_no_ext + ".sha256"
+    if os.path.isfile(hash_file):
+        with open(hash_file, "rt") as f:
+            meta["pysssss.sha256"] = f.read()
+    else:
+        with open(file_path, "rb") as f:
+            meta["pysssss.sha256"] = hashlib.sha256(f.read()).hexdigest()
+        with open(hash_file, "wt") as f:
+            f.write(meta["pysssss.sha256"])
+
+    return web.json_response(meta)

custom_nodes/ComfyUI-Custom-Scripts/py/play_sound.py

@@ -0,0 +1,42 @@
+# Hack: string type that is always equal in not equal comparisons
+class AnyType(str):
+    def __ne__(self, __value: object) -> bool:
+        return False
+
+
+# Our any instance wants to be a wildcard string
+any = AnyType("*")
+
+
+class PlaySound:
+    @classmethod
+    def INPUT_TYPES(s):
+        return {"required": {
+            "any": (any, {}),
+            "mode": (["always", "on empty queue"], {}),
+            "volume": ("FLOAT", {"min": 0, "max": 1, "step": 0.1, "default": 0.5}),
+            "file": ("STRING", { "default": "notify.mp3" })
+        }}
+
+    FUNCTION = "nop"
+    INPUT_IS_LIST = True
+    OUTPUT_IS_LIST = (True,)
+    OUTPUT_NODE = True
+    RETURN_TYPES = (any,)
+
+    CATEGORY = "utils"
+
+    def IS_CHANGED(self, **kwargs):
+        return float("NaN")
+
+    def nop(self, any, mode, volume, file):
+        return {"ui": {"a": []}, "result": (any,)}
+
+
+NODE_CLASS_MAPPINGS = {
+    "PlaySound|pysssss": PlaySound,
+}
+
+NODE_DISPLAY_NAME_MAPPINGS = {
+    "PlaySound|pysssss": "PlaySound 🐍",
+}

custom_nodes/ComfyUI-Custom-Scripts/py/repeater.py

@@ -0,0 +1,46 @@
+# Hack: string type that is always equal in not equal comparisons
+class AnyType(str):
+    def __ne__(self, __value: object) -> bool:
+        return False
+
+
+# Our any instance wants to be a wildcard string
+any = AnyType("*")
+
+
+class Repeater:
+    @classmethod
+    def INPUT_TYPES(s):
+        return {"required": {
+            "source": (any, {}),
+            "repeats": ("INT", {"min": 0, "max": 5000, "default": 2}),
+            "output": (["single", "multi"], {}),
+            "node_mode": (["reuse", "create"], {}),
+        }}
+
+    RETURN_TYPES = (any,)
+    FUNCTION = "repeat"
+    OUTPUT_NODE = False
+    OUTPUT_IS_LIST = (True,)
+
+    CATEGORY = "utils"
+
+    def repeat(self, repeats, output, node_mode, **kwargs):
+        if output == "multi":
+            # Multi outputs are split to indiviual nodes on the frontend when serializing
+            return ([kwargs["source"]],)
+        elif node_mode == "reuse":
+            # When reusing we have a single input node, repeat that N times
+            return ([kwargs["source"]] * repeats,)
+        else:
+            # When creating new nodes, they'll be added dynamically when the graph is serialized
+            return ((list(kwargs.values())),)
+
+
+NODE_CLASS_MAPPINGS = {
+    "Repeater|pysssss": Repeater,
+}
+
+NODE_DISPLAY_NAME_MAPPINGS = {
+    "Repeater|pysssss": "Repeater 🐍",
+}

custom_nodes/ComfyUI-Custom-Scripts/py/reroute_primitive.py

@@ -0,0 +1,59 @@
+# Hack: string type that is always equal in not equal comparisons
+class AnyType(str):
+    def __ne__(self, __value: object) -> bool:
+        return False
+
+
+# Our any instance wants to be a wildcard string
+any = AnyType("*")
+
+
+class ReroutePrimitive:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {"value": (any, )},
+        }
+
+    @classmethod
+    def VALIDATE_INPUTS(s, **kwargs):
+        return True
+
+    RETURN_TYPES = (any,)
+    FUNCTION = "route"
+    CATEGORY = "__hidden__"
+
+    def route(self, value):
+        return (value,)
+
+
+class MultiPrimitive:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {},
+            "optional": {"value": (any, )},
+        }
+
+    @classmethod
+    def VALIDATE_INPUTS(s, **kwargs):
+        return True
+
+    RETURN_TYPES = (any,)
+    FUNCTION = "listify"
+    CATEGORY = "utils"
+    OUTPUT_IS_LIST = (True,)
+
+    def listify(self, **kwargs):
+        return (list(kwargs.values()),)
+
+
+NODE_CLASS_MAPPINGS = {
+    "ReroutePrimitive|pysssss": ReroutePrimitive,
+    # "MultiPrimitive|pysssss": MultiPrimitive,
+}
+
+NODE_DISPLAY_NAME_MAPPINGS = {
+    "ReroutePrimitive|pysssss": "Reroute Primitive 🐍",
+    # "MultiPrimitive|pysssss": "Multi Primitive 🐍",
+}

custom_nodes/ComfyUI-Custom-Scripts/py/show_text.py

@@ -0,0 +1,49 @@
+class ShowText:
+    @classmethod
+    def INPUT_TYPES(s):
+        return {
+            "required": {
+                "text": ("STRING", {"forceInput": True}),
+            },
+            "hidden": {
+                "unique_id": "UNIQUE_ID",
+                "extra_pnginfo": "EXTRA_PNGINFO",
+            },
+        }
+
+    INPUT_IS_LIST = True
+    RETURN_TYPES = ("STRING",)
+    FUNCTION = "notify"
+    OUTPUT_NODE = True
+    OUTPUT_IS_LIST = (True,)
+
+    CATEGORY = "utils"
+
+    def notify(self, text, unique_id=None, extra_pnginfo=None):
+        if unique_id is not None and extra_pnginfo is not None:
+            if not isinstance(extra_pnginfo, list):
+                print("Error: extra_pnginfo is not a list")
+            elif (
+                not isinstance(extra_pnginfo[0], dict)
+                or "workflow" not in extra_pnginfo[0]
+            ):
+                print("Error: extra_pnginfo[0] is not a dict or missing 'workflow' key")
+            else:
+                workflow = extra_pnginfo[0]["workflow"]
+                node = next(
+                    (x for x in workflow["nodes"] if str(x["id"]) == str(unique_id[0])),
+                    None,
+                )
+                if node:
+                    node["widgets_values"] = [text]
+
+        return {"ui": {"text": text}, "result": (text,)}
+
+
+NODE_CLASS_MAPPINGS = {
+    "ShowText|pysssss": ShowText,
+}
+
+NODE_DISPLAY_NAME_MAPPINGS = {
+    "ShowText|pysssss": "Show Text 🐍",
+}

custom_nodes/ComfyUI-Custom-Scripts/py/string_function.py

@@ -0,0 +1,49 @@
+import re
+
+class StringFunction:
+    @classmethod
+    def INPUT_TYPES(s):
+        return {
+            "required": {
+                "action": (["append", "replace"], {}),
+                "tidy_tags": (["yes", "no"], {}),
+            },
+            "optional": {
+                "text_a": ("STRING", {"multiline": True, "dynamicPrompts": False}),
+                "text_b": ("STRING", {"multiline": True, "dynamicPrompts": False}),
+                "text_c": ("STRING", {"multiline": True, "dynamicPrompts": False})
+            }
+        }
+
+    RETURN_TYPES = ("STRING",)
+    FUNCTION = "exec"
+    CATEGORY = "utils"
+    OUTPUT_NODE = True
+
+    def exec(self, action, tidy_tags, text_a="", text_b="", text_c=""):     
+        tidy_tags = tidy_tags == "yes"
+        out = ""
+        if action == "append":
+            out = (", " if tidy_tags else "").join(filter(None, [text_a, text_b, text_c]))
+        else:
+           if text_c is None:
+               text_c = ""
+           if text_b.startswith("/") and text_b.endswith("/"):
+               regex = text_b[1:-1]
+               out = re.sub(regex, text_c, text_a)
+           else:
+               out = text_a.replace(text_b, text_c)
+        if tidy_tags:
+            out = re.sub(r"\s{2,}", " ", out)
+            out = out.replace(" ,", ",")
+            out = re.sub(r",{2,}", ",", out)
+            out = out.strip()
+        return {"ui": {"text": (out,)}, "result": (out,)}
+            
+NODE_CLASS_MAPPINGS = {
+    "StringFunction|pysssss": StringFunction,
+}
+
+NODE_DISPLAY_NAME_MAPPINGS = {
+    "StringFunction|pysssss": "String Function 🐍",
+}

custom_nodes/ComfyUI-Custom-Scripts/py/system_notification.py

@@ -0,0 +1,41 @@
+# Hack: string type that is always equal in not equal comparisons
+class AnyType(str):
+    def __ne__(self, __value: object) -> bool:
+        return False
+
+
+# Our any instance wants to be a wildcard string
+any = AnyType("*")
+
+
+class SystemNotification:
+    @classmethod
+    def INPUT_TYPES(s):
+        return {"required": {
+            "message": ("STRING", {"default": "Your notification has triggered."}),
+            "any": (any, {}),
+            "mode": (["always", "on empty queue"], {}),
+        }}
+
+    FUNCTION = "nop"
+    INPUT_IS_LIST = True
+    OUTPUT_IS_LIST = (True,)
+    OUTPUT_NODE = True
+    RETURN_TYPES = (any,)
+
+    CATEGORY = "utils"
+
+    def IS_CHANGED(self, **kwargs):
+        return float("NaN")
+
+    def nop(self, any, message, mode):
+        return {"ui": {"message": message, "mode": mode}, "result": (any,)}
+
+
+NODE_CLASS_MAPPINGS = {
+    "SystemNotification|pysssss": SystemNotification,
+}
+
+NODE_DISPLAY_NAME_MAPPINGS = {
+    "SystemNotification|pysssss": "SystemNotification 🐍",
+}

custom_nodes/ComfyUI-Custom-Scripts/py/text_files.py

@@ -0,0 +1,200 @@
+import os
+import folder_paths
+import json
+from server import PromptServer
+import glob
+from aiohttp import web
+
+
+def get_allowed_dirs():
+    dir = os.path.abspath(os.path.join(__file__, "../../user"))
+    file = os.path.join(dir, "text_file_dirs.json")
+    with open(file, "r") as f:
+        return json.loads(f.read())
+
+
+def get_valid_dirs():
+    return get_allowed_dirs().keys()
+
+
+def get_dir_from_name(name):
+    dirs = get_allowed_dirs()
+    if name not in dirs:
+        raise KeyError(name + " dir not found")
+
+    path = dirs[name]
+    path = path.replace("$input", folder_paths.get_input_directory())
+    path = path.replace("$output", folder_paths.get_output_directory())
+    path = path.replace("$temp", folder_paths.get_temp_directory())
+    return path
+
+
+def is_child_dir(parent_path, child_path):
+    parent_path = os.path.abspath(parent_path)
+    child_path = os.path.abspath(child_path)
+    return os.path.commonpath([parent_path]) == os.path.commonpath([parent_path, child_path])
+
+
+def get_real_path(dir):
+    dir = dir.replace("/**/", "/")
+    dir = os.path.abspath(dir)
+    dir = os.path.split(dir)[0]
+    return dir
+
+
+@PromptServer.instance.routes.get("/pysssss/text-file/{name}")
+async def get_files(request):
+    name = request.match_info["name"]
+    dir = get_dir_from_name(name)
+    recursive = "/**/" in dir
+    # Ugh cant use root_path on glob... lazy hack..
+    pre = get_real_path(dir)
+
+    files = list(map(lambda t: os.path.relpath(t, pre),
+                     glob.glob(dir, recursive=recursive)))
+
+    if len(files) == 0:
+        files = ["[none]"]
+    return web.json_response(files)
+
+
+def get_file(root_dir, file):
+    if file == "[none]" or not file or not file.strip():
+        raise ValueError("No file")
+
+    root_dir = get_dir_from_name(root_dir)
+    root_dir = get_real_path(root_dir)
+    if not os.path.exists(root_dir):
+        os.mkdir(root_dir)
+    full_path = os.path.join(root_dir, file)
+
+    if not is_child_dir(root_dir, full_path):
+        raise ReferenceError()
+
+    return full_path
+
+
+class TextFileNode:
+    RETURN_TYPES = ("STRING",)
+    CATEGORY = "utils"
+
+    @classmethod
+    def VALIDATE_INPUTS(self, root_dir, file, **kwargs):
+        if file == "[none]" or not file or not file.strip():
+            return True
+        get_file(root_dir, file)
+        return True
+
+    def load_text(self, **kwargs):
+        self.file = get_file(kwargs["root_dir"], kwargs["file"])
+        with open(self.file, "r") as f:
+            return (f.read(), )
+
+
+class LoadText(TextFileNode):
+    @classmethod
+    def IS_CHANGED(self, **kwargs):
+        return os.path.getmtime(self.file)
+
+    @classmethod
+    def INPUT_TYPES(s):
+        return {
+            "required": {
+                "root_dir": (list(get_valid_dirs()), {}),
+                "file": (["[none]"], {
+                    "pysssss.binding": [{
+                        "source": "root_dir",
+                        "callback": [{
+                            "type": "set",
+                            "target": "$this.disabled",
+                            "value": True
+                        }, {
+                            "type": "fetch",
+                            "url": "/pysssss/text-file/{$source.value}",
+                            "then": [{
+                                "type": "set",
+                                "target": "$this.options.values",
+                                "value": "$result"
+                            }, {
+                                "type": "validate-combo"
+                            }, {
+                                "type": "set",
+                                "target": "$this.disabled",
+                                "value": False
+                            }]
+                        }],
+                    }]
+                })
+            },
+        }
+
+    FUNCTION = "load_text"
+
+
+class SaveText(TextFileNode):
+    OUTPUT_NODE = True
+    
+    @classmethod
+    def IS_CHANGED(self, **kwargs):
+        return float("nan")
+
+    @classmethod
+    def INPUT_TYPES(s):
+        return {
+            "required": {
+                "root_dir": (list(get_valid_dirs()), {}),
+                "file": ("STRING", {"default": "file.txt"}),
+                "append": (["append", "overwrite", "new only"], {}),
+                "insert": ("BOOLEAN", {
+                    "default": True, "label_on": "new line", "label_off": "none",
+                    "pysssss.binding": [{
+                        "source": "append",
+                        "callback": [{
+                            "type": "if",
+                            "condition": [{
+                                "left": "$source.value",
+                                "op": "eq",
+                                "right": '"append"'
+                            }],
+                            "true": [{
+                                "type": "set",
+                                "target": "$this.disabled",
+                                "value": False
+                            }],
+                            "false": [{
+                                "type": "set",
+                                "target": "$this.disabled",
+                                "value": True
+                            }],
+                        }]
+                    }]
+                }),
+                "text": ("STRING", {"forceInput": True, "multiline": True})
+            },
+        }
+
+    FUNCTION = "write_text"
+
+    def write_text(self, **kwargs):
+        self.file = get_file(kwargs["root_dir"], kwargs["file"])
+        if kwargs["append"] == "new only" and os.path.exists(self.file):
+            raise FileExistsError(
+                self.file + " already exists and 'new only' is selected.")
+        with open(self.file, "a+" if kwargs["append"] == "append" else "w") as f:
+            is_append = f.tell() != 0
+            if is_append and kwargs["insert"]:
+                f.write("\n")
+            f.write(kwargs["text"])
+
+        return super().load_text(**kwargs)
+
+
+NODE_CLASS_MAPPINGS = {
+    "LoadText|pysssss": LoadText,
+    "SaveText|pysssss": SaveText,
+}
+
+NODE_DISPLAY_NAME_MAPPINGS = {
+    "LoadText|pysssss": "Load Text 🐍",
+    "SaveText|pysssss": "Save Text 🐍",
+}

custom_nodes/ComfyUI-Custom-Scripts/py/workflows.py

@@ -0,0 +1,61 @@
+from server import PromptServer
+from aiohttp import web
+import os
+import inspect
+import json
+import importlib
+import sys
+sys.path.insert(0, os.path.dirname(os.path.dirname(__file__)))
+import pysssss
+
+root_directory = os.path.dirname(inspect.getfile(PromptServer))
+workflows_directory = os.path.join(root_directory, "pysssss-workflows")
+workflows_directory = pysssss.get_config_value(
+    "workflows.directory", workflows_directory)
+if not os.path.isabs(workflows_directory):
+    workflows_directory = os.path.abspath(os.path.join(root_directory, workflows_directory))
+
+NODE_CLASS_MAPPINGS = {}
+NODE_DISPLAY_NAME_MAPPINGS = {}
+
+
+@PromptServer.instance.routes.get("/pysssss/workflows")
+async def get_workflows(request):
+    files = []
+    for dirpath, directories, file in os.walk(workflows_directory):
+        for file in file:
+            if (file.endswith(".json")):
+                files.append(os.path.relpath(os.path.join(
+                    dirpath, file), workflows_directory))
+    return web.json_response(list(map(lambda f: os.path.splitext(f)[0].replace("\\", "/"), files)))
+
+
+@PromptServer.instance.routes.get("/pysssss/workflows/{name:.+}")
+async def get_workflow(request):
+    file = os.path.abspath(os.path.join(
+        workflows_directory, request.match_info["name"] + ".json"))
+    if os.path.commonpath([file, workflows_directory]) != workflows_directory:
+        return web.Response(status=403)
+
+    return web.FileResponse(file)
+
+
+@PromptServer.instance.routes.post("/pysssss/workflows")
+async def save_workflow(request):
+    json_data = await request.json()
+    file = os.path.abspath(os.path.join(
+        workflows_directory, json_data["name"] + ".json"))
+    if os.path.commonpath([file, workflows_directory]) != workflows_directory:
+        return web.Response(status=403)
+
+    if os.path.exists(file) and ("overwrite" not in json_data or json_data["overwrite"] == False):
+        return web.Response(status=409)
+
+    sub_path = os.path.dirname(file)
+    if not os.path.exists(sub_path):
+        os.makedirs(sub_path)
+
+    with open(file, "w") as f:
+        f.write(json.dumps(json_data["workflow"]))
+
+    return web.Response(status=201)

custom_nodes/ComfyUI-Custom-Scripts/pyproject.toml

@@ -0,0 +1,13 @@
+[project]
+name = "comfyui-custom-scripts"
+description = "Enhancements & experiments for ComfyUI, mostly focusing on UI features"
+version = "1.0.0"
+license = { file = "LICENSE" }
+
+[project.urls]
+Repository = "https://github.com/pythongosssss/ComfyUI-Custom-Scripts"
+
+[tool.comfy]
+PublisherId = "pythongosssss"
+DisplayName = "ComfyUI-Custom-Scripts"
+Icon = ""

custom_nodes/ComfyUI-Custom-Scripts/pysssss.default.json

@@ -0,0 +1,4 @@
+{
+	"name": "CustomScripts",
+	"logging": false
+}

custom_nodes/ComfyUI-Custom-Scripts/pysssss.example.json

@@ -0,0 +1,7 @@
+{
+	"name": "CustomScripts",
+	"logging": false,
+	"workflows": {
+		"directory": "C:\\ComfyUI-Workflows"
+	}
+}

custom_nodes/ComfyUI-Custom-Scripts/pysssss.py

@@ -0,0 +1,300 @@
+import asyncio
+import os
+import json
+import shutil
+import inspect
+import aiohttp
+from server import PromptServer
+from tqdm import tqdm
+
+config = None
+
+
+def is_logging_enabled():
+    config = get_extension_config()
+    if "logging" not in config:
+        return False
+    return config["logging"]
+
+
+def log(message, type=None, always=False, name=None):
+    if not always and not is_logging_enabled():
+        return
+
+    if type is not None:
+        message = f"[{type}] {message}"
+
+    if name is None:
+        name = get_extension_config()["name"]
+
+    print(f"(pysssss:{name}) {message}")
+
+
+def get_ext_dir(subpath=None, mkdir=False):
+    dir = os.path.dirname(__file__)
+    if subpath is not None:
+        dir = os.path.join(dir, subpath)
+
+    dir = os.path.abspath(dir)
+
+    if mkdir and not os.path.exists(dir):
+        os.makedirs(dir)
+    return dir
+
+
+def get_comfy_dir(subpath=None, mkdir=False):
+    dir = os.path.dirname(inspect.getfile(PromptServer))
+    if subpath is not None:
+        dir = os.path.join(dir, subpath)
+
+    dir = os.path.abspath(dir)
+
+    if mkdir and not os.path.exists(dir):
+        os.makedirs(dir)
+    return dir
+
+
+def get_web_ext_dir():
+    config = get_extension_config()
+    name = config["name"]
+    dir = get_comfy_dir("web/extensions/pysssss")
+    if not os.path.exists(dir):
+        os.makedirs(dir)
+    dir = os.path.join(dir, name)
+    return dir
+
+
+def get_extension_config(reload=False):
+    global config
+    if reload == False and config is not None:
+        return config
+
+    config_path = get_ext_dir("pysssss.json")
+    default_config_path = get_ext_dir("pysssss.default.json")
+    if not os.path.exists(config_path):
+        if os.path.exists(default_config_path):
+            shutil.copy(default_config_path, config_path)
+            if not os.path.exists(config_path):
+                log(f"Failed to create config at {config_path}", type="ERROR", always=True, name="???")
+                print(f"Extension path: {get_ext_dir()}")
+                return {"name": "Unknown", "version": -1}
+    
+        else:
+            log("Missing pysssss.default.json, this extension may not work correctly. Please reinstall the extension.",
+                type="ERROR", always=True, name="???")
+            print(f"Extension path: {get_ext_dir()}")
+            return {"name": "Unknown", "version": -1}
+
+    with open(config_path, "r") as f:
+        config = json.loads(f.read())
+    return config
+
+
+def link_js(src, dst):
+    src = os.path.abspath(src)
+    dst = os.path.abspath(dst)
+    if os.name == "nt":
+        try:
+            import _winapi
+            _winapi.CreateJunction(src, dst)
+            return True
+        except:
+            pass
+    try:
+        os.symlink(src, dst)
+        return True
+    except:
+        import logging
+        logging.exception('')
+        return False
+
+
+def is_junction(path):
+    if os.name != "nt":
+        return False
+    try:
+        return bool(os.readlink(path))
+    except OSError:
+        return False
+
+
+def install_js():
+    src_dir = get_ext_dir("web/js")
+    if not os.path.exists(src_dir):
+        log("No JS")
+        return
+
+    should_install = should_install_js()
+    if should_install:
+        log("it looks like you're running an old version of ComfyUI that requires manual setup of web files, it is recommended you update your installation.", "warning", True)
+    dst_dir = get_web_ext_dir()
+    linked = os.path.islink(dst_dir) or is_junction(dst_dir)
+    if linked or os.path.exists(dst_dir):
+        if linked:
+            if should_install:
+                log("JS already linked")
+            else:
+                os.unlink(dst_dir)
+                log("JS unlinked, PromptServer will serve extension")
+        elif not should_install:
+            shutil.rmtree(dst_dir)
+            log("JS deleted, PromptServer will serve extension")
+        return
+    
+    if not should_install:
+        log("JS skipped, PromptServer will serve extension")
+        return
+    
+    if link_js(src_dir, dst_dir):
+        log("JS linked")
+        return
+
+    log("Copying JS files")
+    shutil.copytree(src_dir, dst_dir, dirs_exist_ok=True)
+
+
+def should_install_js():
+    return not hasattr(PromptServer.instance, "supports") or "custom_nodes_from_web" not in PromptServer.instance.supports
+
+
+def init(check_imports=None):
+    log("Init")
+
+    if check_imports is not None:
+        import importlib.util
+        for imp in check_imports:
+            spec = importlib.util.find_spec(imp)
+            if spec is None:
+                log(f"{imp} is required, please check requirements are installed.",
+                    type="ERROR", always=True)
+                return False
+
+    install_js()
+    return True
+
+
+def get_async_loop():
+    loop = None
+    try:
+        loop = asyncio.get_event_loop()
+    except:
+        loop = asyncio.new_event_loop()
+        asyncio.set_event_loop(loop)
+    return loop
+
+
+def get_http_session():
+    loop = get_async_loop()
+    return aiohttp.ClientSession(loop=loop)
+
+
+async def download(url, stream, update_callback=None, session=None):
+    close_session = False
+    if session is None:
+        close_session = True
+        session = get_http_session()
+    try:
+        async with session.get(url) as response:
+            size = int(response.headers.get('content-length', 0)) or None
+
+            with tqdm(
+                unit='B', unit_scale=True, miniters=1, desc=url.split('/')[-1], total=size,
+            ) as progressbar:
+                perc = 0
+                async for chunk in response.content.iter_chunked(2048):
+                    stream.write(chunk)
+                    progressbar.update(len(chunk))
+                    if update_callback is not None and progressbar.total is not None and progressbar.total != 0:
+                        last = perc
+                        perc = round(progressbar.n / progressbar.total, 2)
+                        if perc != last:
+                            last = perc
+                            await update_callback(perc)
+    finally:
+        if close_session and session is not None:
+            await session.close()
+
+
+async def download_to_file(url, destination, update_callback=None, is_ext_subpath=True, session=None):
+    if is_ext_subpath:
+        destination = get_ext_dir(destination)
+    with open(destination, mode='wb') as f:
+        download(url, f, update_callback, session)
+
+
+def wait_for_async(async_fn, loop=None):
+    res = []
+
+    async def run_async():
+        r = await async_fn()
+        res.append(r)
+
+    if loop is None:
+        try:
+            loop = asyncio.get_event_loop()
+        except:
+            loop = asyncio.new_event_loop()
+            asyncio.set_event_loop(loop)
+
+    loop.run_until_complete(run_async())
+
+    return res[0]
+
+
+def update_node_status(client_id, node, text, progress=None):
+    if client_id is None:
+        client_id = PromptServer.instance.client_id
+
+    if client_id is None:
+        return
+
+    PromptServer.instance.send_sync("pysssss/update_status", {
+        "node": node,
+        "progress": progress,
+        "text": text
+    }, client_id)
+
+
+async def update_node_status_async(client_id, node, text, progress=None):
+    if client_id is None:
+        client_id = PromptServer.instance.client_id
+
+    if client_id is None:
+        return
+
+    await PromptServer.instance.send("pysssss/update_status", {
+        "node": node,
+        "progress": progress,
+        "text": text
+    }, client_id)
+
+
+def get_config_value(key, default=None, throw=False):
+    split = key.split(".")
+    obj = get_extension_config()
+    for s in split:
+        if s in obj:
+            obj = obj[s]
+        else:
+            if throw:
+                raise KeyError("Configuration key missing: " + key)
+            else:
+                return default
+    return obj
+
+
+def is_inside_dir(root_dir, check_path):
+    root_dir = os.path.abspath(root_dir)
+    if not os.path.isabs(check_path):
+        check_path = os.path.abspath(os.path.join(root_dir, check_path))
+    return os.path.commonpath([check_path, root_dir]) == root_dir
+
+
+def get_child_dir(root_dir, child_path, throw_if_outside=True):
+    child_path = os.path.abspath(os.path.join(root_dir, child_path))
+    if is_inside_dir(root_dir, child_path):
+        return child_path
+    if throw_if_outside:
+        raise NotADirectoryError(
+            "Saving outside the target folder is not allowed.")
+    return None

custom_nodes/ComfyUI-Custom-Scripts/user/text_file_dirs.json

@@ -0,0 +1,5 @@
+{
+	"input": "$input/**/*.txt",
+	"output": "$output/**/*.txt",
+	"temp": "$temp/**/*.txt"
+}

custom_nodes/ComfyUI-Custom-Scripts/web/js/assets/canvas2svg.js

@@ -0,0 +1,1192 @@
+/*!!
+ *  Canvas 2 Svg v1.0.19
+ *  A low level canvas to SVG converter. Uses a mock canvas context to build an SVG document.
+ *
+ *  Licensed under the MIT license:
+ *  http://www.opensource.org/licenses/mit-license.php
+ *
+ *  Author:
+ *  Kerry Liu
+ *
+ *  Copyright (c) 2014 Gliffy Inc.
+ */
+
+;(function() {
+    "use strict";
+
+    var STYLES, ctx, CanvasGradient, CanvasPattern, namedEntities;
+
+    //helper function to format a string
+    function format(str, args) {
+        var keys = Object.keys(args), i;
+        for (i=0; i<keys.length; i++) {
+            str = str.replace(new RegExp("\\{" + keys[i] + "\\}", "gi"), args[keys[i]]);
+        }
+        return str;
+    }
+
+    //helper function that generates a random string
+    function randomString(holder) {
+        var chars, randomstring, i;
+        if (!holder) {
+            throw new Error("cannot create a random attribute name for an undefined object");
+        }
+        chars = "ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
+        randomstring = "";
+        do {
+            randomstring = "";
+            for (i = 0; i < 12; i++) {
+                randomstring += chars[Math.floor(Math.random() * chars.length)];
+            }
+        } while (holder[randomstring]);
+        return randomstring;
+    }
+
+    //helper function to map named to numbered entities
+    function createNamedToNumberedLookup(items, radix) {
+        var i, entity, lookup = {}, base10, base16;
+        items = items.split(',');
+        radix = radix || 10;
+        // Map from named to numbered entities.
+        for (i = 0; i < items.length; i += 2) {
+            entity = '&' + items[i + 1] + ';';
+            base10 = parseInt(items[i], radix);
+            lookup[entity] = '&#'+base10+';';
+        }
+        //FF and IE need to create a regex from hex values ie &nbsp; == \xa0
+        lookup["\\xa0"] = '&#160;';
+        return lookup;
+    }
+
+    //helper function to map canvas-textAlign to svg-textAnchor
+    function getTextAnchor(textAlign) {
+        //TODO: support rtl languages
+        var mapping = {"left":"start", "right":"end", "center":"middle", "start":"start", "end":"end"};
+        return mapping[textAlign] || mapping.start;
+    }
+
+    //helper function to map canvas-textBaseline to svg-dominantBaseline
+    function getDominantBaseline(textBaseline) {
+        //INFO: not supported in all browsers
+        var mapping = {"alphabetic": "alphabetic", "hanging": "hanging", "top":"text-before-edge", "bottom":"text-after-edge", "middle":"central"};
+        return mapping[textBaseline] || mapping.alphabetic;
+    }
+
+    // Unpack entities lookup where the numbers are in radix 32 to reduce the size
+    // entity mapping courtesy of tinymce
+    namedEntities = createNamedToNumberedLookup(
+        '50,nbsp,51,iexcl,52,cent,53,pound,54,curren,55,yen,56,brvbar,57,sect,58,uml,59,copy,' +
+            '5a,ordf,5b,laquo,5c,not,5d,shy,5e,reg,5f,macr,5g,deg,5h,plusmn,5i,sup2,5j,sup3,5k,acute,' +
+            '5l,micro,5m,para,5n,middot,5o,cedil,5p,sup1,5q,ordm,5r,raquo,5s,frac14,5t,frac12,5u,frac34,' +
+            '5v,iquest,60,Agrave,61,Aacute,62,Acirc,63,Atilde,64,Auml,65,Aring,66,AElig,67,Ccedil,' +
+            '68,Egrave,69,Eacute,6a,Ecirc,6b,Euml,6c,Igrave,6d,Iacute,6e,Icirc,6f,Iuml,6g,ETH,6h,Ntilde,' +
+            '6i,Ograve,6j,Oacute,6k,Ocirc,6l,Otilde,6m,Ouml,6n,times,6o,Oslash,6p,Ugrave,6q,Uacute,' +
+            '6r,Ucirc,6s,Uuml,6t,Yacute,6u,THORN,6v,szlig,70,agrave,71,aacute,72,acirc,73,atilde,74,auml,' +
+            '75,aring,76,aelig,77,ccedil,78,egrave,79,eacute,7a,ecirc,7b,euml,7c,igrave,7d,iacute,7e,icirc,' +
+            '7f,iuml,7g,eth,7h,ntilde,7i,ograve,7j,oacute,7k,ocirc,7l,otilde,7m,ouml,7n,divide,7o,oslash,' +
+            '7p,ugrave,7q,uacute,7r,ucirc,7s,uuml,7t,yacute,7u,thorn,7v,yuml,ci,fnof,sh,Alpha,si,Beta,' +
+            'sj,Gamma,sk,Delta,sl,Epsilon,sm,Zeta,sn,Eta,so,Theta,sp,Iota,sq,Kappa,sr,Lambda,ss,Mu,' +
+            'st,Nu,su,Xi,sv,Omicron,t0,Pi,t1,Rho,t3,Sigma,t4,Tau,t5,Upsilon,t6,Phi,t7,Chi,t8,Psi,' +
+            't9,Omega,th,alpha,ti,beta,tj,gamma,tk,delta,tl,epsilon,tm,zeta,tn,eta,to,theta,tp,iota,' +
+            'tq,kappa,tr,lambda,ts,mu,tt,nu,tu,xi,tv,omicron,u0,pi,u1,rho,u2,sigmaf,u3,sigma,u4,tau,' +
+            'u5,upsilon,u6,phi,u7,chi,u8,psi,u9,omega,uh,thetasym,ui,upsih,um,piv,812,bull,816,hellip,' +
+            '81i,prime,81j,Prime,81u,oline,824,frasl,88o,weierp,88h,image,88s,real,892,trade,89l,alefsym,' +
+            '8cg,larr,8ch,uarr,8ci,rarr,8cj,darr,8ck,harr,8dl,crarr,8eg,lArr,8eh,uArr,8ei,rArr,8ej,dArr,' +
+            '8ek,hArr,8g0,forall,8g2,part,8g3,exist,8g5,empty,8g7,nabla,8g8,isin,8g9,notin,8gb,ni,8gf,prod,' +
+            '8gh,sum,8gi,minus,8gn,lowast,8gq,radic,8gt,prop,8gu,infin,8h0,ang,8h7,and,8h8,or,8h9,cap,8ha,cup,' +
+            '8hb,int,8hk,there4,8hs,sim,8i5,cong,8i8,asymp,8j0,ne,8j1,equiv,8j4,le,8j5,ge,8k2,sub,8k3,sup,8k4,' +
+            'nsub,8k6,sube,8k7,supe,8kl,oplus,8kn,otimes,8l5,perp,8m5,sdot,8o8,lceil,8o9,rceil,8oa,lfloor,8ob,' +
+            'rfloor,8p9,lang,8pa,rang,9ea,loz,9j0,spades,9j3,clubs,9j5,hearts,9j6,diams,ai,OElig,aj,oelig,b0,' +
+            'Scaron,b1,scaron,bo,Yuml,m6,circ,ms,tilde,802,ensp,803,emsp,809,thinsp,80c,zwnj,80d,zwj,80e,lrm,' +
+            '80f,rlm,80j,ndash,80k,mdash,80o,lsquo,80p,rsquo,80q,sbquo,80s,ldquo,80t,rdquo,80u,bdquo,810,dagger,' +
+            '811,Dagger,81g,permil,81p,lsaquo,81q,rsaquo,85c,euro', 32);
+
+
+    //Some basic mappings for attributes and default values.
+    STYLES = {
+        "strokeStyle":{
+            svgAttr : "stroke", //corresponding svg attribute
+            canvas : "#000000", //canvas default
+            svg : "none",       //svg default
+            apply : "stroke"    //apply on stroke() or fill()
+        },
+        "fillStyle":{
+            svgAttr : "fill",
+            canvas : "#000000",
+            svg : null, //svg default is black, but we need to special case this to handle canvas stroke without fill
+            apply : "fill"
+        },
+        "lineCap":{
+            svgAttr : "stroke-linecap",
+            canvas : "butt",
+            svg : "butt",
+            apply : "stroke"
+        },
+        "lineJoin":{
+            svgAttr : "stroke-linejoin",
+            canvas : "miter",
+            svg : "miter",
+            apply : "stroke"
+        },
+        "miterLimit":{
+            svgAttr : "stroke-miterlimit",
+            canvas : 10,
+            svg : 4,
+            apply : "stroke"
+        },
+        "lineWidth":{
+            svgAttr : "stroke-width",
+            canvas : 1,
+            svg : 1,
+            apply : "stroke"
+        },
+        "globalAlpha": {
+            svgAttr : "opacity",
+            canvas : 1,
+            svg : 1,
+            apply :  "fill stroke"
+        },
+        "font":{
+            //font converts to multiple svg attributes, there is custom logic for this
+            canvas : "10px sans-serif"
+        },
+        "shadowColor":{
+            canvas : "#000000"
+        },
+        "shadowOffsetX":{
+            canvas : 0
+        },
+        "shadowOffsetY":{
+            canvas : 0
+        },
+        "shadowBlur":{
+            canvas : 0
+        },
+        "textAlign":{
+            canvas : "start"
+        },
+        "textBaseline":{
+            canvas : "alphabetic"
+        },
+        "lineDash" : {
+            svgAttr : "stroke-dasharray",
+            canvas : [],
+            svg : null,
+            apply : "stroke"
+        }
+    };
+
+    /**
+     *
+     * @param gradientNode - reference to the gradient
+     * @constructor
+     */
+    CanvasGradient = function(gradientNode, ctx) {
+        this.__root = gradientNode;
+        this.__ctx = ctx;
+    };
+
+    /**
+     * Adds a color stop to the gradient root
+     */
+    CanvasGradient.prototype.addColorStop = function(offset, color) {
+        var stop = this.__ctx.__createElement("stop"), regex, matches;
+        stop.setAttribute("offset", offset);
+        if(color.indexOf("rgba") !== -1) {
+            //separate alpha value, since webkit can't handle it
+            regex = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi;
+            matches = regex.exec(color);
+            stop.setAttribute("stop-color", format("rgb({r},{g},{b})", {r:matches[1], g:matches[2], b:matches[3]}));
+            stop.setAttribute("stop-opacity", matches[4]);
+        } else {
+            stop.setAttribute("stop-color", color);
+        }
+        this.__root.appendChild(stop);
+    };
+
+    CanvasPattern = function(pattern, ctx) {
+        this.__root = pattern;
+        this.__ctx = ctx;
+    };
+
+    /**
+     * The mock canvas context
+     * @param o - options include:
+     * width - width of your canvas (defaults to 500)
+     * height - height of your canvas (defaults to 500)
+     * enableMirroring - enables canvas mirroring (get image data) (defaults to false)
+     * document - the document object (defaults to the current document)
+     */
+    ctx = function(o) {
+
+        var defaultOptions = { width:500, height:500, enableMirroring : false}, options;
+
+        //keep support for this way of calling C2S: new C2S(width,height)
+        if(arguments.length > 1) {
+            options = defaultOptions;
+            options.width = arguments[0];
+            options.height = arguments[1];
+        } else if( !o ) {
+            options = defaultOptions;
+        } else {
+            options = o;
+        }
+
+        if(!(this instanceof ctx)) {
+            //did someone call this without new?
+            return new ctx(options);
+        }
+
+        //setup options
+        this.width = options.width || defaultOptions.width;
+        this.height = options.height || defaultOptions.height;
+        this.enableMirroring = options.enableMirroring !== undefined ? options.enableMirroring : defaultOptions.enableMirroring;
+
+        this.canvas = this;   ///point back to this instance!
+        this.__document = options.document || document;
+        this.__canvas = this.__document.createElement("canvas");
+        this.__ctx = this.__canvas.getContext("2d");
+
+        this.__setDefaultStyles();
+        this.__stack = [this.__getStyleState()];
+        this.__groupStack = [];
+
+        //the root svg element
+        this.__root = this.__document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        this.__root.setAttribute("version", 1.1);
+        this.__root.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+        this.__root.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
+        this.__root.setAttribute("width", this.width);
+        this.__root.setAttribute("height", this.height);
+
+        //make sure we don't generate the same ids in defs
+        this.__ids = {};
+
+        //defs tag
+        this.__defs = this.__document.createElementNS("http://www.w3.org/2000/svg", "defs");
+        this.__root.appendChild(this.__defs);
+
+        //also add a group child. the svg element can't use the transform attribute
+        this.__currentElement = this.__document.createElementNS("http://www.w3.org/2000/svg", "g");
+        this.__root.appendChild(this.__currentElement);
+    };
+
+
+    /**
+     * Creates the specified svg element
+     * @private
+     */
+    ctx.prototype.__createElement = function (elementName, properties, resetFill) {
+        if (typeof properties === "undefined") {
+            properties = {};
+        }
+
+        var element = this.__document.createElementNS("http://www.w3.org/2000/svg", elementName),
+            keys = Object.keys(properties), i, key;
+        if(resetFill) {
+            //if fill or stroke is not specified, the svg element should not display. By default SVG's fill is black.
+            element.setAttribute("fill", "none");
+            element.setAttribute("stroke", "none");
+        }
+        for(i=0; i<keys.length; i++) {
+            key = keys[i];
+            element.setAttribute(key, properties[key]);
+        }
+        return element;
+    };
+
+    /**
+     * Applies default canvas styles to the context
+     * @private
+     */
+    ctx.prototype.__setDefaultStyles = function() {
+        //default 2d canvas context properties see:http://www.w3.org/TR/2dcontext/
+        var keys = Object.keys(STYLES), i, key;
+        for(i=0; i<keys.length; i++) {
+            key = keys[i];
+            this[key] = STYLES[key].canvas;
+        }
+    };
+
+    /**
+     * Applies styles on restore
+     * @param styleState
+     * @private
+     */
+    ctx.prototype.__applyStyleState = function(styleState) {
+        var keys = Object.keys(styleState), i, key;
+        for(i=0; i<keys.length; i++) {
+            key = keys[i];
+            this[key] = styleState[key];
+        }
+    };
+
+    /**
+     * Gets the current style state
+     * @return {Object}
+     * @private
+     */
+    ctx.prototype.__getStyleState = function() {
+        var i, styleState = {}, keys = Object.keys(STYLES), key;
+        for(i=0; i<keys.length; i++) {
+            key = keys[i];
+            styleState[key] = this[key];
+        }
+        return styleState;
+    };
+
+    /**
+     * Apples the current styles to the current SVG element. On "ctx.fill" or "ctx.stroke"
+     * @param type
+     * @private
+     */
+    ctx.prototype.__applyStyleToCurrentElement = function(type) {
+        var keys = Object.keys(STYLES), i, style, value, id, regex, matches;
+        for(i=0; i<keys.length; i++) {
+            style = STYLES[keys[i]];
+            value = this[keys[i]];
+            if(style.apply) {
+                //is this a gradient or pattern?
+                if(style.apply.indexOf("fill")!==-1 && value instanceof CanvasPattern) {
+                    //pattern
+                    if(value.__ctx) {
+                        //copy over defs
+                        while(value.__ctx.__defs.childNodes.length) {
+                            id = value.__ctx.__defs.childNodes[0].getAttribute("id");
+                            this.__ids[id] = id;
+                            this.__defs.appendChild(value.__ctx.__defs.childNodes[0]);
+                        }
+                    }
+                    this.__currentElement.setAttribute("fill", format("url(#{id})", {id:value.__root.getAttribute("id")}));
+                }
+                else if(style.apply.indexOf("fill")!==-1 && value instanceof CanvasGradient) {
+                    //gradient
+                    this.__currentElement.setAttribute("fill", format("url(#{id})", {id:value.__root.getAttribute("id")}));
+                } else if(style.apply.indexOf(type)!==-1 && style.svg !== value) {
+                    if((style.svgAttr === "stroke" || style.svgAttr === "fill") && value.indexOf("rgba") !== -1) {
+                        //separate alpha value, since illustrator can't handle it
+                        regex = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi;
+                        matches = regex.exec(value);
+                        this.__currentElement.setAttribute(style.svgAttr, format("rgb({r},{g},{b})", {r:matches[1], g:matches[2], b:matches[3]}));
+                        //should take globalAlpha here
+                        var opacity = matches[4];
+                        var globalAlpha = this.globalAlpha;
+                        if (globalAlpha != null) {
+                            opacity *= globalAlpha;
+                        }
+                        this.__currentElement.setAttribute(style.svgAttr+"-opacity", opacity);
+                    } else {
+                        var attr = style.svgAttr;
+                        if (keys[i] === 'globalAlpha') {
+                            attr = type+'-'+style.svgAttr;
+                            if (this.__currentElement.getAttribute(attr)) {
+                                 //fill-opacity or stroke-opacity has already been set by stroke or fill.
+                                continue;
+                            }
+                        }
+                        //otherwise only update attribute if right type, and not svg default
+                        this.__currentElement.setAttribute(attr, value);
+
+
+                    }
+                }
+            }
+        }
+
+    };
+
+    /**
+     * Will return the closest group or svg node. May return the current element.
+     * @private
+     */
+    ctx.prototype.__closestGroupOrSvg = function(node) {
+        node = node || this.__currentElement;
+        if(node.nodeName === "g" || node.nodeName === "svg") {
+            return node;
+        } else {
+            return this.__closestGroupOrSvg(node.parentNode);
+        }
+    };
+
+    /**
+     * Returns the serialized value of the svg so far
+     * @param fixNamedEntities - Standalone SVG doesn't support named entities, which document.createTextNode encodes.
+     *                           If true, we attempt to find all named entities and encode it as a numeric entity.
+     * @return serialized svg
+     */
+    ctx.prototype.getSerializedSvg = function(fixNamedEntities) {
+        var serialized = new XMLSerializer().serializeToString(this.__root),
+            keys, i, key, value, regexp, xmlns;
+
+        //IE search for a duplicate xmnls because they didn't implement setAttributeNS correctly
+        xmlns = /xmlns="http:\/\/www\.w3\.org\/2000\/svg".+xmlns="http:\/\/www\.w3\.org\/2000\/svg/gi;
+        if(xmlns.test(serialized)) {
+            serialized = serialized.replace('xmlns="http://www.w3.org/2000/svg','xmlns:xlink="http://www.w3.org/1999/xlink');
+        }
+
+        if(fixNamedEntities) {
+            keys = Object.keys(namedEntities);
+            //loop over each named entity and replace with the proper equivalent.
+            for(i=0; i<keys.length; i++) {
+                key = keys[i];
+                value = namedEntities[key];
+                regexp = new RegExp(key, "gi");
+                if(regexp.test(serialized)) {
+                    serialized = serialized.replace(regexp, value);
+                }
+            }
+        }
+
+        return serialized;
+    };
+
+
+    /**
+     * Returns the root svg
+     * @return
+     */
+    ctx.prototype.getSvg = function() {
+        return this.__root;
+    };
+    /**
+     * Will generate a group tag.
+     */
+    ctx.prototype.save = function() {
+        var group = this.__createElement("g"), parent = this.__closestGroupOrSvg();
+        this.__groupStack.push(parent);
+        parent.appendChild(group);
+        this.__currentElement = group;
+        this.__stack.push(this.__getStyleState());
+    };
+    /**
+     * Sets current element to parent, or just root if already root
+     */
+    ctx.prototype.restore = function(){
+        this.__currentElement = this.__groupStack.pop();
+        //Clearing canvas will make the poped group invalid, currentElement is set to the root group node.
+        if (!this.__currentElement) {
+            this.__currentElement = this.__root.childNodes[1];
+        }
+        var state = this.__stack.pop();
+        this.__applyStyleState(state);
+
+    };
+
+    /**
+     * Helper method to add transform
+     * @private
+     */
+    ctx.prototype.__addTransform = function(t) {
+
+        //if the current element has siblings, add another group
+        var parent = this.__closestGroupOrSvg();
+        if(parent.childNodes.length > 0) {
+            var group = this.__createElement("g");
+            parent.appendChild(group);
+            this.__currentElement = group;
+        }
+
+        var transform = this.__currentElement.getAttribute("transform");
+        if(transform) {
+            transform += " ";
+        } else {
+            transform = "";
+        }
+        transform += t;
+        this.__currentElement.setAttribute("transform", transform);
+    };
+
+    /**
+     *  scales the current element
+     */
+    ctx.prototype.scale = function(x, y) {
+        if(y === undefined) {
+            y = x;
+        }
+        this.__addTransform(format("scale({x},{y})", {x:x, y:y}));
+    };
+
+    /**
+     * rotates the current element
+     */
+    ctx.prototype.rotate = function(angle){
+        var degrees = (angle * 180 / Math.PI);
+        this.__addTransform(format("rotate({angle},{cx},{cy})", {angle:degrees, cx:0, cy:0}));
+    };
+
+    /**
+     * translates the current element
+     */
+    ctx.prototype.translate = function(x, y){
+        this.__addTransform(format("translate({x},{y})", {x:x,y:y}));
+    };
+
+    /**
+     * applies a transform to the current element
+     */
+    ctx.prototype.transform = function(a, b, c, d, e, f){
+        this.__addTransform(format("matrix({a},{b},{c},{d},{e},{f})", {a:a, b:b, c:c, d:d, e:e, f:f}));
+    };
+
+    /**
+     * Create a new Path Element
+     */
+    ctx.prototype.beginPath = function(){
+        var path, parent;
+
+        // Note that there is only one current default path, it is not part of the drawing state.
+        // See also: https://html.spec.whatwg.org/multipage/scripting.html#current-default-path
+        this.__currentDefaultPath = "";
+        this.__currentPosition = {};
+
+        path = this.__createElement("path", {}, true);
+        parent = this.__closestGroupOrSvg();
+        parent.appendChild(path);
+        this.__currentElement = path;
+    };
+
+    /**
+     * Helper function to apply currentDefaultPath to current path element
+     * @private
+     */
+    ctx.prototype.__applyCurrentDefaultPath = function() {
+        if(this.__currentElement.nodeName === "path") {
+            var d = this.__currentDefaultPath;
+            this.__currentElement.setAttribute("d", d);
+        } else {
+            throw new Error("Attempted to apply path command to node " + this.__currentElement.nodeName);
+        }
+    };
+
+    /**
+     * Helper function to add path command
+     * @private
+     */
+    ctx.prototype.__addPathCommand = function(command){
+        this.__currentDefaultPath += " ";
+        this.__currentDefaultPath += command;
+    };
+
+    /**
+     * Adds the move command to the current path element,
+     * if the currentPathElement is not empty create a new path element
+     */
+    ctx.prototype.moveTo = function(x,y){
+        if(this.__currentElement.nodeName !== "path") {
+            this.beginPath();
+        }
+
+        // creates a new subpath with the given point
+        this.__currentPosition = {x: x, y: y};
+        this.__addPathCommand(format("M {x} {y}", {x:x, y:y}));
+    };
+
+    /**
+     * Closes the current path
+     */
+    ctx.prototype.closePath = function(){
+        this.__addPathCommand("Z");
+    };
+
+    /**
+     * Adds a line to command
+     */
+    ctx.prototype.lineTo = function(x, y){
+        this.__currentPosition = {x: x, y: y};
+        if (this.__currentDefaultPath.indexOf('M') > -1) {
+            this.__addPathCommand(format("L {x} {y}", {x:x, y:y}));
+        } else {
+            this.__addPathCommand(format("M {x} {y}", {x:x, y:y}));
+        }
+    };
+
+    /**
+     * Add a bezier command
+     */
+    ctx.prototype.bezierCurveTo = function(cp1x, cp1y, cp2x, cp2y, x, y) {
+        this.__currentPosition = {x: x, y: y};
+        this.__addPathCommand(format("C {cp1x} {cp1y} {cp2x} {cp2y} {x} {y}",
+            {cp1x:cp1x, cp1y:cp1y, cp2x:cp2x, cp2y:cp2y, x:x, y:y}));
+    };
+
+    /**
+     * Adds a quadratic curve to command
+     */
+    ctx.prototype.quadraticCurveTo = function(cpx, cpy, x, y){
+        this.__currentPosition = {x: x, y: y};
+        this.__addPathCommand(format("Q {cpx} {cpy} {x} {y}", {cpx:cpx, cpy:cpy, x:x, y:y}));
+    };
+
+
+    /**
+     * Return a new normalized vector of given vector
+     */
+    var normalize = function(vector) {
+        var len = Math.sqrt(vector[0] * vector[0] + vector[1] * vector[1]);
+        return [vector[0] / len, vector[1] / len];
+    };
+
+    /**
+     * Adds the arcTo to the current path
+     *
+     * @see http://www.w3.org/TR/2015/WD-2dcontext-20150514/#dom-context-2d-arcto
+     */
+    ctx.prototype.arcTo = function(x1, y1, x2, y2, radius) {
+        // Let the point (x0, y0) be the last point in the subpath.
+        var x0 = this.__currentPosition && this.__currentPosition.x;
+        var y0 = this.__currentPosition && this.__currentPosition.y;
+
+        // First ensure there is a subpath for (x1, y1).
+        if (typeof x0 == "undefined" || typeof y0 == "undefined") {
+            return;
+        }
+
+        // Negative values for radius must cause the implementation to throw an IndexSizeError exception.
+        if (radius < 0) {
+            throw new Error("IndexSizeError: The radius provided (" + radius + ") is negative.");
+        }
+
+        // If the point (x0, y0) is equal to the point (x1, y1),
+        // or if the point (x1, y1) is equal to the point (x2, y2),
+        // or if the radius radius is zero,
+        // then the method must add the point (x1, y1) to the subpath,
+        // and connect that point to the previous point (x0, y0) by a straight line.
+        if (((x0 === x1) && (y0 === y1))
+            || ((x1 === x2) && (y1 === y2))
+            || (radius === 0)) {
+            this.lineTo(x1, y1);
+            return;
+        }
+
+        // Otherwise, if the points (x0, y0), (x1, y1), and (x2, y2) all lie on a single straight line,
+        // then the method must add the point (x1, y1) to the subpath,
+        // and connect that point to the previous point (x0, y0) by a straight line.
+        var unit_vec_p1_p0 = normalize([x0 - x1, y0 - y1]);
+        var unit_vec_p1_p2 = normalize([x2 - x1, y2 - y1]);
+        if (unit_vec_p1_p0[0] * unit_vec_p1_p2[1] === unit_vec_p1_p0[1] * unit_vec_p1_p2[0]) {
+            this.lineTo(x1, y1);
+            return;
+        }
+
+        // Otherwise, let The Arc be the shortest arc given by circumference of the circle that has radius radius,
+        // and that has one point tangent to the half-infinite line that crosses the point (x0, y0) and ends at the point (x1, y1),
+        // and that has a different point tangent to the half-infinite line that ends at the point (x1, y1), and crosses the point (x2, y2).
+        // The points at which this circle touches these two lines are called the start and end tangent points respectively.
+
+        // note that both vectors are unit vectors, so the length is 1
+        var cos = (unit_vec_p1_p0[0] * unit_vec_p1_p2[0] + unit_vec_p1_p0[1] * unit_vec_p1_p2[1]);
+        var theta = Math.acos(Math.abs(cos));
+
+        // Calculate origin
+        var unit_vec_p1_origin = normalize([
+            unit_vec_p1_p0[0] + unit_vec_p1_p2[0],
+            unit_vec_p1_p0[1] + unit_vec_p1_p2[1]
+        ]);
+        var len_p1_origin = radius / Math.sin(theta / 2);
+        var x = x1 + len_p1_origin * unit_vec_p1_origin[0];
+        var y = y1 + len_p1_origin * unit_vec_p1_origin[1];
+
+        // Calculate start angle and end angle
+        // rotate 90deg clockwise (note that y axis points to its down)
+        var unit_vec_origin_start_tangent = [
+            -unit_vec_p1_p0[1],
+            unit_vec_p1_p0[0]
+        ];
+        // rotate 90deg counter clockwise (note that y axis points to its down)
+        var unit_vec_origin_end_tangent = [
+            unit_vec_p1_p2[1],
+            -unit_vec_p1_p2[0]
+        ];
+        var getAngle = function(vector) {
+            // get angle (clockwise) between vector and (1, 0)
+            var x = vector[0];
+            var y = vector[1];
+            if (y >= 0) { // note that y axis points to its down
+                return Math.acos(x);
+            } else {
+                return -Math.acos(x);
+            }
+        };
+        var startAngle = getAngle(unit_vec_origin_start_tangent);
+        var endAngle = getAngle(unit_vec_origin_end_tangent);
+
+        // Connect the point (x0, y0) to the start tangent point by a straight line
+        this.lineTo(x + unit_vec_origin_start_tangent[0] * radius,
+                    y + unit_vec_origin_start_tangent[1] * radius);
+
+        // Connect the start tangent point to the end tangent point by arc
+        // and adding the end tangent point to the subpath.
+        this.arc(x, y, radius, startAngle, endAngle);
+    };
+
+    /**
+     * Sets the stroke property on the current element
+     */
+    ctx.prototype.stroke = function(){
+        if(this.__currentElement.nodeName === "path") {
+            this.__currentElement.setAttribute("paint-order", "fill stroke markers");
+        }
+        this.__applyCurrentDefaultPath();
+        this.__applyStyleToCurrentElement("stroke");
+    };
+
+    /**
+     * Sets fill properties on the current element
+     */
+    ctx.prototype.fill = function(){
+        if(this.__currentElement.nodeName === "path") {
+            this.__currentElement.setAttribute("paint-order", "stroke fill markers");
+        }
+        this.__applyCurrentDefaultPath();
+        this.__applyStyleToCurrentElement("fill");
+    };
+
+    /**
+     *  Adds a rectangle to the path.
+     */
+    ctx.prototype.rect = function(x, y, width, height){
+        if(this.__currentElement.nodeName !== "path") {
+            this.beginPath();
+        }
+        this.moveTo(x, y);
+        this.lineTo(x+width, y);
+        this.lineTo(x+width, y+height);
+        this.lineTo(x, y+height);
+        this.lineTo(x, y);
+        this.closePath();
+    };
+
+
+    /**
+     * adds a rectangle element
+     */
+    ctx.prototype.fillRect = function(x, y, width, height){
+        var rect, parent;
+        rect = this.__createElement("rect", {
+            x : x,
+            y : y,
+            width : width,
+            height : height
+        }, true);
+        parent = this.__closestGroupOrSvg();
+        parent.appendChild(rect);
+        this.__currentElement = rect;
+        this.__applyStyleToCurrentElement("fill");
+    };
+
+    /**
+     * Draws a rectangle with no fill
+     * @param x
+     * @param y
+     * @param width
+     * @param height
+     */
+    ctx.prototype.strokeRect = function(x, y, width, height){
+        var rect, parent;
+        rect = this.__createElement("rect", {
+            x : x,
+            y : y,
+            width : width,
+            height : height
+        }, true);
+        parent = this.__closestGroupOrSvg();
+        parent.appendChild(rect);
+        this.__currentElement = rect;
+        this.__applyStyleToCurrentElement("stroke");
+    };
+
+
+    /**
+     * Clear entire canvas:
+     * 1. save current transforms
+     * 2. remove all the childNodes of the root g element
+     */
+    ctx.prototype.__clearCanvas = function() {
+        var current = this.__closestGroupOrSvg(),
+            transform = current.getAttribute("transform");
+        var rootGroup = this.__root.childNodes[1];
+        var childNodes = rootGroup.childNodes;
+        for (var i = childNodes.length - 1; i >= 0; i--) {
+            if (childNodes[i]) {
+                rootGroup.removeChild(childNodes[i]);
+            }
+        }
+        this.__currentElement = rootGroup;
+        //reset __groupStack as all the child group nodes are all removed.
+        this.__groupStack = [];
+        if (transform) {
+            this.__addTransform(transform);
+        }
+    };
+
+    /**
+     * "Clears" a canvas by just drawing a white rectangle in the current group.
+     */
+    ctx.prototype.clearRect = function(x, y, width, height) {
+        //clear entire canvas
+        if (x === 0 && y === 0 && width === this.width && height === this.height) {
+            this.__clearCanvas();
+            return;
+        }
+        var rect, parent = this.__closestGroupOrSvg();
+        rect = this.__createElement("rect", {
+            x : x,
+            y : y,
+            width : width,
+            height : height,
+            fill : "#FFFFFF"
+        }, true);
+        parent.appendChild(rect);
+    };
+
+    /**
+     * Adds a linear gradient to a defs tag.
+     * Returns a canvas gradient object that has a reference to it's parent def
+     */
+    ctx.prototype.createLinearGradient = function(x1, y1, x2, y2){
+        var grad = this.__createElement("linearGradient", {
+            id : randomString(this.__ids),
+            x1 : x1+"px",
+            x2 : x2+"px",
+            y1 : y1+"px",
+            y2 : y2+"px",
+            "gradientUnits" : "userSpaceOnUse"
+        }, false);
+        this.__defs.appendChild(grad);
+        return new CanvasGradient(grad, this);
+    };
+
+    /**
+     * Adds a radial gradient to a defs tag.
+     * Returns a canvas gradient object that has a reference to it's parent def
+     */
+    ctx.prototype.createRadialGradient = function(x0, y0, r0, x1, y1, r1){
+        var grad = this.__createElement("radialGradient", {
+            id : randomString(this.__ids),
+            cx : x1+"px",
+            cy : y1+"px",
+            r  : r1+"px",
+            fx : x0+"px",
+            fy : y0+"px",
+            "gradientUnits" : "userSpaceOnUse"
+        }, false);
+        this.__defs.appendChild(grad);
+        return new CanvasGradient(grad, this);
+
+    };
+
+    /**
+     * Parses the font string and returns svg mapping
+     * @private
+     */
+    ctx.prototype.__parseFont = function() {
+        var regex = /^\s*(?=(?:(?:[-a-z]+\s*){0,2}(italic|oblique))?)(?=(?:(?:[-a-z]+\s*){0,2}(small-caps))?)(?=(?:(?:[-a-z]+\s*){0,2}(bold(?:er)?|lighter|[1-9]00))?)(?:(?:normal|\1|\2|\3)\s*){0,3}((?:xx?-)?(?:small|large)|medium|smaller|larger|[.\d]+(?:\%|in|[cem]m|ex|p[ctx]))(?:\s*\/\s*(normal|[.\d]+(?:\%|in|[cem]m|ex|p[ctx])))?\s*([-,\'\"\sa-z]+?)\s*$/i;
+        var fontPart = regex.exec( this.font );
+        var data = {
+            style : fontPart[1] || 'normal',
+            size : fontPart[4] || '10px',
+            family : fontPart[6] || 'sans-serif',
+            weight: fontPart[3] || 'normal',
+            decoration : fontPart[2] || 'normal',
+            href : null
+        };
+
+        //canvas doesn't support underline natively, but we can pass this attribute
+        if(this.__fontUnderline === "underline") {
+            data.decoration = "underline";
+        }
+
+        //canvas also doesn't support linking, but we can pass this as well
+        if(this.__fontHref) {
+            data.href = this.__fontHref;
+        }
+
+        return data;
+    };
+
+    /**
+     * Helper to link text fragments
+     * @param font
+     * @param element
+     * @return {*}
+     * @private
+     */
+    ctx.prototype.__wrapTextLink = function(font, element) {
+        if(font.href) {
+            var a = this.__createElement("a");
+            a.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", font.href);
+            a.appendChild(element);
+            return a;
+        }
+        return element;
+    };
+
+    /**
+     * Fills or strokes text
+     * @param text
+     * @param x
+     * @param y
+     * @param action - stroke or fill
+     * @private
+     */
+    ctx.prototype.__applyText = function(text, x, y, action) {
+        var font = this.__parseFont(),
+            parent = this.__closestGroupOrSvg(),
+            textElement = this.__createElement("text", {
+                "font-family" : font.family,
+                "font-size" : font.size,
+                "font-style" : font.style,
+                "font-weight" : font.weight,
+                "text-decoration" : font.decoration,
+                "x" : x,
+                "y" : y,
+                "text-anchor": getTextAnchor(this.textAlign),
+                "dominant-baseline": getDominantBaseline(this.textBaseline)
+            }, true);
+
+        textElement.appendChild(this.__document.createTextNode(text));
+        this.__currentElement = textElement;
+        this.__applyStyleToCurrentElement(action);
+        parent.appendChild(this.__wrapTextLink(font,textElement));
+    };
+
+    /**
+     * Creates a text element
+     * @param text
+     * @param x
+     * @param y
+     */
+    ctx.prototype.fillText = function(text, x, y){
+        this.__applyText(text, x, y, "fill");
+    };
+
+    /**
+     * Strokes text
+     * @param text
+     * @param x
+     * @param y
+     */
+    ctx.prototype.strokeText = function(text, x, y){
+        this.__applyText(text, x, y, "stroke");
+    };
+
+    /**
+     * No need to implement this for svg.
+     * @param text
+     * @return {TextMetrics}
+     */
+    ctx.prototype.measureText = function(text){
+        this.__ctx.font = this.font;
+        return this.__ctx.measureText(text);
+    };
+
+    /**
+     *  Arc command!
+     */
+    ctx.prototype.arc = function(x, y, radius, startAngle, endAngle, counterClockwise) {
+        // in canvas no circle is drawn if no angle is provided.
+        if (startAngle === endAngle) {
+            return;
+        }
+        startAngle = startAngle % (2*Math.PI);
+        endAngle = endAngle % (2*Math.PI);
+        if(startAngle === endAngle) {
+            //circle time! subtract some of the angle so svg is happy (svg elliptical arc can't draw a full circle)
+            endAngle = ((endAngle + (2*Math.PI)) - 0.001 * (counterClockwise ? -1 : 1)) % (2*Math.PI);
+        }
+        var endX = x+radius*Math.cos(endAngle),
+            endY = y+radius*Math.sin(endAngle),
+            startX = x+radius*Math.cos(startAngle),
+            startY = y+radius*Math.sin(startAngle),
+            sweepFlag = counterClockwise ? 0 : 1,
+            largeArcFlag = 0,
+            diff = endAngle - startAngle;
+
+        // https://github.com/gliffy/canvas2svg/issues/4
+        if(diff < 0) {
+            diff += 2*Math.PI;
+        }
+
+        if(counterClockwise) {
+            largeArcFlag = diff > Math.PI ? 0 : 1;
+        } else {
+            largeArcFlag = diff > Math.PI ? 1 : 0;
+        }
+
+        this.lineTo(startX, startY);
+        this.__addPathCommand(format("A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}",
+            {rx:radius, ry:radius, xAxisRotation:0, largeArcFlag:largeArcFlag, sweepFlag:sweepFlag, endX:endX, endY:endY}));
+
+        this.__currentPosition = {x: endX, y: endY};
+    };
+
+    /**
+     * Generates a ClipPath from the clip command.
+     */
+    ctx.prototype.clip = function(){
+        var group = this.__closestGroupOrSvg(),
+            clipPath = this.__createElement("clipPath"),
+            id =  randomString(this.__ids),
+            newGroup = this.__createElement("g");
+
+        this.__applyCurrentDefaultPath();
+        group.removeChild(this.__currentElement);
+        clipPath.setAttribute("id", id);
+        clipPath.appendChild(this.__currentElement);
+
+        this.__defs.appendChild(clipPath);
+
+        //set the clip path to this group
+        group.setAttribute("clip-path", format("url(#{id})", {id:id}));
+
+        //clip paths can be scaled and transformed, we need to add another wrapper group to avoid later transformations
+        // to this path
+        group.appendChild(newGroup);
+
+        this.__currentElement = newGroup;
+
+    };
+
+    /**
+     * Draws a canvas, image or mock context to this canvas.
+     * Note that all svg dom manipulation uses node.childNodes rather than node.children for IE support.
+     * http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-drawimage
+     */
+    ctx.prototype.drawImage = function(){
+        //convert arguments to a real array
+        var args = Array.prototype.slice.call(arguments),
+            image=args[0],
+            dx, dy, dw, dh, sx=0, sy=0, sw, sh, parent, svg, defs, group,
+            currentElement, svgImage, canvas, context, id;
+
+        if(args.length === 3) {
+            dx = args[1];
+            dy = args[2];
+            sw = image.width;
+            sh = image.height;
+            dw = sw;
+            dh = sh;
+        } else if(args.length === 5) {
+            dx = args[1];
+            dy = args[2];
+            dw = args[3];
+            dh = args[4];
+            sw = image.width;
+            sh = image.height;
+        } else if(args.length === 9) {
+            sx = args[1];
+            sy = args[2];
+            sw = args[3];
+            sh = args[4];
+            dx = args[5];
+            dy = args[6];
+            dw = args[7];
+            dh = args[8];
+        } else {
+            throw new Error("Inavlid number of arguments passed to drawImage: " + arguments.length);
+        }
+
+        parent = this.__closestGroupOrSvg();
+        currentElement = this.__currentElement;
+        var translateDirective = "translate(" + dx + ", " + dy + ")";
+        if(image instanceof ctx) {
+            //canvas2svg mock canvas context. In the future we may want to clone nodes instead.
+            //also I'm currently ignoring dw, dh, sw, sh, sx, sy for a mock context.
+            svg = image.getSvg().cloneNode(true);
+            if (svg.childNodes && svg.childNodes.length > 1) {
+                defs = svg.childNodes[0];
+                while(defs.childNodes.length) {
+                    id = defs.childNodes[0].getAttribute("id");
+                    this.__ids[id] = id;
+                    this.__defs.appendChild(defs.childNodes[0]);
+                }
+                group = svg.childNodes[1];
+                if (group) {
+                    //save original transform
+                    var originTransform = group.getAttribute("transform");
+                    var transformDirective;
+                    if (originTransform) {
+                        transformDirective = originTransform+" "+translateDirective;
+                    } else {
+                        transformDirective = translateDirective;
+                    }
+                    group.setAttribute("transform", transformDirective);
+                    parent.appendChild(group);
+                }
+            }
+        } else if(image.nodeName === "CANVAS" || image.nodeName === "IMG") {
+            //canvas or image
+            svgImage = this.__createElement("image");
+            svgImage.setAttribute("width", dw);
+            svgImage.setAttribute("height", dh);
+            svgImage.setAttribute("preserveAspectRatio", "none");
+
+            if(sx || sy || sw !== image.width || sh !== image.height) {
+                //crop the image using a temporary canvas
+                canvas = this.__document.createElement("canvas");
+                canvas.width = dw;
+                canvas.height = dh;
+                context = canvas.getContext("2d");
+                context.drawImage(image, sx, sy, sw, sh, 0, 0, dw, dh);
+                image = canvas;
+            }
+            svgImage.setAttribute("transform", translateDirective);
+            svgImage.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href",
+                image.nodeName === "CANVAS" ? image.toDataURL() : image.getAttribute("src"));
+            parent.appendChild(svgImage);
+        }
+    };
+
+    /**
+     * Generates a pattern tag
+     */
+    ctx.prototype.createPattern = function(image, repetition){
+        var pattern = this.__document.createElementNS("http://www.w3.org/2000/svg", "pattern"), id = randomString(this.__ids),
+            img;
+        pattern.setAttribute("id", id);
+        pattern.setAttribute("width", image.width);
+        pattern.setAttribute("height", image.height);
+        if(image.nodeName === "CANVAS" || image.nodeName === "IMG") {
+            img = this.__document.createElementNS("http://www.w3.org/2000/svg", "image");
+            img.setAttribute("width", image.width);
+            img.setAttribute("height", image.height);
+            img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href",
+                image.nodeName === "CANVAS" ? image.toDataURL() : image.getAttribute("src"));
+            pattern.appendChild(img);
+            this.__defs.appendChild(pattern);
+        } else if(image instanceof ctx) {
+            pattern.appendChild(image.__root.childNodes[1]);
+            this.__defs.appendChild(pattern);
+        }
+        return new CanvasPattern(pattern, this);
+    };
+
+    ctx.prototype.setLineDash = function(dashArray) {
+        if (dashArray && dashArray.length > 0) {
+            this.lineDash = dashArray.join(",");
+        } else {
+            this.lineDash = null;
+        }
+    };
+
+    /**
+     * Not yet implemented
+     */
+    ctx.prototype.drawFocusRing = function(){};
+    ctx.prototype.createImageData = function(){};
+    ctx.prototype.getImageData = function(){};
+    ctx.prototype.putImageData = function(){};
+    ctx.prototype.globalCompositeOperation = function(){};
+    ctx.prototype.setTransform = function(){};
+
+    //add options for alternative namespace
+    if (typeof window === "object") {
+        window.C2S = ctx;
+    }
+
+    // CommonJS/Browserify
+    if (typeof module === "object" && typeof module.exports === "object") {
+        module.exports = ctx;
+    }
+
+}());

custom_nodes/ComfyUI-Custom-Scripts/web/js/autocompleter.js

@@ -0,0 +1,602 @@
+import { app } from "../../../scripts/app.js";
+import { ComfyWidgets } from "../../../scripts/widgets.js";
+import { api } from "../../../scripts/api.js";
+import { $el, ComfyDialog } from "../../../scripts/ui.js";
+import { TextAreaAutoComplete } from "./common/autocomplete.js";
+import { ModelInfoDialog } from "./common/modelInfoDialog.js";
+import { LoraInfoDialog } from "./modelInfo.js";
+
+function parseCSV(csvText) {
+	const rows = [];
+	const delimiter = ",";
+	const quote = '"';
+	let currentField = "";
+	let inQuotedField = false;
+
+	function pushField() {
+		rows[rows.length - 1].push(currentField);
+		currentField = "";
+		inQuotedField = false;
+	}
+
+	rows.push([]); // Initialize the first row
+
+	for (let i = 0; i < csvText.length; i++) {
+		const char = csvText[i];
+		const nextChar = csvText[i + 1];
+
+		// Special handling for backslash escaped quotes
+		if (char === "\\" && nextChar === quote) {
+			currentField += quote;
+			i++;
+		}
+
+		if (!inQuotedField) {
+			if (char === quote) {
+				inQuotedField = true;
+			} else if (char === delimiter) {
+				pushField();
+			} else if (char === "\r" || char === "\n" || i === csvText.length - 1) {
+				pushField();
+				if (nextChar === "\n") {
+					i++; // Handle Windows line endings (\r\n)
+				}
+				rows.push([]); // Start a new row
+			} else {
+				currentField += char;
+			}
+		} else {
+			if (char === quote && nextChar === quote) {
+				currentField += quote;
+				i++; // Skip the next quote
+			} else if (char === quote) {
+				inQuotedField = false;
+			} else if (char === "\r" || char === "\n" || i === csvText.length - 1) {
+				// Dont allow new lines in quoted text, assume its wrong
+				const parsed = parseCSV(currentField);
+				rows.pop();
+				rows.push(...parsed);
+				inQuotedField = false;
+				currentField = "";
+				rows.push([]);
+			} else {
+				currentField += char;
+			}
+		}
+	}
+
+	if (currentField || csvText[csvText.length - 1] === ",") {
+		pushField();
+	}
+
+	// Remove the last row if it's empty
+	if (rows[rows.length - 1].length === 0) {
+		rows.pop();
+	}
+
+	return rows;
+}
+
+async function getCustomWords() {
+	const resp = await api.fetchApi("/pysssss/autocomplete", { cache: "no-store" });
+	if (resp.status === 200) {
+		return await resp.text();
+	}
+	return undefined;
+}
+
+async function addCustomWords(text) {
+	if (!text) {
+		text = await getCustomWords();
+	}
+	if (text) {
+		TextAreaAutoComplete.updateWords(
+			"pysssss.customwords",
+			parseCSV(text).reduce((p, n) => {
+				let text;
+				let priority;
+				let value;
+				let num;
+				switch (n.length) {
+					case 0:
+						return;
+					case 1:
+						// Single word
+						text = n[0];
+						break;
+					case 2:
+						// Word,[priority|alias]
+						num = +n[1];
+						if (isNaN(num)) {
+							text = n[0] + "🔄️" + n[1];
+							value = n[0];
+						} else {
+							text = n[0];
+							priority = num;
+						}
+						break;
+					case 4:
+						// a1111 csv format?
+						value = n[0];
+						priority = +n[2];
+						const aliases = n[3]?.trim();
+						if (aliases && aliases !== "null") { // Weird null in an example csv, maybe they are JSON.parsing the last column?
+							const split = aliases.split(",");
+							for (const text of split) {
+								p[text] = { text, priority, value };
+							}
+						}
+						text = value;
+						break;
+					default:
+						// Word,alias,priority
+						text = n[1];
+						value = n[0];
+						priority = +n[2];
+						break;
+				}
+				p[text] = { text, priority, value };
+				return p;
+			}, {})
+		);
+	}
+}
+
+function toggleLoras() {
+	[TextAreaAutoComplete.globalWords, TextAreaAutoComplete.globalWordsExclLoras] = [
+		TextAreaAutoComplete.globalWordsExclLoras,
+		TextAreaAutoComplete.globalWords,
+	];
+}
+
+class EmbeddingInfoDialog extends ModelInfoDialog {
+	async addInfo() {
+		super.addInfo();
+		const info = await this.addCivitaiInfo();
+		if (info) {
+			$el("div", {
+				parent: this.content,
+				innerHTML: info.description,
+				style: {
+					maxHeight: "250px",
+					overflow: "auto",
+				},
+			});
+		}
+	}
+}
+
+class CustomWordsDialog extends ComfyDialog {
+	async show() {
+		const text = await getCustomWords();
+		this.words = $el("textarea", {
+			textContent: text,
+			style: {
+				width: "70vw",
+				height: "70vh",
+			},
+		});
+
+		const input = $el("input", {
+			style: {
+				flex: "auto",
+			},
+			value:
+				"https://gist.githubusercontent.com/pythongosssss/1d3efa6050356a08cea975183088159a/raw/a18fb2f94f9156cf4476b0c24a09544d6c0baec6/danbooru-tags.txt",
+		});
+
+		super.show(
+			$el(
+				"div",
+				{
+					style: {
+						display: "flex",
+						flexDirection: "column",
+						overflow: "hidden",
+						maxHeight: "100%",
+					},
+				},
+				[
+					$el("h2", {
+						textContent: "Custom Autocomplete Words",
+						style: {
+							color: "#fff",
+							marginTop: 0,
+							textAlign: "center",
+							fontFamily: "sans-serif",
+						},
+					}),
+					$el(
+						"div",
+						{
+							style: {
+								color: "#fff",
+								fontFamily: "sans-serif",
+								display: "flex",
+								alignItems: "center",
+								gap: "5px",
+							},
+						},
+						[
+							$el("label", { textContent: "Load Custom List: " }),
+							input,
+							$el("button", {
+								textContent: "Load",
+								onclick: async () => {
+									try {
+										const res = await fetch(input.value);
+										if (res.status !== 200) {
+											throw new Error("Error loading: " + res.status + " " + res.statusText);
+										}
+										this.words.value = await res.text();
+									} catch (error) {
+										alert("Error loading custom list, try manually copy + pasting the list");
+									}
+								},
+							}),
+						]
+					),
+					this.words,
+				]
+			)
+		);
+	}
+
+	createButtons() {
+		const btns = super.createButtons();
+		const save = $el("button", {
+			type: "button",
+			textContent: "Save",
+			onclick: async (e) => {
+				try {
+					const res = await api.fetchApi("/pysssss/autocomplete", { method: "POST", body: this.words.value });
+					if (res.status !== 200) {
+						throw new Error("Error saving: " + res.status + " " + res.statusText);
+					}
+					save.textContent = "Saved!";
+					addCustomWords(this.words.value);
+					setTimeout(() => {
+						save.textContent = "Save";
+					}, 500);
+				} catch (error) {
+					alert("Error saving word list!");
+					console.error(error);
+				}
+			},
+		});
+
+		btns.unshift(save);
+		return btns;
+	}
+}
+
+const id = "pysssss.AutoCompleter";
+
+app.registerExtension({
+	name: id,
+	init() {
+		const STRING = ComfyWidgets.STRING;
+		const SKIP_WIDGETS = new Set(["ttN xyPlot.x_values", "ttN xyPlot.y_values"]);
+		ComfyWidgets.STRING = function (node, inputName, inputData) {
+			const r = STRING.apply(this, arguments);
+
+			if (inputData[1]?.multiline) {
+				// Disabled on this input
+				const config = inputData[1]?.["pysssss.autocomplete"];
+				if (config === false) return r;
+
+				// In list of widgets to skip
+				const id = `${node.comfyClass}.${inputName}`;
+				if (SKIP_WIDGETS.has(id)) return r;
+
+				let words;
+				let separator;
+				if (typeof config === "object") {
+					separator = config.separator;
+					words = {};
+					if (config.words) {
+						// Custom wordlist, this will have been registered on setup
+						Object.assign(words, TextAreaAutoComplete.groups[node.comfyClass + "." + inputName] ?? {});
+					}
+
+					for (const item of config.groups ?? []) {
+						if (item === "*") {
+							// This widget wants all global words included
+							Object.assign(words, TextAreaAutoComplete.globalWords);
+						} else {
+							// This widget wants a specific group included
+							Object.assign(words, TextAreaAutoComplete.groups[item] ?? {});
+						}
+					}
+				}
+
+				new TextAreaAutoComplete(r.widget.inputEl, words, separator);
+			}
+
+			return r;
+		};
+
+		TextAreaAutoComplete.globalSeparator = localStorage.getItem(id + ".AutoSeparate") ?? ", ";
+		const enabledSetting = app.ui.settings.addSetting({
+			id,
+			name: "🐍 Text Autocomplete",
+			defaultValue: true,
+			type: (name, setter, value) => {
+				return $el("tr", [
+					$el("td", [
+						$el("label", {
+							for: id.replaceAll(".", "-"),
+							textContent: name,
+						}),
+					]),
+					$el("td", [
+						$el(
+							"label",
+							{
+								textContent: "Enabled ",
+								style: {
+									display: "block",
+								},
+							},
+							[
+								$el("input", {
+									id: id.replaceAll(".", "-"),
+									type: "checkbox",
+									checked: value,
+									onchange: (event) => {
+										const checked = !!event.target.checked;
+										TextAreaAutoComplete.enabled = checked;
+										setter(checked);
+									},
+								}),
+							]
+						),
+						$el(
+							"label.comfy-tooltip-indicator",
+							{
+								title: "This requires other ComfyUI nodes/extensions that support using LoRAs in the prompt.",
+								textContent: "Loras enabled ",
+								style: {
+									display: "block",
+								},
+							},
+							[
+								$el("input", {
+									type: "checkbox",
+									checked: !!TextAreaAutoComplete.lorasEnabled,
+									onchange: (event) => {
+										const checked = !!event.target.checked;
+										TextAreaAutoComplete.lorasEnabled = checked;
+										toggleLoras();
+										localStorage.setItem(id + ".ShowLoras", TextAreaAutoComplete.lorasEnabled);
+									},
+								}),
+							]
+						),
+						$el(
+							"label",
+							{
+								textContent: "Auto-insert comma ",
+								style: {
+									display: "block",
+								},
+							},
+							[
+								$el("input", {
+									type: "checkbox",
+									checked: !!TextAreaAutoComplete.globalSeparator,
+									onchange: (event) => {
+										const checked = !!event.target.checked;
+										TextAreaAutoComplete.globalSeparator = checked ? ", " : "";
+										localStorage.setItem(id + ".AutoSeparate", TextAreaAutoComplete.globalSeparator);
+									},
+								}),
+							]
+						),
+						$el(
+							"label",
+							{
+								textContent: "Replace _ with space ",
+								style: {
+									display: "block",
+								},
+							},
+							[
+								$el("input", {
+									type: "checkbox",
+									checked: !!TextAreaAutoComplete.replacer,
+									onchange: (event) => {
+										const checked = !!event.target.checked;
+										TextAreaAutoComplete.replacer = checked ? (v) => v.replaceAll("_", " ") : undefined;
+										localStorage.setItem(id + ".ReplaceUnderscore", checked);
+									},
+								}),
+							]
+						),
+						$el(
+							"label",
+							{
+								textContent: "Insert suggestion on: ",
+								style: {
+									display: "block",
+								},
+							},
+							[
+								$el(
+									"label",
+									{
+										textContent: "Tab",
+										style: {
+											display: "block",
+											marginLeft: "20px",
+										},
+									},
+									[
+										$el("input", {
+											type: "checkbox",
+											checked: !!TextAreaAutoComplete.insertOnTab,
+											onchange: (event) => {
+												const checked = !!event.target.checked;
+												TextAreaAutoComplete.insertOnTab = checked;
+												localStorage.setItem(id + ".InsertOnTab", checked);
+											},
+										}),
+									]
+								),
+								$el(
+									"label",
+									{
+										textContent: "Enter",
+										style: {
+											display: "block",
+											marginLeft: "20px",
+										},
+									},
+									[
+										$el("input", {
+											type: "checkbox",
+											checked: !!TextAreaAutoComplete.insertOnEnter,
+											onchange: (event) => {
+												const checked = !!event.target.checked;
+												TextAreaAutoComplete.insertOnEnter = checked;
+												localStorage.setItem(id + ".InsertOnEnter", checked);
+											},
+										}),
+									]
+								),
+							]
+						),
+						$el(
+							"label",
+							{
+								textContent: "Max suggestions: ",
+								style: {
+									display: "block",
+								},
+							},
+							[
+								$el("input", {
+									type: "number",
+									value: +TextAreaAutoComplete.suggestionCount,
+									style: {
+										width: "80px"
+									},
+									onchange: (event) => {
+										const value = +event.target.value;
+										TextAreaAutoComplete.suggestionCount = value;;
+										localStorage.setItem(id + ".SuggestionCount", TextAreaAutoComplete.suggestionCount);
+									},
+								}),
+							]
+						),
+						$el("button", {
+							textContent: "Manage Custom Words",
+							onclick: () => {
+								try {
+									// Try closing old settings window
+									if (typeof app.ui.settings.element?.close === "function") { 
+										app.ui.settings.element.close();
+									}	
+								} catch (error) {
+								}
+								try {
+									// Try closing new vue dialog
+									document.querySelector(".p-dialog-close-button").click();
+								} catch (error) {
+									// Fallback to just hiding the element
+									app.ui.settings.element.style.display = "none";
+								}
+								
+								new CustomWordsDialog().show();
+							},
+							style: {
+								fontSize: "14px",
+								display: "block",
+								marginTop: "5px",
+							},
+						}),
+					]),
+				]);
+			},
+		});
+
+		TextAreaAutoComplete.enabled = enabledSetting.value;
+		TextAreaAutoComplete.replacer = localStorage.getItem(id + ".ReplaceUnderscore") === "true" ? (v) => v.replaceAll("_", " ") : undefined;
+		TextAreaAutoComplete.insertOnTab = localStorage.getItem(id + ".InsertOnTab") !== "false";
+		TextAreaAutoComplete.insertOnEnter = localStorage.getItem(id + ".InsertOnEnter") !== "false";
+		TextAreaAutoComplete.lorasEnabled = localStorage.getItem(id + ".ShowLoras") === "true";
+		TextAreaAutoComplete.suggestionCount = +localStorage.getItem(id + ".SuggestionCount") || 20;
+	},
+	setup() {
+		async function addEmbeddings() {
+			const embeddings = await api.getEmbeddings();
+			const words = {};
+			words["embedding:"] = { text: "embedding:" };
+
+			for (const emb of embeddings) {
+				const v = `embedding:${emb}`;
+				words[v] = {
+					text: v,
+					info: () => new EmbeddingInfoDialog(emb).show("embeddings", emb),
+					use_replacer: false,
+				};
+			}
+
+			TextAreaAutoComplete.updateWords("pysssss.embeddings", words);
+		}
+
+		async function addLoras() {
+			let loras;
+			try {
+				loras = LiteGraph.registered_node_types["LoraLoader"]?.nodeData.input.required.lora_name[0];
+			} catch (error) {}
+
+			if (!loras?.length) {
+				loras = await api.fetchApi("/pysssss/loras", { cache: "no-store" }).then((res) => res.json());
+			}
+
+			const words = {};
+			words["lora:"] = { text: "lora:" };
+
+			for (const lora of loras) {
+				const v = `<lora:${lora}:1.0>`;
+				words[v] = {
+					text: v,
+					info: () => new LoraInfoDialog(lora).show("loras", lora),
+					use_replacer: false,
+				};
+			}
+
+			TextAreaAutoComplete.updateWords("pysssss.loras", words);
+		}
+
+		// store global words with/without loras
+		Promise.all([addEmbeddings(), addCustomWords()])
+			.then(() => {
+				TextAreaAutoComplete.globalWordsExclLoras = Object.assign({}, TextAreaAutoComplete.globalWords);
+			})
+			.then(addLoras)
+			.then(() => {
+				if (!TextAreaAutoComplete.lorasEnabled) {
+					toggleLoras(); // off by default
+				}
+			});
+	},
+	beforeRegisterNodeDef(_, def) {
+		// Process each input to see if there is a custom word list for
+		// { input: { required: { something: ["STRING", { "pysssss.autocomplete": ["groupid", ["custom", "words"] ] }] } } }
+		const inputs = { ...def.input?.required, ...def.input?.optional };
+		for (const input in inputs) {
+			const config = inputs[input][1]?.["pysssss.autocomplete"];
+			if (!config) continue;
+			if (typeof config === "object" && config.words) {
+				const words = {};
+				for (const text of config.words || []) {
+					const obj = typeof text === "string" ? { text } : text;
+					words[obj.text] = obj;
+				}
+				TextAreaAutoComplete.updateWords(def.name + "." + input, words, false);
+			}
+		}
+	},
+});

custom_nodes/ComfyUI-Custom-Scripts/web/js/betterCombos.js

@@ -0,0 +1,370 @@
+import { app } from "../../../scripts/app.js";
+import { ComfyWidgets } from "../../../scripts/widgets.js";
+import { $el } from "../../../scripts/ui.js";
+import { api } from "../../../scripts/api.js";
+
+const CHECKPOINT_LOADER = "CheckpointLoader|pysssss";
+const LORA_LOADER = "LoraLoader|pysssss";
+
+function getType(node) {
+	if (node.comfyClass === CHECKPOINT_LOADER) {
+		return "checkpoints";
+	}
+	return "loras";
+}
+
+app.registerExtension({
+	name: "pysssss.Combo++",
+	init() {
+		$el("style", {
+			textContent: `
+				.litemenu-entry:hover .pysssss-combo-image {
+					display: block;
+				}
+				.pysssss-combo-image {
+					display: none;
+					position: absolute;
+					left: 0;
+					top: 0;
+					transform: translate(-100%, 0);
+					width: 384px;
+					height: 384px;
+					background-size: contain;
+					background-position: top right;
+					background-repeat: no-repeat;
+					filter: brightness(65%);
+				}
+			`,
+			parent: document.body,
+		});
+
+		const submenuSetting = app.ui.settings.addSetting({
+			id: "pysssss.Combo++.Submenu",
+			name: "🐍 Enable submenu in custom nodes",
+			defaultValue: true,
+			type: "boolean",
+		});
+
+		// Ensure hook callbacks are available
+		const getOrSet = (target, name, create) => {
+			if (name in target) return target[name];
+			return (target[name] = create());
+		};
+		const symbol = getOrSet(window, "__pysssss__", () => Symbol("__pysssss__"));
+		const store = getOrSet(window, symbol, () => ({}));
+		const contextMenuHook = getOrSet(store, "contextMenuHook", () => ({}));
+		for (const e of ["ctor", "preAddItem", "addItem"]) {
+			if (!contextMenuHook[e]) {
+				contextMenuHook[e] = [];
+			}
+		}
+		// // Checks if this is a custom combo item
+		const isCustomItem = (value) => value && typeof value === "object" && "image" in value && value.content;
+		// Simple check for what separator to split by
+		const splitBy = (navigator.platform || navigator.userAgent).includes("Win") ? /\/|\\/ : /\//;
+
+		contextMenuHook["ctor"].push(function (values, options) {
+			// Copy the class from the parent so if we are dark we are also dark
+			// this enables the filter box
+			if (options.parentMenu?.options?.className === "dark") {
+				options.className = "dark";
+			}
+		});
+
+		function encodeRFC3986URIComponent(str) {
+			return encodeURIComponent(str).replace(
+				/[!'()*]/g,
+				(c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`,
+			);
+		}
+
+		// After an element is created for an item, add an image if it has one
+		contextMenuHook["addItem"].push(function (el, menu, [name, value, options]) {
+			if (el && isCustomItem(value) && value?.image && !value.submenu) {
+				el.textContent += " *";
+				$el("div.pysssss-combo-image", {
+					parent: el,
+					style: {
+						backgroundImage: `url(/pysssss/view/${encodeRFC3986URIComponent(value.image)})`,
+					},
+				});
+			}
+		});
+
+		function buildMenu(widget, values) {
+			const lookup = {
+				"": { options: [] },
+			};
+
+			// Split paths into menu structure
+			for (const value of values) {
+				const split = value.content.split(splitBy);
+				let path = "";
+				for (let i = 0; i < split.length; i++) {
+					const s = split[i];
+					const last = i === split.length - 1;
+					if (last) {
+						// Leaf node, manually add handler that sets the lora
+						lookup[path].options.push({
+							...value,
+							title: s,
+							callback: () => {
+								widget.value = value;
+								widget.callback(value);
+								app.graph.setDirtyCanvas(true);
+							},
+						});
+					} else {
+						const prevPath = path;
+						path += s + splitBy;
+						if (!lookup[path]) {
+							const sub = {
+								title: s,
+								submenu: {
+									options: [],
+									title: s,
+								},
+							};
+
+							// Add to tree
+							lookup[path] = sub.submenu;
+							lookup[prevPath].options.push(sub);
+						}
+					}
+				}
+			}
+
+			return lookup[""].options;
+		}
+
+		// Override COMBO widgets to patch their values
+		const combo = ComfyWidgets["COMBO"];
+		ComfyWidgets["COMBO"] = function (node, inputName, inputData) {
+			const type = inputData[0];
+			const res = combo.apply(this, arguments);
+			if (isCustomItem(type[0])) {
+				let value = res.widget.value;
+				let values = res.widget.options.values;
+				let menu = null;
+
+				// Override the option values to check if we should render a menu structure
+				Object.defineProperty(res.widget.options, "values", {
+					get() {
+						let v = values;
+
+						if (submenuSetting.value) {
+							if (!menu) {
+								// Only build the menu once
+								menu = buildMenu(res.widget, values);
+							}
+							v = menu;
+						}
+
+						const valuesIncludes = v.includes;
+						v.includes = function (searchElement) {
+							const includesFromMenuItems = function (items) {
+								for (const item of items) {
+									if (includesFromMenuItem(item)) {
+										return true;
+									}
+								}
+								return false;
+							}
+							const includesFromMenuItem = function (item) {
+								if (item.submenu) {
+									return includesFromMenuItems(item.submenu.options)
+								} else {
+									return item.content === searchElement.content;
+								}
+							}
+
+							const includes = valuesIncludes.apply(this, arguments) || includesFromMenuItems(this);
+							return includes;
+						}
+
+						return v;
+					},
+					set(v) {
+						// Options are changing (refresh) so reset the menu so it can be rebuilt if required
+						values = v;
+						menu = null;
+					},
+				});
+
+				Object.defineProperty(res.widget, "value", {
+					get() {
+						// HACK: litegraph supports rendering items with "content" in the menu, but not on the widget
+						// This detects when its being called by the widget drawing and just returns the text
+						// Also uses the content for the same image replacement value
+						if (res.widget) {
+							const stack = new Error().stack;
+							if (stack.includes("drawNodeWidgets") || stack.includes("saveImageExtraOutput")) {
+								return (value || type[0]).content;
+							}
+						}
+						return value;
+					},
+					set(v) {
+						if (v?.submenu) {
+							// Dont allow selection of submenus
+							return;
+						}
+						value = v;
+					},
+				});
+			}
+
+			return res;
+		};
+	},
+	async beforeRegisterNodeDef(nodeType, nodeData, app) {
+		const isCkpt = nodeType.comfyClass === CHECKPOINT_LOADER;
+		const isLora = nodeType.comfyClass === LORA_LOADER;
+		if (isCkpt || isLora) {
+			const onAdded = nodeType.prototype.onAdded;
+			nodeType.prototype.onAdded = function () {
+				onAdded?.apply(this, arguments);
+				const { widget: exampleList } = ComfyWidgets["COMBO"](this, "example", [[""]], app);
+
+				let exampleWidget;
+
+				const get = async (route, suffix) => {
+					const url = encodeURIComponent(`${getType(nodeType)}${suffix || ""}`);
+					return await api.fetchApi(`/pysssss/${route}/${url}`);
+				};
+
+				const getExample = async () => {
+					if (exampleList.value === "[none]") {
+						if (exampleWidget) {
+							exampleWidget.inputEl.remove();
+							exampleWidget = null;
+							this.widgets.length -= 1;
+						}
+						return;
+					}
+
+					const v = this.widgets[0].value.content;
+					const pos = v.lastIndexOf(".");
+					const name = v.substr(0, pos);
+					let exampleName = exampleList.value;
+					let viewPath = `/${name}`;
+					if (exampleName === "notes") {
+						viewPath += ".txt";
+					} else {
+						viewPath += `/${exampleName}`;
+					}
+					const example = await (await get("view", viewPath)).text();
+					if (!exampleWidget) {
+						exampleWidget = ComfyWidgets["STRING"](this, "prompt", ["STRING", { multiline: true }], app).widget;
+						exampleWidget.inputEl.readOnly = true;
+						exampleWidget.inputEl.style.opacity = 0.6;
+					}
+					exampleWidget.value = example;
+				};
+
+				const exampleCb = exampleList.callback;
+				exampleList.callback = function () {
+					getExample();
+					return exampleCb?.apply(this, arguments) ?? exampleList.value;
+				};
+
+
+				const listExamples = async () => {
+					exampleList.disabled = true;
+					exampleList.options.values = ["[none]"];
+					exampleList.value = "[none]";
+					let examples = [];
+					if (this.widgets[0].value?.content) {
+						try {
+							examples = await (await get("examples", `/${this.widgets[0].value.content}`)).json();
+						} catch (error) {}
+					}
+					exampleList.options.values = ["[none]", ...examples];
+					exampleList.value = exampleList.options.values[+!!examples.length];
+					exampleList.callback();
+					exampleList.disabled = !examples.length;
+					app.graph.setDirtyCanvas(true, true);
+				};
+
+				// Expose function to update examples
+				nodeType.prototype["pysssss.updateExamples"] = listExamples;
+
+				const modelWidget = this.widgets[0];
+				const modelCb = modelWidget.callback;
+				let prev = undefined;
+				modelWidget.callback = function () {
+					const ret = modelCb?.apply(this, arguments) ?? modelWidget.value;
+					let v = ret;
+					if (ret?.content) {
+						v = ret.content;
+					}
+					if (prev !== v) {
+						listExamples();
+						prev = v;
+					}
+					return ret;
+				};
+				setTimeout(() => {
+					modelWidget.callback();
+				}, 30);
+			};
+
+			// Prevent adding HIDDEN inputs
+			const addInput = nodeType.prototype.addInput ?? LGraphNode.prototype.addInput;
+			nodeType.prototype.addInput = function (_, type) {
+				if (type === "HIDDEN") return;
+				return addInput.apply(this, arguments);
+			};
+		}
+
+		const getExtraMenuOptions = nodeType.prototype.getExtraMenuOptions;
+		nodeType.prototype.getExtraMenuOptions = function (_, options) {
+			if (this.imgs) {
+				// If this node has images then we add an open in new tab item
+				let img;
+				if (this.imageIndex != null) {
+					// An image is selected so select that
+					img = this.imgs[this.imageIndex];
+				} else if (this.overIndex != null) {
+					// No image is selected but one is hovered
+					img = this.imgs[this.overIndex];
+				}
+				if (img) {
+					const nodes = app.graph._nodes.filter(
+						(n) => n.comfyClass === LORA_LOADER || n.comfyClass === CHECKPOINT_LOADER
+					);
+					if (nodes.length) {
+						options.unshift({
+							content: "Save as Preview",
+							submenu: {
+								options: nodes.map((n) => ({
+									content: n.widgets[0].value.content,
+									callback: async () => {
+										const url = new URL(img.src);
+										const { image } = await api.fetchApi(
+											"/pysssss/save/" + encodeURIComponent(`${getType(n)}/${n.widgets[0].value.content}`),
+											{
+												method: "POST",
+												body: JSON.stringify({
+													filename: url.searchParams.get("filename"),
+													subfolder: url.searchParams.get("subfolder"),
+													type: url.searchParams.get("type"),
+												}),
+												headers: {
+													"content-type": "application/json",
+												},
+											}
+										);
+										n.widgets[0].value.image = image;
+										app.refreshComboInNodes();
+									},
+								})),
+							},
+						});
+					}
+				}
+			}
+			return getExtraMenuOptions?.apply(this, arguments);
+		};
+	},
+});

custom_nodes/ComfyUI-Custom-Scripts/web/js/common/autocomplete.css

@@ -0,0 +1,62 @@
+.pysssss-autocomplete {
+	color: var(--descrip-text);
+	background-color: var(--comfy-menu-bg);
+	position: absolute;
+	font-family: sans-serif;
+	box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
+	z-index: 9999;
+	overflow: auto;
+}
+
+.pysssss-autocomplete-item {
+	cursor: pointer;
+	padding: 3px 7px;
+	display: flex;
+	border-left: 3px solid transparent;
+	align-items: center;
+}
+
+.pysssss-autocomplete-item--selected {
+	border-left-color: dodgerblue;
+}
+
+.pysssss-autocomplete-highlight {
+	font-weight: bold;
+	text-decoration: underline;
+	text-decoration-color: dodgerblue;
+}
+
+.pysssss-autocomplete-pill {
+	margin-left: auto;
+	font-size: 10px;
+	color: #fff;
+	padding: 2px 4px 2px 14px;
+	position: relative;
+}
+
+.pysssss-autocomplete-pill::after {
+	content: "";
+	display: block;
+	background: rgba(255, 255, 255, 0.25);
+	width: calc(100% - 10px);
+	height: 100%;
+	position: absolute;
+	left: 10px;
+	top: 0;
+	border-radius: 5px;
+}
+
+.pysssss-autocomplete-pill + .pysssss-autocomplete-pill {
+	margin-left: 0;
+}
+
+.pysssss-autocomplete-item-info {
+	margin-left: auto;
+	transition: filter 0.2s;
+	will-change: filter;
+	text-decoration: none;
+	padding-left: 10px;
+}
+.pysssss-autocomplete-item-info:hover {
+	filter: invert(1);
+}

custom_nodes/ComfyUI-Custom-Scripts/web/js/common/autocomplete.js

@@ -0,0 +1,692 @@
+import { $el } from "../../../../scripts/ui.js";
+import { addStylesheet } from "./utils.js";
+
+addStylesheet(import.meta.url);
+
+/*
+    https://github.com/component/textarea-caret-position
+    The MIT License (MIT)
+
+    Copyright (c) 2015 Jonathan Ong [email protected]
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+const getCaretCoordinates = (function () {
+	// We'll copy the properties below into the mirror div.
+	// Note that some browsers, such as Firefox, do not concatenate properties
+	// into their shorthand (e.g. padding-top, padding-bottom etc. -> padding),
+	// so we have to list every single property explicitly.
+	var properties = [
+		"direction", // RTL support
+		"boxSizing",
+		"width", // on Chrome and IE, exclude the scrollbar, so the mirror div wraps exactly as the textarea does
+		"height",
+		"overflowX",
+		"overflowY", // copy the scrollbar for IE
+
+		"borderTopWidth",
+		"borderRightWidth",
+		"borderBottomWidth",
+		"borderLeftWidth",
+		"borderStyle",
+
+		"paddingTop",
+		"paddingRight",
+		"paddingBottom",
+		"paddingLeft",
+
+		// https://developer.mozilla.org/en-US/docs/Web/CSS/font
+		"fontStyle",
+		"fontVariant",
+		"fontWeight",
+		"fontStretch",
+		"fontSize",
+		"fontSizeAdjust",
+		"lineHeight",
+		"fontFamily",
+
+		"textAlign",
+		"textTransform",
+		"textIndent",
+		"textDecoration", // might not make a difference, but better be safe
+
+		"letterSpacing",
+		"wordSpacing",
+
+		"tabSize",
+		"MozTabSize",
+	];
+
+	var isBrowser = typeof window !== "undefined";
+	var isFirefox = isBrowser && window.mozInnerScreenX != null;
+
+	return function getCaretCoordinates(element, position, options) {
+		if (!isBrowser) {
+			throw new Error("textarea-caret-position#getCaretCoordinates should only be called in a browser");
+		}
+
+		var debug = (options && options.debug) || false;
+		if (debug) {
+			var el = document.querySelector("#input-textarea-caret-position-mirror-div");
+			if (el) el.parentNode.removeChild(el);
+		}
+
+		// The mirror div will replicate the textarea's style
+		var div = document.createElement("div");
+		div.id = "input-textarea-caret-position-mirror-div";
+		document.body.appendChild(div);
+
+		var style = div.style;
+		var computed = window.getComputedStyle ? window.getComputedStyle(element) : element.currentStyle; // currentStyle for IE < 9
+		var isInput = element.nodeName === "INPUT";
+
+		// Default textarea styles
+		style.whiteSpace = "pre-wrap";
+		if (!isInput) style.wordWrap = "break-word"; // only for textarea-s
+
+		// Position off-screen
+		style.position = "absolute"; // required to return coordinates properly
+		if (!debug) style.visibility = "hidden"; // not 'display: none' because we want rendering
+
+		// Transfer the element's properties to the div
+		properties.forEach(function (prop) {
+			if (isInput && prop === "lineHeight") {
+				// Special case for <input>s because text is rendered centered and line height may be != height
+				if (computed.boxSizing === "border-box") {
+					var height = parseInt(computed.height);
+					var outerHeight =
+						parseInt(computed.paddingTop) +
+						parseInt(computed.paddingBottom) +
+						parseInt(computed.borderTopWidth) +
+						parseInt(computed.borderBottomWidth);
+					var targetHeight = outerHeight + parseInt(computed.lineHeight);
+					if (height > targetHeight) {
+						style.lineHeight = height - outerHeight + "px";
+					} else if (height === targetHeight) {
+						style.lineHeight = computed.lineHeight;
+					} else {
+						style.lineHeight = 0;
+					}
+				} else {
+					style.lineHeight = computed.height;
+				}
+			} else {
+				style[prop] = computed[prop];
+			}
+		});
+
+		if (isFirefox) {
+			// Firefox lies about the overflow property for textareas: https://bugzilla.mozilla.org/show_bug.cgi?id=984275
+			if (element.scrollHeight > parseInt(computed.height)) style.overflowY = "scroll";
+		} else {
+			style.overflow = "hidden"; // for Chrome to not render a scrollbar; IE keeps overflowY = 'scroll'
+		}
+
+		div.textContent = element.value.substring(0, position);
+		// The second special handling for input type="text" vs textarea:
+		// spaces need to be replaced with non-breaking spaces - http://stackoverflow.com/a/13402035/1269037
+		if (isInput) div.textContent = div.textContent.replace(/\s/g, "\u00a0");
+
+		var span = document.createElement("span");
+		// Wrapping must be replicated *exactly*, including when a long word gets
+		// onto the next line, with whitespace at the end of the line before (#7).
+		// The  *only* reliable way to do that is to copy the *entire* rest of the
+		// textarea's content into the <span> created at the caret position.
+		// For inputs, just '.' would be enough, but no need to bother.
+		span.textContent = element.value.substring(position) || "."; // || because a completely empty faux span doesn't render at all
+		div.appendChild(span);
+
+		var coordinates = {
+			top: span.offsetTop + parseInt(computed["borderTopWidth"]),
+			left: span.offsetLeft + parseInt(computed["borderLeftWidth"]),
+			height: parseInt(computed["lineHeight"]),
+		};
+
+		if (debug) {
+			span.style.backgroundColor = "#aaa";
+		} else {
+			document.body.removeChild(div);
+		}
+
+		return coordinates;
+	};
+})();
+
+/*
+    Key functions from:
+    https://github.com/yuku/textcomplete
+    © Yuku Takahashi - This software is licensed under the MIT license.
+
+    The MIT License (MIT)
+
+    Copyright (c) 2015 Jonathan Ong [email protected]
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+const CHAR_CODE_ZERO = "0".charCodeAt(0);
+const CHAR_CODE_NINE = "9".charCodeAt(0);
+
+class TextAreaCaretHelper {
+	constructor(el, getScale) {
+		this.el = el;
+		this.getScale = getScale;
+	}
+
+	#calculateElementOffset() {
+		const rect = this.el.getBoundingClientRect();
+		const owner = this.el.ownerDocument;
+		if (owner == null) {
+			throw new Error("Given element does not belong to document");
+		}
+		const { defaultView, documentElement } = owner;
+		if (defaultView == null) {
+			throw new Error("Given element does not belong to window");
+		}
+		const offset = {
+			top: rect.top + defaultView.pageYOffset,
+			left: rect.left + defaultView.pageXOffset,
+		};
+		if (documentElement) {
+			offset.top -= documentElement.clientTop;
+			offset.left -= documentElement.clientLeft;
+		}
+		return offset;
+	}
+
+	#isDigit(charCode) {
+		return CHAR_CODE_ZERO <= charCode && charCode <= CHAR_CODE_NINE;
+	}
+
+	#getLineHeightPx() {
+		const computedStyle = getComputedStyle(this.el);
+		const lineHeight = computedStyle.lineHeight;
+		// If the char code starts with a digit, it is either a value in pixels,
+		// or unitless, as per:
+		// https://drafts.csswg.org/css2/visudet.html#propdef-line-height
+		// https://drafts.csswg.org/css2/cascade.html#computed-value
+		if (this.#isDigit(lineHeight.charCodeAt(0))) {
+			const floatLineHeight = parseFloat(lineHeight);
+			// In real browsers the value is *always* in pixels, even for unit-less
+			// line-heights. However, we still check as per the spec.
+			return this.#isDigit(lineHeight.charCodeAt(lineHeight.length - 1))
+				? floatLineHeight * parseFloat(computedStyle.fontSize)
+				: floatLineHeight;
+		}
+		// Otherwise, the value is "normal".
+		// If the line-height is "normal", calculate by font-size
+		return this.#calculateLineHeightPx(this.el.nodeName, computedStyle);
+	}
+
+	/**
+	 * Returns calculated line-height of the given node in pixels.
+	 */
+	#calculateLineHeightPx(nodeName, computedStyle) {
+		const body = document.body;
+		if (!body) return 0;
+
+		const tempNode = document.createElement(nodeName);
+		tempNode.innerHTML = "&nbsp;";
+		Object.assign(tempNode.style, {
+			fontSize: computedStyle.fontSize,
+			fontFamily: computedStyle.fontFamily,
+			padding: "0",
+			position: "absolute",
+		});
+		body.appendChild(tempNode);
+
+		// Make sure textarea has only 1 row
+		if (tempNode instanceof HTMLTextAreaElement) {
+			tempNode.rows = 1;
+		}
+
+		// Assume the height of the element is the line-height
+		const height = tempNode.offsetHeight;
+		body.removeChild(tempNode);
+
+		return height;
+	}
+
+	getCursorOffset() {
+		const scale = this.getScale();
+		const elOffset = this.#calculateElementOffset();
+		const elScroll = this.#getElScroll();
+		const cursorPosition = this.#getCursorPosition();
+		const lineHeight = this.#getLineHeightPx();
+		const top = elOffset.top - (elScroll.top * scale) + (cursorPosition.top + lineHeight) * scale;
+		const left = elOffset.left - elScroll.left + cursorPosition.left;
+		const clientTop = this.el.getBoundingClientRect().top;
+		if (this.el.dir !== "rtl") {
+			return { top, left, lineHeight, clientTop };
+		} else {
+			const right = document.documentElement ? document.documentElement.clientWidth - left : 0;
+			return { top, right, lineHeight, clientTop };
+		}
+	}
+
+	#getElScroll() {
+		return { top: this.el.scrollTop, left: this.el.scrollLeft };
+	}
+
+	#getCursorPosition() {
+		return getCaretCoordinates(this.el, this.el.selectionEnd);
+	}
+
+	getBeforeCursor() {
+		return this.el.selectionStart !== this.el.selectionEnd ? null : this.el.value.substring(0, this.el.selectionEnd);
+	}
+
+	getAfterCursor() {
+		return this.el.value.substring(this.el.selectionEnd);
+	}
+
+	insertAtCursor(value, offset, finalOffset) {
+		if (this.el.selectionStart != null) {
+			const startPos = this.el.selectionStart;
+			const endPos = this.el.selectionEnd;
+
+			// Move selection to beginning of offset
+			this.el.selectionStart = this.el.selectionStart + offset;
+
+			// Using execCommand to support undo, but since it's officially 
+			// 'deprecated' we need a backup solution, but it won't support undo :(
+			let pasted = true;
+			try {
+				if (!document.execCommand("insertText", false, value)) {
+					pasted = false;
+				}
+			} catch (e) {
+				console.error("Error caught during execCommand:", e);
+				pasted = false;
+			}
+
+			if (!pasted) {
+				console.error(
+					"execCommand unsuccessful; not supported. Adding text manually, no undo support.");
+				textarea.setRangeText(modifiedText, this.el.selectionStart, this.el.selectionEnd, 'end');
+			}
+
+			this.el.selectionEnd = this.el.selectionStart = startPos + value.length + offset + (finalOffset ?? 0);
+		} else {
+			// Using execCommand to support undo, but since it's officially 
+			// 'deprecated' we need a backup solution, but it won't support undo :(
+			let pasted = true;
+			try {
+				if (!document.execCommand("insertText", false, value)) {
+					pasted = false;
+				}
+			} catch (e) {
+				console.error("Error caught during execCommand:", e);
+				pasted = false;
+			}
+
+			if (!pasted) {
+				console.error(
+					"execCommand unsuccessful; not supported. Adding text manually, no undo support.");
+				this.el.value += value;
+			}
+		}
+	}
+}
+
+/*********************/
+
+/**
+ * @typedef {{
+ * 	text: string,
+ * 	priority?: number,
+ * 	info?: Function,
+ * 	hint?: string,
+ *  showValue?: boolean,
+ *  caretOffset?: number
+ * }} AutoCompleteEntry
+ */
+export class TextAreaAutoComplete {
+	static globalSeparator = "";
+	static enabled = true;
+	static insertOnTab = true;
+	static insertOnEnter = true;
+	static replacer = undefined;
+	static lorasEnabled = false;
+	static suggestionCount = 20;
+
+	/** @type {Record<string, Record<string, AutoCompleteEntry>>} */
+	static groups = {};
+	/** @type {Set<string>} */
+	static globalGroups = new Set();
+	/** @type {Record<string, AutoCompleteEntry>} */
+	static globalWords = {};
+	/** @type {Record<string, AutoCompleteEntry>} */
+	static globalWordsExclLoras = {};
+
+	/** @type {HTMLTextAreaElement} */
+	el;
+
+	/** @type {Record<string, AutoCompleteEntry>} */
+	overrideWords;
+	overrideSeparator = "";
+
+	get words() {
+		return this.overrideWords ?? TextAreaAutoComplete.globalWords;
+	}
+
+	get separator() {
+		return this.overrideSeparator ?? TextAreaAutoComplete.globalSeparator;
+	}
+
+	/**
+	 * @param {HTMLTextAreaElement} el
+	 */
+	constructor(el, words = null, separator = null) {
+		this.el = el;
+		this.helper = new TextAreaCaretHelper(el, () => app.canvas.ds.scale);
+		this.dropdown = $el("div.pysssss-autocomplete");
+		this.overrideWords = words;
+		this.overrideSeparator = separator;
+
+		this.#setup();
+	}
+
+	#setup() {
+		this.el.addEventListener("keydown", this.#keyDown.bind(this));
+		this.el.addEventListener("keypress", this.#keyPress.bind(this));
+		this.el.addEventListener("keyup", this.#keyUp.bind(this));
+		this.el.addEventListener("click", this.#hide.bind(this));
+		this.el.addEventListener("blur", () => setTimeout(() => this.#hide(), 150));
+	}
+
+	/**
+	 * @param {KeyboardEvent} e
+	 */
+	#keyDown(e) {
+		if (!TextAreaAutoComplete.enabled) return;
+
+		if (this.dropdown.parentElement) {
+			// We are visible
+			switch (e.key) {
+				case "ArrowUp":
+					e.preventDefault();
+					if (this.selected.index) {
+						this.#setSelected(this.currentWords[this.selected.index - 1].wordInfo);
+					} else {
+						this.#setSelected(this.currentWords[this.currentWords.length - 1].wordInfo);
+					}
+					break;
+				case "ArrowDown":
+					e.preventDefault();
+					if (this.selected.index === this.currentWords.length - 1) {
+						this.#setSelected(this.currentWords[0].wordInfo);
+					} else {
+						this.#setSelected(this.currentWords[this.selected.index + 1].wordInfo);
+					}
+					break;
+				case "Tab":
+					if (TextAreaAutoComplete.insertOnTab) {
+						this.#insertItem();
+						e.preventDefault();
+					}
+					break;
+			}
+		}
+	}
+
+	/**
+	 * @param {KeyboardEvent} e
+	 */
+	#keyPress(e) {
+		if (!TextAreaAutoComplete.enabled) return;
+		if (this.dropdown.parentElement) {
+			// We are visible
+			switch (e.key) {
+				case "Enter":
+					if (!e.ctrlKey) {
+						if (TextAreaAutoComplete.insertOnEnter) {
+							this.#insertItem();
+							e.preventDefault();
+						}
+					}
+					break;
+			}
+		}
+
+		if (!e.defaultPrevented) {
+			this.#update();
+		}
+	}
+
+	#keyUp(e) {
+		if (!TextAreaAutoComplete.enabled) return;
+		if (this.dropdown.parentElement) {
+			// We are visible
+			switch (e.key) {
+				case "Escape":
+					e.preventDefault();
+					this.#hide();
+					break;
+			}
+		} else if (e.key.length > 1 && e.key != "Delete" && e.key != "Backspace") {
+			return;
+		}
+		if (!e.defaultPrevented) {
+			this.#update();
+		}
+	}
+
+	#setSelected(item) {
+		if (this.selected) {
+			this.selected.el.classList.remove("pysssss-autocomplete-item--selected");
+		}
+
+		this.selected = item;
+		this.selected.el.classList.add("pysssss-autocomplete-item--selected");
+	}
+
+	#insertItem() {
+		if (!this.selected) return;
+		this.selected.el.click();
+	}
+
+	#getFilteredWords(term) {
+		term = term.toLocaleLowerCase();
+
+		const priorityMatches = [];
+		const prefixMatches = [];
+		const includesMatches = [];
+		for (const word of Object.keys(this.words)) {
+			const lowerWord = word.toLocaleLowerCase();
+			if (lowerWord === term) {
+				// Dont include exact matches
+				continue;
+			}
+
+			const pos = lowerWord.indexOf(term);
+			if (pos === -1) {
+				// No match
+				continue;
+			}
+
+			const wordInfo = this.words[word];
+			if (wordInfo.priority) {
+				priorityMatches.push({ pos, wordInfo });
+			} else if (pos) {
+				includesMatches.push({ pos, wordInfo });
+			} else {
+				prefixMatches.push({ pos, wordInfo });
+			}
+		}
+
+		priorityMatches.sort(
+			(a, b) =>
+				b.wordInfo.priority - a.wordInfo.priority ||
+				a.wordInfo.text.length - b.wordInfo.text.length ||
+				a.wordInfo.text.localeCompare(b.wordInfo.text)
+		);
+
+		const top = priorityMatches.length * 0.2;
+		return priorityMatches.slice(0, top).concat(prefixMatches, priorityMatches.slice(top), includesMatches).slice(0, TextAreaAutoComplete.suggestionCount);
+	}
+
+	#update() {
+		let before = this.helper.getBeforeCursor();
+		if (before?.length) {
+			const m = before.match(/([^,;"|{}()\n]+)$/);
+			if (m) {
+				before = m[0]
+					.replace(/^\s+/, "")
+					.replace(/\s/g, "_") || null;
+			} else {
+				before = null;
+			}
+		}
+
+		if (!before) {
+			this.#hide();
+			return;
+		}
+
+		this.currentWords = this.#getFilteredWords(before);
+		if (!this.currentWords.length) {
+			this.#hide();
+			return;
+		}
+
+		this.dropdown.style.display = "";
+
+		let hasSelected = false;
+		const items = this.currentWords.map(({ wordInfo, pos }, i) => {
+			const parts = [
+				$el("span", {
+					textContent: wordInfo.text.substr(0, pos),
+				}),
+				$el("span.pysssss-autocomplete-highlight", {
+					textContent: wordInfo.text.substr(pos, before.length),
+				}),
+				$el("span", {
+					textContent: wordInfo.text.substr(pos + before.length),
+				}),
+			];
+
+			if (wordInfo.hint) {
+				parts.push(
+					$el("span.pysssss-autocomplete-pill", {
+						textContent: wordInfo.hint,
+					})
+				);
+			}
+
+			if (wordInfo.priority) {
+				parts.push(
+					$el("span.pysssss-autocomplete-pill", {
+						textContent: wordInfo.priority,
+					})
+				);
+			}
+
+			if (wordInfo.value && wordInfo.text !== wordInfo.value && wordInfo.showValue !== false) {
+				parts.push(
+					$el("span.pysssss-autocomplete-pill", {
+						textContent: wordInfo.value,
+					})
+				);
+			}
+
+			if (wordInfo.info) {
+				parts.push(
+					$el("a.pysssss-autocomplete-item-info", {
+						textContent: "ℹ️",
+						title: "View info...",
+						onclick: (e) => {
+							e.stopPropagation();
+							wordInfo.info();
+							e.preventDefault();
+						},
+					})
+				);
+			}
+			const item = $el(
+				"div.pysssss-autocomplete-item",
+				{
+				  onclick: () => {
+					this.el.focus();
+					let value = wordInfo.value ?? wordInfo.text;
+					const use_replacer = wordInfo.use_replacer ?? true;
+					if (TextAreaAutoComplete.replacer && use_replacer) {
+					  value = TextAreaAutoComplete.replacer(value);
+					}
+					value = this.#escapeParentheses(value);
+					
+					const afterCursor = this.helper.getAfterCursor();
+					const shouldAddSeparator = !afterCursor.trim().startsWith(this.separator.trim());
+					this.helper.insertAtCursor(
+					  value + (shouldAddSeparator ? this.separator : ''),
+					  -before.length,
+					  wordInfo.caretOffset
+					);			
+					setTimeout(() => {
+					  this.#update();
+					}, 150);
+				  },
+				},
+				parts
+			  );
+
+			if (wordInfo === this.selected) {
+				hasSelected = true;
+			}
+
+			wordInfo.index = i;
+			wordInfo.el = item;
+
+			return item;
+		});
+
+		this.#setSelected(hasSelected ? this.selected : this.currentWords[0].wordInfo);
+		this.dropdown.replaceChildren(...items);
+
+		if (!this.dropdown.parentElement) {
+			document.body.append(this.dropdown);
+		}
+
+		const position = this.helper.getCursorOffset();
+		this.dropdown.style.left = (position.left ?? 0) + "px";
+		this.dropdown.style.top = (position.top ?? 0) + "px";
+		this.dropdown.style.maxHeight = (window.innerHeight - position.top) + "px";
+	}
+
+	#escapeParentheses(text) {
+		return text.replace(/\(/g, '\\(').replace(/\)/g, '\\)');
+	  }
+
+	#hide() {
+		this.selected = null;
+		this.dropdown.remove();
+	}
+
+	static updateWords(id, words, addGlobal = true) {
+		const isUpdate = id in TextAreaAutoComplete.groups;
+		TextAreaAutoComplete.groups[id] = words;
+		if (addGlobal) {
+			TextAreaAutoComplete.globalGroups.add(id);
+		}
+
+		if (isUpdate) {
+			// Remerge all words
+			TextAreaAutoComplete.globalWords = Object.assign(
+				{},
+				...Object.keys(TextAreaAutoComplete.groups)
+					.filter((k) => TextAreaAutoComplete.globalGroups.has(k))
+					.map((k) => TextAreaAutoComplete.groups[k])
+			);
+		} else if (addGlobal) {
+			// Just insert the new words
+			Object.assign(TextAreaAutoComplete.globalWords, words);
+		}
+	}
+}

custom_nodes/ComfyUI-Custom-Scripts/web/js/common/binding.js

@@ -0,0 +1,244 @@
+// @ts-check
+// @ts-ignore
+import { ComfyWidgets } from "../../../../scripts/widgets.js";
+// @ts-ignore
+import { api } from "../../../../scripts/api.js";
+// @ts-ignore
+import { app } from "../../../../scripts/app.js";
+
+const PathHelper = {
+	get(obj, path) {
+		if (typeof path !== "string") {
+			// Hardcoded value
+			return path;
+		}
+
+		if (path[0] === '"' && path[path.length - 1] === '"') {
+			// Hardcoded string
+			return JSON.parse(path);
+		}
+
+		// Evaluate the path
+		path = path.split(".").filter(Boolean);
+		for (const p of path) {
+			const k = isNaN(+p) ? p : +p;
+			obj = obj[k];
+		}
+
+		return obj;
+	},
+	set(obj, path, value) {
+		// https://stackoverflow.com/a/54733755
+		if (Object(obj) !== obj) return obj; // When obj is not an object
+		// If not yet an array, get the keys from the string-path
+		if (!Array.isArray(path)) path = path.toString().match(/[^.[\]]+/g) || [];
+		path.slice(0, -1).reduce(
+			(
+				a,
+				c,
+				i // Iterate all of them except the last one
+			) =>
+				Object(a[c]) === a[c] // Does the key exist and is its value an object?
+					? // Yes: then follow that path
+					  a[c]
+					: // No: create the key. Is the next key a potential array-index?
+					  (a[c] =
+							Math.abs(path[i + 1]) >> 0 === +path[i + 1]
+								? [] // Yes: assign a new array object
+								: {}), // No: assign a new plain object
+			obj
+		)[path[path.length - 1]] = value; // Finally assign the value to the last key
+		return obj; // Return the top-level object to allow chaining
+	},
+};
+
+/***
+	@typedef { {
+		left: string;
+		op: "eq" | "ne",
+		right: string
+	} } IfCondition 
+
+	@typedef { {
+		type: "if",
+		condition: Array<IfCondition>,
+		true?: Array<BindingCallback>,
+		false?: Array<BindingCallback>
+	} } IfCallback
+
+	@typedef { {
+		type: "fetch",
+		url: string,
+		then: Array<BindingCallback>
+	} } FetchCallback 
+
+	@typedef { {
+		type: "set",
+		target: string,
+		value: string
+	} } SetCallback 
+
+	@typedef { {
+		type: "validate-combo",
+	} } ValidateComboCallback 
+
+	@typedef { IfCallback | FetchCallback | SetCallback | ValidateComboCallback } BindingCallback 
+
+	@typedef { {
+		source: string,
+		callback: Array<BindingCallback>
+	} } Binding 
+***/
+
+/**
+ * @param {IfCondition} condition
+ */
+function evaluateCondition(condition, state) {
+	const left = PathHelper.get(state, condition.left);
+	const right = PathHelper.get(state, condition.right);
+
+	let r;
+	if (condition.op === "eq") {
+		r = left === right;
+	} else {
+		r = left !== right;
+	}
+
+	return r;
+}
+
+/**
+ * @type { Record<BindingCallback["type"], (cb: any, state: Record<string, any>) => Promise<void>> }
+ */
+const callbacks = {
+	/**
+	 * @param {IfCallback} cb
+	 */
+	async if(cb, state) {
+		// For now only support ANDs
+		let success = true;
+		for (const condition of cb.condition) {
+			const r = evaluateCondition(condition, state);
+			if (!r) {
+				success = false;
+				break;
+			}
+		}
+
+		for (const m of cb[success + ""] ?? []) {
+			await invokeCallback(m, state);
+		}
+	},
+	/**
+	 * @param {FetchCallback} cb
+	 */
+	async fetch(cb, state) {
+		const url = cb.url.replace(/\{([^\}]+)\}/g, (m, v) => {
+			return PathHelper.get(state, v);
+		});
+		const res = await (await api.fetchApi(url)).json();
+		state["$result"] = res;
+		for (const m of cb.then) {
+			await invokeCallback(m, state);
+		}
+	},
+	/**
+	 * @param {SetCallback} cb
+	 */
+	async set(cb, state) {
+		const value = PathHelper.get(state, cb.value);
+		PathHelper.set(state, cb.target, value);
+	},
+	async "validate-combo"(cb, state) {
+		const w = state["$this"];
+		const valid = w.options.values.includes(w.value);
+		if (!valid) {
+			w.value = w.options.values[0];
+		}
+	},
+};
+
+async function invokeCallback(callback, state) {
+	if (callback.type in callbacks) {
+		// @ts-ignore
+		await callbacks[callback.type](callback, state);
+	} else {
+		console.warn(
+			"%c[🐍 pysssss]",
+			"color: limegreen",
+			`[binding ${state.$node.comfyClass}.${state.$this.name}]`,
+			"unsupported binding callback type:",
+			callback.type
+		);
+	}
+}
+
+app.registerExtension({
+	name: "pysssss.Binding",
+	beforeRegisterNodeDef(node, nodeData) {
+		const hasBinding = (v) => {
+			if (!v) return false;
+			return Object.values(v).find((c) => c[1]?.["pysssss.binding"]);
+		};
+		const inputs = { ...nodeData.input?.required, ...nodeData.input?.optional };
+		if (hasBinding(inputs)) {
+			const onAdded = node.prototype.onAdded;
+			node.prototype.onAdded = function () {
+				const r = onAdded?.apply(this, arguments);
+
+				for (const widget of this.widgets || []) {
+					const bindings = inputs[widget.name][1]?.["pysssss.binding"];
+					if (!bindings) continue;
+
+					for (const binding of bindings) {
+						/**
+						 * @type {import("../../../../../web/types/litegraph.d.ts").IWidget}
+						 */
+						const source = this.widgets.find((w) => w.name === binding.source);
+						if (!source) {
+							console.warn(
+								"%c[🐍 pysssss]",
+								"color: limegreen",
+								`[binding ${node.comfyClass}.${widget.name}]`,
+								"unable to find source binding widget:",
+								binding.source,
+								binding
+							);
+							continue;
+						}
+
+						let lastValue;
+						async function valueChanged() {
+							const state = {
+								$this: widget,
+								$source: source,
+								$node: node,
+							};
+
+							for (const callback of binding.callback) {
+								await invokeCallback(callback, state);
+							}
+
+							app.graph.setDirtyCanvas(true, false);
+						}
+
+						const cb = source.callback;
+						source.callback = function () {
+							const v = cb?.apply(this, arguments) ?? source.value;
+							if (v !== lastValue) {
+								lastValue = v;
+								valueChanged();
+							}
+							return v;
+						};
+
+						lastValue = source.value;
+						valueChanged();
+					}
+				}
+
+				return r;
+			};
+		}
+	},
+});

custom_nodes/ComfyUI-Custom-Scripts/web/js/common/lightbox.css

@@ -0,0 +1,102 @@
+.pysssss-lightbox {
+	width: 100vw;
+	height: 100vh;
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 1001;
+	background: rgba(0, 0, 0, 0.6);
+	display: flex;
+	align-items: center;
+	transition: opacity 0.2s;
+}
+
+.pysssss-lightbox-prev,
+.pysssss-lightbox-next {
+	height: 60px;
+	display: flex;
+	align-items: center;
+}
+
+.pysssss-lightbox-prev:after,
+.pysssss-lightbox-next:after {
+	border-style: solid;
+	border-width: 0.25em 0.25em 0 0;
+	display: inline-block;
+	height: 0.45em;
+	left: 0.15em;
+	position: relative;
+	top: 0.15em;
+	transform: rotate(-135deg) scale(0.75);
+	vertical-align: top;
+	width: 0.45em;
+	padding: 10px;
+	font-size: 20px;
+	margin: 0 10px 0 20px;
+	transition: color 0.2s;
+	flex-shrink: 0;
+	content: "";
+}
+
+.pysssss-lightbox-next:after {
+	transform: rotate(45deg) scale(0.75);
+	margin: 0 20px 0 0px;
+}
+
+.pysssss-lightbox-main {
+	display: grid;
+	flex: auto;
+	place-content: center;
+	text-align: center;
+}
+
+.pysssss-lightbox-link {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	position: relative;
+}
+
+.pysssss-lightbox .lds-ring {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.pysssss-lightbox-img {
+	max-height: 90vh;
+	max-width: calc(100vw - 130px);
+	height: auto;
+	object-fit: contain;
+	border: 3px solid white;
+	border-radius: 4px;
+	transition: opacity 0.2s;
+	user-select: none;
+}
+
+.pysssss-lightbox-img:hover {
+	border-color: dodgerblue;
+}
+
+.pysssss-lightbox-close {
+	font-size: 80px;
+	line-height: 1ch;
+	height: 1ch;
+	width: 1ch;
+	position: absolute;
+	right: 10px;
+	top: 10px;
+	padding: 5px;
+}
+
+.pysssss-lightbox-close:after {
+	content: "\00d7";
+}
+
+.pysssss-lightbox-close:hover,
+.pysssss-lightbox-prev:hover,
+.pysssss-lightbox-next:hover {
+	color: dodgerblue;
+	cursor: pointer;
+}

custom_nodes/ComfyUI-Custom-Scripts/web/js/common/lightbox.js

@@ -0,0 +1,149 @@
+import { $el } from "../../../../scripts/ui.js";
+import { addStylesheet, getUrl, loadImage } from "./utils.js";
+import { createSpinner } from "./spinner.js";
+
+addStylesheet(getUrl("lightbox.css", import.meta.url));
+
+const $$el = (tag, name, ...args) => {
+	if (name) name = "-" + name;
+	return $el(tag + ".pysssss-lightbox" + name, ...args);
+};
+
+const ani = async (a, t, b) => {
+	a();
+	await new Promise((r) => setTimeout(r, t));
+	b();
+};
+
+export class Lightbox {
+	constructor() {
+		this.el = $$el("div", "", {
+			parent: document.body,
+			onclick: (e) => {
+				e.stopImmediatePropagation();
+				this.close();
+			},
+			style: {
+				display: "none",
+				opacity: 0,
+			},
+		});
+		this.closeBtn = $$el("div", "close", {
+			parent: this.el,
+		});
+		this.prev = $$el("div", "prev", {
+			parent: this.el,
+			onclick: (e) => {
+				this.update(-1);
+				e.stopImmediatePropagation();
+			},
+		});
+		this.main = $$el("div", "main", {
+			parent: this.el,
+		});
+		this.next = $$el("div", "next", {
+			parent: this.el,
+			onclick: (e) => {
+				this.update(1);
+				e.stopImmediatePropagation();
+			},
+		});
+		this.link = $$el("a", "link", {
+			parent: this.main,
+			target: "_blank",
+		});
+		this.spinner = createSpinner();
+		this.link.appendChild(this.spinner);
+		this.img = $$el("img", "img", {
+			style: {
+				opacity: 0,
+			},
+			parent: this.link,
+			onclick: (e) => {
+				e.stopImmediatePropagation();
+			},
+			onwheel: (e) => {
+				if (!(e instanceof WheelEvent) || e.ctrlKey) {
+					return;
+				}
+				const direction = Math.sign(e.deltaY);
+				this.update(direction);
+			},
+		});
+	}
+
+	close() {
+		ani(
+			() => (this.el.style.opacity = 0),
+			200,
+			() => (this.el.style.display = "none")
+		);
+	}
+
+	async show(images, index) {
+		this.images = images;
+		this.index = index || 0;
+		await this.update(0);
+	}
+
+	async update(shift) {
+		if (shift < 0 && this.index <= 0) {
+			return;
+		}
+		if (shift > 0 && this.index >= this.images.length - 1) {
+			return;
+		}
+		this.index += shift;
+
+		this.prev.style.visibility = this.index ? "unset" : "hidden";
+		this.next.style.visibility = this.index === this.images.length - 1 ? "hidden" : "unset";
+
+		const img = this.images[this.index];
+		this.el.style.display = "flex";
+		this.el.clientWidth; // Force a reflow
+		this.el.style.opacity = 1;
+		this.img.style.opacity = 0;
+		this.spinner.style.display = "inline-block";
+		try {
+			await loadImage(img);
+		} catch (err) {
+			console.error('failed to load image', img, err);
+		}
+		this.spinner.style.display = "none";
+		this.link.href = img;
+		this.img.src = img;
+		this.img.style.opacity = 1;
+	}
+
+	async updateWithNewImage(img, feedDirection) {
+		// No-op if lightbox is not open
+		if (this.el.style.display === "none" || this.el.style.opacity === "0") return;
+
+		// Ensure currently shown image does not change
+		const [method, shift] = feedDirection === "newest first" ? ["unshift", 1] : ["push", 0];
+		this.images[method](img);
+		await this.update(shift);
+	}
+}
+
+export const lightbox = new Lightbox();
+
+addEventListener('keydown', (event) => {
+	if (lightbox.el.style.display === 'none') {
+		return;
+	}
+	const { key } = event;
+	switch (key) {
+		case 'ArrowLeft':
+		case 'a':
+			lightbox.update(-1);
+			break;
+		case 'ArrowRight':
+		case 'd':
+			lightbox.update(1);
+			break;
+		case 'Escape':
+			lightbox.close();
+			break;
+	}
+});

custom_nodes/ComfyUI-Custom-Scripts/web/js/common/modelInfoDialog.css

@@ -0,0 +1,119 @@
+.pysssss-model-info {
+	color: white;
+	font-family: sans-serif;
+	max-width: 90vw;
+}
+.pysssss-model-content {
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+.pysssss-model-info h2 {
+	text-align: center;
+	margin: 0 0 10px 0;
+}
+.pysssss-model-info p {
+	margin: 5px 0;
+}
+.pysssss-model-info a {
+	color: dodgerblue;
+}
+.pysssss-model-info a:hover {
+	text-decoration: underline;
+}
+.pysssss-model-tags-list {
+	display: flex;
+	flex-wrap: wrap;
+	list-style: none;
+	gap: 10px;
+	max-height: 200px;
+	overflow: auto;
+	margin: 10px 0;
+	padding: 0;
+}
+.pysssss-model-tag {
+	background-color: rgb(128, 213, 247);
+	color: #000;
+	display: flex;
+	align-items: center;
+	gap: 5px;
+	border-radius: 5px;
+	padding: 2px 5px;
+	cursor: pointer;
+}
+.pysssss-model-tag--selected span::before {
+	content: "✅";
+	position: absolute;
+	background-color: dodgerblue;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	text-align: center;
+}
+.pysssss-model-tag:hover {
+	outline: 2px solid dodgerblue;
+}
+.pysssss-model-tag p {
+	margin: 0;
+}
+.pysssss-model-tag span {
+	text-align: center;
+	border-radius: 5px;
+	background-color: dodgerblue;
+	color: #fff;
+	padding: 2px;
+	position: relative;
+	min-width: 20px;
+	overflow: hidden;
+}
+
+.pysssss-model-metadata .comfy-modal-content {
+	max-width: 100%;
+}
+.pysssss-model-metadata label {
+	margin-right: 1ch;
+	color: #ccc;
+}
+
+.pysssss-model-metadata span {
+	color: dodgerblue;
+}
+
+.pysssss-preview {
+	max-width: 50%;
+	margin-left: 10px;
+	position: relative;
+}
+.pysssss-preview img {
+	max-height: 300px;
+}
+.pysssss-preview button {
+	position: absolute;
+	font-size: 12px;
+	bottom: 10px;
+	right: 10px;
+}
+.pysssss-preview button+button {
+	bottom: 34px;
+}
+
+.pysssss-preview button.pysssss-preview-nav {
+	bottom: unset;
+	right: 30px;
+	top: 10px;
+	font-size: 14px;
+	line-height: 14px;
+}
+
+.pysssss-preview button.pysssss-preview-nav+.pysssss-preview-nav {
+	right: 10px;
+}
+.pysssss-model-notes {
+	background-color: rgba(0, 0, 0, 0.25);
+	padding: 5px;
+	margin-top: 5px;
+}
+.pysssss-model-notes:empty {
+	display: none;
+}

custom_nodes/ComfyUI-Custom-Scripts/web/js/common/modelInfoDialog.js

@@ -0,0 +1,358 @@
+import { $el, ComfyDialog } from "../../../../scripts/ui.js";
+import { api } from "../../../../scripts/api.js";
+import { addStylesheet } from "./utils.js";
+
+addStylesheet(import.meta.url);
+
+class MetadataDialog extends ComfyDialog {
+	constructor() {
+		super();
+
+		this.element.classList.add("pysssss-model-metadata");
+	}
+	show(metadata) {
+		super.show(
+			$el(
+				"div",
+				Object.keys(metadata).map((k) =>
+					$el("div", [
+						$el("label", { textContent: k }),
+						$el("span", { textContent: typeof metadata[k] === "object" ? JSON.stringify(metadata[k]) : metadata[k] }),
+					])
+				)
+			)
+		);
+	}
+}
+
+export class ModelInfoDialog extends ComfyDialog {
+	constructor(name, node) {
+		super();
+		this.name = name;
+		this.node = node;
+		this.element.classList.add("pysssss-model-info");
+	}
+
+	get customNotes() {
+		return this.metadata["pysssss.notes"];
+	}
+
+	set customNotes(v) {
+		this.metadata["pysssss.notes"] = v;
+	}
+
+	get hash() {
+		return this.metadata["pysssss.sha256"];
+	}
+
+	async show(type, value) {
+		this.type = type;
+
+		const req = api.fetchApi("/pysssss/metadata/" + encodeURIComponent(`${type}/${value}`));
+		this.info = $el("div", { style: { flex: "auto" } });
+		this.img = $el("img", { style: { display: "none" } });
+		this.imgWrapper = $el("div.pysssss-preview", [this.img]);
+		this.main = $el("main", { style: { display: "flex" } }, [this.info, this.imgWrapper]);
+		this.content = $el("div.pysssss-model-content", [$el("h2", { textContent: this.name }), this.main]);
+
+		const loading = $el("div", { textContent: "ℹ️ Loading...", parent: this.content });
+
+		super.show(this.content);
+
+		this.metadata = await (await req).json();
+		this.viewMetadata.style.cursor = this.viewMetadata.style.opacity = "";
+		this.viewMetadata.removeAttribute("disabled");
+
+		loading.remove();
+		this.addInfo();
+	}
+
+	createButtons() {
+		const btns = super.createButtons();
+		this.viewMetadata = $el("button", {
+			type: "button",
+			textContent: "View raw metadata",
+			disabled: "disabled",
+			style: {
+				opacity: 0.5,
+				cursor: "not-allowed",
+			},
+			onclick: (e) => {
+				if (this.metadata) {
+					new MetadataDialog().show(this.metadata);
+				}
+			},
+		});
+
+		btns.unshift(this.viewMetadata);
+		return btns;
+	}
+
+	getNoteInfo() {
+		function parseNote() {
+			if (!this.customNotes) return [];
+
+			let notes = [];
+			// Extract links from notes
+			const r = new RegExp("(\\bhttps?:\\/\\/[^\\s]+)", "g");
+			let end = 0;
+			let m;
+			do {
+				m = r.exec(this.customNotes);
+				let pos;
+				let fin = 0;
+				if (m) {
+					pos = m.index;
+					fin = m.index + m[0].length;
+				} else {
+					pos = this.customNotes.length;
+				}
+
+				let pre = this.customNotes.substring(end, pos);
+				if (pre) {
+					pre = pre.replaceAll("\n", "<br>");
+					notes.push(
+						$el("span", {
+							innerHTML: pre,
+						})
+					);
+				}
+				if (m) {
+					notes.push(
+						$el("a", {
+							href: m[0],
+							textContent: m[0],
+							target: "_blank",
+						})
+					);
+				}
+
+				end = fin;
+			} while (m);
+			return notes;
+		}
+
+		let textarea;
+		let notesContainer;
+		const editText = "✏️ Edit";
+		const edit = $el("a", {
+			textContent: editText,
+			href: "#",
+			style: {
+				float: "right",
+				color: "greenyellow",
+				textDecoration: "none",
+			},
+			onclick: async (e) => {
+				e.preventDefault();
+
+				if (textarea) {
+					this.customNotes = textarea.value;
+
+					const resp = await api.fetchApi("/pysssss/metadata/notes/" + encodeURIComponent(`${this.type}/${this.name}`), {
+						method: "POST",
+						body: this.customNotes,
+					});
+
+					if (resp.status !== 200) {
+						console.error(resp);
+						alert(`Error saving notes (${req.status}) ${req.statusText}`);
+						return;
+					}
+
+					e.target.textContent = editText;
+					textarea.remove();
+					textarea = null;
+
+					notesContainer.replaceChildren(...parseNote.call(this));
+					this.node?.["pysssss.updateExamples"]?.();
+				} else {
+					e.target.textContent = "💾 Save";
+					textarea = $el("textarea", {
+						style: {
+							width: "100%",
+							minWidth: "200px",
+							minHeight: "50px",
+						},
+						textContent: this.customNotes,
+					});
+					e.target.after(textarea);
+					notesContainer.replaceChildren();
+					textarea.style.height = Math.min(textarea.scrollHeight, 300) + "px";
+				}
+			},
+		});
+
+		notesContainer = $el("div.pysssss-model-notes", parseNote.call(this));
+		return $el(
+			"div",
+			{
+				style: { display: "contents" },
+			},
+			[edit, notesContainer]
+		);
+	}
+
+	addInfo() {
+		const usageHint = this.metadata["modelspec.usage_hint"];
+		if (usageHint) {
+			this.addInfoEntry("Usage Hint", usageHint);
+		}
+		this.addInfoEntry("Notes", this.getNoteInfo());
+	}
+
+	addInfoEntry(name, value) {
+		return $el(
+			"p",
+			{
+				parent: this.info,
+			},
+			[
+				typeof name === "string" ? $el("label", { textContent: name + ": " }) : name,
+				typeof value === "string" ? $el("span", { textContent: value }) : value,
+			]
+		);
+	}
+
+	async getCivitaiDetails() {
+		const req = await fetch("https://civitai.com/api/v1/model-versions/by-hash/" + this.hash);
+		if (req.status === 200) {
+			return await req.json();
+		} else if (req.status === 404) {
+			throw new Error("Model not found");
+		} else {
+			throw new Error(`Error loading info (${req.status}) ${req.statusText}`);
+		}
+	}
+
+	addCivitaiInfo() {
+		const promise = this.getCivitaiDetails();
+		const content = $el("span", { textContent: "ℹ️ Loading..." });
+
+		this.addInfoEntry(
+			$el("label", [
+				$el("img", {
+					style: {
+						width: "18px",
+						position: "relative",
+						top: "3px",
+						margin: "0 5px 0 0",
+					},
+					src: "https://civitai.com/favicon.ico",
+				}),
+				$el("span", { textContent: "Civitai: " }),
+			]),
+			content
+		);
+
+		return promise
+			.then((info) => {
+				content.replaceChildren(
+					$el("a", {
+						href: "https://civitai.com/models/" + info.modelId,
+						textContent: "View " + info.model.name,
+						target: "_blank",
+					})
+				);
+
+				const allPreviews = info.images?.filter((i) => i.type === "image");
+				const previews = allPreviews?.filter((i) => i.nsfwLevel <= ModelInfoDialog.nsfwLevel);
+				if (previews?.length) {
+					let previewIndex = 0;
+					let preview;
+					const updatePreview = () => {
+						preview = previews[previewIndex];
+						this.img.src = preview.url;
+					};
+
+					updatePreview();
+					this.img.style.display = "";
+
+					this.img.title = `${previews.length} previews.`;
+					if (allPreviews.length !== previews.length) {
+						this.img.title += ` ${allPreviews.length - previews.length} images hidden due to NSFW level.`;
+					}
+
+					this.imgSave = $el("button", {
+						textContent: "Use as preview",
+						parent: this.imgWrapper,
+						onclick: async () => {
+							// Convert the preview to a blob
+							const blob = await (await fetch(this.img.src)).blob();
+
+							// Store it in temp
+							const name = "temp_preview." + new URL(this.img.src).pathname.split(".")[1];
+							const body = new FormData();
+							body.append("image", new File([blob], name));
+							body.append("overwrite", "true");
+							body.append("type", "temp");
+
+							const resp = await api.fetchApi("/upload/image", {
+								method: "POST",
+								body,
+							});
+
+							if (resp.status !== 200) {
+								console.error(resp);
+								alert(`Error saving preview (${req.status}) ${req.statusText}`);
+								return;
+							}
+
+							// Use as preview
+							await api.fetchApi("/pysssss/save/" + encodeURIComponent(`${this.type}/${this.name}`), {
+								method: "POST",
+								body: JSON.stringify({
+									filename: name,
+									type: "temp",
+								}),
+								headers: {
+									"content-type": "application/json",
+								},
+							});
+							app.refreshComboInNodes();
+						},
+					});
+
+					$el("button", {
+						textContent: "Show metadata",
+						parent: this.imgWrapper,
+						onclick: async () => {
+							if (preview.meta && Object.keys(preview.meta).length) {
+								new MetadataDialog().show(preview.meta);
+							} else {
+								alert("No image metadata found");
+							}
+						},
+					});
+
+					const addNavButton = (icon, direction) => {
+						$el("button.pysssss-preview-nav", {
+							textContent: icon,
+							parent: this.imgWrapper,
+							onclick: async () => {
+								previewIndex += direction;
+								if (previewIndex < 0) {
+									previewIndex = previews.length - 1;
+								} else if (previewIndex >= previews.length) {
+									previewIndex = 0;
+								}
+								updatePreview();
+							},
+						});
+					};
+
+					if (previews.length > 1) {
+						addNavButton("‹", -1);
+						addNavButton("›", 1);
+					}
+				} else if (info.images?.length) {
+					$el("span", { style: { opacity: 0.6 }, textContent: "⚠️ All images hidden due to NSFW level setting.", parent: this.imgWrapper });
+				}
+
+				return info;
+			})
+			.catch((err) => {
+				content.textContent = "⚠️ " + err.message;
+			});
+	}
+}

custom_nodes/ComfyUI-Custom-Scripts/web/js/common/spinner.css

@@ -0,0 +1,35 @@
+.pysssss-lds-ring {
+	display: inline-block;
+	position: absolute;
+	width: 80px;
+	height: 80px;
+}
+.pysssss-lds-ring div {
+	box-sizing: border-box;
+	display: block;
+	position: absolute;
+	width: 64px;
+	height: 64px;
+	margin: 8px;
+	border: 5px solid #fff;
+	border-radius: 50%;
+	animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+	border-color: #fff transparent transparent transparent;
+}
+.pysssss-lds-ring div:nth-child(1) {
+	animation-delay: -0.45s;
+}
+.pysssss-lds-ring div:nth-child(2) {
+	animation-delay: -0.3s;
+}
+.pysssss-lds-ring div:nth-child(3) {
+	animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}

custom_nodes/ComfyUI-Custom-Scripts/web/js/common/spinner.js

@@ -0,0 +1,9 @@
+import { addStylesheet } from "./utils.js";
+
+addStylesheet(import.meta.url);
+
+export function createSpinner() {
+	const div = document.createElement("div");
+	div.innerHTML = `<div class="pysssss-lds-ring"><div></div><div></div><div></div><div></div></div>`;
+	return div.firstElementChild;
+}

custom_nodes/ComfyUI-Custom-Scripts/web/js/common/utils.js

@@ -0,0 +1,30 @@
+import { $el } from "../../../../scripts/ui.js";
+
+export function addStylesheet(url) {
+	if (url.endsWith(".js")) {
+		url = url.substr(0, url.length - 2) + "css";
+	}
+	$el("link", {
+		parent: document.head,
+		rel: "stylesheet",
+		type: "text/css",
+		href: url.startsWith("http") ? url : getUrl(url),
+	});
+}
+
+export function getUrl(path, baseUrl) {
+	if (baseUrl) {
+		return new URL(path, baseUrl).toString();
+	} else {
+		return new URL("../" + path, import.meta.url).toString();
+	}
+}
+
+export async function loadImage(url) {
+	return new Promise((res, rej) => {
+		const img = new Image();
+		img.onload = res;
+		img.onerror = rej;
+		img.src = url;
+	});
+}

custom_nodes/ComfyUI-Custom-Scripts/web/js/contextMenuHook.js

@@ -0,0 +1,90 @@
+import { app } from "../../../scripts/app.js";
+app.registerExtension({
+	name: "pysssss.ContextMenuHook",
+	init() {
+		const getOrSet = (target, name, create) => {
+			if (name in target) return target[name];
+			return (target[name] = create());
+		};
+		const symbol = getOrSet(window, "__pysssss__", () => Symbol("__pysssss__"));
+		const store = getOrSet(window, symbol, () => ({}));
+		const contextMenuHook = getOrSet(store, "contextMenuHook", () => ({}));
+		for (const e of ["ctor", "preAddItem", "addItem"]) {
+			if (!contextMenuHook[e]) {
+				contextMenuHook[e] = [];
+			}
+		}
+
+		// Big ol' hack to get allow customizing the context menu
+		// Replace the addItem function with our own that wraps the context of "this" with a proxy
+		// That proxy then replaces the constructor with another proxy
+		// That proxy then calls the custom ContextMenu that supports filters
+		const ctorProxy = new Proxy(LiteGraph.ContextMenu, {
+			construct(target, args) {
+				return new LiteGraph.ContextMenu(...args);
+			},
+		});
+
+		function triggerCallbacks(name, getArgs, handler) {
+			const callbacks = contextMenuHook[name];
+			if (callbacks && callbacks instanceof Array) {
+				for (const cb of callbacks) {
+					const r = cb(...getArgs());
+					handler?.call(this, r);
+				}
+			} else {
+				console.warn("[pysssss 🐍]", `invalid ${name} callbacks`, callbacks, name in contextMenuHook);
+			}
+		}
+
+		const addItem = LiteGraph.ContextMenu.prototype.addItem;
+		LiteGraph.ContextMenu.prototype.addItem = function () {
+			const proxy = new Proxy(this, {
+				get(target, prop) {
+					if (prop === "constructor") {
+						return ctorProxy;
+					}
+					return target[prop];
+				},
+			});
+			proxy.__target__ = this;
+
+			let el;
+			let args = arguments;
+			triggerCallbacks(
+				"preAddItem",
+				() => [el, this, args],
+				(r) => {
+					if (r !== undefined) el = r;
+				}
+			);
+
+			if (el === undefined) {
+				el = addItem.apply(proxy, arguments);
+			}
+
+			triggerCallbacks(
+				"addItem",
+				() => [el, this, args],
+				(r) => {
+					if (r !== undefined) el = r;
+				}
+			);
+			return el;
+		};
+
+		// We also need to patch the ContextMenu constructor to unwrap the parent else it fails a LiteGraph type check
+		const ctxMenu = LiteGraph.ContextMenu;
+		LiteGraph.ContextMenu = function (values, options) {
+			if (options?.parentMenu) {
+				if (options.parentMenu.__target__) {
+					options.parentMenu = options.parentMenu.__target__;
+				}
+			}
+
+			triggerCallbacks("ctor", () => [values, options]);
+			return ctxMenu.call(this, values, options);
+		};
+		LiteGraph.ContextMenu.prototype = ctxMenu.prototype;
+	},
+});

custom_nodes/ComfyUI-Custom-Scripts/web/js/customColors.js

@@ -0,0 +1,98 @@
+import { app } from "../../../scripts/app.js";
+import { $el } from "../../../scripts/ui.js";
+
+const colorShade = (col, amt) => {
+	col = col.replace(/^#/, "");
+	if (col.length === 3) col = col[0] + col[0] + col[1] + col[1] + col[2] + col[2];
+
+	let [r, g, b] = col.match(/.{2}/g);
+	[r, g, b] = [parseInt(r, 16) + amt, parseInt(g, 16) + amt, parseInt(b, 16) + amt];
+
+	r = Math.max(Math.min(255, r), 0).toString(16);
+	g = Math.max(Math.min(255, g), 0).toString(16);
+	b = Math.max(Math.min(255, b), 0).toString(16);
+
+	const rr = (r.length < 2 ? "0" : "") + r;
+	const gg = (g.length < 2 ? "0" : "") + g;
+	const bb = (b.length < 2 ? "0" : "") + b;
+
+	return `#${rr}${gg}${bb}`;
+};
+
+app.registerExtension({
+	name: "pysssss.CustomColors",
+	setup() {
+		let picker;
+		let activeNode;
+		const onMenuNodeColors = LGraphCanvas.onMenuNodeColors;
+		LGraphCanvas.onMenuNodeColors = function (value, options, e, menu, node) {
+			const r = onMenuNodeColors.apply(this, arguments);
+			requestAnimationFrame(() => {
+				const menus = document.querySelectorAll(".litecontextmenu");
+				for (let i = menus.length - 1; i >= 0; i--) {
+					if (menus[i].firstElementChild.textContent.includes("No color") || menus[i].firstElementChild.value?.content?.includes("No color")) {
+						$el(
+							"div.litemenu-entry.submenu",
+							{
+								parent: menus[i],
+								$: (el) => {
+									el.onclick = () => {
+										LiteGraph.closeAllContextMenus();
+										if (!picker) {
+											picker = $el("input", {
+												type: "color",
+												parent: document.body,
+												style: {
+													display: "none",
+												},
+											});
+											picker.onchange = () => {
+												if (activeNode) {
+													const fApplyColor = function(node){
+														if (picker.value) {
+															if (node.constructor === LiteGraph.LGraphGroup) {
+																node.color = picker.value;
+															} else {
+																node.color = colorShade(picker.value, 20);
+																node.bgcolor = picker.value;
+															}
+														}
+													}
+													const graphcanvas = LGraphCanvas.active_canvas;
+													if (!graphcanvas.selected_nodes || Object.keys(graphcanvas.selected_nodes).length <= 1){
+														fApplyColor(activeNode);
+													} else {
+														for (let i in graphcanvas.selected_nodes) {
+															fApplyColor(graphcanvas.selected_nodes[i]);
+														}
+													}
+
+													activeNode.setDirtyCanvas(true, true);
+												}
+											};
+										}
+										activeNode = null;
+										picker.value = node.bgcolor;
+										activeNode = node;
+										picker.click();
+									};
+								},
+							},
+							[
+								$el("span", {
+									style: {
+										paddingLeft: "4px",
+										display: "block",
+									},
+									textContent: "🎨 Custom",
+								}),
+							]
+						);
+						break;
+					}
+				}
+			});
+			return r;
+		};
+	},
+});

custom_nodes/ComfyUI-Custom-Scripts/web/js/faviconStatus.js

@@ -0,0 +1,58 @@
+import { api } from "../../../scripts/api.js";
+import { app } from "../../../scripts/app.js";
+
+// Simple script that adds the current queue size to the window title
+// Adds a favicon that changes color while active
+
+app.registerExtension({
+	name: "pysssss.FaviconStatus",
+	async setup() {
+		let link = document.querySelector("link[rel~='icon']");
+		if (!link) {
+			link = document.createElement("link");
+			link.rel = "icon";
+			document.head.appendChild(link);
+		}
+
+		const getUrl = (active, user) => new URL(`assets/favicon${active ? "-active" : ""}${user ? ".user" : ""}.ico`, import.meta.url);
+		const testUrl = async (active) => {
+			const url = getUrl(active, true);
+			const r = await fetch(url, {
+				method: "HEAD",
+			});
+			if (r.status === 200) {
+				return url;
+			}
+			return getUrl(active, false);
+		};
+		const activeUrl = await testUrl(true);
+		const idleUrl = await testUrl(false);
+
+		let executing = false;
+		const update = () => (link.href = executing ? activeUrl : idleUrl);
+
+		for (const e of ["execution_start", "progress"]) {
+			api.addEventListener(e, () => {
+				executing = true;
+				update();
+			});
+		}
+
+		api.addEventListener("executing", ({ detail }) => {
+			// null will be sent when it's finished
+			executing = !!detail;
+			update();
+		});
+
+		api.addEventListener("status", ({ detail }) => {
+			let title = "ComfyUI";
+			if (detail && detail.exec_info.queue_remaining) {
+				title = `(${detail.exec_info.queue_remaining}) ${title}`;
+			}
+			document.title = title;
+			update();
+			executing = false;
+		});
+		update();
+	},
+});

custom_nodes/ComfyUI-Custom-Scripts/web/js/graphArrange.js

@@ -0,0 +1,91 @@
+import { app } from "../../../scripts/app.js";
+
+app.registerExtension({
+	name: "pysssss.GraphArrange",
+	setup(app) {
+		const orig = LGraphCanvas.prototype.getCanvasMenuOptions;
+		LGraphCanvas.prototype.getCanvasMenuOptions = function () {
+			const options = orig.apply(this, arguments);
+			options.push({ content: "Arrange (float left)", callback: () => graph.arrange() });
+			options.push({
+				content: "Arrange (float right)",
+				callback: () => {
+					(function () {
+						var margin = 50;
+						var layout;
+
+						const nodes = this.computeExecutionOrder(false, true);
+						const columns = [];
+
+						// Find node first use
+						for (let i = nodes.length - 1; i >= 0; i--) {
+							const node = nodes[i];
+							let max = null;
+							for (const out of node.outputs || []) {
+								if (out.links) {
+									for (const link of out.links) {
+										const outNode = app.graph.getNodeById(app.graph.links[link].target_id);
+										if (!outNode) continue;
+										var l = outNode._level - 1;
+										if (max === null) max = l;
+										else if (l < max) max = l;
+									}
+								}
+							}
+							if (max != null) node._level = max;
+						}
+
+						for (let i = 0; i < nodes.length; ++i) {
+							const node = nodes[i];
+							const col = node._level || 1;
+							if (!columns[col]) {
+								columns[col] = [];
+							}
+							columns[col].push(node);
+						}
+
+						let x = margin;
+
+						for (let i = 0; i < columns.length; ++i) {
+							const column = columns[i];
+							if (!column) {
+								continue;
+							}
+							column.sort((a, b) => {
+								var as = !(a.type === "SaveImage" || a.type === "PreviewImage");
+								var bs = !(b.type === "SaveImage" || b.type === "PreviewImage");
+								var r = as - bs;
+								if (r === 0) r = (a.inputs?.length || 0) - (b.inputs?.length || 0);
+								if (r === 0) r = (a.outputs?.length || 0) - (b.outputs?.length || 0);
+								return r;
+							});
+							let max_size = 100;
+							let y = margin + LiteGraph.NODE_TITLE_HEIGHT;
+							for (let j = 0; j < column.length; ++j) {
+								const node = column[j];
+								node.pos[0] = layout == LiteGraph.VERTICAL_LAYOUT ? y : x;
+								node.pos[1] = layout == LiteGraph.VERTICAL_LAYOUT ? x : y;
+								const max_size_index = layout == LiteGraph.VERTICAL_LAYOUT ? 1 : 0;
+								if (node.size[max_size_index] > max_size) {
+									max_size = node.size[max_size_index];
+								}
+								const node_size_index = layout == LiteGraph.VERTICAL_LAYOUT ? 0 : 1;
+								y += node.size[node_size_index] + margin + LiteGraph.NODE_TITLE_HEIGHT + j;
+							}
+
+							// Right align in column
+							for (let j = 0; j < column.length; ++j) {
+								const node = column[j];
+								node.pos[0] += max_size - node.size[0];
+							}
+							x += max_size + margin;
+						}
+
+						this.setDirtyCanvas(true, true);
+					}).apply(app.graph);
+				},
+			});
+			return options;
+		};
+	},
+});

custom_nodes/ComfyUI-Custom-Scripts/web/js/imageFeed.js

@@ -0,0 +1,589 @@
+import { api } from "../../../scripts/api.js";
+import { app } from "../../../scripts/app.js";
+import { $el } from "../../../scripts/ui.js";
+import { lightbox } from "./common/lightbox.js";
+
+$el("style", {
+	textContent: `
+	.pysssss-image-feed {
+		position: absolute;
+		background: var(--comfy-menu-bg);
+		color: var(--fg-color);
+		z-index: 99;
+		font-family: sans-serif;
+		font-size: 12px;
+		display: flex;
+		flex-direction: column;
+	}
+	div > .pysssss-image-feed {
+		position: static;
+	}
+	.pysssss-image-feed--top, .pysssss-image-feed--bottom {
+		width: 100vw;
+		min-height: 30px;
+		max-height: calc(var(--max-size, 20) * 1vh);
+	}
+	.pysssss-image-feed--top {
+		top: 0;
+	}
+	.pysssss-image-feed--bottom {
+		bottom: 0;
+		flex-direction: column-reverse;
+		padding-top: 5px;
+	}
+	.pysssss-image-feed--left, .pysssss-image-feed--right {
+		top: 0;
+		height: 100vh;
+		min-width: 200px;
+		max-width: calc(var(--max-size, 10) * 1vw);
+	}
+	.comfyui-body-left .pysssss-image-feed--left, .comfyui-body-right .pysssss-image-feed--right {
+		height: 100%;
+	}
+	.pysssss-image-feed--left {
+		left: 0;
+	}
+	.pysssss-image-feed--right {
+		right: 0;
+	}
+
+	.pysssss-image-feed--left .pysssss-image-feed-menu, .pysssss-image-feed--right .pysssss-image-feed-menu {
+		flex-direction: column;
+	}
+
+	.pysssss-image-feed-menu {
+		position: relative;
+		flex: 0 1 min-content;
+		display: flex;
+		gap: 5px;
+		padding: 5px;
+		justify-content: space-between;
+	}
+	.pysssss-image-feed-btn-group {
+		align-items: stretch;
+		display: flex;
+		gap: .5rem;
+		flex: 0 1 fit-content;
+		justify-content: flex-end;
+	}
+	.pysssss-image-feed-btn {
+		background-color:var(--comfy-input-bg);
+		border-radius:5px;
+		border:2px solid var(--border-color);
+		color: var(--fg-color);
+		cursor:pointer;
+		display:inline-block;
+		flex: 0 1 fit-content;
+		text-decoration:none;
+	}
+	.pysssss-image-feed-btn.sizing-btn:checked {
+		filter: invert();
+	}
+	.pysssss-image-feed-btn.clear-btn {
+		padding: 5px 20px;
+	}
+	.pysssss-image-feed-btn.hide-btn {
+		padding: 5px;
+		aspect-ratio: 1 / 1;
+	}
+	.pysssss-image-feed-btn:hover {
+		filter: brightness(1.2);
+	}
+	.pysssss-image-feed-btn:active {
+		position:relative;
+		top:1px;
+	}
+	
+	.pysssss-image-feed-menu section {
+		border-radius: 5px;
+		background: rgba(0,0,0,0.6);
+		padding: 0 5px;
+		display: flex;
+		gap: 5px;
+		align-items: center;
+		position: relative;
+	}
+	.pysssss-image-feed-menu section span {
+		white-space: nowrap;
+	}
+	.pysssss-image-feed-menu section input {
+		flex: 1 1 100%;
+		background: rgba(0,0,0,0.6);
+		border-radius: 5px;
+		overflow: hidden;
+		z-index: 100;
+	}
+
+	.sizing-menu {
+		position: relative;
+	}
+
+	.size-controls-flyout {
+		position: absolute;
+		transform: scaleX(0%);
+		transition: 200ms ease-out;
+		transition-delay: 500ms;
+		z-index: 101;
+		width: 300px;
+	}
+
+	.sizing-menu:hover .size-controls-flyout {
+		transform: scale(1, 1);
+		transition: 200ms linear;
+		transition-delay: 0;
+	}
+	.pysssss-image-feed--bottom .size-controls-flyout  {
+		transform: scale(1,0);
+		transform-origin: bottom;
+		bottom: 0;
+		left: 0;
+	}
+	.pysssss-image-feed--top .size-controls-flyout  {
+		transform: scale(1,0);
+		transform-origin: top;
+		top: 0;
+		left: 0;
+	}
+	.pysssss-image-feed--left .size-controls-flyout  {
+		transform: scale(0, 1);
+		transform-origin: left;
+		top: 0;
+		left: 0;
+	}
+	.pysssss-image-feed--right .size-controls-flyout  {
+		transform: scale(0, 1);
+		transform-origin: right;
+		top: 0;
+		right: 0;
+	}
+	
+	.pysssss-image-feed-menu > * {
+		min-height: 24px;
+	}
+	.pysssss-image-feed-list {
+		flex: 1 1 auto;
+		overflow-y: auto;
+		display: grid;
+		align-items: center;
+		justify-content: center;
+		gap: 4px;
+		grid-auto-rows: min-content;
+		grid-template-columns: repeat(var(--img-sz, 3), 1fr);
+		transition: 100ms linear;
+		scrollbar-gutter: stable both-edges;
+		padding: 5px;
+		background: var(--comfy-input-bg);
+		border-radius: 5px;
+		margin: 5px;
+		margin-top: 0px;
+	}
+	.pysssss-image-feed-list:empty {
+		display: none;
+	}
+	.pysssss-image-feed-list div {
+		height: 100%;
+		text-align: center;
+	}
+	.pysssss-image-feed-list::-webkit-scrollbar {
+		background: var(--comfy-input-bg);
+		border-radius: 5px;
+	}
+	.pysssss-image-feed-list::-webkit-scrollbar-thumb {
+		background:var(--comfy-menu-bg);
+		border: 5px solid transparent;
+		border-radius: 8px;
+		background-clip: content-box;
+	}
+	.pysssss-image-feed-list::-webkit-scrollbar-thumb:hover {
+		background: var(--border-color);
+		background-clip: content-box;
+	}
+	.pysssss-image-feed-list img {
+		object-fit: var(--img-fit, contain);
+		max-width: 100%;
+		max-height: calc(var(--max-size) * 1vh);
+		border-radius: 4px;
+	}
+	.pysssss-image-feed-list img:hover {
+		filter: brightness(1.2);
+	}`,
+	parent: document.body,
+});
+
+app.registerExtension({
+	name: "pysssss.ImageFeed",
+	async setup() {
+		let visible = true;
+		const seenImages = new Map();
+		const showButton = $el("button.comfy-settings-btn", {
+			textContent: "🖼��",
+			style: {
+				right: "16px",
+				cursor: "pointer",
+				display: "none",
+			},
+		});
+		let showMenuButton;
+		if (!app.menu?.element.style.display && app.menu?.settingsGroup) {
+			showMenuButton = new (await import("../../../scripts/ui/components/button.js")).ComfyButton({
+				icon: "image-multiple",
+				action: () => showButton.click(),
+				tooltip: "Show Image Feed 🐍",
+				content: "Show Image Feed 🐍",
+			});
+			showMenuButton.enabled = false;
+			showMenuButton.element.style.display = "none";
+			app.menu.settingsGroup.append(showMenuButton);
+		}
+
+		const getVal = (n, d) => {
+			const v = localStorage.getItem("pysssss.ImageFeed." + n);
+			if (v && !isNaN(+v)) {
+				return v;
+			}
+			return d;
+		};
+
+		const saveVal = (n, v) => {
+			localStorage.setItem("pysssss.ImageFeed." + n, v);
+		};
+
+		const imageFeed = $el("div.pysssss-image-feed");
+		const imageList = $el("div.pysssss-image-feed-list");
+
+		function updateMenuParent(location) {
+			if (showMenuButton) {
+				const el = document.querySelector(".comfyui-body-" + location);
+				if (!el) return;
+				el.append(imageFeed);
+			} else {
+				if (!imageFeed.parent) {
+					document.body.append(imageFeed);
+				}
+			}
+		}
+
+		const feedLocation = app.ui.settings.addSetting({
+			id: "pysssss.ImageFeed.Location",
+			name: "🐍 Image Feed Location",
+			defaultValue: "bottom",
+			type: () => {
+				return $el("tr", [
+					$el("td", [
+						$el("label", {
+							textContent: "🐍 Image Feed Location:",
+						}),
+					]),
+					$el("td", [
+						$el(
+							"select",
+							{
+								style: {
+									fontSize: "14px",
+								},
+								oninput: (e) => {
+									feedLocation.value = e.target.value;
+									imageFeed.className = `pysssss-image-feed pysssss-image-feed--${feedLocation.value}`;
+									updateMenuParent(feedLocation.value);
+									saveVal("Location", feedLocation.value);
+									window.dispatchEvent(new Event("resize"));									
+								},
+							},
+							["left", "top", "right", "bottom", "hidden"].map((m) =>
+								$el("option", {
+									value: m,
+									textContent: m,
+									selected: feedLocation.value === m,
+								})
+							)
+						),
+					]),
+				]);
+			},
+			onChange(value) {
+				if (value === "hidden") {
+					imageFeed.remove();
+					if (showMenuButton) {
+						requestAnimationFrame(() => {
+							showMenuButton.element.style.display = "none";
+						});
+					}
+					showButton.style.display = "none";
+				} else {
+					showMenuButton.element.style.display = "unset";
+					showButton.style.display = visible ? "none" : "unset";
+					imageFeed.className = `pysssss-image-feed pysssss-image-feed--${value}`;
+					updateMenuParent(value);
+				}
+			},
+		});
+
+		const feedDirection = app.ui.settings.addSetting({
+			id: "pysssss.ImageFeed.Direction",
+			name: "🐍 Image Feed Direction",
+			defaultValue: "newest first",
+			type: () => {
+				return $el("tr", [
+					$el("td", [
+						$el("label", {
+							textContent: "🐍 Image Feed Direction:",
+						}),
+					]),
+					$el("td", [
+						$el(
+							"select",
+							{
+								style: {
+									fontSize: "14px",
+								},
+								oninput: (e) => {
+									feedDirection.value = e.target.value;
+									imageList.replaceChildren(...[...imageList.childNodes].reverse());
+								},
+							},
+							["newest first", "oldest first"].map((m) =>
+								$el("option", {
+									value: m,
+									textContent: m,
+									selected: feedDirection.value === m,
+								})
+							)
+						),
+					]),
+				]);
+			},
+		});
+
+		const deduplicateFeed = app.ui.settings.addSetting({
+			id: "pysssss.ImageFeed.Deduplication",
+			name: "🐍 Image Feed Deduplication",
+			tooltip: `Ensures unique images in the image feed but at the cost of CPU-bound performance impact \
+(from hundreds of milliseconds to seconds per image, depending on byte size). For workflows that produce duplicate images, turning this setting on may yield overall client-side performance improvements \
+by reducing the number of images in the feed.
+
+Recommended: "enabled (max performance)" uness images are erroneously deduplicated.`,
+			defaultValue: 0,
+			type: "combo",
+			options: (value) => {
+				let dedupeOptions = {"disabled": 0, "enabled (slow)": 1, "enabled (performance)": 0.5, "enabled (max performance)": 0.25};
+				return Object.entries(dedupeOptions).map(([k, v]) => ({
+						value: v,
+						text: k,
+						selected: k === value,
+					})
+				)
+			},
+		});
+
+		const maxImages = app.ui.settings.addSetting({
+			id: "pysssss.ImageFeed.MaxImages",
+			name: "🐍 Image Feed Max Images",
+			tooltip: `Limits the number of images in the feed to a maximum, removing the oldest images as new ones are added.`,
+			defaultValue: 0,
+			type: "number",
+		});
+
+		const clearButton = $el("button.pysssss-image-feed-btn.clear-btn", {
+			textContent: "Clear",
+			onclick: () => {
+				imageList.replaceChildren();
+				window.dispatchEvent(new Event("resize"));
+			},
+		});
+
+		const hideButton = $el("button.pysssss-image-feed-btn.hide-btn", {
+			textContent: "❌",
+			onclick: () => {
+				imageFeed.style.display = "none";
+				showButton.style.display = feedLocation.value === "hidden" ? "none" : "unset";
+				if (showMenuButton) {
+					showMenuButton.enabled = true;
+					showMenuButton.element.style.display = "";
+				}
+				saveVal("Visible", 0);
+				visible = false;
+				window.dispatchEvent(new Event("resize"));
+			},
+		});
+
+		let columnInput;
+		function updateColumnCount(v) {
+			columnInput.parentElement.title = `Controls the number of columns in the feed (${v} columns).\nClick label to set custom value.`;
+			imageFeed.style.setProperty("--img-sz", v);
+			saveVal("ImageSize", v);
+			columnInput.max = Math.max(10, v, columnInput.max);
+			columnInput.value = v;
+			window.dispatchEvent(new Event("resize"));
+		}
+
+		function addImageToFeed(href) {
+			const method = feedDirection.value === "newest first" ? "prepend" : "append";
+
+			if (maxImages.value > 0 && imageList.children.length >= maxImages.value) {
+				imageList.children[method === "prepend" ? imageList.children.length - 1 : 0].remove();
+			}
+
+			imageList[method](
+				$el("div", [
+					$el(
+						"a",
+						{
+							target: "_blank",
+							href,
+							onclick: (e) => {
+								const imgs = [...imageList.querySelectorAll("img")].map((img) => img.getAttribute("src"));
+								lightbox.show(imgs, imgs.indexOf(href));
+								e.preventDefault();
+							},
+						},
+						[$el("img", { src: href })]
+					),
+				])
+			);
+			// If lightbox is open, update it with new image
+			lightbox.updateWithNewImage(href, feedDirection.value);
+		}
+
+		imageFeed.append(
+			$el("div.pysssss-image-feed-menu", [
+				$el("section.sizing-menu", {}, [
+					$el("label.size-control-handle", { textContent: "↹ Resize Feed" }),
+					$el("div.size-controls-flyout", {}, [
+						$el("section.size-control.feed-size-control", {}, [
+							$el("span", {
+								textContent: "Feed Size...",
+							}),
+							$el("input", {
+								type: "range",
+								min: 10,
+								max: 80,
+								oninput: (e) => {
+									e.target.parentElement.title = `Controls the maximum size of the image feed panel (${e.target.value}vh)`;
+									imageFeed.style.setProperty("--max-size", e.target.value);
+									saveVal("FeedSize", e.target.value);
+									window.dispatchEvent(new Event("resize"));
+								},
+								$: (el) => {
+									requestAnimationFrame(() => {
+										el.value = getVal("FeedSize", 25);
+										el.oninput({ target: el });
+									});
+								},
+							}),
+						]),
+						$el("section.size-control.image-size-control", {}, [
+							$el("a", {
+								textContent: "Column count...",
+								style: {
+									cursor: "pointer",
+									textDecoration: "underline",
+								},
+								onclick: () => {
+									const v = +prompt("Enter custom column count", 20);
+									if (!isNaN(v)) {
+										updateColumnCount(v);
+									}
+								},
+							}),
+							$el("input", {
+								type: "range",
+								min: 1,
+								max: 10,
+								step: 1,
+								oninput: (e) => {
+									updateColumnCount(e.target.value);
+								},
+								$: (el) => {
+									columnInput = el;
+									requestAnimationFrame(() => {
+										updateColumnCount(getVal("ImageSize", 4));
+									});
+								},
+							}),
+						]),
+					]),
+				]),
+				$el("div.pysssss-image-feed-btn-group", {}, [clearButton, hideButton]),
+			]),
+			imageList
+		);
+		showButton.onclick = () => {
+			imageFeed.style.display = "flex";
+			showButton.style.display = "none";
+			if (showMenuButton) {
+				showMenuButton.enabled = false;
+				showMenuButton.element.style.display = "none";
+			}
+
+			saveVal("Visible", 1);
+			visible = true;
+			window.dispatchEvent(new Event("resize"));
+		};
+		document.querySelector(".comfy-settings-btn").after(showButton);
+		window.dispatchEvent(new Event("resize"));
+
+		if (!+getVal("Visible", 1)) {
+			hideButton.onclick();
+		}
+
+		api.addEventListener("executed", ({ detail }) => {
+			if (visible && detail?.output?.images) {
+				if (detail.node?.includes?.(":")) {
+					// Ignore group nodes
+					const n = app.graph.getNodeById(detail.node.split(":")[0]);
+					if (n?.getInnerNodes) return;
+				}
+
+				for (const src of detail.output.images) {
+					const href = `./view?filename=${encodeURIComponent(src.filename)}&type=${src.type}&
+					subfolder=${encodeURIComponent(src.subfolder)}&t=${+new Date()}`;
+
+					// deduplicateFeed.value is essentially the scaling factor used for image hashing
+					// but when deduplication is disabled, this value is "0"
+					if (deduplicateFeed.value > 0) {
+						// deduplicate by ignoring images with the same filename/type/subfolder
+						const fingerprint = JSON.stringify({ filename: src.filename, type: src.type, subfolder: src.subfolder });
+						if (seenImages.has(fingerprint)) {
+							// NOOP: image is a duplicate
+						} else {
+							seenImages.set(fingerprint, true);
+							let img = $el("img", { src: href })
+							img.onerror = () => {
+								// fall back to default behavior
+								addImageToFeed(href);
+							}
+							img.onload = () => {
+								// redraw the image onto a canvas to strip metadata (resize if performance mode)
+								let imgCanvas = document.createElement("canvas");
+								let imgScalar = deduplicateFeed.value;
+								imgCanvas.width = imgScalar * img.width;
+								imgCanvas.height = imgScalar * img.height;
+
+								let imgContext = imgCanvas.getContext("2d");
+								imgContext.drawImage(img, 0, 0, imgCanvas.width, imgCanvas.height);
+								const data = imgContext.getImageData(0, 0, imgCanvas.width, imgCanvas.height);
+
+								// calculate fast hash of the image data
+								let hash = 0;
+								for (const b of data.data) {
+									hash = ((hash << 5) - hash) + b;
+								}
+
+								// add image to feed if we've never seen the hash before
+								if (seenImages.has(hash)) {
+									// NOOP: image is a duplicate
+								} else {
+									// if we got to here, then the image is unique--so add to feed
+									seenImages.set(hash, true);
+									addImageToFeed(href);
+								}
+							}
+						}
+					} else {
+						addImageToFeed(href);
+					}
+				}
+			}
+		});
+	},
+});

custom_nodes/ComfyUI-Custom-Scripts/web/js/kSamplerAdvDenoise.js

@@ -0,0 +1,54 @@
+import { app } from "../../../scripts/app.js";
+app.registerExtension({
+	name: "pysssss.KSamplerAdvDenoise",
+	async beforeRegisterNodeDef(nodeType) {
+		// Add menu options to conver to/from widgets
+		const origGetExtraMenuOptions = nodeType.prototype.getExtraMenuOptions;
+		nodeType.prototype.getExtraMenuOptions = function (_, options) {
+			const r = origGetExtraMenuOptions?.apply?.(this, arguments);
+
+			let stepsWidget = null;
+			let startAtWidget = null;
+			let endAtWidget = null;
+			for (const w of this.widgets || []) {
+				if (w.name === "steps") {
+					stepsWidget = w;
+				} else if (w.name === "start_at_step") {
+					startAtWidget = w;
+				} else if (w.name === "end_at_step") {
+					endAtWidget = w;
+				}
+			}
+
+			if (stepsWidget && startAtWidget && endAtWidget) {
+				options.push(
+					{
+						content: "Set Denoise",
+						callback: () => {
+							const steps = +prompt("How many steps do you want?", 15);
+							if (isNaN(steps)) {
+								return;
+							}
+							const denoise = +prompt("How much denoise? (0-1)", 0.5);
+							if (isNaN(denoise)) {
+								return;
+							}
+
+							stepsWidget.value = Math.floor(steps / Math.max(0, Math.min(1, denoise)));
+							stepsWidget.callback?.(stepsWidget.value);
+
+							startAtWidget.value = stepsWidget.value - steps;
+							startAtWidget.callback?.(startAtWidget.value);
+
+							endAtWidget.value = stepsWidget.value;
+							endAtWidget.callback?.(endAtWidget.value);
+						},
+					},
+					null
+				);
+			}
+
+			return r;
+		};
+	},
+});

custom_nodes/ComfyUI-Custom-Scripts/web/js/linkRenderMode.js

@@ -0,0 +1,57 @@
+import { app } from "../../../scripts/app.js";
+import { $el } from "../../../scripts/ui.js";
+
+const id = "pysssss.LinkRenderMode";
+const ext = {
+	name: id,
+	async setup(app) {
+		if (app.extensions.find((ext) => ext.name === "Comfy.LinkRenderMode")) {
+			console.log("%c[🐍 pysssss]", "color: limegreen", "Skipping LinkRenderMode as core extension found");
+			return;
+		}
+		const setting = app.ui.settings.addSetting({
+			id,
+			name: "🐍 Link Render Mode",
+			defaultValue: 2,
+			type: () => {
+				return $el("tr", [
+					$el("td", [
+						$el("label", {
+							for: id.replaceAll(".", "-"),
+							textContent: "🐍 Link Render Mode:",
+						}),
+					]),
+					$el("td", [
+						$el(
+							"select",
+							{
+								textContent: "Manage",
+								style: {
+									fontSize: "14px",
+								},
+								oninput: (e) => {
+									setting.value = e.target.value;
+									app.canvas.links_render_mode = +e.target.value;
+									app.graph.setDirtyCanvas(true, true);
+								},
+							},
+							LiteGraph.LINK_RENDER_MODES.map((m, i) =>
+								$el("option", {
+									value: i,
+									textContent: m,
+									selected: i == app.canvas.links_render_mode,
+								})
+							)
+						),
+					]),
+				]);
+			},
+			onChange(value) {
+				app.canvas.links_render_mode = +value;
+				app.graph.setDirtyCanvas(true);
+			},
+		});
+	},
+};
+
+app.registerExtension(ext);

custom_nodes/ComfyUI-Custom-Scripts/web/js/locking.js

@@ -0,0 +1,186 @@
+import { app } from "../../../scripts/app.js";
+
+// Adds lock/unlock menu item for nodes + groups to prevent moving / resizing them
+
+const LOCKED = Symbol();
+
+function lockArray(arr, isLocked) {
+	if (!Array.isArray(arr)) return; // Prevent crash on es6
+	const v = [];
+
+	for (let i = 0; i < 2; i++) {
+		v[i] = arr[i];
+
+		Object.defineProperty(arr, i, {
+			get() {
+				return v[i];
+			},
+			set(value) {
+				if (!isLocked()) {
+					v[i] = value;
+				}
+			},
+		});
+	}
+}
+
+app.registerExtension({
+	name: "pysssss.Locking",
+	init() {
+		function lockGroup(node) {
+			node[LOCKED] = true;
+		}
+
+		// Add the locked flag to serialization
+		const serialize = LGraphGroup.prototype.serialize;
+		LGraphGroup.prototype.serialize = function () {
+			const o = serialize.apply(this, arguments);
+			o.locked = !!this[LOCKED];
+			return o;
+		};
+
+		// On initial configure lock group if required
+		const configure = LGraphGroup.prototype.configure;
+		LGraphGroup.prototype.configure = function (o) {
+			configure.apply(this, arguments);
+			if (o.locked) {
+				lockGroup(this);
+			}
+		};
+
+		// Allow click through locked groups
+		const getGroupOnPos = LGraph.prototype.getGroupOnPos;
+		LGraph.prototype.getGroupOnPos = function () {
+			const r = getGroupOnPos.apply(this, arguments);
+			if (r && r[LOCKED] && !new Error().stack.includes("processContextMenu")) return null;
+			return r;
+		};
+
+		// Add menu options for lock/unlock
+		const getGroupMenuOptions = LGraphCanvas.prototype.getGroupMenuOptions;
+		LGraphCanvas.prototype.getGroupMenuOptions = function (node) {
+			const opts = getGroupMenuOptions.apply(this, arguments);
+
+			opts.unshift(
+				node[LOCKED]
+					? {
+							content: "Unlock",
+							callback: () => {
+								delete node[LOCKED];
+							},
+					  }
+					: {
+							content: "Lock",
+							callback: () => lockGroup(node),
+					  },
+				null
+			);
+
+			return opts;
+		};
+	},
+	setup() {
+		const drawNodeShape = LGraphCanvas.prototype.drawNodeShape;
+		LGraphCanvas.prototype.drawNodeShape = function (node, ctx, size, fgcolor, bgcolor, selected, mouse_over) {
+			const res = drawNodeShape.apply(this, arguments);
+
+			if (node[LOCKED]) {
+				ctx.fillText("🔒", node.getBounding()[2] - 20, -10);
+			}
+
+			return res;
+		};
+	},
+	async beforeRegisterNodeDef(nodeType) {
+		const nodesArray = (nodes) => {
+			if (nodes) {
+				if (nodes instanceof Array) {
+					return nodes;
+				}
+				return [nodes];
+			}
+			return Object.values(app.canvas.selected_nodes);
+		};
+		function unlockNode(nodes) {
+			nodes = nodesArray(nodes);
+			for (const node of nodes) {
+				delete node[LOCKED];
+			}
+			app.graph.setDirtyCanvas(true, false);
+		}
+		function lockNode(nodes) {
+			nodes = nodesArray(nodes);
+			for (const node of nodes) {
+				if (node[LOCKED]) continue;
+
+				node[LOCKED] = true;
+				// Same hack as above
+				lockArray(node.pos, () => !!node[LOCKED]);
+
+				// Size is set by both replacing the value and setting individual values
+				// So define a new property that can prevent reassignment
+				const sz = [node.size[0], node.size[1]];
+				Object.defineProperty(node, "size", {
+					get() {
+						return sz;
+					},
+					set(value) {
+						if (!node[LOCKED]) {
+							sz[0] = value[0];
+							sz[1] = value[1];
+						}
+					},
+				});
+				// And then lock each element if required
+				lockArray(sz, () => !!node[LOCKED]);
+			}
+
+			app.graph.setDirtyCanvas(true, false);
+		}
+
+		// Add menu options for lock/unlock
+		const getExtraMenuOptions = nodeType.prototype.getExtraMenuOptions;
+		nodeType.prototype.getExtraMenuOptions = function (_, options) {
+			const r = getExtraMenuOptions ? getExtraMenuOptions.apply(this, arguments) : undefined;
+
+			options.splice(
+				options.findIndex((o) => o?.content === "Properties") + 1,
+				0,
+				null,
+				this[LOCKED]
+					? {
+							content: "Unlock",
+							callback: () => {
+								unlockNode();
+							},
+					  }
+					: {
+							content: "Lock",
+							callback: () => lockNode(),
+					  }
+			);
+
+			return r;
+		};
+
+		// Add the locked flag to serialization
+		const onSerialize = nodeType.prototype.onSerialize;
+		nodeType.prototype.onSerialize = function (o) {
+			if (onSerialize) {
+				onSerialize.apply(this, arguments);
+			}
+			o.locked = this[LOCKED];
+		};
+
+		// On initial configure lock node if required
+		const onConfigure = nodeType.prototype.onConfigure;
+		nodeType.prototype.onConfigure = function (o) {
+			if (onConfigure) {
+				onConfigure.apply(this, arguments);
+			}
+			if (o.locked) {
+				lockNode(this);
+			}
+		};
+	},
+});

custom_nodes/ComfyUI-Custom-Scripts/web/js/mathExpression.js

@@ -0,0 +1,44 @@
+import { app } from "../../../scripts/app.js";
+import { ComfyWidgets } from "../../../scripts/widgets.js";
+
+app.registerExtension({
+	name: "pysssss.MathExpression",
+	init() {
+		const STRING = ComfyWidgets.STRING;
+		ComfyWidgets.STRING = function (node, inputName, inputData) {
+			const r = STRING.apply(this, arguments);
+			r.widget.dynamicPrompts = inputData?.[1].dynamicPrompts;
+			return r;
+		};
+	},
+	beforeRegisterNodeDef(nodeType) {
+		if (nodeType.comfyClass === "MathExpression|pysssss") {
+			const onDrawForeground = nodeType.prototype.onDrawForeground;
+
+			nodeType.prototype.onNodeCreated = function() {
+				// These are typed as any to bypass backend validation
+				// update frontend to restrict types
+				for(const input of this.inputs) {
+					input.type = "INT,FLOAT,IMAGE,LATENT";
+				}
+			}
+
+			nodeType.prototype.onDrawForeground = function (ctx) {
+				const r = onDrawForeground?.apply?.(this, arguments);
+
+				const v = app.nodeOutputs?.[this.id + ""];
+				if (!this.flags.collapsed && v) {
+					const text = v.value[0] + "";
+					ctx.save();
+					ctx.font = "bold 12px sans-serif";
+					ctx.fillStyle = "dodgerblue";
+					const sz = ctx.measureText(text);
+					ctx.fillText(text, this.size[0] - sz.width - 5, LiteGraph.NODE_SLOT_HEIGHT * 3);
+					ctx.restore();
+				}
+
+				return r;
+			};
+		}
+	},
+});