Fix image upload

2023-05-13 15:14:52 -05:00
parent f66df94c36
commit 0656ae1d3a
5 changed files with 92 additions and 45 deletions
--- 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;
--- 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<GalleryOutputEntry>;
@@ -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<GradioFileData | Array<GradioFileData>>) {
+     // 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<null>) {
     _value = null;
     value = [];
-     dispatch("change")
+     dispatch("change", value)
     dispatch("clear")
 }

 function convertGradioUpload(e: CustomEvent<GradioFileData[]>) {
     _value = e.detail
 }
-
- function convertNodeValue(nodeValue: GalleryOutputEntry[]): GradioFileData[] {
-     return nodeValue.map(convertComfyOutputEntryToGradio);
- }
 </script>

 <div class="image-upload" {style}>
--- a/src/lib/nodes/ComfyWidgetNodes.ts
+++ b/src/lib/nodes/ComfyWidgetNodes.ts
@@ -913,16 +913,34 @@ export class ComfyImageUploadNode extends ComfyWidgetNode<GalleryOutputEntry[]>
    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<GalleryOutputEntry[]>
        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<GalleryOutputEntry[]>
            { 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<GalleryOutputEntry[]>
        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)
--- a/src/lib/widgets/ImageEditorWidget.svelte
+++ b/src/lib/widgets/ImageEditorWidget.svelte
@@ -18,15 +18,22 @@
 let node: ComfyImageEditorNode | null = null;
 let nodeValue: Writable<GalleryOutputEntry[]> | null = null;
 let attrsChanged: Writable<number> | 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 @@
            <ImageUpload value={$nodeValue}
                         bind:imgWidth
                         bind:imgHeight
-                         bind:imgElem
                         fileCount={"single"}
                         elem_classes={[]}
                         style={""}
--- a/src/lib/widgets/ImageUploadWidget.svelte
+++ b/src/lib/widgets/ImageUploadWidget.svelte
@@ -3,6 +3,7 @@
 import type { WidgetLayout } from "$lib/stores/layoutState";
 import type { Writable } from "svelte/store";
 import type { ComfyGalleryNode, ComfyImageUploadNode, GalleryOutputEntry, MultiImageData } from "$lib/nodes/ComfyWidgetNodes";
+	import notify from "$lib/notify";

 export let widget: WidgetLayout | null = null;
 export let isMobile: boolean = false;
@@ -32,11 +33,27 @@
     }
 };

+ function onUploading() {
+     console.warn("ONUPLOAD!!!")
+     $nodeValue = []
+ }
+
 function onChange(e: CustomEvent<GalleryOutputEntry[]>) {
     console.warn("ONCHANGE!!!", e.detail)
     $nodeValue = e.detail || []
 }

+ function onUploaded(e: CustomEvent<GalleryOutputEntry[]>) {
+     console.warn("ONUPLOADED!!!", e.detail)
+     $nodeValue = e.detail || []
+ }
+
+ function onUploadError(e: CustomEvent<any>) {
+     console.warn("ONUPLOADERRO!!!", e.detail)
+     notify(`Error uploading image to ComfyUI: ${e.detail}`)
+     $nodeValue = []
+ }
+
 function onClear(e: CustomEvent<GalleryOutputEntry[]>) {
     console.warn("ONCLEAR!!!", e.detail)
     $nodeValue = []
@@ -44,16 +61,19 @@
 </script>

 <div class="wrapper gradio-file comfy-image-upload" style={widget.attrs.style}>
-    {#if widget && node && nodeValue}
-        <ImageUpload value={$nodeValue}
+    {#if widget && node}
+        <ImageUpload value={$nodeValue || []}
                     bind:imgWidth
                     bind:imgHeight
                     bind:fileCount={node.properties.fileCount}
                     elem_classes={widget.attrs.classes.split(",")}
                     style={widget.attrs.style}
                     label={widget.attrs.title}
-                     on:change={onChange}
-                     on:clear={onClear}/>
+                     on:uploading={onUploading}
+                     on:uploaded={onUploaded}
+                     on:upload_error={onUploadError}
+                     on:clear={onClear}
+                     on:change={onChange}/>
    {/if}
 </div>