Use UUIDs everywhere & improve prompt popup

2023-05-13 01:20:58 -05:00
parent 7786a0aba6
commit 23271197b5
12 changed files with 6064 additions and 2522 deletions
--- a/2
+++ b/2
--- a/public/workflows/defaultWorkflow.json
+++ b/public/workflows/defaultWorkflow.json
--- a/public/workflows/upscale.json
+++ b/public/workflows/upscale.json
@@ -6,7 +6,7 @@
    "last_link_id": 11,
    "nodes": [
      {
-        "id": 2,
+        "id": "47706464-4d82-4329-91a9-c9b2bec4cf60",
        "type": "ui/combo",
        "pos": [
          1957.9086484470572,
@@ -39,7 +39,7 @@
            "name": "value",
            "type": "string",
            "links": [
-              1
+              "ca92647a-2a42-45c1-9e75-96aadd954d2f"
            ]
          },
          {
@@ -64,7 +64,7 @@
        "saveUserState": false
      },
      {
-        "id": 3,
+        "id": "8ad09059-f3fc-453f-8633-bd7281bc2802",
        "type": "ui/image_upload",
        "pos": [
          1925.8925619834713,
@@ -90,7 +90,7 @@
            "name": "filename",
            "type": "string",
            "links": [
-              4
+              "6c59e5a0-008d-4f8f-a2a3-e18ce2536194"
            ]
          },
          {
@@ -129,7 +129,7 @@
        "saveUserState": false
      },
      {
-        "id": 5,
+        "id": "c3c2fedf-e8ea-4d42-a866-5e8118cba44f",
        "type": "ImageUpscaleWithModel",
        "pos": [
          2322,
@@ -146,13 +146,13 @@
          {
            "name": "upscale_model",
            "type": "UPSCALE_MODEL",
-            "link": 2,
+            "link": "e76b88da-2474-4416-947a-3df7744b9f0e",
            "config": {}
          },
          {
            "name": "image",
            "type": "IMAGE",
-            "link": 5,
+            "link": "978dec85-18c9-42f5-af2a-d560ea9f6a3b",
            "config": {}
          }
        ],
@@ -161,7 +161,7 @@
            "name": "IMAGE",
            "type": "IMAGE",
            "links": [
-              7
+              "a2678fb8-093c-4769-92e8-20ae02961047"
            ],
            "slot_index": 0
          }
@@ -175,7 +175,7 @@
        "saveUserState": true
      },
      {
-        "id": 10,
+        "id": "257170fc-2503-4304-9d8c-fdc50f1fd0da",
        "type": "ui/button",
        "pos": [
          2657,
@@ -196,7 +196,7 @@
            "name": "clicked",
            "type": -2,
            "links": [
-              9
+              "76b86223-43cc-4eee-b678-6481aa77066d"
            ],
            "shape": 1,
            "slot_index": 0
@@ -223,7 +223,7 @@
        "saveUserState": true
      },
      {
-        "id": 8,
+        "id": "f842f292-01b3-45e3-8972-ef5d036dd7d3",
        "type": "SaveImage",
        "pos": [
          2542,
@@ -240,13 +240,13 @@
          {
            "name": "images",
            "type": "IMAGE",
-            "link": 7,
+            "link": "a2678fb8-093c-4769-92e8-20ae02961047",
            "config": {}
          },
          {
            "name": "filename_prefix",
            "type": "string",
-            "link": 11,
+            "link": "79173f8b-dace-41e6-9897-3ba6d7e8ef3e",
            "config": {},
            "defaultWidgetNode": null,
            "widgetNodeType": "ui/text",
@@ -258,7 +258,7 @@
            "name": "onExecuted",
            "type": -2,
            "links": [
-              8
+              "fc2282f2-64c9-44b8-ae2f-0476777d088f"
            ],
            "color_off": "rebeccapurple",
            "color_on": "rebeccapurple",
@@ -275,7 +275,7 @@
        "saveUserState": true
      },
      {
-        "id": 6,
+        "id": "1dcc0510-9e06-4ca4-b607-26c361abce6c",
        "type": "LoadImage",
        "pos": [
          2160,
@@ -292,7 +292,7 @@
          {
            "name": "image",
            "type": "string",
-            "link": 4,
+            "link": "6c59e5a0-008d-4f8f-a2a3-e18ce2536194",
            "config": {},
            "defaultWidgetNode": null,
            "widgetNodeType": "ui/combo",
@@ -305,7 +305,7 @@
            "name": "IMAGE",
            "type": "IMAGE",
            "links": [
-              5
+              "978dec85-18c9-42f5-af2a-d560ea9f6a3b"
            ],
            "slot_index": 0
          },
@@ -324,7 +324,7 @@
        "saveUserState": true
      },
      {
-        "id": 9,
+        "id": "5c25a00f-c779-44b0-a09f-6915e7170536",
        "type": "ui/text",
        "pos": [
          2445,
@@ -357,7 +357,7 @@
            "name": "value",
            "type": "string",
            "links": [
-              11
+              "79173f8b-dace-41e6-9897-3ba6d7e8ef3e"
            ],
            "slot_index": 0
          },
@@ -384,7 +384,7 @@
        "saveUserState": true
      },
      {
-        "id": 4,
+        "id": "31918f22-9e41-446d-a024-a24c90bc5a45",
        "type": "ui/gallery",
        "pos": [
          2819,
@@ -407,7 +407,7 @@
          {
            "name": "store",
            "type": -1,
-            "link": 8,
+            "link": "fc2282f2-64c9-44b8-ae2f-0476777d088f",
            "color_off": "rebeccapurple",
            "color_on": "rebeccapurple",
            "shape": 1
@@ -415,7 +415,7 @@
          {
            "name": "clear",
            "type": -1,
-            "link": 9,
+            "link": "76b86223-43cc-4eee-b678-6481aa77066d",
            "shape": 1
          }
        ],
@@ -456,7 +456,7 @@
        "saveUserState": false
      },
      {
-        "id": 1,
+        "id": "76728844-31dc-4a76-bd2f-f32f1d7bbb64",
        "type": "UpscaleModelLoader",
        "pos": [
          2088,
@@ -473,7 +473,7 @@
          {
            "name": "model_name",
            "type": "string",
-            "link": 1,
+            "link": "ca92647a-2a42-45c1-9e75-96aadd954d2f",
            "config": {},
            "defaultWidgetNode": null,
            "widgetNodeType": "ui/combo",
@@ -485,7 +485,7 @@
            "name": "UPSCALE_MODEL",
            "type": "UPSCALE_MODEL",
            "links": [
-              2
+              "e76b88da-2474-4416-947a-3df7744b9f0e"
            ],
            "slot_index": 0
          }
@@ -501,66 +501,66 @@
    ],
    "links": [
      [
-        1,
-        2,
+        "ca92647a-2a42-45c1-9e75-96aadd954d2f",
+        "47706464-4d82-4329-91a9-c9b2bec4cf60",
        0,
-        1,
+        "76728844-31dc-4a76-bd2f-f32f1d7bbb64",
        0,
        "string"
      ],
      [
-        2,
-        1,
+        "e76b88da-2474-4416-947a-3df7744b9f0e",
+        "76728844-31dc-4a76-bd2f-f32f1d7bbb64",
        0,
-        5,
+        "c3c2fedf-e8ea-4d42-a866-5e8118cba44f",
        0,
        "UPSCALE_MODEL"
      ],
      [
-        4,
-        3,
+        "6c59e5a0-008d-4f8f-a2a3-e18ce2536194",
+        "8ad09059-f3fc-453f-8633-bd7281bc2802",
        0,
-        6,
+        "1dcc0510-9e06-4ca4-b607-26c361abce6c",
        0,
        "string"
      ],
      [
-        5,
-        6,
+        "978dec85-18c9-42f5-af2a-d560ea9f6a3b",
+        "1dcc0510-9e06-4ca4-b607-26c361abce6c",
        0,
-        5,
+        "c3c2fedf-e8ea-4d42-a866-5e8118cba44f",
        1,
        "IMAGE"
      ],
      [
-        7,
-        5,
+        "a2678fb8-093c-4769-92e8-20ae02961047",
+        "c3c2fedf-e8ea-4d42-a866-5e8118cba44f",
        0,
-        8,
+        "f842f292-01b3-45e3-8972-ef5d036dd7d3",
        0,
        "IMAGE"
      ],
      [
-        8,
-        8,
+        "fc2282f2-64c9-44b8-ae2f-0476777d088f",
+        "f842f292-01b3-45e3-8972-ef5d036dd7d3",
        0,
-        4,
+        "31918f22-9e41-446d-a024-a24c90bc5a45",
        1,
        -1
      ],
      [
-        9,
-        10,
+        "76b86223-43cc-4eee-b678-6481aa77066d",
+        "257170fc-2503-4304-9d8c-fdc50f1fd0da",
        0,
-        4,
+        "31918f22-9e41-446d-a024-a24c90bc5a45",
        2,
        -1
      ],
      [
-        11,
-        9,
+        "79173f8b-dace-41e6-9897-3ba6d7e8ef3e",
+        "5c25a00f-c779-44b0-a09f-6915e7170536",
        0,
-        8,
+        "f842f292-01b3-45e3-8972-ef5d036dd7d3",
        1,
        "string"
      ]
@@ -571,12 +571,12 @@
    "version": 10
  },
  "layout": {
-    "root": "0",
+    "root": "4d6c8745-5133-4d31-a33c-bc93f507ac45",
    "allItems": {
      "0": {
        "dragItem": {
          "type": "container",
-          "id": "0",
+          "id": "4d6c8745-5133-4d31-a33c-bc93f507ac45",
          "attrs": {
            "title": "",
            "hidden": false,
@@ -594,14 +594,14 @@
          }
        },
        "children": [
-          "1",
-          "2"
+          "c3414cbc-42d4-4c63-bdda-f960bac31fdd",
+          "bcacc84b-4d08-4ebb-977f-7b0be56543c1"
        ]
      },
      "1": {
        "dragItem": {
          "type": "container",
-          "id": "1",
+          "id": "c3414cbc-42d4-4c63-bdda-f960bac31fdd",
          "attrs": {
            "title": "",
            "hidden": false,
@@ -619,15 +619,15 @@
          }
        },
        "children": [
-          "5",
-          "4"
+          "74447132-c425-4db0-be80-57fdec6d4fc9",
+          "052ece2d-e32a-486c-9856-d07fd26e7ab2"
        ],
-        "parent": "0"
+        "parent": "4d6c8745-5133-4d31-a33c-bc93f507ac45"
      },
      "2": {
        "dragItem": {
          "type": "container",
-          "id": "2",
+          "id": "bcacc84b-4d08-4ebb-977f-7b0be56543c1",
          "attrs": {
            "title": "",
            "hidden": false,
@@ -645,16 +645,16 @@
          }
        },
        "children": [
-          "6",
-          "12"
+          "6e754e38-5790-4e46-a4b7-dbe5fb9ee30d",
+          "6c0af451-b908-4850-a5cf-a458fc3147ed"
        ],
-        "parent": "0"
+        "parent": "4d6c8745-5133-4d31-a33c-bc93f507ac45"
      },
      "3": {
        "dragItem": {
          "type": "widget",
-          "id": "3",
-          "nodeId": 2,
+          "id": "ee2182f5-88e5-4f68-a6d4-1f39cd7c47e6",
+          "nodeId": "47706464-4d82-4329-91a9-c9b2bec4cf60",
          "attrs": {
            "title": "Model Name",
            "hidden": false,
@@ -672,12 +672,12 @@
          }
        },
        "children": [],
-        "parent": "4"
+        "parent": "052ece2d-e32a-486c-9856-d07fd26e7ab2"
      },
      "4": {
        "dragItem": {
          "type": "container",
-          "id": "4",
+          "id": "052ece2d-e32a-486c-9856-d07fd26e7ab2",
          "attrs": {
            "title": "UpscaleModelLoader",
            "hidden": false,
@@ -695,15 +695,15 @@
          }
        },
        "children": [
-          "3"
+          "ee2182f5-88e5-4f68-a6d4-1f39cd7c47e6"
        ],
-        "parent": "1"
+        "parent": "c3414cbc-42d4-4c63-bdda-f960bac31fdd"
      },
      "5": {
        "dragItem": {
          "type": "widget",
-          "id": "5",
-          "nodeId": 3,
+          "id": "74447132-c425-4db0-be80-57fdec6d4fc9",
+          "nodeId": "8ad09059-f3fc-453f-8633-bd7281bc2802",
          "attrs": {
            "title": "Image",
            "hidden": false,
@@ -721,13 +721,13 @@
          }
        },
        "children": [],
-        "parent": "1"
+        "parent": "c3414cbc-42d4-4c63-bdda-f960bac31fdd"
      },
      "6": {
        "dragItem": {
          "type": "widget",
-          "id": "6",
-          "nodeId": 4,
+          "id": "6e754e38-5790-4e46-a4b7-dbe5fb9ee30d",
+          "nodeId": "31918f22-9e41-446d-a024-a24c90bc5a45",
          "attrs": {
            "title": "Result",
            "hidden": false,
@@ -745,13 +745,13 @@
          }
        },
        "children": [],
-        "parent": "2"
+        "parent": "bcacc84b-4d08-4ebb-977f-7b0be56543c1"
      },
      "9": {
        "dragItem": {
          "type": "widget",
-          "id": "9",
-          "nodeId": 9,
+          "id": "d4c3177b-5d39-4293-9d6e-6abf941a94d4",
+          "nodeId": "5c25a00f-c779-44b0-a09f-6915e7170536",
          "attrs": {
            "title": "Filename Prefix",
            "hidden": false,
@@ -769,13 +769,13 @@
          }
        },
        "children": [],
-        "parent": "12"
+        "parent": "6c0af451-b908-4850-a5cf-a458fc3147ed"
      },
      "11": {
        "dragItem": {
          "type": "widget",
-          "id": "11",
-          "nodeId": 10,
+          "id": "e9e0d601-1cce-4de3-9885-1834df406efd",
+          "nodeId": "257170fc-2503-4304-9d8c-fdc50f1fd0da",
          "attrs": {
            "title": "Clear Outputs",
            "hidden": false,
@@ -793,12 +793,12 @@
          }
        },
        "children": [],
-        "parent": "12"
+        "parent": "6c0af451-b908-4850-a5cf-a458fc3147ed"
      },
      "12": {
        "dragItem": {
          "type": "container",
-          "id": "12",
+          "id": "6c0af451-b908-4850-a5cf-a458fc3147ed",
          "attrs": {
            "title": "",
            "hidden": false,
@@ -816,10 +816,258 @@
          }
        },
        "children": [
-          "9",
-          "11"
+          "d4c3177b-5d39-4293-9d6e-6abf941a94d4",
+          "e9e0d601-1cce-4de3-9885-1834df406efd"
        ],
-        "parent": "2"
+        "parent": "bcacc84b-4d08-4ebb-977f-7b0be56543c1"
+      },
+      "4d6c8745-5133-4d31-a33c-bc93f507ac45": {
+        "dragItem": {
+          "type": "container",
+          "id": "4d6c8745-5133-4d31-a33c-bc93f507ac45",
+          "attrs": {
+            "title": "",
+            "hidden": false,
+            "disabled": false,
+            "direction": "horizontal",
+            "classes": "",
+            "style": "",
+            "nodeDisabledState": "disabled",
+            "variant": "gallery",
+            "containerVariant": "block",
+            "openOnStartup": false,
+            "buttonVariant": "primary",
+            "buttonSize": "large",
+            "tags": []
+          }
+        },
+        "children": [
+          "c3414cbc-42d4-4c63-bdda-f960bac31fdd",
+          "bcacc84b-4d08-4ebb-977f-7b0be56543c1"
+        ]
+      },
+      "c3414cbc-42d4-4c63-bdda-f960bac31fdd": {
+        "dragItem": {
+          "type": "container",
+          "id": "c3414cbc-42d4-4c63-bdda-f960bac31fdd",
+          "attrs": {
+            "title": "",
+            "hidden": false,
+            "disabled": false,
+            "direction": "vertical",
+            "classes": "",
+            "style": "",
+            "nodeDisabledState": "disabled",
+            "variant": "gallery",
+            "containerVariant": "block",
+            "openOnStartup": false,
+            "buttonVariant": "primary",
+            "buttonSize": "large",
+            "tags": []
+          }
+        },
+        "children": [
+          "74447132-c425-4db0-be80-57fdec6d4fc9",
+          "052ece2d-e32a-486c-9856-d07fd26e7ab2"
+        ],
+        "parent": "4d6c8745-5133-4d31-a33c-bc93f507ac45"
+      },
+      "bcacc84b-4d08-4ebb-977f-7b0be56543c1": {
+        "dragItem": {
+          "type": "container",
+          "id": "bcacc84b-4d08-4ebb-977f-7b0be56543c1",
+          "attrs": {
+            "title": "",
+            "hidden": false,
+            "disabled": false,
+            "direction": "vertical",
+            "classes": "",
+            "style": "",
+            "nodeDisabledState": "disabled",
+            "variant": "gallery",
+            "containerVariant": "block",
+            "openOnStartup": false,
+            "buttonVariant": "primary",
+            "buttonSize": "large",
+            "tags": []
+          }
+        },
+        "children": [
+          "6e754e38-5790-4e46-a4b7-dbe5fb9ee30d",
+          "6c0af451-b908-4850-a5cf-a458fc3147ed"
+        ],
+        "parent": "4d6c8745-5133-4d31-a33c-bc93f507ac45"
+      },
+      "ee2182f5-88e5-4f68-a6d4-1f39cd7c47e6": {
+        "dragItem": {
+          "type": "widget",
+          "id": "ee2182f5-88e5-4f68-a6d4-1f39cd7c47e6",
+          "nodeId": "47706464-4d82-4329-91a9-c9b2bec4cf60",
+          "attrs": {
+            "title": "Model Name",
+            "hidden": false,
+            "disabled": false,
+            "direction": "vertical",
+            "classes": "",
+            "style": "",
+            "nodeDisabledState": "disabled",
+            "variant": "gallery",
+            "containerVariant": "block",
+            "openOnStartup": false,
+            "buttonVariant": "primary",
+            "buttonSize": "large",
+            "tags": []
+          }
+        },
+        "children": [],
+        "parent": "052ece2d-e32a-486c-9856-d07fd26e7ab2"
+      },
+      "052ece2d-e32a-486c-9856-d07fd26e7ab2": {
+        "dragItem": {
+          "type": "container",
+          "id": "052ece2d-e32a-486c-9856-d07fd26e7ab2",
+          "attrs": {
+            "title": "UpscaleModelLoader",
+            "hidden": false,
+            "disabled": false,
+            "direction": "vertical",
+            "classes": "",
+            "style": "",
+            "nodeDisabledState": "disabled",
+            "variant": "gallery",
+            "containerVariant": "block",
+            "openOnStartup": false,
+            "buttonVariant": "primary",
+            "buttonSize": "large",
+            "tags": []
+          }
+        },
+        "children": [
+          "ee2182f5-88e5-4f68-a6d4-1f39cd7c47e6"
+        ],
+        "parent": "c3414cbc-42d4-4c63-bdda-f960bac31fdd"
+      },
+      "74447132-c425-4db0-be80-57fdec6d4fc9": {
+        "dragItem": {
+          "type": "widget",
+          "id": "74447132-c425-4db0-be80-57fdec6d4fc9",
+          "nodeId": "8ad09059-f3fc-453f-8633-bd7281bc2802",
+          "attrs": {
+            "title": "Image",
+            "hidden": false,
+            "disabled": false,
+            "direction": "vertical",
+            "classes": "",
+            "style": "",
+            "nodeDisabledState": "disabled",
+            "variant": "gallery",
+            "containerVariant": "block",
+            "openOnStartup": false,
+            "buttonVariant": "primary",
+            "buttonSize": "large",
+            "tags": []
+          }
+        },
+        "children": [],
+        "parent": "c3414cbc-42d4-4c63-bdda-f960bac31fdd"
+      },
+      "6e754e38-5790-4e46-a4b7-dbe5fb9ee30d": {
+        "dragItem": {
+          "type": "widget",
+          "id": "6e754e38-5790-4e46-a4b7-dbe5fb9ee30d",
+          "nodeId": "31918f22-9e41-446d-a024-a24c90bc5a45",
+          "attrs": {
+            "title": "Result",
+            "hidden": false,
+            "disabled": false,
+            "direction": "vertical",
+            "classes": "",
+            "style": "",
+            "nodeDisabledState": "disabled",
+            "variant": "gallery",
+            "containerVariant": "block",
+            "openOnStartup": false,
+            "buttonVariant": "primary",
+            "buttonSize": "large",
+            "tags": []
+          }
+        },
+        "children": [],
+        "parent": "bcacc84b-4d08-4ebb-977f-7b0be56543c1"
+      },
+      "d4c3177b-5d39-4293-9d6e-6abf941a94d4": {
+        "dragItem": {
+          "type": "widget",
+          "id": "d4c3177b-5d39-4293-9d6e-6abf941a94d4",
+          "nodeId": "5c25a00f-c779-44b0-a09f-6915e7170536",
+          "attrs": {
+            "title": "Filename Prefix",
+            "hidden": false,
+            "disabled": false,
+            "direction": "vertical",
+            "classes": "",
+            "style": "",
+            "nodeDisabledState": "disabled",
+            "variant": "gallery",
+            "containerVariant": "block",
+            "openOnStartup": false,
+            "buttonVariant": "primary",
+            "buttonSize": "large",
+            "tags": []
+          }
+        },
+        "children": [],
+        "parent": "6c0af451-b908-4850-a5cf-a458fc3147ed"
+      },
+      "e9e0d601-1cce-4de3-9885-1834df406efd": {
+        "dragItem": {
+          "type": "widget",
+          "id": "e9e0d601-1cce-4de3-9885-1834df406efd",
+          "nodeId": "257170fc-2503-4304-9d8c-fdc50f1fd0da",
+          "attrs": {
+            "title": "Clear Outputs",
+            "hidden": false,
+            "disabled": false,
+            "direction": "vertical",
+            "classes": "",
+            "style": "",
+            "nodeDisabledState": "disabled",
+            "variant": "gallery",
+            "containerVariant": "block",
+            "openOnStartup": false,
+            "buttonVariant": "secondary",
+            "buttonSize": "large",
+            "tags": []
+          }
+        },
+        "children": [],
+        "parent": "6c0af451-b908-4850-a5cf-a458fc3147ed"
+      },
+      "6c0af451-b908-4850-a5cf-a458fc3147ed": {
+        "dragItem": {
+          "type": "container",
+          "id": "6c0af451-b908-4850-a5cf-a458fc3147ed",
+          "attrs": {
+            "title": "",
+            "hidden": false,
+            "disabled": false,
+            "direction": "horizontal",
+            "classes": "",
+            "style": "",
+            "nodeDisabledState": "disabled",
+            "variant": "gallery",
+            "containerVariant": "block",
+            "openOnStartup": false,
+            "buttonVariant": "primary",
+            "buttonSize": "large",
+            "tags": []
+          }
+        },
+        "children": [
+          "d4c3177b-5d39-4293-9d6e-6abf941a94d4",
+          "e9e0d601-1cce-4de3-9885-1834df406efd"
+        ],
+        "parent": "bcacc84b-4d08-4ebb-977f-7b0be56543c1"
      }
    },
    "currentId": 15,
@@ -835,4 +1083,4 @@
    ],
    "scale": 1
  }
-}
+}
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -2,12 +2,13 @@ import type { Progress, SerializedPrompt, SerializedPromptInputs, SerializedProm
 import type TypedEmitter from "typed-emitter";
 import EventEmitter from "events";
 import type { GalleryOutput, GalleryOutputEntry } from "./nodes/ComfyWidgetNodes";
-import type { SerializedLGraph } from "@litegraph-ts/core";
+import type { SerializedLGraph, UUID } from "@litegraph-ts/core";
+import type { SerializedLayoutState } from "./stores/layoutState";

 export type ComfyPromptRequest = {
    client_id?: string,
    prompt: SerializedPromptInputsAll,
-    extra_data: ComfyPromptExtraData,
+    extra_data: ComfyBoxPromptExtraData,
    front?: boolean,
    number?: number
 }
@@ -29,14 +30,14 @@ export type ComfyAPIQueueResponse = {
    error?: string
 }

-export type NodeID = string;
-export type PromptID = string; // UUID
+export type NodeID = UUID;
+export type PromptID = UUID; // UUID

 export type ComfyAPIHistoryItem = [
    number,   // prompt number
    PromptID,
    SerializedPromptInputsAll,
-    ComfyPromptExtraData,
+    ComfyBoxPromptExtraData,
    NodeID[]  // good outputs
 ]

@@ -56,14 +57,18 @@ export type ComfyAPIHistoryResponse = {
 }

 export type ComfyPromptPNGInfo = {
-    workflow: SerializedLGraph
+    workflow: SerializedLGraph,
+    comfyBoxLayout: SerializedLayoutState,
+    comfyBoxSubgraphs: string[],
 }

-export type ComfyPromptExtraData = {
+export type ComfyBoxPromptExtraData = ComfyUIPromptExtraData & {
+    thumbnails?: GalleryOutputEntry[],
+}
+
+export type ComfyUIPromptExtraData = {
    extra_pnginfo?: ComfyPromptPNGInfo,
-    client_id?: string, // UUID
-    subgraphs: string[],
-    thumbnails?: GalleryOutputEntry[]
+    client_id?: UUID, // UUID
 }

 type ComfyAPIEvents = {
--- a/src/lib/components/ComfyApp.ts
+++ b/src/lib/components/ComfyApp.ts
@@ -1,6 +1,6 @@
 import { LiteGraph, LGraph, LGraphCanvas, LGraphNode, type LGraphNodeConstructor, type LGraphNodeExecutable, type SerializedLGraph, type SerializedLGraphGroup, type SerializedLGraphNode, type SerializedLLink, NodeMode, type Vector2, BuiltInSlotType, type INodeInputSlot } from "@litegraph-ts/core";
 import type { LConnectionKind, INodeSlot } from "@litegraph-ts/core";
-import ComfyAPI, { type ComfyAPIStatusResponse, type ComfyPromptExtraData, type ComfyPromptRequest, type NodeID, type PromptID } from "$lib/api"
+import ComfyAPI, { type ComfyAPIStatusResponse, type ComfyBoxPromptExtraData, type ComfyPromptRequest, type NodeID, type PromptID } from "$lib/api"
 import { getPngMetadata, importA1111 } from "$lib/pnginfo";
 import EventEmitter from "events";
 import type TypedEmitter from "typed-emitter";
@@ -349,7 +349,7 @@ export default class ComfyApp {

        this.api.addEventListener("executed", (promptID: PromptID, nodeID: NodeID, output: GalleryOutput) => {
            this.nodeOutputs[nodeID] = output;
-            const node = this.lGraph.getNodeById(parseInt(nodeID)) as ComfyGraphNode;
+            const node = this.lGraph.getNodeById(nodeID) as ComfyGraphNode;
            if (node?.onExecuted) {
                node.onExecuted(output);
            }
@@ -467,7 +467,6 @@ export default class ComfyApp {
            state = structuredClone(blankGraph)
        }
        await this.deserialize(state)
-        uiState.update(s => { s.uiUnlocked = true; return s; })
    }

    /**
@@ -558,7 +557,7 @@ export default class ComfyApp {
     * Converts the current graph workflow for sending to the API
     * @returns The workflow and node links
     */
-    async graphToPrompt(tag: string | null = null): Promise<SerializedPrompt> {
+    graphToPrompt(tag: string | null = null): SerializedPrompt {
        // Run frontend-only logic
        this.lGraph.runStep(1)

@@ -754,14 +753,16 @@ export default class ComfyApp {
                        }
                    }

-                    const p = await this.graphToPrompt(tag);
+                    const p = this.graphToPrompt(tag);
+                    const l = layoutState.serialize();
                    console.debug(promptToGraphVis(p))

-                    const extraData: ComfyPromptExtraData = {
+                    const extraData: ComfyBoxPromptExtraData = {
                        extra_pnginfo: {
-                            workflow: p.workflow
+                            workflow: p.workflow,
+                            comfyBoxLayout: l,
+                            comfyBoxSubgraphs: [tag],
                        },
-                        subgraphs: [tag],
                        thumbnails
                    }

--- a/src/lib/components/ComfyQueue.svelte
+++ b/src/lib/components/ComfyQueue.svelte
@@ -157,8 +157,10 @@

 let showModal = false;
 let selectedPrompt = null;
+ let selectedImages = [];
 function showPrompt(entry: QueueUIEntry, e: MouseEvent) {
     selectedPrompt = entry.entry.prompt;
+     selectedImages = entry.images;
     showModal = true;
 }

@@ -178,7 +180,7 @@
        <h1 style="padding-bottom: 1rem;">Prompt Details</h1>
    </div>
    {#if selectedPrompt}
-        <PromptDisplay prompt={selectedPrompt} />
+        <PromptDisplay prompt={selectedPrompt} images={selectedImages} />
    {/if}
 </Modal>

@@ -495,6 +497,9 @@
         display: flex;
         justify-content: center;
         align-items: center;
+         white-space: nowrap;
+         overflow: hidden;
+         text-overflow: ellipsis;
     }

     .queue-remaining {
--- a/src/lib/components/PromptDisplay.svelte
+++ b/src/lib/components/PromptDisplay.svelte
@@ -1,15 +1,22 @@
 <script lang="ts">
- import { fade } from "svelte/transition";
 import { TextBox } from "@gradio/form";
 import type { SerializedPromptInput, SerializedPromptInputsAll } from "./ComfyApp";
 import { Block, BlockLabel, BlockTitle } from "@gradio/atoms";
 import { JSON as JSONComponent } from "@gradio/json";
 import { JSON as JSONIcon, Copy, Check } from "@gradio/icons";
 import Accordion from "$lib/components/gradio/app/Accordion.svelte";
+ import Gallery from "$lib/components/gradio/gallery/Gallery.svelte";
+	import type { Styles } from "@gradio/utils";

 const splitLength = 50;

 export let prompt: SerializedPromptInputsAll;
+ export let images: string[] = [];
+
+ let galleryStyle: Styles = {
+     grid_cols: [2],
+     object_fit: "cover",
+ }

 function isInputLink(input: SerializedPromptInput): boolean {
     return Array.isArray(input)
@@ -55,63 +62,98 @@
 </script>

 <div class="prompt-display">
-    <Block>
-        {#each Object.entries(prompt) as [nodeID, inputs], i}
-            {@const classType = inputs.class_type}
-            {@const filtered = Object.entries(inputs.inputs).filter((i) => !isInputLink(i[1]))}
-            {#if filtered.length > 0}
-                <div class="accordion">
-                    <Block padding={true}>
-                        <Accordion label="Node {nodeID}: {classType}" open={false}>
-                            {#each filtered as [inputName, input]}
-                                <Block>
-                                    <BlockTitle>Input: {inputName}</BlockTitle>
-                                    <button class="copy-button" on:click={() => handleCopy(nodeID, inputName, input)}>
-                                        {#if copiedNodeID === nodeID && copiedInputName === inputName}
-                                            <span class="copied-icon">
-                                                <Check />
-                                            </span>
-                                        {:else}
-                                            <span class="copy-text"><Copy /></span>
-                                        {/if}
-                                    </button>
-                                    <div>
-                                        {#if isInputLink(input)}
-                                            Link {input[0]} -> {input[1]}
-                                        {:else if typeof input === "object"}
-                                            <Block>
-                                                <BlockLabel
-                                                    Icon={JSONIcon}
-                                                    show_label={true}
-                                                    label={inputName}
-                                                    float={true}
-                                                />
-                                                <JSONComponent value={input} />
-                                            </Block>
-                                        {:else if isMultiline(input)}
-                                            {@const lines = Math.max(countNewLines(input), input.length / splitLength)}
-                                            <TextBox label={inputName} value={formatInput(input)} {lines} max_lines={lines} />
-                                        {:else}
-                                            <TextBox label={inputName} value={formatInput(input)} lines={1} max_lines={1} />
-                                        {/if}
-                                    </div>
-                                </Block>
-                            {/each}
-                        </Accordion>
-                    </Block>
-                </div>
-            {/if}
-        {/each}
-    </Block>
+    <div class="scroll-container">
+        <Block>
+            {#each Object.entries(prompt) as [nodeID, inputs], i}
+                {@const classType = inputs.class_type}
+                {@const filtered = Object.entries(inputs.inputs).filter((i) => !isInputLink(i[1]))}
+                {#if filtered.length > 0}
+                    <div class="accordion">
+                        <Block padding={true}>
+                            <Accordion label="Node {i+1}: {classType}" open={false}>
+                                {#each filtered as [inputName, input]}
+                                    <Block>
+                                        <button class="copy-button" on:click={() => handleCopy(nodeID, inputName, input)}>
+                                            {#if copiedNodeID === nodeID && copiedInputName === inputName}
+                                                <span class="copied-icon">
+                                                    <Check />
+                                                </span>
+                                            {:else}
+                                                <span class="copy-text"><Copy /></span>
+                                            {/if}
+                                        </button>
+                                        <div>
+                                            {#if isInputLink(input)}
+                                                Link {input[0]} -> {input[1]}
+                                            {:else if typeof input === "object"}
+                                                <Block>
+                                                    <BlockLabel
+                                                        Icon={JSONIcon}
+                                                        show_label={true}
+                                                        label={inputName}
+                                                        float={true}
+                                                    />
+                                                    <JSONComponent value={input} />
+                                                </Block>
+                                            {:else if isMultiline(input)}
+                                                {@const lines = Math.max(countNewLines(input), input.length / splitLength)}
+                                                <TextBox label={inputName} value={formatInput(input)} {lines} max_lines={lines} />
+                                            {:else}
+                                                <TextBox label={inputName} value={formatInput(input)} lines={1} max_lines={1} />
+                                            {/if}
+                                        </div>
+                                    </Block>
+                                {/each}
+                            </Accordion>
+                        </Block>
+                    </div>
+                {/if}
+            {/each}
+        </Block>
+    </div>
+    {#if images.length > 0}
+        <div class="image-container">
+            <Block>
+                <Gallery
+                    value={images}
+                    label=""
+                    show_label={false}
+                    style={galleryStyle}
+                    root={""}
+                    root_url={""}
+                />
+            </Block>
+        </div>
+    {/if}
 </div>

 <style lang="scss">
 .prompt-display {
-     overflow-y: scroll;
-     width: 50vw;
+     width: 70vw;
     height: 60vh;
     color: none;

+     display: flex;
+     flex-wrap: nowrap;
+     overflow-y: auto;
+
+     flex-direction: column;
+     @media (min-width: 1600px) {
+         flex-direction: row;
+     }
+
+     .scroll-container {
+         position: relative;
+         /* overflow-y: auto; */
+         flex: 1 1 0%;
+     }
+
+     .image-container {
+         position: relative;
+         flex: 1 1 0%;
+         max-width: 30vw;
+     }
+
     .copy-button {
         display: flex;
         position: absolute;
--- a/src/lib/nodes/ComfyActionNodes.ts
+++ b/src/lib/nodes/ComfyActionNodes.ts
@@ -530,7 +530,7 @@ export class ComfySetNodeModeAdvancedAction extends ComfyGraphNode {
        }

        for (const [nodeId, newMode] of Object.entries(nodeChanges)) {
-            this.graph.getNodeById(parseInt(nodeId)).changeMode(newMode);
+            this.graph.getNodeById(nodeId).changeMode(newMode);
        }

        const layout = get(layoutState);
--- a/src/lib/notify.ts
+++ b/src/lib/notify.ts
@@ -47,7 +47,7 @@ function notifyToast(text: string, options: NotifyOptions) {
    }
    else if (options.type === "warning") {
        toastOptions.theme = {
-            '--toastBackground': 'var(--color-yellow-500)',
+            '--toastBackground': 'var(--color-yellow-600)',
        }
    }
    else if (options.type === "error") {
--- a/src/lib/stores/layoutState.ts
+++ b/src/lib/stores/layoutState.ts
@@ -1,9 +1,10 @@
 import { get, writable } from 'svelte/store';
-import type { Readable, Writable } from 'svelte/store';
+import type { Writable } from 'svelte/store';
 import type ComfyApp from "$lib/components/ComfyApp"
-import { type LGraphNode, type IWidget, type LGraph, NodeMode, type LGraphRemoveNodeOptions, type LGraphAddNodeOptions } from "@litegraph-ts/core"
-import { dndzone, SHADOW_PLACEHOLDER_ITEM_ID } from 'svelte-dnd-action';
+import { type LGraphNode, type IWidget, type LGraph, NodeMode, type LGraphRemoveNodeOptions, type LGraphAddNodeOptions, type UUID } from "@litegraph-ts/core"
+import { SHADOW_PLACEHOLDER_ITEM_ID } from 'svelte-dnd-action';
 import type { ComfyWidgetNode } from '$lib/nodes';
+import type { NodeID } from '$lib/api';

 type DragItemEntry = {
    /*
@@ -58,12 +59,12 @@ export type LayoutState = {
     * Items indexed by the litegraph node they're bound to
     * Only contains drag items of type "widget"
     */
-    allItemsByNode: Record<number, DragItemEntry>,
+    allItemsByNode: Record<NodeID, DragItemEntry>,

    /*
     * Next ID to use for instantiating a new drag item
     */
-    currentId: number,
+    currentId: UUID,

    /*
     * Selected drag items.
@@ -642,7 +643,7 @@ export interface WidgetLayout extends IDragItem {
    node: ComfyWidgetNode
 }

-export type DragItemID = string;
+export type DragItemID = UUID;

 type LayoutStateOps = {
    addContainer: (parent: ContainerLayout | null, attrs: Partial<Attributes>, index?: number) => ContainerLayout,
@@ -654,8 +655,8 @@ type LayoutStateOps = {
    groupItems: (dragItems: IDragItem[], attrs?: Partial<Attributes>) => ContainerLayout,
    ungroup: (container: ContainerLayout) => void,
    getCurrentSelection: () => IDragItem[],
-    findLayoutEntryForNode: (nodeId: number) => DragItemEntry | null,
-    findLayoutForNode: (nodeId: number) => IDragItem | null,
+    findLayoutEntryForNode: (nodeId: NodeID) => DragItemEntry | null,
+    findLayoutForNode: (nodeId: NodeID) => IDragItem | null,
    serialize: () => SerializedLayoutState,
    deserialize: (data: SerializedLayoutState, graph: LGraph) => void,
    initDefaultLayout: () => void,
@@ -916,7 +917,7 @@ function ungroup(container: ContainerLayout) {
    store.set(state)
 }

-function findLayoutEntryForNode(nodeId: number): DragItemEntry | null {
+function findLayoutEntryForNode(nodeId: NodeID): DragItemEntry | null {
    const state = get(store)
    const found = Object.entries(state.allItems).find(pair =>
        pair[1].dragItem.type === "widget"
@@ -926,7 +927,7 @@ function findLayoutEntryForNode(nodeId: number): DragItemEntry | null {
    return null;
 }

-function findLayoutForNode(nodeId: number): WidgetLayout | null {
+function findLayoutForNode(nodeId: NodeID): WidgetLayout | null {
    const found = findLayoutEntryForNode(nodeId);
    if (!found)
        return null;
@@ -963,7 +964,7 @@ function initDefaultLayout() {
 export type SerializedLayoutState = {
    root: DragItemID | null,
    allItems: Record<DragItemID, SerializedDragEntry>,
-    currentId: number,
+    currentId: UUID,
    attrs: LayoutAttributes
 }

@@ -976,7 +977,7 @@ export type SerializedDragEntry = {
 export type SerializedDragItem = {
    type: string,
    id: DragItemID,
-    nodeId: number | null,
+    nodeId: UUID | null,
    attrs: Attributes
 }

--- a/src/lib/stores/queueState.ts
+++ b/src/lib/stores/queueState.ts
@@ -1,4 +1,4 @@
-import type { ComfyAPIHistoryEntry, ComfyAPIHistoryItem, ComfyAPIHistoryResponse, ComfyAPIQueueResponse, ComfyAPIStatusResponse, ComfyPromptExtraData, NodeID, PromptID } from "$lib/api";
+import type { ComfyAPIHistoryEntry, ComfyAPIHistoryItem, ComfyAPIHistoryResponse, ComfyAPIQueueResponse, ComfyAPIStatusResponse, ComfyBoxPromptExtraData, NodeID, PromptID } from "$lib/api";
 import type { Progress, SerializedPromptInputsAll, SerializedPromptOutputs } from "$lib/components/ComfyApp";
 import type { GalleryOutput } from "$lib/nodes/ComfyWidgetNodes";
 import notify from "$lib/notify";
@@ -29,10 +29,11 @@ export type QueueEntry = {
    finishedAt?: Date,
    promptID: PromptID,
    prompt: SerializedPromptInputsAll,
-    extraData: ComfyPromptExtraData,
+    extraData: ComfyBoxPromptExtraData,
    goodOutputs: NodeID[],

-    /* Data not sent by Comfy's API, lost on page refresh */
+    /* Data not sent by ComfyUI's API, lost on page refresh */
+
    /* Prompt outputs, collected while the prompt is still executing */
    outputs: SerializedPromptOutputs,

@@ -53,7 +54,7 @@ export type QueueState = {
    queuePending: Writable<QueueEntry[]>,
    queueCompleted: Writable<CompletedQueueEntry[]>,
    queueRemaining: number | "X" | null;
-    runningNodeID: number | null;
+    runningNodeID: NodeID | null;
    progress: Progress | null,
    isInterrupting: boolean
 }
@@ -170,7 +171,7 @@ function executingUpdated(promptID: PromptID, runningNodeID: NodeID | null) {
            if (entry != null) {
                entry.nodesRan.add(runningNodeID)
            }
-            s.runningNodeID = parseInt(runningNodeID);
+            s.runningNodeID = runningNodeID;
        }
        else {
            // Prompt finished executing.
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -106,7 +106,7 @@ export function promptToGraphVis(prompt: SerializedPrompt): string {
    return out
 }

-export function getNodeInfo(nodeId: number): string {
+export function getNodeInfo(nodeId: NodeID): string {
    let app = (window as any).app;
    if (!app || !app.lGraph)
        return String(nodeId);