feat(ui): Models & Pipeline shape editing: swap, add, remove, rewire, regroup, start from a model, revert, export settings card
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
digital-garbage
co-authored by
Claude Sonnet 5.5
Claude Sonnet 5.5
parent
5102dc0035
commit
d3bf2896b3
@@ -1,6 +1,11 @@
|
||||
// Models & Pipeline: every node in the live pipeline, grouped as the pipeline groups them, with its values editable.
|
||||
// Changing the shape of the pipeline (swap, add, remove, wire) is not here yet.
|
||||
// Models & Pipeline: every node in the live pipeline by group, its values editable, and its shape: swap, add, remove, rewire, regroup.
|
||||
// The server refuses what would not build (a type that does not fit, a loop) and says why; the reason is shown and nothing changes.
|
||||
import { composer as c } from "../../composer/composer.js";
|
||||
import { pickNode } from "./nodepick.js";
|
||||
import { labelOf, shownValues, sourcesFor } from "./wiring.js";
|
||||
|
||||
const SEP = "\0", NEW_GROUP = "\0new";
|
||||
const fed = (v) => Array.isArray(v);
|
||||
|
||||
const widgetControl = (w, current, set) => {
|
||||
const label = w.name;
|
||||
@@ -18,42 +23,135 @@ const widgetControl = (w, current, set) => {
|
||||
};
|
||||
|
||||
export const models = (app) => function mount() {
|
||||
const ps = app.pipeline;
|
||||
const ps = app.pipeline, api = app.api;
|
||||
const page = c.region.stack({ gap: "md" });
|
||||
let specs = {}, note = "", off = null;
|
||||
let specs = {}, note = "", group = "", off = null, opened = null, gone = false;
|
||||
const slotsNow = () => ps.slots() || [];
|
||||
const say = (text) => { note = text; draw(); };
|
||||
const label = (slot) => labelOf(slot, specs, slotsNow());
|
||||
|
||||
async function draw() {
|
||||
const slots = slotsNow();
|
||||
const missing = [...new Set(slots.map((s) => s.node))].filter((n) => !(n in specs));
|
||||
if (missing.length) {
|
||||
try { Object.assign(specs, (await app.api.describeNodes(missing)).nodes || {}); } catch (err) { note = err.message; }
|
||||
missing.forEach((n) => { if (!(n in specs)) specs[n] = null; });
|
||||
async function describe() {
|
||||
const missing = [...new Set(slotsNow().map((s) => s.node))].filter((n) => !(n in specs));
|
||||
if (!missing.length) return;
|
||||
try { Object.assign(specs, (await api.describeNodes(missing)).nodes || {}); } catch (err) { note = err.message; }
|
||||
missing.forEach((n) => { if (!(n in specs)) specs[n] = null; });
|
||||
}
|
||||
const setInput = (slot, name) => async (value) => {
|
||||
if (JSON.stringify((slot.inputs || {})[name]) === JSON.stringify(value)) return; // a blur that changed nothing saves nothing
|
||||
await ps.save({ inputs: { [slot.id]: { [name]: value } } });
|
||||
say([...(ps.refused() || []), ...ps.saveNotes()].join(" "));
|
||||
};
|
||||
async function structural(body) {
|
||||
const res = await ps.edit(body);
|
||||
await describe();
|
||||
if (!res.refused.length) {
|
||||
const target = body.action === "add" ? slotsNow().slice(-1)[0] : body.action === "replace" || body.action === "unwire" ? slotsNow().find((s) => s.id === body.slot) : null;
|
||||
const values = target && shownValues(target, specs[target.node], body.action === "unwire" ? body.input : undefined);
|
||||
if (values && Object.keys(values).length) await ps.save({ inputs: { [target.id]: values } });
|
||||
}
|
||||
const set = (slot, name) => async (value) => {
|
||||
if (JSON.stringify((slot.inputs || {})[name]) === JSON.stringify(value)) return; // a blur that changed nothing saves nothing
|
||||
await ps.save({ inputs: { [slot.id]: { [name]: value } } });
|
||||
note = [...(ps.refused() || []), ...ps.saveNotes()].join(" "); draw();
|
||||
};
|
||||
const groups = [];
|
||||
slots.forEach((s) => { const g = s.group || "Other"; (groups.find((x) => x[0] === g) || (groups.push([g, []]), groups[groups.length - 1]))[1].push(s); });
|
||||
page.set([
|
||||
note ? c.banner.warn({ text: note }) : null,
|
||||
!slots.length ? c.emptyState.default({ icon: "⬡", title: "No pipeline loaded", hint: ps.loadError() || "Is ComfyUI reachable?" }) : null,
|
||||
...groups.flatMap(([group, list]) => [c.label.section({ text: group }), ...list.flatMap((slot) => {
|
||||
const spec = specs[slot.node];
|
||||
if (!spec) return [c.hint.default({ text: `${slot.node} is not installed — this slot can't be edited or run.` })];
|
||||
const rows = (spec.widgets || []).filter((w) => !Array.isArray(slot.inputs && slot.inputs[w.name])) // fed by another node: edited there
|
||||
.map((w) => w.type === "BOOLEAN" ? c.toggle.default({ label: w.name, hint: w.tooltip || "", checked: Boolean(slot.inputs && slot.inputs[w.name] !== undefined ? slot.inputs[w.name] : w.default), onChange: set(slot, w.name) }) : c.settingsRow.default({ label: w.name, hint: w.tooltip || "", control: widgetControl(w, slot.inputs && slot.inputs[w.name] !== undefined ? slot.inputs[w.name] : w.default, set(slot, w.name)) }));
|
||||
return [c.header.sm({ text: spec.title || slot.node }), ...rows];
|
||||
})]),
|
||||
].filter(Boolean));
|
||||
say(res.refused.length ? `Not changed: ${res.refused.join(" ")}` : "");
|
||||
return !res.refused.length;
|
||||
}
|
||||
const confirm = (title, message, tone) => c.modal.dialogue({ title, message, tone, confirmLabel: title.split(" ")[0] }).result;
|
||||
|
||||
// A select over what could feed an input: "a value" (or not connected), or an output of another node.
|
||||
const wiring = (slot, input, type, current, valueLabel) => {
|
||||
const options = [{ value: "", label: valueLabel }];
|
||||
const sources = sourcesFor(slot, type, slotsNow(), specs), now = fed(current) ? `${current[0]}${SEP}${current[1]}` : "";
|
||||
if (now && !sources.some((s) => s.value === now)) options.push({ value: now, label: `${current[0]} · output ${current[1]}` });
|
||||
sources.forEach((s) => options.push({ value: s.value, label: `Fed by ${s.label}` }));
|
||||
return c.select.md({ label: input, value: now, options, onChange: (v) => {
|
||||
if (!v) structural({ action: "unwire", slot: slot.id, input });
|
||||
else { const [from, idx] = v.split(SEP); structural({ action: "wire", slot: slot.id, input, from_slot: from, from_output: Number(idx) }); }
|
||||
} });
|
||||
};
|
||||
|
||||
const groups = () => [...new Set(slotsNow().map((s) => s.group || "Other"))];
|
||||
const structure = (slot) => {
|
||||
const here = slot.group || "Other";
|
||||
return c.field.default({ label: "Group", hint: "Cards in the sidebar. Any node can live in any group.", control: c.toolbar.default({
|
||||
items: [c.select.md({ label: "Group", value: here, options: [...groups().map((g) => ({ value: g, label: g })), { value: NEW_GROUP, label: "New group…" }], onChange: async (v) => {
|
||||
let name = v;
|
||||
if (v === NEW_GROUP) { name = ((await c.modal.prompt({ title: "New group", label: "Name", confirmLabel: "Create" }).result) || "").trim(); if (!name) return draw(); }
|
||||
await ps.setGroup(slot.id, name); group = name; draw();
|
||||
} })],
|
||||
trailing: [c.button.sm({ label: "Swap node…", tone: "ghost", title: "Use a different node here. It must still produce what the nodes after it read.", onClick: async () => {
|
||||
const cls = await pickNode(api, `Swap ${label(slot)} for…`);
|
||||
if (!cls) return;
|
||||
const driven = (slot.roles || []).map((r) => r.label || r.input).filter(Boolean);
|
||||
if (await confirm("Swap node", `Swap ${label(slot)} for ${cls}? Everything set on this node (files, values, connections into it) is cleared, and the new node starts empty.${driven.length ? ` The main window drives this node's ${driven.join(", ")}: those controls keep working only for inputs the new node also has, by the same name.` : ""}`, "danger")) structural({ action: "replace", slot: slot.id, node: cls });
|
||||
} }), c.button.sm({ label: "Remove", tone: "danger", title: "Take this node out; what it fed is rewired to what fed it, when that is unambiguous.", onClick: async () => {
|
||||
if (await confirm("Remove node", `Remove ${label(slot)} from the pipeline?`, "danger")) structural({ action: "remove", slot: slot.id });
|
||||
} })] }) });
|
||||
};
|
||||
|
||||
const slotBlock = (slot) => {
|
||||
const spec = specs[slot.node];
|
||||
if (spec === undefined) return [c.hint.default({ text: "Loading…" })];
|
||||
const head = c.header.sm({ text: label(slot) });
|
||||
if (spec === null) return [head, structure(slot), c.hint.default({ text: `${slot.node} is not installed — this slot can't be edited or run. Swap it for another node, or remove it.` })];
|
||||
const sockets = (spec.sockets || []).map((s) => c.field.default({ label: s.name, hint: s.required ? `${s.type} · needed` : s.type, control: wiring(slot, s.name, s.type, slot.inputs && slot.inputs[s.name], "Not connected") }));
|
||||
const rows = (spec.widgets || []).flatMap((w) => {
|
||||
const cur = slot.inputs && slot.inputs[w.name];
|
||||
if (fed(cur)) return [c.field.default({ label: w.name, hint: "Fed by another node: change it there, or pick “A value” to type one here.", control: wiring(slot, w.name, w.type, cur, "A value (typed here)") })];
|
||||
const value = cur !== undefined ? cur : w.default;
|
||||
const row = w.type === "BOOLEAN" ? c.toggle.default({ label: w.name, hint: w.tooltip || "", checked: Boolean(value), onChange: setInput(slot, w.name) })
|
||||
: c.settingsRow.default({ label: w.name, hint: w.tooltip || "", control: widgetControl(w, value, setInput(slot, w.name)) });
|
||||
const appOwned = (slot.roles || []).some((r) => r.input === w.name && r.at !== "project.video"); // the app writes it: wiring it elsewhere would make every Generate refuse
|
||||
const canTake = !appOwned && (w.type !== "COMBO" || (w.choices || []).length) && sourcesFor(slot, w.type, slotsNow(), specs).length;
|
||||
return canTake ? [row, c.field.default({ label: "↳ or take it from", hint: "Another node's output can drive this value; one Primitive can drive several inputs.", control: wiring(slot, w.name, w.type, null, "A value (typed here)") })] : [row];
|
||||
});
|
||||
return [head, structure(slot), ...sockets, ...rows, ...(!rows.length && !sockets.length ? [c.hint.default({ text: "Nothing to configure on this node." })] : [])];
|
||||
};
|
||||
|
||||
function status() {
|
||||
const incomplete = ps.incomplete(), refused = ps.refused(), notes = ps.saveNotes();
|
||||
return [refused.length ? c.banner.warn({ text: `Could not save: ${refused.join(" ")}` }) : null, notes.length ? c.banner.info({ text: notes.join(" ") }) : null,
|
||||
incomplete.length ? c.banner.warn({ text: `Not ready to generate yet: ${incomplete.join(" ")}` }) : ps.queueable() ? c.hint.default({ text: "Every slot is filled — this pipeline is ready to generate." }) : null];
|
||||
}
|
||||
|
||||
const tools = () => c.toolbar.default({ items: [c.button.sm({ label: "Start from…", tone: "ghost", title: "Replace this pipeline with a model's own starting point", onClick: presets }),
|
||||
c.button.sm({ label: "Revert", tone: "ghost", disabled: !opened, title: "Put back what was here when this page was opened", onClick: async () => { const r = await ps.restore(opened); say(r.refused.length ? r.refused[0] : ""); } })],
|
||||
trailing: [c.button.sm({ label: "🖼 Export settings…", tone: "ghost", title: "Render this pipeline as a PNG: loaders, typed-in values, torch / CUDA / attention", onClick: card })] });
|
||||
|
||||
async function presets() {
|
||||
let found;
|
||||
try { found = (await api.pipelinePresets()).presets || []; } catch (err) { return say(err.message); }
|
||||
if (!found.length) return say("No module offers a starting point.");
|
||||
const id = await c.modal.choice({ title: "Start from…", items: found.map((p) => ({ id: p.id, label: p.title, hint: p.module })) }).result;
|
||||
const pick = found.find((p) => p.id === id);
|
||||
if (!pick || !(await confirm("Replace pipeline", `Replace the whole pipeline with “${pick.title}”? Every file and value you set here is cleared. Revert puts it back until you leave this page.`, "danger"))) return;
|
||||
const r = await ps.restore({ slots: pick.slots, removed: [], unwired: {} });
|
||||
specs = {}; await describe(); say(r.refused.length ? `Not changed: ${r.refused[0]}` : "");
|
||||
}
|
||||
async function card() {
|
||||
let url;
|
||||
try { url = URL.createObjectURL(await api.settingsCard(slotsNow(), app.project.project && app.project.project.name, app.theme && app.theme.get ? app.theme.get() : "dark")); } catch (err) { return say(`Could not render the card: ${err.message}`); }
|
||||
const img = Object.assign(document.createElement("img"), { src: url, alt: "Pipeline settings", style: "max-width:100%" });
|
||||
const win = c.modal.generic({ title: "Pipeline settings", size: "lg", body: { node: img }, onClose: () => URL.revokeObjectURL(url) });
|
||||
win.setFooter({ actions: [c.button.sm({ label: "Save PNG", tone: "primary", onClick: () => Object.assign(document.createElement("a"), { href: url, download: "funpack-settings.png" }).click() })] });
|
||||
}
|
||||
|
||||
function draw() {
|
||||
if (gone) return;
|
||||
if (ps.loading()) return page.set([c.hint.default({ text: "Loading…" })]);
|
||||
if (ps.loadError()) return page.set([c.banner.warn({ text: `Could not load models & pipeline: ${ps.loadError()}` })]);
|
||||
const all = groups(), slots = slotsNow();
|
||||
if (!all.includes(group)) group = all[0] || "";
|
||||
page.set([tools(), note ? c.banner.warn({ text: note }) : null, ...status(),
|
||||
!slots.length ? c.emptyState.default({ icon: "⬡", title: "No pipeline loaded", hint: "Is ComfyUI reachable? Or start from a model's starting point above." }) : null,
|
||||
all.length ? c.tabs.underline({ label: "Group", tabs: all.map((g) => ({ value: g, label: g })), value: group, onChange: (g) => { group = g; draw(); } }) : null,
|
||||
group ? c.button.sm({ label: `＋ Add a node to ${group}`, tone: "ghost", title: "Put any installed node in this group, then wire it to the nodes around it.", onClick: async () => {
|
||||
const cls = await pickNode(api, `Add a node to ${group}`);
|
||||
if (cls) structural({ action: "add", node: cls, group });
|
||||
} }) : null,
|
||||
...slots.filter((s) => (s.group || "Other") === group).flatMap(slotBlock)].filter(Boolean));
|
||||
}
|
||||
// A redraw while a box has focus would eat what is being typed: it waits for the focus to leave.
|
||||
const typing = () => page.node.contains(document.activeElement) && /^(input|textarea)$/i.test(document.activeElement.tagName);
|
||||
page.node.addEventListener("focusout", () => setTimeout(() => { if (!typing()) draw(); }));
|
||||
ps.ensureLoaded().then(draw);
|
||||
off = ps.subscribe(() => { if (!typing()) draw(); });
|
||||
const handle = { node: page.node, destroy: () => { off && off(); page.node.remove(); } };
|
||||
return handle;
|
||||
draw();
|
||||
ps.ensureLoaded().then(async () => { opened = ps.snapshot(); await describe(); draw(); });
|
||||
off = ps.subscribe(() => { if (!typing()) { describe().then(draw); } });
|
||||
return { node: page.node, destroy: () => { gone = true; off && off(); page.node.remove(); } };
|
||||
};
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
// A search box over every installed node. -> the chosen node class, or null.
|
||||
import { composer as c } from "../../composer/composer.js";
|
||||
|
||||
export function pickNode(api, title) {
|
||||
return new Promise((resolve) => {
|
||||
const list = c.region.stack({ gap: "xs" }), note = c.hint.default({ text: "" });
|
||||
let timer = 0, ticket = 0, done = false;
|
||||
const finish = (v) => { if (!done) { done = true; resolve(v); } };
|
||||
const win = c.modal.generic({ title, size: "md", onClose: () => finish(null),
|
||||
body: c.region.stack({ gap: "sm", children: [c.input.md({ label: "Search", placeholder: "Search installed nodes by name or category…", onInput: (q) => { clearTimeout(timer); timer = setTimeout(() => run(q), 200); } }), note, list] }) });
|
||||
async function run(q) {
|
||||
const mine = ++ticket;
|
||||
let found;
|
||||
try { found = await api.searchNodes(q, 40); } catch (err) { return note.setText(`Could not search: ${err.message}`); }
|
||||
if (mine !== ticket) return;
|
||||
const nodes = found.nodes || [];
|
||||
list.set(nodes.map((n) => c.button.sm({ label: `${n.title || n.node} ${n.category || ""}${n.outputs && n.outputs.length ? ` → ${n.outputs.join(", ")}` : ""}`, tone: "ghost", onClick: () => { finish(n.node); win.close("done"); } })));
|
||||
note.setText(found.total > nodes.length ? `${nodes.length} of ${found.total} shown: type more to narrow it.` : nodes.length ? "" : "Nothing matches.");
|
||||
}
|
||||
run("");
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
// What a pipeline slot can be fed by, and what to say it is called. Pure.
|
||||
export const labelOf = (slot, specs, slots) => {
|
||||
const title = (specs[slot.node] && specs[slot.node].title) || slot.node || slot.id;
|
||||
const twin = slots.some((o) => o.id !== slot.id && ((specs[o.node] && specs[o.node].title) || o.node) === title);
|
||||
return twin ? `${title} (${slot.id})` : title;
|
||||
};
|
||||
|
||||
/** Outputs of the other slots that could feed an input of `type`: [{ value: "slot\0index", label }]. */
|
||||
export function sourcesFor(slot, type, slots, specs) {
|
||||
const out = [];
|
||||
for (const other of slots) {
|
||||
const spec = specs[other.node];
|
||||
if (other.id === slot.id || !spec || !spec.outputs) continue;
|
||||
spec.outputs.forEach((kind, i) => {
|
||||
if (kind === type || kind === "*" || type === "*") out.push({ value: `${other.id}\0${i}`, label: `${labelOf(other, specs, slots)} · ${(spec.output_names && spec.output_names[i]) || kind}` });
|
||||
});
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
/** A node that is new, or whose input was just unwired, has nothing SET on it while its form shows defaults:
|
||||
* these are the values to send so that what runs is what is seen. */
|
||||
export function shownValues(slot, spec, onlyInput) {
|
||||
const out = {};
|
||||
for (const w of (spec && spec.widgets) || []) {
|
||||
if ((onlyInput && w.name !== onlyInput) || (slot.inputs && slot.inputs[w.name] !== undefined)) continue;
|
||||
const v = w.default !== undefined ? w.default : w.type === "COMBO" ? (w.choices || [])[0] : w.type === "BOOLEAN" ? false : undefined;
|
||||
if (v !== undefined) out[w.name] = v;
|
||||
}
|
||||
return out;
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import test from "node:test";
|
||||
import assert from "node:assert/strict";
|
||||
import { labelOf, shownValues, sourcesFor } from "./wiring.js";
|
||||
|
||||
const specs = { A: { title: "Loader", outputs: ["MODEL", "VAE"], output_names: ["model", "vae"] }, B: { title: "Loader", outputs: ["INT"] }, C: { title: "Sampler", widgets: [{ name: "steps", type: "INT", default: 8 }, { name: "mode", type: "COMBO", choices: ["x", "y"] }, { name: "on", type: "BOOLEAN" }] } };
|
||||
const slots = [{ id: "a", node: "A" }, { id: "b", node: "B" }, { id: "c", node: "C" }];
|
||||
|
||||
test("two slots of one title are told apart by id", () => {
|
||||
assert.equal(labelOf(slots[0], specs, slots), "Loader (a)");
|
||||
assert.equal(labelOf(slots[2], specs, slots), "Sampler");
|
||||
});
|
||||
|
||||
test("only outputs of the right type, from other slots, can feed an input", () => {
|
||||
assert.deepEqual(sourcesFor(slots[2], "VAE", slots, specs).map((s) => s.label), ["Loader (a) · vae"]);
|
||||
assert.deepEqual(sourcesFor(slots[2], "INT", slots, specs).map((s) => s.value), ["b\u00000"]);
|
||||
assert.equal(sourcesFor(slots[0], "VAE", slots, specs).length, 0); // not itself
|
||||
});
|
||||
|
||||
test("what the form shows is sent for a slot with nothing set, and nothing already set is overwritten", () => {
|
||||
assert.deepEqual(shownValues({ id: "c", inputs: {} }, specs.C), { steps: 8, mode: "x", on: false });
|
||||
assert.deepEqual(shownValues({ id: "c", inputs: { steps: 4 } }, specs.C), { mode: "x", on: false });
|
||||
assert.deepEqual(shownValues({ id: "c", inputs: {} }, specs.C, "steps"), { steps: 8 });
|
||||
});
|
||||
@@ -23,6 +23,14 @@ export const api = {
|
||||
editPipeline: (body) => call("POST", "/api/pipeline", body),
|
||||
modules: (traits) => call("GET", `/api/modules${traits ? `?traits=${encodeURIComponent(traits)}` : ""}`),
|
||||
releaseModule: (id) => call("POST", "/api/control/release", { id }),
|
||||
searchNodes: (q, limit = 40) => call("GET", `/api/nodes/search?q=${encodeURIComponent(q || "")}&limit=${limit}`),
|
||||
pipelinePresets: () => call("GET", "/api/pipeline/presets"),
|
||||
/** The pipeline as a PNG (loaders, typed-in values, host torch/CUDA). -> a Blob. */
|
||||
async settingsCard(slots, projectName, theme) {
|
||||
const res = await fetch(`${BASE}/api/settings-card`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ slots, project_name: projectName || null, theme: theme || "dark" }) });
|
||||
if (!res.ok) throw new Error(why(res, await res.json().catch(() => null)));
|
||||
return res.blob();
|
||||
},
|
||||
describeNodes: (classes) => call("GET", `/api/nodes?classes=${encodeURIComponent(classes.join(","))}`),
|
||||
system: () => call("GET", "/api/system"),
|
||||
storyMarkers: () => call("GET", "/api/story/markers"),
|
||||
|
||||
Reference in New Issue
Block a user