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/ComfyNodeDef.ts b/src/lib/ComfyNodeDef.ts index a84bf34..9f4ad13 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/api.ts b/src/lib/api.ts index 3c1f413..df384ad 100644 --- a/src/lib/api.ts +++ b/src/lib/api.ts @@ -331,7 +331,7 @@ export default class ComfyAPI { * @param {string} type The type of item to delete, queue or history * @param {number} id The id of the item to delete */ - async deleteItem(type: QueueItemType, id: number): Promise { + async deleteItem(type: QueueItemType, id: PromptID): Promise { return this.postItem(type, { delete: [id] }); } diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte index bab2f5c..869da0e 100644 --- a/src/lib/components/ComfyApp.svelte +++ b/src/lib/components/ComfyApp.svelte @@ -1,7 +1,9 @@ @@ -42,13 +54,15 @@ {/if} + +
- +
diff --git a/src/lib/components/ComfyApp.ts b/src/lib/components/ComfyApp.ts index 64d0a97..deb2166 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,46 @@ export default class ComfyApp { this.api.init(); } + async interrupt() { + if (get(queueState).isInterrupting) + return + + queueState.update(s => { s.isInterrupting = true; return s; }) + await this.api.interrupt() + .finally(() => { + queueState.update(s => { s.isInterrupting = true; return s }) + }); + } + + async deleteQueueItem(type: QueueItemType, promptID: PromptID) { + if (get(queueState).isInterrupting) + return + + queueState.update(s => { s.isInterrupting = true; return s; }) + await this.api.deleteItem(type, promptID) + .then(() => { + queueState.queueItemDeleted(type, promptID); + }) + .finally(() => { + queueState.update(s => { s.isInterrupting = false; return s; }) + }); + } + + async clearQueue(type: QueueItemType) { + if (get(queueState).isInterrupting) + return + + 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 +597,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 +623,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 +724,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 +780,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 +825,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 +893,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/ComfyNumberProperty.svelte b/src/lib/components/ComfyNumberProperty.svelte index 2ece1b4..8ff877e 100644 --- a/src/lib/components/ComfyNumberProperty.svelte +++ b/src/lib/components/ComfyNumberProperty.svelte @@ -29,7 +29,7 @@ diff --git a/src/lib/components/ComfyQueue.svelte b/src/lib/components/ComfyQueue.svelte index 50e2c0d..7c445c9 100644 --- a/src/lib/components/ComfyQueue.svelte +++ b/src/lib/components/ComfyQueue.svelte @@ -1,9 +1,23 @@ + + + +
+
+
+ +
+ +
+
+
+
+
+ {#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..117afeb --- /dev/null +++ b/src/lib/components/ComfyQueueListDisplay.svelte @@ -0,0 +1,260 @@ + + +
+ {#if mode === "history"} +
+
+ +
+ +
+
+
+ {/if} +
+ {#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..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); @@ -108,6 +146,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; }