From b5b4a26f6d8f553c7f35acd94f857763cc435005 Mon Sep 17 00:00:00 2001 From: Ethanfel Date: Tue, 24 Feb 2026 11:49:13 +0100 Subject: [PATCH] Add PreviewToLoad node for bridging preview images to LoadImage nodes Previews an image (like PreviewImage) and saves a copy to input/ so a LoadImage node can reference it. JS extension adds a target-node-ID widget and "Send to Load Image" button that updates the target's combo. Co-Authored-By: Claude Opus 4.6 --- __init__.py | 8 +++- image_preview.py | 111 +++++++++++++++++++++++++++++++++++++++++++ web/image_preview.js | 68 ++++++++++++++++++++++++++ 3 files changed, 185 insertions(+), 2 deletions(-) create mode 100644 image_preview.py create mode 100644 web/image_preview.js diff --git a/__init__.py b/__init__.py index 763f700..95ff234 100644 --- a/__init__.py +++ b/__init__.py @@ -6,9 +6,13 @@ from .string_utils import ( NODE_CLASS_MAPPINGS as _string_class_mappings, NODE_DISPLAY_NAME_MAPPINGS as _string_display_mappings, ) +from .image_preview import ( + NODE_CLASS_MAPPINGS as _image_class_mappings, + NODE_DISPLAY_NAME_MAPPINGS as _image_display_mappings, +) -NODE_CLASS_MAPPINGS = {**_json_class_mappings, **_string_class_mappings} -NODE_DISPLAY_NAME_MAPPINGS = {**_json_display_mappings, **_string_display_mappings} +NODE_CLASS_MAPPINGS = {**_json_class_mappings, **_string_class_mappings, **_image_class_mappings} +NODE_DISPLAY_NAME_MAPPINGS = {**_json_display_mappings, **_string_display_mappings, **_image_display_mappings} WEB_DIRECTORY = "./web" diff --git a/image_preview.py b/image_preview.py new file mode 100644 index 0000000..fb4c36b --- /dev/null +++ b/image_preview.py @@ -0,0 +1,111 @@ +import json +import os +import random + +import numpy as np +from PIL import Image +from PIL.PngImagePlugin import PngInfo + +import folder_paths +from comfy.cli_args import args + + +class JDL_PreviewToLoad: + """Previews an image and saves a copy to input/ for use by LoadImage nodes.""" + + def __init__(self): + self.output_dir = folder_paths.get_temp_directory() + self.type = "temp" + self.prefix_append = "_temp_" + ''.join( + random.choice("abcdefghijklmnopqrstupvxyz") for _ in range(5) + ) + self.compress_level = 1 + + @classmethod + def INPUT_TYPES(s): + return { + "required": { + "images": ("IMAGE",), + "filename": ("STRING", {"default": "preview"}), + }, + "hidden": { + "prompt": "PROMPT", + "extra_pnginfo": "EXTRA_PNGINFO", + }, + } + + RETURN_TYPES = () + FUNCTION = "preview_and_save" + OUTPUT_NODE = True + CATEGORY = "utils/image" + + def preview_and_save(self, images, filename="preview", prompt=None, extra_pnginfo=None): + # Save to temp/ for preview (same as PreviewImage) + filename_prefix = "ComfyUI" + self.prefix_append + full_output_folder, fname, counter, subfolder, filename_prefix = ( + folder_paths.get_save_image_path( + filename_prefix, self.output_dir, + images[0].shape[1], images[0].shape[0] + ) + ) + + results = [] + for batch_number, image in enumerate(images): + i = 255.0 * image.cpu().numpy() + img = Image.fromarray(np.clip(i, 0, 255).astype(np.uint8)) + + metadata = None + if not args.disable_metadata: + metadata = PngInfo() + if prompt is not None: + metadata.add_text("prompt", json.dumps(prompt)) + if extra_pnginfo is not None: + for x in extra_pnginfo: + metadata.add_text(x, json.dumps(extra_pnginfo[x])) + + temp_file = f"{fname}_{counter:05}_.png" + img.save( + os.path.join(full_output_folder, temp_file), + pnginfo=metadata, compress_level=self.compress_level, + ) + results.append({ + "filename": temp_file, + "subfolder": subfolder, + "type": self.type, + }) + counter += 1 + + # Save first image to input/ for LoadImage consumption + input_dir = folder_paths.get_input_directory() + safe_name = os.path.basename(filename).strip().strip(".") + if not safe_name: + safe_name = "preview" + input_filename = f"{safe_name}.png" + + first_image = 255.0 * images[0].cpu().numpy() + first_img = Image.fromarray(np.clip(first_image, 0, 255).astype(np.uint8)) + + metadata = None + if not args.disable_metadata: + metadata = PngInfo() + if prompt is not None: + metadata.add_text("prompt", json.dumps(prompt)) + if extra_pnginfo is not None: + for x in extra_pnginfo: + metadata.add_text(x, json.dumps(extra_pnginfo[x])) + + first_img.save( + os.path.join(input_dir, input_filename), + pnginfo=metadata, compress_level=4, + ) + + return {"ui": {"images": results, "input_filename": [input_filename]}} + + +NODE_CLASS_MAPPINGS = { + "JDL_PreviewToLoad": JDL_PreviewToLoad, +} + +NODE_DISPLAY_NAME_MAPPINGS = { + "JDL_PreviewToLoad": "Preview to Load Image", +} diff --git a/web/image_preview.js b/web/image_preview.js new file mode 100644 index 0000000..7443d6c --- /dev/null +++ b/web/image_preview.js @@ -0,0 +1,68 @@ +import { app } from "../../scripts/app.js"; + +app.registerExtension({ + name: "jdl.preview.to.load", + + async beforeRegisterNodeDef(nodeType, nodeData, app) { + if (nodeData.name !== "JDL_PreviewToLoad") return; + + const origOnNodeCreated = nodeType.prototype.onNodeCreated; + nodeType.prototype.onNodeCreated = function () { + origOnNodeCreated?.apply(this, arguments); + + this.addWidget("number", "load_image_node_id", 0, (v) => {}, { + min: 0, + max: 99999, + step: 10, + precision: 0, + }); + + this.addWidget("button", "Send to Load Image", null, () => { + const nodeIdWidget = this.widgets?.find(w => w.name === "load_image_node_id"); + if (!nodeIdWidget) return; + + const targetId = Math.round(nodeIdWidget.value); + const targetNode = app.graph.getNodeById(targetId); + if (!targetNode) { + console.warn("[PreviewToLoad] No node found with ID:", targetId); + return; + } + + const filename = this.last_input_filename; + if (!filename) { + console.warn("[PreviewToLoad] No filename available. Run the workflow first."); + return; + } + + const imageWidget = targetNode.widgets?.find(w => w.name === "image"); + if (!imageWidget) { + console.warn("[PreviewToLoad] Target node has no 'image' widget."); + return; + } + + // Add filename to combo options if not already present + if (imageWidget.options?.values && !imageWidget.options.values.includes(filename)) { + imageWidget.options.values.push(filename); + } + + imageWidget.value = filename; + if (imageWidget.callback) { + imageWidget.callback(filename); + } + + app.graph.setDirtyCanvas(true, true); + }); + + this.setSize(this.computeSize()); + }; + + const origOnExecuted = nodeType.prototype.onExecuted; + nodeType.prototype.onExecuted = function (output) { + origOnExecuted?.apply(this, arguments); + + if (output?.input_filename?.length) { + this.last_input_filename = output.input_filename[0]; + } + }; + }, +});