Add dist/run scripts/workflow

.github/workflows/build-and-publish.yml

@@ -0,0 +1,64 @@
+name: Build and Publish
+
+on:
+  - push
+
+jobs:
+  test_default_inputs:
+    name: Test with default inputs
+
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      fail-fast: false
+      matrix:
+        pnpm:
+          - 4.11.1
+        os:
+          - ubuntu-latest
+          - macos-latest
+          - windows-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 7.26
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build
+        run: |
+          pnpm build:css
+          pnpm build
+
+      - uses: actions/upload-artifact@v3
+        with:
+          name: ComfyBox-dist
+          path: dist/
+          if-no-files-found: error # 'warn' or 'ignore' are also available, defaults to `warn`

.gitignore

@@ -8,3 +8,4 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+/dist

run.bat

@@ -0,0 +1,4 @@
+@echo off
+
+pushd dist
+python -m http.server 8000

run.sh

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+
+pushd dist/
+python -m http.server 8000

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);