Merge pull request #148 from haze/hb/vibrateIfPossible

`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",

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/api.ts

@@ -6,7 +6,7 @@ import type { SerializedLGraph, UUID } from "@litegraph-ts/core";
 import type { SerializedLayoutState } from "./stores/layoutStates";
 import type { ComfyNodeDef, ComfyNodeDefInput } from "./ComfyNodeDef";
 import type { WorkflowInstID } from "./stores/workflowState";
-import type { ComfyAPIPromptErrorResponse } from "./apiErrors";
+import type { ComfyAPIPromptErrorResponse, ComfyExecutionError, ComfyInterruptedError } from "./apiErrors";
 
 export type ComfyPromptRequest = {
     client_id?: string,
@@ -61,6 +61,20 @@ export type ComfyAPIHistoryResponse = {
     error?: string
 }
 
+export type ComfyDevice = {
+    name: string,
+    type: string,
+    index: number,
+    vram_total: number
+    vram_free: number
+    torch_vram_total: number
+    torch_vram_free: number
+}
+
+export type ComfyAPISystemStatsResponse = {
+    devices: ComfyDevice[]
+}
+
 export type SerializedComfyBoxPromptData = {
     subgraphs: string[]
 }
@@ -87,6 +101,7 @@ export type ComfyUIPromptExtraData = {
 }
 
 type ComfyAPIEvents = {
+    // JSON
     status: (status: ComfyAPIStatusResponse | null, error?: Error | null) => void,
     progress: (progress: Progress) => void,
     reconnecting: () => void,
@@ -97,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 {
@@ -162,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;
@@ -190,6 +209,31 @@ export default class ComfyAPI {
 
         this.socket.addEventListener("message", (event) => {
             try {
+                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":
@@ -223,6 +267,7 @@ export default class ComfyAPI {
                         default:
                             console.warn("Unhandled message:", event.data);
                     }
+                }
             } catch (error) {
                 console.error("Error handling message", event.data, error);
             }
@@ -372,4 +417,9 @@ export default class ComfyAPI {
     async interrupt(): Promise<Response> {
         return fetch(this.getBackendUrl() + "/interrupt", { method: "POST" });
     }
+
+    async getSystemStats(): Promise<ComfyAPISystemStatsResponse> {
+        return fetch(this.getBackendUrl() + "/system_stats")
+            .then(async (resp) => (await resp.json()) as ComfyAPISystemStatsResponse);
+    }
 }

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

@@ -39,6 +39,7 @@ import DanbooruTags from "$lib/DanbooruTags";
 import { deserializeTemplateFromSVG, type SerializedComfyBoxTemplate } from "$lib/ComfyBoxTemplate";
 import templateState from "$lib/stores/templateState";
 import { formatValidationError, type ComfyAPIPromptErrorResponse, formatExecutionError, type ComfyExecutionError } from "$lib/apiErrors";
+import systemState from "$lib/stores/systemState";
 
 export const COMFYBOX_SERIAL_VERSION = 1;
 
@@ -650,6 +651,27 @@ export default class ComfyApp {
             }
         });
 
+        this.api.addEventListener("b_preview", (imageBlob: Blob) => {
+            queueState.previewUpdated(imageBlob);
+        });
+
+        const config = get(configState);
+
+        if (config.pollSystemStatsInterval > 0) {
+            const interval = Math.max(config.pollSystemStatsInterval, 250);
+            const refresh = async () => {
+                try {
+                    const resp = await this.api.getSystemStats();
+                    systemState.updateState(resp)
+                } catch (error) {
+                    // console.debug("Error retrieving stats", error)
+                    systemState.updateState({ devices: [] })
+                }
+                setTimeout(refresh, interval);
+            }
+            setTimeout(refresh, interval);
+        }
+
         this.api.init();
     }
 

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/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

@@ -1,25 +1,11 @@
-<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";
+ import SystemStatsBar from "./SystemStatsBar.svelte";
  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,7 +16,7 @@
  import ComfyQueueListDisplay from "./ComfyQueueListDisplay.svelte";
  import ComfyQueueGridDisplay from "./ComfyQueueGridDisplay.svelte";
  import { WORKFLOWS_VIEW } from "./ComfyBoxWorkflowsView.svelte";
-	import uiQueueState from "$lib/stores/uiQueueState";
+ import uiQueueState, { type QueueUIEntry } from "$lib/stores/uiQueueState";
 
  export let app: ComfyApp;
 
@@ -124,7 +110,7 @@
  let showModal = false;
  let expandAll = false;
  let selectedPrompt = null;
- let selectedImages = [];
+ let selectedImages: ComfyImageLocation[] = [];
  function showPrompt(entry: QueueUIEntry) {
      if (entry.error != null) {
          showModal = false;
@@ -241,6 +227,9 @@
             <div class="node-name">
                 <span>Node: {getNodeInfo($queueState.runningNodeID)}</span>
             </div>
+            <div>
+                <SystemStatsBar />
+            </div>
             <div>
                 <ProgressBar value={$queueState.progress?.value} max={$queueState.progress?.max} />
             </div>
@@ -263,7 +252,8 @@
  $bottom-bar-height: 70px;
  $workflow-tabs-height: 2.5rem;
  $mode-buttons-height: 30px;
- $queue-height: calc(100vh - #{$pending-height} - #{$pane-mode-buttons-height} - #{$mode-buttons-height} - #{$bottom-bar-height} - #{$workflow-tabs-height} - 0.9rem);
+ $system-stats-bar-height: 24px;
+ $queue-height: calc(100vh - #{$pending-height} - #{$pane-mode-buttons-height} - #{$mode-buttons-height} - #{$bottom-bar-height} - #{$workflow-tabs-height} - 0.9rem - #{$system-stats-bar-height});
  $queue-height-history: calc(#{$queue-height} - #{$display-mode-buttons-height});
 
  .prompt-modal-header {

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/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/PromptDisplay.svelte

@@ -8,7 +8,7 @@
  import Gallery from "$lib/components/gradio/gallery/Gallery.svelte";
  import { ImageViewer } from "$lib/ImageViewer";
  import type { Styles } from "@gradio/utils";
- import { comfyFileToComfyBoxMetadata, comfyURLToComfyFile, countNewLines } from "$lib/utils";
+ import { comfyFileToComfyBoxMetadata, comfyURLToComfyFile, countNewLines, type ComfyImageLocation, convertComfyOutputToComfyURL } from "$lib/utils";
  import ReceiveOutputTargets from "./modal/ReceiveOutputTargets.svelte";
  import workflowState, { type ComfyBoxWorkflow, type WorkflowReceiveOutputTargets } from "$lib/stores/workflowState";
  import type { ComfyReceiveOutputNode } from "$lib/nodes/actions";
@@ -17,7 +17,7 @@
  const splitLength = 50;
 
  export let prompt: SerializedPromptInputsAll;
- 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;
@@ -36,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 = []
@@ -199,7 +196,7 @@
         <div class="image-container">
             <Block>
                 <Gallery
-                    value={images}
+                    value={images.map(convertComfyOutputToComfyURL)}
                     label=""
                     show_label={false}
                     style={galleryStyle}

src/lib/components/SystemStatsBar.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { ComfyDevice } from "$lib/api";
+	import systemState from "$lib/stores/systemState";
+
+ export let value: number | null = null;
+ export let max: number | null = null;
+ export let classes: string = "";
+ export let styles: string = "";
+ let percent: number = 0;
+ let totalGB: string = "";
+ let usedGB: string = "";
+ let text: string = ""
+
+ let device: ComfyDevice | null = null;
+ $: device = $systemState.devices[0]
+
+ function toGB(bytes: number): string {
+     return (bytes / 1024 / 1024 / 1024).toFixed(1)
+ }
+
+ $: if (device) {
+     percent = (1 - (device.vram_free / device.vram_total)) * 100;
+     totalGB = toGB(device.vram_total);
+     usedGB = toGB(device.vram_total - device.vram_free);
+     text = `${usedGB} / ${totalGB}GB (${percent.toFixed(1)}%)`
+ } else {
+     percent = 0
+     totalGB = ""
+     usedGB = ""
+     text = "??.?%"
+ }
+</script>
+
+<div class="progress {classes}" style={styles}>
+    <div class="bar" style="width: {percent}%;">
+        <span class="label">VRAM: {text}</span>
+    </div>
+</div>
+
+<style>
+ .progress {
+     height: 18px;
+     margin: 5px;
+     text-align: center;
+     color: var(--neutral-400);
+     border: 1px solid var(--neutral-500);
+     padding: 0px;
+     position: relative;
+ }
+
+ .bar {
+     height: 100%;
+     background: var(--secondary-800);
+ }
+
+ .label {
+     font-size: 8pt;
+     position: absolute;
+     margin: 0;
+     left: 0;
+     right: 0;
+     top: 50%;
+     transform: translateY(-50%);
+ }
+</style>

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/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/ComfyComboNode.ts

@@ -170,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[]> {
@@ -18,7 +19,8 @@ export default class ComfyGalleryNode extends ComfyWidgetNode<ComfyBoxImageMetad
         defaultValue: [],
         index: 0,
         updateMode: "replace",
-        autoSelectOnUpdate: true
+        autoSelectOnUpdate: true,
+        showPreviews: true
     }
 
     static slotLayout: SlotLayout = {

src/lib/nodes/widgets/ComfyWidgetNode.ts

@@ -357,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/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",
@@ -155,6 +185,19 @@ const defCacheBuiltInResources: ConfigDefBoolean<"cacheBuiltInResources"> = {
     options: {}
 };
 
+const defPollSystemStatsInterval: ConfigDefNumber<"pollSystemStatsInterval"> = {
+    name: "pollSystemStatsInterval",
+    type: "number",
+    defaultValue: 1000,
+    category: "behavior",
+    description: "Interval in milliseconds to refresh system stats (total/free VRAM). Set to 0 to disable",
+    options: {
+        min: 0,
+        max: 60000,
+        step: 100
+    }
+};
+
 const defBuiltInTemplates: ConfigDefStringArray<"builtInTemplates"> = {
     name: "builtInTemplates",
     type: "string[]",
@@ -194,10 +237,12 @@ export const CONFIG_DEFS = [
     defComfyUIHostname,
     defComfyUIPort,
     defNotifications,
+    defOutputThumbnails,
     defAlwaysStripUserState,
     defPromptForWorkflowName,
     defConfirmWhenUnloadingUnsavedChanges,
     defCacheBuiltInResources,
+    defPollSystemStatsInterval,
     defBuiltInTemplates,
     // defLinkDisplayType
 ] as const;

src/lib/stores/layoutStates.ts

@@ -615,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;
@@ -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/systemState.ts

@@ -0,0 +1,39 @@
+import { debounce, isMobileBrowser } from '$lib/utils';
+import { get, writable } from 'svelte/store';
+import type { Readable, Writable } from 'svelte/store';
+import type { WorkflowInstID, WorkflowReceiveOutputTargets } from './workflowState';
+import modalState, { type ModalData } from './modalState';
+import type { SlotType } from '@litegraph-ts/core';
+import type ComfyApp from '$lib/components/ComfyApp';
+import SendOutputModal, { type SendOutputModalResult } from "$lib/components/modal/SendOutputModal.svelte";
+import workflowState from './workflowState';
+import type { ComfyAPISystemStatsResponse, ComfyDevice } from '$lib/api';
+
+
+
+export type SystemState = {
+    devices: ComfyDevice[]
+}
+
+type SystemStateOps = {
+    updateState: (resp: ComfyAPISystemStatsResponse) => void
+}
+
+export type WritableSystemStateStore = Writable<SystemState> & SystemStateOps;
+const store: Writable<SystemState> = writable(
+    {
+        devices: []
+    })
+
+function updateState(resp: ComfyAPISystemStatsResponse) {
+    store.set({
+        devices: resp.devices
+    })
+}
+
+const interfaceStateStore: WritableSystemStateStore =
+{
+    ...store,
+    updateState
+}
+export default interfaceStateStore;

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
 }
@@ -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
@@ -94,13 +95,12 @@ function convertPendingEntry(entry: QueueEntry, status: QueueUIEntryStatus): Que
 
     const thumbnails = entry.extraData?.thumbnails
     if (thumbnails) {
-        result.images = thumbnails.map(convertComfyOutputToComfyURL);
+        result.images = [...thumbnails]
     }
 
     const outputs = Object.values(entry.outputs)
         .filter(o => o.images)
         .flatMap(o => o.images)
-        .map(convertComfyOutputToComfyURL);
     if (outputs) {
         result.images = result.images.concat(outputs)
     }
@@ -114,7 +114,6 @@ function convertCompletedEntry(entry: CompletedQueueEntry): QueueUIEntry {
     const images = Object.values(entry.entry.outputs)
         .filter(o => o.images)
         .flatMap(o => o.images)
-        .map(convertComfyOutputToComfyURL);
     result.images = images
 
     if (entry.message)
@@ -132,6 +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,6 +10,7 @@ export type UIState = {
     autoAddUI: boolean,
     uiUnlocked: boolean,
     uiEditMode: UIEditMode,
+    hidePreviews: boolean,
 
     reconnecting: boolean,
     forceSaveUserState: boolean | null,
@@ -30,6 +31,7 @@ const store: Writable<UIState> = writable(
         autoAddUI: true,
         uiUnlocked: false,
         uiEditMode: "widgets",
+        hidePreviews: false,
 
         reconnecting: false,
         forceSaveUserState: null,

src/lib/utils.ts

@@ -9,6 +9,7 @@ import workflowState, { type WorkflowReceiveOutputTargets } from "./stores/workf
 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)
@@ -300,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!"
@@ -336,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);
@@ -413,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. */
@@ -420,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
 }
 
 /*
@@ -544,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()
 }
@@ -741,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

@@ -12,6 +12,10 @@
  import { f7 } from "framework7-svelte";
  import type { ComfyGalleryNode } from "$lib/nodes/widgets";
  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} />

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,14 +1,8 @@
 <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 { 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";
@@ -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/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")
+    }
 }

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: [