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

More template work & configure backend URL

Browse Source
This commit is contained in:
space-nuko
2023-05-24 23:21:06 -05:00
parent 4ae4e71616
commit 0fedef30c0
17 changed files with 764 additions and 623 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
public/config.json Normal file
View File

@@ -0,0 +1,7 @@
{
"comfyUIHostname": "localhost",
"comfyUIPort": 8188,
"alwaysStripUserState": false,
"promptForWorkflowName": false,
"confirmWhenUnloadingUnsavedChanges": true
}

23
src/lib/ComfyBoxTemplate.ts
View File

@@ -1,10 +1,11 @@
import { Subgraph, type LGraphNode, type LLink, type SerializedLGraphNode, type SerializedLLink, LGraph, type NodeID, type UUID } from "@litegraph-ts/core"
import { Subgraph, type LGraphNode, type LLink, type SerializedLGraphNode, type SerializedLLink, LGraph, type NodeID, type UUID, type Vector2 } from "@litegraph-ts/core"
import layoutStates, { isComfyWidgetNode, type ContainerLayout, type SerializedDragEntry, type WidgetLayout, type DragItemID, type WritableLayoutStateStore, type DragItemEntry, type SerializedLayoutState } from "./stores/layoutStates"
import type { ComfyWidgetNode } from "./nodes/widgets"
import type ComfyGraphCanvas from "./ComfyGraphCanvas"
import C2S from "canvas-to-svg";
import { download } from "./utils";
import { calcNodesBoundingBox, download } from "./utils";
import { v4 as uuidv4 } from "uuid";
import uiState from "./stores/uiState";
/*
* In ComfyBox a template contains a subset of nodes in the graph and the set of
@@ -270,6 +271,19 @@ export function embedTemplateInSvg(template: SerializedComfyBoxTemplate): string
return svg
}
/*
* Moves nodes so their origin is at (0, 0)
*/
function relocateNodes(nodes: SerializedLGraphNode[]): SerializedLGraphNode[] {
let [min_x, min_y, max_x, max_y] = calcNodesBoundingBox(nodes);
for (const node of nodes) {
node.pos = [node.pos[0] - min_x, node.pos[1] - min_y];
}
return nodes;
}
function pruneDetachedLinks(nodes: SerializedLGraphNode[], links: SerializedTemplateLink[]): [SerializedLGraphNode[], SerializedTemplateLink[]] {
const nodeIds = new Set(nodes.map(n => n.id));
@@ -313,11 +327,16 @@ export function serializeTemplate(canvas: ComfyGraphCanvas, template: ComfyBoxTe
if (layoutState == null)
throw "Couldn't find layout for template being serialized!"
uiState.update(s => { s.forceSaveUserState = false; return s; });
const metadata = template.metadata;
let nodes = template.nodes.map(n => n.serialize());
let links = template.links.map(convLinkForTemplate);
const layout = layoutState.serializeAtRoot(template.container.dragItem.id);
uiState.update(s => { s.forceSaveUserState = null; return s; });
nodes = relocateNodes(nodes);
[nodes, links] = pruneDetachedLinks(nodes, links);
const svg = renderSvg(canvas, graph, TEMPLATE_SVG_PADDING);

29
src/lib/ComfyGraph.ts
View File

@@ -16,30 +16,6 @@ import workflowState from "./stores/workflowState";
import type { SerializedComfyBoxTemplate } from "./ComfyBoxTemplate";
import { v4 as uuidv4 } from "uuid"
function calculateMinPosOfNodes(nodes: SerializedLGraphNode[]): Vector2 {
var posMin: Vector2 = [0, 0]
var posMinIndexes: [number, number] | null = null;
for (var i = 0; i < nodes.length; ++i) {
if (posMin) {
if (posMin[0] > nodes[i].pos[0]) {
posMin[0] = nodes[i].pos[0];
posMinIndexes[0] = i;
}
if (posMin[1] > nodes[i].pos[1]) {
posMin[1] = nodes[i].pos[1];
posMinIndexes[1] = i;
}
}
else {
posMin = [nodes[i].pos[0], nodes[i].pos[1]];
posMinIndexes = [i, i];
}
}
return posMin;
}
type ComfyGraphEvents = {
configured: (graph: LGraph) => void
nodeAdded: (node: LGraphNode) => void
@@ -250,10 +226,11 @@ export default class ComfyGraph extends LGraph {
/*
* Inserts a template.
* Layout deserialization must be handled afterwards!
* Layout deserialization must be handled afterwards.
* NOTE: Modifies the template in-place, be sure you cloned it beforehand!
*/
insertTemplate(template: SerializedComfyBoxTemplate, pos: Vector2): Record<NodeID, LGraphNode> {
const minPos = calculateMinPosOfNodes(template.nodes);
const minPos = [0, 0]
const templateNodeIDToNewNode: Record<NodeID, LGraphNode> = {}

15
src/lib/ComfyGraphCanvas.ts
View File

@@ -9,6 +9,7 @@ import selectionState from "./stores/selectionState";
import templateState from "./stores/templateState";
import { createTemplate, type ComfyBoxTemplate, serializeTemplate, type SerializedComfyBoxTemplate } from "./ComfyBoxTemplate";
import notify from "./notify";
import { calcNodesBoundingBox } from "./utils";
export type SerializedGraphCanvasState = {
offset: Vector2,
@@ -448,14 +449,24 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
insertTemplate(template: SerializedComfyBoxTemplate, pos: Vector2, container: ContainerLayout, containerIndex: number): [LGraphNode[], IDragItem] {
const comfyGraph = this.graph as ComfyGraph;
let [min_x, min_y, max_x, max_y] = calcNodesBoundingBox(template.nodes);
const width = max_x - min_x
const height = max_y - min_y
pos[0] -= width / 2
pos[1] -= height / 2
const layout = comfyGraph.layout;
if (layout == null) {
console.error("[ComfyGraphCanvas] graph has no layout!", comfyGraph)
return;
}
const nodeMapping = comfyGraph.insertTemplate(template, pos);
const templateLayoutRoot = layout.insertTemplate(template, comfyGraph, nodeMapping, container, containerIndex);
// The following operations modify the template in-place, so be sure it's been cloned first
const cloned = LiteGraph.cloneObject(template)
const nodeMapping = comfyGraph.insertTemplate(cloned, pos);
const templateLayoutRoot = layout.insertTemplate(cloned, comfyGraph, nodeMapping, container, containerIndex);
this.selectNodes(Object.values(nodeMapping).filter(n => n.graph === this.graph));

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

@@ -22,7 +22,7 @@ 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 configState, { type 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";
@@ -192,6 +192,11 @@ export default class ComfyApp {
return;
}
await this.loadConfig();
this.api.hostname = get(configState).comfyUIHostname
this.api.port = get(configState).comfyUIPort
this.setupColorScheme()
this.rootEl = document.getElementById("app-root") as HTMLDivElement;
@@ -252,6 +257,20 @@ export default class ComfyApp {
return Promise.resolve();
}
/*
* TODO
*/
async loadConfig() {
try {
const config = await fetch(`/config.json`);
const state = await config.json() as ConfigState;
configState.set(state);
}
catch (error) {
console.error(`Failed to load config`, error)
}
}
resizeCanvas() {
this.canvasEl.width = this.canvasEl.parentElement.offsetWidth;
this.canvasEl.height = this.canvasEl.parentElement.offsetHeight;
@@ -282,7 +301,7 @@ export default class ComfyApp {
saveStateToLocalStorage() {
try {
uiState.update(s => { s.isSavingToLocalStorage = true; return s; })
uiState.update(s => { s.forceSaveUserState = true; return s; })
const state = get(workflowState)
const workflows = state.openedWorkflows
const savedWorkflows = workflows.map(w => this.serialize(w));
@@ -298,7 +317,7 @@ export default class ComfyApp {
notify(`Failed saving to local storage:\n${err}`, { type: "error" })
}
finally {
uiState.update(s => { s.isSavingToLocalStorage = false; return s; })
uiState.update(s => { s.forceSaveUserState = null; return s; })
}
}
@@ -1007,6 +1026,21 @@ export default class ComfyApp {
reader.readAsText(file);
} else if (file.type === "image/svg+xml" || file.name.endsWith(".svg")) {
const templateAndSvg = await deserializeTemplateFromSVG(file);
const importTemplate = () => {
try {
if (templateState.add(templateAndSvg)) {
notify("Template imported successfully!", { type: "success" })
}
else {
notify("Template already exists in saved list.", { type: "warning" })
}
}
catch (error) {
notify(`Error importing template: ${error}`, { type: "error", timeout: 10000 })
}
}
modalState.pushModal({
title: "ComfyBox Template Preview",
svelteComponent: EditTemplateModal,
@@ -1017,6 +1051,11 @@ export default class ComfyApp {
editable: false
},
buttons: [
{
name: "Import",
variant: "primary",
onClick: importTemplate
},
{
name: "Close",
variant: "secondary",

26
src/lib/components/ComfyTemplates.svelte
View File

@@ -31,7 +31,6 @@
$: rebuildTemplates($templateState.templates);
function rebuildTemplates(templates: SerializedComfyBoxTemplate[]) {
console.error("recreate");
_sorted = Array.from(templates).map(t => {
return {
type: "template", id: uuidv4(), template: t, attrs: {...defaultWidgetAttributes}, attrsChanged: writable(0)
@@ -76,6 +75,9 @@
}
function handleClick(layout: TemplateLayout) {
if ($uiState.uiUnlocked)
return;
const updateTemplate = (modal: ModalData) => {
const state = get(modal.state);
layout.template.metadata.title = state.name || layout.template.metadata.title
@@ -94,6 +96,23 @@
}
}
const deleteTemplate = (modal: ModalData) => {
if (!confirm("Are you sure you want to delete this template?"))
return false;
try {
if (templateState.remove(layout.template.id)) {
notify("Template deleted!", { type: "success" })
}
else {
notify("Failed to delete template: not saved to local storage.", { type: "warning" })
}
}
catch (error) {
notify(`Failed to delete template: ${error}`, { type: "error", timeout: 10000 })
}
}
const downloadTemplate = (modal: ModalData) => {
updateTemplate(modal);
const svg = embedTemplateInSvg(layout.template);
@@ -120,6 +139,11 @@
onClick: downloadTemplate,
closeOnClick: false
},
{
name: "Delete",
variant: "secondary",
onClick: deleteTemplate
},
{
name: "Close",
variant: "secondary",

3
src/lib/components/GlobalModal.svelte
View File

@@ -13,7 +13,8 @@
}
function onButtonClicked(modal: ModalData, button: ModalButton, closeDialog: Function) {
button.onClick(modal);
if (button.onClick(modal) === false)
return
if (button.closeOnClick !== false) {
closeDialog()

3
src/lib/components/ImageUpload.svelte
View File

@@ -2,6 +2,7 @@
import UploadText from "$lib/components/gradio/app/UploadText.svelte";
import type { ComfyImageLocation } from "$lib/nodes/ComfyWidgetNodes";
import notify from "$lib/notify";
import configState from "$lib/stores/configState";
import { convertComfyOutputEntryToGradio, convertComfyOutputToComfyURL, type ComfyUploadImageAPIResponse } from "$lib/utils";
import { Block, BlockLabel } from "@gradio/atoms";
import { File as FileIcon } from "@gradio/icons";
@@ -68,7 +69,7 @@
dispatch("uploading")
const url = `http://${location.hostname}:8188` // TODO make configurable
const url = configState.getBackendURL();
const requests = files.map(async (file) => {
const formData = new FormData();

9
src/lib/components/utils.ts
View File

@@ -1,6 +1,6 @@
import type ComfyGraphCanvas from "$lib/ComfyGraphCanvas";
import { type ContainerLayout, type IDragItem, type TemplateLayout, type WritableLayoutStateStore } from "$lib/stores/layoutStates"
import type { LGraphCanvas } from "@litegraph-ts/core";
import type { LGraphCanvas, Vector2 } from "@litegraph-ts/core";
import { get } from "svelte/store";
export function handleContainerConsider(layoutState: WritableLayoutStateStore, container: ContainerLayout, evt: CustomEvent<DndEvent<IDragItem>>): IDragItem[] {
@@ -39,12 +39,9 @@ function doInsertTemplate(layoutState: WritableLayoutStateStore, droppedTemplate
layoutState.updateChildren(container, newChildren);
const rect = canvas.ds.element.getBoundingClientRect();
const width = rect?.width || 1;
const height = rect?.height || 1;
const center = canvas.convertOffsetToCanvas([width * 0.5, height * 0.5]);
const newPos: Vector2 = [canvas.visible_area[0] + canvas.visible_area[2] / 2, canvas.visible_area[1] + canvas.visible_area[3] / 2]
canvas.insertTemplate(droppedTemplate.template, center, container, templateItemIndex);
canvas.insertTemplate(droppedTemplate.template, newPos, container, templateItemIndex);
return get(layoutState).allItems[container.id].children;
}

8
src/lib/nodes/ComfyGraphNode.ts
View File

@@ -312,7 +312,13 @@ export default class ComfyGraphNode extends LGraphNode {
}
(o as any).saveUserState = this.saveUserState
if (!this.saveUserState && (!get(uiState).isSavingToLocalStorage || get(configState).alwaysStripUserState)) {
let saveUserState = this.saveUserState || get(configState).alwaysStripUserState;
const forceSaveUserState = get(uiState).forceSaveUserState;
if (forceSaveUserState !== null)
saveUserState = forceSaveUserState;
if (!saveUserState) {
this.stripUserState(o)
console.debug("[ComfyGraphNode] stripUserState", this, o)
}

17
src/lib/stores/configState.ts
View File

@@ -3,6 +3,12 @@ import { get, writable } from 'svelte/store';
import type { Writable } from 'svelte/store';
export type ConfigState = {
/** Backend domain for ComfyUI */
comfyUIHostname: string,
/** Backend port for ComfyUI */
comfyUIPort: number,
/** Strip user state even if saving to local storage */
alwaysStripUserState: boolean,
@@ -14,18 +20,27 @@ export type ConfigState = {
}
type ConfigStateOps = {
getBackendURL: () => string
}
export type WritableConfigStateStore = Writable<ConfigState> & ConfigStateOps;
const store: Writable<ConfigState> = writable(
{
comfyUIHostname: "localhost",
comfyUIPort: 8188,
alwaysStripUserState: false,
promptForWorkflowName: false,
confirmWhenUnloadingUnsavedChanges: true
})
function getBackendURL(): string {
const state = get(store);
return `${window.location.protocol}://${state.comfyUIHostname}:${state.comfyUIPort}`
}
const configStateStore: WritableConfigStateStore =
{
...store
...store,
getBackendURL
}
export default configStateStore;

3
src/lib/stores/layoutStates.ts
View File

@@ -1005,6 +1005,9 @@ function createRaw(workflow: ComfyBoxWorkflow | null = null): WritableLayoutStat
store.set(state)
}
/*
* NOTE: Modifies the template in-place, be sure you cloned it beforehand!
*/
function insertTemplate(template: SerializedComfyBoxTemplate, graph: LGraph, templateNodeIDToNode: Record<NodeID, LGraphNode>, container: ContainerLayout, childIndex: number): IDragItem {
const idMapping: Record<DragItemID, DragItemID> = {};

2
src/lib/stores/modalState.ts
View File

@@ -7,7 +7,7 @@ export type ModalState = Record<string, any>;
export type ModalButton = {
name: string,
variant: "primary" | "secondary",
onClick: (state: ModalData) => void,
onClick: (state: ModalData) => boolean | void,
closeOnClick?: boolean
}
export interface ModalData {

4
src/lib/stores/uiState.ts
View File

@@ -11,7 +11,7 @@ export type UIState = {
uiEditMode: UIEditMode,
reconnecting: boolean,
isSavingToLocalStorage: boolean
forceSaveUserState: boolean | null
}
type UIStateOps = {
@@ -29,7 +29,7 @@ const store: Writable<UIState> = writable(
uiEditMode: "widgets",
reconnecting: false,
isSavingToLocalStorage: false,
forceSaveUserState: null,
})
function reconnecting() {

1171
src/lib/utils.ts
View File

File diff suppressed because it is too large Load Diff

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

@@ -11,6 +11,7 @@
import "klecks/style/style.scss";
import ImageUpload from "$lib/components/ImageUpload.svelte";
import { uploadImageToComfyUI, type ComfyBoxImageMetadata, comfyFileToComfyBoxMetadata, comfyBoxImageToComfyURL, comfyBoxImageToComfyFile, type ComfyUploadImageType, type ComfyImageLocation } from "$lib/utils";
import configState from "$lib/stores/configState";
import notify from "$lib/notify";
import NumberInput from "$lib/components/NumberInput.svelte";
import type { ComfyImageEditorNode } from "$lib/nodes/widgets";
@@ -102,7 +103,7 @@
showModal = true;
const url = `http://${location.hostname}:8188` // TODO make configurable
const url = configState.getBackendURL();
kl = new Klecks({
embedUrl: url,

19
src/lib/widgets/TextWidgetCodeVariant.svelte
View File

@@ -12,6 +12,7 @@
import { basicSetup } from "./TextWidgetCodeVariant";
import { createEventDispatcher, onMount } from "svelte";
import { TAG_CATEGORY_COLORS } from "$lib/DanbooruTags";
import { Block, BlockTitle } from "@gradio/atoms";
export let widget: WidgetLayout;
export let node: ComfyTextNode;
@@ -176,7 +177,7 @@
function getExtensions(): Extension[] {
// TODO
const readonly = false;
const placeholder = "Placeholder..."
const placeholder = ""
const dark_mode = true;
const stateExtensions: Extension[] = [
@@ -206,12 +207,22 @@
}
</script>
<div class="wrap">
<div class="codemirror-wrapper {classNames}" bind:this={element} />
<div class="code-editor-wrapper">
<Block>
<BlockTitle>{widget.attrs.title}</BlockTitle>
<div class="wrap">
<div class="codemirror-wrapper {classNames}" bind:this={element} />
</div>
</Block>
</div>
<!-- <CodeMirror bind:value={$nodeValue} {styles} /> -->
<style lang="scss">
.code-editor-wrapper {
:global(> .block) {
background: var(--panel-background-fill) !important;
}
}
.wrap {
display: flex;
flex-direction: column;