Upload folder via script

dataflow/ui/vueflow_canvas.vue

@@ -122,6 +122,23 @@
                     </span>
                   </button>
 
+                  <!-- expansion menu button (settings) -->
+                  <div 
+                    v-if="hasExpansionMenu(nodeProps)" 
+                    class="vf-expansion-menu-header" 
+                    @click.stop
+                  >
+                    <button
+                      type="button"
+                      class="vf-exec-button"
+                      @click.stop="toggleExpansionMenu(nodeProps.id)"
+                    >
+                      <span>
+                        <q-icon :name="isExpansionMenuOpen(nodeProps.id) ? 'close' : 'menu'" />
+                      </span>
+                    </button>
+                  </div>
+
                   <!-- rest of header (menu) unchanged -->
                   <div class="vf-node-menu" @click.stop>
                     <button
@@ -146,18 +163,49 @@
                 </div>
               </div>
 
+              <!-- expansion menu dropdown (positioned relative to node body) -->
+              <div 
+                v-if="hasExpansionMenu(nodeProps) && isExpansionMenuOpen(nodeProps.id)" 
+                class="vf-expansion-menu-dropdown"
+                @click.stop
+              >
+                <template v-for="field in getExpansionMenuFields(nodeProps)" :key="field.name">
+                  <template v-if="field.options && field.options.aspect_ratio">
+                    <div class="vf-expansion-menu-item">
+                      <label class="vf-expansion-menu-label">
+                        {{ field.options.aspect_ratio.label || 'Aspect Ratio' }}
+                      </label>
+                      <q-select
+                        :model-value="nodeProps.data.values[field.options.aspect_ratio.name] || '1:1'"
+                        :options="field.options.aspect_ratio.options"
+                        option-label="label"
+                        option-value="value"
+                        emit-value
+                        map-options
+                        dense
+                        outlined
+                        class="vf-expansion-menu-select"
+                        @update:model-value="onAspectRatioChange(nodeProps, field, $event)"
+                      />
+                    </div>
+                  </template>
+                </template>
+              </div>
+
               <!-- node level error -->
               <div v-if="nodeProps.data.values && nodeProps.data.values.error" class="vf-node-error">
                 <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"
@@ -418,6 +466,9 @@ export default {
       // which node menu is open
       nodeMenuFor: null,
 
+      // which expansion menu is open
+      expansionMenuFor: null,
+
       // copy/paste support
       copiedNodeId: null,
       mouseFlowPosition: {x: 0, y: 0},
@@ -498,6 +549,10 @@ export default {
 
     toggleNodeMenu(id) {
       this.nodeMenuFor = this.nodeMenuFor === id ? null : id;
+      // Close expansion menu when opening node menu
+      if (this.nodeMenuFor === id) {
+        this.expansionMenuFor = null;
+      }
     },
 
     isNodeMenuOpen(id) {
@@ -509,6 +564,32 @@ export default {
       this.emitEvent("node_menu_action", {id: id, action: action});
     },
 
+    toggleExpansionMenu(id) {
+      this.expansionMenuFor = this.expansionMenuFor === id ? null : id;
+      // Close node menu when opening expansion menu
+      if (this.expansionMenuFor === id) {
+        this.nodeMenuFor = null;
+      }
+    },
+
+    isExpansionMenuOpen(id) {
+      return this.expansionMenuFor === id;
+    },
+
+    hasExpansionMenu(nodeProps) {
+      if (!nodeProps || !nodeProps.data || !nodeProps.data.fields) {
+        return false;
+      }
+      return nodeProps.data.fields.some(field => field.kind === 'expansion_menu');
+    },
+
+    getExpansionMenuFields(nodeProps) {
+      if (!nodeProps || !nodeProps.data || !nodeProps.data.fields) {
+        return [];
+      }
+      return nodeProps.data.fields.filter(field => field.kind === 'expansion_menu');
+    },
+
     // public API for Python
 
     setGraph(payload) {
@@ -742,6 +823,31 @@ export default {
       });
     },
 
+    onAspectRatioChange(nodeProps, field, value) {
+      if (!nodeProps || !nodeProps.data || !field) return;
+      
+      // Update the value in the node data
+      if (!nodeProps.data.values) {
+        nodeProps.data.values = {};
+      }
+      nodeProps.data.values.aspect_ratio = value;
+
+      // Update the node values in Vue Flow
+      this.updateNodeValues({
+        id: nodeProps.id,
+        values: {aspect_ratio: value}
+      });
+
+      // Emit the change event
+      this.emitEvent("node_field_changed", {
+        id: nodeProps.id,
+        field: "aspect_ratio",
+        fieldKind: "expansion_menu",
+        value: value
+      });
+    },
+
+
     resizeAndConvertToWebp(blob, maxSize = 1024) {
       return new Promise((resolve, reject) => {
         const img = new Image();
@@ -1055,6 +1161,7 @@ export default {
       this.contextMenuVisible = false;
       this.contextMenuFlowPosition = null;
       this.nodeMenuFor = null;
+      this.expansionMenuFor = null;
     },
 
     onCreateNodeClick(entry) {
@@ -1176,6 +1283,7 @@ export default {
 
     onPaneClick(event) {
       this.hideContextMenu();
+      this.expansionMenuFor = null;
       this.emitEvent("pane_click", event || {});
     },
 
@@ -1524,6 +1632,7 @@ export default {
   flex: 1 1 auto;
   padding: 6px 8px 8px 8px;
   max-width: 260px;
+  position: relative;
 }
 
 .vf-node-header {
@@ -1536,12 +1645,18 @@ export default {
 
 .vf-node-title {
   font-weight: 600;
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .vf-node-header-actions {
   display: inline-flex;
   align-items: center;
   gap: 4px;
+  flex-shrink: 0;
 }
 
 .vf-node-content {
@@ -1761,6 +1876,75 @@ export default {
   font-size: 12px;
   opacity: 0.7;
 }
+
+/* expansion menu styling - header button with dropdown */
+.vf-expansion-menu-header {
+  position: relative;
+}
+
+.vf-expansion-menu-dropdown {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  margin-top: 4px;
+  border-radius: 4px;
+  background: #ffffff;
+  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
+  padding: 8px;
+  z-index: 30;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.vf-expansion-menu-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.vf-expansion-menu-label {
+  font-size: 11px;
+  color: #6b7280;
+  font-weight: 500;
+  margin-bottom: 2px;
+}
+
+.vf-expansion-menu-select {
+  font-size: 11px;
+  cursor: pointer;
+  width: 100%;
+}
+
+.vf-expansion-menu-select :deep(.q-field) {
+  cursor: pointer;
+}
+
+.vf-expansion-menu-select :deep(.q-field__control) {
+  min-height: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+
+.vf-expansion-menu-select :deep(.q-field__native) {
+  min-height: 24px;
+  padding: 2px 8px;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.vf-expansion-menu-select :deep(.q-field__inner) {
+  cursor: pointer;
+}
+
+.vf-expansion-menu-select :deep(.q-field__marginal) {
+  cursor: pointer;
+}
+
+.vf-expansion-menu-select :deep(.q-field__bottom) {
+  cursor: pointer;
+}
+
 </style>
 
 <style>

nodes/controller.py

@@ -181,6 +181,39 @@ class GraphController:
         elif isinstance(node, TextToImageNode) and field == "image":
             node.image_src = "" if value is None else str(value)
 
+        elif isinstance(node, TextToImageNode) and field == "aspect_ratio":
+            # Parse aspect_ratio value from the dropdown selection. Thanks Flo!
+            aspect_ratio_value = "1:1"  # default
+            
+            print(f"[DEBUG controller] Aspect ratio set to {value}, type={type(value)}")
+            
+            if value is not None and isinstance(value, str):
+                aspect_ratio_value = value.strip()
+            else:
+                print(f"[DEBUG controller] aspect_ratio value is None, using default 1:1")
+            
+            # Validate aspect ratio format (should be "W:H")
+            # Allow common formats: "1:1", "16:9", "9:16", etc. we could add more later if needed
+            if aspect_ratio_value and ":" in aspect_ratio_value:
+                parts = aspect_ratio_value.split(":")
+                if len(parts) == 2:
+                    try:
+                        # Validate that both parts are numeric
+                        float(parts[0])
+                        float(parts[1])
+                        old_ratio = node.aspect_ratio
+                        node.aspect_ratio = aspect_ratio_value
+
+                        # Clear cached image since aspect ratio changed
+                        node.image_src = None
+                        node.decoded_image = None
+                
+                    except (ValueError, TypeError):
+                        # Invalid format, use default
+                        node.aspect_ratio = "1:1"
+                        print(f"[DEBUG Controller] Invalid numeric format, using default: {node.aspect_ratio}")
+       
+
     def _on_edges_delete(self, edges: list[dict[str, Any]]) -> None:
         """Remove matching connections from the DataGraph when edges are deleted in Vue."""
         if not edges:

nodes/session.py

@@ -549,8 +549,22 @@ class GraphSession:
                 return
 
             if isinstance(node, TextToImageNode):
+                # Try to get the image from decoded_image first, then from image_src
+                img = node.decoded_image
+                if img is None and node.image_src:
+                    try:
+                        from . import utils
+                        img = utils.decode_image(node.image_src)
+                    except Exception as e:
+                        ui.notify(f"Failed to decode image: {e}", type="negative")
+                        return
+                
+                if img is None:
+                    ui.notify("No image available to download", type="warning")
+                    return
+                
                 buf = io.BytesIO()
-                node.decoded_image.save(buf, format="PNG")
+                img.save(buf, format="PNG")
                 buf.seek(0)
 
                 png_bytes = buf.getvalue()

nodes/text_to_image.py

@@ -51,6 +51,7 @@ class TextToImageNode(NodeInstance):
     error: str | None = None
     progress_value: float = 0.0
     progress_message: str | None = None
+    aspect_ratio: str = "1:1"  # Default aspect ratio
 
     async def process(self) -> None:
         # reset error message (but is not directly updated)
@@ -59,12 +60,14 @@ class TextToImageNode(NodeInstance):
         text_input = self.inputs["text"]
         image_output = self.outputs["image"]
 
-        print(f"\n[DEBUG TextToImageNode] ===== STARTING PROCESS =====")
+        print(f"\n[DEBUG] ===== GENERATING IMAGE =====")
+        print(f"[DEBUG] Node ID: {self.node_id}")
         print(f"[DEBUG] Text input value: {text_input.value is not None}")
         print(f"[DEBUG] Text input state: {text_input.state}")
+        print(f"[DEBUG] Image aspect ratio selected: {self.aspect_ratio}")
 
         # Collect images from ordered input ports (image1, image2, image3, ...)
-        # Only include images that are actually connected (not None)
+        # But Only include images that are actually connected 
         images: list[Image.Image] = []
         for i in range(1, NUM_IMAGE_INPUTS + 1):
             image_port_name = f"image{i}"
@@ -134,7 +137,7 @@ class TextToImageNode(NodeInstance):
             loop = asyncio.get_running_loop()
             result = await loop.run_in_executor(
                 None,
-                partial(image_service.generate, prompt, images=images_list, progress=on_progress)
+                partial(image_service.generate, prompt, images=images_list, progress=on_progress, aspect_ratio=self.aspect_ratio)
             )
 
             url = utils.encode_image(result.image)
@@ -152,6 +155,7 @@ class TextToImageNode(NodeInstance):
         self.error = None
         self.progress_value = 0.0
         self.progress_message = None
+        # Note: aspect_ratio is not reset, it persists
 
         # clear output port value and mark it dirty
         out = self.outputs.get("image") if self.outputs is not None else None
@@ -177,7 +181,7 @@ class TextToImageNodeRenderable(VueNodeRenderable[TextToImageNode]):
         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!
+            # It's eyeballed, so pretty ugly at this point
             start_percent = 30
             end_percent = 85
             if num_inputs == 1:
@@ -224,6 +228,26 @@ class TextToImageNodeRenderable(VueNodeRenderable[TextToImageNode]):
         if node.error:
             data.values["error"] = node.error
 
+        # Add expansion menu with aspect ratio dropdown. Thanks Flo!
+        data.fields.append(
+            {
+                #"name": "Settings",
+                "kind": "expansion_menu",
+                "options": {
+                    "aspect_ratio": {
+                        "name": "aspect_ratio",
+                        "label": "Aspect Ratio",
+                        "options": [
+                            {"label": "1:1 (Square)", "value": "1:1"},
+                            {"label": "16:9 (Landscape)", "value": "16:9"},
+                            {"label": "9:16 (Portrait)", "value": "9:16"}
+                        ],
+                    }
+                },
+            }
+        )
+        data.values["aspect_ratio"] = node.aspect_ratio
+
         data.executable = True
         data.processing = False
 

nodes/utils.py

@@ -11,12 +11,17 @@ def encode_image(img: Image.Image, image_format: str | None = None) -> str:
     If not provided, fall back to WEBP.
     """
 
+    params = {}
+
     if image_format is None:
         image_format = "WEBP"
 
+    if image_format == "WEBP":
+        params["quality"] = 90
+
     buffer = io.BytesIO()
     try:
-        img.save(buffer, format=image_format)
+        img.save(buffer, format=image_format, **params)
     except Exception as e:
         raise ValueError(f"Failed to encode image as {image_format}: {e}")
 

services/image/DummyImageGenerator.py

@@ -33,6 +33,8 @@ class DummyImageGenerator(ImageGenerator):
             images: Sequence[Image.Image] | None = None,
             *,
             progress: ProgressCallback | None = None,
+            aspect_ratio: str | None = None,
+            **kwargs: Any,
     ) -> ImageGenerationResult:
         call_progress(progress, 0.1, "Starting dummy image request")
 

services/image/FalAIImageGenerator.py

@@ -108,8 +108,13 @@ class FalAIImageGenerator(ImageGenerator, ABC):
             images: Sequence[Image.Image] | None = None,
             *,
             progress: ProgressCallback | None = None,
+            aspect_ratio: str | None = None,
             **kwargs: Any,
     ) -> ImageGenerationResult:
+        # Include aspect_ratio in kwargs if provided
+        if aspect_ratio is not None:
+            kwargs = {**kwargs, "aspect_ratio": aspect_ratio}
+
         model = self._select_model(prompt=prompt, images=images, **kwargs)
 
         call_progress(progress, 0.1, "Encoding inputs for fal.ai image model")

services/image/GoogleImageGenerator.py

@@ -47,6 +47,8 @@ class GoogleImageGenerator(ImageGenerator):
             images: Sequence[Image.Image] | None = None,
             *,
             progress: ProgressCallback | None = None,
+            aspect_ratio: str | None = None,
+            **kwargs: Any,
     ) -> ImageGenerationResult:
         from google.genai import types  # type: ignore[import-not-found]
 

services/image/ImageGenerator.py

@@ -20,7 +20,10 @@ class ImageGenerator(GenerationService, ABC):
             images: Sequence[Image.Image] | None = None,
             *,
             progress: ProgressCallback | None = None,
+            aspect_ratio: str | None = None,
             **kwargs: Any,
     ) -> ImageGenerationResult:
-        """Generate images from a prompt and optional images."""
+
+        """Generate images from a prompt and optional images. """
+        
         raise NotImplementedError

velai_app.py

@@ -22,19 +22,25 @@ class VelaiApp:
         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"):
+                    # create Info dialog once in the page context
+                    with ui.dialog() as info_dialog:
+                        with ui.card():
+                            ui.button(icon="close", on_click=info_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.\n"
+                                "It 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 :)"
+                            )
+
+                    ui.button("Info", on_click=info_dialog.open).props("color='black'")
 
-                    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:
@@ -89,32 +95,34 @@ class VelaiApp:
         session = self.session
         canvas = self.canvas
 
-        with ui.dialog() as dialog:
-            with ui.card():
-                ui.label("Upload graph JSON")
+        # create the dialog in the main page content context
+        with ui.context.client.content:
+            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")
+                    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()
+                        session.load_from_json(content)
+                        session.save_to_storage()
 
-                    nodes = session.initial_vue_nodes()
-                    edges = session.initial_vue_edges()
-                    canvas.set_graph(nodes, edges)
+                        nodes = session.initial_vue_nodes()
+                        edges = session.initial_vue_edges()
+                        canvas.set_graph(nodes, edges)
 
-                    dialog.close()
+                        dialog.close()
 
-                ui.upload(
-                    label="Choose JSON file",
-                    on_upload=handle_upload,
-                    max_files=1,
-                ).props("accept=.json auto-upload")
+                    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'")
+                    ui.button("Cancel", on_click=dialog.close).props("color='black'")
 
-        dialog.open()
+            dialog.open()
 
     def clear_graph_action(self) -> None:
         if self.canvas is None: