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

More subgraph/template fixes

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
             },
@@ -10027,4 +10027,4 @@
     ],
     "scale": 1
   }
-}
+}

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": [
+          "defaultValue": [],
-            {
-              "isComfyBoxImageMetadata": true,
-              "comfyUIFile": {
-                "filename": "ComfyUI_04712_.png",
-                "subfolder": "",
-                "type": "output"
-              },
-              "name": "File",
-              "tags": [],
-              "width": 6656,
-              "height": 4096
-            }
-          ],
           "index": 0,
           "updateMode": "replace",
           "autoSelectOnUpdate": true
@@ -412,20 +399,7 @@
         "widgets_values": [],
         "color": "#223",
         "bgColor": "#335",
-        "comfyValue": [
+        "comfyValue": [],
-          {
-            "isComfyBoxImageMetadata": true,
-            "comfyUIFile": {
-              "filename": "ComfyUI_04712_.png",
-              "subfolder": "",
-              "type": "output"
-            },
-            "name": "File",
-            "tags": [],
-            "width": 6656,
-            "height": 4096
-          }
-        ],
         "shownOutputProperties": {},
         "saveUserState": false
       },
@@ -528,39 +502,13 @@
         ],
         "title": "UI.ImageUpload",
         "properties": {
-          "defaultValue": [
+          "defaultValue": [],
-            {
-              "isComfyBoxImageMetadata": true,
-              "comfyUIFile": {
-                "filename": "ComfyUI_05835_.png",
-                "type": "output",
-                "subfolder": ""
-              },
-              "name": "File",
-              "tags": [],
-              "width": 640,
-              "height": 768
-            }
-          ],
           "tags": []
         },
         "widgets_values": [],
         "color": "#223",
         "bgColor": "#335",
-        "comfyValue": [
+        "comfyValue": [],
-          {
-            "isComfyBoxImageMetadata": true,
-            "comfyUIFile": {
-              "filename": "ComfyUI_05835_.png",
-              "type": "output",
-              "subfolder": ""
-            },
-            "name": "File",
-            "tags": [],
-            "width": 640,
-            "height": 768
-          }
-        ],
         "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",
@@ -930,4 +879,4 @@
     ],
     "scale": 1
   }
-}
+}

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);

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) {

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

src/lib/components/ComfyQueue.svelte

@@ -144,8 +144,9 @@
      if (entry.extraData?.workflowTitle != null) {
          message = `${entry.extraData.workflowTitle}`
      }
-     if (subgraphs?.length > 0)
+     const subgraphsString = subgraphs.join(', ')
-         message += ` (${subgraphs.join(', ')})`
+     if (subgraphsString.length > 0)
+         message += ` (${subgraphsString})`
 
      let submessage = `Nodes: ${Object.keys(entry.prompt).length}`
 

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);
     }
 }
 

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}`;
+            playSound(sound)
-            const audio = new Audio(url);
-            audio.play();
         }
     };
 }

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
             }
         ]
     }

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 {

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

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();
+}