commit d60828a1fa4916524e360ba0d3815d4ae0b1fd92 Author: flipnism Date: Mon Sep 11 07:35:44 2023 +0700 initial push diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e69de29 diff --git a/README.md b/README.md new file mode 100644 index 0000000..5e879ef --- /dev/null +++ b/README.md @@ -0,0 +1,18 @@ +# ComfyUI Ricing + +some additional script for [ComfyUI ](https://github.com/comfyanonymous/ComfyUI) frontend. UI mostly + +# what is it? + +it will replace `user.css` on `./ComfyUI/web` folder + +![](image/image1.png) +![](image/image2.png) +![](image/image3.png) + +# the script does this + +| hotkey | name | description | +| ------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ` \(backtick) | solomode | mute all node that are not link with current selected node ![](image/solomode.gif) | +| alt | reroute add | holding `alt key` while clicking on the dot in the middle of the connector will automatically add a reroute node (credit to [melMass](https://github.com/melMass/ComfyUI/commits?author=melMass))![](image/preview.gif) | diff --git a/__init__.py b/__init__.py new file mode 100644 index 0000000..cf22c7d --- /dev/null +++ b/__init__.py @@ -0,0 +1,29 @@ +import folder_paths +import os +import hashlib + +comfy_path = os.path.dirname(folder_paths.__file__) +js_path = os.path.join(comfy_path, "web") + +def sha256sum(filename): + with open(filename, 'rb', buffering=0) as f: + return hashlib.file_digest(f, 'sha256').hexdigest() +def need_update(): + return sha256sum('user.css')!=sha256sum(os.path.join(js_path,'user.css')) + + + +cur_css = "" +if need_update(): + print('updating user.css') + with open(os.path.join(os.path.dirname(__file__), "user.css")) as file: + cur_css = file.read() + with open(os.path.join(js_path, "user.css"), "w") as f: + f.write(cur_css) + + + + + + +WEB_DIRECTORY = "./web" diff --git a/__pycache__/__init__.cpython-311.pyc b/__pycache__/__init__.cpython-311.pyc new file mode 100644 index 0000000..8956d6b Binary files /dev/null and b/__pycache__/__init__.cpython-311.pyc differ diff --git a/image/image1.png b/image/image1.png new file mode 100644 index 0000000..b957135 Binary files /dev/null and b/image/image1.png differ diff --git a/image/image2.png b/image/image2.png new file mode 100644 index 0000000..a560276 Binary files /dev/null and b/image/image2.png differ diff --git a/image/image3.png b/image/image3.png new file mode 100644 index 0000000..8a8f16b Binary files /dev/null and b/image/image3.png differ diff --git a/image/preview.gif b/image/preview.gif new file mode 100644 index 0000000..a4f8a9e Binary files /dev/null and b/image/preview.gif differ diff --git a/image/solomode.gif b/image/solomode.gif new file mode 100644 index 0000000..b42f0d1 Binary files /dev/null and b/image/solomode.gif differ diff --git a/user.css b/user.css new file mode 100644 index 0000000..ee371be --- /dev/null +++ b/user.css @@ -0,0 +1,200 @@ +@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Barlow:wght@300;400&display=swap"); + +* { + --mainbg: #222; + --mainfont: "Barlow"; + --titlefont: "Barlow Condensed"; + font-family: var(--mainfont); + font-size: 1rem; + font-weight: 200; + --queue-btn-size: 1.5rem; + --size-xsmol: 0.6rem; + --size-smol: 0.8rem; + --size-med: 1rem; + --size-big: 2rem; +} +table, +td, +tr, +tbody, +thead { + font-size: var(--size-smol); +} +thead { + font-size: var(--size-med) !important; + padding: 0 var(--size-med) !important; +} +.comfy-menu { + z-index: 1; +} +.comfy-menu, +.comfy-modal { + background-color: var(--mainbg); + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5); +} +select, +option { + appearance: none; + background-color: transparent; + border: none !important; + padding: 0 1em 0 0; + margin: 0; + width: 100%; + font-size: var(--size-smol) !important; + border-radius: 0px !important; + padding: 0.1rem 1rem !important; +} +select:focus { + border: none !important; +} +input[type="text"] { + border: none; + border-radius: 0; + border-bottom: solid 1px #333; + text-decoration: none; +} +input[type="text"]:focus { + border: none; + border-bottom: 1px dashed #d9ffa9; + outline: 0; +} +.comfy-menu { + display: flex; + flex-direction: column; + width: auto; + padding: 1rem; + max-width: 180px !important; + height: auto; + overflow: hidden; + transition: height 0.5s ease-in-out; +} +.comfy-menu > div:nth-child(3) { + margin-top: 5px; +} + +.comfy-menu > button { + font-family: var(--titlefont); + border: solid 0px #000; + border-radius: 0.3rem; + font-weight: 600; + font-size: var(--size-smol); + + padding: 10px 5px; + background: #222; + margin: 5px 0px; +} +.comfy-list-items > button, +.comfy-list-actions > button, +.comfy-menu-btns > button { + background: #111 !important; + font-size: var(--size-xsmol) !important; + padding: 2px 1rem !important; + box-shadow: none; +} +.comfy-list { +} +.drag-handle { + padding: 20px 0; +} +.drag-handle > span { + cursor: move; + font-weight: 100; + color: #fff; + font-size: var(--size-smol); + -webkit-user-select: none; /* Safari */ + -ms-user-select: none; /* IE 10 and IE 11 */ + user-select: none; /* Standard syntax */ +} +.comfy-queue-btn { + background-color: rgb(212, 30, 30) !important; + font-size: var(--queue-btn-size) !important; + color: #fff; + text-transform: uppercase; + font-weight: 900; +} +.comfy-menu-btns > button { + border: solid 0px rgb(36, 26, 26); + margin: 3px 3; + background-color: #2e2e2e; +} +.comfy-menu-btns { + margin: 5px 0; +} +#extraOptions > label { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: flex-end; +} +#extraOptions > label > input { + width: 20% !important; + box-sizing: border-box; + background: #222; + border: transparent; + margin: 0; + padding: 0; + color: #fff; + font-size: var(--size-smol); + text-align: center; + padding: 9px 0px; +} +#extraOptions > label > input:nth-child(2) { + width: 50% !important; + padding: 3px 0px; +} +textarea { + font-family: var(--mainfont); + font-size: var(--size-smol) !important; + padding: 0.5rem !important; + text-transform: none; +} +button, +button.cm-btn-disable, +button.cm-btn-install { + font-family: var(--titlefont); + border: solid 0px #000; + border-radius: 0.3rem !important; + font-weight: 300; + font-size: var(--size-med) !important; + box-shadow: 0 2px 5px #111; + padding: 0.2rem 0.5rem !important; + background: #222; + margin: 0.2rem 0px; +} + +.cm-node-author { + font-size: var(--size-smol); + font-weight: 600; +} +.cm-node-name > a, +.cm-node-name > a > font > b { + text-decoration: none; + font-size: var(--size-smol); + font-weight: 600; + color: #fd0; +} +.cm-node-desc { + padding: 1rem 0.2rem; +} +.cm-node-desc > p { + font-size: var(--size-smol); + padding: 0.3rem 1rem; + background-color: #bd2121 !important; + color: #fff !important; + border-radius: 0.3rem; +} +.cm-node-filename { + background-color: #111; + border-radius: 0.2rem; + color: #fff; + padding: 0.1rem; + margin: 0; +} +.comfy-modal-content > tr.td, +.comfy-modal-content > tr > font { + font-family: var(--titlefont); + font-weight: 600; + font-size: var(--size-big); + text-transform: uppercase; + background-color: transparent !important; +} diff --git a/web/interface.js b/web/interface.js new file mode 100644 index 0000000..9cf1f5a --- /dev/null +++ b/web/interface.js @@ -0,0 +1,73 @@ +import { app } from "../../../scripts/app.js"; +let is_hide = false; + +function reroute_me(node) { + node.size = [10, 10] + console.log(node); +} + +const ext = { + name: "julnodes.interface", + init(app) { + + const handle = document.querySelector(".drag-handle"); + const thebutton = document.querySelector(".comfy-queue-btn").nextSibling; + const ui = document.querySelector(".comfy-menu"); + handle.addEventListener("dblclick", (e) => { + ui.style.height = is_hide ? "auto" : "90px"; + thebutton.style.marginTop = is_hide ? "5px" : "20px"; + is_hide = !is_hide; + }); + + const showLinkMenu = LGraphCanvas.prototype.showLinkMenu; + LGraphCanvas.prototype.showLinkMenu = function (link, e) { + var that = app; + var node_left = that.graph.getNodeById(link.origin_id); + var node_right = that.graph.getNodeById(link.target_id); + + + if (e.altKey) { + var node = LiteGraph.createNode("Reroute"); + that.graph.add(node, true, { doProcess: false }); + node_left.connect(link.origin_slot, node, 0) + node_right.disconnectInput(link.target_slot) + node.connect(0, node_right, link.target_slot); + node.pos = [e.canvasX, e.canvasY]; + + node.pos[0] -= node.size[0] * 0.5; + return + } else { + showLinkMenu.apply(app, arguments); + } + + } + const collapse = LGraphNode.prototype.collapse; + LGraphNode.prototype.collapse = function () { + console.log("asd"); + collapse.apply(this, arguments); + } + + }, + setup(app) { + + const menu = document.querySelector(".comfy-menu"); + const managerButton = document.createElement("button"); + managerButton.textContent = "Copy API to Clipboard"; + managerButton.onclick = () => { + app.graphToPrompt().then(p => { + const json = JSON.stringify(p.output, null, 2); + navigator.clipboard.writeText(json); + }) + + } + + menu.append(managerButton); + }, + async beforeRegisterNodeDef(nodeType, nodeData, app) { + if (nodeData.name == "Reroute") { + console.log("Hello"); + } + } + +}; +app.registerExtension(ext); \ No newline at end of file diff --git a/web/solomode.js b/web/solomode.js new file mode 100644 index 0000000..847841d --- /dev/null +++ b/web/solomode.js @@ -0,0 +1,69 @@ +import { app } from "../../../scripts/app.js"; + + +function concate_arr(arrays) { + let changed = true; + + while (changed) { + changed = false; + + for (let i = 0; i < arrays.length; i++) { + for (let j = i + 1; j < arrays.length; j++) { + if (arrays[i].some(val => arrays[j].includes(val))) { + arrays[i] = [...new Set([...arrays[i], ...arrays[j]])]; + arrays.splice(j, 1); + changed = true; + break; + } + } + if (changed) { + break; + } + } + } + + return arrays; +} +const ext = { + name: "julnodes.SoloMode", + init(app) { + + window.addEventListener("keydown", (e) => { + if (e.key == "`") { + const selected_nodes = app.graph._nodes.filter(e => e.is_selected); + const _ia = app.graph.links.map(e => [e.origin_id, e.target_id]).filter(e => e != null) + const result = concate_arr(_ia); + if (selected_nodes.length <= 0) { + app.graph._nodes.forEach(e => e.changeMode(0)); + return; + } + const selected_node_id = selected_nodes.map(e => e.id)[0]; + const selected_ids = result.filter(e => e.includes(selected_node_id))[0] + + + for (const n of app.graph._nodes) { + n.changeMode(selected_ids.includes(n.id) ? 0 : 2) + } + } + }) + + + + }, + setup(app) { + + + }, + beforeRegisterNodeDef(nodeType) { + + + }, + + nodeCreated(node, app) { + + + + } +}; + +app.registerExtension(ext); \ No newline at end of file diff --git a/web/ui.js b/web/ui.js new file mode 100644 index 0000000..e69de29