From 44698e27686c3de75b6d6b4befc7a05b04b8d155 Mon Sep 17 00:00:00 2001 From: space-nuko <24979496+space-nuko@users.noreply.github.com> Date: Sun, 21 May 2023 23:14:56 -0500 Subject: [PATCH 1/7] Confirm when reloading page with unsaved changes --- src/lib/ComfyNodeDef.ts | 4 ++-- src/lib/components/ComfyApp.svelte | 14 ++++++++++++++ src/lib/stores/configState.ts | 6 +++++- 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/src/lib/ComfyNodeDef.ts b/src/lib/ComfyNodeDef.ts index 7a9a25d..8dbf24e 100644 --- a/src/lib/ComfyNodeDef.ts +++ b/src/lib/ComfyNodeDef.ts @@ -22,14 +22,14 @@ export type ComfyNodeDefInput = [ComfyNodeDefInputType, ComfyNodeDefInputOptions /** * - Array: Combo widget. Usually the values are strings but they can also be other stuff like booleans. * - "INT"/"FLOAT"/etc.: Non-combo type widgets. See ComfyWidgets type. - * - other string: Must be an input type, usually something lke "IMAGE" or "LATENT". + * - other string: Must be a backend input type, usually something lke "IMAGE" or "LATENT". */ export type ComfyNodeDefInputType = any[] | keyof typeof ComfyWidgets | string export type ComfyNodeDefInputOptions = { forceInput?: boolean; - // NOTE: For COMBO type inputs, the default value is always the first entry the list. + // NOTE: For COMBO type inputs, the default value is always the first entry in the list. default?: any, // INT/FLOAT options diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte index bab2f5c..2d45fcb 100644 --- a/src/lib/components/ComfyApp.svelte +++ b/src/lib/components/ComfyApp.svelte @@ -2,6 +2,8 @@ import { ListIcon as List, ImageIcon as Image, SettingsIcon as Settings } from "svelte-feather-icons"; import ComfyApp, { type A1111PromptAndInfo, type SerializedAppState } from "./ComfyApp"; import uiState from "$lib/stores/uiState"; + import configState from "$lib/stores/configState"; + import workflowState from "$lib/stores/workflowState"; import { SvelteToast, toast } from '@zerodevx/svelte-toast' import LightboxModal from "./LightboxModal.svelte"; @@ -34,6 +36,16 @@ document.getElementById("app-root").classList.remove("dark") } + function handleBeforeUnload(event: BeforeUnloadEvent) { + if (!$configState.confirmWhenUnloadingUnsavedChanges) + return; + + const unsavedChanges = $workflowState.openedWorkflows.some(w => w.isModified); + if (unsavedChanges) { + event.preventDefault(); + event.returnValue = ''; + } + } @@ -42,6 +54,8 @@ {/if} + +
diff --git a/src/lib/stores/configState.ts b/src/lib/stores/configState.ts index ce7ae6b..ce9e3d5 100644 --- a/src/lib/stores/configState.ts +++ b/src/lib/stores/configState.ts @@ -8,6 +8,9 @@ export type ConfigState = { /** When saving, always prompt for a name to save the workflow as */ promptForWorkflowName: boolean, + + /** When closing the tab, open the confirmation window if there's unsaved changes */ + confirmWhenUnloadingUnsavedChanges: boolean, } type ConfigStateOps = { @@ -17,7 +20,8 @@ export type WritableConfigStateStore = Writable & ConfigStateOps; const store: Writable = writable( { alwaysStripUserState: false, - promptForWorkflowName: false + promptForWorkflowName: false, + confirmWhenUnloadingUnsavedChanges: true }) const configStateStore: WritableConfigStateStore = From 69266c928e3102fb0b60b55e6b28b049b02ffaeb Mon Sep 17 00:00:00 2001 From: space-nuko <24979496+space-nuko@users.noreply.github.com> Date: Mon, 22 May 2023 10:17:49 -0500 Subject: [PATCH 2/7] Grid view for history --- package.json | 1 + pnpm-lock.yaml | 7 + src/lib/components/ComfyApp.svelte | 6 +- src/lib/components/ComfyNumberProperty.svelte | 2 +- src/lib/components/ComfyQueue.svelte | 249 +++++++----------- .../components/ComfyQueueGridDisplay.svelte | 118 +++++++++ .../components/ComfyQueueListDisplay.svelte | 162 ++++++++++++ src/lib/components/ComfyWorkflowsView.svelte | 4 +- src/lib/components/Sidebar.svelte | 4 +- src/lib/nodes/widgets/ComfyGalleryNode.ts | 18 +- src/lib/widgets/GalleryWidget.svelte | 23 +- src/scss/global.scss | 6 + 12 files changed, 406 insertions(+), 194 deletions(-) create mode 100644 src/lib/components/ComfyQueueGridDisplay.svelte create mode 100644 src/lib/components/ComfyQueueListDisplay.svelte diff --git a/package.json b/package.json index b4545f6..5dbcbd0 100644 --- a/package.json +++ b/package.json @@ -73,6 +73,7 @@ "klecks": "workspace:*", "pollen-css": "^4.6.2", "radix-icons-svelte": "^1.2.1", + "svelte-bootstrap-icons": "^2.3.1", "svelte-feather-icons": "^4.0.0", "svelte-preprocess": "^5.0.3", "svelte-select": "^5.5.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 50abc05..2d7d1f8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -97,6 +97,9 @@ importers: radix-icons-svelte: specifier: ^1.2.1 version: 1.2.1 + svelte-bootstrap-icons: + specifier: ^2.3.1 + version: 2.3.1 svelte-feather-icons: specifier: ^4.0.0 version: 4.0.0 @@ -7908,6 +7911,10 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} + /svelte-bootstrap-icons@2.3.1: + resolution: {integrity: sha512-Vqhgmcd55hEoB/MrPESvVYo4+m++2q9l00a5lzGkgbXTiO6go21PTU9DaeAJ446WBiEmg3Q8sv9QVOBmh5c1ww==} + dev: false + /svelte-check@2.2.6(postcss-load-config@3.1.4)(postcss@8.4.21)(svelte@3.58.0): resolution: {integrity: sha512-oJux/afbmcZO+N+ADXB88h6XANLie8Y2rh2qBlhgfkpr2c3t/q/T0w2JWrHqagaDL8zeNwO8a8RVFBkrRox8gg==} hasBin: true diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte index 2d45fcb..869da0e 100644 --- a/src/lib/components/ComfyApp.svelte +++ b/src/lib/components/ComfyApp.svelte @@ -1,6 +1,6 @@ + + +
+
+
+ +
+
+
+
+ {#each allEntries as [entry, image], i} +
+ + handleClick(e, entry, i)} + src={image} + alt="thumbnail" /> +
+ {/each} +
+
+
+ + diff --git a/src/lib/components/ComfyQueueListDisplay.svelte b/src/lib/components/ComfyQueueListDisplay.svelte new file mode 100644 index 0000000..b575e14 --- /dev/null +++ b/src/lib/components/ComfyQueueListDisplay.svelte @@ -0,0 +1,162 @@ + + +
+ {#each entries as entry} +
showPrompt(entry, e)}> + {#if entry.images.length > 0} +
+ {#each entry.images.slice(0, 4) as image, i} +
+ + showLightbox(entry.images, i, e)} + src={image} + alt="thumbnail" /> +
+ {/each} +
+ {/if} +
+
+ {truncateString(entry.message, 20)} +
+
+ {entry.submessage} +
+
+
+
+ {#if entry.date != null} + + {entry.date} + + {/if} +
+ {/each} +
+ + diff --git a/src/lib/components/ComfyWorkflowsView.svelte b/src/lib/components/ComfyWorkflowsView.svelte index ef909d2..5e696d2 100644 --- a/src/lib/components/ComfyWorkflowsView.svelte +++ b/src/lib/components/ComfyWorkflowsView.svelte @@ -1,6 +1,6 @@ {#if widget && node && nodeValue && $nodeValue} @@ -148,7 +133,7 @@ on:clicked={onClicked} bind:imageWidth={$imageWidth} bind:imageHeight={$imageHeight} - bind:selected_image + bind:selected_image={$selected_image} />
diff --git a/src/scss/global.scss b/src/scss/global.scss index ed2d51c..e921673 100644 --- a/src/scss/global.scss +++ b/src/scss/global.scss @@ -108,6 +108,12 @@ hr { color: var(--panel-border-color); } +input { + color: var(--body-text-color); + background: var(--input-background-fill); + border: var(--input-border-width) solid var(--input-border-color) +} + input:not(input[type=radio]), textarea { border-radius: 0 !important; } 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 3/7] 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); From 5cc6baccff8267d5cf26ae4b88b772800345a301 Mon Sep 17 00:00:00 2001 From: space-nuko <24979496+space-nuko@users.noreply.github.com> Date: Mon, 22 May 2023 13:00:43 -0500 Subject: [PATCH 4/7] Image size for history list view --- src/lib/components/ComfyQueue.svelte | 6 +- .../components/ComfyQueueGridDisplay.svelte | 17 +- .../components/ComfyQueueListDisplay.svelte | 150 ++++++++++++------ src/lib/components/Sidebar.svelte | 2 +- 4 files changed, 119 insertions(+), 56 deletions(-) diff --git a/src/lib/components/ComfyQueue.svelte b/src/lib/components/ComfyQueue.svelte index 1e07a63..8cb5304 100644 --- a/src/lib/components/ComfyQueue.svelte +++ b/src/lib/components/ComfyQueue.svelte @@ -48,6 +48,8 @@ let mode: QueueItemType = "queue"; let displayMode: DisplayModeType = "list"; + let imageSize: number = 40; + let gridColumns: number = 3; let changed = true; function switchMode(newMode: QueueItemType) { @@ -256,9 +258,9 @@
{#if _entries.length > 0} {#if mode === "history" && displayMode === "grid"} - + {:else} - + {/if} {:else}
diff --git a/src/lib/components/ComfyQueueGridDisplay.svelte b/src/lib/components/ComfyQueueGridDisplay.svelte index 59b189c..8ca6509 100644 --- a/src/lib/components/ComfyQueueGridDisplay.svelte +++ b/src/lib/components/ComfyQueueGridDisplay.svelte @@ -8,10 +8,10 @@ export let showPrompt: (entry: QueueUIEntry) => void; export let clearQueue: () => Promise; export let mode: QueueItemType = "queue"; + export let gridColumns: number = 3; let allEntries: [QueueUIEntry, string][] = [] let allImages: string[] = [] - let gridColumns: number = 3; $: buildImageList(entries); @@ -36,7 +36,7 @@
-
+
@@ -64,18 +64,19 @@