TEMP refactor file passing

src/lib/widgets/GalleryWidget.svelte

@@ -10,13 +10,13 @@
  import type { ComfyGalleryNode } from "$lib/nodes/ComfyWidgetNodes";
  import type { FileData as GradioFileData } from "@gradio/upload";
  import type { SelectData as GradioSelectData } from "@gradio/utils";
- import { clamp } from "$lib/utils";
+ import { clamp, comfyBoxImageToComfyURL, type ComfyBoxImageMetadata } from "$lib/utils";
  import { f7 } from "framework7-svelte";
 
  export let widget: WidgetLayout | null = null;
  export let isMobile: boolean = false;
  let node: ComfyGalleryNode | null = null;
- let nodeValue: Writable<GradioFileData[]> | null = null;
+ let nodeValue: Writable<ComfyBoxImageMetadata[]> | null = null;
  let propsChanged: Writable<number> | null = null;
  let option: number | null = null;
  let imageWidth: number = 1;
@@ -154,8 +154,10 @@
         <div class="wrapper comfy-image-widget" style={widget.attrs.style || ""} bind:this={element}>
             <Block variant="solid" padding={false}>
                 {#if $nodeValue && $nodeValue.length > 0}
+                    {@const value = $nodeValue[$nodeValue.length-1]}
+                    {@const url = comfyBoxImageToComfyURL(value)}
                     <StaticImage
-                        value={$nodeValue[$nodeValue.length-1].data}
+                        value={url}
                         show_label={widget.attrs.title != ""}
                         label={widget.attrs.title}
                         bind:imageWidth
@@ -167,11 +169,12 @@
             </Block>
         </div>
     {:else}
+        {@const images = $nodeValue.map(comfyBoxImageToComfyURL)}
         <div class="wrapper comfy-gallery-widget gradio-gallery" style={widget.attrs.style || ""} bind:this={element}>
             <Block variant="solid" padding={false}>
                 <div class="padding">
                     <Gallery
-                        bind:value={$nodeValue}
+                        value={images}
                         label={widget.attrs.title}
                         show_label={widget.attrs.title !== ""}
                         {style}

src/lib/widgets/ImageEditorWidget.svelte

@@ -4,19 +4,19 @@
  import { get, type Writable, writable } from "svelte/store";
  import Modal from "$lib/components/Modal.svelte";
  import { Button } from "@gradio/button";
- import type { ComfyImageEditorNode, GalleryOutputEntry, MultiImageData } from "$lib/nodes/ComfyWidgetNodes";
+ import type { ComfyImageEditorNode, ComfyImageLocation, MultiImageData } from "$lib/nodes/ComfyWidgetNodes";
  import { Embed as Klecks, KL, KlApp, klHistory, type KlAppOptionsEmbed } from "klecks";
  import type { FileData as GradioFileData } from "@gradio/upload";
 
  import "klecks/style/style.scss";
 	import ImageUpload from "$lib/components/ImageUpload.svelte";
-	import { uploadImageToComfyUI, type ComfyUploadImageAPIResponse, convertComfyOutputToComfyURL } from "$lib/utils";
+	import { uploadImageToComfyUI, type ComfyUploadImageAPIResponse, convertComfyOutputToComfyURL, type ComfyBoxImageMetadata, comfyFileToComfyBoxMetadata } from "$lib/utils";
 	import notify from "$lib/notify";
 
  export let widget: WidgetLayout | null = null;
  export let isMobile: boolean = false;
  let node: ComfyImageEditorNode | null = null;
- let nodeValue: Writable<GalleryOutputEntry[]> | null = null;
+ let nodeValue: Writable<ComfyBoxImageMetadata[]> | null = null;
  let attrsChanged: Writable<number> | null = null;
 
  let imgWidth: number = 0;
@@ -24,14 +24,16 @@
 
  $: 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]
+ $: if ($nodeValue && $nodeValue.length > 0) {
+     // TODO improve
+     if (imgWidth > 0 && imgHeight > 0) {
+         $nodeValue[0].width = imgWidth
+         $nodeValue[0].height = imgHeight
+     }
+     else {
+         $nodeValue[0].width = 0
+         $nodeValue[0].height = 0
+     }
  }
 
  function setNodeValue(widget: WidgetLayout) {
@@ -125,8 +127,9 @@
      const blob = kl.getPNG();
 
      await uploadImageToComfyUI(blob, FILENAME, "input")
-         .then((entry: GalleryOutputEntry) => {
-             $nodeValue = [entry] // TODO more than one image
+         .then((entry: ComfyImageLocation) => {
+             const meta: ComfyBoxImageMetadata = comfyFileToComfyBoxMetadata(entry);
+             $nodeValue = [meta] // TODO more than one image
              notify("Saved image to ComfyUI!", { type: "success" })
              onSuccess();
          })
@@ -191,7 +194,7 @@
      status = "uploading"
  }
 
- function onUploaded(e: CustomEvent<GalleryOutputEntry[]>) {
+ function onUploaded(e: CustomEvent<ComfyImageLocation[]>) {
      uploadError = null;
      status = "uploaded"
      $nodeValue = e.detail;
@@ -207,7 +210,7 @@
      uploadError = e.detail
  }
 
- function onChange(e: CustomEvent<GalleryOutputEntry[]>) {
+ function onChange(e: CustomEvent<ComfyImageLocation[]>) {
      // $nodeValue = e.detail;
  }
 

src/lib/widgets/ImageUploadWidget.svelte

@@ -2,27 +2,30 @@
  import ImageUpload from "$lib/components/ImageUpload.svelte"
  import type { WidgetLayout } from "$lib/stores/layoutState";
  import type { Writable } from "svelte/store";
- import type { ComfyGalleryNode, ComfyImageUploadNode, GalleryOutputEntry, MultiImageData } from "$lib/nodes/ComfyWidgetNodes";
+ import type { ComfyGalleryNode, ComfyImageUploadNode, ComfyImageLocation, MultiImageData } from "$lib/nodes/ComfyWidgetNodes";
 	import notify from "$lib/notify";
+	import { comfyFileToComfyBoxMetadata, type ComfyBoxImageMetadata } from "$lib/utils";
 
  export let widget: WidgetLayout | null = null;
  export let isMobile: boolean = false;
  let node: ComfyImageUploadNode | null = null;
- let nodeValue: Writable<GalleryOutputEntry[]> | null = null;
+ let nodeValue: Writable<ComfyBoxImageMetadata[]> | null = null;
  let propsChanged: Writable<number> | null = null;
  let imgWidth: number = 1;
  let imgHeight: number = 1;
 
  $: 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]
+ $: if ($nodeValue && $nodeValue.length > 0) {
+     // TODO improve
+     if (imgWidth > 0 && imgHeight > 0) {
+         $nodeValue[0].width = imgWidth
+         $nodeValue[0].height = imgHeight
+     }
+     else {
+         $nodeValue[0].width = 0
+         $nodeValue[0].height = 0
+     }
  }
 
  function setNodeValue(widget: WidgetLayout) {
@@ -38,14 +41,14 @@
      $nodeValue = []
  }
 
- function onChange(e: CustomEvent<GalleryOutputEntry[]>) {
+ function onChange(e: CustomEvent<ComfyImageLocation[]>) {
      console.warn("ONCHANGE!!!", e.detail)
-     $nodeValue = e.detail || []
+     $nodeValue = (e.detail || []).map(comfyFileToComfyBoxMetadata)
  }
 
- function onUploaded(e: CustomEvent<GalleryOutputEntry[]>) {
+ function onUploaded(e: CustomEvent<ComfyImageLocation[]>) {
      console.warn("ONUPLOADED!!!", e.detail)
-     $nodeValue = e.detail || []
+     $nodeValue = (e.detail || []).map(comfyFileToComfyBoxMetadata)
  }
 
  function onUploadError(e: CustomEvent<any>) {
@@ -54,7 +57,7 @@
      $nodeValue = []
  }
 
- function onClear(e: CustomEvent<GalleryOutputEntry[]>) {
+ function onClear(e: CustomEvent<ComfyImageLocation[]>) {
      console.warn("ONCLEAR!!!", e.detail)
      $nodeValue = []
  }