mirror of
https://github.com/comfyanonymous/ComfyUI.git
synced 2025-01-10 18:05:16 +00:00
More work on UI
This commit is contained in:
pythongosssss
parent
5e66b68d9e
commit
a5c5c97ded
@ -144,7 +144,12 @@ class PromptServer():
|
||||
self.prompt_queue.delete_queue_item(delete_func)
|
||||
|
||||
return web.Response(status=200)
|
||||
|
||||
|
||||
@routes.post("/interrupt")
|
||||
async def post_interrupt(request):
|
||||
nodes.interrupt_processing()
|
||||
return web.Response(status=200)
|
||||
|
||||
@routes.post("/history")
|
||||
async def post_history(request):
|
||||
json_data = await request.json()
|
||||
|
||||
175
web/index.html
175
web/index.html
@ -20,30 +20,6 @@
|
||||
let progress = null;
|
||||
let clientId = null;
|
||||
|
||||
function clearGraph() {
|
||||
graph.clear();
|
||||
}
|
||||
|
||||
function loadTxt2Img() {
|
||||
loadGraphData(graph, default_graph);
|
||||
}
|
||||
|
||||
function saveGraph() {
|
||||
var json = JSON.stringify(graph.serialize()); // convert the data to a JSON string
|
||||
var blob = new Blob([json], { type: "application/json" });
|
||||
var url = URL.createObjectURL(blob);
|
||||
var a = document.createElement("a");
|
||||
a.style = "display: none";
|
||||
a.href = url;
|
||||
a.download = "workflow.json";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
setTimeout(function () {
|
||||
document.body.removeChild(a);
|
||||
window.URL.revokeObjectURL(url);
|
||||
}, 0);
|
||||
}
|
||||
|
||||
var input = document.createElement("input");
|
||||
input.setAttribute("type", "file");
|
||||
input.setAttribute("accept", ".json,image/png");
|
||||
@ -58,157 +34,6 @@
|
||||
function loadGraph() {
|
||||
input.click();
|
||||
}
|
||||
|
||||
document.addEventListener("paste", (e) => {
|
||||
let data = (e.clipboardData || window.clipboardData).getData("text/plain");
|
||||
console.log(data);
|
||||
|
||||
try {
|
||||
data = data.slice(data.indexOf("{"));
|
||||
j = JSON.parse(data);
|
||||
} catch (err) {
|
||||
data = data.slice(data.indexOf("workflow\n"));
|
||||
data = data.slice(data.indexOf("{"));
|
||||
j = JSON.parse(data);
|
||||
}
|
||||
|
||||
if (Object.hasOwn(j, "version") && Object.hasOwn(j, "nodes") && Object.hasOwn(j, "extra")) {
|
||||
loadGraphData(graph, j);
|
||||
}
|
||||
});
|
||||
|
||||
function deleteQueueElement(type, delete_id, then) {
|
||||
fetch("/" + type, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ delete: [delete_id] }),
|
||||
})
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
then();
|
||||
})
|
||||
.catch((error) => console.error(error));
|
||||
}
|
||||
|
||||
function loadQueue() {
|
||||
loadItems("queue");
|
||||
}
|
||||
function loadHistory() {
|
||||
loadItems("history");
|
||||
}
|
||||
function loadItems(type) {
|
||||
fetch("/" + type)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
var queue_div = document.getElementById(type + "button-content");
|
||||
queue_div.style.display = "block";
|
||||
var see_queue_button = document.getElementById("see" + type + "button");
|
||||
let old_w = see_queue_button.style.width;
|
||||
see_queue_button.innerHTML = "Close";
|
||||
|
||||
let runningcontents;
|
||||
if (type === "queue") {
|
||||
runningcontents = document.getElementById("runningcontents");
|
||||
runningcontents.innerHTML = "";
|
||||
}
|
||||
let queuecontents = document.getElementById(type + "contents");
|
||||
queuecontents.innerHTML = "";
|
||||
function append_to_list(list_element, append_to_element, append_delete, state) {
|
||||
let number = list_element[0];
|
||||
let id = list_element[1];
|
||||
let prompt = list_element[2];
|
||||
let workflow = list_element[3].extra_pnginfo.workflow;
|
||||
let a = document.createElement("a");
|
||||
a.innerHTML = number + ": ";
|
||||
append_to_element.appendChild(a);
|
||||
let button = document.createElement("button");
|
||||
button.innerHTML = "Load";
|
||||
button.style.fontSize = "10px";
|
||||
button.workflow = workflow;
|
||||
button.onclick = function (event) {
|
||||
loadGraphData(graph, event.target.workflow);
|
||||
if (state) {
|
||||
nodeOutputs = state;
|
||||
}
|
||||
};
|
||||
|
||||
append_to_element.appendChild(button);
|
||||
if (append_delete) {
|
||||
let button = document.createElement("button");
|
||||
button.innerHTML = "Delete";
|
||||
button.style.fontSize = "10px";
|
||||
button.delete_id = id;
|
||||
button.onclick = function (event) {
|
||||
deleteQueueElement(type, event.target.delete_id, () => loadItems(type));
|
||||
};
|
||||
append_to_element.appendChild(button);
|
||||
}
|
||||
append_to_element.appendChild(document.createElement("br"));
|
||||
}
|
||||
|
||||
if (runningcontents) {
|
||||
for (let x in data.queue_running) {
|
||||
append_to_list(data.queue_running[x], runningcontents, false);
|
||||
}
|
||||
}
|
||||
|
||||
let items;
|
||||
if (type === "queue") {
|
||||
items = data.queue_pending;
|
||||
} else {
|
||||
items = Object.values(data);
|
||||
}
|
||||
items.sort((a, b) => a[0] - b[0]);
|
||||
for (let i of items) {
|
||||
append_to_list(type === "queue" ? i : i.prompt, queuecontents, true, i.outputs);
|
||||
}
|
||||
})
|
||||
.catch((response) => {
|
||||
console.log(response);
|
||||
});
|
||||
}
|
||||
|
||||
function seeItems(type) {
|
||||
var queue_div = document.getElementById(type + "button-content");
|
||||
if (queue_div.style.display == "block") {
|
||||
closeItems(type);
|
||||
} else {
|
||||
loadItems(type);
|
||||
}
|
||||
}
|
||||
|
||||
function seeQueue() {
|
||||
closeItems("history");
|
||||
seeItems("queue");
|
||||
}
|
||||
|
||||
function seeHistory() {
|
||||
closeItems("queue");
|
||||
seeItems("history");
|
||||
}
|
||||
|
||||
function closeItems(type) {
|
||||
var queue_div = document.getElementById(type + "button-content");
|
||||
queue_div.style.display = "none";
|
||||
var see_queue_button = document.getElementById("see" + type + "button");
|
||||
see_queue_button.innerHTML = "See " + type[0].toUpperCase() + type.substr(1);
|
||||
}
|
||||
|
||||
function clearItems(type) {
|
||||
fetch("/" + type, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ clear: true }),
|
||||
})
|
||||
.then((data) => {
|
||||
loadItems(type);
|
||||
})
|
||||
.catch((error) => console.error(error));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
class ComfyApi extends EventTarget {
|
||||
constructor() {
|
||||
super();
|
||||
super();
|
||||
}
|
||||
|
||||
#pollQueue() {
|
||||
@ -74,9 +74,9 @@ class ComfyApi extends EventTarget {
|
||||
});
|
||||
}
|
||||
|
||||
init() {
|
||||
this.#createSocket();
|
||||
}
|
||||
init() {
|
||||
this.#createSocket();
|
||||
}
|
||||
|
||||
async getNodeDefs() {
|
||||
const resp = await fetch("object_info", { cache: "no-store" });
|
||||
@ -110,6 +110,64 @@ class ComfyApi extends EventTarget {
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
async getItems(type) {
|
||||
if (type === "queue") {
|
||||
return this.getQueue();
|
||||
}
|
||||
return this.getHistory();
|
||||
}
|
||||
|
||||
async getQueue() {
|
||||
try {
|
||||
const res = await fetch("/queue");
|
||||
const data = await res.json();
|
||||
return {
|
||||
// Running action uses a different endpoint for cancelling
|
||||
Running: data.queue_running.map((prompt) => ({ prompt, remove: { name: "Cancel", cb: () => api.interrupt() } })),
|
||||
Pending: data.queue_pending.map((prompt) => ({ prompt })),
|
||||
};
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return { Running: [], Pending: [] };
|
||||
}
|
||||
}
|
||||
|
||||
async getHistory() {
|
||||
try {
|
||||
const res = await fetch("/history");
|
||||
return { History: Object.values(await res.json()) };
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return { History: [] };
|
||||
}
|
||||
}
|
||||
|
||||
async #postItem(type, body) {
|
||||
try {
|
||||
await fetch("/" + type, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: body ? JSON.stringify(body) : undefined,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
async deleteItem(type, id) {
|
||||
await this.#postItem(type, { delete: [id] });
|
||||
}
|
||||
|
||||
async clearItems(type) {
|
||||
await this.#postItem(type, { clear: true });
|
||||
}
|
||||
|
||||
async interrupt() {
|
||||
await this.#postItem("interrupt", null);
|
||||
}
|
||||
}
|
||||
|
||||
export const api = new ComfyApi();
|
||||
|
||||
@ -313,8 +313,27 @@ class ComfyApp {
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
prompt_file_load(file);
|
||||
#addPasteHandler() {
|
||||
document.addEventListener("paste", (e) => {
|
||||
let data = (e.clipboardData || window.clipboardData).getData("text/plain");
|
||||
let workflow;
|
||||
try {
|
||||
data = data.slice(data.indexOf("{"));
|
||||
workflow = JSON.parse(data);
|
||||
} catch (err) {
|
||||
try {
|
||||
data = data.slice(data.indexOf("workflow\n"));
|
||||
data = data.slice(data.indexOf("{"));
|
||||
workflow = JSON.parse(data);
|
||||
} catch (error) {}
|
||||
}
|
||||
|
||||
if (workflow && workflow.version && workflow.nodes && workflow.extra) {
|
||||
this.loadGraphData(workflow);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -367,13 +386,17 @@ class ComfyApp {
|
||||
}
|
||||
|
||||
#addApiUpdateHandlers() {
|
||||
api.addEventListener("status", (status) => {
|
||||
console.log(status);
|
||||
api.addEventListener("status", ({ detail }) => {
|
||||
this.ui.setStatus(detail);
|
||||
});
|
||||
|
||||
api.addEventListener("reconnecting", () => {});
|
||||
api.addEventListener("reconnecting", () => {
|
||||
this.ui.dialog.show("Reconnecting...");
|
||||
});
|
||||
|
||||
api.addEventListener("reconnected", () => {});
|
||||
api.addEventListener("reconnected", () => {
|
||||
this.ui.dialog.close();
|
||||
});
|
||||
|
||||
api.addEventListener("progress", ({ detail }) => {
|
||||
this.progress = detail;
|
||||
@ -386,7 +409,9 @@ class ComfyApp {
|
||||
this.graph.setDirtyCanvas(true, false);
|
||||
});
|
||||
|
||||
api.addEventListener("executed", (e) => {});
|
||||
api.addEventListener("executed", ({ detail }) => {
|
||||
this.nodeOutputs[detail.node] = detail.output;
|
||||
});
|
||||
|
||||
api.init();
|
||||
}
|
||||
@ -431,7 +456,7 @@ class ComfyApp {
|
||||
|
||||
// We failed to restore a workflow so load the default
|
||||
if (!restored) {
|
||||
this.loadGraphData(defaultGraph);
|
||||
this.loadGraphData();
|
||||
}
|
||||
|
||||
// Save current workflow automatically
|
||||
@ -440,6 +465,8 @@ class ComfyApp {
|
||||
this.#addDrawNodeProgressHandler();
|
||||
this.#addApiUpdateHandlers();
|
||||
this.#addDropHandler();
|
||||
this.#addPasteHandler();
|
||||
|
||||
await this.#invokeExtensionsAsync("setup");
|
||||
}
|
||||
|
||||
@ -511,6 +538,9 @@ class ComfyApp {
|
||||
* @param {*} graphData A serialized graph object
|
||||
*/
|
||||
loadGraphData(graphData) {
|
||||
if (!graphData) {
|
||||
graphData = defaultGraph;
|
||||
}
|
||||
this.graph.configure(graphData);
|
||||
|
||||
for (const node of this.graph._nodes) {
|
||||
@ -526,7 +556,7 @@ class ComfyApp {
|
||||
if (node.type == "KSampler" || node.type == "KSamplerAdvanced") {
|
||||
if (widget.name == "sampler_name") {
|
||||
if (widget.value.startsWith("sample_")) {
|
||||
wid.value = widget.value.slice(7);
|
||||
widget.value = widget.value.slice(7);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
9
web/scripts/extensions.js
Normal file
9
web/scripts/extensions.js
Normal file
@ -0,0 +1,9 @@
|
||||
export class ComfyExtension {
|
||||
init(app) {}
|
||||
setup(app) {}
|
||||
loadedGraphNode(node, app) {}
|
||||
addCustomNodeDefs(defs, app) {}
|
||||
getCustomWidgets(app) {}
|
||||
beforeRegisterNode(nodeType, nodeData, app) {}
|
||||
registerCustomNodes(app) {}
|
||||
}
|
||||
@ -1,23 +1,47 @@
|
||||
import { api } from "./api.js";
|
||||
|
||||
function $el(tag, propsOrChildren, children) {
|
||||
const split = tag.split(".");
|
||||
const element = document.createElement(split.shift());
|
||||
element.classList.add(...split);
|
||||
if (propsOrChildren) {
|
||||
if (Array.isArray(propsOrChildren)) {
|
||||
element.append(...propsOrChildren);
|
||||
} else {
|
||||
const parent = propsOrChildren.parent;
|
||||
delete propsOrChildren.parent;
|
||||
const cb = propsOrChildren.$;
|
||||
delete propsOrChildren.$;
|
||||
|
||||
Object.assign(element, propsOrChildren);
|
||||
if (children) {
|
||||
element.append(...children);
|
||||
}
|
||||
|
||||
if (parent) {
|
||||
parent.append(element);
|
||||
}
|
||||
|
||||
if (cb) {
|
||||
cb(element);
|
||||
}
|
||||
}
|
||||
}
|
||||
return element;
|
||||
}
|
||||
|
||||
class ComfyDialog {
|
||||
constructor() {
|
||||
this.element = document.createElement("div");
|
||||
this.element.classList.add("comfy-modal");
|
||||
|
||||
const content = document.createElement("div");
|
||||
content.classList.add("comfy-modal-content");
|
||||
this.textElement = document.createElement("p");
|
||||
content.append(this.textElement);
|
||||
|
||||
const closeBtn = document.createElement("button");
|
||||
closeBtn.type = "button";
|
||||
closeBtn.textContent = "CLOSE";
|
||||
content.append(closeBtn);
|
||||
closeBtn.onclick = () => this.close();
|
||||
|
||||
this.element.append(content);
|
||||
document.body.append(this.element);
|
||||
this.element = $el("div.comfy-modal", { parent: document.body }, [
|
||||
$el("div.comfy-modal-content", [
|
||||
$el("p", { $: (p) => (this.textElement = p) }),
|
||||
$el("button", {
|
||||
type: "button",
|
||||
textContent: "CLOSE",
|
||||
onclick: () => this.close(),
|
||||
}),
|
||||
]),
|
||||
]);
|
||||
}
|
||||
|
||||
close() {
|
||||
@ -31,10 +55,14 @@ class ComfyDialog {
|
||||
}
|
||||
|
||||
class ComfyList {
|
||||
constructor() {
|
||||
this.element = document.createElement("div");
|
||||
#type;
|
||||
#text;
|
||||
|
||||
constructor(text, type) {
|
||||
this.#text = text;
|
||||
this.#type = type || text.toLowerCase();
|
||||
this.element = $el("div.comfy-list");
|
||||
this.element.style.display = "none";
|
||||
this.element.textContent = "hello";
|
||||
}
|
||||
|
||||
get visible() {
|
||||
@ -42,7 +70,51 @@ class ComfyList {
|
||||
}
|
||||
|
||||
async load() {
|
||||
// const queue = await api.getQueue();
|
||||
const items = await api.getItems(this.#type);
|
||||
this.element.replaceChildren(
|
||||
...Object.keys(items).flatMap((section) => [
|
||||
$el("h4", {
|
||||
textContent: section,
|
||||
}),
|
||||
$el("div.comfy-list-items", [
|
||||
...items[section].map((item) => {
|
||||
// Allow items to specify a custom remove action (e.g. for interrupt current prompt)
|
||||
const removeAction = item.remove || {
|
||||
name: "Delete",
|
||||
cb: () => api.deleteItem(this.#type, item.prompt[1]),
|
||||
};
|
||||
return $el("div", { textContent: item.prompt[0] + ": " }, [
|
||||
$el("button", {
|
||||
textContent: "Load",
|
||||
onclick: () => {
|
||||
if (item.outputs) {
|
||||
app.nodeOutputs = item.outputs;
|
||||
}
|
||||
app.loadGraphData(item.prompt[3].extra_pnginfo.workflow);
|
||||
},
|
||||
}),
|
||||
$el("button", {
|
||||
textContent: removeAction.name,
|
||||
onclick: async () => {
|
||||
await removeAction.cb();
|
||||
await this.update();
|
||||
},
|
||||
}),
|
||||
]);
|
||||
}),
|
||||
]),
|
||||
]),
|
||||
$el("div.comfy-list-actions", [
|
||||
$el("button", {
|
||||
textContent: "Clear " + this.#text,
|
||||
onclick: async () => {
|
||||
await api.clearItems(this.#type);
|
||||
await this.load();
|
||||
},
|
||||
}),
|
||||
$el("button", { textContent: "Refresh", onclick: () => this.load() }),
|
||||
])
|
||||
);
|
||||
}
|
||||
|
||||
async update() {
|
||||
@ -53,11 +125,14 @@ class ComfyList {
|
||||
|
||||
async show() {
|
||||
this.element.style.display = "block";
|
||||
this.button.textContent = "Close";
|
||||
|
||||
await this.load();
|
||||
}
|
||||
|
||||
hide() {
|
||||
this.element.style.display = "none";
|
||||
this.button.textContent = "See " + this.#text;
|
||||
}
|
||||
|
||||
toggle() {
|
||||
@ -75,77 +150,78 @@ export class ComfyUI {
|
||||
constructor(app) {
|
||||
this.app = app;
|
||||
this.dialog = new ComfyDialog();
|
||||
this.queue = new ComfyList();
|
||||
this.history = new ComfyList();
|
||||
|
||||
this.menuContainer = document.createElement("div");
|
||||
this.menuContainer.classList.add("comfy-menu");
|
||||
this.queue = new ComfyList("Queue");
|
||||
this.history = new ComfyList("History");
|
||||
|
||||
this.queueSize = document.createElement("span");
|
||||
this.menuContainer.append(this.queueSize);
|
||||
|
||||
this.addAction("Queue Prompt", () => {
|
||||
app.queuePrompt(0);
|
||||
}, "queue");
|
||||
|
||||
this.btnContainer = document.createElement("div");
|
||||
this.btnContainer.classList.add("comfy-menu-btns");
|
||||
this.menuContainer.append(this.btnContainer);
|
||||
|
||||
this.addAction(
|
||||
"Queue Front",
|
||||
() => {
|
||||
app.queuePrompt(-1);
|
||||
},
|
||||
"sm"
|
||||
);
|
||||
|
||||
this.addAction(
|
||||
"See Queue",
|
||||
(btn) => {
|
||||
btn.textContent = this.queue.toggle() ? "Close" : "See Queue";
|
||||
},
|
||||
"sm"
|
||||
);
|
||||
|
||||
this.addAction(
|
||||
"See History",
|
||||
(btn) => {
|
||||
btn.textContent = this.history.toggle() ? "Close" : "See History";
|
||||
},
|
||||
"sm"
|
||||
);
|
||||
|
||||
this.menuContainer.append(this.queue.element);
|
||||
this.menuContainer.append(this.history.element);
|
||||
|
||||
this.addAction("Save", () => {
|
||||
app.queuePrompt(-1);
|
||||
});
|
||||
this.addAction("Load", () => {
|
||||
app.queuePrompt(-1);
|
||||
});
|
||||
this.addAction("Clear", () => {
|
||||
app.queuePrompt(-1);
|
||||
});
|
||||
this.addAction("Load Default", () => {
|
||||
app.queuePrompt(-1);
|
||||
api.addEventListener("status", () => {
|
||||
this.queue.update();
|
||||
this.history.update();
|
||||
});
|
||||
|
||||
document.body.append(this.menuContainer);
|
||||
var input = document.createElement("input");
|
||||
input.setAttribute("type", "file");
|
||||
input.setAttribute("accept", ".json,image/png");
|
||||
input.style.display = "none";
|
||||
document.body.appendChild(input);
|
||||
|
||||
input.addEventListener("change", function () {
|
||||
var file = input.files[0];
|
||||
prompt_file_load(file);
|
||||
});
|
||||
|
||||
|
||||
this.menuContainer = $el("div.comfy-menu", { parent: document.body }, [
|
||||
$el("span", { $: (q) => (this.queueSize = q) }),
|
||||
$el("button.comfy-queue-btn", { textContent: "Queue Prompt", onclick: () => app.queuePrompt(0) }),
|
||||
$el("div.comfy-menu-btns", [
|
||||
$el("button", { textContent: "Queue Front", onclick: () => app.queuePrompt(-1) }),
|
||||
$el("button", {
|
||||
$: (b) => (this.queue.button = b),
|
||||
textContent: "View Queue",
|
||||
onclick: () => {
|
||||
this.history.hide();
|
||||
this.queue.toggle();
|
||||
},
|
||||
}),
|
||||
$el("button", {
|
||||
$: (b) => (this.history.button = b),
|
||||
textContent: "View History",
|
||||
onclick: () => {
|
||||
this.queue.hide();
|
||||
this.history.toggle();
|
||||
},
|
||||
}),
|
||||
]),
|
||||
this.queue.element,
|
||||
this.history.element,
|
||||
$el("button", {
|
||||
textContent: "Save",
|
||||
onclick: () => {
|
||||
const json = JSON.stringify(app.graph.serialize()); // convert the data to a JSON string
|
||||
const blob = new Blob([json], { type: "application/json" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = $el("a", {
|
||||
href: url,
|
||||
download: "workflow.json",
|
||||
style: "display: none",
|
||||
parent: document.body,
|
||||
});
|
||||
a.click();
|
||||
setTimeout(function () {
|
||||
a.remove();
|
||||
window.URL.revokeObjectURL(url);
|
||||
}, 0);
|
||||
},
|
||||
}),
|
||||
$el("button", { textContent: "Load", onclick: () => {} }),
|
||||
$el("button", { textContent: "Clear", onclick: () => app.graph.clear() }),
|
||||
$el("button", { textContent: "Load Default", onclick: () => app.loadGraphData() }),
|
||||
]);
|
||||
|
||||
this.setStatus({ exec_info: { queue_remaining: "X" } });
|
||||
}
|
||||
|
||||
addAction(text, cb, cls) {
|
||||
const btn = document.createElement("button");
|
||||
btn.classList.add("comfy-menu-btn-" + (cls || "lg"));
|
||||
btn.textContent = text;
|
||||
btn.onclick = () => {
|
||||
cb(btn);
|
||||
};
|
||||
(cls === "sm" ? this.btnContainer : this.menuContainer).append(btn);
|
||||
}
|
||||
|
||||
setStatus(status) {
|
||||
this.queueSize.textContent = "Queue size: " + (status ? status.exec_info.queue_remaining : "ERR");
|
||||
}
|
||||
|
||||
@ -34,6 +34,8 @@ body {
|
||||
max-height: 80vh;
|
||||
transform: translate(-50%, -50%);
|
||||
overflow: hidden;
|
||||
min-width: 60%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.comfy-modal-content {
|
||||
@ -79,21 +81,56 @@ body {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.comfy-menu-btns {
|
||||
margin-bottom: 10px;
|
||||
.comfy-menu button {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.comfy-menu-btn-sm {
|
||||
.comfy-menu-btns {
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.comfy-menu-btns button {
|
||||
font-size: 10px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.comfy-menu-btn-lg, .comfy-menu-btn-queue {
|
||||
font-size: 20px;
|
||||
.comfy-queue-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.comfy-menu-btn-queue {
|
||||
width: 100%;
|
||||
.comfy-list {
|
||||
background-color: rgb(225, 225, 225);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.comfy-list-items {
|
||||
overflow-y: scroll;
|
||||
max-height: 100px;
|
||||
background-color: #d0d0d0;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.comfy-list h4 {
|
||||
min-width: 160px;
|
||||
margin: 0;
|
||||
padding: 3px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.comfy-list-items button {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.comfy-list-actions {
|
||||
margin: 5px;
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.comfy-list-actions button {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@ -107,7 +144,7 @@ body {
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 850px) {
|
||||
#menu {
|
||||
.comfy-menu {
|
||||
margin-top: -70px;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user