Upload folder via script

dataflow/codecs.py

@@ -11,6 +11,7 @@ def node_to_vueflow(n: NodeInstance, data_extra: dict[str, Any] | None = None) -
     """Convert a NodeInstance to a plain Vue Flow node dict.
 
     data_extra can be used by higher level code to attach UI specific state.
+    If data_extra contains 'inputs' or 'outputs', they will replace the defaults.
     """
     data: dict[str, Any] = {
         "kind": n.node_type.kind.value,
@@ -20,7 +21,15 @@ def node_to_vueflow(n: NodeInstance, data_extra: dict[str, Any] | None = None) -
     }
     if data_extra:
         # app level UI code can attach arbitrary extra fields here
-        data.update(data_extra)
+        # If inputs/outputs are provided, they replace the defaults (allows custom positioning)
+        if "inputs" in data_extra:
+            data["inputs"] = data_extra["inputs"]
+        if "outputs" in data_extra:
+            data["outputs"] = data_extra["outputs"]
+        # Update other fields
+        for key, value in data_extra.items():
+            if key not in ("inputs", "outputs"):
+                data[key] = value
 
     return {
         "id": n.node_id,

dataflow/graph.py

@@ -1,18 +1,22 @@
 from __future__ import annotations
 
 from dataclasses import dataclass, field
-from typing import Iterable
+from typing import Iterable, Callable, Awaitable
 
 from .connection import Connection
 from .enums import DataPortState, ConnectMultiplicity
 from .nodes_base import NodeInstance
 
+NodeExecutedCallback = Callable[[NodeInstance], Awaitable[None] | None]
+
 
 @dataclass(slots=True)
 class DataGraph:
     nodes: dict[str, NodeInstance] = field(default_factory=dict)
     connections: list[Connection] = field(default_factory=list)
 
+    _on_node_executed: NodeExecutedCallback | None = field(default=None, repr=False)
+
     def add_node(self, node: NodeInstance) -> None:
         self.nodes[node.node_id] = node
 
@@ -34,6 +38,26 @@ class DataGraph:
             if c.start_node is node:
                 yield c
 
+    def set_on_node_executed(self, cb: NodeExecutedCallback | None) -> None:
+        """Register a callback that is invoked after each node is executed.
+
+        The callback can be sync or async. Pass None to disable.
+        """
+        self._on_node_executed = cb
+
+    async def _run_node(self, node: NodeInstance) -> None:
+        """Internal helper that executes a single node and fires the callback."""
+        await node.process()
+
+        cb = self._on_node_executed
+        if cb is None:
+            return
+
+        result = cb(node)
+        # allow async callbacks
+        if hasattr(result, "__await__"):
+            await result  # type: ignore[func-returns-value]
+
     async def execute(self, node: NodeInstance | None = None) -> None:
         if node is None:
             for n in list(self.nodes.values()):
@@ -54,6 +78,9 @@ class DataGraph:
             feeds = [c for c in incoming_conns if c.end_port is inp]
 
             if not feeds:
+                # No connections to this port - clear its value
+                inp.value = None if inp.schema.multiplicity == ConnectMultiplicity.SINGLE else []
+                inp.state = DataPortState.CLEAN
                 continue
 
             if inp.schema.multiplicity == ConnectMultiplicity.MULTIPLE:
@@ -67,17 +94,24 @@ class DataGraph:
                 # Single connection (take the last one if multiple defined by mistake)
                 if feeds:
                     inp.value = feeds[-1].start_port.value
+                    print(
+                        f"[DEBUG Graph] Transferring value to {node.node_id}.{inp.name}: type={type(inp.value).__name__ if inp.value is not None else 'None'}")
 
             inp.state = DataPortState.CLEAN
 
+        old_outputs = {p.name: p.value for p in node.all_outputs()}
+
         # Process
-        await node.process()
+        await self._run_node(node)
 
+        # after process
         for outp in node.all_outputs():
             outp.state = DataPortState.CLEAN
 
+        # mark downstream dirty only if needed
         for c in self.downstream_of(node):
-            # We just mark downstream as dirty; the next execute call will pull the data
-            c.end_port.state = DataPortState.DIRTY
-            if c.end_node.auto_process:
-                await self.execute(c.end_node)
+            out_name = c.start_port.name
+            before = old_outputs.get(out_name)
+            after = c.start_port.value
+            if before != after:
+                c.end_port.state = DataPortState.DIRTY

dataflow/nodes_base.py

@@ -54,3 +54,6 @@ class NodeInstance:
                 self.on_process(self)
         else:
             pass
+
+    def reset_node(self) -> None:
+        pass

dataflow/ui/vueflow_canvas.py

@@ -49,3 +49,7 @@ class VueFlowCanvas(Element, component="vueflow_canvas.vue"):
     def update_node_values(self, node_id: str, values: dict[str, Any]) -> None:
         """Patch the node.data.values dict."""
         self.run_method("updateNodeValues", {"id": node_id, "values": values})
+
+    def update_node_progress(self, node_id: str, progress: float, message: str | None = None) -> None:
+        """Update progress percentage and message for a node."""
+        self.run_method("updateNodeProgress", {"id": node_id, "progress": progress, "message": message})

dataflow/ui/vueflow_canvas.vue

@@ -3,7 +3,6 @@
   <div
       :class="['nicegui-vueflow', dark ? 'q-dark' : '']"
       tabindex="0"
-      @keydown="onKeyDown"
   >
     <div v-if="!ready" class="vf-loading">Loading graph...</div>
     <div v-else class="vf-root">
@@ -26,7 +25,10 @@
           @pane-ready="onPaneReady"
           @pane-click="onPaneClick"
           @pane-context-menu="onPaneContextMenu"
+          @pane-mousemove="onPaneMouseMove"
           @connect="onConnect"
+          @connect-start="onConnectStart"
+          @connect-end="onConnectEnd"
           @node-drag-stop="onNodeDragStop"
           @nodes-change="onNodesChange"
           @edges-change="onEdgesChange"
@@ -35,7 +37,11 @@
       >
         <!-- generic base node with left/right handles and field based UI -->
         <template #node-base="nodeProps">
-          <div class="vf-node" :class="{ 'vf-node-selected': nodeProps.selected }">
+          <div 
+              class="vf-node" 
+              :class="{ 'vf-node-selected': nodeProps.selected }"
+              :style="nodeProps.data.min_height ? { minHeight: nodeProps.data.min_height + 'px' } : {}"
+          >
             <!-- input handles on the left -->
             <div class="vf-node-handles vf-node-handles-left" v-if="Handle">
               <component
@@ -57,31 +63,71 @@
                   {{ nodeProps.data.title || nodeProps.id }}
                 </div>
                 <div class="vf-node-header-actions">
-                  <a
-                      v-if="getImageResultValue(nodeProps)"
-                      :href="normalizeImageSrc(getImageResultValue(nodeProps))"
-                      download="generated.png"
-                      class="vf-exec-button vf-download-header"
-                      @click.stop
+                  <button
+                    v-if="nodeProps.data.executable"
+                    class="vf-exec-button"
+                    :disabled="nodeProps.data.processing"
+                    @click.stop="onExecuteClick(nodeProps)"
+                  >
+                    <span v-if="nodeProps.data.processing" class="vf-spinner">
+                      <svg viewBox="0 0 36 36" class="vf-spinner-svg">
+                        <circle
+                          cx="18"
+                          cy="18"
+                          r="16"
+                          fill="none"
+                          stroke="rgba(255, 255, 255, 0.3)"
+                          stroke-width="3"
+                        ></circle>
+                        <circle
+                          cx="18"
+                          cy="18"
+                          r="16"
+                          fill="none"
+                          stroke="#3b82f6"
+                          stroke-width="3"
+                          stroke-dasharray="100"
+                          :stroke-dashoffset="100 - ((nodeProps.data.progress || 0) * 100)"
+                          class="vf-spinner-progress"
+                        ></circle>
+                      </svg>
+                    </span>
+                    <span v-else>
+                      <q-icon name="rocket_launch" />
+                      <q-tooltip>Run Node</q-tooltip>
+                    </span>
+                  </button>
+
+                  <button
+                    v-if="nodeProps.data.executable"
+                    class="vf-exec-button"
+                    :disabled="nodeProps.data.processing || !nodeHasContent(nodeProps)"
+                    @click.stop="onResetClick(nodeProps)"
                   >
-                    Download
-                  </a>
+                    <span>
+                      <q-icon name="delete_forever" />
+                      <q-tooltip>Reset Node</q-tooltip>
+                    </span>
+                  </button>
+
                   <button
-                      v-if="nodeProps.data.executable"
-                      class="vf-exec-button"
-                      :disabled="nodeProps.data.processing"
-                      @click.stop="onExecuteClick(nodeProps)"
+                    v-if="nodeProps.data.executable"
+                    class="vf-exec-button"
+                    :disabled="nodeProps.data.processing || !nodeHasContent(nodeProps)"
+                    @click.stop="onDownloadClick(nodeProps)"
                   >
-                    <span v-if="nodeProps.data.processing" class="vf-spinner"></span>
-                    <span v-else>Run</span>
+                    <span>
+                      <q-icon name="download" />
+                      <q-tooltip>Download Image</q-tooltip>
+                    </span>
                   </button>
 
-                  <!-- simple dropdown for node actions -->
+                  <!-- rest of header (menu) unchanged -->
                   <div class="vf-node-menu" @click.stop>
                     <button
-                        type="button"
-                        class="vf-node-menu-button"
-                        @click.stop="toggleNodeMenu(nodeProps.id)"
+                      type="button"
+                      class="vf-node-menu-button"
+                      @click.stop="toggleNodeMenu(nodeProps.id)"
                     >
                       <span class="vf-node-menu-dot"></span>
                       <span class="vf-node-menu-dot"></span>
@@ -89,9 +135,9 @@
                     </button>
                     <div v-if="isNodeMenuOpen(nodeProps.id)" class="vf-node-menu-items">
                       <button
-                          type="button"
-                          class="vf-node-menu-item"
-                          @click.stop="onNodeMenuAction(nodeProps.id, 'delete')"
+                        type="button"
+                        class="vf-node-menu-item"
+                        @click.stop="onNodeMenuAction(nodeProps.id, 'delete')"
                       >
                         Delete node
                       </button>
@@ -102,15 +148,16 @@
 
               <!-- node level error -->
               <div v-if="nodeProps.data.values && nodeProps.data.values.error" class="vf-node-error">
-                {{ nodeProps.data.values.error }}
-              </div>
-
-              <!-- processing progress bar -->
-              <div v-if="nodeProps.data.processing" class="vf-node-progress">
-                <div class="vf-node-progress-bar"></div>
+                <span>{{ nodeProps.data.values.error }}</span>
               </div>
 
               <div class="vf-node-content">
+                <q-inner-loading
+                          v-if="nodeProps.data.executable"
+                          :showing="nodeProps.data.processing && (nodeProps.data.progress !== 1 || nodeProps.data.progress !== 0)"
+                      >
+                        <q-spinner-grid size="50px" color="black" />
+                </q-inner-loading>
                 <template v-if="nodeProps.data.fields && nodeProps.data.fields.length">
                   <div
                       v-for="field in nodeProps.data.fields"
@@ -124,19 +171,27 @@
                           type="text"
                           v-model="nodeProps.data.values[field.name]"
                           @blur="onFieldBlur(nodeProps, field)"
+                          @keydown.stop
+                          @wheel.stop
+                          @mousedown.stop
+                          @click.stop
                           :placeholder="field.placeholder || ''"
                       />
                     </div>
 
                     <!-- textarea field -->
                     <div v-else-if="field.kind === 'textarea'">
-                          <textarea
-                              class="vf-node-textarea"
-                              rows="5"
-                              v-model="nodeProps.data.values[field.name]"
-                              @blur="onFieldBlur(nodeProps, field)"
-                              :placeholder="field.placeholder || ''"
-                          ></textarea>
+                      <textarea
+                          class="vf-node-textarea"
+                          rows="5"
+                          v-model="nodeProps.data.values[field.name]"
+                          @blur="onFieldBlur(nodeProps, field)"
+                          @keydown.stop
+                          @wheel.stop
+                          @mousedown.stop
+                          @click.stop
+                          :placeholder="field.placeholder || ''"
+                      ></textarea>
                     </div>
 
                     <!-- image upload field -->
@@ -154,14 +209,20 @@
                         <button
                             type="button"
                             class="vf-exec-button vf-upload-header-btn-secondary"
-                            @click="onImageClipboard(nodeProps, field)"
-                        >
+                            @click="onImageClipboard(nodeProps, field)">
                           Paste
                         </button>
                       </div>
                       <div class="vf-image-preview-wrapper"
                            v-if="nodeProps.data.values && nodeProps.data.values[field.name]">
                         <img :src="normalizeImageSrc(nodeProps.data.values[field.name])"/>
+                          <button
+                              type="button"
+                              class="vf-image-delete-btn"
+                              @click.stop="onImageDelete(nodeProps, field)"
+                             >
+                            Delete
+                          </button>
                       </div>
                       <div class="vf-image-placeholder" v-else>No image</div>
                     </div>
@@ -352,9 +413,17 @@ export default {
       contextMenuFlowPosition: null,
 
       windowKeyHandler: null,
+      windowMouseHandler: null,
 
       // which node menu is open
-      nodeMenuFor: null
+      nodeMenuFor: null,
+
+      // copy/paste support
+      copiedNodeId: null,
+      mouseFlowPosition: {x: 0, y: 0},
+      
+      // pending connection for Tab shortcut
+      pendingConnection: null
     };
   },
 
@@ -391,6 +460,15 @@ export default {
       };
       window.addEventListener("keydown", this.windowKeyHandler);
 
+      // Track mouse position globally for paste functionality
+      this.windowMouseHandler = (ev) => {
+        if (ev.clientX !== undefined && ev.clientY !== undefined) {
+          var flowPos = this.projectScreenToFlow(ev.clientX, ev.clientY);
+          this.mouseFlowPosition = flowPos;
+        }
+      };
+      window.addEventListener("mousemove", this.windowMouseHandler);
+
       this.ready = true;
     } catch (err) {
       console.error("Failed to initialize Vue Flow", err);
@@ -409,6 +487,10 @@ export default {
       window.removeEventListener("keydown", this.windowKeyHandler);
       this.windowKeyHandler = null;
     }
+    if (this.windowMouseHandler) {
+      window.removeEventListener("mousemove", this.windowMouseHandler);
+      this.windowMouseHandler = null;
+    }
   },
 
   methods: {
@@ -576,6 +658,54 @@ export default {
       }
     },
 
+    updateNodeProgress(payload) {
+      if (!payload || !payload.id) return;
+      var id = payload.id;
+      var progress = typeof payload.progress === "number" ? payload.progress : 0;
+      var message = payload.message || null;
+
+      var idx = this.nodes.findIndex(function (n) {
+        return n.id === id;
+      });
+      if (idx >= 0) {
+        var node = this.nodes[idx];
+        var data = Object.assign({}, node.data || {});
+        data.progress = progress;
+        data.progressMessage = message;
+        var updatedLocal = Object.assign({}, node, {data: data});
+        var localCopy = this.nodes.slice();
+        localCopy.splice(idx, 1, updatedLocal);
+        this.nodes = localCopy;
+      }
+
+      if (this.vf_api && this.vf_api.updateNode) {
+        this.vf_api.updateNode(id, function (node) {
+          var next = Object.assign({}, node || {});
+          var data = Object.assign({}, next.data || {});
+          data.progress = progress;
+          data.progressMessage = message;
+          next.data = data;
+          return next;
+        });
+      }
+    },
+
+    nodeHasContent(nodeProps) {
+      const data = nodeProps.data || {}
+      const fields = data.fields || []
+      const values = data.values || {}
+
+      // adjust the kinds you care about
+      const contentField = fields.find(field =>
+        field.kind === 'image_result' ||
+        field.kind === 'image'
+      )
+      if (!contentField) {
+        return false
+      }
+      return !!values[contentField.name]
+    },
+
     emitEvent(type, payload) {
       this.$emit("vf_event", {type: type, payload: payload});
     },
@@ -587,6 +717,18 @@ export default {
       this.emitEvent("execute_node", {id: id});
     },
 
+    onDownloadClick(nodeProps) {
+      if (!nodeProps || !nodeProps.id) return;
+      var id = nodeProps.id;
+      this.emitEvent("download_node", {id: id});
+    },
+
+    onResetClick(nodeProps) {
+      if (!nodeProps || !nodeProps.id) return;
+      var id = nodeProps.id;
+      this.emitEvent("reset_node", {id: id});
+    },
+
     onFieldBlur(nodeProps, field) {
       if (!nodeProps || !nodeProps.data || !field) return;
       var values = nodeProps.data.values || {};
@@ -600,40 +742,112 @@ export default {
       });
     },
 
-    onImageUpload(event, nodeProps, field) {
-      const file = event.target.files[0];
+    resizeAndConvertToWebp(blob, maxSize = 1024) {
+      return new Promise((resolve, reject) => {
+        const img = new Image();
+        const url = URL.createObjectURL(blob);
+
+        img.onload = () => {
+          URL.revokeObjectURL(url);
+
+          const originalWidth = img.width || 1;
+          const originalHeight = img.height || 1;
+
+          const scale = Math.min(
+              maxSize / originalWidth,
+              maxSize / originalHeight,
+              1
+          );
+
+          const targetWidth = Math.round(originalWidth * scale);
+          const targetHeight = Math.round(originalHeight * scale);
+
+          const canvas = document.createElement("canvas");
+          canvas.width = targetWidth;
+          canvas.height = targetHeight;
+
+          const ctx = canvas.getContext("2d");
+          if (!ctx) {
+            reject(new Error("Could not get 2d context"));
+            return;
+          }
+
+          ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
+
+          // best effort: WebP if possible, fall back to PNG if needed
+          try {
+            const dataUrl = canvas.toDataURL("image/webp", 0.9);
+            if (dataUrl && dataUrl.startsWith("data:image/webp")) {
+              resolve(dataUrl);
+              return;
+            }
+          } catch (e) {
+            // ignore and fall through
+          }
+
+          // fallback
+          try {
+            const fallback = canvas.toDataURL("image/png");
+            resolve(fallback);
+          } catch (e) {
+            reject(e);
+          }
+        };
+
+        img.onerror = (err) => {
+          URL.revokeObjectURL(url);
+          reject(err);
+        };
+
+        img.src = url;
+      });
+    },
+
+    async setImageValueFromBlob(blob, nodeProps, field) {
+      const maxSize = 1024;
+
+      const dataUrl = await this.resizeAndConvertToWebp(blob, maxSize);
+
+      if (!nodeProps.data.values) {
+        nodeProps.data.values = {};
+      }
+
+      nodeProps.data.values[field.name] = dataUrl;
+
+      this.updateNodeValues({
+        id: nodeProps.id,
+        values: {[field.name]: dataUrl}
+      });
+
+      this.onFieldBlur(nodeProps, field);
+    },
+
+    async onImageUpload(event, nodeProps, field) {
+      const file = event.target.files && event.target.files[0];
       if (!file) return;
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const res = e.target.result;
-        if (!nodeProps.data.values) nodeProps.data.values = {};
-        nodeProps.data.values[field.name] = res;
-        this.onFieldBlur(nodeProps, field);
-      };
-      reader.readAsDataURL(file);
+
+      try {
+        await this.setImageValueFromBlob(file, nodeProps, field);
+      } catch (err) {
+        console.error(err);
+        alert("Failed to process image");
+      } finally {
+        // reset input so the same file can be selected again
+        event.target.value = "";
+      }
     },
 
     async onImageClipboard(nodeProps, field) {
       try {
         const items = await navigator.clipboard.read();
         for (const item of items) {
-          if (item.types.some(function (t) {
-            return t.startsWith("image/");
-          })) {
-            const type = item.types.find(function (t) {
-              return t.startsWith("image/");
-            });
-            const blob = await item.getType(type);
-            const reader = new FileReader();
-            reader.onload = (e) => {
-              const res = e.target.result;
-              if (!nodeProps.data.values) nodeProps.data.values = {};
-              nodeProps.data.values[field.name] = res;
-              this.onFieldBlur(nodeProps, field);
-            };
-            reader.readAsDataURL(blob);
-            return;
-          }
+          const type = item.types.find((t) => t.startsWith("image/"));
+          if (!type) continue;
+
+          const blob = await item.getType(type);
+
+          await this.setImageValueFromBlob(blob, nodeProps, field);
+          return;
         }
         alert("No image found on clipboard");
       } catch (err) {
@@ -642,8 +856,24 @@ export default {
       }
     },
 
+    onImageDelete(nodeProps, field) {
+      if (!nodeProps.data.values) {
+        nodeProps.data.values = {};
+      }
+
+      nodeProps.data.values[field.name] = "";
+
+      this.updateNodeValues({
+        id: nodeProps.id,
+        values: {[field.name]: ""}
+      });
+
+      this.onFieldBlur(nodeProps, field);
+    },
+
     normalizeImageSrc(src) {
       if (!src) return "";
+
       if (typeof src !== "string") {
         try {
           src = String(src);
@@ -651,8 +881,11 @@ export default {
           return "";
         }
       }
-      var trimmed = src.trim();
+
+      const trimmed = src.trim();
       if (!trimmed) return "";
+
+      // already a complete URL or data URI
       if (
           trimmed.startsWith("http://") ||
           trimmed.startsWith("https://") ||
@@ -661,7 +894,38 @@ export default {
       ) {
         return trimmed;
       }
-      return "data:image/png;base64," + trimmed;
+
+      // if Python sends only the base64 without prefix:
+      // try to detect type from first bytes
+      try {
+        // decode a few bytes to inspect header
+        const header = atob(trimmed.slice(0, 20));
+
+        // png header 89 50 4E 47
+        if (header.startsWith("\x89PNG")) {
+          return "data:image/png;base64," + trimmed;
+        }
+
+        // jpeg header FF D8 FF
+        if (header.startsWith("\xFF\xD8\xFF")) {
+          return "data:image/jpeg;base64," + trimmed;
+        }
+
+        // webp header RIFF....WEBP
+        if (header.startsWith("RIFF") && header.slice(8, 12) === "WEBP") {
+          return "data:image/webp;base64," + trimmed;
+        }
+
+        // gif header GIF87a / GIF89a
+        if (header.startsWith("GIF8")) {
+          return "data:image/gif;base64," + trimmed;
+        }
+      } catch (err) {
+        // ignore and use fallback prefix
+      }
+
+      // last resort fallback (safe but generic)
+      return "data:image/*;base64," + trimmed;
     },
 
     getImageResultValue(nodeProps) {
@@ -678,12 +942,19 @@ export default {
     },
 
     getHandleStyle(side, index, list, port) {
-      var len = Array.isArray(list) ? list.length : 1;
-      var step = 100 / (len + 1);
-      var top = step * (index + 1);
-      var style = {
-        top: top + "%"
-      };
+      var style = {};
+      
+      // Check if port has a custom top position
+      if (port && typeof port.top === "number") {
+        style.top = port.top + "%";
+      } else {
+        // Default: evenly distribute handles
+        var len = Array.isArray(list) ? list.length : 1;
+        var step = 100 / (len + 1);
+        var top = step * (index + 1);
+        style.top = top + "%";
+      }
+      
       if (port && port.color) {
         style.backgroundColor = port.color;
       }
@@ -811,10 +1082,20 @@ export default {
         return;
       }
 
-      this.emitEvent("create_node", {
+      // Include pending connection if exists
+      var eventData = {
         kind: kind,
         position: {x: pos.x, y: pos.y}
-      });
+      };
+      
+      if (this.pendingConnection) {
+        eventData.pendingConnection = this.pendingConnection;
+      }
+
+      this.emitEvent("create_node", eventData);
+
+      // Clear pending connection
+      this.pendingConnection = null;
 
       this.hideContextMenu();
     },
@@ -830,6 +1111,9 @@ export default {
         return;
       }
 
+      var isMac = /Mac/.test(navigator.platform || navigator.userAgent);
+      var cmdOrCtrl = isMac ? event.metaKey : event.ctrlKey;
+
       if (key === "Tab" && event.type === "keydown") {
         event.preventDefault();
 
@@ -851,6 +1135,25 @@ export default {
         if (this.contextMenuVisible) {
           this.hideContextMenu();
         }
+      } else if ((key === "c" || key === "C") && cmdOrCtrl) {
+        // Copy selected node
+        event.preventDefault();
+        var selectedNodes = this.nodes.filter(function(n) { return n.selected; });
+        if (selectedNodes.length > 0) {
+          // Copy the first selected node
+          this.copiedNodeId = selectedNodes[0].id;
+          console.log("Copied node:", this.copiedNodeId);
+        }
+      } else if ((key === "v" || key === "V") && cmdOrCtrl) {
+        // Paste node at current mouse position
+        event.preventDefault();
+        if (this.copiedNodeId) {
+          console.log("Pasting node:", this.copiedNodeId, "at", this.mouseFlowPosition);
+          this.emitEvent("duplicate_node", {
+            sourceNodeId: this.copiedNodeId,
+            position: {x: this.mouseFlowPosition.x, y: this.mouseFlowPosition.y}
+          });
+        }
       }
     },
 
@@ -876,6 +1179,21 @@ export default {
       this.emitEvent("pane_click", event || {});
     },
 
+    onPaneMouseMove(event) {
+      // Track mouse position in flow coordinates for paste
+      // VueFlow pane-mousemove provides the event with coordinates
+      if (!event) return;
+      
+      // Try to get flow coordinates from the event
+      if (event.flowX !== undefined && event.flowY !== undefined) {
+        this.mouseFlowPosition = {x: event.flowX, y: event.flowY};
+      } else if (event.clientX !== undefined && event.clientY !== undefined) {
+        // If flow coordinates aren't available, convert screen to flow coordinates
+        var flowPos = this.projectScreenToFlow(event.clientX, event.clientY);
+        this.mouseFlowPosition = flowPos;
+      }
+    },
+
     onPaneContextMenu(event) {
       if (event && typeof event.preventDefault === "function") {
         event.preventDefault();
@@ -908,6 +1226,30 @@ export default {
 
         this.vf_api.addEdges([edge]);
       }
+      
+      // Clear pending connection after successful connection
+      this.pendingConnection = null;
+    },
+
+    onConnectStart(params) {
+      // Store connection start info when user begins dragging from a handle
+      console.log("Connection start:", params);
+      this.pendingConnection = {
+        nodeId: params.nodeId || null,
+        handleId: params.handleId || null,
+        handleType: params.handleType || null
+      };
+    },
+
+    onConnectEnd(event) {
+      // Connection ended - if user pressed Tab, keep pendingConnection for node creation
+      // Otherwise clear after a short delay
+      var self = this;
+      setTimeout(function() {
+        if (!self.contextMenuVisible) {
+          self.pendingConnection = null;
+        }
+      }, 100);
     },
 
     onNodeDragStop(event) {
@@ -1173,6 +1515,9 @@ export default {
 
 .vf-handle {
   pointer-events: auto;
+  width: 8px !important;
+  height: 8px !important;
+  border-width: 1px !important;
 }
 
 .vf-node-body {
@@ -1203,6 +1548,9 @@ export default {
   display: flex;
   flex-direction: column;
   gap: 4px;
+
+  position: relative;
+  overflow: hidden;
 }
 
 .vf-node-text-input {
@@ -1238,7 +1586,7 @@ export default {
 
 .vf-exec-button {
   border: none;
-  background: #3b82f6;
+  background: #000000;
   color: #fff;
   border-radius: 4px;
   padding: 2px 6px;
@@ -1255,54 +1603,31 @@ export default {
   cursor: default;
 }
 
-.vf-download-header {
-  background: #2563eb;
-}
-
 .vf-spinner {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  border: 2px solid rgba(255, 255, 255, 0.6);
-  border-top-color: rgba(15, 23, 42, 0.9);
-  animation: vf-spin 0.6s linear infinite;
-}
-
-@keyframes vf-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  position: relative;
 }
 
-/* processing progress bar */
-.vf-node-progress {
-  position: relative;
-  height: 4px;
-  border-radius: 999px;
-  overflow: hidden;
-  background: #e5e7eb;
-  margin-bottom: 4px;
+.vf-spinner-svg {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+  animation: vf-spin 2s linear infinite;
 }
 
-.vf-node-progress-bar {
-  position: absolute;
-  left: -40%;
-  top: 0;
-  bottom: 0;
-  width: 40%;
-  background: #3b82f6;
-  animation: vf-progress 1s linear infinite;
+.vf-spinner-progress {
+  stroke-linecap: round;
+  transition: stroke-dashoffset 0.4s ease-out;
 }
 
-@keyframes vf-progress {
+@keyframes vf-spin {
   from {
-    transform: translateX(0);
+    transform: rotate(-90deg);
   }
   to {
-    transform: translateX(260%);
+    transform: rotate(270deg);
   }
 }
 
@@ -1310,9 +1635,19 @@ export default {
   width: 160px;
   height: 100px;
   border-radius: 4px;
-  overflow: hidden;
+  overflow: visible;
   border: 1px solid rgba(148, 163, 184, 0.7);
   background: #f9fafb;
+  position: relative;
+}
+
+.vf-image-preview-wrapper img {
+  border-radius: 4px;
+  overflow: hidden;
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .vf-image-preview {
@@ -1337,6 +1672,7 @@ export default {
   height: 100%;
 }
 
+
 /* upload controls - now small blue buttons like header */
 .vf-image-upload-controls {
   display: flex;
@@ -1358,6 +1694,7 @@ export default {
   border: 1px solid #bfdbfe;
 }
 
+
 /* simple node menu */
 
 .vf-node-menu {
@@ -1425,3 +1762,24 @@ export default {
   opacity: 0.7;
 }
 </style>
+
+<style>
+.vf-image-preview-wrapper .vf-image-delete-btn {
+  position: absolute ;
+  top: 28px ;
+  right: 12px ;
+  z-index: 100 ;
+  color: #ffffff ;
+  background-color: #eb311c ;
+  border: none;
+  border-radius: 4px;
+  padding: 2px 6px;
+  font-size: 11px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+}
+
+</style>

main.py

@@ -3,132 +3,80 @@ from __future__ import annotations
 import os
 
 import uvicorn
+from dotenv import load_dotenv
 from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
 from nicegui import ui, Client, app
-
-from dataflow.ui.vueflow_canvas import VueFlowCanvas
 from nodes.session import GraphSession
+from velai_app import VelaiApp
+
+
+load_dotenv()
 
 fastapi_app = FastAPI()
 ui.run_with(fastapi_app, storage_secret="velai-storage-secret")
 
+# Mount assets folder to serve static files (including favicon)
+fastapi_app.mount("/assets", StaticFiles(directory="assets"), name="assets")
+
 APP_PASSWORD = os.getenv("VELAI_PASSWORD") or ""
 
 
+async def require_password() -> None:
+    if not APP_PASSWORD:
+        return
+
+    auth = app.storage.user.get("auth") or {}
+    if auth.get("ok") and auth.get("password_version") == APP_PASSWORD:
+        return
+
+    # build awaitable dialog exactly like in the docs
+    with ui.dialog() as dialog, ui.card():
+        dialog.props("persistent")
+
+        ui.label("Enter password").classes("text-md font-bold mb-2")
+        pwd_input = ui.input(label="Password").props('type="password"')
+        error_label = ui.label("").style(
+            "color: red; font-size: 0.8rem; min-height: 1rem"
+        )
+
+        def submit() -> None:
+            value = pwd_input.value or ""
+            if value == APP_PASSWORD:
+                app.storage.user["auth"] = {
+                    "ok": True,
+                    "password_version": APP_PASSWORD,
+                }
+                error_label.text = ""
+                dialog.submit(True)
+            else:
+                error_label.text = "Wrong password"
+
+        pwd_input.on("keydown.enter", lambda _: submit())
+        with ui.row().classes("mt-2 items-center justify-end gap-2"):
+            ui.button("Enter", on_click=submit).props("color='primary'")
+
+    # this opens the dialog, waits for dialog.submit, then closes it
+    await dialog
+
+
 @ui.page("/")
 async def main(client: Client) -> None:
-    ui.page_title("velai")
+    ui.page_title("VELAI")
+    ui.add_head_html('<link rel="icon" type="image/x-icon" href="/assets/favicon.ico">')
     ui.query(".nicegui-content").classes("p-0")
 
     await client.connected()
 
-    # password gate: require once per user while APP_PASSWORD stays the same
-    password_required = False
-    if APP_PASSWORD:
-        auth = app.storage.user.get("auth") or {}
-        if not (auth.get("ok") and auth.get("password_version") == APP_PASSWORD):
-            password_required = True
+    # stop here until the password is accepted (or no password is set)
+    await require_password()
 
     # one GraphSession per browser tab
-    if "graph_session" not in app.storage.tab:
-        app.storage.tab["graph_session"] = GraphSession.create_default()
-    session: GraphSession = app.storage.tab["graph_session"]
-
-    initial_nodes = session.initial_vue_nodes()
-    initial_edges = session.initial_vue_edges()
-
-    with ui.column().classes("w-full h-screen no-wrap"):
-        # header
-        with ui.row().classes(
-                "w-full items-center justify-between px-4 py-2 bg-grey-2"
-        ):
-            ui.label("velai").classes("text-lg font-bold")
-
-            with ui.row().classes("items-center gap-2"):
-                with ui.dropdown_button("Add Node", auto_close=True):
-                    kinds = session.creatable_node_types
-                    for k in kinds:
-                        ui.menu_item(k["title"], on_click=lambda _, kind=k["kind"]: add_node_action(kind))
-
-                with ui.dropdown_button("Graph", auto_close=True):
-                    ui.menu_item("Export JSON", on_click=lambda: export_action())
-                    ui.menu_item("Import JSON", on_click=lambda: import_action())
-
-                clear_button = ui.button("Clear graph").props("flat color='negative'")
-
-        # canvas area fills the remaining height
-        with ui.row().classes("w-full flex-1 no-wrap"):
-            canvas = VueFlowCanvas(
-                creatable_node_types=session.creatable_node_types,
-            ).classes("w-full h-full flex-1")
-
-            session.attach_canvas(canvas)
-
-            async def handle_event(e) -> None:
-                await session.handle_ui_event(e.args, canvas)
-
-            canvas.on("vf_event", handle_event)
-            canvas.set_graph(initial_nodes, initial_edges)
-
-        # wire header actions now that canvas exists
-        def add_node_action(kind_value: str) -> None:
-            import random
-            vue_node = session.create_node(kind_value, position={"x": 100 + random.randint(0, 50),
-                                                                 "y": 100 + random.randint(0, 50)})
-            if vue_node is not None:
-                canvas.add_node(vue_node)
-
-        def clear_graph_action() -> None:
-            session.clear_graph()
-            canvas.set_graph([], [])
-
-        async def export_action() -> None:
-            json_str = session.to_json()
-            ui.download(json_str.encode("utf-8"), "graph.json")
-
-        async def import_action() -> None:
-            with ui.dialog() as dialog, ui.card():
-                ui.label("Upload Graph JSON")
-                ui.upload(on_upload=lambda e: [load_file(e), dialog.close()], auto_upload=True, max_files=1)
-            dialog.open()
-
-        def load_file(e) -> None:
-            content = e.content.read().decode("utf-8")
-            session.load_from_json(content)
-            nodes = session.initial_vue_nodes()
-            edges = session.initial_vue_edges()
-            canvas.set_graph(nodes, edges)
-
-        clear_button.on_click(clear_graph_action)
-
-    # password dialog on top of everything if required
-    if password_required:
-        with ui.dialog() as dialog, ui.card():
-            await dialog.props("persistent")
-            ui.label("Enter password").classes("text-md font-bold mb-2")
-            pwd_input = ui.input(label="Password").props('type="password"')
-            error_label = ui.label("").style(
-                "color: red; font-size: 0.8rem; min-height: 1rem"
-            )
-
-            def submit() -> None:
-                value = pwd_input.value or ""
-                if value == APP_PASSWORD:
-                    app.storage.user["auth"] = {
-                        "ok": True,
-                        "password_version": APP_PASSWORD,
-                    }
-                    error_label.text = ""
-                    dialog.close()
-                else:
-                    error_label.text = "Wrong password"
-
-            pwd_input.on("keydown.enter", lambda _: submit())
-
-            with ui.row().classes("mt-2 items-center justify-end gap-2"):
-                ui.button("Enter", on_click=submit).props("color='primary'")
-
-        dialog.open()
+    session = GraphSession.create_default()
+
+    # build main application UI
+    app_ui = VelaiApp(session)
+    app_ui.build()
 
 
 if __name__ in {"__main__", "__mp_main__"}:

nodes/controller.py

@@ -6,6 +6,8 @@ from typing import Any
 from dataflow.connection import Connection
 from dataflow.enums import DataPortState
 from dataflow.graph import DataGraph
+from . import utils
+from .image_data import ImageDataNode
 from .text_data import TextDataNode
 from .text_to_image import TextToImageNode
 
@@ -37,11 +39,20 @@ class GraphController:
             edges = raw_payload or []
             if isinstance(edges, list):
                 self._on_edges_delete(edges)
+        elif event_type == "edges_change":
+            changes = raw_payload or []
+            if isinstance(changes, list):
+                self._on_edges_change(changes)
         elif event_type == "nodes_delete":
             nodes = raw_payload or []
             if isinstance(nodes, list):
                 self._on_nodes_delete(nodes)
-        # nodes_change, edges_change, other events can be added here later
+        elif event_type == "nodes_change":
+            changes = raw_payload or []
+            if isinstance(changes, list):
+                self._on_nodes_change(changes)
+        # other events (graph_cleared, create_node, etc.) are currently ignored
+        # because they do not affect the DataGraph directly here
 
     def _on_connect(self, payload: dict[str, Any]) -> None:
         source_handle = payload.get("sourceHandle") or ""
@@ -95,15 +106,22 @@ class GraphController:
             # datatype mismatch or capacity problems
             return
 
-    def _on_node_moved(self, payload: dict[str, Any]) -> None:
-        node_id = payload.get("id")
-        if not node_id:
-            return
+        # make the dataflow "dirty" because topology changed
+        if hasattr(start_port, "state"):
+            start_port.state = DataPortState.DIRTY
+
+        if hasattr(end_port, "state"):
+            end_port.state = DataPortState.DIRTY
+            # often you also want to clear the input value
+            if hasattr(end_port, "value"):
+                end_port.value = None
+
+    def _update_node_position(self, node_id: str, position: dict[str, Any]) -> None:
         node = self.graph.nodes.get(node_id)
         if node is None:
             return
 
-        pos = payload.get("position") or {}
+        pos = position or {}
         x = pos.get("x")
         y = pos.get("y")
 
@@ -118,6 +136,13 @@ class GraphController:
             except (TypeError, ValueError):
                 pass
 
+    def _on_node_moved(self, payload: dict[str, Any]) -> None:
+        node_id = payload.get("id")
+        if not node_id:
+            return
+        position = payload.get("position") or {}
+        self._update_node_position(node_id, position)
+
     def _on_node_field_changed(self, payload: dict[str, Any]) -> None:
         node_id = payload.get("id")
         field = payload.get("field")
@@ -136,6 +161,23 @@ class GraphController:
                 port.value = "" if value is None else str(value)
                 port.state = DataPortState.DIRTY
 
+        elif isinstance(node, ImageDataNode) and field == "image":
+            port = node.outputs.get("image") if node.outputs is not None else None
+            if port is not None:
+                if value:
+                    # value is a data-uri string from the UI
+                    try:
+                        # We need to decode it to a PIL Image
+                        img = utils.decode_image(str(value))
+                        port.value = img
+                        port.state = DataPortState.DIRTY
+                    except Exception:
+                        # invalid image data
+                        port.value = None
+                else:
+                    port.value = None
+                    port.state = DataPortState.DIRTY
+
         elif isinstance(node, TextToImageNode) and field == "image":
             node.image_src = "" if value is None else str(value)
 
@@ -169,12 +211,68 @@ class GraphController:
 
             self.graph.connections = [c for c in self.graph.connections if not should_remove(c)]
 
+    def _on_edges_change(self, changes: list[dict[str, Any]]) -> None:
+        """Handle generic edge changes.
+
+        Vue Flow sends EdgeChange objects.
+        """
+        if not changes:
+            return
+
+        edges_to_delete: list[dict[str, Any]] = []
+
+        for change in changes:
+            if not isinstance(change, dict):
+                continue
+
+            if change.get("type") == "remove":
+                # this is quite ugly, the edge should be sent directly or read from the list of edges from the graph
+                edge = change
+                if isinstance(edge, dict):
+                    edges_to_delete.append(edge)
+
+        if edges_to_delete:
+            self._on_edges_delete(edges_to_delete)
+
     def _on_nodes_delete(self, nodes: list[dict[str, Any]]) -> None:
         """Remove nodes and all their connections when Vue deletes them."""
         if not nodes:
             return
 
         node_ids = {n.get("id") for n in nodes if isinstance(n, dict) and n.get("id")}
+        self._delete_nodes(node_ids)
+
+    def _on_nodes_change(self, changes: list[dict[str, Any]]) -> None:
+        """Handle generic node changes.
+
+        Currently supports:
+        - type == "remove": delete node and related connections
+        - type == "position": update node position like 'node_moved'
+        Other change types (select, dimensions, etc.) do not affect the DataGraph.
+        """
+        if not changes:
+            return
+
+        node_ids_to_delete: set[str] = set()
+
+        for change in changes:
+            if not isinstance(change, dict):
+                continue
+
+            ctype = change.get("type")
+            node_id = change.get("id")
+
+            if ctype == "remove" and node_id:
+                node_ids_to_delete.add(node_id)
+            elif ctype == "position" and node_id:
+                # Vue Flow usually sends 'position' for logical node coordinates.
+                position = change.get("position") or change.get("positionAbsolute") or {}
+                self._update_node_position(node_id, position)
+
+        if node_ids_to_delete:
+            self._delete_nodes(node_ids_to_delete)
+
+    def _delete_nodes(self, node_ids: set[str]) -> None:
         if not node_ids:
             return
 

nodes/data_types.py

@@ -17,7 +17,7 @@ ImageType = DataType(
     id=DataTypeId.IMAGE,
     name="Image",
     py_type=Image.Image,
-    encode=utils.encode_image_png,
-    decode=utils.decode_image_png,
+    encode=utils.encode_image,
+    decode=utils.decode_image,
     color="#a855f7",
 )

nodes/image_data.py

@@ -26,7 +26,7 @@ class ImageDataNode(NodeInstance):
     async def process(self) -> None:
         """Data nodes do not compute anything, they just expose their current value.
 
-        The UI writes into the "text" output port. Here we simply ensure the port
+        The UI writes into the "image" output port. Here we simply ensure the port
         exists and treat the current value as the result.
         """
         port = self.outputs.get("image") if self.outputs is not None else None
@@ -51,7 +51,14 @@ class ImageDataNodeRenderable(VueNodeRenderable[ImageDataNode]):
         )
 
         port = node.outputs.get("image") if node.outputs is not None else None
-        data.values["image"] = "" if port is None or port.value is None else str(port.value)
+        val = ""
+        if port is not None and port.value is not None:
+            if port.schema.dtype.encode:
+                val = port.schema.dtype.encode(port.value)
+            else:
+                val = str(port.value)
+
+        data.values["image"] = val
 
         data.executable = False
         return data

nodes/runtime.py

@@ -1,6 +1,7 @@
 from __future__ import annotations
 
 from dataclasses import dataclass
+from typing import Any
 
 from dataflow.graph import DataGraph
 from dataflow.nodes_base import NodeInstance
@@ -10,16 +11,48 @@ from .text_to_image import TextToImageNode
 
 @dataclass(slots=True)
 class GraphRuntime:
-    """Bridge between the DataGraph and the Vue canvas.
-
-    Keeps execution logic here so nodes can be executed from UI or from code.
-    """
-
     graph: DataGraph
     canvas: VueFlowCanvas
 
+    def _get_execution_chain(self, root: NodeInstance) -> list[NodeInstance]:
+        """Return all upstream nodes that belong to the chain of root.
+
+        Order is upstream first, root last. This is only for UI purposes
+        (spinners, progress, syncing), not to force execution.
+        """
+        result: list[NodeInstance] = []
+        visited: set[str] = set()
+        connections = getattr(self.graph, "connections", []) or []
+
+        def visit(node: NodeInstance) -> None:
+            node_id = getattr(node, "node_id", None)
+            if node_id is None or node_id in visited:
+                return
+            visited.add(node_id)
+
+            for conn in connections:
+                try:
+                    if conn.end_node is node:
+                        visit(conn.start_node)
+                except AttributeError:
+                    continue
+
+            result.append(node)
+
+        visit(root)
+        return result
+
     async def execute_node(self, node: NodeInstance | str) -> None:
-        """Execute a node and keep the canvas in sync with its state."""
+        """Execute a node and keep the canvas in sync with its state.
+
+        Rules:
+          - Clicked node is always reset and re run.
+          - Upstream nodes are never reset here and may reuse cached data.
+          - Which nodes actually execute is decided by DataGraph and node logic.
+          - As soon as a node finishes, it is synced to the UI.
+        """
+        import asyncio
+
         if isinstance(node, str):
             node_id = node
             node_obj = self.graph.nodes.get(node_id)
@@ -29,26 +62,101 @@ class GraphRuntime:
             node_obj = node
             node_id = node.node_id
 
-        # show spinner
-        self.canvas.set_node_processing(node_id, True)
+        execution_chain = self._get_execution_chain(node_obj)
+
+        # show spinner on all nodes in the chain
+        for n in execution_chain:
+            nid = getattr(n, "node_id", None)
+            if nid:
+                self.canvas.set_node_processing(nid, True)
+
+        # progress polling for nodes that expose progress_value
+        stop_progress = False
+        progress_tasks: list[asyncio.Task] = []
+
+        async def progress_updater(n: NodeInstance, nid: str) -> None:
+            last_value: Any = None
+            while not stop_progress:
+                await asyncio.sleep(0.1)
+                if not hasattr(n, "progress_value"):
+                    continue
+                current = getattr(n, "progress_value", None)
+                message = getattr(n, "progress_message", None)
+                if current is None:
+                    continue
+                if current != last_value:
+                    self.canvas.update_node_progress(nid, current, message)
+                    last_value = current
+
+        for n in execution_chain:
+            nid = getattr(n, "node_id", None)
+            if nid and hasattr(n, "progress_value"):
+                progress_tasks.append(asyncio.create_task(progress_updater(n, nid)))
+
+        # callback from DataGraph after each node is executed
+        async def on_node_executed(executed_node: NodeInstance) -> None:
+            # Only nodes that actually ran will call this.
+            await self._sync_node_to_ui(executed_node)
+
+        # save previous callback so we can restore it
+        previous_cb = getattr(self.graph, "_on_node_executed", None)
+
         try:
-            # run the dataflow execution chain (this will also execute upstream nodes)
             print(f"Runtime: Executing {node_id}...")
+
+            # clicked node is always reset, upstream nodes are not
+            if hasattr(node_obj, "reset_node"):
+                node_obj.reset_node()
+
+            # register our per node callback
+            self.graph.set_on_node_executed(on_node_executed)
+
+            # let DataGraph drive which nodes actually execute
             await self.graph.execute(node_obj)
-            await self._sync_node_to_ui(node_obj)
+
+            # one more sync for all nodes in the chain, in case some did not run
+            for n in execution_chain:
+                await self._sync_node_to_ui(n)
+
+            # nice "complete" flash for the clicked node if it has progress
+            if hasattr(node_obj, "progress_value"):
+                self.canvas.update_node_progress(node_id, 1.0, "Complete")
+                await asyncio.sleep(0.3)
+
         except Exception as e:
             print(f"Runtime execution failed: {e}")
             import traceback
             traceback.print_exc()
         finally:
-            # hide spinner
-            self.canvas.set_node_processing(node_id, False)
+            # restore previous graph callback
+            self.graph.set_on_node_executed(previous_cb)
+
+            # stop progress updaters
+            stop_progress = True
+            for t in progress_tasks:
+                t.cancel()
+                try:
+                    await t
+                except asyncio.CancelledError:
+                    pass
+
+            # hide spinner on all nodes in the chain
+            for n in execution_chain:
+                nid = getattr(n, "node_id", None)
+                if nid:
+                    self.canvas.set_node_processing(nid, False)
+
+            # reset progress on the clicked node
+            if hasattr(node_obj, "progress_value"):
+                self.canvas.update_node_progress(node_id, 0.0, None)
 
     async def _sync_node_to_ui(self, node: NodeInstance) -> None:
         """Push relevant node state back to the Vue nodes."""
         if isinstance(node, TextToImageNode):
             image_src = "" if node.image_src is None else str(node.image_src)
-            values = {"image": image_src}
-            if node.error:
-                values["error"] = node.error
+            values: dict[str, Any] = {
+                "image": image_src,
+                "error": node.error or None,
+            }
             self.canvas.update_node_values(node.node_id, values)
+        # add other node types here as needed

nodes/session.py

@@ -1,10 +1,14 @@
 from __future__ import annotations
 
+import io
 import itertools
 import json
 from dataclasses import dataclass, field
 from typing import Any
 
+from PIL import Image
+from nicegui import app, ui
+
 from dataflow.codecs import connection_to_vueflow_edge
 from dataflow.connection import Connection
 from dataflow.enums import NodeKind
@@ -64,7 +68,11 @@ class GraphSession:
             renderer=renderer,
             controller=controller,
         )
-        session._build_initial_graph()
+
+        # Try to restore from storage, otherwise build initial graph
+        if not session.restore_from_storage():
+            session._build_initial_graph()
+
         return session
 
     def _build_initial_graph(self) -> None:
@@ -101,6 +109,19 @@ class GraphSession:
             },
         ]
 
+    def save_to_storage(self) -> None:
+        """Persist current graph state to tab storage."""
+        json_str = self.to_json()
+        app.storage.tab["graph_json"] = json_str
+
+    def restore_from_storage(self) -> bool:
+        """Try to load graph from tab storage. Returns True if successful."""
+        json_str = app.storage.tab.get("graph_json")
+        if json_str:
+            self.load_from_json(json_str)
+            return True
+        return False
+
     def attach_canvas(self, canvas: VueFlowCanvas) -> None:
         """Attach a VueFlowCanvas to this session."""
         self.runtime = GraphRuntime(graph=self.graph, canvas=canvas)
@@ -248,6 +269,202 @@ class GraphSession:
         self.graph.add_node(node_obj)
         return self.renderer.to_vue_node(node_obj)
 
+    def _auto_connect_new_node(
+            self, vue_node: dict[str, Any], pending_connection: dict[str, Any], canvas: VueFlowCanvas
+    ) -> None:
+        """Automatically connect a newly created node based on pending connection info."""
+        if not pending_connection or not vue_node:
+            return
+
+        new_node_id = vue_node.get("id")
+        if not new_node_id:
+            return
+
+        new_node_obj = self.graph.nodes.get(new_node_id)
+        if not new_node_obj:
+            return
+
+        # Extract pending connection info
+        source_node_id = pending_connection.get("nodeId")
+        source_handle_id = pending_connection.get("handleId")
+        handle_type = pending_connection.get("handleType")
+
+        if not source_node_id or not source_handle_id or not handle_type:
+            return
+
+        source_node = self.graph.nodes.get(source_node_id)
+        if not source_node:
+            return
+
+        # Parse handle ID to get port name
+        source_port_name = source_handle_id.split(":")[-1] if ":" in source_handle_id else source_handle_id
+
+        # Determine connection direction and find compatible port
+        if handle_type == "source":
+            # User dragged from an output, connect to first compatible input of new node
+            source_port = source_node.outputs.get(source_port_name)
+            if not source_port:
+                return
+
+            # Find first compatible input port on new node
+            target_port = None
+            target_port_name = None
+            for port_name, port in new_node_obj.inputs.items():
+                if port.schema.dtype.id == source_port.schema.dtype.id:
+                    target_port = port
+                    target_port_name = port_name
+                    break
+
+            if target_port:
+                # Create connection event
+                connection_params = {
+                    "source": source_node_id,
+                    "target": new_node_id,
+                    "sourceHandle": source_handle_id,
+                    "targetHandle": f"{new_node_id}:{target_port_name}"
+                }
+
+                # Emit connect event to controller
+                self.controller.handle_event({
+                    "type": "connect",
+                    "payload": connection_params
+                })
+
+                # Add edge to canvas
+                edge_id = f"{source_node_id}-{source_handle_id}->{new_node_id}-{target_port_name}"
+                canvas.add_edge({
+                    "id": edge_id,
+                    "source": source_node_id,
+                    "target": new_node_id,
+                    "sourceHandle": source_handle_id,
+                    "targetHandle": f"{new_node_id}:{target_port_name}"
+                })
+
+        elif handle_type == "target":
+            # User dragged from an input, connect from first compatible output of new node
+            target_port = source_node.inputs.get(source_port_name)
+            if not target_port:
+                return
+
+            # Find first compatible output port on new node
+            source_port = None
+            source_port_name_new = None
+            for port_name, port in new_node_obj.outputs.items():
+                if port.schema.dtype.id == target_port.schema.dtype.id:
+                    source_port = port
+                    source_port_name_new = port_name
+                    break
+
+            if source_port:
+                # Create connection event
+                connection_params = {
+                    "source": new_node_id,
+                    "target": source_node_id,
+                    "sourceHandle": f"{new_node_id}:{source_port_name_new}",
+                    "targetHandle": source_handle_id
+                }
+
+                # Emit connect event to controller
+                self.controller.handle_event({
+                    "type": "connect",
+                    "payload": connection_params
+                })
+
+                # Add edge to canvas
+                edge_id = f"{new_node_id}-{source_port_name_new}->{source_node_id}-{source_handle_id}"
+                canvas.add_edge({
+                    "id": edge_id,
+                    "source": new_node_id,
+                    "target": source_node_id,
+                    "sourceHandle": f"{new_node_id}:{source_port_name_new}",
+                    "targetHandle": source_handle_id
+                })
+
+    def duplicate_node(
+            self, source_node_id: str, position: dict[str, Any] | None = None
+    ) -> dict[str, Any] | None:
+        """Duplicate an existing node and return its Vue node dict."""
+        # Get the source node from the graph
+        source_node = self.graph.nodes.get(source_node_id)
+        if source_node is None:
+            return None
+
+        # Create a new node of the same type
+        node_id = self.next_ui_node_id()
+        try:
+            node_obj = self.registry.create(source_node.node_type.kind, node_id)
+        except KeyError:
+            return None
+
+        # Set position
+        if position:
+            x = position.get("x")
+            y = position.get("y")
+            if x is not None:
+                try:
+                    node_obj.x = float(x)
+                except (TypeError, ValueError):
+                    pass
+            if y is not None:
+                try:
+                    node_obj.y = float(y)
+                except (TypeError, ValueError):
+                    pass
+        else:
+            # Offset from source node if no position specified
+            node_obj.x = source_node.x + 50
+            node_obj.y = source_node.y + 50
+
+        # Copy input port values (but not outputs - those should be recomputed)
+        for port_name, source_port in source_node.inputs.items():
+            if port_name in node_obj.inputs:
+                # Copy the value if it's set
+                if source_port.value is not None:
+                    node_obj.inputs[port_name].value = source_port.value
+
+        # Copy content based on node type
+
+        # Copy text content for TextDataNode
+        if isinstance(source_node, TextDataNode) and isinstance(node_obj, TextDataNode):
+            source_port = source_node.outputs.get("text") if source_node.outputs else None
+            if source_port and source_port.value is not None:
+                target_port = node_obj.outputs.get("text") if node_obj.outputs else None
+                if target_port:
+                    target_port.value = str(source_port.value)
+
+        # Copy image content for ImageDataNode
+        elif isinstance(source_node, ImageDataNode) and isinstance(node_obj, ImageDataNode):
+            source_port = source_node.outputs.get("image") if source_node.outputs else None
+            if source_port and source_port.value is not None:
+                target_port = node_obj.outputs.get("image") if node_obj.outputs else None
+                if target_port:
+                    # Copy PIL Image
+                    if isinstance(source_port.value, Image.Image):
+                        target_port.value = source_port.value.copy()
+                    else:
+                        target_port.value = source_port.value
+
+        # Copy generated image for TextToImageNode
+        elif isinstance(source_node, TextToImageNode) and isinstance(node_obj, TextToImageNode):
+            # Copy image_src
+            if source_node.image_src:
+                node_obj.image_src = source_node.image_src
+            # Copy decoded_image 
+            if source_node.decoded_image is not None:
+                node_obj.decoded_image = source_node.decoded_image.copy()
+            # copy the output port value if it exists
+            source_port = source_node.outputs.get("image") if source_node.outputs else None
+            if source_port and source_port.value is not None:
+                target_port = node_obj.outputs.get("image") if node_obj.outputs else None
+                if target_port:
+                    if isinstance(source_port.value, Image.Image):
+                        target_port.value = source_port.value.copy()
+                    else:
+                        target_port.value = source_port.value
+
+        self.graph.add_node(node_obj)
+        return self.renderer.to_vue_node(node_obj)
+
     async def handle_ui_event(
             self, event: dict[str, Any], canvas: VueFlowCanvas
     ) -> None:
@@ -255,6 +472,8 @@ class GraphSession:
         event_type = event.get("type")
         payload = event.get("payload")
 
+        save_needed = False
+
         if event_type == "execute_node":
             payload_dict = payload or {}
             node_id = payload_dict.get("id")
@@ -266,15 +485,108 @@ class GraphSession:
             else:
                 self.runtime.canvas = canvas
 
-            await self.runtime.execute_node(node_id)
+            n = ui.notification(timeout=None)
+            n.message = f"Generating"
+            n.spinner = True
+
+            try:
+                await self.runtime.execute_node(node_id)
+
+                n.message = "Done!"
+                n.type = "positive"
+                n.spinner = False
+            except Exception as ex:
+                n.message = f"Error: {ex}"
+                n.type = "negative"
+                n.spinner = False
+
+            n.dismiss()
+
+            save_needed = True
+
+        elif event_type == "reset_node":
+            payload_dict = payload or {}
+            node_id = payload_dict.get("id")
+            if not node_id:
+                return
+
+            node = self.graph.nodes.get(node_id)
+            if node is None:
+                return
+
+            with ui.dialog() as dialog, ui.card():
+                ui.label("Are you sure?")
+                with ui.row():
+                    ui.button("Yes", on_click=lambda: dialog.submit("Yes"))
+                    ui.button("No", on_click=lambda: dialog.submit("No"))
+            result = await dialog
+
+            if result == "No":
+                return
+
+            # only special case TextToImageNode for now
+            if isinstance(node, TextToImageNode):
+                node.reset_node()
+
+                # sync cleared state to UI
+                canvas.update_node_values(
+                    node_id, {
+                        "image": "",
+                        "error": None,
+                    })
+
+                save_needed = True
+                ui.notify(f"Node has been reset!", type="positive")
+
+        elif event_type == "download_node":
+            payload_dict = payload or {}
+            node_id = payload_dict.get("id")
+            if not node_id:
+                return
+
+            node = self.graph.nodes.get(node_id)
+            if node is None:
+                return
+
+            if isinstance(node, TextToImageNode):
+                buf = io.BytesIO()
+                node.decoded_image.save(buf, format="PNG")
+                buf.seek(0)
+
+                png_bytes = buf.getvalue()
+                ui.download(png_bytes, filename="generated.png", media_type="image/png")
+                ui.notify("Image downloaded!", type="positive")
 
         elif event_type == "create_node":
             payload_dict = payload or {}
             kind_value = payload_dict.get("kind")
             position = payload_dict.get("position") or {}
+            pending_connection = payload_dict.get("pendingConnection")
+
             vue_node = self.create_node(kind_value, position)
             if vue_node is not None:
                 canvas.add_node(vue_node)
+                save_needed = True
+
+                # If there's a pending connection, auto-connect
+                if pending_connection:
+                    self._auto_connect_new_node(vue_node, pending_connection, canvas)
+
+
+        elif event_type == "duplicate_node":
+            payload_dict = payload or {}
+            source_node_id = payload_dict.get("sourceNodeId")
+            position = payload_dict.get("position") or {}
+            if source_node_id:
+                vue_node = self.duplicate_node(source_node_id, position)
+                if vue_node is not None:
+                    canvas.add_node(vue_node)
+                    save_needed = True
 
         else:
             self.controller.handle_event(event)
+            # Assume any controller action (move, connect, delete, field change) modifies state
+            save_needed = True
+
+        if save_needed:
+            self.save_to_storage()

nodes/text_to_image.py

@@ -1,9 +1,15 @@
 from __future__ import annotations
 
+import asyncio
+import os
 import typing
 from dataclasses import dataclass
+from functools import partial
 
-from dataflow.enums import PortDirection, NodeKind, ConnectMultiplicity
+from PIL import Image
+
+from dataflow.codecs import _schema_json
+from dataflow.enums import PortDirection, NodeKind, ConnectMultiplicity, DataPortState
 from dataflow.nodes_base import NodeType, NodeInstance
 from dataflow.ports import PortSchema
 from services.image.ImageGenerator import ImageGenerator
@@ -13,14 +19,23 @@ from . import utils
 from .data_types import ImageType, TextType
 from .vue_nodes import VueNodeRenderable, VueNodeData
 
+DEFAULT_IMAGE_MODEL_SERVICE_ID = os.getenv("DEFAULT_IMAGE_MODEL_SERVICE_ID", "fal_ai_image_nano_banana")
+
+# number of image inputs
+NUM_IMAGE_INPUTS = 3
+
 TextToImageNodeType = NodeType(
     kind=NodeKind.TEXT_TO_IMAGE,
     display_name="Image Generation",
     inputs=[
         PortSchema(name="text", dtype=TextType, direction=PortDirection.INPUT,
                    multiplicity=ConnectMultiplicity.MULTIPLE, capacity=3),
-        PortSchema(name="image", dtype=ImageType, direction=PortDirection.INPUT,
-                   multiplicity=ConnectMultiplicity.MULTIPLE, capacity=3)
+        PortSchema(name="image1", dtype=ImageType, direction=PortDirection.INPUT,
+                   multiplicity=ConnectMultiplicity.SINGLE, capacity=1),
+        PortSchema(name="image2", dtype=ImageType, direction=PortDirection.INPUT,
+                   multiplicity=ConnectMultiplicity.SINGLE, capacity=1),
+        PortSchema(name="image3", dtype=ImageType, direction=PortDirection.INPUT,
+                   multiplicity=ConnectMultiplicity.SINGLE, capacity=1),
     ],
     outputs=[
         PortSchema(name="image", dtype=ImageType, direction=PortDirection.OUTPUT)
@@ -32,16 +47,62 @@ TextToImageNodeType = NodeType(
 class TextToImageNode(NodeInstance):
     # string that UI can bind to; may be url or base64 data
     image_src: str | None = None
+    decoded_image: Image.Image | None = None
     error: str | None = None
+    progress_value: float = 0.0
+    progress_message: str | None = None
 
     async def process(self) -> None:
+        # reset error message (but is not directly updated)
         self.error = None
 
         text_input = self.inputs["text"]
-        image_input = self.inputs["image"]
         image_output = self.outputs["image"]
 
-        # Handle multiple inputs (concatenation)
+        print(f"\n[DEBUG TextToImageNode] ===== STARTING PROCESS =====")
+        print(f"[DEBUG] Text input value: {text_input.value is not None}")
+        print(f"[DEBUG] Text input state: {text_input.state}")
+
+        # Collect images from ordered input ports (image1, image2, image3, ...)
+        # Only include images that are actually connected (not None)
+        images: list[Image.Image] = []
+        for i in range(1, NUM_IMAGE_INPUTS + 1):
+            image_port_name = f"image{i}"
+            if image_port_name in self.inputs:
+                image_port = self.inputs[image_port_name]
+                print(
+                    f"[DEBUG] Port {image_port_name}: value={type(image_port.value).__name__ if image_port.value is not None else 'None'}, state={image_port.state}")
+                if image_port.value is not None:
+                    if isinstance(image_port.value, Image.Image):
+                        images.append(image_port.value)
+                        print(f"[DEBUG]   -> Added PIL Image directly (size: {image_port.value.size})")
+                    else:
+                        try:
+                            decoded = utils.decode_image(str(image_port.value))
+                            images.append(decoded)
+                            print(f"[DEBUG]   -> Decoded and added image (size: {decoded.size})")
+                        except Exception as e:
+                            print(f"[DEBUG]   -> FAILED to decode: {e}")
+                            pass
+
+        # Check if inputs are clean - only consider ports that have actual values (are connected)
+        all_inputs_clean = text_input.state == DataPortState.CLEAN
+        for i in range(1, NUM_IMAGE_INPUTS + 1):
+            image_port_name = f"image{i}"
+            if image_port_name in self.inputs:
+                image_port = self.inputs[image_port_name]
+                # Only check state if the port has a value (is connected)
+                if image_port.value is not None and image_port.state != DataPortState.CLEAN:
+                    all_inputs_clean = False
+                    break
+
+        if self.image_src is not None and all_inputs_clean:
+            if self.decoded_image is None:
+                self.decoded_image = utils.decode_image(self.image_src)
+            image_output.value = self.decoded_image
+            return
+
+        # Handle multiple text inputs (concatenation)
         prompt = ""
         if isinstance(text_input.value, list):
             prompt = "\n\n".join([str(v) for v in text_input.value if v])
@@ -52,53 +113,114 @@ class TextToImageNode(NodeInstance):
             self.error = "Could not generate image! No text input."
             return
 
-        # optional image inputs
-        images = None
-        if isinstance(image_input.value, list):
-            images = image_input.value
+        # Pass ordered images list (empty list if none connected)
+        # image1 is first, image2 is second, etc.
+        images_list = images if images else None
+
+        print(f"[DEBUG] Collected {len(images)} total images")
+        print(f"[DEBUG] images_list is None: {images_list is None}")
+        print(f"[DEBUG] Will call generator with prompt and {len(images_list) if images_list else 0} images")
 
         registry = get_registry()
-        image_service = typing.cast(ImageGenerator, registry.create(TaskType.IMAGE, "google_gemini_image"))
+        image_service = typing.cast(ImageGenerator, registry.create(TaskType.IMAGE, DEFAULT_IMAGE_MODEL_SERVICE_ID))
 
         def on_progress(value: float, message: str | None):
-            # In a fuller implementation, we would emit events to UI here
-            pass
+            # Store progress in the node so runtime can update UI
+            self.progress_value = value
+            self.progress_message = message
 
         try:
-            import asyncio
-            from functools import partial
-
             # Run non-blocking
             loop = asyncio.get_running_loop()
             result = await loop.run_in_executor(
                 None,
-                partial(image_service.generate, prompt, images=images, progress=on_progress)
+                partial(image_service.generate, prompt, images=images_list, progress=on_progress)
             )
 
-            url = utils.encode_image_png(result.image)
+            url = utils.encode_image(result.image)
             self.image_src = url
 
+            self.decoded_image = result.image
             image_output.value = result.image
         except Exception as e:
+            self.reset_node()
             self.error = f"Error: {str(e)}"
-            self.image_src = None
+
+    def reset_node(self) -> None:
+        self.image_src = None
+        self.decoded_image = None
+        self.error = None
+        self.progress_value = 0.0
+        self.progress_message = None
+
+        # clear output port value and mark it dirty
+        out = self.outputs.get("image") if self.outputs is not None else None
+        if out is not None:
+            out.value = None
+            out.state = DataPortState.DIRTY
 
 
 class TextToImageNodeRenderable(VueNodeRenderable[TextToImageNode]):
     def to_vue_node_data(self, node: TextToImageNode) -> VueNodeData:
         data = VueNodeData()
 
+        # Create custom inputs with even spacing
+        custom_inputs = []
+
+        # Collect all input ports in order
+        input_ports = []
+        for port_schema in node.node_type.inputs:
+            port_dict = _schema_json(port_schema)
+            input_ports.append((port_schema.name, port_dict))
+
+        # Evenly space all inputs across the node height
+        num_inputs = len(input_ports)
+        if num_inputs > 0:
+            # Start the first input at 30% of the node height, end at 85%, evenly distributed
+            # It's eyeballed, so it might not be perfect!
+            start_percent = 30
+            end_percent = 85
+            if num_inputs == 1:
+                positions = [50]  # Center if only one
+            else:
+                step = (end_percent - start_percent) / (num_inputs - 1)
+                positions = [start_percent + i * step for i in range(num_inputs)]
+
+            # Assign positions to ports
+            for idx, (port_name, port_dict) in enumerate(input_ports):
+                port_dict["top"] = positions[idx]
+                custom_inputs.append(port_dict)
+        else:
+            # Fallback: use default positioning
+            for _, port_dict in input_ports:
+                custom_inputs.append(port_dict)
+
+        data.inputs = custom_inputs
+
+        # Added min-height (px) to make the node taller
+        data.min_height = 100
+
         data.fields.append(
             {
                 "name": "image",
                 "kind": "image_result",
                 "label": "Image",
                 "editable": False,
-                "placeholder": "No image yet",
+                "placeholder": "No image",
             }
         )
 
-        data.values["image"] = "" if node.image_src is None else str(node.image_src)
+        # Use image_src if available (which is already encoded url)
+        val = ""
+        if node.image_src:
+            val = node.image_src
+        else:
+            port = node.outputs.get("image") if node.outputs is not None else None
+            if port is not None and port.value is not None:
+                # We know ImageType has an encoder
+                val = utils.encode_image(port.value)
+
+        data.values["image"] = val
         if node.error:
             data.values["error"] = node.error
 

nodes/utils.py

@@ -4,18 +4,56 @@ import io
 from PIL import Image
 
 
-def encode_image_png(img: Image.Image) -> str:
+def encode_image(img: Image.Image, image_format: str | None = None) -> str:
+    """Encode a PIL image to a data URL in the specified format.
+
+    image_format examples: "PNG", "JPEG", "WEBP"
+    If not provided, fall back to WEBP.
+    """
+
+    if image_format is None:
+        image_format = "WEBP"
+
     buffer = io.BytesIO()
-    img.save(buffer, format="PNG")
+    try:
+        img.save(buffer, format=image_format)
+    except Exception as e:
+        raise ValueError(f"Failed to encode image as {image_format}: {e}")
+
     raw = buffer.getvalue()
     b64 = base64.b64encode(raw).decode("ascii")
-    return f"data:image/png;base64,{b64}"
+    mime = f"image/{image_format.lower()}"
+    return f"data:{mime};base64,{b64}"
+
+
+def decode_image(data: str) -> Image.Image:
+    """Decode a data URL or base64 string into a PIL.Image.Image.
+
+    Supports any format that Pillow supports (png, jpg, webp, etc).
+    """
+
+    if not isinstance(data, str):
+        raise TypeError("decode_image expects a string")
+
+    # strip data URL prefix if present
+    if data.startswith("data:"):
+        try:
+            _, _, b64 = data.partition(",")
+            data = b64
+        except Exception:
+            raise ValueError("Invalid data URL")
 
+    # base64 decode
+    try:
+        raw = base64.b64decode(data.encode("ascii"))
+    except Exception as e:
+        raise ValueError(f"Base64 decode error: {e}")
 
-def decode_image_png(data: str) -> Image.Image:
-    prefix = "data:image/png;base64,"
-    if data.startswith(prefix):
-        data = data[len(prefix):]
-    raw = base64.b64decode(data.encode("ascii"))
+    # open with Pillow (auto detects format)
     buffer = io.BytesIO(raw)
-    return Image.open(buffer)
+    try:
+        img = Image.open(buffer)
+        img.load()  # ensure fully loaded
+        return img
+    except Exception as e:
+        raise ValueError(f"Failed to decode image: {e}")

nodes/vue_nodes.py

@@ -21,6 +21,13 @@ class VueNodeData:
     # Form like content
     fields: list[dict[str, Any]] = field(default_factory=list)
     values: dict[str, Any] = field(default_factory=dict)
+    
+    # Custom port positioning (optional)
+    inputs: list[dict[str, Any]] | None = None
+    outputs: list[dict[str, Any]] | None = None
+    
+    # Custom node styling (optional)
+    min_height: int | None = None
 
     def to_extra_dict(self) -> dict[str, Any]:
         """Convert to the data_extra dict expected by node_to_vueflow."""
@@ -34,6 +41,12 @@ class VueNodeData:
             data["fields"] = self.fields
         if self.values:
             data["values"] = self.values
+        if self.inputs is not None:
+            data["inputs"] = self.inputs
+        if self.outputs is not None:
+            data["outputs"] = self.outputs
+        if self.min_height is not None:
+            data["min_height"] = self.min_height
 
         return data
 

pyproject.toml

@@ -4,14 +4,16 @@ version = "0.1.0"
 description = "Add your description here"
 requires-python = ">=3.12"
 dependencies = [
+    "fal-client>=0.9.1",
     "google-genai>=1.51.0",
     "nicegui>=3",
     "pillow>=12.0.0",
+    "python-dotenv>=1.2.1",
     "requests>=2.32.5",
     "uvicorn<=0.35.0",
 ]
 
 [dependency-groups]
 dev = [
-    "huggingface-hub[cli]>=1.1.4",
+    "huggingface-hub>=1.1.4",
 ]

services/image/DummyImageGenerator.py

@@ -2,6 +2,7 @@ from __future__ import annotations
 
 import io
 import random
+import time
 from collections.abc import Sequence
 
 import requests
@@ -43,6 +44,8 @@ class DummyImageGenerator(ImageGenerator):
 
         call_progress(progress, 0.4, f"Fetching random image from {url}")
 
+        time.sleep(0.5)
+
         try:
             response = requests.get(url, timeout=10)
         except requests.RequestException as exc:

services/image/FalAIImageGenerator.py

@@ -0,0 +1,299 @@
+from __future__ import annotations
+
+import io
+from abc import ABC, abstractmethod
+from typing import Any, Sequence
+
+import requests
+from PIL import Image
+
+from nodes.utils import encode_image
+from services.exceptions import GenerationError
+from services.image.ImageGenerationResult import ImageGenerationResult
+from services.image.ImageGenerator import ImageGenerator
+from services.progress import ProgressCallback, call_progress
+from services.registry import register_service
+from services.utils.fal_service import run_fal
+
+
+class FalAIImageGenerator(ImageGenerator, ABC):
+    """Abstract base class for fal.ai based image generators.
+
+    This class implements the common pipeline:
+
+    - select a fal model slug to call
+    - build the input arguments
+    - call fal.ai
+    - download and decode the images
+
+    Concrete subclasses are responsible for:
+
+    - storing any model slugs they need
+    - implementing the selection strategy
+    - shaping the input arguments
+    """
+
+    service_id = "fal_ai_image"
+
+    def __init__(
+            self,
+            *,
+            service_model_name: str | None = None,
+            api_key: str | None = None,
+            extra_arguments: dict[str, Any] | None = None,
+    ) -> None:
+        # service_model_name is only for metadata in GenerationService
+        super().__init__(model_name=service_model_name)
+        self._api_key = api_key
+        self._extra_arguments: dict[str, Any] = extra_arguments or {}
+
+    def close(self) -> None:
+        return
+
+    # small helpers that do not know any model names
+
+    def _encode_images(self, images: Sequence[Image.Image]) -> list[str]:
+        return [encode_image(img) for img in images]
+
+    def _attach_image_list_argument(
+            self,
+            arguments: dict[str, Any],
+            images: Sequence[Image.Image],
+            arg_name: str,
+    ) -> None:
+        encoded_images = self._encode_images(images)
+        existing_value = arguments.get(arg_name)
+        if isinstance(existing_value, list):
+            arguments[arg_name] = existing_value + encoded_images
+        else:
+            arguments[arg_name] = encoded_images
+
+    def _base_arguments(self, **kwargs: Any) -> dict[str, Any]:
+        """Start from configured extra arguments and apply kwargs as overrides."""
+        arguments = dict(self._extra_arguments)
+        for key, value in kwargs.items():
+            if value is not None:
+                arguments[key] = value
+        return arguments
+
+    # abstract hooks for concrete implementations
+
+    @abstractmethod
+    def _select_model(
+            self,
+            *,
+            prompt: str,
+            images: Sequence[Image.Image] | None,
+            **kwargs: Any,
+    ) -> str:
+        """Return the fal model slug to call for this request."""
+        raise NotImplementedError
+
+    @abstractmethod
+    def _build_arguments(
+            self,
+            *,
+            prompt: str,
+            images: Sequence[Image.Image] | None,
+            **kwargs: Any,
+    ) -> dict[str, Any]:
+        """Return the arguments payload for fal.ai."""
+        raise NotImplementedError
+
+    # shared generation pipeline
+
+    def generate(
+            self,
+            prompt: str,
+            images: Sequence[Image.Image] | None = None,
+            *,
+            progress: ProgressCallback | None = None,
+            **kwargs: Any,
+    ) -> ImageGenerationResult:
+        model = self._select_model(prompt=prompt, images=images, **kwargs)
+
+        call_progress(progress, 0.1, "Encoding inputs for fal.ai image model")
+
+        arguments = self._build_arguments(
+            prompt=prompt,
+            images=images,
+            **kwargs,
+        )
+
+        call_progress(progress, 0.4, "Calling fal.ai image model")
+
+        response = run_fal(
+            model=model,
+            arguments=arguments,
+            api_key=self._api_key,
+        )
+
+        call_progress(progress, 0.7, "Downloading images from fal.ai")
+
+        raw_images = response.get("images")
+        if not isinstance(raw_images, list) or not raw_images:
+            raise GenerationError(
+                "fal.ai image model did not return any images in the response."
+            )
+
+        decoded_images: list[Image.Image] = []
+
+        for item in raw_images:
+            if not isinstance(item, dict):
+                continue
+            url = item.get("url")
+            if not isinstance(url, str) or not url:
+                continue
+
+            try:
+                resp = requests.get(url, timeout=30)
+            except requests.RequestException as exc:
+                raise GenerationError(
+                    f"Failed to download image from fal.ai URL {url!r}."
+                ) from exc
+
+            if resp.status_code != 200:
+                raise GenerationError(
+                    f"fal.ai image URL {url!r} returned status code {resp.status_code}."
+                )
+
+            try:
+                img = Image.open(io.BytesIO(resp.content)).convert("RGBA")
+            except OSError as exc:
+                raise GenerationError(
+                    "Received invalid image data from fal.ai."
+                ) from exc
+
+            img.load()
+            decoded_images.append(img)
+
+        if not decoded_images:
+            raise GenerationError(
+                "fal.ai image model did not yield any decodable images."
+            )
+
+        call_progress(progress, 0.95, "Preparing fal.ai image result")
+
+        return ImageGenerationResult(
+            provider="fal.ai",
+            model=model,
+            images=decoded_images,
+            raw_response=response,
+        )
+
+
+# concrete model combinations
+
+
+@register_service
+class FalAINanoBananaGenerator(FalAIImageGenerator):
+    """fal-ai/nano-banana text and edit combination."""
+
+    service_id = "fal_ai_image_nano_banana"
+
+    def __init__(self, api_key: str | None = None) -> None:
+        super().__init__(
+            service_model_name="fal-ai/nano-banana",
+            api_key=api_key,
+            extra_arguments={},
+        )
+        self._text_model: str = "fal-ai/nano-banana"
+        self._edit_model: str = "fal-ai/nano-banana/edit"
+        # nano banana edit expects images under "image_urls"
+        self._image_argument: str = "image_urls"
+
+    def _select_model(
+            self,
+            *,
+            prompt: str,
+            images: Sequence[Image.Image] | None,
+            **kwargs: Any,
+    ) -> str:
+        if not images:
+            return self._text_model
+        return self._edit_model
+
+    def _build_arguments(
+            self,
+            *,
+            prompt: str,
+            images: Sequence[Image.Image] | None,
+            **kwargs: Any,
+    ) -> dict[str, Any]:
+        arguments = self._base_arguments(**kwargs)
+        arguments["prompt"] = prompt
+
+        if not images:
+            return arguments
+
+        self._attach_image_list_argument(arguments, images, self._image_argument)
+        return arguments
+
+    @classmethod
+    def default_model_name(cls) -> str:
+        return "fal-ai/nano-banana"
+
+
+@register_service
+class FalAIReveGenerator(FalAIImageGenerator):
+    """fal-ai/reve combination:
+    - text to image
+    - fast edit for one image
+    - fast remix for multiple images
+    """
+
+    service_id = "fal_ai_image_reve"
+
+    def __init__(self, api_key: str | None = None) -> None:
+        super().__init__(
+            service_model_name="fal-ai/reve",
+            api_key=api_key,
+            extra_arguments={},
+        )
+        self._text_model: str = "fal-ai/reve/text-to-image"
+        self._edit_model: str = "fal-ai/reve/fast/edit"
+        self._remix_model: str = "fal-ai/reve/fast/remix"
+
+    def _select_model(
+            self,
+            *,
+            prompt: str,
+            images: Sequence[Image.Image] | None,
+            **kwargs: Any,
+    ) -> str:
+        count = len(images) if images is not None else 0
+
+        if count == 0:
+            return self._text_model
+        if count == 1:
+            return self._edit_model
+        return self._remix_model
+
+    def _build_arguments(
+            self,
+            *,
+            prompt: str,
+            images: Sequence[Image.Image] | None,
+            **kwargs: Any,
+    ) -> dict[str, Any]:
+        arguments = self._base_arguments(**kwargs)
+        arguments["prompt"] = prompt
+
+        if not images:
+            # text to image ignores image inputs
+            return arguments
+
+        count = len(images)
+
+        if count == 1:
+            # fast edit expects a single "image_url"
+            arguments["image_url"] = encode_image(images[0])
+            return arguments
+
+        # fast remix expects "image_urls" as a list
+        self._attach_image_list_argument(arguments, images, "image_urls")
+        return arguments
+
+    @classmethod
+    def default_model_name(cls) -> str:
+        return "fal-ai/reve"

services/image/ImageGenerator.py

@@ -1,5 +1,5 @@
 from abc import ABC, abstractmethod
-from typing import Sequence
+from typing import Any, Sequence
 
 from PIL import Image
 
@@ -20,6 +20,7 @@ class ImageGenerator(GenerationService, ABC):
             images: Sequence[Image.Image] | None = None,
             *,
             progress: ProgressCallback | None = None,
+            **kwargs: Any,
     ) -> ImageGenerationResult:
         """Generate images from a prompt and optional images."""
         raise NotImplementedError

services/image/__init__.py

@@ -1,2 +1,3 @@
 from services.image.DummyImageGenerator import DummyImageGenerator
-from services.image.GoogleImageGenerator import GoogleImageGenerator
+from services.image.GoogleImageGenerator import GoogleImageGenerator
+from services.image.FalAIImageGenerator import FalAIImageGenerator

services/text/FalAITextGenerator.py

@@ -0,0 +1,128 @@
+from __future__ import annotations
+
+import os
+from typing import Any, Sequence
+
+from PIL import Image
+
+from services.exceptions import GenerationError
+from services.progress import ProgressCallback, call_progress
+from services.registry import register_service
+from services.text.TextGenerationResult import TextGenerationResult
+from services.text.TextGenerator import TextGenerator
+from services.utils.fal_service import DEFAULT_FAL_TEXT_MODEL, run_fal
+
+
+@register_service
+class FalAITextGenerator(TextGenerator):
+    """Text generator backed by fal.ai OpenRouter "any LLM" endpoint.
+
+    This uses the fal model "openrouter/router" by default and expects
+    an underlying LLM name in the "model" field of the input payload.
+
+    Example extra_arguments for Gemini:
+
+        extra_arguments={"model": "google/gemini-2.5-flash"}
+    """
+
+    service_id = "fal_ai_text"
+
+    def __init__(
+            self,
+            model_name: str | None = None,
+            api_key: str | None = None,
+            extra_arguments: dict[str, Any] | None = None,
+    ) -> None:
+        """
+        Parameters
+        ----------
+        model_name:
+            fal model slug, typically "openrouter/router".
+        api_key:
+            Optional fal.ai API key. If omitted, FAL_KEY from the environment
+            will be used.
+        extra_arguments:
+            Extra fields for the OpenRouter router input, for example:
+            - {"model": "google/gemini-2.5-flash"}
+            - {"system_prompt": "...", "temperature": 0.7, "max_tokens": 1024}
+        """
+        super().__init__(model_name=model_name)
+        self._api_key = api_key
+        self._extra_arguments: dict[str, Any] = extra_arguments or {}
+
+    @classmethod
+    def default_model_name(cls) -> str:
+        # This is the fal model id, not the underlying LLM
+        return DEFAULT_FAL_TEXT_MODEL
+
+    def close(self) -> None:
+        return
+
+    @staticmethod
+    def _extract_text(response: dict[str, Any]) -> str:
+        # OpenRouter router schema: "output" contains the generated text.
+        output = response.get("output")
+        if isinstance(output, str) and output.strip():
+            return output
+
+        text = response.get("text")
+        if isinstance(text, str) and text.strip():
+            return text
+
+        raise GenerationError(
+            "fal.ai text model did not return any text output."
+        )
+
+    def _build_arguments(self, prompt: str) -> dict[str, Any]:
+        arguments: dict[str, Any] = dict(self._extra_arguments)
+        arguments["prompt"] = prompt
+
+        if "model" not in arguments:
+            env_model = os.getenv("OPENROUTER_DEFAULT_MODEL")
+            if not env_model:
+                raise GenerationError(
+                    "FalAITextGenerator requires a target OpenRouter model name. "
+                    "Provide it via extra_arguments['model'] or set the "
+                    "OPENROUTER_DEFAULT_MODEL environment variable."
+                )
+            arguments["model"] = env_model
+
+        return arguments
+
+    def generate(
+            self,
+            prompt: str,
+            images: Sequence[Image.Image] | None = None,
+            *,
+            progress: ProgressCallback | None = None,
+    ) -> TextGenerationResult:
+        call_progress(progress, 0.1, "Encoding inputs for fal.ai text model")
+
+        if images:
+            # The OpenRouter router endpoint is text only.
+            raise GenerationError(
+                "FalAITextGenerator does not currently support image inputs."
+            )
+
+        arguments = self._build_arguments(prompt=prompt)
+
+        call_progress(progress, 0.4, "Calling fal.ai OpenRouter router model")
+
+        response = run_fal(
+            model=self.model_name,
+            arguments=arguments,
+            api_key=self._api_key,
+        )
+
+        call_progress(progress, 0.7, "Decoding text from fal.ai response")
+
+        text_output = self._extract_text(response)
+
+        call_progress(progress, 0.95, "Preparing fal.ai text result")
+
+        return TextGenerationResult(
+            provider="fal.ai",
+            model=self.model_name,
+            text=text_output,
+            raw_response=response,
+        )

services/text/__init__.py

@@ -1,2 +1,3 @@
 from services.text.DummyTextGenerator import DummyTextGenerator
 from services.text.GoogleTextGenerator import GoogleTextGenerator
+from services.text.FalAITextGenerator import FalAITextGenerator

services/utils/fal_service.py

@@ -0,0 +1,64 @@
+from __future__ import annotations
+
+import os
+from typing import Any, Mapping
+
+from services.exceptions import GenerationError
+
+try:
+    import fal_client  # type: ignore[import-not-found]
+except ModuleNotFoundError:  # pragma: no cover
+    fal_client = None  # type: ignore[assignment]
+
+# Fal text uses the OpenRouter "any LLM" router endpoint
+DEFAULT_FAL_TEXT_MODEL = os.getenv("FAL_TEXT_MODEL", "openrouter/router")
+
+# Default image model: nano banana as main image backend
+DEFAULT_FAL_IMAGE_MODEL = os.getenv("FAL_IMAGE_MODEL", "fal-ai/nano-banana")
+
+
+def _ensure_fal_client(api_key: str | None = None) -> Any:
+    if fal_client is None:
+        raise GenerationError(
+            "The 'fal-client' package is required to use the fal.ai backends."
+        )
+
+    if api_key:
+        # fal_client uses the FAL_KEY environment variable for authentication
+        os.environ.setdefault("FAL_KEY", api_key)
+
+    return fal_client
+
+
+def run_fal(
+        model: str,
+        arguments: Mapping[str, Any],
+        api_key: str | None = None,
+) -> dict[str, Any]:
+    """Run a fal.ai model synchronously and return the raw response."""
+    client = _ensure_fal_client(api_key)
+
+    # Check if FAL_KEY is set
+    if not os.getenv("FAL_KEY"):
+        raise GenerationError(
+            "FAL_KEY environment variable is not set. "
+            "Please set it in your .env file or environment. "
+            "Get your API key from https://fal.ai/dashboard"
+        )
+    
+    try:
+        result = client.run(model, arguments=dict(arguments))
+    except Exception as exc:  # pragma: no cover
+        # Include the original error message for better debugging
+        error_msg = str(exc) if str(exc) else type(exc).__name__
+        raise GenerationError(
+            f"fal.ai request to {model!r} failed: {error_msg}"
+        ) from exc
+
+    if not isinstance(result, dict):
+        raise GenerationError(
+            f"fal.ai model {model!r} returned an unexpected response type "
+            f"{type(result).__name__}."
+        )
+
+    return result

uv.lock

@@ -1,5 +1,5 @@
 version = 1
-revision = 2
+revision = 3
 requires-python = ">=3.12"
 
 [[package]]
@@ -273,6 +273,19 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/66/dd/f95350e853a4468ec37478414fc04ae2d61dad7a947b3015c3dcc51a09b9/docutils-0.22.2-py3-none-any.whl", hash = "sha256:b0e98d679283fc3bb0ead8a5da7f501baa632654e7056e9c5846842213d674d8", size = 632667, upload-time = "2025-09-20T17:55:43.052Z" },
 ]
 
+[[package]]
+name = "fal-client"
+version = "0.9.1"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "httpx" },
+    { name = "httpx-sse" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/b8/a1/98ab1cea4c2424ee612292bc92b07905e1a15a05584f6c263cde38e6a3a2/fal_client-0.9.1.tar.gz", hash = "sha256:c8f7f88f79c4b4c4f069be9f571be924dc7c4a6bf07c252fe0b75f3c46c8d66d", size = 17085, upload-time = "2025-11-13T18:15:09.911Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/8b/57/775821a71459f2b83bbaa59452a4b1e4772f7c770de88a6f591c9d43c7c8/fal_client-0.9.1-py3-none-any.whl", hash = "sha256:8eba86c947299852c8306f685eee883ce01856543bf4344b87f65abd4b7d7622", size = 11157, upload-time = "2025-11-13T18:15:08.528Z" },
+]
+
 [[package]]
 name = "fastapi"
 version = "0.120.2"
@@ -523,6 +536,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/2a/39/e50c7c3a983047577ee07d2a9e53faf5a69493943ec3f6a384bdc792deb2/httpx-0.28.1-py3-none-any.whl", hash = "sha256:d909fcccc110f8c7faf814ca82a9a4d816bc5a6dbfea25d6591d6985b8ba59ad", size = 73517, upload-time = "2024-12-06T15:37:21.509Z" },
 ]
 
+[[package]]
+name = "httpx-sse"
+version = "0.4.3"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/0f/4c/751061ffa58615a32c31b2d82e8482be8dd4a89154f003147acee90f2be9/httpx_sse-0.4.3.tar.gz", hash = "sha256:9b1ed0127459a66014aec3c56bebd93da3c1bc8bb6618c8082039a44889a755d", size = 15943, upload-time = "2025-10-10T21:48:22.271Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/d2/fd/6668e5aec43ab844de6fc74927e155a3b37bf40d7c3790e49fc0406b6578/httpx_sse-0.4.3-py3-none-any.whl", hash = "sha256:0ac1c9fe3c0afad2e0ebb25a934a59f4c7823b60792691f779fad2c5568830fc", size = 8960, upload-time = "2025-10-10T21:48:21.158Z" },
+]
+
 [[package]]
 name = "huggingface-hub"
 version = "1.1.4"
@@ -790,9 +812,11 @@ name = "nicegui-graph"
 version = "0.1.0"
 source = { virtual = "." }
 dependencies = [
+    { name = "fal-client" },
     { name = "google-genai" },
     { name = "nicegui" },
     { name = "pillow" },
+    { name = "python-dotenv" },
     { name = "requests" },
     { name = "uvicorn" },
 ]
@@ -804,15 +828,17 @@ dev = [
 
 [package.metadata]
 requires-dist = [
+    { name = "fal-client", specifier = ">=0.9.1" },
     { name = "google-genai", specifier = ">=1.51.0" },
     { name = "nicegui", specifier = ">=3" },
     { name = "pillow", specifier = ">=12.0.0" },
+    { name = "python-dotenv", specifier = ">=1.2.1" },
     { name = "requests", specifier = ">=2.32.5" },
     { name = "uvicorn", specifier = "<=0.35.0" },
 ]
 
 [package.metadata.requires-dev]
-dev = [{ name = "huggingface-hub", extras = ["cli"], specifier = ">=1.1.4" }]
+dev = [{ name = "huggingface-hub", specifier = ">=1.1.4" }]
 
 [[package]]
 name = "orjson"

velai_app.py

@@ -0,0 +1,125 @@
+from __future__ import annotations
+
+from typing import Optional
+
+from nicegui import ui, events
+
+from dataflow.ui.vueflow_canvas import VueFlowCanvas
+from nodes.session import GraphSession
+
+
+class VelaiApp:
+    def __init__(self, session: GraphSession) -> None:
+        self.session = session
+        self.canvas: Optional[VueFlowCanvas] = None
+
+    def build(self) -> None:
+        session = self.session
+
+        initial_nodes = session.initial_vue_nodes()
+        initial_edges = session.initial_vue_edges()
+
+        with ui.column().classes("w-full h-screen no-wrap"):
+            # header
+            with ui.row().classes("w-full items-center justify-between px-4 py-2 bg-grey-2"):
+               # ui.label("velai").classes("text-lg font-bold")
+                ui.image("assets/logo.png").classes("w-16").style("margin-right: 10px;")
+                with ui.row().classes("items-center gap-2"):
+
+                    with ui.button("Info", on_click=lambda: dialog.open()).props("color='black'"):
+                    #show a popup with the information about the app
+                        with ui.dialog() as dialog:
+                            with ui.card():
+                                ui.button(icon='close', on_click=dialog.close).props("color='black'").classes('absolute top-2 right-2')
+                                ui.label("Welcome to VELAI!").classes("text-lg font-bold")
+                                ui.label("This is a node-based environment for generating images.\nIt uses the Gemini 2.5 Flash Preview (Nano Banana) and Reve models.")
+                                ui.label("As it's a work in progress, there might be some bugs and issues. Please report them to us :)")
+                                   
+                    with ui.dropdown_button("Add Node", auto_close=True).props("color='black'"):
+                        kinds = session.creatable_node_types
+                        for k in kinds:
+                            ui.menu_item(
+                                k["title"],
+                                on_click=lambda _, kind=k["kind"]: self.add_node_action(kind),
+                            )
+
+                    with ui.dropdown_button("Project", auto_close=True).props("color='black'"):
+                        ui.menu_item("Import", on_click=self.import_action)
+                        ui.menu_item("Export", on_click=self.export_action)
+                        ui.menu_item("Clear", on_click=self.clear_graph_action).props("flat color='negative'")
+
+            # canvas area fills the remaining height
+            with ui.row().classes("w-full flex-1 no-wrap"):
+                self.canvas = VueFlowCanvas(
+                    creatable_node_types=session.creatable_node_types,
+                ).classes("w-full h-full flex-1")
+
+                session.attach_canvas(self.canvas)
+
+                async def handle_event(e) -> None:
+                    await session.handle_ui_event(e.args, self.canvas)
+
+                self.canvas.on("vf_event", handle_event)
+                self.canvas.set_graph(initial_nodes, initial_edges)
+
+    def add_node_action(self, kind_value: str) -> None:
+        if self.canvas is None:
+            return
+
+        import random
+
+        vue_node = self.session.create_node(
+            kind_value,
+            position={
+                "x": 100 + random.randint(0, 50),
+                "y": 100 + random.randint(0, 50),
+            },
+        )
+        if vue_node is not None:
+            self.canvas.add_node(vue_node)
+
+    def export_action(self) -> None:
+        json_str = self.session.to_json()
+        ui.download(json_str.encode("utf-8"), "graph.json")
+
+    def import_action(self) -> None:
+        if self.canvas is None:
+            return
+
+        session = self.session
+        canvas = self.canvas
+
+        with ui.dialog() as dialog:
+            with ui.card():
+                ui.label("Upload graph JSON")
+
+                async def handle_upload(e: events.UploadEventArguments) -> None:
+                    data = await e.file.read()
+                    content = data.decode("utf-8")
+
+                    session.load_from_json(content)
+                    session.save_to_storage()
+
+                    nodes = session.initial_vue_nodes()
+                    edges = session.initial_vue_edges()
+                    canvas.set_graph(nodes, edges)
+
+                    dialog.close()
+
+                ui.upload(
+                    label="Choose JSON file",
+                    on_upload=handle_upload,
+                    max_files=1,
+                ).props("accept=.json auto-upload")
+
+                ui.button("Cancel", on_click=dialog.close).props("color='black'")
+
+        dialog.open()
+
+    def clear_graph_action(self) -> None:
+        if self.canvas is None:
+            return
+
+        self.session.clear_graph()
+        self.session.save_to_storage()
+        self.canvas.set_graph([], [])