neuro_llc/ComfyBox
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Image dimensions output for image upload widget

Browse Source
This commit is contained in:
space-nuko
2023-05-08 19:32:57 -05:00
parent 0f50dbae87
commit 92fbe1ea6b
5 changed files with 63 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/lib/nodes/ComfyActionNodes.ts
View File

@@ -306,7 +306,6 @@ export class ComfySetNodeModeAction extends ComfyGraphNode {
} else {
newMode = NodeMode.NEVER;
}
console.warn("CHANGEMODE", newMode == NodeMode.ALWAYS ? "ALWAYS" : "NEVER", tags, node)
node.changeMode(newMode);
if ("notifyPropsChanged" in node)
(node as ComfyWidgetNode).notifyPropsChanged();

17
src/lib/nodes/ComfyPickFirstNode.ts
View File

@@ -1,9 +1,11 @@
import { BuiltInSlotType, LiteGraph, NodeMode, type INodeInputSlot, type SlotLayout, type INodeOutputSlot, LLink, LConnectionKind, type ITextWidget } from "@litegraph-ts/core";
import { BuiltInSlotType, LiteGraph, NodeMode, type INodeInputSlot, type SlotLayout, type INodeOutputSlot, LLink, LConnectionKind, type ITextWidget, type SerializedLGraphNode, type IComboWidget } from "@litegraph-ts/core";
import ComfyGraphNode, { type ComfyGraphNodeProperties } from "./ComfyGraphNode";
import { Watch } from "@litegraph-ts/nodes-basic";
export type PickFirstMode = "anyActiveLink" | "truthy" | "dataNonNull"
export interface ComfyPickFirstNodeProperties extends ComfyGraphNodeProperties {
acceptNullLinkData: boolean
mode: PickFirstMode
}
function nextLetter(s: string): string {
@@ -20,7 +22,7 @@ function nextLetter(s: string): string {
export default class ComfyPickFirstNode extends ComfyGraphNode {
override properties: ComfyPickFirstNodeProperties = {
tags: [],
acceptNullLinkData: false
mode: "dataNonNull"
}
static slotLayout: SlotLayout = {
@@ -38,11 +40,13 @@ export default class ComfyPickFirstNode extends ComfyGraphNode {
private selected: number = -1;
displayWidget: ITextWidget;
modeWidget: IComboWidget;
constructor(title?: string) {
super(title);
this.displayWidget = this.addWidget("text", "Value", "")
this.displayWidget.disabled = true;
this.modeWidget = this.addWidget("combo", "Mode", this.properties.mode, null, { property: "mode", values: ["anyActiveLink", "truthy", "dataNonNull"] })
}
override onDrawBackground(ctx: CanvasRenderingContext2D) {
@@ -117,7 +121,12 @@ export default class ComfyPickFirstNode extends ComfyGraphNode {
return true;
}
else {
return link.data != null || this.properties.acceptNullLinkData;
if (this.properties.mode === "dataNonNull")
return link.data != null;
else if (this.properties.mode === "truthy")
return Boolean(link.data)
else // anyActiveLink
return true;
}
}

30
src/lib/nodes/ComfyWidgetNodes.ts
View File

@@ -594,6 +594,7 @@ export class ComfyGalleryNode extends ComfyWidgetNode<GradioFileData[]> {
}
override setValue(value: any) {
console.warn("SETVALUE", value)
if (Array.isArray(value)) {
super.setValue(value)
}
@@ -669,6 +670,10 @@ export class ComfyCheckboxNode extends ComfyWidgetNode<boolean> {
}
static slotLayout: SlotLayout = {
inputs: [
{ name: "value", type: "boolean" },
{ name: "store", type: BuiltInSlotType.ACTION }
],
outputs: [
{ name: "value", type: "boolean" },
{ name: "changed", type: BuiltInSlotType.EVENT },
@@ -678,6 +683,10 @@ export class ComfyCheckboxNode extends ComfyWidgetNode<boolean> {
override svelteComponentType = CheckboxWidget;
override defaultValue = false;
constructor(name?: string) {
super(name, false)
}
override setValue(value: any) {
value = Boolean(value)
const changed = value != get(this.value);
@@ -686,8 +695,9 @@ export class ComfyCheckboxNode extends ComfyWidgetNode<boolean> {
this.triggerSlot(1, value)
}
constructor(name?: string) {
super(name, false)
override onAction(action: any, param: any) {
if (action === "store")
this.setValue(Boolean(param))
}
}
@@ -770,6 +780,8 @@ export class ComfyImageUploadNode extends ComfyWidgetNode<Array<GradioFileData>>
static slotLayout: SlotLayout = {
outputs: [
{ name: "filename", type: "string" }, // TODO support batches
{ name: "width", type: "number" },
{ name: "height", type: "number" },
{ name: "changed", type: BuiltInSlotType.EVENT },
]
}
@@ -777,7 +789,9 @@ export class ComfyImageUploadNode extends ComfyWidgetNode<Array<GradioFileData>>
override svelteComponentType = ImageUploadWidget;
override defaultValue = null;
override outputIndex = null;
override changedIndex = 1;
override changedIndex = 3;
imageSize: Vector2 = [1, 1];
constructor(name?: string) {
super(name, [])
@@ -787,10 +801,16 @@ export class ComfyImageUploadNode extends ComfyWidgetNode<Array<GradioFileData>>
super.onExecute(param, options);
const value = get(this.value)
if (value.length > 0 && value[0].name)
if (value.length > 0 && value[0].name) {
this.setOutputData(0, value[0].name) // TODO when ComfyUI LoadImage supports loading an image batch
else
this.setOutputData(1, this.imageSize[0])
this.setOutputData(2, this.imageSize[1])
}
else {
this.setOutputData(0, "")
this.setOutputData(1, 1)
this.setOutputData(2, 1)
}
}
override formatValue(value: GradioFileData[]): string {

7
src/lib/widgets/GalleryWidget.svelte
View File

@@ -37,8 +37,7 @@
};
let style: Styles = {
grid_cols: [4],
grid_rows: [4],
grid_cols: [3],
object_fit: "cover",
}
let element: HTMLDivElement;
@@ -125,11 +124,11 @@
}
</script>
{#if widget && node && nodeValue && $nodeValue != null}
{#if widget && node && nodeValue}
{#if widget.attrs.variant === "image"}
<div class="wrapper comfy-image-widget" style={widget.attrs.style || ""} bind:this={element}>
<Block variant="solid" padding={false}>
{#if $nodeValue.length > 0}
{#if $nodeValue && $nodeValue.length > 0}
<StaticImage
value={$nodeValue[$nodeValue.length-1].data}
show_label={widget.attrs.title != ""}

23
src/lib/widgets/ImageUploadWidget.svelte
View File

@@ -9,6 +9,7 @@
import UploadText from "$lib/components/gradio/app/UploadText.svelte";
import { tick } from "svelte";
import notify from "$lib/notify";
import type { Vector2 } from "@litegraph-ts/core";
export let widget: WidgetLayout | null = null;
export let isMobile: boolean = false;
@@ -18,6 +19,9 @@
let dragging = false;
let pending_upload = false;
let old_value: Array<GradioFileData> | null = null;
let imgElem: HTMLImageElement | null = null
let imgWidth: number = 1;
let imgHeight: number = 1;
$: widget && setNodeValue(widget);
@@ -35,6 +39,18 @@
}
};
$: if (!(node && _value && _value.length > 0 && imgElem)) {
imgWidth = 1
imgHeight = 1
node.imageSize = [1, 1]
}
else if (imgWidth > 1 || imgHeight > 1) {
node.imageSize = [imgWidth, imgHeight]
}
else {
node.imageSize = [1, 1]
}
function onChange() {
console.warn("CHANGED", _value)
$nodeValue = _value || []
@@ -191,7 +207,12 @@
{#if _value && _value.length > 0 && !pending_upload}
{@const firstImage = _value[0]}
<ModifyUpload on:clear={handle_clear} absolute />
<img src={getImageUrl(firstImage)} alt={firstImage.orig_name} />
<img src={getImageUrl(firstImage)}
alt={firstImage.orig_name}
bind:this={imgElem}
bind:naturalWidth={imgWidth}
bind:naturalHeight={imgHeight}
/>
{:else}
<Upload
file_count={node.properties.fileCount}