1114 lines
40 KiB
TypeScript
1114 lines
40 KiB
TypeScript
import ComfyAPI, { type ComfyAPIStatusResponse, type ComfyBoxPromptExtraData, type ComfyNodeID, type ComfyPromptRequest, type PromptID, type QueueItemType } from "$lib/api";
|
|
import { parsePNGMetadata } from "$lib/pnginfo";
|
|
import { BuiltInSlotType, LGraphCanvas, LGraphNode, LiteGraph, NodeMode, type INodeInputSlot, type LGraphNodeConstructor, type NodeID, type NodeTypeOpts, type SerializedLGraph, type SlotIndex } from "@litegraph-ts/core";
|
|
import A1111PromptModal from "./modal/A1111PromptModal.svelte";
|
|
import ConfirmConvertWithMissingNodeTypesModal from "./modal/ConfirmConvertWithMissingNodeTypesModal.svelte";
|
|
import MissingNodeTypesModal from "./modal/MissingNodeTypesModal.svelte";
|
|
import WorkflowLoadErrorModal from "./modal/WorkflowLoadErrorModal.svelte";
|
|
|
|
import * as nodes from "$lib/nodes/index";
|
|
|
|
import type { ComfyBoxStdPrompt } from "$lib/ComfyBoxStdPrompt";
|
|
import ComfyBoxStdPromptSerializer from "$lib/ComfyBoxStdPromptSerializer";
|
|
import ComfyGraphCanvas, { type SerializedGraphCanvasState } from "$lib/ComfyGraphCanvas";
|
|
import { isBackendNodeDefInputType, iterateNodeDefInputs, iterateNodeDefOutputs, type ComfyNodeDef } from "$lib/ComfyNodeDef";
|
|
import convertA1111ToStdPrompt from "$lib/convertA1111ToStdPrompt";
|
|
import convertVanillaWorkflow from "$lib/convertVanillaWorkflow";
|
|
import { blankGraph } from "$lib/defaultGraph";
|
|
import type IComfyInputSlot from "$lib/IComfyInputSlot";
|
|
import { ComfyBackendNode } from "$lib/nodes/ComfyBackendNode";
|
|
import type ComfyGraphNode from "$lib/nodes/ComfyGraphNode";
|
|
import { ComfyComboNode } from "$lib/nodes/widgets";
|
|
import notify from "$lib/notify";
|
|
import parseA1111, { type A1111ParsedInfotext } from "$lib/parseA1111";
|
|
import configState from "$lib/stores/configState";
|
|
import layoutStates, { defaultWorkflowAttributes, type SerializedLayoutState } from "$lib/stores/layoutStates";
|
|
import modalState from "$lib/stores/modalState";
|
|
import queueState from "$lib/stores/queueState";
|
|
import selectionState from "$lib/stores/selectionState";
|
|
import uiState from "$lib/stores/uiState";
|
|
import workflowState, { ComfyWorkflow, type WorkflowAttributes, type WorkflowInstID } from "$lib/stores/workflowState";
|
|
import type { SerializedPromptOutput } from "$lib/utils";
|
|
import { basename, capitalize, download, graphToGraphVis, jsonToJsObject, promptToGraphVis, range } from "$lib/utils";
|
|
import { tick } from "svelte";
|
|
import { type SvelteComponentDev } from "svelte/internal";
|
|
import { get, writable, type Writable } from "svelte/store";
|
|
import ComfyPromptSerializer, { isActiveBackendNode, UpstreamNodeLocator } from "./ComfyPromptSerializer";
|
|
|
|
export const COMFYBOX_SERIAL_VERSION = 1;
|
|
|
|
if (typeof window !== "undefined") {
|
|
// Load default visibility
|
|
nodes.ComfyReroute.setDefaultTextVisibility(!!localStorage["Comfy.ComfyReroute.DefaultVisibility"]);
|
|
}
|
|
|
|
export type OpenWorkflowOptions = {
|
|
setActive?: boolean,
|
|
refreshCombos?: boolean | Record<string, ComfyNodeDef>,
|
|
warnMissingNodeTypes?: boolean,
|
|
}
|
|
|
|
/*
|
|
* Queued prompt that hasn't been sent to the backend yet.
|
|
*/
|
|
type PromptQueueItem = {
|
|
num: number,
|
|
batchCount: number
|
|
workflow: ComfyWorkflow
|
|
}
|
|
|
|
export type A1111PromptAndInfo = {
|
|
infotext: string,
|
|
parsedInfotext: A1111ParsedInfotext,
|
|
stdPrompt: ComfyBoxStdPrompt,
|
|
imageFile: File
|
|
}
|
|
|
|
/*
|
|
* Represents a single workflow that can be loaded into the program from JSON.
|
|
*/
|
|
export type SerializedAppState = {
|
|
/** For easy structural typing use */
|
|
comfyBoxWorkflow: true,
|
|
/** Program identifier, should be something like "ComfyBox" or "ComfyUI" */
|
|
createdBy: string,
|
|
/** Serial version, should be incremented on breaking changes */
|
|
version: number,
|
|
/** Commit hash if found */
|
|
commitHash?: string,
|
|
/** Graph state */
|
|
workflow: SerializedLGraph,
|
|
/** Workflow attributes */
|
|
attrs: WorkflowAttributes,
|
|
/** UI state */
|
|
layout: SerializedLayoutState,
|
|
/** Position/offset of the canvas at the time of saving */
|
|
canvas: SerializedGraphCanvasState
|
|
}
|
|
|
|
/** [link_origin, link_slot_index] | input_value */
|
|
export type SerializedPromptInput = [ComfyNodeID, number] | any
|
|
|
|
export type SerializedPromptInputs = Record<string, SerializedPromptInput>;
|
|
|
|
/*
|
|
* A single node in the prompt and its input values.
|
|
*/
|
|
export type SerializedPromptInputsForNode = {
|
|
/* property name -> value or link */
|
|
inputs: SerializedPromptInputs,
|
|
class_type: string
|
|
}
|
|
|
|
/*
|
|
* All nodes in the graph and their input values.
|
|
*/
|
|
export type SerializedPromptInputsAll = Record<ComfyNodeID, SerializedPromptInputsForNode>
|
|
|
|
export type SerializedPrompt = {
|
|
workflow: SerializedLGraph,
|
|
output: SerializedPromptInputsAll
|
|
}
|
|
|
|
/*
|
|
* Outputs for each node.
|
|
*/
|
|
export type SerializedPromptOutputs = Record<ComfyNodeID, SerializedPromptOutput>
|
|
|
|
export type Progress = {
|
|
value: number,
|
|
max: number
|
|
}
|
|
|
|
/*
|
|
* A combo node and the backend node that will send an updated config over, for
|
|
* refreshing lists of model files
|
|
*/
|
|
type BackendComboNode = {
|
|
comboNode: ComfyComboNode,
|
|
comfyInput: IComfyInputSlot,
|
|
backendNode: ComfyBackendNode
|
|
}
|
|
|
|
type CanvasState = {
|
|
canvasEl: HTMLCanvasElement,
|
|
canvasCtx: CanvasRenderingContext2D,
|
|
canvas: ComfyGraphCanvas,
|
|
}
|
|
|
|
export type WorkflowLoadError = {
|
|
message: string,
|
|
error: Error
|
|
}
|
|
|
|
export type VanillaWorkflowConvertResult = {
|
|
comfyBoxWorkflow: SerializedAppState,
|
|
missingNodeTypes: Set<string>
|
|
}
|
|
|
|
function isComfyBoxWorkflow(data: any): data is SerializedAppState {
|
|
return data != null && (typeof data === "object") && data.comfyBoxWorkflow;
|
|
}
|
|
|
|
function isVanillaWorkflow(data: any): data is SerializedLGraph {
|
|
return data != null && (typeof data === "object") && data.last_node_id != null;
|
|
}
|
|
|
|
type BackendNodeDef = {
|
|
nodeDef: ComfyNodeDef
|
|
}
|
|
|
|
export default class ComfyApp {
|
|
api: ComfyAPI;
|
|
|
|
rootEl: HTMLDivElement | null = null;
|
|
canvasEl: HTMLCanvasElement | null = null;
|
|
canvasCtx: CanvasRenderingContext2D | null = null;
|
|
lCanvas: ComfyGraphCanvas | null = null;
|
|
|
|
shiftDown: boolean = false;
|
|
ctrlDown: boolean = false;
|
|
selectedGroupMoving: boolean = false;
|
|
alreadySetup: Writable<boolean> = writable(false);
|
|
|
|
private queueItems: PromptQueueItem[] = [];
|
|
private processingQueue: boolean = false;
|
|
private promptSerializer: ComfyPromptSerializer;
|
|
private stdPromptSerializer: ComfyBoxStdPromptSerializer;
|
|
|
|
constructor() {
|
|
this.api = new ComfyAPI();
|
|
this.promptSerializer = new ComfyPromptSerializer();
|
|
this.stdPromptSerializer = new ComfyBoxStdPromptSerializer();
|
|
}
|
|
|
|
async setup(): Promise<void> {
|
|
if (get(this.alreadySetup)) {
|
|
console.log("Already setup")
|
|
return;
|
|
}
|
|
|
|
this.setupColorScheme()
|
|
|
|
this.rootEl = document.getElementById("app-root") as HTMLDivElement;
|
|
this.canvasEl = document.getElementById("graph-canvas") as HTMLCanvasElement;
|
|
this.lCanvas = new ComfyGraphCanvas(this, this.canvasEl);
|
|
this.canvasCtx = this.canvasEl.getContext("2d");
|
|
|
|
const uiUnlocked = get(uiState).uiUnlocked;
|
|
this.lCanvas.allow_dragnodes = uiUnlocked;
|
|
this.lCanvas.allow_interaction = uiUnlocked;
|
|
|
|
// await this.#invokeExtensionsAsync("init");
|
|
const defs = await this.api.getNodeDefs();
|
|
await this.registerNodes(defs);
|
|
|
|
// Load previous workflow
|
|
let restored = false;
|
|
try {
|
|
restored = await this.loadStateFromLocalStorage(defs);
|
|
} catch (err) {
|
|
console.error("Error loading previous workflow", err);
|
|
notify(`Error loading previous workflow:\n${err}`, { type: "error", timeout: null })
|
|
}
|
|
|
|
// We failed to restore a workflow so load the default
|
|
if (!restored) {
|
|
const options: OpenWorkflowOptions = {
|
|
refreshCombos: defs,
|
|
setActive: false
|
|
}
|
|
await this.initDefaultWorkflow("defaultWorkflow", options);
|
|
await this.initDefaultWorkflow("upscale", options);
|
|
}
|
|
|
|
// Save current workflow automatically
|
|
// setInterval(this.saveStateToLocalStorage.bind(this), 1000);
|
|
|
|
this.addApiUpdateHandlers();
|
|
this.addPasteHandler();
|
|
this.addKeyboardHandler();
|
|
|
|
await this.updateHistoryAndQueue();
|
|
|
|
// await this.#invokeExtensionsAsync("setup");
|
|
|
|
// Ensure the canvas fills the window
|
|
this.resizeCanvas();
|
|
window.addEventListener("resize", this.resizeCanvas.bind(this));
|
|
|
|
this.requestPermissions();
|
|
|
|
this.alreadySetup.set(true);
|
|
|
|
return Promise.resolve();
|
|
}
|
|
|
|
resizeCanvas() {
|
|
this.canvasEl.width = this.canvasEl.parentElement.offsetWidth;
|
|
this.canvasEl.height = this.canvasEl.parentElement.offsetHeight;
|
|
this.canvasEl.style.width = ""
|
|
this.canvasEl.style.height = ""
|
|
this.lCanvas.draw(true, true);
|
|
}
|
|
|
|
serialize(workflow: ComfyWorkflow, canvas?: SerializedGraphCanvasState): SerializedAppState {
|
|
const layoutState = layoutStates.getLayout(workflow.id);
|
|
if (layoutState == null)
|
|
throw new Error("Workflow has no layout!")
|
|
|
|
const { graph, layout, attrs } = workflow.serialize(layoutState);
|
|
canvas ||= this.lCanvas.serialize();
|
|
|
|
return {
|
|
comfyBoxWorkflow: true,
|
|
createdBy: "ComfyBox",
|
|
version: COMFYBOX_SERIAL_VERSION,
|
|
commitHash: __GIT_COMMIT_HASH__,
|
|
workflow: graph,
|
|
attrs,
|
|
layout,
|
|
canvas
|
|
}
|
|
}
|
|
|
|
saveStateToLocalStorage() {
|
|
try {
|
|
uiState.update(s => { s.isSavingToLocalStorage = true; return s; })
|
|
const state = get(workflowState)
|
|
const workflows = state.openedWorkflows
|
|
const savedWorkflows = workflows.map(w => this.serialize(w));
|
|
const activeWorkflowIndex = workflows.findIndex(w => state.activeWorkflowID === w.id);
|
|
const json = JSON.stringify({ workflows: savedWorkflows, activeWorkflowIndex });
|
|
localStorage.setItem("workflows", json)
|
|
for (const workflow of workflows)
|
|
workflow.isModified = false;
|
|
workflowState.set(get(workflowState));
|
|
notify("Saved to local storage.")
|
|
}
|
|
catch (err) {
|
|
notify(`Failed saving to local storage:\n${err}`, { type: "error" })
|
|
}
|
|
finally {
|
|
uiState.update(s => { s.isSavingToLocalStorage = false; return s; })
|
|
}
|
|
}
|
|
|
|
async loadStateFromLocalStorage(defs: Record<ComfyNodeID, ComfyNodeDef>): Promise<boolean> {
|
|
const json = localStorage.getItem("workflows");
|
|
if (!json) {
|
|
return false
|
|
}
|
|
|
|
const state = JSON.parse(json);
|
|
if (!("workflows" in state))
|
|
return false;
|
|
|
|
const workflows = state.workflows as SerializedAppState[];
|
|
await Promise.all(workflows.map(w => {
|
|
return this.openWorkflow(w, { refreshCombos: defs, warnMissingNodeTypes: false, setActive: false }).catch(error => {
|
|
console.error("Failed restoring previous workflow", error)
|
|
notify(`Failed restoring previous workflow: ${error}`, { type: "error" })
|
|
})
|
|
}));
|
|
|
|
if (typeof state.activeWorkflowIndex === "number") {
|
|
workflowState.setActiveWorkflow(this.lCanvas, state.activeWorkflowIndex);
|
|
selectionState.clear();
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
static node_type_overrides: Record<string, typeof ComfyBackendNode> = {}
|
|
static widget_type_overrides: Record<string, typeof SvelteComponentDev> = {}
|
|
|
|
static knownBackendNodes: Record<string, BackendNodeDef> = {}
|
|
|
|
private async registerNodes(defs: Record<ComfyNodeID, ComfyNodeDef>) {
|
|
ComfyApp.knownBackendNodes = {}
|
|
|
|
// Register a node for each definition
|
|
for (const [nodeId, nodeDef] of Object.entries(defs)) {
|
|
const typeOverride = ComfyApp.node_type_overrides[nodeId]
|
|
if (typeOverride)
|
|
console.debug("Attaching custom type to received node:", nodeId, typeOverride)
|
|
const baseClass: typeof ComfyBackendNode = typeOverride || ComfyBackendNode;
|
|
|
|
const ctor = class extends baseClass {
|
|
constructor(title?: string) {
|
|
super(title, nodeId, nodeDef);
|
|
}
|
|
}
|
|
|
|
const node: LGraphNodeConstructor = {
|
|
class: ctor,
|
|
title: nodeDef.display_name || nodeDef.name,
|
|
type: nodeId,
|
|
desc: `ComfyNode: ${nodeId}`
|
|
}
|
|
|
|
LiteGraph.registerNodeType(node);
|
|
node.category = nodeDef.category;
|
|
ComfyApp.knownBackendNodes[nodeId] = {
|
|
nodeDef
|
|
}
|
|
|
|
ComfyApp.registerDefaultSlotHandlers(nodeId, nodeDef)
|
|
}
|
|
}
|
|
|
|
static registerDefaultSlotHandlers(nodeId: string, nodeDef: ComfyNodeDef) {
|
|
const nodeTypeSpec: NodeTypeOpts = {
|
|
node: nodeId,
|
|
title: nodeDef.display_name || nodeDef.name,
|
|
properties: null,
|
|
inputs: null,
|
|
outputs: null
|
|
}
|
|
|
|
for (const [inputName, [inputType, _inputOpts]] of iterateNodeDefInputs(nodeDef)) {
|
|
if (isBackendNodeDefInputType(inputName, inputType)) {
|
|
LiteGraph.slot_types_default_out[inputType] ||= ["utils/reroute"]
|
|
LiteGraph.slot_types_default_out[inputType].push(nodeTypeSpec)
|
|
|
|
// Input types have to be stored as lower case
|
|
// Store each node that can handle this input type
|
|
const lowerType = inputType.toLocaleLowerCase();
|
|
if (!(lowerType in LiteGraph.registered_slot_in_types)) {
|
|
LiteGraph.registered_slot_in_types[lowerType] = { nodes: [] };
|
|
}
|
|
LiteGraph.registered_slot_in_types[lowerType].nodes.push(nodeId);
|
|
|
|
if (!LiteGraph.slot_types_in.includes(lowerType)) {
|
|
LiteGraph.slot_types_in.push(lowerType);
|
|
}
|
|
}
|
|
else {
|
|
// inputType is an array of combo box entries (["euler", "karras", ...])
|
|
// or a widget input type ("INT").
|
|
}
|
|
}
|
|
|
|
for (const output of iterateNodeDefOutputs(nodeDef)) {
|
|
LiteGraph.slot_types_default_in[output.type] ||= ["utils/reroute"]
|
|
LiteGraph.slot_types_default_in[output.type].push(nodeTypeSpec)
|
|
|
|
// Store each node that can handle this output type
|
|
if (!(output.type in LiteGraph.registered_slot_out_types)) {
|
|
LiteGraph.registered_slot_out_types[output.type] = { nodes: [] };
|
|
}
|
|
LiteGraph.registered_slot_out_types[output.type].nodes.push(nodeId);
|
|
|
|
if (!LiteGraph.slot_types_out.includes(output.type)) {
|
|
LiteGraph.slot_types_out.push(output.type);
|
|
}
|
|
}
|
|
|
|
const maxNodeSuggestions = 5 // TODO config
|
|
|
|
// TODO config beforeChanged
|
|
for (const key of Object.keys(LiteGraph.slot_types_default_in)) {
|
|
LiteGraph.slot_types_default_in[key] = LiteGraph.slot_types_default_in[key].slice(0, maxNodeSuggestions)
|
|
}
|
|
for (const key of Object.keys(LiteGraph.slot_types_default_out)) {
|
|
LiteGraph.slot_types_default_out[key] = LiteGraph.slot_types_default_out[key].slice(0, maxNodeSuggestions)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Adds a handler on paste that extracts and loads workflows from pasted JSON data
|
|
*/
|
|
private addPasteHandler() {
|
|
document.addEventListener("paste", (e) => {
|
|
let data = (e.clipboardData || (window as any).clipboardData).getData("text/plain");
|
|
let workflow;
|
|
try {
|
|
data = data.slice(data.indexOf("{"));
|
|
workflow = JSON.parse(data);
|
|
} catch (err) {
|
|
try {
|
|
data = data.slice(data.indexOf("workflow\n"));
|
|
data = data.slice(data.indexOf("{"));
|
|
workflow = JSON.parse(data);
|
|
} catch (error) { }
|
|
}
|
|
|
|
if (workflow && typeof workflow.createdBy === "string") {
|
|
this.openWorkflow(workflow);
|
|
}
|
|
else {
|
|
// TODO handle vanilla workflows
|
|
throw new Error("Workflow was not in ComfyBox format!")
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Handles updates from the API socket
|
|
*/
|
|
private addApiUpdateHandlers() {
|
|
this.api.addEventListener("status", (status: ComfyAPIStatusResponse) => {
|
|
queueState.statusUpdated(status);
|
|
});
|
|
|
|
this.api.addEventListener("reconnecting", () => {
|
|
uiState.reconnecting()
|
|
});
|
|
|
|
this.api.addEventListener("reconnected", () => {
|
|
uiState.reconnected()
|
|
});
|
|
|
|
this.api.addEventListener("progress", (progress: Progress) => {
|
|
queueState.progressUpdated(progress);
|
|
workflowState.getActiveWorkflow()?.graph?.setDirtyCanvas(true, false); // TODO PromptID
|
|
});
|
|
|
|
this.api.addEventListener("executing", (promptID: PromptID | null, nodeID: ComfyNodeID | null) => {
|
|
const queueEntry = queueState.executingUpdated(promptID, nodeID);
|
|
if (queueEntry != null && queueEntry.extraData?.workflowID != null) {
|
|
const workflow = workflowState.getWorkflow(queueEntry.extraData.workflowID);
|
|
workflow?.graph?.setDirtyCanvas(true, false);
|
|
}
|
|
});
|
|
|
|
this.api.addEventListener("executed", (promptID: PromptID, nodeID: ComfyNodeID, output: SerializedPromptOutput) => {
|
|
const queueEntry = queueState.onExecuted(promptID, nodeID, output)
|
|
if (queueEntry != null) {
|
|
const workflow = workflowState.getWorkflow(queueEntry.extraData.workflowID);
|
|
if (workflow != null) {
|
|
workflow.graph.setDirtyCanvas(true, false);
|
|
const node = workflow.graph.getNodeByIdRecursive(nodeID) as ComfyGraphNode;
|
|
if (node?.onExecuted) {
|
|
node.onExecuted(output);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
this.api.addEventListener("execution_start", (promptID: PromptID) => {
|
|
queueState.executionStart(promptID)
|
|
});
|
|
|
|
this.api.addEventListener("execution_cached", (promptID: PromptID, nodes: ComfyNodeID[]) => {
|
|
queueState.executionCached(promptID, nodes)
|
|
});
|
|
|
|
this.api.addEventListener("execution_error", (promptID: PromptID, message: string) => {
|
|
queueState.executionError(promptID, message)
|
|
notify(`Execution error: ${message}`, { type: "error", timeout: 10000 })
|
|
});
|
|
|
|
this.api.init();
|
|
}
|
|
|
|
async interrupt() {
|
|
if (get(queueState).isInterrupting)
|
|
return
|
|
|
|
queueState.update(s => { s.isInterrupting = true; return s; })
|
|
await this.api.interrupt()
|
|
.finally(() => {
|
|
queueState.update(s => { s.isInterrupting = true; return s })
|
|
});
|
|
}
|
|
|
|
async deleteQueueItem(type: QueueItemType, promptID: PromptID) {
|
|
if (get(queueState).isInterrupting)
|
|
return
|
|
|
|
queueState.update(s => { s.isInterrupting = true; return s; })
|
|
await this.api.deleteItem(type, promptID)
|
|
.then(() => {
|
|
queueState.queueItemDeleted(type, promptID);
|
|
})
|
|
.finally(() => {
|
|
queueState.update(s => { s.isInterrupting = false; return s; })
|
|
});
|
|
}
|
|
|
|
async clearQueue(type: QueueItemType) {
|
|
if (get(queueState).isInterrupting)
|
|
return
|
|
|
|
queueState.update(s => { s.isInterrupting = true; return s; })
|
|
await this.api.clearItems(type)
|
|
.then(() => {
|
|
queueState.queueCleared(type);
|
|
notify(`${capitalize(type)} cleared.`);
|
|
})
|
|
.finally(() => {
|
|
queueState.update(s => { s.isInterrupting = false; return s; })
|
|
});
|
|
}
|
|
|
|
private addKeyboardHandler() {
|
|
window.addEventListener("keydown", (e) => {
|
|
this.shiftDown = e.shiftKey;
|
|
this.ctrlDown = e.ctrlKey;
|
|
|
|
// Queue prompt using ctrl or command + enter
|
|
if ((e.ctrlKey || e.metaKey) && (e.key === "Enter" || e.code === "Enter" || e.keyCode === 10)) {
|
|
e.preventDefault();
|
|
this.runDefaultQueueAction();
|
|
}
|
|
else if ((e.ctrlKey) && (e.key === "s" || e.code === "KeyS")) {
|
|
e.preventDefault();
|
|
this.saveStateToLocalStorage();
|
|
}
|
|
});
|
|
window.addEventListener("keyup", (e) => {
|
|
this.shiftDown = e.shiftKey;
|
|
this.ctrlDown = e.ctrlKey;
|
|
});
|
|
}
|
|
|
|
private async updateHistoryAndQueue() {
|
|
const queue = await this.api.getQueue();
|
|
const history = await this.api.getHistory();
|
|
queueState.queueUpdated(queue);
|
|
queueState.historyUpdated(history);
|
|
}
|
|
|
|
private requestPermissions() {
|
|
if (Notification.permission === "default") {
|
|
Notification.requestPermission()
|
|
.then((result) => console.log("Notification status:", result));
|
|
}
|
|
}
|
|
|
|
private setupColorScheme() {
|
|
const setColor = (type: any, color: string) => {
|
|
LGraphCanvas.DEFAULT_LINK_TYPE_COLORS[type] = color
|
|
LGraphCanvas.DEFAULT_CONNECTION_COLORS_BY_TYPE[type] = color
|
|
}
|
|
|
|
// Distinguish frontend/backend connections
|
|
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")
|
|
}
|
|
|
|
setColor("COMFYBOX_IMAGES", "rebeccapurple")
|
|
setColor("COMFYBOX_IMAGE", "fuchsia")
|
|
setColor(BuiltInSlotType.EVENT, "lightseagreen")
|
|
setColor(BuiltInSlotType.ACTION, "lightseagreen")
|
|
}
|
|
|
|
async openWorkflow(data: SerializedAppState, options: OpenWorkflowOptions = {
|
|
setActive: true,
|
|
refreshCombos: true,
|
|
warnMissingNodeTypes: true
|
|
}
|
|
): Promise<ComfyWorkflow> {
|
|
if (data.version !== COMFYBOX_SERIAL_VERSION) {
|
|
const mes = `Invalid ComfyBox saved data format: ${data.version} `
|
|
notify(mes, { type: "error" })
|
|
return Promise.reject(mes);
|
|
}
|
|
|
|
this.clean();
|
|
|
|
let workflow: ComfyWorkflow;
|
|
try {
|
|
workflow = workflowState.openWorkflow(this.lCanvas, data, options.setActive);
|
|
}
|
|
catch (error) {
|
|
modalState.pushModal({
|
|
svelteComponent: WorkflowLoadErrorModal,
|
|
svelteProps: {
|
|
error
|
|
}
|
|
})
|
|
return Promise.reject(error)
|
|
}
|
|
|
|
if (workflow.missingNodeTypes.size > 0 && options.warnMissingNodeTypes) {
|
|
modalState.pushModal({
|
|
svelteComponent: MissingNodeTypesModal,
|
|
svelteProps: {
|
|
missingNodeTypes: workflow.missingNodeTypes
|
|
}
|
|
})
|
|
}
|
|
|
|
// Restore canvas offset/zoom
|
|
this.lCanvas.deserialize(data.canvas)
|
|
|
|
if (options.refreshCombos) {
|
|
let defs = null;
|
|
if (typeof options.refreshCombos === "object")
|
|
defs = options.refreshCombos;
|
|
await this.refreshComboInNodes(workflow, defs);
|
|
}
|
|
|
|
return workflow;
|
|
}
|
|
|
|
async openVanillaWorkflow(data: SerializedLGraph, filename: string) {
|
|
const title = basename(filename)
|
|
|
|
const attrs: WorkflowAttributes = {
|
|
...defaultWorkflowAttributes,
|
|
title
|
|
}
|
|
|
|
const canvas: SerializedGraphCanvasState = {
|
|
offset: [0, 0],
|
|
scale: 1
|
|
}
|
|
|
|
const [comfyBoxWorkflow, layoutState] = convertVanillaWorkflow(data, attrs);
|
|
|
|
const addWorkflow = () => {
|
|
notify("Converted ComfyUI workflow to ComfyBox format.", { type: "info" })
|
|
workflowState.addWorkflow(this.lCanvas, comfyBoxWorkflow)
|
|
this.lCanvas.deserialize(canvas);
|
|
}
|
|
|
|
if (comfyBoxWorkflow.missingNodeTypes.size > 0) {
|
|
modalState.pushModal({
|
|
svelteComponent: ConfirmConvertWithMissingNodeTypesModal,
|
|
svelteProps: {
|
|
missingNodeTypes: comfyBoxWorkflow.missingNodeTypes
|
|
},
|
|
closeOnClick: false,
|
|
showCloseButton: false,
|
|
buttons: [
|
|
{
|
|
name: "Cancel",
|
|
variant: "secondary",
|
|
onClick: () => {
|
|
layoutStates.remove(comfyBoxWorkflow.id)
|
|
}
|
|
},
|
|
{
|
|
name: "Convert",
|
|
variant: "primary",
|
|
onClick: addWorkflow
|
|
},
|
|
]
|
|
})
|
|
}
|
|
else {
|
|
addWorkflow()
|
|
}
|
|
}
|
|
|
|
setActiveWorkflow(id: WorkflowInstID) {
|
|
const index = get(workflowState).openedWorkflows.findIndex(w => w.id === id)
|
|
if (index === -1)
|
|
return;
|
|
workflowState.setActiveWorkflow(this.lCanvas, index);
|
|
selectionState.clear();
|
|
}
|
|
|
|
createNewWorkflow() {
|
|
workflowState.createNewWorkflow(this.lCanvas, undefined, true);
|
|
selectionState.clear();
|
|
}
|
|
|
|
closeWorkflow(id: WorkflowInstID) {
|
|
const index = get(workflowState).openedWorkflows.findIndex(w => w.id === id)
|
|
if (index === -1)
|
|
return;
|
|
workflowState.closeWorkflow(this.lCanvas, index);
|
|
selectionState.clear();
|
|
}
|
|
|
|
async initDefaultWorkflow(name: string = "defaultWorkflow", options?: OpenWorkflowOptions) {
|
|
let state = null;
|
|
try {
|
|
const graphResponse = await fetch(`/workflows/${name}.json`);
|
|
state = await graphResponse.json() as SerializedAppState;
|
|
}
|
|
catch (error) {
|
|
console.error(`Failed to load default graph ${name}`, error)
|
|
notify(`Failed to load default graph ${name}: ${error} `, { type: "error" })
|
|
state = structuredClone(blankGraph)
|
|
}
|
|
await this.openWorkflow(state, options)
|
|
}
|
|
|
|
clear() {
|
|
this.clean();
|
|
|
|
this.lCanvas.closeAllSubgraphs();
|
|
workflowState.closeAllWorkflows(this.lCanvas);
|
|
uiState.update(s => {
|
|
s.uiUnlocked = true;
|
|
s.uiEditMode = "widgets";
|
|
return s;
|
|
})
|
|
}
|
|
|
|
runDefaultQueueAction() {
|
|
const workflow = workflowState.getActiveWorkflow();
|
|
if (workflow == null)
|
|
return;
|
|
|
|
for (const node of workflow.graph.iterateNodesInOrderRecursive()) {
|
|
if ("onDefaultQueueAction" in node) {
|
|
(node as ComfyGraphNode).onDefaultQueueAction()
|
|
}
|
|
}
|
|
|
|
if (workflow.attrs.queuePromptButtonRunWorkflow) {
|
|
// Hold control to queue at the front
|
|
const num = this.ctrlDown ? -1 : 0;
|
|
this.queuePrompt(num, 1);
|
|
}
|
|
}
|
|
|
|
querySave() {
|
|
const workflow = workflowState.getActiveWorkflow();
|
|
if (workflow == null) {
|
|
notify("No active workflow!", { type: "error" })
|
|
return;
|
|
}
|
|
|
|
const promptFilename = get(configState).promptForWorkflowName;
|
|
|
|
let filename = "workflow.json";
|
|
if (promptFilename) {
|
|
filename = prompt("Save workflow as:", filename);
|
|
if (!filename) return;
|
|
if (!filename.toLowerCase().endsWith(".json")) {
|
|
filename += ".json";
|
|
}
|
|
}
|
|
else {
|
|
const date = new Date();
|
|
const formattedDate = date.toISOString().replace(/:/g, '-').replace(/\.\d{3}/g, '').replace('T', '_').replace("Z", "");
|
|
filename = `workflow - ${formattedDate}.json`
|
|
}
|
|
|
|
const indent = 2
|
|
const json = JSON.stringify(this.serialize(workflow), null, indent)
|
|
|
|
download(filename, json, "application/json")
|
|
|
|
workflow.isModified = false;
|
|
workflowState.set(get(workflowState));
|
|
|
|
console.debug(jsonToJsObject(json))
|
|
}
|
|
|
|
/**
|
|
* Converts the current graph workflow for sending to the API
|
|
* @returns The workflow and node links
|
|
*/
|
|
graphToPrompt(workflow: ComfyWorkflow, tag: string | null = null): SerializedPrompt {
|
|
return this.promptSerializer.serialize(workflow.graph, tag)
|
|
}
|
|
|
|
async queuePrompt(num: number, batchCount: number = 1, tag: string | null = null) {
|
|
const activeWorkflow = workflowState.getActiveWorkflow();
|
|
if (activeWorkflow == null) {
|
|
notify("No workflow is opened!", { type: "error" })
|
|
return;
|
|
}
|
|
|
|
this.queueItems.push({ num, batchCount, workflow: activeWorkflow });
|
|
|
|
// Only have one action process the items so each one gets a unique seed correctly
|
|
if (this.processingQueue) {
|
|
return;
|
|
}
|
|
|
|
if (tag === "")
|
|
tag = null;
|
|
|
|
this.processingQueue = true;
|
|
let workflow: ComfyWorkflow;
|
|
|
|
try {
|
|
while (this.queueItems.length) {
|
|
({ num, batchCount, workflow } = this.queueItems.pop());
|
|
console.debug(`Queue get! ${num} ${batchCount} ${tag} `);
|
|
|
|
const thumbnails = []
|
|
for (const node of workflow.graph.iterateNodesInOrderRecursive()) {
|
|
if (node.mode !== NodeMode.ALWAYS
|
|
|| (tag != null
|
|
&& Array.isArray(node.properties.tags)
|
|
&& node.properties.tags.indexOf(tag) === -1))
|
|
continue;
|
|
|
|
if ("getPromptThumbnails" in node) {
|
|
const thumbsToAdd = (node as ComfyGraphNode).getPromptThumbnails();
|
|
if (thumbsToAdd)
|
|
thumbnails.push(...thumbsToAdd)
|
|
}
|
|
}
|
|
|
|
for (let i = 0; i < batchCount; i++) {
|
|
for (const node of workflow.graph.iterateNodesInOrderRecursive()) {
|
|
if (node.mode !== NodeMode.ALWAYS)
|
|
continue;
|
|
|
|
if ("beforeQueued" in node) {
|
|
(node as ComfyGraphNode).beforeQueued(tag);
|
|
}
|
|
}
|
|
|
|
const p = this.graphToPrompt(workflow, tag);
|
|
const wf = this.serialize(workflow)
|
|
console.debug(graphToGraphVis(workflow.graph))
|
|
console.debug(promptToGraphVis(p))
|
|
|
|
const stdPrompt = this.stdPromptSerializer.serialize(p);
|
|
console.warn("STD", stdPrompt);
|
|
|
|
const extraData: ComfyBoxPromptExtraData = {
|
|
extra_pnginfo: {
|
|
comfyBoxWorkflow: wf,
|
|
comfyBoxPrompt: {
|
|
subgraphs: [tag]
|
|
}
|
|
},
|
|
workflowID: workflow.id,
|
|
workflowTitle: workflow.attrs.title,
|
|
thumbnails
|
|
}
|
|
|
|
let error: string | null = null;
|
|
let promptID: PromptID | null = null;
|
|
|
|
const request: ComfyPromptRequest = {
|
|
number: num,
|
|
extra_data: extraData,
|
|
prompt: p.output
|
|
}
|
|
|
|
try {
|
|
const response = await this.api.queuePrompt(request);
|
|
if (response.error != null) {
|
|
error = response.error;
|
|
}
|
|
else {
|
|
queueState.afterQueued(workflow.id, response.promptID, num, p.output, extraData)
|
|
}
|
|
} catch (err) {
|
|
error = err?.toString();
|
|
}
|
|
|
|
if (error != null) {
|
|
const mes: string = error;
|
|
notify(`Error queuing prompt: \n${mes} `, { type: "error" })
|
|
console.error(graphToGraphVis(workflow.graph))
|
|
console.error(promptToGraphVis(p))
|
|
console.error("Error queuing prompt", error, num, p)
|
|
break;
|
|
}
|
|
|
|
for (const node of workflow.graph.iterateNodesInOrderRecursive()) {
|
|
if ("afterQueued" in node) {
|
|
(node as ComfyGraphNode).afterQueued(p, tag);
|
|
}
|
|
}
|
|
|
|
this.lCanvas.draw(true, true);
|
|
}
|
|
}
|
|
} finally {
|
|
console.log("Queue finished!");
|
|
this.processingQueue = false;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Loads workflow data from the specified file
|
|
*/
|
|
async handleFile(file: File) {
|
|
if (file.type === "image/png") {
|
|
const buffer = await file.arrayBuffer();
|
|
const pngInfo = await parsePNGMetadata(buffer);
|
|
if (pngInfo) {
|
|
if (pngInfo.comfyBoxWorkflow) {
|
|
await this.openWorkflow(JSON.parse(pngInfo.comfyBoxWorkflow));
|
|
} else if (pngInfo.workflow) {
|
|
const workflow = JSON.parse(pngInfo.workflow);
|
|
await this.openVanillaWorkflow(workflow, file.name);
|
|
} else if (pngInfo.parameters) {
|
|
const parsed = parseA1111(pngInfo.parameters)
|
|
if ("error" in parsed) {
|
|
notify(`Couldn't parse webui prompt: ${parsed.error}`, { type: "error" })
|
|
return;
|
|
}
|
|
const converted = convertA1111ToStdPrompt(parsed)
|
|
const a1111Info: A1111PromptAndInfo = {
|
|
infotext: pngInfo.parameters,
|
|
parsedInfotext: parsed,
|
|
stdPrompt: converted,
|
|
imageFile: file
|
|
}
|
|
modalState.pushModal({
|
|
title: "A1111 Prompt Details",
|
|
svelteComponent: A1111PromptModal,
|
|
svelteProps: {
|
|
prompt: a1111Info
|
|
},
|
|
})
|
|
}
|
|
else {
|
|
console.error("No metadata found in image file.", pngInfo)
|
|
notify("No metadata found in image file.", { type: "error" })
|
|
}
|
|
}
|
|
} else if (file.type === "application/json" || file.name.endsWith(".json")) {
|
|
const reader = new FileReader();
|
|
reader.onload = async () => {
|
|
const result = JSON.parse(reader.result as string)
|
|
if (isComfyBoxWorkflow(result)) {
|
|
await this.openWorkflow(result);
|
|
}
|
|
else if (isVanillaWorkflow(result)) {
|
|
await this.openVanillaWorkflow(result, file.name);
|
|
}
|
|
};
|
|
reader.readAsText(file);
|
|
}
|
|
}
|
|
|
|
// registerExtension(extension) {
|
|
// if (!extension.name) {
|
|
// throw new Error("Extensions must have a 'name' property.");
|
|
// }
|
|
// if (this.extensions.find((ext) => ext.name === extension.name)) {
|
|
// throw new Error(`Extension named '${extension.name}' already registered.`);
|
|
// }
|
|
// this.extensions.push(extension);
|
|
// }
|
|
|
|
/**
|
|
* Refresh combo list on whole nodes
|
|
*/
|
|
async refreshComboInNodes(workflow?: ComfyWorkflow, defs?: Record<string, ComfyNodeDef>, flashUI: boolean = false) {
|
|
workflow ||= workflowState.getActiveWorkflow();
|
|
if (workflow == null) {
|
|
notify("No active workflow!", { type: "error" })
|
|
return
|
|
}
|
|
|
|
if (defs == null)
|
|
defs = await this.api.getNodeDefs();
|
|
|
|
const isComfyComboNode = (node: LGraphNode): node is ComfyComboNode => {
|
|
return node
|
|
&& node.type === "ui/combo"
|
|
&& "doAutoConfig" in node;
|
|
}
|
|
|
|
const isComfyComboInput = (input: INodeInputSlot): input is IComfyInputSlot => {
|
|
return "config" in input
|
|
&& "widgetNodeType" in input
|
|
&& input.widgetNodeType === "ui/combo";
|
|
}
|
|
|
|
// Node IDs of combo widgets attached to a backend node
|
|
const backendUpdatedCombos: Record<NodeID, BackendComboNode> = {}
|
|
|
|
console.debug("[refreshComboInNodes] start")
|
|
|
|
// Figure out which combo nodes to update. They need to be connected to
|
|
// an input slot on a backend node with a backend config in the input
|
|
// slot connected to.
|
|
const nodeLocator = new UpstreamNodeLocator(isComfyComboNode)
|
|
|
|
const findComfyInputAndAttachedCombo = (node: LGraphNode, i: SlotIndex): [IComfyInputSlot, ComfyComboNode] | null => {
|
|
const input = node.inputs[i]
|
|
|
|
// Does this input autocreate a combo box on creation?
|
|
const isComfyInput = isComfyComboInput(input)
|
|
if (!isComfyInput)
|
|
return null;
|
|
|
|
// Find an attached combo node even if it's inside/outside of a
|
|
// subgraph, linked after several nodes, etc.
|
|
const [comboNode, _link] = nodeLocator.locateUpstream(node, i, null);
|
|
|
|
if (comboNode == null)
|
|
return null;
|
|
|
|
const result: [IComfyInputSlot, ComfyComboNode] = [input, comboNode as ComfyComboNode]
|
|
return result
|
|
}
|
|
|
|
for (const node of workflow.graph.iterateNodesInOrderRecursive()) {
|
|
if (!isActiveBackendNode(node))
|
|
continue;
|
|
|
|
const found = range(node.inputs.length)
|
|
.map((i) => findComfyInputAndAttachedCombo(node, i))
|
|
.filter(Boolean);
|
|
|
|
for (const [comfyInput, comboNode] of found) {
|
|
const def = defs[node.type];
|
|
|
|
const hasBackendConfig = def["input"]["required"][comfyInput.name] !== undefined
|
|
|
|
if (hasBackendConfig) {
|
|
backendUpdatedCombos[comboNode.id] = { comboNode, comfyInput, backendNode: node }
|
|
}
|
|
}
|
|
}
|
|
|
|
console.debug("[refreshComboInNodes] found:", backendUpdatedCombos.length, backendUpdatedCombos)
|
|
|
|
// Mark combo nodes without backend configs as being loaded already.
|
|
for (const node of workflow.graph.iterateNodesOfClassRecursive(ComfyComboNode)) {
|
|
if (backendUpdatedCombos[node.id] != null) {
|
|
continue;
|
|
}
|
|
|
|
// This node isn't connected to a backend node, so it's configured
|
|
// by the frontend instead.
|
|
const comboNode = node as ComfyComboNode;
|
|
let values = comboNode.properties.values;
|
|
|
|
// Frontend nodes can declare defaultWidgets which creates a
|
|
// config inside their own inputs slots too.
|
|
const foundInput = range(node.outputs.length)
|
|
.flatMap(i => node.getInputSlotsConnectedTo(i))
|
|
.find(inp => "config" in inp && Array.isArray((inp.config as any).values))
|
|
|
|
let defaultValue = null;
|
|
if (foundInput != null) {
|
|
const comfyInput = foundInput as IComfyInputSlot;
|
|
console.warn("[refreshComboInNodes] found frontend config:", node.title, node.type, comfyInput.config.values)
|
|
values = comfyInput.config.values;
|
|
defaultValue = comfyInput.config.defaultValue;
|
|
}
|
|
|
|
comboNode.formatValues(values, defaultValue);
|
|
}
|
|
|
|
await tick();
|
|
|
|
// Load definitions from the backend.
|
|
for (const { comboNode, comfyInput, backendNode } of Object.values(backendUpdatedCombos)) {
|
|
const def = defs[backendNode.type];
|
|
const [rawValues, opts] = def.input.required[comfyInput.name];
|
|
|
|
console.debug("[ComfyApp] Reconfiguring combo widget", backendNode.type, "=>", comboNode.type, rawValues.length)
|
|
comboNode.doAutoConfig(comfyInput, { includeProperties: new Set(["values"]), setWidgetTitle: false })
|
|
|
|
const values = rawValues as string[]
|
|
const defaultValue = rawValues[0];
|
|
|
|
comboNode.formatValues(values, defaultValue, true)
|
|
if (!rawValues?.includes(get(comboNode.value))) {
|
|
comboNode.setValue(rawValues[0], comfyInput.config.defaultValue)
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Clean current state
|
|
*/
|
|
clean() {
|
|
}
|
|
}
|