Imagefilethings

This commit is contained in:
space-nuko
2023-05-13 22:13:06 -05:00
parent 05bcce5573
commit 152a1c6097
14 changed files with 169 additions and 272 deletions

View File

@@ -1,11 +1,11 @@
import { LiteGraph, type SlotLayout } from "@litegraph-ts/core";
import ComfyGraphNode from "./ComfyGraphNode";
import { comfyFileToAnnotatedFilepath, isComfyBoxImageMetadata } from "$lib/utils";
import { comfyFileToAnnotatedFilepath, isComfyBoxImageMetadata, parseWhateverIntoImageMetadata } from "$lib/utils";
export class ComfyImageToFilepath extends ComfyGraphNode {
export default class ComfyImageToFilepathNode extends ComfyGraphNode {
static slotLayout: SlotLayout = {
inputs: [
{ name: "image", type: "COMFYBOX_IMAGE" },
{ name: "image", type: "COMFYBOX_IMAGES,COMFYBOX_IMAGE" },
],
outputs: [
{ name: "filepath", type: "string" },
@@ -14,19 +14,20 @@ export class ComfyImageToFilepath extends ComfyGraphNode {
override onExecute() {
const data = this.getInputData(0)
if (data == null || !isComfyBoxImageMetadata(data)) {
const meta = parseWhateverIntoImageMetadata(data);
if (meta == null || meta.length === 0) {
this.setOutputData(0, null)
return;
}
const path = comfyFileToAnnotatedFilepath(data.comfyUIFile);
const path = comfyFileToAnnotatedFilepath(meta[0].comfyUIFile);
this.setOutputData(0, path);
}
}
LiteGraph.registerNodeType({
class: ComfyImageToFilepath,
class: ComfyImageToFilepathNode,
title: "Comfy.ImageToFilepath",
desc: "Converts ComfyBox image metadata to an annotated filepath like \"image.png[output]\" for use with ComfyUI.",
type: "images/file_to_filepath"
type: "image/file_to_filepath"
})

View File

@@ -0,0 +1,35 @@
import { LiteGraph, type SlotLayout } from "@litegraph-ts/core";
import ComfyGraphNode from "./ComfyGraphNode";
import { isComfyBoxImageMetadataArray } from "$lib/utils";
/*
* TODO: This is just a temporary workaround until litegraph can handle typed
* array arguments.
*/
export default class ComfyPickImageNode extends ComfyGraphNode {
static slotLayout: SlotLayout = {
inputs: [
{ name: "images", type: "COMFYBOX_IMAGES" },
],
outputs: [
{ name: "image", type: "COMFYBOX_IMAGE" },
]
}
override onExecute() {
const data = this.getInputData(0)
if (data == null || !isComfyBoxImageMetadataArray(data)) {
this.setOutputData(0, null)
return;
}
this.setOutputData(0, data[0]);
}
}
LiteGraph.registerNodeType({
class: ComfyPickImageNode,
title: "Comfy.PickImage",
desc: "Picks out the first image from an array of ComfyBox images.",
type: "image/pick_image"
})

View File

@@ -170,6 +170,10 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
parseValue(value: any): T { return value as T };
getValue(): T {
return get(this.value);
}
setValue(value: any, noChangedEvent: boolean = false) {
if (noChangedEvent)
this._noChangedEvent = true;
@@ -869,57 +873,6 @@ LiteGraph.registerNodeType({
type: "ui/radio"
})
export interface ComfyImageUploadProperties extends ComfyWidgetProperties {
fileCount: "single" | "multiple" // gradio File component format
}
export class ComfyImageUploadNode extends ComfyWidgetNode<ComfyBoxImageMetadata[]> {
override properties: ComfyImageUploadProperties = {
defaultValue: [],
tags: [],
fileCount: "single",
}
static slotLayout: SlotLayout = {
inputs: [
{ name: "store", type: BuiltInSlotType.ACTION }
],
outputs: [
{ name: "images", type: "COMFYBOX_IMAGES" }, // TODO support batches
{ name: "changed", type: BuiltInSlotType.EVENT },
]
}
override svelteComponentType = ImageUploadWidget;
override defaultValue = [];
override outputIndex = 0;
override changedIndex = 1;
override storeActionName = "store";
override saveUserState = false;
constructor(name?: string) {
super(name, [])
}
override parseValue(value: any): ComfyBoxImageMetadata[] {
return parseWhateverIntoImageMetadata(value) || []
}
override formatValue(value: ComfyImageLocation[]): string {
return `Images: ${value?.length || 0}`
}
}
LiteGraph.registerNodeType({
class: ComfyImageUploadNode,
title: "UI.ImageUpload",
desc: "Widget that lets you upload images into ComfyUI's input folder",
type: "ui/image_upload"
})
export type FileNameOrGalleryData = string | ComfyImageLocation;
export type MultiImageData = FileNameOrGalleryData[];
export interface ComfyImageEditorNodeProperties extends ComfyWidgetProperties {
}
@@ -941,7 +894,7 @@ export class ComfyImageEditorNode extends ComfyWidgetNode<ComfyBoxImageMetadata[
override svelteComponentType = ImageEditorWidget;
override defaultValue = [];
override outputIndex = null;
override outputIndex = 0;
override inputIndex = null;
override changedIndex = 1;
override storeActionName = "store";
@@ -963,6 +916,6 @@ export class ComfyImageEditorNode extends ComfyWidgetNode<ComfyBoxImageMetadata[
LiteGraph.registerNodeType({
class: ComfyImageEditorNode,
title: "UI.ImageEditor",
desc: "Widget that lets edit a multi-layered image",
desc: "Widget that lets you upload and edit a multi-layered image. Can also act like a standalone image uploader.",
type: "ui/image_editor"
})

View File

@@ -14,6 +14,7 @@ export {
export { default as ComfyPickFirstNode } from "./ComfyPickFirstNode"
export { default as ComfyValueControl } from "./ComfyValueControl"
export { default as ComfySelector } from "./ComfySelector"
export { default as ComfyImageCacheNode } from "./ComfyImageCacheNode"
export { default as ComfyTriggerNewEventNode } from "./ComfyTriggerNewEventNode"
export { default as ComfyConfigureQueuePromptButton } from "./ComfyConfigureQueuePromptButton"
export { default as ComfyPickImageNode } from "./ComfyPickImageNode"
export { default as ComfyImageToFilepathNode } from "./ComfyImageToFilepathNode"