feat: updateable workflow nodes (#5102)

## What type of PR is this? (check all applicable) - [ ] Refactor - [x] Feature - [ ] Bug Fix - [ ] Optimization - [ ] Documentation Update - [ ] Community Node Submission ## Have you discussed this change with the InvokeAI team? - [x] Yes - [ ] No, because: ## Have you updated all relevant documentation? - [ ] Yes - [x] No ## Description [fix(nodes): bump version of nodes post-pydantic v2](5cb3fdb64c) This was not done, despite new metadata fields being added to many nodes. [feat(ui): add update node functionality](3f6e8e9d6b) A workflow's nodes may update itself, if its major version matches the template's major version. If the major versions do not match, the user will need to delete and re-add the node (current behaviour). The update functionality is not automatic (for now). The logic to update the node is pretty simple, but I want to ensure it works well first before doing it automatically when a workflow is loaded. - New `Details` tab on Workflow Inspector, displays node title, type, version, and notes - Button to update the node is displayed on the `Details` tab - Add hook to determine if a node needs an update, may be updated (i.e. major versions match), and the callback to update the node in state - Remove the notes modal from the little info icon - Modularize the node building logic ## Related Tickets & Documents  Probably exist but not sure where. ## QA Instructions, Screenshots, Recordings Load an old workflow with nodes that need to be updated. Click on each node that needs updating and click the update button. Workflow should work.
2024-08-30 20:32:17 +00:00 · 2023-11-16 12:57:01 +11:00 · 2023-11-16 12:57:01 +11:00 · ead1b14ee7
commit ead1b14ee7
parent ae749ada6e 92a9355ddb
26 changed files with 1673 additions and 344 deletions
--- a/invokeai/app/invocations/controlnet_image_processors.py
+++ b/invokeai/app/invocations/controlnet_image_processors.py
@ -96,7 +96,7 @@ class ControlOutput(BaseInvocationOutput):
    control: ControlField = OutputField(description=FieldDescriptions.control)


-@invocation("controlnet", title="ControlNet", tags=["controlnet"], category="controlnet", version="1.0.0")
+@invocation("controlnet", title="ControlNet", tags=["controlnet"], category="controlnet", version="1.1.0")
 class ControlNetInvocation(BaseInvocation):
    """Collects ControlNet info to pass to other nodes"""

@ -173,7 +173,7 @@ class ImageProcessorInvocation(BaseInvocation, WithMetadata, WithWorkflow):
    title="Canny Processor",
    tags=["controlnet", "canny"],
    category="controlnet",
-    version="1.0.0",
+    version="1.1.0",
 )
 class CannyImageProcessorInvocation(ImageProcessorInvocation):
    """Canny edge detection for ControlNet"""
@ -196,7 +196,7 @@ class CannyImageProcessorInvocation(ImageProcessorInvocation):
    title="HED (softedge) Processor",
    tags=["controlnet", "hed", "softedge"],
    category="controlnet",
-    version="1.0.0",
+    version="1.1.0",
 )
 class HedImageProcessorInvocation(ImageProcessorInvocation):
    """Applies HED edge detection to image"""
@ -225,7 +225,7 @@ class HedImageProcessorInvocation(ImageProcessorInvocation):
    title="Lineart Processor",
    tags=["controlnet", "lineart"],
    category="controlnet",
-    version="1.0.0",
+    version="1.1.0",
 )
 class LineartImageProcessorInvocation(ImageProcessorInvocation):
    """Applies line art processing to image"""
@ -247,7 +247,7 @@ class LineartImageProcessorInvocation(ImageProcessorInvocation):
    title="Lineart Anime Processor",
    tags=["controlnet", "lineart", "anime"],
    category="controlnet",
-    version="1.0.0",
+    version="1.1.0",
 )
 class LineartAnimeImageProcessorInvocation(ImageProcessorInvocation):
    """Applies line art anime processing to image"""
@ -270,7 +270,7 @@ class LineartAnimeImageProcessorInvocation(ImageProcessorInvocation):
    title="Openpose Processor",
    tags=["controlnet", "openpose", "pose"],
    category="controlnet",
-    version="1.0.0",
+    version="1.1.0",
 )
 class OpenposeImageProcessorInvocation(ImageProcessorInvocation):
    """Applies Openpose processing to image"""
@ -295,7 +295,7 @@ class OpenposeImageProcessorInvocation(ImageProcessorInvocation):
    title="Midas Depth Processor",
    tags=["controlnet", "midas"],
    category="controlnet",
-    version="1.0.0",
+    version="1.1.0",
 )
 class MidasDepthImageProcessorInvocation(ImageProcessorInvocation):
    """Applies Midas depth processing to image"""
@ -322,7 +322,7 @@ class MidasDepthImageProcessorInvocation(ImageProcessorInvocation):
    title="Normal BAE Processor",
    tags=["controlnet"],
    category="controlnet",
-    version="1.0.0",
+    version="1.1.0",
 )
 class NormalbaeImageProcessorInvocation(ImageProcessorInvocation):
    """Applies NormalBae processing to image"""
@ -339,7 +339,7 @@ class NormalbaeImageProcessorInvocation(ImageProcessorInvocation):


@invocation(
-    "mlsd_image_processor", title="MLSD Processor", tags=["controlnet", "mlsd"], category="controlnet", version="1.0.0"
+    "mlsd_image_processor", title="MLSD Processor", tags=["controlnet", "mlsd"], category="controlnet", version="1.1.0"
 )
 class MlsdImageProcessorInvocation(ImageProcessorInvocation):
    """Applies MLSD processing to image"""
@ -362,7 +362,7 @@ class MlsdImageProcessorInvocation(ImageProcessorInvocation):


@invocation(
-    "pidi_image_processor", title="PIDI Processor", tags=["controlnet", "pidi"], category="controlnet", version="1.0.0"
+    "pidi_image_processor", title="PIDI Processor", tags=["controlnet", "pidi"], category="controlnet", version="1.1.0"
 )
 class PidiImageProcessorInvocation(ImageProcessorInvocation):
    """Applies PIDI processing to image"""
@ -389,7 +389,7 @@ class PidiImageProcessorInvocation(ImageProcessorInvocation):
    title="Content Shuffle Processor",
    tags=["controlnet", "contentshuffle"],
    category="controlnet",
-    version="1.0.0",
+    version="1.1.0",
 )
 class ContentShuffleImageProcessorInvocation(ImageProcessorInvocation):
    """Applies content shuffle processing to image"""
@ -419,7 +419,7 @@ class ContentShuffleImageProcessorInvocation(ImageProcessorInvocation):
    title="Zoe (Depth) Processor",
    tags=["controlnet", "zoe", "depth"],
    category="controlnet",
-    version="1.0.0",
+    version="1.1.0",
 )
 class ZoeDepthImageProcessorInvocation(ImageProcessorInvocation):
    """Applies Zoe depth processing to image"""
@ -435,7 +435,7 @@ class ZoeDepthImageProcessorInvocation(ImageProcessorInvocation):
    title="Mediapipe Face Processor",
    tags=["controlnet", "mediapipe", "face"],
    category="controlnet",
-    version="1.0.0",
+    version="1.1.0",
 )
 class MediapipeFaceProcessorInvocation(ImageProcessorInvocation):
    """Applies mediapipe face processing to image"""
@ -458,7 +458,7 @@ class MediapipeFaceProcessorInvocation(ImageProcessorInvocation):
    title="Leres (Depth) Processor",
    tags=["controlnet", "leres", "depth"],
    category="controlnet",
-    version="1.0.0",
+    version="1.1.0",
 )
 class LeresImageProcessorInvocation(ImageProcessorInvocation):
    """Applies leres processing to image"""
@ -487,7 +487,7 @@ class LeresImageProcessorInvocation(ImageProcessorInvocation):
    title="Tile Resample Processor",
    tags=["controlnet", "tile"],
    category="controlnet",
-    version="1.0.0",
+    version="1.1.0",
 )
 class TileResamplerProcessorInvocation(ImageProcessorInvocation):
    """Tile resampler processor"""
@ -527,7 +527,7 @@ class TileResamplerProcessorInvocation(ImageProcessorInvocation):
    title="Segment Anything Processor",
    tags=["controlnet", "segmentanything"],
    category="controlnet",
-    version="1.0.0",
+    version="1.1.0",
 )
 class SegmentAnythingProcessorInvocation(ImageProcessorInvocation):
    """Applies segment anything processing to image"""
@ -569,7 +569,7 @@ class SamDetectorReproducibleColors(SamDetector):
    title="Color Map Processor",
    tags=["controlnet"],
    category="controlnet",
-    version="1.0.0",
+    version="1.1.0",
 )
 class ColorMapImageProcessorInvocation(ImageProcessorInvocation):
    """Generates a color map from the provided image"""
--- a/invokeai/app/invocations/cv.py
+++ b/invokeai/app/invocations/cv.py
@ -11,7 +11,7 @@ from invokeai.app.services.image_records.image_records_common import ImageCatego
 from .baseinvocation import BaseInvocation, InputField, InvocationContext, WithMetadata, WithWorkflow, invocation


-@invocation("cv_inpaint", title="OpenCV Inpaint", tags=["opencv", "inpaint"], category="inpaint", version="1.0.0")
+@invocation("cv_inpaint", title="OpenCV Inpaint", tags=["opencv", "inpaint"], category="inpaint", version="1.1.0")
 class CvInpaintInvocation(BaseInvocation, WithMetadata, WithWorkflow):
    """Simple inpaint using opencv."""

--- a/invokeai/app/invocations/facetools.py
+++ b/invokeai/app/invocations/facetools.py
@ -438,7 +438,7 @@ def get_faces_list(
    return all_faces


-@invocation("face_off", title="FaceOff", tags=["image", "faceoff", "face", "mask"], category="image", version="1.0.2")
+@invocation("face_off", title="FaceOff", tags=["image", "faceoff", "face", "mask"], category="image", version="1.1.0")
 class FaceOffInvocation(BaseInvocation, WithWorkflow, WithMetadata):
    """Bound, extract, and mask a face from an image using MediaPipe detection"""

@ -532,7 +532,7 @@ class FaceOffInvocation(BaseInvocation, WithWorkflow, WithMetadata):
        return output


-@invocation("face_mask_detection", title="FaceMask", tags=["image", "face", "mask"], category="image", version="1.0.2")
+@invocation("face_mask_detection", title="FaceMask", tags=["image", "face", "mask"], category="image", version="1.1.0")
 class FaceMaskInvocation(BaseInvocation, WithWorkflow, WithMetadata):
    """Face mask creation using mediapipe face detection"""

@ -650,7 +650,7 @@ class FaceMaskInvocation(BaseInvocation, WithWorkflow, WithMetadata):


@invocation(
-    "face_identifier", title="FaceIdentifier", tags=["image", "face", "identifier"], category="image", version="1.0.2"
+    "face_identifier", title="FaceIdentifier", tags=["image", "face", "identifier"], category="image", version="1.1.0"
 )
 class FaceIdentifierInvocation(BaseInvocation, WithWorkflow, WithMetadata):
    """Outputs an image with detected face IDs printed on each face. For use with other FaceTools."""
--- a/invokeai/app/invocations/image.py
+++ b/invokeai/app/invocations/image.py
@ -36,7 +36,7 @@ class ShowImageInvocation(BaseInvocation):
        )


-@invocation("blank_image", title="Blank Image", tags=["image"], category="image", version="1.0.0")
+@invocation("blank_image", title="Blank Image", tags=["image"], category="image", version="1.1.0")
 class BlankImageInvocation(BaseInvocation, WithMetadata, WithWorkflow):
    """Creates a blank image and forwards it to the pipeline"""

@ -66,7 +66,7 @@ class BlankImageInvocation(BaseInvocation, WithMetadata, WithWorkflow):
        )


-@invocation("img_crop", title="Crop Image", tags=["image", "crop"], category="image", version="1.0.0")
+@invocation("img_crop", title="Crop Image", tags=["image", "crop"], category="image", version="1.1.0")
 class ImageCropInvocation(BaseInvocation, WithWorkflow, WithMetadata):
    """Crops an image to a specified box. The box can be outside of the image."""

@ -100,7 +100,7 @@ class ImageCropInvocation(BaseInvocation, WithWorkflow, WithMetadata):
        )


-@invocation("img_paste", title="Paste Image", tags=["image", "paste"], category="image", version="1.0.1")
+@invocation("img_paste", title="Paste Image", tags=["image", "paste"], category="image", version="1.1.0")
 class ImagePasteInvocation(BaseInvocation, WithWorkflow, WithMetadata):
    """Pastes an image into another image."""

@ -154,7 +154,7 @@ class ImagePasteInvocation(BaseInvocation, WithWorkflow, WithMetadata):
        )


-@invocation("tomask", title="Mask from Alpha", tags=["image", "mask"], category="image", version="1.0.0")
+@invocation("tomask", title="Mask from Alpha", tags=["image", "mask"], category="image", version="1.1.0")
 class MaskFromAlphaInvocation(BaseInvocation, WithWorkflow, WithMetadata):
    """Extracts the alpha channel of an image as a mask."""

@ -186,7 +186,7 @@ class MaskFromAlphaInvocation(BaseInvocation, WithWorkflow, WithMetadata):
        )


-@invocation("img_mul", title="Multiply Images", tags=["image", "multiply"], category="image", version="1.0.0")
+@invocation("img_mul", title="Multiply Images", tags=["image", "multiply"], category="image", version="1.1.0")
 class ImageMultiplyInvocation(BaseInvocation, WithWorkflow, WithMetadata):
    """Multiplies two images together using `PIL.ImageChops.multiply()`."""

@ -220,7 +220,7 @@ class ImageMultiplyInvocation(BaseInvocation, WithWorkflow, WithMetadata):
 IMAGE_CHANNELS = Literal["A", "R", "G", "B"]


-@invocation("img_chan", title="Extract Image Channel", tags=["image", "channel"], category="image", version="1.0.0")
+@invocation("img_chan", title="Extract Image Channel", tags=["image", "channel"], category="image", version="1.1.0")
 class ImageChannelInvocation(BaseInvocation, WithWorkflow, WithMetadata):
    """Gets a channel from an image."""

@ -253,7 +253,7 @@ class ImageChannelInvocation(BaseInvocation, WithWorkflow, WithMetadata):
 IMAGE_MODES = Literal["L", "RGB", "RGBA", "CMYK", "YCbCr", "LAB", "HSV", "I", "F"]


-@invocation("img_conv", title="Convert Image Mode", tags=["image", "convert"], category="image", version="1.0.0")
+@invocation("img_conv", title="Convert Image Mode", tags=["image", "convert"], category="image", version="1.1.0")
 class ImageConvertInvocation(BaseInvocation, WithWorkflow, WithMetadata):
    """Converts an image to a different mode."""

@ -283,7 +283,7 @@ class ImageConvertInvocation(BaseInvocation, WithWorkflow, WithMetadata):
        )


-@invocation("img_blur", title="Blur Image", tags=["image", "blur"], category="image", version="1.0.0")
+@invocation("img_blur", title="Blur Image", tags=["image", "blur"], category="image", version="1.1.0")
 class ImageBlurInvocation(BaseInvocation, WithWorkflow, WithMetadata):
    """Blurs an image"""

@ -338,7 +338,7 @@ PIL_RESAMPLING_MAP = {
 }


-@invocation("img_resize", title="Resize Image", tags=["image", "resize"], category="image", version="1.0.0")
+@invocation("img_resize", title="Resize Image", tags=["image", "resize"], category="image", version="1.1.0")
 class ImageResizeInvocation(BaseInvocation, WithMetadata, WithWorkflow):
    """Resizes an image to specific dimensions"""

@ -375,7 +375,7 @@ class ImageResizeInvocation(BaseInvocation, WithMetadata, WithWorkflow):
        )


-@invocation("img_scale", title="Scale Image", tags=["image", "scale"], category="image", version="1.0.0")
+@invocation("img_scale", title="Scale Image", tags=["image", "scale"], category="image", version="1.1.0")
 class ImageScaleInvocation(BaseInvocation, WithMetadata, WithWorkflow):
    """Scales an image by a factor"""

@ -417,7 +417,7 @@ class ImageScaleInvocation(BaseInvocation, WithMetadata, WithWorkflow):
        )


-@invocation("img_lerp", title="Lerp Image", tags=["image", "lerp"], category="image", version="1.0.0")
+@invocation("img_lerp", title="Lerp Image", tags=["image", "lerp"], category="image", version="1.1.0")
 class ImageLerpInvocation(BaseInvocation, WithWorkflow, WithMetadata):
    """Linear interpolation of all pixels of an image"""

@ -451,7 +451,7 @@ class ImageLerpInvocation(BaseInvocation, WithWorkflow, WithMetadata):
        )


-@invocation("img_ilerp", title="Inverse Lerp Image", tags=["image", "ilerp"], category="image", version="1.0.0")
+@invocation("img_ilerp", title="Inverse Lerp Image", tags=["image", "ilerp"], category="image", version="1.1.0")
 class ImageInverseLerpInvocation(BaseInvocation, WithWorkflow, WithMetadata):
    """Inverse linear interpolation of all pixels of an image"""

@ -485,7 +485,7 @@ class ImageInverseLerpInvocation(BaseInvocation, WithWorkflow, WithMetadata):
        )


-@invocation("img_nsfw", title="Blur NSFW Image", tags=["image", "nsfw"], category="image", version="1.0.0")
+@invocation("img_nsfw", title="Blur NSFW Image", tags=["image", "nsfw"], category="image", version="1.1.0")
 class ImageNSFWBlurInvocation(BaseInvocation, WithMetadata, WithWorkflow):
    """Add blur to NSFW-flagged images"""

@ -532,7 +532,7 @@ class ImageNSFWBlurInvocation(BaseInvocation, WithMetadata, WithWorkflow):
    title="Add Invisible Watermark",
    tags=["image", "watermark"],
    category="image",
-    version="1.0.0",
+    version="1.1.0",
 )
 class ImageWatermarkInvocation(BaseInvocation, WithMetadata, WithWorkflow):
    """Add an invisible watermark to an image"""
@ -561,7 +561,7 @@ class ImageWatermarkInvocation(BaseInvocation, WithMetadata, WithWorkflow):
        )


-@invocation("mask_edge", title="Mask Edge", tags=["image", "mask", "inpaint"], category="image", version="1.0.0")
+@invocation("mask_edge", title="Mask Edge", tags=["image", "mask", "inpaint"], category="image", version="1.1.0")
 class MaskEdgeInvocation(BaseInvocation, WithWorkflow, WithMetadata):
    """Applies an edge mask to an image"""

@ -612,7 +612,7 @@ class MaskEdgeInvocation(BaseInvocation, WithWorkflow, WithMetadata):
    title="Combine Masks",
    tags=["image", "mask", "multiply"],
    category="image",
-    version="1.0.0",
+    version="1.1.0",
 )
 class MaskCombineInvocation(BaseInvocation, WithWorkflow, WithMetadata):
    """Combine two masks together by multiplying them using `PIL.ImageChops.multiply()`."""
@ -644,7 +644,7 @@ class MaskCombineInvocation(BaseInvocation, WithWorkflow, WithMetadata):
        )


-@invocation("color_correct", title="Color Correct", tags=["image", "color"], category="image", version="1.0.0")
+@invocation("color_correct", title="Color Correct", tags=["image", "color"], category="image", version="1.1.0")
 class ColorCorrectInvocation(BaseInvocation, WithWorkflow, WithMetadata):
    """
    Shifts the colors of a target image to match the reference image, optionally
@ -755,7 +755,7 @@ class ColorCorrectInvocation(BaseInvocation, WithWorkflow, WithMetadata):
        )


-@invocation("img_hue_adjust", title="Adjust Image Hue", tags=["image", "hue"], category="image", version="1.0.0")
+@invocation("img_hue_adjust", title="Adjust Image Hue", tags=["image", "hue"], category="image", version="1.1.0")
 class ImageHueAdjustmentInvocation(BaseInvocation, WithWorkflow, WithMetadata):
    """Adjusts the Hue of an image."""

@ -858,7 +858,7 @@ CHANNEL_FORMATS = {
        "value",
    ],
    category="image",
-    version="1.0.0",
+    version="1.1.0",
 )
 class ImageChannelOffsetInvocation(BaseInvocation, WithWorkflow, WithMetadata):
    """Add or subtract a value from a specific color channel of an image."""
@ -929,7 +929,7 @@ class ImageChannelOffsetInvocation(BaseInvocation, WithWorkflow, WithMetadata):
        "value",
    ],
    category="image",
-    version="1.0.0",
+    version="1.1.0",
 )
 class ImageChannelMultiplyInvocation(BaseInvocation, WithWorkflow, WithMetadata):
    """Scale a specific color channel of an image."""
@ -988,7 +988,7 @@ class ImageChannelMultiplyInvocation(BaseInvocation, WithWorkflow, WithMetadata)
    title="Save Image",
    tags=["primitives", "image"],
    category="primitives",
-    version="1.0.1",
+    version="1.1.0",
    use_cache=False,
 )
 class SaveImageInvocation(BaseInvocation, WithWorkflow, WithMetadata):
--- a/invokeai/app/invocations/infill.py
+++ b/invokeai/app/invocations/infill.py
@ -118,7 +118,7 @@ def tile_fill_missing(im: Image.Image, tile_size: int = 16, seed: Optional[int]
    return si


-@invocation("infill_rgba", title="Solid Color Infill", tags=["image", "inpaint"], category="inpaint", version="1.0.0")
+@invocation("infill_rgba", title="Solid Color Infill", tags=["image", "inpaint"], category="inpaint", version="1.1.0")
 class InfillColorInvocation(BaseInvocation, WithWorkflow, WithMetadata):
    """Infills transparent areas of an image with a solid color"""

@ -154,7 +154,7 @@ class InfillColorInvocation(BaseInvocation, WithWorkflow, WithMetadata):
        )


-@invocation("infill_tile", title="Tile Infill", tags=["image", "inpaint"], category="inpaint", version="1.0.0")
+@invocation("infill_tile", title="Tile Infill", tags=["image", "inpaint"], category="inpaint", version="1.1.0")
 class InfillTileInvocation(BaseInvocation, WithWorkflow, WithMetadata):
    """Infills transparent areas of an image with tiles of the image"""

@ -192,7 +192,7 @@ class InfillTileInvocation(BaseInvocation, WithWorkflow, WithMetadata):


@invocation(
-    "infill_patchmatch", title="PatchMatch Infill", tags=["image", "inpaint"], category="inpaint", version="1.0.0"
+    "infill_patchmatch", title="PatchMatch Infill", tags=["image", "inpaint"], category="inpaint", version="1.1.0"
 )
 class InfillPatchMatchInvocation(BaseInvocation, WithWorkflow, WithMetadata):
    """Infills transparent areas of an image using the PatchMatch algorithm"""
@ -245,7 +245,7 @@ class InfillPatchMatchInvocation(BaseInvocation, WithWorkflow, WithMetadata):
        )


-@invocation("infill_lama", title="LaMa Infill", tags=["image", "inpaint"], category="inpaint", version="1.0.0")
+@invocation("infill_lama", title="LaMa Infill", tags=["image", "inpaint"], category="inpaint", version="1.1.0")
 class LaMaInfillInvocation(BaseInvocation, WithWorkflow, WithMetadata):
    """Infills transparent areas of an image using the LaMa model"""

@ -274,7 +274,7 @@ class LaMaInfillInvocation(BaseInvocation, WithWorkflow, WithMetadata):
        )


-@invocation("infill_cv2", title="CV2 Infill", tags=["image", "inpaint"], category="inpaint")
+@invocation("infill_cv2", title="CV2 Infill", tags=["image", "inpaint"], category="inpaint", version="1.1.0")
 class CV2InfillInvocation(BaseInvocation, WithWorkflow, WithMetadata):
    """Infills transparent areas of an image using OpenCV Inpainting"""

--- a/invokeai/app/invocations/latent.py
+++ b/invokeai/app/invocations/latent.py
@ -790,7 +790,7 @@ class DenoiseLatentsInvocation(BaseInvocation):
    title="Latents to Image",
    tags=["latents", "image", "vae", "l2i"],
    category="latents",
-    version="1.0.0",
+    version="1.1.0",
 )
 class LatentsToImageInvocation(BaseInvocation, WithMetadata, WithWorkflow):
    """Generates an image from latents."""
--- a/invokeai/app/invocations/onnx.py
+++ b/invokeai/app/invocations/onnx.py
@ -326,7 +326,7 @@ class ONNXTextToLatentsInvocation(BaseInvocation):
    title="ONNX Latents to Image",
    tags=["latents", "image", "vae", "onnx"],
    category="image",
-    version="1.0.0",
+    version="1.1.0",
 )
 class ONNXLatentsToImageInvocation(BaseInvocation, WithMetadata, WithWorkflow):
    """Generates an image from latents."""
--- a/invokeai/app/invocations/upscale.py
+++ b/invokeai/app/invocations/upscale.py
@ -29,7 +29,7 @@ if choose_torch_device() == torch.device("mps"):
    from torch import mps


-@invocation("esrgan", title="Upscale (RealESRGAN)", tags=["esrgan", "upscale"], category="esrgan", version="1.1.0")
+@invocation("esrgan", title="Upscale (RealESRGAN)", tags=["esrgan", "upscale"], category="esrgan", version="1.2.0")
 class ESRGANInvocation(BaseInvocation, WithWorkflow, WithMetadata):
    """Upscales an image using RealESRGAN."""

--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@ -920,7 +920,10 @@
        "unknownTemplate": "Unknown Template",
        "unkownInvocation": "Unknown Invocation type",
        "updateNode": "Update Node",
+        "updateAllNodes": "Update All Nodes",
        "updateApp": "Update App",
+        "unableToUpdateNodes_one": "Unable to update {{count}} node",
+        "unableToUpdateNodes_other": "Unable to update {{count}} nodes",
        "vaeField": "Vae",
        "vaeFieldDescription": "Vae submodel.",
        "vaeModelField": "VAE",
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts
@ -72,6 +72,7 @@ import { addStagingAreaImageSavedListener } from './listeners/stagingAreaImageSa
 import { addTabChangedListener } from './listeners/tabChanged';
 import { addUpscaleRequestedListener } from './listeners/upscaleRequested';
 import { addWorkflowLoadedListener } from './listeners/workflowLoaded';
+import { addUpdateAllNodesRequestedListener } from './listeners/updateAllNodesRequested';

 export const listenerMiddleware = createListenerMiddleware();

@ -178,6 +179,7 @@ addReceivedOpenAPISchemaListener();

 // Workflows
 addWorkflowLoadedListener();
+addUpdateAllNodesRequestedListener();

 // DND
 addImageDroppedListener();
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/updateAllNodesRequested.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/updateAllNodesRequested.ts
@ -0,0 +1,52 @@
+import {
+  getNeedsUpdate,
+  updateNode,
+} from 'features/nodes/hooks/useNodeVersion';
+import { updateAllNodesRequested } from 'features/nodes/store/actions';
+import { nodeReplaced } from 'features/nodes/store/nodesSlice';
+import { startAppListening } from '..';
+import { logger } from 'app/logging/logger';
+import { addToast } from 'features/system/store/systemSlice';
+import { makeToast } from 'features/system/util/makeToast';
+import { t } from 'i18next';
+
+export const addUpdateAllNodesRequestedListener = () => {
+  startAppListening({
+    actionCreator: updateAllNodesRequested,
+    effect: (action, { dispatch, getState }) => {
+      const log = logger('nodes');
+      const nodes = getState().nodes.nodes;
+      const templates = getState().nodes.nodeTemplates;
+
+      let unableToUpdateCount = 0;
+
+      nodes.forEach((node) => {
+        const template = templates[node.data.type];
+        const needsUpdate = getNeedsUpdate(node, template);
+        const updatedNode = updateNode(node, template);
+        if (!updatedNode) {
+          if (needsUpdate) {
+            unableToUpdateCount++;
+          }
+          return;
+        }
+        dispatch(nodeReplaced({ nodeId: updatedNode.id, node: updatedNode }));
+      });
+
+      if (unableToUpdateCount) {
+        log.warn(
+          `Unable to update ${unableToUpdateCount} nodes. Please report this issue.`
+        );
+        dispatch(
+          addToast(
+            makeToast({
+              title: t('nodes.unableToUpdateNodes', {
+                count: unableToUpdateCount,
+              }),
+            })
+          )
+        );
+      }
+    },
+  });
+};
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeHeader.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeHeader.tsx
@ -3,7 +3,7 @@ import { memo } from 'react';
 import NodeCollapseButton from '../common/NodeCollapseButton';
 import NodeTitle from '../common/NodeTitle';
 import InvocationNodeCollapsedHandles from './InvocationNodeCollapsedHandles';
-import InvocationNodeNotes from './InvocationNodeNotes';
+import InvocationNodeInfoIcon from './InvocationNodeInfoIcon';
 import InvocationNodeStatusIndicator from './InvocationNodeStatusIndicator';

 type Props = {
@ -34,7 +34,7 @@ const InvocationNodeHeader = ({ nodeId, isOpen }: Props) => {
      <NodeTitle nodeId={nodeId} />
      <Flex alignItems="center">
        <InvocationNodeStatusIndicator nodeId={nodeId} />
-        <InvocationNodeNotes nodeId={nodeId} />
+        <InvocationNodeInfoIcon nodeId={nodeId} />
      </Flex>
      {!isOpen && <InvocationNodeCollapsedHandles nodeId={nodeId} />}
    </Flex>
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx
@ -1,85 +1,39 @@
-import {
-  Flex,
-  Icon,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Text,
-  Tooltip,
-  useDisclosure,
-} from '@chakra-ui/react';
+import { Flex, Icon, Text, Tooltip } from '@chakra-ui/react';
 import { compare } from 'compare-versions';
 import { useNodeData } from 'features/nodes/hooks/useNodeData';
-import { useNodeLabel } from 'features/nodes/hooks/useNodeLabel';
 import { useNodeTemplate } from 'features/nodes/hooks/useNodeTemplate';
-import { useNodeTemplateTitle } from 'features/nodes/hooks/useNodeTemplateTitle';
+import { useNodeVersion } from 'features/nodes/hooks/useNodeVersion';
 import { isInvocationNodeData } from 'features/nodes/types/types';
 import { memo, useMemo } from 'react';
-import { FaInfoCircle } from 'react-icons/fa';
-import NotesTextarea from './NotesTextarea';
-import { useDoNodeVersionsMatch } from 'features/nodes/hooks/useDoNodeVersionsMatch';
 import { useTranslation } from 'react-i18next';
+import { FaInfoCircle } from 'react-icons/fa';

 interface Props {
  nodeId: string;
 }

-const InvocationNodeNotes = ({ nodeId }: Props) => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const label = useNodeLabel(nodeId);
-  const title = useNodeTemplateTitle(nodeId);
-  const doVersionsMatch = useDoNodeVersionsMatch(nodeId);
-  const { t } = useTranslation();
+const InvocationNodeInfoIcon = ({ nodeId }: Props) => {
+  const { needsUpdate } = useNodeVersion(nodeId);

  return (
-    <>
-      <Tooltip
-        label={<TooltipContent nodeId={nodeId} />}
-        placement="top"
-        shouldWrapChildren
-      >
-        <Flex
-          className="nodrag"
-          onClick={onOpen}
-          sx={{
-            alignItems: 'center',
-            justifyContent: 'center',
-            w: 8,
-            h: 8,
-            cursor: 'pointer',
-          }}
-        >
-          <Icon
-            as={FaInfoCircle}
-            sx={{
-              boxSize: 4,
-              w: 8,
-              color: doVersionsMatch ? 'base.400' : 'error.400',
-            }}
-          />
-        </Flex>
-      </Tooltip>
-
-      <Modal isOpen={isOpen} onClose={onClose} isCentered>
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>{label || title || t('nodes.unknownNode')}</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody>
-            <NotesTextarea nodeId={nodeId} />
-          </ModalBody>
-          <ModalFooter />
-        </ModalContent>
-      </Modal>
-    </>
+    <Tooltip
+      label={<TooltipContent nodeId={nodeId} />}
+      placement="top"
+      shouldWrapChildren
+    >
+      <Icon
+        as={FaInfoCircle}
+        sx={{
+          boxSize: 4,
+          w: 8,
+          color: needsUpdate ? 'error.400' : 'base.400',
+        }}
+      />
+    </Tooltip>
  );
 };

-export default memo(InvocationNodeNotes);
+export default memo(InvocationNodeInfoIcon);

 const TooltipContent = memo(({ nodeId }: { nodeId: string }) => {
  const data = useNodeData(nodeId);
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopLeftPanel/TopLeftPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopLeftPanel/TopLeftPanel.tsx
@ -3,15 +3,22 @@ import { useAppDispatch } from 'app/store/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { addNodePopoverOpened } from 'features/nodes/store/nodesSlice';
 import { memo, useCallback } from 'react';
-import { FaPlus } from 'react-icons/fa';
+import { FaPlus, FaSync } from 'react-icons/fa';
 import { useTranslation } from 'react-i18next';
+import IAIButton from 'common/components/IAIButton';
+import { useGetNodesNeedUpdate } from 'features/nodes/hooks/useGetNodesNeedUpdate';
+import { updateAllNodesRequested } from 'features/nodes/store/actions';

 const TopLeftPanel = () => {
  const dispatch = useAppDispatch();
  const { t } = useTranslation();
+  const nodesNeedUpdate = useGetNodesNeedUpdate();
  const handleOpenAddNodePopover = useCallback(() => {
    dispatch(addNodePopoverOpened());
  }, [dispatch]);
+  const handleClickUpdateNodes = useCallback(() => {
+    dispatch(updateAllNodesRequested());
+  }, [dispatch]);

  return (
    <Flex sx={{ gap: 2, position: 'absolute', top: 2, insetInlineStart: 2 }}>
@ -21,6 +28,11 @@ const TopLeftPanel = () => {
        icon={<FaPlus />}
        onClick={handleOpenAddNodePopover}
      />
+      {nodesNeedUpdate && (
+        <IAIButton leftIcon={<FaSync />} onClick={handleClickUpdateNodes}>
+          {t('nodes.updateAllNodes')}
+        </IAIButton>
+      )}
    </Flex>
  );
 };
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx
@ -0,0 +1,125 @@
+import {
+  Box,
+  Flex,
+  FormControl,
+  FormLabel,
+  HStack,
+  Text,
+} from '@chakra-ui/react';
+import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
+import { useAppSelector } from 'app/store/storeHooks';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAIIconButton from 'common/components/IAIIconButton';
+import { IAINoContentFallback } from 'common/components/IAIImageFallback';
+import { useNodeVersion } from 'features/nodes/hooks/useNodeVersion';
+import {
+  InvocationNodeData,
+  InvocationTemplate,
+  isInvocationNode,
+} from 'features/nodes/types/types';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaSync } from 'react-icons/fa';
+import { Node } from 'reactflow';
+import NotesTextarea from '../../flow/nodes/Invocation/NotesTextarea';
+import ScrollableContent from '../ScrollableContent';
+import EditableNodeTitle from './details/EditableNodeTitle';
+
+const selector = createSelector(
+  stateSelector,
+  ({ nodes }) => {
+    const lastSelectedNodeId =
+      nodes.selectedNodes[nodes.selectedNodes.length - 1];
+
+    const lastSelectedNode = nodes.nodes.find(
+      (node) => node.id === lastSelectedNodeId
+    );
+
+    const lastSelectedNodeTemplate = lastSelectedNode
+      ? nodes.nodeTemplates[lastSelectedNode.data.type]
+      : undefined;
+
+    return {
+      node: lastSelectedNode,
+      template: lastSelectedNodeTemplate,
+    };
+  },
+  defaultSelectorOptions
+);
+
+const InspectorDetailsTab = () => {
+  const { node, template } = useAppSelector(selector);
+  const { t } = useTranslation();
+
+  if (!template || !isInvocationNode(node)) {
+    return (
+      <IAINoContentFallback label={t('nodes.noNodeSelected')} icon={null} />
+    );
+  }
+
+  return <Content node={node} template={template} />;
+};
+
+export default memo(InspectorDetailsTab);
+
+const Content = (props: {
+  node: Node<InvocationNodeData>;
+  template: InvocationTemplate;
+}) => {
+  const { t } = useTranslation();
+  const { needsUpdate, updateNode } = useNodeVersion(props.node.id);
+  return (
+    <Box
+      sx={{
+        position: 'relative',
+        w: 'full',
+        h: 'full',
+      }}
+    >
+      <ScrollableContent>
+        <Flex
+          sx={{
+            flexDir: 'column',
+            position: 'relative',
+            p: 1,
+            gap: 2,
+            w: 'full',
+          }}
+        >
+          <EditableNodeTitle nodeId={props.node.data.id} />
+          <HStack>
+            <FormControl>
+              <FormLabel>Node Type</FormLabel>
+              <Text fontSize="sm" fontWeight={600}>
+                {props.template.title}
+              </Text>
+            </FormControl>
+            <Flex
+              flexDir="row"
+              alignItems="center"
+              justifyContent="space-between"
+              w="full"
+            >
+              <FormControl isInvalid={needsUpdate}>
+                <FormLabel>Node Version</FormLabel>
+                <Text fontSize="sm" fontWeight={600}>
+                  {props.node.data.version}
+                </Text>
+              </FormControl>
+              {needsUpdate && (
+                <IAIIconButton
+                  aria-label={t('nodes.updateNode')}
+                  tooltip={t('nodes.updateNode')}
+                  icon={<FaSync />}
+                  onClick={updateNode}
+                />
+              )}
+            </Flex>
+          </HStack>
+          <NotesTextarea nodeId={props.node.data.id} />
+        </Flex>
+      </ScrollableContent>
+    </Box>
+  );
+};
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx
@ -10,7 +10,7 @@ import { memo } from 'react';
 import InspectorDataTab from './InspectorDataTab';
 import InspectorOutputsTab from './InspectorOutputsTab';
 import InspectorTemplateTab from './InspectorTemplateTab';
-// import InspectorDetailsTab from './InspectorDetailsTab';
+import InspectorDetailsTab from './InspectorDetailsTab';

 const InspectorPanel = () => {
  return (
@ -30,16 +30,16 @@ const InspectorPanel = () => {
        sx={{ display: 'flex', flexDir: 'column', w: 'full', h: 'full' }}
      >
        <TabList>
-          {/* <Tab>Details</Tab> */}
+          <Tab>Details</Tab>
          <Tab>Outputs</Tab>
          <Tab>Data</Tab>
          <Tab>Template</Tab>
        </TabList>

        <TabPanels>
-          {/* <TabPanel>
+          <TabPanel>
            <InspectorDetailsTab />
-          </TabPanel> */}
+          </TabPanel>
          <TabPanel>
            <InspectorOutputsTab />
          </TabPanel>
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/details/EditableNodeTitle.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/details/EditableNodeTitle.tsx
@ -0,0 +1,74 @@
+import {
+  Editable,
+  EditableInput,
+  EditablePreview,
+  Flex,
+} from '@chakra-ui/react';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { useNodeLabel } from 'features/nodes/hooks/useNodeLabel';
+import { useNodeTemplateTitle } from 'features/nodes/hooks/useNodeTemplateTitle';
+import { nodeLabelChanged } from 'features/nodes/store/nodesSlice';
+import { memo, useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type Props = {
+  nodeId: string;
+  title?: string;
+};
+
+const EditableNodeTitle = ({ nodeId, title }: Props) => {
+  const dispatch = useAppDispatch();
+  const label = useNodeLabel(nodeId);
+  const templateTitle = useNodeTemplateTitle(nodeId);
+  const { t } = useTranslation();
+
+  const [localTitle, setLocalTitle] = useState('');
+  const handleSubmit = useCallback(
+    async (newTitle: string) => {
+      dispatch(nodeLabelChanged({ nodeId, label: newTitle }));
+      setLocalTitle(
+        label || title || templateTitle || t('nodes.problemSettingTitle')
+      );
+    },
+    [dispatch, nodeId, title, templateTitle, label, t]
+  );
+
+  const handleChange = useCallback((newTitle: string) => {
+    setLocalTitle(newTitle);
+  }, []);
+
+  useEffect(() => {
+    // Another component may change the title; sync local title with global state
+    setLocalTitle(
+      label || title || templateTitle || t('nodes.problemSettingTitle')
+    );
+  }, [label, templateTitle, title, t]);
+
+  return (
+    <Flex
+      sx={{
+        w: 'full',
+        h: 'full',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Editable
+        as={Flex}
+        value={localTitle}
+        onChange={handleChange}
+        onSubmit={handleSubmit}
+        w="full"
+        fontWeight={600}
+      >
+        <EditablePreview noOfLines={1} />
+        <EditableInput
+          className="nodrag"
+          _focusVisible={{ boxShadow: 'none' }}
+        />
+      </Editable>
+    </Flex>
+  );
+};
+
+export default memo(EditableNodeTitle);
--- a/invokeai/frontend/web/src/features/nodes/hooks/useBuildNodeData.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useBuildNodeData.ts
@ -1,19 +1,10 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { RootState } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { reduce } from 'lodash-es';
 import { useCallback } from 'react';
 import { Node, useReactFlow } from 'reactflow';
 import { AnyInvocationType } from 'services/events/types';
-import { v4 as uuidv4 } from 'uuid';
-import {
-  CurrentImageNodeData,
-  InputFieldValue,
-  InvocationNodeData,
-  NotesNodeData,
-  OutputFieldValue,
-} from '../types/types';
-import { buildInputFieldValue } from '../util/fieldValueBuilders';
+import { buildNodeData } from '../store/util/buildNodeData';
 import { DRAG_HANDLE_CLASSNAME, NODE_WIDTH } from '../types/constants';

 const templatesSelector = createSelector(
@ -26,14 +17,12 @@ export const SHARED_NODE_PROPERTIES: Partial<Node> = {
 };

 export const useBuildNodeData = () => {
-  const invocationTemplates = useAppSelector(templatesSelector);
+  const nodeTemplates = useAppSelector(templatesSelector);

  const flow = useReactFlow();

  return useCallback(
    (type: AnyInvocationType | 'current_image' | 'notes') => {
-      const nodeId = uuidv4();
-
      let _x = window.innerWidth / 2;
      let _y = window.innerHeight / 2;

@ -47,111 +36,15 @@ export const useBuildNodeData = () => {
        _y = rect.height / 2 - NODE_WIDTH / 2;
      }

-      const { x, y } = flow.project({
+      const position = flow.project({
        x: _x,
        y: _y,
      });

-      if (type === 'current_image') {
-        const node: Node<CurrentImageNodeData> = {
-          ...SHARED_NODE_PROPERTIES,
-          id: nodeId,
-          type: 'current_image',
-          position: { x: x, y: y },
-          data: {
-            id: nodeId,
-            type: 'current_image',
-            isOpen: true,
-            label: 'Current Image',
-          },
-        };
+      const template = nodeTemplates[type];

-        return node;
-      }
-
-      if (type === 'notes') {
-        const node: Node<NotesNodeData> = {
-          ...SHARED_NODE_PROPERTIES,
-          id: nodeId,
-          type: 'notes',
-          position: { x: x, y: y },
-          data: {
-            id: nodeId,
-            isOpen: true,
-            label: 'Notes',
-            notes: '',
-            type: 'notes',
-          },
-        };
-
-        return node;
-      }
-
-      const template = invocationTemplates[type];
-
-      if (template === undefined) {
-        console.error(`Unable to find template ${type}.`);
-        return;
-      }
-
-      const inputs = reduce(
-        template.inputs,
-        (inputsAccumulator, inputTemplate, inputName) => {
-          const fieldId = uuidv4();
-
-          const inputFieldValue: InputFieldValue = buildInputFieldValue(
-            fieldId,
-            inputTemplate
-          );
-
-          inputsAccumulator[inputName] = inputFieldValue;
-
-          return inputsAccumulator;
-        },
-        {} as Record<string, InputFieldValue>
-      );
-
-      const outputs = reduce(
-        template.outputs,
-        (outputsAccumulator, outputTemplate, outputName) => {
-          const fieldId = uuidv4();
-
-          const outputFieldValue: OutputFieldValue = {
-            id: fieldId,
-            name: outputName,
-            type: outputTemplate.type,
-            fieldKind: 'output',
-          };
-
-          outputsAccumulator[outputName] = outputFieldValue;
-
-          return outputsAccumulator;
-        },
-        {} as Record<string, OutputFieldValue>
-      );
-
-      const invocation: Node<InvocationNodeData> = {
-        ...SHARED_NODE_PROPERTIES,
-        id: nodeId,
-        type: 'invocation',
-        position: { x: x, y: y },
-        data: {
-          id: nodeId,
-          type,
-          version: template.version,
-          label: '',
-          notes: '',
-          isOpen: true,
-          embedWorkflow: false,
-          isIntermediate: type === 'save_image' ? false : true,
-          inputs,
-          outputs,
-          useCache: template.useCache,
-        },
-      };
-
-      return invocation;
+      return buildNodeData(type, position, template);
    },
-    [invocationTemplates, flow]
+    [nodeTemplates, flow]
  );
 };
--- a/invokeai/frontend/web/src/features/nodes/hooks/useGetNodesNeedUpdate.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useGetNodesNeedUpdate.ts
@ -0,0 +1,25 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
+import { useAppSelector } from 'app/store/storeHooks';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import { getNeedsUpdate } from './useNodeVersion';
+
+const selector = createSelector(
+  stateSelector,
+  (state) => {
+    const nodes = state.nodes.nodes;
+    const templates = state.nodes.nodeTemplates;
+
+    const needsUpdate = nodes.some((node) => {
+      const template = templates[node.data.type];
+      return getNeedsUpdate(node, template);
+    });
+    return needsUpdate;
+  },
+  defaultSelectorOptions
+);
+
+export const useGetNodesNeedUpdate = () => {
+  const getNeedsUpdate = useAppSelector(selector);
+  return getNeedsUpdate;
+};
--- a/invokeai/frontend/web/src/features/nodes/hooks/useNodeTemplateByType.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useNodeTemplateByType.ts
@ -0,0 +1,27 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
+import { useAppSelector } from 'app/store/storeHooks';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import { useMemo } from 'react';
+import { AnyInvocationType } from 'services/events/types';
+
+export const useNodeTemplateByType = (
+  type: AnyInvocationType | 'current_image' | 'notes'
+) => {
+  const selector = useMemo(
+    () =>
+      createSelector(
+        stateSelector,
+        ({ nodes }) => {
+          const nodeTemplate = nodes.nodeTemplates[type];
+          return nodeTemplate;
+        },
+        defaultSelectorOptions
+      ),
+    [type]
+  );
+
+  const nodeTemplate = useAppSelector(selector);
+
+  return nodeTemplate;
+};
--- a/invokeai/frontend/web/src/features/nodes/hooks/useNodeVersion.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useNodeVersion.ts
@ -0,0 +1,119 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import { satisfies } from 'compare-versions';
+import { cloneDeep, defaultsDeep } from 'lodash-es';
+import { useCallback, useMemo } from 'react';
+import { Node } from 'reactflow';
+import { AnyInvocationType } from 'services/events/types';
+import { nodeReplaced } from '../store/nodesSlice';
+import { buildNodeData } from '../store/util/buildNodeData';
+import {
+  InvocationNodeData,
+  InvocationTemplate,
+  NodeData,
+  isInvocationNode,
+  zParsedSemver,
+} from '../types/types';
+import { useAppToaster } from 'app/components/Toaster';
+import { useTranslation } from 'react-i18next';
+
+export const getNeedsUpdate = (
+  node?: Node<NodeData>,
+  template?: InvocationTemplate
+) => {
+  if (!isInvocationNode(node) || !template) {
+    return false;
+  }
+  return node.data.version !== template.version;
+};
+
+export const getMayUpdateNode = (
+  node?: Node<NodeData>,
+  template?: InvocationTemplate
+) => {
+  const needsUpdate = getNeedsUpdate(node, template);
+  if (
+    !needsUpdate ||
+    !isInvocationNode(node) ||
+    !template ||
+    !node.data.version
+  ) {
+    return false;
+  }
+  const templateMajor = zParsedSemver.parse(template.version).major;
+
+  return satisfies(node.data.version, `^${templateMajor}`);
+};
+
+export const updateNode = (
+  node?: Node<NodeData>,
+  template?: InvocationTemplate
+) => {
+  const mayUpdate = getMayUpdateNode(node, template);
+  if (
+    !mayUpdate ||
+    !isInvocationNode(node) ||
+    !template ||
+    !node.data.version
+  ) {
+    return;
+  }
+
+  const defaults = buildNodeData(
+    node.data.type as AnyInvocationType,
+    node.position,
+    template
+  ) as Node<InvocationNodeData>;
+
+  const clone = cloneDeep(node);
+  clone.data.version = template.version;
+  defaultsDeep(clone, defaults);
+  return clone;
+};
+
+export const useNodeVersion = (nodeId: string) => {
+  const dispatch = useAppDispatch();
+  const toast = useAppToaster();
+  const { t } = useTranslation();
+  const selector = useMemo(
+    () =>
+      createSelector(
+        stateSelector,
+        ({ nodes }) => {
+          const node = nodes.nodes.find((node) => node.id === nodeId);
+          const nodeTemplate = nodes.nodeTemplates[node?.data.type ?? ''];
+          return { node, nodeTemplate };
+        },
+        defaultSelectorOptions
+      ),
+    [nodeId]
+  );
+
+  const { node, nodeTemplate } = useAppSelector(selector);
+
+  const needsUpdate = useMemo(
+    () => getNeedsUpdate(node, nodeTemplate),
+    [node, nodeTemplate]
+  );
+
+  const mayUpdate = useMemo(
+    () => getMayUpdateNode(node, nodeTemplate),
+    [node, nodeTemplate]
+  );
+
+  const _updateNode = useCallback(() => {
+    const needsUpdate = getNeedsUpdate(node, nodeTemplate);
+    const updatedNode = updateNode(node, nodeTemplate);
+    if (!updatedNode) {
+      if (needsUpdate) {
+        toast({ title: t('nodes.unableToUpdateNodes', { count: 1 }) });
+      }
+      return;
+    }
+    dispatch(nodeReplaced({ nodeId: updatedNode.id, node: updatedNode }));
+  }, [dispatch, node, nodeTemplate, t, toast]);
+
+  return { needsUpdate, mayUpdate, updateNode: _updateNode };
+};
--- a/invokeai/frontend/web/src/features/nodes/store/actions.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/actions.ts
@ -21,3 +21,7 @@ export const isAnyGraphBuilt = isAnyOf(
 export const workflowLoadRequested = createAction<Workflow>(
  'nodes/workflowLoadRequested'
 );
+
+export const updateAllNodesRequested = createAction(
+  'nodes/updateAllNodesRequested'
+);
--- a/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
@ -149,6 +149,18 @@ const nodesSlice = createSlice({
    nodesChanged: (state, action: PayloadAction<NodeChange[]>) => {
      state.nodes = applyNodeChanges(action.payload, state.nodes);
    },
+    nodeReplaced: (
+      state,
+      action: PayloadAction<{ nodeId: string; node: Node }>
+    ) => {
+      const nodeIndex = state.nodes.findIndex(
+        (n) => n.id === action.payload.nodeId
+      );
+      if (nodeIndex < 0) {
+        return;
+      }
+      state.nodes[nodeIndex] = action.payload.node;
+    },
    nodeAdded: (
      state,
      action: PayloadAction<
@ -1029,6 +1041,7 @@ export const {
  mouseOverFieldChanged,
  mouseOverNodeChanged,
  nodeAdded,
+  nodeReplaced,
  nodeEditorReset,
  nodeEmbedWorkflowChanged,
  nodeExclusivelySelected,
--- a/invokeai/frontend/web/src/features/nodes/store/util/buildNodeData.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/util/buildNodeData.ts
@ -0,0 +1,127 @@
+import { DRAG_HANDLE_CLASSNAME } from 'features/nodes/types/constants';
+import {
+  CurrentImageNodeData,
+  InputFieldValue,
+  InvocationNodeData,
+  InvocationTemplate,
+  NotesNodeData,
+  OutputFieldValue,
+} from 'features/nodes/types/types';
+import { buildInputFieldValue } from 'features/nodes/util/fieldValueBuilders';
+import { reduce } from 'lodash-es';
+import { Node, XYPosition } from 'reactflow';
+import { AnyInvocationType } from 'services/events/types';
+import { v4 as uuidv4 } from 'uuid';
+
+export const SHARED_NODE_PROPERTIES: Partial<Node> = {
+  dragHandle: `.${DRAG_HANDLE_CLASSNAME}`,
+};
+export const buildNodeData = (
+  type: AnyInvocationType | 'current_image' | 'notes',
+  position: XYPosition,
+  template?: InvocationTemplate
+):
+  | Node<CurrentImageNodeData>
+  | Node<NotesNodeData>
+  | Node<InvocationNodeData>
+  | undefined => {
+  const nodeId = uuidv4();
+
+  if (type === 'current_image') {
+    const node: Node<CurrentImageNodeData> = {
+      ...SHARED_NODE_PROPERTIES,
+      id: nodeId,
+      type: 'current_image',
+      position,
+      data: {
+        id: nodeId,
+        type: 'current_image',
+        isOpen: true,
+        label: 'Current Image',
+      },
+    };
+
+    return node;
+  }
+
+  if (type === 'notes') {
+    const node: Node<NotesNodeData> = {
+      ...SHARED_NODE_PROPERTIES,
+      id: nodeId,
+      type: 'notes',
+      position,
+      data: {
+        id: nodeId,
+        isOpen: true,
+        label: 'Notes',
+        notes: '',
+        type: 'notes',
+      },
+    };
+
+    return node;
+  }
+
+  if (template === undefined) {
+    console.error(`Unable to find template ${type}.`);
+    return;
+  }
+
+  const inputs = reduce(
+    template.inputs,
+    (inputsAccumulator, inputTemplate, inputName) => {
+      const fieldId = uuidv4();
+
+      const inputFieldValue: InputFieldValue = buildInputFieldValue(
+        fieldId,
+        inputTemplate
+      );
+
+      inputsAccumulator[inputName] = inputFieldValue;
+
+      return inputsAccumulator;
+    },
+    {} as Record<string, InputFieldValue>
+  );
+
+  const outputs = reduce(
+    template.outputs,
+    (outputsAccumulator, outputTemplate, outputName) => {
+      const fieldId = uuidv4();
+
+      const outputFieldValue: OutputFieldValue = {
+        id: fieldId,
+        name: outputName,
+        type: outputTemplate.type,
+        fieldKind: 'output',
+      };
+
+      outputsAccumulator[outputName] = outputFieldValue;
+
+      return outputsAccumulator;
+    },
+    {} as Record<string, OutputFieldValue>
+  );
+
+  const invocation: Node<InvocationNodeData> = {
+    ...SHARED_NODE_PROPERTIES,
+    id: nodeId,
+    type: 'invocation',
+    position,
+    data: {
+      id: nodeId,
+      type,
+      version: template.version,
+      label: '',
+      notes: '',
+      isOpen: true,
+      embedWorkflow: false,
+      isIntermediate: type === 'save_image' ? false : true,
+      inputs,
+      outputs,
+      useCache: template.useCache,
+    },
+  };
+
+  return invocation;
+};
--- a/invokeai/frontend/web/src/services/api/schema.d.ts
+++ b/invokeai/frontend/web/src/services/api/schema.d.ts
--- a/invokeai/frontend/web/src/services/api/types.ts
+++ b/invokeai/frontend/web/src/services/api/types.ts
@ -48,9 +48,11 @@ export type OffsetPaginatedResults_ImageDTO_ =
  s['OffsetPaginatedResults_ImageDTO_'];

 // Models
-export type ModelType = s['ModelType'];
+export type ModelType =
+  s['invokeai__backend__model_management__models__base__ModelType'];
 export type SubModelType = s['SubModelType'];
-export type BaseModelType = s['BaseModelType'];
+export type BaseModelType =
+  s['invokeai__backend__model_management__models__base__BaseModelType'];
 export type MainModelField = s['MainModelField'];
 export type OnnxModelField = s['OnnxModelField'];
 export type VAEModelField = s['VAEModelField'];
@ -58,7 +60,7 @@ export type LoRAModelField = s['LoRAModelField'];
 export type ControlNetModelField = s['ControlNetModelField'];
 export type IPAdapterModelField = s['IPAdapterModelField'];
 export type T2IAdapterModelField = s['T2IAdapterModelField'];
-export type ModelsList = s['ModelsList'];
+export type ModelsList = s['invokeai__app__api__routers__models__ModelsList'];
 export type ControlField = s['ControlField'];
 export type IPAdapterField = s['IPAdapterField'];