initial push
This commit is contained in:
flipnism
@@ -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
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# the script does this
|
||||
|
||||
| hotkey | name | description |
|
||||
| ------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| ` \(backtick) | solomode | mute all node that are not link with current selected node  |
|
||||
| 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)) |
|
||||
+29
@@ -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"
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 269 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 295 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 307 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
@@ -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);
|
||||
Reference in New Issue
Block a user