chore: add ".version" and ".last_model" to gitignore (#3208)

Mistakenly closed the previous pr.

.github/CODEOWNERS

@@ -1,16 +1,16 @@
 # continuous integration
-/.github/workflows/ @mauwii @lstein @blessedcoolant
+/.github/workflows/  @lstein @blessedcoolant
 
 # documentation
-/docs/ @lstein @mauwii @tildebyte @blessedcoolant
-/mkdocs.yml @lstein @mauwii @blessedcoolant
+/docs/ @lstein  @tildebyte @blessedcoolant
+/mkdocs.yml @lstein  @blessedcoolant
 
 # nodes
 /invokeai/app/ @Kyle0654 @blessedcoolant
 
 # installation and configuration
-/pyproject.toml @mauwii @lstein @blessedcoolant
-/docker/ @mauwii @lstein @blessedcoolant
+/pyproject.toml  @lstein @blessedcoolant
+/docker/  @lstein @blessedcoolant
 /scripts/ @ebr @lstein
 /installer/ @lstein @ebr
 /invokeai/assets @lstein @ebr
@@ -22,11 +22,11 @@
 /invokeai/backend @blessedcoolant @psychedelicious @lstein
 
 # generation, model management, postprocessing
-/invokeai/backend @keturn @damian0815 @lstein @blessedcoolant @jpphoto
+/invokeai/backend  @damian0815 @lstein @blessedcoolant @jpphoto @gregghelt2
 
 # front ends
 /invokeai/frontend/CLI @lstein
-/invokeai/frontend/install @lstein @ebr @mauwii 
+/invokeai/frontend/install @lstein @ebr  
 /invokeai/frontend/merge @lstein @blessedcoolant @hipsterusername
 /invokeai/frontend/training @lstein @blessedcoolant @hipsterusername
 /invokeai/frontend/web @psychedelicious @blessedcoolant

.gitignore

@@ -9,6 +9,8 @@ models/ldm/stable-diffusion-v1/model.ckpt
 configs/models.user.yaml
 config/models.user.yml
 invokeai.init
+.version
+.last_model
 
 # ignore the Anaconda/Miniconda installer used while building Docker image
 anaconda.sh

README.md

@@ -148,6 +148,11 @@ not supported.
     pip install InvokeAI --use-pep517 --extra-index-url https://download.pytorch.org/whl/rocm5.4.2
     ```
 
+    _For non-GPU systems:_
+    ```terminal
+    pip install InvokeAI --use-pep517 --extra-index-url https://download.pytorch.org/whl/cpu
+    ``` 
+
     _For Macintoshes, either Intel or M1/M2:_
 
     ```sh

docs/features/NSFW.md

@@ -32,7 +32,7 @@ turned on and off on the command line using `--nsfw_checker` and
 At installation time, InvokeAI will ask whether the checker should be
 activated by default (neither argument given on the command line). The
 response is stored in the InvokeAI initialization file (usually
-`.invokeai` in your home directory). You can change the default at any
+`invokeai.init` in your home directory). You can change the default at any
 time by opening this file in a text editor and commenting or
 uncommenting the line `--nsfw_checker`.
 

invokeai/app/api/models/images.py

@@ -1,7 +1,7 @@
 from pydantic import BaseModel, Field
 
 from invokeai.app.models.image import ImageType
-from invokeai.app.modules.metadata import ImageMetadata
+from invokeai.app.models.metadata import ImageMetadata
 
 
 class ImageResponse(BaseModel):
@@ -12,10 +12,3 @@ class ImageResponse(BaseModel):
     image_url: str = Field(description="The url of the image")
     thumbnail_url: str = Field(description="The url of the image's thumbnail")
     metadata: ImageMetadata = Field(description="The image's metadata")
-
-
-class ProgressImage(BaseModel):
-    """The progress image sent intermittently during processing"""
-    width: int = Field(description="The effective width of the image in pixels")
-    height: int = Field(description="The effective height of the image in pixels")
-    dataURL: str = Field(description="The image data as a b64 data URL")

invokeai/app/api/routers/images.py

@@ -1,144 +1,84 @@
 # Copyright (c) 2022 Kyle Schouviller (https://github.com/kyle0654)
-import io
+
 from datetime import datetime, timezone
-import json
-import os
 import uuid
 
-from fastapi import HTTPException, Path, Query, Request, UploadFile
+from fastapi import Path, Query, Request, UploadFile
 from fastapi.responses import FileResponse, Response
 from fastapi.routing import APIRouter
 from PIL import Image
 from invokeai.app.api.models.images import ImageResponse
-from invokeai.app.modules.metadata import ImageMetadata, InvokeAIMetadata
 from invokeai.app.services.item_storage import PaginatedResults
-from invokeai.app.util.image_paths import build_image_path
 
 from ...services.image_storage import ImageType
 from ..dependencies import ApiDependencies
 
 images_router = APIRouter(prefix="/v1/images", tags=["images"])
 
-
 @images_router.get("/{image_type}/{image_name}", operation_id="get_image")
 async def get_image(
     image_type: ImageType = Path(description="The type of image to get"),
     image_name: str = Path(description="The name of the image to get"),
-) -> FileResponse | Response:
+):
     """Gets a result"""
+    # TODO: This is not really secure at all. At least make sure only output results are served
+    filename = ApiDependencies.invoker.services.images.get_path(image_type, image_name)
+    return FileResponse(filename)
 
-    path = ApiDependencies.invoker.services.images.get_path(
-        image_type=image_type, image_name=image_name
-    )
-
-    if ApiDependencies.invoker.services.images.validate_path(path):
-        return FileResponse(path)
-    else:
-        raise HTTPException(status_code=404)
-    
-@images_router.get("/path/{image_type}/{image_name}", operation_id="get_image_path")
-async def get_image_path(
-    image_type: ImageType = Path(description="The type of image to get"),
-    image_name: str = Path(description="The name of the image to get"),
-) -> str:
-    """Gets a result location"""
-
-    path = build_image_path(image_type=image_type, image_name=image_name)
-
-    return path
-
-
-
-@images_router.get(
-    "/{image_type}/thumbnails/{image_name}", operation_id="get_thumbnail"
-)
+@images_router.get("/{image_type}/thumbnails/{image_name}", operation_id="get_thumbnail")
 async def get_thumbnail(
     image_type: ImageType = Path(description="The type of image to get"),
     image_name: str = Path(description="The name of the image to get"),
-) -> FileResponse | Response:
+):
     """Gets a thumbnail"""
-
-    path = ApiDependencies.invoker.services.images.get_path(
-        image_type=image_type, image_name=image_name, is_thumbnail=True
-    )
-
-    if ApiDependencies.invoker.services.images.validate_path(path):
-        return FileResponse(path)
-    else:
-        raise HTTPException(status_code=404)
+    # TODO: This is not really secure at all. At least make sure only output results are served
+    filename = ApiDependencies.invoker.services.images.get_path(image_type, 'thumbnails/' + image_name)
+    return FileResponse(filename)
 
 
 @images_router.post(
     "/uploads/",
     operation_id="upload_image",
     responses={
-        201: {
-            "description": "The image was uploaded successfully",
-            "model": ImageResponse,
-        },
-        415: {"description": "Image upload failed"},
+        201: {"description": "The image was uploaded successfully"},
+        404: {"description": "Session not found"},
     },
-    status_code=201,
 )
-async def upload_image(
-    file: UploadFile, request: Request, response: Response
-) -> ImageResponse:
+async def upload_image(file: UploadFile, request: Request):
     if not file.content_type.startswith("image"):
-        raise HTTPException(status_code=415, detail="Not an image")
+        return Response(status_code=415)
 
     contents = await file.read()
     try:
-        img = Image.open(io.BytesIO(contents))
+        im = Image.open(contents)
     except:
         # Error opening the image
-        raise HTTPException(status_code=415, detail="Failed to read image")
+        return Response(status_code=415)
 
     filename = f"{uuid.uuid4()}_{str(int(datetime.now(timezone.utc).timestamp()))}.png"
-    (image_path, thumbnail_path, ctime) = ApiDependencies.invoker.services.images.save(
-        ImageType.UPLOAD, filename, img
+    ApiDependencies.invoker.services.images.save(ImageType.UPLOAD, filename, im)
+
+    return Response(
+        status_code=201,
+        headers={
+            "Location": request.url_for(
+                "get_image", image_type=ImageType.UPLOAD.value, image_name=filename
+            )
+        },
     )
 
-    # TODO: handle old `sd-metadata` style metadata
-    invokeai_metadata = img.info.get("invokeai", None)
-
-    if invokeai_metadata is not None:
-        invokeai_metadata = InvokeAIMetadata(**json.loads(invokeai_metadata))
-
-    # TODO: should creation of this object should happen elsewhere?
-    res = ImageResponse(
-        image_type=ImageType.UPLOAD,
-        image_name=filename,
-        image_url=f"api/v1/images/{ImageType.UPLOAD.value}/{filename}",
-        thumbnail_url=f"api/v1/images/{ImageType.UPLOAD.value}/thumbnails/{os.path.splitext(filename)[0]}.webp",
-        metadata=ImageMetadata(
-            created=ctime,
-            width=img.width,
-            height=img.height,
-            mode=img.mode,
-            invokeai=invokeai_metadata,
-        ),
-    )
-
-    response.status_code = 201
-    response.headers["Location"] = request.url_for(
-        "get_image", image_type=ImageType.UPLOAD.value, image_name=filename
-    )
-
-    return res
-
-
 @images_router.get(
     "/",
     operation_id="list_images",
     responses={200: {"model": PaginatedResults[ImageResponse]}},
 )
 async def list_images(
-    image_type: ImageType = Query(
-        default=ImageType.RESULT, description="The type of images to get"
-    ),
+    image_type: ImageType = Query(default=ImageType.RESULT, description="The type of images to get"),
     page: int = Query(default=0, description="The page of images to get"),
     per_page: int = Query(default=10, description="The number of images per page"),
 ) -> PaginatedResults[ImageResponse]:
     """Gets a list of images"""
-    result = ApiDependencies.invoker.services.images.list(image_type, page, per_page)
+    result = ApiDependencies.invoker.services.images.list(
+        image_type, page, per_page
+    )
     return result

invokeai/app/invocations/baseinvocation.py

@@ -95,7 +95,7 @@ class UIConfig(TypedDict, total=False):
         ],
     ]
     tags: List[str]
-    title: str
+
 
 class CustomisedSchemaExtra(TypedDict):
     ui: UIConfig

invokeai/app/invocations/collections.py

@@ -1,17 +1,16 @@
 # Copyright (c) 2023 Kyle Schouviller (https://github.com/kyle0654)
 
-from typing import Literal, Optional
+from typing import Literal
 
+import cv2 as cv
 import numpy as np
 import numpy.random
+from PIL import Image, ImageOps
 from pydantic import Field
 
-from .baseinvocation import (
-    BaseInvocation,
-    InvocationConfig,
-    InvocationContext,
-    BaseInvocationOutput,
-)
+from ..services.image_storage import ImageType
+from .baseinvocation import BaseInvocation, InvocationContext, BaseInvocationOutput
+from .image import ImageField, ImageOutput
 
 
 class IntCollectionOutput(BaseInvocationOutput):
@@ -34,9 +33,7 @@ class RangeInvocation(BaseInvocation):
     step: int = Field(default=1, description="The step of the range")
 
     def invoke(self, context: InvocationContext) -> IntCollectionOutput:
-        return IntCollectionOutput(
-            collection=list(range(self.start, self.stop, self.step))
-        )
+        return IntCollectionOutput(collection=list(range(self.start, self.stop, self.step)))
 
 
 class RandomRangeInvocation(BaseInvocation):
@@ -46,19 +43,8 @@ class RandomRangeInvocation(BaseInvocation):
 
     # Inputs
     low: int = Field(default=0, description="The inclusive low value")
-    high: int = Field(
-        default=np.iinfo(np.int32).max, description="The exclusive high value"
-    )
+    high: int = Field(default=np.iinfo(np.int32).max, description="The exclusive high value")
     size: int = Field(default=1, description="The number of values to generate")
-    seed: Optional[int] = Field(
-        ge=0,
-        le=np.iinfo(np.int32).max,
-        description="The seed for the RNG",
-        default_factory=lambda: numpy.random.randint(0, np.iinfo(np.int32).max),
-    )
 
     def invoke(self, context: InvocationContext) -> IntCollectionOutput:
-        rng = np.random.default_rng(self.seed)
-        return IntCollectionOutput(
-            collection=list(rng.integers(low=self.low, high=self.high, size=self.size))
-        )
+        return IntCollectionOutput(collection=list(numpy.random.randint(self.low, self.high, size=self.size)))

invokeai/app/invocations/cv.py

@@ -8,9 +8,8 @@ from PIL import Image, ImageOps
 from pydantic import BaseModel, Field
 
 from invokeai.app.models.image import ImageField, ImageType
-from invokeai.app.modules.metadata import MetadataModule
 from .baseinvocation import BaseInvocation, InvocationContext, InvocationConfig
-from .image import ImageOutput, build_image_output
+from .image import ImageOutput
 
 
 class CvInvocationConfig(BaseModel):
@@ -57,14 +56,7 @@ class CvInpaintInvocation(BaseInvocation, CvInvocationConfig):
         image_name = context.services.images.create_name(
             context.graph_execution_state_id, self.id
         )
-
-        metadata = MetadataModule.build_metadata(
-            session_id=context.graph_execution_state_id, invocation=self
+        context.services.images.save(image_type, image_name, image_inpainted)
+        return ImageOutput(
+            image=ImageField(image_type=image_type, image_name=image_name)
         )
-        
-        context.services.images.save(image_type, image_name, image_inpainted, metadata)
-        return build_image_output(
-            image_type=image_type,
-            image_name=image_name,
-            image=image_inpainted,
-        )

invokeai/app/invocations/generate.py

@@ -9,13 +9,13 @@ from torch import Tensor
 from pydantic import BaseModel, Field
 
 from invokeai.app.models.image import ImageField, ImageType
-from invokeai.app.invocations.util.choose_model import choose_model
-from invokeai.app.modules.metadata import MetadataModule
+from invokeai.app.invocations.util.get_model import choose_model
 from .baseinvocation import BaseInvocation, InvocationContext, InvocationConfig
-from .image import ImageOutput, build_image_output
+from .image import ImageOutput
 from ...backend.generator import Txt2Img, Img2Img, Inpaint, InvokeAIGenerator
 from ...backend.stable_diffusion import PipelineIntermediateState
-from ..util.step_callback import stable_diffusion_step_callback
+from ..models.exceptions import CanceledException
+from ..util.step_callback import diffusers_step_callback_adapter
 
 SAMPLER_NAME_VALUES = Literal[tuple(InvokeAIGenerator.schedulers())]
 
@@ -58,31 +58,28 @@ class TextToImageInvocation(BaseInvocation, SDImageInvocation):
 
     # TODO: pass this an emitter method or something? or a session for dispatching?
     def dispatch_progress(
-        self,
-        context: InvocationContext,
-        source_node_id: str,
-        intermediate_state: PipelineIntermediateState,
+        self, context: InvocationContext, intermediate_state: PipelineIntermediateState
     ) -> None:
-        stable_diffusion_step_callback(
-            context=context,
-            intermediate_state=intermediate_state,
-            invocation_dict=self.dict(),
-            source_node_id=source_node_id,
-        )
+        if (context.services.queue.is_canceled(context.graph_execution_state_id)):
+            raise CanceledException
+
+        step = intermediate_state.step
+        if intermediate_state.predicted_original is not None:
+            # Some schedulers report not only the noisy latents at the current timestep,
+            # but also their estimate so far of what the de-noised latents will be.
+            sample = intermediate_state.predicted_original
+        else:
+            sample = intermediate_state.latents
+        
+        diffusers_step_callback_adapter(sample, step, steps=self.steps, id=self.id, context=context)
 
     def invoke(self, context: InvocationContext) -> ImageOutput:
         # Handle invalid model parameter
         model = choose_model(context.services.model_manager, self.model)
 
-        # Get the source node id (we are invoking the prepared node)
-        graph_execution_state = context.services.graph_execution_manager.get(
-            context.graph_execution_state_id
-        )
-        source_node_id = graph_execution_state.prepared_source_mapping[self.id]
-
         outputs = Txt2Img(model).generate(
             prompt=self.prompt,
-            step_callback=partial(self.dispatch_progress, context, source_node_id),
+            step_callback=partial(self.dispatch_progress, context),
             **self.dict(
                 exclude={"prompt"}
             ),  # Shorthand for passing all of the parameters above manually
@@ -98,18 +95,9 @@ class TextToImageInvocation(BaseInvocation, SDImageInvocation):
         image_name = context.services.images.create_name(
             context.graph_execution_state_id, self.id
         )
-
-        metadata = MetadataModule.build_metadata(
-            session_id=context.graph_execution_state_id, invocation=self
-        )
-
-        context.services.images.save(
-            image_type, image_name, generate_output.image, metadata
-        )
-        return build_image_output(
-            image_type=image_type,
-            image_name=image_name,
-            image=generate_output.image,
+        context.services.images.save(image_type, image_name, generate_output.image)
+        return ImageOutput(
+            image=ImageField(image_type=image_type, image_name=image_name)
         )
 
 
@@ -129,17 +117,20 @@ class ImageToImageInvocation(TextToImageInvocation):
     )
 
     def dispatch_progress(
-        self,
-        context: InvocationContext,
-        source_node_id: str,
-        intermediate_state: PipelineIntermediateState,
-    ) -> None:
-        stable_diffusion_step_callback(
-            context=context,
-            intermediate_state=intermediate_state,
-            invocation_dict=self.dict(),
-            source_node_id=source_node_id,
-        )
+        self, context: InvocationContext, intermediate_state: PipelineIntermediateState
+    ) -> None:  
+        if (context.services.queue.is_canceled(context.graph_execution_state_id)):
+            raise CanceledException
+
+        step = intermediate_state.step
+        if intermediate_state.predicted_original is not None:
+            # Some schedulers report not only the noisy latents at the current timestep,
+            # but also their estimate so far of what the de-noised latents will be.
+            sample = intermediate_state.predicted_original
+        else:
+            sample = intermediate_state.latents
+
+        diffusers_step_callback_adapter(sample, step, steps=self.steps, id=self.id, context=context)
 
     def invoke(self, context: InvocationContext) -> ImageOutput:
         image = (
@@ -154,21 +145,15 @@ class ImageToImageInvocation(TextToImageInvocation):
         # Handle invalid model parameter
         model = choose_model(context.services.model_manager, self.model)
 
-        # Get the source node id (we are invoking the prepared node)
-        graph_execution_state = context.services.graph_execution_manager.get(
-            context.graph_execution_state_id
-        )
-        source_node_id = graph_execution_state.prepared_source_mapping[self.id]
-
         outputs = Img2Img(model).generate(
-            prompt=self.prompt,
-            init_image=image,
-            init_mask=mask,
-            step_callback=partial(self.dispatch_progress, context, source_node_id),
-            **self.dict(
-                exclude={"prompt", "image", "mask"}
-            ),  # Shorthand for passing all of the parameters above manually
-        )
+                prompt=self.prompt,
+                init_image=image,
+                init_mask=mask,
+                step_callback=partial(self.dispatch_progress, context),
+                **self.dict(
+                    exclude={"prompt", "image", "mask"}
+                ),  # Shorthand for passing all of the parameters above manually
+            )
 
         # Outputs is an infinite iterator that will return a new InvokeAIGeneratorOutput object
         # each time it is called. We only need the first one.
@@ -183,19 +168,11 @@ class ImageToImageInvocation(TextToImageInvocation):
         image_name = context.services.images.create_name(
             context.graph_execution_state_id, self.id
         )
-
-        metadata = MetadataModule.build_metadata(
-            session_id=context.graph_execution_state_id, invocation=self
+        context.services.images.save(image_type, image_name, result_image)
+        return ImageOutput(
+            image=ImageField(image_type=image_type, image_name=image_name)
         )
 
-        context.services.images.save(image_type, image_name, result_image, metadata)
-        return build_image_output(
-            image_type=image_type,
-            image_name=image_name,
-            image=result_image,
-        )
-
-
 class InpaintInvocation(ImageToImageInvocation):
     """Generates an image using inpaint."""
 
@@ -211,17 +188,20 @@ class InpaintInvocation(ImageToImageInvocation):
     )
 
     def dispatch_progress(
-        self,
-        context: InvocationContext,
-        source_node_id: str,
-        intermediate_state: PipelineIntermediateState,
-    ) -> None:
-        stable_diffusion_step_callback(
-            context=context,
-            intermediate_state=intermediate_state,
-            invocation_dict=self.dict(),
-            source_node_id=source_node_id,
-        )
+        self, context: InvocationContext, intermediate_state: PipelineIntermediateState
+    ) -> None:  
+        if (context.services.queue.is_canceled(context.graph_execution_state_id)):
+            raise CanceledException
+
+        step = intermediate_state.step
+        if intermediate_state.predicted_original is not None:
+            # Some schedulers report not only the noisy latents at the current timestep,
+            # but also their estimate so far of what the de-noised latents will be.
+            sample = intermediate_state.predicted_original
+        else:
+            sample = intermediate_state.latents
+
+        diffusers_step_callback_adapter(sample, step, steps=self.steps, id=self.id, context=context)
 
     def invoke(self, context: InvocationContext) -> ImageOutput:
         image = (
@@ -238,23 +218,17 @@ class InpaintInvocation(ImageToImageInvocation):
         )
 
         # Handle invalid model parameter
-        model = choose_model(context.services.model_manager, self.model)
-
-        # Get the source node id (we are invoking the prepared node)
-        graph_execution_state = context.services.graph_execution_manager.get(
-            context.graph_execution_state_id
-        )
-        source_node_id = graph_execution_state.prepared_source_mapping[self.id]
+        model = choose_model(context.services.model_manager, self.model)   
 
         outputs = Inpaint(model).generate(
-            prompt=self.prompt,
-            init_img=image,
-            init_mask=mask,
-            step_callback=partial(self.dispatch_progress, context, source_node_id),
-            **self.dict(
-                exclude={"prompt", "image", "mask"}
-            ),  # Shorthand for passing all of the parameters above manually
-        )
+                prompt=self.prompt,
+                init_img=image,
+                init_mask=mask,
+                step_callback=partial(self.dispatch_progress, context),
+                **self.dict(
+                    exclude={"prompt", "image", "mask"}
+                ),  # Shorthand for passing all of the parameters above manually
+            )
 
         # Outputs is an infinite iterator that will return a new InvokeAIGeneratorOutput object
         # each time it is called. We only need the first one.
@@ -269,14 +243,7 @@ class InpaintInvocation(ImageToImageInvocation):
         image_name = context.services.images.create_name(
             context.graph_execution_state_id, self.id
         )
-
-        metadata = MetadataModule.build_metadata(
-            session_id=context.graph_execution_state_id, invocation=self
-        )
-
-        context.services.images.save(image_type, image_name, result_image, metadata)
-        return build_image_output(
-            image_type=image_type,
-            image_name=image_name,
-            image=result_image,
+        context.services.images.save(image_type, image_name, result_image)
+        return ImageOutput(
+            image=ImageField(image_type=image_type, image_name=image_name)
         )

invokeai/app/invocations/image.py

@@ -1,20 +1,15 @@
 # Copyright (c) 2022 Kyle Schouviller (https://github.com/kyle0654)
 
+from datetime import datetime, timezone
 from typing import Literal, Optional
 
 import numpy
 from PIL import Image, ImageFilter, ImageOps
 from pydantic import BaseModel, Field
 
-from invokeai.app.modules.metadata import MetadataModule
-
 from ..models.image import ImageField, ImageType
-from .baseinvocation import (
-    BaseInvocation,
-    BaseInvocationOutput,
-    InvocationContext,
-    InvocationConfig,
-)
+from ..services.invocation_services import InvocationServices
+from .baseinvocation import BaseInvocation, BaseInvocationOutput, InvocationContext, InvocationConfig
 
 
 class PILInvocationConfig(BaseModel):
@@ -27,74 +22,50 @@ class PILInvocationConfig(BaseModel):
             },
         }
 
-
 class ImageOutput(BaseInvocationOutput):
     """Base class for invocations that output an image"""
-
-    # fmt: off
+    #fmt: off
     type: Literal["image"] = "image"
     image:      ImageField = Field(default=None, description="The output image")
-    width:   Optional[int] = Field(default=None, description="The width of the image in pixels")
-    height:  Optional[int] = Field(default=None, description="The height of the image in pixels")
-    mode:    Optional[str] = Field(default=None, description="The image mode (ie pixel format)")
-    # fmt: on
+    #fmt: on
 
     class Config:
         schema_extra = {
-            "required": ["type", "image", "width", "height", "mode"]
-        }
-
-
-def build_image_output(
-    image_type: ImageType, image_name: str, image: Image.Image
-) -> ImageOutput:
-    """Builds an ImageOutput and its ImageField"""
-    image_field = ImageField(
-        image_name=image_name,
-        image_type=image_type,
-    )
-    return ImageOutput(
-        image=image_field,
-        width=image.width,
-        height=image.height,
-        mode=image.mode,
-    )
-
-
-class MaskOutput(BaseInvocationOutput):
-    """Base class for invocations that output a mask"""
-
-    # fmt: off
-    type: Literal["mask"] = "mask"
-    mask:      ImageField = Field(default=None, description="The output mask")
-    # fmt: on
-
-    class Config:
-        schema_extra = {
-            "required": [
-                "type",
-                "mask",
+            'required': [
+                'type',
+                'image',
             ]
         }
 
+class MaskOutput(BaseInvocationOutput):
+    """Base class for invocations that output a mask"""
+    #fmt: off
+    type: Literal["mask"] = "mask"
+    mask:      ImageField = Field(default=None, description="The output mask")
+    #fmt: on
 
+    class Config:
+        schema_extra = {
+            'required': [
+                'type',
+                'mask',
+            ]
+        }
+
+# TODO: this isn't really necessary anymore
 class LoadImageInvocation(BaseInvocation):
-    """Load an image and provide it as output."""
-
-    # fmt: off
+    """Load an image from a filename and provide it as output."""
+    #fmt: off
     type: Literal["load_image"] = "load_image"
 
     # Inputs
     image_type: ImageType = Field(description="The type of the image")
     image_name:       str = Field(description="The name of the image")
-    # fmt: on
-    def invoke(self, context: InvocationContext) -> ImageOutput:
-        image = context.services.images.get(self.image_type, self.image_name)
+    #fmt: on
 
-        return build_image_output(
-            image_type=self.image_type,
-            image_name=self.image_name,
-            image=image,
+    def invoke(self, context: InvocationContext) -> ImageOutput:
+        return ImageOutput(
+            image=ImageField(image_type=self.image_type, image_name=self.image_name)
         )
 
 
@@ -115,17 +86,16 @@ class ShowImageInvocation(BaseInvocation):
 
         # TODO: how to handle failure?
 
-        return build_image_output(
-            image_type=self.image.image_type,
-            image_name=self.image.image_name,
-            image=image,
+        return ImageOutput(
+            image=ImageField(
+                image_type=self.image.image_type, image_name=self.image.image_name
+            )
         )
 
 
 class CropImageInvocation(BaseInvocation, PILInvocationConfig):
     """Crops an image to a specified box. The box can be outside of the image."""
-
-    # fmt: off
+    #fmt: off
     type: Literal["crop"] = "crop"
 
     # Inputs
@@ -134,7 +104,7 @@ class CropImageInvocation(BaseInvocation, PILInvocationConfig):
     y:      int = Field(default=0, description="The top y coordinate of the crop rectangle")
     width:  int = Field(default=512, gt=0, description="The width of the crop rectangle")
     height: int = Field(default=512, gt=0, description="The height of the crop rectangle")
-    # fmt: on
+    #fmt: on
 
     def invoke(self, context: InvocationContext) -> ImageOutput:
         image = context.services.images.get(
@@ -150,23 +120,15 @@ class CropImageInvocation(BaseInvocation, PILInvocationConfig):
         image_name = context.services.images.create_name(
             context.graph_execution_state_id, self.id
         )
-
-        metadata = MetadataModule.build_metadata(
-            session_id=context.graph_execution_state_id, invocation=self
-        )
-        
-        context.services.images.save(image_type, image_name, image_crop, metadata)
-        return build_image_output(
-            image_type=image_type,
-            image_name=image_name,
-            image=image_crop,
+        context.services.images.save(image_type, image_name, image_crop)
+        return ImageOutput(
+            image=ImageField(image_type=image_type, image_name=image_name)
         )
 
 
 class PasteImageInvocation(BaseInvocation, PILInvocationConfig):
     """Pastes an image into another image."""
-
-    # fmt: off
+    #fmt: off
     type: Literal["paste"] = "paste"
 
     # Inputs
@@ -175,7 +137,7 @@ class PasteImageInvocation(BaseInvocation, PILInvocationConfig):
     mask: Optional[ImageField] = Field(default=None, description="The mask to use when pasting")
     x:                     int = Field(default=0, description="The left x coordinate at which to paste the image")
     y:                     int = Field(default=0, description="The top y coordinate at which to paste the image")
-    # fmt: on
+    #fmt: on
 
     def invoke(self, context: InvocationContext) -> ImageOutput:
         base_image = context.services.images.get(
@@ -208,29 +170,21 @@ class PasteImageInvocation(BaseInvocation, PILInvocationConfig):
         image_name = context.services.images.create_name(
             context.graph_execution_state_id, self.id
         )
-
-        metadata = MetadataModule.build_metadata(
-            session_id=context.graph_execution_state_id, invocation=self
-        )
-        
-        context.services.images.save(image_type, image_name, new_image, metadata)
-        return build_image_output(
-            image_type=image_type,
-            image_name=image_name,
-            image=new_image,
+        context.services.images.save(image_type, image_name, new_image)
+        return ImageOutput(
+            image=ImageField(image_type=image_type, image_name=image_name)
         )
 
 
 class MaskFromAlphaInvocation(BaseInvocation, PILInvocationConfig):
     """Extracts the alpha channel of an image as a mask."""
-
-    # fmt: off
+    #fmt: off
     type: Literal["tomask"] = "tomask"
 
     # Inputs
     image: ImageField = Field(default=None, description="The image to create the mask from")
     invert:      bool = Field(default=False, description="Whether or not to invert the mask")
-    # fmt: on
+    #fmt: on
 
     def invoke(self, context: InvocationContext) -> MaskOutput:
         image = context.services.images.get(
@@ -245,27 +199,22 @@ class MaskFromAlphaInvocation(BaseInvocation, PILInvocationConfig):
         image_name = context.services.images.create_name(
             context.graph_execution_state_id, self.id
         )
-
-        metadata = MetadataModule.build_metadata(
-            session_id=context.graph_execution_state_id, invocation=self
-        )
-
-        context.services.images.save(image_type, image_name, image_mask, metadata)
+        context.services.images.save(image_type, image_name, image_mask)
         return MaskOutput(mask=ImageField(image_type=image_type, image_name=image_name))
 
 
 class BlurInvocation(BaseInvocation, PILInvocationConfig):
     """Blurs an image"""
 
-    # fmt: off
+    #fmt: off
     type: Literal["blur"] = "blur"
 
     # Inputs
     image: ImageField = Field(default=None, description="The image to blur")
     radius:     float = Field(default=8.0, ge=0, description="The blur radius")
     blur_type: Literal["gaussian", "box"] = Field(default="gaussian", description="The type of blur")
-    # fmt: on
-
+    #fmt: on
+    
     def invoke(self, context: InvocationContext) -> ImageOutput:
         image = context.services.images.get(
             self.image.image_type, self.image.image_name
@@ -282,28 +231,22 @@ class BlurInvocation(BaseInvocation, PILInvocationConfig):
         image_name = context.services.images.create_name(
             context.graph_execution_state_id, self.id
         )
-
-        metadata = MetadataModule.build_metadata(
-            session_id=context.graph_execution_state_id, invocation=self
-        )
-
-        context.services.images.save(image_type, image_name, blur_image, metadata)
-        return build_image_output(
-            image_type=image_type, image_name=image_name, image=blur_image
+        context.services.images.save(image_type, image_name, blur_image)
+        return ImageOutput(
+            image=ImageField(image_type=image_type, image_name=image_name)
         )
 
 
 class LerpInvocation(BaseInvocation, PILInvocationConfig):
     """Linear interpolation of all pixels of an image"""
-
-    # fmt: off
+    #fmt: off
     type: Literal["lerp"] = "lerp"
 
     # Inputs
     image: ImageField = Field(default=None, description="The image to lerp")
     min: int = Field(default=0, ge=0, le=255, description="The minimum output value")
     max: int = Field(default=255, ge=0, le=255, description="The maximum output value")
-    # fmt: on
+    #fmt: on
 
     def invoke(self, context: InvocationContext) -> ImageOutput:
         image = context.services.images.get(
@@ -319,29 +262,23 @@ class LerpInvocation(BaseInvocation, PILInvocationConfig):
         image_name = context.services.images.create_name(
             context.graph_execution_state_id, self.id
         )
-
-        metadata = MetadataModule.build_metadata(
-            session_id=context.graph_execution_state_id, invocation=self
-        )
-
-        context.services.images.save(image_type, image_name, lerp_image, metadata)
-        return build_image_output(
-            image_type=image_type, image_name=image_name, image=lerp_image
+        context.services.images.save(image_type, image_name, lerp_image)
+        return ImageOutput(
+            image=ImageField(image_type=image_type, image_name=image_name)
         )
 
 
 class InverseLerpInvocation(BaseInvocation, PILInvocationConfig):
     """Inverse linear interpolation of all pixels of an image"""
-
-    # fmt: off
+    #fmt: off
     type: Literal["ilerp"] = "ilerp"
 
     # Inputs
     image: ImageField = Field(default=None, description="The image to lerp")
     min: int = Field(default=0, ge=0, le=255, description="The minimum input value")
     max: int = Field(default=255, ge=0, le=255, description="The maximum input value")
-    # fmt: on
-
+    #fmt: on
+    
     def invoke(self, context: InvocationContext) -> ImageOutput:
         image = context.services.images.get(
             self.image.image_type, self.image.image_name
@@ -361,12 +298,7 @@ class InverseLerpInvocation(BaseInvocation, PILInvocationConfig):
         image_name = context.services.images.create_name(
             context.graph_execution_state_id, self.id
         )
-
-        metadata = MetadataModule.build_metadata(
-            session_id=context.graph_execution_state_id, invocation=self
-        )
-
-        context.services.images.save(image_type, image_name, ilerp_image, metadata)
-        return build_image_output(
-            image_type=image_type, image_name=image_name, image=ilerp_image
+        context.services.images.save(image_type, image_name, ilerp_image)
+        return ImageOutput(
+            image=ImageField(image_type=image_type, image_name=image_name)
         )

invokeai/app/invocations/latent.py

@@ -5,10 +5,9 @@ from typing import Literal, Optional
 from pydantic import BaseModel, Field
 import torch
 
-from invokeai.app.invocations.util.choose_model import choose_model
-from invokeai.app.modules.metadata import MetadataModule
-
-from invokeai.app.util.step_callback import stable_diffusion_step_callback
+from invokeai.app.models.exceptions import CanceledException
+from invokeai.app.invocations.util.get_model import choose_model
+from invokeai.app.util.step_callback import diffusers_step_callback_adapter
 
 from ...backend.model_management.model_manager import ModelManager
 from ...backend.util.devices import choose_torch_device, torch_dtype
@@ -20,7 +19,7 @@ from .baseinvocation import BaseInvocation, BaseInvocationOutput, InvocationCont
 import numpy as np
 from ..services.image_storage import ImageType
 from .baseinvocation import BaseInvocation, InvocationContext
-from .image import ImageField, ImageOutput, build_image_output
+from .image import ImageField, ImageOutput
 from ...backend.stable_diffusion import PipelineIntermediateState
 from diffusers.schedulers import SchedulerMixin as Scheduler
 import diffusers
@@ -171,14 +170,21 @@ class TextToLatentsInvocation(BaseInvocation):
 
     # TODO: pass this an emitter method or something? or a session for dispatching?
     def dispatch_progress(
-        self, context: InvocationContext, source_node_id: str, intermediate_state: PipelineIntermediateState
+        self, context: InvocationContext, intermediate_state: PipelineIntermediateState
     ) -> None:
-        stable_diffusion_step_callback(
-            context=context,
-            intermediate_state=intermediate_state,
-            invocation_dict=self.dict(),
-            source_node_id=source_node_id,
-        )
+        if (context.services.queue.is_canceled(context.graph_execution_state_id)):
+            raise CanceledException
+
+        step = intermediate_state.step
+        if intermediate_state.predicted_original is not None:
+            # Some schedulers report not only the noisy latents at the current timestep,
+            # but also their estimate so far of what the de-noised latents will be.
+            sample = intermediate_state.predicted_original
+        else:
+            sample = intermediate_state.latents
+
+        diffusers_step_callback_adapter(sample, step, steps=self.steps, id=self.id, context=context)
+
 
     def get_model(self, model_manager: ModelManager) -> StableDiffusionGeneratorPipeline:
         model_info = choose_model(model_manager, self.model)
@@ -225,12 +231,8 @@ class TextToLatentsInvocation(BaseInvocation):
     def invoke(self, context: InvocationContext) -> LatentsOutput:
         noise = context.services.latents.get(self.noise.latents_name)
 
-        # Get the source node id (we are invoking the prepared node)
-        graph_execution_state = context.services.graph_execution_manager.get(context.graph_execution_state_id)
-        source_node_id = graph_execution_state.prepared_source_mapping[self.id]
-
         def step_callback(state: PipelineIntermediateState):
-            self.dispatch_progress(context, source_node_id, state)
+            self.dispatch_progress(context, state)
 
         model = self.get_model(context.services.model_manager)
         conditioning_data = self.get_conditioning_data(model)
@@ -279,12 +281,8 @@ class LatentsToLatentsInvocation(TextToLatentsInvocation):
         noise = context.services.latents.get(self.noise.latents_name)
         latent = context.services.latents.get(self.latents.latents_name)
 
-        # Get the source node id (we are invoking the prepared node)
-        graph_execution_state = context.services.graph_execution_manager.get(context.graph_execution_state_id)
-        source_node_id = graph_execution_state.prepared_source_mapping[self.id]
-
         def step_callback(state: PipelineIntermediateState):
-            self.dispatch_progress(context, source_node_id, state)
+            self.dispatch_progress(context, state)
 
         model = self.get_model(context.services.model_manager)
         conditioning_data = self.get_conditioning_data(model)
@@ -357,14 +355,7 @@ class LatentsToImageInvocation(BaseInvocation):
             image_name = context.services.images.create_name(
                 context.graph_execution_state_id, self.id
             )
-
-            metadata = MetadataModule.build_metadata(
-                session_id=context.graph_execution_state_id, invocation=self
-            )
-
-            context.services.images.save(image_type, image_name, image, metadata)
-            return build_image_output(
-                image_type=image_type,
-                image_name=image_name,
-                image=image
+            context.services.images.save(image_type, image_name, image)
+            return ImageOutput(
+                image=ImageField(image_type=image_type, image_name=image_name)
             )

invokeai/app/invocations/reconstruct.py

@@ -1,12 +1,12 @@
+from datetime import datetime, timezone
 from typing import Literal, Union
 
 from pydantic import Field
 
 from invokeai.app.models.image import ImageField, ImageType
-from invokeai.app.modules.metadata import MetadataModule
-
+from ..services.invocation_services import InvocationServices
 from .baseinvocation import BaseInvocation, InvocationContext, InvocationConfig
-from .image import ImageOutput, build_image_output
+from .image import ImageOutput
 
 class RestoreFaceInvocation(BaseInvocation):
     """Restores faces in an image."""
@@ -44,14 +44,7 @@ class RestoreFaceInvocation(BaseInvocation):
         image_name = context.services.images.create_name(
             context.graph_execution_state_id, self.id
         )
-
-        metadata = MetadataModule.build_metadata(
-            session_id=context.graph_execution_state_id, invocation=self
+        context.services.images.save(image_type, image_name, results[0][0])
+        return ImageOutput(
+            image=ImageField(image_type=image_type, image_name=image_name)
         )
-
-        context.services.images.save(image_type, image_name, results[0][0], metadata)
-        return build_image_output(
-            image_type=image_type,
-            image_name=image_name,
-            image=results[0][0]
-        )

invokeai/app/invocations/upscale.py

@@ -1,13 +1,14 @@
 # Copyright (c) 2022 Kyle Schouviller (https://github.com/kyle0654)
 
+from datetime import datetime, timezone
 from typing import Literal, Union
 
 from pydantic import Field
 
 from invokeai.app.models.image import ImageField, ImageType
-from invokeai.app.modules.metadata import MetadataModule
+from ..services.invocation_services import InvocationServices
 from .baseinvocation import BaseInvocation, InvocationContext, InvocationConfig
-from .image import ImageOutput, build_image_output
+from .image import ImageOutput
 
 
 class UpscaleInvocation(BaseInvocation):
@@ -48,14 +49,7 @@ class UpscaleInvocation(BaseInvocation):
         image_name = context.services.images.create_name(
             context.graph_execution_state_id, self.id
         )
-
-        metadata = MetadataModule.build_metadata(
-            session_id=context.graph_execution_state_id, invocation=self
+        context.services.images.save(image_type, image_name, results[0][0])
+        return ImageOutput(
+            image=ImageField(image_type=image_type, image_name=image_name)
         )
-
-        context.services.images.save(image_type, image_name, results[0][0], metadata)
-        return build_image_output(
-            image_type=image_type,
-            image_name=image_name,
-            image=results[0][0]
-        )

invokeai/app/invocations/util/get_model.py

@@ -1,14 +1,11 @@
+from invokeai.app.invocations.baseinvocation import InvocationContext
 from invokeai.backend.model_management.model_manager import ModelManager
 
 
 def choose_model(model_manager: ModelManager, model_name: str):
     """Returns the default model if the `model_name` not a valid model, else returns the selected model."""
     if model_manager.valid_model(model_name):
-        model = model_manager.get_model(model_name)
+        return model_manager.get_model(model_name)
     else:
-        model = model_manager.get_model()
-        print(
-            f"* Warning: '{model_name}' is not a valid model name. Using default model \'{model['model_name']}\' instead."
-        )
-
-    return model
+        print(f"* Warning: '{model_name}' is not a valid model name. Using default model instead.")
+        return model_manager.get_model()

invokeai/app/models/image.py

@@ -19,5 +19,8 @@ class ImageField(BaseModel):
 
     class Config:
         schema_extra = {
-            "required": ["image_type", "image_name"]
+            "required": [
+                "image_type",
+                "image_name",
+            ]
         }

invokeai/app/models/metadata.py

@@ -0,0 +1,11 @@
+from typing import Optional
+from pydantic import BaseModel, Field
+
+class ImageMetadata(BaseModel):
+    """An image's metadata"""
+
+    timestamp: float = Field(description="The creation timestamp of the image")
+    width: int = Field(description="The width of the image in pixels")
+    height: int = Field(description="The height of the image in pixels")
+    # TODO: figure out metadata
+    sd_metadata: Optional[dict] = Field(default={}, description="The image's SD-specific metadata")

invokeai/app/modules/metadata.py

@@ -1,180 +0,0 @@
-import json
-from typing import Any, Dict, Literal, Optional
-from PIL import Image, PngImagePlugin
-from pydantic import (
-    BaseModel,
-    Extra,
-    Field,
-    StrictBool,
-    StrictInt,
-    StrictStr,
-    ValidationError,
-    root_validator,
-)
-
-from invokeai.app.models.image import ImageType
-
-
-class MetadataImageField(BaseModel):
-    """A non-nullable version of ImageField"""
-
-    image_type: Literal[tuple([t.value for t in ImageType])]  # type: ignore
-    image_name: StrictStr
-
-
-class MetadataLatentsField(BaseModel):
-    """A non-nullable version of LatentsField"""
-
-    latents_name: StrictStr
-
-
-# Union of all valid metadata field types - use mostly strict types
-NodeMetadataFieldTypes = (
-    StrictStr | StrictInt | float | StrictBool  # we want to cast ints to floats here
-)
-
-
-class NodeMetadataField(BaseModel):
-    """Helper class used as a hack for arbitrary metadata field keys."""
-
-    __root__: Dict[StrictStr, NodeMetadataFieldTypes]
-
-
-# `extra=Extra.allow` allows this to model any potential node with `id` and `type` fields
-class NodeMetadata(BaseModel, extra=Extra.allow):
-    """Node metadata model, used for validation of metadata."""
-
-    @root_validator
-    def validate_node_metadata(cls, values: dict[str, Any]) -> dict[str, Any]:
-        """Parses the node metadata, ignoring invalid values"""
-        parsed: dict[str, Any] = {}
-
-        # Conditionally build the parsed metadata, silently skipping invalid values
-        for name, value in values.items():
-            # explicitly parse `id` and `type` as strings
-            if name == "id":
-                if type(value) is not str:
-                    continue
-                parsed[name] = value
-            elif name == "type":
-                if type(value) is not str:
-                    continue
-                parsed[name] = value
-            else:
-                try:
-                    if type(value) is dict:
-                        # we only allow certain dicts, else just ignore the value entirely
-                        if "image_name" in value or "image_type" in value:
-                            # parse as an ImageField
-                            parsed[name] = MetadataImageField.parse_obj(value)
-                        elif "latents_name" in value:
-                            # this is a LatentsField
-                            parsed[name] = MetadataLatentsField.parse_obj(value)
-                    else:
-                        # hack to get parse and validate arbitrary keys
-                        NodeMetadataField.parse_obj({name: value})
-                        parsed[name] = value
-                except ValidationError:
-                    # TODO: do we want to somehow alert when metadata is not fully valid?
-                    continue
-        return parsed
-
-
-class InvokeAIMetadata(BaseModel):
-    session_id: Optional[StrictStr] = Field(
-        description="The session in which this image was created"
-    )
-    node: Optional[NodeMetadata] = Field(description="The node that created this image")
-
-    @root_validator(pre=True)
-    def validate_invokeai_metadata(cls, values: dict[str, Any]) -> dict[str, Any]:
-        parsed: dict[str, Any] = {}
-        # Conditionally build the parsed metadata, silently skipping invalid values
-        for name, value in values.items():
-            if name == "session_id":
-                if type(value) is not str:
-                    continue
-                parsed[name] = value
-            elif name == "node":
-                try:
-                    p = NodeMetadata.parse_obj(value)
-                    # check for empty NodeMetadata object
-                    if len(p.dict().items()) == 0:
-                        continue
-                except ValidationError:
-                    continue
-                parsed[name] = value
-
-        return parsed
-
-
-class ImageMetadata(BaseModel):
-    """An image's metadata. Used only in HTTP responses."""
-
-    created: int = Field(description="The creation timestamp of the image")
-    width: int = Field(description="The width of the image in pixels")
-    height: int = Field(description="The height of the image in pixels")
-    mode: str = Field(description="The color mode of the image")
-    invokeai: Optional[InvokeAIMetadata] = Field(
-        description="The image's InvokeAI-specific metadata"
-    )
-
-
-class MetadataModule:
-    """Handles loading metadata from images and parsing it."""
-
-    # TODO: Support parsing old format metadata **hurk**
-
-    @staticmethod
-    def _load_metadata(image: Image.Image, key="invokeai") -> Any:
-        """Loads a specific info entry from a PIL Image."""
-
-        raw_metadata = image.info.get(key)
-
-        # metadata should always be a dict
-        if type(raw_metadata) is not str:
-            return None
-
-        loaded_metadata = json.loads(raw_metadata)
-
-        return loaded_metadata
-
-    @staticmethod
-    def _parse_invokeai_metadata(
-        metadata: Any,
-    ) -> InvokeAIMetadata | None:
-        """Parses an object as InvokeAI metadata."""
-        if type(metadata) is not dict:
-            return None
-
-        parsed_metadata = InvokeAIMetadata.parse_obj(metadata)
-
-        return parsed_metadata
-
-    @staticmethod
-    def get_metadata(image: Image.Image) -> InvokeAIMetadata | None:
-        """Gets the InvokeAI metadata from a PIL Image, skipping invalid values"""
-        loaded_metadata = MetadataModule._load_metadata(image)
-        parsed_metadata = MetadataModule._parse_invokeai_metadata(loaded_metadata)
-
-        return parsed_metadata
-
-    @staticmethod
-    def build_metadata(
-        session_id: StrictStr, invocation: BaseModel
-    ) -> InvokeAIMetadata:
-        """Builds an InvokeAIMetadata object"""
-        metadata = InvokeAIMetadata(
-            session_id=session_id, node=NodeMetadata(**invocation.dict())
-        )
-
-        return metadata
-
-    @staticmethod
-    def build_png_info(metadata: InvokeAIMetadata | None):
-        png_info = PngImagePlugin.PngInfo()
-
-        if metadata is not None:
-            png_info.add_text("invokeai", metadata.json())
-
-        return png_info

invokeai/app/services/events.py

@@ -1,9 +1,10 @@
 # Copyright (c) 2022 Kyle Schouviller (https://github.com/kyle0654)
 
-from typing import Any
-from invokeai.app.api.models.images import ProgressImage
-from invokeai.app.util.get_timestamp import get_timestamp
+from typing import Any, Dict, TypedDict
 
+ProgressImage = TypedDict(
+    "ProgressImage", {"dataURL": str, "width": int, "height": int}
+)
 
 class EventServiceBase:
     session_event: str = "session_event"
@@ -13,7 +14,7 @@ class EventServiceBase:
     def dispatch(self, event_name: str, payload: Any) -> None:
         pass
 
-    def __emit_session_event(self, event_name: str, payload: dict) -> None:
+    def __emit_session_event(self, event_name: str, payload: Dict) -> None:
         self.dispatch(
             event_name=EventServiceBase.session_event,
             payload=dict(event=event_name, data=payload),
@@ -24,8 +25,7 @@ class EventServiceBase:
     def emit_generator_progress(
         self,
         graph_execution_state_id: str,
-        invocation_dict: dict,
-        source_node_id: str,
+        invocation_id: str,
         progress_image: ProgressImage | None,
         step: int,
         total_steps: int,
@@ -35,65 +35,48 @@ class EventServiceBase:
             event_name="generator_progress",
             payload=dict(
                 graph_execution_state_id=graph_execution_state_id,
-                invocation=invocation_dict,
-                source_node_id=source_node_id,
-                progress_image=progress_image.dict() if progress_image is not None else None,
+                invocation_id=invocation_id,
+                progress_image=progress_image,
                 step=step,
                 total_steps=total_steps,
-                timestamp=get_timestamp(),
             ),
         )
 
     def emit_invocation_complete(
-        self,
-        graph_execution_state_id: str,
-        result: dict,
-        invocation_dict: dict,
-        source_node_id: str,
+        self, graph_execution_state_id: str, invocation_id: str, result: Dict
     ) -> None:
         """Emitted when an invocation has completed"""
-        print(result)
         self.__emit_session_event(
             event_name="invocation_complete",
             payload=dict(
                 graph_execution_state_id=graph_execution_state_id,
-                invocation=invocation_dict,
-                source_node_id=source_node_id,
+                invocation_id=invocation_id,
                 result=result,
-                timestamp=get_timestamp(),
             ),
         )
 
     def emit_invocation_error(
-        self,
-        graph_execution_state_id: str,
-        invocation_dict: dict,
-        source_node_id: str,
-        error: str,
+        self, graph_execution_state_id: str, invocation_id: str, error: str
     ) -> None:
         """Emitted when an invocation has completed"""
         self.__emit_session_event(
             event_name="invocation_error",
             payload=dict(
                 graph_execution_state_id=graph_execution_state_id,
-                invocation=invocation_dict,
-                source_node_id=source_node_id,
+                invocation_id=invocation_id,
                 error=error,
-                timestamp=get_timestamp(),
             ),
         )
 
     def emit_invocation_started(
-        self, graph_execution_state_id: str, invocation_dict: dict, source_node_id: str
+        self, graph_execution_state_id: str, invocation_id: str
     ) -> None:
         """Emitted when an invocation has started"""
         self.__emit_session_event(
             event_name="invocation_started",
             payload=dict(
                 graph_execution_state_id=graph_execution_state_id,
-                invocation=invocation_dict,
-                source_node_id=source_node_id,
-                timestamp=get_timestamp(),
+                invocation_id=invocation_id,
             ),
         )
 
@@ -101,8 +84,5 @@ class EventServiceBase:
         """Emitted when a session has completed all invocations"""
         self.__emit_session_event(
             event_name="graph_execution_state_complete",
-            payload=dict(
-                graph_execution_state_id=graph_execution_state_id,
-                timestamp=get_timestamp(),
-            ),
+            payload=dict(graph_execution_state_id=graph_execution_state_id),
         )

invokeai/app/services/image_storage.py

@@ -2,23 +2,21 @@
 
 import datetime
 import os
-import json
 from glob import glob
 from abc import ABC, abstractmethod
+from enum import Enum
 from pathlib import Path
 from queue import Queue
-from typing import Any, Dict, List, Tuple
+from typing import Callable, Dict, List
 
 from PIL.Image import Image
 import PIL.Image as PILImage
-from PIL import PngImagePlugin
+from pydantic import BaseModel
 from invokeai.app.api.models.images import ImageResponse
-from invokeai.app.models.image import  ImageType
-from invokeai.app.modules.metadata import ImageMetadata, InvokeAIMetadata, MetadataModule
+from invokeai.app.models.image import ImageField, ImageType
+from invokeai.app.models.metadata import ImageMetadata
 from invokeai.app.services.item_storage import PaginatedResults
-from invokeai.app.util.get_timestamp import get_timestamp
-from invokeai.app.util.image_paths import build_image_path
-from invokeai.app.util.thumbnails import get_thumbnail_name, make_thumbnail
+from invokeai.app.util.save_thumbnail import save_thumbnail
 
 from invokeai.backend.image_util import PngWriter
 
@@ -28,14 +26,12 @@ class ImageStorageBase(ABC):
 
     @abstractmethod
     def get(self, image_type: ImageType, image_name: str) -> Image:
-        """Retrieves an image as PIL Image."""
         pass
 
     @abstractmethod
     def list(
         self, image_type: ImageType, page: int = 0, per_page: int = 10
     ) -> PaginatedResults[ImageResponse]:
-        """Gets a paginated list of images."""
         pass
 
     # TODO: make this a bit more flexible for e.g. cloud storage
@@ -43,42 +39,32 @@ class ImageStorageBase(ABC):
     def get_path(
         self, image_type: ImageType, image_name: str, is_thumbnail: bool = False
     ) -> str:
-        """Gets the path to an image or its thumbnail."""
-        pass
-
-    # TODO: make this a bit more flexible for e.g. cloud storage
-    @abstractmethod
-    def validate_path(
-        self, path: str
-    ) -> bool:
-        """Validates an image path."""
         pass
 
     @abstractmethod
-    def save(self, image_type: ImageType, image_name: str, image: Image, metadata: InvokeAIMetadata | None = None) -> Tuple[str, str, int]:
-        """Saves an image and a 256x256 WEBP thumbnail. Returns a tuple of the image path, thumbnail path, and created timestamp."""
+    def save(self, image_type: ImageType, image_name: str, image: Image) -> None:
         pass
 
     @abstractmethod
     def delete(self, image_type: ImageType, image_name: str) -> None:
-        """Deletes an image and its thumbnail (if one exists)."""
         pass
 
     def create_name(self, context_id: str, node_id: str) -> str:
-        """Creates a unique contextual image filename."""
-        return f"{context_id}_{node_id}_{str(get_timestamp())}.png"
+        return f"{context_id}_{node_id}_{str(int(datetime.datetime.now(datetime.timezone.utc).timestamp()))}.png"
 
 
 class DiskImageStorage(ImageStorageBase):
     """Stores images on disk"""
 
     __output_folder: str
+    __pngWriter: PngWriter
     __cache_ids: Queue  # TODO: this is an incredibly naive cache
     __cache: Dict[str, Image]
     __max_cache_size: int
 
     def __init__(self, output_folder: str):
         self.__output_folder = output_folder
+        self.__pngWriter = PngWriter(output_folder)
         self.__cache = dict()
         self.__cache_ids = Queue()
         self.__max_cache_size = 10  # TODO: get this from config
@@ -114,22 +100,18 @@ class DiskImageStorage(ImageStorageBase):
         for path in page_of_image_paths:
             filename = os.path.basename(path)
             img = PILImage.open(path)
-            
-            invokeai_metadata = MetadataModule.get_metadata(img)
-
             page_of_images.append(
                 ImageResponse(
                     image_type=image_type.value,
                     image_name=filename,
-                    image_url=build_image_path(image_type.value, filename),
-                    thumbnail_url = build_image_path(image_type.value, filename, True),
-                    # TODO: Creation of this object should happen elsewhere (?), just making it fit here so it works
+                    # TODO: DiskImageStorage should not be building URLs...?
+                    image_url=f"api/v1/images/{image_type.value}/{filename}",
+                    thumbnail_url=f"api/v1/images/{image_type.value}/thumbnails/{os.path.splitext(filename)[0]}.webp",
+                    # TODO: Creation of this object should happen elsewhere, just making it fit here so it works
                     metadata=ImageMetadata(
-                        created=int(os.path.getctime(path)),
+                        timestamp=os.path.getctime(path),
                         width=img.width,
                         height=img.height,
-                        mode=img.mode,
-                        invokeai=invokeai_metadata
                     ),
                 )
             )
@@ -160,45 +142,26 @@ class DiskImageStorage(ImageStorageBase):
     def get_path(
         self, image_type: ImageType, image_name: str, is_thumbnail: bool = False
     ) -> str:
-        # strip out any relative path shenanigans
-        basename = os.path.basename(image_name)
-
         if is_thumbnail:
             path = os.path.join(
-                self.__output_folder, image_type, "thumbnails", basename
+                self.__output_folder, image_type, "thumbnails", image_name
             )
         else:
-            path = os.path.join(self.__output_folder, image_type, basename)
-
+            path = os.path.join(self.__output_folder, image_type, image_name)
         return path
 
-    def validate_path(
-        self, path: str
-    ) -> bool:
-        try:
-            os.stat(path)
-            return True
-        except Exception:
-            return False
-
-
-    def save(self, image_type: ImageType, image_name: str, image: Image, metadata: InvokeAIMetadata | None = None) -> Tuple[str, str, int]:
+    def save(self, image_type: ImageType, image_name: str, image: Image) -> None:
+        image_subpath = os.path.join(image_type, image_name)
+        self.__pngWriter.save_image_and_prompt_to_png(
+            image, "", image_subpath, None
+        )  # TODO: just pass full path to png writer
+        save_thumbnail(
+            image=image,
+            filename=image_name,
+            path=os.path.join(self.__output_folder, image_type, "thumbnails"),
+        )
         image_path = self.get_path(image_type, image_name)
-
-        thumbnail_name = get_thumbnail_name(image_name)
-        thumbnail_path = self.get_path(image_type, thumbnail_name, is_thumbnail=True)
-
-        png_info = MetadataModule.build_png_info(metadata=metadata)
-
-        image.save(image_path, "PNG", pnginfo=png_info)
-
-        thumbnail_image = make_thumbnail(image)
-        thumbnail_image.save(thumbnail_path)
-
         self.__set_cache(image_path, image)
-        self.__set_cache(thumbnail_path, thumbnail_image)
-
-        return (image_path, thumbnail_path, int(os.path.getctime(image_path)))
 
     def delete(self, image_type: ImageType, image_name: str) -> None:
         image_path = self.get_path(image_type, image_name)

invokeai/app/services/processor.py

@@ -43,14 +43,10 @@ class DefaultInvocationProcessor(InvocationProcessorABC):
                     queue_item.invocation_id
                 )
 
-                # get the source node id to provide to clients (the prepared node id is not as useful)
-                source_node_id = graph_execution_state.prepared_source_mapping[invocation.id]
-
                 # Send starting event
                 self.__invoker.services.events.emit_invocation_started(
                     graph_execution_state_id=graph_execution_state.id,
-                    invocation_dict=invocation.dict(),
-                    source_node_id=source_node_id
+                    invocation_id=invocation.id,
                 )
 
                 # Invoke
@@ -79,8 +75,7 @@ class DefaultInvocationProcessor(InvocationProcessorABC):
                     # Send complete event
                     self.__invoker.services.events.emit_invocation_complete(
                         graph_execution_state_id=graph_execution_state.id,
-                        invocation_dict=invocation.dict(),
-                        source_node_id=source_node_id,
+                        invocation_id=invocation.id,
                         result=outputs.dict(),
                     )
 
@@ -104,8 +99,7 @@ class DefaultInvocationProcessor(InvocationProcessorABC):
                     # Send error event
                     self.__invoker.services.events.emit_invocation_error(
                         graph_execution_state_id=graph_execution_state.id,
-                        invocation_dict=invocation.dict(),
-                        source_node_id=source_node_id,
+                        invocation_id=invocation.id,
                         error=error,
                     )
 

invokeai/app/services/sqlite.py

@@ -35,8 +35,7 @@ class SqliteItemStorage(ItemStorageABC, Generic[T]):
         self._create_table()
 
     def _create_table(self):
-        try:
-            self._lock.acquire()
+        with self._lock:
             self._cursor.execute(
                 f"""CREATE TABLE IF NOT EXISTS {self._table_name} (
                 item TEXT,
@@ -45,34 +44,27 @@ class SqliteItemStorage(ItemStorageABC, Generic[T]):
             self._cursor.execute(
                 f"""CREATE UNIQUE INDEX IF NOT EXISTS {self._table_name}_id ON {self._table_name}(id);"""
             )
-        finally:
-            self._lock.release()
+            self._conn.commit()
 
     def _parse_item(self, item: str) -> T:
         item_type = get_args(self.__orig_class__)[0]
         return parse_raw_as(item_type, item)
 
     def set(self, item: T):
-        try:
-            self._lock.acquire()
+        with self._lock:
             self._cursor.execute(
                 f"""INSERT OR REPLACE INTO {self._table_name} (item) VALUES (?);""",
                 (item.json(),),
             )
             self._conn.commit()
-        finally:
-            self._lock.release()
         self._on_changed(item)
 
     def get(self, id: str) -> Union[T, None]:
-        try:
-            self._lock.acquire()
+        with self._lock:
             self._cursor.execute(
                 f"""SELECT item FROM {self._table_name} WHERE id = ?;""", (str(id),)
             )
             result = self._cursor.fetchone()
-        finally:
-            self._lock.release()
 
         if not result:
             return None
@@ -80,19 +72,15 @@ class SqliteItemStorage(ItemStorageABC, Generic[T]):
         return self._parse_item(result[0])
 
     def delete(self, id: str):
-        try:
-            self._lock.acquire()
+        with self._lock:
             self._cursor.execute(
                 f"""DELETE FROM {self._table_name} WHERE id = ?;""", (str(id),)
             )
             self._conn.commit()
-        finally:
-            self._lock.release()
         self._on_deleted(id)
 
     def list(self, page: int = 0, per_page: int = 10) -> PaginatedResults[T]:
-        try:
-            self._lock.acquire()
+        with self._lock:
             self._cursor.execute(
                 f"""SELECT item FROM {self._table_name} LIMIT ? OFFSET ?;""",
                 (per_page, page * per_page),
@@ -103,8 +91,6 @@ class SqliteItemStorage(ItemStorageABC, Generic[T]):
 
             self._cursor.execute(f"""SELECT count(*) FROM {self._table_name};""")
             count = self._cursor.fetchone()[0]
-        finally:
-            self._lock.release()
 
         pageCount = int(count / per_page) + 1
 
@@ -115,8 +101,7 @@ class SqliteItemStorage(ItemStorageABC, Generic[T]):
     def search(
         self, query: str, page: int = 0, per_page: int = 10
     ) -> PaginatedResults[T]:
-        try:
-            self._lock.acquire()
+        with self._lock:
             self._cursor.execute(
                 f"""SELECT item FROM {self._table_name} WHERE item LIKE ? LIMIT ? OFFSET ?;""",
                 (f"%{query}%", per_page, page * per_page),
@@ -130,8 +115,6 @@ class SqliteItemStorage(ItemStorageABC, Generic[T]):
                 (f"%{query}%",),
             )
             count = self._cursor.fetchone()[0]
-        finally:
-            self._lock.release()
 
         pageCount = int(count / per_page) + 1
 

invokeai/app/util/get_timestamp.py

@@ -1,5 +0,0 @@
-import datetime
-
-
-def get_timestamp():
-    return int(datetime.datetime.now(datetime.timezone.utc).timestamp())

invokeai/app/util/image_paths.py

@@ -1,12 +0,0 @@
-from typing import Optional
-from invokeai.app.models.image import ImageType
-from invokeai.app.util.thumbnails import get_thumbnail_name
-
-
-def build_image_path(image_type: ImageType, image_name: str, is_thumbnail: Optional[bool] = False) -> str:
-    """Gets path to access an image"""
-    if is_thumbnail is None:
-        return f"api/v1/images/{image_type}/{image_name}"
-    else:
-        thumbnail_name = get_thumbnail_name(image_name)
-        return f"api/v1/images/{image_type}/thumbnails/{thumbnail_name}"

invokeai/app/util/save_thumbnail.py

@@ -0,0 +1,25 @@
+import os
+from PIL import Image
+
+
+def save_thumbnail(
+    image: Image.Image,
+    filename: str,
+    path: str,
+    size: int = 256,
+) -> str:
+    """
+    Saves a thumbnail of an image, returning its path.
+    """
+    base_filename = os.path.splitext(filename)[0]
+    thumbnail_path = os.path.join(path, base_filename + ".webp")
+
+    if os.path.exists(thumbnail_path):
+        return thumbnail_path
+
+    image_copy = image.copy()
+    image_copy.thumbnail(size=(size, size))
+
+    image_copy.save(thumbnail_path, "WEBP")
+
+    return thumbnail_path

invokeai/app/util/step_callback.py

@@ -1,41 +1,16 @@
-from invokeai.app.api.models.images import ProgressImage
-from invokeai.app.models.exceptions import CanceledException
+import torch
 from ..invocations.baseinvocation import InvocationContext
 from ...backend.util.util import image_to_dataURL
 from ...backend.generator.base import Generator
 from ...backend.stable_diffusion import PipelineIntermediateState
 
-
-def stable_diffusion_step_callback(
+def fast_latents_step_callback(
+    sample: torch.Tensor,
+    step: int,
+    steps: int,
+    id: str,
     context: InvocationContext,
-    intermediate_state: PipelineIntermediateState,
-    invocation_dict: dict,
-    source_node_id: str,
 ):
-    if context.services.queue.is_canceled(context.graph_execution_state_id):
-        raise CanceledException
-
-    # Some schedulers report not only the noisy latents at the current timestep,
-    # but also their estimate so far of what the de-noised latents will be. Use
-    # that estimate if it is available.
-    if intermediate_state.predicted_original is not None:
-        sample = intermediate_state.predicted_original
-    else:
-        sample = intermediate_state.latents
-
-    # TODO: This does not seem to be needed any more?
-    # # txt2img provides a Tensor in the step_callback
-    # # img2img provides a PipelineIntermediateState
-    # if isinstance(sample, PipelineIntermediateState):
-    #     # this was an img2img
-    #     print('img2img')
-    #     latents = sample.latents
-    #     step = sample.step
-    # else:
-    #     print('txt2img')
-    #     latents = sample
-    #     step = intermediate_state.step
-
     # TODO: only output a preview image when requested
     image = Generator.sample_to_lowres_estimated_image(sample)
 
@@ -46,10 +21,23 @@ def stable_diffusion_step_callback(
     dataURL = image_to_dataURL(image, image_format="JPEG")
 
     context.services.events.emit_generator_progress(
-        graph_execution_state_id=context.graph_execution_state_id,
-        invocation_dict=invocation_dict,
-        source_node_id=source_node_id,
-        progress_image=ProgressImage(width=width, height=height, dataURL=dataURL),
-        step=intermediate_state.step,
-        total_steps=invocation_dict["steps"],
+        context.graph_execution_state_id,
+        id,
+        {"width": width, "height": height, "dataURL": dataURL},
+        step,
+        steps,
     )
+
+
+def diffusers_step_callback_adapter(*cb_args, **kwargs):
+    """
+    txt2img gives us a Tensor in the step_callbak, while img2img gives us a PipelineIntermediateState.
+    This adapter grabs the needed data and passes it along to the callback function.
+    """
+    if isinstance(cb_args[0], PipelineIntermediateState):
+        progress_state: PipelineIntermediateState = cb_args[0]
+        return fast_latents_step_callback(
+            progress_state.latents, progress_state.step, **kwargs
+        )
+    else:
+        return fast_latents_step_callback(*cb_args, **kwargs)

invokeai/app/util/thumbnails.py

@@ -1,15 +0,0 @@
-import os
-from PIL import Image
-
-
-def get_thumbnail_name(image_name: str) -> str:
-    """Formats given an image name, returns the appropriate thumbnail image name"""
-    thumbnail_name = os.path.splitext(image_name)[0] + ".webp"
-    return thumbnail_name
-
-
-def make_thumbnail(image: Image.Image, size: int = 256) -> Image.Image:
-    """Makes a thumbnail from a PIL Image"""
-    thumbnail = image.copy()
-    thumbnail.thumbnail(size=(size, size))
-    return thumbnail

invokeai/frontend/web/.eslintignore

@@ -6,5 +6,3 @@ stats.html
 index.html
 .yarn/
 *.scss
-src/services/api/
-src/services/fixtures/*

invokeai/frontend/web/.prettierignore

@@ -3,8 +3,4 @@ dist/
 node_modules/
 patches/
 stats.html
-index.html
 .yarn/
-*.scss
-src/services/api/
-src/services/fixtures/*

invokeai/frontend/web/README.md

@@ -1,16 +1,10 @@
 # InvokeAI Web UI
 
-- [InvokeAI Web UI](#invokeai-web-ui)
-  - [Stack](#stack)
-  - [Contributing](#contributing)
-    - [Dev Environment](#dev-environment)
-    - [Production builds](#production-builds)
-
 The UI is a fairly straightforward Typescript React app. The only really fancy stuff is the Unified Canvas.
 
 Code in `invokeai/frontend/web/` if you want to have a look.
 
-## Stack
+## Details
 
 State management is Redux via [Redux Toolkit](https://github.com/reduxjs/redux-toolkit). Communication with server is a mix of HTTP and [socket.io](https://github.com/socketio/socket.io-client) (with a custom redux middleware to help).
 
@@ -38,7 +32,7 @@ Start everything in dev mode:
 
 1. Start the dev server: `yarn dev`
 2. Start the InvokeAI UI per usual: `invokeai --web`
-3. Point your browser to the dev server address e.g. <http://localhost:5173/>
+3. Point your browser to the dev server address e.g. `http://localhost:5173/`
 
 ### Production builds
 

invokeai/frontend/web/docs/API_CLIENT.md

@@ -1,87 +0,0 @@
-# Generated axios API client
-
-- [Generated axios API client](#generated-axios-api-client)
-  - [Generation](#generation)
-    - [Generate the API client from the nodes web server](#generate-the-api-client-from-the-nodes-web-server)
-    - [Generate the API client from JSON](#generate-the-api-client-from-json)
-      - [Getting the JSON from the nodes web server](#getting-the-json-from-the-nodes-web-server)
-      - [Getting the JSON with a python script](#getting-the-json-with-a-python-script)
-      - [Generate the API client](#generate-the-api-client)
-  - [The generated client](#the-generated-client)
-  - [API client customisation](#api-client-customisation)
-
-This API client is generated by an [openapi code generator](https://github.com/ferdikoomen/openapi-typescript-codegen).
-
-All files in `invokeai/frontend/web/src/services/api/` are made by the generator.
-
-## Generation
-
-The axios client may be generated by from the OpenAPI schema from the nodes web server, or from JSON.
-
-### Generate the API client from the nodes web server
-
-We need to start the nodes web server, which serves the OpenAPI schema to the generator.
-
-1. Start the nodes web server.
-
-```bash
-# from the repo root
-python scripts/invoke-new.py --web
-```
-
-2. Generate the API client.
-
-```bash
-# from invokeai/frontend/web/
-yarn api:web
-```
-
-### Generate the API client from JSON
-
-The JSON can be acquired from the nodes web server, or with a python script.
-
-#### Getting the JSON from the nodes web server
-
-Start the nodes web server as described above, then download the file.
-
-```bash
-# from invokeai/frontend/web/
-curl http://localhost:9090/openapi.json -o openapi.json
-```
-
-#### Getting the JSON with a python script
-
-Run this python script from the repo root, so it can access the nodes server modules.
-
-The script will output `openapi.json` in the repo root. Then we need to move it to `invokeai/frontend/web/`.
-
-```bash
-# from the repo root
-python invokeai/app/util/generate_openapi_json.py
-mv invokeai/app/util/openapi.json invokeai/frontend/web/services/fixtures/
-```
-
-#### Generate the API client
-
-Now we can generate the API client from the JSON.
-
-```bash
-# from invokeai/frontend/web/
-yarn api:file
-```
-
-## The generated client
-
-The client will be written to `invokeai/frontend/web/services/api/`:
-
-- `axios` client
-- TS types
-- An easily parseable schema, which we can use to generate UI
-
-## API client customisation
-
-The generator has a default `request.ts` file that implements a base `axios` client. The generated client uses this base client.
-
-One shortcoming of this is base client is it does not provide response headers unless the response body is empty. To fix this, we provide our own lightly-patched `request.ts`.
-
-To access the headers, call `getHeaders(response)` on any response from the generated api client. This function is exported from `invokeai/frontend/web/src/services/util/getHeaders.ts`.

invokeai/frontend/web/docs/EVENTS.md

@@ -1,21 +0,0 @@
-# Events
-
-Events via `socket.io`
-
-## `actions.ts`
-
-Redux actions for all socket events. Payloads all include a timestamp, and optionally some other data.
-
-Any reducer (or middleware) can respond to the actions.
-
-## `middleware.ts`
-
-Redux middleware for events.
-
-Handles dispatching the event actions. Only put logic here if it can't really go anywhere else.
-
-For example, on connect we want to load images to the gallery if it's not populated. This requires dispatching a thunk, so we need to directly dispatch this in the middleware.
-
-## `types.ts`
-
-Hand-written types for the socket events. Cannot generate these from the server, but fortunately they are few and simple.

invokeai/frontend/web/docs/NODE_EDITOR.md

@@ -1,17 +0,0 @@
-# Node Editor Design
-
-WIP
-
-nodes
-
-everything in `src/features/nodes/`
-
-have a look at `state.nodes.invocation`
-
-- on socket connect, if no schema saved, fetch `localhost:9090/openapi.json`, save JSON to `state.nodes.schema`
-- on fulfilled schema fetch, `parseSchema()` the schema. this outputs a `Record<string, Invocation>` which is saved to `state.nodes.invocations` - `Invocation` is like a template for the node
-- when you add a node, the the `Invocation` template is passed to `InvocationComponent.tsx` to build the UI component for that node
-- inputs/outputs have field types - and each field type gets an `FieldComponent` which includes a dispatcher to write state changes to redux `nodesSlice`
-- `reactflow` sends changes to nodes/edges to redux
-- to invoke, `buildNodesGraph()` state, then send this
-- changed onClick Invoke button actions to build the schema, then when schema builds it dispatches the actual network request to create the session - see `session.ts`

invokeai/frontend/web/docs/PACKAGE_SCRIPTS.md

@@ -1,29 +0,0 @@
-# Package Scripts
-
-WIP walkthrough of `package.json` scripts.
-
-## `theme` & `theme:watch`
-
-These run the Chakra CLI to generate types for the theme, or watch for code change and re-generate the types.
-
-The CLI essentially monkeypatches Chakra's files in `node_modules`.
-
-## `postinstall`
-
-The `postinstall` script patches a few packages and runs the Chakra CLI to generate types for the theme.
-
-### Patch `@chakra-ui/cli`
-
-See: <https://github.com/chakra-ui/chakra-ui/issues/7394>
-
-### Patch `redux-persist`
-
-We want to persist the canvas state to `localStorage` but many canvas operations change data very quickly, so we need to debounce the writes to `localStorage`.
-
-`redux-persist` is unfortunately unmaintained. The repo's current code is nonfunctional, but the last release's code depends on a package that was removed from `npm` for being malware, so we cannot just fork it.
-
-So, we have to patch it directly. Perhaps a better way would be to write a debounced storage adapter, but I couldn't figure out how to do that.
-
-### Patch `redux-deep-persist`
-
-This package makes blacklisting and whitelisting persist configs very simple, but we have to patch it to match `redux-persist` for the types to work.

invokeai/frontend/web/index.d.ts

@@ -1,7 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 import { IAIPopoverProps } from '../web/src/common/components/IAIPopover';
 import { IAIIconButtonProps } from '../web/src/common/components/IAIIconButton';
-import { InvokeTabName } from 'features/ui/store/tabMap';
 
 export {};
 
@@ -65,25 +64,9 @@ declare module '@invoke-ai/invoke-ai-ui' {
   declare class SettingsModal extends React.Component<SettingsModalProps> {
     public constructor(props: SettingsModalProps);
   }
-
-  declare class StatusIndicator extends React.Component<StatusIndicatorProps> {
-    public constructor(props: StatusIndicatorProps);
-  }
-
-  declare class ModelSelect extends React.Component<ModelSelectProps> {
-    public constructor(props: ModelSelectProps);
-  }
 }
 
-interface InvokeProps extends PropsWithChildren {
-  apiUrl?: string;
-  disabledPanels?: string[];
-  disabledTabs?: InvokeTabName[];
-  token?: string;
-  shouldTransformUrls?: boolean;
-}
-
-declare function Invoke(props: InvokeProps): JSX.Element;
+declare function Invoke(props: PropsWithChildren): JSX.Element;
 
 export {
   ThemeChanger,
@@ -91,7 +74,5 @@ export {
   IAIPopover,
   IAIIconButton,
   SettingsModal,
-  StatusIndicator,
-  ModelSelect,
 };
 export = Invoke;

invokeai/frontend/web/package.json

@@ -5,10 +5,7 @@
   "scripts": {
     "prepare": "cd ../../../ && husky install invokeai/frontend/web/.husky",
     "dev": "concurrently \"vite dev\" \"yarn run theme:watch\"",
-    "dev:nodes": "concurrently \"vite dev --mode nodes\" \"yarn run theme:watch\"",
     "build": "yarn run lint && vite build",
-    "api:web": "openapi -i http://localhost:9090/openapi.json -o src/services/api --client axios --useOptions --useUnionTypes --exportSchemas true --indent 2 --request src/services/fixtures/request.ts",
-    "api:file": "openapi -i src/services/fixtures/openapi.json -o src/services/api --client axios --useOptions --useUnionTypes --exportSchemas true --indent 2 --request src/services/fixtures/request.ts",
     "preview": "vite preview",
     "lint:madge": "madge --circular src/main.tsx",
     "lint:eslint": "eslint --max-warnings=0 .",
@@ -44,11 +41,9 @@
     "@chakra-ui/react": "^2.5.1",
     "@chakra-ui/styled-system": "^2.6.1",
     "@chakra-ui/theme-tools": "^2.0.16",
-    "@dagrejs/graphlib": "^2.1.12",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
-    "@fontsource/inter": "^4.5.15",
-    "@reduxjs/toolkit": "^1.9.3",
+    "@reduxjs/toolkit": "^1.9.2",
     "chakra-ui-contextmenu": "^1.0.5",
     "dateformat": "^5.0.3",
     "formik": "^2.2.9",
@@ -72,17 +67,15 @@
     "react-redux": "^8.0.5",
     "react-transition-group": "^4.4.5",
     "react-zoom-pan-pinch": "^2.6.1",
-    "reactflow": "^11.7.0",
     "redux-deep-persist": "^1.0.7",
-    "redux-dynamic-middlewares": "^2.2.0",
     "redux-persist": "^6.0.0",
     "socket.io-client": "^4.6.0",
     "use-image": "^1.1.0",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
+    "@fontsource/inter": "^4.5.15",
     "@types/dateformat": "^5.0.0",
-    "@types/lodash": "^4.14.194",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@types/react-transition-group": "^4.4.5",
@@ -90,7 +83,6 @@
     "@typescript-eslint/eslint-plugin": "^5.52.0",
     "@typescript-eslint/parser": "^5.52.0",
     "@vitejs/plugin-react-swc": "^3.2.0",
-    "axios": "^1.3.4",
     "babel-plugin-transform-imports": "^2.0.0",
     "concurrently": "^7.6.0",
     "eslint": "^8.34.0",
@@ -98,17 +90,13 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "form-data": "^4.0.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.1.2",
     "madge": "^6.0.0",
-    "openapi-types": "^12.1.0",
-    "openapi-typescript-codegen": "^0.23.0",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.8.4",
     "rollup-plugin-visualizer": "^5.9.0",
     "terser": "^5.16.4",
-    "typescript": "4.9.5",
     "vite": "^4.1.2",
     "vite-plugin-eslint": "^1.8.1",
     "vite-tsconfig-paths": "^4.0.5",

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

@@ -52,7 +52,6 @@
         "txt2img": "Text To Image",
         "img2img": "Image To Image",
         "unifiedCanvas": "Unified Canvas",
-        "linear": "Linear",
         "nodes": "Nodes",
         "postprocessing": "Post Processing",
         "nodesDesc": "A node based system for the generation of images is under development currently. Stay tuned for updates about this amazing feature.",
@@ -525,10 +524,6 @@
         "resetComplete": "Web UI has been reset. Refresh the page to reload."
     },
     "toast": {
-        "serverError": "Server Error",
-        "disconnected": "Disconnected from Server",
-        "connected": "Connected to Server",
-        "canceled": "Processing Canceled",
         "tempFoldersEmptied": "Temp Folder Emptied",
         "uploadFailed": "Upload failed",
         "uploadFailedMultipleImagesDesc": "Multiple images pasted, may only upload one image at a time",

invokeai/frontend/web/src/app/App.tsx

@@ -13,42 +13,16 @@ import { Box, Flex, Grid, Portal, useColorMode } from '@chakra-ui/react';
 import { APP_HEIGHT, APP_WIDTH } from 'theme/util/constants';
 import ImageGalleryPanel from 'features/gallery/components/ImageGalleryPanel';
 import Lightbox from 'features/lightbox/components/Lightbox';
-import { useAppDispatch, useAppSelector } from './storeHooks';
+import { useAppSelector } from './storeHooks';
 import { PropsWithChildren, useEffect } from 'react';
-import { setDisabledPanels, setDisabledTabs } from 'features/ui/store/uiSlice';
-import { InvokeTabName } from 'features/ui/store/tabMap';
-import { shouldTransformUrlsChanged } from 'features/system/store/systemSlice';
 
 keepGUIAlive();
 
-interface Props extends PropsWithChildren {
-  options: {
-    disabledPanels: string[];
-    disabledTabs: InvokeTabName[];
-    shouldTransformUrls?: boolean;
-  };
-}
-
-const App = (props: Props) => {
+const App = (props: PropsWithChildren) => {
   useToastWatcher();
 
   const currentTheme = useAppSelector((state) => state.ui.currentTheme);
   const { setColorMode } = useColorMode();
-  const dispatch = useAppDispatch();
-
-  useEffect(() => {
-    dispatch(setDisabledPanels(props.options.disabledPanels));
-  }, [dispatch, props.options.disabledPanels]);
-
-  useEffect(() => {
-    dispatch(setDisabledTabs(props.options.disabledTabs));
-  }, [dispatch, props.options.disabledTabs]);
-
-  useEffect(() => {
-    dispatch(
-      shouldTransformUrlsChanged(Boolean(props.options.shouldTransformUrls))
-    );
-  }, [dispatch, props.options.shouldTransformUrls]);
 
   useEffect(() => {
     setColorMode(['light'].includes(currentTheme) ? 'light' : 'dark');

invokeai/frontend/web/src/app/invokeai.d.ts

@@ -14,8 +14,6 @@
 
 import { InvokeTabName } from 'features/ui/store/tabMap';
 import { IRect } from 'konva/lib/types';
-import { ImageMetadata, ImageType } from 'services/api';
-import { AnyInvocation } from 'services/events/types';
 
 /**
  * TODO:
@@ -115,7 +113,7 @@ export declare type Metadata = SystemGenerationMetadata & {
 };
 
 // An Image has a UUID, url, modified timestamp, width, height and maybe metadata
-export declare type _Image = {
+export declare type Image = {
   uuid: string;
   url: string;
   thumbnail: string;
@@ -126,23 +124,11 @@ export declare type _Image = {
   category: GalleryCategory;
   isBase64?: boolean;
   dreamPrompt?: 'string';
-  name?: string;
-};
-
-/**
- * ResultImage
- */
-export declare type Image = {
-  name: string;
-  type: ImageType;
-  url: string;
-  thumbnail: string;
-  metadata: ImageMetadata;
 };
 
 // GalleryImages is an array of Image.
 export declare type GalleryImages = {
-  images: Array<_Image>;
+  images: Array<Image>;
 };
 
 /**
@@ -289,7 +275,7 @@ export declare type SystemStatusResponse = SystemStatus;
 
 export declare type SystemConfigResponse = SystemConfig;
 
-export declare type ImageResultResponse = Omit<_Image, 'uuid'> & {
+export declare type ImageResultResponse = Omit<Image, 'uuid'> & {
   boundingBox?: IRect;
   generationMode: InvokeTabName;
 };
@@ -310,7 +296,7 @@ export declare type ErrorResponse = {
 };
 
 export declare type GalleryImagesResponse = {
-  images: Array<Omit<_Image, 'uuid'>>;
+  images: Array<Omit<Image, 'uuid'>>;
   areMoreImagesAvailable: boolean;
   category: GalleryCategory;
 };

invokeai/frontend/web/src/app/selectors/readinessSelector.ts

@@ -20,7 +20,6 @@ export const readinessSelector = createSelector(
       seedWeights,
       initialImage,
       seed,
-      isImageToImageEnabled,
     } = generation;
 
     const { isProcessing, isConnected } = system;
@@ -34,7 +33,7 @@ export const readinessSelector = createSelector(
       reasonsWhyNotReady.push('Missing prompt');
     }
 
-    if (isImageToImageEnabled && !initialImage) {
+    if (activeTabName === 'img2img' && !initialImage) {
       isReady = false;
       reasonsWhyNotReady.push('No initial image selected');
     }

invokeai/frontend/web/src/app/socketio/actions.ts

@@ -13,13 +13,9 @@ import { InvokeTabName } from 'features/ui/store/tabMap';
 export const generateImage = createAction<InvokeTabName>(
   'socketio/generateImage'
 );
-export const runESRGAN = createAction<InvokeAI._Image>('socketio/runESRGAN');
-export const runFacetool = createAction<InvokeAI._Image>(
-  'socketio/runFacetool'
-);
-export const deleteImage = createAction<InvokeAI._Image>(
-  'socketio/deleteImage'
-);
+export const runESRGAN = createAction<InvokeAI.Image>('socketio/runESRGAN');
+export const runFacetool = createAction<InvokeAI.Image>('socketio/runFacetool');
+export const deleteImage = createAction<InvokeAI.Image>('socketio/deleteImage');
 export const requestImages = createAction<GalleryCategory>(
   'socketio/requestImages'
 );

invokeai/frontend/web/src/app/socketio/emitters.ts

@@ -91,7 +91,7 @@ const makeSocketIOEmitters = (
         })
       );
     },
-    emitRunESRGAN: (imageToProcess: InvokeAI._Image) => {
+    emitRunESRGAN: (imageToProcess: InvokeAI.Image) => {
       dispatch(setIsProcessing(true));
 
       const {
@@ -119,7 +119,7 @@ const makeSocketIOEmitters = (
         })
       );
     },
-    emitRunFacetool: (imageToProcess: InvokeAI._Image) => {
+    emitRunFacetool: (imageToProcess: InvokeAI.Image) => {
       dispatch(setIsProcessing(true));
 
       const {
@@ -150,7 +150,7 @@ const makeSocketIOEmitters = (
         })
       );
     },
-    emitDeleteImage: (imageToDelete: InvokeAI._Image) => {
+    emitDeleteImage: (imageToDelete: InvokeAI.Image) => {
       const { url, uuid, category, thumbnail } = imageToDelete;
       dispatch(removeImage(imageToDelete));
       socketio.emit('deleteImage', url, thumbnail, uuid, category);

invokeai/frontend/web/src/app/socketio/listeners.ts

@@ -34,9 +34,8 @@ import type { RootState } from 'app/store';
 import { addImageToStagingArea } from 'features/canvas/store/canvasSlice';
 import {
   clearInitialImage,
-  initialImageSelected,
   setInfillMethod,
-  // setInitialImage,
+  setInitialImage,
   setMaskPath,
 } from 'features/parameters/store/generationSlice';
 import { tabMap } from 'features/ui/store/tabMap';
@@ -143,17 +142,15 @@ const makeSocketIOListeners = (
           }
         }
 
-        // TODO: fix
-        // if (shouldLoopback) {
-        //   const activeTabName = tabMap[activeTab];
-        //   switch (activeTabName) {
-        //     case 'img2img': {
-        //       dispatch(initialImageSelected(newImage.uuid));
-        //       // dispatch(setInitialImage(newImage));
-        //       break;
-        //     }
-        //   }
-        // }
+        if (shouldLoopback) {
+          const activeTabName = tabMap[activeTab];
+          switch (activeTabName) {
+            case 'img2img': {
+              dispatch(setInitialImage(newImage));
+              break;
+            }
+          }
+        }
 
         dispatch(clearIntermediateImage());
 
@@ -265,7 +262,7 @@ const makeSocketIOListeners = (
        */
 
       // Generate a UUID for each image
-      const preparedImages = images.map((image): InvokeAI._Image => {
+      const preparedImages = images.map((image): InvokeAI.Image => {
         return {
           uuid: uuidv4(),
           ...image,
@@ -337,7 +334,7 @@ const makeSocketIOListeners = (
 
       if (
         initialImage === url ||
-        (initialImage as InvokeAI._Image)?.url === url
+        (initialImage as InvokeAI.Image)?.url === url
       ) {
         dispatch(clearInitialImage());
       }

invokeai/frontend/web/src/app/socketio/middleware.ts

@@ -29,8 +29,6 @@ export const socketioMiddleware = () => {
     path: `${window.location.pathname}socket.io`,
   });
 
-  socketio.disconnect();
-
   let areListenersSet = false;
 
   const middleware: Middleware = (store) => (next) => (action) => {

invokeai/frontend/web/src/app/store.ts

@@ -2,32 +2,18 @@ import { combineReducers, configureStore } from '@reduxjs/toolkit';
 
 import { persistReducer } from 'redux-persist';
 import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web
-import dynamicMiddlewares from 'redux-dynamic-middlewares';
+
 import { getPersistConfig } from 'redux-deep-persist';
 
 import canvasReducer from 'features/canvas/store/canvasSlice';
 import galleryReducer from 'features/gallery/store/gallerySlice';
-import resultsReducer from 'features/gallery/store/resultsSlice';
-import uploadsReducer from 'features/gallery/store/uploadsSlice';
 import lightboxReducer from 'features/lightbox/store/lightboxSlice';
 import generationReducer from 'features/parameters/store/generationSlice';
 import postprocessingReducer from 'features/parameters/store/postprocessingSlice';
 import systemReducer from 'features/system/store/systemSlice';
 import uiReducer from 'features/ui/store/uiSlice';
-import modelsReducer from 'features/system/store/modelSlice';
-import nodesReducer from 'features/nodes/store/nodesSlice';
 
 import { socketioMiddleware } from './socketio/middleware';
-import { socketMiddleware } from 'services/events/middleware';
-import { canvasBlacklist } from 'features/canvas/store/canvasPersistBlacklist';
-import { galleryBlacklist } from 'features/gallery/store/galleryPersistBlacklist';
-import { generationBlacklist } from 'features/parameters/store/generationPersistBlacklist';
-import { lightboxBlacklist } from 'features/lightbox/store/lightboxPersistBlacklist';
-import { modelsBlacklist } from 'features/system/store/modelsPersistBlacklist';
-import { nodesBlacklist } from 'features/nodes/store/nodesPersistBlacklist';
-import { postprocessingBlacklist } from 'features/parameters/store/postprocessingPersistBlacklist';
-import { systemBlacklist } from 'features/system/store/systemPersistsBlacklist';
-import { uiBlacklist } from 'features/ui/store/uiPersistBlacklist';
 
 /**
  * redux-persist provides an easy and reliable way to persist state across reloads.
@@ -43,18 +29,49 @@ import { uiBlacklist } from 'features/ui/store/uiPersistBlacklist';
  * The necesssary nested persistors with blacklists are configured below.
  */
 
+const canvasBlacklist = [
+  'cursorPosition',
+  'isCanvasInitialized',
+  'doesCanvasNeedScaling',
+].map((blacklistItem) => `canvas.${blacklistItem}`);
+
+const systemBlacklist = [
+  'currentIteration',
+  'currentStatus',
+  'currentStep',
+  'isCancelable',
+  'isConnected',
+  'isESRGANAvailable',
+  'isGFPGANAvailable',
+  'isProcessing',
+  'socketId',
+  'totalIterations',
+  'totalSteps',
+  'openModel',
+  'cancelOptions.cancelAfter',
+].map((blacklistItem) => `system.${blacklistItem}`);
+
+const galleryBlacklist = [
+  'categories',
+  'currentCategory',
+  'currentImage',
+  'currentImageUuid',
+  'shouldAutoSwitchToNewImages',
+  'intermediateImage',
+].map((blacklistItem) => `gallery.${blacklistItem}`);
+
+const lightboxBlacklist = ['isLightboxOpen'].map(
+  (blacklistItem) => `lightbox.${blacklistItem}`
+);
+
 const rootReducer = combineReducers({
-  canvas: canvasReducer,
-  gallery: galleryReducer,
   generation: generationReducer,
-  lightbox: lightboxReducer,
-  models: modelsReducer,
-  nodes: nodesReducer,
   postprocessing: postprocessingReducer,
-  results: resultsReducer,
+  gallery: galleryReducer,
   system: systemReducer,
+  canvas: canvasReducer,
   ui: uiReducer,
-  uploads: uploadsReducer,
+  lightbox: lightboxReducer,
 });
 
 const rootPersistConfig = getPersistConfig({
@@ -63,40 +80,23 @@ const rootPersistConfig = getPersistConfig({
   rootReducer,
   blacklist: [
     ...canvasBlacklist,
-    ...galleryBlacklist,
-    ...generationBlacklist,
-    ...lightboxBlacklist,
-    ...modelsBlacklist,
-    ...nodesBlacklist,
-    ...postprocessingBlacklist,
-    // ...resultsBlacklist,
-    'results',
     ...systemBlacklist,
-    ...uiBlacklist,
-    // ...uploadsBlacklist,
-    'uploads',
+    ...galleryBlacklist,
+    ...lightboxBlacklist,
   ],
   debounce: 300,
 });
 
 const persistedReducer = persistReducer(rootPersistConfig, rootReducer);
 
-// TODO: rip the old middleware out when nodes is complete
-export function buildMiddleware() {
-  if (import.meta.env.MODE === 'nodes' || import.meta.env.MODE === 'package') {
-    return socketMiddleware();
-  } else {
-    return socketioMiddleware();
-  }
-}
-
+// Continue with store setup
 export const store = configureStore({
   reducer: persistedReducer,
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({
       immutableCheck: false,
       serializableCheck: false,
-    }).concat(dynamicMiddlewares),
+    }).concat(socketioMiddleware()),
   devTools: {
     // Uncommenting these very rapidly called actions makes the redux dev tools output much more readable
     actionsDenylist: [

invokeai/frontend/web/src/app/storeUtils.ts

@@ -1,8 +0,0 @@
-import { createAsyncThunk } from '@reduxjs/toolkit';
-import { AppDispatch, RootState } from './store';
-
-// https://redux-toolkit.js.org/usage/usage-with-typescript#defining-a-pre-typed-createasyncthunk
-export const createAppAsyncThunk = createAsyncThunk.withTypes<{
-  state: RootState;
-  dispatch: AppDispatch;
-}>();

invokeai/frontend/web/src/common/components/IAISlider.tsx

@@ -44,10 +44,12 @@ export type IAIFullSliderProps = {
   inputReadOnly?: boolean;
   withReset?: boolean;
   handleReset?: () => void;
+  isResetDisabled?: boolean;
+  isSliderDisabled?: boolean;
+  isInputDisabled?: boolean;
   tooltipSuffix?: string;
   hideTooltip?: boolean;
   isCompact?: boolean;
-  isDisabled?: boolean;
   sliderFormControlProps?: FormControlProps;
   sliderFormLabelProps?: FormLabelProps;
   sliderMarkProps?: Omit<SliderMarkProps, 'value'>;
@@ -78,8 +80,10 @@ const IAISlider = (props: IAIFullSliderProps) => {
     withReset = false,
     hideTooltip = false,
     isCompact = false,
-    isDisabled = false,
     handleReset,
+    isResetDisabled,
+    isSliderDisabled,
+    isInputDisabled,
     sliderFormControlProps,
     sliderFormLabelProps,
     sliderMarkProps,
@@ -145,7 +149,6 @@ const IAISlider = (props: IAIFullSliderProps) => {
             }
           : {}
       }
-      isDisabled={isDisabled}
       {...sliderFormControlProps}
     >
       <FormLabel {...sliderFormLabelProps} mb={-1}>
@@ -163,13 +166,15 @@ const IAISlider = (props: IAIFullSliderProps) => {
           onMouseEnter={() => setShowTooltip(true)}
           onMouseLeave={() => setShowTooltip(false)}
           focusThumbOnChange={false}
-          isDisabled={isDisabled}
+          isDisabled={isSliderDisabled}
+          // width={width}
           {...rest}
         >
           {withSliderMarks && (
             <>
               <SliderMark
                 value={min}
+                // insetInlineStart={0}
                 sx={{
                   insetInlineStart: '0 !important',
                   insetInlineEnd: 'unset !important',
@@ -180,6 +185,7 @@ const IAISlider = (props: IAIFullSliderProps) => {
               </SliderMark>
               <SliderMark
                 value={max}
+                // insetInlineEnd={0}
                 sx={{
                   insetInlineStart: 'unset !important',
                   insetInlineEnd: '0 !important',
@@ -215,6 +221,7 @@ const IAISlider = (props: IAIFullSliderProps) => {
             value={localInputValue}
             onChange={handleInputChange}
             onBlur={handleInputBlur}
+            isDisabled={isInputDisabled}
             {...sliderNumberInputProps}
           >
             <NumberInputField
@@ -239,8 +246,8 @@ const IAISlider = (props: IAIFullSliderProps) => {
             aria-label={t('accessibility.reset')}
             tooltip="Reset"
             icon={<BiReset />}
-            isDisabled={isDisabled}
             onClick={handleResetDisable}
+            isDisabled={isResetDisabled}
             {...sliderIAIIconButtonProps}
           />
         )}

invokeai/frontend/web/src/common/components/ImageToImageOverlay.tsx

@@ -1,79 +0,0 @@
-import { Badge, Box, ButtonGroup, Flex } from '@chakra-ui/react';
-import { RootState } from 'app/store';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
-import { clearInitialImage } from 'features/parameters/store/generationSlice';
-import { useCallback } from 'react';
-import IAIIconButton from 'common/components/IAIIconButton';
-import { FaUndo, FaUpload } from 'react-icons/fa';
-import { useTranslation } from 'react-i18next';
-import { Image } from 'app/invokeai';
-
-type ImageToImageOverlayProps = {
-  setIsLoaded: (isLoaded: boolean) => void;
-  image: Image;
-};
-
-const ImageToImageOverlay = ({
-  setIsLoaded,
-  image,
-}: ImageToImageOverlayProps) => {
-  const isImageToImageEnabled = useAppSelector(
-    (state: RootState) => state.generation.isImageToImageEnabled
-  );
-  const dispatch = useAppDispatch();
-  const { t } = useTranslation();
-  const handleResetInitialImage = useCallback(() => {
-    dispatch(clearInitialImage());
-    setIsLoaded(false);
-  }, [dispatch, setIsLoaded]);
-
-  return (
-    <Box
-      sx={{
-        top: 0,
-        left: 0,
-        w: 'full',
-        h: 'full',
-        position: 'absolute',
-      }}
-    >
-      <ButtonGroup
-        sx={{
-          position: 'absolute',
-          top: 0,
-          right: 0,
-          p: 2,
-        }}
-      >
-        <IAIIconButton
-          size="sm"
-          isDisabled={!isImageToImageEnabled}
-          icon={<FaUndo />}
-          aria-label={t('accessibility.reset')}
-          onClick={handleResetInitialImage}
-        />
-        <IAIIconButton
-          size="sm"
-          isDisabled={!isImageToImageEnabled}
-          icon={<FaUpload />}
-          aria-label={t('common.upload')}
-        />
-      </ButtonGroup>
-      <Flex
-        sx={{
-          position: 'absolute',
-          bottom: 0,
-          left: 0,
-          p: 2,
-          alignItems: 'flex-start',
-        }}
-      >
-        <Badge variant="solid" colorScheme="base">
-          {image.metadata?.width} × {image.metadata?.height}
-        </Badge>
-      </Flex>
-    </Box>
-  );
-};
-
-export default ImageToImageOverlay;

invokeai/frontend/web/src/common/components/ImageUploader.tsx

@@ -2,6 +2,7 @@ import { Box, useToast } from '@chakra-ui/react';
 import { ImageUploaderTriggerContext } from 'app/contexts/ImageUploaderTriggerContext';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import useImageUploader from 'common/hooks/useImageUploader';
+import { uploadImage } from 'features/gallery/store/thunks/uploadImage';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { ResourceKey } from 'i18next';
 import {
@@ -14,7 +15,6 @@ import {
 } from 'react';
 import { FileRejection, useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
-import { imageUploaded } from 'services/thunks/image';
 import ImageUploadOverlay from './ImageUploadOverlay';
 
 type ImageUploaderProps = {
@@ -49,7 +49,7 @@ const ImageUploader = (props: ImageUploaderProps) => {
 
   const fileAcceptedCallback = useCallback(
     async (file: File) => {
-      dispatch(imageUploaded({ formData: { file } }));
+      dispatch(uploadImage({ imageFile: file }));
     },
     [dispatch]
   );
@@ -124,7 +124,7 @@ const ImageUploader = (props: ImageUploaderProps) => {
         return;
       }
 
-      dispatch(imageUploaded({ formData: { file } }));
+      dispatch(uploadImage({ imageFile: file }));
     };
     document.addEventListener('paste', pasteImageListener);
     return () => {

invokeai/frontend/web/src/common/components/SelectImagePlaceholder.tsx

@@ -1,12 +0,0 @@
-import { Flex, Icon } from '@chakra-ui/react';
-import { FaImage } from 'react-icons/fa';
-
-const SelectImagePlaceholder = () => {
-  return (
-    <Flex sx={{ h: 36, alignItems: 'center', justifyContent: 'center' }}>
-      <Icon color="base.400" boxSize={32} as={FaImage}></Icon>
-    </Flex>
-  );
-};
-
-export default SelectImagePlaceholder;

invokeai/frontend/web/src/common/components/WorkInProgress/NodesWIP.tsx

@@ -1,160 +1,27 @@
-// import WorkInProgress from './WorkInProgress';
-// import ReactFlow, {
-//   applyEdgeChanges,
-//   applyNodeChanges,
-//   Background,
-//   Controls,
-//   Edge,
-//   Handle,
-//   Node,
-//   NodeTypes,
-//   OnEdgesChange,
-//   OnNodesChange,
-//   Position,
-// } from 'reactflow';
+import { Flex, Heading, Text, VStack } from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
+import WorkInProgress from './WorkInProgress';
 
-// import 'reactflow/dist/style.css';
-// import {
-//   Fragment,
-//   FunctionComponent,
-//   ReactNode,
-//   useCallback,
-//   useMemo,
-//   useState,
-// } from 'react';
-// import { OpenAPIV3 } from 'openapi-types';
-// import { filter, map, reduce } from 'lodash';
-// import {
-//   Box,
-//   Flex,
-//   FormControl,
-//   FormLabel,
-//   Input,
-//   Select,
-//   Switch,
-//   Text,
-//   NumberInput,
-//   NumberInputField,
-//   NumberInputStepper,
-//   NumberIncrementStepper,
-//   NumberDecrementStepper,
-//   Tooltip,
-//   chakra,
-//   Badge,
-//   Heading,
-//   VStack,
-//   HStack,
-//   Menu,
-//   MenuButton,
-//   MenuList,
-//   MenuItem,
-//   MenuItemOption,
-//   MenuGroup,
-//   MenuOptionGroup,
-//   MenuDivider,
-//   IconButton,
-// } from '@chakra-ui/react';
-// import { FaPlus } from 'react-icons/fa';
-// import {
-//   FIELD_NAMES as FIELD_NAMES,
-//   FIELDS,
-//   INVOCATION_NAMES as INVOCATION_NAMES,
-//   INVOCATIONS,
-// } from 'features/nodeEditor/constants';
-
-// console.log('invocations', INVOCATIONS);
-
-// const nodeTypes = reduce(
-//   INVOCATIONS,
-//   (acc, val, key) => {
-//     acc[key] = val.component;
-//     return acc;
-//   },
-//   {} as NodeTypes
-// );
-
-// console.log('nodeTypes', nodeTypes);
-
-// // make initial nodes one of every node for now
-// let n = 0;
-// const initialNodes = map(INVOCATIONS, (i) => ({
-//   id: i.type,
-//   type: i.title,
-//   position: { x: (n += 20), y: (n += 20) },
-//   data: {},
-// }));
-
-// console.log('initialNodes', initialNodes);
-
-// export default function NodesWIP() {
-//   const [nodes, setNodes] = useState<Node[]>([]);
-//   const [edges, setEdges] = useState<Edge[]>([]);
-
-//   const onNodesChange: OnNodesChange = useCallback(
-//     (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
-//     []
-//   );
-
-//   const onEdgesChange: OnEdgesChange = useCallback(
-//     (changes) => setEdges((eds: Edge[]) => applyEdgeChanges(changes, eds)),
-//     []
-//   );
-
-//   return (
-//     <Box
-//       sx={{
-//         position: 'relative',
-//         width: 'full',
-//         height: 'full',
-//         borderRadius: 'md',
-//       }}
-//     >
-//       <ReactFlow
-//         nodeTypes={nodeTypes}
-//         nodes={nodes}
-//         edges={edges}
-//         onNodesChange={onNodesChange}
-//         onEdgesChange={onEdgesChange}
-//       >
-//         <Background />
-//         <Controls />
-//       </ReactFlow>
-//       <HStack sx={{ position: 'absolute', top: 2, right: 2 }}>
-//         {FIELD_NAMES.map((field) => (
-//           <Badge
-//             key={field}
-//             colorScheme={FIELDS[field].color}
-//             sx={{ userSelect: 'none' }}
-//           >
-//             {field}
-//           </Badge>
-//         ))}
-//       </HStack>
-//       <Menu>
-//         <MenuButton
-//           as={IconButton}
-//           aria-label="Options"
-//           icon={<FaPlus />}
-//           sx={{ position: 'absolute', top: 2, left: 2 }}
-//         />
-//         <MenuList>
-//           {INVOCATION_NAMES.map((name) => {
-//             const invocation = INVOCATIONS[name];
-//             return (
-//               <Tooltip
-//                 key={name}
-//                 label={invocation.description}
-//                 placement="end"
-//                 hasArrow
-//               >
-//                 <MenuItem>{invocation.title}</MenuItem>
-//               </Tooltip>
-//             );
-//           })}
-//         </MenuList>
-//       </Menu>
-//     </Box>
-//   );
-// }
-
-export default {};
+export default function NodesWIP() {
+  const { t } = useTranslation();
+  return (
+    <WorkInProgress>
+      <Flex
+        sx={{
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          w: '100%',
+          h: '100%',
+          gap: 4,
+          textAlign: 'center',
+        }}
+      >
+        <Heading>{t('common.nodes')}</Heading>
+        <VStack maxW="50rem" gap={4}>
+          <Text>{t('common.nodesDesc')}</Text>
+        </VStack>
+      </Flex>
+    </WorkInProgress>
+  );
+}

invokeai/frontend/web/src/common/components/WorkInProgress/WorkInProgress.tsx

@@ -14,8 +14,6 @@ const WorkInProgress = (props: WorkInProgressProps) => {
         width: '100%',
         height: '100%',
         bg: 'base.850',
-        borderRadius: 'base',
-        position: 'relative',
       }}
     >
       {children}

invokeai/frontend/web/src/common/util/getTimestamp.ts

@@ -1,6 +0,0 @@
-import dateFormat from 'dateformat';
-
-/**
- * Get a `now` timestamp with 1s precision, formatted as ISO datetime.
- */
-export const getTimestamp = () => dateFormat(new Date(), 'isoDateTime');

invokeai/frontend/web/src/common/util/getUrl.ts

@@ -1,28 +0,0 @@
-import { RootState } from 'app/store';
-import { useAppSelector } from 'app/storeHooks';
-import { OpenAPI } from 'services/api';
-
-export const getUrlAlt = (url: string, shouldTransformUrls: boolean) => {
-  if (OpenAPI.BASE && shouldTransformUrls) {
-    return [OpenAPI.BASE, url].join('/');
-  }
-
-  return url;
-};
-
-export const useGetUrl = () => {
-  const shouldTransformUrls = useAppSelector(
-    (state: RootState) => state.system.shouldTransformUrls
-  );
-
-  return {
-    shouldTransformUrls,
-    getUrl: (url?: string) => {
-      if (OpenAPI.BASE && shouldTransformUrls) {
-        return [OpenAPI.BASE, url].join('/');
-      }
-
-      return url;
-    },
-  };
-};

invokeai/frontend/web/src/component.tsx

@@ -1,10 +1,8 @@
-import React, { lazy, PropsWithChildren, useEffect, useState } from 'react';
+import React, { lazy, PropsWithChildren } from 'react';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
-import { buildMiddleware, store } from './app/store';
+import { store } from './app/store';
 import { persistor } from './persistor';
-import { OpenAPI } from 'services/api';
-import { InvokeTabName } from 'features/ui/store/tabMap';
 import '@fontsource/inter/100.css';
 import '@fontsource/inter/200.css';
 import '@fontsource/inter/300.css';
@@ -19,61 +17,18 @@ import Loading from './Loading';
 
 // Localization
 import './i18n';
-import { addMiddleware, resetMiddlewares } from 'redux-dynamic-middlewares';
 
 const App = lazy(() => import('./app/App'));
 const ThemeLocaleProvider = lazy(() => import('./app/ThemeLocaleProvider'));
 
-interface Props extends PropsWithChildren {
-  apiUrl?: string;
-  disabledPanels?: string[];
-  disabledTabs?: InvokeTabName[];
-  token?: string;
-  shouldTransformUrls?: boolean;
-}
-
-export default function Component({
-  apiUrl,
-  disabledPanels = [],
-  disabledTabs = [],
-  token,
-  children,
-  shouldTransformUrls,
-}: Props) {
-  useEffect(() => {
-    // configure API client token
-    if (token) {
-      OpenAPI.TOKEN = token;
-    }
-
-    // configure API client base url
-    if (apiUrl) {
-      OpenAPI.BASE = apiUrl;
-    }
-
-    // reset dynamically added middlewares
-    resetMiddlewares();
-
-    // TODO: at this point, after resetting the middleware, we really ought to clean up the socket
-    // stuff by calling `dispatch(socketReset())`. but we cannot dispatch from here as we are
-    // outside the provider. it's not needed until there is the possibility that we will change
-    // the `apiUrl`/`token` dynamically.
-
-    // rebuild socket middleware with token and apiUrl
-    addMiddleware(buildMiddleware());
-  }, [apiUrl, token]);
-
+export default function Component(props: PropsWithChildren) {
   return (
     <React.StrictMode>
       <Provider store={store}>
         <PersistGate loading={<Loading />} persistor={persistor}>
           <React.Suspense fallback={<Loading showText />}>
             <ThemeLocaleProvider>
-              <App
-                options={{ disabledPanels, disabledTabs, shouldTransformUrls }}
-              >
-                {children}
-              </App>
+              <App>{props.children}</App>
             </ThemeLocaleProvider>
           </React.Suspense>
         </PersistGate>

invokeai/frontend/web/src/exports.tsx

@@ -5,8 +5,6 @@ import ThemeChanger from './features/system/components/ThemeChanger';
 import IAIPopover from './common/components/IAIPopover';
 import IAIIconButton from './common/components/IAIIconButton';
 import SettingsModal from './features/system/components/SettingsModal/SettingsModal';
-import StatusIndicator from './features/system/components/StatusIndicator';
-import ModelSelect from 'features/system/components/ModelSelect';
 
 export default Component;
 export {
@@ -15,6 +13,4 @@ export {
   IAIPopover,
   IAIIconButton,
   SettingsModal,
-  StatusIndicator,
-  ModelSelect,
 };

invokeai/frontend/web/src/features/canvas/components/IAICanvasIntermediateImage.tsx

@@ -1,7 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { RootState } from 'app/store';
 import { useAppSelector } from 'app/storeHooks';
-import { useGetUrl } from 'common/util/getUrl';
 import { GalleryState } from 'features/gallery/store/gallerySlice';
 import { ImageConfig } from 'konva/lib/shapes/Image';
 import { isEqual } from 'lodash';
@@ -26,7 +25,7 @@ type Props = Omit<ImageConfig, 'image'>;
 const IAICanvasIntermediateImage = (props: Props) => {
   const { ...rest } = props;
   const intermediateImage = useAppSelector(selector);
-  const { getUrl } = useGetUrl();
+
   const [loadedImageElement, setLoadedImageElement] =
     useState<HTMLImageElement | null>(null);
 
@@ -37,8 +36,8 @@ const IAICanvasIntermediateImage = (props: Props) => {
     tempImage.onload = () => {
       setLoadedImageElement(tempImage);
     };
-    tempImage.src = getUrl(intermediateImage.url);
-  }, [intermediateImage, getUrl]);
+    tempImage.src = intermediateImage.url;
+  }, [intermediateImage]);
 
   if (!intermediateImage?.boundingBox) return null;
 

invokeai/frontend/web/src/features/canvas/components/IAICanvasObjectRenderer.tsx

@@ -1,6 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/storeHooks';
-import { useGetUrl } from 'common/util/getUrl';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import { rgbaColorToString } from 'features/canvas/util/colorToString';
 import { isEqual } from 'lodash';
@@ -33,7 +32,6 @@ const selector = createSelector(
 
 const IAICanvasObjectRenderer = () => {
   const { objects } = useAppSelector(selector);
-  const { getUrl } = useGetUrl();
 
   if (!objects) return null;
 
@@ -42,12 +40,7 @@ const IAICanvasObjectRenderer = () => {
       {objects.map((obj, i) => {
         if (isCanvasBaseImage(obj)) {
           return (
-            <IAICanvasImage
-              key={i}
-              x={obj.x}
-              y={obj.y}
-              url={getUrl(obj.image.url)}
-            />
+            <IAICanvasImage key={i} x={obj.x} y={obj.y} url={obj.image.url} />
           );
         } else if (isCanvasBaseLine(obj)) {
           const line = (

invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingArea.tsx

@@ -1,6 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/storeHooks';
-import { useGetUrl } from 'common/util/getUrl';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import { GroupConfig } from 'konva/lib/Group';
 import { isEqual } from 'lodash';
@@ -54,16 +53,11 @@ const IAICanvasStagingArea = (props: Props) => {
     width,
     height,
   } = useAppSelector(selector);
-  const { getUrl } = useGetUrl();
 
   return (
     <Group {...rest}>
       {shouldShowStagingImage && currentStagingAreaImage && (
-        <IAICanvasImage
-          url={getUrl(currentStagingAreaImage.image.url)}
-          x={x}
-          y={y}
-        />
+        <IAICanvasImage url={currentStagingAreaImage.image.url} x={x} y={y} />
       )}
       {shouldShowStagingOutline && (
         <Group>

invokeai/frontend/web/src/features/canvas/store/canvasPersistBlacklist.ts

@@ -1,14 +0,0 @@
-import { CanvasState } from './canvasTypes';
-
-/**
- * Canvas slice persist blacklist
- */
-const itemsToBlacklist: (keyof CanvasState)[] = [
-  'cursorPosition',
-  'isCanvasInitialized',
-  'doesCanvasNeedScaling',
-];
-
-export const canvasBlacklist = itemsToBlacklist.map(
-  (blacklistItem) => `canvas.${blacklistItem}`
-);

invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts

@@ -156,7 +156,7 @@ export const canvasSlice = createSlice({
     setCursorPosition: (state, action: PayloadAction<Vector2d | null>) => {
       state.cursorPosition = action.payload;
     },
-    setInitialCanvasImage: (state, action: PayloadAction<InvokeAI._Image>) => {
+    setInitialCanvasImage: (state, action: PayloadAction<InvokeAI.Image>) => {
       const image = action.payload;
       const { stageDimensions } = state;
 
@@ -291,7 +291,7 @@ export const canvasSlice = createSlice({
       state,
       action: PayloadAction<{
         boundingBox: IRect;
-        image: InvokeAI._Image;
+        image: InvokeAI.Image;
       }>
     ) => {
       const { boundingBox, image } = action.payload;

invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts

@@ -37,7 +37,7 @@ export type CanvasImage = {
   y: number;
   width: number;
   height: number;
-  image: InvokeAI._Image;
+  image: InvokeAI.Image;
 };
 
 export type CanvasMaskLine = {
@@ -125,7 +125,7 @@ export interface CanvasState {
   cursorPosition: Vector2d | null;
   doesCanvasNeedScaling: boolean;
   futureLayerStates: CanvasLayerState[];
-  intermediateImage?: InvokeAI._Image;
+  intermediateImage?: InvokeAI.Image;
   isCanvasInitialized: boolean;
   isDrawing: boolean;
   isMaskEnabled: boolean;

invokeai/frontend/web/src/features/canvas/store/thunks/mergeAndUploadCanvas.ts

@@ -105,7 +105,7 @@ export const mergeAndUploadCanvas =
 
     const { url, width, height } = image;
 
-    const newImage: InvokeAI._Image = {
+    const newImage: InvokeAI.Image = {
       uuid: uuidv4(),
       category: shouldSaveToGallery ? 'result' : 'user',
       ...image,

invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx

@@ -14,9 +14,8 @@ import { setIsLightboxOpen } from 'features/lightbox/store/lightboxSlice';
 import FaceRestoreSettings from 'features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreSettings';
 import UpscaleSettings from 'features/parameters/components/AdvancedParameters/Upscale/UpscaleSettings';
 import {
-  initialImageSelected,
   setAllParameters,
-  // setInitialImage,
+  setInitialImage,
   setSeed,
 } from 'features/parameters/store/generationSlice';
 import { postprocessingSelector } from 'features/parameters/store/postprocessingSelectors';
@@ -49,15 +48,11 @@ import {
   FaShareAlt,
   FaTrash,
 } from 'react-icons/fa';
-import {
-  gallerySelector,
-  selectedImageSelector,
-} from '../store/gallerySelectors';
+import { gallerySelector } from '../store/gallerySelectors';
 import DeleteImageModal from './DeleteImageModal';
 import { useCallback } from 'react';
 import useSetBothPrompts from 'features/parameters/hooks/usePrompt';
 import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
-import { useGetUrl } from 'common/util/getUrl';
 
 const currentImageButtonsSelector = createSelector(
   [
@@ -67,7 +62,6 @@ const currentImageButtonsSelector = createSelector(
     uiSelector,
     lightboxSelector,
     activeTabNameSelector,
-    selectedImageSelector,
   ],
   (
     system: SystemState,
@@ -75,8 +69,7 @@ const currentImageButtonsSelector = createSelector(
     postprocessing,
     ui,
     lightbox,
-    activeTabName,
-    selectedImage
+    activeTabName
   ) => {
     const { isProcessing, isConnected, isGFPGANAvailable, isESRGANAvailable } =
       system;
@@ -101,7 +94,6 @@ const currentImageButtonsSelector = createSelector(
       shouldShowImageDetails,
       activeTabName,
       isLightboxOpen,
-      selectedImage,
       shouldHidePreview,
     };
   },
@@ -129,33 +121,27 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
     facetoolStrength,
     shouldDisableToolbarButtons,
     shouldShowImageDetails,
-    // currentImage,
+    currentImage,
     isLightboxOpen,
     activeTabName,
-    selectedImage,
     shouldHidePreview,
   } = useAppSelector(currentImageButtonsSelector);
-  const { getUrl, shouldTransformUrls } = useGetUrl();
 
   const toast = useToast();
   const { t } = useTranslation();
   const setBothPrompts = useSetBothPrompts();
 
   const handleClickUseAsInitialImage = () => {
-    if (!selectedImage) return;
+    if (!currentImage) return;
     if (isLightboxOpen) dispatch(setIsLightboxOpen(false));
-    dispatch(initialImageSelected(selectedImage.name));
-    // dispatch(setInitialImage(currentImage));
-
-    // dispatch(setActiveTab('img2img'));
+    dispatch(setInitialImage(currentImage));
+    dispatch(setActiveTab('img2img'));
   };
 
   const handleCopyImage = async () => {
-    if (!selectedImage) return;
+    if (!currentImage) return;
 
-    const blob = await fetch(getUrl(selectedImage.url)).then((res) =>
-      res.blob()
-    );
+    const blob = await fetch(currentImage.url).then((res) => res.blob());
     const data = [new ClipboardItem({ [blob.type]: blob })];
 
     await navigator.clipboard.write(data);
@@ -169,26 +155,24 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
   };
 
   const handleCopyImageLink = () => {
-    const url = selectedImage
-      ? shouldTransformUrls
-        ? getUrl(selectedImage.url)
-        : window.location.toString() + selectedImage.url
-      : '';
-
-    navigator.clipboard.writeText(url).then(() => {
-      toast({
-        title: t('toast.imageLinkCopied'),
-        status: 'success',
-        duration: 2500,
-        isClosable: true,
+    navigator.clipboard
+      .writeText(
+        currentImage ? window.location.toString() + currentImage.url : ''
+      )
+      .then(() => {
+        toast({
+          title: t('toast.imageLinkCopied'),
+          status: 'success',
+          duration: 2500,
+          isClosable: true,
+        });
       });
-    });
   };
 
   useHotkeys(
     'shift+i',
     () => {
-      if (selectedImage) {
+      if (currentImage) {
         handleClickUseAsInitialImage();
         toast({
           title: t('toast.sentToImageToImage'),
@@ -206,7 +190,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
         });
       }
     },
-    [selectedImage]
+    [currentImage]
   );
 
   const handlePreviewVisibility = () => {
@@ -214,23 +198,20 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
   };
 
   const handleClickUseAllParameters = () => {
-    if (!selectedImage) return;
-    // selectedImage.metadata &&
-    //   dispatch(setAllParameters(selectedImage.metadata));
-    // if (selectedImage.metadata?.image.type === 'img2img') {
-    //   dispatch(setActiveTab('img2img'));
-    // } else if (selectedImage.metadata?.image.type === 'txt2img') {
-    //   dispatch(setActiveTab('txt2img'));
-    // }
+    if (!currentImage) return;
+    currentImage.metadata && dispatch(setAllParameters(currentImage.metadata));
+    if (currentImage.metadata?.image.type === 'img2img') {
+      dispatch(setActiveTab('img2img'));
+    } else if (currentImage.metadata?.image.type === 'txt2img') {
+      dispatch(setActiveTab('txt2img'));
+    }
   };
 
   useHotkeys(
     'a',
     () => {
       if (
-        ['txt2img', 'img2img'].includes(
-          selectedImage?.metadata?.sd_metadata?.type
-        )
+        ['txt2img', 'img2img'].includes(currentImage?.metadata?.image?.type)
       ) {
         handleClickUseAllParameters();
         toast({
@@ -249,18 +230,18 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
         });
       }
     },
-    [selectedImage]
+    [currentImage]
   );
 
   const handleClickUseSeed = () => {
-    selectedImage?.metadata &&
-      dispatch(setSeed(selectedImage.metadata.sd_metadata.seed));
+    currentImage?.metadata &&
+      dispatch(setSeed(currentImage.metadata.image.seed));
   };
 
   useHotkeys(
     's',
     () => {
-      if (selectedImage?.metadata?.sd_metadata?.seed) {
+      if (currentImage?.metadata?.image?.seed) {
         handleClickUseSeed();
         toast({
           title: t('toast.seedSet'),
@@ -278,19 +259,19 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
         });
       }
     },
-    [selectedImage]
+    [currentImage]
   );
 
   const handleClickUsePrompt = useCallback(() => {
-    if (selectedImage?.metadata?.sd_metadata?.prompt) {
-      setBothPrompts(selectedImage?.metadata?.sd_metadata?.prompt);
+    if (currentImage?.metadata?.image?.prompt) {
+      setBothPrompts(currentImage?.metadata?.image?.prompt);
     }
-  }, [selectedImage?.metadata?.sd_metadata?.prompt, setBothPrompts]);
+  }, [currentImage?.metadata?.image?.prompt, setBothPrompts]);
 
   useHotkeys(
     'p',
     () => {
-      if (selectedImage?.metadata?.sd_metadata?.prompt) {
+      if (currentImage?.metadata?.image?.prompt) {
         handleClickUsePrompt();
         toast({
           title: t('toast.promptSet'),
@@ -308,11 +289,11 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
         });
       }
     },
-    [selectedImage]
+    [currentImage]
   );
 
   const handleClickUpscale = () => {
-    // selectedImage && dispatch(runESRGAN(selectedImage));
+    currentImage && dispatch(runESRGAN(currentImage));
   };
 
   useHotkeys(
@@ -336,7 +317,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
       }
     },
     [
-      selectedImage,
+      currentImage,
       isESRGANAvailable,
       shouldDisableToolbarButtons,
       isConnected,
@@ -346,7 +327,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
   );
 
   const handleClickFixFaces = () => {
-    // selectedImage && dispatch(runFacetool(selectedImage));
+    currentImage && dispatch(runFacetool(currentImage));
   };
 
   useHotkeys(
@@ -370,7 +351,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
       }
     },
     [
-      selectedImage,
+      currentImage,
       isGFPGANAvailable,
       shouldDisableToolbarButtons,
       isConnected,
@@ -383,10 +364,10 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
     dispatch(setShouldShowImageDetails(!shouldShowImageDetails));
 
   const handleSendToCanvas = () => {
-    if (!selectedImage) return;
+    if (!currentImage) return;
     if (isLightboxOpen) dispatch(setIsLightboxOpen(false));
 
-    // dispatch(setInitialCanvasImage(selectedImage));
+    dispatch(setInitialCanvasImage(currentImage));
     dispatch(requestCanvasRescale());
 
     if (activeTabName !== 'unifiedCanvas') {
@@ -404,7 +385,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
   useHotkeys(
     'i',
     () => {
-      if (selectedImage) {
+      if (currentImage) {
         handleClickShowImageDetails();
       } else {
         toast({
@@ -415,7 +396,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
         });
       }
     },
-    [selectedImage, shouldShowImageDetails]
+    [currentImage, shouldShowImageDetails]
   );
 
   const handleLightBox = () => {
@@ -476,7 +457,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
               {t('parameters.copyImageToLink')}
             </IAIButton>
 
-            <Link download={true} href={getUrl(selectedImage!.url)}>
+            <Link download={true} href={currentImage?.url}>
               <IAIButton leftIcon={<FaDownload />} size="sm" w="100%">
                 {t('parameters.downloadImage')}
               </IAIButton>
@@ -520,7 +501,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
           icon={<FaQuoteRight />}
           tooltip={`${t('parameters.usePrompt')} (P)`}
           aria-label={`${t('parameters.usePrompt')} (P)`}
-          isDisabled={!selectedImage?.metadata?.sd_metadata?.prompt}
+          isDisabled={!currentImage?.metadata?.image?.prompt}
           onClick={handleClickUsePrompt}
         />
 
@@ -528,7 +509,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
           icon={<FaSeedling />}
           tooltip={`${t('parameters.useSeed')} (S)`}
           aria-label={`${t('parameters.useSeed')} (S)`}
-          isDisabled={!selectedImage?.metadata?.sd_metadata?.seed}
+          isDisabled={!currentImage?.metadata?.image?.seed}
           onClick={handleClickUseSeed}
         />
 
@@ -538,7 +519,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
           aria-label={`${t('parameters.useAll')} (A)`}
           isDisabled={
             !['txt2img', 'img2img'].includes(
-              selectedImage?.metadata?.sd_metadata?.type
+              currentImage?.metadata?.image?.type
             )
           }
           onClick={handleClickUseAllParameters}
@@ -564,7 +545,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
             <IAIButton
               isDisabled={
                 !isGFPGANAvailable ||
-                !selectedImage ||
+                !currentImage ||
                 !(isConnected && !isProcessing) ||
                 !facetoolStrength
               }
@@ -593,7 +574,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
             <IAIButton
               isDisabled={
                 !isESRGANAvailable ||
-                !selectedImage ||
+                !currentImage ||
                 !(isConnected && !isProcessing) ||
                 !upscalingLevel
               }
@@ -615,15 +596,15 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
         />
       </ButtonGroup>
 
-      {/* <DeleteImageModal image={selectedImage}>
+      <DeleteImageModal image={currentImage}>
         <IAIIconButton
           icon={<FaTrash />}
           tooltip={`${t('parameters.deleteImage')} (Del)`}
           aria-label={`${t('parameters.deleteImage')} (Del)`}
-          isDisabled={!selectedImage || !isConnected || isProcessing}
+          isDisabled={!currentImage || !isConnected || isProcessing}
           colorScheme="error"
         />
-      </DeleteImageModal> */}
+      </DeleteImageModal>
     </Flex>
   );
 };

invokeai/frontend/web/src/features/gallery/components/CurrentImageDisplay.tsx

@@ -4,20 +4,17 @@ import { useAppSelector } from 'app/storeHooks';
 import { isEqual } from 'lodash';
 
 import { MdPhoto } from 'react-icons/md';
-import {
-  gallerySelector,
-  selectedImageSelector,
-} from '../store/gallerySelectors';
+import { gallerySelector } from '../store/gallerySelectors';
 import CurrentImageButtons from './CurrentImageButtons';
 import CurrentImagePreview from './CurrentImagePreview';
 
 export const currentImageDisplaySelector = createSelector(
-  [gallerySelector, selectedImageSelector],
-  (gallery, selectedImage) => {
+  [gallerySelector],
+  (gallery) => {
     const { currentImage, intermediateImage } = gallery;
 
     return {
-      hasAnImageToDisplay: selectedImage || intermediateImage,
+      hasAnImageToDisplay: currentImage || intermediateImage,
     };
   },
   {

invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx

@@ -1,47 +1,27 @@
 import { Box, Flex, Image } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/storeHooks';
-import { useGetUrl } from 'common/util/getUrl';
-import { systemSelector } from 'features/system/store/systemSelectors';
+import { GalleryState } from 'features/gallery/store/gallerySlice';
 import { uiSelector } from 'features/ui/store/uiSelectors';
 import { isEqual } from 'lodash';
-import { ReactEventHandler } from 'react';
 import { APP_METADATA_HEIGHT } from 'theme/util/constants';
 
-import { selectedImageSelector } from '../store/gallerySelectors';
+import { gallerySelector } from '../store/gallerySelectors';
 import CurrentImageFallback from './CurrentImageFallback';
 import ImageMetadataViewer from './ImageMetaDataViewer/ImageMetadataViewer';
 import NextPrevImageButtons from './NextPrevImageButtons';
 import CurrentImageHidden from './CurrentImageHidden';
 
 export const imagesSelector = createSelector(
-  [uiSelector, selectedImageSelector, systemSelector],
-  (ui, selectedImage, system) => {
+  [gallerySelector, uiSelector],
+  (gallery: GalleryState, ui) => {
+    const { currentImage, intermediateImage } = gallery;
     const { shouldShowImageDetails, shouldHidePreview } = ui;
-    const { progressImage } = system;
-
-    // TODO: Clean this up, this is really gross
-    const imageToDisplay = progressImage
-      ? {
-          url: progressImage.dataURL,
-          width: progressImage.width,
-          height: progressImage.height,
-          isProgressImage: true,
-          image: progressImage,
-        }
-      : selectedImage
-      ? {
-          url: selectedImage.url,
-          width: selectedImage.metadata.width,
-          height: selectedImage.metadata.height,
-          isProgressImage: false,
-          image: selectedImage,
-        }
-      : null;
 
     return {
+      imageToDisplay: intermediateImage ? intermediateImage : currentImage,
+      isIntermediate: Boolean(intermediateImage),
       shouldShowImageDetails,
-      imageToDisplay,
       shouldHidePreview,
     };
   },
@@ -53,9 +33,12 @@ export const imagesSelector = createSelector(
 );
 
 export default function CurrentImagePreview() {
-  const { shouldShowImageDetails, imageToDisplay, shouldHidePreview } =
-    useAppSelector(imagesSelector);
-  const { getUrl } = useGetUrl();
+  const {
+    shouldShowImageDetails,
+    imageToDisplay,
+    isIntermediate,
+    shouldHidePreview,
+  } = useAppSelector(imagesSelector);
 
   return (
     <Flex
@@ -69,19 +52,13 @@ export default function CurrentImagePreview() {
     >
       {imageToDisplay && (
         <Image
-          src={
-            shouldHidePreview
-              ? undefined
-              : imageToDisplay.isProgressImage
-              ? imageToDisplay.url
-              : getUrl(imageToDisplay.url)
-          }
+          src={shouldHidePreview ? undefined : imageToDisplay.url}
           width={imageToDisplay.width}
           height={imageToDisplay.height}
           fallback={
             shouldHidePreview ? (
               <CurrentImageHidden />
-            ) : !imageToDisplay.isProgressImage ? (
+            ) : !isIntermediate ? (
               <CurrentImageFallback />
             ) : undefined
           }
@@ -91,31 +68,27 @@ export default function CurrentImagePreview() {
             maxHeight: '100%',
             height: 'auto',
             position: 'absolute',
-            imageRendering: imageToDisplay.isProgressImage
-              ? 'pixelated'
-              : 'initial',
+            imageRendering: isIntermediate ? 'pixelated' : 'initial',
             borderRadius: 'base',
           }}
         />
       )}
       {!shouldShowImageDetails && <NextPrevImageButtons />}
-      {shouldShowImageDetails &&
-        imageToDisplay &&
-        'metadata' in imageToDisplay.image && (
-          <Box
-            sx={{
-              position: 'absolute',
-              top: '0',
-              width: '100%',
-              height: '100%',
-              borderRadius: 'base',
-              overflow: 'scroll',
-              maxHeight: APP_METADATA_HEIGHT,
-            }}
-          >
-            <ImageMetadataViewer image={imageToDisplay.image} />
-          </Box>
-        )}
+      {shouldShowImageDetails && imageToDisplay && (
+        <Box
+          sx={{
+            position: 'absolute',
+            top: '0',
+            width: '100%',
+            height: '100%',
+            borderRadius: 'base',
+            overflow: 'scroll',
+            maxHeight: APP_METADATA_HEIGHT,
+          }}
+        >
+          <ImageMetadataViewer image={imageToDisplay} />
+        </Box>
+      )}
     </Flex>
   );
 }

invokeai/frontend/web/src/features/gallery/components/DeleteImageModal.tsx

@@ -52,7 +52,7 @@ interface DeleteImageModalProps {
   /**
    * The image to delete.
    */
-  image?: InvokeAI._Image;
+  image?: InvokeAI.Image;
 }
 
 /**

invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx

@@ -9,14 +9,11 @@ import {
   useToast,
 } from '@chakra-ui/react';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+import { setCurrentImage } from 'features/gallery/store/gallerySlice';
 import {
-  imageSelected,
-  setCurrentImage,
-} from 'features/gallery/store/gallerySlice';
-import {
-  initialImageSelected,
   setAllImageToImageParameters,
   setAllParameters,
+  setInitialImage,
   setSeed,
 } from 'features/parameters/store/generationSlice';
 import { DragEvent, memo, useState } from 'react';
@@ -34,7 +31,6 @@ import { useTranslation } from 'react-i18next';
 import useSetBothPrompts from 'features/parameters/hooks/usePrompt';
 import { setIsLightboxOpen } from 'features/lightbox/store/lightboxSlice';
 import IAIIconButton from 'common/components/IAIIconButton';
-import { useGetUrl } from 'common/util/getUrl';
 
 interface HoverableImageProps {
   image: InvokeAI.Image;
@@ -44,7 +40,7 @@ interface HoverableImageProps {
 const memoEqualityCheck = (
   prev: HoverableImageProps,
   next: HoverableImageProps
-) => prev.image.name === next.image.name && prev.isSelected === next.isSelected;
+) => prev.image.uuid === next.image.uuid && prev.isSelected === next.isSelected;
 
 /**
  * Gallery image component with delete/use all/use seed buttons on hover.
@@ -59,8 +55,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
     shouldUseSingleGalleryColumn,
   } = useAppSelector(hoverableImageSelector);
   const { image, isSelected } = props;
-  const { url, thumbnail, name, metadata } = image;
-  const { getUrl } = useGetUrl();
+  const { url, thumbnail, uuid, metadata } = image;
 
   const [isHovered, setIsHovered] = useState<boolean>(false);
 
@@ -74,9 +69,10 @@ const HoverableImage = memo((props: HoverableImageProps) => {
   const handleMouseOut = () => setIsHovered(false);
 
   const handleUsePrompt = () => {
-    if (image.metadata?.sd_metadata?.prompt) {
-      setBothPrompts(image.metadata?.sd_metadata?.prompt);
+    if (image.metadata?.image?.prompt) {
+      setBothPrompts(image.metadata?.image?.prompt);
     }
+
     toast({
       title: t('toast.promptSet'),
       status: 'success',
@@ -86,8 +82,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
   };
 
   const handleUseSeed = () => {
-    image.metadata.sd_metadata &&
-      dispatch(setSeed(image.metadata.sd_metadata.image.seed));
+    image.metadata && dispatch(setSeed(image.metadata.image.seed));
     toast({
       title: t('toast.seedSet'),
       status: 'success',
@@ -97,11 +92,20 @@ const HoverableImage = memo((props: HoverableImageProps) => {
   };
 
   const handleSendToImageToImage = () => {
-    dispatch(initialImageSelected(image.name));
+    dispatch(setInitialImage(image));
+    if (activeTabName !== 'img2img') {
+      dispatch(setActiveTab('img2img'));
+    }
+    toast({
+      title: t('toast.sentToImageToImage'),
+      status: 'success',
+      duration: 2500,
+      isClosable: true,
+    });
   };
 
   const handleSendToCanvas = () => {
-    // dispatch(setInitialCanvasImage(image));
+    dispatch(setInitialCanvasImage(image));
 
     dispatch(resizeAndScaleCanvas());
 
@@ -118,7 +122,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
   };
 
   const handleUseAllParameters = () => {
-    metadata.sd_metadata && dispatch(setAllParameters(metadata.sd_metadata));
+    metadata && dispatch(setAllParameters(metadata));
     toast({
       title: t('toast.parametersSet'),
       status: 'success',
@@ -128,13 +132,11 @@ const HoverableImage = memo((props: HoverableImageProps) => {
   };
 
   const handleUseInitialImage = async () => {
-    if (metadata.sd_metadata?.image?.init_image_path) {
-      const response = await fetch(
-        metadata.sd_metadata?.image?.init_image_path
-      );
+    if (metadata?.image?.init_image_path) {
+      const response = await fetch(metadata.image.init_image_path);
       if (response.ok) {
         dispatch(setActiveTab('img2img'));
-        dispatch(setAllImageToImageParameters(metadata?.sd_metadata));
+        dispatch(setAllImageToImageParameters(metadata));
         toast({
           title: t('toast.initialImageSet'),
           status: 'success',
@@ -153,20 +155,16 @@ const HoverableImage = memo((props: HoverableImageProps) => {
     });
   };
 
-  const handleSelectImage = () => {
-    dispatch(imageSelected(image.name));
-  };
+  const handleSelectImage = () => dispatch(setCurrentImage(image));
 
   const handleDragStart = (e: DragEvent<HTMLDivElement>) => {
-    console.log('drag started');
-    e.dataTransfer.setData('invokeai/imageName', image.name);
-    e.dataTransfer.setData('invokeai/imageType', image.type);
+    e.dataTransfer.setData('invokeai/imageUuid', uuid);
     e.dataTransfer.effectAllowed = 'move';
   };
 
   const handleLightBox = () => {
-    // dispatch(setCurrentImage(image));
-    // dispatch(setIsLightboxOpen(true));
+    dispatch(setCurrentImage(image));
+    dispatch(setIsLightboxOpen(true));
   };
 
   return (
@@ -179,30 +177,28 @@ const HoverableImage = memo((props: HoverableImageProps) => {
           </MenuItem>
           <MenuItem
             onClickCapture={handleUsePrompt}
-            isDisabled={image?.metadata?.sd_metadata?.prompt === undefined}
+            isDisabled={image?.metadata?.image?.prompt === undefined}
           >
             {t('parameters.usePrompt')}
           </MenuItem>
 
           <MenuItem
             onClickCapture={handleUseSeed}
-            isDisabled={image?.metadata?.sd_metadata?.seed === undefined}
+            isDisabled={image?.metadata?.image?.seed === undefined}
           >
             {t('parameters.useSeed')}
           </MenuItem>
           <MenuItem
             onClickCapture={handleUseAllParameters}
             isDisabled={
-              !['txt2img', 'img2img'].includes(
-                image?.metadata?.sd_metadata?.type
-              )
+              !['txt2img', 'img2img'].includes(image?.metadata?.image?.type)
             }
           >
             {t('parameters.useAll')}
           </MenuItem>
           <MenuItem
             onClickCapture={handleUseInitialImage}
-            isDisabled={image?.metadata?.sd_metadata?.type !== 'img2img'}
+            isDisabled={image?.metadata?.image?.type !== 'img2img'}
           >
             {t('parameters.useInitImg')}
           </MenuItem>
@@ -213,9 +209,9 @@ const HoverableImage = memo((props: HoverableImageProps) => {
             {t('parameters.sendToUnifiedCanvas')}
           </MenuItem>
           <MenuItem data-warning>
-            {/* <DeleteImageModal image={image}>
+            <DeleteImageModal image={image}>
               <p>{t('parameters.deleteImage')}</p>
-            </DeleteImageModal> */}
+            </DeleteImageModal>
           </MenuItem>
         </MenuList>
       )}
@@ -223,7 +219,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
       {(ref) => (
         <Box
           position="relative"
-          key={name}
+          key={uuid}
           onMouseOver={handleMouseOver}
           onMouseOut={handleMouseOut}
           userSelect="none"
@@ -248,7 +244,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
               shouldUseSingleGalleryColumn ? 'contain' : galleryImageObjectFit
             }
             rounded="md"
-            src={getUrl(thumbnail || url)}
+            src={thumbnail || url}
             loading="lazy"
             sx={{
               position: 'absolute',
@@ -294,7 +290,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
                 insetInlineEnd: 1,
               }}
             >
-              {/* <DeleteImageModal image={image}>
+              <DeleteImageModal image={image}>
                 <IAIIconButton
                   aria-label={t('parameters.deleteImage')}
                   icon={<FaTrashAlt />}
@@ -302,7 +298,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
                   fontSize={14}
                   isDisabled={!mayDeleteImage}
                 />
-              </DeleteImageModal> */}
+              </DeleteImageModal>
             </Box>
           )}
         </Box>

invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx

@@ -1,4 +1,4 @@
-import { ButtonGroup, Flex, Grid, Icon, Image, Text } from '@chakra-ui/react';
+import { ButtonGroup, Flex, Grid, Icon, Text } from '@chakra-ui/react';
 import { requestImages } from 'app/socketio/actions';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAIButton from 'common/components/IAIButton';
@@ -25,44 +25,9 @@ import HoverableImage from './HoverableImage';
 
 import Scrollable from 'features/ui/components/common/Scrollable';
 import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
-import {
-  resultsAdapter,
-  selectResultsAll,
-  selectResultsTotal,
-} from '../store/resultsSlice';
-import {
-  receivedResultImagesPage,
-  receivedUploadImagesPage,
-} from 'services/thunks/gallery';
-import { selectUploadsAll, uploadsAdapter } from '../store/uploadsSlice';
-import { createSelector } from '@reduxjs/toolkit';
-import { RootState } from 'app/store';
 
 const GALLERY_SHOW_BUTTONS_MIN_WIDTH = 290;
 
-const gallerySelector = createSelector(
-  [
-    (state: RootState) => state.uploads,
-    (state: RootState) => state.results,
-    (state: RootState) => state.gallery,
-  ],
-  (uploads, results, gallery) => {
-    const { currentCategory } = gallery;
-
-    return currentCategory === 'result'
-      ? {
-          images: resultsAdapter.getSelectors().selectAll(results),
-          isLoading: results.isLoading,
-          areMoreImagesAvailable: results.page < results.pages - 1,
-        }
-      : {
-          images: uploadsAdapter.getSelectors().selectAll(uploads),
-          isLoading: uploads.isLoading,
-          areMoreImagesAvailable: uploads.page < uploads.pages - 1,
-        };
-  }
-);
-
 const ImageGalleryContent = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
@@ -70,7 +35,7 @@ const ImageGalleryContent = () => {
   const [shouldShouldIconButtons, setShouldShouldIconButtons] = useState(true);
 
   const {
-    // images,
+    images,
     currentCategory,
     currentImageUuid,
     shouldPinGallery,
@@ -78,24 +43,12 @@ const ImageGalleryContent = () => {
     galleryGridTemplateColumns,
     galleryImageObjectFit,
     shouldAutoSwitchToNewImages,
-    // areMoreImagesAvailable,
+    areMoreImagesAvailable,
     shouldUseSingleGalleryColumn,
   } = useAppSelector(imageGallerySelector);
 
-  const { images, areMoreImagesAvailable, isLoading } =
-    useAppSelector(gallerySelector);
-
-  // const handleClickLoadMore = () => {
-  //   dispatch(requestImages(currentCategory));
-  // };
   const handleClickLoadMore = () => {
-    if (currentCategory === 'result') {
-      dispatch(receivedResultImagesPage());
-    }
-
-    if (currentCategory === 'user') {
-      dispatch(receivedUploadImagesPage());
-    }
+    dispatch(requestImages(currentCategory));
   };
 
   const handleChangeGalleryImageMinimumWidth = (v: number) => {
@@ -250,11 +203,11 @@ const ImageGalleryContent = () => {
                 style={{ gridTemplateColumns: galleryGridTemplateColumns }}
               >
                 {images.map((image) => {
-                  const { name } = image;
-                  const isSelected = currentImageUuid === name;
+                  const { uuid } = image;
+                  const isSelected = currentImageUuid === uuid;
                   return (
                     <HoverableImage
-                      key={name}
+                      key={uuid}
                       image={image}
                       isSelected={isSelected}
                     />
@@ -264,7 +217,6 @@ const ImageGalleryContent = () => {
               <IAIButton
                 onClick={handleClickLoadMore}
                 isDisabled={!areMoreImagesAvailable}
-                isLoading={isLoading}
                 flexShrink={0}
               >
                 {areMoreImagesAvailable

invokeai/frontend/web/src/features/gallery/components/ImageGalleryPanel.tsx

@@ -31,13 +31,12 @@ const GALLERY_TAB_WIDTHS: Record<
   InvokeTabName,
   { galleryMinWidth: number; galleryMaxWidth: number }
 > = {
-  // txt2img: { galleryMinWidth: 200, galleryMaxWidth: 500 },
-  // img2img: { galleryMinWidth: 200, galleryMaxWidth: 500 },
-  linear: { galleryMinWidth: 200, galleryMaxWidth: 500 },
+  txt2img: { galleryMinWidth: 200, galleryMaxWidth: 500 },
+  img2img: { galleryMinWidth: 200, galleryMaxWidth: 500 },
   unifiedCanvas: { galleryMinWidth: 200, galleryMaxWidth: 200 },
   nodes: { galleryMinWidth: 200, galleryMaxWidth: 500 },
-  // postprocessing: { galleryMinWidth: 200, galleryMaxWidth: 500 },
-  // training: { galleryMinWidth: 200, galleryMaxWidth: 500 },
+  postprocessing: { galleryMinWidth: 200, galleryMaxWidth: 500 },
+  training: { galleryMinWidth: 200, galleryMaxWidth: 500 },
 };
 
 const galleryPanelSelector = createSelector(

invokeai/frontend/web/src/features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer.tsx

@@ -11,7 +11,6 @@ import {
 } from '@chakra-ui/react';
 import * as InvokeAI from 'app/invokeai';
 import { useAppDispatch } from 'app/storeHooks';
-import { useGetUrl } from 'common/util/getUrl';
 import promptToString from 'common/util/promptToString';
 import { seedWeightsToString } from 'common/util/seedWeightPairs';
 import useSetBothPrompts from 'features/parameters/hooks/usePrompt';
@@ -19,7 +18,7 @@ import {
   setCfgScale,
   setHeight,
   setImg2imgStrength,
-  // setInitialImage,
+  setInitialImage,
   setMaskPath,
   setPerlin,
   setSampler,
@@ -121,7 +120,7 @@ type ImageMetadataViewerProps = {
 const memoEqualityCheck = (
   prev: ImageMetadataViewerProps,
   next: ImageMetadataViewerProps
-) => prev.image.name === next.image.name;
+) => prev.image.uuid === next.image.uuid;
 
 // TODO: Show more interesting information in this component.
 
@@ -138,13 +137,34 @@ const ImageMetadataViewer = memo(({ image }: ImageMetadataViewerProps) => {
     dispatch(setShouldShowImageDetails(false));
   });
 
-  const sessionId = image.metadata.invokeai?.session_id;
-  const node = image.metadata.invokeai?.node as Record<string, any>;
+  const metadata = image?.metadata?.image || {};
+  const dreamPrompt = image?.dreamPrompt;
+
+  const {
+    cfg_scale,
+    fit,
+    height,
+    hires_fix,
+    init_image_path,
+    mask_image_path,
+    orig_path,
+    perlin,
+    postprocessing,
+    prompt,
+    sampler,
+    seamless,
+    seed,
+    steps,
+    strength,
+    threshold,
+    type,
+    variations,
+    width,
+  } = metadata;
 
   const { t } = useTranslation();
-  const { getUrl } = useGetUrl();
 
-  const metadataJSON = JSON.stringify(image, null, 2);
+  const metadataJSON = JSON.stringify(image.metadata, null, 2);
 
   return (
     <Flex
@@ -163,132 +183,262 @@ const ImageMetadataViewer = memo(({ image }: ImageMetadataViewerProps) => {
     >
       <Flex gap={2}>
         <Text fontWeight="semibold">File:</Text>
-        <Link href={getUrl(image.url)} isExternal maxW="calc(100% - 3rem)">
+        <Link href={image.url} isExternal maxW="calc(100% - 3rem)">
           {image.url.length > 64
             ? image.url.substring(0, 64).concat('...')
             : image.url}
           <ExternalLinkIcon mx="2px" />
         </Link>
       </Flex>
-      {node && Object.keys(node).length > 0 ? (
+      {Object.keys(metadata).length > 0 ? (
         <>
-          {node.type && (
-            <MetadataItem label="Invocation type" value={node.type} />
+          {type && <MetadataItem label="Generation type" value={type} />}
+          {image.metadata?.model_weights && (
+            <MetadataItem label="Model" value={image.metadata.model_weights} />
           )}
-          {node.model && <MetadataItem label="Model" value={node.model} />}
-          {node.prompt && (
+          {['esrgan', 'gfpgan'].includes(type) && (
+            <MetadataItem label="Original image" value={orig_path} />
+          )}
+          {prompt && (
             <MetadataItem
               label="Prompt"
               labelPosition="top"
               value={
-                typeof node.prompt === 'string'
-                  ? node.prompt
-                  : promptToString(node.prompt)
+                typeof prompt === 'string' ? prompt : promptToString(prompt)
               }
-              onClick={() => setBothPrompts(node.prompt)}
+              onClick={() => setBothPrompts(prompt)}
             />
           )}
-          {node.seed !== undefined && (
+          {seed !== undefined && (
             <MetadataItem
               label="Seed"
-              value={node.seed}
-              onClick={() => dispatch(setSeed(node.seed))}
+              value={seed}
+              onClick={() => dispatch(setSeed(seed))}
             />
           )}
-          {node.threshold !== undefined && (
+          {threshold !== undefined && (
             <MetadataItem
               label="Noise Threshold"
-              value={node.threshold}
-              onClick={() => dispatch(setThreshold(node.threshold))}
+              value={threshold}
+              onClick={() => dispatch(setThreshold(threshold))}
             />
           )}
-          {node.perlin !== undefined && (
+          {perlin !== undefined && (
             <MetadataItem
               label="Perlin Noise"
-              value={node.perlin}
-              onClick={() => dispatch(setPerlin(node.perlin))}
+              value={perlin}
+              onClick={() => dispatch(setPerlin(perlin))}
             />
           )}
-          {node.scheduler && (
+          {sampler && (
             <MetadataItem
               label="Sampler"
-              value={node.scheduler}
-              onClick={() => dispatch(setSampler(node.scheduler))}
+              value={sampler}
+              onClick={() => dispatch(setSampler(sampler))}
             />
           )}
-          {node.steps && (
+          {steps && (
             <MetadataItem
               label="Steps"
-              value={node.steps}
-              onClick={() => dispatch(setSteps(node.steps))}
+              value={steps}
+              onClick={() => dispatch(setSteps(steps))}
             />
           )}
-          {node.cfg_scale !== undefined && (
+          {cfg_scale !== undefined && (
             <MetadataItem
               label="CFG scale"
-              value={node.cfg_scale}
-              onClick={() => dispatch(setCfgScale(node.cfg_scale))}
+              value={cfg_scale}
+              onClick={() => dispatch(setCfgScale(cfg_scale))}
             />
           )}
-          {node.variations && node.variations.length > 0 && (
+          {variations && variations.length > 0 && (
             <MetadataItem
               label="Seed-weight pairs"
-              value={seedWeightsToString(node.variations)}
+              value={seedWeightsToString(variations)}
               onClick={() =>
-                dispatch(setSeedWeights(seedWeightsToString(node.variations)))
+                dispatch(setSeedWeights(seedWeightsToString(variations)))
               }
             />
           )}
-          {node.seamless && (
+          {seamless && (
             <MetadataItem
               label="Seamless"
-              value={node.seamless}
-              onClick={() => dispatch(setSeamless(node.seamless))}
+              value={seamless}
+              onClick={() => dispatch(setSeamless(seamless))}
             />
           )}
-          {node.hires_fix && (
+          {hires_fix && (
             <MetadataItem
               label="High Resolution Optimization"
-              value={node.hires_fix}
-              onClick={() => dispatch(setHiresFix(node.hires_fix))}
+              value={hires_fix}
+              onClick={() => dispatch(setHiresFix(hires_fix))}
             />
           )}
-          {node.width && (
+          {width && (
             <MetadataItem
               label="Width"
-              value={node.width}
-              onClick={() => dispatch(setWidth(node.width))}
+              value={width}
+              onClick={() => dispatch(setWidth(width))}
             />
           )}
-          {node.height && (
+          {height && (
             <MetadataItem
               label="Height"
-              value={node.height}
-              onClick={() => dispatch(setHeight(node.height))}
+              value={height}
+              onClick={() => dispatch(setHeight(height))}
             />
           )}
-          {/* {init_image_path && (
+          {init_image_path && (
             <MetadataItem
               label="Initial image"
               value={init_image_path}
               isLink
               onClick={() => dispatch(setInitialImage(init_image_path))}
             />
-          )} */}
-          {node.strength && (
+          )}
+          {mask_image_path && (
+            <MetadataItem
+              label="Mask image"
+              value={mask_image_path}
+              isLink
+              onClick={() => dispatch(setMaskPath(mask_image_path))}
+            />
+          )}
+          {type === 'img2img' && strength && (
             <MetadataItem
               label="Image to image strength"
-              value={node.strength}
-              onClick={() => dispatch(setImg2imgStrength(node.strength))}
+              value={strength}
+              onClick={() => dispatch(setImg2imgStrength(strength))}
             />
           )}
-          {node.fit && (
+          {fit && (
             <MetadataItem
               label="Image to image fit"
-              value={node.fit}
-              onClick={() => dispatch(setShouldFitToWidthHeight(node.fit))}
+              value={fit}
+              onClick={() => dispatch(setShouldFitToWidthHeight(fit))}
             />
           )}
+          {postprocessing && postprocessing.length > 0 && (
+            <>
+              <Heading size="sm">Postprocessing</Heading>
+              {postprocessing.map(
+                (
+                  postprocess: InvokeAI.PostProcessedImageMetadata,
+                  i: number
+                ) => {
+                  if (postprocess.type === 'esrgan') {
+                    const { scale, strength, denoise_str } = postprocess;
+                    return (
+                      <Flex key={i} pl={8} gap={1} direction="column">
+                        <Text size="md">{`${i + 1}: Upscale (ESRGAN)`}</Text>
+                        <MetadataItem
+                          label="Scale"
+                          value={scale}
+                          onClick={() => dispatch(setUpscalingLevel(scale))}
+                        />
+                        <MetadataItem
+                          label="Strength"
+                          value={strength}
+                          onClick={() =>
+                            dispatch(setUpscalingStrength(strength))
+                          }
+                        />
+                        {denoise_str !== undefined && (
+                          <MetadataItem
+                            label="Denoising strength"
+                            value={denoise_str}
+                            onClick={() =>
+                              dispatch(setUpscalingDenoising(denoise_str))
+                            }
+                          />
+                        )}
+                      </Flex>
+                    );
+                  } else if (postprocess.type === 'gfpgan') {
+                    const { strength } = postprocess;
+                    return (
+                      <Flex key={i} pl={8} gap={1} direction="column">
+                        <Text size="md">{`${
+                          i + 1
+                        }: Face restoration (GFPGAN)`}</Text>
+
+                        <MetadataItem
+                          label="Strength"
+                          value={strength}
+                          onClick={() => {
+                            dispatch(setFacetoolStrength(strength));
+                            dispatch(setFacetoolType('gfpgan'));
+                          }}
+                        />
+                      </Flex>
+                    );
+                  } else if (postprocess.type === 'codeformer') {
+                    const { strength, fidelity } = postprocess;
+                    return (
+                      <Flex key={i} pl={8} gap={1} direction="column">
+                        <Text size="md">{`${
+                          i + 1
+                        }: Face restoration (Codeformer)`}</Text>
+
+                        <MetadataItem
+                          label="Strength"
+                          value={strength}
+                          onClick={() => {
+                            dispatch(setFacetoolStrength(strength));
+                            dispatch(setFacetoolType('codeformer'));
+                          }}
+                        />
+                        {fidelity && (
+                          <MetadataItem
+                            label="Fidelity"
+                            value={fidelity}
+                            onClick={() => {
+                              dispatch(setCodeformerFidelity(fidelity));
+                              dispatch(setFacetoolType('codeformer'));
+                            }}
+                          />
+                        )}
+                      </Flex>
+                    );
+                  }
+                }
+              )}
+            </>
+          )}
+          {dreamPrompt && (
+            <MetadataItem withCopy label="Dream Prompt" value={dreamPrompt} />
+          )}
+          <Flex gap={2} direction="column">
+            <Flex gap={2}>
+              <Tooltip label="Copy metadata JSON">
+                <IconButton
+                  aria-label={t('accessibility.copyMetadataJson')}
+                  icon={<FaCopy />}
+                  size="xs"
+                  variant="ghost"
+                  fontSize={14}
+                  onClick={() => navigator.clipboard.writeText(metadataJSON)}
+                />
+              </Tooltip>
+              <Text fontWeight="semibold">Metadata JSON:</Text>
+            </Flex>
+            <Box
+              sx={{
+                mt: 0,
+                mr: 2,
+                mb: 4,
+                ml: 2,
+                padding: 4,
+                borderRadius: 'base',
+                overflowX: 'scroll',
+                wordBreak: 'break-all',
+                bg: 'whiteAlpha.500',
+                _dark: { bg: 'blackAlpha.500' },
+              }}
+            >
+              <pre>{metadataJSON}</pre>
+            </Box>
+          </Flex>
         </>
       ) : (
         <Center width="100%" pt={10}>
@@ -297,37 +447,6 @@ const ImageMetadataViewer = memo(({ image }: ImageMetadataViewerProps) => {
           </Text>
         </Center>
       )}
-      <Flex gap={2} direction="column">
-        <Flex gap={2}>
-          <Tooltip label="Copy metadata JSON">
-            <IconButton
-              aria-label={t('accessibility.copyMetadataJson')}
-              icon={<FaCopy />}
-              size="xs"
-              variant="ghost"
-              fontSize={14}
-              onClick={() => navigator.clipboard.writeText(metadataJSON)}
-            />
-          </Tooltip>
-          <Text fontWeight="semibold">Metadata JSON:</Text>
-        </Flex>
-        <Box
-          sx={{
-            mt: 0,
-            mr: 2,
-            mb: 4,
-            ml: 2,
-            padding: 4,
-            borderRadius: 'base',
-            overflowX: 'scroll',
-            wordBreak: 'break-all',
-            bg: 'whiteAlpha.500',
-            _dark: { bg: 'blackAlpha.500' },
-          }}
-        >
-          <pre>{metadataJSON}</pre>
-        </Box>
-      </Flex>
     </Flex>
   );
 }, memoEqualityCheck);

invokeai/frontend/web/src/features/gallery/components/ImageMetaDataViewer/OLD_ImageMetadataViewer.tsx

@@ -1,470 +0,0 @@
-import { ExternalLinkIcon } from '@chakra-ui/icons';
-import {
-  Box,
-  Center,
-  Flex,
-  Heading,
-  IconButton,
-  Link,
-  Text,
-  Tooltip,
-} from '@chakra-ui/react';
-import * as InvokeAI from 'app/invokeai';
-import { useAppDispatch } from 'app/storeHooks';
-import { useGetUrl } from 'common/util/getUrl';
-import promptToString from 'common/util/promptToString';
-import { seedWeightsToString } from 'common/util/seedWeightPairs';
-import useSetBothPrompts from 'features/parameters/hooks/usePrompt';
-import {
-  setCfgScale,
-  setHeight,
-  setImg2imgStrength,
-  // setInitialImage,
-  setMaskPath,
-  setPerlin,
-  setSampler,
-  setSeamless,
-  setSeed,
-  setSeedWeights,
-  setShouldFitToWidthHeight,
-  setSteps,
-  setThreshold,
-  setWidth,
-} from 'features/parameters/store/generationSlice';
-import {
-  setCodeformerFidelity,
-  setFacetoolStrength,
-  setFacetoolType,
-  setHiresFix,
-  setUpscalingDenoising,
-  setUpscalingLevel,
-  setUpscalingStrength,
-} from 'features/parameters/store/postprocessingSlice';
-import { setShouldShowImageDetails } from 'features/ui/store/uiSlice';
-import { memo } from 'react';
-import { useHotkeys } from 'react-hotkeys-hook';
-import { useTranslation } from 'react-i18next';
-import { FaCopy } from 'react-icons/fa';
-import { IoArrowUndoCircleOutline } from 'react-icons/io5';
-import * as png from '@stevebel/png';
-
-type MetadataItemProps = {
-  isLink?: boolean;
-  label: string;
-  onClick?: () => void;
-  value: number | string | boolean;
-  labelPosition?: string;
-  withCopy?: boolean;
-};
-
-/**
- * Component to display an individual metadata item or parameter.
- */
-const MetadataItem = ({
-  label,
-  value,
-  onClick,
-  isLink,
-  labelPosition,
-  withCopy = false,
-}: MetadataItemProps) => {
-  const { t } = useTranslation();
-
-  return (
-    <Flex gap={2}>
-      {onClick && (
-        <Tooltip label={`Recall ${label}`}>
-          <IconButton
-            aria-label={t('accessibility.useThisParameter')}
-            icon={<IoArrowUndoCircleOutline />}
-            size="xs"
-            variant="ghost"
-            fontSize={20}
-            onClick={onClick}
-          />
-        </Tooltip>
-      )}
-      {withCopy && (
-        <Tooltip label={`Copy ${label}`}>
-          <IconButton
-            aria-label={`Copy ${label}`}
-            icon={<FaCopy />}
-            size="xs"
-            variant="ghost"
-            fontSize={14}
-            onClick={() => navigator.clipboard.writeText(value.toString())}
-          />
-        </Tooltip>
-      )}
-      <Flex direction={labelPosition ? 'column' : 'row'}>
-        <Text fontWeight="semibold" whiteSpace="pre-wrap" pr={2}>
-          {label}:
-        </Text>
-        {isLink ? (
-          <Link href={value.toString()} isExternal wordBreak="break-all">
-            {value.toString()} <ExternalLinkIcon mx="2px" />
-          </Link>
-        ) : (
-          <Text overflowY="scroll" wordBreak="break-all">
-            {value.toString()}
-          </Text>
-        )}
-      </Flex>
-    </Flex>
-  );
-};
-
-type ImageMetadataViewerProps = {
-  image: InvokeAI.Image;
-};
-
-// TODO: I don't know if this is needed.
-const memoEqualityCheck = (
-  prev: ImageMetadataViewerProps,
-  next: ImageMetadataViewerProps
-) => prev.image.name === next.image.name;
-
-// TODO: Show more interesting information in this component.
-
-/**
- * Image metadata viewer overlays currently selected image and provides
- * access to any of its metadata for use in processing.
- */
-const ImageMetadataViewer = memo(({ image }: ImageMetadataViewerProps) => {
-  const dispatch = useAppDispatch();
-
-  const setBothPrompts = useSetBothPrompts();
-
-  useHotkeys('esc', () => {
-    dispatch(setShouldShowImageDetails(false));
-  });
-
-  const metadata = image?.metadata.sd_metadata || {};
-  const dreamPrompt = image?.metadata.sd_metadata?.dreamPrompt;
-
-  const {
-    cfg_scale,
-    fit,
-    height,
-    hires_fix,
-    init_image_path,
-    mask_image_path,
-    orig_path,
-    perlin,
-    postprocessing,
-    prompt,
-    sampler,
-    seamless,
-    seed,
-    steps,
-    strength,
-    threshold,
-    type,
-    variations,
-    width,
-    model_weights,
-  } = metadata;
-
-  const { t } = useTranslation();
-  const { getUrl } = useGetUrl();
-
-  const metadataJSON = JSON.stringify(image, null, 2);
-
-  // fetch(getUrl(image.url))
-  //   .then((r) => r.arrayBuffer())
-  //   .then((buffer) => {
-  //     const { text } = png.decode(buffer);
-  //     const metadata = text?.['sd-metadata']
-  //       ? JSON.parse(text['sd-metadata'] ?? {})
-  //       : {};
-  //     console.log(metadata);
-  //   });
-
-  return (
-    <Flex
-      sx={{
-        padding: 4,
-        gap: 1,
-        flexDirection: 'column',
-        width: 'full',
-        height: 'full',
-        backdropFilter: 'blur(20px)',
-        bg: 'whiteAlpha.600',
-        _dark: {
-          bg: 'blackAlpha.600',
-        },
-      }}
-    >
-      <Flex gap={2}>
-        <Text fontWeight="semibold">File:</Text>
-        <Link href={getUrl(image.url)} isExternal maxW="calc(100% - 3rem)">
-          {image.url.length > 64
-            ? image.url.substring(0, 64).concat('...')
-            : image.url}
-          <ExternalLinkIcon mx="2px" />
-        </Link>
-      </Flex>
-      <Flex gap={2} direction="column">
-        <Flex gap={2}>
-          <Tooltip label="Copy metadata JSON">
-            <IconButton
-              aria-label={t('accessibility.copyMetadataJson')}
-              icon={<FaCopy />}
-              size="xs"
-              variant="ghost"
-              fontSize={14}
-              onClick={() => navigator.clipboard.writeText(metadataJSON)}
-            />
-          </Tooltip>
-          <Text fontWeight="semibold">Metadata JSON:</Text>
-        </Flex>
-        <Box
-          sx={{
-            mt: 0,
-            mr: 2,
-            mb: 4,
-            ml: 2,
-            padding: 4,
-            borderRadius: 'base',
-            overflowX: 'scroll',
-            wordBreak: 'break-all',
-            bg: 'whiteAlpha.500',
-            _dark: { bg: 'blackAlpha.500' },
-          }}
-        >
-          <pre>{metadataJSON}</pre>
-        </Box>
-      </Flex>
-      {Object.keys(metadata).length > 0 ? (
-        <>
-          {type && <MetadataItem label="Generation type" value={type} />}
-          {model_weights && (
-            <MetadataItem label="Model" value={model_weights} />
-          )}
-          {['esrgan', 'gfpgan'].includes(type) && (
-            <MetadataItem label="Original image" value={orig_path} />
-          )}
-          {prompt && (
-            <MetadataItem
-              label="Prompt"
-              labelPosition="top"
-              value={
-                typeof prompt === 'string' ? prompt : promptToString(prompt)
-              }
-              onClick={() => setBothPrompts(prompt)}
-            />
-          )}
-          {seed !== undefined && (
-            <MetadataItem
-              label="Seed"
-              value={seed}
-              onClick={() => dispatch(setSeed(seed))}
-            />
-          )}
-          {threshold !== undefined && (
-            <MetadataItem
-              label="Noise Threshold"
-              value={threshold}
-              onClick={() => dispatch(setThreshold(threshold))}
-            />
-          )}
-          {perlin !== undefined && (
-            <MetadataItem
-              label="Perlin Noise"
-              value={perlin}
-              onClick={() => dispatch(setPerlin(perlin))}
-            />
-          )}
-          {sampler && (
-            <MetadataItem
-              label="Sampler"
-              value={sampler}
-              onClick={() => dispatch(setSampler(sampler))}
-            />
-          )}
-          {steps && (
-            <MetadataItem
-              label="Steps"
-              value={steps}
-              onClick={() => dispatch(setSteps(steps))}
-            />
-          )}
-          {cfg_scale !== undefined && (
-            <MetadataItem
-              label="CFG scale"
-              value={cfg_scale}
-              onClick={() => dispatch(setCfgScale(cfg_scale))}
-            />
-          )}
-          {variations && variations.length > 0 && (
-            <MetadataItem
-              label="Seed-weight pairs"
-              value={seedWeightsToString(variations)}
-              onClick={() =>
-                dispatch(setSeedWeights(seedWeightsToString(variations)))
-              }
-            />
-          )}
-          {seamless && (
-            <MetadataItem
-              label="Seamless"
-              value={seamless}
-              onClick={() => dispatch(setSeamless(seamless))}
-            />
-          )}
-          {hires_fix && (
-            <MetadataItem
-              label="High Resolution Optimization"
-              value={hires_fix}
-              onClick={() => dispatch(setHiresFix(hires_fix))}
-            />
-          )}
-          {width && (
-            <MetadataItem
-              label="Width"
-              value={width}
-              onClick={() => dispatch(setWidth(width))}
-            />
-          )}
-          {height && (
-            <MetadataItem
-              label="Height"
-              value={height}
-              onClick={() => dispatch(setHeight(height))}
-            />
-          )}
-          {/* {init_image_path && (
-            <MetadataItem
-              label="Initial image"
-              value={init_image_path}
-              isLink
-              onClick={() => dispatch(setInitialImage(init_image_path))}
-            />
-          )} */}
-          {mask_image_path && (
-            <MetadataItem
-              label="Mask image"
-              value={mask_image_path}
-              isLink
-              onClick={() => dispatch(setMaskPath(mask_image_path))}
-            />
-          )}
-          {type === 'img2img' && strength && (
-            <MetadataItem
-              label="Image to image strength"
-              value={strength}
-              onClick={() => dispatch(setImg2imgStrength(strength))}
-            />
-          )}
-          {fit && (
-            <MetadataItem
-              label="Image to image fit"
-              value={fit}
-              onClick={() => dispatch(setShouldFitToWidthHeight(fit))}
-            />
-          )}
-          {postprocessing && postprocessing.length > 0 && (
-            <>
-              <Heading size="sm">Postprocessing</Heading>
-              {postprocessing.map(
-                (
-                  postprocess: InvokeAI.PostProcessedImageMetadata,
-                  i: number
-                ) => {
-                  if (postprocess.type === 'esrgan') {
-                    const { scale, strength, denoise_str } = postprocess;
-                    return (
-                      <Flex key={i} pl={8} gap={1} direction="column">
-                        <Text size="md">{`${i + 1}: Upscale (ESRGAN)`}</Text>
-                        <MetadataItem
-                          label="Scale"
-                          value={scale}
-                          onClick={() => dispatch(setUpscalingLevel(scale))}
-                        />
-                        <MetadataItem
-                          label="Strength"
-                          value={strength}
-                          onClick={() =>
-                            dispatch(setUpscalingStrength(strength))
-                          }
-                        />
-                        {denoise_str !== undefined && (
-                          <MetadataItem
-                            label="Denoising strength"
-                            value={denoise_str}
-                            onClick={() =>
-                              dispatch(setUpscalingDenoising(denoise_str))
-                            }
-                          />
-                        )}
-                      </Flex>
-                    );
-                  } else if (postprocess.type === 'gfpgan') {
-                    const { strength } = postprocess;
-                    return (
-                      <Flex key={i} pl={8} gap={1} direction="column">
-                        <Text size="md">{`${
-                          i + 1
-                        }: Face restoration (GFPGAN)`}</Text>
-
-                        <MetadataItem
-                          label="Strength"
-                          value={strength}
-                          onClick={() => {
-                            dispatch(setFacetoolStrength(strength));
-                            dispatch(setFacetoolType('gfpgan'));
-                          }}
-                        />
-                      </Flex>
-                    );
-                  } else if (postprocess.type === 'codeformer') {
-                    const { strength, fidelity } = postprocess;
-                    return (
-                      <Flex key={i} pl={8} gap={1} direction="column">
-                        <Text size="md">{`${
-                          i + 1
-                        }: Face restoration (Codeformer)`}</Text>
-
-                        <MetadataItem
-                          label="Strength"
-                          value={strength}
-                          onClick={() => {
-                            dispatch(setFacetoolStrength(strength));
-                            dispatch(setFacetoolType('codeformer'));
-                          }}
-                        />
-                        {fidelity && (
-                          <MetadataItem
-                            label="Fidelity"
-                            value={fidelity}
-                            onClick={() => {
-                              dispatch(setCodeformerFidelity(fidelity));
-                              dispatch(setFacetoolType('codeformer'));
-                            }}
-                          />
-                        )}
-                      </Flex>
-                    );
-                  }
-                }
-              )}
-            </>
-          )}
-          {dreamPrompt && (
-            <MetadataItem withCopy label="Dream Prompt" value={dreamPrompt} />
-          )}
-        </>
-      ) : (
-        <Center width="100%" pt={10}>
-          <Text fontSize="lg" fontWeight="semibold">
-            No metadata available
-          </Text>
-        </Center>
-      )}
-    </Flex>
-  );
-}, memoEqualityCheck);
-
-ImageMetadataViewer.displayName = 'ImageMetadataViewer';
-
-export default ImageMetadataViewer;

invokeai/frontend/web/src/features/gallery/hooks/useGetImageByName.ts

@@ -1,35 +0,0 @@
-import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/storeHooks';
-import { ImageType } from 'services/api';
-import { selectResultsEntities } from '../store/resultsSlice';
-import { selectUploadsEntities } from '../store/uploadsSlice';
-
-const useGetImageByNameSelector = createSelector(
-  [selectResultsEntities, selectUploadsEntities],
-  (allResults, allUploads) => {
-    return { allResults, allUploads };
-  }
-);
-
-const useGetImageByNameAndType = () => {
-  const { allResults, allUploads } = useAppSelector(useGetImageByNameSelector);
-
-  return (name: string, type: ImageType) => {
-    if (type === 'results') {
-      const resultImagesResult = allResults[name];
-
-      if (resultImagesResult) {
-        return resultImagesResult;
-      }
-    }
-
-    if (type === 'uploads') {
-      const userImagesResult = allUploads[name];
-      if (userImagesResult) {
-        return userImagesResult;
-      }
-    }
-  };
-};
-
-export default useGetImageByNameAndType;

invokeai/frontend/web/src/features/gallery/store/galleryPersistBlacklist.ts

@@ -1,17 +0,0 @@
-import { GalleryState } from './gallerySlice';
-
-/**
- * Gallery slice persist blacklist
- */
-const itemsToBlacklist: (keyof GalleryState)[] = [
-  'categories',
-  'currentCategory',
-  'currentImage',
-  'currentImageUuid',
-  'shouldAutoSwitchToNewImages',
-  'intermediateImage',
-];
-
-export const galleryBlacklist = itemsToBlacklist.map(
-  (blacklistItem) => `gallery.${blacklistItem}`
-);

invokeai/frontend/web/src/features/gallery/store/gallerySelectors.ts

@@ -7,16 +7,6 @@ import {
   uiSelector,
 } from 'features/ui/store/uiSelectors';
 import { isEqual } from 'lodash';
-import {
-  selectResultsAll,
-  selectResultsById,
-  selectResultsEntities,
-} from './resultsSlice';
-import {
-  selectUploadsAll,
-  selectUploadsById,
-  selectUploadsEntities,
-} from './uploadsSlice';
 
 export const gallerySelector = (state: RootState) => state.gallery;
 
@@ -85,18 +75,3 @@ export const hoverableImageSelector = createSelector(
     },
   }
 );
-
-export const selectedImageSelector = createSelector(
-  [gallerySelector, selectResultsEntities, selectUploadsEntities],
-  (gallery, allResults, allUploads) => {
-    const selectedImageName = gallery.selectedImageName;
-
-    if (selectedImageName in allResults) {
-      return allResults[selectedImageName];
-    }
-
-    if (selectedImageName in allUploads) {
-      return allUploads[selectedImageName];
-    }
-  }
-);

invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts

@@ -1,17 +1,14 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 import * as InvokeAI from 'app/invokeai';
-import { invocationComplete } from 'services/events/actions';
 import { InvokeTabName } from 'features/ui/store/tabMap';
 import { IRect } from 'konva/lib/types';
 import { clamp } from 'lodash';
-import { isImageOutput } from 'services/types/guards';
-import { imageUploaded } from 'services/thunks/image';
 
 export type GalleryCategory = 'user' | 'result';
 
 export type AddImagesPayload = {
-  images: Array<InvokeAI._Image>;
+  images: Array<InvokeAI.Image>;
   areMoreImagesAvailable: boolean;
   category: GalleryCategory;
 };
@@ -19,33 +16,16 @@ export type AddImagesPayload = {
 type GalleryImageObjectFitType = 'contain' | 'cover';
 
 export type Gallery = {
-  images: InvokeAI._Image[];
+  images: InvokeAI.Image[];
   latest_mtime?: number;
   earliest_mtime?: number;
   areMoreImagesAvailable: boolean;
 };
 
 export interface GalleryState {
-  /**
-   * The selected image's unique name
-   * Use `selectedImageSelector` to access the image
-   */
-  selectedImageName: string;
-  /**
-   * The currently selected image
-   * @deprecated See `state.gallery.selectedImageName`
-   */
-  currentImage?: InvokeAI._Image;
-  /**
-   * The currently selected image's uuid.
-   * @deprecated See `state.gallery.selectedImageName`, use `selectedImageSelector` to access the image
-   */
+  currentImage?: InvokeAI.Image;
   currentImageUuid: string;
-  /**
-   * The current progress image
-   * @deprecated See `state.system.progressImage`
-   */
-  intermediateImage?: InvokeAI._Image & {
+  intermediateImage?: InvokeAI.Image & {
     boundingBox?: IRect;
     generationMode?: InvokeTabName;
   };
@@ -62,7 +42,6 @@ export interface GalleryState {
 }
 
 const initialState: GalleryState = {
-  selectedImageName: '',
   currentImageUuid: '',
   galleryImageMinimumWidth: 64,
   galleryImageObjectFit: 'cover',
@@ -90,10 +69,7 @@ export const gallerySlice = createSlice({
   name: 'gallery',
   initialState,
   reducers: {
-    imageSelected: (state, action: PayloadAction<string>) => {
-      state.selectedImageName = action.payload;
-    },
-    setCurrentImage: (state, action: PayloadAction<InvokeAI._Image>) => {
+    setCurrentImage: (state, action: PayloadAction<InvokeAI.Image>) => {
       state.currentImage = action.payload;
       state.currentImageUuid = action.payload.uuid;
     },
@@ -148,7 +124,7 @@ export const gallerySlice = createSlice({
     addImage: (
       state,
       action: PayloadAction<{
-        image: InvokeAI._Image;
+        image: InvokeAI.Image;
         category: GalleryCategory;
       }>
     ) => {
@@ -174,10 +150,7 @@ export const gallerySlice = createSlice({
     setIntermediateImage: (
       state,
       action: PayloadAction<
-        InvokeAI._Image & {
-          boundingBox?: IRect;
-          generationMode?: InvokeTabName;
-        }
+        InvokeAI.Image & { boundingBox?: IRect; generationMode?: InvokeTabName }
       >
     ) => {
       state.intermediateImage = action.payload;
@@ -279,31 +252,9 @@ export const gallerySlice = createSlice({
       state.shouldUseSingleGalleryColumn = action.payload;
     },
   },
-  extraReducers(builder) {
-    /**
-     * Invocation Complete
-     */
-    builder.addCase(invocationComplete, (state, action) => {
-      const { data } = action.payload;
-      if (isImageOutput(data.result)) {
-        state.selectedImageName = data.result.image.image_name;
-        state.intermediateImage = undefined;
-      }
-    });
-
-    /**
-     * Upload Image - FULFILLED
-     */
-    builder.addCase(imageUploaded.fulfilled, (state, action) => {
-      const { location } = action.payload;
-      const imageName = location.split('/').pop() || '';
-      state.selectedImageName = imageName;
-    });
-  },
 });
 
 export const {
-  imageSelected,
   addImage,
   clearIntermediateImage,
   removeImage,

invokeai/frontend/web/src/features/gallery/store/resultsPersistBlacklist.ts

@@ -1,12 +0,0 @@
-import { ResultsState } from './resultsSlice';
-
-/**
- * Results slice persist blacklist
- *
- * Currently blacklisting results slice entirely, see persist config in store.ts
- */
-const itemsToBlacklist: (keyof ResultsState)[] = [];
-
-export const resultsBlacklist = itemsToBlacklist.map(
-  (blacklistItem) => `results.${blacklistItem}`
-);

invokeai/frontend/web/src/features/gallery/store/resultsSlice.ts

@@ -1,144 +0,0 @@
-import { createEntityAdapter, createSlice } from '@reduxjs/toolkit';
-import { Image } from 'app/invokeai';
-import { invocationComplete } from 'services/events/actions';
-
-import { RootState } from 'app/store';
-import {
-  receivedResultImagesPage,
-  IMAGES_PER_PAGE,
-} from 'services/thunks/gallery';
-import { isImageOutput } from 'services/types/guards';
-import {
-  buildImageUrls,
-  extractTimestampFromImageName,
-} from 'services/util/deserializeImageField';
-import { deserializeImageResponse } from 'services/util/deserializeImageResponse';
-
-// use `createEntityAdapter` to create a slice for results images
-// https://redux-toolkit.js.org/api/createEntityAdapter#overview
-
-// the "Entity" is InvokeAI.ResultImage, while the "entities" are instances of that type
-export const resultsAdapter = createEntityAdapter<Image>({
-  // Provide a callback to get a stable, unique identifier for each entity. This defaults to
-  // `(item) => item.id`, but for our result images, the `name` is the unique identifier.
-  selectId: (image) => image.name,
-  // Order all images by their time (in descending order)
-  sortComparer: (a, b) => b.metadata.created - a.metadata.created,
-});
-
-// This type is intersected with the Entity type to create the shape of the state
-type AdditionalResultsState = {
-  // these are a bit misleading; they refer to sessions, not results, but we don't have a route
-  // to list all images directly at this time...
-  page: number; // current page we are on
-  pages: number; // the total number of pages available
-  isLoading: boolean; // whether we are loading more images or not, mostly a placeholder
-  nextPage: number; // the next page to request
-};
-
-// export type ResultsState = ReturnType<
-//   typeof resultsAdapter.getInitialState<AdditionalResultsState>
-// >;
-
-export const initialResultsState =
-  resultsAdapter.getInitialState<AdditionalResultsState>({
-    // provide the additional initial state
-    page: 0,
-    pages: 0,
-    isLoading: false,
-    nextPage: 0,
-  });
-
-export type ResultsState = typeof initialResultsState;
-
-const resultsSlice = createSlice({
-  name: 'results',
-  initialState: initialResultsState,
-  reducers: {
-    // the adapter provides some helper reducers; see the docs for all of them
-    // can use them as helper functions within a reducer, or use the function itself as a reducer
-
-    // here we just use the function itself as the reducer. we'll call this on `invocation_complete`
-    // to add a single result
-    resultAdded: resultsAdapter.upsertOne,
-  },
-  extraReducers: (builder) => {
-    // here we can respond to a fulfilled call of the `getNextResultsPage` thunk
-    // because we pass in the fulfilled thunk action creator, everything is typed
-
-    /**
-     * Received Result Images Page - PENDING
-     */
-    builder.addCase(receivedResultImagesPage.pending, (state) => {
-      state.isLoading = true;
-    });
-
-    /**
-     * Received Result Images Page - FULFILLED
-     */
-    builder.addCase(receivedResultImagesPage.fulfilled, (state, action) => {
-      const { items, page, pages } = action.payload;
-
-      const resultImages = items.map((image) =>
-        deserializeImageResponse(image)
-      );
-
-      // use the adapter reducer to append all the results to state
-      resultsAdapter.addMany(state, resultImages);
-
-      state.page = page;
-      state.pages = pages;
-      state.nextPage = items.length < IMAGES_PER_PAGE ? page : page + 1;
-      state.isLoading = false;
-    });
-
-    /**
-     * Invocation Complete
-     */
-    builder.addCase(invocationComplete, (state, action) => {
-      const { data } = action.payload;
-      const { result, invocation, graph_execution_state_id } = data;
-
-      if (isImageOutput(result)) {
-        const name = result.image.image_name;
-        const type = result.image.image_type;
-        const { url, thumbnail } = buildImageUrls(type, name);
-
-        const timestamp = extractTimestampFromImageName(name);
-
-        const image: Image = {
-          name,
-          type,
-          url,
-          thumbnail,
-          metadata: {
-            created: timestamp,
-            width: result.width, // TODO: add tese dimensions
-            height: result.height,
-            mode: result.mode,
-            invokeai: {
-              session_id: graph_execution_state_id,
-              invocation,
-            },
-          },
-        };
-
-        resultsAdapter.addOne(state, image);
-      }
-    });
-  },
-});
-
-// Create a set of memoized selectors based on the location of this entity state
-// to be used as selectors in a `useAppSelector()` call
-export const {
-  selectAll: selectResultsAll,
-  selectById: selectResultsById,
-  selectEntities: selectResultsEntities,
-  selectIds: selectResultsIds,
-  selectTotal: selectResultsTotal,
-} = resultsAdapter.getSelectors<RootState>((state) => state.results);
-
-export const { resultAdded } = resultsSlice.actions;
-
-export default resultsSlice.reducer;

invokeai/frontend/web/src/features/gallery/store/thunks/uploadImage.ts

@@ -0,0 +1,54 @@
+import { AnyAction, ThunkAction } from '@reduxjs/toolkit';
+import * as InvokeAI from 'app/invokeai';
+import { RootState } from 'app/store';
+import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice';
+import { setInitialImage } from 'features/parameters/store/generationSlice';
+import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
+import { v4 as uuidv4 } from 'uuid';
+import { addImage } from '../gallerySlice';
+
+type UploadImageConfig = {
+  imageFile: File;
+};
+
+export const uploadImage =
+  (
+    config: UploadImageConfig
+  ): ThunkAction<void, RootState, unknown, AnyAction> =>
+  async (dispatch, getState) => {
+    const { imageFile } = config;
+
+    const state = getState() as RootState;
+
+    const activeTabName = activeTabNameSelector(state);
+
+    const formData = new FormData();
+
+    formData.append('file', imageFile, imageFile.name);
+    formData.append(
+      'data',
+      JSON.stringify({
+        kind: 'init',
+      })
+    );
+
+    const response = await fetch(`${window.location.origin}/upload`, {
+      method: 'POST',
+      body: formData,
+    });
+
+    const image = (await response.json()) as InvokeAI.ImageUploadResponse;
+    const newImage: InvokeAI.Image = {
+      uuid: uuidv4(),
+      category: 'user',
+      ...image,
+    };
+
+    dispatch(addImage({ image: newImage, category: 'user' }));
+
+    if (activeTabName === 'unifiedCanvas') {
+      dispatch(setInitialCanvasImage(newImage));
+    } else if (activeTabName === 'img2img') {
+      dispatch(setInitialImage(newImage));
+    }
+  };

invokeai/frontend/web/src/features/gallery/store/uploadsPersistBlacklist.ts

@@ -1,12 +0,0 @@
-import { UploadsState } from './uploadsSlice';
-
-/**
- * Uploads slice persist blacklist
- *
- * Currently blacklisting uploads slice entirely, see persist config in store.ts
- */
-const itemsToBlacklist: (keyof UploadsState)[] = [];
-
-export const uploadsBlacklist = itemsToBlacklist.map(
-  (blacklistItem) => `uploads.${blacklistItem}`
-);

invokeai/frontend/web/src/features/gallery/store/uploadsSlice.ts

@@ -1,95 +0,0 @@
-import { createEntityAdapter, createSlice } from '@reduxjs/toolkit';
-import { Image } from 'app/invokeai';
-
-import { RootState } from 'app/store';
-import {
-  receivedUploadImagesPage,
-  IMAGES_PER_PAGE,
-} from 'services/thunks/gallery';
-import { imageUploaded } from 'services/thunks/image';
-import { deserializeImageResponse } from 'services/util/deserializeImageResponse';
-
-export const uploadsAdapter = createEntityAdapter<Image>({
-  selectId: (image) => image.name,
-  sortComparer: (a, b) => b.metadata.created - a.metadata.created,
-});
-
-type AdditionalUploadsState = {
-  page: number;
-  pages: number;
-  isLoading: boolean;
-  nextPage: number;
-};
-
-const initialUploadsState =
-  uploadsAdapter.getInitialState<AdditionalUploadsState>({
-    page: 0,
-    pages: 0,
-    nextPage: 0,
-    isLoading: false,
-  });
-
-export type UploadsState = typeof initialUploadsState;
-
-const uploadsSlice = createSlice({
-  name: 'uploads',
-  initialState: initialUploadsState,
-  reducers: {
-    uploadAdded: uploadsAdapter.addOne,
-  },
-  extraReducers: (builder) => {
-    /**
-     * Received Upload Images Page - PENDING
-     */
-    builder.addCase(receivedUploadImagesPage.pending, (state) => {
-      state.isLoading = true;
-    });
-
-    /**
-     * Received Upload Images Page - FULFILLED
-     */
-    builder.addCase(receivedUploadImagesPage.fulfilled, (state, action) => {
-      const { items, page, pages } = action.payload;
-
-      const images = items.map((image) => deserializeImageResponse(image));
-
-      uploadsAdapter.addMany(state, images);
-
-      state.page = page;
-      state.pages = pages;
-      state.nextPage = items.length < IMAGES_PER_PAGE ? page : page + 1;
-      state.isLoading = false;
-    });
-
-    /**
-     * Upload Image - FULFILLED
-     */
-    builder.addCase(imageUploaded.fulfilled, (state, action) => {
-      const { location, response } = action.payload;
-      const { image_name, image_url, image_type, metadata, thumbnail_url } =
-        response;
-
-      const uploadedImage: Image = {
-        name: image_name,
-        url: image_url,
-        thumbnail: thumbnail_url,
-        type: 'uploads',
-        metadata,
-      };
-
-      uploadsAdapter.addOne(state, uploadedImage);
-    });
-  },
-});
-
-export const {
-  selectAll: selectUploadsAll,
-  selectById: selectUploadsById,
-  selectEntities: selectUploadsEntities,
-  selectIds: selectUploadsIds,
-  selectTotal: selectUploadsTotal,
-} = uploadsAdapter.getSelectors<RootState>((state) => state.uploads);
-
-export const { uploadAdded } = uploadsSlice.actions;
-
-export default uploadsSlice.reducer;

invokeai/frontend/web/src/features/lightbox/components/ReactPanZoomImage.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { TransformComponent, useTransformContext } from 'react-zoom-pan-pinch';
 import * as InvokeAI from 'app/invokeai';
-import { useGetUrl } from 'common/util/getUrl';
 
 type ReactPanZoomProps = {
-  image: InvokeAI._Image;
+  image: InvokeAI.Image;
   styleClass?: string;
   alt?: string;
   ref?: React.Ref<HTMLImageElement>;
@@ -23,7 +22,6 @@ export default function ReactPanZoomImage({
   scaleY,
 }: ReactPanZoomProps) {
   const { centerView } = useTransformContext();
-  const { getUrl } = useGetUrl();
 
   return (
     <TransformComponent
@@ -37,7 +35,7 @@ export default function ReactPanZoomImage({
           transform: `rotate(${rotation}deg) scaleX(${scaleX})  scaleY(${scaleY})`,
           width: '100%',
         }}
-        src={getUrl(image.url)}
+        src={image.url}
         alt={alt}
         ref={ref}
         className={styleClass ? styleClass : ''}

invokeai/frontend/web/src/features/lightbox/store/lightboxPersistBlacklist.ts

@@ -1,10 +0,0 @@
-import { LightboxState } from './lightboxSlice';
-
-/**
- * Lightbox slice persist blacklist
- */
-const itemsToBlacklist: (keyof LightboxState)[] = ['isLightboxOpen'];
-
-export const lightboxBlacklist = itemsToBlacklist.map(
-  (blacklistItem) => `lightbox.${blacklistItem}`
-);

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

@@ -1,63 +0,0 @@
-import { v4 as uuidv4 } from 'uuid';
-
-import 'reactflow/dist/style.css';
-import { useCallback } from 'react';
-import {
-  Tooltip,
-  Menu,
-  MenuButton,
-  MenuList,
-  MenuItem,
-  IconButton,
-} from '@chakra-ui/react';
-import { FaPlus } from 'react-icons/fa';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
-import { nodeAdded } from '../store/nodesSlice';
-import { cloneDeep, map } from 'lodash';
-import { RootState } from 'app/store';
-import { useBuildInvocation } from '../hooks/useBuildInvocation';
-import { addToast } from 'features/system/store/systemSlice';
-import { makeToast } from 'features/system/hooks/useToastWatcher';
-
-export const AddNodeMenu = () => {
-  const dispatch = useAppDispatch();
-
-  const invocationTemplates = useAppSelector(
-    (state: RootState) => state.nodes.invocationTemplates
-  );
-
-  const buildInvocation = useBuildInvocation();
-
-  const addNode = useCallback(
-    (nodeType: string) => {
-      const invocation = buildInvocation(nodeType);
-
-      if (!invocation) {
-        const toast = makeToast({
-          status: 'error',
-          title: `Unknown Invocation type ${nodeType}`,
-        });
-        dispatch(addToast(toast));
-        return;
-      }
-
-      dispatch(nodeAdded(invocation));
-    },
-    [dispatch, buildInvocation]
-  );
-
-  return (
-    <Menu>
-      <MenuButton as={IconButton} aria-label="Add Node" icon={<FaPlus />} />
-      <MenuList>
-        {map(invocationTemplates, ({ title, description, type }, key) => {
-          return (
-            <Tooltip key={key} label={description} placement="end" hasArrow>
-              <MenuItem onClick={() => addNode(type)}>{title}</MenuItem>
-            </Tooltip>
-          );
-        })}
-      </MenuList>
-    </Menu>
-  );
-};

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

@@ -1,69 +0,0 @@
-import { Tooltip } from '@chakra-ui/react';
-import { CSSProperties, useMemo } from 'react';
-import {
-  Handle,
-  Position,
-  Connection,
-  HandleType,
-  useReactFlow,
-} from 'reactflow';
-import { FIELDS, HANDLE_TOOLTIP_OPEN_DELAY } from '../types/constants';
-// import { useConnectionEventStyles } from '../hooks/useConnectionEventStyles';
-import { InputFieldTemplate, OutputFieldTemplate } from '../types/types';
-
-const handleBaseStyles: CSSProperties = {
-  position: 'absolute',
-  width: '1rem',
-  height: '1rem',
-  borderWidth: 0,
-};
-
-const inputHandleStyles: CSSProperties = {
-  left: '-1.7rem',
-};
-
-const outputHandleStyles: CSSProperties = {
-  right: '-1.7rem',
-};
-
-const requiredConnectionStyles: CSSProperties = {
-  boxShadow: '0 0 0.5rem 0.5rem var(--invokeai-colors-error-400)',
-};
-
-type FieldHandleProps = {
-  nodeId: string;
-  field: InputFieldTemplate | OutputFieldTemplate;
-  isValidConnection: (connection: Connection) => boolean;
-  handleType: HandleType;
-  styles?: CSSProperties;
-};
-
-export const FieldHandle = (props: FieldHandleProps) => {
-  const { nodeId, field, isValidConnection, handleType, styles } = props;
-  const { name, title, type, description } = field;
-
-  return (
-    <Tooltip
-      key={name}
-      label={type}
-      placement={handleType === 'target' ? 'start' : 'end'}
-      hasArrow
-      openDelay={HANDLE_TOOLTIP_OPEN_DELAY}
-    >
-      <Handle
-        type={handleType}
-        id={name}
-        isValidConnection={isValidConnection}
-        position={handleType === 'target' ? Position.Left : Position.Right}
-        style={{
-          backgroundColor: FIELDS[type].colorCssVar,
-          ...styles,
-          ...handleBaseStyles,
-          ...(handleType === 'target' ? inputHandleStyles : outputHandleStyles),
-          // ...(inputRequirement === 'always' ? requiredConnectionStyles : {}),
-          // ...connectionEventStyles,
-        }}
-      />
-    </Tooltip>
-  );
-};

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

@@ -1,18 +0,0 @@
-import 'reactflow/dist/style.css';
-import { Tooltip, Badge, HStack } from '@chakra-ui/react';
-import { map } from 'lodash';
-import { FIELDS } from '../types/constants';
-
-export const FieldTypeLegend = () => {
-  return (
-    <HStack>
-      {map(FIELDS, ({ title, description, color }, key) => (
-        <Tooltip key={key} label={description}>
-          <Badge colorScheme={color} sx={{ userSelect: 'none' }}>
-            {title}
-          </Badge>
-        </Tooltip>
-      ))}
-    </HStack>
-  );
-};

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

@@ -1,104 +0,0 @@
-import {
-  Background,
-  Controls,
-  MiniMap,
-  OnConnect,
-  OnEdgesChange,
-  OnNodesChange,
-  ReactFlow,
-  ConnectionLineType,
-  OnConnectStart,
-  OnConnectEnd,
-  Panel,
-} from 'reactflow';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
-import { RootState } from 'app/store';
-import {
-  connectionEnded,
-  connectionMade,
-  connectionStarted,
-  edgesChanged,
-  nodesChanged,
-} from '../store/nodesSlice';
-import { useCallback } from 'react';
-import { InvocationComponent } from './InvocationComponent';
-import { AddNodeMenu } from './AddNodeMenu';
-import { FieldTypeLegend } from './FieldTypeLegend';
-import { Button } from '@chakra-ui/react';
-import { nodesGraphBuilt } from 'services/thunks/session';
-
-const nodeTypes = { invocation: InvocationComponent };
-
-export const Flow = () => {
-  const dispatch = useAppDispatch();
-  const nodes = useAppSelector((state: RootState) => state.nodes.nodes);
-  const edges = useAppSelector((state: RootState) => state.nodes.edges);
-
-  const onNodesChange: OnNodesChange = useCallback(
-    (changes) => {
-      dispatch(nodesChanged(changes));
-    },
-    [dispatch]
-  );
-
-  const onEdgesChange: OnEdgesChange = useCallback(
-    (changes) => {
-      dispatch(edgesChanged(changes));
-    },
-    [dispatch]
-  );
-
-  const onConnectStart: OnConnectStart = useCallback(
-    (event, params) => {
-      dispatch(connectionStarted(params));
-    },
-    [dispatch]
-  );
-
-  const onConnect: OnConnect = useCallback(
-    (connection) => {
-      dispatch(connectionMade(connection));
-    },
-    [dispatch]
-  );
-
-  const onConnectEnd: OnConnectEnd = useCallback(
-    (event) => {
-      dispatch(connectionEnded());
-    },
-    [dispatch]
-  );
-
-  const handleInvoke = useCallback(() => {
-    dispatch(nodesGraphBuilt());
-  }, [dispatch]);
-
-  return (
-    <ReactFlow
-      nodeTypes={nodeTypes}
-      nodes={nodes}
-      edges={edges}
-      onNodesChange={onNodesChange}
-      onEdgesChange={onEdgesChange}
-      onConnectStart={onConnectStart}
-      onConnect={onConnect}
-      onConnectEnd={onConnectEnd}
-      defaultEdgeOptions={{
-        style: { strokeWidth: 2 },
-      }}
-    >
-      <Panel position="top-left">
-        <AddNodeMenu />
-      </Panel>
-      <Panel position="top-center">
-        <Button onClick={handleInvoke}>Will it blend?</Button>
-      </Panel>
-      <Panel position="top-right">
-        <FieldTypeLegend />
-      </Panel>
-      <Background />
-      <Controls />
-      <MiniMap nodeStrokeWidth={3} zoomable pannable />
-    </ReactFlow>
-  );
-};

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

@@ -1,107 +0,0 @@
-import { Box } from '@chakra-ui/react';
-import { InputFieldTemplate, InputFieldValue } from '../types/types';
-import { ArrayInputFieldComponent } from './fields/ArrayInputField.tsx';
-import { BooleanInputFieldComponent } from './fields/BooleanInputFieldComponent';
-import { EnumInputFieldComponent } from './fields/EnumInputFieldComponent';
-import { ImageInputFieldComponent } from './fields/ImageInputFieldComponent';
-import { LatentsInputFieldComponent } from './fields/LatentsInputFieldComponent';
-import { ModelInputFieldComponent } from './fields/ModelInputFieldComponent';
-import { NumberInputFieldComponent } from './fields/NumberInputFieldComponent';
-import { StringInputFieldComponent } from './fields/StringInputFieldComponent';
-
-type InputFieldComponentProps = {
-  nodeId: string;
-  field: InputFieldValue;
-  template: InputFieldTemplate;
-};
-
-// build an individual input element based on the schema
-export const InputFieldComponent = (props: InputFieldComponentProps) => {
-  const { nodeId, field, template } = props;
-  const { type, value } = field;
-
-  if (type === 'string' && template.type === 'string') {
-    return (
-      <StringInputFieldComponent
-        nodeId={nodeId}
-        field={field}
-        template={template}
-      />
-    );
-  }
-
-  if (type === 'boolean' && template.type === 'boolean') {
-    return (
-      <BooleanInputFieldComponent
-        nodeId={nodeId}
-        field={field}
-        template={template}
-      />
-    );
-  }
-
-  if (
-    (type === 'integer' && template.type === 'integer') ||
-    (type === 'float' && template.type === 'float')
-  ) {
-    return (
-      <NumberInputFieldComponent
-        nodeId={nodeId}
-        field={field}
-        template={template}
-      />
-    );
-  }
-
-  if (type === 'enum' && template.type === 'enum') {
-    return (
-      <EnumInputFieldComponent
-        nodeId={nodeId}
-        field={field}
-        template={template}
-      />
-    );
-  }
-
-  if (type === 'image' && template.type === 'image') {
-    return (
-      <ImageInputFieldComponent
-        nodeId={nodeId}
-        field={field}
-        template={template}
-      />
-    );
-  }
-
-  if (type === 'latents' && template.type === 'latents') {
-    return (
-      <LatentsInputFieldComponent
-        nodeId={nodeId}
-        field={field}
-        template={template}
-      />
-    );
-  }
-
-  if (type === 'model' && template.type === 'model') {
-    return (
-      <ModelInputFieldComponent
-        nodeId={nodeId}
-        field={field}
-        template={template}
-      />
-    );
-  }
-
-  if (type === 'array' && template.type === 'array') {
-    return (
-      <ArrayInputFieldComponent
-        nodeId={nodeId}
-        field={field}
-        template={template}
-      />
-    );
-  }
-
-  return <Box p={2}>Unknown field type: {type}</Box>;
-};

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

@@ -1,243 +0,0 @@
-import { NodeProps, useReactFlow } from 'reactflow';
-import {
-  Box,
-  Flex,
-  FormControl,
-  FormLabel,
-  Heading,
-  HStack,
-  Tooltip,
-  Icon,
-  Code,
-  Text,
-} from '@chakra-ui/react';
-import { FaExclamationCircle, FaInfoCircle } from 'react-icons/fa';
-import { InvocationValue } from '../types/types';
-import { InputFieldComponent } from './InputFieldComponent';
-import { FieldHandle } from './FieldHandle';
-import { isEqual, map, size } from 'lodash';
-import { memo, useMemo, useRef } from 'react';
-import { useIsValidConnection } from '../hooks/useIsValidConnection';
-import { createSelector } from '@reduxjs/toolkit';
-import { RootState } from 'app/store';
-import { useAppSelector } from 'app/storeHooks';
-import { useGetInvocationTemplate } from '../hooks/useInvocationTemplate';
-
-const connectedInputFieldsSelector = createSelector(
-  [(state: RootState) => state.nodes.edges],
-  (edges) => {
-    // return edges.map((e) => e.targetHandle);
-    return edges;
-  },
-  {
-    memoizeOptions: {
-      resultEqualityCheck: isEqual,
-    },
-  }
-);
-
-export const InvocationComponent = memo((props: NodeProps<InvocationValue>) => {
-  const { id: nodeId, data, selected } = props;
-  const { type, inputs, outputs } = data;
-
-  const isValidConnection = useIsValidConnection();
-
-  const connectedInputs = useAppSelector(connectedInputFieldsSelector);
-  const getInvocationTemplate = useGetInvocationTemplate();
-  // TODO: determine if a field/handle is connected and disable the input if so
-
-  const template = useRef(getInvocationTemplate(type));
-
-  if (!template.current) {
-    return (
-      <Box
-        sx={{
-          padding: 4,
-          bg: 'base.800',
-          borderRadius: 'md',
-          boxShadow: 'dark-lg',
-          borderWidth: 2,
-          borderColor: selected ? 'base.400' : 'transparent',
-        }}
-      >
-        <Flex sx={{ alignItems: 'center', justifyContent: 'center' }}>
-          <Icon color="base.400" boxSize={32} as={FaExclamationCircle}></Icon>
-        </Flex>
-      </Box>
-    );
-  }
-
-  return (
-    <Box
-      sx={{
-        padding: 4,
-        bg: 'base.800',
-        borderRadius: 'md',
-        boxShadow: 'dark-lg',
-        borderWidth: 2,
-        borderColor: selected ? 'base.400' : 'transparent',
-      }}
-    >
-      <Flex flexDirection="column" gap={2}>
-        <>
-          <Code>{nodeId}</Code>
-          <HStack justifyContent="space-between">
-            <Heading size="sm" fontWeight={500} color="base.100">
-              {template.current.title}
-            </Heading>
-            <Tooltip
-              label={template.current.description}
-              placement="top"
-              hasArrow
-              shouldWrapChildren
-            >
-              <Icon color="base.300" as={FaInfoCircle} />
-            </Tooltip>
-          </HStack>
-          {map(inputs, (input, i) => {
-            const { id: fieldId } = input;
-            const inputTemplate = template.current?.inputs[input.name];
-
-            if (!inputTemplate) {
-              return (
-                <Box
-                  key={fieldId}
-                  position="relative"
-                  p={2}
-                  borderWidth={1}
-                  borderRadius="md"
-                  sx={{
-                    borderColor: 'error.400',
-                  }}
-                >
-                  <FormControl isDisabled={true}>
-                    <HStack justifyContent="space-between" alignItems="center">
-                      <FormLabel>Unknown input: {input.name}</FormLabel>
-                    </HStack>
-                  </FormControl>
-                </Box>
-              );
-            }
-
-            const isConnected = Boolean(
-              connectedInputs.filter((connectedInput) => {
-                return (
-                  connectedInput.target === nodeId &&
-                  connectedInput.targetHandle === input.name
-                );
-              }).length
-            );
-
-            return (
-              <Box
-                key={fieldId}
-                position="relative"
-                p={2}
-                borderWidth={1}
-                borderRadius="md"
-                sx={{
-                  borderColor:
-                    !isConnected &&
-                    ['always', 'connectionOnly'].includes(
-                      String(inputTemplate?.inputRequirement)
-                    ) &&
-                    input.value === undefined
-                      ? 'warning.400'
-                      : undefined,
-                }}
-              >
-                <FormControl isDisabled={isConnected}>
-                  <HStack justifyContent="space-between" alignItems="center">
-                    <FormLabel>{inputTemplate?.title}</FormLabel>
-                    <Tooltip
-                      label={inputTemplate?.description}
-                      placement="top"
-                      hasArrow
-                      shouldWrapChildren
-                    >
-                      <Icon color="base.400" as={FaInfoCircle} />
-                    </Tooltip>
-                  </HStack>
-                  <InputFieldComponent
-                    nodeId={nodeId}
-                    field={input}
-                    template={inputTemplate}
-                  />
-                </FormControl>
-                {!['never', 'directOnly'].includes(
-                  inputTemplate?.inputRequirement ?? ''
-                ) && (
-                  <FieldHandle
-                    nodeId={nodeId}
-                    field={inputTemplate}
-                    isValidConnection={isValidConnection}
-                    handleType="target"
-                  />
-                )}
-              </Box>
-            );
-          })}
-          {map(outputs).map((output, i) => {
-            const outputTemplate = template.current?.outputs[output.name];
-
-            const isConnected = Boolean(
-              connectedInputs.filter((connectedInput) => {
-                return (
-                  connectedInput.source === nodeId &&
-                  connectedInput.sourceHandle === output.name
-                );
-              }).length
-            );
-
-            if (!outputTemplate) {
-              return (
-                <Box
-                  key={output.id}
-                  position="relative"
-                  p={2}
-                  borderWidth={1}
-                  borderRadius="md"
-                  sx={{
-                    borderColor: 'error.400',
-                  }}
-                >
-                  <FormControl isDisabled={true}>
-                    <HStack justifyContent="space-between" alignItems="center">
-                      <FormLabel>Unknown output: {output.name}</FormLabel>
-                    </HStack>
-                  </FormControl>
-                </Box>
-              );
-            }
-
-            return (
-              <Box
-                key={output.id}
-                position="relative"
-                p={2}
-                borderWidth={1}
-                borderRadius="md"
-              >
-                <FormControl isDisabled={isConnected}>
-                  <FormLabel textAlign="end">
-                    {outputTemplate?.title} Output
-                  </FormLabel>
-                </FormControl>
-                <FieldHandle
-                  key={output.id}
-                  nodeId={nodeId}
-                  field={outputTemplate}
-                  isValidConnection={isValidConnection}
-                  handleType="source"
-                />
-              </Box>
-            );
-          })}
-        </>
-      </Flex>
-      <Flex></Flex>
-    </Box>
-  );
-});
-
-InvocationComponent.displayName = 'InvocationComponent';

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

@@ -1,46 +0,0 @@
-import 'reactflow/dist/style.css';
-import { Box } from '@chakra-ui/react';
-import { ReactFlowProvider } from 'reactflow';
-
-import { Flow } from './Flow';
-import { useAppSelector } from 'app/storeHooks';
-import { RootState } from 'app/store';
-import { buildNodesGraph } from '../util/nodesGraphBuilder/buildNodesGraph';
-
-const NodeEditor = () => {
-  const state = useAppSelector((state: RootState) => state);
-
-  const graph = buildNodesGraph(state);
-
-  return (
-    <Box
-      sx={{
-        position: 'relative',
-        width: 'full',
-        height: 'full',
-        borderRadius: 'md',
-        bg: 'base.850',
-      }}
-    >
-      <ReactFlowProvider>
-        <Flow />
-      </ReactFlowProvider>
-      <Box
-        as="pre"
-        fontFamily="monospace"
-        position="absolute"
-        top={2}
-        left={2}
-        width="full"
-        height="full"
-        userSelect="none"
-        pointerEvents="none"
-        opacity={0.7}
-      >
-        <Box w="50%">{JSON.stringify(graph, null, 2)}</Box>
-      </Box>
-    </Box>
-  );
-};
-
-export default NodeEditor;

invokeai/frontend/web/src/features/nodes/components/fields/ArrayInputField.tsx.tsx

@@ -1,14 +0,0 @@
-import {
-  ArrayInputFieldTemplate,
-  ArrayInputFieldValue,
-} from 'features/nodes/types';
-import { FaImage, FaList } from 'react-icons/fa';
-import { FieldComponentProps } from './types';
-
-export const ArrayInputFieldComponent = (
-  props: FieldComponentProps<ArrayInputFieldValue, ArrayInputFieldTemplate>
-) => {
-  const { nodeId, field } = props;
-
-  return <FaList />;
-};

invokeai/frontend/web/src/features/nodes/components/fields/BooleanInputFieldComponent.tsx

@@ -1,31 +0,0 @@
-import { Switch } from '@chakra-ui/react';
-import { useAppDispatch } from 'app/storeHooks';
-import { fieldValueChanged } from 'features/nodes/store/nodesSlice';
-import {
-  BooleanInputFieldTemplate,
-  BooleanInputFieldValue,
-} from 'features/nodes/types';
-import { ChangeEvent } from 'react';
-import { FieldComponentProps } from './types';
-
-export const BooleanInputFieldComponent = (
-  props: FieldComponentProps<BooleanInputFieldValue, BooleanInputFieldTemplate>
-) => {
-  const { nodeId, field } = props;
-
-  const dispatch = useAppDispatch();
-
-  const handleValueChanged = (e: ChangeEvent<HTMLInputElement>) => {
-    dispatch(
-      fieldValueChanged({
-        nodeId,
-        fieldName: field.name,
-        value: e.target.checked,
-      })
-    );
-  };
-
-  return (
-    <Switch onChange={handleValueChanged} isChecked={field.value}></Switch>
-  );
-};

invokeai/frontend/web/src/features/nodes/components/fields/EnumInputFieldComponent.tsx

@@ -1,35 +0,0 @@
-import { Select } from '@chakra-ui/react';
-import { useAppDispatch } from 'app/storeHooks';
-import { fieldValueChanged } from 'features/nodes/store/nodesSlice';
-import {
-  EnumInputFieldTemplate,
-  EnumInputFieldValue,
-} from 'features/nodes/types';
-import { ChangeEvent } from 'react';
-import { FieldComponentProps } from './types';
-
-export const EnumInputFieldComponent = (
-  props: FieldComponentProps<EnumInputFieldValue, EnumInputFieldTemplate>
-) => {
-  const { nodeId, field, template } = props;
-
-  const dispatch = useAppDispatch();
-
-  const handleValueChanged = (e: ChangeEvent<HTMLSelectElement>) => {
-    dispatch(
-      fieldValueChanged({
-        nodeId,
-        fieldName: field.name,
-        value: e.target.value,
-      })
-    );
-  };
-
-  return (
-    <Select onChange={handleValueChanged} value={field.value}>
-      {template.options.map((option) => (
-        <option key={option}>{option}</option>
-      ))}
-    </Select>
-  );
-};

invokeai/frontend/web/src/features/nodes/components/fields/ImageInputFieldComponent.tsx

@@ -1,64 +0,0 @@
-import { Box, Image, Icon, Flex } from '@chakra-ui/react';
-import { useAppDispatch } from 'app/storeHooks';
-import SelectImagePlaceholder from 'common/components/SelectImagePlaceholder';
-import { useGetUrl } from 'common/util/getUrl';
-import useGetImageByNameAndType from 'features/gallery/hooks/useGetImageByName';
-import useGetImageByUuid from 'features/gallery/hooks/useGetImageByUuid';
-import { fieldValueChanged } from 'features/nodes/store/nodesSlice';
-import {
-  ImageInputFieldTemplate,
-  ImageInputFieldValue,
-} from 'features/nodes/types';
-import { DragEvent, useCallback, useState } from 'react';
-import { FaImage } from 'react-icons/fa';
-import { ImageType } from 'services/api';
-import { FieldComponentProps } from './types';
-
-export const ImageInputFieldComponent = (
-  props: FieldComponentProps<ImageInputFieldValue, ImageInputFieldTemplate>
-) => {
-  const { nodeId, field } = props;
-  const { value } = field;
-
-  const getImageByNameAndType = useGetImageByNameAndType();
-  const dispatch = useAppDispatch();
-  const [url, setUrl] = useState<string>();
-  const { getUrl } = useGetUrl();
-
-  const handleDrop = useCallback(
-    (e: DragEvent<HTMLDivElement>) => {
-      const name = e.dataTransfer.getData('invokeai/imageName');
-      const type = e.dataTransfer.getData('invokeai/imageType') as ImageType;
-
-      if (!name || !type) {
-        return;
-      }
-
-      const image = getImageByNameAndType(name, type);
-
-      if (!image) {
-        return;
-      }
-
-      setUrl(image.url);
-
-      dispatch(
-        fieldValueChanged({
-          nodeId,
-          fieldName: field.name,
-          value: {
-            image_name: name,
-            image_type: type,
-          },
-        })
-      );
-    },
-    [getImageByNameAndType, dispatch, field.name, nodeId]
-  );
-
-  return (
-    <Box onDrop={handleDrop}>
-      <Image src={getUrl(url)} fallback={<SelectImagePlaceholder />} />
-    </Box>
-  );
-};

invokeai/frontend/web/src/features/nodes/components/fields/LatentsInputFieldComponent.tsx

@@ -1,13 +0,0 @@
-import {
-  LatentsInputFieldTemplate,
-  LatentsInputFieldValue,
-} from 'features/nodes/types';
-import { FieldComponentProps } from './types';
-
-export const LatentsInputFieldComponent = (
-  props: FieldComponentProps<LatentsInputFieldValue, LatentsInputFieldTemplate>
-) => {
-  const { nodeId, field } = props;
-
-  return null;
-};

invokeai/frontend/web/src/features/nodes/components/fields/ModelInputFieldComponent.tsx

@@ -1,57 +0,0 @@
-import { Select } from '@chakra-ui/react';
-import { createSelector } from '@reduxjs/toolkit';
-import { RootState } from 'app/store';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
-import { fieldValueChanged } from 'features/nodes/store/nodesSlice';
-import {
-  ModelInputFieldTemplate,
-  ModelInputFieldValue,
-} from 'features/nodes/types';
-import {
-  selectModelsById,
-  selectModelsIds,
-} from 'features/system/store/modelSlice';
-import { isEqual, map } from 'lodash';
-import { ChangeEvent } from 'react';
-import { FieldComponentProps } from './types';
-
-const availableModelsSelector = createSelector(
-  [selectModelsIds],
-  (allModelNames) => {
-    return { allModelNames };
-    // return map(modelList, (_, name) => name);
-  },
-  {
-    memoizeOptions: {
-      resultEqualityCheck: isEqual,
-    },
-  }
-);
-
-export const ModelInputFieldComponent = (
-  props: FieldComponentProps<ModelInputFieldValue, ModelInputFieldTemplate>
-) => {
-  const { nodeId, field } = props;
-
-  const dispatch = useAppDispatch();
-
-  const { allModelNames } = useAppSelector(availableModelsSelector);
-
-  const handleValueChanged = (e: ChangeEvent<HTMLSelectElement>) => {
-    dispatch(
-      fieldValueChanged({
-        nodeId,
-        fieldName: field.name,
-        value: e.target.value,
-      })
-    );
-  };
-
-  return (
-    <Select onChange={handleValueChanged} value={field.value}>
-      {allModelNames.map((option) => (
-        <option key={option}>{option}</option>
-      ))}
-    </Select>
-  );
-};

invokeai/frontend/web/src/features/nodes/components/fields/NumberInputFieldComponent.tsx

@@ -1,41 +0,0 @@
-import {
-  NumberDecrementStepper,
-  NumberIncrementStepper,
-  NumberInput,
-  NumberInputField,
-  NumberInputStepper,
-} from '@chakra-ui/react';
-import { useAppDispatch } from 'app/storeHooks';
-import { fieldValueChanged } from 'features/nodes/store/nodesSlice';
-import {
-  FloatInputFieldTemplate,
-  FloatInputFieldValue,
-  IntegerInputFieldTemplate,
-  IntegerInputFieldValue,
-} from 'features/nodes/types';
-import { FieldComponentProps } from './types';
-
-export const NumberInputFieldComponent = (
-  props: FieldComponentProps<
-    IntegerInputFieldValue | FloatInputFieldValue,
-    IntegerInputFieldTemplate | FloatInputFieldTemplate
-  >
-) => {
-  const { nodeId, field } = props;
-
-  const dispatch = useAppDispatch();
-
-  const handleValueChanged = (_: string, value: number) => {
-    dispatch(fieldValueChanged({ nodeId, fieldName: field.name, value }));
-  };
-
-  return (
-    <NumberInput onChange={handleValueChanged} value={field.value}>
-      <NumberInputField />
-      <NumberInputStepper>
-        <NumberIncrementStepper />
-        <NumberDecrementStepper />
-      </NumberInputStepper>
-    </NumberInput>
-  );
-};

invokeai/frontend/web/src/features/nodes/components/fields/StringInputFieldComponent.tsx

@@ -1,29 +0,0 @@
-import { Input } from '@chakra-ui/react';
-import { useAppDispatch } from 'app/storeHooks';
-import { fieldValueChanged } from 'features/nodes/store/nodesSlice';
-import {
-  StringInputFieldTemplate,
-  StringInputFieldValue,
-} from 'features/nodes/types';
-import { ChangeEvent } from 'react';
-import { FieldComponentProps } from './types';
-
-export const StringInputFieldComponent = (
-  props: FieldComponentProps<StringInputFieldValue, StringInputFieldTemplate>
-) => {
-  const { nodeId, field } = props;
-
-  const dispatch = useAppDispatch();
-
-  const handleValueChanged = (e: ChangeEvent<HTMLInputElement>) => {
-    dispatch(
-      fieldValueChanged({
-        nodeId,
-        fieldName: field.name,
-        value: e.target.value,
-      })
-    );
-  };
-
-  return <Input onChange={handleValueChanged} value={field.value}></Input>;
-};

invokeai/frontend/web/src/features/nodes/components/fields/types.ts

@@ -1,10 +0,0 @@
-import { InputFieldTemplate, InputFieldValue } from 'features/nodes/types';
-
-export type FieldComponentProps<
-  V extends InputFieldValue,
-  T extends InputFieldTemplate
-> = {
-  nodeId: string;
-  field: V;
-  template: T;
-};

invokeai/frontend/web/src/features/nodes/examples/iterationGraph.ts

@@ -1,52 +0,0 @@
-export const iterationGraph = {
-  nodes: {
-    '0': {
-      id: '0',
-      type: 'range',
-      start: 0,
-      stop: 5,
-      step: 1,
-    },
-    '1': {
-      collection: [],
-      id: '1',
-      index: 0,
-      type: 'iterate',
-    },
-    '2': {
-      cfg_scale: 7.5,
-      height: 512,
-      id: '2',
-      model: '',
-      progress_images: false,
-      prompt: 'dog',
-      sampler_name: 'k_lms',
-      seamless: false,
-      steps: 11,
-      type: 'txt2img',
-      width: 512,
-    },
-  },
-  edges: [
-    {
-      source: {
-        field: 'collection',
-        node_id: '0',
-      },
-      destination: {
-        field: 'collection',
-        node_id: '1',
-      },
-    },
-    {
-      source: {
-        field: 'item',
-        node_id: '1',
-      },
-      destination: {
-        field: 'seed',
-        node_id: '2',
-      },
-    },
-  ],
-};