Apt update in cont

`vibrateIfPossible`: fixes iOS safari uncaught exceptions & etc

.woodpecker.yml

@@ -0,0 +1,11 @@
+steps:
+  - name: Prepare
+    image: node:18-slim
+    commands:
+      - apt-get update -y
+      - apt-get install -yy git
+      - corepack enable
+      - corepack prepare pnpm@latest --activate
+      - pnpm install --frozen-lockfile
+      - pnpm prebuild
+      - pnpm build

README.md

@@ -37,11 +37,14 @@ Also note that the saved workflow format is subject to change until it's been fi
 
 ### Requirements
 
+- `git`
 - `pnpm`
 - An installation of vanilla [ComfyUI](https://github.com/comfyanonymous/ComfyUI) for the backend
 
 ### Installation
 
+**NOTE:** If you're using Windows, the following commands must be run with [Git Bash](https://git-scm.com/downloads).
+
 1. Clone the repo with submodules:
 
 ```

bin/serve.py

@@ -2,15 +2,19 @@
 
 import http.server
 import socketserver
+import argparse
 
-PORT = 8000
+parser = argparse.ArgumentParser()
+parser.add_argument("-l", "--listen", type=str, default="localhost", help="Listen address for ComfyBox server")
+parser.add_argument("-p", "--port", type=int, default=8000, help="Port for ComfyBox server")
+args = parser.parse_args()
 
 message = f"""Starting ComfyBox.
 Be sure you've started ComfyUI already using this command:
 
      python main.py --enable-cors-header
 
-Serving at http://localhost:{PORT}...
+Serving at http://{args.listen}:{args.port}...
 """
 
 # python -m http.server will sometimes send incorrect MIME types.
@@ -19,33 +23,34 @@ Serving at http://localhost:{PORT}...
 # Hopefully this will cover everything.
 class HttpRequestHandler(http.server.SimpleHTTPRequestHandler):
     extensions_map = {
-        '': 'application/octet-stream',
-        '.manifest': 'text/cache-manifest',
-        '.html': 'text/html',
-        '.png': 'image/png',
-        '.jpg': 'image/jpg',
-        '.jpeg': 'image/jpeg',
-        '.gif': 'image/gif',
-        '.svg': 'image/svg+xml',
-        '.css': 'text/css',
-        '.js': 'application/x-javascript',
-        '.mjs': 'application/x-javascript',
-        '.cjs': 'application/x-javascript',
-        '.wasm': 'application/wasm',
-        '.json': 'application/json',
-        '.xml': 'application/xml',
-        '.xml': 'application/xml',
-        '.pdf': 'application/pdf',
-        '.webp': 'image/webp',
-        '.avif': 'image/avif',
-        '.heic': 'image/heic',
-        '.heif': 'image/heif',
-        '.mp3': 'audio/mpeg',
-        '.mp4': 'video/mp4',
-        '.m4v': 'video/mp4'
+        "": "application/octet-stream",
+        ".manifest": "text/cache-manifest",
+        ".html": "text/html",
+        ".png": "image/png",
+        ".jpg": "image/jpg",
+        ".jpeg": "image/jpeg",
+        ".gif": "image/gif",
+        ".svg": "image/svg+xml",
+        ".css": "text/css",
+        ".js": "application/x-javascript",
+        ".mjs": "application/x-javascript",
+        ".cjs": "application/x-javascript",
+        ".wasm": "application/wasm",
+        ".json": "application/json",
+        ".xml": "application/xml",
+        ".xml": "application/xml",
+        ".pdf": "application/pdf",
+        ".webp": "image/webp",
+        ".avif": "image/avif",
+        ".heic": "image/heic",
+        ".heif": "image/heif",
+        ".mp3": "audio/mpeg",
+        ".mp4": "video/mp4",
+        ".m4v": "video/mp4",
     }
 
-httpd = socketserver.TCPServer(("localhost", PORT), HttpRequestHandler)
+
+httpd = socketserver.TCPServer((args.listen, args.port), HttpRequestHandler)
 
 try:
     print(message)

package.json

@@ -18,40 +18,38 @@
     "build:css": "pollen -c gradio/js/theme/src/pollen.config.cjs && mv src/pollen.css node_modules/@gradio/theme/src"
   },
   "devDependencies": {
-    "@floating-ui/core": "^1.2.6",
-    "@floating-ui/dom": "^1.2.8",
-    "@types/cytoscape": "^3.19.9",
-    "@types/dompurify": "^3.0.2",
+    "@floating-ui/core": "^1.3.1",
+    "@floating-ui/dom": "^1.4.2",
     "@zerodevx/svelte-toast": "^0.9.3",
-    "eslint": "^8.37.0",
+    "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-svelte3": "^4.0.0",
-    "happy-dom": "^9.18.3",
-    "jsdom": "^22.0.0",
-    "prettier": "^2.8.7",
-    "prettier-plugin-svelte": "^2.10.0",
-    "rollup-plugin-visualizer": "^5.9.0",
-    "sass": "^1.61.0",
-    "svelte": "^3.59.0",
-    "svelte-check": "^3.2.0",
+    "happy-dom": "^9.20.3",
+    "jsdom": "^22.1.0",
+    "prettier": "^2.8.8",
+    "prettier-plugin-svelte": "^2.10.1",
+    "rollup-plugin-visualizer": "^5.9.2",
+    "sass": "^1.63.6",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.4",
     "svelte-dnd-action": "^0.9.22",
-    "typescript": "^5.0.3",
-    "vite": "^4.3.8",
+    "typescript": "^5.1.3",
+    "vite": "^4.3.9",
     "vite-plugin-glsl": "^1.1.2",
     "vite-plugin-static-copy": "^0.14.0",
     "vite-plugin-svelte-console-remover": "^1.0.10",
-    "vite-tsconfig-paths": "^4.0.8",
+    "vite-tsconfig-paths": "^4.2.0",
     "vitest": "^0.27.3"
   },
   "type": "module",
   "dependencies": {
-    "@codemirror/autocomplete": "^6.3.0",
-    "@codemirror/commands": "^6.1.2",
-    "@codemirror/language": "^6.6.0",
-    "@codemirror/lint": "^6.0.0",
-    "@codemirror/search": "^6.2.2",
-    "@codemirror/state": "^6.1.2",
-    "@codemirror/view": "^6.4.1",
+    "@codemirror/autocomplete": "^6.8.0",
+    "@codemirror/commands": "^6.2.4",
+    "@codemirror/language": "^6.8.0",
+    "@codemirror/lint": "^6.2.2",
+    "@codemirror/search": "^6.5.0",
+    "@codemirror/state": "^6.2.1",
+    "@codemirror/view": "^6.13.2",
     "@dogagenc/svelte-markdown": "^0.2.4",
     "@gradio/accordion": "workspace:*",
     "@gradio/atoms": "workspace:*",
@@ -67,6 +65,9 @@
     "@gradio/theme": "workspace:*",
     "@gradio/upload": "workspace:*",
     "@gradio/utils": "workspace:*",
+    "@lezer/generator": "^1.3.0",
+    "@lezer/highlight": "^1.1.6",
+    "@lezer/lr": "^1.3.7",
     "@litegraph-ts/core": "workspace:*",
     "@litegraph-ts/nodes-basic": "workspace:*",
     "@litegraph-ts/nodes-events": "workspace:*",
@@ -74,34 +75,32 @@
     "@litegraph-ts/nodes-math": "workspace:*",
     "@litegraph-ts/nodes-strings": "workspace:*",
     "@litegraph-ts/tsconfig": "workspace:*",
-    "@sveltejs/vite-plugin-svelte": "^2.1.1",
+    "@sveltejs/vite-plugin-svelte": "^2.4.2",
     "@tsconfig/svelte": "^4.0.1",
+    "@types/dompurify": "^3.0.2",
     "canvas-to-svg": "^1.0.3",
     "cm6-theme-basic-dark": "^0.2.0",
     "cm6-theme-basic-light": "^0.2.0",
     "codemirror": "^6.0.1",
-    "csv": "^6.3.0",
-    "csv-parse": "^5.3.10",
-    "cytoscape": "^3.25.0",
-    "cytoscape-dagre": "^2.5.0",
-    "deep-equal": "^2.2.1",
+    "csv": "^6.3.1",
+    "csv-parse": "^5.4.0",
     "dompurify": "^3.0.3",
     "events": "^3.3.0",
-    "framework7": "^8.0.3",
-    "framework7-svelte": "^8.0.3",
+    "framework7": "^8.1.0",
+    "framework7-svelte": "^8.1.0",
     "img-comparison-slider": "^8.0.0",
-    "marked": "^5.0.3",
+    "marked": "^5.1.0",
     "pollen-css": "^4.6.2",
     "radix-icons-svelte": "^1.2.1",
     "style-mod": "^4.0.3",
     "svelte-bootstrap-icons": "^2.3.1",
-    "svelte-feather-icons": "^4.0.0",
-    "svelte-floating-ui": "^1.5.2",
-    "svelte-preprocess": "^5.0.3",
-    "svelte-select": "^5.5.3",
-    "svelte-splitpanes": "^0.7.13",
+    "svelte-feather-icons": "^4.0.1",
+    "svelte-floating-ui": "^1.5.3",
+    "svelte-preprocess": "^5.0.4",
+    "svelte-select": "^5.6.1",
+    "svelte-splitpanes": "^0.7.15",
     "svelte-tiny-virtual-list": "^2.0.5",
-    "tailwindcss": "^3.3.1",
+    "tailwindcss": "^3.3.2",
     "typed-emitter": "github:andywer/typed-emitter",
     "uuid": "^9.0.0",
     "vite-plugin-full-reload": "^1.0.5",

public/workflows/defaultWorkflow.json

@@ -61,7 +61,7 @@
         ],
         "title": "UI.Gallery",
         "properties": {
-          "tags": [],
+          "tags": ["gen"],
           "defaultValue": [],
           "index": 3,
           "updateMode": "append",
@@ -1694,7 +1694,7 @@
         ],
         "title": "UI.Gallery",
         "properties": {
-          "tags": [],
+          "tags": ["hr"],
           "defaultValue": [],
           "index": 1,
           "updateMode": "append",

src/lib/ComfyBoxStdPrompt.ts

@@ -224,13 +224,13 @@ const Metadata = z.object({
     extra_data: ExtraData
 })
 
-const StdPrompt = z.object({
+const ComfyBoxStdPrompt = z.object({
     version: z.number(),
     metadata: Metadata,
     parameters: Parameters
 })
 
-export default StdPrompt
+export default ComfyBoxStdPrompt
 
 /*
  * A standardized Stable Diffusion parameter format that should be used with an
@@ -260,4 +260,4 @@ export default StdPrompt
  * "see" width 1024 and height 1024, even though the only parameter exposed from
  * the frontend was the scale of 2.)
  */
-export type ComfyBoxStdPrompt = z.infer<typeof StdPrompt>
+export type ComfyBoxStdPrompt = z.infer<typeof ComfyBoxStdPrompt>

src/lib/ComfyBoxStdPromptSerializer.ts

@@ -1,88 +1,31 @@
 import type { ComfyBoxStdGroupLoRA, ComfyBoxStdPrompt } from "$lib/ComfyBoxStdPrompt";
-import StdPrompt from "$lib/ComfyBoxStdPrompt";
-import type { SafeParseReturnType, ZodError } from "zod";
-import type { ComfyNodeID } from "./api";
-import type { SerializedAppState, SerializedPrompt, SerializedPromptInputs, SerializedPromptInputsAll } from "./components/ComfyApp";
-import { ComfyComboNode, type ComfyWidgetNode } from "./nodes/widgets";
-import { basename, isSerializedPromptInputLink } from "./utils";
+import type { SerializedPrompt, SerializedPromptInputs } from "./components/ComfyApp";
 
-export type ComfyPromptConverter = {
-    encoder: ComfyPromptEncoder,
-    decoder: ComfyPromptDecoder
-}
+export type ComfyPromptConverter = (stdPrompt: ComfyBoxStdPrompt, inputs: SerializedPromptInputs, nodeID: ComfyNodeID) => void;
 
-//
-export type ComfyDecodeArgument = {
-    groupName: string,
-    keyName: string,
-    value: any,
-    widgetNode: ComfyWidgetNode
-};
+function LoraLoader(stdPrompt: ComfyBoxStdPrompt, inputs: SerializedPromptInputs) {
+    const params = stdPrompt.parameters
 
-export type ComfyPromptEncoder = (stdPrompt: ComfyBoxStdPrompt, inputs: SerializedPromptInputs, nodeID: ComfyNodeID) => void;
-export type ComfyPromptDecoder = (args: ComfyDecodeArgument[]) => void;
-
-const LoraLoader: ComfyPromptConverter = {
-    encoder: (stdPrompt: ComfyBoxStdPrompt, inputs: SerializedPromptInputs) => {
-        const params = stdPrompt.parameters
-        const loras: ComfyBoxStdGroupLoRA[] = params.lora
-
-        for (const lora of loras) {
-            lora.model_hashes = {
-                addnet_shorthash: null // TODO find hashes for model!
-            }
-        }
-    },
-    decoder: (args: ComfyDecodeArgument[]) => {
-        // Find corresponding model names in the ComfyUI models folder from the model base filename
-        for (const arg of args) {
-            if (arg.groupName === "lora" && arg.keyName === "model_name" && arg.widgetNode.is(ComfyComboNode)) {
-                const modelBasename = basename(arg.value);
-                const found = arg.widgetNode.properties.values.find(k => k.indexOf(modelBasename) !== -1)
-                if (found)
-                    arg.value = found;
-            }
-        }
+    const lora: ComfyBoxStdGroupLoRA = {
+        model_name: inputs["lora_name"],
+        strength_unet: inputs["strength_model"],
+        strength_tenc: inputs["strength_clip"]
     }
+
+    if (params.lora)
+        params.lora.push(lora)
+    else
+        params.lora = [lora]
 }
 
-// input name -> group/key in standard prompt
-type ComfyStdPromptMapping = Record<string, string>
-
-type ComfyStdPromptSpec = {
-    paramMapping: ComfyStdPromptMapping,
-    extraParams?: Record<string, string>,
-    converter?: ComfyPromptConverter,
-}
-
-const ALL_SPECS: Record<string, ComfyStdPromptSpec> = {
-    "KSampler": {
-        paramMapping: {
-            cfg: "k_sampler.cfg_scale",
-            seed: "k_sampler.seed",
-            steps: "k_sampler.steps",
-            sampler_name: "k_sampler.sampler_name",
-            scheduler: "k_sampler.scheduler",
-            denoise: "k_sampler.denoise",
-        },
-    },
-    "LoraLoader": {
-        paramMapping: {
-            lora_name: "lora.model_name",
-            strength_model: "lora.strength_unet",
-            strength_clip: "lora.strength_tenc",
-        },
-        extraParams: {
-            "lora.module_name": "LoRA",
-        },
-        converter: LoraLoader,
-    }
+const ALL_CONVERTERS: Record<string, ComfyPromptConverter> = {
+    LoraLoader
 }
 
 const COMMIT_HASH: string = __GIT_COMMIT_HASH__;
 
 export default class ComfyBoxStdPromptSerializer {
-    serialize(prompt: SerializedPromptInputsAll, workflow?: SerializedAppState): [SafeParseReturnType<any, ComfyBoxStdPrompt>, any] {
+    serialize(prompt: SerializedPrompt): ComfyBoxStdPrompt {
         const stdPrompt: ComfyBoxStdPrompt = {
             version: 1,
             metadata: {
@@ -90,57 +33,23 @@ export default class ComfyBoxStdPromptSerializer {
                 commit_hash: COMMIT_HASH,
                 extra_data: {
                     comfybox: {
-                        workflows: [] // TODO!!!
                     }
                 }
             },
             parameters: {}
         }
 
-        for (const [nodeID, inputs] of Object.entries(prompt)) {
+        for (const [nodeID, inputs] of Object.entries(prompt.output)) {
             const classType = inputs.class_type
-            const spec = ALL_SPECS[classType]
-            if (spec) {
-                console.warn("SPEC", spec, inputs)
-                let targets = {}
-                for (const [comfyKey, stdPromptKey] of Object.entries(spec.paramMapping)) {
-                    const inputValue = inputs.inputs[comfyKey];
-                    if (inputValue != null && !isSerializedPromptInputLink(inputValue)) {
-                        console.warn("GET", comfyKey, inputValue)
-                        const trail = stdPromptKey.split(".");
-                        let target = null;
-
-                        console.warn(trail, trail.length - 2);
-                        for (let index = 0; index < trail.length - 1; index++) {
-                            const name = trail[index];
-                            if (index === 0) {
-                                targets[name] ||= {}
-                                target = targets[name]
-                            }
-                            else {
-                                target = target[name]
-                            }
-                            console.warn(index, name, target)
-                        }
-
-                        let name = trail[trail.length - 1]
-                        target[name] = inputValue
-                        console.warn(stdPrompt.parameters)
-                    }
-                }
-
-                // TODO converter.encode
-
-                for (const [groupName, group] of Object.entries(targets)) {
-                    stdPrompt.parameters[groupName] ||= []
-                    stdPrompt.parameters[groupName].push(group)
-                }
+            const converter = ALL_CONVERTERS[classType]
+            if (converter) {
+                converter(stdPrompt, inputs.inputs, nodeID)
             }
             else {
-                console.warn("No StdPrompt type spec for comfy class!", classType)
+                console.warn("No StdPrompt type converter for comfy class!", classType)
             }
         }
 
-        return [StdPrompt.safeParse(stdPrompt), stdPrompt];
+        return stdPrompt
     }
 }

src/lib/api.ts

@@ -101,6 +101,7 @@ export type ComfyUIPromptExtraData = {
 }
 
 type ComfyAPIEvents = {
+    // JSON
     status: (status: ComfyAPIStatusResponse | null, error?: Error | null) => void,
     progress: (progress: Progress) => void,
     reconnecting: () => void,
@@ -111,6 +112,9 @@ type ComfyAPIEvents = {
     execution_cached: (promptID: PromptID, nodes: ComfyNodeID[]) => void,
     execution_interrupted: (error: ComfyInterruptedError) => void,
     execution_error: (error: ComfyExecutionError) => void,
+
+    // Binary
+    b_preview: (imageBlob: Blob) => void
 }
 
 export default class ComfyAPI {
@@ -126,7 +130,7 @@ export default class ComfyAPI {
     }
 
     /**
-     * Poll status  for colab and other things that don't support websockets.
+     * Poll status for colab and other things that don't support websockets.
      */
     private pollQueue() {
         setInterval(async () => {
@@ -176,6 +180,7 @@ export default class ComfyAPI {
         this.socket = new WebSocket(
             `ws${window.location.protocol === "https:" ? "s" : ""}://${hostname}:${port}/ws${existingSession}`
         );
+        this.socket.binaryType = "arraybuffer";
 
         this.socket.addEventListener("open", () => {
             opened = true;
@@ -204,38 +209,64 @@ export default class ComfyAPI {
 
         this.socket.addEventListener("message", (event) => {
             try {
-                const msg = JSON.parse(event.data);
-                switch (msg.type) {
-                    case "status":
-                        if (msg.data.sid) {
-                            this.clientId = msg.data.sid;
-                            sessionStorage["Comfy.SessionId"] = this.clientId;
-                        }
-                        this.eventBus.emit("status", { execInfo: { queueRemaining: msg.data.status.exec_info.queue_remaining } });
-                        break;
-                    case "progress":
-                        this.eventBus.emit("progress", msg.data as Progress);
-                        break;
-                    case "executing":
-                        this.eventBus.emit("executing", msg.data.prompt_id, msg.data.node);
-                        break;
-                    case "executed":
-                        this.eventBus.emit("executed", msg.data.prompt_id, msg.data.node, msg.data.output);
-                        break;
-                    case "execution_start":
-                        this.eventBus.emit("execution_start", msg.data.prompt_id);
-                        break;
-                    case "execution_cached":
-                        this.eventBus.emit("execution_cached", msg.data.prompt_id, msg.data.nodes);
-                        break;
-                    case "execution_interrupted":
-                        this.eventBus.emit("execution_interrupted", msg.data);
-                        break;
-                    case "execution_error":
-                        this.eventBus.emit("execution_error", msg.data);
-                        break;
-                    default:
-                        console.warn("Unhandled message:", event.data);
+                if (event.data instanceof ArrayBuffer) {
+                    const view = new DataView(event.data);
+                    const eventType = view.getUint32(0);
+                    const buffer = event.data.slice(4);
+                    switch (eventType) {
+                        case 1:
+                            const view2 = new DataView(event.data);
+                            const imageType = view2.getUint32(0)
+                            let imageMime: string
+                            switch (imageType) {
+                                case 1:
+                                default:
+                                    imageMime = "image/jpeg";
+                                    break;
+                                case 2:
+                                    imageMime = "image/png"
+                            }
+                            const imageBlob = new Blob([buffer.slice(4)], { type: imageMime });
+                            this.eventBus.emit("b_preview", imageBlob);
+                            break;
+                        default:
+                            throw new Error(`Unknown binary websocket message of type ${eventType}`);
+                    }
+                }
+                else {
+                    const msg = JSON.parse(event.data);
+                    switch (msg.type) {
+                        case "status":
+                            if (msg.data.sid) {
+                                this.clientId = msg.data.sid;
+                                sessionStorage["Comfy.SessionId"] = this.clientId;
+                            }
+                            this.eventBus.emit("status", { execInfo: { queueRemaining: msg.data.status.exec_info.queue_remaining } });
+                            break;
+                        case "progress":
+                            this.eventBus.emit("progress", msg.data as Progress);
+                            break;
+                        case "executing":
+                            this.eventBus.emit("executing", msg.data.prompt_id, msg.data.node);
+                            break;
+                        case "executed":
+                            this.eventBus.emit("executed", msg.data.prompt_id, msg.data.node, msg.data.output);
+                            break;
+                        case "execution_start":
+                            this.eventBus.emit("execution_start", msg.data.prompt_id);
+                            break;
+                        case "execution_cached":
+                            this.eventBus.emit("execution_cached", msg.data.prompt_id, msg.data.nodes);
+                            break;
+                        case "execution_interrupted":
+                            this.eventBus.emit("execution_interrupted", msg.data);
+                            break;
+                        case "execution_error":
+                            this.eventBus.emit("execution_error", msg.data);
+                            break;
+                        default:
+                            console.warn("Unhandled message:", event.data);
+                    }
                 }
             } catch (error) {
                 console.error("Error handling message", event.data, error);

src/lib/components/AccordionContainer.svelte

@@ -12,7 +12,7 @@
  import {cubicIn} from 'svelte/easing';
  import { flip } from 'svelte/animate';
  import { type ContainerLayout, type WidgetLayout, type IDragItem } from "$lib/stores/layoutStates";
- import { startDrag, stopDrag } from "$lib/utils"
+ import { startDrag, stopDrag, vibrateIfPossible } from "$lib/utils"
  import { writable, type Writable } from "svelte/store";
  import { isHidden } from "$lib/widgets/utils";
 	import { handleContainerConsider, handleContainerFinalize } from "./utils";
@@ -56,7 +56,7 @@
  };
 
  function handleClick(e: CustomEvent<boolean>) {
-     navigator.vibrate(20)
+     vibrateIfPossible(20)
      $isOpen = e.detail
  }
 
@@ -104,7 +104,7 @@
                             >
                                 <WidgetContainer {layoutState} dragItem={item} zIndex={zIndex+1} {isMobile} />
                                 {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-                                    <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
+                                    <div in:fade|global={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
                                 {/if}
                             </div>
                         {/each}

src/lib/components/BlockContainer.svelte

@@ -102,7 +102,7 @@
                     >
                         <WidgetContainer {layoutState} dragItem={item} zIndex={zIndex+1} {isMobile} />
                         {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-                            <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
+                            <div in:fade|global={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
                         {/if}
                     </div>
                 {/each}

src/lib/components/ComfyApp.ts

@@ -40,7 +40,6 @@ import { deserializeTemplateFromSVG, type SerializedComfyBoxTemplate } from "$li
 import templateState from "$lib/stores/templateState";
 import { formatValidationError, type ComfyAPIPromptErrorResponse, formatExecutionError, type ComfyExecutionError } from "$lib/apiErrors";
 import systemState from "$lib/stores/systemState";
-import type { JourneyNode } from "$lib/stores/journeyStates";
 
 export const COMFYBOX_SERIAL_VERSION = 1;
 
@@ -611,8 +610,6 @@ export default class ComfyApp {
                     if (node?.onExecuted) {
                         node.onExecuted(output);
                     }
-                    workflow.journey.onExecuted(promptID, nodeID, output, queueEntry);
-                    workflow.journey.set(get(workflow.journey))
                 }
             }
         });
@@ -654,6 +651,10 @@ export default class ComfyApp {
             }
         });
 
+        this.api.addEventListener("b_preview", (imageBlob: Blob) => {
+            queueState.previewUpdated(imageBlob);
+        });
+
         const config = get(configState);
 
         if (config.pollSystemStatsInterval > 0) {
@@ -1031,18 +1032,6 @@ export default class ComfyApp {
             notify("Prompt queued.", { type: "info", showOn: "web" });
         }
 
-        let journeyNode: JourneyNode | null;
-
-        if (get(uiState).saveHistory) {
-            const activeNode = targetWorkflow.journey.getActiveNode();
-            journeyNode = targetWorkflow.journey.pushPatchOntoActive(targetWorkflow, activeNode);
-
-            // if no patch was applied, use currently selected node for prompt image
-            // output purposes
-            if (journeyNode == null)
-                journeyNode = activeNode;
-        }
-
         this.processingQueue = true;
         let workflow: ComfyBoxWorkflow;
 
@@ -1079,6 +1068,9 @@ export default class ComfyApp {
                     // console.debug(graphToGraphVis(workflow.graph))
                     // console.debug(promptToGraphVis(p))
 
+                    const stdPrompt = this.stdPromptSerializer.serialize(p);
+                    // console.warn("STD", stdPrompt);
+
                     const extraData: ComfyBoxPromptExtraData = {
                         extra_pnginfo: {
                             comfyBoxWorkflow: wf,
@@ -1112,9 +1104,6 @@ export default class ComfyApp {
                         else {
                             queueState.afterQueued(workflow.id, response.promptID, response.number, p.output, extraData)
                             workflowState.afterQueued(workflow.id, response.promptID)
-                            if (journeyNode != null) {
-                                targetWorkflow.journey.afterQueued(journeyNode, response.promptID);
-                            }
                         }
                     } catch (err) {
                         errorMes = err?.toString();

src/lib/components/ComfyBoxWorkflowsView.svelte

@@ -336,7 +336,7 @@
                         ✕
                     </button>
                     {#if workflow[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-                        <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
+                        <div in:fade|global={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
                     {/if}
                 </button>
             {/each}
@@ -386,6 +386,9 @@
                 <span style="display: inline-flex !important; padding: 0 0.75rem;">
                     <Checkbox label="Auto-Add UI" bind:value={$uiState.autoAddUI}/>
                 </span>
+                <span style="display: inline-flex !important; padding: 0 0.75rem;">
+                    <Checkbox label="Hide Previews" bind:value={$uiState.hidePreviews}/>
+                </span>
                 <!-- <span class="label" for="ui-edit-mode">
                      <BlockTitle>UI Edit mode</BlockTitle>
                      <select id="ui-edit-mode" name="ui-edit-mode" bind:value={$uiState.uiEditMode}>

src/lib/components/ComfyJourneyView.svelte

@@ -1,228 +0,0 @@
-<!--
-     A "journey" is like browser history for prompts, except organized in a
-     tree-like graph. It lets you save incremental changes to your workflow and
-     jump between past and present sets of parameters.
--->
-<script context="module" lang="ts">
- export type JourneyMode = "linear" | "tree";
-</script>
-
-<script lang="ts">
- import type ComfyApp from './ComfyApp';
- import type { ComfyBoxWorkflow } from '$lib/stores/workflowState';
- import workflowState from '$lib/stores/workflowState';
- import uiState from '$lib/stores/uiState';
- import { resolvePatch, type JourneyPatchNode, type WritableJourneyStateStore, diffParams, type JourneyNode } from '$lib/stores/journeyStates';
- import JourneyRenderer, { type JourneyNodeEvent } from './JourneyRenderer.svelte';
- import { Trash, ClockHistory, Diagram3, GeoAlt } from "svelte-bootstrap-icons";
- import { getWorkflowRestoreParamsFromWorkflow } from '$lib/restoreParameters';
- import notify from '$lib/notify';
- import selectionState from '$lib/stores/selectionState';
- import { Checkbox } from '@gradio/form';
- import modalState from '$lib/stores/modalState';
- import queueState, { type QueueEntry } from '$lib/stores/queueState';
- import PromptDisplay from "$lib/components/PromptDisplay.svelte"
- import { getQueueEntryImages } from '$lib/stores/uiQueueState';
- import { SvelteComponent } from 'svelte';
- import { capitalize } from '$lib/utils';
-
- export let app: ComfyApp;
-
- let workflow: ComfyBoxWorkflow | null = null;
- let journey: WritableJourneyStateStore | null = null;
- let activeNode: JourneyNode | null = null;
- let mode: JourneyMode = "linear";
- let cyto: cytoscape.Core | null = null;
-
- const MODES: [JourneyMode, typeof SvelteComponent][] = [
-     ["linear", ClockHistory],
-     ["tree", Diagram3],
- ]
-
- $: workflow = $workflowState.activeWorkflow
- $: {
-     journey = workflow?.journey
-     activeNode = journey?.getActiveNode()
- }
-
- // function doAdd() {
- //     if (!workflow) {
- //         notify("No active workflow!", { type: "error" })
- //         return;
- //     }
- //
- //     const activeNode = journey.getActiveNode();
- //     journey.pushPatchOntoActive(workflow, activeNode, true)
- // }
-
- function doClearHistory() {
-     if (!confirm("Clear history?"))
-         return;
-
-     journey.clear();
-     notify("History cleared.", { type: "info" })
- }
-
- function doCenter() {
-     if (cyto == null)
-         return;
-
-     const activeNode = journey.getActiveNode();
-     if (activeNode == null)
-         return;
-
-     const node = cyto.$(`#${activeNode.id}`);
-     if (node.isNode()) {
-         cyto.zoom(1.25);
-         cyto.center(node)
-     }
- }
-
- function onSelectNode(e: CustomEvent<JourneyNodeEvent>) {
-     const { node } = e.detail;
-
-     const id = node.id();
-     const journeyNode = $journey.nodesByID[id];
-     if (journeyNode == null) {
-         console.error("[ComfyJourneyView] Missing journey node!", id)
-         return;
-     }
-
-     console.debug("[ComfyJourneyView] Journey node", journeyNode)
-
-     const patch = resolvePatch(journeyNode);
-
-     // ensure reactive state is updated
-     workflow.applyParamsPatch(patch);
-     $workflowState = $workflowState
- }
-
- function onRightClickNode(e: CustomEvent<JourneyNodeEvent>) {
-     const { node } = e.detail;
-
-     const id = node.id();
-     const journeyNode = $journey.nodesByID[id];
-     if (journeyNode == null) {
-         console.error("[ComfyJourneyView] Missing journey node!", id)
-         return;
-     }
-
-     // pick first resolved prompt
-     const queueEntry: QueueEntry | null =
-         Array.from(journeyNode.promptIDs)
-              .map(id => queueState.getQueueEntry(id))
-              .find(qe => qe?.prompt != null);
-
-     if (queueEntry) {
-         modalState.pushModal({
-             title: "Prompt Details",
-             svelteComponent: PromptDisplay,
-             svelteProps: {
-                 prompt: queueEntry.prompt,
-                 workflow: queueEntry.extraData?.extra_pnginfo?.comfyBoxWorkflow,
-                 images: getQueueEntryImages(queueEntry),
-                 closeModal: () => modalState.closeAllModals(),
-                 expandAll: false,
-                 app
-             },
-         })
-     }
-     else {
-         notify("This journey entry has no prompts yet.", { type: "warning" })
-     }
- }
-
- function onHoverNode(e: CustomEvent<JourneyNodeEvent>) {
-     const { node } = e.detail;
-
-     const id = node.id();
-     const journeyNode = $journey.nodesByID[id];
-     if (journeyNode == null) {
-         console.error("[ComfyJourneyView] Missing journey node!", id)
-         return;
-     }
-
-     const patch = resolvePatch(journeyNode);
-     const workflowParams = getWorkflowRestoreParamsFromWorkflow(workflow);
-     const diff = diffParams(patch, workflowParams);
-
-     $selectionState.currentPatchHoveredNodes = new Set(Object.keys(diff));
- }
-
- function onHoverNodeOut(e: CustomEvent<JourneyNodeEvent>) {
-     $selectionState.currentPatchHoveredNodes = new Set();
- }
-</script>
-
-<div class="journey-view">
-    <div class="top">
-        <button class="mode-button ternary"
-                title="Center Active"
-                disabled={$journey.root == null || $journey.activeNodeID == null}
-                on:click={doCenter}>
-            <GeoAlt width="100%" height="100%" />
-        </button>
-        <button class="mode-button ternary"
-                title="Clear"
-                disabled={$journey.root == null}
-                on:click={doClearHistory}>
-            <Trash width="100%" height="100%" />
-        </button>
-    </div>
-    {#key $journey.version}
-        <JourneyRenderer {workflow} {journey} {mode}
-                         bind:cyto
-                         on:select_node={onSelectNode}
-                         on:right_click_node={onRightClickNode}
-                         on:hover_node={onHoverNode}
-                         on:hover_node_out={onHoverNodeOut}
-        />
-    {/key}
-    <div class="bottom" style:border-top="1px solid var(--panel-border-color)">
-        <Checkbox label="Save History" bind:value={$uiState.saveHistory}/>
-    </div>
-    <div class="bottom">
-        {#each MODES as [theMode, icon]}
-            <!-- svelte-ignore a11y-click-events-have-key-events -->
-            <button class="mode-button ternary"
-                    disabled={mode === theMode}
-                    title={capitalize(theMode)}
-                    class:selected={mode === theMode}
-                    on:click={() => { mode = theMode; }}>
-                <svelte:component this={icon} width="100%" height="100%" />
-            </button>
-        {/each}
-    </div>
-</div>
-
-<style lang="scss">
- $button-height: 2.5rem;
-
- .journey-view {
-     width: 100%;
-     height: calc(100% - $button-height * 3);
- }
-
- .top, .bottom {
-     height: $button-height;
-     display: flex;
-     flex-direction: row;
-     color: var(--comfy-accent-soft);
-     justify-content: center;
- }
-
- .mode-button {
-     height: 100%;
-     width: 100%;
-     padding: 0.5rem;
-
-     @include square-button;
-
-     &:hover {
-         color: var(--body-text-color);
-     }
-     &.selected {
-         background-color: var(--panel-background-fill);
-     }
- }
-</style>

src/lib/components/ComfyPaneView.svelte

@@ -1,5 +1,5 @@
 <script context="module" lang="ts">
- export type ComfyPaneMode = "none" | "activeWorkflow" | "graph" | "properties" | "templates" | "queue" | "journey"
+ export type ComfyPaneMode = "none" | "activeWorkflow" | "graph" | "properties" | "templates" | "queue"
 </script>
 
 <script lang="ts">
@@ -8,30 +8,28 @@
   */
  import workflowState from "$lib/stores/workflowState";
  import type ComfyApp from "./ComfyApp";
- import { SvelteComponent } from "svelte";
- import { capitalize } from "$lib/utils";
-
- import { Sliders2, BoxSeam, LayoutTextSidebarReverse, Signpost2 } from "svelte-bootstrap-icons";
+ import { Sliders2, BoxSeam, LayoutTextSidebarReverse } from "svelte-bootstrap-icons";
 
  import ComfyBoxWorkflowView from "./ComfyBoxWorkflowView.svelte";
  import ComfyGraphView from "./ComfyGraphView.svelte";
  import ComfyProperties from "./ComfyProperties.svelte";
  import ComfyQueue from "./ComfyQueue.svelte";
  import ComfyTemplates from "./ComfyTemplates.svelte";
- import ComfyJourneyView from "./ComfyJourneyView.svelte";
+ import { SvelteComponent } from "svelte";
+	import { capitalize } from "$lib/utils";
 
  export let app: ComfyApp
  export let mode: ComfyPaneMode = "none";
  export let showSwitcher: boolean = false;
 
- const MODES: [ComfyPaneMode, typeof SvelteComponent][] = [
+ const MODES: [ComfyPaneMode, typeof SvelteComponent<any>][] = [
      ["properties", Sliders2],
      ["templates", BoxSeam],
-     ["journey", Signpost2],
      ["queue", LayoutTextSidebarReverse]
  ]
 
  function switchMode(newMode: ComfyPaneMode) {
+     console.warn("switch", mode, newMode)
      mode = newMode;
  }
 </script>
@@ -48,10 +46,8 @@
             <ComfyTemplates {app} />
         {:else if mode === "queue"}
             <ComfyQueue {app} />
-        {:else if mode === "journey"}
-            <ComfyJourneyView {app} />
         {:else}
-            <div class="blank-panel">(Blank: {mode})</div>
+            <div class="blank-panel">(Blank)</div>
         {/if}
     </div>
     {#if showSwitcher}

src/lib/components/ComfyQueue.svelte

@@ -1,18 +1,3 @@
-<script lang="ts" context="module">
- export type QueueUIEntryStatus = QueueEntryStatus | "pending" | "running";
-
- export type QueueUIEntry = {
-     entry: QueueEntry,
-     message: string,
-     submessage: string,
-     date?: string,
-     status: QueueUIEntryStatus,
-     images?: string[], // URLs
-     details?: string, // shown in a tooltip on hover
-     error?: WorkflowError
- }
-</script>
-
 <script lang="ts">
  import queueState, { type CompletedQueueEntry, type QueueEntry, type QueueEntryStatus } from "$lib/stores/queueState";
  import ProgressBar from "./ProgressBar.svelte";
@@ -20,7 +5,7 @@
  import Spinner from "./Spinner.svelte";
  import PromptDisplay from "./PromptDisplay.svelte";
  import { List, ListUl, Grid } from "svelte-bootstrap-icons";
- import { convertComfyOutputToComfyURL, convertFilenameToComfyURL, getNodeInfo, truncateString } from "$lib/utils"
+ import { getNodeInfo, type ComfyImageLocation } from "$lib/utils"
  import type { Writable } from "svelte/store";
  import type { QueueItemType } from "$lib/api";
  import { Button } from "@gradio/button";
@@ -30,9 +15,8 @@
  import { type WorkflowError } from "$lib/stores/workflowState";
  import ComfyQueueListDisplay from "./ComfyQueueListDisplay.svelte";
  import ComfyQueueGridDisplay from "./ComfyQueueGridDisplay.svelte";
-	import { WORKFLOWS_VIEW } from "./ComfyBoxWorkflowsView.svelte";
-	import uiQueueState from "$lib/stores/uiQueueState";
-	import type { SerializedAppState, SerializedPromptInputsAll } from "./ComfyApp";
+ import { WORKFLOWS_VIEW } from "./ComfyBoxWorkflowsView.svelte";
+ import uiQueueState, { type QueueUIEntry } from "$lib/stores/uiQueueState";
 
  export let app: ComfyApp;
 
@@ -125,22 +109,19 @@
 
  let showModal = false;
  let expandAll = false;
- let selectedPrompt: SerializedPromptInputsAll | null = null;
- let selectedWorkflow: SerializedAppState | null = null;
- let selectedImages = [];
+ let selectedPrompt = null;
+ let selectedImages: ComfyImageLocation[] = [];
  function showPrompt(entry: QueueUIEntry) {
      if (entry.error != null) {
          showModal = false;
          expandAll = false;
          selectedPrompt = null;
-         selectedWorkflow = null;
          selectedImages = [];
 
          showError(entry.entry.promptID);
      }
      else {
-         selectedPrompt = entry.entry.prompt,
-         selectedWorkflow = entry.entry.extraData.extra_pnginfo.comfyBoxWorkflow
+         selectedPrompt = entry.entry.prompt;
          selectedImages = entry.images;
          showModal = true;
          expandAll = false
@@ -149,7 +130,6 @@
 
  function closeModal() {
      selectedPrompt = null
-     selectedWorkflow = null;
      selectedImages = []
      showModal = false;
      expandAll = false;
@@ -170,7 +150,7 @@
     </div>
     <svelte:fragment let:closeDialog>
         {#if selectedPrompt}
-            <PromptDisplay closeModal={() => { closeModal(); closeDialog(); }} {app} prompt={selectedPrompt} workflow={selectedWorkflow} images={selectedImages} {expandAll} />
+            <PromptDisplay closeModal={() => { closeModal(); closeDialog(); }} {app} prompt={selectedPrompt} images={selectedImages} {expandAll} />
         {/if}
     </svelte:fragment>
     <div slot="buttons" let:closeDialog>

src/lib/components/ComfyQueueGridDisplay.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
  import type { QueueItemType } from "$lib/api";
- import { showLightbox } from "$lib/utils";
+ import { convertComfyOutputToComfyURL, showLightbox } from "$lib/utils";
  import type { QueueUIEntry } from "./ComfyQueue.svelte";
  import queueState from "$lib/stores/queueState";
 
@@ -19,7 +19,7 @@
      allEntries = []
      for (const entry of entries) {
          for (const image of entry.images) {
-             allEntries.push([entry, image]);
+             allEntries.push([entry, convertComfyOutputToComfyURL(image, true)]);
          }
      }
      allImages = allEntries.map(p => p[1]);
@@ -56,6 +56,7 @@
                     <img class="grid-entry-image"
                          on:click={(e) => handleClick(e, entry, i)}
                     src={image}
+                    loading="lazy"
                     alt="thumbnail" />
                 </div>
             {/each}
@@ -130,6 +131,8 @@
  .grid-entry-image {
      aspect-ratio: 1 / 1;
      object-fit: cover;
+     width: 100%;
+     max-width: unset;
 
      &:hover {
          cursor: pointer;

src/lib/components/ComfyQueueListDisplay.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
  import type { QueueItemType } from "$lib/api";
- import { showLightbox, truncateString } from "$lib/utils";
- import type { QueueUIEntry } from "./ComfyQueue.svelte";
+ import { convertComfyOutputToComfyURL, showLightbox, truncateString } from "$lib/utils";
  import queueState from "$lib/stores/queueState";
+ import type { QueueUIEntry } from "$lib/stores/uiQueueState";
 
  export let entries: QueueUIEntry[] = [];
  export let showPrompt: (entry: QueueUIEntry) => void;
@@ -39,11 +39,13 @@
                     <div class="list-entry-images"
                          style="--cols: {Math.ceil(Math.sqrt(Math.min(entry.images.length, 4)))}" >
                         {#each entry.images.slice(0, 4) as image, i}
+                            {@const imageURL = convertComfyOutputToComfyURL(image, true)}
                             <div>
                                 <!-- svelte-ignore a11y-click-events-have-key-events -->
                                 <img class="list-entry-image"
                                      on:click={(e) => showLightbox(entry.images, i, e)}
-                                src={image}
+                                src={imageURL}
+                                loading="lazy"
                                 alt="thumbnail" />
                             </div>
                         {/each}

src/lib/components/ComfySettingsView.svelte

@@ -173,7 +173,7 @@
  }
 
  .comfy-settings-entries {
-     padding: 2rem 0.75rem;
+     padding: 3rem 3rem;
      height: 100%;
  }
 

src/lib/components/ComfyTemplates.svelte

@@ -197,7 +197,7 @@
                                 <div class="template-desc">{item.template.metadata.description}</div>
                             </div>
                             {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-                                <div in:fade={{duration:200, easing: cubicIn}} class='template-drag-item-shadow'/>
+                                <div in:fade|global={{duration:200, easing: cubicIn}} class='template-drag-item-shadow'/>
                             {/if}
                         {/each}
                     </div>

src/lib/components/JourneyRenderer.svelte

@@ -1,259 +0,0 @@
-<script context="module" lang="ts">
- export type JourneyNodeEvent = {
-     cyto: cytoscape.Core,
-     node: cytoscape.NodeSingular
- }
-</script>
-
-<script lang="ts">
- import { resolvePatch, type JourneyNode, type JourneyPatchNode, type WritableJourneyStateStore } from '$lib/stores/journeyStates';
- import { ComfyBoxWorkflow } from '$lib/stores/workflowState';
- import { get } from 'svelte/store';
- import Graph from './graph/Graph.svelte'
- import type { NodeDataDefinition, EdgeDataDefinition } from 'cytoscape';
- import { createEventDispatcher } from "svelte";
- import selectionState from '$lib/stores/selectionState';
- import uiQueueState, { getQueueEntryImages } from '$lib/stores/uiQueueState';
- import queueState from '$lib/stores/queueState';
- import { convertComfyOutputToComfyURL, countNewLines } from '$lib/utils';
-	import type { ElementDefinition } from 'cytoscape';
-	import type { JourneyMode } from './ComfyJourneyView.svelte';
-	import type { RestoreParamWorkflowNodeTargets } from '$lib/restoreParameters';
-
- export let workflow: ComfyBoxWorkflow | null = null
- export let journey: WritableJourneyStateStore | null = null
- export let mode: JourneyMode = "linear";
- export let cyto: cytoscape.Core | null = null;
-
- const dispatch = createEventDispatcher<{
-     select_node: JourneyNodeEvent;
-     right_click_node: JourneyNodeEvent;
-     hover_node: JourneyNodeEvent;
-     hover_node_out: JourneyNodeEvent;
- }>();
-
- let lastMode = null;
- let lastVersion = -1;
-
- let nodes = []
- let edges = []
- $: if ($journey.version !== lastVersion || lastMode !== mode){
-     [nodes, edges] = buildGraph(journey)
-     lastVersion = $journey.version
-     lastMode = mode;
- }
-
- function makePatchText(patch: RestoreParamWorkflowNodeTargets): string {
-     const lines = []
-
-     let sorted = Array.from(Object.entries(patch))
-     sorted.sort((a, b) => {
-         return a[1].name > b[1].name ? 1 : -1
-     })
-
-     const MAX_ENTRIES = 5
-     const entries = sorted.slice(0, MAX_ENTRIES)
-     const leftover = sorted.length - MAX_ENTRIES
-
-     for (const [nodeID, source] of entries) {
-         let line = ""
-         switch (source.nodeType) {
-             case "ui/text":
-                 line = `${source.name}: (changed)`
-                 break;
-             default:
-                 line = `${source.name}: ${source.prevValue} → ${source.finalValue}`
-                 break;
-         }
-         lines.push(line)
-     }
-
-     if (leftover > 0) {
-         lines.push(`(+ ${leftover} more)`)
-     }
-
-     return lines.join("\n")
- }
-
- /*
-  * Converts the journey tree into the renderable graph format Cytoscape expects
-  */
- function buildGraph(journey: WritableJourneyStateStore | null): [ElementDefinition[], ElementDefinition[]] {
-     if (!journey) {
-         return [[], []]
-     }
-
-     let activeNode = journey.getActiveNode()
-
-     const nodes: ElementDefinition[] = []
-     const edges: ElementDefinition[] = []
-
-     let iter: Iterable<JourneyNode> = [];
-     if (mode === "linear") {
-         if (activeNode != null)
-             iter = journey.iterateLinearPath(activeNode.id);
-     }
-     else {
-         iter = journey.iterateBreadthFirst();
-     }
-
-     const showPatches = mode === "linear";
-
-     const memoize = {}
-
-     for (const node of iter) {
-         if (node.type === "root") {
-             nodes.push({
-                 data: {
-                     id: node.id,
-                     label: "Start",
-                 },
-                 classes: "historyNode"
-             })
-             continue;
-         }
-         else {
-             const patchNode = node as JourneyPatchNode;
-             nodes.push({
-                 data: {
-                     id: patchNode.id,
-                     label: "P",
-                 },
-                 classes: "historyNode"
-             })
-
-             // Display a small node between with the patch details
-             const midNodeID = `${patchNode.id}_patch`;
-
-             console.debug("get", patchNode);
-
-             if (showPatches) {
-                 // show a node with the changes between gens
-                 const patchText = makePatchText(patchNode.patch);
-                 const patchNodeHeight = countNewLines(patchText) * 11 + 22;
-
-                 nodes.push({
-                     data: {
-                         id: midNodeID,
-                         label: patchText,
-                         patchNodeHeight
-                     },
-                     selectable: false,
-                     classes: "patchNode"
-                 })
-
-                 edges.push({
-                     data: {
-                         id: `${patchNode.parent.id}_${midNodeID}`,
-                         source: patchNode.parent.id,
-                         target: midNodeID,
-                     },
-                     selectable: false,
-                 })
-
-                 edges.push({
-                     data: {
-                         id: `${midNodeID}_${patchNode.id}`,
-                         source: midNodeID,
-                         target: patchNode.id,
-                     },
-                     selectable: false,
-                     locked: true
-                 })
-             }
-             else {
-                 edges.push({
-                     data: {
-                         id: `${patchNode.parent.id}_${patchNode.id}`,
-                         source: patchNode.parent.id,
-                         target: patchNode.id,
-                     },
-                     selectable: false,
-                     locked: true
-                 })
-             }
-         }
-     }
-
-     return [nodes, edges]
- }
-
- function onNodeSelected(e: cytoscape.InputEventObject) {
-     console.warn("[JourneyNode] onNodeSelected", e)
-     const node = e.target as cytoscape.NodeSingular;
-
-     journey.selectNode(node.id());
-
-     e.cy.animate({
-         center: { eles: node }
-     }, {
-         duration: 400,
-         easing: "ease-in-out-quad"
-     });
-
-     e.cy.center(node)
-
-     dispatch("select_node", { cyto: e.cy, node })
- }
-
- function onNodeRightClicked(e: cytoscape.InputEventObject) {
-     const node = e.target as cytoscape.NodeSingular;
-     dispatch("right_click_node", { cyto: e.cy, node })
- }
-
- function onNodeHovered(e: cytoscape.InputEventObject) {
-     const node = e.target as cytoscape.NodeSingular;
-     dispatch("hover_node", { cyto: e.cy, node })
- }
-
- function onNodeHoveredOut(e: cytoscape.InputEventObject) {
-     const node = e.target as cytoscape.NodeSingular;
-     dispatch("hover_node_out", { cyto: e.cy, node })
- }
-
- function onRebuilt(e: CustomEvent<{cyto: cytoscape.Core}>) {
-     const { cyto } = e.detail;
-
-     const activeNode = journey.getActiveNode();
-
-     for (const node of cyto.nodes(".historyNode").components()) {
-         const nodeID = node.id()
-         if (nodeID === activeNode?.id) {
-             node.select();
-             cyto.zoom(1.25);
-             cyto.center(node)
-         }
-
-         const journeyNode = $journey.nodesByID[nodeID]
-         if (journeyNode) {
-             if (journeyNode.promptIDs) {
-                 const queueEntry = Array.from(journeyNode.promptIDs).map(id => queueState.getQueueEntry(id)).find(Boolean);
-                 if (queueEntry) {
-                     const outputs = getQueueEntryImages(queueEntry);
-
-                     if (outputs) {
-                         node.data("bgImage", outputs[0]);
-                     }
-                 }
-             }
-         }
-     }
-
-     $selectionState.currentPatchHoveredNodes = new Set()
-
-     cyto.nodes().lock()
-
-     cyto.nodes(".historyNode")
-         .on("select", onNodeSelected)
-         .on("cxttapend ", onNodeRightClicked)
-         .on("mouseout", onNodeHoveredOut)
-         .on("mouseover", onNodeHovered)
- }
-</script>
-
-{#if workflow && journey}
-    <Graph {nodes} {edges} bind:cyInstance={cyto}
-           style="background: var(--neutral-900)"
-           on:rebuilt={onRebuilt}
-    />
-{/if}

src/lib/components/Modal.svelte

@@ -37,11 +37,8 @@
     on:close={close}
     on:cancel={doClose}
     on:click|self={close}
-    on:contextmenu|preventDefault|stopPropagation
 >
-    <div on:click|stopPropagation
-         on:contextmenu|stopPropagation
-    >
+    <div on:click|stopPropagation>
         <slot name="header" />
         <slot {closeDialog} />
         <div class="button-row">

src/lib/components/PromptDisplay.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
  import { TextBox } from "@gradio/form";
- import type { SerializedAppState, SerializedPrompt, SerializedPromptInput, SerializedPromptInputsAll } from "./ComfyApp";
+ 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";
@@ -8,62 +8,21 @@
  import Gallery from "$lib/components/gradio/gallery/Gallery.svelte";
  import { ImageViewer } from "$lib/ImageViewer";
  import type { Styles } from "@gradio/utils";
- import { comfyFileToComfyBoxMetadata, comfyURLToComfyFile, countNewLines, isMultiline } from "$lib/utils";
+ import { comfyFileToComfyBoxMetadata, comfyURLToComfyFile, countNewLines, type ComfyImageLocation, convertComfyOutputToComfyURL } from "$lib/utils";
  import ReceiveOutputTargets from "./modal/ReceiveOutputTargets.svelte";
- import RestoreParamsTable from "./modal/RestoreParamsTable.svelte";
  import workflowState, { type ComfyBoxWorkflow, type WorkflowReceiveOutputTargets } from "$lib/stores/workflowState";
  import type { ComfyReceiveOutputNode } from "$lib/nodes/actions";
  import type ComfyApp from "./ComfyApp";
- import { TabItem, Tabs } from "@gradio/tabs";
- import { type ComfyBoxStdPrompt } from "$lib/ComfyBoxStdPrompt";
- import ComfyBoxStdPromptSerializer from "$lib/ComfyBoxStdPromptSerializer";
- import JsonView from "./JsonView.svelte";
- import type { ZodError } from "zod";
- import { concatRestoreParams, getWorkflowRestoreParams, getWorkflowRestoreParamsUsingLayout, type RestoreParamTargets, type RestoreParamWorkflowNodeTargets } from "$lib/restoreParameters";
-	import notify from "$lib/notify";
 
  const splitLength = 50;
 
  export let prompt: SerializedPromptInputsAll;
- export let workflow: SerializedAppState | null;
- export let restoreParams: RestoreParamTargets = {}
- export let images: string[] = []; // list of image URLs to ComfyUI's /view? endpoint
+ export let images: ComfyImageLocation[] = [];
  export let isMobile: boolean = false;
  export let expandAll: boolean = false;
  export let closeModal: () => void;
  export let app: ComfyApp;
 
- let stdPrompt: ComfyBoxStdPrompt | null;
- let stdPromptError: ZodError<any> | null;
-
- $: {
-     restoreParams = {}
-
-     // TODO exclude from both history and journey patch
-     const noExclude = true;
-
-     // TODO other sources than serialized workflow
-     if (workflow != null) {
-         const workflowParams = getWorkflowRestoreParamsUsingLayout(workflow.workflow, workflow.layout, noExclude)
-         console.error("GETPARMS", workflowParams)
-         restoreParams = concatRestoreParams(restoreParams, workflowParams);
-     }
-
-     const [result, orig] = new ComfyBoxStdPromptSerializer().serialize(prompt, workflow);
-     if (result.success === true) {
-         stdPrompt = result.data;
-         stdPromptError = null;
-     }
-     else {
-         stdPrompt = orig;
-         stdPromptError = result.error;
-     }
- }
-
- type PromptDisplayTabID = "restore-parameters" | "send-outputs" | "standard-prompt" | "prompt"
-
- let selectedTab: PromptDisplayTabID = "restore-parameters"
-
  let selected_image: number | null = null;
 
  let galleryStyle: Styles = {
@@ -77,10 +36,7 @@
  let litegraphType = "(none)"
 
  $: if (images.length > 0) {
-     // since the image links come from gradio, have to parse the URL for the
-     // ComfyImageLocation params
-     comfyBoxImages = images.map(comfyURLToComfyFile)
-                            .map(comfyFileToComfyBoxMetadata);
+     comfyBoxImages = images.map(comfyFileToComfyBoxMetadata);
  }
  else {
      comfyBoxImages = []
@@ -105,6 +61,10 @@
          && typeof input[1] === "number"
  }
 
+ function isMultiline(input: any): boolean {
+     return typeof input === "string" && (input.length > splitLength || countNewLines(input) > 1);
+ }
+
  function formatInput(input: any): string {
      if (typeof input === "string")
          return input
@@ -160,37 +120,66 @@
 
      closeModal();
  }
-
- function doRestoreParams(e: CustomEvent) {
-     const activeWorkflow = workflowState.getActiveWorkflow();
-     if (activeWorkflow == null) {
-         notify("No active workflow!", { type: "error" })
-     }
-
-     // TODO other param sources
-     const patch: RestoreParamWorkflowNodeTargets = {};
-
-     for (const [nodeID, sources] of Object.entries(restoreParams)) {
-         for (const source of sources) {
-             if (source.type === "workflow") {
-                 patch[nodeID] = source;
-             }
-         }
-     }
-
-     activeWorkflow.applyParamsPatch(patch);
-     closeModal();
- }
 </script>
 
 <div class="prompt-display">
     <div class="prompt-and-sends">
-        <Tabs bind:selected={selectedTab}>
-            <TabItem id="restore-parameters" name="Restore Parameters">
-                <RestoreParamsTable {restoreParams} on:restore={doRestoreParams} />
-            </TabItem>
-            {#if comfyBoxImages.length > 0}
-                <TabItem id="send-outputs" name="Send Outputs">
+        <Block>
+            <Accordion label="Prompt" open={expandAll || comfyBoxImages.length === 0}>
+                <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={expandAll}>
+                                            {#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>
+            </Accordion>
+        </Block>
+        {#if comfyBoxImages.length > 0}
+            <Block>
+                <Accordion label="Send Outputs To..." open={true}>
                     <Block>
                         <BlockTitle>Output type: {litegraphType}</BlockTitle>
                         {#if receiveTargets.length > 0}
@@ -199,100 +188,15 @@
                                 <div class="outputs-message">No receive output targets found across all workflows.</div>
                         {/if}
                     </Block>
-                </TabItem>
-            {/if}
-            <TabItem id="standard-prompt" name="Standard Prompt">
-                {#if stdPromptError}
-                    <Block>
-                        <BlockTitle><div style:color="#F88">Parsing Error</div></BlockTitle>
-                        <div class="scroll-container">
-                            <div class="json">
-                                <JsonView json={stdPromptError} />
-                            </div>
-                        </div>
-                    </Block>
-                    <Block>
-                        <BlockTitle><div>Original Data</div></BlockTitle>
-                        <div class="scroll-container">
-                            <div class="json">
-                                <JsonView json={stdPrompt} />
-                            </div>
-                        </div>
-                    </Block>
-                {:else if stdPrompt}
-                    <Block>
-                        <div class="scroll-container">
-                            <div class="json">
-                                <JsonView json={stdPrompt} />
-                            </div>
-                        </div>
-                    </Block>
-                {:else}
-                    <Block>
-                        (No standard prompt)
-                    </Block>
-                {/if}
-            </TabItem>
-            <TabItem id="prompt" name="Prompt">
-                <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={expandAll}>
-                                                {#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>
-                </Block>
-            </TabItem>
-        </Tabs>
+                </Accordion>
+            </Block>
+        {/if}
     </div>
     {#if images.length > 0}
         <div class="image-container">
             <Block>
                 <Gallery
-                    value={images}
+                    value={images.map(convertComfyOutputToComfyURL)}
                     label=""
                     show_label={false}
                     style={galleryStyle}
@@ -314,34 +218,21 @@
 
      display: flex;
      flex-wrap: nowrap;
+     overflow-y: auto;
 
      flex-direction: column;
-     @media (min-width: 1200px) {
+     @media (min-width: 1600px) {
          flex-direction: row;
      }
  }
 
- .scroll-container {
-     position: relative;
-     /* overflow-y: auto; */
-     flex: 1 1 0%;
- }
-
- .json {
-     @include json-view;
- }
-
  .prompt-and-sends {
      width: 50%;
 
-     overflow-y: auto;
-
-     :global(>.tabs) {
-         height: 100%;
-
-         :global(>.tabitem) {
-             overflow-y: auto;
-         }
+     .scroll-container {
+         position: relative;
+         /* overflow-y: auto; */
+         flex: 1 1 0%;
      }
 
      .copy-button {

src/lib/components/TabsContainer.svelte

@@ -12,7 +12,7 @@
  import {cubicIn} from 'svelte/easing';
  import { flip } from 'svelte/animate';
  import { type ContainerLayout, type WidgetLayout, type IDragItem, type WritableLayoutStateStore } from "$lib/stores/layoutStates";
- import { startDrag, stopDrag } from "$lib/utils"
+ import { startDrag, stopDrag, vibrateIfPossible } from "$lib/utils"
  import type { Writable } from "svelte/store";
  import { isHidden } from "$lib/widgets/utils";
 	import { handleContainerConsider, handleContainerFinalize } from "./utils";
@@ -62,7 +62,7 @@
  }
 
  function handleSelect() {
-     navigator.vibrate(20)
+     vibrateIfPossible(20)
  }
 
  function _startDrag(e: MouseEvent | TouchEvent) {
@@ -112,7 +112,7 @@
                                 </label>
                                 <WidgetContainer {layoutState} dragItem={item} zIndex={zIndex+1} {isMobile} />
                                 {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-                                    <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
+                                    <div in:fade|global={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
                                 {/if}
                             </Block>
                         </div>

src/lib/components/WidgetContainer.svelte

@@ -70,34 +70,39 @@
 
 
 {#if container}
-    <Container {layoutState} {container} {classes} {zIndex} {showHandles} {isMobile} />
+    {#key $attrsChanged}
+        <Container {layoutState} {container} {classes} {zIndex} {showHandles} {isMobile} />
+    {/key}
 {:else if widget && widget.node}
     {@const edit = $uiState.uiUnlocked && $uiState.uiEditMode === "widgets"}
     {@const hidden = isHidden(widget)}
     {@const hovered = $uiState.uiUnlocked && $selectionState.currentHovered.has(widget.id)}
     {@const selected = $uiState.uiUnlocked && $selectionState.currentSelection.includes(widget.id)}
-    <div class="widget {widget.attrs.classes} {getWidgetClass()}"
-         class:edit={edit}
-         class:hovered
-         class:selected
-         class:patch-affected={$selectionState.currentPatchHoveredNodes.has(widget.node.id)}
-         class:is-executing={$queueState.runningNodeID && $queueState.runningNodeID == widget.node.id}
-         class:hidden={hidden}
-    >
-        <svelte:component this={widget.node.svelteComponentType} {widget} {isMobile} />
-    </div>
-    {#if hidden && edit}
-        <div class="handle handle-hidden" class:hidden={!edit} />
-    {/if}
-    {#if showHandles || hovered}
-        <div class="handle handle-widget"
-             class:hovered
-             data-drag-item-id={widget.id}
-             on:mousedown={_startDrag}
-             on:touchstart={_startDrag}
-             on:mouseup={_stopDrag}
-             on:touchend={_stopDrag}/>
-    {/if}
+    {#key $attrsChanged}
+        {#key $propsChanged}
+            <div class="widget {widget.attrs.classes} {getWidgetClass()}"
+                 class:edit={edit}
+                 class:hovered
+                 class:selected
+                 class:is-executing={$queueState.runningNodeID && $queueState.runningNodeID == widget.node.id}
+                 class:hidden={hidden}
+            >
+                <svelte:component this={widget.node.svelteComponentType} {widget} {isMobile} />
+            </div>
+            {#if hidden && edit}
+                <div class="handle handle-hidden" class:hidden={!edit} />
+            {/if}
+            {#if showHandles || hovered}
+                <div class="handle handle-widget"
+                     class:hovered
+                     data-drag-item-id={widget.id}
+                     on:mousedown={_startDrag}
+                     on:touchstart={_startDrag}
+                     on:mouseup={_stopDrag}
+                     on:touchend={_stopDrag}/>
+            {/if}
+        {/key}
+    {/key}
 {/if}
 
 <style lang="scss">
@@ -107,10 +112,6 @@
      &.selected {
          background: var(--comfy-widget-selected-background-fill);
      }
-
-     &.patch-affected {
-         background: var(--secondary-500);
-     }
  }
 
  .is-executing {

src/lib/components/graph/Graph.svelte

@@ -1,91 +0,0 @@
-<script context="module" lang="ts">
- export const GRAPH_STATE = {};
-
- export type GraphContext = {
-     getCyInstance: () => cytoscape.Core
- }
-</script>
-
-<script lang="ts">
- import cytoscape from "cytoscape"
- import dagre from "cytoscape-dagre"
- import GraphStyles from "./GraphStyles"
- import type { ElementDefinition } from "cytoscape";
- import { createEventDispatcher } from "svelte";
-
- export let nodes: ReadonlyArray<ElementDefinition>;
- export let edges: ReadonlyArray<ElementDefinition>;
-
- export let style: string = ""
-
- let refElement = null
- export let cyInstance: cytoscape.Core | null = null
-
- const dispatch = createEventDispatcher<{
-     rebuilt: { cyto: cytoscape.Core };
- }>();
-
- $: if (nodes != null && edges != null && refElement != null) {
-     rebuildGraph()
- }
- else {
-     cyInstance = null;
- }
-
- function rebuildGraph() {
-     cytoscape.use(dagre)
-     cytoscape.warnings(false)
-
-     cyInstance = cytoscape({
-         container: refElement,
-         style: GraphStyles,
-         wheelSensitivity: 0.1,
-         maxZoom: 3,
-         minZoom: 0.5,
-         selectionType: "single"
-     })
-
-     cyInstance.on("add", () => {
-         cyInstance
-             .makeLayout({
-                 name: "dagre",
-                 rankDir: "TB",
-                 nodeSep: 150
-             })
-             .run()
-     })
-
-     // Prevents the unselection of nodes when clicking on the background
-     cyInstance.on('click', (event) => {
-         if (event.target === cyInstance) {
-             // click on the background
-             cyInstance.nodes(".historyNode").unselectify();
-         } else {
-             cyInstance.nodes(".historyNode").selectify();
-         }
-     });
-
-     for (const node of nodes) {
-         node.group = "nodes"
-         cyInstance.add(node)
-     }
-
-     for (const edge of edges) {
-         edge.group = "edges";
-         console.warn(edge)
-         cyInstance.add(edge)
-     }
-
-     dispatch("rebuilt", { cyto: cyInstance })
- }
-</script>
-
-<div class="cy-graph" {style} bind:this={refElement} />
-
-<style lang="scss">
- .cy-graph {
-     background: white;
-     width: 100%;
-     height: 100%;
- }
-</style>

src/lib/components/graph/GraphEdge.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
- import { onMount, getContext } from 'svelte'
- import { GRAPH_STATE, type GraphContext } from './Graph.svelte';
- import type { EdgeDataDefinition } from 'cytoscape';
-
- export let edge: EdgeDataDefinition
-
- const { getCyInstance } = getContext(GRAPH_STATE) as GraphContext;
- const cyInstance = getCyInstance()
-
- cyInstance.add({
-     group: 'edges',
-     data: { ...edge }
- })
-</script>

src/lib/components/graph/GraphNode.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
- import { onMount, getContext } from 'svelte'
- import { GRAPH_STATE, type GraphContext } from './Graph.svelte';
- import type { NodeDataDefinition } from 'cytoscape';
-
- export let node: NodeDataDefinition
-
- const { getCyInstance } = getContext(GRAPH_STATE) as GraphContext
- const cyInstance = getCyInstance()
-
- cyInstance.add({
-     group: 'nodes',
-     data: { ...node }
- })
-</script>

src/lib/components/graph/GraphStyles.ts

@@ -1,107 +0,0 @@
-import type { Stylesheet } from "cytoscape";
-
-const styles: Stylesheet[] = [
-    {
-        selector: "core",
-        style: {
-            "selection-box-color": "#ddd",
-            "selection-box-opacity": 0.65,
-            "selection-box-border-color": "#aaa",
-            "selection-box-border-width": 1,
-            "active-bg-color": "#4b5563",
-            "active-bg-opacity": 0.35,
-            "active-bg-size": 30,
-            "outside-texture-bg-color": "#000",
-            "outside-texture-bg-opacity": 0.125,
-        }
-    },
-    {
-        selector: ".historyNode",
-        style: {
-            "width": "100",
-            "height": "100",
-            "shape": "round-rectangle",
-            "font-family": "Arial",
-            "font-size": "18",
-            "font-weight": "normal",
-            "content": `data(label)`,
-            "text-valign": "center",
-            "text-wrap": "wrap",
-            "text-max-width": "140",
-            "background-color": "#60a5fa",
-            "border-color": "#2563eb",
-            "border-width": "3",
-            "color": "#1d3660"
-        }
-    },
-    {
-        selector: "node.historyNode[bgImage]",
-        style: {
-            "label": "",
-            "background-image": "data(bgImage)",
-            "background-image-containment": "over",
-            "background-fit": "cover",
-            "color": "transparent"
-        }
-    },
-    {
-        selector: ".historyNode:selected",
-        style: {
-            "background-color": "#f97316",
-            "color": "white",
-            "border-color": "#ea580c",
-            "line-color": "#0e76ba",
-            "target-arrow-color": "#0e76ba",
-        }
-    },
-    {
-        selector: ".patchNode",
-        style: {
-            "width": "label",
-            "height": "label",
-            "shape": "round-rectangle",
-            "padding": "20",
-            "font-family": "Arial",
-            "font-size": "11",
-            "font-weight": "normal",
-            "content": `data(label)`,
-            "text-valign": "center",
-            "text-wrap": "wrap",
-            "text-max-width": "140",
-            "line-height": "1.5",
-            "background-color": "#374151",
-            "border-color": "#1f2937",
-            "border-width": "1",
-            "color": "white",
-        }
-    },
-    {
-        selector: "edge",
-        style: {
-            "curve-style": "bezier",
-            "color": "darkred",
-            "text-background-color": "#ffffff",
-            "text-background-opacity": 1,
-            "text-background-padding": "3",
-            "width": 3,
-            "target-arrow-shape": "triangle",
-            "line-color": "#1d4ed8",
-            "target-arrow-color": "#1d4ed8",
-            "font-weight": "bold"
-        }
-    },
-    {
-        selector: "edge[label]",
-        style: {
-            "content": `data(label)`,
-        }
-    },
-    {
-        selector: "edge.label",
-        style: {
-            "line-color": "orange",
-            "target-arrow-color": "orange"
-        }
-    }
-]
-export default styles;

src/lib/components/modal/EditTemplateModal.svelte

@@ -13,7 +13,7 @@
  import Textbox from "@gradio/form/src/Textbox.svelte";
  import type { ModalData } from "$lib/stores/modalState";
  import { writable, type Writable } from "svelte/store";
- import { negmod } from "$lib/utils";
+	import { negmod } from "$lib/utils";
  const DOMPurify = createDOMPurify(window);
 
  export let templateAndSvg: SerializedComfyBoxTemplate;

src/lib/components/modal/RestoreParamsTable.svelte

@@ -1,140 +0,0 @@
-<script lang="ts">
- import type { ComfyReceiveOutputNode } from "$lib/nodes/actions";
- import type { ComfyWidgetNode } from "$lib/nodes/widgets";
- import type { RestoreParamSource, RestoreParamTargets } from "$lib/restoreParameters";
- import { isComfyWidgetNode, type WidgetLayout } from "$lib/stores/layoutStates";
- import type { ComfyBoxWorkflow, WorkflowReceiveOutputTargets } from "$lib/stores/workflowState";
- import workflowState from "$lib/stores/workflowState";
- import { Block, BlockTitle } from "@gradio/atoms";
- import { Button } from "@gradio/button";
- import { createEventDispatcher } from "svelte";
- import deepEqual from "deep-equal";
- import { capitalize, countNewLines, isMultiline } from "$lib/utils";
- import { TextBox } from "@gradio/form";
-
- type UIRestoreParam = {
-     node: ComfyWidgetNode,
-     widget: WidgetLayout,
-     sources: RestoreParamSource[]
- }
-
- const dispatch = createEventDispatcher<{
-     restore: {};
- }>();
-
- export let restoreParams: RestoreParamTargets = {};
- let uiRestoreParams: UIRestoreParam[] = []
-
- $: uiRestoreParams = buildForUI(restoreParams);
-
- function buildForUI(restoreParams: RestoreParamTargets): UIRestoreParam[] {
-     const result = []
-
-     for (const [nodeID, sources] of Object.entries(restoreParams)) {
-         const node = workflow.graph.getNodeByIdRecursive(nodeID);
-         if (node == null || !isComfyWidgetNode(node))
-             continue;
-
-         const nodeValue = node.getValue();
-         const foundSources = sources.filter(s => !deepEqual(nodeValue, s.finalValue));
-         if (foundSources.length === 0)
-             continue;
-
-         const widget = node.dragItem;
-         if (widget == null) {
-             console.error("[RestoreParamsTable] Node missing layoutState widget!!!", node)
-         }
-
-         result.push({ node, widget, sources: foundSources })
-     }
-
-     console.warn("RESTORE PARAMS", restoreParams, "->", result)
-
-     return result
- }
-
- let workflow: ComfyBoxWorkflow;
- $: workflow = workflowState.getActiveWorkflow();
-
- function doRestore(e: MouseEvent) {
-     dispatch("restore", {})
- }
-</script>
-
-<div class="scroll-container">
-    {#if workflow == null}
-        <div>No workflow is active.</div>
-    {:else if Object.keys(uiRestoreParams).length === 0}
-        <div>
-            <p>No parameters to restore found in this workflow.</p>
-            <p>(Either prompt is unchanged from active workflow, or the workflow the parameters were saved from was different)</p>
-        </div>
-    {:else}
-        <Block>
-            <BlockTitle>Parameters</BlockTitle>
-            <Block>
-                <Button variant="primary" on:click={doRestore}>
-                    Restore
-                </Button>
-            </Block>
-            {#each uiRestoreParams as { node, widget, sources }}
-                <Block>
-                    <div class="target-name">➤ {widget.attrs.title || node.title}</div>
-                    {#each sources as source}
-                        {@const value = String(source.finalValue)}
-                        <div class="target">
-                            <div class="target-name-and-desc">
-                                <Block>
-                                    <BlockTitle>{capitalize(source.type)}</BlockTitle>
-                                    <div>
-                                        {#if isMultiline(value, 20)}
-                                            {@const lines = Math.max(countNewLines(value), value.length / 20)}
-                                            <TextBox show_label={false} label={''} {value} {lines} max_lines={lines} />
-                                        {:else}
-                                            <TextBox show_label={false} label={''} {value} lines={1} max_lines={1} />
-                                        {/if}
-                                    </div>
-                                </Block>
-                            </div>
-                        </div>
-                    {/each}
-                </Block>
-            {/each}
-        </Block>
-    {/if}
-</div>
-
-<style lang="scss">
- .scroll-container {
-     overflow: auto;
-     position: relative;
-     flex: 1 1 0%;
-     height: 100%;
-
-     > :global(.block) {
-         background: var(--panel-background-fill);
-     }
- }
-
- .target-name {
-     padding-bottom: 0.5rem;
- }
-
- .target {
-
-     .target-name-and-desc {
-         :global(.block) {
-             background: var(--panel-background-fill);
-         }
-
-         .target-desc {
-             opacity: 65%;
-             font-size: 11pt;
-         }
-     }
-
-     pre {
-         @include json-view;
-     }
- }
-</style>

src/lib/nodes/ComfyGraphNode.ts

@@ -118,7 +118,7 @@ export default class ComfyGraphNode extends LGraphNode {
     }
 
     get dragItem(): WidgetLayout | null {
-        return layoutStates.getDragItemByNode(this) as WidgetLayout;
+        return layoutStates.getDragItemByNode(this);
     }
 
     get workflow(): ComfyBoxWorkflow | null {

src/lib/nodes/actions/ComfySetNodeModeAdvancedAction.ts

@@ -73,10 +73,10 @@ export default class ComfySetNodeModeAdvancedAction extends ComfyGraphNode {
 
                 if (hasTag) {
                     let newMode: NodeMode;
-                    if (enable && action.enable) {
-                        newMode = NodeMode.ALWAYS;
+                    if (action.enable) {
+                        newMode = enable ? NodeMode.ALWAYS : NodeMode.NEVER;
                     } else {
-                        newMode = NodeMode.NEVER;
+                        newMode = enable ? NodeMode.NEVER : NodeMode.ALWAYS;
                     }
                     nodeChanges[node.id] = newMode
                 }
@@ -88,7 +88,12 @@ export default class ComfySetNodeModeAdvancedAction extends ComfyGraphNode {
                 const container = entry.dragItem;
                 const hasTag = container.attrs.tags.indexOf(action.tag) != -1;
                 if (hasTag) {
-                    const hidden = !(enable && action.enable)
+                    let hidden: boolean;
+                    if (action.enable) {
+                        hidden = !enable
+                    } else {
+                        hidden = enable;
+                    }
                     widgetChanges[container.id] = hidden
                 }
             }

src/lib/nodes/widgets/ComfyButtonNode.ts

@@ -11,7 +11,6 @@ export default class ComfyButtonNode extends ComfyWidgetNode<boolean> {
     override properties: ComfyButtonProperties = {
         tags: [],
         defaultValue: false,
-        excludeFromJourney: true,
         param: "bang"
     }
 

src/lib/nodes/widgets/ComfyCheckboxNode.ts

@@ -11,7 +11,6 @@ export default class ComfyCheckboxNode extends ComfyWidgetNode<boolean> {
     override properties: ComfyCheckboxProperties = {
         tags: [],
         defaultValue: false,
-        excludeFromJourney: false,
     }
 
     static slotLayout: SlotLayout = {

src/lib/nodes/widgets/ComfyComboNode.ts

@@ -19,8 +19,7 @@ export default class ComfyComboNode extends ComfyWidgetNode<string> {
         tags: [],
         defaultValue: "A",
         values: ["A", "B", "C", "D"],
-        convertValueToLabelCode: "",
-        excludeFromJourney: false,
+        convertValueToLabelCode: ""
     }
 
     static slotLayout: SlotLayout = {
@@ -171,7 +170,6 @@ export default class ComfyComboNode extends ComfyWidgetNode<string> {
         super.stripUserState(o);
         o.properties.values = []
         o.properties.defaultValue = null;
-        (o as any).comfyValue = null
     }
 }
 

src/lib/nodes/widgets/ComfyGalleryNode.ts

@@ -9,7 +9,8 @@ import ComfyWidgetNode from "./ComfyWidgetNode";
 export interface ComfyGalleryProperties extends ComfyWidgetProperties {
     index: number | null,
     updateMode: "replace" | "append",
-    autoSelectOnUpdate: boolean
+    autoSelectOnUpdate: boolean,
+    showPreviews: boolean
 }
 
 export default class ComfyGalleryNode extends ComfyWidgetNode<ComfyBoxImageMetadata[]> {
@@ -19,7 +20,7 @@ export default class ComfyGalleryNode extends ComfyWidgetNode<ComfyBoxImageMetad
         index: 0,
         updateMode: "replace",
         autoSelectOnUpdate: true,
-        excludeFromJourney: true,
+        showPreviews: true
     }
 
     static slotLayout: SlotLayout = {
@@ -131,6 +132,8 @@ export default class ComfyGalleryNode extends ComfyWidgetNode<ComfyBoxImageMetad
 
         const meta = parseWhateverIntoImageMetadata(param) || [];
 
+        console.debug("[ComfyGalleryNode] Received output!", param)
+
         if (updateMode === "append") {
             const currentValue = get(this.value)
             if (meta.length > 0 && (selectedIndex != null || this.properties.autoSelectOnUpdate)) {

src/lib/nodes/widgets/ComfyImageUploadNode.ts

@@ -6,6 +6,7 @@ import ImageUploadWidget from "$lib/widgets/ImageUploadWidget.svelte";
 import type { ComfyWidgetProperties } from "./ComfyWidgetNode";
 import ComfyWidgetNode from "./ComfyWidgetNode";
 import { get, writable, type Writable } from "svelte/store";
+import { type LineGroup } from "$lib/components/MaskCanvas.svelte"
 
 export interface ComfyImageUploadNodeProperties extends ComfyWidgetProperties {
     maskCount: number
@@ -15,8 +16,7 @@ export default class ComfyImageUploadNode extends ComfyWidgetNode<ComfyBoxImageM
     properties: ComfyImageUploadNodeProperties = {
         defaultValue: [],
         tags: [],
-        maskCount: 0,
-        excludeFromJourney: true,
+        maskCount: 0
     }
 
     static slotLayout: SlotLayout = {

src/lib/nodes/widgets/ComfyMarkdownNode.ts

@@ -10,7 +10,6 @@ export default class ComfyMarkdownNode extends ComfyWidgetNode<string> {
     override properties: ComfyMarkdownProperties = {
         tags: [],
         defaultValue: false,
-        excludeFromJourney: true,
     }
 
     static slotLayout: SlotLayout = {

src/lib/nodes/widgets/ComfyMultiRegionNode.ts

@@ -30,8 +30,7 @@ export default class ComfyMultiRegionNode extends ComfyWidgetNode<BoundingBox[]>
         canvasWidth: 512,
         canvasHeight: 512,
         canvasImageURL: null,
-        inputType: "size",
-        excludeFromJourney: false,
+        inputType: "size"
     }
 
     static slotLayout: SlotLayout = {

src/lib/nodes/widgets/ComfyNumberNode.ts

@@ -20,8 +20,7 @@ export default class ComfyNumberNode extends ComfyWidgetNode<number> {
         min: 0,
         max: 10,
         step: 1,
-        precision: 1,
-        excludeFromJourney: false,
+        precision: 1
     }
 
     override svelteComponentType = NumberWidget

src/lib/nodes/widgets/ComfyRadioNode.ts

@@ -16,7 +16,6 @@ export default class ComfyRadioNode extends ComfyWidgetNode<string> {
         tags: [],
         choices: ["Choice A", "Choice B", "Choice C"],
         defaultValue: "Choice A",
-        excludeFromJourney: false,
     }
 
     static slotLayout: SlotLayout = {

src/lib/nodes/widgets/ComfyTextNode.ts

@@ -16,7 +16,6 @@ export default class ComfyTextNode extends ComfyWidgetNode<string> {
         multiline: false,
         lines: 5,
         maxLines: 5,
-        excludeFromJourney: false,
     }
 
     static slotLayout: SlotLayout = {

src/lib/nodes/widgets/ComfyWidgetNode.ts

@@ -37,8 +37,7 @@ export type SerializedComfyWidgetNode = {
  */
 
 export interface ComfyWidgetProperties extends ComfyGraphNodeProperties {
-    defaultValue: any,
-    excludeFromJourney: boolean
+    defaultValue: any
 }
 
 export type ShownOutputProperty = {
@@ -358,9 +357,4 @@ export default abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
         this.value.set(value);
         this.shownOutputProperties = (o as any).shownOutputProperties;
     }
-
-    override stripUserState(o: SerializedLGraphNode) {
-        super.stripUserState(o);
-        (o as any).comfyValue = LiteGraph.cloneObject(this.properties.defaultValue);
-    }
 }

src/lib/restoreParameters.ts

@@ -1,362 +0,0 @@
-import type { INodeInputSlot, NodeID, SerializedLGraph, SerializedLGraphNode } from "@litegraph-ts/core";
-import type { SerializedPrompt } from "./components/ComfyApp";
-import type { ComfyWidgetNode } from "./nodes/widgets";
-import type { SerializedComfyWidgetNode } from "./nodes/widgets/ComfyWidgetNode";
-import { isComfyWidgetNode, type SerializedLayoutState } from "./stores/layoutStates";
-import type { ComfyBoxWorkflow } from "./stores/workflowState";
-import { isSerializedPromptInputLink } from "./utils";
-import ComfyBoxStdPromptSerializer from "./ComfyBoxStdPromptSerializer";
-
-export type RestoreParamType = "workflow" | "backend" | "stdPrompt";
-
-/*
- * Data of a parameter that can be restored. Paired with a parameter name.
- */
-export interface RestoreParamSource<T extends RestoreParamType = any> {
-    type: T,
-
-    /*
-     * A human-readable name for this parameter
-     */
-    name?: string,
-
-    /*
-     * LiteGraph type of the widget node
-     */
-    nodeType: string,
-
-    /*
-     * The actual value to copy to the widget after all conversions have been
-     * applied.
-     */
-    finalValue: any
-}
-
-/*
- * A serialized ComfyWidgetNode from the saved workflow that corresponds
- * *exactly* to a node with the same ID in the current workflow. Easiest case
- * since the parameter value can just be copied without much fuss.
- */
-export interface RestoreParamSourceWorkflowNode extends RestoreParamSource<"workflow"> {
-    type: "workflow",
-
-    prevValue?: any
-}
-
-export type RestoreParamWorkflowNodeTargets = Record<NodeID, RestoreParamSourceWorkflowNode>
-
-/*
- * A value received by the ComfyUI *backend* that corresponds to a value that
- * was held in a ComfyWidgetNode. These may not necessarily be one-to-one
- * because there can be extra frontend-only processing nodes between the two.
- *
- * (Example: a node that converts a random prompt template into a final prompt
- * string, then passes *that* prompt string to the backend. The backend will not
- * see the template string, so it will be missing in the arguments to ComfyUI's
- * prompt endpoint. Hence this parameter source won't account for those kinds of
- * values.)
- */
-export interface RestoreParamSourceBackendNodeInput extends RestoreParamSource<"backend"> {
-    type: "backend",
-
-    backendNode: SerializedComfyWidgetNode,
-
-    /*
-     * If false, this node was connected to the backend node across one or more
-     * additional frontend nodes, so the value in the source may not correspond
-     * exactly to the widget's original value
-     */
-    isDirectAttachment: boolean
-}
-
-/*
- * A value contained in the standard prompt extracted from the saved workflow.
- *
- * This should only be necessary to fall back on if one workflow's parameters
- * are to be used in a completely separate workflow's.
- */
-export interface RestoreParamSourceStdPrompt<T, K extends keyof T> extends RestoreParamSource<"stdPrompt"> {
-    type: "stdPrompt",
-
-    /*
-     * Name of the group containing the value to pass
-     *
-     * "lora"
-     */
-    groupName: string,
-
-    /*
-     * The standard prompt group containing the value and metadata like
-     * "positive"/"negative" for identification use
-     *
-     * { "$meta": { ... }, model_name: "...", model_hashes: [...], ... }
-     */
-    group: T,
-
-    /*
-     * Key of the group parameter holding the actual value
-
-     * "model_name"
-     */
-    key: K,
-
-    /*
-     * The raw value as saved to the prompt, not accounting for stuff like hashes
-     *
-     * "contrastFix"
-     */
-    rawValue: T[K]
-
-    /*
-     * The *actual* value that will be copied into the ComfyWidgetNode, after
-     * conversion to account for filepaths/etc. from prompt adapters has been
-     * completed
-     *
-     * "models/lora/contrastFix.safetensors"
-     */
-    finalValue: any
-}
-
-export type RestoreParamTargets = Record<NodeID, RestoreParamSource[]>
-
-function isSerializedComfyWidgetNode(param: any): param is SerializedComfyWidgetNode {
-    return param != null && typeof param === "object" && "id" in param && "comfyValue" in param
-}
-
-function findUpstreamSerializedWidgetNode(prompt: SerializedPrompt, input: INodeInputSlot): [SerializedComfyWidgetNode | null, boolean | null] {
-    let linkID = input.link;
-    let isDirectAttachment = true;
-
-    while (linkID) {
-        const link = prompt.workflow.links[linkID]
-        if (link == null)
-            return [null, null];
-
-        const originNode = prompt.workflow.nodes.find(n => n.id === link[1])
-        if (isSerializedComfyWidgetNode(originNode))
-            return [originNode, isDirectAttachment]
-
-        isDirectAttachment = false;
-
-        // TODO: getUpstreamLink() for serialized nodes?
-        if (originNode.inputs && originNode.inputs.length === 1)
-            linkID = originNode.inputs[0].link
-        else
-            linkID = null;
-    }
-
-    return [null, null];
-}
-
-const addSource = (result: RestoreParamTargets, targetNode: ComfyWidgetNode, source: RestoreParamSource) => {
-    result[targetNode.id] ||= []
-    result[targetNode.id].push(source);
-}
-
-export function concatRestoreParams(a: RestoreParamTargets, b: Record<NodeID, RestoreParamSource>): RestoreParamTargets {
-    for (const [targetNodeID, source] of Object.entries(b)) {
-        a[targetNodeID] ||= []
-        a[targetNodeID].push(source);
-    }
-    return a;
-}
-
-export function concatRestoreParams2(a: RestoreParamTargets, b: RestoreParamTargets): RestoreParamTargets {
-    for (const [targetNodeID, vs] of Object.entries(b)) {
-        a[targetNodeID] ||= []
-        for (const source of vs) {
-            a[targetNodeID].push(source);
-        }
-    }
-    return a;
-}
-
-/*
- * Like getWorkflowRestoreParams but applies to an instanced (non-serialized) workflow
- */
-export function getWorkflowRestoreParamsFromWorkflow(workflow: ComfyBoxWorkflow, noExclude: boolean = false): RestoreParamWorkflowNodeTargets {
-    const result = {}
-
-    for (const node of workflow.graph.iterateNodesInOrderRecursive()) {
-        if (!isComfyWidgetNode(node))
-            continue;
-
-        if (!noExclude && node.properties.excludeFromJourney)
-            continue;
-
-        let name = null;
-        const realNode = workflow.graph.getNodeByIdRecursive(node.id);
-        if (realNode != null && isComfyWidgetNode(realNode)) {
-            name = realNode.title || name;
-            const widget = realNode.dragItem;
-            if (widget != null) {
-                name = widget.attrs.title || name;
-            }
-        }
-
-        const finalValue = node.getValue();
-        if (finalValue != null) {
-            const source: RestoreParamSourceWorkflowNode = {
-                type: "workflow",
-                nodeType: node.type,
-                name,
-                finalValue,
-            }
-            result[node.id] = source;
-        }
-    }
-
-    return result
-}
-
-export function getWorkflowRestoreParams(serGraph: SerializedLGraph, workflow?: ComfyBoxWorkflow, noExclude: boolean = false): RestoreParamWorkflowNodeTargets {
-    const result = {}
-
-    for (const node of serGraph.nodes) {
-        if (!isSerializedComfyWidgetNode(node))
-            continue;
-
-        if (!noExclude && node.properties.excludeFromJourney)
-            continue;
-
-        let name = null;
-        const realNode = workflow.graph.getNodeByIdRecursive(node.id);
-        if (realNode != null && isComfyWidgetNode(realNode)) {
-            name = realNode.title || name;
-            const widget = realNode.dragItem;
-            if (widget != null) {
-                name = widget.attrs.title || name;
-            }
-        }
-
-        const finalValue = node.comfyValue
-        if (finalValue != null) {
-            const source: RestoreParamSourceWorkflowNode = {
-                type: "workflow",
-                nodeType: node.type,
-                name,
-                prevValue: finalValue,
-                finalValue,
-            }
-            result[node.id] = source;
-        }
-    }
-
-    return result
-}
-
-function* iterateSerializedNodesRecursive(serGraph: SerializedLGraph): Iterable<SerializedLGraphNode> {
-    for (const serNode of serGraph.nodes) {
-        yield serNode;
-
-        if (serNode.type === "graph/subgraph") {
-            for (const childNode of iterateSerializedNodesRecursive((serNode as any).subgraph)) {
-                yield childNode;
-            }
-        }
-    }
-}
-
-export function getWorkflowRestoreParamsUsingLayout(serGraph: SerializedLGraph, layout?: SerializedLayoutState, noExclude: boolean = false): RestoreParamWorkflowNodeTargets {
-    const result = {}
-
-    for (const serNode of iterateSerializedNodesRecursive(serGraph)) {
-        if (!isSerializedComfyWidgetNode(serNode)) {
-            continue;
-        }
-
-        if (!noExclude && serNode.properties.excludeFromJourney) {
-            continue;
-        }
-
-        let name = null;
-        const serWidget = Array.from(Object.values(layout?.allItems || {})).find(di => di.dragItem.type === "widget" && di.dragItem.nodeId === serNode.id)
-        if (serWidget) {
-            name = serWidget.dragItem.attrs.title;
-        }
-
-        const finalValue = serNode.comfyValue
-        if (finalValue != null) {
-            const source: RestoreParamSourceWorkflowNode = {
-                type: "workflow",
-                nodeType: serNode.type,
-                name,
-                finalValue,
-            }
-            result[serNode.id] = source;
-        }
-    }
-
-    return result
-}
-
-export function getBackendRestoreParams(workflow: ComfyBoxWorkflow, prompt: SerializedPrompt): Record<NodeID, RestoreParamSourceBackendNodeInput[]> {
-    const result = {}
-
-    const graph = workflow.graph;
-
-    // Figure out what parameters the backend received. If there was a widget
-    // node attached to a backend node's input upstream, then we can use that
-    // value.
-    for (const [serNodeID, inputs] of Object.entries(prompt.output)) {
-        const serNode = prompt.workflow.nodes.find(sn => sn.id === serNodeID)
-        if (serNode == null)
-            continue;
-
-        for (const [inputName, inputValue] of Object.entries(inputs)) {
-            const input = serNode.inputs.find(i => i.name === inputName);
-            if (input == null)
-                continue;
-
-            if (isSerializedPromptInputLink(inputValue))
-                continue;
-
-            const [originNode, isDirectAttachment] = findUpstreamSerializedWidgetNode(prompt, input)
-
-            if (originNode) {
-                const foundNode = graph.getNodeByIdRecursive(serNode.id);
-                if (isComfyWidgetNode(foundNode) && foundNode.type === serNode.type) {
-                    const source: RestoreParamSourceBackendNodeInput = {
-                        type: "backend",
-                        nodeType: foundNode.type,
-                        finalValue: inputValue,
-                        backendNode: serNode,
-                        isDirectAttachment
-                    }
-                    addSource(result, foundNode, source)
-                }
-            }
-        }
-    }
-
-    return result
-}
-
-export default function getRestoreParameters(workflow: ComfyBoxWorkflow, prompt: SerializedPrompt): RestoreParamTargets {
-    const result = {}
-
-    const workflowParams = getWorkflowRestoreParams(prompt.workflow, workflow);
-    concatRestoreParams(result, workflowParams);
-
-    const backendParams = getBackendRestoreParams(workflow, prompt);
-    concatRestoreParams2(result, backendParams);
-
-    // Step 3: Extract the standard prompt from the workflow and use that to
-    // infer parameter types
-
-    // TODO
-
-    // const serializer = new ComfyBoxStdPromptSerializer();
-    // const stdPrompt = serializer.serialize(prompt);
-
-    // const allWidgetNodes = Array.from(graph.iterateNodesInOrderRecursive()).filter(isComfyWidgetNode);
-
-    // for (const widgetNode of allWidgetNodes) {
-
-    // }
-
-    // for (const [groupName, groups] of Object.entries(stdPrompt)) {
-    // }
-
-    return result;
-}

src/lib/stores/configDefs.ts

@@ -119,6 +119,36 @@ const defNotifications: ConfigDefEnum<"notifications", NotificationState> = {
     }
 };
 
+export enum OutputThumbnailsMode {
+    Auto,
+    AlwaysThumbnail,
+    AlwaysFullSize
+}
+
+const defOutputThumbnails: ConfigDefEnum<"outputThumbnails", OutputThumbnailsMode> = {
+    name: "outputThumbnails",
+    type: "enum",
+    defaultValue: OutputThumbnailsMode.Auto,
+    category: "ui",
+    description: "If enabled, send back smaller sized output image thumbnails for gallery/queue/history. Enable if you have slow network or are using Colab.",
+    options: {
+        values: [
+            {
+                value: OutputThumbnailsMode.Auto,
+                label: "Autodetect"
+            },
+            {
+                value: OutputThumbnailsMode.AlwaysThumbnail,
+                label: "Always use thumbnails"
+            },
+            {
+                value: OutputThumbnailsMode.AlwaysFullSize,
+                label: "Always use full size"
+            },
+        ]
+    }
+};
+
 const defAlwaysStripUserState: ConfigDefBoolean<"alwaysStripUserState"> = {
     name: "alwaysStripUserState",
     type: "boolean",
@@ -207,6 +237,7 @@ export const CONFIG_DEFS = [
     defComfyUIHostname,
     defComfyUIPort,
     defNotifications,
+    defOutputThumbnails,
     defAlwaysStripUserState,
     defPromptForWorkflowName,
     defConfirmWhenUnloadingUnsavedChanges,

src/lib/stores/journeyStates.ts

@@ -1,365 +0,0 @@
-import { get, writable } from 'svelte/store';
-import type { Readable, Writable } from 'svelte/store';
-import { isComfyWidgetNode, type DragItemID, type IDragItem } from './layoutStates';
-import { LiteGraph, type LGraphNode, type NodeID, type UUID } from '@litegraph-ts/core';
-import type { SerializedAppState } from '$lib/components/ComfyApp';
-import { getWorkflowRestoreParamsFromWorkflow, type RestoreParamSourceWorkflowNode, type RestoreParamTargets, type RestoreParamWorkflowNodeTargets } from '$lib/restoreParameters';
-import { v4 as uuidv4 } from "uuid";
-import deepEqual from "deep-equal";
-import notify from '$lib/notify';
-import type { ComfyBoxWorkflow } from './workflowState';
-import type { ComfyNodeID, PromptID } from '$lib/api';
-import type { SerializedPromptOutput } from '$lib/utils';
-import type { QueueEntry } from './queueState';
-
-export type JourneyNodeType = "root" | "patch";
-
-export type JourneyNodeID = UUID;
-
-export interface JourneyNode {
-    id: JourneyNodeID,
-    type: JourneyNodeType,
-    children: JourneyPatchNode[],
-    promptIDs: Set<PromptID>,
-    images?: string[]
-}
-
-export interface JourneyRootNode extends JourneyNode {
-    type: "root"
-
-    /*
-     * This contains all the values of the workflow to set
-     */
-    base: RestoreParamWorkflowNodeTargets
-}
-
-export interface JourneyPatchNode extends JourneyNode {
-    type: "patch"
-
-    parent: JourneyNode,
-
-    /*
-     * This contains only the subset of parameters that were changed from the
-     * parent
-     */
-    patch: RestoreParamWorkflowNodeTargets
-}
-
-function isRoot(node: JourneyNode): node is JourneyRootNode {
-    return node.type === "root";
-}
-
-function isPatch(node: JourneyNode): node is JourneyPatchNode {
-    return node.type === "patch";
-}
-
-export function resolvePatch(node: JourneyNode, memoize?: Record<JourneyNodeID, RestoreParamWorkflowNodeTargets>): RestoreParamWorkflowNodeTargets {
-    if (node.type === "root") {
-        return { ...(node as JourneyRootNode).base }
-    }
-
-    if (memoize && memoize[node.id] != null)
-        return { ...memoize[node.id] }
-
-    const patchNode = (node as JourneyPatchNode);
-    const patch = { ...patchNode.patch };
-    const base = resolvePatch(patchNode.parent);
-    for (const [k, v] of Object.entries(patch)) {
-        base[k] = v;
-    }
-
-    if (memoize) {
-        memoize[node.id] = base;
-    }
-
-    return base;
-}
-
-export function diffParams(base: RestoreParamWorkflowNodeTargets, updated: RestoreParamWorkflowNodeTargets): RestoreParamWorkflowNodeTargets {
-    const result = {}
-
-    for (const [k, v] of Object.entries(updated)) {
-        if (!(k in base) || !deepEqual(base[k].finalValue, v.finalValue, { strict: true })) {
-            result[k] = v
-            v.prevValue = base[k].finalValue
-        }
-    }
-
-    return result;
-}
-
-export function calculateWorkflowParamsPatch(parent: JourneyNode, newParams: RestoreParamWorkflowNodeTargets): RestoreParamWorkflowNodeTargets {
-    const patch = resolvePatch(parent);
-    const diff = diffParams(patch, newParams)
-    return diff;
-}
-
-/*
- * A "journey" is like browser history for prompts, except organized in a
- * tree-like graph. It lets you save incremental changes to your workflow and
- * jump between past and present sets of parameters.
- */
-export type JourneyState = {
-    root: JourneyRootNode | null,
-    nodesByID: Record<JourneyNodeID, JourneyNode>,
-    nodesByPromptID: Record<PromptID, JourneyNode>,
-    activeNodeID: JourneyNodeID | null,
-
-    /*
-     * Incremented when graph structure is updated
-     */
-    version: number
-}
-
-type JourneyStateOps = {
-    clear: () => void,
-    getActiveNode: () => JourneyNode | null,
-    // addNode: (params: RestoreParamWorkflowNodeTargets, parent?: JourneyNodeID | JourneyNode) => JourneyNode,
-    selectNode: (id?: JourneyNodeID | JourneyNode) => void,
-    iterateBreadthFirst: (id?: JourneyNodeID | null) => Iterable<JourneyNode>,
-    iterateLinearPath: (id: JourneyNodeID) => Iterable<JourneyNode>,
-    pushPatchOntoActive: (workflow: ComfyBoxWorkflow, activeNode?: JourneyNode, showNotification?: boolean) => JourneyNode | null
-    afterQueued: (journeyNode: JourneyNode, promptID: PromptID) => void,
-    onExecuted: (promptID: PromptID, nodeID: ComfyNodeID, output: SerializedPromptOutput, queueEntry: QueueEntry) => void
-}
-
-export type WritableJourneyStateStore = Writable<JourneyState> & JourneyStateOps;
-
-function create() {
-    const store: Writable<JourneyState> = writable(
-        {
-            root: null,
-            nodesByID: {},
-            nodesByPromptID: {},
-            activeNodeID: null,
-            version: 0
-        })
-
-    function clear() {
-        store.set({
-            root: null,
-            nodesByID: {},
-            nodesByPromptID: {},
-            activeNodeID: null,
-            version: 0
-        })
-    }
-
-    function getActiveNode(): JourneyNode | null {
-        const state = get(store)
-        if (state.activeNodeID === null)
-            return null;
-        const active = state.nodesByID[state.activeNodeID]
-        if (active == null) {
-            console.error("[journeyStates] Active node not found in graph!", state.activeNodeID);
-        }
-        return active;
-    }
-
-    /*
-     * params: full state or state patch of widgets in the UI
-     * parent: parent node to patch against
-     */
-    function addNode(params: RestoreParamWorkflowNodeTargets, parent?: JourneyNodeID | JourneyNode): JourneyNode {
-        let _node: JourneyRootNode | JourneyPatchNode;
-
-        store.update(s => {
-            let parentNode: JourneyNode | null = null
-            if (parent != null) {
-                if (typeof parent === "object")
-                    parent = parent.id;
-                parentNode = s.nodesByID[parent];
-                if (parentNode == null) {
-                    throw new Error(`Could not find parent node ${parent} to insert into!`)
-                }
-            }
-            if (parentNode == null) {
-                _node = {
-                    id: uuidv4(),
-                    type: "root",
-                    children: [],
-                    promptIDs: new Set(),
-                    base: { ...params }
-                }
-                s.root = _node
-            }
-            else {
-                _node = {
-                    id: uuidv4(),
-                    type: "patch",
-                    parent: parentNode,
-                    children: [],
-                    promptIDs: new Set(),
-                    patch: params,
-                }
-                parentNode.children.push(_node);
-            }
-            s.nodesByID[_node.id] = _node;
-            s.version += 1;
-            return s;
-        });
-        return _node;
-    }
-
-    function pushPatchOntoActive(workflow: ComfyBoxWorkflow, activeNode?: JourneyNode, showNotification: boolean = false): JourneyNode | null {
-        const workflowParams = getWorkflowRestoreParamsFromWorkflow(workflow)
-
-        let journeyNode
-
-        if (activeNode == null) {
-            // add root node
-            if (get(store).root != null) {
-                console.debug("[journeyStates] Root already exists")
-                return null;
-            }
-            journeyNode = addNode(workflowParams, null);
-            if (showNotification)
-                notify("Pushed a new base workflow state.", { type: "info" })
-        }
-        else {
-            // add patch node
-            const patch = calculateWorkflowParamsPatch(activeNode, workflowParams);
-            const patchedCount = Object.keys(patch).length;
-            if (patchedCount === 0) {
-                console.debug("[journeyStates] Patch had no diff")
-                if (showNotification)
-                    notify("No changes were made to active parameters yet.", { type: "warning" })
-                return null;
-            }
-            journeyNode = addNode(patch, activeNode);
-            if (showNotification)
-                notify(`Pushed new state with ${patchedCount} changes.`, { type: "info" })
-        }
-
-        if (journeyNode != null) {
-            selectNode(journeyNode);
-        }
-
-        console.debug("[journeyStates] added node", journeyNode)
-        return journeyNode;
-    }
-
-    function selectNode(obj?: JourneyNodeID | JourneyNode) {
-        store.update(s => {
-            if (typeof obj === "string")
-                s.activeNodeID = obj;
-            else
-                s.activeNodeID = obj.id;
-            return s;
-        })
-    }
-
-    // function removeNode(id: JourneyNodeID) {
-    //     store.update(s => {
-    //         const node = s.nodesByID[id];
-    //         if (node == null) {
-    //             throw new Error(`Journey node not found: ${id}`)
-    //         }
-
-    //         if (node.type === "patch") {
-
-    //         }
-    //         else {
-    //             s.root = null;
-    //         }
-
-    //         delete s.nodesByID[id];
-    //         s.version += 1;
-
-    //         return s;
-    //     });
-    // }
-
-    function* iterateBreadthFirst(id?: JourneyNodeID | null): Iterable<JourneyNode> {
-        const state = get(store);
-
-        id ||= state.root?.id;
-        if (id == null)
-            return;
-
-        const queue = [state.nodesByID[id]];
-        while (queue.length > 0) {
-            const node = queue.shift();
-            yield node;
-            if (node.children) {
-                for (const child of node.children) {
-                    queue.push(state.nodesByID[child.id]);
-                }
-            }
-        }
-    }
-
-    function* iterateNodeParents(node: JourneyNode): Iterable<JourneyNode> {
-        while (isPatch(node)) {
-            yield node.parent;
-            node = node.parent;
-        }
-    }
-
-    function iterateLinearPath(id: JourneyNodeID): Iterable<JourneyNode> {
-        const state = get(store);
-
-        const node = state.nodesByID[id];
-        if (node == null) {
-            console.error("[journeyStates] Journey node not found!", id);
-            return
-        }
-
-        let path = Array.from(iterateNodeParents(node)).reverse()
-        path.push(node)
-
-        // pick first child for nodes downstream
-        let child = node.children[0]
-        while (child != null) {
-            path.push(child);
-            child = child.children[0];
-        }
-
-        return path;
-    }
-
-    function afterQueued(journeyNode: JourneyNode, promptID: PromptID) {
-        journeyNode.promptIDs.add(promptID);
-        store.update(s => {
-            s.nodesByPromptID[promptID] = journeyNode;
-            return s;
-        })
-    }
-
-    function onExecuted(promptID: PromptID, nodeID: ComfyNodeID, output: SerializedPromptOutput, queueEntry: QueueEntry) {
-        const journeyNode = get(store).nodesByPromptID[promptID];
-        if (journeyNode == null)
-            return;
-
-        // TODO
-        store.update(s => {
-            s.version += 1;
-            s.activeNodeID = journeyNode.id;
-            return s;
-        })
-    }
-
-    return {
-        ...store,
-        getActiveNode,
-        clear,
-        // addNode,
-        pushPatchOntoActive,
-        selectNode,
-        iterateBreadthFirst,
-        iterateLinearPath,
-        afterQueued,
-        onExecuted,
-    }
-}
-
-export type JourneyStateStaticOps = {
-    create: () => WritableJourneyStateStore
-}
-
-// These will be attached to workflows.
-const ops: JourneyStateStaticOps = {
-    create
-}
-
-export default ops

src/lib/stores/layoutStates.ts

@@ -512,14 +512,6 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 serialize: serializeStringArray,
                 deserialize: deserializeStringArray
             },
-            {
-                name: "excludeFromJourney",
-                type: "boolean",
-                location: "nodeProps",
-                editable: true,
-                defaultValue: false,
-                canShow: isComfyWidgetNode
-            },
 
             // Container tags are contained in the widget attributes
             {
@@ -623,6 +615,14 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 validNodeTypes: ["ui/gallery"],
                 defaultValue: true
             },
+            {
+                name: "showPreviews",
+                type: "boolean",
+                location: "nodeProps",
+                editable: true,
+                validNodeTypes: ["ui/gallery"],
+                defaultValue: true
+            },
 
             // ImageUpload
             {

src/lib/stores/queueState.ts

@@ -22,6 +22,7 @@ type QueueStateOps = {
     executionCached: (promptID: PromptID, nodes: ComfyNodeID[]) => void,
     executionError: (error: ComfyExecutionError) => CompletedQueueEntry | null,
     progressUpdated: (progress: Progress) => void
+    previewUpdated: (imageBlob: Blob) => void
     getQueueEntry: (promptID: PromptID) => QueueEntry | null;
     afterQueued: (workflowID: WorkflowInstID, promptID: PromptID, number: number, prompt: SerializedPromptInputsAll, extraData: any) => void
     queueItemDeleted: (type: QueueItemType, id: PromptID) => void;
@@ -36,7 +37,7 @@ type QueueStateOps = {
 export type QueueEntry = {
     /*** Data preserved on page refresh ***/
 
-    /** Priority of the prompt. Lower/negative numbers get higher priority. */
+    /** Priority of the prompt. -1 means to queue at the front. */
     number: number,
     queuedAt?: Date,
     finishedAt?: Date,
@@ -88,6 +89,11 @@ export type QueueState = {
      */
     runningNodeID: ComfyNodeID | null;
 
+    /*
+     * Currently executing prompt if any
+     */
+    runningPromptID: PromptID | null;
+
     /*
      * Nodes which should be rendered as "executing" in the frontend (green border).
      * This includes the running node and all its parent subgraphs
@@ -98,6 +104,12 @@ export type QueueState = {
      * Progress for the current node reported by the frontend
      */
     progress: Progress | null,
+
+    /*
+     * Image preview URL
+     */
+    previewURL: string | null,
+
     /**
      * If true, user pressed the "Interrupt" button in the frontend. Disable the
      * button and wait until the next prompt starts running to re-enable it
@@ -115,6 +127,7 @@ const store: Writable<QueueState> = writable({
     runningNodeID: null,
     executingNodes: new Set(),
     progress: null,
+    preview: null,
     isInterrupting: false
 })
 
@@ -171,6 +184,19 @@ function progressUpdated(progress: Progress) {
     })
 }
 
+function previewUpdated(imageBlob: Blob) {
+    console.debug("[queueState] previewUpdated", imageBlob?.type)
+    store.update(s => {
+        if (s.runningNodeID == null) {
+            s.previewURL = null;
+            return s;
+        }
+
+        s.previewURL = URL.createObjectURL(imageBlob);
+        return s;
+    })
+}
+
 function statusUpdated(status: ComfyAPIStatusResponse | null) {
     console.debug("[queueState] statusUpdated", status)
     store.update((s) => {
@@ -296,6 +322,7 @@ function executingUpdated(promptID: PromptID, runningNodeID: ComfyNodeID | null)
                 entry.nodesRan.add(runningNodeID)
             }
             s.runningNodeID = runningNodeID;
+            s.runningPromptID = promptID;
 
             if (entry?.extraData?.workflowID) {
                 const workflow = workflowState.getWorkflow(entry.extraData.workflowID);
@@ -337,7 +364,9 @@ function executingUpdated(promptID: PromptID, runningNodeID: ComfyNodeID | null)
                 console.debug("[queueState] Could not find in pending! (executingUpdated)", promptID)
             }
             s.progress = null;
+            s.previewURL = null;
             s.runningNodeID = null;
+            s.runningPromptID = null;
             s.executingNodes.clear();
         }
         entry_ = entry;
@@ -362,7 +391,9 @@ function executionCached(promptID: PromptID, nodes: ComfyNodeID[]) {
         }
         s.isInterrupting = false; // TODO move to start
         s.progress = null;
+        s.previewURL = null;
         s.runningNodeID = null;
+        s.runningPromptID = null;
         s.executingNodes.clear();
         return s
     })
@@ -380,7 +411,9 @@ function executionError(error: ComfyExecutionError): CompletedQueueEntry | null
             console.error("[queueState] Could not find in pending! (executionError)", error.prompt_id)
         }
         s.progress = null;
+        s.previewURL = null;
         s.runningNodeID = null;
+        s.runningPromptID = null;
         s.executingNodes.clear();
         return s
     })
@@ -416,6 +449,7 @@ function executionStart(promptID: PromptID) {
         }
         s.isInterrupting = false;
         s.runningNodeID = null;
+        s.runningPromptID = promptID;
         s.executingNodes.clear();
         return s
     })
@@ -480,7 +514,9 @@ function queueCleared(type: QueueItemType) {
             s.queuePending.set([]);
             s.queueRemaining = 0;
             s.runningNodeID = null;
+            s.runningPromptID = null;
             s.progress = null;
+            s.previewURL = null;
             s.executingNodes.clear();
         }
         else {
@@ -535,6 +571,7 @@ const queueStateStore: WritableQueueStateStore =
     historyUpdated,
     statusUpdated,
     progressUpdated,
+    previewUpdated,
     executionStart,
     executingUpdated,
     executionCached,

src/lib/stores/selectionState.ts

@@ -24,12 +24,7 @@ export type SelectionState = {
     /*
      * Currently hovered nodes.
      */
-    currentHoveredNodes: Set<NodeID>,
-
-    /*
-     * Nodes affected by the patch hovered in the journey pane
-     */
-    currentPatchHoveredNodes: Set<NodeID>
+    currentHoveredNodes: Set<NodeID>
 }
 
 type SelectionStateOps = {
@@ -43,7 +38,6 @@ const store: Writable<SelectionState> = writable(
         currentSelectionNodes: [],
         currentHovered: new Set(),
         currentHoveredNodes: new Set(),
-        currentPatchHoveredNodes: new Set(),
     })
 
 function clear() {
@@ -52,13 +46,12 @@ function clear() {
         currentSelectionNodes: [],
         currentHovered: new Set(),
         currentHoveredNodes: new Set(),
-        currentPatchHoveredNodes: new Set(),
     })
 }
 
-const selectionStateStore: WritableSelectionStateStore =
+const uiStateStore: WritableSelectionStateStore =
 {
     ...store,
     clear
 }
-export default selectionStateStore;
+export default uiStateStore;

src/lib/stores/uiQueueState.ts

@@ -1,7 +1,8 @@
 import type { PromptID, QueueItemType } from '$lib/api';
+import type { ComfyImageLocation } from "$lib/utils";
 import { get, writable } from 'svelte/store';
 import type { Readable, Writable } from 'svelte/store';
-import queueState, { type CompletedQueueEntry, type QueueEntry } from './queueState';
+import queueState, { QueueEntryStatus, type CompletedQueueEntry, type QueueEntry } from './queueState';
 import type { WorkflowError } from './workflowState';
 import { convertComfyOutputToComfyURL } from '$lib/utils';
 
@@ -13,7 +14,7 @@ export type QueueUIEntry = {
     submessage: string,
     date?: string,
     status: QueueUIEntryStatus,
-    images?: string[], // URLs
+    images?: ComfyImageLocation[], // URLs
     details?: string, // shown in a tooltip on hover
     error?: WorkflowError
 }
@@ -62,7 +63,7 @@ function convertEntry(entry: QueueEntry, status: QueueUIEntryStatus): QueueUIEnt
 
     const subgraphs: string[] | null = entry.extraData?.extra_pnginfo?.comfyBoxPrompt?.subgraphs;
 
-    let message = `#${entry.number}: Prompt`;
+    let message = "Prompt";
     if (entry.extraData?.workflowTitle != null) {
         message = `${entry.extraData.workflowTitle}`
     }
@@ -72,7 +73,7 @@ function convertEntry(entry: QueueEntry, status: QueueUIEntryStatus): QueueUIEnt
         message += ` (${subgraphsString})`
     }
 
-    let submessage = `Nodes: ${Object.keys(entry.prompt).length}`
+    let submessage = `#: ${entry.number}, Nodes: ${Object.keys(entry.prompt).length}`
 
     if (Object.keys(entry.outputs).length > 0) {
         const imageCount = Object.values(entry.outputs).filter(o => o.images).flatMap(o => o.images).length
@@ -89,22 +90,17 @@ function convertEntry(entry: QueueEntry, status: QueueUIEntryStatus): QueueUIEnt
     }
 }
 
-export function getQueueEntryImages(queueEntry: QueueEntry): string[] {
-    return Object.values(queueEntry.outputs)
-        .filter(o => o.images)
-        .flatMap(o => o.images)
-        .map(convertComfyOutputToComfyURL);
-}
-
 function convertPendingEntry(entry: QueueEntry, status: QueueUIEntryStatus): QueueUIEntry {
     const result = convertEntry(entry, status);
 
     const thumbnails = entry.extraData?.thumbnails
     if (thumbnails) {
-        result.images = thumbnails.map(convertComfyOutputToComfyURL);
+        result.images = [...thumbnails]
     }
 
-    const outputs = getQueueEntryImages(entry);
+    const outputs = Object.values(entry.outputs)
+        .filter(o => o.images)
+        .flatMap(o => o.images)
     if (outputs) {
         result.images = result.images.concat(outputs)
     }
@@ -115,7 +111,10 @@ function convertPendingEntry(entry: QueueEntry, status: QueueUIEntryStatus): Que
 function convertCompletedEntry(entry: CompletedQueueEntry): QueueUIEntry {
     const result = convertEntry(entry.entry, entry.status);
 
-    result.images = getQueueEntryImages(entry.entry)
+    const images = Object.values(entry.entry.outputs)
+        .filter(o => o.images)
+        .flatMap(o => o.images)
+    result.images = images
 
     if (entry.message)
         result.submessage = entry.message
@@ -132,10 +131,8 @@ function updateFromQueue(queuePending: QueueEntry[], queueRunning: QueueEntry[])
         // newest entries appear at the top
         s.queuedEntries = queuePending.map((e) => convertPendingEntry(e, "pending")).reverse();
         s.runningEntries = queueRunning.map((e) => convertPendingEntry(e, "running")).reverse();
-
         s.queuedEntries.sort((a, b) => a.entry.number - b.entry.number)
         s.runningEntries.sort((a, b) => a.entry.number - b.entry.number)
-
         s.queueUIEntries = s.queuedEntries.concat(s.runningEntries);
         console.warn("[ComfyQueue] BUILDQUEUE", s.queuedEntries.length, s.runningEntries.length)
         return s;

src/lib/stores/uiState.ts

@@ -10,13 +10,12 @@ export type UIState = {
     autoAddUI: boolean,
     uiUnlocked: boolean,
     uiEditMode: UIEditMode,
+    hidePreviews: boolean,
 
     reconnecting: boolean,
     forceSaveUserState: boolean | null,
 
     activeError: PromptID | null
-
-    saveHistory: boolean
 }
 
 type UIStateOps = {
@@ -32,13 +31,12 @@ const store: Writable<UIState> = writable(
         autoAddUI: true,
         uiUnlocked: false,
         uiEditMode: "widgets",
+        hidePreviews: false,
 
         reconnecting: false,
         forceSaveUserState: null,
 
-        activeError: null,
-
-        saveHistory: true
+        activeError: null
     })
 
 function reconnecting() {

src/lib/stores/workflowState.ts

@@ -2,7 +2,7 @@ import type { SerializedGraphCanvasState } from '$lib/ComfyGraphCanvas';
 import { clamp, LGraphNode, type LGraphCanvas, type NodeID, type SerializedLGraph, type UUID, LGraph, LiteGraph, type SlotType, NodeMode } from '@litegraph-ts/core';
 import { get, writable } from 'svelte/store';
 import type { Readable, Writable } from 'svelte/store';
-import { defaultWorkflowAttributes, isComfyWidgetNode, type SerializedLayoutState, type WritableLayoutStateStore } from './layoutStates';
+import { defaultWorkflowAttributes, type SerializedLayoutState, type WritableLayoutStateStore } from './layoutStates';
 import ComfyGraph from '$lib/ComfyGraph';
 import layoutStates from './layoutStates';
 import { v4 as uuidv4 } from "uuid";
@@ -12,9 +12,6 @@ import type { SerializedAppState, SerializedPrompt } from '$lib/components/Comfy
 import type ComfyReceiveOutputNode from '$lib/nodes/actions/ComfyReceiveOutputNode';
 import type { ComfyBoxPromptExtraData, PromptID } from '$lib/api';
 import type { ComfyAPIPromptErrorResponse, ComfyExecutionError } from '$lib/apiErrors';
-import type { WritableJourneyStateStore } from './journeyState';
-import journeyStates from './journeyStates';
-import type { RestoreParamWorkflowNodeTargets } from '$lib/restoreParameters';
 
 type ActiveCanvas = {
     canvas: LGraphCanvas | null;
@@ -118,12 +115,7 @@ export class ComfyBoxWorkflow {
     /*
      * Completed queue entry ID that holds the last validation/execution error.
      */
-    lastError?: PromptID;
-
-    /*
-     * Saved prompt history ("journey") for this workflow
-     */
-    journey: WritableJourneyStateStore;
+    lastError?: PromptID
 
     get layout(): WritableLayoutStateStore | null {
         return layoutStates.getLayout(this.id)
@@ -141,7 +133,6 @@ export class ComfyBoxWorkflow {
             title,
         }
         this.graph = new ComfyGraph(this.id);
-        this.journey = journeyStates.create();
     }
 
     notifyModified() {
@@ -213,21 +204,6 @@ export class ComfyBoxWorkflow {
         }
     }
 
-    applyParamsPatch(patch: RestoreParamWorkflowNodeTargets) {
-        for (const [nodeId, source] of Object.entries(patch)) {
-            const node = this.graph.getNodeByIdRecursive(nodeId);
-            if (node == null) {
-                console.error("[applyParamsPatch] Node was missing in patch!!", nodeId, source)
-                continue;
-            }
-            if (!isComfyWidgetNode(node)) {
-                console.error("[applyParamsPatch] Node was not ComfyWidgetNode!!", nodeId, source)
-                continue;
-            }
-            node.value.set(source.finalValue);
-        }
-    }
-
     /*
      * Creates a workflow and layout.
      *

src/lib/utils.ts

@@ -4,11 +4,12 @@ import type { FileData as GradioFileData } from "@gradio/upload";
 import { Subgraph, type LGraph, type LGraphNode, type LLink, type SerializedLGraph, type UUID, type NodeID, type SlotType, type Vector4, type SerializedLGraphNode } from "@litegraph-ts/core";
 import { get } from "svelte/store";
 import type { ComfyNodeID } from "./api";
+import ComfyApp, { type SerializedPrompt } from "./components/ComfyApp";
 import workflowState, { type WorkflowReceiveOutputTargets } from "./stores/workflowState";
-import ComfyApp, { type SerializedPrompt, type SerializedPromptInput, type SerializedPromptInputLink } from "./components/ComfyApp";
 import { ImageViewer } from "./ImageViewer";
 import configState from "$lib/stores/configState";
 import SendOutputModal, { type SendOutputModalResult } from "$lib/components/modal/SendOutputModal.svelte";
+import { OutputThumbnailsMode } from "./stores/configDefs";
 
 export function clamp(n: number, min: number, max: number): number {
     if (max <= min)
@@ -143,10 +144,6 @@ export function stopDrag(evt: MouseEvent, layoutState: WritableLayoutStateStore)
     layoutState.notifyWorkflowModified();
 };
 
-export function isSerializedPromptInputLink(inputValue: SerializedPromptInput): inputValue is SerializedPromptInputLink {
-    return Array.isArray(inputValue) && inputValue.length === 2 && typeof inputValue[0] === "string" && typeof inputValue[1] === "number"
-}
-
 export function graphToGraphVis(graph: LGraph): string {
     let links: string[] = []
     let seenLinks = new Set()
@@ -251,7 +248,7 @@ export function promptToGraphVis(prompt: SerializedPrompt): string {
             for (const pair2 of Object.entries(o.inputs)) {
                 const [inpName, i] = pair2;
 
-                if (isSerializedPromptInputLink(i)) {
+                if (Array.isArray(i) && i.length === 2 && typeof i[0] === "string" && typeof i[1] === "number") {
                     // Link
                     const [inpID, inpSlot] = i;
                     if (ids[inpID] == null)
@@ -304,31 +301,80 @@ export function convertComfyOutputToGradio(output: SerializedPromptOutput): Grad
 
 export function convertComfyOutputEntryToGradio(r: ComfyImageLocation): GradioFileData {
     const url = configState.getBackendURL();
-    const params = new URLSearchParams(r)
     const fileData: GradioFileData = {
         name: r.filename,
         orig_name: r.filename,
         is_file: false,
-        data: url + "/view?" + params
+        data: convertComfyOutputToComfyURL(r)
     }
     return fileData
 }
 
-export function convertComfyOutputToComfyURL(output: string | ComfyImageLocation): string {
+function convertComfyPreviewTypeToString(preview: ComfyImagePreviewType): string {
+    const arr = []
+    switch (preview.format) {
+        case ComfyImagePreviewFormat.JPEG:
+            arr.push("jpeg")
+            break;
+        case ComfyImagePreviewFormat.WebP:
+        default:
+            arr.push("webp")
+            break;
+    }
+
+    arr.push(String(preview.quality))
+
+    return arr.join(";")
+}
+
+export function convertComfyOutputToComfyURL(output: string | ComfyImageLocation, thumbnail: boolean = false): string {
     if (typeof output === "string")
         return output;
 
-    const params = new URLSearchParams(output)
+    const paramsObj = {
+        filename: output.filename,
+        subfolder: output.subfolder,
+        type: output.type
+    }
+
+    if (thumbnail) {
+        let doThumbnail: boolean;
+
+        switch (get(configState).outputThumbnails) {
+            case OutputThumbnailsMode.AlwaysFullSize:
+                doThumbnail = false;
+                break;
+            case OutputThumbnailsMode.AlwaysThumbnail:
+                doThumbnail = true;
+                break;
+            case OutputThumbnailsMode.Auto:
+            default:
+                // TODO detect colab, etc.
+                if (isMobileBrowser(navigator.userAgent)) {
+                    doThumbnail = true;
+                }
+                else {
+                    doThumbnail = false;
+                }
+                break;
+        }
+
+        if (doThumbnail) {
+            output.preview = {
+                format: ComfyImagePreviewFormat.WebP,
+                quality: 80
+            }
+        }
+    }
+
+    if (output.preview != null)
+        paramsObj["preview"] = convertComfyPreviewTypeToString(output.preview)
+
+    const params = new URLSearchParams(paramsObj)
     const url = configState.getBackendURL();
     return url + "/view?" + params
 }
 
-export function convertGradioFileDataToComfyURL(image: GradioFileData, type: ComfyUploadImageType = "input"): string {
-    const baseUrl = configState.getBackendURL();
-    const params = new URLSearchParams({ filename: image.name, subfolder: "", type })
-    return `${baseUrl}/view?${params}`
-}
-
 export function convertGradioFileDataToComfyOutput(fileData: GradioFileData, type: ComfyUploadImageType = "input"): ComfyImageLocation {
     if (!fileData.is_file)
         throw "Can't convert blob data to comfy output!"
@@ -340,18 +386,6 @@ export function convertGradioFileDataToComfyOutput(fileData: GradioFileData, typ
     }
 }
 
-export function convertFilenameToComfyURL(filename: string,
-    subfolder: string = "",
-    type: "input" | "output" | "temp" = "output"): string {
-    const params = new URLSearchParams({
-        filename,
-        subfolder,
-        type
-    })
-    const url = configState.getBackendURL();
-    return url + "/view?" + params
-}
-
 export function jsonToJsObject(json: string): string {
     // Try to parse, to see if it's real JSON
     JSON.parse(json);
@@ -417,6 +451,16 @@ export interface SerializedPromptOutput {
     [key: string]: any
 }
 
+export enum ComfyImagePreviewFormat {
+    WebP = "webp",
+    JPEG = "jpeg",
+}
+
+export type ComfyImagePreviewType = {
+    format: ComfyImagePreviewFormat,
+    quality: number
+}
+
 /** Raw output entry as received from ComfyUI's backend */
 export type ComfyImageLocation = {
     /* Filename with extension in the subfolder. */
@@ -424,7 +468,19 @@ export type ComfyImageLocation = {
     /* Subfolder in the containing folder. */
     subfolder: string,
     /* Base ComfyUI folder where the image is located. */
-    type: ComfyUploadImageType
+    type: ComfyUploadImageType,
+    /*
+     * Preview information
+     *
+     * "format;quality"
+     *
+     * ex)
+     * webp;50 -> webp, quality 50
+     * webp;50 -> webp, quality 50
+     * jpeg;80 -> rgb, jpeg, quality 80
+     *
+     */
+    preview?: ComfyImagePreviewType
 }
 
 /*
@@ -548,27 +604,54 @@ export function comfyBoxImageToComfyURL(image: ComfyBoxImageMetadata): string {
     return convertComfyOutputToComfyURL(image.comfyUIFile)
 }
 
+function parseComfyUIPreviewType(previewStr: string): ComfyImagePreviewType {
+    let split = previewStr.split(";")
+    let format = ComfyImagePreviewFormat.WebP;
+    if (split[0] === "webp")
+        format = ComfyImagePreviewFormat.WebP;
+    else if (split[0] === "jpeg")
+        format = ComfyImagePreviewFormat.JPEG;
+
+    let quality = parseInt(split[0])
+    if (isNaN(quality))
+        quality = 80
+
+    return { format, quality }
+}
+
 export function comfyURLToComfyFile(urlString: string): ComfyImageLocation | null {
     const url = new URL(urlString);
     const params = new URLSearchParams(url.search);
     const filename = params.get("filename")
     const type = params.get("type") as ComfyUploadImageType;
     const subfolder = params.get("subfolder") || ""
+    const previewStr = params.get("preview") || null;
+    let preview = null
+
+    if (previewStr != null) {
+        preview = parseComfyUIPreviewType(preview);
+    }
 
     // If at least filename and type exist then we're good
     if (filename != null && type != null) {
-        return { filename, type, subfolder }
+        return { filename, type, subfolder, preview }
     }
 
     return null;
 }
 
-export function showLightbox(images: string[], index: number, e: Event) {
+export function showLightbox(images: ComfyImageLocation[] | string[], index: number, e: Event) {
     e.preventDefault()
     if (!images)
         return
 
-    ImageViewer.instance.showModal(images, index);
+    let images_: string[]
+    if (typeof images[0] === "object")
+        images_ = (images as ComfyImageLocation[]).map(v => convertComfyOutputToComfyURL(v))
+    else
+        images_ = (images as string[])
+
+    ImageViewer.instance.showModal(images_, index);
 
     e.stopPropagation()
 }
@@ -746,6 +829,8 @@ export function isMobileBrowser(userAgent: string): boolean {
     return MOBILE_USER_AGENTS.some(a => userAgent.match(a))
 }
 
-export function isMultiline(input: any, splitLength: number = 50): boolean {
-    return typeof input === "string" && (input.length > splitLength || countNewLines(input) > 1);
+export function vibrateIfPossible(strength: number | Array<number>) {
+  if (window.navigator.vibrate) {
+    window.navigator.vibrate(strength);
+  }
 }

src/lib/widgets/ButtonWidget.svelte

@@ -3,6 +3,7 @@
  import { Button } from "@gradio/button";
  import { get, type Writable, writable } from "svelte/store";
  import { isDisabled } from "./utils"
+ import { vibrateIfPossible } from "$lib/utils";
  import type { ComfyButtonNode } from "$lib/nodes/widgets";
 
  export let widget: WidgetLayout | null = null;
@@ -24,7 +25,7 @@
 
  function onClick(e: MouseEvent) {
      node.onClick();
-     navigator.vibrate(20)
+     vibrateIfPossible(20)
  }
 
  const style = {

src/lib/widgets/CheckboxWidget.svelte

@@ -4,6 +4,7 @@
  import { Checkbox } from "@gradio/form";
  import { get, type Writable, writable } from "svelte/store";
  import { isDisabled } from "./utils"
+ import { vibrateIfPossible } from "$lib/utils";
  import type { SelectData } from "@gradio/utils";
  import type { ComfyCheckboxNode } from "$lib/nodes/widgets";
 
@@ -25,7 +26,7 @@
 
  function onSelect(e: CustomEvent<SelectData>) {
      $nodeValue = e.detail.selected
-     navigator.vibrate(20)
+     vibrateIfPossible(20)
  }
 </script>
 

src/lib/widgets/ComboWidget.svelte

@@ -8,7 +8,7 @@
  import { type WidgetLayout } from "$lib/stores/layoutStates";
  import { get, writable, type Writable } from "svelte/store";
  import { isDisabled } from "./utils"
- import { clamp, getSafetensorsMetadata } from '$lib/utils';
+ import { clamp, getSafetensorsMetadata, vibrateIfPossible } from '$lib/utils';
  export let widget: WidgetLayout | null = null;
  export let isMobile: boolean = false;
  let node: ComfyComboNode | null = null;
@@ -70,7 +70,7 @@
  function onFocus() {
      // console.warn("FOCUS")
      if (listOpen) {
-         navigator.vibrate(20)
+         vibrateIfPossible(20)
      }
  }
 
@@ -86,7 +86,7 @@
 
  function handleSelect(index: number) {
      // console.warn("SEL", index)
-     navigator.vibrate(20)
+     vibrateIfPossible(20)
      const item = $valuesForCombo[index]
      activeIndex = index;
      $nodeValue = item.value

src/lib/widgets/ComfyUI.grammar

@@ -0,0 +1,36 @@
+@top Program { expression* }
+
+@skip {} {
+  BlockComment { "/*" (blockCommentContent | blockCommentNewline)* blockCommentEnd }
+}
+
+@skip { space | LineComment | BlockComment }
+
+@local tokens {
+  blockCommentEnd { "*/" }
+  blockCommentNewline { "\n" }
+  @else blockCommentContent
+}
+
+expression {
+  Identifier |
+  String |
+  Boolean |
+  Application { "(" expression* ")" }
+}
+
+@tokens {
+  Identifier { $[a-zA-Z_\-0-9]+ }
+
+  String { '"' (!["\\] | "\\" _)* '"' }
+
+  Boolean { "#t" | "#f" }
+
+  LineComment { "//" ![\n]* }
+
+  space { $[ \t\n\r]+ }
+
+  "(" ")"
+}
+
+@detectDelim

src/lib/widgets/ComfyUI.grammar.d.ts

@@ -0,0 +1,3 @@
+import { LRParser } from "@lezer/lr"
+
+export declare const parser: LRParser

src/lib/widgets/GalleryWidget.svelte

@@ -11,7 +11,11 @@
  import { clamp, comfyBoxImageToComfyURL, type ComfyBoxImageMetadata } from "$lib/utils";
  import { f7 } from "framework7-svelte";
  import type { ComfyGalleryNode } from "$lib/nodes/widgets";
-	import { showMobileLightbox } from "$lib/components/utils";
+ import { showMobileLightbox } from "$lib/components/utils";
+ import queueState from "$lib/stores/queueState";
+ import uiState from "$lib/stores/uiState";
+ import { loadImage } from "./utils";
+ import Spinner from "$lib/components/Spinner.svelte";
 
  export let widget: WidgetLayout | null = null;
  export let isMobile: boolean = false;
@@ -25,6 +29,41 @@
 
  $: widget && setNodeValue(widget);
 
+ function tagsMatch(tags: string[] | null): boolean {
+     if(tags != null && tags.length > 0)
+         return node.properties.tags.length > 0 && node.properties.tags.every(t => tags.includes(t));
+     else
+         return node.properties.tags.length === 0;
+ }
+
+ let previewURL: string | null;
+ let previewImage: HTMLImageElement | null = null;
+ let previewElem: HTMLImageElement | null = null
+ $: {
+     previewURL = $queueState.previewURL;
+
+     if (previewURL && $queueState.runningPromptID && !$uiState.hidePreviews && node.properties.showPreviews) {
+         const queueEntry = queueState.getQueueEntry($queueState.runningPromptID)
+         if (queueEntry != null) {
+             const tags = queueEntry.extraData?.extra_pnginfo?.comfyBoxPrompt?.subgraphs;
+             if (tagsMatch(tags)) {
+                 loadImage(previewURL).then((img) => {
+                     previewImage = img;
+                 })
+             }
+         }
+     }
+     else {
+         previewImage = null;
+     }
+ }
+
+ function showPreview() {
+ }
+
+ function hidePreview() {
+ }
+
  function setNodeValue(widget: WidgetLayout) {
      if (widget) {
          node = widget.node as ComfyGalleryNode
@@ -34,6 +73,8 @@
          imageHeight = node.imageHeight
          selected_image = node.selectedImage;
          forceSelectImage = node.forceSelectImage;
+         previewURL = null;
+         previewImage = null;
 
          if ($nodeValue != null) {
              if (node.properties.index < 0 || node.properties.index >= $nodeValue.length) {
@@ -69,6 +110,16 @@
      showMobileLightbox(images, selectedImage, { thumbs: images });
  }
 
+ function onClickedSingle(e: CustomEvent<GradioSelectData>) {
+     const images = $nodeValue.map(comfyBoxImageToComfyURL)
+     if (isMobile) {
+         showMobileLightbox(images, 0, { thumbs: images });
+     }
+     else {
+         ImageViewer.instance.showModal(images, 0)
+     }
+ }
+
  function onClicked(e: CustomEvent<HTMLImageElement>) {
      if (isMobile) {
          showMobileLightbox_(e.detail, $selected_image)
@@ -95,6 +146,7 @@
                         value={url}
                         show_label={widget.attrs.title != ""}
                         label={widget.attrs.title}
+                        on:select={onClickedSingle}
                         bind:imageWidth={$imageWidth}
                         bind:imageHeight={$imageHeight}
                     />
@@ -108,6 +160,11 @@
         <div class="wrapper comfy-gallery-widget gradio-gallery" style={widget.attrs.style || ""}>
             <Block variant="solid" padding={false}>
                 <div class="padding">
+                    {#if previewImage && $queueState.runningPromptID != null}
+                        <div class="comfy-gallery-preview" on:mouseover={hidePreview} on:mouseout={showPreview} >
+                            <img src={previewImage.src} bind:this={previewElem} on:mouseout={showPreview} />
+                        </div>
+                    {/if}
                     <Gallery
                         value={images}
                         label={widget.attrs.title}
@@ -153,6 +210,29 @@
              }
          }
      }
+
+     &:hover .comfy-gallery-preview {
+         opacity: 0%;
+     }
+ }
+
+ .comfy-gallery-preview {
+     position: absolute;
+     top: 0;
+     left: 0;
+     width: 100%;
+     height: 100%;
+     z-index: var(--layer-top);
+     pointer-events: none;
+     transition: opacity 0.1s linear;
+     opacity: 100%;
+
+     > img {
+         width: var(--size-full);
+         height: var(--size-full);
+         object-fit: contain;
+         border: 5px dashed var(--secondary-400);
+     }
  }
 
  .padding {

src/lib/widgets/ImageUploadWidget.svelte

@@ -230,7 +230,7 @@
         />
     {:else}
         <div class="comfy-image-editor-panel">
-            {#if _value && canMask}
+            {#if _value && _value.length > 0 && canMask}
                 {@const comfyURL = convertComfyOutputToComfyURL(_value[0])}
                 <div class="mask-canvas-wrapper" style:display={editMask ? "block" : "none"}>
                     <MaskCanvas bind:this={maskCanvasComp} fileURL={comfyURL} on:release={onMaskReleased} on:loaded={onMaskReleased} />
@@ -259,18 +259,18 @@
                     <Row>
                         {#if canMask}
                             <div>
-                                <Button variant="primary" disabled={!_value} on:click={toggleEditMask}>
+                                {#if editMask}
+                                    <Button variant="secondary" on:click={() => { clearMask(); notify("Mask cleared."); }}>
+                                        Clear Mask
+                                    </Button>
+                                {/if}
+                                <Button disabled={!_value} on:click={toggleEditMask}>
                                     {#if editMask}
                                         Show Image
                                     {:else}
                                         Edit Mask
                                     {/if}
                                 </Button>
-                                {#if editMask}
-                                    <Button variant="secondary" on:click={() => { clearMask(); notify("Mask cleared."); }}>
-                                        Clear Mask
-                                    </Button>
-                                {/if}
                             </div>
                         {/if}
                         <div>

src/lib/widgets/NumberWidget.svelte

@@ -3,7 +3,7 @@
  import { type WidgetLayout } from "$lib/stores/layoutStates";
  import { Range } from "$lib/components/gradio/form";
  import { get, type Writable } from "svelte/store";
- import { debounce } from "$lib/utils";
+ import { debounce, vibrateIfPossible } from "$lib/utils";
  import interfaceState from "$lib/stores/interfaceState";
  import { isDisabled } from "./utils"
  export let widget: WidgetLayout | null = null;
@@ -96,7 +96,7 @@
          lastDisplayValue = option;
          canVibrate = false;
          setTimeout(() => { canVibrate = true }, 30)
-         navigator.vibrate(10)
+         vibrateIfPossible(10)
      }
  }
 </script>

src/lib/widgets/RadioWidget.svelte

@@ -5,7 +5,7 @@
  import { get, type Writable, writable } from "svelte/store";
  import { isDisabled } from "./utils"
  import type { SelectData } from "@gradio/utils";
-	import { clamp } from "$lib/utils";
+ import { clamp, vibrateIfPossible } from "$lib/utils";
  import type { ComfyRadioNode } from "$lib/nodes/widgets";
 
  export let widget: WidgetLayout | null = null;
@@ -34,7 +34,7 @@
  function onSelect(e: CustomEvent<SelectData>) {
      node.setValue(e.detail.value)
      node.index = e.detail.index as number
-     navigator.vibrate(20)
+     vibrateIfPossible(20)
  }
 </script>
 

src/lib/widgets/TextWidgetCodeVariant.ts

@@ -14,7 +14,8 @@ import {
     indentOnInput,
     syntaxHighlighting,
     defaultHighlightStyle,
-    foldKeymap
+    foldKeymap,
+    LRLanguage, LanguageSupport, indentNodeProp, foldNodeProp, foldInside, delimitedIndent
 } from "@codemirror/language";
 import { history, defaultKeymap, historyKeymap } from "@codemirror/commands";
 import {
@@ -27,8 +28,26 @@ import {
     type CompletionSource, autocompletion, CompletionContext, startCompletion,
     currentCompletions, completionStatus, completeFromList, acceptCompletion
 } from "@codemirror/autocomplete"
+import { styleTags, tags as t } from "@lezer/highlight"
 import DanbooruTags from "$lib/DanbooruTags";
 
+import { parser } from "./ComfyUI.grammar"
+
+export const comfyUILanguage = LRLanguage.define({
+    name: "ComfyUI",
+    parser: parser.configure({
+        props: [
+            styleTags({
+                LineComment: t.lineComment,
+                BlockComment: t.blockComment,
+            })
+        ]
+    }),
+    languageData: {
+        commentTokens: { line: "//", block: { open: "/*", close: "*/" } },
+    }
+})
+
 export const basicSetup: Extension = /*@__PURE__*/ (() => [
     lineNumbers(),
     highlightSpecialChars(),
@@ -43,6 +62,7 @@ export const basicSetup: Extension = /*@__PURE__*/ (() => [
     crosshairCursor(),
     EditorView.lineWrapping,
     DanbooruTags.getCompletionExt(),
+    new LanguageSupport(comfyUILanguage),
 
     keymap.of([
         ...closeBracketsKeymap,

src/mobile/GenToolbar.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
  import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
  import workflowState, { ComfyBoxWorkflow } from "$lib/stores/workflowState";
+ import { vibrateIfPossible } from "$lib/utils";
 
  import { Link, Toolbar } from "framework7-svelte"
 
@@ -11,7 +12,7 @@
  $: workflow = $workflowState.activeWorkflow;
 
  function queuePrompt() {
-     navigator.vibrate(20)
+     vibrateIfPossible(20) 
      app.runDefaultQueueAction()
  }
 </script>

src/mobile/MainToolbar.svelte

@@ -2,7 +2,7 @@
  import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
  import queueState from "$lib/stores/queueState";
  import workflowState, { ComfyBoxWorkflow } from "$lib/stores/workflowState";
- import { getNodeInfo } from "$lib/utils"
+ import { getNodeInfo, vibrateIfPossible } from "$lib/utils"
  import { LayoutTextSidebarReverse, Image, Grid } from "svelte-bootstrap-icons";
 
  import { Link, Toolbar } from "framework7-svelte"
@@ -21,12 +21,12 @@
  $: workflow = $workflowState.activeWorkflow;
 
  function queuePrompt() {
-     navigator.vibrate(20)
+     vibrateIfPossible(20)
      app.runDefaultQueueAction()
  }
 
  async function refreshCombos() {
-     navigator.vibrate(20)
+     vibrateIfPossible(20)
      await app.refreshComboInNodes()
  }
 
@@ -34,7 +34,7 @@
      if (!fileInput)
          return;
 
-     navigator.vibrate(20)
+     vibrateIfPossible(20)
      app.querySave()
  }
 
@@ -42,7 +42,7 @@
      if (!fileInput)
          return;
 
-     navigator.vibrate(20)
+     vibrateIfPossible(20)
      fileInput.value = null;
      fileInput.click();
  }
@@ -52,7 +52,7 @@
 }
 
  function doSaveLocal(): void {
-     navigator.vibrate(20)
+     vibrateIfPossible(20)
      app.saveStateToLocalStorage();
  }
 

src/mobile/routes/gallery.svelte

@@ -1,17 +1,11 @@
 <script lang="ts">
  import { Page, Navbar, Block, Tabs, Tab, NavLeft, NavTitle, NavRight, Link, f7 } from "framework7-svelte"
- import WidgetContainer from "$lib/components/WidgetContainer.svelte";
  import type ComfyApp from "$lib/components/ComfyApp";
- import { writable, type Writable } from "svelte/store";
- import type { IDragItem, WritableLayoutStateStore } from "$lib/stores/layoutStates";
- import workflowState, { type ComfyBoxWorkflow, type WorkflowInstID } from "$lib/stores/workflowState";
  import interfaceState from "$lib/stores/interfaceState";
- import { onMount } from "svelte";
- import GenToolbar from '../GenToolbar.svelte'
- import { partition, showLightbox } from "$lib/utils";
-	import uiQueueState, { type QueueUIEntry } from "$lib/stores/uiQueueState";
-	import { showMobileLightbox } from "$lib/components/utils";
-	import notify from "$lib/notify";
+ import { convertComfyOutputToComfyURL, partition, showLightbox } from "$lib/utils";
+ import uiQueueState, { type QueueUIEntry } from "$lib/stores/uiQueueState";
+ import { showMobileLightbox } from "$lib/components/utils";
+ import notify from "$lib/notify";
 
  export let app: ComfyApp
 
@@ -33,7 +27,7 @@
      const _allEntries = []
      for (const entry of entries) {
          for (const image of entry.images) {
-             _allEntries.push([entry, image]);
+             _allEntries.push([entry, convertComfyOutputToComfyURL(image, true)]);
          }
      }
      allEntries = partition(_allEntries, gridCols);

src/mobile/routes/queue.svelte

@@ -8,7 +8,7 @@
  import interfaceState from "$lib/stores/interfaceState";
  import { onMount } from "svelte";
  import GenToolbar from '../GenToolbar.svelte'
- import { partition, showLightbox, truncateString } from "$lib/utils";
+ import { convertComfyOutputToComfyURL, partition, showLightbox, truncateString } from "$lib/utils";
 	import uiQueueState, { type QueueUIEntry } from "$lib/stores/uiQueueState";
 	import { showMobileLightbox } from "$lib/components/utils";
 	import queueState from "$lib/stores/queueState";
@@ -68,7 +68,7 @@
 
  function getCardImage(entry: QueueUIEntry): string {
      if (entry.images.length > 0)
-         return entry.images[0]
+         return convertComfyOutputToComfyURL(entry.images[0])
      return "https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg"
  }
 </script>

src/mobile/routes/workflow.svelte

@@ -34,12 +34,12 @@
  }
 
  async function refreshCombos() {
-     navigator.vibrate(20)
+     vibrateIfPossible(20)
      await app.refreshComboInNodes()
  }
 
  function doSaveLocal(): void {
-     navigator.vibrate(20)
+     vibrateIfPossible(20)
      app.saveStateToLocalStorage();
  }
 

src/mobile/routes/workflows.svelte

@@ -3,6 +3,7 @@
  import workflowState, { ComfyBoxWorkflow, type WorkflowInstID } from "$lib/stores/workflowState";
  import { onMount } from "svelte";
  import interfaceState from "$lib/stores/interfaceState";
+ import { vibrateIfPossible } from "$lib/utils";
  import { f7 } from 'framework7-svelte';
  import { XCircle } from 'svelte-bootstrap-icons';
 
@@ -31,7 +32,7 @@
      if (!fileInput)
          return;
 
-     navigator.vibrate(20)
+     vibrateIfPossible(20);
      fileInput.value = null;
      fileInput.click();
  }

src/scss/global.scss

@@ -13,10 +13,6 @@ body {
     height: 100%;
     margin: 0px;
     font-family: Arial;
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
 }
 
 :root {

src/tests/ComfyGraphTests.ts

@@ -1,11 +1,12 @@
 import ComfyGraph from "$lib/ComfyGraph";
-import { ComfyNumberNode } from "$lib/nodes/widgets";
+import { ComfyNumberNode, ComfyComboNode } from "$lib/nodes/widgets";
 import { ComfyBoxWorkflow } from "$lib/stores/workflowState";
 import { LiteGraph, Subgraph } from "@litegraph-ts/core";
 import { get } from "svelte/store";
 import { expect } from 'vitest';
 import UnitTest from "./UnitTest";
 import { Watch } from "@litegraph-ts/nodes-basic";
+import type { SerializedComfyWidgetNode } from "$lib/nodes/widgets/ComfyWidgetNode";
 
 export default class ComfyGraphTests extends UnitTest {
     test__onNodeAdded__updatesLayoutState() {
@@ -107,4 +108,24 @@ export default class ComfyGraphTests extends UnitTest {
 
         expect(serNode.outputs[0]._data).toBeUndefined()
     }
+
+    test__serialize__savesComboData() {
+        const [{ graph }, layoutState] = ComfyBoxWorkflow.create()
+        layoutState.initDefaultLayout()
+
+        const widget = LiteGraph.createNode(ComfyComboNode);
+        const watch = LiteGraph.createNode(Watch);
+        graph.add(widget)
+        graph.add(watch)
+
+        widget.connect(0, watch, 0)
+        widget.properties.values = ["A", "B", "C"]
+        widget.setValue("B");
+
+        const result = graph.serialize();
+
+        const serNode = result.nodes.find(n => n.id === widget.id) as SerializedComfyWidgetNode;
+
+        expect(serNode.comfyValue).toBe("B")
+    }
 }

src/tests/stores/journeyStatesTests.ts

@@ -1,99 +0,0 @@
-import { get } from "svelte/store";
-import journeyState, { type JourneyState } from "$lib/stores/journeyState"
-import { expect } from 'vitest';
-import UnitTest from "../UnitTest";
-import { Watch } from "@litegraph-ts/nodes-basic";
-import { ComfyBoxWorkflow } from "$lib/stores/workflowState";
-import { ComfyNumberNode } from "$lib/nodes/widgets";
-import { LiteGraph } from "@litegraph-ts/core";
-import { getWorkflowRestoreParamsFromWorkflow } from "$lib/restoreParameters";
-import { calculateWorkflowParamsPatch } from "$lib/stores/journeyStates";
-
-export default class journeyStateTests extends UnitTest {
-    test__patches() {
-        const [workflow, layoutState] = ComfyBoxWorkflow.create()
-        const { graph, journey } = workflow;
-        layoutState.initDefaultLayout() // adds 3 containers
-
-        const widget1 = LiteGraph.createNode(ComfyNumberNode);
-        const widget2 = LiteGraph.createNode(ComfyNumberNode);
-        const watch1 = LiteGraph.createNode(Watch);
-        const watch2 = LiteGraph.createNode(Watch);
-
-        graph.add(widget1)
-        graph.add(watch1)
-        graph.add(widget2)
-        graph.add(watch2)
-
-        widget1.connect(0, watch1, 0);
-        widget2.connect(0, watch2, 0);
-        widget1.setValue(0)
-        widget2.setValue(0)
-
-        let workflowParams = getWorkflowRestoreParamsFromWorkflow(workflow)
-        const root = journey.addNode(workflowParams, null);
-
-        expect(root).toEqual({
-            id: root.id,
-            type: "root",
-            children: [],
-            base: {
-                [widget1.id]: {
-                    type: "workflow",
-                    finalValue: 0,
-                },
-                [widget2.id]: {
-                    type: "workflow",
-                    finalValue: 0,
-                }
-            }
-        });
-
-        widget1.setValue(5)
-
-        workflowParams = getWorkflowRestoreParamsFromWorkflow(workflow)
-        const patchParams = calculateWorkflowParamsPatch(root, workflowParams)
-        const patch = journey.addNode(patchParams, root.id);
-
-        expect(patch).toEqual({
-            id: patch.id,
-            type: "patch",
-            parent: root,
-            children: [],
-            patch: {
-                [widget1.id]: {
-                    type: "workflow",
-                    finalValue: 5
-                },
-            }
-        })
-    }
-
-    test__patches_exclusions() {
-        const [workflow, layoutState] = ComfyBoxWorkflow.create()
-        const { graph, journey } = workflow;
-        layoutState.initDefaultLayout() // adds 3 containers
-
-        const widget1 = LiteGraph.createNode(ComfyNumberNode);
-        const widget2 = LiteGraph.createNode(ComfyNumberNode);
-        const watch1 = LiteGraph.createNode(Watch);
-        const watch2 = LiteGraph.createNode(Watch);
-
-        graph.add(widget1)
-        graph.add(watch1)
-
-        widget1.properties.excludeFromJourney = true;
-        widget1.connect(0, watch1, 0);
-        widget1.setValue(0)
-
-        let workflowParams = getWorkflowRestoreParamsFromWorkflow(workflow)
-        const root = journey.addNode(workflowParams, null);
-
-        expect(root).toEqual({
-            id: root.id,
-            type: "root",
-            children: [],
-            base: {}
-        });
-    }
-}

src/tests/testSuite.ts

@@ -4,4 +4,3 @@ export { default as parseA1111Tests } from "./parseA1111Tests"
 export { default as convertA1111ToStdPromptTests } from "./convertA1111ToStdPromptTests"
 export { default as convertVanillaWorkflowTest } from "./convertVanillaWorkflowTests"
 export { default as configStateTests } from "./stores/configStateTests"
-export { default as journeyStates } from "./stores/journeyStatesTests"

vite.config.ts

@@ -8,11 +8,12 @@ import removeConsole from 'vite-plugin-svelte-console-remover';
 import glsl from 'vite-plugin-glsl';
 import { execSync } from "child_process"
 import { visualizer } from "rollup-plugin-visualizer";
+import { lezer } from "@lezer/generator/rollup"
 
 const isProduction = process.env.NODE_ENV === "production";
 console.log("Production build: " + isProduction)
 
-const commitHash = execSync('git rev-parse HEAD').toString().trim();
+const commitHash = execSync('git rev-parse HEAD').toString();
 console.log("Commit: " + commitHash)
 
 export default defineConfig({
@@ -31,6 +32,7 @@ export default defineConfig({
         isProduction && removeConsole(),
         glsl(),
         svelte(),
+        lezer(),
         visualizer(),
         viteStaticCopy({
             targets: [