Remove unused check_internet() function.

docs/features/CONFIGURATION.md

@@ -51,11 +51,13 @@ The settings in this file will override the defaults. You only need
 to change this file if the default for a particular setting doesn't
 work for you.
 
-You'll find an example file next to `invokeai.yaml` that shows the default values.
-
 Some settings, like [Model Marketplace API Keys], require the YAML
 to be formatted correctly. Here is a [basic guide to YAML files].
 
+You can fix a broken `invokeai.yaml` by deleting it and running the
+configuration script again -- option [6] in the launcher, "Re-run the
+configure script".
+
 #### Custom Config File Location
 
 You can use any config file with the `--config` CLI arg. Pass in the path to the `invokeai.yaml` file you want to use.

invokeai/app/api/dependencies.py

@@ -35,23 +35,6 @@ from ..services.urls.urls_default import LocalUrlService
 from ..services.workflow_records.workflow_records_sqlite import SqliteWorkflowRecordsStorage
 from .events import FastAPIEventService
 
-
-# TODO: is there a better way to achieve this?
-def check_internet() -> bool:
-    """
-    Return true if the internet is reachable.
-    It does this by pinging huggingface.co.
-    """
-    import urllib.request
-
-    host = "http://huggingface.co"
-    try:
-        urllib.request.urlopen(host, timeout=1)
-        return True
-    except Exception:
-        return False
-
-
 logger = InvokeAILogger.get_logger()
 
 

invokeai/app/api_app.py

@@ -2,6 +2,7 @@ import asyncio
 import logging
 import mimetypes
 import socket
+import time
 from contextlib import asynccontextmanager
 from inspect import signature
 from pathlib import Path
@@ -20,13 +21,10 @@ from fastapi_events.middleware import EventHandlerASGIMiddleware
 from pydantic.json_schema import models_json_schema
 from torch.backends.mps import is_available as is_mps_available
 
-# for PyCharm:
-# noinspection PyUnresolvedReferences
-import invokeai.backend.util.hotfixes  # noqa: F401 (monkeypatching on import)
 import invokeai.frontend.web as web_dir
 from invokeai.app.api.no_cache_staticfiles import NoCacheStaticFiles
 from invokeai.app.invocations.model import ModelIdentifierField
-from invokeai.app.services.config.config_default import get_config
+from invokeai.app.services.config.config_default import InvokeAIAppConfig, get_config
 from invokeai.app.services.session_processor.session_processor_common import ProgressImage
 from invokeai.backend.util.devices import TorchDevice
 
@@ -44,188 +42,189 @@ from .api.routers import (
     workflows,
 )
 from .api.sockets import SocketIO
-from .invocations.baseinvocation import (
-    BaseInvocation,
-    UIConfigBase,
-)
+from .invocations.baseinvocation import BaseInvocation, UIConfigBase
 from .invocations.fields import InputFieldJSONSchemaExtra, OutputFieldJSONSchemaExtra
 
-app_config = get_config()
+
+# TODO(ryand): Search for imports from api_app.py in the rest of the codebase and make sure I didn't break any of them.
+def build_app(app_config: InvokeAIAppConfig, logger: logging.Logger) -> FastAPI:
+    @asynccontextmanager
+    async def lifespan(app: FastAPI):
+        # Add startup event to load dependencies
+        ApiDependencies.initialize(config=app_config, event_handler_id=event_handler_id, logger=logger)
+        yield
+        # Shut down threads
+        ApiDependencies.shutdown()
+
+    app = FastAPI(
+        title="Invoke - Community Edition",
+        docs_url=None,
+        redoc_url=None,
+        separate_input_output_schemas=False,
+        lifespan=lifespan,
+    )
+
+    # Add event handler
+    event_handler_id: int = id(app)
+    app.add_middleware(
+        EventHandlerASGIMiddleware,
+        handlers=[local_handler],  # TODO: consider doing this in services to support different configurations
+        middleware_id=event_handler_id,
+    )
+
+    socket_io = SocketIO(app)
+
+    app.add_middleware(
+        CORSMiddleware,
+        allow_origins=app_config.allow_origins,
+        allow_credentials=app_config.allow_credentials,
+        allow_methods=app_config.allow_methods,
+        allow_headers=app_config.allow_headers,
+    )
+
+    app.add_middleware(GZipMiddleware, minimum_size=1000)
+
+    # Include all routers
+    app.include_router(utilities.utilities_router, prefix="/api")
+    app.include_router(model_manager.model_manager_router, prefix="/api")
+    app.include_router(download_queue.download_queue_router, prefix="/api")
+    app.include_router(images.images_router, prefix="/api")
+    app.include_router(boards.boards_router, prefix="/api")
+    app.include_router(board_images.board_images_router, prefix="/api")
+    app.include_router(app_info.app_router, prefix="/api")
+    app.include_router(session_queue.session_queue_router, prefix="/api")
+    app.include_router(workflows.workflows_router, prefix="/api")
+
+    add_custom_openapi(app)
+
+    @app.get("/docs", include_in_schema=False)
+    def overridden_swagger() -> HTMLResponse:
+        return get_swagger_ui_html(
+            openapi_url=app.openapi_url,  # type: ignore [arg-type] # this is always a string
+            title=f"{app.title} - Swagger UI",
+            swagger_favicon_url="static/docs/invoke-favicon-docs.svg",
+        )
+
+    @app.get("/redoc", include_in_schema=False)
+    def overridden_redoc() -> HTMLResponse:
+        return get_redoc_html(
+            openapi_url=app.openapi_url,  # type: ignore [arg-type] # this is always a string
+            title=f"{app.title} - Redoc",
+            redoc_favicon_url="static/docs/invoke-favicon-docs.svg",
+        )
+
+    web_root_path = Path(list(web_dir.__path__)[0])
+
+    try:
+        app.mount("/", NoCacheStaticFiles(directory=Path(web_root_path, "dist"), html=True), name="ui")
+    except RuntimeError:
+        logger.warn(f"No UI found at {web_root_path}/dist, skipping UI mount")
+
+    app.mount(
+        "/static", NoCacheStaticFiles(directory=Path(web_root_path, "static/")), name="static"
+    )  # docs favicon is in here
+
+    return app
 
 
-if is_mps_available():
-    import invokeai.backend.util.mps_fixes  # noqa: F401 (monkeypatching on import)
+def apply_monkeypatches() -> None:
+    # TODO(ryand): Don't monkeypatch on import!
+    if is_mps_available():
+        import invokeai.backend.util.mps_fixes  # noqa: F401 (monkeypatching on import)
+    import invokeai.backend.util.hotfixes  # noqa: F401 (monkeypatching on import)
 
 
-logger = InvokeAILogger.get_logger(config=app_config)
-# fix for windows mimetypes registry entries being borked
-# see https://github.com/invoke-ai/InvokeAI/discussions/3684#discussioncomment-6391352
-mimetypes.add_type("application/javascript", ".js")
-mimetypes.add_type("text/css", ".css")
-
-torch_device_name = TorchDevice.get_torch_device_name()
-logger.info(f"Using torch device: {torch_device_name}")
+def fix_mimetypes():
+    # fix for windows mimetypes registry entries being borked
+    # see https://github.com/invoke-ai/InvokeAI/discussions/3684#discussioncomment-6391352
+    mimetypes.add_type("application/javascript", ".js")
+    mimetypes.add_type("text/css", ".css")
 
 
-@asynccontextmanager
-async def lifespan(app: FastAPI):
-    # Add startup event to load dependencies
-    ApiDependencies.initialize(config=app_config, event_handler_id=event_handler_id, logger=logger)
-    yield
-    # Shut down threads
-    ApiDependencies.shutdown()
+def add_custom_openapi(app: FastAPI) -> None:
+    """Add a custom .openapi() method to the FastAPI app.
 
+    This is done based on the guidance here:
+    https://fastapi.tiangolo.com/how-to/extending-openapi/#normal-fastapi
+    """
 
-# Create the app
-# TODO: create this all in a method so configuration/etc. can be passed in?
-app = FastAPI(
-    title="Invoke - Community Edition",
-    docs_url=None,
-    redoc_url=None,
-    separate_input_output_schemas=False,
-    lifespan=lifespan,
-)
+    # Build a custom OpenAPI to include all outputs
+    # TODO: can outputs be included on metadata of invocation schemas somehow?
+    def custom_openapi() -> dict[str, Any]:
+        if app.openapi_schema:
+            return app.openapi_schema
+        openapi_schema = get_openapi(
+            title=app.title,
+            description="An API for invoking AI image operations",
+            version="1.0.0",
+            routes=app.routes,
+            separate_input_output_schemas=False,  # https://fastapi.tiangolo.com/how-to/separate-openapi-schemas/
+        )
 
-# Add event handler
-event_handler_id: int = id(app)
-app.add_middleware(
-    EventHandlerASGIMiddleware,
-    handlers=[local_handler],  # TODO: consider doing this in services to support different configurations
-    middleware_id=event_handler_id,
-)
+        # Add all outputs
+        all_invocations = BaseInvocation.get_invocations()
+        output_types = set()
+        output_type_titles = {}
+        for invoker in all_invocations:
+            output_type = signature(invoker.invoke).return_annotation
+            output_types.add(output_type)
 
-socket_io = SocketIO(app)
+        output_schemas = models_json_schema(
+            models=[(o, "serialization") for o in output_types], ref_template="#/components/schemas/{model}"
+        )
+        for schema_key, output_schema in output_schemas[1]["$defs"].items():
+            # TODO: note that we assume the schema_key here is the TYPE.__name__
+            # This could break in some cases, figure out a better way to do it
+            output_type_titles[schema_key] = output_schema["title"]
+            openapi_schema["components"]["schemas"][schema_key] = output_schema
+            openapi_schema["components"]["schemas"][schema_key]["class"] = "output"
 
-app.add_middleware(
-    CORSMiddleware,
-    allow_origins=app_config.allow_origins,
-    allow_credentials=app_config.allow_credentials,
-    allow_methods=app_config.allow_methods,
-    allow_headers=app_config.allow_headers,
-)
+        # Some models don't end up in the schemas as standalone definitions
+        additional_schemas = models_json_schema(
+            [
+                (UIConfigBase, "serialization"),
+                (InputFieldJSONSchemaExtra, "serialization"),
+                (OutputFieldJSONSchemaExtra, "serialization"),
+                (ModelIdentifierField, "serialization"),
+                (ProgressImage, "serialization"),
+            ],
+            ref_template="#/components/schemas/{model}",
+        )
+        for schema_key, schema_json in additional_schemas[1]["$defs"].items():
+            openapi_schema["components"]["schemas"][schema_key] = schema_json
 
-app.add_middleware(GZipMiddleware, minimum_size=1000)
+        # Add a reference to the output type to additionalProperties of the invoker schema
+        for invoker in all_invocations:
+            invoker_name = invoker.__name__  # type: ignore [attr-defined] # this is a valid attribute
+            output_type = signature(obj=invoker.invoke).return_annotation
+            output_type_title = output_type_titles[output_type.__name__]
+            invoker_schema = openapi_schema["components"]["schemas"][f"{invoker_name}"]
+            outputs_ref = {"$ref": f"#/components/schemas/{output_type_title}"}
+            invoker_schema["output"] = outputs_ref
+            invoker_schema["class"] = "invocation"
 
+        # This code no longer seems to be necessary?
+        # Leave it here just in case
+        #
+        # from invokeai.backend.model_manager import get_model_config_formats
+        # formats = get_model_config_formats()
+        # for model_config_name, enum_set in formats.items():
 
-# Include all routers
-app.include_router(utilities.utilities_router, prefix="/api")
-app.include_router(model_manager.model_manager_router, prefix="/api")
-app.include_router(download_queue.download_queue_router, prefix="/api")
-app.include_router(images.images_router, prefix="/api")
-app.include_router(boards.boards_router, prefix="/api")
-app.include_router(board_images.board_images_router, prefix="/api")
-app.include_router(app_info.app_router, prefix="/api")
-app.include_router(session_queue.session_queue_router, prefix="/api")
-app.include_router(workflows.workflows_router, prefix="/api")
+        #     if model_config_name in openapi_schema["components"]["schemas"]:
+        #         # print(f"Config with name {name} already defined")
+        #         continue
 
+        #     openapi_schema["components"]["schemas"][model_config_name] = {
+        #         "title": model_config_name,
+        #         "description": "An enumeration.",
+        #         "type": "string",
+        #         "enum": [v.value for v in enum_set],
+        #     }
 
-# Build a custom OpenAPI to include all outputs
-# TODO: can outputs be included on metadata of invocation schemas somehow?
-def custom_openapi() -> dict[str, Any]:
-    if app.openapi_schema:
+        app.openapi_schema = openapi_schema
         return app.openapi_schema
-    openapi_schema = get_openapi(
-        title=app.title,
-        description="An API for invoking AI image operations",
-        version="1.0.0",
-        routes=app.routes,
-        separate_input_output_schemas=False,  # https://fastapi.tiangolo.com/how-to/separate-openapi-schemas/
-    )
 
-    # Add all outputs
-    all_invocations = BaseInvocation.get_invocations()
-    output_types = set()
-    output_type_titles = {}
-    for invoker in all_invocations:
-        output_type = signature(invoker.invoke).return_annotation
-        output_types.add(output_type)
-
-    output_schemas = models_json_schema(
-        models=[(o, "serialization") for o in output_types], ref_template="#/components/schemas/{model}"
-    )
-    for schema_key, output_schema in output_schemas[1]["$defs"].items():
-        # TODO: note that we assume the schema_key here is the TYPE.__name__
-        # This could break in some cases, figure out a better way to do it
-        output_type_titles[schema_key] = output_schema["title"]
-        openapi_schema["components"]["schemas"][schema_key] = output_schema
-        openapi_schema["components"]["schemas"][schema_key]["class"] = "output"
-
-    # Some models don't end up in the schemas as standalone definitions
-    additional_schemas = models_json_schema(
-        [
-            (UIConfigBase, "serialization"),
-            (InputFieldJSONSchemaExtra, "serialization"),
-            (OutputFieldJSONSchemaExtra, "serialization"),
-            (ModelIdentifierField, "serialization"),
-            (ProgressImage, "serialization"),
-        ],
-        ref_template="#/components/schemas/{model}",
-    )
-    for schema_key, schema_json in additional_schemas[1]["$defs"].items():
-        openapi_schema["components"]["schemas"][schema_key] = schema_json
-
-    # Add a reference to the output type to additionalProperties of the invoker schema
-    for invoker in all_invocations:
-        invoker_name = invoker.__name__  # type: ignore [attr-defined] # this is a valid attribute
-        output_type = signature(obj=invoker.invoke).return_annotation
-        output_type_title = output_type_titles[output_type.__name__]
-        invoker_schema = openapi_schema["components"]["schemas"][f"{invoker_name}"]
-        outputs_ref = {"$ref": f"#/components/schemas/{output_type_title}"}
-        invoker_schema["output"] = outputs_ref
-        invoker_schema["class"] = "invocation"
-
-    # This code no longer seems to be necessary?
-    # Leave it here just in case
-    #
-    # from invokeai.backend.model_manager import get_model_config_formats
-    # formats = get_model_config_formats()
-    # for model_config_name, enum_set in formats.items():
-
-    #     if model_config_name in openapi_schema["components"]["schemas"]:
-    #         # print(f"Config with name {name} already defined")
-    #         continue
-
-    #     openapi_schema["components"]["schemas"][model_config_name] = {
-    #         "title": model_config_name,
-    #         "description": "An enumeration.",
-    #         "type": "string",
-    #         "enum": [v.value for v in enum_set],
-    #     }
-
-    app.openapi_schema = openapi_schema
-    return app.openapi_schema
-
-
-app.openapi = custom_openapi  # type: ignore [method-assign] # this is a valid assignment
-
-
-@app.get("/docs", include_in_schema=False)
-def overridden_swagger() -> HTMLResponse:
-    return get_swagger_ui_html(
-        openapi_url=app.openapi_url,  # type: ignore [arg-type] # this is always a string
-        title=f"{app.title} - Swagger UI",
-        swagger_favicon_url="static/docs/invoke-favicon-docs.svg",
-    )
-
-
-@app.get("/redoc", include_in_schema=False)
-def overridden_redoc() -> HTMLResponse:
-    return get_redoc_html(
-        openapi_url=app.openapi_url,  # type: ignore [arg-type] # this is always a string
-        title=f"{app.title} - Redoc",
-        redoc_favicon_url="static/docs/invoke-favicon-docs.svg",
-    )
-
-
-web_root_path = Path(list(web_dir.__path__)[0])
-
-try:
-    app.mount("/", NoCacheStaticFiles(directory=Path(web_root_path, "dist"), html=True), name="ui")
-except RuntimeError:
-    logger.warn(f"No UI found at {web_root_path}/dist, skipping UI mount")
-app.mount(
-    "/static", NoCacheStaticFiles(directory=Path(web_root_path, "static/")), name="static"
-)  # docs favicon is in here
+    app.openapi = custom_openapi  # type: ignore [method-assign] # this is a valid assignment
 
 
 def check_cudnn(logger: logging.Logger) -> None:
@@ -244,27 +243,39 @@ def check_cudnn(logger: logging.Logger) -> None:
             )
 
 
+def find_port(port: int) -> int:
+    """Find a port not in use starting at given port"""
+    # Taken from https://waylonwalker.com/python-find-available-port/, thanks Waylon!
+    # https://github.com/WaylonWalker
+    with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:
+        if s.connect_ex(("localhost", port)) == 0:
+            return find_port(port=port + 1)
+        else:
+            return port
+
+
+def init_dev_reload(logger: logging.Logger) -> None:
+    try:
+        import jurigged
+    except ImportError as e:
+        logger.error(
+            'Can\'t start `--dev_reload` because jurigged is not found; `pip install -e ".[dev]"` to include development dependencies.',
+            exc_info=e,
+        )
+    else:
+        jurigged.watch(logger=InvokeAILogger.get_logger(name="jurigged").info)
+
+
 def invoke_api() -> None:
-    def find_port(port: int) -> int:
-        """Find a port not in use starting at given port"""
-        # Taken from https://waylonwalker.com/python-find-available-port/, thanks Waylon!
-        # https://github.com/WaylonWalker
-        with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:
-            if s.connect_ex(("localhost", port)) == 0:
-                return find_port(port=port + 1)
-            else:
-                return port
+    start = time.time()
+    app_config = get_config()
+    logger = InvokeAILogger.get_logger(config=app_config)
+
+    apply_monkeypatches()
+    fix_mimetypes()
 
     if app_config.dev_reload:
-        try:
-            import jurigged
-        except ImportError as e:
-            logger.error(
-                'Can\'t start `--dev_reload` because jurigged is not found; `pip install -e ".[dev]"` to include development dependencies.',
-                exc_info=e,
-            )
-        else:
-            jurigged.watch(logger=InvokeAILogger.get_logger(name="jurigged").info)
+        init_dev_reload(logger)
 
     port = find_port(app_config.port)
     if port != app_config.port:
@@ -272,6 +283,11 @@ def invoke_api() -> None:
 
     check_cudnn(logger)
 
+    torch_device_name = TorchDevice.get_torch_device_name()
+    logger.info(f"Using torch device: {torch_device_name}")
+
+    app = build_app(app_config, logger)
+
     # Start our own event loop for eventing usage
     loop = asyncio.new_event_loop()
     config = uvicorn.Config(
@@ -291,6 +307,7 @@ def invoke_api() -> None:
         log.handlers.clear()
         for ch in logger.handlers:
             log.addHandler(ch)
+    logger.info(f"API started in {time.time() - start:.2f} seconds")
 
     loop.run_until_complete(server.serve())
 

invokeai/app/invocations/controlnet_image_processors.py

@@ -35,16 +35,15 @@ from invokeai.app.invocations.model import ModelIdentifierField
 from invokeai.app.invocations.primitives import ImageOutput
 from invokeai.app.invocations.util import validate_begin_end_step, validate_weights
 from invokeai.app.services.shared.invocation_context import InvocationContext
-from invokeai.app.util.controlnet_utils import CONTROLNET_MODE_VALUES, CONTROLNET_RESIZE_VALUES, heuristic_resize
+from invokeai.app.util.controlnet_utils import CONTROLNET_MODE_VALUES, CONTROLNET_RESIZE_VALUES
 from invokeai.backend.image_util.canny import get_canny_edges
 from invokeai.backend.image_util.depth_anything import DepthAnythingDetector
 from invokeai.backend.image_util.dw_openpose import DWOpenposeDetector
 from invokeai.backend.image_util.hed import HEDProcessor
 from invokeai.backend.image_util.lineart import LineartProcessor
 from invokeai.backend.image_util.lineart_anime import LineartAnimeProcessor
-from invokeai.backend.image_util.util import np_to_pil, pil_to_np
 
-from .baseinvocation import BaseInvocation, BaseInvocationOutput, Classification, invocation, invocation_output
+from .baseinvocation import BaseInvocation, BaseInvocationOutput, invocation, invocation_output
 
 
 class ControlField(BaseModel):
@@ -635,27 +634,3 @@ class DWOpenposeImageProcessorInvocation(ImageProcessorInvocation):
             resolution=self.image_resolution,
         )
         return processed_image
-
-
-@invocation(
-    "heuristic_resize",
-    title="Heuristic Resize",
-    tags=["image, controlnet"],
-    category="image",
-    version="1.0.0",
-    classification=Classification.Prototype,
-)
-class HeuristicResizeInvocation(BaseInvocation):
-    """Resize an image using a heuristic method. Preserves edge maps."""
-
-    image: ImageField = InputField(description="The image to resize")
-    width: int = InputField(default=512, gt=0, description="The width to resize to (px)")
-    height: int = InputField(default=512, gt=0, description="The height to resize to (px)")
-
-    def invoke(self, context: InvocationContext) -> ImageOutput:
-        image = context.images.get_pil(self.image.image_name, "RGB")
-        np_img = pil_to_np(image)
-        np_resized = heuristic_resize(np_img, (self.width, self.height))
-        resized = np_to_pil(np_resized)
-        image_dto = context.images.save(image=resized)
-        return ImageOutput.build(image_dto)

invokeai/app/invocations/latent.py

@@ -341,7 +341,7 @@ class DenoiseLatentsInvocation(BaseInvocation):
     )
     steps: int = InputField(default=10, gt=0, description=FieldDescriptions.steps)
     cfg_scale: Union[float, List[float]] = InputField(
-        default=7.5, description=FieldDescriptions.cfg_scale, title="CFG Scale"
+        default=7.5, ge=1, description=FieldDescriptions.cfg_scale, title="CFG Scale"
     )
     denoising_start: float = InputField(
         default=0.0,
@@ -563,11 +563,6 @@ class DenoiseLatentsInvocation(BaseInvocation):
             dtype=unet.dtype,
         )
 
-        if isinstance(self.cfg_scale, list):
-            assert (
-                len(self.cfg_scale) == self.steps
-            ), "cfg_scale (list) must have the same length as the number of steps"
-
         conditioning_data = TextConditioningData(
             uncond_text=uncond_text_embedding,
             cond_text=cond_text_embedding,

invokeai/app/services/download/download_default.py

@@ -318,8 +318,10 @@ class DownloadQueueService(DownloadQueueServiceBase):
         in_progress_path.rename(job.download_path)
 
     def _validate_filename(self, directory: str, filename: str) -> bool:
-        pc_name_max = get_pc_name_max(directory)
-        pc_path_max = get_pc_path_max(directory)
+        pc_name_max = os.pathconf(directory, "PC_NAME_MAX") if hasattr(os, "pathconf") else 260  # hardcoded for windows
+        pc_path_max = (
+            os.pathconf(directory, "PC_PATH_MAX") if hasattr(os, "pathconf") else 32767
+        )  # hardcoded for windows with long names enabled
         if "/" in filename:
             return False
         if filename.startswith(".."):
@@ -417,26 +419,6 @@ class DownloadQueueService(DownloadQueueServiceBase):
             self._logger.warning(excp)
 
 
-def get_pc_name_max(directory: str) -> int:
-    if hasattr(os, "pathconf"):
-        try:
-            return os.pathconf(directory, "PC_NAME_MAX")
-        except OSError:
-            # macOS w/ external drives raise OSError
-            pass
-    return 260  # hardcoded for windows
-
-
-def get_pc_path_max(directory: str) -> int:
-    if hasattr(os, "pathconf"):
-        try:
-            return os.pathconf(directory, "PC_PATH_MAX")
-        except OSError:
-            # some platforms may not have this value
-            pass
-    return 32767  # hardcoded for windows with long names enabled
-
-
 # Example on_progress event handler to display a TQDM status bar
 # Activate with:
 #   download_service.download(DownloadJob('http://foo.bar/baz', '/tmp', on_progress=TqdmProgress().update))

invokeai/backend/image_util/util.py

@@ -144,8 +144,10 @@ def resize_image_to_resolution(input_image: np.ndarray, resolution: int) -> np.n
     h = float(input_image.shape[0])
     w = float(input_image.shape[1])
     scaling_factor = float(resolution) / min(h, w)
-    h = int(h * scaling_factor)
-    w = int(w * scaling_factor)
+    h *= scaling_factor
+    w *= scaling_factor
+    h = int(np.round(h / 64.0)) * 64
+    w = int(np.round(w / 64.0)) * 64
     if scaling_factor > 1:
         return cv2.resize(input_image, (w, h), interpolation=cv2.INTER_LANCZOS4)
     else:

invokeai/backend/model_manager/probe.py

@@ -51,7 +51,6 @@ LEGACY_CONFIGS: Dict[BaseModelType, Dict[ModelVariantType, Union[str, Dict[Sched
     },
     BaseModelType.StableDiffusionXL: {
         ModelVariantType.Normal: "sd_xl_base.yaml",
-        ModelVariantType.Inpaint: "sd_xl_inpaint.yaml",
     },
     BaseModelType.StableDiffusionXLRefiner: {
         ModelVariantType.Normal: "sd_xl_refiner.yaml",

invokeai/configs/stable-diffusion/sd_xl_inpaint.yaml

@@ -1,98 +0,0 @@
-model:
-  target: sgm.models.diffusion.DiffusionEngine
-  params:
-    scale_factor: 0.13025
-    disable_first_stage_autocast: True
-
-    denoiser_config:
-      target: sgm.modules.diffusionmodules.denoiser.DiscreteDenoiser
-      params:
-        num_idx: 1000
-
-        weighting_config:
-          target: sgm.modules.diffusionmodules.denoiser_weighting.EpsWeighting
-        scaling_config:
-          target: sgm.modules.diffusionmodules.denoiser_scaling.EpsScaling
-        discretization_config:
-          target: sgm.modules.diffusionmodules.discretizer.LegacyDDPMDiscretization
-
-    network_config:
-      target: sgm.modules.diffusionmodules.openaimodel.UNetModel
-      params:
-        adm_in_channels: 2816
-        num_classes: sequential
-        use_checkpoint: True
-        in_channels: 9
-        out_channels: 4
-        model_channels: 320
-        attention_resolutions: [4, 2]
-        num_res_blocks: 2
-        channel_mult: [1, 2, 4]
-        num_head_channels: 64
-        use_spatial_transformer: True
-        use_linear_in_transformer: True
-        transformer_depth: [1, 2, 10]  # note: the first is unused (due to attn_res starting at 2) 32, 16, 8 --> 64, 32, 16
-        context_dim: 2048
-        spatial_transformer_attn_type: softmax-xformers
-        legacy: False
-
-    conditioner_config:
-      target: sgm.modules.GeneralConditioner
-      params:
-        emb_models:
-          # crossattn cond
-          - is_trainable: False
-            input_key: txt
-            target: sgm.modules.encoders.modules.FrozenCLIPEmbedder
-            params:
-              layer: hidden
-              layer_idx: 11
-          # crossattn and vector cond
-          - is_trainable: False
-            input_key: txt
-            target: sgm.modules.encoders.modules.FrozenOpenCLIPEmbedder2
-            params:
-              arch: ViT-bigG-14
-              version: laion2b_s39b_b160k
-              freeze: True
-              layer: penultimate
-              always_return_pooled: True
-              legacy: False
-          # vector cond
-          - is_trainable: False
-            input_key: original_size_as_tuple
-            target: sgm.modules.encoders.modules.ConcatTimestepEmbedderND
-            params:
-              outdim: 256  # multiplied by two
-          # vector cond
-          - is_trainable: False
-            input_key: crop_coords_top_left
-            target: sgm.modules.encoders.modules.ConcatTimestepEmbedderND
-            params:
-              outdim: 256  # multiplied by two
-          # vector cond
-          - is_trainable: False
-            input_key: target_size_as_tuple
-            target: sgm.modules.encoders.modules.ConcatTimestepEmbedderND
-            params:
-              outdim: 256  # multiplied by two
-
-    first_stage_config:
-      target: sgm.models.autoencoder.AutoencoderKLInferenceWrapper
-      params:
-        embed_dim: 4
-        monitor: val/rec_loss
-        ddconfig:
-          attn_type: vanilla-xformers
-          double_z: true
-          z_channels: 4
-          resolution: 256
-          in_channels: 3
-          out_ch: 3
-          ch: 128
-          ch_mult: [1, 2, 4, 4]
-          num_res_blocks: 2
-          attn_resolutions: []
-          dropout: 0.0
-        lossconfig:
-          target: torch.nn.Identity

invokeai/frontend/web/package.json

@@ -101,7 +101,6 @@
     "serialize-error": "^11.0.3",
     "socket.io-client": "^4.7.5",
     "use-debounce": "^10.0.0",
-    "use-device-pixel-ratio": "^1.1.2",
     "use-image": "^1.1.1",
     "uuid": "^9.0.1",
     "zod": "^3.22.4",

invokeai/frontend/web/pnpm-lock.yaml

@@ -158,9 +158,6 @@ dependencies:
   use-debounce:
     specifier: ^10.0.0
     version: 10.0.0(react@18.2.0)
-  use-device-pixel-ratio:
-    specifier: ^1.1.2
-    version: 1.1.2(react@18.2.0)
   use-image:
     specifier: ^1.1.1
     version: 1.1.1(react-dom@18.2.0)(react@18.2.0)
@@ -13327,14 +13324,6 @@ packages:
       react: 18.2.0
     dev: false
 
-  /use-device-pixel-ratio@1.1.2(react@18.2.0):
-    resolution: {integrity: sha512-nFxV0HwLdRUt20kvIgqHYZe6PK/v4mU1X8/eLsT1ti5ck0l2ob0HDRziaJPx+YWzBo6dMm4cTac3mcyk68Gh+A==}
-    peerDependencies:
-      react: '>=16.8.0'
-    dependencies:
-      react: 18.2.0
-    dev: false
-
   /use-image@1.1.1(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-n4YO2k8AJG/BcDtxmBx8Aa+47kxY5m335dJiCQA5tTeVU4XdhrhqR6wT0WISRXwdMEOv5CSjqekDZkEMiiWaYQ==}
     peerDependencies:

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

@@ -156,7 +156,6 @@
         "balanced": "Balanced",
         "base": "Base",
         "beginEndStepPercent": "Begin / End Step Percentage",
-        "beginEndStepPercentShort": "Begin/End %",
         "bgth": "bg_th",
         "canny": "Canny",
         "cannyDescription": "Canny edge detection",
@@ -228,8 +227,7 @@
         "scribble": "scribble",
         "selectModel": "Select a model",
         "selectCLIPVisionModel": "Select a CLIP Vision model",
-        "setControlImageDimensions": "Copy size to W/H (optimize for model)",
-        "setControlImageDimensionsForce": "Copy size to W/H (ignore model)",
+        "setControlImageDimensions": "Set Control Image Dimensions To W/H",
         "showAdvanced": "Show Advanced",
         "small": "Small",
         "toggleControlNet": "Toggle this ControlNet",
@@ -1513,7 +1511,7 @@
     "app": {
         "storeNotInitialized": "Store is not initialized"
     },
-    "controlLayers": {
+    "regionalPrompts": {
         "deleteAll": "Delete All",
         "addLayer": "Add Layer",
         "moveToFront": "Move to Front",
@@ -1521,7 +1519,8 @@
         "moveForward": "Move Forward",
         "moveBackward": "Move Backward",
         "brushSize": "Brush Size",
-        "controlLayers": "Control Layers (BETA)",
+        "regionalControl": "Regional Control (ALPHA)",
+        "enableRegionalPrompts": "Enable $t(regionalPrompts.regionalPrompts)",
         "globalMaskOpacity": "Global Mask Opacity",
         "autoNegative": "Auto Negative",
         "toggleVisibility": "Toggle Layer Visibility",
@@ -1532,16 +1531,6 @@
         "maskPreviewColor": "Mask Preview Color",
         "addPositivePrompt": "Add $t(common.positivePrompt)",
         "addNegativePrompt": "Add $t(common.negativePrompt)",
-        "addIPAdapter": "Add $t(common.ipAdapter)",
-        "regionalGuidance": "Regional Guidance",
-        "regionalGuidanceLayer": "$t(controlLayers.regionalGuidance) $t(unifiedCanvas.layer)",
-        "controlNetLayer": "$t(common.controlNet) $t(unifiedCanvas.layer)",
-        "ipAdapterLayer": "$t(common.ipAdapter) $t(unifiedCanvas.layer)",
-        "opacity": "Opacity",
-        "globalControlAdapter": "Global $t(controlnet.controlAdapter_one)",
-        "globalControlAdapterLayer": "Global $t(controlnet.controlAdapter_one) $t(unifiedCanvas.layer)",
-        "globalIPAdapter": "Global $t(common.ipAdapter)",
-        "globalIPAdapterLayer": "Global $t(common.ipAdapter) $t(unifiedCanvas.layer)",
-        "opacityFilter": "Opacity Filter"
+        "addIPAdapter": "Add $t(common.ipAdapter)"
     }
 }

invokeai/frontend/web/src/app/logging/logger.ts

@@ -28,7 +28,7 @@ export type LoggerNamespace =
   | 'session'
   | 'queue'
   | 'dnd'
-  | 'controlLayers';
+  | 'regionalPrompts';
 
 export const logger = (namespace: LoggerNamespace) => $logger.get().child({ namespace });
 

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

@@ -16,7 +16,6 @@ import { addCanvasMaskSavedToGalleryListener } from 'app/store/middleware/listen
 import { addCanvasMaskToControlNetListener } from 'app/store/middleware/listenerMiddleware/listeners/canvasMaskToControlNet';
 import { addCanvasMergedListener } from 'app/store/middleware/listenerMiddleware/listeners/canvasMerged';
 import { addCanvasSavedToGalleryListener } from 'app/store/middleware/listenerMiddleware/listeners/canvasSavedToGallery';
-import { addControlLayersToControlAdapterBridge } from 'app/store/middleware/listenerMiddleware/listeners/controlLayersToControlAdapterBridge';
 import { addControlNetAutoProcessListener } from 'app/store/middleware/listenerMiddleware/listeners/controlNetAutoProcess';
 import { addControlNetImageProcessedListener } from 'app/store/middleware/listenerMiddleware/listeners/controlNetImageProcessed';
 import { addEnqueueRequestedCanvasListener } from 'app/store/middleware/listenerMiddleware/listeners/enqueueRequestedCanvas';
@@ -158,5 +157,3 @@ addUpscaleRequestedListener(startAppListening);
 addDynamicPromptsListener(startAppListening);
 
 addSetDefaultSettingsListener(startAppListening);
-
-addControlLayersToControlAdapterBridge(startAppListening);

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

@@ -48,10 +48,12 @@ export const addCanvasImageToControlNetListener = (startAppListening: AppStartLi
         })
       ).unwrap();
 
+      const { image_name } = imageDTO;
+
       dispatch(
         controlAdapterImageChanged({
           id,
-          controlImage: imageDTO,
+          controlImage: image_name,
         })
       );
     },

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

@@ -58,10 +58,12 @@ export const addCanvasMaskToControlNetListener = (startAppListening: AppStartLis
         })
       ).unwrap();
 
+      const { image_name } = imageDTO;
+
       dispatch(
         controlAdapterImageChanged({
           id,
-          controlImage: imageDTO,
+          controlImage: image_name,
         })
       );
     },

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

@@ -1,144 +0,0 @@
-import { createAction } from '@reduxjs/toolkit';
-import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
-import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
-import { controlAdapterAdded, controlAdapterRemoved } from 'features/controlAdapters/store/controlAdaptersSlice';
-import type { ControlNetConfig, IPAdapterConfig } from 'features/controlAdapters/store/types';
-import { isControlAdapterProcessorType } from 'features/controlAdapters/store/types';
-import {
-  controlAdapterLayerAdded,
-  ipAdapterLayerAdded,
-  layerDeleted,
-  maskLayerIPAdapterAdded,
-  maskLayerIPAdapterDeleted,
-  regionalGuidanceLayerAdded,
-} from 'features/controlLayers/store/controlLayersSlice';
-import type { Layer } from 'features/controlLayers/store/types';
-import { modelConfigsAdapterSelectors, modelsApi } from 'services/api/endpoints/models';
-import { isControlNetModelConfig, isIPAdapterModelConfig } from 'services/api/types';
-import { assert } from 'tsafe';
-import { v4 as uuidv4 } from 'uuid';
-
-export const guidanceLayerAdded = createAction<Layer['type']>('controlLayers/guidanceLayerAdded');
-export const guidanceLayerDeleted = createAction<string>('controlLayers/guidanceLayerDeleted');
-export const allLayersDeleted = createAction('controlLayers/allLayersDeleted');
-export const guidanceLayerIPAdapterAdded = createAction<string>('controlLayers/guidanceLayerIPAdapterAdded');
-export const guidanceLayerIPAdapterDeleted = createAction<{ layerId: string; ipAdapterId: string }>(
-  'controlLayers/guidanceLayerIPAdapterDeleted'
-);
-
-export const addControlLayersToControlAdapterBridge = (startAppListening: AppStartListening) => {
-  startAppListening({
-    actionCreator: guidanceLayerAdded,
-    effect: (action, { dispatch, getState }) => {
-      const type = action.payload;
-      const layerId = uuidv4();
-      if (type === 'regional_guidance_layer') {
-        dispatch(regionalGuidanceLayerAdded({ layerId }));
-        return;
-      }
-
-      const state = getState();
-      const baseModel = state.generation.model?.base;
-      const modelConfigs = modelsApi.endpoints.getModelConfigs.select(undefined)(state).data;
-
-      if (type === 'ip_adapter_layer') {
-        const ipAdapterId = uuidv4();
-        const overrides: Partial<IPAdapterConfig> = {
-          id: ipAdapterId,
-        };
-
-        // Find and select the first matching model
-        if (modelConfigs) {
-          const models = modelConfigsAdapterSelectors.selectAll(modelConfigs).filter(isIPAdapterModelConfig);
-          overrides.model = models.find((m) => m.base === baseModel) ?? null;
-        }
-        dispatch(controlAdapterAdded({ type: 'ip_adapter', overrides }));
-        dispatch(ipAdapterLayerAdded({ layerId, ipAdapterId }));
-        return;
-      }
-
-      if (type === 'control_adapter_layer') {
-        const controlNetId = uuidv4();
-        const overrides: Partial<ControlNetConfig> = {
-          id: controlNetId,
-        };
-
-        // Find and select the first matching model
-        if (modelConfigs) {
-          const models = modelConfigsAdapterSelectors.selectAll(modelConfigs).filter(isControlNetModelConfig);
-          const model = models.find((m) => m.base === baseModel) ?? null;
-          overrides.model = model;
-          const defaultPreprocessor = model?.default_settings?.preprocessor;
-          overrides.processorType = isControlAdapterProcessorType(defaultPreprocessor) ? defaultPreprocessor : 'none';
-          overrides.processorNode = CONTROLNET_PROCESSORS[overrides.processorType].buildDefaults(baseModel);
-        }
-        dispatch(controlAdapterAdded({ type: 'controlnet', overrides }));
-        dispatch(controlAdapterLayerAdded({ layerId, controlNetId }));
-        return;
-      }
-    },
-  });
-
-  startAppListening({
-    actionCreator: guidanceLayerDeleted,
-    effect: (action, { getState, dispatch }) => {
-      const layerId = action.payload;
-      const state = getState();
-      const layer = state.controlLayers.present.layers.find((l) => l.id === layerId);
-      assert(layer, `Layer ${layerId} not found`);
-
-      if (layer.type === 'ip_adapter_layer') {
-        dispatch(controlAdapterRemoved({ id: layer.ipAdapterId }));
-      } else if (layer.type === 'control_adapter_layer') {
-        dispatch(controlAdapterRemoved({ id: layer.controlNetId }));
-      } else if (layer.type === 'regional_guidance_layer') {
-        for (const ipAdapterId of layer.ipAdapterIds) {
-          dispatch(controlAdapterRemoved({ id: ipAdapterId }));
-        }
-      }
-      dispatch(layerDeleted(layerId));
-    },
-  });
-
-  startAppListening({
-    actionCreator: allLayersDeleted,
-    effect: (action, { dispatch, getOriginalState }) => {
-      const state = getOriginalState();
-      for (const layer of state.controlLayers.present.layers) {
-        dispatch(guidanceLayerDeleted(layer.id));
-      }
-    },
-  });
-
-  startAppListening({
-    actionCreator: guidanceLayerIPAdapterAdded,
-    effect: (action, { dispatch, getState }) => {
-      const layerId = action.payload;
-      const ipAdapterId = uuidv4();
-      const overrides: Partial<IPAdapterConfig> = {
-        id: ipAdapterId,
-      };
-
-      // Find and select the first matching model
-      const state = getState();
-      const baseModel = state.generation.model?.base;
-      const modelConfigs = modelsApi.endpoints.getModelConfigs.select(undefined)(state).data;
-      if (modelConfigs) {
-        const models = modelConfigsAdapterSelectors.selectAll(modelConfigs).filter(isIPAdapterModelConfig);
-        overrides.model = models.find((m) => m.base === baseModel) ?? null;
-      }
-
-      dispatch(controlAdapterAdded({ type: 'ip_adapter', overrides }));
-      dispatch(maskLayerIPAdapterAdded({ layerId, ipAdapterId }));
-    },
-  });
-
-  startAppListening({
-    actionCreator: guidanceLayerIPAdapterDeleted,
-    effect: (action, { dispatch }) => {
-      const { layerId, ipAdapterId } = action.payload;
-      dispatch(controlAdapterRemoved({ id: ipAdapterId }));
-      dispatch(maskLayerIPAdapterDeleted({ layerId, ipAdapterId }));
-    },
-  });
-};

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

@@ -12,7 +12,6 @@ import {
   selectControlAdapterById,
 } from 'features/controlAdapters/store/controlAdaptersSlice';
 import { isControlNetOrT2IAdapter } from 'features/controlAdapters/store/types';
-import { isEqual } from 'lodash-es';
 
 type AnyControlAdapterParamChangeAction =
   | ReturnType<typeof controlAdapterProcessorParamsChanged>
@@ -53,11 +52,6 @@ const predicate: AnyListenerPredicate<RootState> = (action, state, prevState) =>
     return false;
   }
 
-  if (prevCA.controlImage === ca.controlImage && isEqual(prevCA.processorNode, ca.processorNode)) {
-    // Don't re-process if the processor hasn't changed
-    return false;
-  }
-
   const isProcessorSelected = processorType !== 'none';
 
   const hasControlImage = Boolean(controlImage);

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

@@ -91,7 +91,7 @@ export const addControlNetImageProcessedListener = (startAppListening: AppStartL
           dispatch(
             controlAdapterProcessedImageChanged({
               id,
-              processedControlImage,
+              processedControlImage: processedControlImage.image_name,
             })
           );
         }

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

@@ -71,7 +71,7 @@ export const addImageDroppedListener = (startAppListening: AppStartListening) =>
         dispatch(
           controlAdapterImageChanged({
             id,
-            controlImage: activeData.payload.imageDTO,
+            controlImage: activeData.payload.imageDTO.image_name,
           })
         );
         dispatch(

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

@@ -96,7 +96,7 @@ export const addImageUploadedFulfilledListener = (startAppListening: AppStartLis
         dispatch(
           controlAdapterImageChanged({
             id,
-            controlImage: imageDTO,
+            controlImage: imageDTO.image_name,
           })
         );
         dispatch(

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

@@ -1,7 +1,7 @@
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
 import {
-  controlAdapterModelChanged,
+  controlAdapterIsEnabledChanged,
   selectControlAdapterAll,
 } from 'features/controlAdapters/store/controlAdaptersSlice';
 import { loraRemoved } from 'features/lora/store/loraSlice';
@@ -54,7 +54,7 @@ export const addModelSelectedListener = (startAppListening: AppStartListening) =
         // handle incompatible controlnets
         selectControlAdapterAll(state.controlAdapters).forEach((ca) => {
           if (ca.model?.base !== newBaseModel) {
-            dispatch(controlAdapterModelChanged({ id: ca.id, modelConfig: null }));
+            dispatch(controlAdapterIsEnabledChanged({ id: ca.id, isEnabled: false }));
             modelsCleared += 1;
           }
         });

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

@@ -6,10 +6,9 @@ import {
   controlAdapterModelCleared,
   selectControlAdapterAll,
 } from 'features/controlAdapters/store/controlAdaptersSlice';
-import { heightChanged, widthChanged } from 'features/controlLayers/store/controlLayersSlice';
 import { loraRemoved } from 'features/lora/store/loraSlice';
 import { calculateNewSize } from 'features/parameters/components/ImageSize/calculateNewSize';
-import { modelChanged, vaeSelected } from 'features/parameters/store/generationSlice';
+import { heightChanged, modelChanged, vaeSelected, widthChanged } from 'features/parameters/store/generationSlice';
 import { zParameterModel, zParameterVAEModel } from 'features/parameters/types/parameterSchemas';
 import { getIsSizeOptimal, getOptimalDimension } from 'features/parameters/util/optimalDimension';
 import { refinerModelChanged } from 'features/sdxl/store/sdxlSlice';
@@ -70,22 +69,16 @@ const handleMainModels: ModelHandler = (models, state, dispatch, log) => {
       dispatch(modelChanged(defaultModelInList, currentModel));
 
       const optimalDimension = getOptimalDimension(defaultModelInList);
-      if (
-        getIsSizeOptimal(
-          state.controlLayers.present.size.width,
-          state.controlLayers.present.size.height,
-          optimalDimension
-        )
-      ) {
+      if (getIsSizeOptimal(state.generation.width, state.generation.height, optimalDimension)) {
         return;
       }
       const { width, height } = calculateNewSize(
-        state.controlLayers.present.size.aspectRatio.value,
+        state.generation.aspectRatio.value,
         optimalDimension * optimalDimension
       );
 
-      dispatch(widthChanged({ width }));
-      dispatch(heightChanged({ height }));
+      dispatch(widthChanged(width));
+      dispatch(heightChanged(height));
       return;
     }
   }

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

@@ -1,6 +1,5 @@
 import { isAnyOf } from '@reduxjs/toolkit';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
-import { positivePromptChanged } from 'features/controlLayers/store/controlLayersSlice';
 import {
   combinatorialToggled,
   isErrorChanged,
@@ -11,16 +10,11 @@ import {
   promptsChanged,
 } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
 import { getShouldProcessPrompt } from 'features/dynamicPrompts/util/getShouldProcessPrompt';
+import { setPositivePrompt } from 'features/parameters/store/generationSlice';
 import { utilitiesApi } from 'services/api/endpoints/utilities';
 import { socketConnected } from 'services/events/actions';
 
-const matcher = isAnyOf(
-  positivePromptChanged,
-  combinatorialToggled,
-  maxPromptsChanged,
-  maxPromptsReset,
-  socketConnected
-);
+const matcher = isAnyOf(setPositivePrompt, combinatorialToggled, maxPromptsChanged, maxPromptsReset, socketConnected);
 
 export const addDynamicPromptsListener = (startAppListening: AppStartListening) => {
   startAppListening({
@@ -28,7 +22,7 @@ export const addDynamicPromptsListener = (startAppListening: AppStartListening)
     effect: async (action, { dispatch, getState, cancelActiveListeners, delay }) => {
       cancelActiveListeners();
       const state = getState();
-      const { positivePrompt } = state.controlLayers.present;
+      const { positivePrompt } = state.generation;
       const { maxPrompts } = state.dynamicPrompts;
 
       if (state.config.disabledFeatures.includes('dynamicPrompting')) {
@@ -38,7 +32,7 @@ export const addDynamicPromptsListener = (startAppListening: AppStartListening)
       const cachedPrompts = utilitiesApi.endpoints.dynamicPrompts.select({
         prompt: positivePrompt,
         max_prompts: maxPrompts,
-      })(state).data;
+      })(getState()).data;
 
       if (cachedPrompts) {
         dispatch(promptsChanged(cachedPrompts.prompts));
@@ -46,8 +40,8 @@ export const addDynamicPromptsListener = (startAppListening: AppStartListening)
         return;
       }
 
-      if (!getShouldProcessPrompt(positivePrompt)) {
-        dispatch(promptsChanged([positivePrompt]));
+      if (!getShouldProcessPrompt(state.generation.positivePrompt)) {
+        dispatch(promptsChanged([state.generation.positivePrompt]));
         dispatch(parsingErrorChanged(undefined));
         dispatch(isErrorChanged(false));
         return;

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

@@ -1,13 +1,14 @@
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
-import { heightChanged, widthChanged } from 'features/controlLayers/store/controlLayersSlice';
 import { setDefaultSettings } from 'features/parameters/store/actions';
 import {
+  heightRecalled,
   setCfgRescaleMultiplier,
   setCfgScale,
   setScheduler,
   setSteps,
   vaePrecisionChanged,
   vaeSelected,
+  widthRecalled,
 } from 'features/parameters/store/generationSlice';
 import {
   isParameterCFGRescaleMultiplier,
@@ -99,13 +100,13 @@ export const addSetDefaultSettingsListener = (startAppListening: AppStartListeni
 
         if (width) {
           if (isParameterWidth(width)) {
-            dispatch(widthChanged({ width, updateAspectRatio: true }));
+            dispatch(widthRecalled(width));
           }
         }
 
         if (height) {
           if (isParameterHeight(height)) {
-            dispatch(heightChanged({ height, updateAspectRatio: true }));
+            dispatch(heightRecalled(height));
           }
         }
 

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

@@ -10,11 +10,6 @@ import {
   controlAdaptersPersistConfig,
   controlAdaptersSlice,
 } from 'features/controlAdapters/store/controlAdaptersSlice';
-import {
-  controlLayersPersistConfig,
-  controlLayersSlice,
-  controlLayersUndoableConfig,
-} from 'features/controlLayers/store/controlLayersSlice';
 import { deleteImageModalSlice } from 'features/deleteImageModal/store/slice';
 import { dynamicPromptsPersistConfig, dynamicPromptsSlice } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
 import { galleryPersistConfig, gallerySlice } from 'features/gallery/store/gallerySlice';
@@ -26,6 +21,11 @@ import { workflowPersistConfig, workflowSlice } from 'features/nodes/store/workf
 import { generationPersistConfig, generationSlice } from 'features/parameters/store/generationSlice';
 import { postprocessingPersistConfig, postprocessingSlice } from 'features/parameters/store/postprocessingSlice';
 import { queueSlice } from 'features/queue/store/queueSlice';
+import {
+  regionalPromptsPersistConfig,
+  regionalPromptsSlice,
+  regionalPromptsUndoableConfig,
+} from 'features/regionalPrompts/store/regionalPromptsSlice';
 import { sdxlPersistConfig, sdxlSlice } from 'features/sdxl/store/sdxlSlice';
 import { configSlice } from 'features/system/store/configSlice';
 import { systemPersistConfig, systemSlice } from 'features/system/store/systemSlice';
@@ -65,7 +65,7 @@ const allReducers = {
   [queueSlice.name]: queueSlice.reducer,
   [workflowSlice.name]: workflowSlice.reducer,
   [hrfSlice.name]: hrfSlice.reducer,
-  [controlLayersSlice.name]: undoable(controlLayersSlice.reducer, controlLayersUndoableConfig),
+  [regionalPromptsSlice.name]: undoable(regionalPromptsSlice.reducer, regionalPromptsUndoableConfig),
   [api.reducerPath]: api.reducer,
 };
 
@@ -110,7 +110,7 @@ const persistConfigs: { [key in keyof typeof allReducers]?: PersistConfig } = {
   [loraPersistConfig.name]: loraPersistConfig,
   [modelManagerV2PersistConfig.name]: modelManagerV2PersistConfig,
   [hrfPersistConfig.name]: hrfPersistConfig,
-  [controlLayersPersistConfig.name]: controlLayersPersistConfig,
+  [regionalPromptsPersistConfig.name]: regionalPromptsPersistConfig,
 };
 
 const unserialize: UnserializeFunction = (data, key) => {

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

@@ -5,7 +5,6 @@ import {
   selectControlAdaptersSlice,
 } from 'features/controlAdapters/store/controlAdaptersSlice';
 import { isControlNetOrT2IAdapter } from 'features/controlAdapters/store/types';
-import { selectControlLayersSlice } from 'features/controlLayers/store/controlLayersSlice';
 import { selectDynamicPromptsSlice } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
 import { getShouldProcessPrompt } from 'features/dynamicPrompts/util/getShouldProcessPrompt';
 import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
@@ -24,12 +23,10 @@ const selector = createMemoizedSelector(
     selectSystemSlice,
     selectNodesSlice,
     selectDynamicPromptsSlice,
-    selectControlLayersSlice,
     activeTabNameSelector,
   ],
-  (controlAdapters, generation, system, nodes, dynamicPrompts, controlLayers, activeTabName) => {
-    const { initialImage, model } = generation;
-    const { positivePrompt } = controlLayers.present;
+  (controlAdapters, generation, system, nodes, dynamicPrompts, activeTabName) => {
+    const { initialImage, model, positivePrompt } = generation;
 
     const { isConnected } = system;
 
@@ -97,41 +94,7 @@ const selector = createMemoizedSelector(
         reasons.push(i18n.t('parameters.invoke.noModelSelected'));
       }
 
-      let enabledControlAdapters = selectControlAdapterAll(controlAdapters).filter((ca) => ca.isEnabled);
-
-      if (activeTabName === 'txt2img') {
-        // Special handling for control layers on txt2img
-        const enabledControlLayersAdapterIds = controlLayers.present.layers
-          .filter((l) => l.isEnabled)
-          .flatMap((layer) => {
-            if (layer.type === 'regional_guidance_layer') {
-              return layer.ipAdapterIds;
-            }
-            if (layer.type === 'control_adapter_layer') {
-              return [layer.controlNetId];
-            }
-            if (layer.type === 'ip_adapter_layer') {
-              return [layer.ipAdapterId];
-            }
-          });
-
-        enabledControlAdapters = enabledControlAdapters.filter((ca) => enabledControlLayersAdapterIds.includes(ca.id));
-      } else {
-        const allControlLayerAdapterIds = controlLayers.present.layers.flatMap((layer) => {
-          if (layer.type === 'regional_guidance_layer') {
-            return layer.ipAdapterIds;
-          }
-          if (layer.type === 'control_adapter_layer') {
-            return [layer.controlNetId];
-          }
-          if (layer.type === 'ip_adapter_layer') {
-            return [layer.ipAdapterId];
-          }
-        });
-        enabledControlAdapters = enabledControlAdapters.filter((ca) => !allControlLayerAdapterIds.includes(ca.id));
-      }
-
-      enabledControlAdapters.forEach((ca, i) => {
+      selectControlAdapterAll(controlAdapters).forEach((ca, i) => {
         if (!ca.isEnabled) {
           return;
         }

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

@@ -1,3 +0,0 @@
-export const stopPropagation = (e: React.MouseEvent) => {
-  e.stopPropagation();
-};

invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx

@@ -113,7 +113,7 @@ const ControlAdapterConfig = (props: { id: string; number: number }) => {
       <Flex w="full" flexDir="column" gap={4}>
         <Flex gap={8} w="full" alignItems="center">
           <Flex flexDir="column" gap={4} h={controlAdapterType === 'ip_adapter' ? 40 : 32} w="full">
-            {controlAdapterType === 'ip_adapter' && <ParamControlAdapterIPMethod id={id} />}
+            <ParamControlAdapterIPMethod id={id} />
             <ParamControlAdapterWeight id={id} />
             <ParamControlAdapterBeginEnd id={id} />
           </Flex>

invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx

@@ -13,10 +13,9 @@ import {
   controlAdapterImageChanged,
   selectControlAdaptersSlice,
 } from 'features/controlAdapters/store/controlAdaptersSlice';
-import { heightChanged, widthChanged } from 'features/controlLayers/store/controlLayersSlice';
 import type { TypesafeDraggableData, TypesafeDroppableData } from 'features/dnd/types';
 import { calculateNewSize } from 'features/parameters/components/ImageSize/calculateNewSize';
-import { selectOptimalDimension } from 'features/parameters/store/generationSlice';
+import { heightChanged, selectOptimalDimension, widthChanged } from 'features/parameters/store/generationSlice';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -100,8 +99,8 @@ const ControlAdapterImagePreview = ({ isSmall, id }: Props) => {
         controlImage.width / controlImage.height,
         optimalDimension * optimalDimension
       );
-      dispatch(widthChanged({ width, updateAspectRatio: true }));
-      dispatch(heightChanged({ height, updateAspectRatio: true }));
+      dispatch(widthChanged(width));
+      dispatch(heightChanged(height));
     }
   }, [controlImage, activeTabName, dispatch, optimalDimension]);
 

invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterIPMethod.tsx

@@ -46,6 +46,10 @@ const ParamControlAdapterIPMethod = ({ id }: Props) => {
 
   const value = useMemo(() => options.find((o) => o.value === method), [options, method]);
 
+  if (!method) {
+    return null;
+  }
+
   return (
     <FormControl>
       <InformationalPopover feature="ipAdapterMethod">

invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterModel.tsx

@@ -102,9 +102,13 @@ const ParamControlAdapterModel = ({ id }: ParamControlAdapterModelProps) => {
   );
 
   return (
-    <Flex gap={4}>
+    <Flex sx={{ gap: 2 }}>
       <Tooltip label={selectedModel?.description}>
-        <FormControl isDisabled={!isEnabled} isInvalid={!value || mainModel?.base !== modelConfig?.base} w="full">
+        <FormControl
+          isDisabled={!isEnabled}
+          isInvalid={!value || mainModel?.base !== modelConfig?.base}
+          sx={{ width: '100%' }}
+        >
           <Combobox
             options={options}
             placeholder={t('controlnet.selectModel')}
@@ -118,8 +122,7 @@ const ParamControlAdapterModel = ({ id }: ParamControlAdapterModelProps) => {
         <FormControl
           isDisabled={!isEnabled}
           isInvalid={!value || mainModel?.base !== modelConfig?.base}
-          width="max-content"
-          minWidth={28}
+          sx={{ width: 'max-content', minWidth: 28 }}
         >
           <Combobox
             options={clipVisionOptions}

invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterIPMethod.ts

@@ -5,15 +5,15 @@ import {
   selectControlAdaptersSlice,
 } from 'features/controlAdapters/store/controlAdaptersSlice';
 import { useMemo } from 'react';
-import { assert } from 'tsafe';
 
 export const useControlAdapterIPMethod = (id: string) => {
   const selector = useMemo(
     () =>
       createMemoizedSelector(selectControlAdaptersSlice, (controlAdapters) => {
-        const ca = selectControlAdapterById(controlAdapters, id);
-        assert(ca?.type === 'ip_adapter');
-        return ca.method;
+        const cn = selectControlAdapterById(controlAdapters, id);
+        if (cn && cn?.type === 'ip_adapter') {
+          return cn.method;
+        }
       }),
     [id]
   );

invokeai/frontend/web/src/features/controlAdapters/store/controlAdaptersSlice.ts

@@ -6,8 +6,9 @@ import { deepClone } from 'common/util/deepClone';
 import { buildControlAdapter } from 'features/controlAdapters/util/buildControlAdapter';
 import { buildControlAdapterProcessor } from 'features/controlAdapters/util/buildControlAdapterProcessor';
 import { zModelIdentifierField } from 'features/nodes/types/common';
+import { maskLayerIPAdapterAdded } from 'features/regionalPrompts/store/regionalPromptsSlice';
 import { merge, uniq } from 'lodash-es';
-import type { ControlNetModelConfig, ImageDTO, IPAdapterModelConfig, T2IAdapterModelConfig } from 'services/api/types';
+import type { ControlNetModelConfig, IPAdapterModelConfig, T2IAdapterModelConfig } from 'services/api/types';
 import { socketInvocationError } from 'services/events/actions';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -134,46 +135,23 @@ export const controlAdaptersSlice = createSlice({
       const { id, isEnabled } = action.payload;
       caAdapter.updateOne(state, { id, changes: { isEnabled } });
     },
-    controlAdapterImageChanged: (state, action: PayloadAction<{ id: string; controlImage: ImageDTO | null }>) => {
+    controlAdapterImageChanged: (
+      state,
+      action: PayloadAction<{
+        id: string;
+        controlImage: string | null;
+      }>
+    ) => {
       const { id, controlImage } = action.payload;
       const ca = selectControlAdapterById(state, id);
       if (!ca) {
         return;
       }
 
-      if (isControlNetOrT2IAdapter(ca)) {
-        if (controlImage) {
-          const { image_name, width, height } = controlImage;
-          const processorNode = deepClone(ca.processorNode);
-          const minDim = Math.min(controlImage.width, controlImage.height);
-          if ('detect_resolution' in processorNode) {
-            processorNode.detect_resolution = minDim;
-          }
-          if ('image_resolution' in processorNode) {
-            processorNode.image_resolution = minDim;
-          }
-          if ('resolution' in processorNode) {
-            processorNode.resolution = minDim;
-          }
-          caAdapter.updateOne(state, {
-            id,
-            changes: {
-              processorNode,
-              controlImage: image_name,
-              controlImageDimensions: { width, height },
-              processedControlImage: null,
-            },
-          });
-        } else {
-          caAdapter.updateOne(state, {
-            id,
-            changes: { controlImage: null, controlImageDimensions: null, processedControlImage: null },
-          });
-        }
-      } else {
-        // ip adapter
-        caAdapter.updateOne(state, { id, changes: { controlImage: controlImage?.image_name ?? null } });
-      }
+      caAdapter.updateOne(state, {
+        id,
+        changes: { controlImage, processedControlImage: null },
+      });
 
       if (controlImage !== null && isControlNetOrT2IAdapter(ca) && ca.processorType !== 'none') {
         state.pendingControlImages.push(id);
@@ -183,7 +161,7 @@ export const controlAdaptersSlice = createSlice({
       state,
       action: PayloadAction<{
         id: string;
-        processedControlImage: ImageDTO | null;
+        processedControlImage: string | null;
       }>
     ) => {
       const { id, processedControlImage } = action.payload;
@@ -196,24 +174,12 @@ export const controlAdaptersSlice = createSlice({
         return;
       }
 
-      if (processedControlImage) {
-        const { image_name, width, height } = processedControlImage;
-        caAdapter.updateOne(state, {
-          id,
-          changes: {
-            processedControlImage: image_name,
-            processedControlImageDimensions: { width, height },
-          },
-        });
-      } else {
-        caAdapter.updateOne(state, {
-          id,
-          changes: {
-            processedControlImage: null,
-            processedControlImageDimensions: null,
-          },
-        });
-      }
+      caAdapter.updateOne(state, {
+        id,
+        changes: {
+          processedControlImage,
+        },
+      });
 
       state.pendingControlImages = state.pendingControlImages.filter((pendingId) => pendingId !== id);
     },
@@ -227,7 +193,7 @@ export const controlAdaptersSlice = createSlice({
       state,
       action: PayloadAction<{
         id: string;
-        modelConfig: ControlNetModelConfig | T2IAdapterModelConfig | IPAdapterModelConfig | null;
+        modelConfig: ControlNetModelConfig | T2IAdapterModelConfig | IPAdapterModelConfig;
       }>
     ) => {
       const { id, modelConfig } = action.payload;
@@ -236,11 +202,6 @@ export const controlAdaptersSlice = createSlice({
         return;
       }
 
-      if (modelConfig === null) {
-        caAdapter.updateOne(state, { id, changes: { model: null } });
-        return;
-      }
-
       const model = zModelIdentifierField.parse(modelConfig);
 
       if (!isControlNetOrT2IAdapter(cn)) {
@@ -248,36 +209,22 @@ export const controlAdaptersSlice = createSlice({
         return;
       }
 
+      const update: Update<ControlNetConfig | T2IAdapterConfig, string> = {
+        id,
+        changes: { model, shouldAutoConfig: true },
+      };
+
+      update.changes.processedControlImage = null;
+
       if (modelConfig.type === 'ip_adapter') {
         // should never happen...
         return;
       }
 
-      // We always update the model
-      const update: Update<ControlNetConfig | T2IAdapterConfig, string> = { id, changes: { model } };
-
-      // Build the default processor for this model
       const processor = buildControlAdapterProcessor(modelConfig);
-      if (processor.processorType !== cn.processorNode.type) {
-        // If the processor type has changed, update the processor node
-        update.changes.shouldAutoConfig = true;
-        update.changes.processedControlImage = null;
-        update.changes.processorType = processor.processorType;
-        update.changes.processorNode = processor.processorNode;
+      update.changes.processorType = processor.processorType;
+      update.changes.processorNode = processor.processorNode;
 
-        if (cn.controlImageDimensions) {
-          const minDim = Math.min(cn.controlImageDimensions.width, cn.controlImageDimensions.height);
-          if ('detect_resolution' in update.changes.processorNode) {
-            update.changes.processorNode.detect_resolution = minDim;
-          }
-          if ('image_resolution' in update.changes.processorNode) {
-            update.changes.processorNode.image_resolution = minDim;
-          }
-          if ('resolution' in update.changes.processorNode) {
-            update.changes.processorNode.resolution = minDim;
-          }
-        }
-      }
       caAdapter.updateOne(state, update);
     },
     controlAdapterWeightChanged: (state, action: PayloadAction<{ id: string; weight: number }>) => {
@@ -394,23 +341,8 @@ export const controlAdaptersSlice = createSlice({
 
       if (update.changes.shouldAutoConfig && modelConfig) {
         const processor = buildControlAdapterProcessor(modelConfig);
-        if (processor.processorType !== cn.processorNode.type) {
-          update.changes.processorType = processor.processorType;
-          update.changes.processorNode = processor.processorNode;
-          // Copy image resolution settings, urgh
-          if (cn.controlImageDimensions) {
-            const minDim = Math.min(cn.controlImageDimensions.width, cn.controlImageDimensions.height);
-            if ('detect_resolution' in update.changes.processorNode) {
-              update.changes.processorNode.detect_resolution = minDim;
-            }
-            if ('image_resolution' in update.changes.processorNode) {
-              update.changes.processorNode.image_resolution = minDim;
-            }
-            if ('resolution' in update.changes.processorNode) {
-              update.changes.processorNode.resolution = minDim;
-            }
-          }
-        }
+        update.changes.processorType = processor.processorType;
+        update.changes.processorNode = processor.processorNode;
       }
 
       caAdapter.updateOne(state, update);
@@ -451,6 +383,10 @@ export const controlAdaptersSlice = createSlice({
     builder.addCase(socketInvocationError, (state) => {
       state.pendingControlImages = [];
     });
+
+    builder.addCase(maskLayerIPAdapterAdded, (state, action) => {
+      caAdapter.addOne(state, buildControlAdapter(action.meta.uuid, 'ip_adapter'));
+    });
   },
 });
 

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

@@ -225,9 +225,7 @@ export type ControlNetConfig = {
   controlMode: ControlMode;
   resizeMode: ResizeMode;
   controlImage: string | null;
-  controlImageDimensions: { width: number; height: number } | null;
   processedControlImage: string | null;
-  processedControlImageDimensions: { width: number; height: number } | null;
   processorType: ControlAdapterProcessorType;
   processorNode: RequiredControlAdapterProcessorNode;
   shouldAutoConfig: boolean;
@@ -243,9 +241,7 @@ export type T2IAdapterConfig = {
   endStepPct: number;
   resizeMode: ResizeMode;
   controlImage: string | null;
-  controlImageDimensions: { width: number; height: number } | null;
   processedControlImage: string | null;
-  processedControlImageDimensions: { width: number; height: number } | null;
   processorType: ControlAdapterProcessorType;
   processorNode: RequiredControlAdapterProcessorNode;
   shouldAutoConfig: boolean;

invokeai/frontend/web/src/features/controlAdapters/util/buildControlAdapter.ts

@@ -20,9 +20,7 @@ export const initialControlNet: Omit<ControlNetConfig, 'id'> = {
   controlMode: 'balanced',
   resizeMode: 'just_resize',
   controlImage: null,
-  controlImageDimensions: null,
   processedControlImage: null,
-  processedControlImageDimensions: null,
   processorType: 'canny_image_processor',
   processorNode: CONTROLNET_PROCESSORS.canny_image_processor.buildDefaults() as RequiredCannyImageProcessorInvocation,
   shouldAutoConfig: true,
@@ -37,9 +35,7 @@ export const initialT2IAdapter: Omit<T2IAdapterConfig, 'id'> = {
   endStepPct: 1,
   resizeMode: 'just_resize',
   controlImage: null,
-  controlImageDimensions: null,
   processedControlImage: null,
-  processedControlImageDimensions: null,
   processorType: 'canny_image_processor',
   processorNode: CONTROLNET_PROCESSORS.canny_image_processor.buildDefaults() as RequiredCannyImageProcessorInvocation,
   shouldAutoConfig: true,

invokeai/frontend/web/src/features/controlLayers/components/AddLayerButton.tsx

@@ -1,41 +0,0 @@
-import { Button, Menu, MenuButton, MenuItem, MenuList } from '@invoke-ai/ui-library';
-import { guidanceLayerAdded } from 'app/store/middleware/listenerMiddleware/listeners/controlLayersToControlAdapterBridge';
-import { useAppDispatch } from 'app/store/storeHooks';
-import { memo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PiPlusBold } from 'react-icons/pi';
-
-export const AddLayerButton = memo(() => {
-  const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-  const addRegionalGuidanceLayer = useCallback(() => {
-    dispatch(guidanceLayerAdded('regional_guidance_layer'));
-  }, [dispatch]);
-  const addControlAdapterLayer = useCallback(() => {
-    dispatch(guidanceLayerAdded('control_adapter_layer'));
-  }, [dispatch]);
-  const addIPAdapterLayer = useCallback(() => {
-    dispatch(guidanceLayerAdded('ip_adapter_layer'));
-  }, [dispatch]);
-
-  return (
-    <Menu>
-      <MenuButton as={Button} leftIcon={<PiPlusBold />} variant="ghost">
-        {t('controlLayers.addLayer')}
-      </MenuButton>
-      <MenuList>
-        <MenuItem icon={<PiPlusBold />} onClick={addRegionalGuidanceLayer}>
-          {t('controlLayers.regionalGuidanceLayer')}
-        </MenuItem>
-        <MenuItem icon={<PiPlusBold />} onClick={addControlAdapterLayer}>
-          {t('controlLayers.globalControlAdapterLayer')}
-        </MenuItem>
-        <MenuItem icon={<PiPlusBold />} onClick={addIPAdapterLayer}>
-          {t('controlLayers.globalIPAdapterLayer')}
-        </MenuItem>
-      </MenuList>
-    </Menu>
-  );
-});
-
-AddLayerButton.displayName = 'AddLayerButton';

invokeai/frontend/web/src/features/controlLayers/components/CALayerListItem.tsx

@@ -1,71 +0,0 @@
-import { Flex, Spacer, useDisclosure } from '@invoke-ai/ui-library';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import CALayerOpacity from 'features/controlLayers/components/CALayerOpacity';
-import ControlAdapterLayerConfig from 'features/controlLayers/components/controlAdapterOverrides/ControlAdapterLayerConfig';
-import { LayerDeleteButton } from 'features/controlLayers/components/LayerDeleteButton';
-import { LayerMenu } from 'features/controlLayers/components/LayerMenu';
-import { LayerTitle } from 'features/controlLayers/components/LayerTitle';
-import { LayerVisibilityToggle } from 'features/controlLayers/components/LayerVisibilityToggle';
-import {
-  isControlAdapterLayer,
-  layerSelected,
-  selectControlLayersSlice,
-} from 'features/controlLayers/store/controlLayersSlice';
-import { memo, useCallback, useMemo } from 'react';
-import { assert } from 'tsafe';
-
-type Props = {
-  layerId: string;
-};
-
-export const CALayerListItem = memo(({ layerId }: Props) => {
-  const dispatch = useAppDispatch();
-  const selector = useMemo(
-    () =>
-      createMemoizedSelector(selectControlLayersSlice, (controlLayers) => {
-        const layer = controlLayers.present.layers.find((l) => l.id === layerId);
-        assert(isControlAdapterLayer(layer), `Layer ${layerId} not found or not a ControlNet layer`);
-        return {
-          controlNetId: layer.controlNetId,
-          isSelected: layerId === controlLayers.present.selectedLayerId,
-        };
-      }),
-    [layerId]
-  );
-  const { controlNetId, isSelected } = useAppSelector(selector);
-  const onClickCapture = useCallback(() => {
-    // Must be capture so that the layer is selected before deleting/resetting/etc
-    dispatch(layerSelected(layerId));
-  }, [dispatch, layerId]);
-  const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
-
-  return (
-    <Flex
-      gap={2}
-      onClickCapture={onClickCapture}
-      bg={isSelected ? 'base.400' : 'base.800'}
-      px={2}
-      borderRadius="base"
-      py="1px"
-    >
-      <Flex flexDir="column" w="full" bg="base.850" borderRadius="base">
-        <Flex gap={3} alignItems="center" p={3} cursor="pointer" onDoubleClick={onToggle}>
-          <LayerVisibilityToggle layerId={layerId} />
-          <LayerTitle type="control_adapter_layer" />
-          <Spacer />
-          <CALayerOpacity layerId={layerId} />
-          <LayerMenu layerId={layerId} />
-          <LayerDeleteButton layerId={layerId} />
-        </Flex>
-        {isOpen && (
-          <Flex flexDir="column" gap={3} px={3} pb={3}>
-            <ControlAdapterLayerConfig id={controlNetId} />
-          </Flex>
-        )}
-      </Flex>
-    </Flex>
-  );
-});
-
-CALayerListItem.displayName = 'CALayerListItem';

invokeai/frontend/web/src/features/controlLayers/components/CALayerOpacity.tsx

@@ -1,98 +0,0 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  Flex,
-  FormControl,
-  FormLabel,
-  IconButton,
-  Popover,
-  PopoverArrow,
-  PopoverBody,
-  PopoverContent,
-  PopoverTrigger,
-  Switch,
-} from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
-import { stopPropagation } from 'common/util/stopPropagation';
-import { useLayerOpacity } from 'features/controlLayers/hooks/layerStateHooks';
-import { isFilterEnabledChanged, layerOpacityChanged } from 'features/controlLayers/store/controlLayersSlice';
-import type { ChangeEvent } from 'react';
-import { memo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PiDropHalfFill } from 'react-icons/pi';
-
-type Props = {
-  layerId: string;
-};
-
-const marks = [0, 25, 50, 75, 100];
-const formatPct = (v: number | string) => `${v} %`;
-
-const CALayerOpacity = ({ layerId }: Props) => {
-  const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-  const { opacity, isFilterEnabled } = useLayerOpacity(layerId);
-  const onChangeOpacity = useCallback(
-    (v: number) => {
-      dispatch(layerOpacityChanged({ layerId, opacity: v / 100 }));
-    },
-    [dispatch, layerId]
-  );
-  const onChangeFilter = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => {
-      dispatch(isFilterEnabledChanged({ layerId, isFilterEnabled: e.target.checked }));
-    },
-    [dispatch, layerId]
-  );
-  return (
-    <Popover isLazy>
-      <PopoverTrigger>
-        <IconButton
-          aria-label={t('controlLayers.opacity')}
-          size="sm"
-          icon={<PiDropHalfFill size={16} />}
-          variant="ghost"
-          onDoubleClick={stopPropagation}
-        />
-      </PopoverTrigger>
-      <PopoverContent>
-        <PopoverArrow />
-        <PopoverBody>
-          <Flex direction="column" gap={2}>
-            <FormControl orientation="horizontal" w="full">
-              <FormLabel m={0} flexGrow={1} cursor="pointer">
-                {t('controlLayers.opacityFilter')}
-              </FormLabel>
-              <Switch isChecked={isFilterEnabled} onChange={onChangeFilter} />
-            </FormControl>
-            <FormControl orientation="horizontal">
-              <FormLabel m={0}>{t('controlLayers.opacity')}</FormLabel>
-              <CompositeSlider
-                min={0}
-                max={100}
-                step={1}
-                value={opacity}
-                defaultValue={100}
-                onChange={onChangeOpacity}
-                marks={marks}
-                w={48}
-              />
-              <CompositeNumberInput
-                min={0}
-                max={100}
-                step={1}
-                value={opacity}
-                defaultValue={100}
-                onChange={onChangeOpacity}
-                w={24}
-                format={formatPct}
-              />
-            </FormControl>
-          </Flex>
-        </PopoverBody>
-      </PopoverContent>
-    </Popover>
-  );
-};
-
-export default memo(CALayerOpacity);

invokeai/frontend/web/src/features/controlLayers/components/ControlLayersEditor.stories.tsx

@@ -1,24 +0,0 @@
-import { Flex } from '@invoke-ai/ui-library';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ControlLayersEditor } from 'features/controlLayers/components/ControlLayersEditor';
-
-const meta: Meta<typeof ControlLayersEditor> = {
-  title: 'Feature/ControlLayers',
-  tags: ['autodocs'],
-  component: ControlLayersEditor,
-};
-
-export default meta;
-type Story = StoryObj<typeof ControlLayersEditor>;
-
-const Component = () => {
-  return (
-    <Flex w={1500} h={1500}>
-      <ControlLayersEditor />
-    </Flex>
-  );
-};
-
-export const Default: Story = {
-  render: Component,
-};

invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx

@@ -1,59 +0,0 @@
-/* eslint-disable i18next/no-literal-string */
-import { Flex } from '@invoke-ai/ui-library';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { useAppSelector } from 'app/store/storeHooks';
-import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
-import { AddLayerButton } from 'features/controlLayers/components/AddLayerButton';
-import { CALayerListItem } from 'features/controlLayers/components/CALayerListItem';
-import { DeleteAllLayersButton } from 'features/controlLayers/components/DeleteAllLayersButton';
-import { IPLayerListItem } from 'features/controlLayers/components/IPLayerListItem';
-import { RGLayerListItem } from 'features/controlLayers/components/RGLayerListItem';
-import { isRenderableLayer, selectControlLayersSlice } from 'features/controlLayers/store/controlLayersSlice';
-import type { Layer } from 'features/controlLayers/store/types';
-import { partition } from 'lodash-es';
-import { memo } from 'react';
-
-const selectLayerIdTypePairs = createMemoizedSelector(selectControlLayersSlice, (controlLayers) => {
-  const [renderableLayers, ipAdapterLayers] = partition(controlLayers.present.layers, isRenderableLayer);
-  return [...ipAdapterLayers, ...renderableLayers].map((l) => ({ id: l.id, type: l.type })).reverse();
-});
-
-export const ControlLayersPanelContent = memo(() => {
-  const layerIdTypePairs = useAppSelector(selectLayerIdTypePairs);
-  return (
-    <Flex flexDir="column" gap={4} w="full" h="full">
-      <Flex justifyContent="space-around">
-        <AddLayerButton />
-        <DeleteAllLayersButton />
-      </Flex>
-      <ScrollableContent>
-        <Flex flexDir="column" gap={4}>
-          {layerIdTypePairs.map(({ id, type }) => (
-            <LayerWrapper key={id} id={id} type={type} />
-          ))}
-        </Flex>
-      </ScrollableContent>
-    </Flex>
-  );
-});
-
-ControlLayersPanelContent.displayName = 'ControlLayersPanelContent';
-
-type LayerWrapperProps = {
-  id: string;
-  type: Layer['type'];
-};
-
-const LayerWrapper = memo(({ id, type }: LayerWrapperProps) => {
-  if (type === 'regional_guidance_layer') {
-    return <RGLayerListItem key={id} layerId={id} />;
-  }
-  if (type === 'control_adapter_layer') {
-    return <CALayerListItem key={id} layerId={id} />;
-  }
-  if (type === 'ip_adapter_layer') {
-    return <IPLayerListItem key={id} layerId={id} />;
-  }
-});
-
-LayerWrapper.displayName = 'LayerWrapper';

invokeai/frontend/web/src/features/controlLayers/components/ControlLayersSettingsPopover.tsx

@@ -1,26 +0,0 @@
-import { Flex, IconButton, Popover, PopoverBody, PopoverContent, PopoverTrigger } from '@invoke-ai/ui-library';
-import { GlobalMaskLayerOpacity } from 'features/controlLayers/components/GlobalMaskLayerOpacity';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { RiSettings4Fill } from 'react-icons/ri';
-
-const ControlLayersSettingsPopover = () => {
-  const { t } = useTranslation();
-
-  return (
-    <Popover isLazy>
-      <PopoverTrigger>
-        <IconButton aria-label={t('common.settingsLabel')} icon={<RiSettings4Fill />} />
-      </PopoverTrigger>
-      <PopoverContent>
-        <PopoverBody>
-          <Flex direction="column" gap={2}>
-            <GlobalMaskLayerOpacity />
-          </Flex>
-        </PopoverBody>
-      </PopoverContent>
-    </Popover>
-  );
-};
-
-export default memo(ControlLayersSettingsPopover);

invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx

@@ -1,20 +0,0 @@
-/* eslint-disable i18next/no-literal-string */
-import { Flex } from '@invoke-ai/ui-library';
-import { BrushSize } from 'features/controlLayers/components/BrushSize';
-import ControlLayersSettingsPopover from 'features/controlLayers/components/ControlLayersSettingsPopover';
-import { ToolChooser } from 'features/controlLayers/components/ToolChooser';
-import { UndoRedoButtonGroup } from 'features/controlLayers/components/UndoRedoButtonGroup';
-import { memo } from 'react';
-
-export const ControlLayersToolbar = memo(() => {
-  return (
-    <Flex gap={4}>
-      <BrushSize />
-      <ToolChooser />
-      <UndoRedoButtonGroup />
-      <ControlLayersSettingsPopover />
-    </Flex>
-  );
-});
-
-ControlLayersToolbar.displayName = 'ControlLayersToolbar';

invokeai/frontend/web/src/features/controlLayers/components/GlobalMaskLayerOpacity.tsx

@@ -1,54 +0,0 @@
-import { CompositeNumberInput, CompositeSlider, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import {
-  globalMaskLayerOpacityChanged,
-  initialControlLayersState,
-} from 'features/controlLayers/store/controlLayersSlice';
-import { memo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-
-const marks = [0, 25, 50, 75, 100];
-const formatPct = (v: number | string) => `${v} %`;
-
-export const GlobalMaskLayerOpacity = memo(() => {
-  const dispatch = useAppDispatch();
-  const { t } = useTranslation();
-  const globalMaskLayerOpacity = useAppSelector((s) =>
-    Math.round(s.controlLayers.present.globalMaskLayerOpacity * 100)
-  );
-  const onChange = useCallback(
-    (v: number) => {
-      dispatch(globalMaskLayerOpacityChanged(v / 100));
-    },
-    [dispatch]
-  );
-  return (
-    <FormControl orientation="vertical">
-      <FormLabel m={0}>{t('controlLayers.globalMaskOpacity')}</FormLabel>
-      <Flex gap={4}>
-        <CompositeSlider
-          min={0}
-          max={100}
-          step={1}
-          value={globalMaskLayerOpacity}
-          defaultValue={initialControlLayersState.globalMaskLayerOpacity * 100}
-          onChange={onChange}
-          marks={marks}
-          minW={48}
-        />
-        <CompositeNumberInput
-          min={0}
-          max={100}
-          step={1}
-          value={globalMaskLayerOpacity}
-          defaultValue={initialControlLayersState.globalMaskLayerOpacity * 100}
-          onChange={onChange}
-          w={28}
-          format={formatPct}
-        />
-      </Flex>
-    </FormControl>
-  );
-});
-
-GlobalMaskLayerOpacity.displayName = 'GlobalMaskLayerOpacity';

invokeai/frontend/web/src/features/controlLayers/components/IPLayerListItem.tsx

@@ -1,47 +0,0 @@
-import { Flex, Spacer, useDisclosure } from '@invoke-ai/ui-library';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { useAppSelector } from 'app/store/storeHooks';
-import ControlAdapterLayerConfig from 'features/controlLayers/components/controlAdapterOverrides/ControlAdapterLayerConfig';
-import { LayerDeleteButton } from 'features/controlLayers/components/LayerDeleteButton';
-import { LayerTitle } from 'features/controlLayers/components/LayerTitle';
-import { LayerVisibilityToggle } from 'features/controlLayers/components/LayerVisibilityToggle';
-import { isIPAdapterLayer, selectControlLayersSlice } from 'features/controlLayers/store/controlLayersSlice';
-import { memo, useMemo } from 'react';
-import { assert } from 'tsafe';
-
-type Props = {
-  layerId: string;
-};
-
-export const IPLayerListItem = memo(({ layerId }: Props) => {
-  const selector = useMemo(
-    () =>
-      createMemoizedSelector(selectControlLayersSlice, (controlLayers) => {
-        const layer = controlLayers.present.layers.find((l) => l.id === layerId);
-        assert(isIPAdapterLayer(layer), `Layer ${layerId} not found or not an IP Adapter layer`);
-        return layer.ipAdapterId;
-      }),
-    [layerId]
-  );
-  const ipAdapterId = useAppSelector(selector);
-  const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
-  return (
-    <Flex gap={2} bg="base.800" borderRadius="base" p="1px" px={2}>
-      <Flex flexDir="column" w="full" bg="base.850" borderRadius="base">
-        <Flex gap={3} alignItems="center" p={3} cursor="pointer" onDoubleClick={onToggle}>
-          <LayerVisibilityToggle layerId={layerId} />
-          <LayerTitle type="ip_adapter_layer" />
-          <Spacer />
-          <LayerDeleteButton layerId={layerId} />
-        </Flex>
-        {isOpen && (
-          <Flex flexDir="column" gap={3} px={3} pb={3}>
-            <ControlAdapterLayerConfig id={ipAdapterId} />
-          </Flex>
-        )}
-      </Flex>
-    </Flex>
-  );
-});
-
-IPLayerListItem.displayName = 'IPLayerListItem';

invokeai/frontend/web/src/features/controlLayers/components/LayerMenu.tsx

@@ -1,59 +0,0 @@
-import { IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuList } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
-import { stopPropagation } from 'common/util/stopPropagation';
-import { LayerMenuArrangeActions } from 'features/controlLayers/components/LayerMenuArrangeActions';
-import { LayerMenuRGActions } from 'features/controlLayers/components/LayerMenuRGActions';
-import { useLayerType } from 'features/controlLayers/hooks/layerStateHooks';
-import { layerDeleted, layerReset } from 'features/controlLayers/store/controlLayersSlice';
-import { memo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PiArrowCounterClockwiseBold, PiDotsThreeVerticalBold, PiTrashSimpleBold } from 'react-icons/pi';
-
-type Props = { layerId: string };
-
-export const LayerMenu = memo(({ layerId }: Props) => {
-  const dispatch = useAppDispatch();
-  const { t } = useTranslation();
-  const layerType = useLayerType(layerId);
-  const resetLayer = useCallback(() => {
-    dispatch(layerReset(layerId));
-  }, [dispatch, layerId]);
-  const deleteLayer = useCallback(() => {
-    dispatch(layerDeleted(layerId));
-  }, [dispatch, layerId]);
-  return (
-    <Menu>
-      <MenuButton
-        as={IconButton}
-        aria-label="Layer menu"
-        size="sm"
-        icon={<PiDotsThreeVerticalBold />}
-        onDoubleClick={stopPropagation} // double click expands the layer
-      />
-      <MenuList>
-        {layerType === 'regional_guidance_layer' && (
-          <>
-            <LayerMenuRGActions layerId={layerId} />
-            <MenuDivider />
-          </>
-        )}
-        {(layerType === 'regional_guidance_layer' || layerType === 'control_adapter_layer') && (
-          <>
-            <LayerMenuArrangeActions layerId={layerId} />
-            <MenuDivider />
-          </>
-        )}
-        {layerType === 'regional_guidance_layer' && (
-          <MenuItem onClick={resetLayer} icon={<PiArrowCounterClockwiseBold />}>
-            {t('accessibility.reset')}
-          </MenuItem>
-        )}
-        <MenuItem onClick={deleteLayer} icon={<PiTrashSimpleBold />} color="error.300">
-          {t('common.delete')}
-        </MenuItem>
-      </MenuList>
-    </Menu>
-  );
-});
-
-LayerMenu.displayName = 'LayerMenu';

invokeai/frontend/web/src/features/controlLayers/components/LayerMenuArrangeActions.tsx

@@ -1,69 +0,0 @@
-import { MenuItem } from '@invoke-ai/ui-library';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import {
-  isRenderableLayer,
-  layerMovedBackward,
-  layerMovedForward,
-  layerMovedToBack,
-  layerMovedToFront,
-  selectControlLayersSlice,
-} from 'features/controlLayers/store/controlLayersSlice';
-import { memo, useCallback, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PiArrowDownBold, PiArrowLineDownBold, PiArrowLineUpBold, PiArrowUpBold } from 'react-icons/pi';
-import { assert } from 'tsafe';
-
-type Props = { layerId: string };
-
-export const LayerMenuArrangeActions = memo(({ layerId }: Props) => {
-  const dispatch = useAppDispatch();
-  const { t } = useTranslation();
-  const selectValidActions = useMemo(
-    () =>
-      createMemoizedSelector(selectControlLayersSlice, (controlLayers) => {
-        const layer = controlLayers.present.layers.find((l) => l.id === layerId);
-        assert(isRenderableLayer(layer), `Layer ${layerId} not found or not an RP layer`);
-        const layerIndex = controlLayers.present.layers.findIndex((l) => l.id === layerId);
-        const layerCount = controlLayers.present.layers.length;
-        return {
-          canMoveForward: layerIndex < layerCount - 1,
-          canMoveBackward: layerIndex > 0,
-          canMoveToFront: layerIndex < layerCount - 1,
-          canMoveToBack: layerIndex > 0,
-        };
-      }),
-    [layerId]
-  );
-  const validActions = useAppSelector(selectValidActions);
-  const moveForward = useCallback(() => {
-    dispatch(layerMovedForward(layerId));
-  }, [dispatch, layerId]);
-  const moveToFront = useCallback(() => {
-    dispatch(layerMovedToFront(layerId));
-  }, [dispatch, layerId]);
-  const moveBackward = useCallback(() => {
-    dispatch(layerMovedBackward(layerId));
-  }, [dispatch, layerId]);
-  const moveToBack = useCallback(() => {
-    dispatch(layerMovedToBack(layerId));
-  }, [dispatch, layerId]);
-  return (
-    <>
-      <MenuItem onClick={moveToFront} isDisabled={!validActions.canMoveToFront} icon={<PiArrowLineUpBold />}>
-        {t('controlLayers.moveToFront')}
-      </MenuItem>
-      <MenuItem onClick={moveForward} isDisabled={!validActions.canMoveForward} icon={<PiArrowUpBold />}>
-        {t('controlLayers.moveForward')}
-      </MenuItem>
-      <MenuItem onClick={moveBackward} isDisabled={!validActions.canMoveBackward} icon={<PiArrowDownBold />}>
-        {t('controlLayers.moveBackward')}
-      </MenuItem>
-      <MenuItem onClick={moveToBack} isDisabled={!validActions.canMoveToBack} icon={<PiArrowLineDownBold />}>
-        {t('controlLayers.moveToBack')}
-      </MenuItem>
-    </>
-  );
-});
-
-LayerMenuArrangeActions.displayName = 'LayerMenuArrangeActions';

invokeai/frontend/web/src/features/controlLayers/components/LayerMenuRGActions.tsx

@@ -1,58 +0,0 @@
-import { MenuItem } from '@invoke-ai/ui-library';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { guidanceLayerIPAdapterAdded } from 'app/store/middleware/listenerMiddleware/listeners/controlLayersToControlAdapterBridge';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import {
-  isRegionalGuidanceLayer,
-  maskLayerNegativePromptChanged,
-  maskLayerPositivePromptChanged,
-  selectControlLayersSlice,
-} from 'features/controlLayers/store/controlLayersSlice';
-import { memo, useCallback, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PiPlusBold } from 'react-icons/pi';
-import { assert } from 'tsafe';
-
-type Props = { layerId: string };
-
-export const LayerMenuRGActions = memo(({ layerId }: Props) => {
-  const dispatch = useAppDispatch();
-  const { t } = useTranslation();
-  const selectValidActions = useMemo(
-    () =>
-      createMemoizedSelector(selectControlLayersSlice, (controlLayers) => {
-        const layer = controlLayers.present.layers.find((l) => l.id === layerId);
-        assert(isRegionalGuidanceLayer(layer), `Layer ${layerId} not found or not an RP layer`);
-        return {
-          canAddPositivePrompt: layer.positivePrompt === null,
-          canAddNegativePrompt: layer.negativePrompt === null,
-        };
-      }),
-    [layerId]
-  );
-  const validActions = useAppSelector(selectValidActions);
-  const addPositivePrompt = useCallback(() => {
-    dispatch(maskLayerPositivePromptChanged({ layerId, prompt: '' }));
-  }, [dispatch, layerId]);
-  const addNegativePrompt = useCallback(() => {
-    dispatch(maskLayerNegativePromptChanged({ layerId, prompt: '' }));
-  }, [dispatch, layerId]);
-  const addIPAdapter = useCallback(() => {
-    dispatch(guidanceLayerIPAdapterAdded(layerId));
-  }, [dispatch, layerId]);
-  return (
-    <>
-      <MenuItem onClick={addPositivePrompt} isDisabled={!validActions.canAddPositivePrompt} icon={<PiPlusBold />}>
-        {t('controlLayers.addPositivePrompt')}
-      </MenuItem>
-      <MenuItem onClick={addNegativePrompt} isDisabled={!validActions.canAddNegativePrompt} icon={<PiPlusBold />}>
-        {t('controlLayers.addNegativePrompt')}
-      </MenuItem>
-      <MenuItem onClick={addIPAdapter} icon={<PiPlusBold />}>
-        {t('controlLayers.addIPAdapter')}
-      </MenuItem>
-    </>
-  );
-});
-
-LayerMenuRGActions.displayName = 'LayerMenuRGActions';

invokeai/frontend/web/src/features/controlLayers/components/LayerTitle.tsx

@@ -1,29 +0,0 @@
-import { Text } from '@invoke-ai/ui-library';
-import type { Layer } from 'features/controlLayers/store/types';
-import { memo, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-type Props = {
-  type: Layer['type'];
-};
-
-export const LayerTitle = memo(({ type }: Props) => {
-  const { t } = useTranslation();
-  const title = useMemo(() => {
-    if (type === 'regional_guidance_layer') {
-      return t('controlLayers.regionalGuidance');
-    } else if (type === 'control_adapter_layer') {
-      return t('controlLayers.globalControlAdapter');
-    } else if (type === 'ip_adapter_layer') {
-      return t('controlLayers.globalIPAdapter');
-    }
-  }, [t, type]);
-
-  return (
-    <Text size="sm" fontWeight="semibold" userSelect="none" color="base.300">
-      {title}
-    </Text>
-  );
-});
-
-LayerTitle.displayName = 'LayerTitle';

invokeai/frontend/web/src/features/controlLayers/components/RGLayerIPAdapterList.tsx

@@ -1,80 +0,0 @@
-import { Divider, Flex, IconButton, Spacer, Text } from '@invoke-ai/ui-library';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { guidanceLayerIPAdapterDeleted } from 'app/store/middleware/listenerMiddleware/listeners/controlLayersToControlAdapterBridge';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import ControlAdapterLayerConfig from 'features/controlLayers/components/controlAdapterOverrides/ControlAdapterLayerConfig';
-import { isRegionalGuidanceLayer, selectControlLayersSlice } from 'features/controlLayers/store/controlLayersSlice';
-import { memo, useCallback, useMemo } from 'react';
-import { PiTrashSimpleBold } from 'react-icons/pi';
-import { assert } from 'tsafe';
-
-type Props = {
-  layerId: string;
-};
-
-export const RGLayerIPAdapterList = memo(({ layerId }: Props) => {
-  const selectIPAdapterIds = useMemo(
-    () =>
-      createMemoizedSelector(selectControlLayersSlice, (controlLayers) => {
-        const layer = controlLayers.present.layers.filter(isRegionalGuidanceLayer).find((l) => l.id === layerId);
-        assert(layer, `Layer ${layerId} not found`);
-        return layer.ipAdapterIds;
-      }),
-    [layerId]
-  );
-  const ipAdapterIds = useAppSelector(selectIPAdapterIds);
-
-  if (ipAdapterIds.length === 0) {
-    return null;
-  }
-
-  return (
-    <>
-      {ipAdapterIds.map((id, index) => (
-        <Flex flexDir="column" key={id}>
-          {index > 0 && (
-            <Flex pb={3}>
-              <Divider />
-            </Flex>
-          )}
-          <RGLayerIPAdapterListItem layerId={layerId} ipAdapterId={id} ipAdapterNumber={index + 1} />
-        </Flex>
-      ))}
-    </>
-  );
-});
-
-RGLayerIPAdapterList.displayName = 'RGLayerIPAdapterList';
-
-type IPAdapterListItemProps = {
-  layerId: string;
-  ipAdapterId: string;
-  ipAdapterNumber: number;
-};
-
-const RGLayerIPAdapterListItem = memo(({ layerId, ipAdapterId, ipAdapterNumber }: IPAdapterListItemProps) => {
-  const dispatch = useAppDispatch();
-  const onDeleteIPAdapter = useCallback(() => {
-    dispatch(guidanceLayerIPAdapterDeleted({ layerId, ipAdapterId }));
-  }, [dispatch, ipAdapterId, layerId]);
-
-  return (
-    <Flex flexDir="column" gap={3}>
-      <Flex alignItems="center" gap={3}>
-        <Text fontWeight="semibold" color="base.400">{`IP Adapter ${ipAdapterNumber}`}</Text>
-        <Spacer />
-        <IconButton
-          size="sm"
-          icon={<PiTrashSimpleBold />}
-          aria-label="Delete IP Adapter"
-          onClick={onDeleteIPAdapter}
-          variant="ghost"
-          colorScheme="error"
-        />
-      </Flex>
-      <ControlAdapterLayerConfig id={ipAdapterId} />
-    </Flex>
-  );
-});
-
-RGLayerIPAdapterListItem.displayName = 'RGLayerIPAdapterListItem';

invokeai/frontend/web/src/features/controlLayers/components/RGLayerListItem.tsx

@@ -1,84 +0,0 @@
-import { Badge, Flex, Spacer, useDisclosure } from '@invoke-ai/ui-library';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { rgbColorToString } from 'features/canvas/util/colorToString';
-import { LayerDeleteButton } from 'features/controlLayers/components/LayerDeleteButton';
-import { LayerMenu } from 'features/controlLayers/components/LayerMenu';
-import { LayerTitle } from 'features/controlLayers/components/LayerTitle';
-import { LayerVisibilityToggle } from 'features/controlLayers/components/LayerVisibilityToggle';
-import { RGLayerColorPicker } from 'features/controlLayers/components/RGLayerColorPicker';
-import { RGLayerIPAdapterList } from 'features/controlLayers/components/RGLayerIPAdapterList';
-import { RGLayerNegativePrompt } from 'features/controlLayers/components/RGLayerNegativePrompt';
-import { RGLayerPositivePrompt } from 'features/controlLayers/components/RGLayerPositivePrompt';
-import RGLayerSettingsPopover from 'features/controlLayers/components/RGLayerSettingsPopover';
-import {
-  isRegionalGuidanceLayer,
-  layerSelected,
-  selectControlLayersSlice,
-} from 'features/controlLayers/store/controlLayersSlice';
-import { memo, useCallback, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { assert } from 'tsafe';
-
-import { AddPromptButtons } from './AddPromptButtons';
-
-type Props = {
-  layerId: string;
-};
-
-export const RGLayerListItem = memo(({ layerId }: Props) => {
-  const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-  const selector = useMemo(
-    () =>
-      createMemoizedSelector(selectControlLayersSlice, (controlLayers) => {
-        const layer = controlLayers.present.layers.find((l) => l.id === layerId);
-        assert(isRegionalGuidanceLayer(layer), `Layer ${layerId} not found or not an RP layer`);
-        return {
-          color: rgbColorToString(layer.previewColor),
-          hasPositivePrompt: layer.positivePrompt !== null,
-          hasNegativePrompt: layer.negativePrompt !== null,
-          hasIPAdapters: layer.ipAdapterIds.length > 0,
-          isSelected: layerId === controlLayers.present.selectedLayerId,
-          autoNegative: layer.autoNegative,
-        };
-      }),
-    [layerId]
-  );
-  const { autoNegative, color, hasPositivePrompt, hasNegativePrompt, hasIPAdapters, isSelected } =
-    useAppSelector(selector);
-  const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
-  const onClick = useCallback(() => {
-    dispatch(layerSelected(layerId));
-  }, [dispatch, layerId]);
-  return (
-    <Flex gap={2} onClick={onClick} bg={isSelected ? color : 'base.800'} px={2} borderRadius="base" py="1px">
-      <Flex flexDir="column" w="full" bg="base.850" borderRadius="base">
-        <Flex gap={3} alignItems="center" p={3} cursor="pointer" onDoubleClick={onToggle}>
-          <LayerVisibilityToggle layerId={layerId} />
-          <LayerTitle type="regional_guidance_layer" />
-          <Spacer />
-          {autoNegative === 'invert' && (
-            <Badge color="base.300" bg="transparent" borderWidth={1} userSelect="none">
-              {t('controlLayers.autoNegative')}
-            </Badge>
-          )}
-          <RGLayerColorPicker layerId={layerId} />
-          <RGLayerSettingsPopover layerId={layerId} />
-          <LayerMenu layerId={layerId} />
-          <LayerDeleteButton layerId={layerId} />
-        </Flex>
-        {isOpen && (
-          <Flex flexDir="column" gap={3} px={3} pb={3}>
-            {!hasPositivePrompt && !hasNegativePrompt && !hasIPAdapters && <AddPromptButtons layerId={layerId} />}
-            {hasPositivePrompt && <RGLayerPositivePrompt layerId={layerId} />}
-            {hasNegativePrompt && <RGLayerNegativePrompt layerId={layerId} />}
-            {hasIPAdapters && <RGLayerIPAdapterList layerId={layerId} />}
-          </Flex>
-        )}
-      </Flex>
-    </Flex>
-  );
-});
-
-RGLayerListItem.displayName = 'RGLayerListItem';

invokeai/frontend/web/src/features/controlLayers/components/controlAdapterOverrides/ControlAdapterImagePreview.tsx

@@ -1,237 +0,0 @@
-import type { SystemStyleObject } from '@invoke-ai/ui-library';
-import { Box, Flex, Spinner, useShiftModifier } from '@invoke-ai/ui-library';
-import { skipToken } from '@reduxjs/toolkit/query';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import IAIDndImage from 'common/components/IAIDndImage';
-import IAIDndImageIcon from 'common/components/IAIDndImageIcon';
-import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
-import { useControlAdapterControlImage } from 'features/controlAdapters/hooks/useControlAdapterControlImage';
-import { useControlAdapterProcessedControlImage } from 'features/controlAdapters/hooks/useControlAdapterProcessedControlImage';
-import { useControlAdapterProcessorType } from 'features/controlAdapters/hooks/useControlAdapterProcessorType';
-import {
-  controlAdapterImageChanged,
-  selectControlAdaptersSlice,
-} from 'features/controlAdapters/store/controlAdaptersSlice';
-import { heightChanged, widthChanged } from 'features/controlLayers/store/controlLayersSlice';
-import type { TypesafeDraggableData, TypesafeDroppableData } from 'features/dnd/types';
-import { calculateNewSize } from 'features/parameters/components/ImageSize/calculateNewSize';
-import { selectOptimalDimension } from 'features/parameters/store/generationSlice';
-import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PiArrowCounterClockwiseBold, PiFloppyDiskBold, PiRulerBold } from 'react-icons/pi';
-import {
-  useAddImageToBoardMutation,
-  useChangeImageIsIntermediateMutation,
-  useGetImageDTOQuery,
-  useRemoveImageFromBoardMutation,
-} from 'services/api/endpoints/images';
-import type { PostUploadAction } from 'services/api/types';
-
-type Props = {
-  id: string;
-  isSmall?: boolean;
-};
-
-const selectPendingControlImages = createMemoizedSelector(
-  selectControlAdaptersSlice,
-  (controlAdapters) => controlAdapters.pendingControlImages
-);
-
-const ControlAdapterImagePreview = ({ isSmall, id }: Props) => {
-  const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-  const controlImageName = useControlAdapterControlImage(id);
-  const processedControlImageName = useControlAdapterProcessedControlImage(id);
-  const processorType = useControlAdapterProcessorType(id);
-  const autoAddBoardId = useAppSelector((s) => s.gallery.autoAddBoardId);
-  const isConnected = useAppSelector((s) => s.system.isConnected);
-  const activeTabName = useAppSelector(activeTabNameSelector);
-  const optimalDimension = useAppSelector(selectOptimalDimension);
-  const pendingControlImages = useAppSelector(selectPendingControlImages);
-  const shift = useShiftModifier();
-
-  const [isMouseOverImage, setIsMouseOverImage] = useState(false);
-
-  const { currentData: controlImage, isError: isErrorControlImage } = useGetImageDTOQuery(
-    controlImageName ?? skipToken
-  );
-
-  const { currentData: processedControlImage, isError: isErrorProcessedControlImage } = useGetImageDTOQuery(
-    processedControlImageName ?? skipToken
-  );
-
-  const [changeIsIntermediate] = useChangeImageIsIntermediateMutation();
-  const [addToBoard] = useAddImageToBoardMutation();
-  const [removeFromBoard] = useRemoveImageFromBoardMutation();
-  const handleResetControlImage = useCallback(() => {
-    dispatch(controlAdapterImageChanged({ id, controlImage: null }));
-  }, [id, dispatch]);
-
-  const handleSaveControlImage = useCallback(async () => {
-    if (!processedControlImage) {
-      return;
-    }
-
-    await changeIsIntermediate({
-      imageDTO: processedControlImage,
-      is_intermediate: false,
-    }).unwrap();
-
-    if (autoAddBoardId !== 'none') {
-      addToBoard({
-        imageDTO: processedControlImage,
-        board_id: autoAddBoardId,
-      });
-    } else {
-      removeFromBoard({ imageDTO: processedControlImage });
-    }
-  }, [processedControlImage, changeIsIntermediate, autoAddBoardId, addToBoard, removeFromBoard]);
-
-  const handleSetControlImageToDimensions = useCallback(() => {
-    if (!controlImage) {
-      return;
-    }
-
-    if (activeTabName === 'unifiedCanvas') {
-      dispatch(setBoundingBoxDimensions({ width: controlImage.width, height: controlImage.height }, optimalDimension));
-    } else {
-      if (shift) {
-        const { width, height } = controlImage;
-        dispatch(widthChanged({ width, updateAspectRatio: true }));
-        dispatch(heightChanged({ height, updateAspectRatio: true }));
-      } else {
-        const { width, height } = calculateNewSize(
-          controlImage.width / controlImage.height,
-          optimalDimension * optimalDimension
-        );
-        dispatch(widthChanged({ width, updateAspectRatio: true }));
-        dispatch(heightChanged({ height, updateAspectRatio: true }));
-      }
-    }
-  }, [controlImage, activeTabName, dispatch, optimalDimension, shift]);
-
-  const handleMouseEnter = useCallback(() => {
-    setIsMouseOverImage(true);
-  }, []);
-
-  const handleMouseLeave = useCallback(() => {
-    setIsMouseOverImage(false);
-  }, []);
-
-  const draggableData = useMemo<TypesafeDraggableData | undefined>(() => {
-    if (controlImage) {
-      return {
-        id,
-        payloadType: 'IMAGE_DTO',
-        payload: { imageDTO: controlImage },
-      };
-    }
-  }, [controlImage, id]);
-
-  const droppableData = useMemo<TypesafeDroppableData | undefined>(
-    () => ({
-      id,
-      actionType: 'SET_CONTROL_ADAPTER_IMAGE',
-      context: { id },
-    }),
-    [id]
-  );
-
-  const postUploadAction = useMemo<PostUploadAction>(() => ({ type: 'SET_CONTROL_ADAPTER_IMAGE', id }), [id]);
-
-  const shouldShowProcessedImage =
-    controlImage &&
-    processedControlImage &&
-    !isMouseOverImage &&
-    !pendingControlImages.includes(id) &&
-    processorType !== 'none';
-
-  useEffect(() => {
-    if (isConnected && (isErrorControlImage || isErrorProcessedControlImage)) {
-      handleResetControlImage();
-    }
-  }, [handleResetControlImage, isConnected, isErrorControlImage, isErrorProcessedControlImage]);
-
-  return (
-    <Flex
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      position="relative"
-      w="full"
-      h={isSmall ? 36 : 366} // magic no touch
-      alignItems="center"
-      justifyContent="center"
-    >
-      <IAIDndImage
-        draggableData={draggableData}
-        droppableData={droppableData}
-        imageDTO={controlImage}
-        isDropDisabled={shouldShowProcessedImage}
-        postUploadAction={postUploadAction}
-      />
-
-      <Box
-        position="absolute"
-        top={0}
-        insetInlineStart={0}
-        w="full"
-        h="full"
-        opacity={shouldShowProcessedImage ? 1 : 0}
-        transitionProperty="common"
-        transitionDuration="normal"
-        pointerEvents="none"
-      >
-        <IAIDndImage
-          draggableData={draggableData}
-          droppableData={droppableData}
-          imageDTO={processedControlImage}
-          isUploadDisabled={true}
-        />
-      </Box>
-
-      <>
-        <IAIDndImageIcon
-          onClick={handleResetControlImage}
-          icon={controlImage ? <PiArrowCounterClockwiseBold size={16} /> : undefined}
-          tooltip={t('controlnet.resetControlImage')}
-        />
-        <IAIDndImageIcon
-          onClick={handleSaveControlImage}
-          icon={controlImage ? <PiFloppyDiskBold size={16} /> : undefined}
-          tooltip={t('controlnet.saveControlImage')}
-          styleOverrides={saveControlImageStyleOverrides}
-        />
-        <IAIDndImageIcon
-          onClick={handleSetControlImageToDimensions}
-          icon={controlImage ? <PiRulerBold size={16} /> : undefined}
-          tooltip={shift ? t('controlnet.setControlImageDimensionsForce') : t('controlnet.setControlImageDimensions')}
-          styleOverrides={setControlImageDimensionsStyleOverrides}
-        />
-      </>
-
-      {pendingControlImages.includes(id) && (
-        <Flex
-          position="absolute"
-          top={0}
-          insetInlineStart={0}
-          w="full"
-          h="full"
-          alignItems="center"
-          justifyContent="center"
-          opacity={0.8}
-          borderRadius="base"
-          bg="base.900"
-        >
-          <Spinner size="xl" color="base.400" />
-        </Flex>
-      )}
-    </Flex>
-  );
-};
-
-export default memo(ControlAdapterImagePreview);
-
-const saveControlImageStyleOverrides: SystemStyleObject = { mt: 6 };
-const setControlImageDimensionsStyleOverrides: SystemStyleObject = { mt: 12 };

invokeai/frontend/web/src/features/controlLayers/components/controlAdapterOverrides/ControlAdapterLayerConfig.tsx

@@ -1,72 +0,0 @@
-import { Box, Flex, Icon, IconButton } from '@invoke-ai/ui-library';
-import ControlAdapterProcessorComponent from 'features/controlAdapters/components/ControlAdapterProcessorComponent';
-import ControlAdapterShouldAutoConfig from 'features/controlAdapters/components/ControlAdapterShouldAutoConfig';
-import ParamControlAdapterIPMethod from 'features/controlAdapters/components/parameters/ParamControlAdapterIPMethod';
-import ParamControlAdapterProcessorSelect from 'features/controlAdapters/components/parameters/ParamControlAdapterProcessorSelect';
-import { useControlAdapterType } from 'features/controlAdapters/hooks/useControlAdapterType';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PiCaretUpBold } from 'react-icons/pi';
-import { useToggle } from 'react-use';
-
-import ControlAdapterImagePreview from './ControlAdapterImagePreview';
-import { ParamControlAdapterBeginEnd } from './ParamControlAdapterBeginEnd';
-import ParamControlAdapterControlMode from './ParamControlAdapterControlMode';
-import ParamControlAdapterModel from './ParamControlAdapterModel';
-import ParamControlAdapterWeight from './ParamControlAdapterWeight';
-
-const ControlAdapterLayerConfig = (props: { id: string }) => {
-  const { id } = props;
-  const controlAdapterType = useControlAdapterType(id);
-  const { t } = useTranslation();
-  const [isExpanded, toggleIsExpanded] = useToggle(false);
-
-  return (
-    <Flex flexDir="column" gap={4} position="relative" w="full">
-      <Flex gap={3} alignItems="center" w="full">
-        <Box minW={0} w="full" transitionProperty="common" transitionDuration="0.1s">
-          <ParamControlAdapterModel id={id} />{' '}
-        </Box>
-
-        {controlAdapterType !== 'ip_adapter' && (
-          <IconButton
-            size="sm"
-            tooltip={isExpanded ? t('controlnet.hideAdvanced') : t('controlnet.showAdvanced')}
-            aria-label={isExpanded ? t('controlnet.hideAdvanced') : t('controlnet.showAdvanced')}
-            onClick={toggleIsExpanded}
-            variant="ghost"
-            icon={
-              <Icon
-                boxSize={4}
-                as={PiCaretUpBold}
-                transform={isExpanded ? 'rotate(0deg)' : 'rotate(180deg)'}
-                transitionProperty="common"
-                transitionDuration="normal"
-              />
-            }
-          />
-        )}
-      </Flex>
-      <Flex gap={4} w="full" alignItems="center">
-        <Flex flexDir="column" gap={3} w="full">
-          {controlAdapterType === 'ip_adapter' && <ParamControlAdapterIPMethod id={id} />}
-          {controlAdapterType === 'controlnet' && <ParamControlAdapterControlMode id={id} />}
-          <ParamControlAdapterWeight id={id} />
-          <ParamControlAdapterBeginEnd id={id} />
-        </Flex>
-        <Flex alignItems="center" justifyContent="center" h={36} w={36} aspectRatio="1/1">
-          <ControlAdapterImagePreview id={id} isSmall />
-        </Flex>
-      </Flex>
-      {isExpanded && (
-        <>
-          <ControlAdapterShouldAutoConfig id={id} />
-          <ParamControlAdapterProcessorSelect id={id} />
-          <ControlAdapterProcessorComponent id={id} />
-        </>
-      )}
-    </Flex>
-  );
-};
-
-export default memo(ControlAdapterLayerConfig);

invokeai/frontend/web/src/features/controlLayers/components/controlAdapterOverrides/ParamControlAdapterBeginEnd.tsx

@@ -1,89 +0,0 @@
-import { CompositeRangeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
-import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
-import { useControlAdapterBeginEndStepPct } from 'features/controlAdapters/hooks/useControlAdapterBeginEndStepPct';
-import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';
-import {
-  controlAdapterBeginStepPctChanged,
-  controlAdapterEndStepPctChanged,
-} from 'features/controlAdapters/store/controlAdaptersSlice';
-import { memo, useCallback, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-type Props = {
-  id: string;
-};
-
-const formatPct = (v: number) => `${Math.round(v * 100)}%`;
-
-export const ParamControlAdapterBeginEnd = memo(({ id }: Props) => {
-  const isEnabled = useControlAdapterIsEnabled(id);
-  const stepPcts = useControlAdapterBeginEndStepPct(id);
-  const dispatch = useAppDispatch();
-  const { t } = useTranslation();
-
-  const onChange = useCallback(
-    (v: [number, number]) => {
-      dispatch(
-        controlAdapterBeginStepPctChanged({
-          id,
-          beginStepPct: v[0],
-        })
-      );
-      dispatch(
-        controlAdapterEndStepPctChanged({
-          id,
-          endStepPct: v[1],
-        })
-      );
-    },
-    [dispatch, id]
-  );
-
-  const onReset = useCallback(() => {
-    dispatch(
-      controlAdapterBeginStepPctChanged({
-        id,
-        beginStepPct: 0,
-      })
-    );
-    dispatch(
-      controlAdapterEndStepPctChanged({
-        id,
-        endStepPct: 1,
-      })
-    );
-  }, [dispatch, id]);
-
-  const value = useMemo<[number, number]>(() => [stepPcts?.beginStepPct ?? 0, stepPcts?.endStepPct ?? 1], [stepPcts]);
-
-  if (!stepPcts) {
-    return null;
-  }
-
-  return (
-    <FormControl isDisabled={!isEnabled} orientation="horizontal">
-      <InformationalPopover feature="controlNetBeginEnd">
-        <FormLabel m={0}>{t('controlnet.beginEndStepPercentShort')}</FormLabel>
-      </InformationalPopover>
-      <CompositeRangeSlider
-        aria-label={ariaLabel}
-        value={value}
-        onChange={onChange}
-        onReset={onReset}
-        min={0}
-        max={1}
-        step={0.05}
-        fineStep={0.01}
-        minStepsBetweenThumbs={1}
-        formatValue={formatPct}
-        marks
-        withThumbTooltip
-      />
-    </FormControl>
-  );
-});
-
-ParamControlAdapterBeginEnd.displayName = 'ParamControlAdapterBeginEnd';
-
-const ariaLabel = ['Begin Step %', 'End Step %'];

invokeai/frontend/web/src/features/controlLayers/components/controlAdapterOverrides/ParamControlAdapterControlMode.tsx

@@ -1,66 +0,0 @@
-import type { ComboboxOnChange } from '@invoke-ai/ui-library';
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
-import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
-import { useControlAdapterControlMode } from 'features/controlAdapters/hooks/useControlAdapterControlMode';
-import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';
-import { controlAdapterControlModeChanged } from 'features/controlAdapters/store/controlAdaptersSlice';
-import type { ControlMode } from 'features/controlAdapters/store/types';
-import { memo, useCallback, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-type Props = {
-  id: string;
-};
-
-const ParamControlAdapterControlMode = ({ id }: Props) => {
-  const isEnabled = useControlAdapterIsEnabled(id);
-  const controlMode = useControlAdapterControlMode(id);
-  const dispatch = useAppDispatch();
-  const { t } = useTranslation();
-
-  const CONTROL_MODE_DATA = useMemo(
-    () => [
-      { label: t('controlnet.balanced'), value: 'balanced' },
-      { label: t('controlnet.prompt'), value: 'more_prompt' },
-      { label: t('controlnet.control'), value: 'more_control' },
-      { label: t('controlnet.megaControl'), value: 'unbalanced' },
-    ],
-    [t]
-  );
-
-  const handleControlModeChange = useCallback<ComboboxOnChange>(
-    (v) => {
-      if (!v) {
-        return;
-      }
-      dispatch(
-        controlAdapterControlModeChanged({
-          id,
-          controlMode: v.value as ControlMode,
-        })
-      );
-    },
-    [id, dispatch]
-  );
-
-  const value = useMemo(
-    () => CONTROL_MODE_DATA.filter((o) => o.value === controlMode)[0],
-    [CONTROL_MODE_DATA, controlMode]
-  );
-
-  if (!controlMode) {
-    return null;
-  }
-
-  return (
-    <FormControl isDisabled={!isEnabled}>
-      <InformationalPopover feature="controlNetControlMode">
-        <FormLabel m={0}>{t('controlnet.control')}</FormLabel>
-      </InformationalPopover>
-      <Combobox value={value} options={CONTROL_MODE_DATA} onChange={handleControlModeChange} />
-    </FormControl>
-  );
-};
-
-export default memo(ParamControlAdapterControlMode);

invokeai/frontend/web/src/features/controlLayers/components/controlAdapterOverrides/ParamControlAdapterModel.tsx

@@ -1,136 +0,0 @@
-import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
-import { Combobox, Flex, FormControl, Tooltip } from '@invoke-ai/ui-library';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
-import { useControlAdapterCLIPVisionModel } from 'features/controlAdapters/hooks/useControlAdapterCLIPVisionModel';
-import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';
-import { useControlAdapterModel } from 'features/controlAdapters/hooks/useControlAdapterModel';
-import { useControlAdapterModels } from 'features/controlAdapters/hooks/useControlAdapterModels';
-import { useControlAdapterType } from 'features/controlAdapters/hooks/useControlAdapterType';
-import {
-  controlAdapterCLIPVisionModelChanged,
-  controlAdapterModelChanged,
-} from 'features/controlAdapters/store/controlAdaptersSlice';
-import type { CLIPVisionModel } from 'features/controlAdapters/store/types';
-import { selectGenerationSlice } from 'features/parameters/store/generationSlice';
-import { memo, useCallback, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import type {
-  AnyModelConfig,
-  ControlNetModelConfig,
-  IPAdapterModelConfig,
-  T2IAdapterModelConfig,
-} from 'services/api/types';
-
-type ParamControlAdapterModelProps = {
-  id: string;
-};
-
-const selectMainModel = createMemoizedSelector(selectGenerationSlice, (generation) => generation.model);
-
-const ParamControlAdapterModel = ({ id }: ParamControlAdapterModelProps) => {
-  const isEnabled = useControlAdapterIsEnabled(id);
-  const controlAdapterType = useControlAdapterType(id);
-  const { modelConfig } = useControlAdapterModel(id);
-  const dispatch = useAppDispatch();
-  const currentBaseModel = useAppSelector((s) => s.generation.model?.base);
-  const currentCLIPVisionModel = useControlAdapterCLIPVisionModel(id);
-  const mainModel = useAppSelector(selectMainModel);
-  const { t } = useTranslation();
-
-  const [modelConfigs, { isLoading }] = useControlAdapterModels(controlAdapterType);
-
-  const _onChange = useCallback(
-    (modelConfig: ControlNetModelConfig | IPAdapterModelConfig | T2IAdapterModelConfig | null) => {
-      if (!modelConfig) {
-        return;
-      }
-      dispatch(
-        controlAdapterModelChanged({
-          id,
-          modelConfig,
-        })
-      );
-    },
-    [dispatch, id]
-  );
-
-  const onCLIPVisionModelChange = useCallback<ComboboxOnChange>(
-    (v) => {
-      if (!v?.value) {
-        return;
-      }
-      dispatch(controlAdapterCLIPVisionModelChanged({ id, clipVisionModel: v.value as CLIPVisionModel }));
-    },
-    [dispatch, id]
-  );
-
-  const selectedModel = useMemo(
-    () => (modelConfig && controlAdapterType ? { ...modelConfig, model_type: controlAdapterType } : null),
-    [controlAdapterType, modelConfig]
-  );
-
-  const getIsDisabled = useCallback(
-    (model: AnyModelConfig): boolean => {
-      const isCompatible = currentBaseModel === model.base;
-      const hasMainModel = Boolean(currentBaseModel);
-      return !hasMainModel || !isCompatible;
-    },
-    [currentBaseModel]
-  );
-
-  const { options, value, onChange, noOptionsMessage } = useGroupedModelCombobox({
-    modelConfigs,
-    onChange: _onChange,
-    selectedModel,
-    getIsDisabled,
-    isLoading,
-  });
-
-  const clipVisionOptions = useMemo<ComboboxOption[]>(
-    () => [
-      { label: 'ViT-H', value: 'ViT-H' },
-      { label: 'ViT-G', value: 'ViT-G' },
-    ],
-    []
-  );
-
-  const clipVisionModel = useMemo(
-    () => clipVisionOptions.find((o) => o.value === currentCLIPVisionModel),
-    [clipVisionOptions, currentCLIPVisionModel]
-  );
-
-  return (
-    <Flex gap={4}>
-      <Tooltip label={selectedModel?.description}>
-        <FormControl isDisabled={!isEnabled} isInvalid={!value || mainModel?.base !== modelConfig?.base} w="full">
-          <Combobox
-            options={options}
-            placeholder={t('controlnet.selectModel')}
-            value={value}
-            onChange={onChange}
-            noOptionsMessage={noOptionsMessage}
-          />
-        </FormControl>
-      </Tooltip>
-      {modelConfig?.type === 'ip_adapter' && modelConfig.format === 'checkpoint' && (
-        <FormControl
-          isDisabled={!isEnabled}
-          isInvalid={!value || mainModel?.base !== modelConfig?.base}
-          width="max-content"
-          minWidth={28}
-        >
-          <Combobox
-            options={clipVisionOptions}
-            placeholder={t('controlnet.selectCLIPVisionModel')}
-            value={clipVisionModel}
-            onChange={onCLIPVisionModelChange}
-          />
-        </FormControl>
-      )}
-    </Flex>
-  );
-};
-
-export default memo(ParamControlAdapterModel);

invokeai/frontend/web/src/features/controlLayers/components/controlAdapterOverrides/ParamControlAdapterWeight.tsx

@@ -1,74 +0,0 @@
-import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
-import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';
-import { useControlAdapterWeight } from 'features/controlAdapters/hooks/useControlAdapterWeight';
-import { controlAdapterWeightChanged } from 'features/controlAdapters/store/controlAdaptersSlice';
-import { isNil } from 'lodash-es';
-import { memo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-
-type ParamControlAdapterWeightProps = {
-  id: string;
-};
-
-const formatValue = (v: number) => v.toFixed(2);
-
-const ParamControlAdapterWeight = ({ id }: ParamControlAdapterWeightProps) => {
-  const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-  const isEnabled = useControlAdapterIsEnabled(id);
-  const weight = useControlAdapterWeight(id);
-  const initial = useAppSelector((s) => s.config.sd.ca.weight.initial);
-  const sliderMin = useAppSelector((s) => s.config.sd.ca.weight.sliderMin);
-  const sliderMax = useAppSelector((s) => s.config.sd.ca.weight.sliderMax);
-  const numberInputMin = useAppSelector((s) => s.config.sd.ca.weight.numberInputMin);
-  const numberInputMax = useAppSelector((s) => s.config.sd.ca.weight.numberInputMax);
-  const coarseStep = useAppSelector((s) => s.config.sd.ca.weight.coarseStep);
-  const fineStep = useAppSelector((s) => s.config.sd.ca.weight.fineStep);
-
-  const onChange = useCallback(
-    (weight: number) => {
-      dispatch(controlAdapterWeightChanged({ id, weight }));
-    },
-    [dispatch, id]
-  );
-
-  if (isNil(weight)) {
-    // should never happen
-    return null;
-  }
-
-  return (
-    <FormControl isDisabled={!isEnabled} orientation="horizontal">
-      <InformationalPopover feature="controlNetWeight">
-        <FormLabel m={0}>{t('controlnet.weight')}</FormLabel>
-      </InformationalPopover>
-      <CompositeSlider
-        value={weight}
-        onChange={onChange}
-        defaultValue={initial}
-        min={sliderMin}
-        max={sliderMax}
-        step={coarseStep}
-        fineStep={fineStep}
-        marks={marks}
-        formatValue={formatValue}
-      />
-      <CompositeNumberInput
-        value={weight}
-        onChange={onChange}
-        min={numberInputMin}
-        max={numberInputMax}
-        step={coarseStep}
-        fineStep={fineStep}
-        maxW={20}
-        defaultValue={initial}
-      />
-    </FormControl>
-  );
-};
-
-export default memo(ParamControlAdapterWeight);
-
-const marks = [0, 1, 2];

invokeai/frontend/web/src/features/controlLayers/hooks/layerStateHooks.ts

@@ -1,81 +0,0 @@
-import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/store/storeHooks';
-import {
-  isControlAdapterLayer,
-  isRegionalGuidanceLayer,
-  selectControlLayersSlice,
-} from 'features/controlLayers/store/controlLayersSlice';
-import { useMemo } from 'react';
-import { assert } from 'tsafe';
-
-export const useLayerPositivePrompt = (layerId: string) => {
-  const selectLayer = useMemo(
-    () =>
-      createSelector(selectControlLayersSlice, (controlLayers) => {
-        const layer = controlLayers.present.layers.find((l) => l.id === layerId);
-        assert(isRegionalGuidanceLayer(layer), `Layer ${layerId} not found or not an RP layer`);
-        assert(layer.positivePrompt !== null, `Layer ${layerId} does not have a positive prompt`);
-        return layer.positivePrompt;
-      }),
-    [layerId]
-  );
-  const prompt = useAppSelector(selectLayer);
-  return prompt;
-};
-
-export const useLayerNegativePrompt = (layerId: string) => {
-  const selectLayer = useMemo(
-    () =>
-      createSelector(selectControlLayersSlice, (controlLayers) => {
-        const layer = controlLayers.present.layers.find((l) => l.id === layerId);
-        assert(isRegionalGuidanceLayer(layer), `Layer ${layerId} not found or not an RP layer`);
-        assert(layer.negativePrompt !== null, `Layer ${layerId} does not have a negative prompt`);
-        return layer.negativePrompt;
-      }),
-    [layerId]
-  );
-  const prompt = useAppSelector(selectLayer);
-  return prompt;
-};
-
-export const useLayerIsVisible = (layerId: string) => {
-  const selectLayer = useMemo(
-    () =>
-      createSelector(selectControlLayersSlice, (controlLayers) => {
-        const layer = controlLayers.present.layers.find((l) => l.id === layerId);
-        assert(layer, `Layer ${layerId} not found`);
-        return layer.isEnabled;
-      }),
-    [layerId]
-  );
-  const isVisible = useAppSelector(selectLayer);
-  return isVisible;
-};
-
-export const useLayerType = (layerId: string) => {
-  const selectLayer = useMemo(
-    () =>
-      createSelector(selectControlLayersSlice, (controlLayers) => {
-        const layer = controlLayers.present.layers.find((l) => l.id === layerId);
-        assert(layer, `Layer ${layerId} not found`);
-        return layer.type;
-      }),
-    [layerId]
-  );
-  const type = useAppSelector(selectLayer);
-  return type;
-};
-
-export const useLayerOpacity = (layerId: string) => {
-  const selectLayer = useMemo(
-    () =>
-      createSelector(selectControlLayersSlice, (controlLayers) => {
-        const layer = controlLayers.present.layers.filter(isControlAdapterLayer).find((l) => l.id === layerId);
-        assert(layer, `Layer ${layerId} not found`);
-        return { opacity: Math.round(layer.opacity * 100), isFilterEnabled: layer.isFilterEnabled };
-      }),
-    [layerId]
-  );
-  const opacity = useAppSelector(selectLayer);
-  return opacity;
-};

invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts

@@ -1,676 +0,0 @@
-import type { PayloadAction, UnknownAction } from '@reduxjs/toolkit';
-import { createSlice, isAnyOf } from '@reduxjs/toolkit';
-import type { PersistConfig, RootState } from 'app/store/store';
-import { moveBackward, moveForward, moveToBack, moveToFront } from 'common/util/arrayUtils';
-import { deepClone } from 'common/util/deepClone';
-import { roundToMultiple } from 'common/util/roundDownToMultiple';
-import {
-  controlAdapterImageChanged,
-  controlAdapterProcessedImageChanged,
-  isAnyControlAdapterAdded,
-} from 'features/controlAdapters/store/controlAdaptersSlice';
-import { calculateNewSize } from 'features/parameters/components/ImageSize/calculateNewSize';
-import { initialAspectRatioState } from 'features/parameters/components/ImageSize/constants';
-import type { AspectRatioState } from 'features/parameters/components/ImageSize/types';
-import { modelChanged } from 'features/parameters/store/generationSlice';
-import type { ParameterAutoNegative } from 'features/parameters/types/parameterSchemas';
-import { getIsSizeOptimal, getOptimalDimension } from 'features/parameters/util/optimalDimension';
-import type { IRect, Vector2d } from 'konva/lib/types';
-import { isEqual, partition } from 'lodash-es';
-import { atom } from 'nanostores';
-import type { RgbColor } from 'react-colorful';
-import type { UndoableOptions } from 'redux-undo';
-import { assert } from 'tsafe';
-import { v4 as uuidv4 } from 'uuid';
-
-import type {
-  ControlAdapterLayer,
-  ControlLayersState,
-  DrawingTool,
-  IPAdapterLayer,
-  Layer,
-  RegionalGuidanceLayer,
-  Tool,
-  VectorMaskLine,
-  VectorMaskRect,
-} from './types';
-
-export const initialControlLayersState: ControlLayersState = {
-  _version: 1,
-  selectedLayerId: null,
-  brushSize: 100,
-  layers: [],
-  globalMaskLayerOpacity: 0.3, // this globally changes all mask layers' opacity
-  isEnabled: true,
-  positivePrompt: '',
-  negativePrompt: '',
-  positivePrompt2: '',
-  negativePrompt2: '',
-  shouldConcatPrompts: true,
-  initialImage: null,
-  size: {
-    width: 512,
-    height: 512,
-    aspectRatio: deepClone(initialAspectRatioState),
-  },
-};
-
-const isLine = (obj: VectorMaskLine | VectorMaskRect): obj is VectorMaskLine => obj.type === 'vector_mask_line';
-export const isRegionalGuidanceLayer = (layer?: Layer): layer is RegionalGuidanceLayer =>
-  layer?.type === 'regional_guidance_layer';
-export const isControlAdapterLayer = (layer?: Layer): layer is ControlAdapterLayer =>
-  layer?.type === 'control_adapter_layer';
-export const isIPAdapterLayer = (layer?: Layer): layer is IPAdapterLayer => layer?.type === 'ip_adapter_layer';
-export const isRenderableLayer = (layer?: Layer): layer is RegionalGuidanceLayer | ControlAdapterLayer =>
-  layer?.type === 'regional_guidance_layer' || layer?.type === 'control_adapter_layer';
-const resetLayer = (layer: Layer) => {
-  if (layer.type === 'regional_guidance_layer') {
-    layer.maskObjects = [];
-    layer.bbox = null;
-    layer.isEnabled = true;
-    layer.needsPixelBbox = false;
-    layer.bboxNeedsUpdate = false;
-    return;
-  }
-
-  if (layer.type === 'control_adapter_layer') {
-    // TODO
-  }
-};
-const getVectorMaskPreviewColor = (state: ControlLayersState): RgbColor => {
-  const vmLayers = state.layers.filter(isRegionalGuidanceLayer);
-  const lastColor = vmLayers[vmLayers.length - 1]?.previewColor;
-  return LayerColors.next(lastColor);
-};
-
-export const controlLayersSlice = createSlice({
-  name: 'controlLayers',
-  initialState: initialControlLayersState,
-  reducers: {
-    //#region All Layers
-    regionalGuidanceLayerAdded: (state, action: PayloadAction<{ layerId: string }>) => {
-      const { layerId } = action.payload;
-      const layer: RegionalGuidanceLayer = {
-        id: getRegionalGuidanceLayerId(layerId),
-        type: 'regional_guidance_layer',
-        isEnabled: true,
-        bbox: null,
-        bboxNeedsUpdate: false,
-        maskObjects: [],
-        previewColor: getVectorMaskPreviewColor(state),
-        x: 0,
-        y: 0,
-        autoNegative: 'invert',
-        needsPixelBbox: false,
-        positivePrompt: '',
-        negativePrompt: null,
-        ipAdapterIds: [],
-        isSelected: true,
-      };
-      state.layers.push(layer);
-      state.selectedLayerId = layer.id;
-      for (const layer of state.layers.filter(isRenderableLayer)) {
-        if (layer.id !== layerId) {
-          layer.isSelected = false;
-        }
-      }
-      return;
-    },
-    ipAdapterLayerAdded: (state, action: PayloadAction<{ layerId: string; ipAdapterId: string }>) => {
-      const { layerId, ipAdapterId } = action.payload;
-      const layer: IPAdapterLayer = {
-        id: getIPAdapterLayerId(layerId),
-        type: 'ip_adapter_layer',
-        isEnabled: true,
-        ipAdapterId,
-      };
-      state.layers.push(layer);
-      return;
-    },
-    controlAdapterLayerAdded: (state, action: PayloadAction<{ layerId: string; controlNetId: string }>) => {
-      const { layerId, controlNetId } = action.payload;
-      const layer: ControlAdapterLayer = {
-        id: getControlNetLayerId(layerId),
-        type: 'control_adapter_layer',
-        controlNetId,
-        x: 0,
-        y: 0,
-        bbox: null,
-        bboxNeedsUpdate: false,
-        isEnabled: true,
-        imageName: null,
-        opacity: 1,
-        isSelected: true,
-        isFilterEnabled: true,
-      };
-      state.layers.push(layer);
-      state.selectedLayerId = layer.id;
-      for (const layer of state.layers.filter(isRenderableLayer)) {
-        if (layer.id !== layerId) {
-          layer.isSelected = false;
-        }
-      }
-      return;
-    },
-    layerSelected: (state, action: PayloadAction<string>) => {
-      for (const layer of state.layers.filter(isRenderableLayer)) {
-        if (layer.id === action.payload) {
-          layer.isSelected = true;
-          state.selectedLayerId = action.payload;
-        } else {
-          layer.isSelected = false;
-        }
-      }
-    },
-    layerVisibilityToggled: (state, action: PayloadAction<string>) => {
-      const layer = state.layers.find((l) => l.id === action.payload);
-      if (layer) {
-        layer.isEnabled = !layer.isEnabled;
-      }
-    },
-    layerTranslated: (state, action: PayloadAction<{ layerId: string; x: number; y: number }>) => {
-      const { layerId, x, y } = action.payload;
-      const layer = state.layers.find((l) => l.id === layerId);
-      if (isRenderableLayer(layer)) {
-        layer.x = x;
-        layer.y = y;
-      }
-    },
-    layerBboxChanged: (state, action: PayloadAction<{ layerId: string; bbox: IRect | null }>) => {
-      const { layerId, bbox } = action.payload;
-      const layer = state.layers.find((l) => l.id === layerId);
-      if (isRenderableLayer(layer)) {
-        layer.bbox = bbox;
-        layer.bboxNeedsUpdate = false;
-        if (bbox === null && layer.type === 'regional_guidance_layer') {
-          // The layer was fully erased, empty its objects to prevent accumulation of invisible objects
-          layer.maskObjects = [];
-          layer.needsPixelBbox = false;
-        }
-      }
-    },
-    layerReset: (state, action: PayloadAction<string>) => {
-      const layer = state.layers.find((l) => l.id === action.payload);
-      if (layer) {
-        resetLayer(layer);
-      }
-    },
-    layerDeleted: (state, action: PayloadAction<string>) => {
-      state.layers = state.layers.filter((l) => l.id !== action.payload);
-      state.selectedLayerId = state.layers[0]?.id ?? null;
-    },
-    layerMovedForward: (state, action: PayloadAction<string>) => {
-      const cb = (l: Layer) => l.id === action.payload;
-      const [renderableLayers, ipAdapterLayers] = partition(state.layers, isRenderableLayer);
-      moveForward(renderableLayers, cb);
-      state.layers = [...ipAdapterLayers, ...renderableLayers];
-    },
-    layerMovedToFront: (state, action: PayloadAction<string>) => {
-      const cb = (l: Layer) => l.id === action.payload;
-      const [renderableLayers, ipAdapterLayers] = partition(state.layers, isRenderableLayer);
-      // Because the layers are in reverse order, moving to the front is equivalent to moving to the back
-      moveToBack(renderableLayers, cb);
-      state.layers = [...ipAdapterLayers, ...renderableLayers];
-    },
-    layerMovedBackward: (state, action: PayloadAction<string>) => {
-      const cb = (l: Layer) => l.id === action.payload;
-      const [renderableLayers, ipAdapterLayers] = partition(state.layers, isRenderableLayer);
-      moveBackward(renderableLayers, cb);
-      state.layers = [...ipAdapterLayers, ...renderableLayers];
-    },
-    layerMovedToBack: (state, action: PayloadAction<string>) => {
-      const cb = (l: Layer) => l.id === action.payload;
-      const [renderableLayers, ipAdapterLayers] = partition(state.layers, isRenderableLayer);
-      // Because the layers are in reverse order, moving to the back is equivalent to moving to the front
-      moveToFront(renderableLayers, cb);
-      state.layers = [...ipAdapterLayers, ...renderableLayers];
-    },
-    selectedLayerReset: (state) => {
-      const layer = state.layers.find((l) => l.id === state.selectedLayerId);
-      if (layer) {
-        resetLayer(layer);
-      }
-    },
-    selectedLayerDeleted: (state) => {
-      state.layers = state.layers.filter((l) => l.id !== state.selectedLayerId);
-      state.selectedLayerId = state.layers[0]?.id ?? null;
-    },
-    layerOpacityChanged: (state, action: PayloadAction<{ layerId: string; opacity: number }>) => {
-      const { layerId, opacity } = action.payload;
-      const layer = state.layers.filter(isControlAdapterLayer).find((l) => l.id === layerId);
-      if (layer) {
-        layer.opacity = opacity;
-      }
-    },
-    //#endregion
-
-    //#region CA Layers
-    isFilterEnabledChanged: (state, action: PayloadAction<{ layerId: string; isFilterEnabled: boolean }>) => {
-      const { layerId, isFilterEnabled } = action.payload;
-      const layer = state.layers.filter(isControlAdapterLayer).find((l) => l.id === layerId);
-      if (layer) {
-        layer.isFilterEnabled = isFilterEnabled;
-      }
-    },
-    //#endregion
-
-    //#region Mask Layers
-    maskLayerPositivePromptChanged: (state, action: PayloadAction<{ layerId: string; prompt: string | null }>) => {
-      const { layerId, prompt } = action.payload;
-      const layer = state.layers.find((l) => l.id === layerId);
-      if (layer?.type === 'regional_guidance_layer') {
-        layer.positivePrompt = prompt;
-      }
-    },
-    maskLayerNegativePromptChanged: (state, action: PayloadAction<{ layerId: string; prompt: string | null }>) => {
-      const { layerId, prompt } = action.payload;
-      const layer = state.layers.find((l) => l.id === layerId);
-      if (layer?.type === 'regional_guidance_layer') {
-        layer.negativePrompt = prompt;
-      }
-    },
-    maskLayerIPAdapterAdded: (state, action: PayloadAction<{ layerId: string; ipAdapterId: string }>) => {
-      const { layerId, ipAdapterId } = action.payload;
-      const layer = state.layers.find((l) => l.id === layerId);
-      if (layer?.type === 'regional_guidance_layer') {
-        layer.ipAdapterIds.push(ipAdapterId);
-      }
-    },
-    maskLayerIPAdapterDeleted: (state, action: PayloadAction<{ layerId: string; ipAdapterId: string }>) => {
-      const { layerId, ipAdapterId } = action.payload;
-      const layer = state.layers.find((l) => l.id === layerId);
-      if (layer?.type === 'regional_guidance_layer') {
-        layer.ipAdapterIds = layer.ipAdapterIds.filter((id) => id !== ipAdapterId);
-      }
-    },
-    maskLayerPreviewColorChanged: (state, action: PayloadAction<{ layerId: string; color: RgbColor }>) => {
-      const { layerId, color } = action.payload;
-      const layer = state.layers.find((l) => l.id === layerId);
-      if (layer?.type === 'regional_guidance_layer') {
-        layer.previewColor = color;
-      }
-    },
-    maskLayerLineAdded: {
-      reducer: (
-        state,
-        action: PayloadAction<
-          { layerId: string; points: [number, number, number, number]; tool: DrawingTool },
-          string,
-          { uuid: string }
-        >
-      ) => {
-        const { layerId, points, tool } = action.payload;
-        const layer = state.layers.find((l) => l.id === layerId);
-        if (layer?.type === 'regional_guidance_layer') {
-          const lineId = getRegionalGuidanceLayerLineId(layer.id, action.meta.uuid);
-          layer.maskObjects.push({
-            type: 'vector_mask_line',
-            tool: tool,
-            id: lineId,
-            // Points must be offset by the layer's x and y coordinates
-            // TODO: Handle this in the event listener?
-            points: [points[0] - layer.x, points[1] - layer.y, points[2] - layer.x, points[3] - layer.y],
-            strokeWidth: state.brushSize,
-          });
-          layer.bboxNeedsUpdate = true;
-          if (!layer.needsPixelBbox && tool === 'eraser') {
-            layer.needsPixelBbox = true;
-          }
-        }
-      },
-      prepare: (payload: { layerId: string; points: [number, number, number, number]; tool: DrawingTool }) => ({
-        payload,
-        meta: { uuid: uuidv4() },
-      }),
-    },
-    maskLayerPointsAdded: (state, action: PayloadAction<{ layerId: string; point: [number, number] }>) => {
-      const { layerId, point } = action.payload;
-      const layer = state.layers.find((l) => l.id === layerId);
-      if (layer?.type === 'regional_guidance_layer') {
-        const lastLine = layer.maskObjects.findLast(isLine);
-        if (!lastLine) {
-          return;
-        }
-        // Points must be offset by the layer's x and y coordinates
-        // TODO: Handle this in the event listener
-        lastLine.points.push(point[0] - layer.x, point[1] - layer.y);
-        layer.bboxNeedsUpdate = true;
-      }
-    },
-    maskLayerRectAdded: {
-      reducer: (state, action: PayloadAction<{ layerId: string; rect: IRect }, string, { uuid: string }>) => {
-        const { layerId, rect } = action.payload;
-        if (rect.height === 0 || rect.width === 0) {
-          // Ignore zero-area rectangles
-          return;
-        }
-        const layer = state.layers.find((l) => l.id === layerId);
-        if (layer?.type === 'regional_guidance_layer') {
-          const id = getMaskedGuidnaceLayerRectId(layer.id, action.meta.uuid);
-          layer.maskObjects.push({
-            type: 'vector_mask_rect',
-            id,
-            x: rect.x - layer.x,
-            y: rect.y - layer.y,
-            width: rect.width,
-            height: rect.height,
-          });
-          layer.bboxNeedsUpdate = true;
-        }
-      },
-      prepare: (payload: { layerId: string; rect: IRect }) => ({ payload, meta: { uuid: uuidv4() } }),
-    },
-    maskLayerAutoNegativeChanged: (
-      state,
-      action: PayloadAction<{ layerId: string; autoNegative: ParameterAutoNegative }>
-    ) => {
-      const { layerId, autoNegative } = action.payload;
-      const layer = state.layers.find((l) => l.id === layerId);
-      if (layer?.type === 'regional_guidance_layer') {
-        layer.autoNegative = autoNegative;
-      }
-    },
-    //#endregion
-
-    //#region Base Layer
-    positivePromptChanged: (state, action: PayloadAction<string>) => {
-      state.positivePrompt = action.payload;
-    },
-    negativePromptChanged: (state, action: PayloadAction<string>) => {
-      state.negativePrompt = action.payload;
-    },
-    positivePrompt2Changed: (state, action: PayloadAction<string>) => {
-      state.positivePrompt2 = action.payload;
-    },
-    negativePrompt2Changed: (state, action: PayloadAction<string>) => {
-      state.negativePrompt2 = action.payload;
-    },
-    shouldConcatPromptsChanged: (state, action: PayloadAction<boolean>) => {
-      state.shouldConcatPrompts = action.payload;
-    },
-    widthChanged: (state, action: PayloadAction<{ width: number; updateAspectRatio?: boolean }>) => {
-      const { width, updateAspectRatio } = action.payload;
-      state.size.width = width;
-      if (updateAspectRatio) {
-        state.size.aspectRatio.value = width / state.size.height;
-        state.size.aspectRatio.id = 'Free';
-        state.size.aspectRatio.isLocked = false;
-      }
-    },
-    heightChanged: (state, action: PayloadAction<{ height: number; updateAspectRatio?: boolean }>) => {
-      const { height, updateAspectRatio } = action.payload;
-      state.size.height = height;
-      if (updateAspectRatio) {
-        state.size.aspectRatio.value = state.size.width / height;
-        state.size.aspectRatio.id = 'Free';
-        state.size.aspectRatio.isLocked = false;
-      }
-    },
-    aspectRatioChanged: (state, action: PayloadAction<AspectRatioState>) => {
-      state.size.aspectRatio = action.payload;
-    },
-    //#endregion
-
-    //#region General
-    brushSizeChanged: (state, action: PayloadAction<number>) => {
-      state.brushSize = Math.round(action.payload);
-    },
-    globalMaskLayerOpacityChanged: (state, action: PayloadAction<number>) => {
-      state.globalMaskLayerOpacity = action.payload;
-    },
-    isEnabledChanged: (state, action: PayloadAction<boolean>) => {
-      state.isEnabled = action.payload;
-    },
-    undo: (state) => {
-      // Invalidate the bbox for all layers to prevent stale bboxes
-      for (const layer of state.layers.filter(isRenderableLayer)) {
-        layer.bboxNeedsUpdate = true;
-      }
-    },
-    redo: (state) => {
-      // Invalidate the bbox for all layers to prevent stale bboxes
-      for (const layer of state.layers.filter(isRenderableLayer)) {
-        layer.bboxNeedsUpdate = true;
-      }
-    },
-    //#endregion
-  },
-  extraReducers(builder) {
-    builder.addCase(modelChanged, (state, action) => {
-      const newModel = action.payload;
-      if (!newModel || action.meta.previousModel?.base === newModel.base) {
-        // Model was cleared or the base didn't change
-        return;
-      }
-      const optimalDimension = getOptimalDimension(newModel);
-      if (getIsSizeOptimal(state.size.width, state.size.height, optimalDimension)) {
-        return;
-      }
-      const { width, height } = calculateNewSize(state.size.aspectRatio.value, optimalDimension * optimalDimension);
-      state.size.width = width;
-      state.size.height = height;
-    });
-
-    builder.addCase(controlAdapterImageChanged, (state, action) => {
-      const { id, controlImage } = action.payload;
-      const layer = state.layers.filter(isControlAdapterLayer).find((l) => l.controlNetId === id);
-      if (layer) {
-        layer.bbox = null;
-        layer.bboxNeedsUpdate = true;
-        layer.isEnabled = true;
-        layer.imageName = controlImage?.image_name ?? null;
-      }
-    });
-
-    builder.addCase(controlAdapterProcessedImageChanged, (state, action) => {
-      const { id, processedControlImage } = action.payload;
-      const layer = state.layers.filter(isControlAdapterLayer).find((l) => l.controlNetId === id);
-      if (layer) {
-        layer.bbox = null;
-        layer.bboxNeedsUpdate = true;
-        layer.isEnabled = true;
-        layer.imageName = processedControlImage?.image_name ?? null;
-      }
-    });
-
-    // TODO: This is a temp fix to reduce issues with T2I adapter having a different downscaling
-    // factor than the UNet. Hopefully we get an upstream fix in diffusers.
-    builder.addMatcher(isAnyControlAdapterAdded, (state, action) => {
-      if (action.payload.type === 't2i_adapter') {
-        state.size.width = roundToMultiple(state.size.width, 64);
-        state.size.height = roundToMultiple(state.size.height, 64);
-      }
-    });
-  },
-});
-
-/**
- * This class is used to cycle through a set of colors for the prompt region layers.
- */
-class LayerColors {
-  static COLORS: RgbColor[] = [
-    { r: 121, g: 157, b: 219 }, // rgb(121, 157, 219)
-    { r: 131, g: 214, b: 131 }, // rgb(131, 214, 131)
-    { r: 250, g: 225, b: 80 }, // rgb(250, 225, 80)
-    { r: 220, g: 144, b: 101 }, // rgb(220, 144, 101)
-    { r: 224, g: 117, b: 117 }, // rgb(224, 117, 117)
-    { r: 213, g: 139, b: 202 }, // rgb(213, 139, 202)
-    { r: 161, g: 120, b: 214 }, // rgb(161, 120, 214)
-  ];
-  static i = this.COLORS.length - 1;
-  /**
-   * Get the next color in the sequence. If a known color is provided, the next color will be the one after it.
-   */
-  static next(currentColor?: RgbColor): RgbColor {
-    if (currentColor) {
-      const i = this.COLORS.findIndex((c) => isEqual(c, currentColor));
-      if (i !== -1) {
-        this.i = i;
-      }
-    }
-    this.i = (this.i + 1) % this.COLORS.length;
-    const color = this.COLORS[this.i];
-    assert(color);
-    return color;
-  }
-}
-
-export const {
-  // All layer actions
-  layerDeleted,
-  layerMovedBackward,
-  layerMovedForward,
-  layerMovedToBack,
-  layerMovedToFront,
-  layerReset,
-  layerSelected,
-  layerTranslated,
-  layerBboxChanged,
-  layerVisibilityToggled,
-  selectedLayerReset,
-  selectedLayerDeleted,
-  regionalGuidanceLayerAdded,
-  ipAdapterLayerAdded,
-  controlAdapterLayerAdded,
-  layerOpacityChanged,
-  // CA layer actions
-  isFilterEnabledChanged,
-  // Mask layer actions
-  maskLayerLineAdded,
-  maskLayerPointsAdded,
-  maskLayerRectAdded,
-  maskLayerNegativePromptChanged,
-  maskLayerPositivePromptChanged,
-  maskLayerIPAdapterAdded,
-  maskLayerIPAdapterDeleted,
-  maskLayerAutoNegativeChanged,
-  maskLayerPreviewColorChanged,
-  // Base layer actions
-  positivePromptChanged,
-  negativePromptChanged,
-  positivePrompt2Changed,
-  negativePrompt2Changed,
-  shouldConcatPromptsChanged,
-  widthChanged,
-  heightChanged,
-  aspectRatioChanged,
-  // General actions
-  brushSizeChanged,
-  globalMaskLayerOpacityChanged,
-  undo,
-  redo,
-} = controlLayersSlice.actions;
-
-export const selectAllControlAdapterIds = (controlLayers: ControlLayersState) =>
-  controlLayers.layers.flatMap((l) => {
-    if (l.type === 'control_adapter_layer') {
-      return [l.controlNetId];
-    }
-    if (l.type === 'ip_adapter_layer') {
-      return [l.ipAdapterId];
-    }
-    if (l.type === 'regional_guidance_layer') {
-      return l.ipAdapterIds;
-    }
-    return [];
-  });
-
-export const selectControlLayersSlice = (state: RootState) => state.controlLayers;
-
-/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-const migrateControlLayersState = (state: any): any => {
-  return state;
-};
-
-export const $isMouseDown = atom(false);
-export const $isMouseOver = atom(false);
-export const $lastMouseDownPos = atom<Vector2d | null>(null);
-export const $tool = atom<Tool>('brush');
-export const $cursorPosition = atom<Vector2d | null>(null);
-
-// IDs for singleton Konva layers and objects
-export const TOOL_PREVIEW_LAYER_ID = 'tool_preview_layer';
-export const TOOL_PREVIEW_BRUSH_GROUP_ID = 'tool_preview_layer.brush_group';
-export const TOOL_PREVIEW_BRUSH_FILL_ID = 'tool_preview_layer.brush_fill';
-export const TOOL_PREVIEW_BRUSH_BORDER_INNER_ID = 'tool_preview_layer.brush_border_inner';
-export const TOOL_PREVIEW_BRUSH_BORDER_OUTER_ID = 'tool_preview_layer.brush_border_outer';
-export const TOOL_PREVIEW_RECT_ID = 'tool_preview_layer.rect';
-export const BACKGROUND_LAYER_ID = 'background_layer';
-export const BACKGROUND_RECT_ID = 'background_layer.rect';
-export const NO_LAYERS_MESSAGE_LAYER_ID = 'no_layers_message';
-
-// Names (aka classes) for Konva layers and objects
-export const CONTROLNET_LAYER_NAME = 'control_adapter_layer';
-export const CONTROLNET_LAYER_IMAGE_NAME = 'control_adapter_layer.image';
-export const regional_guidance_layer_NAME = 'regional_guidance_layer';
-export const regional_guidance_layer_LINE_NAME = 'regional_guidance_layer.line';
-export const regional_guidance_layer_OBJECT_GROUP_NAME = 'regional_guidance_layer.object_group';
-export const regional_guidance_layer_RECT_NAME = 'regional_guidance_layer.rect';
-export const LAYER_BBOX_NAME = 'layer.bbox';
-
-// Getters for non-singleton layer and object IDs
-const getRegionalGuidanceLayerId = (layerId: string) => `${regional_guidance_layer_NAME}_${layerId}`;
-const getRegionalGuidanceLayerLineId = (layerId: string, lineId: string) => `${layerId}.line_${lineId}`;
-const getMaskedGuidnaceLayerRectId = (layerId: string, lineId: string) => `${layerId}.rect_${lineId}`;
-export const getRegionalGuidanceLayerObjectGroupId = (layerId: string, groupId: string) =>
-  `${layerId}.objectGroup_${groupId}`;
-export const getLayerBboxId = (layerId: string) => `${layerId}.bbox`;
-const getControlNetLayerId = (layerId: string) => `control_adapter_layer_${layerId}`;
-export const getControlNetLayerImageId = (layerId: string, imageName: string) => `${layerId}.image_${imageName}`;
-const getIPAdapterLayerId = (layerId: string) => `ip_adapter_layer_${layerId}`;
-
-export const controlLayersPersistConfig: PersistConfig<ControlLayersState> = {
-  name: controlLayersSlice.name,
-  initialState: initialControlLayersState,
-  migrate: migrateControlLayersState,
-  persistDenylist: [],
-};
-
-// These actions are _individually_ grouped together as single undoable actions
-const undoableGroupByMatcher = isAnyOf(
-  layerTranslated,
-  brushSizeChanged,
-  globalMaskLayerOpacityChanged,
-  maskLayerPositivePromptChanged,
-  maskLayerNegativePromptChanged,
-  maskLayerPreviewColorChanged
-);
-
-// These are used to group actions into logical lines below (hate typos)
-const LINE_1 = 'LINE_1';
-const LINE_2 = 'LINE_2';
-
-export const controlLayersUndoableConfig: UndoableOptions<ControlLayersState, UnknownAction> = {
-  limit: 64,
-  undoType: controlLayersSlice.actions.undo.type,
-  redoType: controlLayersSlice.actions.redo.type,
-  groupBy: (action, state, history) => {
-    // Lines are started with `maskLayerLineAdded` and may have any number of subsequent `maskLayerPointsAdded` events.
-    // We can use a double-buffer-esque trick to group each "logical" line as a single undoable action, without grouping
-    // separate logical lines as a single undo action.
-    if (maskLayerLineAdded.match(action)) {
-      return history.group === LINE_1 ? LINE_2 : LINE_1;
-    }
-    if (maskLayerPointsAdded.match(action)) {
-      if (history.group === LINE_1 || history.group === LINE_2) {
-        return history.group;
-      }
-    }
-    if (undoableGroupByMatcher(action)) {
-      return action.type;
-    }
-    return null;
-  },
-  filter: (action, _state, _history) => {
-    // Ignore all actions from other slices
-    if (!action.type.startsWith(controlLayersSlice.name)) {
-      return false;
-    }
-    // This action is triggered on state changes, including when we undo. If we do not ignore this action, when we
-    // undo, this action triggers and empties the future states array. Therefore, we must ignore this action.
-    if (layerBboxChanged.match(action)) {
-      return false;
-    }
-    return true;
-  },
-};

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

@@ -1,92 +0,0 @@
-import type { AspectRatioState } from 'features/parameters/components/ImageSize/types';
-import type {
-  ParameterAutoNegative,
-  ParameterHeight,
-  ParameterNegativePrompt,
-  ParameterNegativeStylePromptSDXL,
-  ParameterPositivePrompt,
-  ParameterPositiveStylePromptSDXL,
-  ParameterWidth,
-} from 'features/parameters/types/parameterSchemas';
-import type { IRect } from 'konva/lib/types';
-import type { RgbColor } from 'react-colorful';
-
-export type DrawingTool = 'brush' | 'eraser';
-
-export type Tool = DrawingTool | 'move' | 'rect';
-
-export type VectorMaskLine = {
-  id: string;
-  type: 'vector_mask_line';
-  tool: DrawingTool;
-  strokeWidth: number;
-  points: number[];
-};
-
-export type VectorMaskRect = {
-  id: string;
-  type: 'vector_mask_rect';
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-};
-
-type LayerBase = {
-  id: string;
-  isEnabled: boolean;
-};
-
-type RenderableLayerBase = LayerBase & {
-  x: number;
-  y: number;
-  bbox: IRect | null;
-  bboxNeedsUpdate: boolean;
-  isSelected: boolean;
-};
-
-export type ControlAdapterLayer = RenderableLayerBase & {
-  type: 'control_adapter_layer'; // technically, also t2i adapter layer
-  controlNetId: string;
-  imageName: string | null;
-  opacity: number;
-  isFilterEnabled: boolean;
-};
-
-export type IPAdapterLayer = LayerBase & {
-  type: 'ip_adapter_layer'; // technically, also t2i adapter layer
-  ipAdapterId: string;
-};
-
-export type RegionalGuidanceLayer = RenderableLayerBase & {
-  type: 'regional_guidance_layer';
-  maskObjects: (VectorMaskLine | VectorMaskRect)[];
-  positivePrompt: ParameterPositivePrompt | null;
-  negativePrompt: ParameterNegativePrompt | null; // Up to one text prompt per mask
-  ipAdapterIds: string[]; // Any number of image prompts
-  previewColor: RgbColor;
-  autoNegative: ParameterAutoNegative;
-  needsPixelBbox: boolean; // Needs the slower pixel-based bbox calculation - set to true when an there is an eraser object
-};
-
-export type Layer = RegionalGuidanceLayer | ControlAdapterLayer | IPAdapterLayer;
-
-export type ControlLayersState = {
-  _version: 1;
-  selectedLayerId: string | null;
-  layers: Layer[];
-  brushSize: number;
-  globalMaskLayerOpacity: number;
-  isEnabled: boolean;
-  positivePrompt: ParameterPositivePrompt;
-  negativePrompt: ParameterNegativePrompt;
-  positivePrompt2: ParameterPositiveStylePromptSDXL;
-  negativePrompt2: ParameterNegativeStylePromptSDXL;
-  shouldConcatPrompts: boolean;
-  initialImage: string | null;
-  size: {
-    width: ParameterWidth;
-    height: ParameterHeight;
-    aspectRatio: AspectRatioState;
-  };
-};

invokeai/frontend/web/src/features/metadata/util/parsers.ts

@@ -286,9 +286,7 @@ const parseControlNet: MetadataParseFunc<ControlNetConfigMetadata> = async (meta
     controlMode: control_mode ?? initialControlNet.controlMode,
     resizeMode: resize_mode ?? initialControlNet.resizeMode,
     controlImage: image?.image_name ?? null,
-    controlImageDimensions: null,
     processedControlImage: processedImage?.image_name ?? null,
-    processedControlImageDimensions: null,
     processorType,
     processorNode,
     shouldAutoConfig: true,
@@ -352,11 +350,9 @@ const parseT2IAdapter: MetadataParseFunc<T2IAdapterConfigMetadata> = async (meta
     endStepPct: end_step_percent ?? initialT2IAdapter.endStepPct,
     resizeMode: resize_mode ?? initialT2IAdapter.resizeMode,
     controlImage: image?.image_name ?? null,
-    controlImageDimensions: null,
     processedControlImage: processedImage?.image_name ?? null,
-    processedControlImageDimensions: null,
-    processorNode,
     processorType,
+    processorNode,
     shouldAutoConfig: true,
     id: uuidv4(),
   };

invokeai/frontend/web/src/features/metadata/util/recallers.ts

@@ -5,14 +5,6 @@ import {
   ipAdaptersReset,
   t2iAdaptersReset,
 } from 'features/controlAdapters/store/controlAdaptersSlice';
-import {
-  heightChanged,
-  negativePrompt2Changed,
-  negativePromptChanged,
-  positivePrompt2Changed,
-  positivePromptChanged,
-  widthChanged,
-} from 'features/controlLayers/store/controlLayersSlice';
 import { setHrfEnabled, setHrfMethod, setHrfStrength } from 'features/hrf/store/hrfSlice';
 import type { LoRA } from 'features/lora/store/loraSlice';
 import { loraRecalled, lorasReset } from 'features/lora/store/loraSlice';
@@ -24,14 +16,18 @@ import type {
 } from 'features/metadata/types';
 import { modelSelected } from 'features/parameters/store/actions';
 import {
+  heightRecalled,
   initialImageChanged,
   setCfgRescaleMultiplier,
   setCfgScale,
   setImg2imgStrength,
+  setNegativePrompt,
+  setPositivePrompt,
   setScheduler,
   setSeed,
   setSteps,
   vaeSelected,
+  widthRecalled,
 } from 'features/parameters/store/generationSlice';
 import type {
   ParameterCFGRescaleMultiplier,
@@ -57,6 +53,8 @@ import type {
 } from 'features/parameters/types/parameterSchemas';
 import {
   refinerModelChanged,
+  setNegativeStylePromptSDXL,
+  setPositiveStylePromptSDXL,
   setRefinerCFGScale,
   setRefinerNegativeAestheticScore,
   setRefinerPositiveAestheticScore,
@@ -67,19 +65,19 @@ import {
 import type { ImageDTO } from 'services/api/types';
 
 const recallPositivePrompt: MetadataRecallFunc<ParameterPositivePrompt> = (positivePrompt) => {
-  getStore().dispatch(positivePromptChanged(positivePrompt));
+  getStore().dispatch(setPositivePrompt(positivePrompt));
 };
 
 const recallNegativePrompt: MetadataRecallFunc<ParameterNegativePrompt> = (negativePrompt) => {
-  getStore().dispatch(negativePromptChanged(negativePrompt));
+  getStore().dispatch(setNegativePrompt(negativePrompt));
 };
 
 const recallSDXLPositiveStylePrompt: MetadataRecallFunc<ParameterPositiveStylePromptSDXL> = (positiveStylePrompt) => {
-  getStore().dispatch(positivePrompt2Changed(positiveStylePrompt));
+  getStore().dispatch(setPositiveStylePromptSDXL(positiveStylePrompt));
 };
 
 const recallSDXLNegativeStylePrompt: MetadataRecallFunc<ParameterNegativeStylePromptSDXL> = (negativeStylePrompt) => {
-  getStore().dispatch(negativePrompt2Changed(negativeStylePrompt));
+  getStore().dispatch(setNegativeStylePromptSDXL(negativeStylePrompt));
 };
 
 const recallSeed: MetadataRecallFunc<ParameterSeed> = (seed) => {
@@ -103,11 +101,11 @@ const recallInitialImage: MetadataRecallFunc<ImageDTO> = async (imageDTO) => {
 };
 
 const recallWidth: MetadataRecallFunc<ParameterWidth> = (width) => {
-  getStore().dispatch(widthChanged({ width, updateAspectRatio: true }));
+  getStore().dispatch(widthRecalled(width));
 };
 
 const recallHeight: MetadataRecallFunc<ParameterHeight> = (height) => {
-  getStore().dispatch(heightChanged({ height, updateAspectRatio: true }));
+  getStore().dispatch(heightRecalled(height));
 };
 
 const recallSteps: MetadataRecallFunc<ParameterSteps> = (steps) => {

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

@@ -1,10 +1,7 @@
 import type { RootState } from 'app/store/store';
 import { selectValidControlNets } from 'features/controlAdapters/store/controlAdaptersSlice';
 import type { ControlAdapterProcessorType, ControlNetConfig } from 'features/controlAdapters/store/types';
-import { isControlAdapterLayer } from 'features/controlLayers/store/controlLayersSlice';
 import type { ImageField } from 'features/nodes/types/common';
-import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import { differenceWith, intersectionWith } from 'lodash-es';
 import type {
   CollectInvocation,
   ControlNetInvocation,
@@ -17,8 +14,11 @@ import { assert } from 'tsafe';
 import { CONTROL_NET_COLLECT } from './constants';
 import { upsertMetadata } from './metadata';
 
-const getControlNets = (state: RootState) => {
-  // Start with the valid controlnets
+export const addControlNetToLinearGraph = async (
+  state: RootState,
+  graph: NonNullableGraph,
+  baseNodeId: string
+): Promise<void> => {
   const validControlNets = selectValidControlNets(state.controlAdapters).filter(
     ({ model, processedControlImage, processorType, controlImage, isEnabled }) => {
       const hasModel = Boolean(model);
@@ -29,37 +29,9 @@ const getControlNets = (state: RootState) => {
     }
   );
 
-  // txt2img tab has special handling - it uses layers exclusively, while the other tabs use the older control adapters
-  // accordion. We need to filter the list of valid T2I adapters according to the tab.
-  const activeTabName = activeTabNameSelector(state);
-
-  if (activeTabName === 'txt2img') {
-    // Add only the cnets that are used in control layers
-    // Collect all ControlNet ids for enabled ControlNet layers
-    const layerControlNetIds = state.controlLayers.present.layers
-      .filter(isControlAdapterLayer)
-      .filter((l) => l.isEnabled)
-      .map((l) => l.controlNetId);
-    return intersectionWith(validControlNets, layerControlNetIds, (a, b) => a.id === b);
-  } else {
-    // Else, we want to exclude the cnets that are used in control layers
-    // Collect all ControlNet ids for all ControlNet layers
-    const layerControlNetIds = state.controlLayers.present.layers
-      .filter(isControlAdapterLayer)
-      .map((l) => l.controlNetId);
-    return differenceWith(validControlNets, layerControlNetIds, (a, b) => a.id === b);
-  }
-};
-
-export const addControlNetToLinearGraph = async (
-  state: RootState,
-  graph: NonNullableGraph,
-  baseNodeId: string
-): Promise<void> => {
-  const controlNets = getControlNets(state);
   const controlNetMetadata: CoreMetadataInvocation['controlnets'] = [];
 
-  if (controlNets.length) {
+  if (validControlNets.length) {
     // Even though denoise_latents' control input is collection or scalar, keep it simple and always use a collect
     const controlNetIterateNode: CollectInvocation = {
       id: CONTROL_NET_COLLECT,
@@ -75,7 +47,7 @@ export const addControlNetToLinearGraph = async (
       },
     });
 
-    for (const controlNet of controlNets) {
+    for (const controlNet of validControlNets) {
       if (!controlNet.model) {
         return;
       }

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

@@ -110,9 +110,10 @@ export const addHrfToGraph = (state: RootState, graph: NonNullableGraph): void =
 
   const { vae, seamlessXAxis, seamlessYAxis } = state.generation;
   const { hrfStrength, hrfEnabled, hrfMethod } = state.hrf;
-  const { width, height } = state.controlLayers.present.size;
   const isAutoVae = !vae;
   const isSeamlessEnabled = seamlessXAxis || seamlessYAxis;
+  const width = state.generation.width;
+  const height = state.generation.height;
   const optimalDimension = selectOptimalDimension(state);
   const { newWidth: hrfWidth, newHeight: hrfHeight } = calculateHrfRes(optimalDimension, width, height);
 

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

@@ -1,10 +1,7 @@
 import type { RootState } from 'app/store/store';
 import { selectValidIPAdapters } from 'features/controlAdapters/store/controlAdaptersSlice';
 import type { IPAdapterConfig } from 'features/controlAdapters/store/types';
-import { isIPAdapterLayer, isRegionalGuidanceLayer } from 'features/controlLayers/store/controlLayersSlice';
 import type { ImageField } from 'features/nodes/types/common';
-import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import { differenceWith, intersectionWith } from 'lodash-es';
 import type {
   CollectInvocation,
   CoreMetadataInvocation,
@@ -17,50 +14,21 @@ import { assert } from 'tsafe';
 import { IP_ADAPTER_COLLECT } from './constants';
 import { upsertMetadata } from './metadata';
 
-const getIPAdapters = (state: RootState) => {
-  // Start with the valid IP adapters
-  const validIPAdapters = selectValidIPAdapters(state.controlAdapters).filter(({ model, controlImage, isEnabled }) => {
-    const hasModel = Boolean(model);
-    const doesBaseMatch = model?.base === state.generation.model?.base;
-    const hasControlImage = controlImage;
-    return isEnabled && hasModel && doesBaseMatch && hasControlImage;
-  });
-
-  // Masked IP adapters are handled in the graph helper for regional control - skip them here
-  const maskedIPAdapterIds = state.controlLayers.present.layers
-    .filter(isRegionalGuidanceLayer)
-    .map((l) => l.ipAdapterIds)
-    .flat();
-  const nonMaskedIPAdapters = differenceWith(validIPAdapters, maskedIPAdapterIds, (a, b) => a.id === b);
-
-  // txt2img tab has special handling - it uses layers exclusively, while the other tabs use the older control adapters
-  // accordion. We need to filter the list of valid IP adapters according to the tab.
-  const activeTabName = activeTabNameSelector(state);
-
-  if (activeTabName === 'txt2img') {
-    // If we are on the t2i tab, we only want to add the IP adapters that are used in unmasked IP Adapter layers
-    // Collect all IP Adapter ids for enabled IP adapter layers
-    const layerIPAdapterIds = state.controlLayers.present.layers
-      .filter(isIPAdapterLayer)
-      .filter((l) => l.isEnabled)
-      .map((l) => l.ipAdapterId);
-    return intersectionWith(nonMaskedIPAdapters, layerIPAdapterIds, (a, b) => a.id === b);
-  } else {
-    // Else, we want to exclude the IP adapters that are used in IP Adapter layers
-    // Collect all IP Adapter ids for enabled IP adapter layers
-    const layerIPAdapterIds = state.controlLayers.present.layers.filter(isIPAdapterLayer).map((l) => l.ipAdapterId);
-    return differenceWith(nonMaskedIPAdapters, layerIPAdapterIds, (a, b) => a.id === b);
-  }
-};
-
 export const addIPAdapterToLinearGraph = async (
   state: RootState,
   graph: NonNullableGraph,
   baseNodeId: string
 ): Promise<void> => {
-  const ipAdapters = getIPAdapters(state);
+  const validIPAdapters = selectValidIPAdapters(state.controlAdapters)
+    .filter(({ model, controlImage, isEnabled }) => {
+      const hasModel = Boolean(model);
+      const doesBaseMatch = model?.base === state.generation.model?.base;
+      const hasControlImage = controlImage;
+      return isEnabled && hasModel && doesBaseMatch && hasControlImage;
+    })
+    .filter((ca) => !state.regionalPrompts.present.layers.some((l) => l.ipAdapterIds.includes(ca.id)));
 
-  if (ipAdapters.length) {
+  if (validIPAdapters.length) {
     // Even though denoise_latents' ip adapter input is collection or scalar, keep it simple and always use a collect
     const ipAdapterCollectNode: CollectInvocation = {
       id: IP_ADAPTER_COLLECT,
@@ -78,7 +46,7 @@ export const addIPAdapterToLinearGraph = async (
 
     const ipAdapterMetdata: CoreMetadataInvocation['ipAdapters'] = [];
 
-    for (const ipAdapter of ipAdapters) {
+    for (const ipAdapter of validIPAdapters) {
       if (!ipAdapter.model) {
         return;
       }

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

@@ -1,8 +1,6 @@
 import { getStore } from 'app/store/nanostores/store';
 import type { RootState } from 'app/store/store';
 import { selectAllIPAdapters } from 'features/controlAdapters/store/controlAdaptersSlice';
-import { isRegionalGuidanceLayer } from 'features/controlLayers/store/controlLayersSlice';
-import { getRegionalPromptLayerBlobs } from 'features/controlLayers/util/getLayerBlobs';
 import {
   IP_ADAPTER_COLLECT,
   NEGATIVE_CONDITIONING,
@@ -15,23 +13,25 @@ import {
   PROMPT_REGION_POSITIVE_COND_INVERTED_PREFIX,
   PROMPT_REGION_POSITIVE_COND_PREFIX,
 } from 'features/nodes/util/graph/constants';
+import { isVectorMaskLayer } from 'features/regionalPrompts/store/regionalPromptsSlice';
+import { getRegionalPromptLayerBlobs } from 'features/regionalPrompts/util/getLayerBlobs';
 import { size } from 'lodash-es';
 import { imagesApi } from 'services/api/endpoints/images';
 import type { CollectInvocation, Edge, IPAdapterInvocation, NonNullableGraph, S } from 'services/api/types';
 import { assert } from 'tsafe';
 
-export const addControlLayersToGraph = async (state: RootState, graph: NonNullableGraph, denoiseNodeId: string) => {
-  if (!state.controlLayers.present.isEnabled) {
+export const addRegionalPromptsToGraph = async (state: RootState, graph: NonNullableGraph, denoiseNodeId: string) => {
+  if (!state.regionalPrompts.present.isEnabled) {
     return;
   }
   const { dispatch } = getStore();
   const isSDXL = state.generation.model?.base === 'sdxl';
-  const layers = state.controlLayers.present.layers
+  const layers = state.regionalPrompts.present.layers
     // Only support vector mask layers now
     // TODO: Image masks
-    .filter(isRegionalGuidanceLayer)
+    .filter(isVectorMaskLayer)
     // Only visible layers are rendered on the canvas
-    .filter((l) => l.isEnabled)
+    .filter((l) => l.isVisible)
     // Only layers with prompts get added to the graph
     .filter((l) => {
       const hasTextPrompt = Boolean(l.positivePrompt || l.negativePrompt);
@@ -39,15 +39,12 @@ export const addControlLayersToGraph = async (state: RootState, graph: NonNullab
       return hasTextPrompt || hasIPAdapter;
     });
 
-  // Collect all IP Adapter ids for IP adapter layers
-  const layerIPAdapterIds = layers.flatMap((l) => l.ipAdapterIds);
-
   const regionalIPAdapters = selectAllIPAdapters(state.controlAdapters).filter(
     ({ id, model, controlImage, isEnabled }) => {
       const hasModel = Boolean(model);
       const doesBaseMatch = model?.base === state.generation.model?.base;
       const hasControlImage = controlImage;
-      const isRegional = layerIPAdapterIds.includes(id);
+      const isRegional = layers.some((l) => l.ipAdapterIds.includes(id));
       return isEnabled && hasModel && doesBaseMatch && hasControlImage && isRegional;
     }
   );

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

@@ -1,10 +1,7 @@
 import type { RootState } from 'app/store/store';
 import { selectValidT2IAdapters } from 'features/controlAdapters/store/controlAdaptersSlice';
 import type { ControlAdapterProcessorType, T2IAdapterConfig } from 'features/controlAdapters/store/types';
-import { isControlAdapterLayer } from 'features/controlLayers/store/controlLayersSlice';
 import type { ImageField } from 'features/nodes/types/common';
-import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import { differenceWith, intersectionWith } from 'lodash-es';
 import type {
   CollectInvocation,
   CoreMetadataInvocation,
@@ -17,8 +14,11 @@ import { assert } from 'tsafe';
 import { T2I_ADAPTER_COLLECT } from './constants';
 import { upsertMetadata } from './metadata';
 
-const getT2IAdapters = (state: RootState) => {
-  // Start with the valid controlnets
+export const addT2IAdaptersToLinearGraph = async (
+  state: RootState,
+  graph: NonNullableGraph,
+  baseNodeId: string
+): Promise<void> => {
   const validT2IAdapters = selectValidT2IAdapters(state.controlAdapters).filter(
     ({ model, processedControlImage, processorType, controlImage, isEnabled }) => {
       const hasModel = Boolean(model);
@@ -29,35 +29,7 @@ const getT2IAdapters = (state: RootState) => {
     }
   );
 
-  // txt2img tab has special handling - it uses layers exclusively, while the other tabs use the older control adapters
-  // accordion. We need to filter the list of valid T2I adapters according to the tab.
-  const activeTabName = activeTabNameSelector(state);
-
-  if (activeTabName === 'txt2img') {
-    // Add only the T2Is that are used in control layers
-    // Collect all ids for enabled control adapter layers
-    const layerControlAdapterIds = state.controlLayers.present.layers
-      .filter(isControlAdapterLayer)
-      .filter((l) => l.isEnabled)
-      .map((l) => l.controlNetId);
-    return intersectionWith(validT2IAdapters, layerControlAdapterIds, (a, b) => a.id === b);
-  } else {
-    // Else, we want to exclude the T2Is that are used in control layers
-    const layerControlAdapterIds = state.controlLayers.present.layers
-      .filter(isControlAdapterLayer)
-      .map((l) => l.controlNetId);
-    return differenceWith(validT2IAdapters, layerControlAdapterIds, (a, b) => a.id === b);
-  }
-};
-
-export const addT2IAdaptersToLinearGraph = async (
-  state: RootState,
-  graph: NonNullableGraph,
-  baseNodeId: string
-): Promise<void> => {
-  const t2iAdapters = getT2IAdapters(state);
-
-  if (t2iAdapters.length) {
+  if (validT2IAdapters.length) {
     // Even though denoise_latents' t2i adapter input is collection or scalar, keep it simple and always use a collect
     const t2iAdapterCollectNode: CollectInvocation = {
       id: T2I_ADAPTER_COLLECT,
@@ -75,7 +47,7 @@ export const addT2IAdaptersToLinearGraph = async (
 
     const t2iAdapterMetadata: CoreMetadataInvocation['t2iAdapters'] = [];
 
-    for (const t2iAdapter of t2iAdapters) {
+    for (const t2iAdapter of validT2IAdapters) {
       if (!t2iAdapter.model) {
         return;
       }

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

@@ -42,6 +42,8 @@ export const buildCanvasImageToImageGraph = async (
 ): Promise<NonNullableGraph> => {
   const log = logger('nodes');
   const {
+    positivePrompt,
+    negativePrompt,
     model,
     cfgScale: cfg_scale,
     cfgRescaleMultiplier: cfg_rescale_multiplier,
@@ -55,7 +57,6 @@ export const buildCanvasImageToImageGraph = async (
     seamlessXAxis,
     seamlessYAxis,
   } = state.generation;
-  const { positivePrompt, negativePrompt } = state.controlLayers.present;
 
   // The bounding box determines width and height, not the width and height params
   const { width, height } = state.canvas.boundingBoxDimensions;

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

@@ -47,6 +47,8 @@ export const buildCanvasInpaintGraph = async (
 ): Promise<NonNullableGraph> => {
   const log = logger('nodes');
   const {
+    positivePrompt,
+    negativePrompt,
     model,
     cfgScale: cfg_scale,
     cfgRescaleMultiplier: cfg_rescale_multiplier,
@@ -64,7 +66,6 @@ export const buildCanvasInpaintGraph = async (
     canvasCoherenceEdgeSize,
     maskBlur,
   } = state.generation;
-  const { positivePrompt, negativePrompt } = state.controlLayers.present;
 
   if (!model) {
     log.error('No model found in state');

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

@@ -51,6 +51,8 @@ export const buildCanvasOutpaintGraph = async (
 ): Promise<NonNullableGraph> => {
   const log = logger('nodes');
   const {
+    positivePrompt,
+    negativePrompt,
     model,
     cfgScale: cfg_scale,
     cfgRescaleMultiplier: cfg_rescale_multiplier,
@@ -76,7 +78,6 @@ export const buildCanvasOutpaintGraph = async (
     canvasCoherenceEdgeSize,
     maskBlur,
   } = state.generation;
-  const { positivePrompt, negativePrompt } = state.controlLayers.present;
 
   if (!model) {
     log.error('No model found in state');

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

@@ -43,6 +43,8 @@ export const buildCanvasSDXLImageToImageGraph = async (
 ): Promise<NonNullableGraph> => {
   const log = logger('nodes');
   const {
+    positivePrompt,
+    negativePrompt,
     model,
     cfgScale: cfg_scale,
     cfgRescaleMultiplier: cfg_rescale_multiplier,
@@ -55,7 +57,6 @@ export const buildCanvasSDXLImageToImageGraph = async (
     seamlessYAxis,
     img2imgStrength: strength,
   } = state.generation;
-  const { positivePrompt, negativePrompt } = state.controlLayers.present;
 
   const { refinerModel, refinerStart } = state.sdxl;
 

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

@@ -48,6 +48,8 @@ export const buildCanvasSDXLInpaintGraph = async (
 ): Promise<NonNullableGraph> => {
   const log = logger('nodes');
   const {
+    positivePrompt,
+    negativePrompt,
     model,
     cfgScale: cfg_scale,
     cfgRescaleMultiplier: cfg_rescale_multiplier,
@@ -64,7 +66,6 @@ export const buildCanvasSDXLInpaintGraph = async (
     canvasCoherenceEdgeSize,
     maskBlur,
   } = state.generation;
-  const { positivePrompt, negativePrompt } = state.controlLayers.present;
 
   const { refinerModel, refinerStart } = state.sdxl;
 

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

@@ -52,6 +52,8 @@ export const buildCanvasSDXLOutpaintGraph = async (
 ): Promise<NonNullableGraph> => {
   const log = logger('nodes');
   const {
+    positivePrompt,
+    negativePrompt,
     model,
     cfgScale: cfg_scale,
     cfgRescaleMultiplier: cfg_rescale_multiplier,
@@ -76,7 +78,6 @@ export const buildCanvasSDXLOutpaintGraph = async (
     canvasCoherenceEdgeSize,
     maskBlur,
   } = state.generation;
-  const { positivePrompt, negativePrompt } = state.controlLayers.present;
 
   const { refinerModel, refinerStart } = state.sdxl;
 

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

@@ -33,6 +33,8 @@ import { addCoreMetadataNode, getModelMetadataField } from './metadata';
 export const buildCanvasSDXLTextToImageGraph = async (state: RootState): Promise<NonNullableGraph> => {
   const log = logger('nodes');
   const {
+    positivePrompt,
+    negativePrompt,
     model,
     cfgScale: cfg_scale,
     cfgRescaleMultiplier: cfg_rescale_multiplier,
@@ -44,7 +46,6 @@ export const buildCanvasSDXLTextToImageGraph = async (state: RootState): Promise
     seamlessXAxis,
     seamlessYAxis,
   } = state.generation;
-  const { positivePrompt, negativePrompt } = state.controlLayers.present;
 
   // The bounding box determines width and height, not the width and height params
   const { width, height } = state.canvas.boundingBoxDimensions;

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

@@ -32,6 +32,8 @@ import { addCoreMetadataNode, getModelMetadataField } from './metadata';
 export const buildCanvasTextToImageGraph = async (state: RootState): Promise<NonNullableGraph> => {
   const log = logger('nodes');
   const {
+    positivePrompt,
+    negativePrompt,
     model,
     cfgScale: cfg_scale,
     cfgRescaleMultiplier: cfg_rescale_multiplier,
@@ -44,7 +46,6 @@ export const buildCanvasTextToImageGraph = async (state: RootState): Promise<Non
     seamlessXAxis,
     seamlessYAxis,
   } = state.generation;
-  const { positivePrompt, negativePrompt } = state.controlLayers.present;
 
   // The bounding box determines width and height, not the width and height params
   const { width, height } = state.canvas.boundingBoxDimensions;

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

@@ -10,7 +10,7 @@ import { getHasMetadata, removeMetadata } from './metadata';
 
 export const prepareLinearUIBatch = (state: RootState, graph: NonNullableGraph, prepend: boolean): BatchConfig => {
   const { iterations, model, shouldRandomizeSeed, seed } = state.generation;
-  const { shouldConcatPrompts } = state.controlLayers.present;
+  const { shouldConcatSDXLStylePrompt } = state.sdxl;
   const { prompts, seedBehaviour } = state.dynamicPrompts;
 
   const data: Batch['data'] = [];
@@ -105,7 +105,7 @@ export const prepareLinearUIBatch = (state: RootState, graph: NonNullableGraph,
     });
   }
 
-  if (shouldConcatPrompts && model?.base === 'sdxl') {
+  if (shouldConcatSDXLStylePrompt && model?.base === 'sdxl') {
     if (graph.nodes[POSITIVE_CONDITIONING]) {
       firstBatchDatumList.push({
         node_path: POSITIVE_CONDITIONING,

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

@@ -38,6 +38,8 @@ import { addCoreMetadataNode, getModelMetadataField } from './metadata';
 export const buildLinearImageToImageGraph = async (state: RootState): Promise<NonNullableGraph> => {
   const log = logger('nodes');
   const {
+    positivePrompt,
+    negativePrompt,
     model,
     cfgScale: cfg_scale,
     cfgRescaleMultiplier: cfg_rescale_multiplier,
@@ -47,14 +49,14 @@ export const buildLinearImageToImageGraph = async (state: RootState): Promise<No
     initialImage,
     img2imgStrength: strength,
     shouldFitToWidthHeight,
+    width,
+    height,
     clipSkip,
     shouldUseCpuNoise,
     vaePrecision,
     seamlessXAxis,
     seamlessYAxis,
   } = state.generation;
-  const { positivePrompt, negativePrompt } = state.controlLayers.present;
-  const { width, height } = state.controlLayers.present.size;
 
   /**
    * The easiest way to build linear graphs is to do it in the node editor, then copy and paste the

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

@@ -39,6 +39,8 @@ import { addCoreMetadataNode, getModelMetadataField } from './metadata';
 export const buildLinearSDXLImageToImageGraph = async (state: RootState): Promise<NonNullableGraph> => {
   const log = logger('nodes');
   const {
+    positivePrompt,
+    negativePrompt,
     model,
     cfgScale: cfg_scale,
     cfgRescaleMultiplier: cfg_rescale_multiplier,
@@ -47,14 +49,14 @@ export const buildLinearSDXLImageToImageGraph = async (state: RootState): Promis
     steps,
     initialImage,
     shouldFitToWidthHeight,
+    width,
+    height,
     shouldUseCpuNoise,
     vaePrecision,
     seamlessXAxis,
     seamlessYAxis,
     img2imgStrength: strength,
   } = state.generation;
-  const { positivePrompt, negativePrompt } = state.controlLayers.present;
-  const { width, height } = state.controlLayers.present.size;
 
   const { refinerModel, refinerStart } = state.sdxl;
 

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

@@ -1,7 +1,7 @@
 import { logger } from 'app/logging/logger';
 import type { RootState } from 'app/store/store';
 import { fetchModelConfigWithTypeGuard } from 'features/metadata/util/modelFetchingHelpers';
-import { addControlLayersToGraph } from 'features/nodes/util/graph/addControlLayersToGraph';
+import { addRegionalPromptsToGraph } from 'features/nodes/util/graph/addRegionalPromptsToGraph';
 import { isNonRefinerMainModelConfig, type NonNullableGraph } from 'services/api/types';
 
 import { addControlNetToLinearGraph } from './addControlNetToLinearGraph';
@@ -30,19 +30,21 @@ import { addCoreMetadataNode, getModelMetadataField } from './metadata';
 export const buildLinearSDXLTextToImageGraph = async (state: RootState): Promise<NonNullableGraph> => {
   const log = logger('nodes');
   const {
+    positivePrompt,
+    negativePrompt,
     model,
     cfgScale: cfg_scale,
     cfgRescaleMultiplier: cfg_rescale_multiplier,
     scheduler,
     seed,
     steps,
+    width,
+    height,
     shouldUseCpuNoise,
     vaePrecision,
     seamlessXAxis,
     seamlessYAxis,
   } = state.generation;
-  const { positivePrompt, negativePrompt } = state.controlLayers.present;
-  const { width, height } = state.controlLayers.present.size;
 
   const { refinerModel, refinerStart } = state.sdxl;
 
@@ -272,7 +274,7 @@ export const buildLinearSDXLTextToImageGraph = async (state: RootState): Promise
 
   await addT2IAdaptersToLinearGraph(state, graph, SDXL_DENOISE_LATENTS);
 
-  await addControlLayersToGraph(state, graph, SDXL_DENOISE_LATENTS);
+  await addRegionalPromptsToGraph(state, graph, SDXL_DENOISE_LATENTS);
 
   // NSFW & watermark - must be last thing added to graph
   if (state.system.shouldUseNSFWChecker) {

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

@@ -1,7 +1,7 @@
 import { logger } from 'app/logging/logger';
 import type { RootState } from 'app/store/store';
 import { fetchModelConfigWithTypeGuard } from 'features/metadata/util/modelFetchingHelpers';
-import { addControlLayersToGraph } from 'features/nodes/util/graph/addControlLayersToGraph';
+import { addRegionalPromptsToGraph } from 'features/nodes/util/graph/addRegionalPromptsToGraph';
 import { getBoardField, getIsIntermediate } from 'features/nodes/util/graph/graphBuilderUtils';
 import { isNonRefinerMainModelConfig, type NonNullableGraph } from 'services/api/types';
 
@@ -30,11 +30,15 @@ import { addCoreMetadataNode, getModelMetadataField } from './metadata';
 export const buildLinearTextToImageGraph = async (state: RootState): Promise<NonNullableGraph> => {
   const log = logger('nodes');
   const {
+    positivePrompt,
+    negativePrompt,
     model,
     cfgScale: cfg_scale,
     cfgRescaleMultiplier: cfg_rescale_multiplier,
     scheduler,
     steps,
+    width,
+    height,
     clipSkip,
     shouldUseCpuNoise,
     vaePrecision,
@@ -42,8 +46,6 @@ export const buildLinearTextToImageGraph = async (state: RootState): Promise<Non
     seamlessYAxis,
     seed,
   } = state.generation;
-  const { positivePrompt, negativePrompt } = state.controlLayers.present;
-  const { width, height } = state.controlLayers.present.size;
 
   const use_cpu = shouldUseCpuNoise;
 
@@ -254,7 +256,7 @@ export const buildLinearTextToImageGraph = async (state: RootState): Promise<Non
 
   await addT2IAdaptersToLinearGraph(state, graph, DENOISE_LATENTS);
 
-  await addControlLayersToGraph(state, graph, DENOISE_LATENTS);
+  await addRegionalPromptsToGraph(state, graph, DENOISE_LATENTS);
 
   // High resolution fix.
   if (state.hrf.hrfEnabled) {

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

@@ -17,12 +17,12 @@ export const getBoardField = (state: RootState): BoardField | undefined => {
  * Gets the SDXL style prompts, based on the concat setting.
  */
 export const getSDXLStylePrompts = (state: RootState): { positiveStylePrompt: string; negativeStylePrompt: string } => {
-  const { positivePrompt, negativePrompt, positivePrompt2, negativePrompt2, shouldConcatPrompts } =
-    state.controlLayers.present;
+  const { positivePrompt, negativePrompt } = state.generation;
+  const { positiveStylePrompt, negativeStylePrompt, shouldConcatSDXLStylePrompt } = state.sdxl;
 
   return {
-    positiveStylePrompt: shouldConcatPrompts ? positivePrompt : positivePrompt2,
-    negativeStylePrompt: shouldConcatPrompts ? negativePrompt : negativePrompt2,
+    positiveStylePrompt: shouldConcatSDXLStylePrompt ? positivePrompt : positiveStylePrompt,
+    negativeStylePrompt: shouldConcatSDXLStylePrompt ? negativePrompt : negativeStylePrompt,
   };
 };
 

invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx

@@ -1,7 +1,7 @@
 import { Box, Textarea } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { negativePromptChanged } from 'features/controlLayers/store/controlLayersSlice';
 import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper';
+import { setNegativePrompt } from 'features/parameters/store/generationSlice';
 import { AddPromptTriggerButton } from 'features/prompt/AddPromptTriggerButton';
 import { PromptPopover } from 'features/prompt/PromptPopover';
 import { usePrompt } from 'features/prompt/usePrompt';
@@ -10,12 +10,12 @@ import { useTranslation } from 'react-i18next';
 
 export const ParamNegativePrompt = memo(() => {
   const dispatch = useAppDispatch();
-  const prompt = useAppSelector((s) => s.controlLayers.present.negativePrompt);
+  const prompt = useAppSelector((s) => s.generation.negativePrompt);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const { t } = useTranslation();
   const _onChange = useCallback(
     (v: string) => {
-      dispatch(negativePromptChanged(v));
+      dispatch(setNegativePrompt(v));
     },
     [dispatch]
   );

invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx

@@ -1,8 +1,8 @@
 import { Box, Textarea } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { positivePromptChanged } from 'features/controlLayers/store/controlLayersSlice';
 import { ShowDynamicPromptsPreviewButton } from 'features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton';
 import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper';
+import { setPositivePrompt } from 'features/parameters/store/generationSlice';
 import { AddPromptTriggerButton } from 'features/prompt/AddPromptTriggerButton';
 import { PromptPopover } from 'features/prompt/PromptPopover';
 import { usePrompt } from 'features/prompt/usePrompt';
@@ -14,14 +14,14 @@ import { useTranslation } from 'react-i18next';
 
 export const ParamPositivePrompt = memo(() => {
   const dispatch = useAppDispatch();
-  const prompt = useAppSelector((s) => s.controlLayers.present.positivePrompt);
+  const prompt = useAppSelector((s) => s.generation.positivePrompt);
   const baseModel = useAppSelector((s) => s.generation.model)?.base;
 
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const { t } = useTranslation();
   const handleChange = useCallback(
     (v: string) => {
-      dispatch(positivePromptChanged(v));
+      dispatch(setPositivePrompt(v));
     },
     [dispatch]
   );

invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioCanvasPreview.tsx

@@ -1,5 +1,5 @@
 import { Flex } from '@invoke-ai/ui-library';
-import { StageComponent } from 'features/controlLayers/components/StageComponent';
+import { StageComponent } from 'features/regionalPrompts/components/StageComponent';
 import { memo } from 'react';
 
 export const AspectRatioCanvasPreview = memo(() => {

invokeai/frontend/web/src/features/parameters/store/generationSlice.ts

@@ -1,7 +1,11 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 import type { PersistConfig, RootState } from 'app/store/store';
+import { roundToMultiple } from 'common/util/roundDownToMultiple';
+import { isAnyControlAdapterAdded } from 'features/controlAdapters/store/controlAdaptersSlice';
+import { calculateNewSize } from 'features/parameters/components/ImageSize/calculateNewSize';
 import { initialAspectRatioState } from 'features/parameters/components/ImageSize/constants';
+import type { AspectRatioState } from 'features/parameters/components/ImageSize/types';
 import { CLIP_SKIP_MAP } from 'features/parameters/types/constants';
 import type {
   ParameterCanvasCoherenceMode,
@@ -12,7 +16,7 @@ import type {
   ParameterScheduler,
   ParameterVAEModel,
 } from 'features/parameters/types/parameterSchemas';
-import { getOptimalDimension } from 'features/parameters/util/optimalDimension';
+import { getIsSizeOptimal, getOptimalDimension } from 'features/parameters/util/optimalDimension';
 import { configChanged } from 'features/system/store/configSlice';
 import { clamp } from 'lodash-es';
 import type { RgbaColor } from 'react-colorful';
@@ -24,9 +28,12 @@ const initialGenerationState: GenerationState = {
   _version: 2,
   cfgScale: 7.5,
   cfgRescaleMultiplier: 0,
+  height: 512,
   img2imgStrength: 0.75,
   infillMethod: 'patchmatch',
   iterations: 1,
+  positivePrompt: '',
+  negativePrompt: '',
   scheduler: 'euler',
   maskBlur: 16,
   maskBlurMethod: 'box',
@@ -37,6 +44,7 @@ const initialGenerationState: GenerationState = {
   shouldFitToWidthHeight: true,
   shouldRandomizeSeed: true,
   steps: 50,
+  width: 512,
   model: null,
   vae: null,
   vaePrecision: 'fp32',
@@ -45,6 +53,7 @@ const initialGenerationState: GenerationState = {
   clipSkip: 0,
   shouldUseCpuNoise: true,
   shouldShowAdvancedOptions: false,
+  aspectRatio: { ...initialAspectRatioState },
   infillTileSize: 32,
   infillPatchmatchDownscaleSize: 1,
   infillMosaicTileWidth: 64,
@@ -58,6 +67,12 @@ export const generationSlice = createSlice({
   name: 'generation',
   initialState: initialGenerationState,
   reducers: {
+    setPositivePrompt: (state, action: PayloadAction<string>) => {
+      state.positivePrompt = action.payload;
+    },
+    setNegativePrompt: (state, action: PayloadAction<string>) => {
+      state.negativePrompt = action.payload;
+    },
     setIterations: (state, action: PayloadAction<number>) => {
       state.iterations = action.payload;
     },
@@ -133,6 +148,19 @@ export const generationSlice = createSlice({
           const { maxClip } = CLIP_SKIP_MAP[newModel.base];
           state.clipSkip = clamp(state.clipSkip, 0, maxClip);
         }
+
+        if (action.meta.previousModel?.base === newModel.base) {
+          // The base model hasn't changed, we don't need to optimize the size
+          return;
+        }
+
+        const optimalDimension = getOptimalDimension(newModel);
+        if (getIsSizeOptimal(state.width, state.height, optimalDimension)) {
+          return;
+        }
+        const { width, height } = calculateNewSize(state.aspectRatio.value, optimalDimension * optimalDimension);
+        state.width = width;
+        state.height = height;
       },
       prepare: (payload: ParameterModel | null, previousModel?: ParameterModel | null) => ({
         payload,
@@ -154,6 +182,27 @@ export const generationSlice = createSlice({
     shouldUseCpuNoiseChanged: (state, action: PayloadAction<boolean>) => {
       state.shouldUseCpuNoise = action.payload;
     },
+    widthChanged: (state, action: PayloadAction<number>) => {
+      state.width = action.payload;
+    },
+    heightChanged: (state, action: PayloadAction<number>) => {
+      state.height = action.payload;
+    },
+    widthRecalled: (state, action: PayloadAction<number>) => {
+      state.width = action.payload;
+      state.aspectRatio.value = action.payload / state.height;
+      state.aspectRatio.id = 'Free';
+      state.aspectRatio.isLocked = false;
+    },
+    heightRecalled: (state, action: PayloadAction<number>) => {
+      state.height = action.payload;
+      state.aspectRatio.value = state.width / action.payload;
+      state.aspectRatio.id = 'Free';
+      state.aspectRatio.isLocked = false;
+    },
+    aspectRatioChanged: (state, action: PayloadAction<AspectRatioState>) => {
+      state.aspectRatio = action.payload;
+    },
     setInfillMethod: (state, action: PayloadAction<string>) => {
       state.infillMethod = action.payload;
     },
@@ -188,6 +237,15 @@ export const generationSlice = createSlice({
         state.vaePrecision = action.payload.sd.vaePrecision;
       }
     });
+
+    // TODO: This is a temp fix to reduce issues with T2I adapter having a different downscaling
+    // factor than the UNet. Hopefully we get an upstream fix in diffusers.
+    builder.addMatcher(isAnyControlAdapterAdded, (state, action) => {
+      if (action.payload.type === 't2i_adapter') {
+        state.width = roundToMultiple(state.width, 64);
+        state.height = roundToMultiple(state.height, 64);
+      }
+    });
   },
   selectors: {
     selectOptimalDimension: (slice) => getOptimalDimension(slice.model),
@@ -201,6 +259,8 @@ export const {
   setImg2imgStrength,
   setInfillMethod,
   setIterations,
+  setPositivePrompt,
+  setNegativePrompt,
   setScheduler,
   setMaskBlur,
   setCanvasCoherenceMode,
@@ -218,6 +278,11 @@ export const {
   setClipSkip,
   shouldUseCpuNoiseChanged,
   vaePrecisionChanged,
+  aspectRatioChanged,
+  widthChanged,
+  heightChanged,
+  widthRecalled,
+  heightRecalled,
   setInfillTileSize,
   setInfillPatchmatchDownscaleSize,
   setInfillMosaicTileWidth,

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

@@ -1,16 +1,21 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
+import type { AspectRatioState } from 'features/parameters/components/ImageSize/types';
 import type {
   ParameterCanvasCoherenceMode,
   ParameterCFGRescaleMultiplier,
   ParameterCFGScale,
+  ParameterHeight,
   ParameterMaskBlurMethod,
   ParameterModel,
+  ParameterNegativePrompt,
+  ParameterPositivePrompt,
   ParameterPrecision,
   ParameterScheduler,
   ParameterSeed,
   ParameterSteps,
   ParameterStrength,
   ParameterVAEModel,
+  ParameterWidth,
 } from 'features/parameters/types/parameterSchemas';
 import type { RgbaColor } from 'react-colorful';
 
@@ -18,10 +23,13 @@ export interface GenerationState {
   _version: 2;
   cfgScale: ParameterCFGScale;
   cfgRescaleMultiplier: ParameterCFGRescaleMultiplier;
+  height: ParameterHeight;
   img2imgStrength: ParameterStrength;
   infillMethod: string;
   initialImage?: { imageName: string; width: number; height: number };
   iterations: number;
+  positivePrompt: ParameterPositivePrompt;
+  negativePrompt: ParameterNegativePrompt;
   scheduler: ParameterScheduler;
   maskBlur: number;
   maskBlurMethod: ParameterMaskBlurMethod;
@@ -32,6 +40,7 @@ export interface GenerationState {
   shouldFitToWidthHeight: boolean;
   shouldRandomizeSeed: boolean;
   steps: ParameterSteps;
+  width: ParameterWidth;
   model: ParameterModel | null;
   vae: ParameterVAEModel | null;
   vaePrecision: ParameterPrecision;
@@ -40,6 +49,7 @@ export interface GenerationState {
   clipSkip: number;
   shouldUseCpuNoise: boolean;
   shouldShowAdvancedOptions: boolean;
+  aspectRatio: AspectRatioState;
   infillTileSize: number;
   infillPatchmatchDownscaleSize: number;
   infillMosaicTileWidth: number;

invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx

@@ -2,19 +2,19 @@ import { Divider, Flex, ListItem, Text, UnorderedList } from '@invoke-ai/ui-libr
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useIsReadyToEnqueue } from 'common/hooks/useIsReadyToEnqueue';
-import { selectControlLayersSlice } from 'features/controlLayers/store/controlLayersSlice';
 import { selectDynamicPromptsSlice } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
 import { getShouldProcessPrompt } from 'features/dynamicPrompts/util/getShouldProcessPrompt';
+import { selectGenerationSlice } from 'features/parameters/store/generationSlice';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useEnqueueBatchMutation } from 'services/api/endpoints/queue';
 import { useBoardName } from 'services/api/hooks/useBoardName';
 
 const selectPromptsCount = createSelector(
-  selectControlLayersSlice,
+  selectGenerationSlice,
   selectDynamicPromptsSlice,
-  (controlLayers, dynamicPrompts) =>
-    getShouldProcessPrompt(controlLayers.present.positivePrompt) ? dynamicPrompts.prompts.length : 1
+  (generation, dynamicPrompts) =>
+    getShouldProcessPrompt(generation.positivePrompt) ? dynamicPrompts.prompts.length : 1
 );
 
 type Props = {

invokeai/frontend/web/src/features/regionalPrompts/components/AddLayerButton.tsx

@@ -0,0 +1,22 @@
+import { Button } from '@invoke-ai/ui-library';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { layerAdded } from 'features/regionalPrompts/store/regionalPromptsSlice';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiPlusBold } from 'react-icons/pi';
+
+export const AddLayerButton = memo(() => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const onClick = useCallback(() => {
+    dispatch(layerAdded('vector_mask_layer'));
+  }, [dispatch]);
+
+  return (
+    <Button onClick={onClick} leftIcon={<PiPlusBold />} variant="ghost">
+      {t('regionalPrompts.addLayer')}
+    </Button>
+  );
+});
+
+AddLayerButton.displayName = 'AddLayerButton';

invokeai/frontend/web/src/features/regionalPrompts/components/AddPromptButtons.tsx

@@ -1,13 +1,13 @@
 import { Button, Flex } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { guidanceLayerIPAdapterAdded } from 'app/store/middleware/listenerMiddleware/listeners/controlLayersToControlAdapterBridge';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
-  isRegionalGuidanceLayer,
+  isVectorMaskLayer,
+  maskLayerIPAdapterAdded,
   maskLayerNegativePromptChanged,
   maskLayerPositivePromptChanged,
-  selectControlLayersSlice,
-} from 'features/controlLayers/store/controlLayersSlice';
+  selectRegionalPromptsSlice,
+} from 'features/regionalPrompts/store/regionalPromptsSlice';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiPlusBold } from 'react-icons/pi';
@@ -21,9 +21,9 @@ export const AddPromptButtons = ({ layerId }: AddPromptButtonProps) => {
   const dispatch = useAppDispatch();
   const selectValidActions = useMemo(
     () =>
-      createMemoizedSelector(selectControlLayersSlice, (controlLayers) => {
-        const layer = controlLayers.present.layers.find((l) => l.id === layerId);
-        assert(isRegionalGuidanceLayer(layer), `Layer ${layerId} not found or not an RP layer`);
+      createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
+        const layer = regionalPrompts.present.layers.find((l) => l.id === layerId);
+        assert(isVectorMaskLayer(layer), `Layer ${layerId} not found or not an RP layer`);
         return {
           canAddPositivePrompt: layer.positivePrompt === null,
           canAddNegativePrompt: layer.negativePrompt === null,
@@ -39,7 +39,7 @@ export const AddPromptButtons = ({ layerId }: AddPromptButtonProps) => {
     dispatch(maskLayerNegativePromptChanged({ layerId, prompt: '' }));
   }, [dispatch, layerId]);
   const addIPAdapter = useCallback(() => {
-    dispatch(guidanceLayerIPAdapterAdded(layerId));
+    dispatch(maskLayerIPAdapterAdded(layerId));
   }, [dispatch, layerId]);
 
   return (

invokeai/frontend/web/src/features/regionalPrompts/components/BrushSize.tsx

@@ -10,7 +10,7 @@ import {
   PopoverTrigger,
 } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { brushSizeChanged, initialControlLayersState } from 'features/controlLayers/store/controlLayersSlice';
+import { brushSizeChanged, initialRegionalPromptsState } from 'features/regionalPrompts/store/regionalPromptsSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -20,22 +20,22 @@ const formatPx = (v: number | string) => `${v} px`;
 export const BrushSize = memo(() => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
-  const brushSize = useAppSelector((s) => s.controlLayers.present.brushSize);
+  const brushSize = useAppSelector((s) => s.regionalPrompts.present.brushSize);
   const onChange = useCallback(
     (v: number) => {
-      dispatch(brushSizeChanged(Math.round(v)));
+      dispatch(brushSizeChanged(v));
     },
     [dispatch]
   );
   return (
     <FormControl w="min-content">
-      <FormLabel m={0}>{t('controlLayers.brushSize')}</FormLabel>
+      <FormLabel m={0}>{t('regionalPrompts.brushSize')}</FormLabel>
       <Popover isLazy>
         <PopoverTrigger>
           <CompositeNumberInput
             min={1}
             max={600}
-            defaultValue={initialControlLayersState.brushSize}
+            defaultValue={initialRegionalPromptsState.brushSize}
             value={brushSize}
             onChange={onChange}
             w={24}
@@ -48,7 +48,7 @@ export const BrushSize = memo(() => {
             <CompositeSlider
               min={1}
               max={300}
-              defaultValue={initialControlLayersState.brushSize}
+              defaultValue={initialRegionalPromptsState.brushSize}
               value={brushSize}
               onChange={onChange}
               marks={marks}

invokeai/frontend/web/src/features/regionalPrompts/components/DeleteAllLayersButton.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@invoke-ai/ui-library';
-import { allLayersDeleted } from 'app/store/middleware/listenerMiddleware/listeners/controlLayersToControlAdapterBridge';
 import { useAppDispatch } from 'app/store/storeHooks';
+import { allLayersDeleted } from 'features/regionalPrompts/store/regionalPromptsSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiTrashSimpleBold } from 'react-icons/pi';
@@ -14,7 +14,7 @@ export const DeleteAllLayersButton = memo(() => {
 
   return (
     <Button onClick={onClick} leftIcon={<PiTrashSimpleBold />} variant="ghost" colorScheme="error">
-      {t('controlLayers.deleteAll')}
+      {t('regionalPrompts.deleteAll')}
     </Button>
   );
 });

invokeai/frontend/web/src/features/regionalPrompts/components/GlobalMaskLayerOpacity.tsx

@@ -0,0 +1,70 @@
+import {
+  CompositeNumberInput,
+  CompositeSlider,
+  FormControl,
+  FormLabel,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+} from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import {
+  globalMaskLayerOpacityChanged,
+  initialRegionalPromptsState,
+} from 'features/regionalPrompts/store/regionalPromptsSlice';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const marks = [0, 25, 50, 75, 100];
+const formatPct = (v: number | string) => `${v} %`;
+
+export const GlobalMaskLayerOpacity = memo(() => {
+  const dispatch = useAppDispatch();
+  const { t } = useTranslation();
+  const globalMaskLayerOpacity = useAppSelector((s) =>
+    Math.round(s.regionalPrompts.present.globalMaskLayerOpacity * 100)
+  );
+  const onChange = useCallback(
+    (v: number) => {
+      dispatch(globalMaskLayerOpacityChanged(v / 100));
+    },
+    [dispatch]
+  );
+  return (
+    <FormControl w="min-content">
+      <FormLabel m={0}>{t('regionalPrompts.globalMaskOpacity')}</FormLabel>
+      <Popover isLazy>
+        <PopoverTrigger>
+          <CompositeNumberInput
+            min={0}
+            max={100}
+            step={1}
+            value={globalMaskLayerOpacity}
+            defaultValue={initialRegionalPromptsState.globalMaskLayerOpacity * 100}
+            onChange={onChange}
+            w={24}
+            format={formatPct}
+          />
+        </PopoverTrigger>
+        <PopoverContent w={200} py={2} px={4}>
+          <PopoverArrow />
+          <PopoverBody>
+            <CompositeSlider
+              min={0}
+              max={100}
+              step={1}
+              value={globalMaskLayerOpacity}
+              defaultValue={initialRegionalPromptsState.globalMaskLayerOpacity * 100}
+              onChange={onChange}
+              marks={marks}
+            />
+          </PopoverBody>
+        </PopoverContent>
+      </Popover>
+    </FormControl>
+  );
+});
+
+GlobalMaskLayerOpacity.displayName = 'GlobalMaskLayerOpacity';

invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerAutoNegativeCheckbox.tsx

@@ -2,10 +2,10 @@ import { Checkbox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
-  isRegionalGuidanceLayer,
+  isVectorMaskLayer,
   maskLayerAutoNegativeChanged,
-  selectControlLayersSlice,
-} from 'features/controlLayers/store/controlLayersSlice';
+  selectRegionalPromptsSlice,
+} from 'features/regionalPrompts/store/regionalPromptsSlice';
 import type { ChangeEvent } from 'react';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -18,9 +18,9 @@ type Props = {
 const useAutoNegative = (layerId: string) => {
   const selectAutoNegative = useMemo(
     () =>
-      createSelector(selectControlLayersSlice, (controlLayers) => {
-        const layer = controlLayers.present.layers.find((l) => l.id === layerId);
-        assert(isRegionalGuidanceLayer(layer), `Layer ${layerId} not found or not an RP layer`);
+      createSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
+        const layer = regionalPrompts.present.layers.find((l) => l.id === layerId);
+        assert(isVectorMaskLayer(layer), `Layer ${layerId} not found or not an RP layer`);
         return layer.autoNegative;
       }),
     [layerId]
@@ -29,7 +29,7 @@ const useAutoNegative = (layerId: string) => {
   return autoNegative;
 };
 
-export const RGLayerAutoNegativeCheckbox = memo(({ layerId }: Props) => {
+export const RPLayerAutoNegativeCheckbox = memo(({ layerId }: Props) => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const autoNegative = useAutoNegative(layerId);
@@ -42,10 +42,10 @@ export const RGLayerAutoNegativeCheckbox = memo(({ layerId }: Props) => {
 
   return (
     <FormControl gap={2}>
-      <FormLabel m={0}>{t('controlLayers.autoNegative')}</FormLabel>
+      <FormLabel m={0}>{t('regionalPrompts.autoNegative')}</FormLabel>
       <Checkbox size="md" isChecked={autoNegative === 'invert'} onChange={onChange} />
     </FormControl>
   );
 });
 
-RGLayerAutoNegativeCheckbox.displayName = 'RGLayerAutoNegativeCheckbox';
+RPLayerAutoNegativeCheckbox.displayName = 'RPLayerAutoNegativeCheckbox';

invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerColorPicker.tsx

@@ -2,13 +2,12 @@ import { Flex, Popover, PopoverBody, PopoverContent, PopoverTrigger, Tooltip } f
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import RgbColorPicker from 'common/components/RgbColorPicker';
-import { stopPropagation } from 'common/util/stopPropagation';
 import { rgbColorToString } from 'features/canvas/util/colorToString';
 import {
-  isRegionalGuidanceLayer,
+  isVectorMaskLayer,
   maskLayerPreviewColorChanged,
-  selectControlLayersSlice,
-} from 'features/controlLayers/store/controlLayersSlice';
+  selectRegionalPromptsSlice,
+} from 'features/regionalPrompts/store/regionalPromptsSlice';
 import { memo, useCallback, useMemo } from 'react';
 import type { RgbColor } from 'react-colorful';
 import { useTranslation } from 'react-i18next';
@@ -18,13 +17,13 @@ type Props = {
   layerId: string;
 };
 
-export const RGLayerColorPicker = memo(({ layerId }: Props) => {
+export const RPLayerColorPicker = memo(({ layerId }: Props) => {
   const { t } = useTranslation();
   const selectColor = useMemo(
     () =>
-      createMemoizedSelector(selectControlLayersSlice, (controlLayers) => {
-        const layer = controlLayers.present.layers.find((l) => l.id === layerId);
-        assert(isRegionalGuidanceLayer(layer), `Layer ${layerId} not found or not an vector mask layer`);
+      createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
+        const layer = regionalPrompts.present.layers.find((l) => l.id === layerId);
+        assert(isVectorMaskLayer(layer), `Layer ${layerId} not found or not an vector mask layer`);
         return layer.previewColor;
       }),
     [layerId]
@@ -41,10 +40,10 @@ export const RGLayerColorPicker = memo(({ layerId }: Props) => {
     <Popover isLazy>
       <PopoverTrigger>
         <span>
-          <Tooltip label={t('controlLayers.maskPreviewColor')}>
+          <Tooltip label={t('regionalPrompts.maskPreviewColor')}>
             <Flex
               as="button"
-              aria-label={t('controlLayers.maskPreviewColor')}
+              aria-label={t('regionalPrompts.maskPreviewColor')}
               borderRadius="base"
               borderWidth={1}
               bg={rgbColorToString(color)}
@@ -52,7 +51,6 @@ export const RGLayerColorPicker = memo(({ layerId }: Props) => {
               h={8}
               cursor="pointer"
               tabIndex={-1}
-              onDoubleClick={stopPropagation} // double click expands the layer
             />
           </Tooltip>
         </span>
@@ -66,4 +64,4 @@ export const RGLayerColorPicker = memo(({ layerId }: Props) => {
   );
 });
 
-RGLayerColorPicker.displayName = 'RGLayerColorPicker';
+RPLayerColorPicker.displayName = 'RPLayerColorPicker';

invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerDeleteButton.tsx

@@ -1,18 +1,17 @@
 import { IconButton } from '@invoke-ai/ui-library';
-import { guidanceLayerDeleted } from 'app/store/middleware/listenerMiddleware/listeners/controlLayersToControlAdapterBridge';
 import { useAppDispatch } from 'app/store/storeHooks';
-import { stopPropagation } from 'common/util/stopPropagation';
+import { layerDeleted } from 'features/regionalPrompts/store/regionalPromptsSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiTrashSimpleBold } from 'react-icons/pi';
 
 type Props = { layerId: string };
 
-export const LayerDeleteButton = memo(({ layerId }: Props) => {
+export const RPLayerDeleteButton = memo(({ layerId }: Props) => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const deleteLayer = useCallback(() => {
-    dispatch(guidanceLayerDeleted(layerId));
+    dispatch(layerDeleted(layerId));
   }, [dispatch, layerId]);
   return (
     <IconButton
@@ -22,9 +21,8 @@ export const LayerDeleteButton = memo(({ layerId }: Props) => {
       tooltip={t('common.delete')}
       icon={<PiTrashSimpleBold />}
       onClick={deleteLayer}
-      onDoubleClick={stopPropagation} // double click expands the layer
     />
   );
 });
 
-LayerDeleteButton.displayName = 'LayerDeleteButton';
+RPLayerDeleteButton.displayName = 'RPLayerDeleteButton';

invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerIPAdapterList.tsx

@@ -0,0 +1,34 @@
+import { Flex } from '@invoke-ai/ui-library';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
+import { useAppSelector } from 'app/store/storeHooks';
+import ControlAdapterConfig from 'features/controlAdapters/components/ControlAdapterConfig';
+import { selectRegionalPromptsSlice } from 'features/regionalPrompts/store/regionalPromptsSlice';
+import { memo, useMemo } from 'react';
+import { assert } from 'tsafe';
+
+type Props = {
+  layerId: string;
+};
+
+export const RPLayerIPAdapterList = memo(({ layerId }: Props) => {
+  const selectIPAdapterIds = useMemo(
+    () =>
+      createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
+        const layer = regionalPrompts.present.layers.find((l) => l.id === layerId);
+        assert(layer, `Layer ${layerId} not found`);
+        return layer.ipAdapterIds;
+      }),
+    [layerId]
+  );
+  const ipAdapterIds = useAppSelector(selectIPAdapterIds);
+
+  return (
+    <Flex w="full" flexDir="column" gap={2}>
+      {ipAdapterIds.map((id, index) => (
+        <ControlAdapterConfig key={id} id={id} number={index + 1} />
+      ))}
+    </Flex>
+  );
+});
+
+RPLayerIPAdapterList.displayName = 'RPLayerIPAdapterList';

invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerListItem.tsx

@@ -0,0 +1,87 @@
+import { Badge, Flex, Spacer } from '@invoke-ai/ui-library';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { rgbColorToString } from 'features/canvas/util/colorToString';
+import { RPLayerColorPicker } from 'features/regionalPrompts/components/RPLayerColorPicker';
+import { RPLayerDeleteButton } from 'features/regionalPrompts/components/RPLayerDeleteButton';
+import { RPLayerIPAdapterList } from 'features/regionalPrompts/components/RPLayerIPAdapterList';
+import { RPLayerMenu } from 'features/regionalPrompts/components/RPLayerMenu';
+import { RPLayerNegativePrompt } from 'features/regionalPrompts/components/RPLayerNegativePrompt';
+import { RPLayerPositivePrompt } from 'features/regionalPrompts/components/RPLayerPositivePrompt';
+import RPLayerSettingsPopover from 'features/regionalPrompts/components/RPLayerSettingsPopover';
+import { RPLayerVisibilityToggle } from 'features/regionalPrompts/components/RPLayerVisibilityToggle';
+import {
+  isVectorMaskLayer,
+  layerSelected,
+  selectRegionalPromptsSlice,
+} from 'features/regionalPrompts/store/regionalPromptsSlice';
+import { memo, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { assert } from 'tsafe';
+
+import { AddPromptButtons } from './AddPromptButtons';
+
+type Props = {
+  layerId: string;
+};
+
+export const RPLayerListItem = memo(({ layerId }: Props) => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const selector = useMemo(
+    () =>
+      createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
+        const layer = regionalPrompts.present.layers.find((l) => l.id === layerId);
+        assert(isVectorMaskLayer(layer), `Layer ${layerId} not found or not an RP layer`);
+        return {
+          color: rgbColorToString(layer.previewColor),
+          hasPositivePrompt: layer.positivePrompt !== null,
+          hasNegativePrompt: layer.negativePrompt !== null,
+          hasIPAdapters: layer.ipAdapterIds.length > 0,
+          isSelected: layerId === regionalPrompts.present.selectedLayerId,
+          autoNegative: layer.autoNegative,
+        };
+      }),
+    [layerId]
+  );
+  const { autoNegative, color, hasPositivePrompt, hasNegativePrompt, hasIPAdapters, isSelected } =
+    useAppSelector(selector);
+  const onClickCapture = useCallback(() => {
+    // Must be capture so that the layer is selected before deleting/resetting/etc
+    dispatch(layerSelected(layerId));
+  }, [dispatch, layerId]);
+  return (
+    <Flex
+      gap={2}
+      onClickCapture={onClickCapture}
+      bg={isSelected ? color : 'base.800'}
+      ps={2}
+      borderRadius="base"
+      pe="1px"
+      py="1px"
+      cursor="pointer"
+    >
+      <Flex flexDir="column" gap={2} w="full" bg="base.850" p={2} borderRadius="base">
+        <Flex gap={3} alignItems="center">
+          <RPLayerVisibilityToggle layerId={layerId} />
+          <RPLayerColorPicker layerId={layerId} />
+          <Spacer />
+          {autoNegative === 'invert' && (
+            <Badge color="base.300" bg="transparent" borderWidth={1}>
+              {t('regionalPrompts.autoNegative')}
+            </Badge>
+          )}
+          <RPLayerDeleteButton layerId={layerId} />
+          <RPLayerSettingsPopover layerId={layerId} />
+          <RPLayerMenu layerId={layerId} />
+        </Flex>
+        {!hasPositivePrompt && !hasNegativePrompt && !hasIPAdapters && <AddPromptButtons layerId={layerId} />}
+        {hasPositivePrompt && <RPLayerPositivePrompt layerId={layerId} />}
+        {hasNegativePrompt && <RPLayerNegativePrompt layerId={layerId} />}
+        {hasIPAdapters && <RPLayerIPAdapterList layerId={layerId} />}
+      </Flex>
+    </Flex>
+  );
+});
+
+RPLayerListItem.displayName = 'RPLayerListItem';

invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerMenu.tsx

@@ -0,0 +1,120 @@
+import { IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuList } from '@invoke-ai/ui-library';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import {
+  isVectorMaskLayer,
+  layerDeleted,
+  layerMovedBackward,
+  layerMovedForward,
+  layerMovedToBack,
+  layerMovedToFront,
+  layerReset,
+  maskLayerIPAdapterAdded,
+  maskLayerNegativePromptChanged,
+  maskLayerPositivePromptChanged,
+  selectRegionalPromptsSlice,
+} from 'features/regionalPrompts/store/regionalPromptsSlice';
+import { memo, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  PiArrowCounterClockwiseBold,
+  PiArrowDownBold,
+  PiArrowLineDownBold,
+  PiArrowLineUpBold,
+  PiArrowUpBold,
+  PiDotsThreeVerticalBold,
+  PiPlusBold,
+  PiTrashSimpleBold,
+} from 'react-icons/pi';
+import { assert } from 'tsafe';
+
+type Props = { layerId: string };
+
+export const RPLayerMenu = memo(({ layerId }: Props) => {
+  const dispatch = useAppDispatch();
+  const { t } = useTranslation();
+  const selectValidActions = useMemo(
+    () =>
+      createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
+        const layer = regionalPrompts.present.layers.find((l) => l.id === layerId);
+        assert(isVectorMaskLayer(layer), `Layer ${layerId} not found or not an RP layer`);
+        const layerIndex = regionalPrompts.present.layers.findIndex((l) => l.id === layerId);
+        const layerCount = regionalPrompts.present.layers.length;
+        return {
+          canAddPositivePrompt: layer.positivePrompt === null,
+          canAddNegativePrompt: layer.negativePrompt === null,
+          canMoveForward: layerIndex < layerCount - 1,
+          canMoveBackward: layerIndex > 0,
+          canMoveToFront: layerIndex < layerCount - 1,
+          canMoveToBack: layerIndex > 0,
+        };
+      }),
+    [layerId]
+  );
+  const validActions = useAppSelector(selectValidActions);
+  const addPositivePrompt = useCallback(() => {
+    dispatch(maskLayerPositivePromptChanged({ layerId, prompt: '' }));
+  }, [dispatch, layerId]);
+  const addNegativePrompt = useCallback(() => {
+    dispatch(maskLayerNegativePromptChanged({ layerId, prompt: '' }));
+  }, [dispatch, layerId]);
+  const addIPAdapter = useCallback(() => {
+    dispatch(maskLayerIPAdapterAdded(layerId));
+  }, [dispatch, layerId]);
+  const moveForward = useCallback(() => {
+    dispatch(layerMovedForward(layerId));
+  }, [dispatch, layerId]);
+  const moveToFront = useCallback(() => {
+    dispatch(layerMovedToFront(layerId));
+  }, [dispatch, layerId]);
+  const moveBackward = useCallback(() => {
+    dispatch(layerMovedBackward(layerId));
+  }, [dispatch, layerId]);
+  const moveToBack = useCallback(() => {
+    dispatch(layerMovedToBack(layerId));
+  }, [dispatch, layerId]);
+  const resetLayer = useCallback(() => {
+    dispatch(layerReset(layerId));
+  }, [dispatch, layerId]);
+  const deleteLayer = useCallback(() => {
+    dispatch(layerDeleted(layerId));
+  }, [dispatch, layerId]);
+  return (
+    <Menu>
+      <MenuButton as={IconButton} aria-label="Layer menu" size="sm" icon={<PiDotsThreeVerticalBold />} />
+      <MenuList>
+        <MenuItem onClick={addPositivePrompt} isDisabled={!validActions.canAddPositivePrompt} icon={<PiPlusBold />}>
+          {t('regionalPrompts.addPositivePrompt')}
+        </MenuItem>
+        <MenuItem onClick={addNegativePrompt} isDisabled={!validActions.canAddNegativePrompt} icon={<PiPlusBold />}>
+          {t('regionalPrompts.addNegativePrompt')}
+        </MenuItem>
+        <MenuItem onClick={addIPAdapter} icon={<PiPlusBold />}>
+          {t('regionalPrompts.addIPAdapter')}
+        </MenuItem>
+        <MenuDivider />
+        <MenuItem onClick={moveToFront} isDisabled={!validActions.canMoveToFront} icon={<PiArrowLineUpBold />}>
+          {t('regionalPrompts.moveToFront')}
+        </MenuItem>
+        <MenuItem onClick={moveForward} isDisabled={!validActions.canMoveForward} icon={<PiArrowUpBold />}>
+          {t('regionalPrompts.moveForward')}
+        </MenuItem>
+        <MenuItem onClick={moveBackward} isDisabled={!validActions.canMoveBackward} icon={<PiArrowDownBold />}>
+          {t('regionalPrompts.moveBackward')}
+        </MenuItem>
+        <MenuItem onClick={moveToBack} isDisabled={!validActions.canMoveToBack} icon={<PiArrowLineDownBold />}>
+          {t('regionalPrompts.moveToBack')}
+        </MenuItem>
+        <MenuDivider />
+        <MenuItem onClick={resetLayer} icon={<PiArrowCounterClockwiseBold />}>
+          {t('accessibility.reset')}
+        </MenuItem>
+        <MenuItem onClick={deleteLayer} icon={<PiTrashSimpleBold />} color="error.300">
+          {t('common.delete')}
+        </MenuItem>
+      </MenuList>
+    </Menu>
+  );
+});
+
+RPLayerMenu.displayName = 'RPLayerMenu';

invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerNegativePrompt.tsx

@@ -1,12 +1,12 @@
 import { Box, Textarea } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
-import { RGLayerPromptDeleteButton } from 'features/controlLayers/components/RGLayerPromptDeleteButton';
-import { useLayerNegativePrompt } from 'features/controlLayers/hooks/layerStateHooks';
-import { maskLayerNegativePromptChanged } from 'features/controlLayers/store/controlLayersSlice';
 import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper';
 import { AddPromptTriggerButton } from 'features/prompt/AddPromptTriggerButton';
 import { PromptPopover } from 'features/prompt/PromptPopover';
 import { usePrompt } from 'features/prompt/usePrompt';
+import { RPLayerPromptDeleteButton } from 'features/regionalPrompts/components/RPLayerPromptDeleteButton';
+import { useLayerNegativePrompt } from 'features/regionalPrompts/hooks/layerStateHooks';
+import { maskLayerNegativePromptChanged } from 'features/regionalPrompts/store/regionalPromptsSlice';
 import { memo, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -14,7 +14,7 @@ type Props = {
   layerId: string;
 };
 
-export const RGLayerNegativePrompt = memo(({ layerId }: Props) => {
+export const RPLayerNegativePrompt = memo(({ layerId }: Props) => {
   const prompt = useLayerNegativePrompt(layerId);
   const dispatch = useAppDispatch();
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -47,7 +47,7 @@ export const RGLayerNegativePrompt = memo(({ layerId }: Props) => {
           fontSize="sm"
         />
         <PromptOverlayButtonWrapper>
-          <RGLayerPromptDeleteButton layerId={layerId} polarity="negative" />
+          <RPLayerPromptDeleteButton layerId={layerId} polarity="negative" />
           <AddPromptTriggerButton isOpen={isOpen} onOpen={onOpen} />
         </PromptOverlayButtonWrapper>
       </Box>
@@ -55,4 +55,4 @@ export const RGLayerNegativePrompt = memo(({ layerId }: Props) => {
   );
 });
 
-RGLayerNegativePrompt.displayName = 'RGLayerNegativePrompt';
+RPLayerNegativePrompt.displayName = 'RPLayerNegativePrompt';

invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerPositivePrompt.tsx

@@ -1,12 +1,12 @@
 import { Box, Textarea } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
-import { RGLayerPromptDeleteButton } from 'features/controlLayers/components/RGLayerPromptDeleteButton';
-import { useLayerPositivePrompt } from 'features/controlLayers/hooks/layerStateHooks';
-import { maskLayerPositivePromptChanged } from 'features/controlLayers/store/controlLayersSlice';
 import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper';
 import { AddPromptTriggerButton } from 'features/prompt/AddPromptTriggerButton';
 import { PromptPopover } from 'features/prompt/PromptPopover';
 import { usePrompt } from 'features/prompt/usePrompt';
+import { RPLayerPromptDeleteButton } from 'features/regionalPrompts/components/RPLayerPromptDeleteButton';
+import { useLayerPositivePrompt } from 'features/regionalPrompts/hooks/layerStateHooks';
+import { maskLayerPositivePromptChanged } from 'features/regionalPrompts/store/regionalPromptsSlice';
 import { memo, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -14,7 +14,7 @@ type Props = {
   layerId: string;
 };
 
-export const RGLayerPositivePrompt = memo(({ layerId }: Props) => {
+export const RPLayerPositivePrompt = memo(({ layerId }: Props) => {
   const prompt = useLayerPositivePrompt(layerId);
   const dispatch = useAppDispatch();
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -47,7 +47,7 @@ export const RGLayerPositivePrompt = memo(({ layerId }: Props) => {
           minH={28}
         />
         <PromptOverlayButtonWrapper>
-          <RGLayerPromptDeleteButton layerId={layerId} polarity="positive" />
+          <RPLayerPromptDeleteButton layerId={layerId} polarity="positive" />
           <AddPromptTriggerButton isOpen={isOpen} onOpen={onOpen} />
         </PromptOverlayButtonWrapper>
       </Box>
@@ -55,4 +55,4 @@ export const RGLayerPositivePrompt = memo(({ layerId }: Props) => {
   );
 });
 
-RGLayerPositivePrompt.displayName = 'RGLayerPositivePrompt';
+RPLayerPositivePrompt.displayName = 'RPLayerPositivePrompt';