From 5b4879b966753e86da51a4d6d79eed84520a30da Mon Sep 17 00:00:00 2001 From: Silversith Date: Thu, 6 Apr 2023 14:48:52 +0200 Subject: [PATCH] Create imageFeed.js imageFeed from pythongosssss added --- web/extensions/core/imageFeed.js | 90 ++++++++++++++++++++++++++++++++ 1 file changed, 90 insertions(+) create mode 100644 web/extensions/core/imageFeed.js diff --git a/web/extensions/core/imageFeed.js b/web/extensions/core/imageFeed.js new file mode 100644 index 000000000..f9922a74e --- /dev/null +++ b/web/extensions/core/imageFeed.js @@ -0,0 +1,90 @@ +import { api } from "/scripts/api.js"; +import { app } from "/scripts/app.js"; + +// Adds a list of images that are generated to the bottom of the page +// This script was created by pythongosssss +// https://github.com/pythongosssss/ComfyUI-Custom-Scripts +app.registerExtension({ + name: "Comfy.ImageFeed", + setup() { + const imageList = document.createElement("div"); + Object.assign(imageList.style, { + minHeight: "30px", + maxHeight: "300px", + width: "100vw", + position: "absolute", + bottom: 0, + background: "#333", + overflow: "auto", + }); + document.body.append(imageList); + + function makeButton(text, style) { + const btn = document.createElement("button"); + btn.type = "button"; + btn.textContent = text; + Object.assign(btn.style, { + ...style, + height: "20px", + cursor: "pointer", + position: "absolute", + top: "5px", + fontSize: "12px", + lineHeight: "12px", + }); + imageList.append(btn); + return btn; + } + + const showButton = document.createElement("button"); + const closeButton = makeButton("❌", { + width: "20px", + textIndent: "-4px", + right: "5px", + }); + closeButton.onclick = () => { + imageList.style.display = "none"; + showButton.style.display = "unset"; + }; + + const clearButton = makeButton("Clear", { + right: "30px", + }); + clearButton.onclick = () => { + imageList.replaceChildren(closeButton, clearButton); + }; + + showButton.classList.add("comfy-settings-btn"); + showButton.style.right = "16px"; + showButton.style.cursor = "pointer"; + showButton.style.display = "none"; + showButton.textContent = "🖼️"; + showButton.onclick = () => { + imageList.style.display = "block"; + showButton.style.display = "none"; + }; + document.querySelector(".comfy-settings-btn").after(showButton); + + api.addEventListener("executed", ({ detail }) => { + if (detail?.output?.images) { + for (const src of detail.output.images) { + const img = document.createElement("img"); + const a = document.createElement("a"); + a.href = `/view?filename=${encodeURIComponent(src.filename)}&type=${src.type}&subfolder=${encodeURIComponent( + src.subfolder + )}`; + a.target = "_blank"; + Object.assign(img.style, { + height: "120px", + width: "120px", + objectFit: "cover", + }); + + img.src = a.href; + a.append(img); + imageList.prepend(a); + } + } + }); + }, +}); \ No newline at end of file