Default notifications for workflows

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;
 

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

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