From 0656ae1d3a26425929bd47379c533d90076bf7f0 Mon Sep 17 00:00:00 2001 From: space-nuko <24979496+space-nuko@users.noreply.github.com> Date: Sat, 13 May 2023 15:14:52 -0500 Subject: [PATCH] Fix image upload --- src/lib/components/ComfyQueue.svelte | 2 + src/lib/components/ImageUpload.svelte | 26 ++++----- src/lib/nodes/ComfyWidgetNodes.ts | 67 ++++++++++++++++-------- src/lib/widgets/ImageEditorWidget.svelte | 14 +++-- src/lib/widgets/ImageUploadWidget.svelte | 28 ++++++++-- 5 files changed, 92 insertions(+), 45 deletions(-) diff --git a/src/lib/components/ComfyQueue.svelte b/src/lib/components/ComfyQueue.svelte index ba6b8ae..2d2abf4 100644 --- a/src/lib/components/ComfyQueue.svelte +++ b/src/lib/components/ComfyQueue.svelte @@ -339,6 +339,7 @@ border-bottom: 1px solid var(--block-border-color); border-top: 1px solid var(--table-border-color); background: var(--panel-background-fill); + max-height: 14rem; &:hover:not(:has(img:hover)) { cursor: pointer; @@ -387,6 +388,7 @@ column-gap: 1px; row-gap: 1px; vertical-align: top; + flex: 1 1 40%; img { aspect-ratio: 1 / 1; diff --git a/src/lib/components/ImageUpload.svelte b/src/lib/components/ImageUpload.svelte index ec1fd96..3b06768 100644 --- a/src/lib/components/ImageUpload.svelte +++ b/src/lib/components/ImageUpload.svelte @@ -25,13 +25,13 @@ let _value: GradioFileData[] | null = null; const root = "comf" const root_url = "https//ComfyUI!" + let uploaded: boolean = false; const dispatch = createEventDispatcher<{ change: GalleryOutputEntry[]; uploading: undefined; uploaded: GalleryOutputEntry[]; upload_error: any; - load: undefined; clear: undefined; }>(); @@ -58,10 +58,6 @@ dispatch("clear") } - function onLoad() { - dispatch("load") - } - interface GradioUploadResponse { error?: string; files?: Array; @@ -114,7 +110,8 @@ } $: { - if (JSON.stringify(_value) !== JSON.stringify(old_value)) { + if (JSON.stringify(_value) !== JSON.stringify(old_value) || uploaded) { + uploaded = false; pending_upload = true; old_value = _value; @@ -128,11 +125,14 @@ if (allBlobs == null || allBlobs.length === 0) { _value = null; + value = null; onChange(); pending_upload = false; } else if (!allBlobs.every(b => b != null)) { _value = null; + value = null; + onChange(); pending_upload = false; } else { @@ -155,7 +155,7 @@ } value = response.files; - dispatch("change") + dispatch("change", value) dispatch("uploaded", value) }). catch(err => { @@ -166,26 +166,22 @@ } async function handle_upload({ detail }: CustomEvent>) { + // Received Gradio-format file data from the Upload component. + // In the reactive block above it will be uploaded to ComfyUI. _value = Array.isArray(detail) ? detail : [detail]; - await tick(); - dispatch("change") - dispatch("load") + uploaded = true; } function handle_clear(_e: CustomEvent) { _value = null; value = []; - dispatch("change") + dispatch("change", value) dispatch("clear") } function convertGradioUpload(e: CustomEvent) { _value = e.detail } - - function convertNodeValue(nodeValue: GalleryOutputEntry[]): GradioFileData[] { - return nodeValue.map(convertComfyOutputEntryToGradio); - }
diff --git a/src/lib/nodes/ComfyWidgetNodes.ts b/src/lib/nodes/ComfyWidgetNodes.ts index cea2548..a28ad09 100644 --- a/src/lib/nodes/ComfyWidgetNodes.ts +++ b/src/lib/nodes/ComfyWidgetNodes.ts @@ -913,16 +913,34 @@ export class ComfyImageUploadNode extends ComfyWidgetNode override svelteComponentType = ImageUploadWidget; override defaultValue = []; override outputIndex = null; - override changedIndex = 3; + override changedIndex = 4; override storeActionName = "store"; override saveUserState = false; - imageSize: Vector2 = [1, 1]; + imageSize: Vector2 = [0, 0]; constructor(name?: string) { super(name, []) } + override onExecute(param: any, options: object) { + super.onExecute(param, options); + + const value = get(this.value) + if (value.length > 0) { + this.setOutputData(0, value[0].filename) // TODO when ComfyUI LoadImage supports loading an image batch + this.setOutputData(1, this.imageSize[0]) + this.setOutputData(2, this.imageSize[1]) + this.setOutputData(3, value.length) + } + else { + this.setOutputData(0, "") + this.setOutputData(1, 0) + this.setOutputData(2, 0) + this.setOutputData(3, 0) + } + } + override parseValue(value: any): GalleryOutputEntry[] { if (value == null) return [] @@ -949,24 +967,6 @@ export class ComfyImageUploadNode extends ComfyWidgetNode return [] } - override onExecute(param: any, options: object) { - super.onExecute(param, options); - - const value = get(this.value) - if (value.length > 0) { - this.setOutputData(0, value[0].filename) // TODO when ComfyUI LoadImage supports loading an image batch - this.setOutputData(1, this.imageSize[0]) - this.setOutputData(2, this.imageSize[1]) - this.setOutputData(3, value.length) - } - else { - this.setOutputData(0, "") - this.setOutputData(1, 1) - this.setOutputData(2, 1) - this.setOutputData(3, 0) - } - } - override formatValue(value: GalleryOutputEntry[]): string { return `Images: ${value?.length || 0}` } @@ -996,13 +996,18 @@ export class ComfyImageEditorNode extends ComfyWidgetNode { name: "store", type: BuiltInSlotType.ACTION } ], outputs: [ + { name: "filename", type: "string" }, // TODO support batches + { name: "width", type: "number" }, + { name: "height", type: "number" }, + { name: "image_count", type: "number" }, + { name: "changed", type: BuiltInSlotType.EVENT }, ] } override svelteComponentType = ImageEditorWidget; override defaultValue: GalleryOutputEntry[] = []; override outputIndex = null; - override changedIndex = null; + override changedIndex = 4; override storeActionName = "store"; override saveUserState = false; @@ -1010,7 +1015,25 @@ export class ComfyImageEditorNode extends ComfyWidgetNode super(name, []) } - _value = null; + imageSize: Vector2 = [0, 0]; + + override onExecute(param: any, options: object) { + super.onExecute(param, options); + + const value = get(this.value) + if (value.length > 0) { + this.setOutputData(0, value[0].filename) // TODO when ComfyUI LoadImage supports loading an image batch + this.setOutputData(1, this.imageSize[0]) + this.setOutputData(2, this.imageSize[1]) + this.setOutputData(3, value.length) + } + else { + this.setOutputData(0, "") + this.setOutputData(1, 0) + this.setOutputData(2, 0) + this.setOutputData(3, 0) + } + } override parseValue(value: any): GalleryOutputEntry[] { if (value == null) diff --git a/src/lib/widgets/ImageEditorWidget.svelte b/src/lib/widgets/ImageEditorWidget.svelte index 85b2ae9..60e9a88 100644 --- a/src/lib/widgets/ImageEditorWidget.svelte +++ b/src/lib/widgets/ImageEditorWidget.svelte @@ -18,15 +18,22 @@ let node: ComfyImageEditorNode | null = null; let nodeValue: Writable | null = null; let attrsChanged: Writable | null = null; - let leftUrl: string = "" - let rightUrl: string = "" - let imgElem: HTMLImageElement | null = null let imgWidth: number = 0; let imgHeight: number = 0; $: widget && setNodeValue(widget); + $: if (!(node && $nodeValue && $nodeValue.length > 0)) { + node.imageSize = [0, 0] + } + else if (imgWidth > 0 && imgHeight > 0) { + node.imageSize = [imgWidth, imgHeight] + } + else { + node.imageSize = [0, 0] + } + function setNodeValue(widget: WidgetLayout) { if (widget) { node = widget.node as ComfyImageEditorNode @@ -224,7 +231,6 @@ ) { console.warn("ONCHANGE!!!", e.detail) $nodeValue = e.detail || [] } + function onUploaded(e: CustomEvent) { + console.warn("ONUPLOADED!!!", e.detail) + $nodeValue = e.detail || [] + } + + function onUploadError(e: CustomEvent) { + console.warn("ONUPLOADERRO!!!", e.detail) + notify(`Error uploading image to ComfyUI: ${e.detail}`) + $nodeValue = [] + } + function onClear(e: CustomEvent) { console.warn("ONCLEAR!!!", e.detail) $nodeValue = [] @@ -44,16 +61,19 @@
- {#if widget && node && nodeValue} - + on:uploading={onUploading} + on:uploaded={onUploaded} + on:upload_error={onUploadError} + on:clear={onClear} + on:change={onChange}/> {/if}