Show free VRAM

src/lib/ComfyGraphCanvas.ts

@@ -25,7 +25,7 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
     activeErrors?: ComfyGraphErrors = null;
     blinkError: ComfyGraphErrorLocation | null = null;
     blinkErrorTime: number = 0;
-    highlightNodeAndInput: [LGraphNode, number | null] | null = null;
+    highlightNodeAndInput: [LGraphNode, number] | null = null;
 
     get comfyGraph(): ComfyGraph | null {
         return this.graph as ComfyGraph;
@@ -104,7 +104,7 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
         let state = get(queueState);
         let ss = get(selectionState);
 
-        const isExecuting = state.executingNodes.has(node.id);
+        const isRunningNode = node.id == state.runningNodeID
         const nodeErrors = this.activeErrors?.errorsByID[node.id];
         const isHighlightedNode = this.highlightNodeAndInput && this.highlightNodeAndInput[0].id === node.id;
 
@@ -133,20 +133,11 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
         else if (isHighlightedNode) {
             color = "cyan";
             thickness = 2
-
-            // Blink node if no input highlighted
-            if (this.highlightNodeAndInput[1] == null) {
-                if (this.blinkErrorTime > 0) {
-                    if ((Math.floor(this.blinkErrorTime / 2)) % 2 === 0) {
-                        color = null;
-                    }
-                }
-            }
         }
         else if (ss.currentHoveredNodes.has(node.id)) {
             color = "lightblue";
         }
-        else if (isExecuting) {
+        else if (isRunningNode) {
             color = "#0f0";
         }
 
@@ -162,7 +153,7 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
             this.drawNodeOutline(node, ctx, size, mouseOver, fgColor, bgColor, color, thickness)
         }
 
-        if (isExecuting && state.progress) {
+        if (isRunningNode && state.progress) {
             ctx.fillStyle = "green";
             ctx.fillRect(0, 0, size[0] * (state.progress.value / state.progress.max), 6);
             ctx.fillStyle = bgColor;
@@ -181,11 +172,9 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
             }
             if (draw) {
                 const [node, inputSlot] = this.highlightNodeAndInput;
-                if (inputSlot != null) {
+                ctx.lineWidth = 2;
-                    ctx.lineWidth = 2;
+                ctx.strokeStyle = color;
-                    ctx.strokeStyle = color;
+                this.highlightNodeInput(node, inputSlot, ctx);
-                    this.highlightNodeInput(node, inputSlot, ctx);
-                }
             }
         }
     }
@@ -744,7 +733,7 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
         this.selectNode(node);
     }
 
-    jumpToNodeAndInput(node: LGraphNode, slotIndex: number | null) {
+    jumpToNodeAndInput(node: LGraphNode, slotIndex: number) {
         this.jumpToNode(node);
         this.highlightNodeAndInput = [node, slotIndex];
         this.blinkErrorTime = 20;

src/lib/ImageViewer.ts

@@ -165,6 +165,7 @@ export class ImageViewer {
 
         let urls = ImageViewer.get_gallery_urls(galleryElem)
         const [_currentButton, index] = ImageViewer.selected_gallery_button(galleryElem)
+        console.warn("Gallery!", index, urls, galleryElem)
 
         this.showModal(urls, index, galleryElem)
     }

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,
@@ -45,8 +45,7 @@ export type ComfyAPIHistoryItem = [
 ]
 
 export type ComfyAPIPromptSuccessResponse = {
-    promptID: PromptID,
+    promptID: PromptID
-    number: number
 }
 
 export type ComfyAPIPromptResponse = ComfyAPIPromptSuccessResponse | ComfyAPIPromptErrorResponse
@@ -61,6 +60,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[]
 }
@@ -296,7 +309,7 @@ export default class ComfyAPI {
                 }
                 return res.json()
             })
-            .then(raw => { return { promptID: raw.prompt_id, number: raw.number } })
+            .then(raw => { return { promptID: raw.prompt_id } })
             .catch(error => { return error })
     }
 
@@ -372,4 +385,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/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,23 @@ export default class ComfyApp {
             }
         });
 
+        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();
     }
 
@@ -728,11 +746,9 @@ export default class ComfyApp {
     }
 
     private requestPermissions() {
-        if (window.Notification != null) {
+        if (Notification.permission === "default") {
-            if (window.Notification.permission === "default") {
+            Notification.requestPermission()
-                window.Notification.requestPermission()
+                .then((result) => console.log("Notification status:", result));
-                    .then((result) => console.log("Notification status:", result));
-            }
         }
     }
 
@@ -941,11 +957,7 @@ export default class ComfyApp {
         if (workflow.attrs.queuePromptButtonRunWorkflow) {
             // Hold control to queue at the front
             const num = this.ctrlDown ? -1 : 0;
-            let tag = null;
+            this.queuePrompt(workflow, num, 1);
-            if (workflow.attrs.queuePromptButtonDefaultWorkflow) {
-                tag = workflow.attrs.queuePromptButtonDefaultWorkflow
-            }
-            this.queuePrompt(workflow, num, 1, tag);
         }
     }
 
@@ -1043,11 +1055,11 @@ export default class ComfyApp {
 
                     const p = this.graphToPrompt(workflow, tag);
                     const wf = this.serialize(workflow)
-                    // console.debug(graphToGraphVis(workflow.graph))
+                    console.debug(graphToGraphVis(workflow.graph))
-                    // console.debug(promptToGraphVis(p))
+                    console.debug(promptToGraphVis(p))
 
                     const stdPrompt = this.stdPromptSerializer.serialize(p);
-                    // console.warn("STD", stdPrompt);
+                    console.warn("STD", stdPrompt);
 
                     const extraData: ComfyBoxPromptExtraData = {
                         extra_pnginfo: {
@@ -1080,8 +1092,8 @@ export default class ComfyApp {
                             workflowState.promptError(workflow.id, errorPromptID)
                         }
                         else {
-                            queueState.afterQueued(workflow.id, response.promptID, response.number, p.output, extraData)
+                            queueState.afterQueued(workflow.id, response.promptID, num, p.output, extraData)
-                            workflowState.afterQueued(workflow.id, response.promptID)
+                            workflowState.afterQueued(workflow.id, response.promptID, p, extraData)
                         }
                     } catch (err) {
                         errorMes = err?.toString();

src/lib/components/ComfyBoxWorkflowsView.svelte

@@ -1,11 +1,5 @@
 <script context="module" lang="ts">
- // workaround a vite HMR bug
+ export const WORKFLOWS_VIEW: any = {}
- // shouts out to @rixo
- // https://github.com/sveltejs/svelte/issues/8655
- export const WORKFLOWS_VIEW = import.meta.hot?.data?.WORKFLOWS_VIEW || {}
- if (import.meta.hot?.data) {
-     import.meta.hot.data.WORKFLOWS_VIEW = WORKFLOWS_VIEW
- }
 </script>
 
 <script lang="ts">

src/lib/components/ComfyGraphErrorList.svelte

@@ -4,36 +4,16 @@
  import Accordion from "./gradio/app/Accordion.svelte";
  import uiState from '$lib/stores/uiState';
  import type { ComfyNodeDefInputType } from "$lib/ComfyNodeDef";
- import type { INodeInputSlot, LGraphNode, LLink, Subgraph } from "@litegraph-ts/core";
+ import type { INodeInputSlot, LGraphNode, Subgraph } from "@litegraph-ts/core";
- import { UpstreamNodeLocator, getUpstreamLink, nodeHasTag } from "./ComfyPromptSerializer";
+ import { UpstreamNodeLocator } from "./ComfyPromptSerializer";
  import JsonView from "./JsonView.svelte";
 
  export let app: ComfyApp;
  export let errors: ComfyGraphErrors;
 
- let missingTag = null;
- let nodeToJumpTo = null;
- let inputSlotToHighlight = null;
- let _errors = null
-
- $: if (_errors != errors) {
-     _errors = errors;
-     if (errors.errors[0]) {
-         jumpToError(errors.errors[0])
-     }
- }
-
  function closeList() {
      app.lCanvas.clearErrors();
      $uiState.activeError = null;
-     clearState()
- }
-
- function clearState() {
-     _errors = null;
-     missingTag = null;
-     nodeToJumpTo = null;
-     inputSlotToHighlight = null;
  }
 
  function getParentNode(error: ComfyGraphErrorLocation): Subgraph | null {
@@ -44,26 +24,18 @@
      return node.graph._subgraph_node
  }
 
- function jumpToFoundNode() {
+ function canJumpToDisconnectedInput(error: ComfyGraphErrorLocation): boolean {
-     if (nodeToJumpTo == null) {
+     return error.errorType === ComfyNodeErrorType.RequiredInputMissing && error.input != null;
-         return
-     }
-
-     app.lCanvas.jumpToNodeAndInput(nodeToJumpTo, inputSlotToHighlight);
  }
 
- function detectDisconnected(error: ComfyGraphErrorLocation) {
+ function jumpToDisconnectedInput(error: ComfyGraphErrorLocation) {
-     missingTag = null;
-     nodeToJumpTo = null;
-     inputSlotToHighlight = null;
-
      if (error.errorType !== ComfyNodeErrorType.RequiredInputMissing || error.input == null) {
          return
      }
 
      const node = app.lCanvas.graph.getNodeByIdRecursive(error.nodeID);
 
-     const inputIndex = node.findInputSlotIndexByName(error.input.name);
+     const inputIndex =node.findInputSlotIndexByName(error.input.name);
      if (inputIndex === -1) {
          return
      }
@@ -71,33 +43,17 @@
      // TODO multiple tags?
      const tag: string | null = error.queueEntry.extraData.extra_pnginfo.comfyBoxPrompt.subgraphs[0];
 
-     const test = (node: LGraphNode, currentLink: LLink) => {
+     const test = (node: LGraphNode) => (node as any).isBackendNode
-         if (!nodeHasTag(node, tag, true))
-             return true;
-
-         const [nextGraph, nextLink, nextInputSlot, nextNode] = getUpstreamLink(node, currentLink)
-         return nextLink == null;
-     };
      const nodeLocator = new UpstreamNodeLocator(test)
-     const [foundNode, foundLink, foundInputSlot, foundPrevNode] = nodeLocator.locateUpstream(node, inputIndex, null);
+     const [_, foundLink, foundInputSlot, foundPrevNode] = nodeLocator.locateUpstream(node, inputIndex, tag);
 
      if (foundInputSlot != null && foundPrevNode != null) {
-         if (!nodeHasTag(foundNode, tag, true)) {
+         app.lCanvas.jumpToNodeAndInput(foundPrevNode, foundInputSlot);
-             nodeToJumpTo = foundNode
-             missingTag = tag;
-             inputSlotToHighlight = null;
-         }
-         else {
-             nodeToJumpTo = foundPrevNode;
-             inputSlotToHighlight = foundInputSlot;
-         }
      }
  }
 
  function jumpToError(error: ComfyGraphErrorLocation) {
      app.lCanvas.jumpToError(error);
-
-     detectDisconnected(error);
  }
 
  function getInputTypeName(type: ComfyNodeDefInputType) {
@@ -132,37 +88,26 @@
                                 <div class="error-details">
                                     <button class="jump-to-error" class:execution-error={isExecutionError} on:click={() => jumpToError(error)}><span>⮎</span></button>
                                     <div class="error-details-wrapper">
-                                        {#if missingTag && nodeToJumpTo}
+                                        <span class="error-message" class:execution-error={isExecutionError}>{error.message}</span>
-                                            <div class="error-input">
-                                                <div><span class="error-message">Node "{nodeToJumpTo.title}" was missing tag used in workflow:</span><span style:padding-left="0.2rem"><b>{missingTag}</b></span></div>
-                                                <div>Tags on node: <b>{(nodeToJumpTo?.properties?.tags || []).join(", ")}</b></div>
-                                            </div>
-                                        {:else}
-                                            <span class="error-message" class:execution-error={isExecutionError}>{error.message}</span>
-                                        {/if}
                                         {#if error.exceptionType}
                                             <span>({error.exceptionType})</span>
                                         {/if}
                                         {#if error.exceptionMessage && !isExecutionError}
                                             <div style:text-decoration="underline">{error.exceptionMessage}</div>
                                         {/if}
-                                        {#if nodeToJumpTo != null}
+                                        {#if error.input}
-                                            <div style:display="flex" style:flex-direction="row">
-                                                <button class="jump-to-error locate" on:click={jumpToFoundNode}><span>⮎</span></button>
-                                                {#if missingTag}
-                                                    <span>Jump to node: {nodeToJumpTo.title}</span>
-                                                {:else}
-                                                    <span>Find disconnected input</span>
-                                                {/if}
-                                            </div>
-                                        {/if}
-                                        {#if error.input && !missingTag}
                                             <div class="error-input">
                                                 <span>Input: <b>{error.input.name}</b></span>
                                                 {#if error.input.config}
                                                     <span>({getInputTypeName(error.input.config[0])})</span>
                                                 {/if}
                                             </div>
+                                            {#if canJumpToDisconnectedInput(error)}
+                                                <div style:display="flex" style:flex-direction="row">
+                                                    <button class="jump-to-error locate" on:click={() => jumpToDisconnectedInput(error)}><span>⮎</span></button>
+                                                    <span>Find disconnected input</span>
+                                                </div>
+                                            {/if}
 
                                             {#if error.input.receivedValue}
                                                 <div>

src/lib/components/ComfyPromptSerializer.ts

@@ -71,62 +71,62 @@ export function isActiveBackendNode(node: LGraphNode, tag: string | null = null)
     return true;
 }
 
-export type UpstreamResult = [LGraph | null, LLink | null, number | null, LGraphNode | null];
+type UpstreamResult = [LGraph | null, LLink | null, number | null, LGraphNode | null];
-
-function followSubgraph(subgraph: Subgraph, link: LLink): UpstreamResult {
-    if (link.origin_id != subgraph.id)
-        throw new Error("Invalid link and graph output!")
-
-    const innerGraphOutput = subgraph.getInnerGraphOutputByIndex(link.origin_slot)
-    if (innerGraphOutput == null)
-        throw new Error("No inner graph input!")
-
-    const nextLink = innerGraphOutput.getInputLink(0)
-    return [innerGraphOutput.graph, nextLink, 0, innerGraphOutput];
-}
-
-function followGraphInput(graphInput: GraphInput, link: LLink): UpstreamResult {
-    if (link.origin_id != graphInput.id)
-        throw new Error("Invalid link and graph input!")
-
-    const outerSubgraph = graphInput.getParentSubgraph();
-    if (outerSubgraph == null)
-        throw new Error("No outer subgraph!")
-
-    const outerInputIndex = outerSubgraph.inputs.findIndex(i => i.name === graphInput.nameInGraph)
-    if (outerInputIndex === -1)
-        throw new Error("No outer input slot!")
-
-    const nextLink = outerSubgraph.getInputLink(outerInputIndex)
-    return [outerSubgraph.graph, nextLink, outerInputIndex, outerSubgraph];
-}
-
-export function getUpstreamLink(parent: LGraphNode, currentLink: LLink): UpstreamResult {
-    if (parent.is(Subgraph)) {
-        console.debug("FollowSubgraph")
-        return followSubgraph(parent, currentLink);
-    }
-    else if (parent.is(GraphInput)) {
-        console.debug("FollowGraphInput")
-        return followGraphInput(parent, currentLink);
-    }
-    else if ("getUpstreamLink" in parent) {
-        const link = (parent as ComfyGraphNode).getUpstreamLink();
-        return [parent.graph, link, link?.target_slot, parent];
-    }
-    else if (parent.inputs.length === 1) {
-        // Only one input, so assume we can follow it backwards.
-        const link = parent.getInputLink(0);
-        if (link) {
-            return [parent.graph, link, 0, parent]
-        }
-    }
-    console.warn("[graphToPrompt] Frontend node does not support getUpstreamLink", parent.type)
-    return [null, null, null, null];
-}
 
 export class UpstreamNodeLocator {
-    constructor(private isTheTargetNode: (node: LGraphNode, currentLink: LLink) => boolean) {
+    constructor(private isTheTargetNode: (node: LGraphNode) => boolean) {
+    }
+
+    private followSubgraph(subgraph: Subgraph, link: LLink): UpstreamResult {
+        if (link.origin_id != subgraph.id)
+            throw new Error("Invalid link and graph output!")
+
+        const innerGraphOutput = subgraph.getInnerGraphOutputByIndex(link.origin_slot)
+        if (innerGraphOutput == null)
+            throw new Error("No inner graph input!")
+
+        const nextLink = innerGraphOutput.getInputLink(0)
+        return [innerGraphOutput.graph, nextLink, 0, innerGraphOutput];
+    }
+
+    private followGraphInput(graphInput: GraphInput, link: LLink): UpstreamResult {
+        if (link.origin_id != graphInput.id)
+            throw new Error("Invalid link and graph input!")
+
+        const outerSubgraph = graphInput.getParentSubgraph();
+        if (outerSubgraph == null)
+            throw new Error("No outer subgraph!")
+
+        const outerInputIndex = outerSubgraph.inputs.findIndex(i => i.name === graphInput.nameInGraph)
+        if (outerInputIndex == null)
+            throw new Error("No outer input slot!")
+
+        const nextLink = outerSubgraph.getInputLink(outerInputIndex)
+        return [outerSubgraph.graph, nextLink, outerInputIndex, outerSubgraph];
+    }
+
+    private getUpstreamLink(parent: LGraphNode, currentLink: LLink): UpstreamResult {
+        if (parent.is(Subgraph)) {
+            console.debug("FollowSubgraph")
+            return this.followSubgraph(parent, currentLink);
+        }
+        else if (parent.is(GraphInput)) {
+            console.debug("FollowGraphInput")
+            return this.followGraphInput(parent, currentLink);
+        }
+        else if ("getUpstreamLink" in parent) {
+            const link = (parent as ComfyGraphNode).getUpstreamLink();
+            return [parent.graph, link, link?.target_slot, parent];
+        }
+        else if (parent.inputs.length === 1) {
+            // Only one input, so assume we can follow it backwards.
+            const link = parent.getInputLink(0);
+            if (link) {
+                return [parent.graph, link, 0, parent]
+            }
+        }
+        console.warn("[graphToPrompt] Frontend node does not support getUpstreamLink", parent.type)
+        return [null, null, null, null];
     }
 
     /*
@@ -146,8 +146,8 @@ export class UpstreamNodeLocator {
         let currentInputSlot = inputIndex;
         let currentNode = fromNode;
 
-        const shouldFollowParent = (parent: LGraphNode, currentLink: LLink) => {
+        const shouldFollowParent = (parent: LGraphNode) => {
-            return isActiveNode(parent, tag) && !this.isTheTargetNode(parent, currentLink);
+            return isActiveNode(parent, tag) && !this.isTheTargetNode(parent);
         }
 
         // If there are non-target nodes between us and another
@@ -156,8 +156,8 @@ export class UpstreamNodeLocator {
         // will simply follow their single input, while branching
         // nodes have conditional logic that determines which link
         // to follow backwards.
-        while (shouldFollowParent(parent, currentLink)) {
+        while (shouldFollowParent(parent)) {
-            const [nextGraph, nextLink, nextInputSlot, nextNode] = getUpstreamLink(parent, currentLink);
+            const [nextGraph, nextLink, nextInputSlot, nextNode] = this.getUpstreamLink(parent, currentLink);
 
             currentInputSlot = nextInputSlot;
             currentNode = nextNode;
@@ -183,7 +183,7 @@ export class UpstreamNodeLocator {
             }
         }
 
-        if (!isActiveNode(parent, tag) || !this.isTheTargetNode(parent, currentLink) || currentLink == null)
+        if (!isActiveNode(parent, tag) || !this.isTheTargetNode(parent) || currentLink == null)
             return [null, currentLink, currentInputSlot, currentNode];
 
         return [parent, currentLink, currentInputSlot, currentNode]

src/lib/components/ComfyQueue.svelte

@@ -16,6 +16,7 @@
 <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";
@@ -241,6 +242,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 +267,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/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/gradio/gallery/Gallery.svelte

@@ -15,7 +15,7 @@
 	export let label: string;
 	export let root: string = "";
 	export let root_url: null | string = null;
-    export let focusOnScroll = false;
+    export let scrollOnUpdate = false;
 	export let value: Array<string> | Array<FileData> | null = null;
 	export let style: Styles = {
 		grid_cols: [2],
@@ -121,11 +121,11 @@
 	let container: HTMLDivElement;
 
 	async function scroll_to_img(index: number | null) {
+        if (!scrollOnUpdate) return;
 		if (typeof index !== "number") return;
 		await tick();
 
-		if (focusOnScroll)
+		el[index].focus();
-			el[index].focus();
 
 		const { left: container_left, width: container_width } =
 			container.getBoundingClientRect();

src/lib/nodes/ComfyPickFirstNode.ts

@@ -3,7 +3,7 @@ import ComfyGraphNode, { type ComfyGraphNodeProperties } from "./ComfyGraphNode"
 import { Watch } from "@litegraph-ts/nodes-basic";
 import { nextLetter } from "$lib/utils";
 
-export type PickFirstMode = "anyActiveLink" | "dataTruthy" | "dataNonNull"
+export type PickFirstMode = "anyActiveLink" | "truthy" | "dataNonNull"
 
 export interface ComfyPickFirstNodeProperties extends ComfyGraphNodeProperties {
     mode: PickFirstMode
@@ -12,7 +12,7 @@ export interface ComfyPickFirstNodeProperties extends ComfyGraphNodeProperties {
 export default class ComfyPickFirstNode extends ComfyGraphNode {
     override properties: ComfyPickFirstNodeProperties = {
         tags: [],
-        mode: "anyActiveLink"
+        mode: "dataNonNull"
     }
 
     static slotLayout: SlotLayout = {
@@ -36,39 +36,21 @@ export default class ComfyPickFirstNode extends ComfyGraphNode {
         super(title);
         this.displayWidget = this.addWidget("text", "Value", "")
         this.displayWidget.disabled = true;
-        this.modeWidget = this.addWidget("combo", "Mode", this.properties.mode, null, { property: "mode", values: ["anyActiveLink", "dataTruthy", "dataNonNull"] })
+        this.modeWidget = this.addWidget("combo", "Mode", this.properties.mode, null, { property: "mode", values: ["anyActiveLink", "truthy", "dataNonNull"] })
     }
 
     override onDrawBackground(ctx: CanvasRenderingContext2D) {
-        if (this.flags.collapsed) {
+        if (this.flags.collapsed || this.selected === -1) {
             return;
         }
 
-        if (this.selected === -1) {
+        ctx.fillStyle = "#AFB";
-            // Draw an X indicating nothing matched the selection criteria
+        var y = (this.selected) * LiteGraph.NODE_SLOT_HEIGHT + 6;
-            const y = LiteGraph.NODE_SLOT_HEIGHT + 6;
+        ctx.beginPath();
-            ctx.lineWidth = 5;
+        ctx.moveTo(50, y);
-            ctx.strokeStyle = "red";
+        ctx.lineTo(50, y + LiteGraph.NODE_SLOT_HEIGHT);
-            ctx.beginPath();
+        ctx.lineTo(34, y + LiteGraph.NODE_SLOT_HEIGHT * 0.5);
-
+        ctx.fill();
-            ctx.moveTo(50 - 15, y - 15);
-            ctx.lineTo(50 + 15, y + 15);
-            ctx.stroke();
-
-            ctx.moveTo(50 + 15, y - 15);
-            ctx.lineTo(50 - 15, y + 15);
-            ctx.stroke();
-        }
-        else {
-            // Draw an arrow pointing to the selected input
-            ctx.fillStyle = "#AFB";
-            const y = (this.selected) * LiteGraph.NODE_SLOT_HEIGHT + 6;
-            ctx.beginPath();
-            ctx.moveTo(50, y);
-            ctx.lineTo(50, y + LiteGraph.NODE_SLOT_HEIGHT);
-            ctx.lineTo(34, y + LiteGraph.NODE_SLOT_HEIGHT * 0.5);
-            ctx.fill();
-        }
     };
 
     override onConnectionsChange(
@@ -131,7 +113,7 @@ export default class ComfyPickFirstNode extends ComfyGraphNode {
         else {
             if (this.properties.mode === "dataNonNull")
                 return link.data != null;
-            else if (this.properties.mode === "dataTruthy")
+            else if (this.properties.mode === "truthy")
                 return Boolean(link.data)
             else // anyActiveLink
                 return true;

src/lib/notify.ts

@@ -92,11 +92,6 @@ function notifyToast(text: string, options: NotifyOptions) {
 }
 
 function notifyNative(text: string, options: NotifyOptions) {
-    if (window.Notification == null) {
-        console.warn("[notify] No Notification available on window")
-        return
-    }
-
     if (document.hasFocus())
         return;
 

src/lib/stores/configDefs.ts

@@ -155,6 +155,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[]",
@@ -198,6 +211,7 @@ export const CONFIG_DEFS = [
     defPromptForWorkflowName,
     defConfirmWhenUnloadingUnsavedChanges,
     defCacheBuiltInResources,
+    defPollSystemStatsInterval,
     defBuiltInTemplates,
     // defLinkDisplayType
 ] as const;

src/lib/stores/layoutStates.ts

@@ -681,13 +681,6 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 editable: true,
                 defaultValue: true
             },
-            {
-                name: "queuePromptButtonDefaultWorkflow",
-                type: "string",
-                location: "workflow",
-                editable: true,
-                defaultValue: ""
-            },
             {
                 name: "showDefaultNotifications",
                 type: "boolean",

src/lib/stores/queueState.ts

@@ -9,7 +9,6 @@ import { v4 as uuidv4 } from "uuid";
 import workflowState, { type WorkflowError, type WorkflowExecutionError, type WorkflowInstID, type WorkflowValidationError } from "./workflowState";
 import configState from "./configState";
 import uiQueueState from "./uiQueueState";
-import type { NodeID } from "@litegraph-ts/core";
 
 export type QueueEntryStatus = "success" | "validation_failed" | "error" | "interrupted" | "all_cached" | "unknown";
 
@@ -82,21 +81,7 @@ export type QueueState = {
     queuePending: Writable<QueueEntry[]>,
     queueCompleted: Writable<CompletedQueueEntry[]>,
     queueRemaining: number | "X" | null;
-
-    /*
-     * Currently executing node if any
-     */
     runningNodeID: ComfyNodeID | null;
-
-    /*
-     * Nodes which should be rendered as "executing" in the frontend (green border).
-     * This includes the running node and all its parent subgraphs
-     */
-    executingNodes: Set<NodeID>;
-
-    /*
-     * Progress for the current node reported by the frontend
-     */
     progress: Progress | null,
     /**
      * If true, user pressed the "Interrupt" button in the frontend. Disable the
@@ -113,7 +98,6 @@ const store: Writable<QueueState> = writable({
     queueCompleted: writable([]),
     queueRemaining: null,
     runningNodeID: null,
-    executingNodes: new Set(),
     progress: null,
     isInterrupting: false
 })
@@ -288,7 +272,6 @@ function executingUpdated(promptID: PromptID, runningNodeID: ComfyNodeID | null)
 
     store.update((s) => {
         s.progress = null;
-        s.executingNodes.clear();
 
         const [index, entry, queue] = findEntryInPending(promptID);
         if (runningNodeID != null) {
@@ -296,17 +279,6 @@ function executingUpdated(promptID: PromptID, runningNodeID: ComfyNodeID | null)
                 entry.nodesRan.add(runningNodeID)
             }
             s.runningNodeID = runningNodeID;
-
-            if (entry?.extraData?.workflowID) {
-                const workflow = workflowState.getWorkflow(entry.extraData.workflowID);
-                if (workflow != null) {
-                    let node = workflow.graph.getNodeByIdRecursive(s.runningNodeID);
-                    while (node != null) {
-                        s.executingNodes.add(node.id);
-                        node = node.graph?._subgraph_node;
-                    }
-                }
-            }
         }
         else {
             // Prompt finished executing.
@@ -338,7 +310,6 @@ function executingUpdated(promptID: PromptID, runningNodeID: ComfyNodeID | null)
             }
             s.progress = null;
             s.runningNodeID = null;
-            s.executingNodes.clear();
         }
         entry_ = entry;
         return s
@@ -363,7 +334,6 @@ function executionCached(promptID: PromptID, nodes: ComfyNodeID[]) {
         s.isInterrupting = false; // TODO move to start
         s.progress = null;
         s.runningNodeID = null;
-        s.executingNodes.clear();
         return s
     })
 }
@@ -381,7 +351,6 @@ function executionError(error: ComfyExecutionError): CompletedQueueEntry | null
         }
         s.progress = null;
         s.runningNodeID = null;
-        s.executingNodes.clear();
         return s
     })
     return entry_;
@@ -415,8 +384,6 @@ function executionStart(promptID: PromptID) {
             moveToRunning(index, queue)
         }
         s.isInterrupting = false;
-        s.runningNodeID = null;
-        s.executingNodes.clear();
         return s
     })
 }
@@ -481,7 +448,6 @@ function queueCleared(type: QueueItemType) {
             s.queueRemaining = 0;
             s.runningNodeID = null;
             s.progress = null;
-            s.executingNodes.clear();
         }
         else {
             s.queueCompleted.set([])

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

@@ -57,12 +57,6 @@ export type WorkflowAttributes = {
      */
     queuePromptButtonRunWorkflow: boolean,
 
-    /*
-     * Default subgraph to run if `queuePromptButtonRunWorkflow` is `true`. Set
-     * to blank to run the default subgraph (tagless).
-     */
-    queuePromptButtonDefaultWorkflow: string,
-
     /*
      * If true, notifications will be shown when a prompt is queued and
      * completed. Set to false if you need more detailed control over the

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 { getSafetensorsMetadata } from '$lib/utils';
  export let widget: WidgetLayout | null = null;
  export let isMobile: boolean = false;
  let node: ComfyComboNode | null = null;
@@ -174,7 +174,7 @@
                         itemCount={filteredItems.length}
                         {itemSize}
                         overscanCount={5}
-                        scrollToIndex={activeIndex != null ? clamp(activeIndex + itemsToShow - 1, 0, filteredItems.length-1) : hoverItemIndex}>
+                        scrollToIndex={hoverItemIndex}>
                         <div slot="item"
                                 class="comfy-select-item"
                                 class:mobile={isMobile}