Updates for mobile

src/lib/components/ComfyApp.svelte

@@ -22,6 +22,7 @@
  import ComfyUnlockUIButton from "./ComfyUnlockUIButton.svelte";
 	import ComfyGraphView from "./ComfyGraphView.svelte";
 	import { download } from "$lib/utils";
+	import notify from "$lib/notify";
 
  export let app: ComfyApp = undefined;
  let imageViewer: ImageViewer;
@@ -141,7 +142,7 @@
          return;
 
      app.saveStateToLocalStorage();
-     toast.push("Saved to local storage.")
+     notify("Saved to local storage.")
      //
      //      const date = new Date();
      //      const formattedDate = date.toISOString().replace(/:/g, '-').replace(/\.\d{3}/g, '').replace('T', '_').replace("Z", "");
@@ -165,7 +166,7 @@
 
  $: if ($uiState.uiUnlocked && !hasShownUIHelpToast) {
      hasShownUIHelpToast = true;
-     toast.push("Right-click to open context menu.")
+     notify("Right-click to open context menu.")
  }
 
  if (debugLayout) {

src/lib/components/ComfyApp.ts

@@ -28,6 +28,7 @@ import { ComfyBackendNode } from "$lib/nodes/ComfyBackendNode";
 import { get } from "svelte/store";
 import uiState from "$lib/stores/uiState";
 import { promptToGraphVis, workflowToGraphVis } from "$lib/utils";
+import notify from "$lib/notify";
 
 export const COMFYBOX_SERIAL_VERSION = 1;
 
@@ -601,11 +602,7 @@ export default class ComfyApp {
                     } catch (error) {
                         // this.ui.dialog.show(error.response || error.toString());
                         const mes = error.response || error.toString()
-                        toast.push(`Error queuing prompt:\n${mes}`, {
-                            theme: {
-                                '--toastBackground': 'var(--color-red-500)',
-                            }
-                        })
+                        notify(`Error queuing prompt:\n${mes}`, null, "error")
                         console.error(promptToGraphVis(p))
                         console.error("Error queuing prompt", mes, num, p)
                         break;
@@ -643,7 +640,7 @@ export default class ComfyApp {
                 }
                 else {
                     console.error("No metadata found in image file.", pngInfo)
-                    toast.push("No metadata found in image file.")
+                    notify("No metadata found in image file.")
                 }
             }
         } else if (file.type === "application/json" || file.name.endsWith(".json")) {

src/lib/components/ComfyQueue.svelte

@@ -1,15 +1,7 @@
 <script lang="ts">
  import queueState from "$lib/stores/queueState";
  import ProgressBar from "./ProgressBar.svelte";
-
- function getNodeInfo(nodeId: number): string {
-     let app = (window as any).app;
-     if (!app)
-         return String(nodeId);
-
-     const title = app.lGraph.getNodeById(nodeId)?.title || String(nodeId);
-     return title + " (" + nodeId + ")"
- }
+ import { getNodeInfo } from "$lib/utils"
 
  const entries = [
      {

src/lib/components/ProgressBar.svelte

@@ -23,15 +23,17 @@
 
 <style>
  .progress {
+     width: 100%;
+     height: 100%;
      text-align: center;
      background-color: lightgrey;
-     padding: 3px;
+     padding: 0px;
      position: relative;
  }
 
  .bar {
+     height: 100%;
      background-color: #B3D8A9;
-     height: 20px;
  }
 
  .label {

src/lib/nodes/ComfyActionNodes.ts

@@ -6,6 +6,7 @@ import { toast } from '@zerodevx/svelte-toast'
 import type { GalleryOutput } from "./ComfyWidgetNodes";
 import { get } from "svelte/store";
 import queueState from "$lib/stores/queueState";
+import notify from "$lib/notify";
 
 export interface ComfyQueueEventsProperties extends Record<any, any> {
 }
@@ -199,7 +200,7 @@ export class ComfyNotifyAction extends ComfyGraphNode {
     override onAction(action: any, param: any) {
         const message = this.getInputData(0);
         if (message) {
-            toast.push(message);
+            notify(message);
         }
     };
 }

src/lib/nodes/ComfyBackendNode.ts

@@ -113,7 +113,7 @@ export class ComfyBackendNode extends ComfyGraphNode {
                 }
             }
             else {
-                console.error("[ComfyBackendNode] Missing input config in onConfigure()!", input, configs)
+                console.debug("[ComfyBackendNode] Missing input config in onConfigure()", input, configs)
                 input.config = {}
             }
         }

src/lib/nodes/ComfyImageCacheNode.ts

@@ -158,7 +158,7 @@ export default class ComfyImageCacheNode extends ComfyGraphNode {
         else {
             this.properties.filenames[newIndex] = { filename: null, status: "uploading" }
             this.onPropertyChanged("filenames", this.properties.filenames)
-            const url = "http://localhost:8188" // TODO make configurable
+            const url = `http://${location.hostname}:8188` // TODO make configurable
             const params = new URLSearchParams(data)
 
             const promise = fetch(url + "/view?" + params)

src/lib/nodes/ComfyWidgetNodes.ts

@@ -516,11 +516,11 @@ export class ComfyGalleryNode extends ComfyWidgetNode<GradioFileData[]> {
     private convertItems(output: GalleryOutput): GradioFileData[] {
         return output.images.map(r => {
             // TODO configure backend URL
-            const url = "http://localhost:8188/view?"
+            const url = `http://${location.hostname}:8188` // TODO make configurable
             const params = new URLSearchParams(r)
             return {
                 name: null,
-                data: url + params
+                data: url + "/view?" + params
             }
         });
     }

src/lib/notify.ts

@@ -0,0 +1,37 @@
+import { toast } from "@zerodevx/svelte-toast";
+import type { SvelteToastOptions } from "@zerodevx/svelte-toast/stores";
+import { f7 } from "framework7-svelte"
+
+let notification;
+
+function notifyf7(text: string, title?: string) {
+    if (!notification) {
+        notification = f7.notification.create({
+            title: title,
+            titleRightText: 'now',
+            // subtitle: 'Notification with close on click',
+            text: text,
+            closeOnClick: true,
+            closeTimeout: 3000,
+        });
+    }
+    // Open it
+    notification.open();
+}
+
+function notifyToast(text: string, type?: string) {
+    const options: SvelteToastOptions = {}
+
+    if (type === "error") {
+        options.theme = {
+            '--toastBackground': 'var(--color-red-500)',
+        }
+    }
+
+    toast.push(text, options);
+}
+
+export default function notify(text: string, title?: string, type?: string) {
+    notifyf7(text, title);
+    notifyToast(text, title);
+}

src/lib/utils.ts

@@ -99,3 +99,12 @@ export function promptToGraphVis(prompt: SerializedPrompt): string {
     out += "}"
     return out
 }
+
+export function getNodeInfo(nodeId: number): string {
+    let app = (window as any).app;
+    if (!app)
+        return String(nodeId);
+
+    const title = app.lGraph.getNodeById(nodeId)?.title || String(nodeId);
+    return title + " (" + nodeId + ")"
+}

src/lib/widgets/ComboWidget.svelte

@@ -11,6 +11,7 @@
  let option: any
 
  export let debug: boolean = false;
+ let input: HTMLInputElement | null = null
 
  $: widget && setNodeValue(widget);
 
@@ -53,6 +54,11 @@
      return links[0].data
  }
 
+ function onSelect() {
+     if (input)
+         input.blur();
+ }
+
  let lastPropsChanged: number = 0;
  let werePropsChanged: boolean = false;
 
@@ -76,8 +82,10 @@
                     disabled={widget.attrs.disabled || node.properties.values.length === 0}
                     clearable={false}
                     showChevron={true}
+                    inputAttributes={{ autocomplete: 'off' }}
+                    bind:input
                     on:change
-                    on:select
+                    on:select={onSelect}
                     on:filter
                     on:blur
                 />

src/lib/widgets/RangeWidget.svelte

@@ -35,6 +35,7 @@
  function onRelease(e: Event) {
      if (nodeValue && option) {
          $nodeValue = option
+         navigator.vibrate(100)
      }
  }