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

Set known slot in/out types

Browse Source
This commit is contained in:
space-nuko
2023-05-17 15:51:05 -05:00
parent 2a8b76b1f4
commit fe3efe1154
8 changed files with 173 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
litegraph

Submodule litegraph updated: 97895e1103...2d963a609f

2
src/lib/ComfyNodeDef.ts
View File

@@ -17,7 +17,7 @@ export type ComfyNodeDefInputs = {
optional?: Record<string, ComfyNodeDefInput>
}
export type ComfyNodeDefInput = [ComfyNodeDefInputType, ComfyNodeDefInputOptions | null]
export type ComfyNodeDefInputType = string[] | keyof typeof ComfyWidgets | string
export type ComfyNodeDefInputType = any[] | keyof typeof ComfyWidgets | string
export type ComfyNodeDefInputOptions = {
forceInput?: boolean
}

4
src/lib/api.ts
View File

@@ -253,7 +253,7 @@ export default class ComfyAPI {
postBody = JSON.stringify(body)
}
catch (error) {
return Promise.reject({ error })
return Promise.reject({ error: error.toString() })
}
return fetch(this.getBackendUrl() + "/prompt", {
@@ -270,7 +270,7 @@ export default class ComfyAPI {
return res.json()
})
.then(raw => { return { promptID: raw.prompt_id } })
.catch(error => { return { error } })
.catch(error => { return error })
}
/**

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

@@ -121,9 +121,6 @@ export default class ComfyApp {
this.lCanvas = new ComfyGraphCanvas(this, this.canvasEl);
this.canvasCtx = this.canvasEl.getContext("2d");
LiteGraph.release_link_on_empty_shows_menu = true;
LiteGraph.alt_drag_do_clone_nodes = true;
const uiUnlocked = get(uiState).uiUnlocked;
this.lCanvas.allow_dragnodes = uiUnlocked;
this.lCanvas.allow_interaction = uiUnlocked;
@@ -242,13 +239,50 @@ export default class ComfyApp {
for (const [inputName, [inputType, _inputOpts]] of iterateNodeDefInputs(nodeDef)) {
if (isBackendNodeDefInputType(inputName, inputType)) {
LiteGraph.slot_types_default_out[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] ||= []
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)
}
}

15
src/lib/init.ts
View File

@@ -5,12 +5,23 @@ import { get } from 'svelte/store';
export function configureLitegraph(isMobile: boolean = false) {
LiteGraph.catch_exceptions = false;
// Must be enabled, otherwise subgraphs won't work (because of non-unique node/link IDs)
LiteGraph.use_uuids = true;
LiteGraph.search_filter_enabled = true;
LiteGraph.release_link_on_empty_shows_menu = true;
LiteGraph.alt_drag_do_clone_nodes = true;
LiteGraph.middle_click_slot_add_default_node = true;
LiteGraph.dialog_close_on_mouse_leave = false;
LiteGraph.search_hide_on_mouse_leave = false;
LiteGraph.graph_inputs_outputs_use_combo_widget = true;
LiteGraph.search_box_refresh_interval_ms = 150;
LiteGraph.CANVAS_GRID_SIZE = 32;
if (isMobile) {
LiteGraph.dialog_close_on_mouse_leave = false;
LiteGraph.search_hide_on_mouse_leave = false;
LiteGraph.pointerevents_method = "pointer";
}

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

@@ -771,7 +771,7 @@ function addContainer(parent: ContainerLayout | null, attrs: Partial<Attributes>
console.debug("[layoutState] addContainer", state)
store.set(state)
runOnChangedForWidgetDefaults(dragItem)
// runOnChangedForWidgetDefaults(dragItem)
return dragItem;
}
@@ -786,7 +786,6 @@ function addWidget(parent: ContainerLayout, node: ComfyWidgetNode, attrs: Partia
attrs: {
...defaultWidgetAttributes,
title: widgetName,
nodeDisabledState: "disabled",
...attrs
}
}
@@ -803,7 +802,7 @@ function addWidget(parent: ContainerLayout, node: ComfyWidgetNode, attrs: Partia
console.debug("[layoutState] addWidget", state)
moveItem(dragItem, parent, index)
runOnChangedForWidgetDefaults(dragItem)
// runOnChangedForWidgetDefaults(dragItem)
return dragItem;
}

3
src/scss/global.scss
View File

@@ -1,4 +1,5 @@
@import "gradio";
@import "litegraph";
body {
overflow: hidden;
@@ -110,11 +111,13 @@ input, textarea {
border-radius: 0 !important;
}
:not(.litegraph) {
select {
color: var(--body-text-color);
background: var(--input-background-fill);
border: var(--input-border-width) solid var(--input-border-color)
}
}
.container {
background: var(--body-background-fill) !important;

108
src/scss/litegraph.scss Normal file
View File

@@ -0,0 +1,108 @@
// Improvements to litegraph's css.
// Taken from ComfyUI.
:root {
--litegraph-fg-color: #000;
--litegraph-bg-color: #fff;
--litegraph-comfy-menu-bg: #353535;
--litegraph-comfy-input-bg: #222;
--litegraph-input-text: #ddd;
--litegraph-descrip-text: #999;
--litegraph-drag-text: #ccc;
--litegraph-error-text: #ff4444;
--litegraph-border-color: #4e4e4e;
}
.litegraph {
/* Input popup */
&.graphdialog {
min-height: 1em;
background-color: var(--litegraph-comfy-menu-bg);
.name {
font-size: 14px;
font-family: sans-serif;
color: var(--litegraph-descrip-text);
}
button {
margin-top: unset;
vertical-align: unset;
height: 1.6em;
padding-right: 8px;
}
}
.graphdialog input, .graphdialog textarea, .graphdialog select {
background-color: var(--litegraph-comfy-input-bg);
border: 2px solid;
border-color: var(--litegraph-border-color);
color: var(--litegraph-input-text);
border-radius: 12px 0 0 12px;
}
/* Context Menu */
.litemenu-entry {
&.has_submenu {
position: relative;
padding-right: 20px;
}
}
&.litecontextmenu {
.litemenu-entry {
&:hover {
&:not(.disabled):not(.separator) {
background-color: var(--litegraph-comfy-menu-bg) !important;
filter: brightness(155%);
color: var(--litegraph-input-text);
}
}
}
input {
background-color: var(--litegraph-comfy-input-bg) !important;
color: var(--litegraph-input-text) !important;
}
}
&.litesearchbox {
z-index: 9999 !important;
background-color: var(--litegraph-comfy-menu-bg) !important;
overflow: hidden;
}
&.lite-search-item {
color: var(--litegraph-input-text);
background-color: var(--litegraph-comfy-input-bg);
filter: brightness(80%);
padding-left: 0.2em;
&.generic_type {
color: var(--litegraph-input-text);
filter: brightness(50%);
}
}
}
.litemenu-entry {
&.has_submenu {
&::after {
content: ">";
position: absolute;
top: 0;
right: 2px;
}
}
}
.litegraph.litecontextmenu,
.litegraph.litecontextmenu.dark {
z-index: 9999 !important;
background-color: var(--litegraph-comfy-menu-bg) !important;
filter: brightness(95%);
}
.litegraph.litecontextmenu .litemenu-entry.submenu,
.litegraph.litecontextmenu.dark .litemenu-entry.submenu {
background-color: var(--litegraph-comfy-menu-bg) !important;
color: var(--litegraph-input-text);
}
.litegraph.litesearchbox input,
.litegraph.litesearchbox select {
background-color: var(--litegraph-comfy-input-bg) !important;
color: var(--litegraph-input-text);
}