feat: show alert when image not connected

js/Alert.js

@@ -0,0 +1,28 @@
+import { alertDialog } from "./state.js";
+import { van } from "./van.js";
+const { div, span } = van.tags;
+
+export function Alert() {
+  van.derive(() => {
+    if (alertDialog.val.time > 0) {
+      setTimeout(() => {
+        alertDialog.val = { text: "", time: 0 };
+      }, alertDialog.val.time);
+    }
+  });
+
+  return div(
+    {
+      class: () =>
+        "absolute bottom-8 flex justify-center w-full " +
+        (alertDialog.val.text ? "" : "hidden"),
+    },
+    div(
+      {
+        class:
+          "bg-orange-100 border-t-4 border-orange-500 rounded-sm text-orange-700 p-2",
+      },
+      () => span(alertDialog.val.text)
+    )
+  );
+}

js/Container.js

@@ -3,6 +3,7 @@ import { AvatarEditor } from './AvatarEditor.js';
 import { van } from './van.js';
 import { AvatarViewer } from './AvatarViewer.js';
 import { Loading } from './Loading.js';
+import { Alert } from './Alert.js';
 const { button, iframe, div, img } = van.tags;
 
 export function Container() {
@@ -14,6 +15,7 @@ export function Container() {
     AvatarEditor(),
     ImageEditor(),
     AvatarViewer(),
-    Loading()
+    Loading(),
+    Alert(),
   );
 }

js/index.js

@@ -11,6 +11,7 @@ import {
   selectedLayer,
   showLoading,
   loadingCaption,
+  alertDialog,
 } from "./state.js";
 import { van } from "./van.js";
 import { app } from "./app.js";
@@ -288,11 +289,18 @@ const ext = {
     return {
       SAM_PROMPTS(node, inputName, inputData, app) {
         const btn = node.addWidget("button", "Edit prompt", "", () => {
+          let connectedImageFileName = getInputWidgetValue(node, 0, "image");
+          if (!connectedImageFileName) {
+            alertDialog.val = {
+              text: "Please connect an image first",
+              time: 3000,
+            };
+            return;
+          }
+
           loadingCaption.val = "Computing image embedding...";
           showLoading.val = true;
 
-          let connectedImageFileName = getInputWidgetValue(node, 0, "image");
-
           const split = connectedImageFileName.split("/");
           let id = connectedImageFileName;
           if (split.length > 1) id = split[1];

js/state.js

@@ -12,15 +12,20 @@
  * @property {number} label - The label
  */
 
-import { van } from './van.js';
+import { van } from "./van.js";
 
-export const iframeSrc = van.state('https://editor.avatech.ai?comfyui=true');
+export const iframeSrc = van.state("https://editor.avatech.ai?comfyui=true");
 export const showEditor = van.state(false);
-export const fileName = van.state('');
+export const fileName = van.state("");
 export const showImageEditor = van.state(false);
 export const showLoading = van.state(false);
-export const loadingCaption = van.state('');
-export const imageUrl = van.state('');
+export const alertDialog = van.state({
+  text: "",
+  time: 0,
+});
+
+export const loadingCaption = van.state("");
+export const imageUrl = van.state("");
 export const point_label = van.state(1);
 export const imageContainerSize = van.state({
   width: 0,