Restore/load workflow button in prompt details modal

`vibrateIfPossible`: fixes iOS safari uncaught exceptions & etc

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,38 +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",
+    "@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:*",
@@ -65,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:*",
@@ -72,32 +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",
+    "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",

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

@@ -28,7 +28,7 @@ import modalState from "$lib/stores/modalState";
 import queueState from "$lib/stores/queueState";
 import selectionState from "$lib/stores/selectionState";
 import uiState from "$lib/stores/uiState";
-import workflowState, { ComfyBoxWorkflow, type WorkflowAttributes, type WorkflowInstID } from "$lib/stores/workflowState";
+import workflowState, { ComfyBoxWorkflow, OpenWorkflowMode, type WorkflowAttributes, type WorkflowInstID } from "$lib/stores/workflowState";
 import { playSound, readFileToText, type SerializedPromptOutput } from "$lib/utils";
 import { basename, capitalize, download, graphToGraphVis, jsonToJsObject, promptToGraphVis, range } from "$lib/utils";
 import { tick } from "svelte";
@@ -49,7 +49,7 @@ if (typeof window !== "undefined") {
 }
 
 export type OpenWorkflowOptions = {
-    setActive?: boolean,
+    mode: OpenWorkflowMode,
     refreshCombos?: boolean | Record<string, ComfyNodeDef>,
     warnMissingNodeTypes?: boolean,
 }
@@ -234,7 +234,7 @@ export default class ComfyApp {
         if (!restored) {
             const options: OpenWorkflowOptions = {
                 refreshCombos: defs,
-                setActive: false
+                mode: OpenWorkflowMode.Append
             }
             await this.initDefaultWorkflow("defaultWorkflow", options);
             await this.initDefaultWorkflow("upscaleByModel", options);
@@ -408,7 +408,7 @@ export default class ComfyApp {
             return false;
 
         await Promise.all(workflows.map(w => {
-            return this.openWorkflow(w, { refreshCombos: defs, warnMissingNodeTypes: false, setActive: false }).catch(error => {
+            return this.openWorkflow(w, { refreshCombos: defs, warnMissingNodeTypes: false, mode: OpenWorkflowMode.Append }).catch(error => {
                 console.error("Failed restoring previous workflow", error)
                 notify(`Failed restoring previous workflow: ${error}`, { type: "error" })
             })
@@ -778,7 +778,7 @@ export default class ComfyApp {
     }
 
     async openWorkflow(data: SerializedAppState, options: OpenWorkflowOptions = {
-        setActive: true,
+        mode: OpenWorkflowMode.AppendAndSetActive,
         refreshCombos: true,
         warnMissingNodeTypes: true
     }
@@ -793,7 +793,7 @@ export default class ComfyApp {
 
         let workflow: ComfyBoxWorkflow;
         try {
-            workflow = workflowState.openWorkflow(this.lCanvas, data, options.setActive);
+            workflow = workflowState.openWorkflow(this.lCanvas, data, options.mode);
         }
         catch (error) {
             modalState.pushModal({
@@ -827,7 +827,11 @@ export default class ComfyApp {
         return workflow;
     }
 
-    async openVanillaWorkflow(data: SerializedLGraph, filename: string) {
+    async openVanillaWorkflow(data: SerializedLGraph, filename: string, options: OpenWorkflowOptions = {
+        mode: OpenWorkflowMode.AppendAndSetActive,
+        refreshCombos: true,
+        warnMissingNodeTypes: true
+    }) {
         const title = basename(filename)
 
         const attrs: WorkflowAttributes = {
@@ -844,7 +848,7 @@ export default class ComfyApp {
 
         const addWorkflow = () => {
             notify("Converted ComfyUI workflow to ComfyBox format.", { type: "info" })
-            workflowState.addWorkflow(this.lCanvas, comfyBoxWorkflow)
+            workflowState.addWorkflow(this.lCanvas, comfyBoxWorkflow, options.mode)
             this.lCanvas.deserialize(canvas);
         }
 
@@ -886,7 +890,7 @@ export default class ComfyApp {
     }
 
     createNewWorkflow() {
-        workflowState.createNewWorkflow(this.lCanvas, undefined, true);
+        workflowState.createNewWorkflow(this.lCanvas, undefined, OpenWorkflowMode.AppendAndSetActive);
         selectionState.clear();
     }
 
@@ -1146,13 +1150,13 @@ export default class ComfyApp {
     /**
      * Loads workflow data from the specified file
      */
-    async handleFile(file: File) {
+    async handleFile(file: File, openOptions?: OpenWorkflowOptions) {
         if (file.type === "image/png") {
             const buffer = await file.arrayBuffer();
             const pngInfo = await parsePNGMetadata(buffer);
             if (pngInfo) {
                 if (pngInfo.comfyBoxWorkflow) {
-                    await this.openWorkflow(JSON.parse(pngInfo.comfyBoxWorkflow));
+                    await this.openWorkflow(JSON.parse(pngInfo.comfyBoxWorkflow), openOptions);
                 } else if (pngInfo.workflow) {
                     const workflow = JSON.parse(pngInfo.workflow);
                     await this.openVanillaWorkflow(workflow, file.name);
@@ -1187,7 +1191,7 @@ export default class ComfyApp {
             reader.onload = async () => {
                 const result = JSON.parse(reader.result as string)
                 if (isComfyBoxWorkflow(result)) {
-                    await this.openWorkflow(result);
+                    await this.openWorkflow(result, openOptions);
                 }
                 else if (isVanillaWorkflow(result)) {
                     await this.openVanillaWorkflow(result, file.name);

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}

src/lib/components/ComfyPaneView.svelte

@@ -22,7 +22,7 @@
  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],
      ["queue", LayoutTextSidebarReverse]

src/lib/components/ComfyQueue.svelte

@@ -12,11 +12,12 @@
  import type ComfyApp from "./ComfyApp";
  import { getContext, tick } from "svelte";
  import Modal from "./Modal.svelte";
- 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, { type QueueUIEntry } from "$lib/stores/uiQueueState";
+	import type { SerializedPromptInputsAll } from "./ComfyApp";
+	import { OpenWorkflowMode } from "$lib/stores/workflowState";
 
  export let app: ComfyApp;
 
@@ -109,18 +110,21 @@
 
  let showModal = false;
  let expandAll = false;
- let selectedPrompt = null;
+ let selectedQueueEntry: QueueUIEntry = null;
+ let selectedPrompt: SerializedPromptInputsAll = null;
  let selectedImages: ComfyImageLocation[] = [];
  function showPrompt(entry: QueueUIEntry) {
      if (entry.error != null) {
          showModal = false;
          expandAll = false;
+         selectedQueueEntry = null;
          selectedPrompt = null;
          selectedImages = [];
 
          showError(entry.entry.promptID);
      }
      else {
+         selectedQueueEntry = entry;
          selectedPrompt = entry.entry.prompt;
          selectedImages = entry.images;
          showModal = true;
@@ -129,6 +133,7 @@
  }
 
  function closeModal() {
+     selectedQueueEntry = null;
      selectedPrompt = null
      selectedImages = []
      showModal = false;
@@ -136,6 +141,24 @@
      console.warn("CLOSEMODAL")
  }
 
+ async function restoreWorkflow(closeDialog: () => void, mode: OpenWorkflowMode) {
+     if (selectedQueueEntry == null) {
+         console.error("No active prompt!");
+         return;
+     }
+
+     let workflow = selectedQueueEntry.entry.extraData.extra_pnginfo.comfyBoxWorkflow;
+     if (workflow == null) {
+         console.error("No workflow found in PNG info!");
+         return;
+     }
+
+     closeDialog();
+     closeModal();
+
+     await app.openWorkflow(structuredClone(workflow), { mode: mode, refreshCombos: true, warnMissingNodeTypes: true });
+ }
+
  let queued = false
  $: queued = Boolean($queueState.runningNodeID || $queueState.progress);
 
@@ -160,6 +183,12 @@
         <Button variant="secondary" on:click={() => (expandAll = !expandAll)}>
             Expand All
         </Button>
+        <Button variant="primary" on:click={() => restoreWorkflow(closeDialog, OpenWorkflowMode.ReplaceActive)}>
+            Restore
+        </Button>
+        <Button variant="primary" on:click={() => restoreWorkflow(closeDialog, OpenWorkflowMode.AppendAndSetActive)}>
+            Load
+        </Button>
     </div>
 </Modal>
 

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/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/stores/uiQueueState.ts

@@ -73,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

src/lib/stores/workflowState.ts

@@ -7,7 +7,6 @@ import ComfyGraph from '$lib/ComfyGraph';
 import layoutStates from './layoutStates';
 import { v4 as uuidv4 } from "uuid";
 import type ComfyGraphCanvas from '$lib/ComfyGraphCanvas';
-import { blankGraph } from '$lib/defaultGraph';
 import type { SerializedAppState, SerializedPrompt } from '$lib/components/ComfyApp';
 import type ComfyReceiveOutputNode from '$lib/nodes/actions/ComfyReceiveOutputNode';
 import type { ComfyBoxPromptExtraData, PromptID } from '$lib/api';
@@ -25,6 +24,12 @@ export type SerializedWorkflowState = {
     attrs: WorkflowAttributes
 }
 
+export enum OpenWorkflowMode {
+    Append,
+    AppendAndSetActive,
+    ReplaceActive,
+}
+
 /*
  * ID for an opened workflow.
  *
@@ -265,6 +270,7 @@ export type WorkflowState = {
     openedWorkflows: ComfyBoxWorkflow[],
     openedWorkflowsByID: Record<WorkflowInstID, ComfyBoxWorkflow>,
     activeWorkflowID: WorkflowInstID | null,
+    activeWorkflowIndex: number | null,
     activeWorkflow: ComfyBoxWorkflow | null,
 }
 
@@ -279,9 +285,9 @@ type WorkflowStateOps = {
     getWorkflowByNode: (node: LGraphNode) => ComfyBoxWorkflow | null
     getWorkflowByNodeID: (id: NodeID) => ComfyBoxWorkflow | null
     getActiveWorkflow: () => ComfyBoxWorkflow | null
-    createNewWorkflow: (canvas: ComfyGraphCanvas, title?: string, setActive?: boolean) => ComfyBoxWorkflow,
-    openWorkflow: (canvas: ComfyGraphCanvas, data: SerializedAppState, setActive?: boolean) => ComfyBoxWorkflow,
-    addWorkflow: (canvas: ComfyGraphCanvas, data: ComfyBoxWorkflow, setActive?: boolean) => void,
+    createNewWorkflow: (canvas: ComfyGraphCanvas, title?: string, mode?: OpenWorkflowMode) => ComfyBoxWorkflow,
+    openWorkflow: (canvas: ComfyGraphCanvas, data: SerializedAppState, mode?: OpenWorkflowMode) => ComfyBoxWorkflow,
+    addWorkflow: (canvas: ComfyGraphCanvas, data: ComfyBoxWorkflow, mode?: OpenWorkflowMode) => void,
     closeWorkflow: (canvas: ComfyGraphCanvas, index: number) => void,
     closeAllWorkflows: (canvas: ComfyGraphCanvas) => void,
     setActiveWorkflow: (canvas: ComfyGraphCanvas, index: number | WorkflowInstID) => ComfyBoxWorkflow | null,
@@ -297,6 +303,7 @@ const store: Writable<WorkflowState> = writable(
         openedWorkflows: [],
         openedWorkflowsByID: {},
         activeWorkflowID: null,
+        activeWorkflowIndex: null,
         activeWorkflow: null
     })
 
@@ -328,39 +335,51 @@ function getActiveWorkflow(): ComfyBoxWorkflow | null {
     return state.openedWorkflowsByID[state.activeWorkflowID];
 }
 
-function createNewWorkflow(canvas: ComfyGraphCanvas, title: string = "New Workflow", setActive: boolean = false): ComfyBoxWorkflow {
+function createNewWorkflow(canvas: ComfyGraphCanvas, title: string = "New Workflow", mode: OpenWorkflowMode = OpenWorkflowMode.AppendAndSetActive): ComfyBoxWorkflow {
     const workflow = new ComfyBoxWorkflow(title);
     const layoutState = layoutStates.create(workflow);
     layoutState.initDefaultLayout();
 
-    const state = get(store);
-    state.openedWorkflows.push(workflow);
-    state.openedWorkflowsByID[workflow.id] = workflow;
-
-    if (setActive || state.activeWorkflowID == null)
-        setActiveWorkflow(canvas, state.openedWorkflows.length - 1)
-
-    store.set(state)
-
-    return workflow;
+    return addWorkflow(canvas, workflow, mode);
 }
 
-function openWorkflow(canvas: ComfyGraphCanvas, data: SerializedAppState, setActive: boolean = true): ComfyBoxWorkflow {
+function openWorkflow(canvas: ComfyGraphCanvas, data: SerializedAppState, mode: OpenWorkflowMode = OpenWorkflowMode.AppendAndSetActive): ComfyBoxWorkflow {
     const [workflow, layoutState] = ComfyBoxWorkflow.create("Workflow")
     workflow.deserialize(layoutState, { graph: data.workflow, layout: data.layout, attrs: data.attrs })
 
-    addWorkflow(canvas, workflow, setActive);
+    addWorkflow(canvas, workflow, mode);
 
     return workflow;
 }
 
-function addWorkflow(canvas: ComfyGraphCanvas, workflow: ComfyBoxWorkflow, setActive: boolean = true) {
+function addWorkflow(canvas: ComfyGraphCanvas, workflow: ComfyBoxWorkflow, mode: OpenWorkflowMode = OpenWorkflowMode.AppendAndSetActive) {
     const state = get(store);
+
+    let resultIndex: number = state.openedWorkflows.length;
+    if (mode == OpenWorkflowMode.ReplaceActive && state.activeWorkflowIndex != null) {
+        resultIndex = state.activeWorkflowIndex;
+        closeWorkflow(canvas, resultIndex);
+        state.openedWorkflows.splice(resultIndex, 0, workflow);
+    }
+    else {
         state.openedWorkflows.push(workflow);
+    }
+
     state.openedWorkflowsByID[workflow.id] = workflow;
 
+    let setActive: boolean;
+    switch (mode) {
+        case OpenWorkflowMode.Append:
+            setActive = false;
+            break;
+        case OpenWorkflowMode.AppendAndSetActive:
+        case OpenWorkflowMode.ReplaceActive:
+            setActive = true;
+            break;
+    }
+
     if (setActive || state.activeWorkflowID == null)
-        setActiveWorkflow(canvas, state.openedWorkflows.length - 1)
+        setActiveWorkflow(canvas, resultIndex)
 
     store.set(state)
 
@@ -397,6 +416,7 @@ function setActiveWorkflow(canvas: ComfyGraphCanvas, index: number | WorkflowIns
 
     if (state.openedWorkflows.length === 0) {
         state.activeWorkflowID = null;
+        state.activeWorkflowIndex = null;
         state.activeWorkflow = null
         return null;
     }
@@ -416,6 +436,7 @@ function setActiveWorkflow(canvas: ComfyGraphCanvas, index: number | WorkflowIns
         state.activeWorkflow.stop("app")
 
     state.activeWorkflowID = workflow.id;
+    state.activeWorkflowIndex = index;
     state.activeWorkflow = workflow;
 
     workflow.start("app", canvas);

src/lib/utils.ts

@@ -828,3 +828,9 @@ const MOBILE_USER_AGENTS = ["iPhone", "iPad", "Android", "BlackBerry", "WebOs"].
 export function isMobileBrowser(userAgent: string): boolean {
     return MOBILE_USER_AGENTS.some(a => userAgent.match(a))
 }
+
+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

@@ -110,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)
@@ -136,6 +146,7 @@
                         value={url}
                         show_label={widget.attrs.title != ""}
                         label={widget.attrs.title}
+                        on:select={onClickedSingle}
                         bind:imageWidth={$imageWidth}
                         bind:imageHeight={$imageHeight}
                     />

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

vite.config.ts

@@ -8,6 +8,7 @@ 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)
@@ -31,6 +32,7 @@ export default defineConfig({
         isProduction && removeConsole(),
         glsl(),
         svelte(),
+        lezer(),
         visualizer(),
         viteStaticCopy({
             targets: [