From 3972a8126dbafee2ef4789ab92cf7af3975326af Mon Sep 17 00:00:00 2001 From: space-nuko <24979496+space-nuko@users.noreply.github.com> Date: Tue, 16 May 2023 19:32:57 -0500 Subject: [PATCH] Listen for new execution_start message --- klecks | 2 +- src/lib/api.ts | 4 ++ src/lib/components/ComfyApp.ts | 28 +++++----- src/lib/components/ComfyNumberProperty.svelte | 5 ++ src/lib/components/ComfyProperties.svelte | 15 ++--- src/lib/stores/queueState.ts | 56 ++++++++++++++----- src/scss/global.scss | 7 ++- 7 files changed, 82 insertions(+), 35 deletions(-) diff --git a/klecks b/klecks index 7ec2e2d..f08ba31 160000 --- a/klecks +++ b/klecks @@ -1 +1 @@ -Subproject commit 7ec2e2d9d33128b634d57a4ab1aa26f272a97227 +Subproject commit f08ba318880dce71b9ebdf5717d6a6c61b7b7405 diff --git a/src/lib/api.ts b/src/lib/api.ts index a9c8581..14e860b 100644 --- a/src/lib/api.ts +++ b/src/lib/api.ts @@ -79,6 +79,7 @@ type ComfyAPIEvents = { reconnected: () => void, executing: (promptID: PromptID | null, runningNodeID: ComfyNodeID | null) => void, executed: (promptID: PromptID, nodeID: ComfyNodeID, output: SerializedPromptOutputs) => void, + execution_start: (promptID: PromptID) => void, execution_cached: (promptID: PromptID, nodes: ComfyNodeID[]) => void, execution_error: (promptID: PromptID, message: string) => void, } @@ -183,6 +184,9 @@ export default class ComfyAPI { case "executed": this.eventBus.emit("executed", msg.data.prompt_id, msg.data.node, msg.data.output); break; + case "execution_start": + this.eventBus.emit("execution_start", msg.data.prompt_id); + break; case "execution_cached": this.eventBus.emit("execution_cached", msg.data.prompt_id, msg.data.nodes); break; diff --git a/src/lib/components/ComfyApp.ts b/src/lib/components/ComfyApp.ts index 7713d65..6d243fa 100644 --- a/src/lib/components/ComfyApp.ts +++ b/src/lib/components/ComfyApp.ts @@ -351,6 +351,10 @@ export default class ComfyApp { queueState.onExecuted(promptID, nodeID, output) }); + this.api.addEventListener("execution_start", (promptID: PromptID) => { + queueState.executionStart(promptID) + }); + this.api.addEventListener("execution_cached", (promptID: PromptID, nodes: ComfyNodeID[]) => { queueState.executionCached(promptID, nodes) }); @@ -614,8 +618,8 @@ export default class ComfyApp { thumbnails } - let error = null; - let promptID = null; + let error: string | null = null; + let promptID: PromptID | null = null; const request: ComfyPromptRequest = { number: num, @@ -625,20 +629,18 @@ export default class ComfyApp { try { const response = await this.api.queuePrompt(request); - - // BUG: This can cause race conditions updating frontend state - // since we don't have a prompt ID until the backend - // returns! - promptID = response.promptID; - queueState.afterQueued(promptID, num, p.output, extraData) - - error = response.error; + if (response.error != null) { + error = response.error; + } + else { + queueState.afterQueued(response.promptID, num, p.output, extraData) + } } catch (err) { - error = { error: err } + error = err?.toString(); } if (error != null) { - const mes = error.error + const mes: string = error; notify(`Error queuing prompt:\n${mes}`, { type: "error" }) console.error(graphToGraphVis(this.lGraph)) console.error(promptToGraphVis(p)) @@ -795,7 +797,7 @@ export default class ComfyApp { console.debug("[ComfyApp] Reconfiguring combo widget", backendNode.type, "=>", comboNode.type, rawValues.length) comboNode.doAutoConfig(inputSlot, { includeProperties: new Set(["values"]), setWidgetTitle: false }) - comboNode.formatValues(rawValues) + comboNode.formatValues(rawValues as string[]) if (!rawValues?.includes(get(comboNode.value))) { comboNode.setValue(rawValues[0]) } diff --git a/src/lib/components/ComfyNumberProperty.svelte b/src/lib/components/ComfyNumberProperty.svelte index 08be69b..2ece1b4 100644 --- a/src/lib/components/ComfyNumberProperty.svelte +++ b/src/lib/components/ComfyNumberProperty.svelte @@ -45,6 +45,11 @@ } } } + input { + color: var(--body-text-color); + background: var(--input-background-fill); + border: var(--input-border-width) solid var(--input-border-color) + } input[disabled] { cursor: not-allowed; } diff --git a/src/lib/components/ComfyProperties.svelte b/src/lib/components/ComfyProperties.svelte index d730ee5..eba8600 100644 --- a/src/lib/components/ComfyProperties.svelte +++ b/src/lib/components/ComfyProperties.svelte @@ -19,14 +19,15 @@ $: refreshPropsPanel = $layoutState.refreshPropsPanel; $: if ($selectionState.currentSelection.length > 0) { + node = null; const targetId = $selectionState.currentSelection.slice(-1)[0] - target = $layoutState.allItems[targetId].dragItem - attrsChanged = target.attrsChanged; - if (target.type === "widget") { - node = (target as WidgetLayout).node - } - else { - node = null; + const entry = $layoutState.allItems[targetId] + if (entry != null) { + target = entry.dragItem + attrsChanged = target.attrsChanged; + if (target.type === "widget") { + node = (target as WidgetLayout).node + } } } else if ($selectionState.currentSelectionNodes.length > 0) { diff --git a/src/lib/stores/queueState.ts b/src/lib/stores/queueState.ts index 339f4b9..bcc2b6c 100644 --- a/src/lib/stores/queueState.ts +++ b/src/lib/stores/queueState.ts @@ -14,6 +14,7 @@ type QueueStateOps = { queueUpdated: (resp: ComfyAPIQueueResponse) => void, historyUpdated: (resp: ComfyAPIHistoryResponse) => void, statusUpdated: (status: ComfyAPIStatusResponse | null) => void, + executionStart: (promptID: PromptID) => void, executingUpdated: (promptID: PromptID | null, runningNodeID: ComfyNodeID | null) => void, executionCached: (promptID: PromptID, nodes: ComfyNodeID[]) => void, executionError: (promptID: PromptID, message: string) => void, @@ -235,23 +236,51 @@ function executionError(promptID: PromptID, message: string) { }) } +function createNewQueueEntry(promptID: PromptID, number: number = -1, prompt: SerializedPromptInputsAll = {}, extraData: any = {}): QueueEntry { + return { + number, + queuedAt: new Date(), // Now + finishedAt: null, + promptID, + prompt, + extraData, + goodOutputs: [], + outputs: {}, + nodesRan: new Set(), + cachedNodes: new Set() + } +} + +function executionStart(promptID: PromptID) { + console.debug("[queueState] executionStart", promptID) + store.update(s => { + const [index, entry, queue] = findEntryInPending(promptID); + if (entry == null) { + const entry = createNewQueueEntry(promptID); + s.queuePending.update(qp => { qp.push(entry); return qp }) + console.debug("[queueState] ADD PROMPT", promptID) + } + s.isInterrupting = false; + return s + }) +} + function afterQueued(promptID: PromptID, number: number, prompt: SerializedPromptInputsAll, extraData: any) { console.debug("[queueState] afterQueued", promptID, Object.keys(prompt)) store.update(s => { - const entry: QueueEntry = { - number, - queuedAt: new Date(), // Now - finishedAt: null, - promptID, - prompt, - extraData, - goodOutputs: [], - outputs: {}, - nodesRan: new Set(), - cachedNodes: new Set() + const [index, entry, queue] = findEntryInPending(promptID); + if (entry == null) { + const entry = createNewQueueEntry(promptID, number, prompt, extraData); + s.queuePending.update(qp => { qp.push(entry); return qp }) + console.debug("[queueState] ADD PROMPT", promptID) + } + else { + entry.number = number; + entry.prompt = prompt + entry.extraData = extraData + queue.set(get(queue)) + console.warn("[queueState] UPDATE PROMPT", promptID) } - s.queuePending.update(qp => { qp.push(entry); return qp }) - console.debug("[queueState] ADD PROMPT", promptID) s.isInterrupting = false; return s }) @@ -279,6 +308,7 @@ const queueStateStore: WritableQueueStateStore = historyUpdated, statusUpdated, progressUpdated, + executionStart, executingUpdated, executionCached, executionError, diff --git a/src/scss/global.scss b/src/scss/global.scss index a190e1a..79302c8 100644 --- a/src/scss/global.scss +++ b/src/scss/global.scss @@ -98,9 +98,14 @@ hr { color: var(--panel-border-color); } +input, textarea { + border-radius: 0 !important; +} + select { color: var(--body-text-color); - background: var(--block-background-fill); + background: var(--input-background-fill); + border: var(--input-border-width) solid var(--input-border-color) } .container {