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

Work

Browse Source
This commit is contained in:
space-nuko
2023-05-16 23:03:49 -05:00
parent 0626baba2e
commit af510fe843
20 changed files with 133 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
litegraph

Submodule litegraph updated: ddd1ef25fb...90204e22e7

16
src/lib/components/BlockContainer.svelte
View File

@@ -63,7 +63,7 @@
class:root-container={zIndex === 0}
class:is-executing={container.isNodeExecuting}
class:mobile={isMobile}
class:edit={edit}>
class:edit>
<Block>
{#if container.attrs.title && container.attrs.title !== ""}
<label for={String(container.id)} class={($uiState.uiUnlocked && $uiState.uiEditMode === "widgets") ? "edit-title-label" : ""}>
@@ -72,7 +72,7 @@
{/if}
<div class="v-pane"
class:empty={children.length === 0}
class:edit={edit}
class:edit
use:dndzone="{{
items: children,
flipDurationMs,
@@ -85,8 +85,9 @@
on:finalize="{handleFinalize}"
>
{#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)}
{@const hidden = isHidden(item)}
{@const hidden = isHidden(item) && !edit}
<div class="animation-wrapper"
class:edit
class:hidden={hidden}
animate:flip={{duration:flipDurationMs}}
style={item?.attrs?.style || ""}
@@ -119,17 +120,18 @@
.edit {
min-width: 200px;
margin: 0.2rem 0;
}
&:not(.edit) > .animation-wrapper.hidden {
.animation-wrapper.hidden:not(.edit) {
display: none;
}
&.empty {
border-width: 3px;
border-color: var(--color-grey-400);
border-color: var(--comfy-container-empty-border-color);
border-radius: 0;
background: var(--color-grey-300);
background: var(--comfy-container-empty-background-fill);
min-height: 100px;
border-style: dashed;
}
@@ -246,7 +248,7 @@
}
.handle-hidden {
background-color: #40404080;
background-color: #303030A0;
}
.handle-widget:hover {

2
src/lib/components/ComfyApp.ts
View File

@@ -404,7 +404,7 @@ export default class ComfyApp {
}
// Distinguish frontend/backend connections
const BACKEND_TYPES = ["CLIP", "CLIP_VISION", "CLIP_VISION_OUTPUT", "CONDITIONING", "CONTROL_NET", "LATENT", "MASK", "MODEL", "STYLE_MODEL", "VAE", "UPSCALE_MODEL"]
const BACKEND_TYPES = ["CLIP", "CLIP_VISION", "CLIP_VISION_OUTPUT", "CONDITIONING", "CONTROL_NET", "IMAGE", "LATENT", "MASK", "MODEL", "STYLE_MODEL", "VAE", "UPSCALE_MODEL"]
for (const type of BACKEND_TYPES) {
setColor(type, "orange")
}

10
src/lib/components/ComfyProperties.svelte
View File

@@ -132,7 +132,7 @@
value = spec.defaultValue
else if (spec.serialize)
value = spec.serialize(value)
console.debug("[ComfyProperties] getAttribute", spec.name, value, target, spec)
// console.debug("[ComfyProperties] getAttribute", spec.name, value, target, spec)
return value
}
@@ -166,7 +166,7 @@
value = spec.defaultValue
else if (spec.serialize)
value = spec.serialize(value)
console.debug("[ComfyProperties] getProperty", spec, value, node)
// console.debug("[ComfyProperties] getProperty", spec, value, node)
return value
}
@@ -197,7 +197,7 @@
value = spec.defaultValue
else if (spec.serialize)
value = spec.serialize(value)
console.debug("[ComfyProperties] getVar", spec, value, node)
// console.debug("[ComfyProperties] getVar", spec, value, node)
return value
}
@@ -229,7 +229,7 @@
value = spec.defaultValue
else if (spec.serialize)
value = spec.serialize(value)
console.debug("[ComfyProperties] getWorkflowAttribute", spec.name, value, spec, $layoutState.attrs[spec.name])
// console.debug("[ComfyProperties] getWorkflowAttribute", spec.name, value, spec, $layoutState.attrs[spec.name])
return value
}
@@ -238,7 +238,7 @@
return;
const name = spec.name
console.warn("updateWorkflowAttribute", name, value)
console.warn("[ComfyProperties] updateWorkflowAttribute", name, value)
$layoutState.attrs[name] = value
$layoutState = $layoutState

13
src/lib/components/ComfyUIPane.svelte
View File

@@ -41,8 +41,11 @@
$: {
canUngroup = false;
if ($selectionState.currentSelection.length === 1) {
const item = $layoutState.allItems[$selectionState.currentSelection[0]].dragItem;
canUngroup = item.type === "container"
const entry = $layoutState.allItems[$selectionState.currentSelection[0]]
if (entry != null) {
const item = entry.dragItem;
canUngroup = item.type === "container"
}
}
}
$: if (canUngroup) {
@@ -59,7 +62,11 @@
if (itemID == null)
return;
const item = $layoutState.allItems[$selectionState.currentSelection[0]].dragItem;
const entry = $layoutState.allItems[$selectionState.currentSelection[0]]
if (entry == null)
return
const item = entry.dragItem;
if(item.type !== "container")
return

6
src/lib/components/Container.svelte
View File

@@ -15,8 +15,8 @@
import { flip } from 'svelte/animate';
import layoutState, { type ContainerLayout, type WidgetLayout, type IDragItem } from "$lib/stores/layoutState";
import { startDrag, stopDrag } from "$lib/utils"
import type { Writable } from "svelte/store";
import { isHidden } from "$lib/widgets/utils";
import type { Writable } from "svelte/store";
import { isHidden } from "$lib/widgets/utils";
export let container: ContainerLayout | null = null;
export let zIndex: number = 0;
@@ -34,7 +34,7 @@
</script>
{#if container}
{@const edit = $uiState.uiUnlocked && $uiState.uiEditMode === "widgets" && zIndex > 1}
{@const edit = $uiState.uiUnlocked && $uiState.uiEditMode === "widgets"}
{@const dragDisabled = zIndex === 0 || $selectionState.currentSelection.length > 2 || !$uiState.uiUnlocked}
{#key $attrsChanged}
{#if edit || !isHidden(container)}

4
src/lib/components/WidgetContainer.svelte
View File

@@ -65,7 +65,7 @@
<Container {container} {classes} {zIndex} {showHandles} {isMobile} />
{/key}
{:else if widget && widget.node}
{@const edit = $uiState.uiUnlocked && $uiState.uiEditMode === "widgets" && zIndex > 1}
{@const edit = $uiState.uiUnlocked && $uiState.uiEditMode === "widgets"}
{@const hidden = isHidden(widget)}
{@const hovered = $uiState.uiUnlocked && $selectionState.currentHovered.has(widget.id)}
{@const selected = $uiState.uiUnlocked && $selectionState.currentSelection.includes(widget.id)}
@@ -136,7 +136,5 @@
.edit {
border: 2px dashed var(--color-blue-400);
margin: 0.2em;
padding: 0.2em;
}
</style>

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

@@ -177,8 +177,8 @@ export class ComfySwapAction extends ComfyGraphNode {
override onAction(action: any, param: any) {
const a = this.getInputData(0)
const b = this.getInputData(1)
this.triggerSlot(0, a)
this.triggerSlot(1, b)
this.triggerSlot(0, b)
this.triggerSlot(1, a)
};
}

33
src/lib/nodes/ComfyImageToFilepathNode.ts
View File

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

74
src/lib/nodes/ComfyPickImageNode.ts
View File

@@ -1,11 +1,7 @@
import { LiteGraph, type SlotLayout } from "@litegraph-ts/core";
import { LiteGraph, type ITextWidget, type SlotLayout, type INumberWidget } from "@litegraph-ts/core";
import ComfyGraphNode from "./ComfyGraphNode";
import { isComfyBoxImageMetadataArray } from "$lib/utils";
import { comfyFileToAnnotatedFilepath, type ComfyBoxImageMetadata } 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: [
@@ -13,23 +9,77 @@ export default class ComfyPickImageNode extends ComfyGraphNode {
],
outputs: [
{ name: "image", type: "COMFYBOX_IMAGE" },
{ name: "filename", type: "string" },
{ name: "width", type: "number" },
{ name: "height", type: "number" },
]
}
filepathWidget: ITextWidget;
folderWidget: ITextWidget;
widthWidget: INumberWidget;
heightWidget: INumberWidget;
constructor(title?: string) {
super(title)
this.filepathWidget = this.addWidget("text", "File", "")
this.folderWidget = this.addWidget("text", "Folder", "")
this.widthWidget = this.addWidget("number", "Width", 0)
this.heightWidget = this.addWidget("number", "Height", 0)
for (const widget of this.widgets)
widget.disabled = true;
}
_value: ComfyBoxImageMetadata[] | null = null;
_image: ComfyBoxImageMetadata | null = null;
_path: string | null = null;
_index: number = 0;
private setValue(value: ComfyBoxImageMetadata[] | null) {
const changed = this._value != value;
this._value = value;
if (changed) {
if (value && value[this._index] != null) {
this._image = value[this._index]
this._path = comfyFileToAnnotatedFilepath(this._image.comfyUIFile);
this.filepathWidget.value = this._image.comfyUIFile.filename
this.folderWidget.value = this._image.comfyUIFile.type
this.widthWidget.value = this._image.width
this.heightWidget.value = this._image.height
}
else {
this._image = null;
this._path = null;
this.filepathWidget.value = "(None)"
this.folderWidget.value = ""
this.widthWidget.value = 0
this.heightWidget.value = 0
}
}
}
override onExecute() {
const data = this.getInputData(0)
if (data == null || !isComfyBoxImageMetadataArray(data)) {
this.setOutputData(0, null)
return;
}
this.setValue(data);
this.setOutputData(0, data[0]);
if (this._image == null) {
this.setOutputData(0, null)
this.setOutputData(1, null)
this.setOutputData(2, 0)
this.setOutputData(3, 0)
}
else {
this.setOutputData(0, this._image);
this.setOutputData(1, this._path);
this.setOutputData(2, this._image.width);
this.setOutputData(3, this._image.height);
}
}
}
LiteGraph.registerNodeType({
class: ComfyPickImageNode,
title: "Comfy.PickImage",
desc: "Picks out the first image from an array of ComfyBox images.",
desc: "Selects an image from an array of ComfyBox images and returns its properties.",
type: "image/pick_image"
})

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

@@ -16,4 +16,3 @@ export { default as ComfySelector } from "./ComfySelector"
export { default as ComfyTriggerNewEventNode } from "./ComfyTriggerNewEventNode"
export { default as ComfyConfigureQueuePromptButton } from "./ComfyConfigureQueuePromptButton"
export { default as ComfyPickImageNode } from "./ComfyPickImageNode"
export { default as ComfyImageToFilepathNode } from "./ComfyImageToFilepathNode"

0
src/lib/nodes/widgets/ComfyImageEditorNode.ts → src/lib/nodes/widgets/ComfyImageUploadNode.ts
View File

4
src/lib/nodes/widgets/ComfyNumberNode.ts
View File

@@ -2,7 +2,7 @@ import type IComfyInputSlot from "$lib/IComfyInputSlot";
import { clamp } from "$lib/utils";
import { BuiltInSlotType, LiteGraph, type SlotLayout } from "@litegraph-ts/core";
import RangeWidget from "$lib/widgets/RangeWidget.svelte";
import NumberWidget from "$lib/widgets/NumberWidget.svelte";
import type { ComfyWidgetProperties } from "./ComfyWidgetNode";
import ComfyWidgetNode from "./ComfyWidgetNode";
@@ -23,7 +23,7 @@ export default class ComfyNumberNode extends ComfyWidgetNode<number> {
precision: 1
}
override svelteComponentType = RangeWidget
override svelteComponentType = NumberWidget
override defaultValue = 0;
static slotLayout: SlotLayout = {

2
src/lib/nodes/widgets/ComfyWidgetNode.ts
View File

@@ -23,7 +23,7 @@ export type AutoConfigOptions = {
*
* - Go to layoutState, look for `ALL_ATTRIBUTES,` insert or find a "variant"
* attribute and set `validNodeTypes` to the type of the litegraph node
* - Add a new entry in the `values` array, like "knob" or "dial" for ComfySliderWidget
* - Add a new entry in the `values` array, like "knob" or "dial" for ComfyNumberWidget
* - Add an {#if widget.attrs.variant === <...>} statement in the existing Svelte component
*
* Also, BEWARE of calling setOutputData() and triggerSlot() on the same frame!

2
src/lib/nodes/widgets/index.ts
View File

@@ -3,7 +3,7 @@ export { default as ComfyButtonNode } from "./ComfyButtonNode"
export { default as ComfyCheckboxNode } from "./ComfyCheckboxNode"
export { default as ComfyComboNode } from "./ComfyComboNode"
export { default as ComfyGalleryNode } from "./ComfyGalleryNode"
export { default as ComfyImageEditorNode } from "./ComfyImageEditorNode"
export { default as ComfyImageUploadNode } from "./ComfyImageUploadNode"
export { default as ComfyRadioNode } from "./ComfyRadioNode"
export { default as ComfyNumberNode } from "./ComfyNumberNode"
export { default as ComfyTextNode } from "./ComfyTextNode"

22
src/lib/stores/layoutState.ts
View File

@@ -185,7 +185,7 @@ export type AttributesSpec = {
location: "widget" | "nodeProps" | "nodeVars" | "workflow"
/*
* Can this attribute be edited in the properties pane.
* Can this attribute be edited in the properties pane?
*/
editable: boolean,
@@ -332,7 +332,7 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
location: "widget",
editable: true,
values: ["visible", "disabled", "hidden"],
defaultValue: "disabled",
defaultValue: "hidden",
canShow: (di: IDragItem) => di.type === "widget"
},
@@ -353,7 +353,7 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
location: "widget",
editable: true,
values: ["block", "hidden"],
defaultValue: "block",
defaultValue: "hidden",
canShow: (di: IDragItem) => di.type === "container"
},
@@ -484,7 +484,7 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
defaultValue: 0,
min: -2 ^ 16,
max: 2 ^ 16,
validNodeTypes: ["ui/slider"],
validNodeTypes: ["ui/number"],
},
{
name: "max",
@@ -494,7 +494,7 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
defaultValue: 10,
min: -2 ^ 16,
max: 2 ^ 16,
validNodeTypes: ["ui/slider"],
validNodeTypes: ["ui/number"],
},
{
name: "step",
@@ -504,7 +504,7 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
defaultValue: 1,
min: -2 ^ 16,
max: 2 ^ 16,
validNodeTypes: ["ui/slider"],
validNodeTypes: ["ui/number"],
},
// Button
@@ -707,6 +707,8 @@ function addContainer(parent: ContainerLayout | null, attrs: Partial<Attributes>
}
}
const entry: DragItemEntry = { dragItem, children: [], parent: null };
if (state.allItemsByNode[dragItem.id] !== null)
throw new Error(`Container with ID ${dragItem.id} already registered!!!`)
state.allItems[dragItem.id] = entry;
if (parent) {
moveItem(dragItem, parent, index)
@@ -733,7 +735,11 @@ function addWidget(parent: ContainerLayout, node: ComfyWidgetNode, attrs: Partia
}
const parentEntry = state.allItems[parent.id]
const entry: DragItemEntry = { dragItem, children: [], parent: null };
if (state.allItemsByNode[dragItem.id] !== null)
throw new Error(`Widget with ID ${dragItem.id} already registered!!!`)
state.allItems[dragItem.id] = entry;
if (state.allItemsByNode[node.id] !== null)
throw new Error(`Widget's node with ID ${node.id} already registered!!!`)
state.allItemsByNode[node.id] = entry;
console.debug("[layoutState] addWidget", state)
moveItem(dragItem, parent, index)
@@ -863,9 +869,7 @@ function groupItems(dragItemIDs: DragItemID[], attrs: Partial<Attributes> = {}):
index = indexFound
}
const title = dragItemIDs.length <= 1 ? "" : "Group";
const container = addContainer(parent as ContainerLayout, { title, ...attrs }, index)
const container = addContainer(parent as ContainerLayout, { title: "", containerVariant: "block", ...attrs }, index)
for (const itemID of dragItemIDs) {
const item = state.allItems[itemID].dragItem;

14
src/lib/utils.ts
View File

@@ -1,14 +1,10 @@
import ComfyApp, { type SerializedPrompt } from "./components/ComfyApp";
import ComboWidget from "$lib/widgets/ComboWidget.svelte";
import RangeWidget from "$lib/widgets/RangeWidget.svelte";
import TextWidget from "$lib/widgets/TextWidget.svelte";
import { get } from "svelte/store"
import layoutState, { type WidgetLayout } from "$lib/stores/layoutState"
import selectionState from "$lib/stores/selectionState"
import type { SvelteComponentDev } from "svelte/internal";
import { Subgraph, type LGraph, type LGraphNode, type LLink, type SerializedLGraph, type UUID, GraphInput } from "@litegraph-ts/core";
import layoutState, { type WidgetLayout } from "$lib/stores/layoutState";
import selectionState from "$lib/stores/selectionState";
import type { FileData as GradioFileData } from "@gradio/upload";
import { Subgraph, type LGraph, type LGraphNode, type LLink, type SerializedLGraph, type UUID } from "@litegraph-ts/core";
import { get } from "svelte/store";
import type { ComfyNodeID } from "./api";
import { type SerializedPrompt } from "./components/ComfyApp";
export function clamp(n: number, min: number, max: number): number {
return Math.min(Math.max(n, min), max)

0
src/lib/widgets/RangeWidget.svelte
View File

16
src/lib/widgets/utils.ts
View File

@@ -1,14 +1,24 @@
import type { IDragItem } from "$lib/stores/layoutState";
import layoutState from "$lib/stores/layoutState";
import { NodeMode } from "@litegraph-ts/core";
import { LGraphNode, NodeMode } from "@litegraph-ts/core";
import { get } from "svelte/store";
export function isNodeDisabled(node: LGraphNode): boolean {
while (node != null) {
if (node.mode !== NodeMode.ALWAYS) {
return true;
}
node = node.graph._subgraph_node;
}
return false;
}
export function isDisabled(widget: IDragItem) {
if (widget.attrs.disabled)
return true;
if (widget.type === "widget") {
return widget.attrs.nodeDisabledState === "disabled" && widget.node.mode === NodeMode.NEVER
return widget.attrs.nodeDisabledState === "disabled" && isNodeDisabled(widget.node)
}
return false;
@@ -19,7 +29,7 @@ export function isHidden(widget: IDragItem) {
return true;
if (widget.type === "widget") {
return widget.attrs.nodeDisabledState === "hidden" && widget.node.mode === NodeMode.NEVER
return widget.attrs.nodeDisabledState === "hidden" && isNodeDisabled(widget.node)
}
return false;

4
src/scss/global.scss
View File

@@ -21,6 +21,8 @@ body {
--comfy-widget-hovered-background-fill: var(--secondary-200);
--comfy-container-selected-background-fill: var(--color-yellow-300);
--comfy-container-hovered-background-fill: var(--secondary-300);
--comfy-container-empty-background-fill: var(--color-grey-300);
--comfy-container-empty-border-color: var(--color-grey-400);
--comfy-disabled-label-color: var(--neutral-400);
--comfy-disabled-textbox-background-fill: var(--neutral-200);
--comfy-disabled-textbox-border-color: var(--neutral-300);
@@ -50,6 +52,8 @@ body {
--comfy-widget-hovered-background-fill: var(--neutral-600);
--comfy-container-selected-background-fill: var(--primary-700);
--comfy-container-hovered-background-fill: var(--neutral-500);
--comfy-container-empty-background-fill: var(--color-grey-800);
--comfy-container-empty-border-color: var(--color-grey-600);
--comfy-disabled-label-color: var(--neutral-500);
--comfy-disabled-textbox-background-fill: var(--neutral-800);
--comfy-disabled-textbox-border-color: var(--neutral-700);