From f696e14fb791b8f7a2278ff0d63b874a7d3994df Mon Sep 17 00:00:00 2001 From: space-nuko <24979496+space-nuko@users.noreply.github.com> Date: Mon, 22 May 2023 10:52:13 -0500 Subject: [PATCH] Clear history button --- src/lib/components/ComfyApp.ts | 35 ++++++++--- src/lib/components/ComfyQueue.svelte | 61 +++++-------------- .../components/ComfyQueueGridDisplay.svelte | 36 ++++++++--- .../components/ComfyQueueListDisplay.svelte | 4 +- src/lib/stores/queueState.ts | 23 ++++++- src/lib/utils.ts | 15 +++++ src/scss/global.scss | 38 ++++++++++++ 7 files changed, 145 insertions(+), 67 deletions(-) diff --git a/src/lib/components/ComfyApp.ts b/src/lib/components/ComfyApp.ts index 64d0a97..95e04f9 100644 --- a/src/lib/components/ComfyApp.ts +++ b/src/lib/components/ComfyApp.ts @@ -1,6 +1,6 @@ import { LiteGraph, LGraph, LGraphCanvas, LGraphNode, type LGraphNodeConstructor, type LGraphNodeExecutable, type SerializedLGraph, type SerializedLGraphGroup, type SerializedLGraphNode, type SerializedLLink, NodeMode, type Vector2, BuiltInSlotType, type INodeInputSlot, type NodeID, type NodeTypeSpec, type NodeTypeOpts, type SlotIndex, type UUID } from "@litegraph-ts/core"; import type { LConnectionKind, INodeSlot } from "@litegraph-ts/core"; -import ComfyAPI, { type ComfyAPIStatusResponse, type ComfyBoxPromptExtraData, type ComfyPromptRequest, type ComfyNodeID, type PromptID } from "$lib/api" +import ComfyAPI, { type ComfyAPIStatusResponse, type ComfyBoxPromptExtraData, type ComfyPromptRequest, type ComfyNodeID, type PromptID, type QueueItemType } from "$lib/api" import { importA1111, parsePNGMetadata } from "$lib/pnginfo"; import EventEmitter from "events"; import type TypedEmitter from "typed-emitter"; @@ -33,7 +33,7 @@ import { ComfyBackendNode } from "$lib/nodes/ComfyBackendNode"; import { get, writable, type Writable } from "svelte/store"; import { tick } from "svelte"; import uiState from "$lib/stores/uiState"; -import { basename, download, graphToGraphVis, jsonToJsObject, promptToGraphVis, range, workflowToGraphVis } from "$lib/utils"; +import { basename, capitalize, download, graphToGraphVis, jsonToJsObject, promptToGraphVis, range, workflowToGraphVis } from "$lib/utils"; import notify from "$lib/notify"; import configState from "$lib/stores/configState"; import { blankGraph } from "$lib/defaultGraph"; @@ -312,7 +312,7 @@ export default class ComfyApp { const workflows = state.workflows as SerializedAppState[]; await Promise.all(workflows.map(w => { - return this.openWorkflow(w, defs).catch(error => { + return this.openWorkflow(w, defs, false).catch(error => { console.error("Failed restoring previous workflow", error) notify(`Failed restoring previous workflow: ${error}`, { type: "error" }) }) @@ -509,6 +509,18 @@ export default class ComfyApp { this.api.init(); } + async clearQueue(type: QueueItemType) { + queueState.update(s => { s.isInterrupting = true; return s; }) + await this.api.clearItems(type) + .then(() => { + queueState.queueCleared(type); + notify(`${capitalize(type)} cleared.`); + }) + .finally(() => { + queueState.update(s => { s.isInterrupting = false; return s; }) + }); + } + private addKeyboardHandler() { window.addEventListener("keydown", (e) => { this.shiftDown = e.shiftKey; @@ -557,9 +569,12 @@ export default class ComfyApp { setColor(BuiltInSlotType.ACTION, "lightseagreen") } - async openWorkflow(data: SerializedAppState, refreshCombos: boolean | Record = true): Promise { + async openWorkflow(data: SerializedAppState, + refreshCombos: boolean | Record = true, + warnMissingNodeTypes: boolean = true + ): Promise { if (data.version !== COMFYBOX_SERIAL_VERSION) { - const mes = `Invalid ComfyBox saved data format: ${data.version}` + const mes = `Invalid ComfyBox saved data format: ${data.version} ` notify(mes, { type: "error" }) return Promise.reject(mes); } @@ -580,7 +595,7 @@ export default class ComfyApp { return Promise.reject(error) } - if (workflow.missingNodeTypes.size > 0) { + if (workflow.missingNodeTypes.size > 0 && warnMissingNodeTypes) { modalState.pushModal({ svelteComponent: MissingNodeTypesModal, svelteProps: { @@ -681,7 +696,7 @@ export default class ComfyApp { } catch (error) { console.error("Failed to load default graph", error) - notify(`Failed to load default graph: ${error}`, { type: "error" }) + notify(`Failed to load default graph: ${error} `, { type: "error" }) state = structuredClone(blankGraph) } await this.openWorkflow(state, defs) @@ -737,7 +752,7 @@ export default class ComfyApp { else { const date = new Date(); const formattedDate = date.toISOString().replace(/:/g, '-').replace(/\.\d{3}/g, '').replace('T', '_').replace("Z", ""); - filename = `workflow-${formattedDate}.json` + filename = `workflow - ${formattedDate}.json` } const indent = 2 @@ -782,7 +797,7 @@ export default class ComfyApp { try { while (this.queueItems.length) { ({ num, batchCount, workflow } = this.queueItems.pop()); - console.debug(`Queue get! ${num} ${batchCount} ${tag}`); + console.debug(`Queue get! ${num} ${batchCount} ${tag} `); const thumbnails = [] for (const node of workflow.graph.iterateNodesInOrderRecursive()) { @@ -850,7 +865,7 @@ export default class ComfyApp { if (error != null) { const mes: string = error; - notify(`Error queuing prompt:\n${mes}`, { type: "error" }) + notify(`Error queuing prompt: \n${mes} `, { type: "error" }) console.error(graphToGraphVis(workflow.graph)) console.error(promptToGraphVis(p)) console.error("Error queuing prompt", error, num, p) diff --git a/src/lib/components/ComfyQueue.svelte b/src/lib/components/ComfyQueue.svelte index 595f985..1e07a63 100644 --- a/src/lib/components/ComfyQueue.svelte +++ b/src/lib/components/ComfyQueue.svelte @@ -83,6 +83,18 @@ changed = false; } + async function clearQueue() { + await app.clearQueue(mode); + + if (mode === "queue") { + _queuedEntries = [] + _runningEntries = [] + } + + _entries = []; + changed = true; + } + function formatDate(date: Date): string { const time = date.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true }); const day = date.toLocaleString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' }).replace(',', ''); @@ -173,16 +185,6 @@ console.warn("[ComfyQueue] BUILDHISTORY", _entries, $queueCompleted) } - function showLightbox(images: string[], index: number, e: Event) { - e.preventDefault() - if (!images) - return - - ImageViewer.instance.showModal(images, index); - - e.stopPropagation() - } - async function interrupt() { if ($queueState.isInterrupting) return @@ -254,9 +256,9 @@
{#if _entries.length > 0} {#if mode === "history" && displayMode === "grid"} - + {:else} - + {/if} {:else}
@@ -405,41 +407,8 @@ .mode-button { height: calc($mode-buttons-height); padding: 0.2rem; - border: 1px solid var(--panel-border-color); - font-weight: bold; - text-align: center; - margin: auto; - &.primary { - background: var(--button-primary-background-fill); - &:hover { - background: var(--button-primary-background-fill-hover); - } - } - - &.secondary { - background: var(--button-secondary-background-fill); - &:hover { - background: var(--button-secondary-background-fill-hover); - } - } - - &.ternary { - background: var(--panel-background-fill); - &:hover { - background: var(--block-background-fill ); - } - } - - &:hover { - filter: brightness(85%); - } - &:active { - filter: brightness(50%) - } - &.selected { - filter: brightness(80%) - } + @include square-button; } :global(.dark) .mode-button { diff --git a/src/lib/components/ComfyQueueGridDisplay.svelte b/src/lib/components/ComfyQueueGridDisplay.svelte index 0ee0531..59b189c 100644 --- a/src/lib/components/ComfyQueueGridDisplay.svelte +++ b/src/lib/components/ComfyQueueGridDisplay.svelte @@ -1,11 +1,12 @@ -
+
+
+ +
@@ -63,21 +71,33 @@ } .grid-columns { - width: 100%; height: $grid-columns-control-height; position: relative; display: flex; flex-direction: column; - padding: var(--spacing-lg) 0; + margin: 0.25rem 1rem; > div { width: 100%; - margin: auto; - padding: 0 1rem; + height: 100%; + display: flex; + flex-direction: row; + input { width: 100%; margin: auto; } + + .button-wrapper { + padding: 0.25rem; + .clear-queue-button { + @include square-button; + + aspect-ratio: 1/1; + height: 100%; + padding: 0.25rem; + } + } } } diff --git a/src/lib/components/ComfyQueueListDisplay.svelte b/src/lib/components/ComfyQueueListDisplay.svelte index b575e14..4beb719 100644 --- a/src/lib/components/ComfyQueueListDisplay.svelte +++ b/src/lib/components/ComfyQueueListDisplay.svelte @@ -1,11 +1,11 @@ diff --git a/src/lib/stores/queueState.ts b/src/lib/stores/queueState.ts index 979d129..a3d3bd7 100644 --- a/src/lib/stores/queueState.ts +++ b/src/lib/stores/queueState.ts @@ -1,4 +1,4 @@ -import type { ComfyAPIHistoryEntry, ComfyAPIHistoryItem, ComfyAPIHistoryResponse, ComfyAPIQueueResponse, ComfyAPIStatusResponse, ComfyBoxPromptExtraData, ComfyNodeID, PromptID } from "$lib/api"; +import type { ComfyAPIHistoryEntry, ComfyAPIHistoryItem, ComfyAPIHistoryResponse, ComfyAPIQueueResponse, ComfyAPIStatusResponse, ComfyBoxPromptExtraData, ComfyNodeID, PromptID, QueueItemType } from "$lib/api"; import type { Progress, SerializedPromptInputsAll, SerializedPromptOutputs, WorkflowInstID } from "$lib/components/ComfyApp"; import type { ComfyExecutionResult } from "$lib/nodes/ComfyWidgetNodes"; import notify from "$lib/notify"; @@ -17,6 +17,7 @@ type QueueStateOps = { progressUpdated: (progress: Progress) => void getQueueEntry: (promptID: PromptID) => QueueEntry | null; afterQueued: (workflowID: WorkflowInstID, promptID: PromptID, number: number, prompt: SerializedPromptInputsAll, extraData: any) => void + queueCleared: (type: QueueItemType) => void; onExecuted: (promptID: PromptID, nodeID: ComfyNodeID, output: ComfyExecutionResult) => QueueEntry | null } @@ -363,6 +364,25 @@ function onExecuted(promptID: PromptID, nodeID: ComfyNodeID, outputs: ComfyExecu return entry_; } +function queueCleared(type: QueueItemType) { + console.debug("[queueState] queueCleared", type) + + store.update(s => { + if (type === "queue") { + s.queuePending.set([]); + s.queueRunning.set([]); + s.queueRemaining = 0; + s.runningNodeID = null; + s.progress = null; + } + else { + s.queueCompleted.set([]) + } + s.isInterrupting = false; + return s; + }) +} + const queueStateStore: WritableQueueStateStore = { ...store, @@ -375,6 +395,7 @@ const queueStateStore: WritableQueueStateStore = executionCached, executionError, afterQueued, + queueCleared, getQueueEntry, onExecuted } diff --git a/src/lib/utils.ts b/src/lib/utils.ts index f28c646..2e55ffe 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -6,6 +6,7 @@ import { get } from "svelte/store"; import type { ComfyNodeID } from "./api"; import { type SerializedPrompt } from "./components/ComfyApp"; import workflowState from "./stores/workflowState"; +import { ImageViewer } from "./ImageViewer"; export function clamp(n: number, min: number, max: number): number { return Math.min(Math.max(n, min), max) @@ -23,6 +24,10 @@ export function countNewLines(str: string): number { return str.split(/\r\n|\r|\n/).length } +export function capitalize(str: string) { + return str.charAt(0).toUpperCase() + str.slice(1); +} + export function basename(filepath: string): string { const filename = filepath.split('/').pop().split('\\').pop(); return filename.split('.').slice(0, -1).join('.'); @@ -501,3 +506,13 @@ export function comfyBoxImageToComfyFile(image: ComfyBoxImageMetadata): ComfyIma export function comfyBoxImageToComfyURL(image: ComfyBoxImageMetadata): string { return convertComfyOutputToComfyURL(image.comfyUIFile) } + +export function showLightbox(images: string[], index: number, e: Event) { + e.preventDefault() + if (!images) + return + + ImageViewer.instance.showModal(images, index); + + e.stopPropagation() +} diff --git a/src/scss/global.scss b/src/scss/global.scss index e921673..f2cea71 100644 --- a/src/scss/global.scss +++ b/src/scss/global.scss @@ -81,6 +81,44 @@ body { --comfy-progress-bar-foreground: #B3D8A9 } +@mixin square-button { + border: 1px solid var(--panel-border-color); + font-weight: bold; + text-align: center; + margin: auto; + + &.primary { + background: var(--button-primary-background-fill); + &:hover { + background: var(--button-primary-background-fill-hover); + } + } + + &.secondary { + background: var(--button-secondary-background-fill); + &:hover { + background: var(--button-secondary-background-fill-hover); + } + } + + &.ternary { + background: var(--panel-background-fill); + &:hover { + background: var(--block-background-fill); + } + } + + &:hover { + filter: brightness(85%); + } + &:active { + filter: brightness(50%) + } + &.selected { + filter: brightness(80%) + } +} + @mixin disable-input { -webkit-text-fill-color: var(--comfy-disabled-textbox-text-color); background-color: var(--comfy-disabled-textbox-background-fill);