ComfyUI-JNodes

python and web UX improvements for ComfyUI: * Lora/Embedding picker

• web extension manager (enable/disable any web extension without disabling python nodes)

• control any parameter with text prompts

• image and video viewer, metadata viewer

• token counter

• comments in prompts

• font control, and more!

Acknowledgement

thank you to: * Kosinkadink for the original work in VHS on which SaveVideo, UploadVisualMedia and LoadVisualMediaFromPath are based * pythongosssss for the original ImageFeed element on which ImageDrawer is based * Kijai for various code snippets that went into scripts such as statusTitle * mattiasw for his work on ExifReader

Project Support

Free, open-source software (FOSS) donations are my only source of income. If this suite has helped you at all, please consider donating:

Web Features

• EditAttention improvements (undo/redo support, remove spacing)
• Status (progress) indicators (percentage in title, custom favicon, progress bar on floating menu)

* Font control for textareas (see ComfyUI settings > JNodes) * Batch Commenting shortcuts: By default, click in any multiline textarea and press ctrl+shift+/ to comment out a line or lines, if highlighted. Requires the use of a JNodes_RemoveCommentedText node. The key combo and the text used to comment are both configurable in ComfyUI settings > JNodes.

In this example, the headings enclosed in "##" like "## Basic stuff ##" are commented out entirely. In the line "(worst quality, low quality:1.1), ## Works well sometimes, don't go above 1.3 or it will burn. Kills backgrounds ##", "(worst quality, low quality:1.1)," would be used while everything else would be commented out. In another line, "# deformed" would be commented out entirely because it's a single "#" at the beginning of the line. Note the node's fields corresponding to the text itself.

• Pan faster around the graph by holding ctrl+shift and moving the mouse.

Installation

• Clone this repo into "ComfyUI/custom_nodes" OR
• Install via ComfyUI Manager (search "JNodes") OR
• Download the zip file and unzip it into "ComfyUI/custom_nodes"
• Install requirements (pip install -r requirements.txt)

Settings

Open ComfyUI Settings by clicking the "Cog" icon on the floating toolbar and scroll down to "JNodes Settings." Expand the group by clicking the side-facing arrow beside the text. * Batch-commenting Hotkey: A key combo that, when pressed, will insert text at the beginning of the selected lines in a multiline textarea, assuming it is the active element. If no text is selected, the text will be inserted at the beginning of the line where the cursor currently sits. This text will not automatically dummy out any lines, you will need to pass the resulting text into a custom node that removes lines marked as 'commented'. * Batch-commenting Token: The token that will be inserted/removed when performing a batch comment operation * Extension Management: Deselect any unwanted web extensions to disable them. Select them again to re-enable them. Refresh your browser to see changes. Be extremely careful which extensions you disable.

• Image Drawer Anchor: To which part of the screen the screen the drawer should be docked
• Image Drawer Enabled: Toggle whether the drawer is enabled. Requires a page refresh. This is distinct from hiding the drawer - this stops the drawer code from loading entirely until re-enabled.
• Image Drawer Image & Video Key List Allow/Deny Toggle: Whether the terms listed in the Key List should be denied or allowed, excluding everything else. True = Allow list, False = Deny list.
• Image Drawer Image & Video Key List: A set of comma-separated names to include or exclude from the tooltips applied to images in the drawer. For example, we don't show the "prompt" or "workflow" values by default since they would be too lengthy.
• Image Drawer Image & Video Metadata Tooltip Toggle: Whether to show a tooltip with metadata when hovering images and videos in the drawer.
• Multiline Text Font Family: A typeface applied to all multiline text areas in the graph.
• Multiline Text Font Size (%): How large, as a percentage, the text in multiline text areas should be.
• Show Progress Bar Above menu: If true, a progress bar for the current node will be displayed above the Comfy floating menu.
• Show Progress in Title: If true, display progress for the current node in the title/tab of the browser, similar to Automatic1111.
• Use Custom Favicon: If true, display a custom favicon in the title/tab of the browser. Stored in "ComfyUI/custom_nodes/ComfyUI-JNodes/web/js/assets/", "favicon.ico" is used when a generation is not in progress while "favicon-active.ico" is used when one is.

ImageDrawer: Overview

Similar to pythongosssss's ImageFeed, but with a larger feature set. Searchable. Change Contexts with the Context Selector. Mouse over images in drawer to see exif/png_info. * On the top left of the drawer, find: * A "Hide" button (❌) that "closes" the drawer. It can be restored with the "Image" button (🖼️) next to the ComfyUI Settings "Cog" button on the floating toolbar. * The View Options flyout allows you to control how many images appear in a row and how large those images apppear. You can adjust them via sliders or click each underlined name to set a number directly. You'll also find a place to adjust the drawer's anchor point so you can adjust it to a position that feels comfortable for you. * The "Sync" button (🔄) which will restart all playing videos so that they may sync up better.

![image](https://github.com/JaredTherriault/ComfyUI-JNodes/assets/8760446/64285b1b-3739-4f7f-9c51-2d80aa65a21c)

• On the top right you'll find:
• A down-facing arrow. If you click it, many of the controls above the list will be hidden. Clicking it again will show the controls again.

• Select all/none

  • If any images are selected (see ContextSubdirectoryExplorer), some extra controls will be shown. You can recycle/delete all selected items with the Batch Recycle Button (♻️) or hide all selected with the Batch Removal Button (❌, not to be confused with the hide button on the left side). Note that Batch Removal only hides the images from view and does not delete them.

  

• Context Selector: Allows you to select different contexts to show different images, videos and models. See Contexts.

• Sort Type: Different contexts have different ways of being sorted, such as Date (file age), file size, filename, etc. Not all contexts support all sort types, so they will change between shifting of contexts. Of note is the Shuffle type. Shuffle will semi-randomly sort items in the list and enables a button (🔀) beside the Sort Type dropdown. Click it to shuffle again. Click and hold to set an automatic shuffle every x milliseconds. When in auto mode, click the button again or change the sort type to stop shuffling automatically.

• Search bar: A search filter for for items in the list, crawling metadata and filename. For generated images you can search for prompts and other parameters. For models you can search for civit.ai info. For everything else you can search for filename, subdirectory, and other things. Items that don't meet the criteria are temporarily hidden. You can clear the search (❌), swap between matching ALL search tokens or matching ANY of the search tokens (separated by space), or randomize search tokens (🎲).

• Context Toolbar: Here you can find controls specific to the currently selected context. See Contexts for more information about the controls in each toolbar.

ImageDrawer: Contexts

• Image Feed: A stream of your latest stable diffusion generations. Supports most image types and some video types like mp4. ContextFeed is not A ContextSubdirectoryExplorer, but most of the same information applies excepting the subdirectory selector, the Refresh button and the video controls. See below.
• Temp/History: A ContextSubdirectoryExplorer. Everything currently in the "temp" directory. This directory is cleared when comfy is restarted. Supports subdirectories.
• Input: A ContextSubdirectoryExplorer. Everything currently in the "input" directory.
• Output: A ContextSubdirectoryExplorer. Everything currently in the "output" directory.
• Lora/Lycoris: A ContextModel that displays your loras in a grid something like in a1111 and allows you copy the lora command in a1111 format as well as the trained words. Works best with loras downloaded with Civit Downloader. Loras are stored in "models/loras".
• Embeddings/Textual Inversions: A ContextModel similar to Loras, but what's in the "embeddings" directory.

ImageDrawer: ContextSubdirectoryExplorer

ContextSubdirectoryExplorer is a context type that displays the images and videos in a specific directory. * When one of these contexts is selected, the "root" directory's images are loaded first, but you can select any child directory using the subdirectory selector below the search field. * You can load all of the images and videos in the child directories of the current subdirectory by clicking "Include subdirectories", but be careful - it's dependent on your system, but trying to load too many images could cause a hard lock or out-of-memory errors if you run out of RAM. VRAM is managed by the drawer, but system RAM is not. This option is automatically disabled when switching subdirectories for safety. * A flyout of video options sits beside the "Include Subdirectories" checkbox - hover over it to reveal some controls for video playback such as autoplay, looping, control visibility, muting, volume, and playback rate. There's also the option to seek through videos using the mouse wheel, but this can be disabled through this menu if you don't like this function. * The Refresh button can be used to reload the current set of images and videos in case some are added or removed outside of the drawer's interface. * **T