Merge pull request #75 from space-nuko/fix-graph-input-output-tags

More subgraph/template fixes
2023-05-26 18:00:18 -05:00
parent 2e6030beca cdcf566a43
commit 32ed6cb5fd
14 changed files with 5803 additions and 5445 deletions
--- a/2
+++ b/2
--- a/public/workflows/conditioningRegions.json
+++ b/public/workflows/conditioningRegions.json
@@ -3331,17 +3331,17 @@
                    "title": "UI.Text",
                    "properties": {
                      "tags": [],
-                      "defaultValue": "masterpiece, 1girl, (yuri:1.2), city street, cityscape, open shirt, breasts, large breasts, nipples, shiny skin, full body, happy, red hair, red eyes, looking at another, eye contact, red skirt",
+                      "defaultValue": "masterpiece, 1girl, city street, cityscape, large shiny skin, full body, happy, red hair, red eyes, looking at another, eye contact, red skirt",
                      "multiline": true,
                      "lines": 5,
                      "maxLines": 5
                    },
                    "widgets_values": [
-                      "masterpiece, 1girl, (yuri:1.2), city street, cityscape, open shirt, breasts, large breasts, nipples, shiny skin, full body, happy, red hair, red eyes, looking at another, eye contact, red skirt"
+                      "masterpiece, 1girl, city street, cityscape, large shiny skin, full body, happy, red hair, red eyes, looking at another, eye contact, red skirt"
                    ],
                    "color": "#223",
                    "bgColor": "#335",
-                    "comfyValue": "masterpiece, 1girl, (yuri:1.2), city street, cityscape, open shirt, breasts, large breasts, nipples, shiny skin, full body, happy, red hair, red eyes, looking at another, eye contact, red skirt",
+                    "comfyValue": "masterpiece, 1girl, city street, cityscape, large shiny skin, full body, happy, red hair, red eyes, looking at another, eye contact, red skirt",
                    "shownOutputProperties": {},
                    "saveUserState": true
                  },
@@ -3396,17 +3396,17 @@
                    "title": "UI.Text",
                    "properties": {
                      "tags": [],
-                      "defaultValue": "masterpiece, 1girl, (yuri:1.2), open shirt, breasts, medium breasts, nipples, city street, cityscape, full body, happy, blue hair, blue eyes, looking at another, eye contact, blue skirt",
+                      "defaultValue": "masterpiece, 1girl, city street, cityscape, full body, happy, blue hair, blue eyes, looking at another, eye contact, blue skirt",
                      "multiline": true,
                      "lines": 5,
                      "maxLines": 5
                    },
                    "widgets_values": [
-                      "masterpiece, 1girl, (yuri:1.2), open shirt, breasts, medium breasts, nipples, city street, cityscape, full body, happy, blue hair, blue eyes, looking at another, eye contact, blue skirt"
+                      "masterpiece, 1girl, city street, cityscape, full body, happy, blue hair, blue eyes, looking at another, eye contact, blue skirt"
                    ],
                    "color": "#223",
                    "bgColor": "#335",
-                    "comfyValue": "masterpiece, 1girl, (yuri:1.2), open shirt, breasts, medium breasts, nipples, city street, cityscape, full body, happy, blue hair, blue eyes, looking at another, eye contact, blue skirt",
+                    "comfyValue": "masterpiece, 1girl, city street, cityscape, full body, happy, blue hair, blue eyes, looking at another, eye contact, blue skirt",
                    "shownOutputProperties": {},
                    "saveUserState": true
                  },
@@ -3461,17 +3461,17 @@
                    "title": "UI.Text",
                    "properties": {
                      "tags": [],
-                      "defaultValue": "masterpiece, 2girls, (yuri:1.2), open shirt, small breasts, nipples, city street, cityscape, full body, happy, yellow hair, yellow eyes, looking at another, eye contact, yellow skirt",
+                      "defaultValue": "masterpiece, 2girls, small city street, cityscape, full body, happy, yellow hair, yellow eyes, looking at another, eye contact, yellow skirt",
                      "multiline": true,
                      "lines": 5,
                      "maxLines": 5
                    },
                    "widgets_values": [
-                      "masterpiece, 2girls, (yuri:1.2), open shirt, small breasts, nipples, city street, cityscape, full body, happy, yellow hair, yellow eyes, looking at another, eye contact, yellow skirt"
+                      "masterpiece, 2girls, small city street, cityscape, full body, happy, yellow hair, yellow eyes, looking at another, eye contact, yellow skirt"
                    ],
                    "color": "#223",
                    "bgColor": "#335",
-                    "comfyValue": "masterpiece, 2girls, (yuri:1.2), open shirt, small breasts, nipples, city street, cityscape, full body, happy, yellow hair, yellow eyes, looking at another, eye contact, yellow skirt",
+                    "comfyValue": "masterpiece, 2girls, small city street, cityscape, full body, happy, yellow hair, yellow eyes, looking at another, eye contact, yellow skirt",
                    "shownOutputProperties": {},
                    "saveUserState": true
                  },
@@ -3526,17 +3526,17 @@
                    "title": "UI.Text",
                    "properties": {
                      "tags": [],
-                      "defaultValue": "masterpiece, 2girls, (yuri:1.2), open shirt, flat chest, nipples, city street, cityscape, full body, happy, green hair, green eyes, looking at another, eye contact, green skirt",
+                      "defaultValue": "masterpiece, 2girls, city street, cityscape, full body, happy, green hair, green eyes, looking at another, eye contact, green skirt",
                      "multiline": true,
                      "lines": 5,
                      "maxLines": 5
                    },
                    "widgets_values": [
-                      "masterpiece, 2girls, (yuri:1.2), open shirt, flat chest, nipples, city street, cityscape, full body, happy, green hair, green eyes, looking at another, eye contact, green skirt"
+                      "masterpiece, 2girls, city street, cityscape, full body, happy, green hair, green eyes, looking at another, eye contact, green skirt"
                    ],
                    "color": "#223",
                    "bgColor": "#335",
-                    "comfyValue": "masterpiece, 2girls, (yuri:1.2), open shirt, flat chest, nipples, city street, cityscape, full body, happy, green hair, green eyes, looking at another, eye contact, green skirt",
+                    "comfyValue": "masterpiece, 2girls, city street, cityscape, full body, happy, green hair, green eyes, looking at another, eye contact, green skirt",
                    "shownOutputProperties": {},
                    "saveUserState": true
                  },
@@ -4706,17 +4706,17 @@
              "title": "UI.Text",
              "properties": {
                "tags": [],
-                "defaultValue": "nsfw, masterpiece, 4girls, multiple girls, city street, cityscape, landscape, jeans, shoes, shirt, kanpai, happy, red hair, yellow hair, blue hair, green hair, looking at another, eye contact",
+                "defaultValue": "masterpiece, 4girls, multiple girls, city street, cityscape, landscape, jeans, shoes, shirt, kanpai, happy, red hair, yellow hair, blue hair, green hair, looking at another, eye contact",
                "multiline": true,
                "lines": 5,
                "maxLines": 5
              },
              "widgets_values": [
-                "nsfw, masterpiece, 4girls, multiple girls, city street, cityscape, landscape, jeans, shoes, shirt, kanpai, happy, red hair, yellow hair, blue hair, green hair, looking at another, eye contact"
+                "masterpiece, 4girls, multiple girls, city street, cityscape, landscape, jeans, shoes, shirt, kanpai, happy, red hair, yellow hair, blue hair, green hair, looking at another, eye contact"
              ],
              "color": "#223",
              "bgColor": "#335",
-              "comfyValue": "nsfw, masterpiece, 4girls, multiple girls, city street, cityscape, landscape, jeans, shoes, shirt, kanpai, happy, red hair, yellow hair, blue hair, green hair, looking at another, eye contact",
+              "comfyValue": "masterpiece, 4girls, multiple girls, city street, cityscape, landscape, jeans, shoes, shirt, kanpai, happy, red hair, yellow hair, blue hair, green hair, looking at another, eye contact",
              "shownOutputProperties": {},
              "saveUserState": true
            },
--- a/public/workflows/defaultWorkflow.json
+++ b/public/workflows/defaultWorkflow.json
--- a/public/workflows/upscaleByModel.json
+++ b/public/workflows/upscaleByModel.json
@@ -2,7 +2,7 @@
  "comfyBoxWorkflow": true,
  "createdBy": "ComfyBox",
  "version": 1,
-  "commitHash": "574d3170a4e829df366dc12c3aaa049121052d8f\n",
+  "commitHash": "60bd9899150678dbc46df543ac16e1099d58a07f\n",
  "workflow": {
    "last_node_id": 0,
    "last_link_id": 0,
@@ -391,20 +391,7 @@
        "title": "UI.Gallery",
        "properties": {
          "tags": [],
-          "defaultValue": [
-            {
-              "isComfyBoxImageMetadata": true,
-              "comfyUIFile": {
-                "filename": "ComfyUI_04712_.png",
-                "subfolder": "",
-                "type": "output"
-              },
-              "name": "File",
-              "tags": [],
-              "width": 6656,
-              "height": 4096
-            }
-          ],
+          "defaultValue": [],
          "index": 0,
          "updateMode": "replace",
          "autoSelectOnUpdate": true
@@ -412,20 +399,7 @@
        "widgets_values": [],
        "color": "#223",
        "bgColor": "#335",
-        "comfyValue": [
-          {
-            "isComfyBoxImageMetadata": true,
-            "comfyUIFile": {
-              "filename": "ComfyUI_04712_.png",
-              "subfolder": "",
-              "type": "output"
-            },
-            "name": "File",
-            "tags": [],
-            "width": 6656,
-            "height": 4096
-          }
-        ],
+        "comfyValue": [],
        "shownOutputProperties": {},
        "saveUserState": false
      },
@@ -528,39 +502,13 @@
        ],
        "title": "UI.ImageUpload",
        "properties": {
-          "defaultValue": [
-            {
-              "isComfyBoxImageMetadata": true,
-              "comfyUIFile": {
-                "filename": "ComfyUI_05835_.png",
-                "type": "output",
-                "subfolder": ""
-              },
-              "name": "File",
-              "tags": [],
-              "width": 640,
-              "height": 768
-            }
-          ],
+          "defaultValue": [],
          "tags": []
        },
        "widgets_values": [],
        "color": "#223",
        "bgColor": "#335",
-        "comfyValue": [
-          {
-            "isComfyBoxImageMetadata": true,
-            "comfyUIFile": {
-              "filename": "ComfyUI_05835_.png",
-              "type": "output",
-              "subfolder": ""
-            },
-            "name": "File",
-            "tags": [],
-            "width": 640,
-            "height": 768
-          }
-        ],
+        "comfyValue": [],
        "shownOutputProperties": {},
        "saveUserState": false
      },
@@ -684,7 +632,8 @@
  "attrs": {
    "title": "Upscale by Model",
    "queuePromptButtonName": "Queue Prompt",
-    "queuePromptButtonRunWorkflow": true
+    "queuePromptButtonRunWorkflow": true,
+    "showDefaultNotifications": true
  },
  "layout": {
    "root": "46a08906-61a9-4a23-881b-9615cf165e33",
--- a/src/lib/ComfyBoxTemplate.ts
+++ b/src/lib/ComfyBoxTemplate.ts
@@ -285,6 +285,19 @@ function relocateNodes(nodes: SerializedLGraphNode[]): SerializedLGraphNode[] {
    return nodes;
 }

+/*
+ * Strips tags from top-level nodes
+ */
+function stripTags(nodes: SerializedLGraphNode[]): SerializedLGraphNode[] {
+    for (const node of nodes) {
+        if (Array.isArray(node.properties.tags)) {
+            node.properties.tags = []
+        }
+    }
+
+    return nodes;
+}
+
 function pruneDetachedLinks(nodes: SerializedLGraphNode[], links: SerializedTemplateLink[]): [SerializedLGraphNode[], SerializedTemplateLink[]] {
    const nodeIds = new Set(nodes.map(n => n.id));

@@ -338,6 +351,7 @@ export function serializeTemplate(canvas: ComfyGraphCanvas, template: ComfyBoxTe
    uiState.update(s => { s.forceSaveUserState = null; return s; });

    nodes = relocateNodes(nodes);
+    nodes = stripTags(nodes);
    [nodes, links] = pruneDetachedLinks(nodes, links);

    const svg = renderSvg(canvas, graph, TEMPLATE_SVG_PADDING);
--- a/src/lib/ComfyGraph.ts
+++ b/src/lib/ComfyGraph.ts
@@ -249,6 +249,11 @@ export default class ComfyGraph extends LGraph {
                node_data.id = uuidv4();
                templateNodeIDToNewNode[prevNodeId] = node

+                // Strip tags from top-level nodes
+                if (Array.isArray(node_data.properties.tags)) {
+                    node_data.properties.tags = []
+                }
+
                node.configure(node_data);

                if (mapping) {
--- a/src/lib/components/ComfyApp.ts
+++ b/src/lib/components/ComfyApp.ts
@@ -29,7 +29,7 @@ import queueState from "$lib/stores/queueState";
 import selectionState from "$lib/stores/selectionState";
 import uiState from "$lib/stores/uiState";
 import workflowState, { ComfyBoxWorkflow, type WorkflowAttributes, type WorkflowInstID } from "$lib/stores/workflowState";
-import { readFileToText, type SerializedPromptOutput } from "$lib/utils";
+import { playSound, readFileToText, type SerializedPromptOutput } from "$lib/utils";
 import { basename, capitalize, download, graphToGraphVis, jsonToJsObject, promptToGraphVis, range } from "$lib/utils";
 import { tick } from "svelte";
 import { type SvelteComponentDev } from "svelte/internal";
@@ -891,7 +891,7 @@ export default class ComfyApp {
        if (workflow.attrs.queuePromptButtonRunWorkflow) {
            // Hold control to queue at the front
            const num = this.ctrlDown ? -1 : 0;
-            this.queuePrompt(num, 1);
+            this.queuePrompt(workflow, num, 1);
        }
    }

@@ -941,14 +941,8 @@ export default class ComfyApp {
        return this.promptSerializer.serialize(workflow.graph, tag)
    }

-    async queuePrompt(num: number, batchCount: number = 1, tag: string | null = null) {
-        const activeWorkflow = workflowState.getActiveWorkflow();
-        if (activeWorkflow == null) {
-            notify("No workflow is opened!", { type: "error" })
-            return;
-        }
-
-        this.queueItems.push({ num, batchCount, workflow: activeWorkflow });
+    async queuePrompt(targetWorkflow: ComfyBoxWorkflow, num: number, batchCount: number = 1, tag: string | null = null) {
+        this.queueItems.push({ num, batchCount, workflow: targetWorkflow });

        // Only have one action process the items so each one gets a unique seed correctly
        if (this.processingQueue) {
@@ -958,6 +952,10 @@ export default class ComfyApp {
        if (tag === "")
            tag = null;

+        if (targetWorkflow.attrs.showDefaultNotifications) {
+            notify("Prompt queued.", { type: "info" });
+        }
+
        this.processingQueue = true;
        let workflow: ComfyBoxWorkflow;

--- a/src/lib/components/ComfyQueue.svelte
+++ b/src/lib/components/ComfyQueue.svelte
@@ -144,8 +144,9 @@
     if (entry.extraData?.workflowTitle != null) {
         message = `${entry.extraData.workflowTitle}`
     }
-     if (subgraphs?.length > 0)
-         message += ` (${subgraphs.join(', ')})`
+     const subgraphsString = subgraphs.join(', ')
+     if (subgraphsString.length > 0)
+         message += ` (${subgraphsString})`

     let submessage = `Nodes: ${Object.keys(entry.prompt).length}`

--- a/src/lib/nodes/actions/ComfyExecuteSubgraphAction.ts
+++ b/src/lib/nodes/actions/ComfyExecuteSubgraphAction.ts
@@ -47,7 +47,7 @@ export default class ComfyExecuteSubgraphAction extends ComfyGraphNode {

        // Hold control to queue at the front
        const num = app.ctrlDown ? -1 : 0;
-        app.queuePrompt(num, 1, tag);
+        app.queuePrompt(this.workflow, num, 1, tag);
    }
 }

--- a/src/lib/nodes/actions/ComfyPlaySoundAction.ts
+++ b/src/lib/nodes/actions/ComfyPlaySoundAction.ts
@@ -1,5 +1,6 @@
 import { BuiltInSlotType, LiteGraph, type SlotLayout } from "@litegraph-ts/core";
 import ComfyGraphNode, { type ComfyGraphNodeProperties } from "../ComfyGraphNode";
+import { playSound } from "$lib/utils";

 export interface ComfyPlaySoundActionProperties extends ComfyGraphNodeProperties {
    sound: string,
@@ -21,9 +22,7 @@ export default class ComfyPlaySoundAction extends ComfyGraphNode {
    override onAction(action: any, param: any) {
        const sound = this.getInputData(0) || this.properties.sound;
        if (sound) {
-            const url = `${location.origin}/sound/${sound}`;
-            const audio = new Audio(url);
-            audio.play();
+            playSound(sound)
        }
    };
 }
--- a/src/lib/stores/layoutStates.ts
+++ b/src/lib/stores/layoutStates.ts
@@ -667,6 +667,13 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                location: "workflow",
                editable: true,
                defaultValue: true
+            },
+            {
+                name: "showDefaultNotifications",
+                type: "boolean",
+                location: "workflow",
+                editable: true,
+                defaultValue: true
            }
        ]
    }
--- a/src/lib/stores/queueState.ts
+++ b/src/lib/stores/queueState.ts
@@ -3,6 +3,8 @@ import type { Progress, SerializedPromptInputsAll, SerializedPromptOutputs, Work
 import type { ComfyExecutionResult } from "$lib/nodes/ComfyWidgetNodes";
 import notify from "$lib/notify";
 import { get, writable, type Writable } from "svelte/store";
+import workflowState from "./workflowState";
+import { playSound } from "$lib/utils";

 export type QueueEntryStatus = "success" | "error" | "interrupted" | "all_cached" | "unknown";

@@ -267,6 +269,11 @@ function executingUpdated(promptID: PromptID, runningNodeID: ComfyNodeID | null)
                    moveToCompleted(index, queue, "all_cached", "(Execution was cached)");
                }
                else if (entry.nodesRan.size >= totalNodesInPrompt) {
+                    const workflow = workflowState.getWorkflow(entry.extraData.workflowID);
+                    if (workflow?.attrs.showDefaultNotifications) {
+                        notify("Prompt finished!", { type: "success" });
+                        playSound("notification.mp3")
+                    }
                    moveToCompleted(index, queue, "success")
                }
                else {
--- a/src/lib/stores/workflowState.ts
+++ b/src/lib/stores/workflowState.ts
@@ -54,6 +54,13 @@ export type WorkflowAttributes = {
     * Comfy.QueueEvents node.
     */
    queuePromptButtonRunWorkflow: boolean,
+
+    /*
+     * If true, notifications will be shown when a prompt is queued and
+     * completed. Set to false if you need more detailed control over the
+     * notification type/contents, and use the `ComfyNotifyAction` node instead.
+     */
+    showDefaultNotifications: boolean,
 }

 export class ComfyBoxWorkflow {
@@ -217,7 +224,7 @@ export class ComfyBoxWorkflow {
            // this.#invokeExtensions("loadedGraphNode", node);
        }

-        this.attrs = data.attrs;
+        this.attrs = { ...defaultWorkflowAttributes, ...data.attrs };

        // Now restore the layout
        // Subsequent added nodes will add the UI data to layoutState
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -622,3 +622,9 @@ export function nextLetter(s: string): string {
        }
    });
 }
+
+export function playSound(sound: string) {
+    const url = `${location.origin}/sound/${sound}`;
+    const audio = new Audio(url);
+    audio.play();
+}