Add dist/run scripts/workflow

src/lib/components/ComfyApp.svelte

@@ -11,6 +11,7 @@
  import { ImageViewer } from "$lib/ImageViewer";
  import type { ComfyAPIStatus } from "$lib/api";
  import { SvelteToast, toast } from '@zerodevx/svelte-toast'
+ import defaultGraph from "$lib/defaultGraph"
 
  import { LGraph } from "@litegraph-ts/core";
  import LightboxModal from "./LightboxModal.svelte";
@@ -95,6 +96,13 @@
      }
  }
 
+ async function doLoadDefault(): void {
+     var confirmed = confirm("Are you sure you want to clear the current workflow and load the default graph?");
+     if (confirmed) {
+         await app.deserialize(defaultGraph)
+     }
+ }
+
  function doRecenter(): void {
      app.lCanvas.recenter();
  }
@@ -180,6 +188,9 @@
         <Button variant="secondary" on:click={doReset}>
             Reset
         </Button>
+        <Button variant="secondary" on:click={doLoadDefault}>
+            Load Default
+        </Button>
         <Button variant="secondary" on:click={doRecenter}>
             Recenter
         </Button>

src/lib/components/ComfyApp.ts

@@ -108,7 +108,7 @@ export default class ComfyApp {
             const json = localStorage.getItem("workflow");
             if (json) {
                 const state = JSON.parse(json) as SerializedAppState;
-                this.deserialize(state)
+                await this.deserialize(state)
                 restored = true;
             }
         } catch (err) {
@@ -117,7 +117,7 @@ export default class ComfyApp {
 
         // We failed to restore a workflow so load the default
         if (!restored) {
-            this.initDefaultGraph();
+            await this.initDefaultGraph();
         }
 
         // Save current workflow automatically
@@ -344,7 +344,7 @@ export default class ComfyApp {
         }
     }
 
-    deserialize(data: SerializedAppState) {
+    async deserialize(data: SerializedAppState) {
         if (data.version !== COMFYBOX_SERIAL_VERSION) {
             throw `Invalid ComfyBox saved data format: ${data.version}`
         }
@@ -363,11 +363,13 @@ export default class ComfyApp {
 
         // Restore canvas offset/zoom
         this.lCanvas.deserialize(data.canvas)
+
+        await this.refreshComboInNodes();
     }
 
-    initDefaultGraph() {
+    async initDefaultGraph() {
         const state = structuredClone(defaultGraph)
-        this.deserialize(state)
+        await this.deserialize(state)
     }
 
     /**

src/lib/components/ComfyQueue.svelte

@@ -10,9 +10,79 @@
      const title = app.lGraph.getNodeById(nodeId)?.title || String(nodeId);
      return title + " (" + nodeId + ")"
  }
+
+ const entries = [
+     {
+         "outputs": {
+             44: {
+                 "images": [
+                     {
+                         "filename": "ComfyUI_00052_.png",
+                         "subfolder": "",
+                         "type": "output"
+                     }
+                 ]
+             }
+         }
+     },
+     {
+         "outputs": {
+             44: {
+                 "images": [
+                     {
+                         "filename": "ComfyUI_00052_.png",
+                         "subfolder": "",
+                         "type": "output"
+                     }
+                 ]
+             }
+         }
+     },
+     {
+         "outputs": {
+             44: {
+                 "images": [
+                     {
+                         "filename": "ComfyUI_00052_.png",
+                         "subfolder": "",
+                         "type": "output"
+                     }
+                 ]
+             }
+         }
+     }
+ ]
+
+ let _entries: any[] = []
+
+ $: if (entries) {
+     _entries = []
+     for (const entry of entries) {
+         for (const outputs of Object.values(entry.outputs)) {
+             const allImages = outputs.images.map(r => {
+                 // TODO configure backend URL
+                 const url = "http://localhost:8188/view?"
+                 const params = new URLSearchParams(r)
+                 return url + params
+             });
+
+             _entries.push({ allImages, name: "Output" })
+         }
+     }
+ }
 </script>
 
 <div class="queue">
+    <div class="queue-entries">
+        {#each _entries as entry}
+            <div class="queue-entry">
+                <img class="queue-entry-image" src={entry.allImages[0]} alt="thumbnail" />
+                <div class="queue-entry-details">
+                    {entry.name}
+                </div>
+            </div>
+        {/each}
+    </div>
     <div class="bottom">
         {#if $queueState.runningNodeId || $queueState.progress}
             <div class="node-name">
@@ -50,6 +120,20 @@
      align-items: center;
  }
 
+ .queue-entry {
+     padding: 0.5rem 0.5rem 0 0.5rem;
+     display: flex;
+     flex-direction: row;
+ }
+
+ .queue-entry-image {
+     width: var(--size-20)
+ }
+
+ .queue-entry-details {
+     width: var(--size-20)
+ }
+
  .node-name {
      border: 5px solid #CCC;
      background-color: var(--color-red-300);