Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-29 18:52:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix load of string node id workflow (#744)

Browse Source 
* Update litegraph

* Fix string node id

* Add playwright test

* Update test expectations [skip ci]

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Chenlei Hu
2024-09-05 08:16:41 -07:00
committed by GitHub
parent 9d855d637e
commit 38c957d3a9
8 changed files with 393 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

377
browser_tests/assets/string_node_id.json Normal file
View File

@@ -0,0 +1,377 @@
{
"last_node_id": 0,
"last_link_id": 18,
"nodes": [
{
"id": "CheckpointLoaderSimple.0",
"type": "CheckpointLoaderSimple",
"pos": {
"0": 100,
"1": 130
},
"size": {
"0": 315,
"1": 98
},
"flags": {},
"order": 0,
"mode": 0,
"inputs": [],
"outputs": [
{
"name": "MODEL",
"type": "MODEL",
"links": [
12
],
"shape": 3
},
{
"name": "CLIP",
"type": "CLIP",
"links": [
10,
11
],
"shape": 3
},
{
"name": "VAE",
"type": "VAE",
"links": [
17
],
"shape": 3
}
],
"properties": {
"Node name for S&R": "CheckpointLoaderSimple"
},
"widgets_values": [
"v1-5-pruned-emaonly.ckpt"
]
},
{
"id": "CLIPTextEncode.0",
"type": "CLIPTextEncode",
"pos": {
"0": 515,
"1": 130
},
"size": {
"0": 400,
"1": 200
},
"flags": {},
"order": 2,
"mode": 0,
"inputs": [
{
"name": "clip",
"type": "CLIP",
"link": 10
}
],
"outputs": [
{
"name": "CONDITIONING",
"type": "CONDITIONING",
"links": [
13
],
"shape": 3
}
],
"properties": {
"Node name for S&R": "CLIPTextEncode"
},
"widgets_values": [
"beautiful scenery nature glass bottle landscape, , purple galaxy bottle,"
]
},
{
"id": "CLIPTextEncode.1",
"type": "CLIPTextEncode",
"pos": {
"0": 515,
"1": 460
},
"size": {
"0": 400,
"1": 200
},
"flags": {},
"order": 3,
"mode": 0,
"inputs": [
{
"name": "clip",
"type": "CLIP",
"link": 11
}
],
"outputs": [
{
"name": "CONDITIONING",
"type": "CONDITIONING",
"links": [
14
],
"shape": 3
}
],
"properties": {
"Node name for S&R": "CLIPTextEncode"
},
"widgets_values": [
"text, watermark"
]
},
{
"id": "EmptyLatentImage.0",
"type": "EmptyLatentImage",
"pos": {
"0": 100,
"1": 358
},
"size": {
"0": 315,
"1": 106
},
"flags": {},
"order": 1,
"mode": 0,
"inputs": [],
"outputs": [
{
"name": "LATENT",
"type": "LATENT",
"links": [
15
],
"shape": 3
}
],
"properties": {
"Node name for S&R": "EmptyLatentImage"
},
"widgets_values": [
512,
512,
1
]
},
{
"id": "KSampler.0",
"type": "KSampler",
"pos": {
"0": 1015,
"1": 130
},
"size": {
"0": 315,
"1": 262
},
"flags": {},
"order": 4,
"mode": 0,
"inputs": [
{
"name": "model",
"type": "MODEL",
"link": 12
},
{
"name": "positive",
"type": "CONDITIONING",
"link": 13
},
{
"name": "negative",
"type": "CONDITIONING",
"link": 14
},
{
"name": "latent_image",
"type": "LATENT",
"link": 15
}
],
"outputs": [
{
"name": "LATENT",
"type": "LATENT",
"links": [
16
],
"shape": 3
}
],
"properties": {
"Node name for S&R": "KSampler"
},
"widgets_values": [
3,
"randomize",
20,
8,
"euler",
"normal",
1
]
},
{
"id": "VAEDecode.0",
"type": "VAEDecode",
"pos": {
"0": 1430,
"1": 130
},
"size": {
"0": 210,
"1": 46
},
"flags": {},
"order": 5,
"mode": 0,
"inputs": [
{
"name": "samples",
"type": "LATENT",
"link": 16
},
{
"name": "vae",
"type": "VAE",
"link": 17
}
],
"outputs": [
{
"name": "IMAGE",
"type": "IMAGE",
"links": [
18
],
"shape": 3
}
],
"properties": {
"Node name for S&R": "VAEDecode"
}
},
{
"id": "SaveImage.0",
"type": "SaveImage",
"pos": {
"0": 1740,
"1": 130
},
"size": {
"0": 315,
"1": 58
},
"flags": {},
"order": 6,
"mode": 0,
"inputs": [
{
"name": "images",
"type": "IMAGE",
"link": 18
}
],
"outputs": [],
"properties": {},
"widgets_values": [
"ComfyUI"
]
}
],
"links": [
[
10,
"CheckpointLoaderSimple.0",
1,
"CLIPTextEncode.0",
0,
"CLIP"
],
[
11,
"CheckpointLoaderSimple.0",
1,
"CLIPTextEncode.1",
0,
"CLIP"
],
[
12,
"CheckpointLoaderSimple.0",
0,
"KSampler.0",
0,
"MODEL"
],
[
13,
"CLIPTextEncode.0",
0,
"KSampler.0",
1,
"CONDITIONING"
],
[
14,
"CLIPTextEncode.1",
0,
"KSampler.0",
2,
"CONDITIONING"
],
[
15,
"EmptyLatentImage.0",
0,
"KSampler.0",
3,
"LATENT"
],
[
16,
"KSampler.0",
0,
"VAEDecode.0",
0,
"LATENT"
],
[
17,
"CheckpointLoaderSimple.0",
2,
"VAEDecode.0",
1,
"VAE"
],
[
18,
"VAEDecode.0",
0,
"SaveImage.0",
0,
"IMAGE"
]
],
"groups": [],
"config": {},
"extra": {
"ds": {
"scale": 1,
"offset": [
149.9747408641311,
383.8593224280729
]
}
},
"version": 0.4
}

7
browser_tests/interaction.spec.ts
View File

@@ -337,3 +337,10 @@ test.describe('Widget Interaction', () => {
await expect(textBox).toHaveValue('1girl') await expect(textBox).toHaveValue('1girl')
}) })
}) })
test.describe('Load workflow', () => {
test('Can load workflow with string node id', async ({ comfyPage }) => {
await comfyPage.loadWorkflow('string_node_id')
await expect(comfyPage.canvas).toHaveScreenshot('string_node_id.png')
})
})

BIN
browser_tests/interaction.spec.ts-snapshots/string-node-id-chromium-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

8
package-lock.json generated
View File

@@ -9,7 +9,7 @@
"version": "1.2.46", "version": "1.2.46",
"dependencies": { "dependencies": {
"@atlaskit/pragmatic-drag-and-drop": "^1.2.1", "@atlaskit/pragmatic-drag-and-drop": "^1.2.1",
"@comfyorg/litegraph": "^0.7.63", "@comfyorg/litegraph": "^0.7.64",
"@primevue/themes": "^4.0.0-rc.2", "@primevue/themes": "^4.0.0-rc.2",
"@vitejs/plugin-vue": "^5.0.5", "@vitejs/plugin-vue": "^5.0.5",
"@vueuse/core": "^11.0.0", "@vueuse/core": "^11.0.0",
@@ -1883,9 +1883,9 @@
"dev": true "dev": true
}, },
"node_modules/@comfyorg/litegraph": { "node_modules/@comfyorg/litegraph": {
"version": "0.7.63", "version": "0.7.64",
"resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.7.63.tgz", "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.7.64.tgz",
"integrity": "sha512-fMPUN7QoGv/sLY8OecN5dE6uNzdFgyZm16xBM2UmskxcWEkDnQzWKalqOlz1w9sl06SolvSvQ3DM0OueThfdjg==", "integrity": "sha512-fgdEUGPx37PkWlBW+Q8URHZ7GwN25DfSHsldFwsqyFwxMChR7X5yNejIJL5qRBGJrBtM0Ftv82j3raGpd7hPNw==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/@cspotcode/source-map-support": { "node_modules/@cspotcode/source-map-support": {

2
package.json
View File

@@ -59,7 +59,7 @@
}, },
"dependencies": { "dependencies": {
"@atlaskit/pragmatic-drag-and-drop": "^1.2.1", "@atlaskit/pragmatic-drag-and-drop": "^1.2.1",
"@comfyorg/litegraph": "^0.7.63", "@comfyorg/litegraph": "^0.7.64",
"@primevue/themes": "^4.0.0-rc.2", "@primevue/themes": "^4.0.0-rc.2",
"@vitejs/plugin-vue": "^5.0.5", "@vitejs/plugin-vue": "^5.0.5",
"@vueuse/core": "^11.0.0", "@vueuse/core": "^11.0.0",

2
src/extensions/core/nodeTemplates.ts
View File

@@ -377,7 +377,7 @@ app.registerExtension({
data = JSON.parse(data) data = JSON.parse(data)
const nodeIds = Object.keys(app.canvas.selected_nodes) const nodeIds = Object.keys(app.canvas.selected_nodes)
for (let i = 0; i < nodeIds.length; i++) { for (let i = 0; i < nodeIds.length; i++) {
const node = app.graph.getNodeById(Number.parseInt(nodeIds[i])) const node = app.graph.getNodeById(nodeIds[i])
// @ts-expect-error // @ts-expect-error
const nodeData = node?.constructor.nodeData const nodeData = node?.constructor.nodeData

2
src/extensions/core/uploadAudio.ts
View File

@@ -124,7 +124,7 @@ app.registerExtension({
}, },
onNodeOutputsUpdated(nodeOutputs: Record<number, any>) { onNodeOutputsUpdated(nodeOutputs: Record<number, any>) {
for (const [nodeId, output] of Object.entries(nodeOutputs)) { for (const [nodeId, output] of Object.entries(nodeOutputs)) {
const node = app.graph.getNodeById(Number.parseInt(nodeId)) const node = app.graph.getNodeById(nodeId)
if ('audio' in output) { if ('audio' in output) {
const audioUIWidget = node.widgets.find( const audioUIWidget = node.widgets.find(
(w) => w.name === 'audioUI' (w) => w.name === 'audioUI'

5
src/scripts/app.ts
View File

@@ -2804,7 +2804,7 @@ export class ComfyApp {
this.changeWorkflow(() => { this.changeWorkflow(() => {
for (const id of ids) { for (const id of ids) {
const data = apiData[id] const data = apiData[id]
const node = app.graph.getNodeById(Number.parseInt(id)) const node = app.graph.getNodeById(id)
for (const input in data.inputs ?? {}) { for (const input in data.inputs ?? {}) {
const value = data.inputs[input] const value = data.inputs[input]
if (value instanceof Array) { if (value instanceof Array) {
@@ -2839,7 +2839,7 @@ export class ComfyApp {
for (const id of ids) { for (const id of ids) {
const data = apiData[id] const data = apiData[id]
const node = app.graph.getNodeById(Number.parseInt(id)) const node = app.graph.getNodeById(id)
for (const input in data.inputs ?? {}) { for (const input in data.inputs ?? {}) {
const value = data.inputs[input] const value = data.inputs[input]
if (value instanceof Array) { if (value instanceof Array) {
@@ -3009,7 +3009,6 @@ export class ComfyApp {
} }
public goToNode(nodeId: NodeId) { public goToNode(nodeId: NodeId) {
// @ts-expect-error TODO: Update litegraph's nodeId type to string | number
const graphNode = this.graph.getNodeById(nodeId) const graphNode = this.graph.getNodeById(nodeId)
if (!graphNode) return if (!graphNode) return
this.canvas.centerOnNode(graphNode) this.canvas.centerOnNode(graphNode)