Bug fix to Metadata To Model & Metadata To SDXL Model for when no metadata found.

- Added `Metadata to Loras`, `Metadata To SDXL LoRAs`.
- Added unet, clip and vae outputs to `Metadata To Model` & `Metadata To SDXL Model`
- Added default vae as an input to `Metadata to VAE`

docker/Dockerfile

@@ -18,8 +18,8 @@ ENV INVOKEAI_SRC=/opt/invokeai
 ENV VIRTUAL_ENV=/opt/venv/invokeai
 
 ENV PATH="$VIRTUAL_ENV/bin:$PATH"
-ARG TORCH_VERSION=2.1.0
-ARG TORCHVISION_VERSION=0.16
+ARG TORCH_VERSION=2.1.2
+ARG TORCHVISION_VERSION=0.16.2
 ARG GPU_DRIVER=cuda
 ARG TARGETPLATFORM="linux/amd64"
 # unused but available
@@ -35,7 +35,7 @@ RUN --mount=type=cache,target=/root/.cache/pip \
     if [ "$TARGETPLATFORM" = "linux/arm64" ] || [ "$GPU_DRIVER" = "cpu" ]; then \
         extra_index_url_arg="--extra-index-url https://download.pytorch.org/whl/cpu"; \
     elif [ "$GPU_DRIVER" = "rocm" ]; then \
-        extra_index_url_arg="--index-url https://download.pytorch.org/whl/rocm5.6"; \
+        extra_index_url_arg="--extra-index-url https://download.pytorch.org/whl/rocm5.6"; \
     else \
         extra_index_url_arg="--extra-index-url https://download.pytorch.org/whl/cu121"; \
     fi &&\
@@ -54,7 +54,7 @@ RUN --mount=type=cache,target=/root/.cache/pip \
     if [ "$GPU_DRIVER" = "cuda" ] && [ "$TARGETPLATFORM" = "linux/amd64" ]; then \
         pip install -e ".[xformers]"; \
     else \
-        pip install -e "."; \
+        pip install $extra_index_url_arg -e "."; \
     fi
 
 # #### Build the Web UI ------------------------------------

docker/run.sh

@@ -21,7 +21,7 @@ run() {
     printf "%s\n" "$build_args"
   fi
 
-  docker compose build $build_args
+  docker compose build $build_args $service_name
   unset build_args
 
   printf "%s\n" "starting service $service_name"

docs/installation/020_INSTALL_MANUAL.md

@@ -230,13 +230,13 @@ manager, please follow these steps:
         === "local Webserver"
 
             ```bash
-            invokeai --web
+            invokeai-web
             ```
 
         === "Public Webserver"
 
             ```bash
-            invokeai --web --host 0.0.0.0
+            invokeai-web --host 0.0.0.0
             ```
 
         === "CLI"
@@ -402,4 +402,4 @@ environment variable INVOKEAI_ROOT to point to the installation directory.
 Note that if you run into problems with the Conda installation, the InvokeAI
 staff will **not** be able to help you out. Caveat Emptor!
 
-[dev-chat]: https://discord.com/channels/1020123559063990373/1049495067846524939
+[dev-chat]: https://discord.com/channels/1020123559063990373/1049495067846524939

invokeai/app/invocations/adapters_linked.py

@@ -0,0 +1,131 @@
+from typing import Optional, Union
+
+from invokeai.app.invocations.baseinvocation import (
+    BaseInvocationOutput,
+    Input,
+    InputField,
+    InvocationContext,
+    OutputField,
+    invocation,
+    invocation_output,
+)
+from invokeai.app.invocations.controlnet_image_processors import ControlField, ControlNetInvocation
+from invokeai.app.invocations.ip_adapter import IPAdapterField, IPAdapterInvocation
+from invokeai.app.invocations.t2i_adapter import T2IAdapterField, T2IAdapterInvocation
+from invokeai.app.shared.fields import FieldDescriptions
+
+
+def append_list(new_item, items, item_cls):
+    """Add an item to an exiting item or list of items then output as a list of items."""
+
+    result = []
+    if items is None or (isinstance(items, list) and len(items) == 0):
+        pass
+    elif isinstance(items, item_cls):
+        result.append(items)
+    elif isinstance(items, list) and all(isinstance(i, item_cls) for i in items):
+        result.extend(items)
+    else:
+        raise ValueError(f"Invalid adapter list format: {items}")
+
+    result.append(new_item)
+    return result
+
+
+@invocation_output("control_list_output")
+class ControlListOutput(BaseInvocationOutput):
+    # Outputs
+    control_list: list[ControlField] = OutputField(description=FieldDescriptions.control)
+
+
+@invocation(
+    "controlnet-linked",
+    title="ControlNet-Linked",
+    tags=["controlnet"],
+    category="controlnet",
+    version="1.1.0",
+)
+class ControlNetLinkedInvocation(ControlNetInvocation):
+    """Collects ControlNet info to pass to other nodes."""
+
+    control_list: Optional[Union[ControlField, list[ControlField]]] = InputField(
+        default=None,
+        title="ControlNet-List",
+        input=Input.Connection,
+        ui_order=0,
+    )
+
+    def invoke(self, context: InvocationContext) -> ControlListOutput:
+        # Call parent
+        output = super().invoke(context).control
+        # Append the control output to the input list
+        control_list = append_list(output, self.control_list, ControlField)
+        return ControlListOutput(control_list=control_list)
+
+
+@invocation_output("ip_adapter_list_output")
+class IPAdapterListOutput(BaseInvocationOutput):
+    # Outputs
+    ip_adapter_list: list[IPAdapterField] = OutputField(
+        description=FieldDescriptions.ip_adapter, title="IP-Adapter-List"
+    )
+
+
+@invocation(
+    "ip_adapter_linked",
+    title="IP-Adapter-Linked",
+    tags=["ip_adapter", "control"],
+    category="ip_adapter",
+    version="1.1.0",
+)
+class IPAdapterLinkedInvocation(IPAdapterInvocation):
+    """Collects IP-Adapter info to pass to other nodes."""
+
+    ip_adapter_list: Optional[Union[IPAdapterField, list[IPAdapterField]]] = InputField(
+        description=FieldDescriptions.ip_adapter,
+        title="IP-Adapter-List",
+        default=None,
+        input=Input.Connection,
+        ui_order=0,
+    )
+
+    def invoke(self, context: InvocationContext) -> IPAdapterListOutput:
+        # Call parent
+        output = super().invoke(context).ip_adapter
+        # Append the control output to the input list
+        result = append_list(output, self.ip_adapter_list, IPAdapterField)
+        return IPAdapterListOutput(ip_adapter_list=result)
+
+
+@invocation_output("ip_adapters_output")
+class T2IAdapterListOutput(BaseInvocationOutput):
+    # Outputs
+    t2i_adapter_list: list[T2IAdapterField] = OutputField(
+        description=FieldDescriptions.t2i_adapter, title="T2I Adapter-List"
+    )
+
+
+@invocation(
+    "t2i_adapter_linked",
+    title="T2I-Adapter-Linked",
+    tags=["t2i_adapter", "control"],
+    category="t2i_adapter",
+    version="1.0.0",
+)
+class T2IAdapterLinkedInvocation(T2IAdapterInvocation):
+    """Collects T2I-Adapter info to pass to other nodes."""
+
+    t2i_adapter_list: Optional[Union[T2IAdapterField, list[T2IAdapterField]]] = InputField(
+        description=FieldDescriptions.ip_adapter,
+        title="T2I-Adapter",
+        default=None,
+        input=Input.Connection,
+        ui_order=0,
+    )
+
+    def invoke(self, context: InvocationContext) -> T2IAdapterListOutput:
+        # Call parent
+        output = super().invoke(context).t2i_adapter
+        # Append the control output to the input list
+        t2i_adapter_list = append_list(output, self.t2i_adapter_list, T2IAdapterField)
+        return T2IAdapterListOutput(t2i_adapter_list=t2i_adapter_list)

invokeai/app/services/images/images_default.py

@@ -154,7 +154,7 @@ class ImageService(ImageServiceABC):
             self.__invoker.services.logger.error("Image record not found")
             raise
         except Exception as e:
-            self.__invoker.services.logger.error("Problem getting image DTO")
+            self.__invoker.services.logger.error("Problem getting image metadata")
             raise e
 
     def get_workflow(self, image_name: str) -> Optional[WorkflowWithoutID]:

invokeai/app/services/shared/graph.py

@@ -540,7 +540,7 @@ class Graph(BaseModel):
         except NodeNotFoundError:
             return False
 
-    def get_node(self, node_path: str) -> InvocationsUnion:
+    def get_node(self, node_path: str) -> BaseInvocation:
         """Gets a node from the graph using a node path."""
         # Materialized graphs may have nodes at the top level
         graph, node_id = self._get_graph_and_node(node_path)
@@ -891,7 +891,7 @@ class GraphExecutionState(BaseModel):
         # If next is still none, there's no next node, return None
         return next_node
 
-    def complete(self, node_id: str, output: InvocationOutputsUnion):
+    def complete(self, node_id: str, output: BaseInvocationOutput) -> None:
         """Marks a node as complete"""
 
         if node_id not in self.execution_graph.nodes:

invokeai/backend/model_management/seamless.py

@@ -1,10 +1,11 @@
 from __future__ import annotations
 
 from contextlib import contextmanager
-from typing import List, Union
+from typing import Callable, List, Union
 
 import torch.nn as nn
-from diffusers.models import AutoencoderKL, UNet2DConditionModel
+from diffusers.models.autoencoders.autoencoder_kl import AutoencoderKL
+from diffusers.models.unets.unet_2d_condition import UNet2DConditionModel
 
 
 def _conv_forward_asymmetric(self, input, weight, bias):
@@ -26,70 +27,51 @@ def _conv_forward_asymmetric(self, input, weight, bias):
 
 @contextmanager
 def set_seamless(model: Union[UNet2DConditionModel, AutoencoderKL], seamless_axes: List[str]):
+    # Callable: (input: Tensor, weight: Tensor, bias: Optional[Tensor]) -> Tensor
+    to_restore: list[tuple[nn.Conv2d | nn.ConvTranspose2d, Callable]] = []
     try:
-        to_restore = []
-
+        # Hard coded to skip down block layers, allowing for seamless tiling at the expense of prompt adherence
+        skipped_layers = 1
         for m_name, m in model.named_modules():
-            if isinstance(model, UNet2DConditionModel):
-                if ".attentions." in m_name:
+            if not isinstance(m, (nn.Conv2d, nn.ConvTranspose2d)):
+                continue
+
+            if isinstance(model, UNet2DConditionModel) and m_name.startswith("down_blocks.") and ".resnets." in m_name:
+                # down_blocks.1.resnets.1.conv1
+                _, block_num, _, resnet_num, submodule_name = m_name.split(".")
+                block_num = int(block_num)
+                resnet_num = int(resnet_num)
+
+                if block_num >= len(model.down_blocks) - skipped_layers:
                     continue
 
-                if ".resnets." in m_name:
-                    if ".conv2" in m_name:
-                        continue
-                    if ".conv_shortcut" in m_name:
-                        continue
-
-            """
-            if isinstance(model, UNet2DConditionModel):
-                if False and ".upsamplers." in m_name:
+                # Skip the second resnet (could be configurable)
+                if resnet_num > 0:
                     continue
 
-                if False and ".downsamplers." in m_name:
+                # Skip Conv2d layers (could be configurable)
+                if submodule_name == "conv2":
                     continue
 
-                if True and ".resnets." in m_name:
-                    if True and ".conv1" in m_name:
-                        if False and "down_blocks" in m_name:
-                            continue
-                        if False and "mid_block" in m_name:
-                            continue
-                        if False and "up_blocks" in m_name:
-                            continue
+            m.asymmetric_padding_mode = {}
+            m.asymmetric_padding = {}
+            m.asymmetric_padding_mode["x"] = "circular" if ("x" in seamless_axes) else "constant"
+            m.asymmetric_padding["x"] = (
+                m._reversed_padding_repeated_twice[0],
+                m._reversed_padding_repeated_twice[1],
+                0,
+                0,
+            )
+            m.asymmetric_padding_mode["y"] = "circular" if ("y" in seamless_axes) else "constant"
+            m.asymmetric_padding["y"] = (
+                0,
+                0,
+                m._reversed_padding_repeated_twice[2],
+                m._reversed_padding_repeated_twice[3],
+            )
 
-                    if True and ".conv2" in m_name:
-                        continue
-
-                    if True and ".conv_shortcut" in m_name:
-                        continue
-
-                if True and ".attentions." in m_name:
-                    continue
-
-                if False and m_name in ["conv_in", "conv_out"]:
-                    continue
-            """
-
-            if isinstance(m, (nn.Conv2d, nn.ConvTranspose2d)):
-                m.asymmetric_padding_mode = {}
-                m.asymmetric_padding = {}
-                m.asymmetric_padding_mode["x"] = "circular" if ("x" in seamless_axes) else "constant"
-                m.asymmetric_padding["x"] = (
-                    m._reversed_padding_repeated_twice[0],
-                    m._reversed_padding_repeated_twice[1],
-                    0,
-                    0,
-                )
-                m.asymmetric_padding_mode["y"] = "circular" if ("y" in seamless_axes) else "constant"
-                m.asymmetric_padding["y"] = (
-                    0,
-                    0,
-                    m._reversed_padding_repeated_twice[2],
-                    m._reversed_padding_repeated_twice[3],
-                )
-
-                to_restore.append((m, m._conv_forward))
-                m._conv_forward = _conv_forward_asymmetric.__get__(m, nn.Conv2d)
+            to_restore.append((m, m._conv_forward))
+            m._conv_forward = _conv_forward_asymmetric.__get__(m, nn.Conv2d)
 
         yield
 

invokeai/frontend/web/package.json

@@ -52,6 +52,7 @@
     "@chakra-ui/react-use-size": "^2.1.0",
     "@dagrejs/graphlib": "^2.1.13",
     "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@fontsource-variable/inter": "^5.0.16",
     "@invoke-ai/ui-library": "^0.0.18",

invokeai/frontend/web/pnpm-lock.yaml

@@ -22,6 +22,9 @@ dependencies:
   '@dnd-kit/core':
     specifier: ^6.1.0
     version: 6.1.0(react-dom@18.2.0)(react@18.2.0)
+  '@dnd-kit/sortable':
+    specifier: ^8.0.0
+    version: 8.0.0(@dnd-kit/core@6.1.0)(react@18.2.0)
   '@dnd-kit/utilities':
     specifier: ^3.2.2
     version: 3.2.2(react@18.2.0)
@@ -2884,6 +2887,18 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /@dnd-kit/sortable@8.0.0(@dnd-kit/core@6.1.0)(react@18.2.0):
+    resolution: {integrity: sha512-U3jk5ebVXe1Lr7c2wU7SBZjcWdQP+j7peHJfCspnA81enlu88Mgd7CC8Q+pub9ubP7eKVETzJW+IBAhsqbSu/g==}
+    peerDependencies:
+      '@dnd-kit/core': ^6.1.0
+      react: '>=16.8.0'
+    dependencies:
+      '@dnd-kit/core': 6.1.0(react-dom@18.2.0)(react@18.2.0)
+      '@dnd-kit/utilities': 3.2.2(react@18.2.0)
+      react: 18.2.0
+      tslib: 2.6.2
+    dev: false
+
   /@dnd-kit/utilities@3.2.2(react@18.2.0):
     resolution: {integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==}
     peerDependencies:

invokeai/frontend/web/public/locales/de.json

@@ -69,7 +69,7 @@
         "random": "Zufall",
         "batch": "Stapel-Manager",
         "advanced": "Erweitert",
-        "unifiedCanvas": "Einheitliche Leinwand",
+        "unifiedCanvas": "Leinwand",
         "openInNewTab": "In einem neuem Tab öffnen",
         "statusProcessing": "wird bearbeitet",
         "linear": "Linear",
@@ -127,7 +127,7 @@
         "galleryImageResetSize": "Größe zurücksetzen",
         "gallerySettings": "Galerie-Einstellungen",
         "maintainAspectRatio": "Seitenverhältnis beibehalten",
-        "autoSwitchNewImages": "Automatisch zu neuen Bildern wechseln",
+        "autoSwitchNewImages": "Auto-Wechsel zu neuen Bildern",
         "singleColumnLayout": "Einspaltiges Layout",
         "allImagesLoaded": "Alle Bilder geladen",
         "loadMore": "Mehr laden",
@@ -226,7 +226,7 @@
         },
         "sendToImageToImage": {
             "title": "An Bild zu Bild senden",
-            "desc": "Aktuelles Bild an Bild zu Bild senden"
+            "desc": "Aktuelles Bild an Bild-zu-Bild senden"
         },
         "deleteImage": {
             "title": "Bild löschen",
@@ -258,7 +258,7 @@
         },
         "selectEraser": {
             "title": "Radiergummi auswählen",
-            "desc": "Wählt den Radiergummi für die Leinwand aus"
+            "desc": "Wählt den Radiergummi aus"
         },
         "decreaseBrushSize": {
             "title": "Pinselgröße verkleinern",
@@ -330,7 +330,7 @@
         },
         "downloadImage": {
             "title": "Bild herunterladen",
-            "desc": "Aktuelle Leinwand herunterladen"
+            "desc": "Aktuelles Bild herunterladen"
         },
         "undoStroke": {
             "title": "Pinselstrich rückgängig machen",
@@ -564,8 +564,8 @@
         "img2imgStrength": "Bild-zu-Bild-Stärke",
         "toggleLoopback": "Loopback umschalten",
         "sendTo": "Senden an",
-        "sendToImg2Img": "Senden an Bild zu Bild",
-        "sendToUnifiedCanvas": "Senden an Unified Canvas",
+        "sendToImg2Img": "Senden an Bild-zu-Bild",
+        "sendToUnifiedCanvas": "Senden an Leinwand",
         "copyImageToLink": "Bild-Link kopieren",
         "downloadImage": "Bild herunterladen",
         "openInViewer": "Im Viewer öffnen",
@@ -604,7 +604,9 @@
         "resetComplete": "Die Web-Oberfläche wurde zurückgesetzt.",
         "models": "Modelle",
         "useSlidersForAll": "Schieberegler für alle Optionen verwenden",
-        "showAdvancedOptions": "Erweiterte Optionen anzeigen"
+        "showAdvancedOptions": "Erweiterte Optionen anzeigen",
+        "alternateCanvasLayout": "Alternatives Leinwand-Layout",
+        "clearIntermediatesDesc1": "Das Löschen der Zwischenprodukte setzt Leinwand und ControlNet zurück."
     },
     "toast": {
         "tempFoldersEmptied": "Temp-Ordner geleert",
@@ -618,7 +620,7 @@
         "imageSavedToGallery": "Bild in die Galerie gespeichert",
         "canvasMerged": "Leinwand zusammengeführt",
         "sentToImageToImage": "Gesendet an Bild zu Bild",
-        "sentToUnifiedCanvas": "Gesendet an Unified Canvas",
+        "sentToUnifiedCanvas": "Gesendet an Leinwand",
         "parametersSet": "Parameter festlegen",
         "parametersNotSet": "Parameter nicht festgelegt",
         "parametersNotSetDesc": "Keine Metadaten für dieses Bild gefunden.",
@@ -635,7 +637,21 @@
         "metadataLoadFailed": "Metadaten konnten nicht geladen werden",
         "initialImageSet": "Ausgangsbild festgelegt",
         "initialImageNotSet": "Ausgangsbild nicht festgelegt",
-        "initialImageNotSetDesc": "Ausgangsbild konnte nicht geladen werden"
+        "initialImageNotSetDesc": "Ausgangsbild konnte nicht geladen werden",
+        "setCanvasInitialImage": "Ausgangsbild setzen",
+        "problemMergingCanvas": "Problem bei Verschmelzung der Leinwand",
+        "canvasCopiedClipboard": "Leinwand in Zwischenablage kopiert",
+        "canvasSentControlnetAssets": "Leinwand an ControlNet & Sammlung geschickt",
+        "problemDownloadingCanvasDesc": "Kann Basis-Layer nicht exportieren",
+        "canvasDownloaded": "Leinwand heruntergeladen",
+        "problemSavingCanvasDesc": "Kann Basis-Layer nicht exportieren",
+        "canvasSavedGallery": "Leinwand in Galerie gespeichert",
+        "problemMergingCanvasDesc": "Kann Basis-Layer nicht exportieren",
+        "problemSavingCanvas": "Problem beim Speichern der Leinwand",
+        "problemCopyingCanvas": "Problem beim Kopieren der Leinwand",
+        "problemCopyingCanvasDesc": "Kann Basis-Layer nicht exportieren",
+        "problemDownloadingCanvas": "Problem beim Herunterladen der Leinwand",
+        "setAsCanvasInitialImage": "Als Ausgangsbild gesetzt"
     },
     "tooltip": {
         "feature": {
@@ -648,7 +664,7 @@
             "faceCorrection": "Gesichtskorrektur mit GFPGAN oder Codeformer: Der Algorithmus erkennt Gesichter im Bild und korrigiert alle Fehler. Ein hoher Wert verändert das Bild stärker, was zu attraktiveren Gesichtern führt. Codeformer mit einer höheren Genauigkeit bewahrt das Originalbild auf Kosten einer stärkeren Gesichtskorrektur.",
             "imageToImage": "Bild zu Bild lädt ein beliebiges Bild als Ausgangsbild, aus dem dann zusammen mit dem Prompt ein neues Bild erzeugt wird. Je höher der Wert ist, desto stärker wird das Ergebnisbild verändert. Werte von 0,0 bis 1,0 sind möglich, der empfohlene Bereich ist .25-.75",
             "boundingBox": "Der Begrenzungsrahmen ist derselbe wie die Einstellungen für Breite und Höhe bei Text-zu-Bild oder Bild-zu-Bild. Es wird nur der Bereich innerhalb des Rahmens verarbeitet.",
-            "seamCorrection": "Steuert die Behandlung von sichtbaren Übergängen, die zwischen den erzeugten Bildern auf der Leinwand auftreten.",
+            "seamCorrection": "Behandlung von sichtbaren Übergängen, die zwischen den erzeugten Bildern auftreten.",
             "infillAndScaling": "Verwalten Sie Infill-Methoden (für maskierte oder gelöschte Bereiche der Leinwand) und Skalierung (nützlich für kleine Begrenzungsrahmengrößen)."
         }
     },
@@ -659,17 +675,17 @@
         "maskingOptions": "Maskierungsoptionen",
         "enableMask": "Maske aktivieren",
         "preserveMaskedArea": "Maskierten Bereich bewahren",
-        "clearMask": "Maske löschen",
+        "clearMask": "Maske löschen (Shift+C)",
         "brush": "Pinsel",
         "eraser": "Radierer",
         "fillBoundingBox": "Begrenzungsrahmen füllen",
         "eraseBoundingBox": "Begrenzungsrahmen löschen",
-        "colorPicker": "Farbpipette",
+        "colorPicker": "Pipette",
         "brushOptions": "Pinseloptionen",
         "brushSize": "Größe",
         "move": "Bewegen",
         "resetView": "Ansicht zurücksetzen",
-        "mergeVisible": "Sichtbare Zusammenführen",
+        "mergeVisible": "Sichtbare zusammenführen",
         "saveToGallery": "In Galerie speichern",
         "copyToClipboard": "In Zwischenablage kopieren",
         "downloadAsImage": "Als Bild herunterladen",
@@ -683,15 +699,15 @@
         "darkenOutsideSelection": "Außerhalb der Auswahl verdunkeln",
         "autoSaveToGallery": "Automatisch in Galerie speichern",
         "saveBoxRegionOnly": "Nur Auswahlbox speichern",
-        "limitStrokesToBox": "Striche auf Box beschränken",
-        "showCanvasDebugInfo": "Zusätzliche Informationen zur Leinwand anzeigen",
+        "limitStrokesToBox": "Striche auf Auswahl beschränken",
+        "showCanvasDebugInfo": "Zusätzliche Informationen anzeigen",
         "clearCanvasHistory": "Leinwand-Verlauf löschen",
         "clearHistory": "Verlauf löschen",
-        "clearCanvasHistoryMessage": "Wenn Sie den Verlauf der Leinwand löschen, bleibt die aktuelle Leinwand intakt, aber der Verlauf der Rückgängig- und Wiederherstellung wird unwiderruflich gelöscht.",
-        "clearCanvasHistoryConfirm": "Sind Sie sicher, dass Sie den Verlauf der Leinwand löschen möchten?",
+        "clearCanvasHistoryMessage": "Wenn Sie den Verlauf löschen, bleibt die aktuelle Leinwand intakt, aber der Verlauf der Rückgängig- und Wiederherstellung wird unwiderruflich gelöscht.",
+        "clearCanvasHistoryConfirm": "Sind Sie sicher, dass Sie den Verlauf löschen möchten?",
         "emptyTempImageFolder": "Temp-Image Ordner leeren",
         "emptyFolder": "Leerer Ordner",
-        "emptyTempImagesFolderMessage": "Wenn Sie den Ordner für temporäre Bilder leeren, wird auch der Unified Canvas vollständig zurückgesetzt. Dies umfasst den gesamten Verlauf der Rückgängig-/Wiederherstellungsvorgänge, die Bilder im Bereitstellungsbereich und die Leinwand-Basisebene.",
+        "emptyTempImagesFolderMessage": "Wenn Sie den Ordner für temporäre Bilder leeren, wird die Leinwand zurückgesetzt. Dies umfasst den gesamten Verlauf der Rückgängig-/Wiederherstellungsvorgänge, die Bilder im Bereitstellungsbereich und die Leinwand-Basisebene.",
         "emptyTempImagesFolderConfirm": "Sind Sie sicher, dass Sie den temporären Ordner leeren wollen?",
         "activeLayer": "Aktive Ebene",
         "canvasScale": "Leinwand Maßstab",
@@ -708,7 +724,7 @@
         "discardAll": "Alles verwerfen",
         "betaClear": "Löschen",
         "betaDarkenOutside": "Außen abdunkeln",
-        "betaLimitToBox": "Begrenzung auf das Feld",
+        "betaLimitToBox": "Auf Auswahl begrenzen",
         "betaPreserveMasked": "Maskiertes bewahren",
         "antialiasing": "Kantenglättung",
         "showResultsOn": "Zeige Ergebnisse (An)",
@@ -746,7 +762,7 @@
         "autoAddBoard": "Automatisches Hinzufügen zum Ordner",
         "topMessage": "Dieser Ordner enthält Bilder die in den folgenden Funktionen verwendet werden:",
         "move": "Bewegen",
-        "menuItemAutoAdd": "Automatisches Hinzufügen zu diesem Ordner",
+        "menuItemAutoAdd": "Auto-Hinzufügen zu diesem Ordner",
         "myBoard": "Meine Ordner",
         "searchBoard": "Ordner durchsuchen...",
         "noMatching": "Keine passenden Ordner",
@@ -826,7 +842,6 @@
         "pidi": "PIDI",
         "normalBae": "Normales BAE",
         "mlsdDescription": "Minimalistischer Liniensegmentdetektor",
-        "openPoseDescription": "Schätzung der menschlichen Pose mit Openpose",
         "control": "Kontrolle",
         "coarse": "Grob",
         "crop": "Zuschneiden",
@@ -839,10 +854,9 @@
         "lineartAnimeDescription": "Lineart-Verarbeitung im Anime-Stil",
         "minConfidence": "Minimales Vertrauen",
         "megaControl": "Mega-Kontrolle",
-        "autoConfigure": "Prozessor automatisch konfigurieren",
+        "autoConfigure": "Prozessor Auto-konfig",
         "normalBaeDescription": "Normale BAE-Verarbeitung",
         "noneDescription": "Es wurde keine Verarbeitung angewendet",
-        "openPose": "Openpose / \"Pose nutzen\"",
         "lineartAnime": "Lineart Anime / \"Strichzeichnung Anime\"",
         "mediapipeFaceDescription": "Gesichtserkennung mit Mediapipe",
         "canny": "\"Canny\"",
@@ -944,7 +958,7 @@
         "initImage": "Erstes Bild",
         "variations": "Seed-Gewichtungs-Paare",
         "vae": "VAE",
-        "workflow": "Arbeitsablauf",
+        "workflow": "Workflow",
         "scheduler": "Planer",
         "noRecallParameters": "Es wurden keine Parameter zum Abrufen gefunden",
         "recallParameters": "Parameter wiederherstellen"
@@ -1056,6 +1070,20 @@
                 "\"Per Bild\" wird einen einzigartigen Seed-Wert für jedes Bild verwenden. Dies bietet mehr Variationen."
             ],
             "heading": "Seed-Verhalten"
+        },
+        "dynamicPrompts": {
+            "paragraphs": [
+                "\"Dynamische Prompts\" übersetzt einen Prompt in mehrere.",
+                "Die Ausgangs-Syntax ist \"ein {roter|grüner|blauer} ball\". Das generiert 3 Prompts: \"ein roter ball\", \"ein grüner ball\" und \"ein blauer ball\".",
+                "Sie können die Syntax so oft verwenden, wie Sie in einem einzigen Prompt möchten, aber stellen Sie sicher, dass die Anzahl der Prompts zur Einstellung von \"Max Prompts\" passt."
+            ],
+            "heading": "Dynamische Prompts"
+        },
+        "controlNetWeight": {
+            "paragraphs": [
+                "Wie stark wird das ControlNet das generierte Bild beeinflussen wird."
+            ],
+            "heading": "Einfluss"
         }
     },
     "ui": {
@@ -1160,10 +1188,10 @@
         "outputFieldInInput": "Ausgabefeld im Eingang",
         "problemReadingWorkflow": "Problem beim Lesen des Arbeitsablaufs vom Bild",
         "reloadNodeTemplates": "Knoten-Vorlagen neu laden",
-        "newWorkflow": "Neuer Arbeitsablauf",
+        "newWorkflow": "Neuer Arbeitsablauf / Workflow",
         "newWorkflowDesc": "Einen neuen Arbeitsablauf erstellen?",
         "noFieldsLinearview": "Keine Felder zur linearen Ansicht hinzugefügt",
-        "clearWorkflow": "Arbeitsablauf löschen",
+        "clearWorkflow": "Workflow löschen",
         "clearWorkflowDesc": "Diesen Arbeitsablauf löschen und neu starten?",
         "noConnectionInProgress": "Es besteht keine Verbindung",
         "notes": "Anmerkungen",
@@ -1220,8 +1248,8 @@
         "stringDescription": "Zeichenfolgen (Strings) sind Text.",
         "fieldTypesMustMatch": "Feldtypen müssen übereinstimmen",
         "fitViewportNodes": "An Ansichtsgröße anpassen",
-        "missingCanvaInitMaskImages": "Fehlende Startbilder und Masken auf der Arbeitsfläche",
-        "missingCanvaInitImage": "Fehlendes Startbild auf der Arbeitsfläche",
+        "missingCanvaInitMaskImages": "Fehlende Startbilder und Masken auf der Leinwand",
+        "missingCanvaInitImage": "Fehlendes Startbild auf der Leinwand",
         "ipAdapterModelDescription": "IP-Adapter-Modellfeld",
         "latentsPolymorphicDescription": "Zwischen Nodes können Latents weitergegeben werden.",
         "loadingNodes": "Lade Nodes...",
@@ -1321,7 +1349,7 @@
         "workflows": "Arbeitsabläufe",
         "noSystemWorkflows": "Keine System-Arbeitsabläufe",
         "workflowName": "Arbeitsablauf-Name",
-        "workflowIsOpen": "Arbeitsablauf ist offen",
+        "workflowIsOpen": "Arbeitsablauf ist geöffnet",
         "saveWorkflowAs": "Arbeitsablauf speichern als",
         "searchWorkflows": "Suche Arbeitsabläufe",
         "newWorkflowCreated": "Neuer Arbeitsablauf erstellt",

invokeai/frontend/web/public/locales/en.json

@@ -175,6 +175,7 @@
         "statusUpscaling": "Upscaling",
         "statusUpscalingESRGAN": "Upscaling (ESRGAN)",
         "template": "Template",
+        "toResolve": "To resolve",
         "training": "Training",
         "trainingDesc1": "A dedicated workflow for training your own embeddings and checkpoints using Textual Inversion and Dreambooth from the web interface.",
         "trainingDesc2": "InvokeAI already supports training custom embeddourings using Textual Inversion using the main script.",
@@ -900,6 +901,7 @@
         "doesNotExist": "does not exist",
         "downloadWorkflow": "Download Workflow JSON",
         "edge": "Edge",
+        "editMode": "Edit in Workflow Editor",
         "enum": "Enum",
         "enumDescription": "Enums are values that may be one of a number of options.",
         "executionStateCompleted": "Completed",
@@ -995,8 +997,10 @@
         "problemReadingMetadata": "Problem reading metadata from image",
         "problemReadingWorkflow": "Problem reading workflow from image",
         "problemSettingTitle": "Problem Setting Title",
+        "resetToDefaultValue": "Reset to default value",
         "reloadNodeTemplates": "Reload Node Templates",
         "removeLinearView": "Remove from Linear View",
+        "reorderLinearView": "Reorder Linear View",
         "newWorkflow": "New Workflow",
         "newWorkflowDesc": "Create a new workflow?",
         "newWorkflowDesc2": "Your current workflow has unsaved changes.",
@@ -1067,6 +1071,7 @@
         "vaeModelFieldDescription": "TODO",
         "validateConnections": "Validate Connections and Graph",
         "validateConnectionsHelp": "Prevent invalid connections from being made, and invalid graphs from being invoked",
+        "viewMode": "Use in Linear View",
         "unableToGetWorkflowVersion": "Unable to get workflow schema version",
         "unrecognizedWorkflowVersion": "Unrecognized workflow schema version {{version}}",
         "version": "Version",

invokeai/frontend/web/public/locales/it.json

@@ -795,7 +795,8 @@
         "workflowDeleted": "Flusso di lavoro eliminato",
         "problemRetrievingWorkflow": "Problema nel recupero del flusso di lavoro",
         "resetInitialImage": "Reimposta l'immagine iniziale",
-        "uploadInitialImage": "Carica l'immagine iniziale"
+        "uploadInitialImage": "Carica l'immagine iniziale",
+        "problemDownloadingImage": "Impossibile scaricare l'immagine"
     },
     "tooltip": {
         "feature": {
@@ -1134,7 +1135,10 @@
         "newWorkflow": "Nuovo flusso di lavoro",
         "newWorkflowDesc": "Creare un nuovo flusso di lavoro?",
         "newWorkflowDesc2": "Il flusso di lavoro attuale presenta modifiche non salvate.",
-        "unsupportedAnyOfLength": "unione di troppi elementi ({{count}})"
+        "unsupportedAnyOfLength": "unione di troppi elementi ({{count}})",
+        "clearWorkflowDesc": "Cancellare questo flusso di lavoro e avviarne uno nuovo?",
+        "clearWorkflow": "Cancella il flusso di lavoro",
+        "clearWorkflowDesc2": "Il tuo flusso di lavoro attuale presenta modifiche non salvate."
     },
     "boards": {
         "autoAddBoard": "Aggiungi automaticamente bacheca",
@@ -1191,7 +1195,6 @@
         "f": "F",
         "h": "A",
         "prompt": "Prompt",
-        "openPoseDescription": "Stima della posa umana utilizzando Openpose",
         "resizeMode": "Ridimensionamento",
         "weight": "Peso",
         "selectModel": "Seleziona un modello",
@@ -1672,7 +1675,9 @@
         "downloadWorkflow": "Salva su file",
         "uploadWorkflow": "Carica da file",
         "projectWorkflows": "Flussi di lavoro del progetto",
-        "noWorkflows": "Nessun flusso di lavoro"
+        "noWorkflows": "Nessun flusso di lavoro",
+        "workflowCleared": "Flusso di lavoro cancellato",
+        "saveWorkflowToProject": "Salva flusso di lavoro nel progetto"
     },
     "app": {
         "storeNotInitialized": "Il negozio non è inizializzato"

invokeai/frontend/web/public/locales/ja.json

@@ -555,7 +555,6 @@
         "balanced": "バランス",
         "prompt": "プロンプト",
         "depthMidasDescription": "Midasを使用して深度マップを生成",
-        "openPoseDescription": "Openposeを使用してポーズを推定",
         "control": "コントロール",
         "resizeMode": "リサイズモード",
         "weight": "重み",

invokeai/frontend/web/public/locales/ko.json

@@ -333,7 +333,6 @@
         "h": "H",
         "prompt": "프롬프트",
         "depthMidasDescription": "Midas를 사용하여 Depth map 생성하기",
-        "openPoseDescription": "Openpose를 이용한 사람 포즈 추정",
         "control": "Control",
         "resizeMode": "크기 조정 모드",
         "t2iEnabledControlNetDisabled": "$t(common.t2iAdapter) 사용 가능,$t(common.controlNet) 사용 불가능",
@@ -370,7 +369,6 @@
         "normalBaeDescription": "Normal BAE 처리",
         "noneDescription": "처리되지 않음",
         "saveControlImage": "Control Image 저장",
-        "openPose": "Openpose",
         "toggleControlNet": "해당 ControlNet으로 전환",
         "delete": "삭제",
         "controlAdapter_other": "Control Adapter(s)",

invokeai/frontend/web/public/locales/nl.json

@@ -1033,7 +1033,6 @@
         "prompt": "Prompt",
         "depthMidasDescription": "Genereer diepteblad via Midas",
         "controlnet": "$t(controlnet.controlAdapter_one) #{{number}} ($t(common.controlNet))",
-        "openPoseDescription": "Menselijke pose-benadering via Openpose",
         "control": "Controle",
         "resizeMode": "Modus schaling",
         "t2iEnabledControlNetDisabled": "$t(common.t2iAdapter) ingeschakeld, $t(common.controlNet)s uitgeschakeld",
@@ -1072,7 +1071,6 @@
         "normalBaeDescription": "Normale BAE-verwerking",
         "noneDescription": "Geen verwerking toegepast",
         "saveControlImage": "Bewaar controle-afbeelding",
-        "openPose": "Openpose",
         "toggleControlNet": "Zet deze ControlNet aan/uit",
         "delete": "Verwijder",
         "controlAdapter_one": "Control-adapter",

invokeai/frontend/web/public/locales/ru.json

@@ -1155,7 +1155,6 @@
         "resetControlImage": "Сбросить контрольное изображение",
         "prompt": "Запрос",
         "controlnet": "$t(controlnet.controlAdapter_one) №{{number}} $t(common.controlNet)",
-        "openPoseDescription": "Оценка позы человека с помощью Openpose",
         "resizeMode": "Режим изменения размера",
         "t2iEnabledControlNetDisabled": "$t(common.t2iAdapter) включен, $t(common.controlNet)s отключен",
         "weight": "Вес",

invokeai/frontend/web/public/locales/tr.json

@@ -259,7 +259,6 @@
         "mediapipeFace": "Mediapipe Yüz",
         "megaControl": "Aşırı Yönetim",
         "mlsd": "M-LSD",
-        "openPoseDescription": "Openpose kullanarak poz belirleme",
         "setControlImageDimensions": "Yönetim Görseli Boyutlarını En/Boydan Al",
         "pidi": "PIDI",
         "scribble": "çiziktirme",
@@ -273,7 +272,6 @@
         "mlsdDescription": "Minimalist Line Segment Detector (Kolay Çizgi Parçası Algılama)",
         "normalBae": "Normal BAE",
         "normalBaeDescription": "Normal BAE işleme",
-        "openPose": "Openpose",
         "resetControlImage": "Yönetim Görselini Kaldır",
         "enableIPAdapter": "IP Aracını Etkinleştir",
         "lineart": "Çizim",

invokeai/frontend/web/public/locales/zh_CN.json

@@ -1143,7 +1143,6 @@
         "balanced": "平衡",
         "prompt": "Prompt (提示词控制)",
         "depthMidasDescription": "使用 Midas 生成深度图",
-        "openPoseDescription": "使用 Openpose 进行人体姿态估计",
         "resizeMode": "缩放模式",
         "weight": "权重",
         "selectModel": "选择一个模型",
@@ -1207,7 +1206,6 @@
         "megaControl": "Mega Control (超级控制)",
         "depthZoe": "Depth (Zoe)",
         "colorMap": "Color",
-        "openPose": "Openpose",
         "controlAdapter_other": "Control Adapters",
         "lineartAnime": "Lineart Anime",
         "canny": "Canny",

invokeai/frontend/web/src/app/store/middleware/devtools/actionSanitizer.ts

@@ -2,7 +2,7 @@ import type { UnknownAction } from '@reduxjs/toolkit';
 import { isAnyGraphBuilt } from 'features/nodes/store/actions';
 import { nodeTemplatesBuilt } from 'features/nodes/store/nodeTemplatesSlice';
 import { cloneDeep } from 'lodash-es';
-import { receivedOpenAPISchema } from 'services/api/thunks/schema';
+import { appInfoApi } from 'services/api/endpoints/appInfo';
 import type { Graph } from 'services/api/types';
 import { socketGeneratorProgress } from 'services/events/actions';
 
@@ -18,7 +18,7 @@ export const actionSanitizer = <A extends UnknownAction>(action: A): A => {
     }
   }
 
-  if (receivedOpenAPISchema.fulfilled.match(action)) {
+  if (appInfoApi.endpoints.getOpenAPISchema.matchFulfilled(action)) {
     return {
       ...action,
       payload: '<OpenAPI schema omitted>',

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts

@@ -23,6 +23,7 @@ import { addControlNetImageProcessedListener } from './listeners/controlNetImage
 import { addEnqueueRequestedCanvasListener } from './listeners/enqueueRequestedCanvas';
 import { addEnqueueRequestedLinear } from './listeners/enqueueRequestedLinear';
 import { addEnqueueRequestedNodes } from './listeners/enqueueRequestedNodes';
+import { addGetOpenAPISchemaListener } from './listeners/getOpenAPISchema';
 import {
   addImageAddedToBoardFulfilledListener,
   addImageAddedToBoardRejectedListener,
@@ -47,7 +48,6 @@ import { addInitialImageSelectedListener } from './listeners/initialImageSelecte
 import { addModelSelectedListener } from './listeners/modelSelected';
 import { addModelsLoadedListener } from './listeners/modelsLoaded';
 import { addDynamicPromptsListener } from './listeners/promptChanged';
-import { addReceivedOpenAPISchemaListener } from './listeners/receivedOpenAPISchema';
 import { addSocketConnectedEventListener as addSocketConnectedListener } from './listeners/socketio/socketConnected';
 import { addSocketDisconnectedEventListener as addSocketDisconnectedListener } from './listeners/socketio/socketDisconnected';
 import { addGeneratorProgressEventListener as addGeneratorProgressListener } from './listeners/socketio/socketGeneratorProgress';
@@ -150,7 +150,7 @@ addImageRemovedFromBoardRejectedListener();
 addBoardIdSelectedListener();
 
 // Node schemas
-addReceivedOpenAPISchemaListener();
+addGetOpenAPISchemaListener();
 
 // Workflows
 addWorkflowLoadRequestedListener();

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/getOpenAPISchema.ts

@@ -3,18 +3,18 @@ import { parseify } from 'common/util/serialize';
 import { nodeTemplatesBuilt } from 'features/nodes/store/nodeTemplatesSlice';
 import { parseSchema } from 'features/nodes/util/schema/parseSchema';
 import { size } from 'lodash-es';
-import { receivedOpenAPISchema } from 'services/api/thunks/schema';
+import { appInfoApi } from 'services/api/endpoints/appInfo';
 
 import { startAppListening } from '..';
 
-export const addReceivedOpenAPISchemaListener = () => {
+export const addGetOpenAPISchemaListener = () => {
   startAppListening({
-    actionCreator: receivedOpenAPISchema.fulfilled,
+    matcher: appInfoApi.endpoints.getOpenAPISchema.matchFulfilled,
     effect: (action, { dispatch, getState }) => {
       const log = logger('system');
       const schemaJSON = action.payload;
 
-      log.debug({ schemaJSON }, 'Received OpenAPI schema');
+      log.debug({ schemaJSON: parseify(schemaJSON) }, 'Received OpenAPI schema');
       const { nodesAllowlist, nodesDenylist } = getState().config;
 
       const nodeTemplates = parseSchema(schemaJSON, nodesAllowlist, nodesDenylist);
@@ -26,10 +26,14 @@ export const addReceivedOpenAPISchemaListener = () => {
   });
 
   startAppListening({
-    actionCreator: receivedOpenAPISchema.rejected,
+    matcher: appInfoApi.endpoints.getOpenAPISchema.matchRejected,
     effect: (action) => {
-      const log = logger('system');
-      log.error({ error: parseify(action.error) }, 'Problem retrieving OpenAPI Schema');
+      // If action.meta.condition === true, the request was canceled/skipped because another request was in flight or
+      // the value was already in the cache. We don't want to log these errors.
+      if (!action.meta.condition) {
+        const log = logger('system');
+        log.error({ error: parseify(action.error) }, 'Problem retrieving OpenAPI Schema');
+      }
     },
   });
 };

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketConnected.ts

@@ -1,10 +1,9 @@
 import { logger } from 'app/logging/logger';
 import { $baseUrl } from 'app/store/nanostores/baseUrl';
-import { isEqual, size } from 'lodash-es';
+import { isEqual } from 'lodash-es';
 import { atom } from 'nanostores';
 import { api } from 'services/api';
 import { queueApi, selectQueueStatus } from 'services/api/endpoints/queue';
-import { receivedOpenAPISchema } from 'services/api/thunks/schema';
 import { socketConnected } from 'services/events/actions';
 
 import { startAppListening } from '../..';
@@ -77,17 +76,4 @@ export const addSocketConnectedEventListener = () => {
       }
     },
   });
-
-  startAppListening({
-    actionCreator: socketConnected,
-    effect: async (action, { dispatch, getState }) => {
-      const { nodeTemplates, config } = getState();
-      // We only want to re-fetch the schema if we don't have any node templates
-      if (!size(nodeTemplates.templates) && !config.disabledTabs.includes('nodes')) {
-        // This request is a createAsyncThunk - resetting API state as in the above listener
-        // will not trigger this request, so we need to manually do it.
-        dispatch(receivedOpenAPISchema());
-      }
-    },
-  });
 };

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/workflowLoadRequested.ts

@@ -6,7 +6,6 @@ import { WorkflowMigrationError, WorkflowVersionError } from 'features/nodes/typ
 import { validateWorkflow } from 'features/nodes/util/workflow/validateWorkflow';
 import { addToast } from 'features/system/store/systemSlice';
 import { makeToast } from 'features/system/util/makeToast';
-import { setActiveTab } from 'features/ui/store/uiSlice';
 import { t } from 'i18next';
 import { z } from 'zod';
 import { fromZodError } from 'zod-validation-error';
@@ -53,7 +52,6 @@ export const addWorkflowLoadRequestedListener = () => {
           });
         }
 
-        dispatch(setActiveTab('nodes'));
         requestAnimationFrame(() => {
           $flow.get()?.fitView();
         });

invokeai/frontend/web/src/common/hooks/useDownloadImage.ts

@@ -1,22 +1,28 @@
+import { useStore } from '@nanostores/react';
 import { useAppToaster } from 'app/components/Toaster';
+import { $authToken } from 'app/store/nanostores/authToken';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { imageDownloaded } from 'features/gallery/store/actions';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useImageUrlToBlob } from './useImageUrlToBlob';
-
 export const useDownloadImage = () => {
   const toaster = useAppToaster();
   const { t } = useTranslation();
-  const imageUrlToBlob = useImageUrlToBlob();
   const dispatch = useAppDispatch();
+  const authToken = useStore($authToken);
 
   const downloadImage = useCallback(
     async (image_url: string, image_name: string) => {
       try {
-        const blob = await imageUrlToBlob(image_url);
-
+        const requestOpts = authToken
+          ? {
+              headers: {
+                Authorization: `Bearer ${authToken}`,
+              },
+            }
+          : {};
+        const blob = await fetch(image_url, requestOpts).then((resp) => resp.blob());
         if (!blob) {
           throw new Error('Unable to create Blob');
         }
@@ -40,7 +46,7 @@ export const useDownloadImage = () => {
         });
       }
     },
-    [t, toaster, imageUrlToBlob, dispatch]
+    [t, toaster, dispatch, authToken]
   );
 
   return { downloadImage };

invokeai/frontend/web/src/features/dnd/components/DndSortable.tsx

@@ -0,0 +1,23 @@
+import type { DragEndEvent } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import type { PropsWithChildren } from 'react';
+import { memo } from 'react';
+
+import { DndContextTypesafe } from './DndContextTypesafe';
+
+type Props = PropsWithChildren & {
+  items: string[];
+  onDragEnd(event: DragEndEvent): void;
+};
+
+const DndSortable = (props: Props) => {
+  return (
+    <DndContextTypesafe onDragEnd={props.onDragEnd}>
+      <SortableContext items={props.items} strategy={verticalListSortingStrategy}>
+        {props.children}
+      </SortableContext>
+    </DndContextTypesafe>
+  );
+};
+
+export default memo(DndSortable);

invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx

@@ -1,7 +1,6 @@
 import 'reactflow/dist/style.css';
 
 import { Flex } from '@invoke-ai/ui-library';
-import { useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import TopPanel from 'features/nodes/components/flow/panels/TopPanel/TopPanel';
 import { SaveWorkflowAsDialog } from 'features/workflowLibrary/components/SaveWorkflowAsDialog/SaveWorkflowAsDialog';
@@ -11,6 +10,7 @@ import type { CSSProperties } from 'react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MdDeviceHub } from 'react-icons/md';
+import { useGetOpenAPISchemaQuery } from 'services/api/endpoints/appInfo';
 
 import AddNodePopover from './flow/AddNodePopover/AddNodePopover';
 import { Flow } from './flow/Flow';
@@ -40,7 +40,7 @@ const exit: AnimationProps['exit'] = {
 };
 
 const NodeEditor = () => {
-  const isReady = useAppSelector((s) => s.nodes.isReady);
+  const { data, isLoading } = useGetOpenAPISchemaQuery();
   const { t } = useTranslation();
   return (
     <Flex
@@ -53,7 +53,7 @@ const NodeEditor = () => {
       justifyContent="center"
     >
       <AnimatePresence>
-        {isReady && (
+        {data && (
           <motion.div initial={initial} animate={animate} exit={exit} style={isReadyMotionStyles}>
             <Flow />
             <AddNodePopover />
@@ -65,7 +65,7 @@ const NodeEditor = () => {
         )}
       </AnimatePresence>
       <AnimatePresence>
-        {!isReady && (
+        {isLoading && (
           <motion.div initial={initial} animate={animate} exit={exit} style={notIsReadyMotionStyles}>
             <Flex
               layerStyle="first"

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldLinearViewToggle.tsx

@@ -1,6 +1,7 @@
 import { IconButton } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useFieldValue } from 'features/nodes/hooks/useFieldValue';
 import {
   selectWorkflowSlice,
   workflowExposedFieldAdded,
@@ -18,7 +19,7 @@ type Props = {
 const FieldLinearViewToggle = ({ nodeId, fieldName }: Props) => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
-
+  const value = useFieldValue(nodeId, fieldName);
   const selectIsExposed = useMemo(
     () =>
       createSelector(selectWorkflowSlice, (workflow) => {
@@ -30,8 +31,8 @@ const FieldLinearViewToggle = ({ nodeId, fieldName }: Props) => {
   const isExposed = useAppSelector(selectIsExposed);
 
   const handleExposeField = useCallback(() => {
-    dispatch(workflowExposedFieldAdded({ nodeId, fieldName }));
-  }, [dispatch, fieldName, nodeId]);
+    dispatch(workflowExposedFieldAdded({ nodeId, fieldName, value }));
+  }, [dispatch, fieldName, nodeId, value]);
 
   const handleUnexposeField = useCallback(() => {
     dispatch(workflowExposedFieldRemoved({ nodeId, fieldName }));

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx

@@ -1,12 +1,15 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import { Flex, Icon, IconButton, Spacer, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import NodeSelectionOverlay from 'common/components/NodeSelectionOverlay';
+import { useFieldOriginalValue } from 'features/nodes/hooks/useFieldOriginalValue';
 import { useMouseOverNode } from 'features/nodes/hooks/useMouseOverNode';
 import { workflowExposedFieldRemoved } from 'features/nodes/store/workflowSlice';
 import { HANDLE_TOOLTIP_OPEN_DELAY } from 'features/nodes/types/constants';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiInfoBold, PiTrashSimpleBold } from 'react-icons/pi';
+import { PiArrowCounterClockwiseBold, PiDotsSixVerticalBold, PiInfoBold, PiTrashSimpleBold } from 'react-icons/pi';
 
 import EditableFieldTitle from './EditableFieldTitle';
 import FieldTooltipContent from './FieldTooltipContent';
@@ -19,46 +22,79 @@ type Props = {
 
 const LinearViewField = ({ nodeId, fieldName }: Props) => {
   const dispatch = useAppDispatch();
+  const { isValueChanged, onReset } = useFieldOriginalValue(nodeId, fieldName);
   const { isMouseOverNode, handleMouseOut, handleMouseOver } = useMouseOverNode(nodeId);
   const { t } = useTranslation();
+
   const handleRemoveField = useCallback(() => {
     dispatch(workflowExposedFieldRemoved({ nodeId, fieldName }));
   }, [dispatch, fieldName, nodeId]);
 
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: `${nodeId}.${fieldName}` });
+
+  const style = {
+    transform: CSS.Translate.toString(transform),
+    transition,
+  };
+
   return (
     <Flex
       onMouseEnter={handleMouseOver}
       onMouseLeave={handleMouseOut}
       layerStyle="second"
+      alignItems="center"
       position="relative"
       borderRadius="base"
       w="full"
       p={4}
-      flexDir="column"
+      paddingLeft={0}
+      ref={setNodeRef}
+      style={style}
     >
-      <Flex>
-        <EditableFieldTitle nodeId={nodeId} fieldName={fieldName} kind="input" />
-        <Spacer />
-        <Tooltip
-          label={<FieldTooltipContent nodeId={nodeId} fieldName={fieldName} kind="input" />}
-          openDelay={HANDLE_TOOLTIP_OPEN_DELAY}
-          placement="top"
-        >
-          <Flex h="full" alignItems="center">
-            <Icon fontSize="sm" color="base.300" as={PiInfoBold} />
-          </Flex>
-        </Tooltip>
-        <IconButton
-          aria-label={t('nodes.removeLinearView')}
-          tooltip={t('nodes.removeLinearView')}
-          variant="ghost"
-          size="sm"
-          onClick={handleRemoveField}
-          icon={<PiTrashSimpleBold />}
-        />
+      <IconButton
+        aria-label={t('nodes.reorderLinearView')}
+        variant="ghost"
+        icon={<PiDotsSixVerticalBold />}
+        {...listeners}
+        {...attributes}
+        mx={2}
+        height="full"
+      />
+      <Flex flexDir="column" w="full">
+        <Flex alignItems="center">
+          <EditableFieldTitle nodeId={nodeId} fieldName={fieldName} kind="input" />
+          <Spacer />
+          {isValueChanged && (
+            <IconButton
+              aria-label={t('nodes.resetToDefaultValue')}
+              tooltip={t('nodes.resetToDefaultValue')}
+              variant="ghost"
+              size="sm"
+              onClick={onReset}
+              icon={<PiArrowCounterClockwiseBold />}
+            />
+          )}
+          <Tooltip
+            label={<FieldTooltipContent nodeId={nodeId} fieldName={fieldName} kind="input" />}
+            openDelay={HANDLE_TOOLTIP_OPEN_DELAY}
+            placement="top"
+          >
+            <Flex h="full" alignItems="center">
+              <Icon fontSize="sm" color="base.300" as={PiInfoBold} />
+            </Flex>
+          </Tooltip>
+          <IconButton
+            aria-label={t('nodes.removeLinearView')}
+            tooltip={t('nodes.removeLinearView')}
+            variant="ghost"
+            size="sm"
+            onClick={handleRemoveField}
+            icon={<PiTrashSimpleBold />}
+          />
+        </Flex>
+        <InputFieldRenderer nodeId={nodeId} fieldName={fieldName} />
+        <NodeSelectionOverlay isSelected={false} isHovered={isMouseOverNode} />
       </Flex>
-      <InputFieldRenderer nodeId={nodeId} fieldName={fieldName} />
-      <NodeSelectionOverlay isSelected={false} isHovered={isMouseOverNode} />
     </Flex>
   );
 };

invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/TopPanel.tsx

@@ -1,25 +1,23 @@
 import { Flex, Spacer } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
 import AddNodeButton from 'features/nodes/components/flow/panels/TopPanel/AddNodeButton';
 import ClearFlowButton from 'features/nodes/components/flow/panels/TopPanel/ClearFlowButton';
 import SaveWorkflowButton from 'features/nodes/components/flow/panels/TopPanel/SaveWorkflowButton';
 import UpdateNodesButton from 'features/nodes/components/flow/panels/TopPanel/UpdateNodesButton';
-import WorkflowName from 'features/nodes/components/flow/panels/TopPanel/WorkflowName';
-import WorkflowLibraryButton from 'features/workflowLibrary/components/WorkflowLibraryButton';
+import { WorkflowName } from 'features/nodes/components/sidePanel/WorkflowName';
 import WorkflowLibraryMenu from 'features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu';
 import { memo } from 'react';
 
 const TopCenterPanel = () => {
+  const name = useAppSelector((s) => s.workflow.name);
   return (
     <Flex gap={2} top={2} left={2} right={2} position="absolute" alignItems="flex-start" pointerEvents="none">
-      <Flex flexDir="column" gap="2">
-        <Flex gap="2">
-          <AddNodeButton />
-          <WorkflowLibraryButton />
-        </Flex>
+      <Flex gap="2">
+        <AddNodeButton />
         <UpdateNodesButton />
       </Flex>
       <Spacer />
-      <WorkflowName />
+      {!!name.length && <WorkflowName />}
       <Spacer />
       <ClearFlowButton />
       <SaveWorkflowButton />

invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/UpdateNodesButton.tsx

@@ -25,6 +25,7 @@ const UpdateNodesButton = () => {
       icon={<PiWarningBold />}
       onClick={handleClickUpdateNodes}
       pointerEvents="auto"
+      colorScheme="warning"
     />
   );
 };

invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/WorkflowName.tsx

@@ -1,15 +0,0 @@
-import { Text } from '@invoke-ai/ui-library';
-import { useAppSelector } from 'app/store/storeHooks';
-import { memo } from 'react';
-
-const TopCenterPanel = () => {
-  const name = useAppSelector((s) => s.workflow.name);
-
-  return (
-    <Text m={2} fontSize="lg" userSelect="none" noOfLines={1} wordBreak="break-all" fontWeight="semibold" opacity={0.8}>
-      {name}
-    </Text>
-  );
-};
-
-export default memo(TopCenterPanel);

invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/ReloadSchemaButton.tsx

@@ -1,17 +1,16 @@
 import { Button } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiArrowsClockwiseBold } from 'react-icons/pi';
-import { receivedOpenAPISchema } from 'services/api/thunks/schema';
+import { useLazyGetOpenAPISchemaQuery } from 'services/api/endpoints/appInfo';
 
 const ReloadNodeTemplatesButton = () => {
   const { t } = useTranslation();
-  const dispatch = useAppDispatch();
+  const [_getOpenAPISchema] = useLazyGetOpenAPISchemaQuery();
 
   const handleReloadSchema = useCallback(() => {
-    dispatch(receivedOpenAPISchema());
-  }, [dispatch]);
+    _getOpenAPISchema();
+  }, [_getOpenAPISchema]);
 
   return (
     <Button

invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/TopRightPanel.tsx

@@ -1,15 +0,0 @@
-import { Flex } from '@invoke-ai/ui-library';
-import WorkflowLibraryButton from 'features/workflowLibrary/components/WorkflowLibraryButton';
-import WorkflowLibraryMenu from 'features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu';
-import { memo } from 'react';
-
-const TopRightPanel = () => {
-  return (
-    <Flex gap={2} position="absolute" top={2} insetInlineEnd={2}>
-      <WorkflowLibraryButton />
-      <WorkflowLibraryMenu />
-    </Flex>
-  );
-};
-
-export default memo(TopRightPanel);

invokeai/frontend/web/src/features/nodes/components/sidePanel/ModeToggle.tsx

@@ -0,0 +1,43 @@
+import { Flex, IconButton } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { workflowModeChanged } from 'features/nodes/store/workflowSlice';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiEyeBold, PiPencilBold } from 'react-icons/pi';
+
+export const ModeToggle = () => {
+  const dispatch = useAppDispatch();
+  const mode = useAppSelector((s) => s.workflow.mode);
+  const { t } = useTranslation();
+
+  const onClickEdit = useCallback(() => {
+    dispatch(workflowModeChanged('edit'));
+  }, [dispatch]);
+
+  const onClickView = useCallback(() => {
+    dispatch(workflowModeChanged('view'));
+  }, [dispatch]);
+
+  return (
+    <Flex justifyContent="flex-end">
+      {mode === 'view' && (
+        <IconButton
+          aria-label={t('nodes.editMode')}
+          tooltip={t('nodes.editMode')}
+          onClick={onClickEdit}
+          icon={<PiPencilBold />}
+          colorScheme="invokeBlue"
+        />
+      )}
+      {mode === 'edit' && (
+        <IconButton
+          aria-label={t('nodes.viewMode')}
+          tooltip={t('nodes.viewMode')}
+          onClick={onClickView}
+          icon={<PiEyeBold />}
+          colorScheme="invokeBlue"
+        />
+      )}
+    </Flex>
+  );
+};

invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx

@@ -1,22 +1,37 @@
 import 'reactflow/dist/style.css';
 
 import { Flex } from '@invoke-ai/ui-library';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectWorkflowSlice } from 'features/nodes/store/workflowSlice';
 import QueueControls from 'features/queue/components/QueueControls';
 import ResizeHandle from 'features/ui/components/tabs/ResizeHandle';
 import { usePanelStorage } from 'features/ui/hooks/usePanelStorage';
+import WorkflowLibraryButton from 'features/workflowLibrary/components/WorkflowLibraryButton';
 import type { CSSProperties } from 'react';
 import { memo, useCallback, useRef } from 'react';
 import type { ImperativePanelGroupHandle } from 'react-resizable-panels';
 import { Panel, PanelGroup } from 'react-resizable-panels';
 
 import InspectorPanel from './inspector/InspectorPanel';
+import { WorkflowViewMode } from './viewMode/WorkflowViewMode';
 import WorkflowPanel from './workflow/WorkflowPanel';
+import { WorkflowMenu } from './WorkflowMenu';
+import { WorkflowName } from './WorkflowName';
 
 const panelGroupStyles: CSSProperties = { height: '100%', width: '100%' };
 
+const selector = createMemoizedSelector(selectWorkflowSlice, (workflow) => {
+  return {
+    mode: workflow.mode,
+  };
+});
+
 const NodeEditorPanelGroup = () => {
+  const { mode } = useAppSelector(selector);
   const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
   const panelStorage = usePanelStorage();
+
   const handleDoubleClickHandle = useCallback(() => {
     if (!panelGroupRef.current) {
       return;
@@ -27,22 +42,33 @@ const NodeEditorPanelGroup = () => {
   return (
     <Flex w="full" h="full" gap={2} flexDir="column">
       <QueueControls />
-      <PanelGroup
-        ref={panelGroupRef}
-        id="workflow-panel-group"
-        autoSaveId="workflow-panel-group"
-        direction="vertical"
-        style={panelGroupStyles}
-        storage={panelStorage}
-      >
-        <Panel id="workflow" collapsible minSize={25}>
-          <WorkflowPanel />
-        </Panel>
-        <ResizeHandle orientation="horizontal" onDoubleClick={handleDoubleClickHandle} />
-        <Panel id="inspector" collapsible minSize={25}>
-          <InspectorPanel />
-        </Panel>
-      </PanelGroup>
+      <Flex w="full" justifyContent="space-between" alignItems="center" gap="4" padding={1}>
+        <Flex justifyContent="space-between" alignItems="center" gap="4">
+          <WorkflowLibraryButton />
+          <WorkflowName />
+        </Flex>
+        <WorkflowMenu />
+      </Flex>
+
+      {mode === 'view' && <WorkflowViewMode />}
+      {mode === 'edit' && (
+        <PanelGroup
+          ref={panelGroupRef}
+          id="workflow-panel-group"
+          autoSaveId="workflow-panel-group"
+          direction="vertical"
+          style={panelGroupStyles}
+          storage={panelStorage}
+        >
+          <Panel id="workflow" collapsible minSize={25}>
+            <WorkflowPanel />
+          </Panel>
+          <ResizeHandle orientation="horizontal" onDoubleClick={handleDoubleClickHandle} />
+          <Panel id="inspector" collapsible minSize={25}>
+            <InspectorPanel />
+          </Panel>
+        </PanelGroup>
+      )}
     </Flex>
   );
 };

invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowMenu.tsx

@@ -0,0 +1,26 @@
+import { Flex } from '@invoke-ai/ui-library';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
+import { useAppSelector } from 'app/store/storeHooks';
+import SaveWorkflowButton from 'features/nodes/components/flow/panels/TopPanel/SaveWorkflowButton';
+import { selectWorkflowSlice } from 'features/nodes/store/workflowSlice';
+import { NewWorkflowButton } from 'features/workflowLibrary/components/NewWorkflowButton';
+
+import { ModeToggle } from './ModeToggle';
+
+const selector = createMemoizedSelector(selectWorkflowSlice, (workflow) => {
+  return {
+    mode: workflow.mode,
+  };
+});
+
+export const WorkflowMenu = () => {
+  const { mode } = useAppSelector(selector);
+
+  return (
+    <Flex gap="2" alignItems="center">
+      {mode === 'edit' && <SaveWorkflowButton />}
+      <NewWorkflowButton />
+      <ModeToggle />
+    </Flex>
+  );
+};

invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowName.tsx

@@ -0,0 +1,37 @@
+import { Flex, Icon, Text, Tooltip } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import { useTranslation } from 'react-i18next';
+import { PiDotOutlineFill } from 'react-icons/pi';
+
+import WorkflowInfoTooltipContent from './viewMode/WorkflowInfoTooltipContent';
+import { WorkflowWarning } from './viewMode/WorkflowWarning';
+
+export const WorkflowName = () => {
+  const { name, isTouched, mode } = useAppSelector((s) => s.workflow);
+  const { t } = useTranslation();
+
+  return (
+    <Flex gap="1" alignItems="center">
+      {name.length ? (
+        <Tooltip label={<WorkflowInfoTooltipContent />} placement="top">
+          <Text fontSize="lg" userSelect="none" noOfLines={1} wordBreak="break-all" fontWeight="semibold">
+            {name}
+          </Text>
+        </Tooltip>
+      ) : (
+        <Text fontSize="lg" fontStyle="italic" fontWeight="semibold">
+          {t('workflows.unnamedWorkflow')}
+        </Text>
+      )}
+
+      {isTouched && mode === 'edit' && (
+        <Tooltip label="Workflow has unsaved changes">
+          <Flex>
+            <Icon as={PiDotOutlineFill} boxSize="20px" sx={{ color: 'invokeYellow.500' }} />
+          </Flex>
+        </Tooltip>
+      )}
+      <WorkflowWarning />
+    </Flex>
+  );
+};

invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowField.tsx

@@ -0,0 +1,53 @@
+import { Flex, FormLabel, Icon, IconButton, Spacer, Tooltip } from '@invoke-ai/ui-library';
+import FieldTooltipContent from 'features/nodes/components/flow/nodes/Invocation/fields/FieldTooltipContent';
+import InputFieldRenderer from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer';
+import { useFieldLabel } from 'features/nodes/hooks/useFieldLabel';
+import { useFieldOriginalValue } from 'features/nodes/hooks/useFieldOriginalValue';
+import { useFieldTemplateTitle } from 'features/nodes/hooks/useFieldTemplateTitle';
+import { HANDLE_TOOLTIP_OPEN_DELAY } from 'features/nodes/types/constants';
+import { t } from 'i18next';
+import { memo } from 'react';
+import { PiArrowCounterClockwiseBold, PiInfoBold } from 'react-icons/pi';
+
+type Props = {
+  nodeId: string;
+  fieldName: string;
+};
+
+const WorkflowField = ({ nodeId, fieldName }: Props) => {
+  const label = useFieldLabel(nodeId, fieldName);
+  const fieldTemplateTitle = useFieldTemplateTitle(nodeId, fieldName, 'input');
+  const { isValueChanged, onReset } = useFieldOriginalValue(nodeId, fieldName);
+
+  return (
+    <Flex layerStyle="second" position="relative" borderRadius="base" w="full" p={4} gap="2" flexDir="column">
+      <Flex alignItems="center">
+        <FormLabel fontSize="sm">{label || fieldTemplateTitle}</FormLabel>
+
+        <Spacer />
+        {isValueChanged && (
+          <IconButton
+            aria-label={t('nodes.resetToDefaultValue')}
+            tooltip={t('nodes.resetToDefaultValue')}
+            variant="ghost"
+            size="sm"
+            onClick={onReset}
+            icon={<PiArrowCounterClockwiseBold />}
+          />
+        )}
+        <Tooltip
+          label={<FieldTooltipContent nodeId={nodeId} fieldName={fieldName} kind="input" />}
+          openDelay={HANDLE_TOOLTIP_OPEN_DELAY}
+          placement="top"
+        >
+          <Flex h="24px" alignItems="center">
+            <Icon fontSize="md" color="base.300" as={PiInfoBold} />
+          </Flex>
+        </Tooltip>
+      </Flex>
+      <InputFieldRenderer nodeId={nodeId} fieldName={fieldName} />
+    </Flex>
+  );
+};
+
+export default memo(WorkflowField);

invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowInfoTooltipContent.tsx

@@ -0,0 +1,68 @@
+import { Box, Flex, Text } from '@invoke-ai/ui-library';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectWorkflowSlice } from 'features/nodes/store/workflowSlice';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const selector = createMemoizedSelector(selectWorkflowSlice, (workflow) => {
+  return {
+    name: workflow.name,
+    description: workflow.description,
+    notes: workflow.notes,
+    author: workflow.author,
+    tags: workflow.tags,
+  };
+});
+
+const WorkflowInfoTooltipContent = () => {
+  const { name, description, notes, author, tags } = useAppSelector(selector);
+  const { t } = useTranslation();
+
+  return (
+    <Flex flexDir="column" gap="2">
+      {!!name.length && (
+        <Box>
+          <Text fontWeight="semibold">{t('nodes.workflowName')}</Text>
+          <Text opacity={0.7} fontStyle="oblique 5deg">
+            {name}
+          </Text>
+        </Box>
+      )}
+      {!!author.length && (
+        <Box>
+          <Text fontWeight="semibold">{t('nodes.workflowAuthor')}</Text>
+          <Text opacity={0.7} fontStyle="oblique 5deg">
+            {author}
+          </Text>
+        </Box>
+      )}
+      {!!tags.length && (
+        <Box>
+          <Text fontWeight="semibold">{t('nodes.workflowTags')}</Text>
+          <Text opacity={0.7} fontStyle="oblique 5deg">
+            {tags}
+          </Text>
+        </Box>
+      )}
+      {!!description.length && (
+        <Box>
+          <Text fontWeight="semibold">{t('nodes.workflowDescription')}</Text>
+          <Text opacity={0.7} fontStyle="oblique 5deg">
+            {description}
+          </Text>
+        </Box>
+      )}
+      {!!notes.length && (
+        <Box>
+          <Text fontWeight="semibold">{t('nodes.workflowNotes')}</Text>
+          <Text opacity={0.7} fontStyle="oblique 5deg">
+            {notes}
+          </Text>
+        </Box>
+      )}
+    </Flex>
+  );
+};
+
+export default memo(WorkflowInfoTooltipContent);

invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowViewMode.tsx

@@ -0,0 +1,39 @@
+import { Box, Flex } from '@invoke-ai/ui-library';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
+import { useAppSelector } from 'app/store/storeHooks';
+import { IAINoContentFallback } from 'common/components/IAIImageFallback';
+import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
+import { selectWorkflowSlice } from 'features/nodes/store/workflowSlice';
+import { t } from 'i18next';
+import { useGetOpenAPISchemaQuery } from 'services/api/endpoints/appInfo';
+
+import WorkflowField from './WorkflowField';
+
+const selector = createMemoizedSelector(selectWorkflowSlice, (workflow) => {
+  return {
+    fields: workflow.exposedFields,
+    name: workflow.name,
+  };
+});
+
+export const WorkflowViewMode = () => {
+  const { isLoading } = useGetOpenAPISchemaQuery();
+  const { fields } = useAppSelector(selector);
+  return (
+    <Box position="relative" w="full" h="full">
+      <ScrollableContent>
+        <Flex position="relative" flexDir="column" alignItems="flex-start" p={1} gap={2} h="full" w="full">
+          {isLoading ? (
+            <IAINoContentFallback label={t('nodes.loadingNodes')} icon={null} />
+          ) : fields.length ? (
+            fields.map(({ nodeId, fieldName }) => (
+              <WorkflowField key={`${nodeId}.${fieldName}`} nodeId={nodeId} fieldName={fieldName} />
+            ))
+          ) : (
+            <IAINoContentFallback label={t('nodes.noFieldsLinearview')} icon={null} />
+          )}
+        </Flex>
+      </ScrollableContent>
+    </Box>
+  );
+};

invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowWarning.tsx

@@ -0,0 +1,21 @@
+import { Flex, Icon, Tooltip } from '@invoke-ai/ui-library';
+import { useGetNodesNeedUpdate } from 'features/nodes/hooks/useGetNodesNeedUpdate';
+import { PiWarningBold } from 'react-icons/pi';
+
+import { WorkflowWarningTooltip } from './WorkflowWarningTooltip';
+
+export const WorkflowWarning = () => {
+  const nodesNeedUpdate = useGetNodesNeedUpdate();
+
+  if (!nodesNeedUpdate) {
+    return <></>;
+  }
+
+  return (
+    <Tooltip label={<WorkflowWarningTooltip />}>
+      <Flex h="full" alignItems="center" gap="2">
+        <Icon color="warning.400" as={PiWarningBold} />
+      </Flex>
+    </Tooltip>
+  );
+};

invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowWarningTooltip.tsx

@@ -0,0 +1,20 @@
+import { Flex, Text } from '@invoke-ai/ui-library';
+import { useTranslation } from 'react-i18next';
+
+export const WorkflowWarningTooltip = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Flex flexDir="column" gap="2">
+      <Flex flexDir="column" gap="2">
+        <Text fontWeight="semibold">{t('toast.loadedWithWarnings')}</Text>
+        <Flex flexDir="column">
+          <Text>{t('common.toResolve')}:</Text>
+          <Text>
+            {t('nodes.editMode')} &gt;&gt; {t('nodes.updateAllNodes')} &gt;&gt; {t('common.save')}
+          </Text>
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};

invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx

@@ -1,31 +1,61 @@
+import { arrayMove } from '@dnd-kit/sortable';
 import { Box, Flex } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { useAppSelector } from 'app/store/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
+import DndSortable from 'features/dnd/components/DndSortable';
+import type { DragEndEvent } from 'features/dnd/types';
 import LinearViewField from 'features/nodes/components/flow/nodes/Invocation/fields/LinearViewField';
-import { selectWorkflowSlice } from 'features/nodes/store/workflowSlice';
-import { memo } from 'react';
+import { selectWorkflowSlice, workflowExposedFieldsReordered } from 'features/nodes/store/workflowSlice';
+import type { FieldIdentifier } from 'features/nodes/types/field';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useGetOpenAPISchemaQuery } from 'services/api/endpoints/appInfo';
 
 const selector = createMemoizedSelector(selectWorkflowSlice, (workflow) => workflow.exposedFields);
 
 const WorkflowLinearTab = () => {
   const fields = useAppSelector(selector);
+  const { isLoading } = useGetOpenAPISchemaQuery();
   const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+      const fieldsStrings = fields.map((field) => `${field.nodeId}.${field.fieldName}`);
+
+      if (over && active.id !== over.id) {
+        const oldIndex = fieldsStrings.indexOf(active.id as string);
+        const newIndex = fieldsStrings.indexOf(over.id as string);
+
+        const newFields = arrayMove(fieldsStrings, oldIndex, newIndex)
+          .map((field) => fields.find((obj) => `${obj.nodeId}.${obj.fieldName}` === field))
+          .filter((field) => field) as FieldIdentifier[];
+
+        dispatch(workflowExposedFieldsReordered(newFields));
+      }
+    },
+    [dispatch, fields]
+  );
 
   return (
     <Box position="relative" w="full" h="full">
       <ScrollableContent>
-        <Flex position="relative" flexDir="column" alignItems="flex-start" p={1} gap={2} h="full" w="full">
-          {fields.length ? (
-            fields.map(({ nodeId, fieldName }) => (
-              <LinearViewField key={`${nodeId}.${fieldName}`} nodeId={nodeId} fieldName={fieldName} />
-            ))
-          ) : (
-            <IAINoContentFallback label={t('nodes.noFieldsLinearview')} icon={null} />
-          )}
-        </Flex>
+        <DndSortable onDragEnd={handleDragEnd} items={fields.map((field) => `${field.nodeId}.${field.fieldName}`)}>
+          <Flex position="relative" flexDir="column" alignItems="flex-start" p={1} gap={2} h="full" w="full">
+            {isLoading ? (
+              <IAINoContentFallback label={t('nodes.loadingNodes')} icon={null} />
+            ) : fields.length ? (
+              fields.map(({ nodeId, fieldName }) => (
+                <LinearViewField key={`${nodeId}.${fieldName}`} nodeId={nodeId} fieldName={fieldName} />
+              ))
+            ) : (
+              <IAINoContentFallback label={t('nodes.noFieldsLinearview')} icon={null} />
+            )}
+          </Flex>
+        </DndSortable>
       </ScrollableContent>
     </Box>
   );

invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx

@@ -12,17 +12,17 @@ const WorkflowPanel = () => {
     <Flex layerStyle="first" flexDir="column" w="full" h="full" borderRadius="base" p={2} gap={2}>
       <Tabs variant="line" display="flex" w="full" h="full" flexDir="column">
         <TabList>
-          <Tab>{t('common.linear')}</Tab>
           <Tab>{t('common.details')}</Tab>
+          <Tab>{t('common.linear')}</Tab>
           <Tab>JSON</Tab>
         </TabList>
 
         <TabPanels>
           <TabPanel>
-            <WorkflowLinearTab />
+            <WorkflowGeneralTab />
           </TabPanel>
           <TabPanel>
-            <WorkflowGeneralTab />
+            <WorkflowLinearTab />
           </TabPanel>
           <TabPanel>
             <WorkflowJSONTab />

invokeai/frontend/web/src/features/nodes/hooks/useFieldOriginalValue.ts

@@ -0,0 +1,28 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useFieldValue } from 'features/nodes/hooks/useFieldValue';
+import { fieldValueReset } from 'features/nodes/store/nodesSlice';
+import { selectWorkflowSlice } from 'features/nodes/store/workflowSlice';
+import { isEqual } from 'lodash-es';
+import { useCallback, useMemo } from 'react';
+
+export const useFieldOriginalValue = (nodeId: string, fieldName: string) => {
+  const dispatch = useAppDispatch();
+  const selectOriginalExposedFieldValues = useMemo(
+    () =>
+      createSelector(
+        selectWorkflowSlice,
+        (workflow) =>
+          workflow.originalExposedFieldValues.find((v) => v.nodeId === nodeId && v.fieldName === fieldName)?.value
+      ),
+    [nodeId, fieldName]
+  );
+  const originalValue = useAppSelector(selectOriginalExposedFieldValues);
+  const value = useFieldValue(nodeId, fieldName);
+  const isValueChanged = useMemo(() => !isEqual(value, originalValue), [value, originalValue]);
+  const onReset = useCallback(() => {
+    dispatch(fieldValueReset({ nodeId, fieldName, value: originalValue }));
+  }, [dispatch, fieldName, nodeId, originalValue]);
+
+  return { originalValue, isValueChanged, onReset };
+};

invokeai/frontend/web/src/features/nodes/hooks/useFieldValue.ts

@@ -0,0 +1,23 @@
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
+import { isInvocationNode } from 'features/nodes/types/invocation';
+import { useMemo } from 'react';
+
+export const useFieldValue = (nodeId: string, fieldName: string) => {
+  const selector = useMemo(
+    () =>
+      createMemoizedSelector(selectNodesSlice, (nodes) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return;
+        }
+        return node?.data.inputs[fieldName]?.value;
+      }),
+    [fieldName, nodeId]
+  );
+
+  const value = useAppSelector(selector);
+
+  return value;
+};

invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts

@@ -2,7 +2,6 @@ import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice, isAnyOf } from '@reduxjs/toolkit';
 import type { PersistConfig, RootState } from 'app/store/store';
 import { workflowLoaded } from 'features/nodes/store/actions';
-import { nodeTemplatesBuilt } from 'features/nodes/store/nodeTemplatesSlice';
 import { SHARED_NODE_PROPERTIES } from 'features/nodes/types/constants';
 import type {
   BoardFieldValue,
@@ -19,6 +18,7 @@ import type {
   MainModelFieldValue,
   SchedulerFieldValue,
   SDXLRefinerModelFieldValue,
+  StatefulFieldValue,
   StringFieldValue,
   T2IAdapterModelFieldValue,
   VAEModelFieldValue,
@@ -37,6 +37,7 @@ import {
   zMainModelFieldValue,
   zSchedulerFieldValue,
   zSDXLRefinerModelFieldValue,
+  zStatefulFieldValue,
   zStringFieldValue,
   zT2IAdapterModelFieldValue,
   zVAEModelFieldValue,
@@ -65,7 +66,6 @@ import {
   SelectionMode,
   updateEdge,
 } from 'reactflow';
-import { receivedOpenAPISchema } from 'services/api/thunks/schema';
 import {
   socketGeneratorProgress,
   socketInvocationComplete,
@@ -92,7 +92,6 @@ export const initialNodesState: NodesState = {
   _version: 1,
   nodes: [],
   edges: [],
-  isReady: false,
   connectionStartParams: null,
   connectionStartFieldType: null,
   connectionMade: false,
@@ -481,6 +480,9 @@ export const nodesSlice = createSlice({
     selectedEdgesChanged: (state, action: PayloadAction<string[]>) => {
       state.selectedEdges = action.payload;
     },
+    fieldValueReset: (state, action: FieldValueAction<StatefulFieldValue>) => {
+      fieldValueReducer(state, action, zStatefulFieldValue);
+    },
     fieldStringValueChanged: (state, action: FieldValueAction<StringFieldValue>) => {
       fieldValueReducer(state, action, zStringFieldValue);
     },
@@ -677,10 +679,6 @@ export const nodesSlice = createSlice({
     },
   },
   extraReducers: (builder) => {
-    builder.addCase(receivedOpenAPISchema.pending, (state) => {
-      state.isReady = false;
-    });
-
     builder.addCase(workflowLoaded, (state, action) => {
       const { nodes, edges } = action.payload;
       state.nodes = applyNodeChanges(
@@ -752,9 +750,6 @@ export const nodesSlice = createSlice({
         });
       }
     });
-    builder.addCase(nodeTemplatesBuilt, (state) => {
-      state.isReady = true;
-    });
   },
 });
 
@@ -770,6 +765,7 @@ export const {
   edgesChanged,
   edgesDeleted,
   edgeUpdated,
+  fieldValueReset,
   fieldBoardValueChanged,
   fieldBooleanValueChanged,
   fieldColorValueChanged,
@@ -844,7 +840,6 @@ export const isAnyNodeOrEdgeMutation = isAnyOf(
   nodeIsOpenChanged,
   nodeLabelChanged,
   nodeNotesChanged,
-  nodesChanged,
   nodesDeleted,
   nodeUseCacheChanged,
   notesNodeValueChanged,
@@ -871,7 +866,6 @@ export const nodesPersistConfig: PersistConfig<NodesState> = {
     'connectionStartFieldType',
     'selectedNodes',
     'selectedEdges',
-    'isReady',
     'nodesToCopy',
     'edgesToCopy',
     'connectionMade',

invokeai/frontend/web/src/features/nodes/store/types.ts

@@ -1,4 +1,4 @@
-import type { FieldType } from 'features/nodes/types/field';
+import type { FieldIdentifier, FieldType, StatefulFieldValue } from 'features/nodes/types/field';
 import type {
   AnyNode,
   InvocationNodeEdge,
@@ -26,7 +26,6 @@ export type NodesState = {
   selectedEdges: string[];
   nodeExecutionStates: Record<string, NodeExecutionState>;
   viewport: Viewport;
-  isReady: boolean;
   nodesToCopy: AnyNode[];
   edgesToCopy: InvocationNodeEdge[];
   isAddNodePopoverOpen: boolean;
@@ -34,9 +33,16 @@ export type NodesState = {
   selectionMode: SelectionMode;
 };
 
+export type WorkflowMode = 'edit' | 'view';
+export type FieldIdentifierWithValue = FieldIdentifier & {
+  value: StatefulFieldValue;
+};
+
 export type WorkflowsState = Omit<WorkflowV2, 'nodes' | 'edges'> & {
   _version: 1;
   isTouched: boolean;
+  mode: WorkflowMode;
+  originalExposedFieldValues: FieldIdentifierWithValue[];
 };
 
 export type NodeTemplatesState = {

invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts

@@ -2,11 +2,16 @@ import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 import type { PersistConfig, RootState } from 'app/store/store';
 import { workflowLoaded } from 'features/nodes/store/actions';
-import { isAnyNodeOrEdgeMutation, nodeEditorReset, nodesDeleted } from 'features/nodes/store/nodesSlice';
-import type { WorkflowsState as WorkflowState } from 'features/nodes/store/types';
+import { isAnyNodeOrEdgeMutation, nodeEditorReset, nodesChanged, nodesDeleted } from 'features/nodes/store/nodesSlice';
+import type {
+  FieldIdentifierWithValue,
+  WorkflowMode,
+  WorkflowsState as WorkflowState,
+} from 'features/nodes/store/types';
 import type { FieldIdentifier } from 'features/nodes/types/field';
+import { isInvocationNode } from 'features/nodes/types/invocation';
 import type { WorkflowCategory, WorkflowV2 } from 'features/nodes/types/workflow';
-import { cloneDeep, isEqual, uniqBy } from 'lodash-es';
+import { cloneDeep, isEqual, omit, uniqBy } from 'lodash-es';
 
 export const blankWorkflow: Omit<WorkflowV2, 'nodes' | 'edges'> = {
   name: '',
@@ -23,7 +28,9 @@ export const blankWorkflow: Omit<WorkflowV2, 'nodes' | 'edges'> = {
 
 export const initialWorkflowState: WorkflowState = {
   _version: 1,
-  isTouched: true,
+  isTouched: false,
+  mode: 'view',
+  originalExposedFieldValues: [],
   ...blankWorkflow,
 };
 
@@ -31,15 +38,29 @@ export const workflowSlice = createSlice({
   name: 'workflow',
   initialState: initialWorkflowState,
   reducers: {
-    workflowExposedFieldAdded: (state, action: PayloadAction<FieldIdentifier>) => {
+    workflowModeChanged: (state, action: PayloadAction<WorkflowMode>) => {
+      state.mode = action.payload;
+    },
+    workflowExposedFieldAdded: (state, action: PayloadAction<FieldIdentifierWithValue>) => {
       state.exposedFields = uniqBy(
-        state.exposedFields.concat(action.payload),
+        state.exposedFields.concat(omit(action.payload, 'value')),
+        (field) => `${field.nodeId}-${field.fieldName}`
+      );
+      state.originalExposedFieldValues = uniqBy(
+        state.originalExposedFieldValues.concat(action.payload),
         (field) => `${field.nodeId}-${field.fieldName}`
       );
       state.isTouched = true;
     },
     workflowExposedFieldRemoved: (state, action: PayloadAction<FieldIdentifier>) => {
       state.exposedFields = state.exposedFields.filter((field) => !isEqual(field, action.payload));
+      state.originalExposedFieldValues = state.originalExposedFieldValues.filter(
+        (field) => !isEqual(omit(field, 'value'), action.payload)
+      );
+      state.isTouched = true;
+    },
+    workflowExposedFieldsReordered: (state, action: PayloadAction<FieldIdentifier[]>) => {
+      state.exposedFields = action.payload;
       state.isTouched = true;
     },
     workflowNameChanged: (state, action: PayloadAction<string>) => {
@@ -78,15 +99,43 @@ export const workflowSlice = createSlice({
     workflowIDChanged: (state, action: PayloadAction<string>) => {
       state.id = action.payload;
     },
-    workflowReset: () => cloneDeep(initialWorkflowState),
     workflowSaved: (state) => {
       state.isTouched = false;
     },
   },
   extraReducers: (builder) => {
     builder.addCase(workflowLoaded, (state, action) => {
-      const { nodes: _nodes, edges: _edges, ...workflowExtra } = action.payload;
-      return { ...initialWorkflowState, ...cloneDeep(workflowExtra) };
+      const { nodes, edges: _edges, ...workflowExtra } = action.payload;
+
+      const originalExposedFieldValues: FieldIdentifierWithValue[] = [];
+
+      workflowExtra.exposedFields.forEach((field) => {
+        const node = nodes.find((n) => n.id === field.nodeId);
+
+        if (!isInvocationNode(node)) {
+          return;
+        }
+
+        const input = node.data.inputs[field.fieldName];
+
+        if (!input) {
+          return;
+        }
+
+        const originalExposedFieldValue = {
+          nodeId: field.nodeId,
+          fieldName: field.fieldName,
+          value: input.value,
+        };
+        originalExposedFieldValues.push(originalExposedFieldValue);
+      });
+
+      return {
+        ...cloneDeep(initialWorkflowState),
+        ...cloneDeep(workflowExtra),
+        originalExposedFieldValues,
+        mode: state.mode,
+      };
     });
 
     builder.addCase(nodesDeleted, (state, action) => {
@@ -97,6 +146,29 @@ export const workflowSlice = createSlice({
 
     builder.addCase(nodeEditorReset, () => cloneDeep(initialWorkflowState));
 
+    builder.addCase(nodesChanged, (state, action) => {
+      // Not all changes to nodes should result in the workflow being marked touched
+      const filteredChanges = action.payload.filter((change) => {
+        // We always want to mark the workflow as touched if a node is added, removed, or reset
+        if (['add', 'remove', 'reset'].includes(change.type)) {
+          return true;
+        }
+
+        // Position changes can change the position and the dragging status of the node - ignore if the change doesn't
+        // affect the position
+        if (change.type === 'position' && (change.position || change.positionAbsolute)) {
+          return true;
+        }
+
+        // This change isn't relevant
+        return false;
+      });
+
+      if (filteredChanges.length > 0) {
+        state.isTouched = true;
+      }
+    });
+
     builder.addMatcher(isAnyNodeOrEdgeMutation, (state) => {
       state.isTouched = true;
     });
@@ -104,8 +176,10 @@ export const workflowSlice = createSlice({
 });
 
 export const {
+  workflowModeChanged,
   workflowExposedFieldAdded,
   workflowExposedFieldRemoved,
+  workflowExposedFieldsReordered,
   workflowNameChanged,
   workflowCategoryChanged,
   workflowDescriptionChanged,
@@ -115,7 +189,6 @@ export const {
   workflowVersionChanged,
   workflowContactChanged,
   workflowIDChanged,
-  workflowReset,
   workflowSaved,
 } = workflowSlice.actions;
 

invokeai/frontend/web/src/features/nodes/util/graph/addHrfToGraph.ts

@@ -23,6 +23,7 @@ import {
   NOISE,
   NOISE_HRF,
   RESIZE_HRF,
+  SEAMLESS,
   VAE_LOADER,
 } from './constants';
 import { setMetadataReceivingNode, upsertMetadata } from './metadata';
@@ -30,7 +31,6 @@ import { setMetadataReceivingNode, upsertMetadata } from './metadata';
 // Copy certain connections from previous DENOISE_LATENTS to new DENOISE_LATENTS_HRF.
 function copyConnectionsToDenoiseLatentsHrf(graph: NonNullableGraph): void {
   const destinationFields = [
-    'vae',
     'control',
     'ip_adapter',
     'metadata',
@@ -107,9 +107,10 @@ export const addHrfToGraph = (state: RootState, graph: NonNullableGraph): void =
   }
   const log = logger('txt2img');
 
-  const { vae } = state.generation;
+  const { vae, seamlessXAxis, seamlessYAxis } = state.generation;
   const { hrfStrength, hrfEnabled, hrfMethod } = state.hrf;
   const isAutoVae = !vae;
+  const isSeamlessEnabled = seamlessXAxis || seamlessYAxis;
   const width = state.generation.width;
   const height = state.generation.height;
   const optimalDimension = selectOptimalDimension(state);
@@ -158,7 +159,7 @@ export const addHrfToGraph = (state: RootState, graph: NonNullableGraph): void =
     },
     {
       source: {
-        node_id: isAutoVae ? MAIN_MODEL_LOADER : VAE_LOADER,
+        node_id: isSeamlessEnabled ? SEAMLESS : isAutoVae ? MAIN_MODEL_LOADER : VAE_LOADER,
         field: 'vae',
       },
       destination: {
@@ -259,7 +260,7 @@ export const addHrfToGraph = (state: RootState, graph: NonNullableGraph): void =
   graph.edges.push(
     {
       source: {
-        node_id: isAutoVae ? MAIN_MODEL_LOADER : VAE_LOADER,
+        node_id: isSeamlessEnabled ? SEAMLESS : isAutoVae ? MAIN_MODEL_LOADER : VAE_LOADER,
         field: 'vae',
       },
       destination: {
@@ -322,7 +323,7 @@ export const addHrfToGraph = (state: RootState, graph: NonNullableGraph): void =
   graph.edges.push(
     {
       source: {
-        node_id: isAutoVae ? MAIN_MODEL_LOADER : VAE_LOADER,
+        node_id: isSeamlessEnabled ? SEAMLESS : isAutoVae ? MAIN_MODEL_LOADER : VAE_LOADER,
         field: 'vae',
       },
       destination: {

invokeai/frontend/web/src/features/nodes/util/graph/addSeamlessToLinearGraph.ts

@@ -14,6 +14,7 @@ import {
   SDXL_IMAGE_TO_IMAGE_GRAPH,
   SDXL_TEXT_TO_IMAGE_GRAPH,
   SEAMLESS,
+  VAE_LOADER,
 } from './constants';
 import { upsertMetadata } from './metadata';
 
@@ -23,7 +24,8 @@ export const addSeamlessToLinearGraph = (
   modelLoaderNodeId: string
 ): void => {
   // Remove Existing UNet Connections
-  const { seamlessXAxis, seamlessYAxis } = state.generation;
+  const { seamlessXAxis, seamlessYAxis, vae } = state.generation;
+  const isAutoVae = !vae;
 
   graph.nodes[SEAMLESS] = {
     id: SEAMLESS,
@@ -32,6 +34,15 @@ export const addSeamlessToLinearGraph = (
     seamless_y: seamlessYAxis,
   } as SeamlessModeInvocation;
 
+  if (!isAutoVae) {
+    graph.nodes[VAE_LOADER] = {
+      type: 'vae_loader',
+      id: VAE_LOADER,
+      is_intermediate: true,
+      vae_model: vae,
+    };
+  }
+
   if (seamlessXAxis) {
     upsertMetadata(graph, {
       seamless_x: seamlessXAxis,
@@ -75,7 +86,7 @@ export const addSeamlessToLinearGraph = (
     },
     {
       source: {
-        node_id: modelLoaderNodeId,
+        node_id: isAutoVae ? modelLoaderNodeId : VAE_LOADER,
         field: 'vae',
       },
       destination: {

invokeai/frontend/web/src/features/nodes/util/graph/addVAEToGraph.ts

@@ -21,6 +21,7 @@ import {
   SDXL_IMAGE_TO_IMAGE_GRAPH,
   SDXL_REFINER_INPAINT_CREATE_MASK,
   SDXL_TEXT_TO_IMAGE_GRAPH,
+  SEAMLESS,
   TEXT_TO_IMAGE_GRAPH,
   VAE_LOADER,
 } from './constants';
@@ -31,15 +32,16 @@ export const addVAEToGraph = (
   graph: NonNullableGraph,
   modelLoaderNodeId: string = MAIN_MODEL_LOADER
 ): void => {
-  const { vae, canvasCoherenceMode } = state.generation;
+  const { vae, canvasCoherenceMode, seamlessXAxis, seamlessYAxis } = state.generation;
   const { boundingBoxScaleMethod } = state.canvas;
   const { refinerModel } = state.sdxl;
 
   const isUsingScaledDimensions = ['auto', 'manual'].includes(boundingBoxScaleMethod);
 
   const isAutoVae = !vae;
+  const isSeamlessEnabled = seamlessXAxis || seamlessYAxis;
 
-  if (!isAutoVae) {
+  if (!isAutoVae && !isSeamlessEnabled) {
     graph.nodes[VAE_LOADER] = {
       type: 'vae_loader',
       id: VAE_LOADER,
@@ -56,7 +58,7 @@ export const addVAEToGraph = (
   ) {
     graph.edges.push({
       source: {
-        node_id: isAutoVae ? modelLoaderNodeId : VAE_LOADER,
+        node_id: isSeamlessEnabled ? SEAMLESS : isAutoVae ? modelLoaderNodeId : VAE_LOADER,
         field: 'vae',
       },
       destination: {
@@ -74,7 +76,7 @@ export const addVAEToGraph = (
   ) {
     graph.edges.push({
       source: {
-        node_id: isAutoVae ? modelLoaderNodeId : VAE_LOADER,
+        node_id: isSeamlessEnabled ? SEAMLESS : isAutoVae ? modelLoaderNodeId : VAE_LOADER,
         field: 'vae',
       },
       destination: {
@@ -92,7 +94,7 @@ export const addVAEToGraph = (
   ) {
     graph.edges.push({
       source: {
-        node_id: isAutoVae ? modelLoaderNodeId : VAE_LOADER,
+        node_id: isSeamlessEnabled ? SEAMLESS : isAutoVae ? modelLoaderNodeId : VAE_LOADER,
         field: 'vae',
       },
       destination: {
@@ -111,7 +113,7 @@ export const addVAEToGraph = (
     graph.edges.push(
       {
         source: {
-          node_id: isAutoVae ? modelLoaderNodeId : VAE_LOADER,
+          node_id: isSeamlessEnabled ? SEAMLESS : isAutoVae ? modelLoaderNodeId : VAE_LOADER,
           field: 'vae',
         },
         destination: {
@@ -121,7 +123,7 @@ export const addVAEToGraph = (
       },
       {
         source: {
-          node_id: isAutoVae ? modelLoaderNodeId : VAE_LOADER,
+          node_id: isSeamlessEnabled ? SEAMLESS : isAutoVae ? modelLoaderNodeId : VAE_LOADER,
           field: 'vae',
         },
         destination: {
@@ -131,7 +133,7 @@ export const addVAEToGraph = (
       },
       {
         source: {
-          node_id: isAutoVae ? modelLoaderNodeId : VAE_LOADER,
+          node_id: isSeamlessEnabled ? SEAMLESS : isAutoVae ? modelLoaderNodeId : VAE_LOADER,
           field: 'vae',
         },
         destination: {
@@ -145,7 +147,7 @@ export const addVAEToGraph = (
     if (canvasCoherenceMode !== 'unmasked') {
       graph.edges.push({
         source: {
-          node_id: isAutoVae ? modelLoaderNodeId : VAE_LOADER,
+          node_id: isSeamlessEnabled ? SEAMLESS : isAutoVae ? modelLoaderNodeId : VAE_LOADER,
           field: 'vae',
         },
         destination: {
@@ -160,7 +162,7 @@ export const addVAEToGraph = (
     if (graph.id === SDXL_CANVAS_INPAINT_GRAPH || graph.id === SDXL_CANVAS_OUTPAINT_GRAPH) {
       graph.edges.push({
         source: {
-          node_id: isAutoVae ? modelLoaderNodeId : VAE_LOADER,
+          node_id: isSeamlessEnabled ? SEAMLESS : isAutoVae ? modelLoaderNodeId : VAE_LOADER,
           field: 'vae',
         },
         destination: {

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx

@@ -101,9 +101,11 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
   const clearStorage = useClearStorage();
 
   const handleOpenSettingsModel = useCallback(() => {
-    refetchIntermediatesCount();
+    if (shouldShowClearIntermediates) {
+      refetchIntermediatesCount();
+    }
     _onSettingsModalOpen();
-  }, [_onSettingsModalOpen, refetchIntermediatesCount]);
+  }, [_onSettingsModalOpen, refetchIntermediatesCount, shouldShowClearIntermediates]);
 
   const handleClickResetWebUI = useCallback(() => {
     clearStorage();

invokeai/frontend/web/src/features/ui/components/tabs/NodesTab.tsx

@@ -1,13 +1,28 @@
+import { Box, Flex } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import CurrentImageDisplay from 'features/gallery/components/CurrentImage/CurrentImageDisplay';
 import NodeEditor from 'features/nodes/components/NodeEditor';
 import { memo } from 'react';
 import { ReactFlowProvider } from 'reactflow';
 
 const NodesTab = () => {
-  return (
-    <ReactFlowProvider>
-      <NodeEditor />
-    </ReactFlowProvider>
-  );
+  const mode = useAppSelector((s) => s.workflow.mode);
+
+  if (mode === 'edit') {
+    return (
+      <ReactFlowProvider>
+        <NodeEditor />
+      </ReactFlowProvider>
+    );
+  } else {
+    return (
+      <Box layerStyle="first" position="relative" w="full" h="full" p={2} borderRadius="base">
+        <Flex w="full" h="full">
+          <CurrentImageDisplay />
+        </Flex>
+      </Box>
+    );
+  }
 };
 
 export default memo(NodesTab);

invokeai/frontend/web/src/features/workflowLibrary/components/NewWorkflowButton.tsx

@@ -0,0 +1,26 @@
+import { IconButton } from '@invoke-ai/ui-library';
+import { NewWorkflowConfirmationAlertDialog } from 'features/workflowLibrary/components/NewWorkflowConfirmationAlertDialog';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiFilePlusBold } from 'react-icons/pi';
+
+export const NewWorkflowButton = memo(() => {
+  const { t } = useTranslation();
+
+  const renderButton = useCallback(
+    (onClick: () => void) => (
+      <IconButton
+        aria-label={t('nodes.newWorkflow')}
+        tooltip={t('nodes.newWorkflow')}
+        icon={<PiFilePlusBold />}
+        onClick={onClick}
+        pointerEvents="auto"
+      />
+    ),
+    [t]
+  );
+
+  return <NewWorkflowConfirmationAlertDialog renderButton={renderButton} />;
+});
+
+NewWorkflowButton.displayName = 'NewWorkflowButton';

invokeai/frontend/web/src/features/workflowLibrary/components/NewWorkflowConfirmationAlertDialog.tsx

@@ -0,0 +1,63 @@
+import { ConfirmationAlertDialog, Flex, Text, useDisclosure } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { nodeEditorReset } from 'features/nodes/store/nodesSlice';
+import { workflowModeChanged } from 'features/nodes/store/workflowSlice';
+import { addToast } from 'features/system/store/systemSlice';
+import { makeToast } from 'features/system/util/makeToast';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type Props = {
+  renderButton: (onClick: () => void) => JSX.Element;
+};
+
+export const NewWorkflowConfirmationAlertDialog = memo((props: Props) => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const isTouched = useAppSelector((s) => s.workflow.isTouched);
+
+  const handleNewWorkflow = useCallback(() => {
+    dispatch(nodeEditorReset());
+    dispatch(workflowModeChanged('edit'));
+
+    dispatch(
+      addToast(
+        makeToast({
+          title: t('workflows.newWorkflowCreated'),
+          status: 'success',
+        })
+      )
+    );
+
+    onClose();
+  }, [dispatch, onClose, t]);
+
+  const onClick = useCallback(() => {
+    if (!isTouched) {
+      handleNewWorkflow();
+      return;
+    }
+    onOpen();
+  }, [handleNewWorkflow, isTouched, onOpen]);
+
+  return (
+    <>
+      {props.renderButton(onClick)}
+
+      <ConfirmationAlertDialog
+        isOpen={isOpen}
+        onClose={onClose}
+        title={t('nodes.newWorkflow')}
+        acceptCallback={handleNewWorkflow}
+      >
+        <Flex flexDir="column" gap={2}>
+          <Text>{t('nodes.newWorkflowDesc')}</Text>
+          <Text variant="subtext">{t('nodes.newWorkflowDesc2')}</Text>
+        </Flex>
+      </ConfirmationAlertDialog>
+    </>
+  );
+});
+
+NewWorkflowConfirmationAlertDialog.displayName = 'NewWorkflowConfirmationAlertDialog';

invokeai/frontend/web/src/features/workflowLibrary/components/UploadWorkflowButton.tsx

@@ -0,0 +1,47 @@
+import { Button } from '@invoke-ai/ui-library';
+import { useWorkflowLibraryModalContext } from 'features/workflowLibrary/context/useWorkflowLibraryModalContext';
+import { useLoadWorkflowFromFile } from 'features/workflowLibrary/hooks/useLoadWorkflowFromFile';
+import { memo, useCallback, useRef } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { useTranslation } from 'react-i18next';
+import { PiUploadSimpleBold } from 'react-icons/pi';
+
+const UploadWorkflowButton = () => {
+  const { t } = useTranslation();
+  const resetRef = useRef<() => void>(null);
+  const { onClose } = useWorkflowLibraryModalContext();
+  const loadWorkflowFromFile = useLoadWorkflowFromFile({ resetRef, onSuccess: onClose });
+
+  const onDropAccepted = useCallback(
+    (files: File[]) => {
+      if (!files[0]) {
+        return;
+      }
+      loadWorkflowFromFile(files[0]);
+    },
+    [loadWorkflowFromFile]
+  );
+
+  const { getInputProps, getRootProps } = useDropzone({
+    accept: { 'application/json': ['.json'] },
+    onDropAccepted,
+    noDrag: true,
+    multiple: false,
+  });
+  return (
+    <>
+      <Button
+        aria-label={t('workflows.uploadWorkflow')}
+        tooltip={t('workflows.uploadWorkflow')}
+        leftIcon={<PiUploadSimpleBold />}
+        {...getRootProps()}
+        pointerEvents="auto"
+      >
+        {t('workflows.uploadWorkflow')}
+      </Button>
+      <input {...getInputProps()} />
+    </>
+  );
+};
+
+export default memo(UploadWorkflowButton);

invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx

@@ -2,7 +2,7 @@ import { IconButton, useDisclosure } from '@invoke-ai/ui-library';
 import { WorkflowLibraryModalContext } from 'features/workflowLibrary/context/WorkflowLibraryModalContext';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiBooksBold } from 'react-icons/pi';
+import { PiFolderOpenBold } from 'react-icons/pi';
 
 import WorkflowLibraryModal from './WorkflowLibraryModal';
 
@@ -15,7 +15,7 @@ const WorkflowLibraryButton = () => {
       <IconButton
         aria-label={t('workflows.workflowLibrary')}
         tooltip={t('workflows.workflowLibrary')}
-        icon={<PiBooksBold />}
+        icon={<PiFolderOpenBold />}
         onClick={disclosure.onOpen}
         pointerEvents="auto"
       />

invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx

@@ -1,5 +1,6 @@
 import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
 import {
+  Box,
   Button,
   ButtonGroup,
   Combobox,
@@ -29,6 +30,8 @@ import type { SQLiteDirection, WorkflowRecordOrderBy } from 'services/api/types'
 import { useDebounce } from 'use-debounce';
 import { z } from 'zod';
 
+import UploadWorkflowButton from './UploadWorkflowButton';
+
 const PER_PAGE = 10;
 
 const zOrderBy = z.enum(['opened_at', 'created_at', 'updated_at', 'name']);
@@ -221,11 +224,16 @@ const WorkflowLibraryList = () => {
         <IAINoContentFallback label={t('workflows.noWorkflows')} />
       )}
       <Divider />
-      {data && (
-        <Flex w="full" justifyContent="space-around">
-          <WorkflowLibraryPagination data={data} page={page} setPage={setPage} />
-        </Flex>
-      )}
+
+      <Flex w="full">
+        <Box flex="1">
+          <UploadWorkflowButton />
+        </Box>
+        <Box flex="1" textAlign="center">
+          {data && <WorkflowLibraryPagination data={data} page={page} setPage={setPage} />}
+        </Box>
+        <Box flex="1"></Box>
+      </Flex>
     </>
   );
 };

invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/NewWorkflowMenuItem.tsx

@@ -1,60 +1,22 @@
-import { ConfirmationAlertDialog, Flex, MenuItem, Text, useDisclosure } from '@invoke-ai/ui-library';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { nodeEditorReset } from 'features/nodes/store/nodesSlice';
-import { addToast } from 'features/system/store/systemSlice';
-import { makeToast } from 'features/system/util/makeToast';
+import { MenuItem } from '@invoke-ai/ui-library';
+import { NewWorkflowConfirmationAlertDialog } from 'features/workflowLibrary/components/NewWorkflowConfirmationAlertDialog';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiFlowArrowBold } from 'react-icons/pi';
+import { PiFilePlusBold } from 'react-icons/pi';
 
-const NewWorkflowMenuItem = () => {
+export const NewWorkflowMenuItem = memo(() => {
   const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const isTouched = useAppSelector((s) => s.workflow.isTouched);
 
-  const handleNewWorkflow = useCallback(() => {
-    dispatch(nodeEditorReset());
-
-    dispatch(
-      addToast(
-        makeToast({
-          title: t('workflows.newWorkflowCreated'),
-          status: 'success',
-        })
-      )
-    );
-
-    onClose();
-  }, [dispatch, onClose, t]);
-
-  const onClick = useCallback(() => {
-    if (!isTouched) {
-      handleNewWorkflow();
-      return;
-    }
-    onOpen();
-  }, [handleNewWorkflow, isTouched, onOpen]);
-
-  return (
-    <>
-      <MenuItem as="button" icon={<PiFlowArrowBold />} onClick={onClick}>
+  const renderButton = useCallback(
+    (onClick: () => void) => (
+      <MenuItem as="button" icon={<PiFilePlusBold />} onClick={onClick}>
         {t('nodes.newWorkflow')}
       </MenuItem>
-
-      <ConfirmationAlertDialog
-        isOpen={isOpen}
-        onClose={onClose}
-        title={t('nodes.newWorkflow')}
-        acceptCallback={handleNewWorkflow}
-      >
-        <Flex flexDir="column" gap={2}>
-          <Text>{t('nodes.newWorkflowDesc')}</Text>
-          <Text variant="subtext">{t('nodes.newWorkflowDesc2')}</Text>
-        </Flex>
-      </ConfirmationAlertDialog>
-    </>
+    ),
+    [t]
   );
-};
 
-export default memo(NewWorkflowMenuItem);
+  return <NewWorkflowConfirmationAlertDialog renderButton={renderButton} />;
+});
+
+NewWorkflowMenuItem.displayName = 'NewWorkflowMenuItem';

invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu.tsx

@@ -8,7 +8,7 @@ import {
   useGlobalMenuClose,
 } from '@invoke-ai/ui-library';
 import DownloadWorkflowMenuItem from 'features/workflowLibrary/components/WorkflowLibraryMenu/DownloadWorkflowMenuItem';
-import NewWorkflowMenuItem from 'features/workflowLibrary/components/WorkflowLibraryMenu/NewWorkflowMenuItem';
+import { NewWorkflowMenuItem } from 'features/workflowLibrary/components/WorkflowLibraryMenu/NewWorkflowMenuItem';
 import SaveWorkflowAsMenuItem from 'features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowAsMenuItem';
 import SaveWorkflowMenuItem from 'features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowMenuItem';
 import SettingsMenuItem from 'features/workflowLibrary/components/WorkflowLibraryMenu/SettingsMenuItem';

invokeai/frontend/web/src/features/workflowLibrary/hooks/useLoadWorkflowFromFile.tsx

@@ -10,11 +10,12 @@ import { useTranslation } from 'react-i18next';
 
 type useLoadWorkflowFromFileOptions = {
   resetRef: RefObject<() => void>;
+  onSuccess?: () => void;
 };
 
 type UseLoadWorkflowFromFile = (options: useLoadWorkflowFromFileOptions) => (file: File | null) => void;
 
-export const useLoadWorkflowFromFile: UseLoadWorkflowFromFile = ({ resetRef }) => {
+export const useLoadWorkflowFromFile: UseLoadWorkflowFromFile = ({ resetRef, onSuccess }) => {
   const dispatch = useAppDispatch();
   const logger = useLogger('nodes');
   const { t } = useTranslation();
@@ -31,6 +32,7 @@ export const useLoadWorkflowFromFile: UseLoadWorkflowFromFile = ({ resetRef }) =
           const parsedJSON = JSON.parse(String(rawJSON));
           dispatch(workflowLoadRequested({ workflow: parsedJSON, asCopy: true }));
           dispatch(workflowLoadedFromFile());
+          onSuccess && onSuccess();
         } catch (e) {
           // There was a problem reading the file
           logger.error(t('nodes.unableToLoadWorkflow'));
@@ -51,7 +53,7 @@ export const useLoadWorkflowFromFile: UseLoadWorkflowFromFile = ({ resetRef }) =
       // Reset the file picker internal state so that the same file can be loaded again
       resetRef.current?.();
     },
-    [dispatch, logger, resetRef, t]
+    [dispatch, logger, resetRef, t, onSuccess]
   );
 
   return loadWorkflowFromFile;

invokeai/frontend/web/src/services/api/endpoints/appInfo.ts

@@ -1,3 +1,5 @@
+import { $openAPISchemaUrl } from 'app/store/nanostores/openAPISchemaUrl';
+import type { OpenAPIV3_1 } from 'openapi-types';
 import type { paths } from 'services/api/schema';
 import type { AppConfig, AppDependencyVersions, AppVersion } from 'services/api/types';
 
@@ -57,6 +59,14 @@ export const appInfoApi = api.injectEndpoints({
       }),
       invalidatesTags: ['InvocationCacheStatus'],
     }),
+    getOpenAPISchema: build.query<OpenAPIV3_1.Document, void>({
+      query: () => {
+        const openAPISchemaUrl = $openAPISchemaUrl.get();
+        const url = openAPISchemaUrl ? openAPISchemaUrl : `${window.location.href.replace(/\/$/, '')}/openapi.json`;
+        return url;
+      },
+      providesTags: ['Schema'],
+    }),
   }),
 });
 
@@ -68,4 +78,6 @@ export const {
   useDisableInvocationCacheMutation,
   useEnableInvocationCacheMutation,
   useGetInvocationCacheStatusQuery,
+  useGetOpenAPISchemaQuery,
+  useLazyGetOpenAPISchemaQuery,
 } = appInfoApi;

invokeai/frontend/web/src/services/api/index.ts

@@ -1,3 +1,4 @@
+import type { FetchBaseQueryArgs } from '@reduxjs/toolkit/dist/query/fetchBaseQuery';
 import type { BaseQueryFn, FetchArgs, FetchBaseQueryError, TagDescription } from '@reduxjs/toolkit/query/react';
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 import { $authToken } from 'app/store/nanostores/authToken';
@@ -35,6 +36,7 @@ export const tagTypes = [
   'SDXLRefinerModel',
   'Workflow',
   'WorkflowsRecent',
+  'Schema',
   // This is invalidated on reconnect. It should be used for queries that have changing data,
   // especially related to the queue and generation.
   'FetchOnReconnect',
@@ -50,10 +52,22 @@ const dynamicBaseQuery: BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryE
   const baseUrl = $baseUrl.get();
   const authToken = $authToken.get();
   const projectId = $projectId.get();
+  const isOpenAPIRequest =
+    (args instanceof Object && args.url.includes('openapi.json')) ||
+    (typeof args === 'string' && args.includes('openapi.json'));
 
-  const rawBaseQuery = fetchBaseQuery({
+  const fetchBaseQueryArgs: FetchBaseQueryArgs = {
     baseUrl: baseUrl ? `${baseUrl}/api/v1` : `${window.location.href.replace(/\/$/, '')}/api/v1`,
-    prepareHeaders: (headers) => {
+  };
+
+  // When fetching the openapi.json, we need to remove circular references from the JSON.
+  if (isOpenAPIRequest) {
+    fetchBaseQueryArgs.jsonReplacer = getCircularReplacer();
+  }
+
+  // openapi.json isn't protected by authorization, but all other requests need to include the auth token and project id.
+  if (!isOpenAPIRequest) {
+    fetchBaseQueryArgs.prepareHeaders = (headers) => {
       if (authToken) {
         headers.set('Authorization', `Bearer ${authToken}`);
       }
@@ -62,8 +76,10 @@ const dynamicBaseQuery: BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryE
       }
 
       return headers;
-    },
-  });
+    };
+  }
+
+  const rawBaseQuery = fetchBaseQuery(fetchBaseQueryArgs);
 
   return rawBaseQuery(args, api, extraOptions);
 };
@@ -74,3 +90,25 @@ export const api = createApi({
   tagTypes,
   endpoints: () => ({}),
 });
+
+function getCircularReplacer() {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const ancestors: Record<string, any>[] = [];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return function (key: string, value: any) {
+    if (typeof value !== 'object' || value === null) {
+      return value;
+    }
+    // `this` is the object that value is contained in, i.e., its direct parent.
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore don't think it's possible to not have TS complain about this...
+    while (ancestors.length > 0 && ancestors.at(-1) !== this) {
+      ancestors.pop();
+    }
+    if (ancestors.includes(value)) {
+      return '[Circular]';
+    }
+    ancestors.push(value);
+    return value;
+  };
+}

invokeai/frontend/web/src/services/api/thunks/schema.ts

@@ -1,40 +0,0 @@
-import { createAsyncThunk } from '@reduxjs/toolkit';
-import { $openAPISchemaUrl } from 'app/store/nanostores/openAPISchemaUrl';
-
-function getCircularReplacer() {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const ancestors: Record<string, any>[] = [];
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return function (key: string, value: any) {
-    if (typeof value !== 'object' || value === null) {
-      return value;
-    }
-    // `this` is the object that value is contained in, i.e., its direct parent.
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore don't think it's possible to not have TS complain about this...
-    while (ancestors.length > 0 && ancestors.at(-1) !== this) {
-      ancestors.pop();
-    }
-    if (ancestors.includes(value)) {
-      return '[Circular]';
-    }
-    ancestors.push(value);
-    return value;
-  };
-}
-
-export const receivedOpenAPISchema = createAsyncThunk('nodes/receivedOpenAPISchema', async (_, { rejectWithValue }) => {
-  try {
-    const openAPISchemaUrl = $openAPISchemaUrl.get();
-
-    const url = openAPISchemaUrl ? openAPISchemaUrl : `${window.location.href.replace(/\/$/, '')}/openapi.json`;
-    const response = await fetch(url);
-    const openAPISchema = await response.json();
-
-    const schemaJSON = JSON.parse(JSON.stringify(openAPISchema, getCircularReplacer()));
-
-    return schemaJSON;
-  } catch (error) {
-    return rejectWithValue({ error });
-  }
-});

invokeai/version/invokeai_version.py

@@ -1 +1 @@
-__version__ = "3.6.3"
+__version__ = "3.7.0"

pyproject.toml

@@ -33,11 +33,11 @@ classifiers = [
 ]
 dependencies = [
   # Core generation dependencies, pinned for reproducible builds.
-  "accelerate==0.26.1",
+  "accelerate==0.27.2",
   "clip_anytorch==2.5.2",       # replacing "clip @ https://github.com/openai/CLIP/archive/eaa22acb90a5876642d0507623e859909230a52d.zip",
   "compel==2.0.2",
   "controlnet-aux==0.0.7",
-  "diffusers[torch]==0.26.2",
+  "diffusers[torch]==0.26.3",
   "invisible-watermark==0.2.0", # needed to install SDXL base and refiner using their repo_ids
   "mediapipe==0.10.7",          # needed for "mediapipeface" controlnet model
   "numpy==1.26.4",              # >1.24.0 is needed to use the 'strict' argument to np.testing.assert_array_equal()