From 6057229cebc4a164a1c898dd769ba53e7ea417c2 Mon Sep 17 00:00:00 2001
From: Brandon Rising <contact@brandonrising.com>
Date: Mon, 22 Jan 2024 11:22:33 -0500
Subject: [PATCH 001/133] Github action for ensuring PRs are labeled in a way
 that makes it easy to distinguish what's being changed

---
 .github/pr_labels.yml          | 40 ++++++++++++++++++++++++++++++++++
 .github/workflows/label-pr.yml | 16 ++++++++++++++
 2 files changed, 56 insertions(+)
 create mode 100644 .github/pr_labels.yml
 create mode 100644 .github/workflows/label-pr.yml

diff --git a/.github/pr_labels.yml b/.github/pr_labels.yml
new file mode 100644
index 0000000000..802c6dd0e1
--- /dev/null
+++ b/.github/pr_labels.yml
@@ -0,0 +1,40 @@
+Root:
+- changed-files:
+  - any-glob-to-any-file: '*'
+
+PythonDeps:
+- changed-files:
+  - any-glob-to-any-file: 'pyproject.toml'
+
+Python:
+- changed-files:
+  - any-glob-to-any-file: 
+    - 'invokeai/**'
+    - '!invokeai/frontend/web/**'
+    - 'tests/**'
+
+Invocations:
+- changed-files:
+  - any-glob-to-any-file: 'invokeai/app/invocations/**'
+
+Backend:
+- changed-files:
+  - any-glob-to-any-file: 'invokeai/backend/**'
+
+Api:
+- changed-files:
+  - any-glob-to-any-file: 'invokeai/app/api/**'
+
+Services:
+- changed-files:
+  - any-glob-to-any-file: 'invokeai/app/services/**'
+
+FrontendDeps:
+- changed-files:
+  - any-glob-to-any-file:
+    - '**/*/package.json'
+    - '**/*/pnpm-lock.yaml'
+
+Frontend:
+- changed-files:
+  - any-glob-to-any-file: 'invokeai/frontend/web/**'
diff --git a/.github/workflows/label-pr.yml b/.github/workflows/label-pr.yml
new file mode 100644
index 0000000000..bc14e2f2c8
--- /dev/null
+++ b/.github/workflows/label-pr.yml
@@ -0,0 +1,16 @@
+name: "Pull Request Labeler"
+on:
+- pull_request_target
+
+jobs:
+  labeler:
+    permissions:
+      contents: read
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - uses: actions/labeler@v5
+        with:
+          configuration-path: .github/pr_labels.yml
\ No newline at end of file

From 4caf63d53d198dae2ca313ca00988970156d054c Mon Sep 17 00:00:00 2001
From: Brandon Rising <brandon@invoke.ai>
Date: Mon, 22 Jan 2024 15:08:11 -0500
Subject: [PATCH 002/133] Added a few more labels

---
 .github/pr_labels.yml | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/.github/pr_labels.yml b/.github/pr_labels.yml
index 802c6dd0e1..f23fcee9f3 100644
--- a/.github/pr_labels.yml
+++ b/.github/pr_labels.yml
@@ -13,6 +13,22 @@ Python:
     - '!invokeai/frontend/web/**'
     - 'tests/**'
 
+CICD:
+- changed-files:
+  - any-glob-to-any-file: .github/**
+
+Docker:
+- changed-files:
+  - any-glob-to-any-file: docker/**
+
+Installer:
+- changed-files:
+  - any-glob-to-any-file: installer/**
+
+Documentation:
+- changed-files:
+  - any-glob-to-any-file: docs/**
+
 Invocations:
 - changed-files:
   - any-glob-to-any-file: 'invokeai/app/invocations/**'

From b94f6a4a296bffd6b43b45d65d9487f4f15ed9f0 Mon Sep 17 00:00:00 2001
From: Brandon Rising <brandon@invoke.ai>
Date: Mon, 22 Jan 2024 15:14:02 -0500
Subject: [PATCH 003/133] Fix python label, add test label

---
 .github/pr_labels.yml | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/.github/pr_labels.yml b/.github/pr_labels.yml
index f23fcee9f3..9580ccb0be 100644
--- a/.github/pr_labels.yml
+++ b/.github/pr_labels.yml
@@ -8,10 +8,13 @@ PythonDeps:
 
 Python:
 - changed-files:
-  - any-glob-to-any-file: 
+  - all-globs-to-any-file: 
     - 'invokeai/**'
     - '!invokeai/frontend/web/**'
-    - 'tests/**'
+
+PythonTests:
+- changed-files:
+  - any-glob-to-any-file: 'tests/**'
 
 CICD:
 - changed-files:

From 099d516ac01fc839a5ea07ffbe1650ed163eeafc Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 11 Jan 2024 22:40:57 +1100
Subject: [PATCH 004/133] docs(ui): update README

---
 invokeai/frontend/web/docs/README.md | 131 +++++++++------------------
 1 file changed, 44 insertions(+), 87 deletions(-)

diff --git a/invokeai/frontend/web/docs/README.md b/invokeai/frontend/web/docs/README.md
index a8f8b7e7b0..138aded3ab 100644
--- a/invokeai/frontend/web/docs/README.md
+++ b/invokeai/frontend/web/docs/README.md
@@ -1,79 +1,51 @@
-# InvokeAI Web UI
+# Invoke UI
 
 <!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->
 
 <!-- code_chunk_output -->
 
-- [InvokeAI Web UI](#invokeai-web-ui)
+- [Invoke UI](#invoke-ui)
   - [Core Libraries](#core-libraries)
-    - [Redux Toolkit](#redux-toolkit)
-    - [Socket\.IO](#socketio)
-    - [Chakra UI](#chakra-ui)
-    - [KonvaJS](#konvajs)
-    - [Vite](#vite)
-    - [i18next & Weblate](#i18next--weblate)
-    - [openapi-typescript](#openapi-typescript)
-    - [reactflow](#reactflow)
-    - [zod](#zod)
-  - [Client Types Generation](#client-types-generation)
   - [Package Scripts](#package-scripts)
+    - [Client Types Generation](#client-types-generation)
   - [Contributing](#contributing)
+    - [Localization](#localization)
     - [Dev Environment](#dev-environment)
-      - [VSCode Remote Dev](#vscode-remote-dev)
-    - [Production builds](#production-builds)
+    - [VSCode Remote Dev](#vscode-remote-dev)
 
 <!-- /code_chunk_output -->
 
-The UI is a fairly straightforward Typescript React app.
-
 ## Core Libraries
 
-InvokeAI's UI is made possible by a number of excellent open-source libraries. The most heavily-used are listed below, but there are many others.
+Invoke's UI is made possible by a number of excellent open-source libraries. The most heavily-used are listed below, but there are many others.
 
-### Redux Toolkit
+- [Redux Toolkit]
+- [redux-remember]
+- [Socket.IO]
+- [Chakra UI]
+- [KonvaJS]
+- [Vite]
+- [openapi-typescript]
+- [reactflow]
+- [zod]
 
-[Redux Toolkit] is used for state management and fetching/caching:
+## Package Scripts
 
-- `RTK-Query` for data fetching and caching
-- `createAsyncThunk` for a couple other HTTP requests
-- `createEntityAdapter` to normalize things like images and models
-- `createListenerMiddleware` for async workflows
+See `package.json` for all scripts.
 
-We use [redux-remember] for persistence.
+Run with `pnpm <script name>`.
 
-### Socket\.IO
+- `dev`: run the frontend in dev mode, enabling hot reloading
+- `build`: run all checks (madge, eslint, prettier, tsc) and then build the frontend
+- `typegen`: generate types from the OpenAPI schema (see [Client Types Generation])
+- `lint:madge`: check frontend for circular dependencies
+- `lint:eslint`: check frontend for code quality
+- `lint:prettier`: check frontend for code formatting
+- `lint:tsc`: check frontend for type issues
+- `lint`: run all checks concurrently
+- `fix`: run `eslint` and `prettier`, fixing fixable issues
 
-[Socket.IO] is used for server-to-client events, like generation process and queue state changes.
-
-### Chakra UI
-
-[Chakra UI] is our primary UI library, but we also use a few components from [Mantine v6].
-
-### KonvaJS
-
-[KonvaJS] powers the canvas. In the future, we'd like to explore [PixiJS] or WebGPU.
-
-### Vite
-
-[Vite] is our bundler.
-
-### i18next & Weblate
-
-We use [i18next] for localization, but translation to languages other than English happens on our [Weblate] project. **Only the English source strings should be changed on this repo.**
-
-### openapi-typescript
-
-[openapi-typescript] is used to generate types from the server's OpenAPI schema. See TYPES_CODEGEN.md.
-
-### reactflow
-
-[reactflow] powers the Workflow Editor.
-
-### zod
-
-[zod] schemas are used to model data structures and provide runtime validation.
-
-## Client Types Generation
+### Client Types Generation
 
 We use [openapi-typescript] to generate types from the app's OpenAPI schema.
 
@@ -88,28 +60,18 @@ python scripts/invokeai-web.py
 pnpm typegen
 ```
 
-## Package Scripts
-
-See `package.json` for all scripts.
-
-Run with `pnpm <script name>`.
-
-- `dev`: run the frontend in dev mode, enabling hot reloading
-- `build`: run all checks (madge, eslint, prettier, tsc) and then build the frontend
-- `typegen`: generate types from the OpenAPI schema (see [Client Types Generation](#client-types-generation))
-- `lint:madge`: check frontend for circular dependencies
-- `lint:eslint`: check frontend for code quality
-- `lint:prettier`: check frontend for code formatting
-- `lint:tsc`: check frontend for type issues
-- `lint`: run all checks concurrently
-- `fix`: run `eslint` and `prettier`, fixing fixable issues
-
 ## Contributing
 
-Thanks for your interest in contributing to the InvokeAI Web UI!
+Thanks for your interest in contributing to the Invoke Web UI!
 
 We encourage you to ping @psychedelicious and @blessedcoolant on [discord] if you want to contribute, just to touch base and ensure your work doesn't conflict with anything else going on. The project is very active.
 
+### Localization
+
+We use [i18next] for localization, but translation to languages other than English happens on our [Weblate] project.
+
+**Only the English source strings should be changed on this repo.**
+
 ### Dev Environment
 
 Install [node] and [pnpm].
@@ -118,23 +80,19 @@ From `invokeai/frontend/web/` run `pnpm i` to get everything set up.
 
 Start everything in dev mode:
 
-1. Start the dev server: `pnpm dev`
-2. Start the InvokeAI Nodes backend: `python scripts/invokeai-web.py # run from the repo root`
+1. From `invokeai/frontend/web/`: `pnpm dev`
+2. From repo root: `python scripts/invokeai-web.py`
 3. Point your browser to the dev server address e.g. <http://localhost:5173/>
 
-#### VSCode Remote Dev
+### VSCode Remote Dev
 
-We've noticed an intermittent issue with the VSCode Remote Dev port forwarding. If you use this feature of VSCode, you may intermittently click the Invoke button and then get nothing until the request times out. Suggest disabling the IDE's port forwarding feature and doing it manually via SSH:
+We've noticed an intermittent issue with the VSCode Remote Dev port forwarding. If you use this feature of VSCode, you may intermittently click the Invoke button and then get nothing until the request times out.
 
-`ssh -L 9090:localhost:9090 -L 5173:localhost:5173 user@host`
+We suggest disabling the IDE's port forwarding feature and doing it manually via SSH:
 
-### Production builds
-
-For a number of technical and logistical reasons, we need to commit UI build artefacts to the repo.
-
-If you submit a PR, there is a good chance we will ask you to include a separate commit with a build of the app.
-
-To build for production, run `pnpm build`.
+```sh
+ssh -L 9090:localhost:9090 -L 5173:localhost:5173 user@host
+```
 
 [node]: https://nodejs.org/en/download/
 [pnpm]: https://github.com/pnpm/pnpm
@@ -143,12 +101,11 @@ To build for production, run `pnpm build`.
 [redux-remember]: https://github.com/zewish/redux-remember
 [Socket.IO]: https://github.com/socketio/socket.io
 [Chakra UI]: https://github.com/chakra-ui/chakra-ui
-[Mantine v6]: https://v6.mantine.dev/
 [KonvaJS]: https://github.com/konvajs/react-konva
-[PixiJS]: https://github.com/pixijs/pixijs
 [Vite]: https://github.com/vitejs/vite
 [i18next]: https://github.com/i18next/react-i18next
 [Weblate]: https://hosted.weblate.org/engage/invokeai/
 [openapi-typescript]: https://github.com/drwpow/openapi-typescript
 [reactflow]: https://github.com/xyflow/xyflow
 [zod]: https://github.com/colinhacks/zod
+[Client Types Generation]: #client-types-generation

From 7e0713c86981ba33600f67c1e26d943a751b9d46 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 15 Jan 2024 08:47:19 +1100
Subject: [PATCH 005/133] docs(ui): fix typo

---
 invokeai/frontend/web/docs/WORKFLOWS_DESIGN_IMPLEMENTATION.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/docs/WORKFLOWS_DESIGN_IMPLEMENTATION.md b/invokeai/frontend/web/docs/WORKFLOWS_DESIGN_IMPLEMENTATION.md
index 77d24206f6..d16b4b638b 100644
--- a/invokeai/frontend/web/docs/WORKFLOWS_DESIGN_IMPLEMENTATION.md
+++ b/invokeai/frontend/web/docs/WORKFLOWS_DESIGN_IMPLEMENTATION.md
@@ -23,7 +23,7 @@
         - [Primitive Types](#primitive-types)
         - [Complex Types](#complex-types)
         - [Collection Types](#collection-types)
-        - [Polymorphic Types](#polymorphic-types)
+        - [Collection or Scalar Types](#collection-or-scalar-types)
         - [Optional Fields](#optional-fields)
       - [Building Field Input Templates](#building-field-input-templates)
       - [Building Field Output Templates](#building-field-output-templates)

From 5e4daf4bc6a5b6cc12649ce0a6b34b1ed4f415bc Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 15 Jan 2024 08:50:59 +1100
Subject: [PATCH 006/133] docs: remove separate frontend docs and link to repo

The frontend docs should just be in the frontend. This is a standard practice for monorepos with developer information for specific packages within the monorepo.
---
 .../contributingToFrontend.md                 | 76 -------------------
 .../contribution_guides/development.md        |  2 +-
 2 files changed, 1 insertion(+), 77 deletions(-)
 delete mode 100644 docs/contributing/contribution_guides/contributingToFrontend.md

diff --git a/docs/contributing/contribution_guides/contributingToFrontend.md b/docs/contributing/contribution_guides/contributingToFrontend.md
deleted file mode 100644
index b485fb9a8d..0000000000
--- a/docs/contributing/contribution_guides/contributingToFrontend.md
+++ /dev/null
@@ -1,76 +0,0 @@
-# Contributing to the Frontend
-
-# InvokeAI Web UI
-
-- [InvokeAI Web UI](https://github.com/invoke-ai/InvokeAI/tree/main/invokeai/frontend/web/docs#invokeai-web-ui)
-    - [Stack](https://github.com/invoke-ai/InvokeAI/tree/main/invokeai/frontend/web/docs#stack)
-    - [Contributing](https://github.com/invoke-ai/InvokeAI/tree/main/invokeai/frontend/web/docs#contributing)
-        - [Dev Environment](https://github.com/invoke-ai/InvokeAI/tree/main/invokeai/frontend/web/docs#dev-environment)
-        - [Production builds](https://github.com/invoke-ai/InvokeAI/tree/main/invokeai/frontend/web/docs#production-builds)
-
-The UI is a fairly straightforward Typescript React app, with the Unified Canvas being more complex.
-
-Code is located in `invokeai/frontend/web/` for review.
-
-## Stack
-
-State management is Redux via [Redux Toolkit](https://github.com/reduxjs/redux-toolkit). We lean heavily on RTK:
-
-- `createAsyncThunk` for HTTP requests
-- `createEntityAdapter` for fetching images and models
-- `createListenerMiddleware` for workflows
-
-The API client and associated types are generated from the OpenAPI schema. See API_CLIENT.md.
-
-Communication with server is a mix of HTTP and [socket.io](https://github.com/socketio/socket.io-client) (with a simple socket.io redux middleware to help).
-
-[Chakra-UI](https://github.com/chakra-ui/chakra-ui) & [Mantine](https://github.com/mantinedev/mantine) for components and styling.
-
-[Konva](https://github.com/konvajs/react-konva) for the canvas, but we are pushing the limits of what is feasible with it (and HTML canvas in general). We plan to rebuild it with [PixiJS](https://github.com/pixijs/pixijs) to take advantage of WebGL's improved raster handling.
-
-[Vite](https://vitejs.dev/) for bundling.
-
-Localisation is via [i18next](https://github.com/i18next/react-i18next), but translation happens on our [Weblate](https://hosted.weblate.org/engage/invokeai/) project. Only the English source strings should be changed on this repo.
-
-## Contributing
-
-Thanks for your interest in contributing to the InvokeAI Web UI!
-
-We encourage you to ping @psychedelicious and @blessedcoolant on [Discord](https://discord.gg/ZmtBAhwWhy) if you want to contribute, just to touch base and ensure your work doesn't conflict with anything else going on. The project is very active.
-
-### Dev Environment
-
-**Setup** 
-
-1. Install [node](https://nodejs.org/en/download/). You can confirm node is installed with:
-```bash
-node --version
-```
-
-2. Install [pnpm](https://pnpm.io/) and confirm it is installed by running this:
-```bash
-npm install --global pnpm
-pnpm --version
-```
-
-From `invokeai/frontend/web/` run `pnpm install` to get everything set up.
-
-Start everything in dev mode:
-1. Ensure your virtual environment is running
-2. Start the dev server: `pnpm dev`
-3. Start the InvokeAI Nodes backend: `python scripts/invokeai-web.py # run from the repo root`
-4. Point your browser to the dev server address e.g. [http://localhost:5173/](http://localhost:5173/)
-
-### VSCode Remote Dev
-
-We've noticed an intermittent issue with the VSCode Remote Dev port forwarding. If you use this feature of VSCode, you may intermittently click the Invoke button and then get nothing until the request times out. Suggest disabling the IDE's port forwarding feature and doing it manually via SSH:
-
-`ssh -L 9090:localhost:9090 -L 5173:localhost:5173 user@host`
-
-### Production builds
-
-For a number of technical and logistical reasons, we need to commit UI build artefacts to the repo.
-
-If you submit a PR, there is a good chance we will ask you to include a separate commit with a build of the app.
-
-To build for production, run `pnpm build`.
diff --git a/docs/contributing/contribution_guides/development.md b/docs/contributing/contribution_guides/development.md
index 2f50d7f579..092d2acae3 100644
--- a/docs/contributing/contribution_guides/development.md
+++ b/docs/contributing/contribution_guides/development.md
@@ -12,7 +12,7 @@ To get started, take a look at our [new contributors checklist](newContributorCh
 Once you're setup, for more information, you can review the documentation specific to your area of interest:
 
 * #### [InvokeAI Architecure](../ARCHITECTURE.md)
-* #### [Frontend Documentation](./contributingToFrontend.md)
+* #### [Frontend Documentation](https://github.com/invoke-ai/InvokeAI/tree/main/invokeai/frontend/web)
 * #### [Node Documentation](../INVOCATIONS.md)
 * #### [Local Development](../LOCAL_DEVELOPMENT.md)
 

From 653b820da1fec697fb1edb12fa8574942e0e709b Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 23 Jan 2024 18:40:26 +1100
Subject: [PATCH 007/133] tidy(ui): clearer variable names in modelSelected
 listener

---
 .../listenerMiddleware/listeners/modelSelected.ts      | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelSelected.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelSelected.ts
index 67a85cdc14..fae6925ad5 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelSelected.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelSelected.ts
@@ -36,9 +36,9 @@ export const addModelSelectedListener = () => {
 
       const newModel = result.data;
 
-      const { base_model } = newModel;
+      const newBaseModel = newModel.base_model;
       const didBaseModelChange =
-        state.generation.model?.base_model !== base_model;
+        state.generation.model?.base_model !== newBaseModel;
 
       if (didBaseModelChange) {
         // we may need to reset some incompatible submodels
@@ -46,7 +46,7 @@ export const addModelSelectedListener = () => {
 
         // handle incompatible loras
         forEach(state.lora.loras, (lora, id) => {
-          if (lora.base_model !== base_model) {
+          if (lora.base_model !== newBaseModel) {
             dispatch(loraRemoved(id));
             modelsCleared += 1;
           }
@@ -54,14 +54,14 @@ export const addModelSelectedListener = () => {
 
         // handle incompatible vae
         const { vae } = state.generation;
-        if (vae && vae.base_model !== base_model) {
+        if (vae && vae.base_model !== newBaseModel) {
           dispatch(vaeSelected(null));
           modelsCleared += 1;
         }
 
         // handle incompatible controlnets
         selectControlAdapterAll(state.controlAdapters).forEach((ca) => {
-          if (ca.model?.base_model !== base_model) {
+          if (ca.model?.base_model !== newBaseModel) {
             dispatch(
               controlAdapterIsEnabledChanged({ id: ca.id, isEnabled: false })
             );

From 022b32c7249ed7d09ac6956b5d33d203dd66f80f Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 23 Jan 2024 18:41:14 +1100
Subject: [PATCH 008/133] fix(ui): reset clip skip to 0 if new model is sdxl

Clip skip wasn't actually used in SDXL graphs so enabling it didn't do anything, just a UI quirk.

Closes #5508
---
 .../src/features/parameters/store/generationSlice.ts  | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts b/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts
index 1a27aa2fd7..f9f61c074f 100644
--- a/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts
+++ b/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts
@@ -175,8 +175,15 @@ export const generationSlice = createSlice({
         }
 
         // Clamp ClipSkip Based On Selected Model
-        const { maxClip } = CLIP_SKIP_MAP[newModel.base_model];
-        state.clipSkip = clamp(state.clipSkip, 0, maxClip);
+        // TODO(psyche): remove this special handling when https://github.com/invoke-ai/InvokeAI/issues/4583 is resolved
+        // WIP PR here: https://github.com/invoke-ai/InvokeAI/pull/4624
+        if (newModel.base_model === 'sdxl') {
+          // We don't support clip skip for SDXL yet - it's not in the graphs
+          state.clipSkip = 0;
+        } else {
+          const { maxClip } = CLIP_SKIP_MAP[newModel.base_model];
+          state.clipSkip = clamp(state.clipSkip, 0, maxClip);
+        }
 
         if (action.meta.previousModel?.base_model === newModel.base_model) {
           // The base model hasn't changed, we don't need to optimize the size

From b76d2cd7160ea97213c204eb61d20845117a88f8 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 23 Jan 2024 18:58:30 +1100
Subject: [PATCH 009/133] fix(ui): handle base model compat when recalling
 parameters

We had a one-behind issue with recalling metadata items that had a model.

For example, when recalling LoRAs, we check against the current main model to decide whether or not the requested LoRA is compatible and may be recalled.

When recalling all params, we are often also recalling the main model, but the compat logic didn't compare against this new main model.

The logic is updated to check against the new main model, if one is being set.

Closes #5512
---
 .../parameters/hooks/useRecallParameters.ts   | 53 ++++++++++++-------
 1 file changed, 33 insertions(+), 20 deletions(-)

diff --git a/invokeai/frontend/web/src/features/parameters/hooks/useRecallParameters.ts b/invokeai/frontend/web/src/features/parameters/hooks/useRecallParameters.ts
index b55ff546f1..d25c3aea77 100644
--- a/invokeai/frontend/web/src/features/parameters/hooks/useRecallParameters.ts
+++ b/invokeai/frontend/web/src/features/parameters/hooks/useRecallParameters.ts
@@ -47,6 +47,7 @@ import {
   vaeSelected,
   widthChanged,
 } from 'features/parameters/store/generationSlice';
+import type { ParameterModel } from 'features/parameters/types/parameterSchemas';
 import {
   isParameterCFGRescaleMultiplier,
   isParameterCFGScale,
@@ -480,7 +481,7 @@ export const useRecallParameters = () => {
   const { data: loraModels } = useGetLoRAModelsQuery(undefined);
 
   const prepareLoRAMetadataItem = useCallback(
-    (loraMetadataItem: LoRAMetadataItem) => {
+    (loraMetadataItem: LoRAMetadataItem, newModel?: ParameterModel) => {
       if (!isParameterLoRAModel(loraMetadataItem.lora)) {
         return { lora: null, error: 'Invalid LoRA model' };
       }
@@ -499,7 +500,7 @@ export const useRecallParameters = () => {
       }
 
       const isCompatibleBaseModel =
-        matchingLoRA?.base_model === model?.base_model;
+        matchingLoRA?.base_model === (newModel ?? model)?.base_model;
 
       if (!isCompatibleBaseModel) {
         return {
@@ -510,7 +511,7 @@ export const useRecallParameters = () => {
 
       return { lora: matchingLoRA, error: null };
     },
-    [loraModels, model?.base_model]
+    [loraModels, model]
   );
 
   const recallLoRA = useCallback(
@@ -538,7 +539,10 @@ export const useRecallParameters = () => {
   const { data: controlNetModels } = useGetControlNetModelsQuery(undefined);
 
   const prepareControlNetMetadataItem = useCallback(
-    (controlnetMetadataItem: ControlNetMetadataItem) => {
+    (
+      controlnetMetadataItem: ControlNetMetadataItem,
+      newModel?: ParameterModel
+    ) => {
       if (!isParameterControlNetModel(controlnetMetadataItem.control_model)) {
         return { controlnet: null, error: 'Invalid ControlNet model' };
       }
@@ -565,7 +569,7 @@ export const useRecallParameters = () => {
       }
 
       const isCompatibleBaseModel =
-        matchingControlNetModel?.base_model === model?.base_model;
+        matchingControlNetModel?.base_model === (newModel ?? model)?.base_model;
 
       if (!isCompatibleBaseModel) {
         return {
@@ -600,7 +604,7 @@ export const useRecallParameters = () => {
 
       return { controlnet, error: null };
     },
-    [controlNetModels, model?.base_model]
+    [controlNetModels, model]
   );
 
   const recallControlNet = useCallback(
@@ -631,7 +635,10 @@ export const useRecallParameters = () => {
   const { data: t2iAdapterModels } = useGetT2IAdapterModelsQuery(undefined);
 
   const prepareT2IAdapterMetadataItem = useCallback(
-    (t2iAdapterMetadataItem: T2IAdapterMetadataItem) => {
+    (
+      t2iAdapterMetadataItem: T2IAdapterMetadataItem,
+      newModel?: ParameterModel
+    ) => {
       if (
         !isParameterControlNetModel(t2iAdapterMetadataItem.t2i_adapter_model)
       ) {
@@ -659,7 +666,7 @@ export const useRecallParameters = () => {
       }
 
       const isCompatibleBaseModel =
-        matchingT2IAdapterModel?.base_model === model?.base_model;
+        matchingT2IAdapterModel?.base_model === (newModel ?? model)?.base_model;
 
       if (!isCompatibleBaseModel) {
         return {
@@ -690,7 +697,7 @@ export const useRecallParameters = () => {
 
       return { t2iAdapter, error: null };
     },
-    [model?.base_model, t2iAdapterModels]
+    [model, t2iAdapterModels]
   );
 
   const recallT2IAdapter = useCallback(
@@ -721,7 +728,10 @@ export const useRecallParameters = () => {
   const { data: ipAdapterModels } = useGetIPAdapterModelsQuery(undefined);
 
   const prepareIPAdapterMetadataItem = useCallback(
-    (ipAdapterMetadataItem: IPAdapterMetadataItem) => {
+    (
+      ipAdapterMetadataItem: IPAdapterMetadataItem,
+      newModel?: ParameterModel
+    ) => {
       if (!isParameterIPAdapterModel(ipAdapterMetadataItem?.ip_adapter_model)) {
         return { ipAdapter: null, error: 'Invalid IP Adapter model' };
       }
@@ -746,7 +756,7 @@ export const useRecallParameters = () => {
       }
 
       const isCompatibleBaseModel =
-        matchingIPAdapterModel?.base_model === model?.base_model;
+        matchingIPAdapterModel?.base_model === (newModel ?? model)?.base_model;
 
       if (!isCompatibleBaseModel) {
         return {
@@ -768,7 +778,7 @@ export const useRecallParameters = () => {
 
       return { ipAdapter, error: null };
     },
-    [ipAdapterModels, model?.base_model]
+    [ipAdapterModels, model]
   );
 
   const recallIPAdapter = useCallback(
@@ -840,6 +850,13 @@ export const useRecallParameters = () => {
         t2iAdapters,
       } = metadata;
 
+      let newModel: ParameterModel | undefined = undefined;
+
+      if (isParameterModel(model)) {
+        newModel = model;
+        dispatch(modelSelected(model));
+      }
+
       if (isParameterCFGScale(cfg_scale)) {
         dispatch(setCfgScale(cfg_scale));
       }
@@ -848,10 +865,6 @@ export const useRecallParameters = () => {
         dispatch(setCfgRescaleMultiplier(cfg_rescale_multiplier));
       }
 
-      if (isParameterModel(model)) {
-        dispatch(modelSelected(model));
-      }
-
       if (isParameterPositivePrompt(positive_prompt)) {
         dispatch(setPositivePrompt(positive_prompt));
       }
@@ -953,7 +966,7 @@ export const useRecallParameters = () => {
 
       dispatch(lorasCleared());
       loras?.forEach((lora) => {
-        const result = prepareLoRAMetadataItem(lora);
+        const result = prepareLoRAMetadataItem(lora, newModel);
         if (result.lora) {
           dispatch(loraRecalled({ ...result.lora, weight: lora.weight }));
         }
@@ -961,21 +974,21 @@ export const useRecallParameters = () => {
 
       dispatch(controlAdaptersReset());
       controlnets?.forEach((controlnet) => {
-        const result = prepareControlNetMetadataItem(controlnet);
+        const result = prepareControlNetMetadataItem(controlnet, newModel);
         if (result.controlnet) {
           dispatch(controlAdapterRecalled(result.controlnet));
         }
       });
 
       ipAdapters?.forEach((ipAdapter) => {
-        const result = prepareIPAdapterMetadataItem(ipAdapter);
+        const result = prepareIPAdapterMetadataItem(ipAdapter, newModel);
         if (result.ipAdapter) {
           dispatch(controlAdapterRecalled(result.ipAdapter));
         }
       });
 
       t2iAdapters?.forEach((t2iAdapter) => {
-        const result = prepareT2IAdapterMetadataItem(t2iAdapter);
+        const result = prepareT2IAdapterMetadataItem(t2iAdapter, newModel);
         if (result.t2iAdapter) {
           dispatch(controlAdapterRecalled(result.t2iAdapter));
         }

From 504bdac14a8a42b325a574cebaa316889fc614ec Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 23 Jan 2024 19:26:05 +1100
Subject: [PATCH 010/133] tidy(ui): remove unused state from uiSlice

---
 invokeai/frontend/web/src/features/ui/store/uiSlice.ts | 8 --------
 invokeai/frontend/web/src/features/ui/store/uiTypes.ts | 1 -
 2 files changed, 9 deletions(-)

diff --git a/invokeai/frontend/web/src/features/ui/store/uiSlice.ts b/invokeai/frontend/web/src/features/ui/store/uiSlice.ts
index f39dbd4758..57b725ed06 100644
--- a/invokeai/frontend/web/src/features/ui/store/uiSlice.ts
+++ b/invokeai/frontend/web/src/features/ui/store/uiSlice.ts
@@ -10,7 +10,6 @@ export const initialUIState: UIState = {
   _version: 1,
   activeTab: 'txt2img',
   shouldShowImageDetails: false,
-  shouldShowExistingModelsInSearch: false,
   shouldHidePreview: false,
   shouldShowProgressInViewer: true,
   panels: {},
@@ -29,12 +28,6 @@ export const uiSlice = createSlice({
     setShouldHidePreview: (state, action: PayloadAction<boolean>) => {
       state.shouldHidePreview = action.payload;
     },
-    setShouldShowExistingModelsInSearch: (
-      state,
-      action: PayloadAction<boolean>
-    ) => {
-      state.shouldShowExistingModelsInSearch = action.payload;
-    },
     setShouldShowProgressInViewer: (state, action: PayloadAction<boolean>) => {
       state.shouldShowProgressInViewer = action.payload;
     },
@@ -55,7 +48,6 @@ export const uiSlice = createSlice({
 export const {
   setActiveTab,
   setShouldShowImageDetails,
-  setShouldShowExistingModelsInSearch,
   setShouldHidePreview,
   setShouldShowProgressInViewer,
   panelsChanged,
diff --git a/invokeai/frontend/web/src/features/ui/store/uiTypes.ts b/invokeai/frontend/web/src/features/ui/store/uiTypes.ts
index b0800c456e..60a96142e4 100644
--- a/invokeai/frontend/web/src/features/ui/store/uiTypes.ts
+++ b/invokeai/frontend/web/src/features/ui/store/uiTypes.ts
@@ -4,7 +4,6 @@ export interface UIState {
   _version: 1;
   activeTab: InvokeTabName;
   shouldShowImageDetails: boolean;
-  shouldShowExistingModelsInSearch: boolean;
   shouldHidePreview: boolean;
   shouldShowProgressInViewer: boolean;
   panels: Record<string, string>;

From e7e7793896f1b1d048374aced819d6847267c684 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 23 Jan 2024 19:31:20 +1100
Subject: [PATCH 011/133] feat(ui): remember open/closed state of
 accordions/expanders

---
 .../hooks/useExpanderToggle.ts                | 28 ++++++++--------
 .../hooks/useStandaloneAccordionToggle.ts     | 32 +++++++++++--------
 .../settingsAccordions/store/actions.ts       | 10 ------
 .../web/src/features/ui/store/uiSlice.ts      | 18 +++++++++++
 .../web/src/features/ui/store/uiTypes.ts      | 26 +++++++++++++++
 5 files changed, 78 insertions(+), 36 deletions(-)
 delete mode 100644 invokeai/frontend/web/src/features/settingsAccordions/store/actions.ts

diff --git a/invokeai/frontend/web/src/features/settingsAccordions/hooks/useExpanderToggle.ts b/invokeai/frontend/web/src/features/settingsAccordions/hooks/useExpanderToggle.ts
index 19aad55220..d065d7d8f9 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/hooks/useExpanderToggle.ts
+++ b/invokeai/frontend/web/src/features/settingsAccordions/hooks/useExpanderToggle.ts
@@ -1,23 +1,25 @@
-import { useDisclosure } from '@invoke-ai/ui';
-import { useAppDispatch } from 'app/store/storeHooks';
-import { expanderToggled } from 'features/settingsAccordions/store/actions';
-import { useCallback } from 'react';
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import {
+  expanderStateChanged,
+  selectUiSlice,
+} from 'features/ui/store/uiSlice';
+import { useCallback, useMemo } from 'react';
 
 type UseExpanderToggleArg = {
   defaultIsOpen: boolean;
-  id?: string;
+  id: string;
 };
 
 export const useExpanderToggle = (arg: UseExpanderToggleArg) => {
   const dispatch = useAppDispatch();
-  const { isOpen, onToggle: _onToggle } = useDisclosure({
-    defaultIsOpen: arg.defaultIsOpen,
-  });
+  const selectIsOpen = useMemo(
+    () => createSelector(selectUiSlice, (ui) => ui.expanders[arg.id] ?? arg.defaultIsOpen),
+    [arg]
+  );
+  const isOpen = useAppSelector(selectIsOpen);
   const onToggle = useCallback(() => {
-    if (arg.id) {
-      dispatch(expanderToggled({ id: arg.id, isOpen }));
-    }
-    _onToggle();
-  }, [_onToggle, dispatch, arg.id, isOpen]);
+    dispatch(expanderStateChanged({ id: arg.id, isOpen: !isOpen }));
+  }, [dispatch, arg.id, isOpen]);
   return { isOpen, onToggle };
 };
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/hooks/useStandaloneAccordionToggle.ts b/invokeai/frontend/web/src/features/settingsAccordions/hooks/useStandaloneAccordionToggle.ts
index 94a4aaefe3..d7a7ea0dc8 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/hooks/useStandaloneAccordionToggle.ts
+++ b/invokeai/frontend/web/src/features/settingsAccordions/hooks/useStandaloneAccordionToggle.ts
@@ -1,25 +1,31 @@
-import { useDisclosure } from '@invoke-ai/ui';
-import { useAppDispatch } from 'app/store/storeHooks';
-import { standaloneAccordionToggled } from 'features/settingsAccordions/store/actions';
-import { useCallback } from 'react';
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import {
+  accordionStateChanged,
+  selectUiSlice,
+} from 'features/ui/store/uiSlice';
+import { useCallback, useMemo } from 'react';
 
 type UseStandaloneAccordionToggleArg = {
   defaultIsOpen: boolean;
-  id?: string;
+  id: string;
 };
 
 export const useStandaloneAccordionToggle = (
   arg: UseStandaloneAccordionToggleArg
 ) => {
   const dispatch = useAppDispatch();
-  const { isOpen, onToggle: _onToggle } = useDisclosure({
-    defaultIsOpen: arg.defaultIsOpen,
-  });
+  const selectIsOpen = useMemo(
+    () =>
+      createSelector(
+        selectUiSlice,
+        (ui) => ui.accordions[arg.id] ?? arg.defaultIsOpen
+      ),
+    [arg]
+  );
+  const isOpen = useAppSelector(selectIsOpen);
   const onToggle = useCallback(() => {
-    if (arg.id) {
-      dispatch(standaloneAccordionToggled({ id: arg.id, isOpen }));
-    }
-    _onToggle();
-  }, [_onToggle, arg.id, dispatch, isOpen]);
+    dispatch(accordionStateChanged({ id: arg.id, isOpen: !isOpen }));
+  }, [arg.id, dispatch, isOpen]);
   return { isOpen, onToggle };
 };
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/store/actions.ts b/invokeai/frontend/web/src/features/settingsAccordions/store/actions.ts
deleted file mode 100644
index 8ce987168d..0000000000
--- a/invokeai/frontend/web/src/features/settingsAccordions/store/actions.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { createAction } from '@reduxjs/toolkit';
-
-export const expanderToggled = createAction<{ id: string; isOpen: boolean }>(
-  'parameters/expanderToggled'
-);
-
-export const standaloneAccordionToggled = createAction<{
-  id: string;
-  isOpen: boolean;
-}>('parameters/standaloneAccordionToggled');
diff --git a/invokeai/frontend/web/src/features/ui/store/uiSlice.ts b/invokeai/frontend/web/src/features/ui/store/uiSlice.ts
index 57b725ed06..71a26cb1f0 100644
--- a/invokeai/frontend/web/src/features/ui/store/uiSlice.ts
+++ b/invokeai/frontend/web/src/features/ui/store/uiSlice.ts
@@ -13,6 +13,8 @@ export const initialUIState: UIState = {
   shouldHidePreview: false,
   shouldShowProgressInViewer: true,
   panels: {},
+  accordions: {},
+  expanders: {},
 };
 
 export const uiSlice = createSlice({
@@ -37,6 +39,20 @@ export const uiSlice = createSlice({
     ) => {
       state.panels[action.payload.name] = action.payload.value;
     },
+    accordionStateChanged: (
+      state,
+      action: PayloadAction<{ id: string; isOpen: boolean }>
+    ) => {
+      const { id, isOpen } = action.payload; 
+      state.accordions[id] = isOpen;
+    },
+    expanderStateChanged: (
+      state,
+      action: PayloadAction<{ id: string; isOpen: boolean }>
+    ) => {
+      const { id, isOpen } = action.payload;
+      state.expanders[id] = isOpen;
+    },
   },
   extraReducers(builder) {
     builder.addCase(initialImageChanged, (state) => {
@@ -51,6 +67,8 @@ export const {
   setShouldHidePreview,
   setShouldShowProgressInViewer,
   panelsChanged,
+  accordionStateChanged,
+  expanderStateChanged,
 } = uiSlice.actions;
 
 export default uiSlice.reducer;
diff --git a/invokeai/frontend/web/src/features/ui/store/uiTypes.ts b/invokeai/frontend/web/src/features/ui/store/uiTypes.ts
index 60a96142e4..4e371090cf 100644
--- a/invokeai/frontend/web/src/features/ui/store/uiTypes.ts
+++ b/invokeai/frontend/web/src/features/ui/store/uiTypes.ts
@@ -1,10 +1,36 @@
 import type { InvokeTabName } from './tabMap';
 
 export interface UIState {
+  /**
+   * Slice schema version.
+   */
   _version: 1;
+  /**
+   * The currently active tab.
+   */
   activeTab: InvokeTabName;
+  /**
+   * Whether or not to show image details, e.g. metadata, workflow, etc.
+   */
   shouldShowImageDetails: boolean;
+  /**
+   * Whether or not to hide the preview.
+   */
   shouldHidePreview: boolean;
+  /**
+   * Whether or not to show progress in the viewer.
+   */
   shouldShowProgressInViewer: boolean;
+  /**
+   * The react-resizable-panels state. The shape is managed by react-resizable-panels.
+   */
   panels: Record<string, string>;
+  /**
+   * The state of accordions. The key is the id of the accordion, and the value is a boolean representing the open state.
+   */
+  accordions: Record<string, boolean>;
+  /**
+   * The state of expanders. The key is the id of the expander, and the value is a boolean representing the open state.
+   */
+  expanders: Record<string, boolean>;
 }

From b74e0de74a6dce1db3f319aa93180962ac473b47 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 23 Jan 2024 19:31:57 +1100
Subject: [PATCH 012/133] tidy(ui): remove unused state from uiSlice

---
 invokeai/frontend/web/src/features/ui/store/uiSlice.ts | 7 +------
 invokeai/frontend/web/src/features/ui/store/uiTypes.ts | 4 ----
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/invokeai/frontend/web/src/features/ui/store/uiSlice.ts b/invokeai/frontend/web/src/features/ui/store/uiSlice.ts
index 71a26cb1f0..51262b9b90 100644
--- a/invokeai/frontend/web/src/features/ui/store/uiSlice.ts
+++ b/invokeai/frontend/web/src/features/ui/store/uiSlice.ts
@@ -10,7 +10,6 @@ export const initialUIState: UIState = {
   _version: 1,
   activeTab: 'txt2img',
   shouldShowImageDetails: false,
-  shouldHidePreview: false,
   shouldShowProgressInViewer: true,
   panels: {},
   accordions: {},
@@ -27,9 +26,6 @@ export const uiSlice = createSlice({
     setShouldShowImageDetails: (state, action: PayloadAction<boolean>) => {
       state.shouldShowImageDetails = action.payload;
     },
-    setShouldHidePreview: (state, action: PayloadAction<boolean>) => {
-      state.shouldHidePreview = action.payload;
-    },
     setShouldShowProgressInViewer: (state, action: PayloadAction<boolean>) => {
       state.shouldShowProgressInViewer = action.payload;
     },
@@ -43,7 +39,7 @@ export const uiSlice = createSlice({
       state,
       action: PayloadAction<{ id: string; isOpen: boolean }>
     ) => {
-      const { id, isOpen } = action.payload; 
+      const { id, isOpen } = action.payload;
       state.accordions[id] = isOpen;
     },
     expanderStateChanged: (
@@ -64,7 +60,6 @@ export const uiSlice = createSlice({
 export const {
   setActiveTab,
   setShouldShowImageDetails,
-  setShouldHidePreview,
   setShouldShowProgressInViewer,
   panelsChanged,
   accordionStateChanged,
diff --git a/invokeai/frontend/web/src/features/ui/store/uiTypes.ts b/invokeai/frontend/web/src/features/ui/store/uiTypes.ts
index 4e371090cf..2cf9fd8aa6 100644
--- a/invokeai/frontend/web/src/features/ui/store/uiTypes.ts
+++ b/invokeai/frontend/web/src/features/ui/store/uiTypes.ts
@@ -13,10 +13,6 @@ export interface UIState {
    * Whether or not to show image details, e.g. metadata, workflow, etc.
    */
   shouldShowImageDetails: boolean;
-  /**
-   * Whether or not to hide the preview.
-   */
-  shouldHidePreview: boolean;
   /**
    * Whether or not to show progress in the viewer.
    */

From 3cbb1a7671ba37458eb850c333c1bbb32f3a3043 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 23 Jan 2024 19:50:07 +1100
Subject: [PATCH 013/133] chore(ui): bump @invoke-ai/ui

This includes a minor enhancement, increasing the contrast on tabs.
---
 invokeai/frontend/web/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/package.json b/invokeai/frontend/web/package.json
index 28dfd84fcf..641e13407e 100644
--- a/invokeai/frontend/web/package.json
+++ b/invokeai/frontend/web/package.json
@@ -66,7 +66,7 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@fontsource-variable/inter": "^5.0.16",
-    "@invoke-ai/ui": "0.0.10",
+    "@invoke-ai/ui": "0.0.11",
     "@mantine/form": "6.0.21",
     "@nanostores/react": "^0.7.1",
     "@reduxjs/toolkit": "2.0.1",

From 8bbdfc45fa403044cad951c3a65099f31da425a6 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 23 Jan 2024 19:51:19 +1100
Subject: [PATCH 014/133] fix(ui): increase size of control adapters advanced
 toggle button

---
 .../features/controlAdapters/components/ControlAdapterConfig.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx
index a878c19856..8496bde318 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx
@@ -131,6 +131,7 @@ const ControlAdapterConfig = (props: { id: string; number: number }) => {
           variant="ghost"
           icon={
             <ChevronUpIcon
+              boxSize={6}
               transform={isExpanded ? 'rotate(0deg)' : 'rotate(180deg)'}
               transitionProperty="common"
               transitionDuration="normal"

From 71f9ac99859c7f4ffa58a32b68bca4b707c1e3f0 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 23 Jan 2024 20:07:35 +1100
Subject: [PATCH 015/133] feat(ui): scollable areas support x-axis scrolling

 Closes #5490
---
 .../OverlayScrollbars/ScrollableContent.tsx   | 19 +++++++++++++++----
 .../components/OverlayScrollbars/constants.ts | 10 ++++++++++
 .../ImageMetadataViewer/DataViewer.tsx        | 11 +++++++++--
 .../components/QueueList/QueueItemDetail.tsx  |  5 +----
 4 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx b/invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx
index 2e4b61a0a5..b78fd3d3a6 100644
--- a/invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx
+++ b/invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx
@@ -1,24 +1,35 @@
 import type { ChakraProps } from '@invoke-ai/ui';
 import { Box, Flex } from '@invoke-ai/ui';
-import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
+import { getOverlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import type { CSSProperties, PropsWithChildren } from 'react';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 
 type Props = PropsWithChildren & {
   maxHeight?: ChakraProps['maxHeight'];
+  overflowX?: 'hidden' | 'scroll';
+  overflowY?: 'hidden' | 'scroll';
 };
 
 const styles: CSSProperties = { height: '100%', width: '100%' };
 
-const ScrollableContent = ({ children, maxHeight }: Props) => {
+const ScrollableContent = ({
+  children,
+  maxHeight,
+  overflowX = 'hidden',
+  overflowY = 'scroll',
+}: Props) => {
+  const overlayscrollbarsOptions = useMemo(
+    () => getOverlayScrollbarsParams(overflowX, overflowY).options,
+    [overflowX, overflowY]
+  );
   return (
     <Flex w="full" h="full" maxHeight={maxHeight} position="relative">
       <Box position="absolute" top={0} left={0} right={0} bottom={0}>
         <OverlayScrollbarsComponent
           defer
           style={styles}
-          options={overlayScrollbarsParams.options}
+          options={overlayscrollbarsOptions}
         >
           {children}
         </OverlayScrollbarsComponent>
diff --git a/invokeai/frontend/web/src/common/components/OverlayScrollbars/constants.ts b/invokeai/frontend/web/src/common/components/OverlayScrollbars/constants.ts
index fa6969b2ed..4ec4b5620d 100644
--- a/invokeai/frontend/web/src/common/components/OverlayScrollbars/constants.ts
+++ b/invokeai/frontend/web/src/common/components/OverlayScrollbars/constants.ts
@@ -1,3 +1,4 @@
+import { cloneDeep, merge } from 'lodash-es';
 import { ClickScrollPlugin, OverlayScrollbars } from 'overlayscrollbars';
 import type { UseOverlayScrollbarsParams } from 'overlayscrollbars-react';
 
@@ -16,3 +17,12 @@ export const overlayScrollbarsParams: UseOverlayScrollbarsParams = {
     overflow: { x: 'hidden' },
   },
 };
+
+export const getOverlayScrollbarsParams = (
+  overflowX: 'hidden' | 'scroll' = 'hidden',
+  overflowY: 'hidden' | 'scroll' = 'scroll'
+) => {
+  const params = cloneDeep(overlayScrollbarsParams);
+  merge(params, { options: { overflow: { y: overflowY, x: overflowX } } });
+  return params;
+};
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx
index 23c59f3af4..b8268c9676 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx
@@ -1,5 +1,7 @@
 import { Box, Flex, IconButton, Tooltip } from '@invoke-ai/ui';
-import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
+import {
+  getOverlayScrollbarsParams,
+} from 'common/components/OverlayScrollbars/constants';
 import { isString } from 'lodash-es';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import type { CSSProperties } from 'react';
@@ -15,6 +17,11 @@ type Props = {
   withCopy?: boolean;
 };
 
+const overlayscrollbarsOptions = getOverlayScrollbarsParams(
+  'scroll',
+  'scroll'
+).options;
+
 const DataViewer = (props: Props) => {
   const { label, data, fileName, withDownload = true, withCopy = true } = props;
   const dataString = useMemo(
@@ -60,7 +67,7 @@ const DataViewer = (props: Props) => {
         <OverlayScrollbarsComponent
           defer
           style={overlayScrollbarsStyles}
-          options={overlayScrollbarsParams.options}
+          options={overlayscrollbarsOptions}
         >
           <pre>{dataString}</pre>
         </OverlayScrollbarsComponent>
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx
index 0af1948c55..2401962e98 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx
@@ -6,7 +6,6 @@ import {
   Spinner,
   Text,
 } from '@invoke-ai/ui';
-import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import DataViewer from 'features/gallery/components/ImageMetadataViewer/DataViewer';
 import { useCancelBatch } from 'features/queue/hooks/useCancelBatch';
 import { useCancelQueueItem } from 'features/queue/hooks/useCancelQueueItem';
@@ -127,9 +126,7 @@ const QueueItemComponent = ({ queueItemDTO }: Props) => {
         justifyContent="center"
       >
         {queueItem ? (
-          <ScrollableContent>
-            <DataViewer label="Queue Item" data={queueItem} />
-          </ScrollableContent>
+          <DataViewer label="Queue Item" data={queueItem} />
         ) : (
           <Spinner opacity={0.5} />
         )}

From 2f656cc3573ac8e8af24b2dd68b1783659c80f6d Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 23 Jan 2024 21:40:18 +1100
Subject: [PATCH 016/133] fix(ui): fix field context menu jank

Closes #5551
---
 .../nodes/Invocation/fields/InputField.tsx    | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx
index 65ffbccb6f..0de87b8f58 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx
@@ -109,28 +109,28 @@ const InputField = ({ nodeId, fieldName }: Props) => {
 
   return (
     <InputFieldWrapper shouldDim={shouldDim}>
-      <FieldContextMenu nodeId={nodeId} fieldName={fieldName} kind="input">
-        {(ref) => (
-          <FormControl
-            ref={ref}
-            isInvalid={isMissingInput}
-            isDisabled={isConnected}
-            orientation="vertical"
-            px={2}
-          >
-            <Flex flexDir="column" w="full" gap={1}>
+      <FormControl
+        isInvalid={isMissingInput}
+        isDisabled={isConnected}
+        orientation="vertical"
+        px={2}
+      >
+        <Flex flexDir="column" w="full" gap={1}>
+          <FieldContextMenu nodeId={nodeId} fieldName={fieldName} kind="input">
+            {(ref) => (
               <EditableFieldTitle
+                ref={ref}
                 nodeId={nodeId}
                 fieldName={fieldName}
                 kind="input"
                 isMissingInput={isMissingInput}
                 withTooltip
               />
-              <InputFieldRenderer nodeId={nodeId} fieldName={fieldName} />
-            </Flex>
-          </FormControl>
-        )}
-      </FieldContextMenu>
+            )}
+          </FieldContextMenu>
+          <InputFieldRenderer nodeId={nodeId} fieldName={fieldName} />
+        </Flex>
+      </FormControl>
 
       {fieldTemplate.input !== 'direct' && (
         <FieldHandle

From a0187cc9df9233496b6692cb3778f8bab48a21e1 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 23 Jan 2024 22:39:01 +1100
Subject: [PATCH 017/133] fix(ui): remove unused import in storybook

---
 invokeai/frontend/web/.storybook/preview.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/invokeai/frontend/web/.storybook/preview.tsx b/invokeai/frontend/web/.storybook/preview.tsx
index 3d5c8d8493..791a48ab9e 100644
--- a/invokeai/frontend/web/.storybook/preview.tsx
+++ b/invokeai/frontend/web/.storybook/preview.tsx
@@ -6,7 +6,6 @@ import { Provider } from 'react-redux';
 import ThemeLocaleProvider from '../src/app/components/ThemeLocaleProvider';
 import { $baseUrl } from '../src/app/store/nanostores/baseUrl';
 import { createStore } from '../src/app/store/store';
-import { Container } from '@chakra-ui/react';
 // TODO: Disabled for IDE performance issues with our translation JSON
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore

From 1178fd8bd3bf35421cc69abc680b741041c62c9e Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 23 Jan 2024 22:40:05 +1100
Subject: [PATCH 018/133] fix(ui): fix styling of some form elements

---
 .../IAICanvasToolbar/IAICanvasMaskOptions.tsx |  67 +++++----
 .../IAICanvasSettingsButtonPopover.tsx        | 136 ++++++++++--------
 .../IAICanvasToolChooserOptions.tsx           |   2 +-
 .../components/GallerySettingsPopover.tsx     |  36 +++--
 4 files changed, 135 insertions(+), 106 deletions(-)

diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx
index 23cffc05a2..2e4fcccd85 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx
@@ -1,9 +1,12 @@
+import type { FormLabelProps } from '@invoke-ai/ui';
 import {
   Box,
   Button,
+  ButtonGroup,
   Checkbox,
   Flex,
   FormControl,
+  FormControlGroup,
   FormLabel,
   IconButton,
   Popover,
@@ -33,6 +36,10 @@ import {
   PiTrashSimpleFill,
 } from 'react-icons/pi';
 
+const formLabelProps: FormLabelProps = {
+  flexGrow: 1,
+};
+
 const IAICanvasMaskOptions = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
@@ -124,40 +131,44 @@ const IAICanvasMaskOptions = () => {
       <PopoverContent>
         <PopoverBody>
           <Flex direction="column" gap={2}>
-            <FormControl>
-              <FormLabel>{`${t('unifiedCanvas.enableMask')} (H)`}</FormLabel>
-              <Checkbox
-                isChecked={isMaskEnabled}
-                onChange={handleToggleEnableMask}
-              />
-            </FormControl>
-            <FormControl>
-              <FormLabel>{t('unifiedCanvas.preserveMaskedArea')}</FormLabel>
-              <Checkbox
-                isChecked={shouldPreserveMaskedArea}
-                onChange={handleChangePreserveMaskedArea}
-              />
-            </FormControl>
+            <FormControlGroup formLabelProps={formLabelProps}>
+              <FormControl>
+                <FormLabel>{`${t('unifiedCanvas.enableMask')} (H)`}</FormLabel>
+                <Checkbox
+                  isChecked={isMaskEnabled}
+                  onChange={handleToggleEnableMask}
+                />
+              </FormControl>
+              <FormControl>
+                <FormLabel>{t('unifiedCanvas.preserveMaskedArea')}</FormLabel>
+                <Checkbox
+                  isChecked={shouldPreserveMaskedArea}
+                  onChange={handleChangePreserveMaskedArea}
+                />
+              </FormControl>
+            </FormControlGroup>
             <Box pt={2} pb={2}>
               <IAIColorPicker
                 color={maskColor}
                 onChange={handleChangeMaskColor}
               />
             </Box>
-            <Button
-              size="sm"
-              leftIcon={<PiFloppyDiskBackFill />}
-              onClick={handleSaveMask}
-            >
-              {t('unifiedCanvas.saveMask')}
-            </Button>
-            <Button
-              size="sm"
-              leftIcon={<PiTrashSimpleFill />}
-              onClick={handleClearMask}
-            >
-              {t('unifiedCanvas.clearMask')}
-            </Button>
+            <ButtonGroup isAttached={false}>
+              <Button
+                size="sm"
+                leftIcon={<PiFloppyDiskBackFill />}
+                onClick={handleSaveMask}
+              >
+                {t('unifiedCanvas.saveMask')}
+              </Button>
+              <Button
+                size="sm"
+                leftIcon={<PiTrashSimpleFill />}
+                onClick={handleClearMask}
+              >
+                {t('unifiedCanvas.clearMask')}
+              </Button>
+            </ButtonGroup>
           </Flex>
         </PopoverBody>
       </PopoverContent>
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx
index 6b2f2eddb0..bbdff781bf 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx
@@ -1,7 +1,9 @@
+import type { FormLabelProps } from '@invoke-ai/ui';
 import {
   Checkbox,
   Flex,
   FormControl,
+  FormControlGroup,
   FormLabel,
   IconButton,
   Popover,
@@ -28,6 +30,10 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { PiGearSixBold } from 'react-icons/pi';
 
+const formLabelProps: FormLabelProps = {
+  flexGrow: 1,
+};
+
 const IAICanvasSettingsButtonPopover = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
@@ -122,69 +128,73 @@ const IAICanvasSettingsButtonPopover = () => {
       <PopoverContent>
         <PopoverBody>
           <Flex direction="column" gap={2}>
-            <FormControl>
-              <FormLabel>{t('unifiedCanvas.showIntermediates')}</FormLabel>
-              <Checkbox
-                isChecked={shouldShowIntermediates}
-                onChange={handleChangeShouldShowIntermediates}
-              />
-            </FormControl>
-            <FormControl>
-              <FormLabel>{t('unifiedCanvas.showGrid')}</FormLabel>
-              <Checkbox
-                isChecked={shouldShowGrid}
-                onChange={handleChangeShouldShowGrid}
-              />
-            </FormControl>
-            <FormControl>
-              <FormLabel>{t('unifiedCanvas.snapToGrid')}</FormLabel>
-              <Checkbox
-                isChecked={shouldSnapToGrid}
-                onChange={handleChangeShouldSnapToGrid}
-              />
-            </FormControl>
-            <FormControl>
-              <FormLabel>{t('unifiedCanvas.darkenOutsideSelection')}</FormLabel>
-              <Checkbox
-                isChecked={shouldDarkenOutsideBoundingBox}
-                onChange={handleChangeShouldDarkenOutsideBoundingBox}
-              />
-            </FormControl>
-            <FormControl>
-              <FormLabel>{t('unifiedCanvas.autoSaveToGallery')}</FormLabel>
-              <Checkbox
-                isChecked={shouldAutoSave}
-                onChange={handleChangeShouldAutoSave}
-              />
-            </FormControl>
-            <FormControl>
-              <FormLabel>{t('unifiedCanvas.saveBoxRegionOnly')}</FormLabel>
-              <Checkbox
-                isChecked={shouldCropToBoundingBoxOnSave}
-                onChange={handleChangeShouldCropToBoundingBoxOnSave}
-              />
-            </FormControl>
-            <FormControl>
-              <FormLabel>{t('unifiedCanvas.limitStrokesToBox')}</FormLabel>
-              <Checkbox
-                isChecked={shouldRestrictStrokesToBox}
-                onChange={handleChangeShouldRestrictStrokesToBox}
-              />
-            </FormControl>
-            <FormControl>
-              <FormLabel>{t('unifiedCanvas.showCanvasDebugInfo')}</FormLabel>
-              <Checkbox
-                isChecked={shouldShowCanvasDebugInfo}
-                onChange={handleChangeShouldShowCanvasDebugInfo}
-              />
-            </FormControl>
-            <FormControl>
-              <FormLabel>{t('unifiedCanvas.antialiasing')}</FormLabel>
-              <Checkbox
-                isChecked={shouldAntialias}
-                onChange={handleChangeShouldAntialias}
-              />
-            </FormControl>
+            <FormControlGroup formLabelProps={formLabelProps}>
+              <FormControl>
+                <FormLabel>{t('unifiedCanvas.showIntermediates')}</FormLabel>
+                <Checkbox
+                  isChecked={shouldShowIntermediates}
+                  onChange={handleChangeShouldShowIntermediates}
+                />
+              </FormControl>
+              <FormControl>
+                <FormLabel>{t('unifiedCanvas.showGrid')}</FormLabel>
+                <Checkbox
+                  isChecked={shouldShowGrid}
+                  onChange={handleChangeShouldShowGrid}
+                />
+              </FormControl>
+              <FormControl>
+                <FormLabel>{t('unifiedCanvas.snapToGrid')}</FormLabel>
+                <Checkbox
+                  isChecked={shouldSnapToGrid}
+                  onChange={handleChangeShouldSnapToGrid}
+                />
+              </FormControl>
+              <FormControl>
+                <FormLabel>
+                  {t('unifiedCanvas.darkenOutsideSelection')}
+                </FormLabel>
+                <Checkbox
+                  isChecked={shouldDarkenOutsideBoundingBox}
+                  onChange={handleChangeShouldDarkenOutsideBoundingBox}
+                />
+              </FormControl>
+              <FormControl>
+                <FormLabel>{t('unifiedCanvas.autoSaveToGallery')}</FormLabel>
+                <Checkbox
+                  isChecked={shouldAutoSave}
+                  onChange={handleChangeShouldAutoSave}
+                />
+              </FormControl>
+              <FormControl>
+                <FormLabel>{t('unifiedCanvas.saveBoxRegionOnly')}</FormLabel>
+                <Checkbox
+                  isChecked={shouldCropToBoundingBoxOnSave}
+                  onChange={handleChangeShouldCropToBoundingBoxOnSave}
+                />
+              </FormControl>
+              <FormControl>
+                <FormLabel>{t('unifiedCanvas.limitStrokesToBox')}</FormLabel>
+                <Checkbox
+                  isChecked={shouldRestrictStrokesToBox}
+                  onChange={handleChangeShouldRestrictStrokesToBox}
+                />
+              </FormControl>
+              <FormControl>
+                <FormLabel>{t('unifiedCanvas.showCanvasDebugInfo')}</FormLabel>
+                <Checkbox
+                  isChecked={shouldShowCanvasDebugInfo}
+                  onChange={handleChangeShouldShowCanvasDebugInfo}
+                />
+              </FormControl>
+              <FormControl>
+                <FormLabel>{t('unifiedCanvas.antialiasing')}</FormLabel>
+                <Checkbox
+                  isChecked={shouldAntialias}
+                  onChange={handleChangeShouldAntialias}
+                />
+              </FormControl>
+            </FormControlGroup>
             <ClearCanvasHistoryButtonModal />
           </Flex>
         </PopoverBody>
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx
index 59a0ae2619..5584be9ed1 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx
@@ -276,9 +276,9 @@ const IAICanvasToolChooserOptions = () => {
               </Flex>
               <Box w="full" pt={2} pb={2}>
                 <IAIColorPicker
-                  withNumberInput={true}
                   color={brushColor}
                   onChange={handleChangeBrushColor}
+                  withNumberInput
                 />
               </Box>
             </Flex>
diff --git a/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx b/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx
index 8056a34f9c..bc5720e9fc 100644
--- a/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx
@@ -1,8 +1,10 @@
+import type { FormLabelProps } from '@invoke-ai/ui';
 import {
   Checkbox,
   CompositeSlider,
   Flex,
   FormControl,
+  FormControlGroup,
   FormLabel,
   IconButton,
   Popover,
@@ -24,6 +26,10 @@ import { RiSettings4Fill } from 'react-icons/ri';
 
 import BoardAutoAddSelect from './Boards/BoardAutoAddSelect';
 
+const formLabelProps: FormLabelProps = {
+  flexGrow: 1,
+};
+
 const GallerySettingsPopover = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
@@ -78,20 +84,22 @@ const GallerySettingsPopover = () => {
                 defaultValue={90}
               />
             </FormControl>
-            <FormControl>
-              <FormLabel>{t('gallery.autoSwitchNewImages')}</FormLabel>
-              <Switch
-                isChecked={shouldAutoSwitch}
-                onChange={handleChangeAutoSwitch}
-              />
-            </FormControl>
-            <FormControl>
-              <FormLabel>{t('gallery.autoAssignBoardOnClick')}</FormLabel>
-              <Checkbox
-                isChecked={autoAssignBoardOnClick}
-                onChange={handleChangeAutoAssignBoardOnClick}
-              />
-            </FormControl>
+            <FormControlGroup formLabelProps={formLabelProps}>
+              <FormControl>
+                <FormLabel>{t('gallery.autoSwitchNewImages')}</FormLabel>
+                <Switch
+                  isChecked={shouldAutoSwitch}
+                  onChange={handleChangeAutoSwitch}
+                />
+              </FormControl>
+              <FormControl>
+                <FormLabel>{t('gallery.autoAssignBoardOnClick')}</FormLabel>
+                <Checkbox
+                  isChecked={autoAssignBoardOnClick}
+                  onChange={handleChangeAutoAssignBoardOnClick}
+                />
+              </FormControl>
+            </FormControlGroup>
             <BoardAutoAddSelect />
           </Flex>
         </PopoverBody>

From 52b24e01e2edd3d67dcdb9335b60dfe583f83cd4 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 23 Jan 2024 22:56:11 +1100
Subject: [PATCH 019/133] feat(ui): remove chakra as direct dependency

Moved a number of things to `@invoke-ai/ui` to support this.

Unfortunately, the bundle size has increased a bit. I will work on that later.
---
 invokeai/frontend/web/package.json            |  11 +-
 invokeai/frontend/web/pnpm-lock.yaml          | 732 ++++++++++++++++--
 .../components/ControlAdapterConfig.tsx       |   9 +-
 .../Boards/BoardsList/BoardsSearch.tsx        |   2 +-
 .../gallery/components/GalleryBoardName.tsx   |   8 +-
 .../ImageMetadataViewer/DataViewer.tsx        |   4 +-
 .../ImageMetadataViewer/ImageMetadataItem.tsx |   7 +-
 .../ImageMetadataViewer.tsx                   |  12 +-
 .../flow/nodes/common/NodeCollapseButton.tsx  |   7 +-
 .../hooks/useExpanderToggle.ts                |  11 +-
 .../components/AboutModal/AboutModal.tsx      |  23 +-
 .../components/HotkeysModal/HotkeysModal.tsx  |   5 +-
 .../FloatingParametersPanelButtons.tsx        |   6 +-
 .../components/WorkflowLibraryList.tsx        |  11 +-
 14 files changed, 730 insertions(+), 118 deletions(-)

diff --git a/invokeai/frontend/web/package.json b/invokeai/frontend/web/package.json
index 641e13407e..f989a98b4e 100644
--- a/invokeai/frontend/web/package.json
+++ b/invokeai/frontend/web/package.json
@@ -52,21 +52,12 @@
     }
   },
   "dependencies": {
-    "@chakra-ui/anatomy": "^2.2.2",
-    "@chakra-ui/icons": "^2.1.1",
-    "@chakra-ui/layout": "^2.3.1",
-    "@chakra-ui/portal": "^2.1.0",
-    "@chakra-ui/react": "^2.8.2",
     "@chakra-ui/react-use-size": "^2.1.0",
-    "@chakra-ui/styled-system": "^2.9.2",
-    "@chakra-ui/theme-tools": "^2.1.2",
     "@dagrejs/graphlib": "^2.1.13",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@emotion/react": "^11.11.3",
-    "@emotion/styled": "^11.11.0",
     "@fontsource-variable/inter": "^5.0.16",
-    "@invoke-ai/ui": "0.0.11",
+    "@invoke-ai/ui": "0.0.12",
     "@mantine/form": "6.0.21",
     "@nanostores/react": "^0.7.1",
     "@reduxjs/toolkit": "2.0.1",
diff --git a/invokeai/frontend/web/pnpm-lock.yaml b/invokeai/frontend/web/pnpm-lock.yaml
index a6b710c628..bdd7ab844c 100644
--- a/invokeai/frontend/web/pnpm-lock.yaml
+++ b/invokeai/frontend/web/pnpm-lock.yaml
@@ -10,30 +10,12 @@ patchedDependencies:
     path: patches/reselect@5.0.1.patch
 
 dependencies:
-  '@chakra-ui/anatomy':
-    specifier: ^2.2.2
-    version: 2.2.2
-  '@chakra-ui/icons':
-    specifier: ^2.1.1
-    version: 2.1.1(@chakra-ui/system@2.6.2)(react@18.2.0)
-  '@chakra-ui/layout':
-    specifier: ^2.3.1
-    version: 2.3.1(@chakra-ui/system@2.6.2)(react@18.2.0)
-  '@chakra-ui/portal':
-    specifier: ^2.1.0
-    version: 2.1.0(react-dom@18.2.0)(react@18.2.0)
   '@chakra-ui/react':
     specifier: ^2.8.2
     version: 2.8.2(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.2.48)(framer-motion@10.18.0)(react-dom@18.2.0)(react@18.2.0)
   '@chakra-ui/react-use-size':
     specifier: ^2.1.0
     version: 2.1.0(react@18.2.0)
-  '@chakra-ui/styled-system':
-    specifier: ^2.9.2
-    version: 2.9.2
-  '@chakra-ui/theme-tools':
-    specifier: ^2.1.2
-    version: 2.1.2(@chakra-ui/styled-system@2.9.2)
   '@dagrejs/graphlib':
     specifier: ^2.1.13
     version: 2.1.13
@@ -43,18 +25,12 @@ dependencies:
   '@dnd-kit/utilities':
     specifier: ^3.2.2
     version: 3.2.2(react@18.2.0)
-  '@emotion/react':
-    specifier: ^11.11.3
-    version: 11.11.3(@types/react@18.2.48)(react@18.2.0)
-  '@emotion/styled':
-    specifier: ^11.11.0
-    version: 11.11.0(@emotion/react@11.11.3)(@types/react@18.2.48)(react@18.2.0)
   '@fontsource-variable/inter':
     specifier: ^5.0.16
     version: 5.0.16
   '@invoke-ai/ui':
-    specifier: 0.0.10
-    version: 0.0.10(@chakra-ui/anatomy@2.2.2)(@chakra-ui/icons@2.1.1)(@chakra-ui/layout@2.3.1)(@chakra-ui/portal@2.1.0)(@chakra-ui/react@2.8.2)(@chakra-ui/styled-system@2.9.2)(@chakra-ui/theme-tools@2.1.2)(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@fontsource-variable/inter@5.0.16)(@nanostores/react@0.7.1)(chakra-react-select@4.7.6)(framer-motion@10.18.0)(lodash-es@4.17.21)(nanostores@0.9.5)(overlayscrollbars-react@0.5.3)(overlayscrollbars@2.4.6)(react-dom@18.2.0)(react-i18next@14.0.0)(react-select@5.8.0)(react@18.2.0)
+    specifier: 0.0.12
+    version: 0.0.12(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.16)(@internationalized/date@3.5.1)(@types/react@18.2.48)(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0)
   '@mantine/form':
     specifier: 6.0.21
     version: 6.0.21(react@18.2.0)
@@ -356,6 +332,92 @@ packages:
       '@jridgewell/trace-mapping': 0.3.21
     dev: true
 
+  /@ark-ui/anatomy@1.3.0(@internationalized/date@3.5.1):
+    resolution: {integrity: sha512-1yG2MrzUlix6KthjQMCNiHnkXrWwEdFAX6D+HqGJaNu0XvaGul2J+wDNtjsdX+gxiWu1nXXEEOAWlFVYMUf65w==}
+    dependencies:
+      '@zag-js/accordion': 0.32.1
+      '@zag-js/anatomy': 0.32.1
+      '@zag-js/avatar': 0.32.1
+      '@zag-js/carousel': 0.32.1
+      '@zag-js/checkbox': 0.32.1
+      '@zag-js/color-picker': 0.32.1
+      '@zag-js/color-utils': 0.32.1
+      '@zag-js/combobox': 0.32.1
+      '@zag-js/date-picker': 0.32.1
+      '@zag-js/date-utils': 0.32.1(@internationalized/date@3.5.1)
+      '@zag-js/dialog': 0.32.1
+      '@zag-js/editable': 0.32.1
+      '@zag-js/file-upload': 0.32.1
+      '@zag-js/hover-card': 0.32.1
+      '@zag-js/menu': 0.32.1
+      '@zag-js/number-input': 0.32.1
+      '@zag-js/pagination': 0.32.1
+      '@zag-js/pin-input': 0.32.1
+      '@zag-js/popover': 0.32.1
+      '@zag-js/presence': 0.32.1
+      '@zag-js/progress': 0.32.1
+      '@zag-js/radio-group': 0.32.1
+      '@zag-js/rating-group': 0.32.1
+      '@zag-js/select': 0.32.1
+      '@zag-js/slider': 0.32.1
+      '@zag-js/splitter': 0.32.1
+      '@zag-js/switch': 0.32.1
+      '@zag-js/tabs': 0.32.1
+      '@zag-js/tags-input': 0.32.1
+      '@zag-js/toast': 0.32.1
+      '@zag-js/toggle-group': 0.32.1
+      '@zag-js/tooltip': 0.32.1
+    transitivePeerDependencies:
+      - '@internationalized/date'
+    dev: false
+
+  /@ark-ui/react@1.3.0(@internationalized/date@3.5.1)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-JHjNoIX50+mUCTaEGMjfGQWGGi31pKsV646jZJlR/1xohpYJigzg8BvO97cTsVk8fwtur+cm11gz3Nf7f5QUnA==}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    dependencies:
+      '@ark-ui/anatomy': 1.3.0(@internationalized/date@3.5.1)
+      '@zag-js/accordion': 0.32.1
+      '@zag-js/avatar': 0.32.1
+      '@zag-js/carousel': 0.32.1
+      '@zag-js/checkbox': 0.32.1
+      '@zag-js/color-picker': 0.32.1
+      '@zag-js/color-utils': 0.32.1
+      '@zag-js/combobox': 0.32.1
+      '@zag-js/core': 0.32.1
+      '@zag-js/date-picker': 0.32.1
+      '@zag-js/date-utils': 0.32.1(@internationalized/date@3.5.1)
+      '@zag-js/dialog': 0.32.1
+      '@zag-js/editable': 0.32.1
+      '@zag-js/file-upload': 0.32.1
+      '@zag-js/hover-card': 0.32.1
+      '@zag-js/menu': 0.32.1
+      '@zag-js/number-input': 0.32.1
+      '@zag-js/pagination': 0.32.1
+      '@zag-js/pin-input': 0.32.1
+      '@zag-js/popover': 0.32.1
+      '@zag-js/presence': 0.32.1
+      '@zag-js/progress': 0.32.1
+      '@zag-js/radio-group': 0.32.1
+      '@zag-js/rating-group': 0.32.1
+      '@zag-js/react': 0.32.1(react-dom@18.2.0)(react@18.2.0)
+      '@zag-js/select': 0.32.1
+      '@zag-js/slider': 0.32.1
+      '@zag-js/splitter': 0.32.1
+      '@zag-js/switch': 0.32.1
+      '@zag-js/tabs': 0.32.1
+      '@zag-js/tags-input': 0.32.1
+      '@zag-js/toast': 0.32.1
+      '@zag-js/toggle-group': 0.32.1
+      '@zag-js/tooltip': 0.32.1
+      '@zag-js/types': 0.32.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    transitivePeerDependencies:
+      - '@internationalized/date'
+    dev: false
+
   /@arthurgeron/eslint-plugin-react-usememo@2.2.3:
     resolution: {integrity: sha512-YJG+8hULmhHAxztaANswpa9hWNqEOSvbZcbd6R/JQzyNlEZ49Xh97kqZGuJGZ74rrmULckEO1m3Jh5ctqrGA2A==}
     dependencies:
@@ -2940,7 +3002,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.23.6
+      '@babel/runtime': 7.23.8
       '@emotion/babel-plugin': 11.11.0
       '@emotion/is-prop-valid': 1.2.1
       '@emotion/react': 11.11.3(@types/react@18.2.48)(react@18.2.0)
@@ -3629,7 +3691,6 @@ packages:
     resolution: {integrity: sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==}
     dependencies:
       '@floating-ui/utils': 0.2.1
-    dev: true
 
   /@floating-ui/dom@1.5.3:
     resolution: {integrity: sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==}
@@ -3643,7 +3704,6 @@ packages:
     dependencies:
       '@floating-ui/core': 1.5.3
       '@floating-ui/utils': 0.2.1
-    dev: true
 
   /@floating-ui/react-dom@2.0.6(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-IB8aCRFxr8nFkdYZgH+Otd9EVQPJoynxeFRGTB8voPoZMRWo8XjYuCRgpI1btvuKY69XMiLnW+ym7zoBHM90Rw==}
@@ -3662,7 +3722,6 @@ packages:
 
   /@floating-ui/utils@0.2.1:
     resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==}
-    dev: true
 
   /@fontsource-variable/inter@5.0.16:
     resolution: {integrity: sha512-k+BUNqksTL+AN+o+OV7ILeiE9B5M5X+/jA7LWvCwjbV9ovXTqZyKRhA/x7uYv/ml8WQ0XNLBM7cRFIx4jW0/hg==}
@@ -3688,31 +3747,26 @@ packages:
     resolution: {integrity: sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==}
     dev: true
 
-  /@invoke-ai/ui@0.0.10(@chakra-ui/anatomy@2.2.2)(@chakra-ui/icons@2.1.1)(@chakra-ui/layout@2.3.1)(@chakra-ui/portal@2.1.0)(@chakra-ui/react@2.8.2)(@chakra-ui/styled-system@2.9.2)(@chakra-ui/theme-tools@2.1.2)(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@fontsource-variable/inter@5.0.16)(@nanostores/react@0.7.1)(chakra-react-select@4.7.6)(framer-motion@10.18.0)(lodash-es@4.17.21)(nanostores@0.9.5)(overlayscrollbars-react@0.5.3)(overlayscrollbars@2.4.6)(react-dom@18.2.0)(react-i18next@14.0.0)(react-select@5.8.0)(react@18.2.0):
-    resolution: {integrity: sha512-e3cX3g1xap57mkMfjsNznN6V9YS8qUTpSiyjSSr80HEsD3NjXxCoL+Ik6y/Na/KwXgcK00jM6H+xF6ahJFobvw==}
+  /@internationalized/date@3.5.1:
+    resolution: {integrity: sha512-LUQIfwU9e+Fmutc/DpRTGXSdgYZLBegi4wygCWDSVmUdLTaMHsQyASDiJtREwanwKuQLq0hY76fCJ9J/9I2xOQ==}
+    dependencies:
+      '@swc/helpers': 0.5.3
+    dev: false
+
+  /@internationalized/number@3.5.0:
+    resolution: {integrity: sha512-ZY1BW8HT9WKYvaubbuqXbbDdHhOUMfE2zHHFJeTppid0S+pc8HtdIxFxaYMsGjCb4UsF+MEJ4n2TfU7iHnUK8w==}
+    dependencies:
+      '@swc/helpers': 0.5.3
+    dev: false
+
+  /@invoke-ai/ui@0.0.12(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.16)(@internationalized/date@3.5.1)(@types/react@18.2.48)(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-G0iPzGx1Nu7mHOZtwUYtqNWAqo2KnYGvs883w4WJwUpoCEbnaZd9Pi876UvOh9aNyjO93t/5ctIffkcYlDKGNg==}
     peerDependencies:
-      '@chakra-ui/anatomy': ^2.2.2
-      '@chakra-ui/icons': ^2.1.1
-      '@chakra-ui/layout': ^2.3.1
-      '@chakra-ui/portal': ^2.1.0
-      '@chakra-ui/react': ^2.8.2
-      '@chakra-ui/styled-system': ^2.9.2
-      '@chakra-ui/theme-tools': ^2.1.2
-      '@emotion/react': ^11.11.3
-      '@emotion/styled': ^11.11.0
       '@fontsource-variable/inter': ^5.0.16
-      '@nanostores/react': ^0.7.1
-      chakra-react-select: ^4.7.6
-      framer-motion: ^10.18.0
-      lodash-es: ^4.17.21
-      nanostores: ^0.9.5
-      overlayscrollbars: ^2.4.6
-      overlayscrollbars-react: ^0.5.3
       react: ^18.2.0
       react-dom: ^18.2.0
-      react-i18next: ^14.0.0
-      react-select: ^5.8.0
     dependencies:
+      '@ark-ui/react': 1.3.0(@internationalized/date@3.5.1)(react-dom@18.2.0)(react@18.2.0)
       '@chakra-ui/anatomy': 2.2.2
       '@chakra-ui/icons': 2.1.1(@chakra-ui/system@2.6.2)(react@18.2.0)
       '@chakra-ui/layout': 2.3.1(@chakra-ui/system@2.6.2)(react@18.2.0)
@@ -3734,6 +3788,17 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
       react-i18next: 14.0.0(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0)
       react-select: 5.8.0(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0)
+    transitivePeerDependencies:
+      - '@chakra-ui/form-control'
+      - '@chakra-ui/icon'
+      - '@chakra-ui/media-query'
+      - '@chakra-ui/menu'
+      - '@chakra-ui/spinner'
+      - '@chakra-ui/system'
+      - '@internationalized/date'
+      - '@types/react'
+      - i18next
+      - react-native
     dev: false
 
   /@isaacs/cliui@8.0.2:
@@ -5719,6 +5784,12 @@ packages:
     resolution: {integrity: sha512-9F4ys4C74eSTEUNndnER3VJ15oru2NumfQxS8geE+f3eB5xvfxpWyqE5XlVnxb/R14uoXi6SLbBwwiDSkv+XEw==}
     dev: true
 
+  /@swc/helpers@0.5.3:
+    resolution: {integrity: sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==}
+    dependencies:
+      tslib: 2.6.2
+    dev: false
+
   /@swc/types@0.1.5:
     resolution: {integrity: sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==}
     dev: true
@@ -6679,20 +6750,567 @@ packages:
       tslib: 1.14.1
     dev: true
 
+  /@zag-js/accordion@0.32.1:
+    resolution: {integrity: sha512-16beDVpEhXFQsQRMZLmHFruhGphSprJ5XrRu6+OM2U7aTulo1w3ENUd9uI+mIs4oTVO66lYI4Lp+dFcT2UUIYA==}
+    dependencies:
+      '@zag-js/anatomy': 0.32.1
+      '@zag-js/core': 0.32.1
+      '@zag-js/dom-event': 0.32.1
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/types': 0.32.1
+      '@zag-js/utils': 0.32.1
+    dev: false
+
+  /@zag-js/anatomy@0.32.1:
+    resolution: {integrity: sha512-bR+tfFfkbxwhBzGGjEQG+RUnbeCjMx7tWJxykGnGdVLwAh0wKTQBEfHEOCOQh5qU8RhKUieqemAdvc7oP3Tp4w==}
+    dev: false
+
+  /@zag-js/aria-hidden@0.32.1:
+    resolution: {integrity: sha512-kznwxvUUHDax8Kd7YNVVCzQcwGARTRaZNOcIkw7MTLE8g/pU+C4pYkwR9iqA7/8imGfjYrZfSsQqZRTb4bkS0g==}
+    dependencies:
+      '@zag-js/dom-query': 0.32.1
+    dev: false
+
+  /@zag-js/auto-resize@0.32.1:
+    resolution: {integrity: sha512-MO6N5gPs2xDKbFgrakn6LDWv1GgN8uhfwpsqchLJX+EaZVvLIz8cXFD+jDv3RjK+5GRWV4mIF+26SXuHRSt9Ug==}
+    dependencies:
+      '@zag-js/dom-query': 0.32.1
+    dev: false
+
+  /@zag-js/avatar@0.32.1:
+    resolution: {integrity: sha512-5P+95pkMX2Na4yljN1etdgYyA+3HPORjWKn0Y3JamkYIAqJwRFO+taEdSm/xcRkuT6aGA3luheUowjt8wZssyA==}
+    dependencies:
+      '@zag-js/anatomy': 0.32.1
+      '@zag-js/core': 0.32.1
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/mutation-observer': 0.32.1
+      '@zag-js/types': 0.32.1
+      '@zag-js/utils': 0.32.1
+    dev: false
+
+  /@zag-js/carousel@0.32.1:
+    resolution: {integrity: sha512-S7dUrPtiLr42Fa+S3O18kqKVqSu2yuk67bqGDtppIZSaFOugYHK4feBkZqjKw+eF12NVRRVO2j+A40d3MvxbSA==}
+    dependencies:
+      '@zag-js/anatomy': 0.32.1
+      '@zag-js/core': 0.32.1
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/types': 0.32.1
+      '@zag-js/utils': 0.32.1
+    dev: false
+
+  /@zag-js/checkbox@0.32.1:
+    resolution: {integrity: sha512-5reRreGyDZ5IlBNd5m1QrYXCehVIl/pmfKMEcAfad5DcgCaHGv5j76eahxbKln/8TEdwz4eWzBrqNtwSkKL5+w==}
+    dependencies:
+      '@zag-js/anatomy': 0.32.1
+      '@zag-js/core': 0.32.1
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/form-utils': 0.32.1
+      '@zag-js/types': 0.32.1
+      '@zag-js/utils': 0.32.1
+      '@zag-js/visually-hidden': 0.32.1
+    dev: false
+
+  /@zag-js/collection@0.32.1:
+    resolution: {integrity: sha512-dAzcVQ/n+xAYoxWB/65/CQinv66RNVuq5ig0fEYszBqP+HjFnOpeGkIrEvP+bFI38hFEViiGtfr6oGAsVByOVQ==}
+    dev: false
+
+  /@zag-js/color-picker@0.32.1:
+    resolution: {integrity: sha512-ov3FC+c2WBYmEGRXWFVb2jih2Ecejj5JqBjDL9iMLBs2KNY9jnpvtH7WnZbijNY+RMDBj+C/DNI7K2NVaamSIA==}
+    dependencies:
+      '@zag-js/anatomy': 0.32.1
+      '@zag-js/color-utils': 0.32.1
+      '@zag-js/core': 0.32.1
+      '@zag-js/dismissable': 0.32.1
+      '@zag-js/dom-event': 0.32.1
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/form-utils': 0.32.1
+      '@zag-js/popper': 0.32.1
+      '@zag-js/tabbable': 0.32.1
+      '@zag-js/text-selection': 0.32.1
+      '@zag-js/types': 0.32.1
+      '@zag-js/utils': 0.32.1
+      '@zag-js/visually-hidden': 0.32.1
+    dev: false
+
+  /@zag-js/color-utils@0.32.1:
+    resolution: {integrity: sha512-AzupfOD7oD0mE+H9roTzwnLqtw1wYiJGOQKLPAwdwPQdznJUQD6sMOpxR/6RBuITVTm8Bl12Mr4+7s29LVJruw==}
+    dependencies:
+      '@zag-js/numeric-range': 0.32.1
+    dev: false
+
+  /@zag-js/combobox@0.32.1:
+    resolution: {integrity: sha512-skz2C5UxLD5JoYNP4hcPaQJu2cW7vycKqjDNI9ZtygSkZHOHx+JxpYiACBnr1vqzXatIOuDQm/HUuWW9yOT4eA==}
+    dependencies:
+      '@zag-js/anatomy': 0.32.1
+      '@zag-js/aria-hidden': 0.32.1
+      '@zag-js/collection': 0.32.1
+      '@zag-js/core': 0.32.1
+      '@zag-js/dismissable': 0.32.1
+      '@zag-js/dom-event': 0.32.1
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/mutation-observer': 0.32.1
+      '@zag-js/popper': 0.32.1
+      '@zag-js/types': 0.32.1
+      '@zag-js/utils': 0.32.1
+    dev: false
+
+  /@zag-js/core@0.32.1:
+    resolution: {integrity: sha512-F9F7920/CisoLWALQACIhqbMvemgbv86qBULJ+UEe+a/9XgGwPh9UGn/H/q5EWkNpgEapz2b3pl3ONgKmXsK1A==}
+    dependencies:
+      '@zag-js/store': 0.32.1
+      klona: 2.0.6
+    dev: false
+
+  /@zag-js/date-picker@0.32.1:
+    resolution: {integrity: sha512-n/hYmF+/R4+NuyfPRzCgeuLT6LJihKSuKzK29STPWy3sC/tBBHiqhNv1/4UKbatHUJXdBW2XF+N8Rw08RffcFQ==}
+    dependencies:
+      '@internationalized/date': 3.5.1
+      '@zag-js/anatomy': 0.32.1
+      '@zag-js/core': 0.32.1
+      '@zag-js/date-utils': 0.32.1(@internationalized/date@3.5.1)
+      '@zag-js/dismissable': 0.32.1
+      '@zag-js/dom-event': 0.32.1
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/form-utils': 0.32.1
+      '@zag-js/live-region': 0.32.1
+      '@zag-js/popper': 0.32.1
+      '@zag-js/text-selection': 0.32.1
+      '@zag-js/types': 0.32.1
+      '@zag-js/utils': 0.32.1
+    dev: false
+
+  /@zag-js/date-utils@0.32.1(@internationalized/date@3.5.1):
+    resolution: {integrity: sha512-dbBDRSVr5pRUw3rXndyGuSshZiWqQI5JQO4D2KIFGkXzorj6WzoOpcO910Z7AdM/9cCAMpCjUrka8d8o9BpJBg==}
+    peerDependencies:
+      '@internationalized/date': '>=3.0.0'
+    dependencies:
+      '@internationalized/date': 3.5.1
+    dev: false
+
+  /@zag-js/dialog@0.32.1:
+    resolution: {integrity: sha512-czp+qXcdAOM70SrvDo4gBpYZx6gS6HXyrpiptW3+EHa2eiCfc/Z2w+Nu+ZadOTEQGgNWlKlCLW7Ery0i9mMDsw==}
+    dependencies:
+      '@zag-js/anatomy': 0.32.1
+      '@zag-js/aria-hidden': 0.32.1
+      '@zag-js/core': 0.32.1
+      '@zag-js/dismissable': 0.32.1
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/remove-scroll': 0.32.1
+      '@zag-js/types': 0.32.1
+      '@zag-js/utils': 0.32.1
+      focus-trap: 7.5.4
+    dev: false
+
+  /@zag-js/dismissable@0.32.1:
+    resolution: {integrity: sha512-UIkG+9Eb5wrus2F2Dy4zqk0pwCV53sdnMYBxk9dpvDzBJHzW+InhVeg3UeKmPL8ELcYlhH/Bap99XCRJvxsXow==}
+    dependencies:
+      '@zag-js/dom-event': 0.32.1
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/interact-outside': 0.32.1
+      '@zag-js/utils': 0.32.1
+    dev: false
+
+  /@zag-js/dom-event@0.32.1:
+    resolution: {integrity: sha512-wN6f5Kkf7C/YFN3wbEG3gUockSebyy1fPNL2BuL4C8PIP8vOD14hnHTzZWg5yYfO+veybIAL38r8I46C+bOVBQ==}
+    dependencies:
+      '@zag-js/text-selection': 0.32.1
+      '@zag-js/types': 0.32.1
+    dev: false
+
   /@zag-js/dom-query@0.16.0:
     resolution: {integrity: sha512-Oqhd6+biWyKnhKwFFuZrrf6lxBz2tX2pRQe6grUnYwO6HJ8BcbqZomy2lpOdr+3itlaUqx+Ywj5E5ZZDr/LBfQ==}
     dev: false
 
+  /@zag-js/dom-query@0.32.1:
+    resolution: {integrity: sha512-u6hrQHQ0/dcUi6xJn8d2Mu1ClN4KZpPqOKrJFSaxadWjSy+x0qp48WY2CBQ6gZ3j8IwR/XjzU9bu9wY5jJfHgA==}
+    dev: false
+
+  /@zag-js/editable@0.32.1:
+    resolution: {integrity: sha512-QEGnfp2P9nWVp9vGNWtszspvQcF3KtBRToZrv5/DT30Mpo/uPDKtqijLs0SnB/W60ELzcIRhK4J9taGoK8O8uw==}
+    dependencies:
+      '@zag-js/anatomy': 0.32.1
+      '@zag-js/core': 0.32.1
+      '@zag-js/dom-event': 0.32.1
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/form-utils': 0.32.1
+      '@zag-js/interact-outside': 0.32.1
+      '@zag-js/types': 0.32.1
+      '@zag-js/utils': 0.32.1
+    dev: false
+
+  /@zag-js/element-rect@0.32.1:
+    resolution: {integrity: sha512-tAmxgxU2LsByK8PIs/Cj6cBJ8xZCVXE9RoStxthhuPL7xKYUfZvFGuhHVOHTHd6sDKEqbj6K1ds/TGPuglIh4w==}
+    dev: false
+
   /@zag-js/element-size@0.10.5:
     resolution: {integrity: sha512-uQre5IidULANvVkNOBQ1tfgwTQcGl4hliPSe69Fct1VfYb2Fd0jdAcGzqQgPhfrXFpR62MxLPB7erxJ/ngtL8w==}
     dev: false
 
+  /@zag-js/element-size@0.32.1:
+    resolution: {integrity: sha512-ACklufmJQpah2UqwZUlYFaKi6uWfZBeTghtbfYHcDfzRbg2Hni612v8L1JeS4vAgjeDpcdHQpXXR4AZSpGZgNw==}
+    dev: false
+
+  /@zag-js/file-upload@0.32.1:
+    resolution: {integrity: sha512-cD0NRIDof9Vv2DemmnYe9ZPZxOZ6b8XZl8eq4G0e8+WLYtnRXyEURl8Dw0QJpfdDPQaHnnD4CNxPTQcLgP+9Sg==}
+    dependencies:
+      '@zag-js/anatomy': 0.32.1
+      '@zag-js/core': 0.32.1
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/file-utils': 0.32.1
+      '@zag-js/types': 0.32.1
+      '@zag-js/utils': 0.32.1
+      '@zag-js/visually-hidden': 0.32.1
+    dev: false
+
+  /@zag-js/file-utils@0.32.1:
+    resolution: {integrity: sha512-0PxTrljW51Lf9OCuYNlZuaLgF0v1NoVRzXa/osZ9HGceQjfo77R5G9u+/TP3u53W2PTxajEZ4eNzTibgpzNXFg==}
+    dev: false
+
   /@zag-js/focus-visible@0.16.0:
     resolution: {integrity: sha512-a7U/HSopvQbrDU4GLerpqiMcHKEkQkNPeDZJWz38cw/6Upunh41GjHetq5TB84hxyCaDzJ6q2nEdNoBQfC0FKA==}
     dependencies:
       '@zag-js/dom-query': 0.16.0
     dev: false
 
+  /@zag-js/form-utils@0.32.1:
+    resolution: {integrity: sha512-OemLBlHCHHm7t8wNcf78FRudRA7FegSgsNEzAjrRTyx+lJztDyHRLaoyI1gCEIg+0Kzl2nMxjOl4MStGsDj8iw==}
+    dependencies:
+      '@zag-js/mutation-observer': 0.32.1
+    dev: false
+
+  /@zag-js/hover-card@0.32.1:
+    resolution: {integrity: sha512-k66YK0z0P4LuK78+jnRoUPxJiM9GA0sbEEz3oPlvcFVXMMwnRTPNIw1OjksfAPI+Nvgg7H6D3A+7HCdRI/oBjw==}
+    dependencies:
+      '@zag-js/anatomy': 0.32.1
+      '@zag-js/core': 0.32.1
+      '@zag-js/dismissable': 0.32.1
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/popper': 0.32.1
+      '@zag-js/types': 0.32.1
+      '@zag-js/utils': 0.32.1
+    dev: false
+
+  /@zag-js/interact-outside@0.32.1:
+    resolution: {integrity: sha512-8zHuswfTAgfMCaQnp3N4WStvnL32VyxURafb21+mE4neAF/DaKfJHWnJpeUMG1Qh/eXsrMRBxVoX+nBMhHj9bg==}
+    dependencies:
+      '@zag-js/dom-event': 0.32.1
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/tabbable': 0.32.1
+      '@zag-js/utils': 0.32.1
+    dev: false
+
+  /@zag-js/live-region@0.32.1:
+    resolution: {integrity: sha512-6/9QMLVZbTRh/G6MoJc/auN8r5vjdY9vUgNT680C2LOa2vnRR5/y0DkIpVgttNh1rSenQ/eLEYxp8hQF1rIYNw==}
+    dependencies:
+      '@zag-js/visually-hidden': 0.32.1
+    dev: false
+
+  /@zag-js/menu@0.32.1:
+    resolution: {integrity: sha512-IPsTljVF0N9xTwub1cpGl3GAG5ttAq3h38PdZERREzT3qRgw4v3K/I1TG2vIiDXgJz8UZzUKox6ZYdU7UIAkRA==}
+    dependencies:
+      '@zag-js/anatomy': 0.32.1
+      '@zag-js/core': 0.32.1
+      '@zag-js/dismissable': 0.32.1
+      '@zag-js/dom-event': 0.32.1
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/mutation-observer': 0.32.1
+      '@zag-js/popper': 0.32.1
+      '@zag-js/rect-utils': 0.32.1
+      '@zag-js/types': 0.32.1
+      '@zag-js/utils': 0.32.1
+    dev: false
+
+  /@zag-js/mutation-observer@0.32.1:
+    resolution: {integrity: sha512-/hlObxGnhAaYYVnwRJC227md0M3kSE6mO24vkqVGwq2GglS+u4zbVcBBUuWgHdMML+ZjIQrZuVycCBMfVlHq0g==}
+    dev: false
+
+  /@zag-js/number-input@0.32.1:
+    resolution: {integrity: sha512-atyIOvoMITb4hZtQym7yD6I7grvPW83UeMFO8hCQg3HWwd2zR4+63mouWuyMoWb4QrzVFRVQBaU8OG5xGlknEw==}
+    dependencies:
+      '@internationalized/number': 3.5.0
+      '@zag-js/anatomy': 0.32.1
+      '@zag-js/core': 0.32.1
+      '@zag-js/dom-event': 0.32.1
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/form-utils': 0.32.1
+      '@zag-js/mutation-observer': 0.32.1
+      '@zag-js/number-utils': 0.32.1
+      '@zag-js/types': 0.32.1
+      '@zag-js/utils': 0.32.1
+    dev: false
+
+  /@zag-js/number-utils@0.32.1:
+    resolution: {integrity: sha512-x/nttU31TtFVTqFBM8e3ZH/0MCc+u15WAfk0rT6ESkoZcdb80rTzZVMokCKCUdpi/JdB1vjEeCLSnj+ig8oAIQ==}
+    dev: false
+
+  /@zag-js/numeric-range@0.32.1:
+    resolution: {integrity: sha512-1Qe2URTenlrdsWuArlnQ+v5bBH2mHZD3XsK6jYV+C2lgatVzdcoN4GCSNTiF7w+So6J+NTeLMkVHMGCW1Kzx1g==}
+    dev: false
+
+  /@zag-js/pagination@0.32.1:
+    resolution: {integrity: sha512-lhogzKxJnx5D2Xoni/xm5rkOuy15KWSxqBHVwe8+j5aSNqMy7+aRtEN2F2VQCDVL/v1fdciQvOCA9udm37kZ4w==}
+    dependencies:
+      '@zag-js/anatomy': 0.32.1
+      '@zag-js/core': 0.32.1
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/types': 0.32.1
+      '@zag-js/utils': 0.32.1
+    dev: false
+
+  /@zag-js/pin-input@0.32.1:
+    resolution: {integrity: sha512-d18cCXKUr7INL0Xm5KyIoiTRSNsPXfIlIEMl2HrAvM3r70wtEag0PmiDNA5NS2tB4LnnX0XowchGB4HsdFS/ng==}
+    dependencies:
+      '@zag-js/anatomy': 0.32.1
+      '@zag-js/core': 0.32.1
+      '@zag-js/dom-event': 0.32.1
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/form-utils': 0.32.1
+      '@zag-js/types': 0.32.1
+      '@zag-js/utils': 0.32.1
+      '@zag-js/visually-hidden': 0.32.1
+    dev: false
+
+  /@zag-js/popover@0.32.1:
+    resolution: {integrity: sha512-B01if49v3crCjkvtSvIX4CBdT/475nj3DttOObc36s0YOxCEt3UihMITBD5JvIKwEqjZ6oU5t0sLcUYOqQ4f2A==}
+    dependencies:
+      '@zag-js/anatomy': 0.32.1
+      '@zag-js/aria-hidden': 0.32.1
+      '@zag-js/core': 0.32.1
+      '@zag-js/dismissable': 0.32.1
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/popper': 0.32.1
+      '@zag-js/remove-scroll': 0.32.1
+      '@zag-js/tabbable': 0.32.1
+      '@zag-js/types': 0.32.1
+      '@zag-js/utils': 0.32.1
+      focus-trap: 7.5.4
+    dev: false
+
+  /@zag-js/popper@0.32.1:
+    resolution: {integrity: sha512-aQgogW1N4VreNACSQhXQoZeXtQQtB//FXUvt1CBnW2DtmZ6YkNnaAfn186Q2lkw2/T0chITRy3eYeviwMmMrqg==}
+    dependencies:
+      '@floating-ui/dom': 1.5.4
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/element-rect': 0.32.1
+      '@zag-js/utils': 0.32.1
+    dev: false
+
+  /@zag-js/presence@0.32.1:
+    resolution: {integrity: sha512-8189QMUf/L1dztAZdurx18ZwPyWlq58Mrd+GdATSaf8JstgrI1ovzVs606inQghWptKHMsH7dUIaV9UkhbSx3Q==}
+    dependencies:
+      '@zag-js/core': 0.32.1
+      '@zag-js/types': 0.32.1
+    dev: false
+
+  /@zag-js/progress@0.32.1:
+    resolution: {integrity: sha512-ClkQvNYnuIpKfAPUceZXY5E2m/3NnIm21cvHe4gAoJ88YdqEHd5rIRoHP63g8ET8Ct/2KkBRkgR+LrQnGQOomA==}
+    dependencies:
+      '@zag-js/anatomy': 0.32.1
+      '@zag-js/core': 0.32.1
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/types': 0.32.1
+      '@zag-js/utils': 0.32.1
+    dev: false
+
+  /@zag-js/radio-group@0.32.1:
+    resolution: {integrity: sha512-NvdSjwRF38qIh0oM68jERf71uiwV2JFTrGeQEs3EIqONzULwL6jR2p4P1wm3JJNBAkSYBKZMER5cVUUcqM3kjQ==}
+    dependencies:
+      '@zag-js/anatomy': 0.32.1
+      '@zag-js/core': 0.32.1
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/element-rect': 0.32.1
+      '@zag-js/form-utils': 0.32.1
+      '@zag-js/types': 0.32.1
+      '@zag-js/utils': 0.32.1
+      '@zag-js/visually-hidden': 0.32.1
+    dev: false
+
+  /@zag-js/rating-group@0.32.1:
+    resolution: {integrity: sha512-RBaFRCw7P00bgTrEjUHT3h/OGRO8XmXKkQYqqhm1tsVbeTsT47iwHoc6XnMEiGBonaJDwN/J0oFasw7GNg5sow==}
+    dependencies:
+      '@zag-js/anatomy': 0.32.1
+      '@zag-js/core': 0.32.1
+      '@zag-js/dom-event': 0.32.1
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/form-utils': 0.32.1
+      '@zag-js/types': 0.32.1
+      '@zag-js/utils': 0.32.1
+    dev: false
+
+  /@zag-js/react@0.32.1(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-b1SB7hXXv1K6CmXkcy5Y7mb0YRWkyvulyhK8VW5O5hIAPuGxOTx70psmVeZbmVzhjdORCiro9jKx8Ec0LfolFg==}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    dependencies:
+      '@zag-js/core': 0.32.1
+      '@zag-js/store': 0.32.1
+      '@zag-js/types': 0.32.1
+      proxy-compare: 2.5.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /@zag-js/rect-utils@0.32.1:
+    resolution: {integrity: sha512-cI07kgldjUZP+SLhXeG9VSl47nrENlC96Fs7jWcTfHj62rhdY8WsBJ0tiTztvwar9m1chwxXZwJowHN+nPIgDQ==}
+    dev: false
+
+  /@zag-js/remove-scroll@0.32.1:
+    resolution: {integrity: sha512-LyXt2rNMSKb9MKeJRyKTgpk4R7jdA+9kEQTSG5qyA94jo1og7FVgA1W/E+pNkdxDEk1VplL768VU6y7E/L3DHg==}
+    dependencies:
+      '@zag-js/dom-query': 0.32.1
+    dev: false
+
+  /@zag-js/select@0.32.1:
+    resolution: {integrity: sha512-jSzmTKCN1Fk/ZDDWM8TVGOtwgpYUDgyceegjYT+hW1mmEetu4tQcEvAr0557NOzh8akqLvcVFbg/kMj0IriKAA==}
+    dependencies:
+      '@zag-js/anatomy': 0.32.1
+      '@zag-js/collection': 0.32.1
+      '@zag-js/core': 0.32.1
+      '@zag-js/dismissable': 0.32.1
+      '@zag-js/dom-event': 0.32.1
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/form-utils': 0.32.1
+      '@zag-js/mutation-observer': 0.32.1
+      '@zag-js/popper': 0.32.1
+      '@zag-js/tabbable': 0.32.1
+      '@zag-js/types': 0.32.1
+      '@zag-js/utils': 0.32.1
+      '@zag-js/visually-hidden': 0.32.1
+    dev: false
+
+  /@zag-js/slider@0.32.1:
+    resolution: {integrity: sha512-iZSB3Y8/Maakxem0Ha3rBRa8AyAplhN5K50Bgz+wsv0VEzNNUmK4QgaTWReWd6SfeTRpnC5ftKCcfM2aQrLm6g==}
+    dependencies:
+      '@zag-js/anatomy': 0.32.1
+      '@zag-js/core': 0.32.1
+      '@zag-js/dom-event': 0.32.1
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/element-size': 0.32.1
+      '@zag-js/form-utils': 0.32.1
+      '@zag-js/numeric-range': 0.32.1
+      '@zag-js/types': 0.32.1
+      '@zag-js/utils': 0.32.1
+    dev: false
+
+  /@zag-js/splitter@0.32.1:
+    resolution: {integrity: sha512-NdHLUXtQAlnz6QpdPwcqZCqYul7LaVqsp0hgtXR2PN4HbH+VAaDfY76pUk6LBerUcykChGZvtM9U0A5FCo1x4A==}
+    dependencies:
+      '@zag-js/anatomy': 0.32.1
+      '@zag-js/core': 0.32.1
+      '@zag-js/dom-event': 0.32.1
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/number-utils': 0.32.1
+      '@zag-js/types': 0.32.1
+      '@zag-js/utils': 0.32.1
+    dev: false
+
+  /@zag-js/store@0.32.1:
+    resolution: {integrity: sha512-hKwzpqAPljw06oOI+eO+Is2udpmY9GsGfmdoqvZVYoK4f5sawpZY9EC/84tbK9QKWUDTbFS+0Ujc254GUThmDA==}
+    dependencies:
+      proxy-compare: 2.5.1
+    dev: false
+
+  /@zag-js/switch@0.32.1:
+    resolution: {integrity: sha512-+5w/AtINA+jpORX1cuUrnyIFXrfjhqV7667EKK/zbPi0Pf1E10+TEihpfFjY6bgms9CSNWZVEb6w2f2C0PNBDA==}
+    dependencies:
+      '@zag-js/anatomy': 0.32.1
+      '@zag-js/core': 0.32.1
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/form-utils': 0.32.1
+      '@zag-js/types': 0.32.1
+      '@zag-js/utils': 0.32.1
+      '@zag-js/visually-hidden': 0.32.1
+    dev: false
+
+  /@zag-js/tabbable@0.32.1:
+    resolution: {integrity: sha512-fMXtVgBiX7z3Qmdv+McrfihiSkqsDbNX2nn3e63L7jdy9ZpgnR3jG9BwUZvv7hvzkuOAFhhdKgBYYT+fkBavGg==}
+    dependencies:
+      '@zag-js/dom-query': 0.32.1
+    dev: false
+
+  /@zag-js/tabs@0.32.1:
+    resolution: {integrity: sha512-5l8/k2Pw9Kbfsvvx6HWcVqK7Ns7ca+nyPGLSZtZLMp/Zn2q3xSG32C1U3oDaYtQVIQSiEHdnMjw0C2v+CxGDMA==}
+    dependencies:
+      '@zag-js/anatomy': 0.32.1
+      '@zag-js/core': 0.32.1
+      '@zag-js/dom-event': 0.32.1
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/element-rect': 0.32.1
+      '@zag-js/tabbable': 0.32.1
+      '@zag-js/types': 0.32.1
+      '@zag-js/utils': 0.32.1
+    dev: false
+
+  /@zag-js/tags-input@0.32.1:
+    resolution: {integrity: sha512-oliLhiMpRNbWFixHF+Oe7hySQBp7NKtL/s8rN5dLT1G1GFRMzuuht/QnmL1h8EoGGpTwaaokMo4zl4uVzHbwyw==}
+    dependencies:
+      '@zag-js/anatomy': 0.32.1
+      '@zag-js/auto-resize': 0.32.1
+      '@zag-js/core': 0.32.1
+      '@zag-js/dom-event': 0.32.1
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/form-utils': 0.32.1
+      '@zag-js/interact-outside': 0.32.1
+      '@zag-js/live-region': 0.32.1
+      '@zag-js/types': 0.32.1
+      '@zag-js/utils': 0.32.1
+    dev: false
+
+  /@zag-js/text-selection@0.32.1:
+    resolution: {integrity: sha512-aK1uswWYF76PFoxGL+3HW/kth9uldFWSW4lOh89NfEcc6Ym7qS5B+P0HKJVM9DuQbihvQX9dyc9PvM7/LJTSRA==}
+    dependencies:
+      '@zag-js/dom-query': 0.32.1
+    dev: false
+
+  /@zag-js/toast@0.32.1:
+    resolution: {integrity: sha512-HrfVzFX7ANS9qOewCr8qOCbgko635bZxYKMv+ojjo4U/TtwkGb43+lVU7/qwZj0z18/OtXBH5YQjFwQZXg5x8g==}
+    dependencies:
+      '@zag-js/anatomy': 0.32.1
+      '@zag-js/core': 0.32.1
+      '@zag-js/dom-event': 0.32.1
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/types': 0.32.1
+      '@zag-js/utils': 0.32.1
+    dev: false
+
+  /@zag-js/toggle-group@0.32.1:
+    resolution: {integrity: sha512-MM1XI4J45rRCZiDHcMtZWud0+bWMu6IcMnrbd9oig330YAF3RzcjTlxX93YRY35F04OUMBq5el9qe3qc2vyMuw==}
+    dependencies:
+      '@zag-js/anatomy': 0.32.1
+      '@zag-js/core': 0.32.1
+      '@zag-js/dom-event': 0.32.1
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/types': 0.32.1
+      '@zag-js/utils': 0.32.1
+    dev: false
+
+  /@zag-js/tooltip@0.32.1:
+    resolution: {integrity: sha512-+rsmDYTELFBHoYKg5iKShGfRD3H9FJDaZRq915Uc9YnyePMXCnWRgnVp+lk3zI+FDgysQm67SDLRJsR24Iioqg==}
+    dependencies:
+      '@zag-js/anatomy': 0.32.1
+      '@zag-js/core': 0.32.1
+      '@zag-js/dom-event': 0.32.1
+      '@zag-js/dom-query': 0.32.1
+      '@zag-js/popper': 0.32.1
+      '@zag-js/types': 0.32.1
+      '@zag-js/utils': 0.32.1
+    dev: false
+
+  /@zag-js/types@0.32.1:
+    resolution: {integrity: sha512-BLfqb+im4vtXXJqhd2ZUg/4LquEd1qPt9XN56XVjudGDTftN8n3EDpuail7VKxdL59W4jR7wW8lvl4sSgrQKWw==}
+    dependencies:
+      csstype: 3.1.3
+    dev: false
+
+  /@zag-js/utils@0.32.1:
+    resolution: {integrity: sha512-jrcmWYcA3L6TO4fZbPFvpSGEy2Z/mbWt6bPQbmcVgq/BltSS0YxxfPl+eD+S/rZI9aneszwsr04Z5TpladFiVA==}
+    dev: false
+
+  /@zag-js/visually-hidden@0.32.1:
+    resolution: {integrity: sha512-Vzieo4vNulzY/0zqmVfeYW/LcFJp5xtEoyUgR1FBctH8uBPBRhTIEXxKtoMablW6/vccOVo7zcu0UrR5Vx+eYQ==}
+    dev: false
+
   /accepts@1.3.8:
     resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
     engines: {node: '>= 0.6'}
@@ -9074,6 +9692,12 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /focus-trap@7.5.4:
+    resolution: {integrity: sha512-N7kHdlgsO/v+iD/dMoJKtsSqs5Dz/dXZVebRgJw23LDk+jMi/974zyiOYDziY2JPp8xivq9BmUGwIJMiuSBi7w==}
+    dependencies:
+      tabbable: 6.2.0
+    dev: false
+
   /for-each@0.3.3:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
     dependencies:
@@ -11307,6 +11931,10 @@ packages:
       ipaddr.js: 1.9.1
     dev: true
 
+  /proxy-compare@2.5.1:
+    resolution: {integrity: sha512-oyfc0Tx87Cpwva5ZXezSp5V9vht1c7dZBhvuV/y3ctkgMVUmiAGDVeeB0dKhGSyT0v1ZTEQYpe/RXlBVBNuCLA==}
+    dev: false
+
   /proxy-from-env@1.1.0:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
     dev: true
@@ -12777,6 +13405,10 @@ packages:
     resolution: {integrity: sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==}
     dev: true
 
+  /tabbable@6.2.0:
+    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
+    dev: false
+
   /tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx
index 8496bde318..8c40777714 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx
@@ -1,9 +1,9 @@
-import { ChevronUpIcon } from '@chakra-ui/icons';
 import {
   Box,
   Flex,
   FormControl,
   FormLabel,
+  Icon,
   IconButton,
   Switch,
 } from '@invoke-ai/ui';
@@ -19,7 +19,7 @@ import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import type { ChangeEvent } from 'react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiCopyBold, PiTrashSimpleBold } from 'react-icons/pi';
+import { PiCaretUpBold, PiCopyBold, PiTrashSimpleBold } from 'react-icons/pi';
 import { useToggle } from 'react-use';
 
 import ControlAdapterImagePreview from './ControlAdapterImagePreview';
@@ -130,8 +130,9 @@ const ControlAdapterConfig = (props: { id: string; number: number }) => {
           onClick={toggleIsExpanded}
           variant="ghost"
           icon={
-            <ChevronUpIcon
-              boxSize={6}
+            <Icon
+              boxSize={4}
+              as={PiCaretUpBold}
               transform={isExpanded ? 'rotate(0deg)' : 'rotate(180deg)'}
               transitionProperty="common"
               transitionDuration="normal"
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx
index e42ea03295..99d5367dd2 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx
@@ -58,7 +58,7 @@ const BoardsSearch = () => {
           <IconButton
             onClick={clearBoardSearch}
             size="sm"
-            variant="ghost"
+            variant="link"
             aria-label={t('boards.clearSearch')}
             icon={<PiXBold />}
           />
diff --git a/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx b/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx
index 97e8f740ef..04a4ae8078 100644
--- a/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx
@@ -1,7 +1,7 @@
-import { ChevronUpIcon } from '@chakra-ui/icons';
-import { Button, Flex, Spacer } from '@invoke-ai/ui';
+import { Button, Flex, Icon, Spacer } from '@invoke-ai/ui';
 import { useAppSelector } from 'app/store/storeHooks';
 import { memo, useMemo } from 'react';
+import { PiCaretUpBold } from 'react-icons/pi';
 import { useBoardName } from 'services/api/hooks/useBoardName';
 
 type Props = {
@@ -36,7 +36,9 @@ const GalleryBoardName = (props: Props) => {
       <Spacer />
       {formattedBoardName}
       <Spacer />
-      <ChevronUpIcon
+      <Icon
+        as={PiCaretUpBold}
+        boxSize={4}
         transform={isOpen ? 'rotate(0deg)' : 'rotate(180deg)'}
         transitionProperty="common"
         transitionDuration="normal"
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx
index b8268c9676..394b6cbda9 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx
@@ -1,7 +1,5 @@
 import { Box, Flex, IconButton, Tooltip } from '@invoke-ai/ui';
-import {
-  getOverlayScrollbarsParams,
-} from 'common/components/OverlayScrollbars/constants';
+import { getOverlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
 import { isString } from 'lodash-es';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import type { CSSProperties } from 'react';
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx
index 96154e1729..976ca2d5b6 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx
@@ -1,5 +1,4 @@
-import { ExternalLinkIcon } from '@chakra-ui/icons';
-import { Flex, IconButton, Link, Text, Tooltip } from '@invoke-ai/ui';
+import { ExternalLink, Flex, IconButton, Text, Tooltip } from '@invoke-ai/ui';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { IoArrowUndoCircleOutline } from 'react-icons/io5';
@@ -67,9 +66,7 @@ const ImageMetadataItem = ({
           {label}:
         </Text>
         {isLink ? (
-          <Link href={value.toString()} isExternal wordBreak="break-all">
-            {value.toString()} <ExternalLinkIcon mx="2px" />
-          </Link>
+          <ExternalLink href={value.toString()} label={value.toString()} />
         ) : (
           <Text overflowY="scroll" wordBreak="break-all">
             {value.toString()}
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx
index 52770458f7..58c04e483b 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx
@@ -1,13 +1,11 @@
-import { ExternalLinkIcon } from '@chakra-ui/icons';
 import {
+  ExternalLink,
   Flex,
-  Link,
   Tab,
   TabList,
   TabPanel,
   TabPanels,
   Tabs,
-  Text,
 } from '@invoke-ai/ui';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
@@ -46,13 +44,7 @@ const ImageMetadataViewer = ({ image }: ImageMetadataViewerProps) => {
       position="absolute"
       overflow="hidden"
     >
-      <Flex gap={2}>
-        <Text fontWeight="semibold">{t('common.file')}:</Text>
-        <Link href={image.image_url} isExternal maxW="calc(100% - 3rem)">
-          {image.image_name}
-          <ExternalLinkIcon mx="2px" />
-        </Link>
-      </Flex>
+      <ExternalLink href={image.image_url} label={image.image_name} />
 
       <Tabs
         variant="line"
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeCollapseButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeCollapseButton.tsx
index 8b7c6fc1ba..f90c20fb57 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeCollapseButton.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeCollapseButton.tsx
@@ -1,8 +1,8 @@
-import { ChevronUpIcon } from '@chakra-ui/icons';
-import { IconButton } from '@invoke-ai/ui';
+import { Icon, IconButton } from '@invoke-ai/ui';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { nodeIsOpenChanged } from 'features/nodes/store/nodesSlice';
 import { memo, useCallback } from 'react';
+import { PiCaretUpBold } from 'react-icons/pi';
 import { useUpdateNodeInternals } from 'reactflow';
 
 interface Props {
@@ -29,7 +29,8 @@ const NodeCollapseButton = ({ nodeId, isOpen }: Props) => {
       h={8}
       variant="link"
       icon={
-        <ChevronUpIcon
+        <Icon
+          as={PiCaretUpBold}
           transform={isOpen ? 'rotate(0deg)' : 'rotate(180deg)'}
           transitionProperty="common"
           transitionDuration="normal"
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/hooks/useExpanderToggle.ts b/invokeai/frontend/web/src/features/settingsAccordions/hooks/useExpanderToggle.ts
index d065d7d8f9..a8cce6ba20 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/hooks/useExpanderToggle.ts
+++ b/invokeai/frontend/web/src/features/settingsAccordions/hooks/useExpanderToggle.ts
@@ -1,9 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import {
-  expanderStateChanged,
-  selectUiSlice,
-} from 'features/ui/store/uiSlice';
+import { expanderStateChanged, selectUiSlice } from 'features/ui/store/uiSlice';
 import { useCallback, useMemo } from 'react';
 
 type UseExpanderToggleArg = {
@@ -14,7 +11,11 @@ type UseExpanderToggleArg = {
 export const useExpanderToggle = (arg: UseExpanderToggleArg) => {
   const dispatch = useAppDispatch();
   const selectIsOpen = useMemo(
-    () => createSelector(selectUiSlice, (ui) => ui.expanders[arg.id] ?? arg.defaultIsOpen),
+    () =>
+      createSelector(
+        selectUiSlice,
+        (ui) => ui.expanders[arg.id] ?? arg.defaultIsOpen
+      ),
     [arg]
   );
   const isOpen = useAppSelector(selectIsOpen);
diff --git a/invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx b/invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx
index 9f7f295ed2..9ff0389e26 100644
--- a/invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx
+++ b/invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx
@@ -1,11 +1,10 @@
-import { ExternalLinkIcon } from '@chakra-ui/icons';
 import {
+  ExternalLink,
   Flex,
   Grid,
   GridItem,
   Heading,
   Image,
-  Link,
   Modal,
   ModalBody,
   ModalCloseButton,
@@ -103,23 +102,21 @@ const AboutModal = ({ children }: AboutModalProps) => {
                   {appVersion && <Text>{`v${appVersion?.version}`}</Text>}
                   <Grid templateColumns="repeat(2, 1fr)" gap="3">
                     <GridItem>
-                      <Link fontSize="sm" href={githubLink} isExternal>
-                        {t('common.githubLabel')}
-                        <ExternalLinkIcon mx="2px" />
-                      </Link>
+                      <ExternalLink
+                        href={githubLink}
+                        label={t('common.githubLabel')}
+                      />
                     </GridItem>
                     <GridItem>
-                      <Link fontSize="sm" href={discordLink} isExternal>
-                        {t('common.discordLabel')}
-                        <ExternalLinkIcon mx="2px" />
-                      </Link>
+                      <ExternalLink
+                        href={discordLink}
+                        label={t('common.discordLabel')}
+                      />
                     </GridItem>
                   </Grid>
                   <Heading fontSize="large">{t('common.aboutHeading')}</Heading>
                   <Text fontSize="sm">{t('common.aboutDesc')}</Text>
-                  <Link isExternal href={websiteLink} fontSize="sm">
-                    {websiteLink} <ExternalLinkIcon mx="2px" />
-                  </Link>
+                  <ExternalLink href={websiteLink} label={websiteLink} />
                 </Flex>
               </GridItem>
             </Grid>
diff --git a/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModal.tsx b/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModal.tsx
index 9b54784101..36d24ba5eb 100644
--- a/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModal.tsx
+++ b/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModal.tsx
@@ -1,4 +1,3 @@
-import { CloseIcon } from '@chakra-ui/icons';
 import {
   Divider,
   Flex,
@@ -30,6 +29,7 @@ import {
   useState,
 } from 'react';
 import { useTranslation } from 'react-i18next';
+import { PiXBold } from 'react-icons/pi';
 
 import HotkeyListItem from './HotkeyListItem';
 
@@ -103,7 +103,8 @@ const HotkeysModal = ({ children }: HotkeysModalProps) => {
                     size="sm"
                     variant="ghost"
                     aria-label={t('hotkeys.clearSearch')}
-                    icon={<CloseIcon boxSize={3} />}
+                    boxSize={4}
+                    icon={<PiXBold />}
                   />
                 </InputRightElement>
               )}
diff --git a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
index 3faaa683ee..6e1278c665 100644
--- a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
@@ -1,8 +1,8 @@
-import { SpinnerIcon } from '@chakra-ui/icons';
 import type { SystemStyleObject } from '@invoke-ai/ui';
 import {
   ButtonGroup,
   Flex,
+  Icon,
   IconButton,
   Portal,
   spinAnimation,
@@ -14,7 +14,7 @@ import { useQueueBack } from 'features/queue/hooks/useQueueBack';
 import type { UsePanelReturn } from 'features/ui/hooks/usePanel';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiSlidersHorizontalBold } from 'react-icons/pi';
+import { PiCircleNotchBold, PiSlidersHorizontalBold } from 'react-icons/pi';
 import { RiSparklingFill } from 'react-icons/ri';
 import { useGetQueueStatusQuery } from 'services/api/endpoints/queue';
 
@@ -35,7 +35,7 @@ const FloatingSidePanelButtons = (props: Props) => {
   const queueButtonIcon = useMemo(
     () =>
       !isDisabled && queueStatus?.processor.is_processing ? (
-        <SpinnerIcon animation={spinAnimation} />
+        <Icon boxSize={6} as={PiCircleNotchBold} animation={spinAnimation} />
       ) : (
         <RiSparklingFill size="16px" />
       ),
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx
index 2c5b6fa1e7..9d5087d059 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx
@@ -1,4 +1,3 @@
-import { CloseIcon } from '@chakra-ui/icons';
 import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui';
 import {
   Button,
@@ -25,6 +24,7 @@ import WorkflowLibraryPagination from 'features/workflowLibrary/components/Workf
 import type { ChangeEvent, KeyboardEvent } from 'react';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { PiXBold } from 'react-icons/pi';
 import { useListWorkflowsQuery } from 'services/api/endpoints/workflows';
 import type {
   SQLiteDirection,
@@ -202,14 +202,13 @@ const WorkflowLibraryList = () => {
             minW={64}
           />
           {query.trim().length && (
-            <InputRightElement>
+            <InputRightElement h="full" pe={2}>
               <IconButton
                 onClick={resetFilterText}
-                size="xs"
-                variant="ghost"
+                size="sm"
+                variant="link"
                 aria-label={t('workflows.clearWorkflowSearchFilter')}
-                opacity={0.5}
-                icon={<CloseIcon boxSize={2} />}
+                icon={<PiXBold />}
               />
             </InputRightElement>
           )}

From 52b51a608864477f52b0eccce3ee07f65ad56210 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 23 Jan 2024 23:05:29 +1100
Subject: [PATCH 020/133] fix(ui): recall/use size sets aspect ratio correctly

Added a new action that resets the aspect ratio when dispatched.

Closes #5456
---
 .../parameters/hooks/useRecallParameters.ts      | 16 ++++++++--------
 .../features/parameters/store/generationSlice.ts | 14 ++++++++++++++
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/invokeai/frontend/web/src/features/parameters/hooks/useRecallParameters.ts b/invokeai/frontend/web/src/features/parameters/hooks/useRecallParameters.ts
index d25c3aea77..126b700fde 100644
--- a/invokeai/frontend/web/src/features/parameters/hooks/useRecallParameters.ts
+++ b/invokeai/frontend/web/src/features/parameters/hooks/useRecallParameters.ts
@@ -34,7 +34,7 @@ import {
   modelSelected,
 } from 'features/parameters/store/actions';
 import {
-  heightChanged,
+  heightRecalled,
   selectGenerationSlice,
   setCfgRescaleMultiplier,
   setCfgScale,
@@ -45,7 +45,7 @@ import {
   setSeed,
   setSteps,
   vaeSelected,
-  widthChanged,
+  widthRecalled,
 } from 'features/parameters/store/generationSlice';
 import type { ParameterModel } from 'features/parameters/types/parameterSchemas';
 import {
@@ -373,7 +373,7 @@ export const useRecallParameters = () => {
         parameterNotSetToast();
         return;
       }
-      dispatch(widthChanged(width));
+      dispatch(widthRecalled(width));
       parameterSetToast();
     },
     [dispatch, parameterSetToast, parameterNotSetToast]
@@ -388,7 +388,7 @@ export const useRecallParameters = () => {
         parameterNotSetToast();
         return;
       }
-      dispatch(heightChanged(height));
+      dispatch(heightRecalled(height));
       parameterSetToast();
     },
     [dispatch, parameterSetToast, parameterNotSetToast]
@@ -407,8 +407,8 @@ export const useRecallParameters = () => {
         allParameterNotSetToast();
         return;
       }
-      dispatch(heightChanged(height));
-      dispatch(widthChanged(width));
+      dispatch(heightRecalled(height));
+      dispatch(widthRecalled(width));
       allParameterSetToast();
     },
     [dispatch, allParameterSetToast, allParameterNotSetToast]
@@ -893,11 +893,11 @@ export const useRecallParameters = () => {
       }
 
       if (isParameterWidth(width)) {
-        dispatch(widthChanged(width));
+        dispatch(widthRecalled(width));
       }
 
       if (isParameterHeight(height)) {
-        dispatch(heightChanged(height));
+        dispatch(heightRecalled(height));
       }
 
       if (isParameterStrength(strength)) {
diff --git a/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts b/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts
index f9f61c074f..baa4852697 100644
--- a/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts
+++ b/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts
@@ -230,6 +230,18 @@ export const generationSlice = createSlice({
     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;
     },
@@ -306,6 +318,8 @@ export const {
   aspectRatioChanged,
   widthChanged,
   heightChanged,
+  widthRecalled,
+  heightRecalled,
 } = generationSlice.actions;
 
 export const { selectOptimalDimension } = generationSlice.selectors;

From 2aed6e2dbae00871eb867e7acedd8e4207056c19 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 23 Jan 2024 23:08:36 +1100
Subject: [PATCH 021/133] fix(ui): duplicate "base model" in merge UI

closes #5505
---
 .../AddModelsPanel/AdvancedAddDiffusers.tsx         | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx
index 18e55ff686..090b65f8d7 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx
@@ -122,13 +122,10 @@ const AdvancedAddDiffusers = (props: AdvancedAddDiffusersProps) => {
             <FormErrorMessage>{errors.model_name?.message}</FormErrorMessage>
           )}
         </FormControl>
-        <FormControl>
-          <FormLabel>{t('modelManager.baseModel')}</FormLabel>
-          <BaseModelSelect<DiffusersModelConfig>
-            control={control}
-            name="base_model"
-          />
-        </FormControl>
+        <BaseModelSelect<DiffusersModelConfig>
+          control={control}
+          name="base_model"
+        />
         <FormControl isInvalid={Boolean(errors.path)}>
           <FormLabel>{t('modelManager.modelLocation')}</FormLabel>
           <Input
@@ -137,7 +134,7 @@ const AdvancedAddDiffusers = (props: AdvancedAddDiffusersProps) => {
                 value.trim().length > 0 || 'Must provide a path',
               onBlur,
             })}
-          />{' '}
+          />
           {errors.path?.message && (
             <FormErrorMessage>{errors.path?.message}</FormErrorMessage>
           )}

From 8f5e2cbcc7f75f1427bfa94da55d50524d9d52ff Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Tue, 23 Jan 2024 02:30:56 +0530
Subject: [PATCH 022/133] feat: Add Depth Anything PreProcessor

---
 .../controlnet_image_processors.py            |  30 +++
 .../image_util/depth_anything/__init__.py     | 107 +++++++++
 .../image_util/depth_anything/model/blocks.py | 145 +++++++++++
 .../image_util/depth_anything/model/dpt.py    | 186 ++++++++++++++
 .../depth_anything/utilities/util.py          | 227 ++++++++++++++++++
 5 files changed, 695 insertions(+)
 create mode 100644 invokeai/backend/image_util/depth_anything/__init__.py
 create mode 100644 invokeai/backend/image_util/depth_anything/model/blocks.py
 create mode 100644 invokeai/backend/image_util/depth_anything/model/dpt.py
 create mode 100644 invokeai/backend/image_util/depth_anything/utilities/util.py

diff --git a/invokeai/app/invocations/controlnet_image_processors.py b/invokeai/app/invocations/controlnet_image_processors.py
index f16a8e36ae..967e0c6f40 100644
--- a/invokeai/app/invocations/controlnet_image_processors.py
+++ b/invokeai/app/invocations/controlnet_image_processors.py
@@ -30,6 +30,7 @@ from invokeai.app.invocations.primitives import ImageField, ImageOutput
 from invokeai.app.invocations.util import validate_begin_end_step, validate_weights
 from invokeai.app.services.image_records.image_records_common import ImageCategory, ResourceOrigin
 from invokeai.app.shared.fields import FieldDescriptions
+from invokeai.backend.image_util.depth_anything import DepthAnythingDetector
 
 from ...backend.model_management import BaseModelType
 from .baseinvocation import (
@@ -602,3 +603,32 @@ class ColorMapImageProcessorInvocation(ImageProcessorInvocation):
         color_map = cv2.resize(color_map, (width, height), interpolation=cv2.INTER_NEAREST)
         color_map = Image.fromarray(color_map)
         return color_map
+
+
+DEPTH_ANYTHING_MODEL_SIZES = Literal["large", "base", "small"]
+
+
+@invocation(
+    "depth_anything_image_processor",
+    title="Depth Anything Processor",
+    tags=["controlnet", "depth", "depth anything"],
+    category="controlnet",
+    version="1.0.0",
+)
+class DepthAnythingImageProcessorInvocation(ImageProcessorInvocation):
+    """Generates a depth map based on the Depth Anything algorithm"""
+
+    model_size: DEPTH_ANYTHING_MODEL_SIZES = InputField(
+        default="large", description="The size of the depth model to use"
+    )
+    offload: bool = InputField(default=False)
+
+    def run_processor(self, image):
+        depth_anything_detector = DepthAnythingDetector()
+        depth_anything_detector.load_model(model_size=self.model_size)
+
+        if image.mode == "RGBA":
+            image = image.convert("RGB")
+
+        processed_image = depth_anything_detector(image=image, offload=self.offload)
+        return processed_image
diff --git a/invokeai/backend/image_util/depth_anything/__init__.py b/invokeai/backend/image_util/depth_anything/__init__.py
new file mode 100644
index 0000000000..626e48a87a
--- /dev/null
+++ b/invokeai/backend/image_util/depth_anything/__init__.py
@@ -0,0 +1,107 @@
+import pathlib
+from typing import Literal, Union
+
+import cv2
+import numpy as np
+import torch
+import torch.nn.functional as F
+from einops import repeat
+from PIL import Image
+from torchvision.transforms import Compose
+
+from invokeai.app.services.config.config_default import InvokeAIAppConfig
+from invokeai.backend.image_util.depth_anything.model.dpt import DPT_DINOv2
+from invokeai.backend.image_util.depth_anything.utilities.util import NormalizeImage, PrepareForNet, Resize
+from invokeai.backend.util.devices import choose_torch_device
+from invokeai.backend.util.util import download_with_progress_bar
+
+config = InvokeAIAppConfig.get_config()
+
+DEPTH_ANYTHING_MODELS = {
+    "large": {
+        "url": "https://huggingface.co/spaces/LiheYoung/Depth-Anything/resolve/main/checkpoints/depth_anything_vitl14.pth?download=true",
+        "local": "sd-1/controlnet/annotator/depth_anything/depth_anything_vitl14.pth",
+    },
+    "base": {
+        "url": "https://huggingface.co/spaces/LiheYoung/Depth-Anything/resolve/main/checkpoints/depth_anything_vitb14.pth?download=true",
+        "local": "sd-1/controlnet/annotator/depth_anything/depth_anything_vitb14.pth",
+    },
+    "small": {
+        "url": "https://huggingface.co/spaces/LiheYoung/Depth-Anything/resolve/main/checkpoints/depth_anything_vits14.pth?download=true",
+        "local": "sd-1/controlnet/annotator/depth_anything/depth_anything_vits14.pth",
+    },
+}
+
+
+transform = Compose(
+    [
+        Resize(
+            width=518,
+            height=518,
+            resize_target=False,
+            keep_aspect_ratio=True,
+            ensure_multiple_of=14,
+            resize_method="lower_bound",
+            image_interpolation_method=cv2.INTER_CUBIC,
+        ),
+        NormalizeImage(mean=[0.485, 0.456, 0.406], std=[0.229, 0.224, 0.225]),
+        PrepareForNet(),
+    ]
+)
+
+
+class DepthAnythingDetector:
+    def __init__(self) -> None:
+        self.model = None
+        self.model_size: Union[Literal["large", "base", "small"], None] = None
+
+    def load_model(self, model_size=Literal["large", "base", "small"]):
+        DEPTH_ANYTHING_MODEL_PATH = pathlib.Path(config.models_path / DEPTH_ANYTHING_MODELS[model_size]["local"])
+        if not DEPTH_ANYTHING_MODEL_PATH.exists():
+            download_with_progress_bar(DEPTH_ANYTHING_MODELS[model_size]["url"], DEPTH_ANYTHING_MODEL_PATH)
+
+        if not self.model or model_size != self.model_size:
+            del self.model
+            self.model_size = model_size
+
+            if self.model_size == "small":
+                self.model = DPT_DINOv2(encoder="vits", features=64, out_channels=[48, 96, 192, 384], localhub=True)
+            if self.model_size == "base":
+                self.model = DPT_DINOv2(encoder="vitb", features=128, out_channels=[96, 192, 384, 768], localhub=True)
+            if self.model_size == "large":
+                self.model = DPT_DINOv2(
+                    encoder="vitl", features=256, out_channels=[256, 512, 1024, 1024], localhub=True
+                )
+
+            self.model.load_state_dict(torch.load(DEPTH_ANYTHING_MODEL_PATH.as_posix(), map_location="cpu"))
+            self.model.eval()
+
+        self.model.to(choose_torch_device())
+        return self.model
+
+    def to(self, device):
+        self.model.to(device)
+        return self
+
+    def __call__(self, image, offload=False):
+        image = np.array(image, dtype=np.uint8)
+        original_width, original_height = image.shape[:2]
+        image = image[:, :, ::-1] / 255.0
+
+        image_width, image_height = image.shape[:2]
+        image = transform({"image": image})["image"]
+        image = torch.from_numpy(image).unsqueeze(0).to(choose_torch_device())
+
+        with torch.no_grad():
+            depth = self.model(image)
+            depth = F.interpolate(depth[None], (image_height, image_width), mode="bilinear", align_corners=False)[0, 0]
+            depth = (depth - depth.min()) / (depth.max() - depth.min()) * 255.0
+
+        depth_map = repeat(depth, "h w -> h w 3").cpu().numpy().astype(np.uint8)
+        depth_map = Image.fromarray(depth_map)
+        depth_map = depth_map.resize((original_height, original_width))
+
+        if offload:
+            del self.model
+
+        return depth_map
diff --git a/invokeai/backend/image_util/depth_anything/model/blocks.py b/invokeai/backend/image_util/depth_anything/model/blocks.py
new file mode 100644
index 0000000000..4534f52237
--- /dev/null
+++ b/invokeai/backend/image_util/depth_anything/model/blocks.py
@@ -0,0 +1,145 @@
+import torch.nn as nn
+
+
+def _make_scratch(in_shape, out_shape, groups=1, expand=False):
+    scratch = nn.Module()
+
+    out_shape1 = out_shape
+    out_shape2 = out_shape
+    out_shape3 = out_shape
+    if len(in_shape) >= 4:
+        out_shape4 = out_shape
+
+    if expand:
+        out_shape1 = out_shape
+        out_shape2 = out_shape * 2
+        out_shape3 = out_shape * 4
+        if len(in_shape) >= 4:
+            out_shape4 = out_shape * 8
+
+    scratch.layer1_rn = nn.Conv2d(
+        in_shape[0], out_shape1, kernel_size=3, stride=1, padding=1, bias=False, groups=groups
+    )
+    scratch.layer2_rn = nn.Conv2d(
+        in_shape[1], out_shape2, kernel_size=3, stride=1, padding=1, bias=False, groups=groups
+    )
+    scratch.layer3_rn = nn.Conv2d(
+        in_shape[2], out_shape3, kernel_size=3, stride=1, padding=1, bias=False, groups=groups
+    )
+    if len(in_shape) >= 4:
+        scratch.layer4_rn = nn.Conv2d(
+            in_shape[3], out_shape4, kernel_size=3, stride=1, padding=1, bias=False, groups=groups
+        )
+
+    return scratch
+
+
+class ResidualConvUnit(nn.Module):
+    """Residual convolution module."""
+
+    def __init__(self, features, activation, bn):
+        """Init.
+
+        Args:
+            features (int): number of features
+        """
+        super().__init__()
+
+        self.bn = bn
+
+        self.groups = 1
+
+        self.conv1 = nn.Conv2d(features, features, kernel_size=3, stride=1, padding=1, bias=True, groups=self.groups)
+
+        self.conv2 = nn.Conv2d(features, features, kernel_size=3, stride=1, padding=1, bias=True, groups=self.groups)
+
+        if self.bn:
+            self.bn1 = nn.BatchNorm2d(features)
+            self.bn2 = nn.BatchNorm2d(features)
+
+        self.activation = activation
+
+        self.skip_add = nn.quantized.FloatFunctional()
+
+    def forward(self, x):
+        """Forward pass.
+
+        Args:
+            x (tensor): input
+
+        Returns:
+            tensor: output
+        """
+
+        out = self.activation(x)
+        out = self.conv1(out)
+        if self.bn:
+            out = self.bn1(out)
+
+        out = self.activation(out)
+        out = self.conv2(out)
+        if self.bn:
+            out = self.bn2(out)
+
+        if self.groups > 1:
+            out = self.conv_merge(out)
+
+        return self.skip_add.add(out, x)
+
+
+class FeatureFusionBlock(nn.Module):
+    """Feature fusion block."""
+
+    def __init__(self, features, activation, deconv=False, bn=False, expand=False, align_corners=True, size=None):
+        """Init.
+
+        Args:
+            features (int): number of features
+        """
+        super(FeatureFusionBlock, self).__init__()
+
+        self.deconv = deconv
+        self.align_corners = align_corners
+
+        self.groups = 1
+
+        self.expand = expand
+        out_features = features
+        if self.expand:
+            out_features = features // 2
+
+        self.out_conv = nn.Conv2d(features, out_features, kernel_size=1, stride=1, padding=0, bias=True, groups=1)
+
+        self.resConfUnit1 = ResidualConvUnit(features, activation, bn)
+        self.resConfUnit2 = ResidualConvUnit(features, activation, bn)
+
+        self.skip_add = nn.quantized.FloatFunctional()
+
+        self.size = size
+
+    def forward(self, *xs, size=None):
+        """Forward pass.
+
+        Returns:
+            tensor: output
+        """
+        output = xs[0]
+
+        if len(xs) == 2:
+            res = self.resConfUnit1(xs[1])
+            output = self.skip_add.add(output, res)
+
+        output = self.resConfUnit2(output)
+
+        if (size is None) and (self.size is None):
+            modifier = {"scale_factor": 2}
+        elif size is None:
+            modifier = {"size": self.size}
+        else:
+            modifier = {"size": size}
+
+        output = nn.functional.interpolate(output, **modifier, mode="bilinear", align_corners=self.align_corners)
+
+        output = self.out_conv(output)
+
+        return output
diff --git a/invokeai/backend/image_util/depth_anything/model/dpt.py b/invokeai/backend/image_util/depth_anything/model/dpt.py
new file mode 100644
index 0000000000..3be6f97fc4
--- /dev/null
+++ b/invokeai/backend/image_util/depth_anything/model/dpt.py
@@ -0,0 +1,186 @@
+from pathlib import Path
+
+import torch
+import torch.nn as nn
+import torch.nn.functional as F
+
+from .blocks import FeatureFusionBlock, _make_scratch
+
+torchhub_path = Path(__file__).parent.parent / "torchhub"
+
+
+def _make_fusion_block(features, use_bn, size=None):
+    return FeatureFusionBlock(
+        features,
+        nn.ReLU(False),
+        deconv=False,
+        bn=use_bn,
+        expand=False,
+        align_corners=True,
+        size=size,
+    )
+
+
+class DPTHead(nn.Module):
+    def __init__(
+        self, nclass, in_channels, features=256, use_bn=False, out_channels=[256, 512, 1024, 1024], use_clstoken=False
+    ):
+        super(DPTHead, self).__init__()
+
+        self.nclass = nclass
+        self.use_clstoken = use_clstoken
+
+        self.projects = nn.ModuleList(
+            [
+                nn.Conv2d(
+                    in_channels=in_channels,
+                    out_channels=out_channel,
+                    kernel_size=1,
+                    stride=1,
+                    padding=0,
+                )
+                for out_channel in out_channels
+            ]
+        )
+
+        self.resize_layers = nn.ModuleList(
+            [
+                nn.ConvTranspose2d(
+                    in_channels=out_channels[0], out_channels=out_channels[0], kernel_size=4, stride=4, padding=0
+                ),
+                nn.ConvTranspose2d(
+                    in_channels=out_channels[1], out_channels=out_channels[1], kernel_size=2, stride=2, padding=0
+                ),
+                nn.Identity(),
+                nn.Conv2d(
+                    in_channels=out_channels[3], out_channels=out_channels[3], kernel_size=3, stride=2, padding=1
+                ),
+            ]
+        )
+
+        if use_clstoken:
+            self.readout_projects = nn.ModuleList()
+            for _ in range(len(self.projects)):
+                self.readout_projects.append(nn.Sequential(nn.Linear(2 * in_channels, in_channels), nn.GELU()))
+
+        self.scratch = _make_scratch(
+            out_channels,
+            features,
+            groups=1,
+            expand=False,
+        )
+
+        self.scratch.stem_transpose = None
+
+        self.scratch.refinenet1 = _make_fusion_block(features, use_bn)
+        self.scratch.refinenet2 = _make_fusion_block(features, use_bn)
+        self.scratch.refinenet3 = _make_fusion_block(features, use_bn)
+        self.scratch.refinenet4 = _make_fusion_block(features, use_bn)
+
+        head_features_1 = features
+        head_features_2 = 32
+
+        if nclass > 1:
+            self.scratch.output_conv = nn.Sequential(
+                nn.Conv2d(head_features_1, head_features_1, kernel_size=3, stride=1, padding=1),
+                nn.ReLU(True),
+                nn.Conv2d(head_features_1, nclass, kernel_size=1, stride=1, padding=0),
+            )
+        else:
+            self.scratch.output_conv1 = nn.Conv2d(
+                head_features_1, head_features_1 // 2, kernel_size=3, stride=1, padding=1
+            )
+
+            self.scratch.output_conv2 = nn.Sequential(
+                nn.Conv2d(head_features_1 // 2, head_features_2, kernel_size=3, stride=1, padding=1),
+                nn.ReLU(True),
+                nn.Conv2d(head_features_2, 1, kernel_size=1, stride=1, padding=0),
+                nn.ReLU(True),
+                nn.Identity(),
+            )
+
+    def forward(self, out_features, patch_h, patch_w):
+        out = []
+        for i, x in enumerate(out_features):
+            if self.use_clstoken:
+                x, cls_token = x[0], x[1]
+                readout = cls_token.unsqueeze(1).expand_as(x)
+                x = self.readout_projects[i](torch.cat((x, readout), -1))
+            else:
+                x = x[0]
+
+            x = x.permute(0, 2, 1).reshape((x.shape[0], x.shape[-1], patch_h, patch_w))
+
+            x = self.projects[i](x)
+            x = self.resize_layers[i](x)
+
+            out.append(x)
+
+        layer_1, layer_2, layer_3, layer_4 = out
+
+        layer_1_rn = self.scratch.layer1_rn(layer_1)
+        layer_2_rn = self.scratch.layer2_rn(layer_2)
+        layer_3_rn = self.scratch.layer3_rn(layer_3)
+        layer_4_rn = self.scratch.layer4_rn(layer_4)
+
+        path_4 = self.scratch.refinenet4(layer_4_rn, size=layer_3_rn.shape[2:])
+        path_3 = self.scratch.refinenet3(path_4, layer_3_rn, size=layer_2_rn.shape[2:])
+        path_2 = self.scratch.refinenet2(path_3, layer_2_rn, size=layer_1_rn.shape[2:])
+        path_1 = self.scratch.refinenet1(path_2, layer_1_rn)
+
+        out = self.scratch.output_conv1(path_1)
+        out = F.interpolate(out, (int(patch_h * 14), int(patch_w * 14)), mode="bilinear", align_corners=True)
+        out = self.scratch.output_conv2(out)
+
+        return out
+
+
+class DPT_DINOv2(nn.Module):
+    def __init__(
+        self,
+        encoder="vitl",
+        features=256,
+        out_channels=[256, 512, 1024, 1024],
+        use_bn=False,
+        use_clstoken=False,
+        localhub=True,
+    ):
+        super(DPT_DINOv2, self).__init__()
+
+        assert encoder in ["vits", "vitb", "vitl"]
+
+        # # in case the Internet connection is not stable, please load the DINOv2 locally
+        # if localhub:
+        #     self.pretrained = torch.hub.load(
+        #         torchhub_path / "facebookresearch_dinov2_main",
+        #         "dinov2_{:}14".format(encoder),
+        #         source="local",
+        #         pretrained=False,
+        #     )
+        # else:
+        #     self.pretrained = torch.hub.load(
+        #         "facebookresearch/dinov2",
+        #         "dinov2_{:}14".format(encoder),
+        #     )
+
+        self.pretrained = torch.hub.load(
+            "facebookresearch/dinov2",
+            "dinov2_{:}14".format(encoder),
+        )
+
+        dim = self.pretrained.blocks[0].attn.qkv.in_features
+
+        self.depth_head = DPTHead(1, dim, features, use_bn, out_channels=out_channels, use_clstoken=use_clstoken)
+
+    def forward(self, x):
+        h, w = x.shape[-2:]
+
+        features = self.pretrained.get_intermediate_layers(x, 4, return_class_token=True)
+
+        patch_h, patch_w = h // 14, w // 14
+
+        depth = self.depth_head(features, patch_h, patch_w)
+        depth = F.interpolate(depth, size=(h, w), mode="bilinear", align_corners=True)
+        depth = F.relu(depth)
+
+        return depth.squeeze(1)
diff --git a/invokeai/backend/image_util/depth_anything/utilities/util.py b/invokeai/backend/image_util/depth_anything/utilities/util.py
new file mode 100644
index 0000000000..5362ef6c3e
--- /dev/null
+++ b/invokeai/backend/image_util/depth_anything/utilities/util.py
@@ -0,0 +1,227 @@
+import math
+
+import cv2
+import numpy as np
+import torch
+import torch.nn.functional as F
+
+
+def apply_min_size(sample, size, image_interpolation_method=cv2.INTER_AREA):
+    """Rezise the sample to ensure the given size. Keeps aspect ratio.
+
+    Args:
+        sample (dict): sample
+        size (tuple): image size
+
+    Returns:
+        tuple: new size
+    """
+    shape = list(sample["disparity"].shape)
+
+    if shape[0] >= size[0] and shape[1] >= size[1]:
+        return sample
+
+    scale = [0, 0]
+    scale[0] = size[0] / shape[0]
+    scale[1] = size[1] / shape[1]
+
+    scale = max(scale)
+
+    shape[0] = math.ceil(scale * shape[0])
+    shape[1] = math.ceil(scale * shape[1])
+
+    # resize
+    sample["image"] = cv2.resize(sample["image"], tuple(shape[::-1]), interpolation=image_interpolation_method)
+
+    sample["disparity"] = cv2.resize(sample["disparity"], tuple(shape[::-1]), interpolation=cv2.INTER_NEAREST)
+    sample["mask"] = cv2.resize(
+        sample["mask"].astype(np.float32),
+        tuple(shape[::-1]),
+        interpolation=cv2.INTER_NEAREST,
+    )
+    sample["mask"] = sample["mask"].astype(bool)
+
+    return tuple(shape)
+
+
+class Resize(object):
+    """Resize sample to given size (width, height)."""
+
+    def __init__(
+        self,
+        width,
+        height,
+        resize_target=True,
+        keep_aspect_ratio=False,
+        ensure_multiple_of=1,
+        resize_method="lower_bound",
+        image_interpolation_method=cv2.INTER_AREA,
+    ):
+        """Init.
+
+        Args:
+            width (int): desired output width
+            height (int): desired output height
+            resize_target (bool, optional):
+                True: Resize the full sample (image, mask, target).
+                False: Resize image only.
+                Defaults to True.
+            keep_aspect_ratio (bool, optional):
+                True: Keep the aspect ratio of the input sample.
+                Output sample might not have the given width and height, and
+                resize behaviour depends on the parameter 'resize_method'.
+                Defaults to False.
+            ensure_multiple_of (int, optional):
+                Output width and height is constrained to be multiple of this parameter.
+                Defaults to 1.
+            resize_method (str, optional):
+                "lower_bound": Output will be at least as large as the given size.
+                "upper_bound": Output will be at max as large as the given size. (Output size might be smaller
+                    than given size.)
+                "minimal": Scale as least as possible.  (Output size might be smaller than given size.)
+                Defaults to "lower_bound".
+        """
+        self.__width = width
+        self.__height = height
+
+        self.__resize_target = resize_target
+        self.__keep_aspect_ratio = keep_aspect_ratio
+        self.__multiple_of = ensure_multiple_of
+        self.__resize_method = resize_method
+        self.__image_interpolation_method = image_interpolation_method
+
+    def constrain_to_multiple_of(self, x, min_val=0, max_val=None):
+        y = (np.round(x / self.__multiple_of) * self.__multiple_of).astype(int)
+
+        if max_val is not None and y > max_val:
+            y = (np.floor(x / self.__multiple_of) * self.__multiple_of).astype(int)
+
+        if y < min_val:
+            y = (np.ceil(x / self.__multiple_of) * self.__multiple_of).astype(int)
+
+        return y
+
+    def get_size(self, width, height):
+        # determine new height and width
+        scale_height = self.__height / height
+        scale_width = self.__width / width
+
+        if self.__keep_aspect_ratio:
+            if self.__resize_method == "lower_bound":
+                # scale such that output size is lower bound
+                if scale_width > scale_height:
+                    # fit width
+                    scale_height = scale_width
+                else:
+                    # fit height
+                    scale_width = scale_height
+            elif self.__resize_method == "upper_bound":
+                # scale such that output size is upper bound
+                if scale_width < scale_height:
+                    # fit width
+                    scale_height = scale_width
+                else:
+                    # fit height
+                    scale_width = scale_height
+            elif self.__resize_method == "minimal":
+                # scale as least as possbile
+                if abs(1 - scale_width) < abs(1 - scale_height):
+                    # fit width
+                    scale_height = scale_width
+                else:
+                    # fit height
+                    scale_width = scale_height
+            else:
+                raise ValueError(f"resize_method {self.__resize_method} not implemented")
+
+        if self.__resize_method == "lower_bound":
+            new_height = self.constrain_to_multiple_of(scale_height * height, min_val=self.__height)
+            new_width = self.constrain_to_multiple_of(scale_width * width, min_val=self.__width)
+        elif self.__resize_method == "upper_bound":
+            new_height = self.constrain_to_multiple_of(scale_height * height, max_val=self.__height)
+            new_width = self.constrain_to_multiple_of(scale_width * width, max_val=self.__width)
+        elif self.__resize_method == "minimal":
+            new_height = self.constrain_to_multiple_of(scale_height * height)
+            new_width = self.constrain_to_multiple_of(scale_width * width)
+        else:
+            raise ValueError(f"resize_method {self.__resize_method} not implemented")
+
+        return (new_width, new_height)
+
+    def __call__(self, sample):
+        width, height = self.get_size(sample["image"].shape[1], sample["image"].shape[0])
+
+        # resize sample
+        sample["image"] = cv2.resize(
+            sample["image"],
+            (width, height),
+            interpolation=self.__image_interpolation_method,
+        )
+
+        if self.__resize_target:
+            if "disparity" in sample:
+                sample["disparity"] = cv2.resize(
+                    sample["disparity"],
+                    (width, height),
+                    interpolation=cv2.INTER_NEAREST,
+                )
+
+            if "depth" in sample:
+                sample["depth"] = cv2.resize(sample["depth"], (width, height), interpolation=cv2.INTER_NEAREST)
+
+            if "semseg_mask" in sample:
+                # sample["semseg_mask"] = cv2.resize(
+                #     sample["semseg_mask"], (width, height), interpolation=cv2.INTER_NEAREST
+                # )
+                sample["semseg_mask"] = F.interpolate(
+                    torch.from_numpy(sample["semseg_mask"]).float()[None, None, ...], (height, width), mode="nearest"
+                ).numpy()[0, 0]
+
+            if "mask" in sample:
+                sample["mask"] = cv2.resize(
+                    sample["mask"].astype(np.float32),
+                    (width, height),
+                    interpolation=cv2.INTER_NEAREST,
+                )
+                # sample["mask"] = sample["mask"].astype(bool)
+
+        # print(sample['image'].shape, sample['depth'].shape)
+        return sample
+
+
+class NormalizeImage(object):
+    """Normlize image by given mean and std."""
+
+    def __init__(self, mean, std):
+        self.__mean = mean
+        self.__std = std
+
+    def __call__(self, sample):
+        sample["image"] = (sample["image"] - self.__mean) / self.__std
+
+        return sample
+
+
+class PrepareForNet(object):
+    """Prepare sample for usage as network input."""
+
+    def __init__(self):
+        pass
+
+    def __call__(self, sample):
+        image = np.transpose(sample["image"], (2, 0, 1))
+        sample["image"] = np.ascontiguousarray(image).astype(np.float32)
+
+        if "mask" in sample:
+            sample["mask"] = sample["mask"].astype(np.float32)
+            sample["mask"] = np.ascontiguousarray(sample["mask"])
+
+        if "depth" in sample:
+            depth = sample["depth"].astype(np.float32)
+            sample["depth"] = np.ascontiguousarray(depth)
+
+        if "semseg_mask" in sample:
+            sample["semseg_mask"] = sample["semseg_mask"].astype(np.float32)
+            sample["semseg_mask"] = np.ascontiguousarray(sample["semseg_mask"])
+
+        return sample

From c859eb865e4aa93a8ce71c6a1b1e1b42888e1007 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Tue, 23 Jan 2024 02:50:20 +0530
Subject: [PATCH 023/133] fix: lint & other minor issues

---
 .../backend/image_util/depth_anything/__init__.py   |  8 +++-----
 .../backend/image_util/depth_anything/model/dpt.py  | 13 +++++--------
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/invokeai/backend/image_util/depth_anything/__init__.py b/invokeai/backend/image_util/depth_anything/__init__.py
index 626e48a87a..37adaa3004 100644
--- a/invokeai/backend/image_util/depth_anything/__init__.py
+++ b/invokeai/backend/image_util/depth_anything/__init__.py
@@ -65,13 +65,11 @@ class DepthAnythingDetector:
             self.model_size = model_size
 
             if self.model_size == "small":
-                self.model = DPT_DINOv2(encoder="vits", features=64, out_channels=[48, 96, 192, 384], localhub=True)
+                self.model = DPT_DINOv2(encoder="vits", features=64, out_channels=[48, 96, 192, 384])
             if self.model_size == "base":
-                self.model = DPT_DINOv2(encoder="vitb", features=128, out_channels=[96, 192, 384, 768], localhub=True)
+                self.model = DPT_DINOv2(encoder="vitb", features=128, out_channels=[96, 192, 384, 768])
             if self.model_size == "large":
-                self.model = DPT_DINOv2(
-                    encoder="vitl", features=256, out_channels=[256, 512, 1024, 1024], localhub=True
-                )
+                self.model = DPT_DINOv2(encoder="vitl", features=256, out_channels=[256, 512, 1024, 1024])
 
             self.model.load_state_dict(torch.load(DEPTH_ANYTHING_MODEL_PATH.as_posix(), map_location="cpu"))
             self.model.eval()
diff --git a/invokeai/backend/image_util/depth_anything/model/dpt.py b/invokeai/backend/image_util/depth_anything/model/dpt.py
index 3be6f97fc4..e1101b3c39 100644
--- a/invokeai/backend/image_util/depth_anything/model/dpt.py
+++ b/invokeai/backend/image_util/depth_anything/model/dpt.py
@@ -22,9 +22,7 @@ def _make_fusion_block(features, use_bn, size=None):
 
 
 class DPTHead(nn.Module):
-    def __init__(
-        self, nclass, in_channels, features=256, use_bn=False, out_channels=[256, 512, 1024, 1024], use_clstoken=False
-    ):
+    def __init__(self, nclass, in_channels, features, out_channels, use_bn=False, use_clstoken=False):
         super(DPTHead, self).__init__()
 
         self.nclass = nclass
@@ -138,19 +136,18 @@ class DPTHead(nn.Module):
 class DPT_DINOv2(nn.Module):
     def __init__(
         self,
+        features,
+        out_channels,
         encoder="vitl",
-        features=256,
-        out_channels=[256, 512, 1024, 1024],
         use_bn=False,
         use_clstoken=False,
-        localhub=True,
     ):
         super(DPT_DINOv2, self).__init__()
 
         assert encoder in ["vits", "vitb", "vitl"]
 
         # # in case the Internet connection is not stable, please load the DINOv2 locally
-        # if localhub:
+        # if use_local:
         #     self.pretrained = torch.hub.load(
         #         torchhub_path / "facebookresearch_dinov2_main",
         #         "dinov2_{:}14".format(encoder),
@@ -170,7 +167,7 @@ class DPT_DINOv2(nn.Module):
 
         dim = self.pretrained.blocks[0].attn.qkv.in_features
 
-        self.depth_head = DPTHead(1, dim, features, use_bn, out_channels=out_channels, use_clstoken=use_clstoken)
+        self.depth_head = DPTHead(1, dim, features, out_channels=out_channels, use_bn=use_bn, use_clstoken=use_clstoken)
 
     def forward(self, x):
         h, w = x.shape[-2:]

From 13123daa3f863ce73c4a952e6122418e5ab9f3b8 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Tue, 23 Jan 2024 03:58:24 +0530
Subject: [PATCH 024/133] feat: Add DepthAnything to Linear UI

---
 invokeai/frontend/web/public/locales/en.json  |   6 +
 .../ControlAdapterProcessorComponent.tsx      |  11 +
 .../processors/DepthAnyThingProcessor.tsx     |  72 ++
 .../controlAdapters/store/constants.ts        |  15 +
 .../features/controlAdapters/store/types.ts   |  33 +
 .../frontend/web/src/services/api/schema.ts   | 852 ++++++++++++++++--
 .../frontend/web/src/services/api/types.ts    |   2 +
 7 files changed, 893 insertions(+), 98 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/controlAdapters/components/processors/DepthAnyThingProcessor.tsx

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 4aa31ede8a..be231684b4 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -224,6 +224,7 @@
         "amult": "a_mult",
         "autoConfigure": "Auto configure processor",
         "balanced": "Balanced",
+        "base": "Base",
         "beginEndStepPercent": "Begin / End Step Percentage",
         "bgth": "bg_th",
         "canny": "Canny",
@@ -237,6 +238,8 @@
         "controlMode": "Control Mode",
         "crop": "Crop",
         "delete": "Delete",
+        "depthAnything": "Depth Anything",
+        "depthAnythingDescription": "Depth map generation using the Depth Anything technique",
         "depthMidas": "Depth (Midas)",
         "depthMidasDescription": "Depth map generation using Midas",
         "depthZoe": "Depth (Zoe)",
@@ -256,6 +259,7 @@
         "colorMapTileSize": "Tile Size",
         "importImageFromCanvas": "Import Image From Canvas",
         "importMaskFromCanvas": "Import Mask From Canvas",
+        "large": "Large",
         "lineart": "Lineart",
         "lineartAnime": "Lineart Anime",
         "lineartAnimeDescription": "Anime-style lineart processing",
@@ -268,6 +272,7 @@
         "minConfidence": "Min Confidence",
         "mlsd": "M-LSD",
         "mlsdDescription": "Minimalist Line Segment Detector",
+        "modelSize": "Model Size",
         "none": "None",
         "noneDescription": "No processing applied",
         "normalBae": "Normal BAE",
@@ -288,6 +293,7 @@
         "selectModel": "Select a model",
         "setControlImageDimensions": "Set Control Image Dimensions To W/H",
         "showAdvanced": "Show Advanced",
+        "small": "Small",
         "toggleControlNet": "Toggle this ControlNet",
         "w": "W",
         "weight": "Weight",
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterProcessorComponent.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterProcessorComponent.tsx
index 79ef4c0a0a..45c4b7fac9 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterProcessorComponent.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterProcessorComponent.tsx
@@ -5,6 +5,7 @@ import { memo } from 'react';
 import CannyProcessor from './processors/CannyProcessor';
 import ColorMapProcessor from './processors/ColorMapProcessor';
 import ContentShuffleProcessor from './processors/ContentShuffleProcessor';
+import DepthAnyThingProcessor from './processors/DepthAnyThingProcessor';
 import HedProcessor from './processors/HedProcessor';
 import LineartAnimeProcessor from './processors/LineartAnimeProcessor';
 import LineartProcessor from './processors/LineartProcessor';
@@ -48,6 +49,16 @@ const ControlAdapterProcessorComponent = ({ id }: Props) => {
     );
   }
 
+  if (processorNode.type === 'depth_anything_image_processor') {
+    return (
+      <DepthAnyThingProcessor
+        controlNetId={id}
+        processorNode={processorNode}
+        isEnabled={isEnabled}
+      />
+    );
+  }
+
   if (processorNode.type === 'hed_image_processor') {
     return (
       <HedProcessor
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/DepthAnyThingProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/DepthAnyThingProcessor.tsx
new file mode 100644
index 0000000000..c0e69950c1
--- /dev/null
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/DepthAnyThingProcessor.tsx
@@ -0,0 +1,72 @@
+import type { ComboboxOnChange } from '@invoke-ai/ui';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
+import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
+import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
+import type {
+  DepthAnythingModelSize,
+  RequiredDepthAnythingImageProcessorInvocation,
+} from 'features/controlAdapters/store/types';
+import { isDepthAnythingModelSize } from 'features/controlAdapters/store/types';
+import { memo, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ProcessorWrapper from './common/ProcessorWrapper';
+
+const DEFAULTS = CONTROLNET_PROCESSORS.midas_depth_image_processor
+  .default as RequiredDepthAnythingImageProcessorInvocation;
+
+type Props = {
+  controlNetId: string;
+  processorNode: RequiredDepthAnythingImageProcessorInvocation;
+  isEnabled: boolean;
+};
+
+const DepthAnythingProcessor = (props: Props) => {
+  const { controlNetId, processorNode, isEnabled } = props;
+  const { model_size } = processorNode;
+  const processorChanged = useProcessorNodeChanged();
+
+  const { t } = useTranslation();
+
+  const handleModelSizeChange = useCallback<ComboboxOnChange>(
+    (v) => {
+      if (!isDepthAnythingModelSize(v?.value)) {
+        return;
+      }
+      processorChanged(controlNetId, {
+        model_size: v.value,
+      });
+    },
+    [controlNetId, processorChanged]
+  );
+
+  const options: { label: string; value: DepthAnythingModelSize }[] = useMemo(
+    () => [
+      { label: t('controlnet.large'), value: 'large' },
+      { label: t('controlnet.base'), value: 'base' },
+      { label: t('controlnet.small'), value: 'small' },
+    ],
+    [t]
+  );
+
+  const value = useMemo(
+    () => options.filter((o) => o.value === model_size)[0],
+    [options, model_size]
+  );
+
+  return (
+    <ProcessorWrapper>
+      <FormControl isDisabled={!isEnabled}>
+        <FormLabel>{t('controlnet.modelSize')}</FormLabel>
+        <Combobox
+          value={value}
+          defaultInputValue={DEFAULTS.model_size}
+          options={options}
+          onChange={handleModelSizeChange}
+        />
+      </FormControl>
+    </ProcessorWrapper>
+  );
+};
+
+export default memo(DepthAnythingProcessor);
diff --git a/invokeai/frontend/web/src/features/controlAdapters/store/constants.ts b/invokeai/frontend/web/src/features/controlAdapters/store/constants.ts
index b7647c9f0d..2b4124cbb1 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/store/constants.ts
+++ b/invokeai/frontend/web/src/features/controlAdapters/store/constants.ts
@@ -83,6 +83,21 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
       f: 256,
     },
   },
+  depth_anything_image_processor: {
+    type: 'depth_anything_image_processor',
+    get label() {
+      return i18n.t('controlnet.depthAnything');
+    },
+    get description() {
+      return i18n.t('controlnet.depthAnythingDescription');
+    },
+    default: {
+      id: 'depth_anything_image_processor',
+      type: 'depth_anything_image_processor',
+      model_size: 'large',
+      offload: false,
+    },
+  },
   hed_image_processor: {
     type: 'hed_image_processor',
     get label() {
diff --git a/invokeai/frontend/web/src/features/controlAdapters/store/types.ts b/invokeai/frontend/web/src/features/controlAdapters/store/types.ts
index 8d391a9c08..0cd6c9b5c6 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/store/types.ts
+++ b/invokeai/frontend/web/src/features/controlAdapters/store/types.ts
@@ -10,6 +10,7 @@ import type {
   CannyImageProcessorInvocation,
   ColorMapImageProcessorInvocation,
   ContentShuffleImageProcessorInvocation,
+  DepthAnythingImageProcessorInvocation,
   HedImageProcessorInvocation,
   LineartAnimeImageProcessorInvocation,
   LineartImageProcessorInvocation,
@@ -31,6 +32,7 @@ export type ControlAdapterProcessorNode =
   | CannyImageProcessorInvocation
   | ColorMapImageProcessorInvocation
   | ContentShuffleImageProcessorInvocation
+  | DepthAnythingImageProcessorInvocation
   | HedImageProcessorInvocation
   | LineartAnimeImageProcessorInvocation
   | LineartImageProcessorInvocation
@@ -73,6 +75,20 @@ export type RequiredContentShuffleImageProcessorInvocation = O.Required<
   'type' | 'detect_resolution' | 'image_resolution' | 'w' | 'h' | 'f'
 >;
 
+/**
+ * The DepthAnything processor node, with parameters flagged as required
+ */
+export type RequiredDepthAnythingImageProcessorInvocation = O.Required<
+  DepthAnythingImageProcessorInvocation,
+  'type' | 'model_size' | 'offload'
+>;
+
+export const zDepthAnythingModelSize = z.enum(['large', 'base', 'small']);
+export type DepthAnythingModelSize = z.infer<typeof zDepthAnythingModelSize>;
+export const isDepthAnythingModelSize = (
+  v: unknown
+): v is DepthAnythingModelSize => zDepthAnythingModelSize.safeParse(v).success;
+
 /**
  * The HED processor node, with parameters flagged as required
  */
@@ -161,6 +177,7 @@ export type RequiredControlAdapterProcessorNode =
       | RequiredCannyImageProcessorInvocation
       | RequiredColorMapImageProcessorInvocation
       | RequiredContentShuffleImageProcessorInvocation
+      | RequiredDepthAnythingImageProcessorInvocation
       | RequiredHedImageProcessorInvocation
       | RequiredLineartAnimeImageProcessorInvocation
       | RequiredLineartImageProcessorInvocation
@@ -219,6 +236,22 @@ export const isContentShuffleImageProcessorInvocation = (
   return false;
 };
 
+/**
+ * Type guard for DepthAnythingImageProcessorInvocation
+ */
+export const isDepthAnythingImageProcessorInvocation = (
+  obj: unknown
+): obj is DepthAnythingImageProcessorInvocation => {
+  if (
+    isObject(obj) &&
+    'type' in obj &&
+    obj.type === 'depth_anything_image_processor'
+  ) {
+    return true;
+  }
+  return false;
+};
+
 /**
  * Type guard for HedImageprocessorInvocation
  */
diff --git a/invokeai/frontend/web/src/services/api/schema.ts b/invokeai/frontend/web/src/services/api/schema.ts
index 92987c2a05..bade77e5bf 100644
--- a/invokeai/frontend/web/src/services/api/schema.ts
+++ b/invokeai/frontend/web/src/services/api/schema.ts
@@ -112,6 +112,34 @@ export type paths = {
      */
     patch: operations["update_model_record"];
   };
+  "/api/v1/model/record/meta": {
+    /**
+     * List Model Summary
+     * @description Gets a page of model summary data.
+     */
+    get: operations["list_model_summary"];
+  };
+  "/api/v1/model/record/meta/i/{key}": {
+    /**
+     * Get Model Metadata
+     * @description Get a model metadata object.
+     */
+    get: operations["get_model_metadata"];
+  };
+  "/api/v1/model/record/tags": {
+    /**
+     * List Tags
+     * @description Get a unique set of all the model tags.
+     */
+    get: operations["list_tags"];
+  };
+  "/api/v1/model/record/tags/search": {
+    /**
+     * Search By Metadata Tags
+     * @description Get a list of models.
+     */
+    get: operations["search_by_metadata_tags"];
+  };
   "/api/v1/model/record/i/": {
     /**
      * Add Model Record
@@ -123,9 +151,6 @@ export type paths = {
     /**
      * List Model Install Jobs
      * @description Return list of model install jobs.
-     *
-     * If the optional 'source' argument is provided, then the list will be filtered
-     * for partial string matches against the install source.
      */
     get: operations["list_model_install_jobs"];
     /**
@@ -175,7 +200,7 @@ export type paths = {
      * Installation occurs in the background. Either use list_model_install_jobs()
      * to poll for completion, or listen on the event bus for the following events:
      *
-     *   "model_install_started"
+     *   "model_install_running"
      *   "model_install_completed"
      *   "model_install_error"
      *
@@ -191,10 +216,24 @@ export type paths = {
      */
     patch: operations["prune_model_install_jobs"];
   };
+  "/api/v1/model/record/import/{id}": {
+    /**
+     * Get Model Install Job
+     * @description Return model install job corresponding to the given source.
+     */
+    get: operations["get_model_install_job"];
+    /**
+     * Cancel Model Install Job
+     * @description Cancel the model install job(s) corresponding to the given job ID.
+     */
+    delete: operations["cancel_model_install_job"];
+  };
   "/api/v1/model/record/sync": {
     /**
      * Sync Models To Config
-     * @description Traverse the models and autoimport directories. Model files without a corresponding
+     * @description Traverse the models and autoimport directories.
+     *
+     * Model files without a corresponding
      * record in the database are added. Orphan records without a models file are deleted.
      */
     patch: operations["sync_models_to_config"];
@@ -736,46 +775,31 @@ export type components = {
       version: string;
     };
     /**
-     * Average Images
-     * @description Average images
+     * BaseMetadata
+     * @description Adds typing data for discriminated union.
      */
-    AverageImagesInvocation: {
-      /** @description Optional metadata to be saved with the image */
-      metadata?: components["schemas"]["MetadataField"] | null;
+    BaseMetadata: {
       /**
-       * Id
-       * @description The id of this instance of an invocation. Must be unique among all instances of invocations.
+       * Name
+       * @description model's name
        */
-      id: string;
+      name: string;
       /**
-       * Is Intermediate
-       * @description Whether or not this is an intermediate invocation.
-       * @default false
+       * Author
+       * @description model's author
        */
-      is_intermediate?: boolean;
+      author: string;
       /**
-       * Use Cache
-       * @description Whether or not to use the cache
-       * @default true
+       * Tags
+       * @description tags provided by model source
        */
-      use_cache?: boolean;
+      tags: string[];
       /**
-       * Images
-       * @description The collection of images to average
-       */
-      images?: components["schemas"]["ImageField"][];
-      /**
-       * Gamma
-       * @description Gamma for color correcting before/after blending
-       * @default 2.2
-       */
-      gamma?: number;
-      /**
-       * type
-       * @default average_images
+       * Type
+       * @default basemetadata
        * @constant
        */
-      type: "average_images";
+      type?: "basemetadata";
     };
     /** Batch */
     Batch: {
@@ -1137,7 +1161,7 @@ export type components = {
     /** Body_import_model_record */
     Body_import_model_record: {
       /** Source */
-      source: components["schemas"]["LocalModelSource"] | components["schemas"]["HFModelSource"] | components["schemas"]["URLModelSource"];
+      source: components["schemas"]["LocalModelSource"] | components["schemas"]["HFModelSource"] | components["schemas"]["CivitaiModelSource"] | components["schemas"]["URLModelSource"];
       /**
        * Config
        * @description Dict of fields that override auto-probed values in the model config record, such as name, description and prediction_type
@@ -1747,6 +1771,136 @@ export type components = {
        */
       type: "img_pad_crop";
     };
+    /**
+     * CivitaiMetadata
+     * @description Extended metadata fields provided by Civitai.
+     */
+    CivitaiMetadata: {
+      /**
+       * Name
+       * @description model's name
+       */
+      name: string;
+      /**
+       * Author
+       * @description model's author
+       */
+      author: string;
+      /**
+       * Tags
+       * @description tags provided by model source
+       */
+      tags: string[];
+      /**
+       * Files
+       * @description model files and their sizes
+       */
+      files?: components["schemas"]["RemoteModelFile"][];
+      /**
+       * Type
+       * @default civitai
+       * @constant
+       */
+      type?: "civitai";
+      /**
+       * Id
+       * @description Civitai version identifier
+       */
+      id: number;
+      /**
+       * Version Name
+       * @description Version identifier, such as 'V2-alpha'
+       */
+      version_name: string;
+      /**
+       * Version Id
+       * @description Civitai model version identifier
+       */
+      version_id: number;
+      /**
+       * Created
+       * Format: date-time
+       * @description date the model was created
+       */
+      created: string;
+      /**
+       * Updated
+       * Format: date-time
+       * @description date the model was last modified
+       */
+      updated: string;
+      /**
+       * Published
+       * Format: date-time
+       * @description date the model was published to Civitai
+       */
+      published: string;
+      /**
+       * Description
+       * @description text description of model; may contain HTML
+       */
+      description: string;
+      /**
+       * Version Description
+       * @description text description of the model's reversion; usually change history; may contain HTML
+       */
+      version_description: string;
+      /**
+       * Nsfw
+       * @description whether the model tends to generate NSFW content
+       * @default false
+       */
+      nsfw?: boolean;
+      /** @description license terms */
+      restrictions?: components["schemas"]["LicenseRestrictions"];
+      /**
+       * Trained Words
+       * @description words to trigger the model
+       */
+      trained_words?: string[];
+      /**
+       * Download Url
+       * Format: uri
+       * @description download URL for this model
+       */
+      download_url: string;
+      /**
+       * Base Model Trained On
+       * @description base model on which this model was trained (currently not an enum)
+       */
+      base_model_trained_on: string;
+      /**
+       * Thumbnail Url
+       * @description a thumbnail image for this model
+       */
+      thumbnail_url?: string | null;
+      /**
+       * Weight Minmax
+       * @description minimum and maximum slider values for a LoRA or other secondary model
+       * @default [
+       *   -1,
+       *   2
+       * ]
+       */
+      weight_minmax?: [number, number];
+    };
+    /**
+     * CivitaiModelSource
+     * @description A Civitai version id, with optional variant and access token.
+     */
+    CivitaiModelSource: {
+      /** Version Id */
+      version_id: number;
+      variant?: components["schemas"]["ModelRepoVariant"] | null;
+      /** Access Token */
+      access_token?: string | null;
+      /**
+       * Type
+       * @default civitai
+       * @constant
+       */
+      type?: "civitai";
+    };
     /**
      * ClearResult
      * @description Result of clearing the session queue
@@ -2065,6 +2219,12 @@ export type components = {
        */
       type: "color_output";
     };
+    /**
+     * CommercialUsage
+     * @description Type of commercial usage allowed.
+     * @enum {string}
+     */
+    CommercialUsage: "None" | "Image" | "Rent" | "RentCivit" | "Sell";
     /**
      * Prompt
      * @description Parse prompt using compel package to conditioning.
@@ -2993,7 +3153,7 @@ export type components = {
        */
       t2i_adapter?: components["schemas"]["T2IAdapterField"] | components["schemas"]["T2IAdapterField"][] | null;
       /**
-       * Cfg Rescale Multiplier
+       * CFG Rescale Multiplier
        * @description Rescale multiplier for CFG guidance, used for models trained with zero-terminal SNR
        * @default 0
        */
@@ -3039,6 +3199,51 @@ export type components = {
        */
       type: "denoise_mask_output";
     };
+    /**
+     * Depth Anything Processor
+     * @description Generates a depth map based on the Depth Anything algorithm
+     */
+    DepthAnythingImageProcessorInvocation: {
+      /** @description Optional metadata to be saved with the image */
+      metadata?: components["schemas"]["MetadataField"] | null;
+      /**
+       * Id
+       * @description The id of this instance of an invocation. Must be unique among all instances of invocations.
+       */
+      id: string;
+      /**
+       * Is Intermediate
+       * @description Whether or not this is an intermediate invocation.
+       * @default false
+       */
+      is_intermediate?: boolean;
+      /**
+       * Use Cache
+       * @description Whether or not to use the cache
+       * @default true
+       */
+      use_cache?: boolean;
+      /** @description The image to process */
+      image?: components["schemas"]["ImageField"];
+      /**
+       * Model Size
+       * @description The size of the depth model to use
+       * @default large
+       * @enum {string}
+       */
+      model_size?: "large" | "base" | "small";
+      /**
+       * Offload
+       * @default false
+       */
+      offload?: boolean;
+      /**
+       * type
+       * @default depth_anything_image_processor
+       * @constant
+       */
+      type: "depth_anything_image_processor";
+    };
     /**
      * Divide Integers
      * @description Divides two numbers
@@ -3134,6 +3339,11 @@ export type components = {
        * @description Timestamp for when the download job ende1d (completed or errored)
        */
       job_ended?: string | null;
+      /**
+       * Content Type
+       * @description Content type of downloaded file
+       */
+      content_type?: string | null;
       /**
        * Bytes
        * @description Bytes downloaded so far
@@ -3908,7 +4118,7 @@ export type components = {
        * @description The nodes in this graph
        */
       nodes?: {
-        [key: string]: components["schemas"]["ImageInverseLerpInvocation"] | components["schemas"]["HedImageProcessorInvocation"] | components["schemas"]["MidasDepthImageProcessorInvocation"] | components["schemas"]["ScaleLatentsInvocation"] | components["schemas"]["ColorCorrectInvocation"] | components["schemas"]["LineartAnimeImageProcessorInvocation"] | components["schemas"]["IntegerCollectionInvocation"] | components["schemas"]["MergeTilesToImageInvocation"] | components["schemas"]["FloatMathInvocation"] | components["schemas"]["ZoeDepthImageProcessorInvocation"] | components["schemas"]["ImageToLatentsInvocation"] | components["schemas"]["ImageChannelInvocation"] | components["schemas"]["ConditioningInvocation"] | components["schemas"]["BlendLatentsInvocation"] | components["schemas"]["MaskEdgeInvocation"] | components["schemas"]["BooleanInvocation"] | components["schemas"]["CollectInvocation"] | components["schemas"]["VaeLoaderInvocation"] | components["schemas"]["CvInpaintInvocation"] | components["schemas"]["FloatCollectionInvocation"] | components["schemas"]["IntegerMathInvocation"] | components["schemas"]["StringSplitInvocation"] | components["schemas"]["ESRGANInvocation"] | components["schemas"]["StringCollectionInvocation"] | components["schemas"]["CalculateImageTilesInvocation"] | components["schemas"]["LoraLoaderInvocation"] | components["schemas"]["MediapipeFaceProcessorInvocation"] | components["schemas"]["ImageInvocation"] | components["schemas"]["CompelInvocation"] | components["schemas"]["StringSplitNegInvocation"] | components["schemas"]["ConditioningCollectionInvocation"] | components["schemas"]["OnnxModelLoaderInvocation"] | components["schemas"]["FloatInvocation"] | components["schemas"]["ONNXLatentsToImageInvocation"] | components["schemas"]["LatentsCollectionInvocation"] | components["schemas"]["ImageCollectionInvocation"] | components["schemas"]["SchedulerInvocation"] | components["schemas"]["ImageNSFWBlurInvocation"] | components["schemas"]["CreateDenoiseMaskInvocation"] | components["schemas"]["LinearUIOutputInvocation"] | components["schemas"]["StringJoinInvocation"] | components["schemas"]["ImageChannelMultiplyInvocation"] | components["schemas"]["FloatToIntegerInvocation"] | components["schemas"]["StringInvocation"] | components["schemas"]["SDXLLoraLoaderInvocation"] | components["schemas"]["ImageMultiplyInvocation"] | components["schemas"]["InfillPatchMatchInvocation"] | components["schemas"]["CropLatentsCoreInvocation"] | components["schemas"]["ColorMapImageProcessorInvocation"] | components["schemas"]["SDXLRefinerCompelPromptInvocation"] | components["schemas"]["ImageBlurInvocation"] | components["schemas"]["ClipSkipInvocation"] | components["schemas"]["NormalbaeImageProcessorInvocation"] | components["schemas"]["InfillColorInvocation"] | components["schemas"]["DenoiseLatentsInvocation"] | components["schemas"]["ControlNetInvocation"] | components["schemas"]["IPAdapterInvocation"] | components["schemas"]["CoreMetadataInvocation"] | components["schemas"]["ImageLerpInvocation"] | components["schemas"]["SubtractInvocation"] | components["schemas"]["ShowImageInvocation"] | components["schemas"]["MultiplyInvocation"] | components["schemas"]["SeamlessModeInvocation"] | components["schemas"]["AddInvocation"] | components["schemas"]["FaceOffInvocation"] | components["schemas"]["SDXLRefinerModelLoaderInvocation"] | components["schemas"]["CenterPadCropInvocation"] | components["schemas"]["ImagePasteInvocation"] | components["schemas"]["PromptsFromFileInvocation"] | components["schemas"]["T2IAdapterInvocation"] | components["schemas"]["SaveImageInvocation"] | components["schemas"]["ResizeLatentsInvocation"] | components["schemas"]["IntegerInvocation"] | components["schemas"]["OpenposeImageProcessorInvocation"] | components["schemas"]["CannyImageProcessorInvocation"] | components["schemas"]["ImageWatermarkInvocation"] | components["schemas"]["StringJoinThreeInvocation"] | components["schemas"]["GraphInvocation"] | components["schemas"]["LineartImageProcessorInvocation"] | components["schemas"]["AverageImagesInvocation"] | components["schemas"]["FloatLinearRangeInvocation"] | components["schemas"]["ColorInvocation"] | components["schemas"]["DivideInvocation"] | components["schemas"]["RangeOfSizeInvocation"] | components["schemas"]["IdealSizeInvocation"] | components["schemas"]["ContentShuffleImageProcessorInvocation"] | components["schemas"]["MetadataItemInvocation"] | components["schemas"]["RoundInvocation"] | components["schemas"]["DynamicPromptInvocation"] | components["schemas"]["SDXLCompelPromptInvocation"] | components["schemas"]["RangeInvocation"] | components["schemas"]["ImageConvertInvocation"] | components["schemas"]["MaskFromAlphaInvocation"] | components["schemas"]["RandomIntInvocation"] | components["schemas"]["BooleanCollectionInvocation"] | components["schemas"]["MergeMetadataInvocation"] | components["schemas"]["LatentsToImageInvocation"] | components["schemas"]["TileResamplerProcessorInvocation"] | components["schemas"]["CalculateImageTilesMinimumOverlapInvocation"] | components["schemas"]["ImageScaleInvocation"] | components["schemas"]["PidiImageProcessorInvocation"] | components["schemas"]["ONNXTextToLatentsInvocation"] | components["schemas"]["PairTileImageInvocation"] | components["schemas"]["ImageChannelOffsetInvocation"] | components["schemas"]["ImageResizeInvocation"] | components["schemas"]["SDXLModelLoaderInvocation"] | components["schemas"]["StepParamEasingInvocation"] | components["schemas"]["IterateInvocation"] | components["schemas"]["RandomFloatInvocation"] | components["schemas"]["MetadataInvocation"] | components["schemas"]["SegmentAnythingProcessorInvocation"] | components["schemas"]["ImageHueAdjustmentInvocation"] | components["schemas"]["ImageCropInvocation"] | components["schemas"]["FreeUInvocation"] | components["schemas"]["RandomRangeInvocation"] | components["schemas"]["LaMaInfillInvocation"] | components["schemas"]["FaceMaskInvocation"] | components["schemas"]["MainModelLoaderInvocation"] | components["schemas"]["CV2InfillInvocation"] | components["schemas"]["CalculateImageTilesEvenSplitInvocation"] | components["schemas"]["BlankImageInvocation"] | components["schemas"]["MaskCombineInvocation"] | components["schemas"]["StringReplaceInvocation"] | components["schemas"]["NoiseInvocation"] | components["schemas"]["LeresImageProcessorInvocation"] | components["schemas"]["UnsharpMaskInvocation"] | components["schemas"]["TileToPropertiesInvocation"] | components["schemas"]["LatentsInvocation"] | components["schemas"]["ONNXPromptInvocation"] | components["schemas"]["FaceIdentifierInvocation"] | components["schemas"]["MlsdImageProcessorInvocation"] | components["schemas"]["InfillTileInvocation"];
+        [key: string]: components["schemas"]["CalculateImageTilesMinimumOverlapInvocation"] | components["schemas"]["ImageScaleInvocation"] | components["schemas"]["CompelInvocation"] | components["schemas"]["CannyImageProcessorInvocation"] | components["schemas"]["InfillColorInvocation"] | components["schemas"]["StringReplaceInvocation"] | components["schemas"]["CvInpaintInvocation"] | components["schemas"]["CV2InfillInvocation"] | components["schemas"]["AddInvocation"] | components["schemas"]["StringCollectionInvocation"] | components["schemas"]["ColorCorrectInvocation"] | components["schemas"]["ConditioningInvocation"] | components["schemas"]["LeresImageProcessorInvocation"] | components["schemas"]["LatentsToImageInvocation"] | components["schemas"]["SeamlessModeInvocation"] | components["schemas"]["ImageNSFWBlurInvocation"] | components["schemas"]["ScaleLatentsInvocation"] | components["schemas"]["FaceIdentifierInvocation"] | components["schemas"]["InfillTileInvocation"] | components["schemas"]["DenoiseLatentsInvocation"] | components["schemas"]["ImageHueAdjustmentInvocation"] | components["schemas"]["ImageCollectionInvocation"] | components["schemas"]["OnnxModelLoaderInvocation"] | components["schemas"]["FloatToIntegerInvocation"] | components["schemas"]["IntegerMathInvocation"] | components["schemas"]["TileResamplerProcessorInvocation"] | components["schemas"]["BlankImageInvocation"] | components["schemas"]["StringSplitInvocation"] | components["schemas"]["ColorMapImageProcessorInvocation"] | components["schemas"]["ImageChannelOffsetInvocation"] | components["schemas"]["ONNXLatentsToImageInvocation"] | components["schemas"]["InfillPatchMatchInvocation"] | components["schemas"]["ContentShuffleImageProcessorInvocation"] | components["schemas"]["SDXLRefinerModelLoaderInvocation"] | components["schemas"]["CropLatentsCoreInvocation"] | components["schemas"]["SDXLCompelPromptInvocation"] | components["schemas"]["RoundInvocation"] | components["schemas"]["ONNXTextToLatentsInvocation"] | components["schemas"]["DynamicPromptInvocation"] | components["schemas"]["LaMaInfillInvocation"] | components["schemas"]["SDXLLoraLoaderInvocation"] | components["schemas"]["ImageChannelInvocation"] | components["schemas"]["DivideInvocation"] | components["schemas"]["PromptsFromFileInvocation"] | components["schemas"]["FloatLinearRangeInvocation"] | components["schemas"]["ImagePasteInvocation"] | components["schemas"]["IntegerInvocation"] | components["schemas"]["MaskFromAlphaInvocation"] | components["schemas"]["ImageChannelMultiplyInvocation"] | components["schemas"]["TileToPropertiesInvocation"] | components["schemas"]["T2IAdapterInvocation"] | components["schemas"]["VaeLoaderInvocation"] | components["schemas"]["GraphInvocation"] | components["schemas"]["ImageLerpInvocation"] | components["schemas"]["MediapipeFaceProcessorInvocation"] | components["schemas"]["MainModelLoaderInvocation"] | components["schemas"]["BlendLatentsInvocation"] | components["schemas"]["ImageInvocation"] | components["schemas"]["NoiseInvocation"] | components["schemas"]["ImageResizeInvocation"] | components["schemas"]["SchedulerInvocation"] | components["schemas"]["ControlNetInvocation"] | components["schemas"]["ColorInvocation"] | components["schemas"]["IdealSizeInvocation"] | components["schemas"]["SegmentAnythingProcessorInvocation"] | components["schemas"]["ConditioningCollectionInvocation"] | components["schemas"]["CalculateImageTilesInvocation"] | components["schemas"]["ImageConvertInvocation"] | components["schemas"]["RandomFloatInvocation"] | components["schemas"]["FaceMaskInvocation"] | components["schemas"]["LatentsInvocation"] | components["schemas"]["MidasDepthImageProcessorInvocation"] | components["schemas"]["FaceOffInvocation"] | components["schemas"]["PairTileImageInvocation"] | components["schemas"]["RangeInvocation"] | components["schemas"]["SDXLRefinerCompelPromptInvocation"] | components["schemas"]["RandomIntInvocation"] | components["schemas"]["IPAdapterInvocation"] | components["schemas"]["ImageCropInvocation"] | components["schemas"]["ZoeDepthImageProcessorInvocation"] | components["schemas"]["StringJoinInvocation"] | components["schemas"]["ResizeLatentsInvocation"] | components["schemas"]["IterateInvocation"] | components["schemas"]["LineartAnimeImageProcessorInvocation"] | components["schemas"]["StringJoinThreeInvocation"] | components["schemas"]["RandomRangeInvocation"] | components["schemas"]["StringInvocation"] | components["schemas"]["MaskEdgeInvocation"] | components["schemas"]["MetadataItemInvocation"] | components["schemas"]["ONNXPromptInvocation"] | components["schemas"]["StepParamEasingInvocation"] | components["schemas"]["MetadataInvocation"] | components["schemas"]["StringSplitNegInvocation"] | components["schemas"]["ImageInverseLerpInvocation"] | components["schemas"]["FloatCollectionInvocation"] | components["schemas"]["ShowImageInvocation"] | components["schemas"]["MergeMetadataInvocation"] | components["schemas"]["DepthAnythingImageProcessorInvocation"] | components["schemas"]["ImageBlurInvocation"] | components["schemas"]["FreeUInvocation"] | components["schemas"]["IntegerCollectionInvocation"] | components["schemas"]["SaveImageInvocation"] | components["schemas"]["ESRGANInvocation"] | components["schemas"]["ImageToLatentsInvocation"] | components["schemas"]["ClipSkipInvocation"] | components["schemas"]["MaskCombineInvocation"] | components["schemas"]["HedImageProcessorInvocation"] | components["schemas"]["CoreMetadataInvocation"] | components["schemas"]["LatentsCollectionInvocation"] | components["schemas"]["RangeOfSizeInvocation"] | components["schemas"]["OpenposeImageProcessorInvocation"] | components["schemas"]["LinearUIOutputInvocation"] | components["schemas"]["FloatMathInvocation"] | components["schemas"]["NormalbaeImageProcessorInvocation"] | components["schemas"]["CreateDenoiseMaskInvocation"] | components["schemas"]["UnsharpMaskInvocation"] | components["schemas"]["ImageWatermarkInvocation"] | components["schemas"]["CollectInvocation"] | components["schemas"]["MergeTilesToImageInvocation"] | components["schemas"]["CenterPadCropInvocation"] | components["schemas"]["BooleanCollectionInvocation"] | components["schemas"]["SubtractInvocation"] | components["schemas"]["LineartImageProcessorInvocation"] | components["schemas"]["SDXLModelLoaderInvocation"] | components["schemas"]["LatentConsistencyInvocation"] | components["schemas"]["CalculateImageTilesEvenSplitInvocation"] | components["schemas"]["ImageMultiplyInvocation"] | components["schemas"]["MultiplyInvocation"] | components["schemas"]["FloatInvocation"] | components["schemas"]["PidiImageProcessorInvocation"] | components["schemas"]["LoraLoaderInvocation"] | components["schemas"]["BooleanInvocation"] | components["schemas"]["MlsdImageProcessorInvocation"];
       };
       /**
        * Edges
@@ -3945,7 +4155,7 @@ export type components = {
        * @description The results of node executions
        */
       results: {
-        [key: string]: components["schemas"]["CollectInvocationOutput"] | components["schemas"]["VAEOutput"] | components["schemas"]["IntegerOutput"] | components["schemas"]["FaceOffOutput"] | components["schemas"]["ColorCollectionOutput"] | components["schemas"]["FloatCollectionOutput"] | components["schemas"]["DenoiseMaskOutput"] | components["schemas"]["ConditioningOutput"] | components["schemas"]["StringOutput"] | components["schemas"]["SDXLLoraLoaderOutput"] | components["schemas"]["IdealSizeOutput"] | components["schemas"]["BooleanOutput"] | components["schemas"]["ConditioningCollectionOutput"] | components["schemas"]["SchedulerOutput"] | components["schemas"]["GraphInvocationOutput"] | components["schemas"]["String2Output"] | components["schemas"]["NoiseOutput"] | components["schemas"]["BooleanCollectionOutput"] | components["schemas"]["PairTileImageOutput"] | components["schemas"]["UNetOutput"] | components["schemas"]["FaceMaskOutput"] | components["schemas"]["ModelLoaderOutput"] | components["schemas"]["IPAdapterOutput"] | components["schemas"]["T2IAdapterOutput"] | components["schemas"]["MetadataOutput"] | components["schemas"]["SDXLModelLoaderOutput"] | components["schemas"]["ONNXModelLoaderOutput"] | components["schemas"]["StringPosNegOutput"] | components["schemas"]["MetadataItemOutput"] | components["schemas"]["IterateInvocationOutput"] | components["schemas"]["LatentsCollectionOutput"] | components["schemas"]["SDXLRefinerModelLoaderOutput"] | components["schemas"]["StringCollectionOutput"] | components["schemas"]["ImageCollectionOutput"] | components["schemas"]["ControlOutput"] | components["schemas"]["ClipSkipInvocationOutput"] | components["schemas"]["TileToPropertiesOutput"] | components["schemas"]["SeamlessModeOutput"] | components["schemas"]["LoraLoaderOutput"] | components["schemas"]["ColorOutput"] | components["schemas"]["CLIPOutput"] | components["schemas"]["LatentsOutput"] | components["schemas"]["CalculateImageTilesOutput"] | components["schemas"]["FloatOutput"] | components["schemas"]["ImageOutput"] | components["schemas"]["IntegerCollectionOutput"];
+        [key: string]: components["schemas"]["UNetOutput"] | components["schemas"]["BooleanCollectionOutput"] | components["schemas"]["ControlOutput"] | components["schemas"]["CLIPOutput"] | components["schemas"]["LatentsOutput"] | components["schemas"]["SDXLModelLoaderOutput"] | components["schemas"]["ImageOutput"] | components["schemas"]["ModelLoaderOutput"] | components["schemas"]["ConditioningCollectionOutput"] | components["schemas"]["FloatCollectionOutput"] | components["schemas"]["FaceOffOutput"] | components["schemas"]["IntegerCollectionOutput"] | components["schemas"]["DenoiseMaskOutput"] | components["schemas"]["TileToPropertiesOutput"] | components["schemas"]["StringOutput"] | components["schemas"]["VAEOutput"] | components["schemas"]["ClipSkipInvocationOutput"] | components["schemas"]["FaceMaskOutput"] | components["schemas"]["IdealSizeOutput"] | components["schemas"]["PairTileImageOutput"] | components["schemas"]["SchedulerOutput"] | components["schemas"]["LatentsCollectionOutput"] | components["schemas"]["SDXLRefinerModelLoaderOutput"] | components["schemas"]["IterateInvocationOutput"] | components["schemas"]["FloatOutput"] | components["schemas"]["IntegerOutput"] | components["schemas"]["CollectInvocationOutput"] | components["schemas"]["MetadataOutput"] | components["schemas"]["IPAdapterOutput"] | components["schemas"]["ConditioningOutput"] | components["schemas"]["SeamlessModeOutput"] | components["schemas"]["String2Output"] | components["schemas"]["SDXLLoraLoaderOutput"] | components["schemas"]["MetadataItemOutput"] | components["schemas"]["ColorOutput"] | components["schemas"]["ImageCollectionOutput"] | components["schemas"]["T2IAdapterOutput"] | components["schemas"]["CalculateImageTilesOutput"] | components["schemas"]["StringPosNegOutput"] | components["schemas"]["BooleanOutput"] | components["schemas"]["ColorCollectionOutput"] | components["schemas"]["NoiseOutput"] | components["schemas"]["LoraLoaderOutput"] | components["schemas"]["GraphInvocationOutput"] | components["schemas"]["StringCollectionOutput"] | components["schemas"]["ONNXModelLoaderOutput"];
       };
       /**
        * Errors
@@ -4011,13 +4221,15 @@ export type components = {
     };
     /**
      * HFModelSource
-     * @description A HuggingFace repo_id, with optional variant and sub-folder.
+     * @description A HuggingFace repo_id with optional variant, sub-folder and access token.
+     * Note that the variant option, if not provided to the constructor, will default to fp16, which is
+     * what people (almost) always want.
      */
     HFModelSource: {
       /** Repo Id */
       repo_id: string;
-      /** Variant */
-      variant?: string | null;
+      /** @default fp16 */
+      variant?: components["schemas"]["ModelRepoVariant"] | null;
       /** Subfolder */
       subfolder?: string | null;
       /** Access Token */
@@ -4085,6 +4297,51 @@ export type components = {
        */
       type: "hed_image_processor";
     };
+    /**
+     * HuggingFaceMetadata
+     * @description Extended metadata fields provided by HuggingFace.
+     */
+    HuggingFaceMetadata: {
+      /**
+       * Name
+       * @description model's name
+       */
+      name: string;
+      /**
+       * Author
+       * @description model's author
+       */
+      author: string;
+      /**
+       * Tags
+       * @description tags provided by model source
+       */
+      tags: string[];
+      /**
+       * Files
+       * @description model files and their sizes
+       */
+      files?: components["schemas"]["RemoteModelFile"][];
+      /**
+       * Type
+       * @default huggingface
+       * @constant
+       */
+      type?: "huggingface";
+      /**
+       * Id
+       * @description huggingface model id
+       */
+      id: string;
+      /** Tag Dict */
+      tag_dict: Record<string, never>;
+      /**
+       * Last Modified
+       * Format: date-time
+       * @description date of last commit to repo
+       */
+      last_modified: string;
+    };
     /**
      * IPAdapterConfig
      * @description Model config for IP Adaptor format models.
@@ -4312,23 +4569,21 @@ export type components = {
       use_cache?: boolean;
       /**
        * Width
-       * @description Target width
+       * @description Final image width
        * @default 1024
        */
       width?: number;
       /**
        * Height
-       * @description Target height
+       * @description Final image height
        * @default 576
        */
       height?: number;
-      /** @description UNet submodel */
+      /** @description UNet (scheduler, LoRAs) */
       unet?: components["schemas"]["UNetField"];
-      /** @description Vae submodel */
-      vae?: components["schemas"]["VaeField"];
       /**
        * Multiplier
-       * @description Dimensional multiplier
+       * @description Amount to multiply the model's dimensions by when calculating the ideal size (may result in initial generation artifacts if too large)
        * @default 1
        */
       multiplier?: number;
@@ -4346,12 +4601,12 @@ export type components = {
     IdealSizeOutput: {
       /**
        * Width
-       * @description The ideal width of the image in pixels
+       * @description The ideal width of the image (in pixels)
        */
       width: number;
       /**
        * Height
-       * @description The ideal height of the image in pixels
+       * @description The ideal height of the image (in pixels)
        */
       height: number;
       /**
@@ -5489,7 +5744,7 @@ export type components = {
      * @description State of an install job running in the background.
      * @enum {string}
      */
-    InstallStatus: "waiting" | "running" | "completed" | "error";
+    InstallStatus: "waiting" | "downloading" | "running" | "completed" | "error" | "cancelled";
     /**
      * Integer Collection Primitive
      * @description A collection of integer primitive values
@@ -5772,6 +6027,96 @@ export type components = {
        */
       type: "infill_lama";
     };
+    /**
+     * Latent Consistency MonoNode
+     * @description Wrapper node around diffusers LatentConsistencyTxt2ImgPipeline
+     */
+    LatentConsistencyInvocation: {
+      /**
+       * Id
+       * @description The id of this instance of an invocation. Must be unique among all instances of invocations.
+       */
+      id: string;
+      /**
+       * Is Intermediate
+       * @description Whether or not this is an intermediate invocation.
+       * @default false
+       */
+      is_intermediate?: boolean;
+      /**
+       * Use Cache
+       * @description Whether or not to use the cache
+       * @default true
+       */
+      use_cache?: boolean;
+      /**
+       * Prompt
+       * @description The prompt to use
+       */
+      prompt?: string;
+      /**
+       * Num Inference Steps
+       * @description The number of inference steps to use, 4-8 recommended
+       * @default 8
+       */
+      num_inference_steps?: number;
+      /**
+       * Guidance Scale
+       * @description The guidance scale to use
+       * @default 8
+       */
+      guidance_scale?: number;
+      /**
+       * Batches
+       * @description The number of batches to use
+       * @default 1
+       */
+      batches?: number;
+      /**
+       * Images Per Batch
+       * @description The number of images per batch to use
+       * @default 1
+       */
+      images_per_batch?: number;
+      /**
+       * Seeds
+       * @description List of noise seeds to use
+       */
+      seeds?: number[];
+      /**
+       * Lcm Origin Steps
+       * @description The lcm origin steps to use
+       * @default 50
+       */
+      lcm_origin_steps?: number;
+      /**
+       * Width
+       * @description The width to use
+       * @default 512
+       */
+      width?: number;
+      /**
+       * Height
+       * @description The height to use
+       * @default 512
+       */
+      height?: number;
+      /**
+       * Precision
+       * @description floating point precision
+       * @default fp16
+       * @enum {string}
+       */
+      precision?: "fp16" | "fp32";
+      /** @description The board to save the image to */
+      board?: components["schemas"]["BoardField"];
+      /**
+       * type
+       * @default latent_consistency_mononode
+       * @constant
+       */
+      type: "latent_consistency_mononode";
+    };
     /**
      * Latents Collection Primitive
      * @description A collection of latents tensor primitive values
@@ -6004,6 +6349,32 @@ export type components = {
        */
       type: "leres_image_processor";
     };
+    /**
+     * LicenseRestrictions
+     * @description Broad categories of licensing restrictions.
+     */
+    LicenseRestrictions: {
+      /**
+       * Allownocredit
+       * @description if true, model can be redistributed without crediting author
+       * @default false
+       */
+      AllowNoCredit?: boolean;
+      /**
+       * Allowderivatives
+       * @description if true, derivatives of this model can be redistributed
+       * @default false
+       */
+      AllowDerivatives?: boolean;
+      /**
+       * Allowdifferentlicense
+       * @description if true, derivatives of this model be redistributed under a different license
+       * @default false
+       */
+      AllowDifferentLicense?: boolean;
+      /** @description Type of commercial use allowed or 'No' if no commercial use is allowed. */
+      AllowCommercialUse?: components["schemas"]["CommercialUsage"];
+    };
     /**
      * Linear UI Image Output
      * @description Handles Linear UI Image Outputting tasks.
@@ -7028,6 +7399,12 @@ export type components = {
      * @constant
      */
     ModelError: "not_found";
+    /**
+     * ModelFormat
+     * @description Storage format of model.
+     * @enum {string}
+     */
+    ModelFormat: "diffusers" | "checkpoint" | "lycoris" | "onnx" | "olive" | "embedding_file" | "embedding_folder" | "invokeai";
     /** ModelInfo */
     ModelInfo: {
       /**
@@ -7047,6 +7424,11 @@ export type components = {
      * @description Object that tracks the current status of an install request.
      */
     ModelInstallJob: {
+      /**
+       * Id
+       * @description Unique ID for this job
+       */
+      id: number;
       /**
        * @description Current status of install process
        * @default waiting
@@ -7072,7 +7454,7 @@ export type components = {
        * Source
        * @description Source (URL, repo_id, or local path) of model
        */
-      source: components["schemas"]["LocalModelSource"] | components["schemas"]["HFModelSource"] | components["schemas"]["URLModelSource"];
+      source: components["schemas"]["LocalModelSource"] | components["schemas"]["HFModelSource"] | components["schemas"]["CivitaiModelSource"] | components["schemas"]["URLModelSource"];
       /**
        * Local Path
        * Format: path
@@ -7080,15 +7462,26 @@ export type components = {
        */
       local_path: string;
       /**
-       * Error Type
-       * @description Class name of the exception that led to status==ERROR
+       * Bytes
+       * @description For a remote model, the number of bytes downloaded so far (may not be available)
        */
-      error_type?: string | null;
+      bytes?: number | null;
       /**
-       * Error
-       * @description Error traceback
+       * Total Bytes
+       * @description Total size of the model to be installed
+       * @default 0
        */
-      error?: string | null;
+      total_bytes?: number;
+      /**
+       * Source Metadata
+       * @description Metadata provided by the model source
+       */
+      source_metadata?: (components["schemas"]["BaseMetadata"] | components["schemas"]["HuggingFaceMetadata"] | components["schemas"]["CivitaiMetadata"]) | null;
+      /**
+       * Download Parts
+       * @description Download jobs contributing to this install
+       */
+      download_parts?: components["schemas"]["DownloadJob"][];
     };
     /**
      * ModelLoaderOutput
@@ -7117,6 +7510,50 @@ export type components = {
        */
       unet: components["schemas"]["UNetField"];
     };
+    /**
+     * ModelRecordOrderBy
+     * @description The order in which to return model summaries.
+     * @enum {string}
+     */
+    ModelRecordOrderBy: "default" | "type" | "base" | "name" | "format";
+    /**
+     * ModelRepoVariant
+     * @description Various hugging face variants on the diffusers format.
+     * @enum {string}
+     */
+    ModelRepoVariant: "default" | "fp16" | "fp32" | "onnx" | "openvino" | "flax";
+    /**
+     * ModelSummary
+     * @description A short summary of models for UI listing purposes.
+     */
+    ModelSummary: {
+      /**
+       * Key
+       * @description model key
+       */
+      key: string;
+      /** @description model type */
+      type: components["schemas"]["invokeai__backend__model_manager__config__ModelType"];
+      /** @description base model */
+      base: components["schemas"]["invokeai__backend__model_manager__config__BaseModelType"];
+      /** @description model format */
+      format: components["schemas"]["ModelFormat"];
+      /**
+       * Name
+       * @description model name
+       */
+      name: string;
+      /**
+       * Description
+       * @description short description of model
+       */
+      description: string;
+      /**
+       * Tags
+       * @description tags associated with model
+       */
+      tags: string[];
+    };
     /**
      * Multiply Integers
      * @description Multiplies two numbers
@@ -7791,6 +8228,34 @@ export type components = {
        */
       type: "openpose_image_processor";
     };
+    /** PaginatedResults[ModelSummary] */
+    PaginatedResults_ModelSummary_: {
+      /**
+       * Page
+       * @description Current Page
+       */
+      page: number;
+      /**
+       * Pages
+       * @description Total number of pages
+       */
+      pages: number;
+      /**
+       * Per Page
+       * @description Number of items per page
+       */
+      per_page: number;
+      /**
+       * Total
+       * @description Total number of items in result
+       */
+      total: number;
+      /**
+       * Items
+       * @description Items
+       */
+      items: components["schemas"]["ModelSummary"][];
+    };
     /** PaginatedResults[WorkflowRecordListItemDTO] */
     PaginatedResults_WorkflowRecordListItemDTO_: {
       /**
@@ -8222,6 +8687,34 @@ export type components = {
        */
       type: "range_of_size";
     };
+    /**
+     * RemoteModelFile
+     * @description Information about a downloadable file that forms part of a model.
+     */
+    RemoteModelFile: {
+      /**
+       * Url
+       * Format: uri
+       * @description The url to download this model file
+       */
+      url: string;
+      /**
+       * Path
+       * Format: path
+       * @description The path to the file, relative to the model root
+       */
+      path: string;
+      /**
+       * Size
+       * @description The size of this file, in bytes
+       */
+      size: number;
+      /**
+       * Sha256
+       * @description SHA256 hash of this model (not always available)
+       */
+      sha256?: string | null;
+    };
     /** RemoveImagesFromBoardResult */
     RemoveImagesFromBoardResult: {
       /**
@@ -10274,10 +10767,10 @@ export type components = {
       access_token?: string | null;
       /**
        * Type
-       * @default generic_url
+       * @default url
        * @constant
        */
-      type?: "generic_url";
+      type?: "url";
     };
     /**
      * Unsharp Mask
@@ -11004,53 +11497,53 @@ export type components = {
      */
     UIType: "SDXLMainModelField" | "SDXLRefinerModelField" | "ONNXModelField" | "VAEModelField" | "LoRAModelField" | "ControlNetModelField" | "IPAdapterModelField" | "SchedulerField" | "AnyField" | "CollectionField" | "CollectionItemField" | "DEPRECATED_Boolean" | "DEPRECATED_Color" | "DEPRECATED_Conditioning" | "DEPRECATED_Control" | "DEPRECATED_Float" | "DEPRECATED_Image" | "DEPRECATED_Integer" | "DEPRECATED_Latents" | "DEPRECATED_String" | "DEPRECATED_BooleanCollection" | "DEPRECATED_ColorCollection" | "DEPRECATED_ConditioningCollection" | "DEPRECATED_ControlCollection" | "DEPRECATED_FloatCollection" | "DEPRECATED_ImageCollection" | "DEPRECATED_IntegerCollection" | "DEPRECATED_LatentsCollection" | "DEPRECATED_StringCollection" | "DEPRECATED_BooleanPolymorphic" | "DEPRECATED_ColorPolymorphic" | "DEPRECATED_ConditioningPolymorphic" | "DEPRECATED_ControlPolymorphic" | "DEPRECATED_FloatPolymorphic" | "DEPRECATED_ImagePolymorphic" | "DEPRECATED_IntegerPolymorphic" | "DEPRECATED_LatentsPolymorphic" | "DEPRECATED_StringPolymorphic" | "DEPRECATED_MainModel" | "DEPRECATED_UNet" | "DEPRECATED_Vae" | "DEPRECATED_CLIP" | "DEPRECATED_Collection" | "DEPRECATED_CollectionItem" | "DEPRECATED_Enum" | "DEPRECATED_WorkflowField" | "DEPRECATED_IsIntermediate" | "DEPRECATED_BoardField" | "DEPRECATED_MetadataItem" | "DEPRECATED_MetadataItemCollection" | "DEPRECATED_MetadataItemPolymorphic" | "DEPRECATED_MetadataDict";
     /**
-     * ControlNetModelFormat
+     * StableDiffusion1ModelFormat
      * @description An enumeration.
      * @enum {string}
      */
-    ControlNetModelFormat: "checkpoint" | "diffusers";
-    /**
-     * IPAdapterModelFormat
-     * @description An enumeration.
-     * @enum {string}
-     */
-    IPAdapterModelFormat: "invokeai";
-    /**
-     * StableDiffusion2ModelFormat
-     * @description An enumeration.
-     * @enum {string}
-     */
-    StableDiffusion2ModelFormat: "checkpoint" | "diffusers";
-    /**
-     * T2IAdapterModelFormat
-     * @description An enumeration.
-     * @enum {string}
-     */
-    T2IAdapterModelFormat: "diffusers";
-    /**
-     * CLIPVisionModelFormat
-     * @description An enumeration.
-     * @enum {string}
-     */
-    CLIPVisionModelFormat: "diffusers";
+    StableDiffusion1ModelFormat: "checkpoint" | "diffusers";
     /**
      * StableDiffusionXLModelFormat
      * @description An enumeration.
      * @enum {string}
      */
     StableDiffusionXLModelFormat: "checkpoint" | "diffusers";
+    /**
+     * CLIPVisionModelFormat
+     * @description An enumeration.
+     * @enum {string}
+     */
+    CLIPVisionModelFormat: "diffusers";
+    /**
+     * StableDiffusion2ModelFormat
+     * @description An enumeration.
+     * @enum {string}
+     */
+    StableDiffusion2ModelFormat: "checkpoint" | "diffusers";
+    /**
+     * ControlNetModelFormat
+     * @description An enumeration.
+     * @enum {string}
+     */
+    ControlNetModelFormat: "checkpoint" | "diffusers";
+    /**
+     * T2IAdapterModelFormat
+     * @description An enumeration.
+     * @enum {string}
+     */
+    T2IAdapterModelFormat: "diffusers";
+    /**
+     * IPAdapterModelFormat
+     * @description An enumeration.
+     * @enum {string}
+     */
+    IPAdapterModelFormat: "invokeai";
     /**
      * StableDiffusionOnnxModelFormat
      * @description An enumeration.
      * @enum {string}
      */
     StableDiffusionOnnxModelFormat: "olive" | "onnx";
-    /**
-     * StableDiffusion1ModelFormat
-     * @description An enumeration.
-     * @enum {string}
-     */
-    StableDiffusion1ModelFormat: "checkpoint" | "diffusers";
   };
   responses: never;
   parameters: never;
@@ -11456,7 +11949,7 @@ export type operations = {
         /** @description Exact match on the name of the model */
         model_name?: string | null;
         /** @description Exact match on the format of the model (e.g. 'diffusers') */
-        model_format?: string | null;
+        model_format?: components["schemas"]["ModelFormat"] | null;
       };
     };
     responses: {
@@ -11582,6 +12075,110 @@ export type operations = {
       };
     };
   };
+  /**
+   * List Model Summary
+   * @description Gets a page of model summary data.
+   */
+  list_model_summary: {
+    parameters: {
+      query?: {
+        /** @description The page to get */
+        page?: number;
+        /** @description The number of models per page */
+        per_page?: number;
+        /** @description The attribute to order by */
+        order_by?: components["schemas"]["ModelRecordOrderBy"];
+      };
+    };
+    responses: {
+      /** @description Successful Response */
+      200: {
+        content: {
+          "application/json": components["schemas"]["PaginatedResults_ModelSummary_"];
+        };
+      };
+      /** @description Validation Error */
+      422: {
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
+  /**
+   * Get Model Metadata
+   * @description Get a model metadata object.
+   */
+  get_model_metadata: {
+    parameters: {
+      path: {
+        /** @description Key of the model repo metadata to fetch. */
+        key: string;
+      };
+    };
+    responses: {
+      /** @description Success */
+      200: {
+        content: {
+          "application/json": (components["schemas"]["BaseMetadata"] | components["schemas"]["HuggingFaceMetadata"] | components["schemas"]["CivitaiMetadata"]) | null;
+        };
+      };
+      /** @description Bad request */
+      400: {
+        content: never;
+      };
+      /** @description No metadata available */
+      404: {
+        content: never;
+      };
+      /** @description Validation Error */
+      422: {
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
+  /**
+   * List Tags
+   * @description Get a unique set of all the model tags.
+   */
+  list_tags: {
+    responses: {
+      /** @description Successful Response */
+      200: {
+        content: {
+          "application/json": string[];
+        };
+      };
+    };
+  };
+  /**
+   * Search By Metadata Tags
+   * @description Get a list of models.
+   */
+  search_by_metadata_tags: {
+    parameters: {
+      query?: {
+        /** @description Tags to search for */
+        tags?: string[];
+      };
+    };
+    responses: {
+      /** @description Successful Response */
+      200: {
+        content: {
+          "application/json": components["schemas"]["invokeai__app__api__routers__model_records__ModelsList"];
+        };
+      };
+      /** @description Validation Error */
+      422: {
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
   /**
    * Add Model Record
    * @description Add a model using the configuration information appropriate for its type.
@@ -11618,9 +12215,6 @@ export type operations = {
   /**
    * List Model Install Jobs
    * @description Return list of model install jobs.
-   *
-   * If the optional 'source' argument is provided, then the list will be filtered
-   * for partial string matches against the install source.
    */
   list_model_install_jobs: {
     responses: {
@@ -11679,7 +12273,7 @@ export type operations = {
    * Installation occurs in the background. Either use list_model_install_jobs()
    * to poll for completion, or listen on the event bus for the following events:
    *
-   *   "model_install_started"
+   *   "model_install_running"
    *   "model_install_completed"
    *   "model_install_error"
    *
@@ -11743,9 +12337,71 @@ export type operations = {
       };
     };
   };
+  /**
+   * Get Model Install Job
+   * @description Return model install job corresponding to the given source.
+   */
+  get_model_install_job: {
+    parameters: {
+      path: {
+        /** @description Model install id */
+        id: number;
+      };
+    };
+    responses: {
+      /** @description Success */
+      200: {
+        content: {
+          "application/json": components["schemas"]["ModelInstallJob"];
+        };
+      };
+      /** @description No such job */
+      404: {
+        content: never;
+      };
+      /** @description Validation Error */
+      422: {
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
+  /**
+   * Cancel Model Install Job
+   * @description Cancel the model install job(s) corresponding to the given job ID.
+   */
+  cancel_model_install_job: {
+    parameters: {
+      path: {
+        /** @description Model install job ID */
+        id: number;
+      };
+    };
+    responses: {
+      /** @description The job was cancelled successfully */
+      201: {
+        content: {
+          "application/json": unknown;
+        };
+      };
+      /** @description No such job */
+      415: {
+        content: never;
+      };
+      /** @description Validation Error */
+      422: {
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
   /**
    * Sync Models To Config
-   * @description Traverse the models and autoimport directories. Model files without a corresponding
+   * @description Traverse the models and autoimport directories.
+   *
+   * Model files without a corresponding
    * record in the database are added. Orphan records without a models file are deleted.
    */
   sync_models_to_config: {
diff --git a/invokeai/frontend/web/src/services/api/types.ts b/invokeai/frontend/web/src/services/api/types.ts
index 03d9153361..871a7f5a2e 100644
--- a/invokeai/frontend/web/src/services/api/types.ts
+++ b/invokeai/frontend/web/src/services/api/types.ts
@@ -164,6 +164,8 @@ export type ColorMapImageProcessorInvocation =
   s['ColorMapImageProcessorInvocation'];
 export type ContentShuffleImageProcessorInvocation =
   s['ContentShuffleImageProcessorInvocation'];
+export type DepthAnythingImageProcessorInvocation =
+  s['DepthAnythingImageProcessorInvocation'];
 export type HedImageProcessorInvocation = s['HedImageProcessorInvocation'];
 export type LineartAnimeImageProcessorInvocation =
   s['LineartAnimeImageProcessorInvocation'];

From 6a2eb1d2e4374ca1b5e01b4cdf53c56e9934dfe7 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Tue, 23 Jan 2024 04:56:59 +0530
Subject: [PATCH 025/133] fix: Change the path of the annotator folder to
 annotators

Just making this change in case there are other models added to the folder in the future
---
 invokeai/backend/image_util/depth_anything/__init__.py | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/invokeai/backend/image_util/depth_anything/__init__.py b/invokeai/backend/image_util/depth_anything/__init__.py
index 37adaa3004..0fca75c741 100644
--- a/invokeai/backend/image_util/depth_anything/__init__.py
+++ b/invokeai/backend/image_util/depth_anything/__init__.py
@@ -20,15 +20,15 @@ config = InvokeAIAppConfig.get_config()
 DEPTH_ANYTHING_MODELS = {
     "large": {
         "url": "https://huggingface.co/spaces/LiheYoung/Depth-Anything/resolve/main/checkpoints/depth_anything_vitl14.pth?download=true",
-        "local": "sd-1/controlnet/annotator/depth_anything/depth_anything_vitl14.pth",
+        "local": "sd-1/controlnet/annotators/depth_anything/depth_anything_vitl14.pth",
     },
     "base": {
         "url": "https://huggingface.co/spaces/LiheYoung/Depth-Anything/resolve/main/checkpoints/depth_anything_vitb14.pth?download=true",
-        "local": "sd-1/controlnet/annotator/depth_anything/depth_anything_vitb14.pth",
+        "local": "sd-1/controlnet/annotators/depth_anything/depth_anything_vitb14.pth",
     },
     "small": {
         "url": "https://huggingface.co/spaces/LiheYoung/Depth-Anything/resolve/main/checkpoints/depth_anything_vits14.pth?download=true",
-        "local": "sd-1/controlnet/annotator/depth_anything/depth_anything_vits14.pth",
+        "local": "sd-1/controlnet/annotators/depth_anything/depth_anything_vits14.pth",
     },
 }
 

From f36a6912199582845818d4973c602aa580771e78 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Tue, 23 Jan 2024 09:14:47 +0530
Subject: [PATCH 026/133] feat: Make the depth anything small model the default

---
 invokeai/app/invocations/controlnet_image_processors.py       | 2 +-
 .../components/processors/DepthAnyThingProcessor.tsx          | 4 ++--
 .../web/src/features/controlAdapters/store/constants.ts       | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/invokeai/app/invocations/controlnet_image_processors.py b/invokeai/app/invocations/controlnet_image_processors.py
index 967e0c6f40..f16ff55351 100644
--- a/invokeai/app/invocations/controlnet_image_processors.py
+++ b/invokeai/app/invocations/controlnet_image_processors.py
@@ -619,7 +619,7 @@ class DepthAnythingImageProcessorInvocation(ImageProcessorInvocation):
     """Generates a depth map based on the Depth Anything algorithm"""
 
     model_size: DEPTH_ANYTHING_MODEL_SIZES = InputField(
-        default="large", description="The size of the depth model to use"
+        default="small", description="The size of the depth model to use"
     )
     offload: bool = InputField(default=False)
 
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/DepthAnyThingProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/DepthAnyThingProcessor.tsx
index c0e69950c1..4897cf50c5 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/DepthAnyThingProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/DepthAnyThingProcessor.tsx
@@ -42,9 +42,9 @@ const DepthAnythingProcessor = (props: Props) => {
 
   const options: { label: string; value: DepthAnythingModelSize }[] = useMemo(
     () => [
-      { label: t('controlnet.large'), value: 'large' },
-      { label: t('controlnet.base'), value: 'base' },
       { label: t('controlnet.small'), value: 'small' },
+      { label: t('controlnet.base'), value: 'base' },
+      { label: t('controlnet.large'), value: 'large' },
     ],
     [t]
   );
diff --git a/invokeai/frontend/web/src/features/controlAdapters/store/constants.ts b/invokeai/frontend/web/src/features/controlAdapters/store/constants.ts
index 2b4124cbb1..1bdfabd0ab 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/store/constants.ts
+++ b/invokeai/frontend/web/src/features/controlAdapters/store/constants.ts
@@ -94,7 +94,7 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
     default: {
       id: 'depth_anything_image_processor',
       type: 'depth_anything_image_processor',
-      model_size: 'large',
+      model_size: 'small',
       offload: false,
     },
   },

From 39fedb090bb71890776d2f5570f6626e3691c86d Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Tue, 23 Jan 2024 09:15:04 +0530
Subject: [PATCH 027/133] feat: Make depth anything the default processor for
 depth controlnet

---
 .../web/src/features/controlAdapters/store/constants.ts         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/features/controlAdapters/store/constants.ts b/invokeai/frontend/web/src/features/controlAdapters/store/constants.ts
index 1bdfabd0ab..dc7444c3e7 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/store/constants.ts
+++ b/invokeai/frontend/web/src/features/controlAdapters/store/constants.ts
@@ -260,7 +260,7 @@ export const CONTROLNET_MODEL_DEFAULT_PROCESSORS: {
 } = {
   canny: 'canny_image_processor',
   mlsd: 'mlsd_image_processor',
-  depth: 'midas_depth_image_processor',
+  depth: 'depth_anything_image_processor',
   bae: 'normalbae_image_processor',
   sketch: 'pidi_image_processor',
   scribble: 'lineart_image_processor',

From 7cb49e65bdf3ebd8c749c8c131cec40798811641 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Tue, 23 Jan 2024 10:13:03 +0530
Subject: [PATCH 028/133] feat: Add Resolution to DepthAnything

---
 .../controlnet_image_processors.py            |  3 +-
 .../image_util/depth_anything/__init__.py     | 24 +++++----
 .../processors/DepthAnyThingProcessor.tsx     | 42 ++++++++++++++-
 .../controlAdapters/store/constants.ts        |  1 +
 .../features/controlAdapters/store/types.ts   |  2 +-
 .../frontend/web/src/services/api/schema.ts   | 52 +++++++++++--------
 6 files changed, 87 insertions(+), 37 deletions(-)

diff --git a/invokeai/app/invocations/controlnet_image_processors.py b/invokeai/app/invocations/controlnet_image_processors.py
index f16ff55351..00c3fa74f6 100644
--- a/invokeai/app/invocations/controlnet_image_processors.py
+++ b/invokeai/app/invocations/controlnet_image_processors.py
@@ -621,6 +621,7 @@ class DepthAnythingImageProcessorInvocation(ImageProcessorInvocation):
     model_size: DEPTH_ANYTHING_MODEL_SIZES = InputField(
         default="small", description="The size of the depth model to use"
     )
+    resolution: int = InputField(default=512, ge=64, multiple_of=64, description=FieldDescriptions.image_res)
     offload: bool = InputField(default=False)
 
     def run_processor(self, image):
@@ -630,5 +631,5 @@ class DepthAnythingImageProcessorInvocation(ImageProcessorInvocation):
         if image.mode == "RGBA":
             image = image.convert("RGB")
 
-        processed_image = depth_anything_detector(image=image, offload=self.offload)
+        processed_image = depth_anything_detector(image=image, resolution=self.resolution, offload=self.offload)
         return processed_image
diff --git a/invokeai/backend/image_util/depth_anything/__init__.py b/invokeai/backend/image_util/depth_anything/__init__.py
index 0fca75c741..64eeb3d12f 100644
--- a/invokeai/backend/image_util/depth_anything/__init__.py
+++ b/invokeai/backend/image_util/depth_anything/__init__.py
@@ -64,12 +64,15 @@ class DepthAnythingDetector:
             del self.model
             self.model_size = model_size
 
-            if self.model_size == "small":
-                self.model = DPT_DINOv2(encoder="vits", features=64, out_channels=[48, 96, 192, 384])
-            if self.model_size == "base":
-                self.model = DPT_DINOv2(encoder="vitb", features=128, out_channels=[96, 192, 384, 768])
-            if self.model_size == "large":
-                self.model = DPT_DINOv2(encoder="vitl", features=256, out_channels=[256, 512, 1024, 1024])
+            match self.model_size:
+                case "small":
+                    self.model = DPT_DINOv2(encoder="vits", features=64, out_channels=[48, 96, 192, 384])
+                case "base":
+                    self.model = DPT_DINOv2(encoder="vitb", features=128, out_channels=[96, 192, 384, 768])
+                case "large":
+                    self.model = DPT_DINOv2(encoder="vitl", features=256, out_channels=[256, 512, 1024, 1024])
+                case _:
+                    raise TypeError("Not a supported model")
 
             self.model.load_state_dict(torch.load(DEPTH_ANYTHING_MODEL_PATH.as_posix(), map_location="cpu"))
             self.model.eval()
@@ -81,12 +84,11 @@ class DepthAnythingDetector:
         self.model.to(device)
         return self
 
-    def __call__(self, image, offload=False):
+    def __call__(self, image, resolution=512, offload=False):
         image = np.array(image, dtype=np.uint8)
-        original_width, original_height = image.shape[:2]
         image = image[:, :, ::-1] / 255.0
 
-        image_width, image_height = image.shape[:2]
+        image_height, image_width = image.shape[:2]
         image = transform({"image": image})["image"]
         image = torch.from_numpy(image).unsqueeze(0).to(choose_torch_device())
 
@@ -97,7 +99,9 @@ class DepthAnythingDetector:
 
         depth_map = repeat(depth, "h w -> h w 3").cpu().numpy().astype(np.uint8)
         depth_map = Image.fromarray(depth_map)
-        depth_map = depth_map.resize((original_height, original_width))
+
+        new_height = int(image_height * (resolution / image_width))
+        depth_map = depth_map.resize((resolution, new_height))
 
         if offload:
             del self.model
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/DepthAnyThingProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/DepthAnyThingProcessor.tsx
index 4897cf50c5..025c53743e 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/DepthAnyThingProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/DepthAnyThingProcessor.tsx
@@ -1,5 +1,11 @@
 import type { ComboboxOnChange } from '@invoke-ai/ui';
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
+import {
+  Combobox,
+  CompositeNumberInput,
+  CompositeSlider,
+  FormControl,
+  FormLabel,
+} from '@invoke-ai/ui';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type {
@@ -23,7 +29,7 @@ type Props = {
 
 const DepthAnythingProcessor = (props: Props) => {
   const { controlNetId, processorNode, isEnabled } = props;
-  const { model_size } = processorNode;
+  const { model_size, resolution } = processorNode;
   const processorChanged = useProcessorNodeChanged();
 
   const { t } = useTranslation();
@@ -54,6 +60,17 @@ const DepthAnythingProcessor = (props: Props) => {
     [options, model_size]
   );
 
+  const handleResolutionChange = useCallback(
+    (v: number) => {
+      processorChanged(controlNetId, { resolution: v });
+    },
+    [controlNetId, processorChanged]
+  );
+
+  const handleResolutionDefaultChange = useCallback(() => {
+    processorChanged(controlNetId, { resolution: 512 });
+  }, [controlNetId, processorChanged]);
+
   return (
     <ProcessorWrapper>
       <FormControl isDisabled={!isEnabled}>
@@ -65,6 +82,27 @@ const DepthAnythingProcessor = (props: Props) => {
           onChange={handleModelSizeChange}
         />
       </FormControl>
+      <FormControl isDisabled={!isEnabled}>
+        <FormLabel>{t('controlnet.imageResolution')}</FormLabel>
+        <CompositeSlider
+          value={resolution}
+          onChange={handleResolutionChange}
+          defaultValue={DEFAULTS.resolution}
+          min={64}
+          max={4096}
+          step={64}
+          marks
+          onReset={handleResolutionDefaultChange}
+        />
+        <CompositeNumberInput
+          value={resolution}
+          onChange={handleResolutionChange}
+          defaultValue={DEFAULTS.resolution}
+          min={64}
+          max={4096}
+          step={64}
+        />
+      </FormControl>
     </ProcessorWrapper>
   );
 };
diff --git a/invokeai/frontend/web/src/features/controlAdapters/store/constants.ts b/invokeai/frontend/web/src/features/controlAdapters/store/constants.ts
index dc7444c3e7..ddebffcfde 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/store/constants.ts
+++ b/invokeai/frontend/web/src/features/controlAdapters/store/constants.ts
@@ -95,6 +95,7 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
       id: 'depth_anything_image_processor',
       type: 'depth_anything_image_processor',
       model_size: 'small',
+      resolution: 512,
       offload: false,
     },
   },
diff --git a/invokeai/frontend/web/src/features/controlAdapters/store/types.ts b/invokeai/frontend/web/src/features/controlAdapters/store/types.ts
index 0cd6c9b5c6..87366a443d 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/store/types.ts
+++ b/invokeai/frontend/web/src/features/controlAdapters/store/types.ts
@@ -80,7 +80,7 @@ export type RequiredContentShuffleImageProcessorInvocation = O.Required<
  */
 export type RequiredDepthAnythingImageProcessorInvocation = O.Required<
   DepthAnythingImageProcessorInvocation,
-  'type' | 'model_size' | 'offload'
+  'type' | 'model_size' | 'resolution' | 'offload'
 >;
 
 export const zDepthAnythingModelSize = z.enum(['large', 'base', 'small']);
diff --git a/invokeai/frontend/web/src/services/api/schema.ts b/invokeai/frontend/web/src/services/api/schema.ts
index bade77e5bf..87f4718b1b 100644
--- a/invokeai/frontend/web/src/services/api/schema.ts
+++ b/invokeai/frontend/web/src/services/api/schema.ts
@@ -3228,10 +3228,16 @@ export type components = {
       /**
        * Model Size
        * @description The size of the depth model to use
-       * @default large
+       * @default small
        * @enum {string}
        */
       model_size?: "large" | "base" | "small";
+      /**
+       * Resolution
+       * @description Pixel resolution for output image
+       * @default 512
+       */
+      resolution?: number;
       /**
        * Offload
        * @default false
@@ -4118,7 +4124,7 @@ export type components = {
        * @description The nodes in this graph
        */
       nodes?: {
-        [key: string]: components["schemas"]["CalculateImageTilesMinimumOverlapInvocation"] | components["schemas"]["ImageScaleInvocation"] | components["schemas"]["CompelInvocation"] | components["schemas"]["CannyImageProcessorInvocation"] | components["schemas"]["InfillColorInvocation"] | components["schemas"]["StringReplaceInvocation"] | components["schemas"]["CvInpaintInvocation"] | components["schemas"]["CV2InfillInvocation"] | components["schemas"]["AddInvocation"] | components["schemas"]["StringCollectionInvocation"] | components["schemas"]["ColorCorrectInvocation"] | components["schemas"]["ConditioningInvocation"] | components["schemas"]["LeresImageProcessorInvocation"] | components["schemas"]["LatentsToImageInvocation"] | components["schemas"]["SeamlessModeInvocation"] | components["schemas"]["ImageNSFWBlurInvocation"] | components["schemas"]["ScaleLatentsInvocation"] | components["schemas"]["FaceIdentifierInvocation"] | components["schemas"]["InfillTileInvocation"] | components["schemas"]["DenoiseLatentsInvocation"] | components["schemas"]["ImageHueAdjustmentInvocation"] | components["schemas"]["ImageCollectionInvocation"] | components["schemas"]["OnnxModelLoaderInvocation"] | components["schemas"]["FloatToIntegerInvocation"] | components["schemas"]["IntegerMathInvocation"] | components["schemas"]["TileResamplerProcessorInvocation"] | components["schemas"]["BlankImageInvocation"] | components["schemas"]["StringSplitInvocation"] | components["schemas"]["ColorMapImageProcessorInvocation"] | components["schemas"]["ImageChannelOffsetInvocation"] | components["schemas"]["ONNXLatentsToImageInvocation"] | components["schemas"]["InfillPatchMatchInvocation"] | components["schemas"]["ContentShuffleImageProcessorInvocation"] | components["schemas"]["SDXLRefinerModelLoaderInvocation"] | components["schemas"]["CropLatentsCoreInvocation"] | components["schemas"]["SDXLCompelPromptInvocation"] | components["schemas"]["RoundInvocation"] | components["schemas"]["ONNXTextToLatentsInvocation"] | components["schemas"]["DynamicPromptInvocation"] | components["schemas"]["LaMaInfillInvocation"] | components["schemas"]["SDXLLoraLoaderInvocation"] | components["schemas"]["ImageChannelInvocation"] | components["schemas"]["DivideInvocation"] | components["schemas"]["PromptsFromFileInvocation"] | components["schemas"]["FloatLinearRangeInvocation"] | components["schemas"]["ImagePasteInvocation"] | components["schemas"]["IntegerInvocation"] | components["schemas"]["MaskFromAlphaInvocation"] | components["schemas"]["ImageChannelMultiplyInvocation"] | components["schemas"]["TileToPropertiesInvocation"] | components["schemas"]["T2IAdapterInvocation"] | components["schemas"]["VaeLoaderInvocation"] | components["schemas"]["GraphInvocation"] | components["schemas"]["ImageLerpInvocation"] | components["schemas"]["MediapipeFaceProcessorInvocation"] | components["schemas"]["MainModelLoaderInvocation"] | components["schemas"]["BlendLatentsInvocation"] | components["schemas"]["ImageInvocation"] | components["schemas"]["NoiseInvocation"] | components["schemas"]["ImageResizeInvocation"] | components["schemas"]["SchedulerInvocation"] | components["schemas"]["ControlNetInvocation"] | components["schemas"]["ColorInvocation"] | components["schemas"]["IdealSizeInvocation"] | components["schemas"]["SegmentAnythingProcessorInvocation"] | components["schemas"]["ConditioningCollectionInvocation"] | components["schemas"]["CalculateImageTilesInvocation"] | components["schemas"]["ImageConvertInvocation"] | components["schemas"]["RandomFloatInvocation"] | components["schemas"]["FaceMaskInvocation"] | components["schemas"]["LatentsInvocation"] | components["schemas"]["MidasDepthImageProcessorInvocation"] | components["schemas"]["FaceOffInvocation"] | components["schemas"]["PairTileImageInvocation"] | components["schemas"]["RangeInvocation"] | components["schemas"]["SDXLRefinerCompelPromptInvocation"] | components["schemas"]["RandomIntInvocation"] | components["schemas"]["IPAdapterInvocation"] | components["schemas"]["ImageCropInvocation"] | components["schemas"]["ZoeDepthImageProcessorInvocation"] | components["schemas"]["StringJoinInvocation"] | components["schemas"]["ResizeLatentsInvocation"] | components["schemas"]["IterateInvocation"] | components["schemas"]["LineartAnimeImageProcessorInvocation"] | components["schemas"]["StringJoinThreeInvocation"] | components["schemas"]["RandomRangeInvocation"] | components["schemas"]["StringInvocation"] | components["schemas"]["MaskEdgeInvocation"] | components["schemas"]["MetadataItemInvocation"] | components["schemas"]["ONNXPromptInvocation"] | components["schemas"]["StepParamEasingInvocation"] | components["schemas"]["MetadataInvocation"] | components["schemas"]["StringSplitNegInvocation"] | components["schemas"]["ImageInverseLerpInvocation"] | components["schemas"]["FloatCollectionInvocation"] | components["schemas"]["ShowImageInvocation"] | components["schemas"]["MergeMetadataInvocation"] | components["schemas"]["DepthAnythingImageProcessorInvocation"] | components["schemas"]["ImageBlurInvocation"] | components["schemas"]["FreeUInvocation"] | components["schemas"]["IntegerCollectionInvocation"] | components["schemas"]["SaveImageInvocation"] | components["schemas"]["ESRGANInvocation"] | components["schemas"]["ImageToLatentsInvocation"] | components["schemas"]["ClipSkipInvocation"] | components["schemas"]["MaskCombineInvocation"] | components["schemas"]["HedImageProcessorInvocation"] | components["schemas"]["CoreMetadataInvocation"] | components["schemas"]["LatentsCollectionInvocation"] | components["schemas"]["RangeOfSizeInvocation"] | components["schemas"]["OpenposeImageProcessorInvocation"] | components["schemas"]["LinearUIOutputInvocation"] | components["schemas"]["FloatMathInvocation"] | components["schemas"]["NormalbaeImageProcessorInvocation"] | components["schemas"]["CreateDenoiseMaskInvocation"] | components["schemas"]["UnsharpMaskInvocation"] | components["schemas"]["ImageWatermarkInvocation"] | components["schemas"]["CollectInvocation"] | components["schemas"]["MergeTilesToImageInvocation"] | components["schemas"]["CenterPadCropInvocation"] | components["schemas"]["BooleanCollectionInvocation"] | components["schemas"]["SubtractInvocation"] | components["schemas"]["LineartImageProcessorInvocation"] | components["schemas"]["SDXLModelLoaderInvocation"] | components["schemas"]["LatentConsistencyInvocation"] | components["schemas"]["CalculateImageTilesEvenSplitInvocation"] | components["schemas"]["ImageMultiplyInvocation"] | components["schemas"]["MultiplyInvocation"] | components["schemas"]["FloatInvocation"] | components["schemas"]["PidiImageProcessorInvocation"] | components["schemas"]["LoraLoaderInvocation"] | components["schemas"]["BooleanInvocation"] | components["schemas"]["MlsdImageProcessorInvocation"];
+        [key: string]: components["schemas"]["ConditioningCollectionInvocation"] | components["schemas"]["ImageLerpInvocation"] | components["schemas"]["InfillPatchMatchInvocation"] | components["schemas"]["ClipSkipInvocation"] | components["schemas"]["StringReplaceInvocation"] | components["schemas"]["RangeInvocation"] | components["schemas"]["AddInvocation"] | components["schemas"]["ConditioningInvocation"] | components["schemas"]["FaceOffInvocation"] | components["schemas"]["ONNXTextToLatentsInvocation"] | components["schemas"]["StringSplitInvocation"] | components["schemas"]["IntegerMathInvocation"] | components["schemas"]["ImageCropInvocation"] | components["schemas"]["ResizeLatentsInvocation"] | components["schemas"]["BooleanInvocation"] | components["schemas"]["PromptsFromFileInvocation"] | components["schemas"]["BooleanCollectionInvocation"] | components["schemas"]["CalculateImageTilesInvocation"] | components["schemas"]["LatentsCollectionInvocation"] | components["schemas"]["OpenposeImageProcessorInvocation"] | components["schemas"]["SegmentAnythingProcessorInvocation"] | components["schemas"]["ONNXPromptInvocation"] | components["schemas"]["CannyImageProcessorInvocation"] | components["schemas"]["IPAdapterInvocation"] | components["schemas"]["MidasDepthImageProcessorInvocation"] | components["schemas"]["MainModelLoaderInvocation"] | components["schemas"]["CenterPadCropInvocation"] | components["schemas"]["BlendLatentsInvocation"] | components["schemas"]["HedImageProcessorInvocation"] | components["schemas"]["CreateDenoiseMaskInvocation"] | components["schemas"]["LinearUIOutputInvocation"] | components["schemas"]["StringInvocation"] | components["schemas"]["MaskEdgeInvocation"] | components["schemas"]["RandomFloatInvocation"] | components["schemas"]["T2IAdapterInvocation"] | components["schemas"]["LoraLoaderInvocation"] | components["schemas"]["ImagePasteInvocation"] | components["schemas"]["FloatCollectionInvocation"] | components["schemas"]["FaceMaskInvocation"] | components["schemas"]["MetadataInvocation"] | components["schemas"]["FloatMathInvocation"] | components["schemas"]["PidiImageProcessorInvocation"] | components["schemas"]["ColorMapImageProcessorInvocation"] | components["schemas"]["SDXLModelLoaderInvocation"] | components["schemas"]["TileToPropertiesInvocation"] | components["schemas"]["MergeMetadataInvocation"] | components["schemas"]["ImageCollectionInvocation"] | components["schemas"]["ImageChannelInvocation"] | components["schemas"]["LatentsToImageInvocation"] | components["schemas"]["MaskCombineInvocation"] | components["schemas"]["UnsharpMaskInvocation"] | components["schemas"]["ScaleLatentsInvocation"] | components["schemas"]["LaMaInfillInvocation"] | components["schemas"]["LatentsInvocation"] | components["schemas"]["StringJoinInvocation"] | components["schemas"]["BlankImageInvocation"] | components["schemas"]["CropLatentsCoreInvocation"] | components["schemas"]["RandomIntInvocation"] | components["schemas"]["MergeTilesToImageInvocation"] | components["schemas"]["ContentShuffleImageProcessorInvocation"] | components["schemas"]["SchedulerInvocation"] | components["schemas"]["IdealSizeInvocation"] | components["schemas"]["ImageWatermarkInvocation"] | components["schemas"]["GraphInvocation"] | components["schemas"]["PairTileImageInvocation"] | components["schemas"]["FaceIdentifierInvocation"] | components["schemas"]["ONNXLatentsToImageInvocation"] | components["schemas"]["TileResamplerProcessorInvocation"] | components["schemas"]["StepParamEasingInvocation"] | components["schemas"]["StringSplitNegInvocation"] | components["schemas"]["ImageToLatentsInvocation"] | components["schemas"]["ImageChannelMultiplyInvocation"] | components["schemas"]["ControlNetInvocation"] | components["schemas"]["VaeLoaderInvocation"] | components["schemas"]["InfillTileInvocation"] | components["schemas"]["ColorInvocation"] | components["schemas"]["CollectInvocation"] | components["schemas"]["FloatToIntegerInvocation"] | components["schemas"]["SDXLLoraLoaderInvocation"] | components["schemas"]["ImageMultiplyInvocation"] | components["schemas"]["DynamicPromptInvocation"] | components["schemas"]["SubtractInvocation"] | components["schemas"]["MetadataItemInvocation"] | components["schemas"]["NormalbaeImageProcessorInvocation"] | components["schemas"]["DenoiseLatentsInvocation"] | components["schemas"]["ImageResizeInvocation"] | components["schemas"]["ImageChannelOffsetInvocation"] | components["schemas"]["IntegerCollectionInvocation"] | components["schemas"]["FreeUInvocation"] | components["schemas"]["LatentConsistencyInvocation"] | components["schemas"]["LeresImageProcessorInvocation"] | components["schemas"]["ImageScaleInvocation"] | components["schemas"]["ESRGANInvocation"] | components["schemas"]["OnnxModelLoaderInvocation"] | components["schemas"]["ZoeDepthImageProcessorInvocation"] | components["schemas"]["ImageConvertInvocation"] | components["schemas"]["FloatLinearRangeInvocation"] | components["schemas"]["CalculateImageTilesMinimumOverlapInvocation"] | components["schemas"]["ShowImageInvocation"] | components["schemas"]["MaskFromAlphaInvocation"] | components["schemas"]["InfillColorInvocation"] | components["schemas"]["LineartImageProcessorInvocation"] | components["schemas"]["SDXLRefinerCompelPromptInvocation"] | components["schemas"]["MultiplyInvocation"] | components["schemas"]["ColorCorrectInvocation"] | components["schemas"]["IterateInvocation"] | components["schemas"]["CompelInvocation"] | components["schemas"]["ImageInvocation"] | components["schemas"]["CV2InfillInvocation"] | components["schemas"]["MediapipeFaceProcessorInvocation"] | components["schemas"]["SaveImageInvocation"] | components["schemas"]["CoreMetadataInvocation"] | components["schemas"]["FloatInvocation"] | components["schemas"]["StringJoinThreeInvocation"] | components["schemas"]["StringCollectionInvocation"] | components["schemas"]["LineartAnimeImageProcessorInvocation"] | components["schemas"]["ImageInverseLerpInvocation"] | components["schemas"]["SDXLCompelPromptInvocation"] | components["schemas"]["CalculateImageTilesEvenSplitInvocation"] | components["schemas"]["ImageHueAdjustmentInvocation"] | components["schemas"]["SDXLRefinerModelLoaderInvocation"] | components["schemas"]["RangeOfSizeInvocation"] | components["schemas"]["SeamlessModeInvocation"] | components["schemas"]["CvInpaintInvocation"] | components["schemas"]["DepthAnythingImageProcessorInvocation"] | components["schemas"]["RandomRangeInvocation"] | components["schemas"]["ImageNSFWBlurInvocation"] | components["schemas"]["IntegerInvocation"] | components["schemas"]["ImageBlurInvocation"] | components["schemas"]["RoundInvocation"] | components["schemas"]["NoiseInvocation"] | components["schemas"]["DivideInvocation"] | components["schemas"]["MlsdImageProcessorInvocation"];
       };
       /**
        * Edges
@@ -4155,7 +4161,7 @@ export type components = {
        * @description The results of node executions
        */
       results: {
-        [key: string]: components["schemas"]["UNetOutput"] | components["schemas"]["BooleanCollectionOutput"] | components["schemas"]["ControlOutput"] | components["schemas"]["CLIPOutput"] | components["schemas"]["LatentsOutput"] | components["schemas"]["SDXLModelLoaderOutput"] | components["schemas"]["ImageOutput"] | components["schemas"]["ModelLoaderOutput"] | components["schemas"]["ConditioningCollectionOutput"] | components["schemas"]["FloatCollectionOutput"] | components["schemas"]["FaceOffOutput"] | components["schemas"]["IntegerCollectionOutput"] | components["schemas"]["DenoiseMaskOutput"] | components["schemas"]["TileToPropertiesOutput"] | components["schemas"]["StringOutput"] | components["schemas"]["VAEOutput"] | components["schemas"]["ClipSkipInvocationOutput"] | components["schemas"]["FaceMaskOutput"] | components["schemas"]["IdealSizeOutput"] | components["schemas"]["PairTileImageOutput"] | components["schemas"]["SchedulerOutput"] | components["schemas"]["LatentsCollectionOutput"] | components["schemas"]["SDXLRefinerModelLoaderOutput"] | components["schemas"]["IterateInvocationOutput"] | components["schemas"]["FloatOutput"] | components["schemas"]["IntegerOutput"] | components["schemas"]["CollectInvocationOutput"] | components["schemas"]["MetadataOutput"] | components["schemas"]["IPAdapterOutput"] | components["schemas"]["ConditioningOutput"] | components["schemas"]["SeamlessModeOutput"] | components["schemas"]["String2Output"] | components["schemas"]["SDXLLoraLoaderOutput"] | components["schemas"]["MetadataItemOutput"] | components["schemas"]["ColorOutput"] | components["schemas"]["ImageCollectionOutput"] | components["schemas"]["T2IAdapterOutput"] | components["schemas"]["CalculateImageTilesOutput"] | components["schemas"]["StringPosNegOutput"] | components["schemas"]["BooleanOutput"] | components["schemas"]["ColorCollectionOutput"] | components["schemas"]["NoiseOutput"] | components["schemas"]["LoraLoaderOutput"] | components["schemas"]["GraphInvocationOutput"] | components["schemas"]["StringCollectionOutput"] | components["schemas"]["ONNXModelLoaderOutput"];
+        [key: string]: components["schemas"]["StringCollectionOutput"] | components["schemas"]["SDXLModelLoaderOutput"] | components["schemas"]["PairTileImageOutput"] | components["schemas"]["StringOutput"] | components["schemas"]["SDXLLoraLoaderOutput"] | components["schemas"]["ColorCollectionOutput"] | components["schemas"]["ConditioningCollectionOutput"] | components["schemas"]["T2IAdapterOutput"] | components["schemas"]["GraphInvocationOutput"] | components["schemas"]["TileToPropertiesOutput"] | components["schemas"]["SchedulerOutput"] | components["schemas"]["LoraLoaderOutput"] | components["schemas"]["ColorOutput"] | components["schemas"]["BooleanCollectionOutput"] | components["schemas"]["LatentsCollectionOutput"] | components["schemas"]["CalculateImageTilesOutput"] | components["schemas"]["ModelLoaderOutput"] | components["schemas"]["FaceMaskOutput"] | components["schemas"]["CollectInvocationOutput"] | components["schemas"]["ControlOutput"] | components["schemas"]["IterateInvocationOutput"] | components["schemas"]["IPAdapterOutput"] | components["schemas"]["LatentsOutput"] | components["schemas"]["MetadataItemOutput"] | components["schemas"]["NoiseOutput"] | components["schemas"]["StringPosNegOutput"] | components["schemas"]["FloatCollectionOutput"] | components["schemas"]["ONNXModelLoaderOutput"] | components["schemas"]["IntegerCollectionOutput"] | components["schemas"]["String2Output"] | components["schemas"]["ConditioningOutput"] | components["schemas"]["IntegerOutput"] | components["schemas"]["CLIPOutput"] | components["schemas"]["ImageCollectionOutput"] | components["schemas"]["SeamlessModeOutput"] | components["schemas"]["SDXLRefinerModelLoaderOutput"] | components["schemas"]["UNetOutput"] | components["schemas"]["FaceOffOutput"] | components["schemas"]["BooleanOutput"] | components["schemas"]["DenoiseMaskOutput"] | components["schemas"]["ClipSkipInvocationOutput"] | components["schemas"]["ImageOutput"] | components["schemas"]["VAEOutput"] | components["schemas"]["FloatOutput"] | components["schemas"]["IdealSizeOutput"] | components["schemas"]["MetadataOutput"];
       };
       /**
        * Errors
@@ -11502,30 +11508,12 @@ export type components = {
      * @enum {string}
      */
     StableDiffusion1ModelFormat: "checkpoint" | "diffusers";
-    /**
-     * StableDiffusionXLModelFormat
-     * @description An enumeration.
-     * @enum {string}
-     */
-    StableDiffusionXLModelFormat: "checkpoint" | "diffusers";
     /**
      * CLIPVisionModelFormat
      * @description An enumeration.
      * @enum {string}
      */
     CLIPVisionModelFormat: "diffusers";
-    /**
-     * StableDiffusion2ModelFormat
-     * @description An enumeration.
-     * @enum {string}
-     */
-    StableDiffusion2ModelFormat: "checkpoint" | "diffusers";
-    /**
-     * ControlNetModelFormat
-     * @description An enumeration.
-     * @enum {string}
-     */
-    ControlNetModelFormat: "checkpoint" | "diffusers";
     /**
      * T2IAdapterModelFormat
      * @description An enumeration.
@@ -11533,17 +11521,35 @@ export type components = {
      */
     T2IAdapterModelFormat: "diffusers";
     /**
-     * IPAdapterModelFormat
+     * ControlNetModelFormat
      * @description An enumeration.
      * @enum {string}
      */
-    IPAdapterModelFormat: "invokeai";
+    ControlNetModelFormat: "checkpoint" | "diffusers";
     /**
      * StableDiffusionOnnxModelFormat
      * @description An enumeration.
      * @enum {string}
      */
     StableDiffusionOnnxModelFormat: "olive" | "onnx";
+    /**
+     * IPAdapterModelFormat
+     * @description An enumeration.
+     * @enum {string}
+     */
+    IPAdapterModelFormat: "invokeai";
+    /**
+     * StableDiffusion2ModelFormat
+     * @description An enumeration.
+     * @enum {string}
+     */
+    StableDiffusion2ModelFormat: "checkpoint" | "diffusers";
+    /**
+     * StableDiffusionXLModelFormat
+     * @description An enumeration.
+     * @enum {string}
+     */
+    StableDiffusionXLModelFormat: "checkpoint" | "diffusers";
   };
   responses: never;
   parameters: never;

From a0e68705dd80fceda5cdd1d3aa35dbb2cfa7ff59 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 24 Jan 2024 07:59:29 +1100
Subject: [PATCH 029/133] feat(ui): improved dynamic prompts behaviour

- Bump `@invoke-ai/ui` for updated styles
- Update regex to parse prompts with newlines
- Update styling of overlay button when prompt has an error
- Fix bug where loading and error state sometimes weren't cleared
---
 invokeai/frontend/web/package.json                   |  2 +-
 invokeai/frontend/web/pnpm-lock.yaml                 | 12 ++++++------
 .../listenerMiddleware/listeners/promptChanged.ts    |  7 +++----
 .../components/ParamDynamicPromptsPreview.tsx        |  7 ++++++-
 .../components/ShowDynamicPromptsPreviewButton.tsx   |  5 +++++
 .../dynamicPrompts/store/dynamicPromptsSlice.ts      |  1 +
 .../dynamicPrompts/util/getShouldProcessPrompt.ts    |  2 +-
 7 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/invokeai/frontend/web/package.json b/invokeai/frontend/web/package.json
index f989a98b4e..db43fd2f71 100644
--- a/invokeai/frontend/web/package.json
+++ b/invokeai/frontend/web/package.json
@@ -57,7 +57,7 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@fontsource-variable/inter": "^5.0.16",
-    "@invoke-ai/ui": "0.0.12",
+    "@invoke-ai/ui": "0.0.13",
     "@mantine/form": "6.0.21",
     "@nanostores/react": "^0.7.1",
     "@reduxjs/toolkit": "2.0.1",
diff --git a/invokeai/frontend/web/pnpm-lock.yaml b/invokeai/frontend/web/pnpm-lock.yaml
index bdd7ab844c..958c3f6350 100644
--- a/invokeai/frontend/web/pnpm-lock.yaml
+++ b/invokeai/frontend/web/pnpm-lock.yaml
@@ -29,8 +29,8 @@ dependencies:
     specifier: ^5.0.16
     version: 5.0.16
   '@invoke-ai/ui':
-    specifier: 0.0.12
-    version: 0.0.12(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.16)(@internationalized/date@3.5.1)(@types/react@18.2.48)(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0)
+    specifier: 0.0.13
+    version: 0.0.13(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.16)(@internationalized/date@3.5.1)(@types/react@18.2.48)(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0)
   '@mantine/form':
     specifier: 6.0.21
     version: 6.0.21(react@18.2.0)
@@ -3759,8 +3759,8 @@ packages:
       '@swc/helpers': 0.5.3
     dev: false
 
-  /@invoke-ai/ui@0.0.12(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.16)(@internationalized/date@3.5.1)(@types/react@18.2.48)(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-G0iPzGx1Nu7mHOZtwUYtqNWAqo2KnYGvs883w4WJwUpoCEbnaZd9Pi876UvOh9aNyjO93t/5ctIffkcYlDKGNg==}
+  /@invoke-ai/ui@0.0.13(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.16)(@internationalized/date@3.5.1)(@types/react@18.2.48)(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-X4Txij2dMnzPUXTPhorBHezByJQ/ceyHxCM+zZ0gpFsSyXUieOFWjaSu+dAVpghS9y0dxFQGayHvNyX6VsX/PA==}
     peerDependencies:
       '@fontsource-variable/inter': ^5.0.16
       react: ^18.2.0
@@ -12063,7 +12063,7 @@ packages:
     peerDependencies:
       react: ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
     dependencies:
-      '@babel/runtime': 7.23.7
+      '@babel/runtime': 7.23.8
       react: 18.2.0
     dev: false
 
@@ -12158,7 +12158,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.23.7
+      '@babel/runtime': 7.23.8
       '@types/react': 18.2.48
       focus-lock: 1.0.0
       prop-types: 15.8.1
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/promptChanged.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/promptChanged.ts
index 7b24220e98..2dd36690a0 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/promptChanged.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/promptChanged.ts
@@ -46,14 +46,14 @@ export const addDynamicPromptsListener = () => {
 
       if (cachedPrompts) {
         dispatch(promptsChanged(cachedPrompts.prompts));
+        dispatch(parsingErrorChanged(cachedPrompts.error));
         return;
       }
 
       if (!getShouldProcessPrompt(state.generation.positivePrompt)) {
-        if (state.dynamicPrompts.isLoading) {
-          dispatch(isLoadingChanged(false));
-        }
         dispatch(promptsChanged([state.generation.positivePrompt]));
+        dispatch(parsingErrorChanged(undefined));
+        dispatch(isErrorChanged(false));
         return;
       }
 
@@ -78,7 +78,6 @@ export const addDynamicPromptsListener = () => {
         dispatch(promptsChanged(res.prompts));
         dispatch(parsingErrorChanged(res.error));
         dispatch(isErrorChanged(false));
-        dispatch(isLoadingChanged(false));
       } catch {
         dispatch(isErrorChanged(true));
         dispatch(isLoadingChanged(false));
diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx
index 4b5de0cb85..48cfd9a8d4 100644
--- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx
+++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx
@@ -61,7 +61,12 @@ const ParamDynamicPromptsPreview = () => {
   }
 
   return (
-    <FormControl orientation="vertical" w="full" h="full">
+    <FormControl
+      orientation="vertical"
+      w="full"
+      h="full"
+      isInvalid={Boolean(parsingError || isError)}
+    >
       <InformationalPopover feature="dynamicPrompts" inPortal={false}>
         <FormLabel>{label}</FormLabel>
       </InformationalPopover>
diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx
index 7dceb6acfc..b590767868 100644
--- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx
+++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx
@@ -13,7 +13,11 @@ const loadingStyles: SystemStyleObject = {
 export const ShowDynamicPromptsPreviewButton = memo(() => {
   const { t } = useTranslation();
   const isLoading = useAppSelector((s) => s.dynamicPrompts.isLoading);
+  const isError = useAppSelector((s) =>
+    Boolean(s.dynamicPrompts.isError || s.dynamicPrompts.parsingError)
+  );
   const { isOpen, onOpen } = useDynamicPromptsModal();
+
   return (
     <Tooltip
       label={
@@ -30,6 +34,7 @@ export const ShowDynamicPromptsPreviewButton = memo(() => {
         icon={<BsBracesAsterisk />}
         onClick={onOpen}
         sx={isLoading ? loadingStyles : undefined}
+        colorScheme={isError && !isLoading ? 'error' : 'base'}
       />
     </Tooltip>
   );
diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/store/dynamicPromptsSlice.ts b/invokeai/frontend/web/src/features/dynamicPrompts/store/dynamicPromptsSlice.ts
index 845f72306e..603faa5535 100644
--- a/invokeai/frontend/web/src/features/dynamicPrompts/store/dynamicPromptsSlice.ts
+++ b/invokeai/frontend/web/src/features/dynamicPrompts/store/dynamicPromptsSlice.ts
@@ -47,6 +47,7 @@ export const dynamicPromptsSlice = createSlice({
     },
     promptsChanged: (state, action: PayloadAction<string[]>) => {
       state.prompts = action.payload;
+      state.isLoading = false;
     },
     parsingErrorChanged: (
       state,
diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/util/getShouldProcessPrompt.ts b/invokeai/frontend/web/src/features/dynamicPrompts/util/getShouldProcessPrompt.ts
index 56fa32fb67..1d2a5e715e 100644
--- a/invokeai/frontend/web/src/features/dynamicPrompts/util/getShouldProcessPrompt.ts
+++ b/invokeai/frontend/web/src/features/dynamicPrompts/util/getShouldProcessPrompt.ts
@@ -1,3 +1,3 @@
-const hasOpenCloseCurlyBracesRegex = /.*\{.*\}.*/;
+const hasOpenCloseCurlyBracesRegex = /.*\{[\s\S]*\}.*/;
 export const getShouldProcessPrompt = (prompt: string): boolean =>
   hasOpenCloseCurlyBracesRegex.test(prompt);

From b4cf5496b6fcdafb894bad7fd73a7c7ac40ec757 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 24 Jan 2024 08:39:23 +1100
Subject: [PATCH 030/133] fix(ui): handle model names with spaces

Remove `trim()` from model identifier schema, which prevented parsed model identifiers from matching.

The root issue here is that model names are identifiers. This will be resolved in the model manager refactor.

Closes #5556
---
 invokeai/frontend/web/src/features/nodes/types/common.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/features/nodes/types/common.ts b/invokeai/frontend/web/src/features/nodes/types/common.ts
index 81334078fd..c3cb758c87 100644
--- a/invokeai/frontend/web/src/features/nodes/types/common.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/common.ts
@@ -65,7 +65,7 @@ export const zModelType = z.enum([
   'controlnet',
   'embedding',
 ]);
-export const zModelName = z.string().trim().min(1);
+export const zModelName = z.string().min(3);
 export const zModelIdentifier = z.object({
   model_name: zModelName,
   base_model: zBaseModel,

From 92fb09c4df4728ac43ff3a44aa43b968732cbd98 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Wed, 24 Jan 2024 03:35:37 +0530
Subject: [PATCH 031/133] fix: Move the models to any folder to avoid boot
 warnings

---
 invokeai/backend/image_util/depth_anything/__init__.py | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/invokeai/backend/image_util/depth_anything/__init__.py b/invokeai/backend/image_util/depth_anything/__init__.py
index 64eeb3d12f..af94b3bdef 100644
--- a/invokeai/backend/image_util/depth_anything/__init__.py
+++ b/invokeai/backend/image_util/depth_anything/__init__.py
@@ -20,15 +20,15 @@ config = InvokeAIAppConfig.get_config()
 DEPTH_ANYTHING_MODELS = {
     "large": {
         "url": "https://huggingface.co/spaces/LiheYoung/Depth-Anything/resolve/main/checkpoints/depth_anything_vitl14.pth?download=true",
-        "local": "sd-1/controlnet/annotators/depth_anything/depth_anything_vitl14.pth",
+        "local": "any/annotators/depth_anything/depth_anything_vitl14.pth",
     },
     "base": {
         "url": "https://huggingface.co/spaces/LiheYoung/Depth-Anything/resolve/main/checkpoints/depth_anything_vitb14.pth?download=true",
-        "local": "sd-1/controlnet/annotators/depth_anything/depth_anything_vitb14.pth",
+        "local": "any/annotators/depth_anything/depth_anything/depth_anything_vitb14.pth",
     },
     "small": {
         "url": "https://huggingface.co/spaces/LiheYoung/Depth-Anything/resolve/main/checkpoints/depth_anything_vits14.pth?download=true",
-        "local": "sd-1/controlnet/annotators/depth_anything/depth_anything_vits14.pth",
+        "local": "any/annotators/depth_anything/depth_anything/depth_anything_vits14.pth",
     },
 }
 

From 35184dbd86d8f299071a2e865395f8845891bc5c Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Wed, 24 Jan 2024 03:37:16 +0530
Subject: [PATCH 032/133] fix: incorrect local file path

---
 invokeai/backend/image_util/depth_anything/__init__.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/invokeai/backend/image_util/depth_anything/__init__.py b/invokeai/backend/image_util/depth_anything/__init__.py
index af94b3bdef..fcd600b99e 100644
--- a/invokeai/backend/image_util/depth_anything/__init__.py
+++ b/invokeai/backend/image_util/depth_anything/__init__.py
@@ -24,11 +24,11 @@ DEPTH_ANYTHING_MODELS = {
     },
     "base": {
         "url": "https://huggingface.co/spaces/LiheYoung/Depth-Anything/resolve/main/checkpoints/depth_anything_vitb14.pth?download=true",
-        "local": "any/annotators/depth_anything/depth_anything/depth_anything_vitb14.pth",
+        "local": "any/annotators/depth_anything/depth_anything_vitb14.pth",
     },
     "small": {
         "url": "https://huggingface.co/spaces/LiheYoung/Depth-Anything/resolve/main/checkpoints/depth_anything_vits14.pth?download=true",
-        "local": "any/annotators/depth_anything/depth_anything/depth_anything_vits14.pth",
+        "local": "any/annotators/depth_anything/depth_anything_vits14.pth",
     },
 }
 

From 3dc13221d87498572c17d5388149ac8110b15a49 Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Tue, 23 Jan 2024 09:49:50 -0500
Subject: [PATCH 033/133] add project as a workflow category in the front-end

---
 invokeai/frontend/web/public/locales/en.json  |   2 +
 .../web/src/features/nodes/types/workflow.ts  |   2 +-
 .../components/WorkflowLibraryList.tsx        |  42 +-
 .../components/WorkflowLibraryListItem.tsx    |   6 +-
 .../frontend/web/src/services/api/schema.ts   | 748 ++++++++++++++----
 5 files changed, 630 insertions(+), 170 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 4aa31ede8a..54c259efbf 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -1697,6 +1697,7 @@
         "workflowLibrary": "Library",
         "userWorkflows": "My Workflows",
         "defaultWorkflows": "Default Workflows",
+        "projectWorkflows": "Project Workflows",
         "openWorkflow": "Open Workflow",
         "uploadWorkflow": "Load from File",
         "deleteWorkflow": "Delete Workflow",
@@ -1709,6 +1710,7 @@
         "workflowSaved": "Workflow Saved",
         "noRecentWorkflows": "No Recent Workflows",
         "noUserWorkflows": "No User Workflows",
+        "noWorkflows": "No Workflows",
         "noSystemWorkflows": "No System Workflows",
         "problemLoading": "Problem Loading Workflows",
         "loading": "Loading Workflows",
diff --git a/invokeai/frontend/web/src/features/nodes/types/workflow.ts b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
index f7ada635e5..8919e597dc 100644
--- a/invokeai/frontend/web/src/features/nodes/types/workflow.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
@@ -15,7 +15,7 @@ export type XYPosition = z.infer<typeof zXYPosition>;
 export const zDimension = z.number().gt(0).nullish();
 export type Dimension = z.infer<typeof zDimension>;
 
-export const zWorkflowCategory = z.enum(['user', 'default']);
+export const zWorkflowCategory = z.enum(['user', 'default', 'project']);
 export type WorkflowCategory = z.infer<typeof zWorkflowCategory>;
 // #endregion
 
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx
index 9d5087d059..3ff519f672 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx
@@ -13,6 +13,8 @@ import {
   InputRightElement,
   Spacer,
 } from '@invoke-ai/ui';
+import { useStore } from '@nanostores/react';
+import { $projectId } from 'app/store/nanostores/projectId';
 import {
   IAINoContentFallback,
   IAINoContentFallbackWithSpinner,
@@ -62,6 +64,7 @@ const WorkflowLibraryList = () => {
   const [order_by, setOrderBy] = useState<WorkflowRecordOrderBy>('opened_at');
   const [direction, setDirection] = useState<SQLiteDirection>('ASC');
   const [debouncedQuery] = useDebounce(query, 500);
+  const projectId = useStore($projectId);
 
   const queryArg = useMemo<Parameters<typeof useListWorkflowsQuery>[0]>(() => {
     if (category === 'user') {
@@ -142,13 +145,8 @@ const WorkflowLibraryList = () => {
     []
   );
 
-  const handleSetUserCategory = useCallback(() => {
-    setCategory('user');
-    setPage(0);
-  }, []);
-
-  const handleSetDefaultCategory = useCallback(() => {
-    setCategory('default');
+  const handleSetCategory = useCallback((category: WorkflowCategory) => {
+    setCategory(category);
     setPage(0);
   }, []);
 
@@ -158,21 +156,31 @@ const WorkflowLibraryList = () => {
         <ButtonGroup>
           <Button
             variant={category === 'user' ? undefined : 'ghost'}
-            onClick={handleSetUserCategory}
+            onClick={handleSetCategory.bind(null, 'user')}
             isChecked={category === 'user'}
           >
             {t('workflows.userWorkflows')}
           </Button>
-          <Button
-            variant={category === 'default' ? undefined : 'ghost'}
-            onClick={handleSetDefaultCategory}
-            isChecked={category === 'default'}
-          >
-            {t('workflows.defaultWorkflows')}
-          </Button>
+          {projectId ? (
+            <Button
+              variant={category === 'project' ? undefined : 'ghost'}
+              onClick={handleSetCategory.bind(null, 'project')}
+              isChecked={category === 'project'}
+            >
+              {t('workflows.projectWorkflows')}
+            </Button>
+          ) : (
+            <Button
+              variant={category === 'default' ? undefined : 'ghost'}
+              onClick={handleSetCategory.bind(null, 'default')}
+              isChecked={category === 'default'}
+            >
+              {t('workflows.defaultWorkflows')}
+            </Button>
+          )}
         </ButtonGroup>
         <Spacer />
-        {category === 'user' && (
+        {category !== 'default' && (
           <>
             <FormControl isDisabled={isFetching} w={64} minW={56}>
               <FormLabel>{t('common.orderBy')}</FormLabel>
@@ -228,7 +236,7 @@ const WorkflowLibraryList = () => {
           </Flex>
         </ScrollableContent>
       ) : (
-        <IAINoContentFallback label={t('workflows.noUserWorkflows')} />
+        <IAINoContentFallback label={t('workflows.noWorkflows')} />
       )}
       <Divider />
       {data && (
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx
index 59fd8983de..da122c39e0 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx
@@ -52,7 +52,7 @@ const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
               {workflowDTO.name || t('workflows.unnamedWorkflow')}
             </Heading>
             <Spacer />
-            {workflowDTO.category === 'user' && (
+            {workflowDTO.category !== 'default' && (
               <Text
                 fontSize="sm"
                 variant="subtext"
@@ -81,7 +81,7 @@ const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
               </Text>
             )}
             <Spacer />
-            {workflowDTO.category === 'user' && (
+            {workflowDTO.category !== 'default' && (
               <Text
                 fontSize="sm"
                 variant="subtext"
@@ -104,7 +104,7 @@ const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
         >
           {t('common.load')}
         </Button>
-        {workflowDTO.category === 'user' && (
+        {workflowDTO.category !== 'default' && (
           <Button
             flexShrink={0}
             colorScheme="error"
diff --git a/invokeai/frontend/web/src/services/api/schema.ts b/invokeai/frontend/web/src/services/api/schema.ts
index 92987c2a05..a7f60d6cdf 100644
--- a/invokeai/frontend/web/src/services/api/schema.ts
+++ b/invokeai/frontend/web/src/services/api/schema.ts
@@ -112,6 +112,34 @@ export type paths = {
      */
     patch: operations["update_model_record"];
   };
+  "/api/v1/model/record/meta": {
+    /**
+     * List Model Summary
+     * @description Gets a page of model summary data.
+     */
+    get: operations["list_model_summary"];
+  };
+  "/api/v1/model/record/meta/i/{key}": {
+    /**
+     * Get Model Metadata
+     * @description Get a model metadata object.
+     */
+    get: operations["get_model_metadata"];
+  };
+  "/api/v1/model/record/tags": {
+    /**
+     * List Tags
+     * @description Get a unique set of all the model tags.
+     */
+    get: operations["list_tags"];
+  };
+  "/api/v1/model/record/tags/search": {
+    /**
+     * Search By Metadata Tags
+     * @description Get a list of models.
+     */
+    get: operations["search_by_metadata_tags"];
+  };
   "/api/v1/model/record/i/": {
     /**
      * Add Model Record
@@ -123,9 +151,6 @@ export type paths = {
     /**
      * List Model Install Jobs
      * @description Return list of model install jobs.
-     *
-     * If the optional 'source' argument is provided, then the list will be filtered
-     * for partial string matches against the install source.
      */
     get: operations["list_model_install_jobs"];
     /**
@@ -175,7 +200,7 @@ export type paths = {
      * Installation occurs in the background. Either use list_model_install_jobs()
      * to poll for completion, or listen on the event bus for the following events:
      *
-     *   "model_install_started"
+     *   "model_install_running"
      *   "model_install_completed"
      *   "model_install_error"
      *
@@ -191,10 +216,24 @@ export type paths = {
      */
     patch: operations["prune_model_install_jobs"];
   };
+  "/api/v1/model/record/import/{id}": {
+    /**
+     * Get Model Install Job
+     * @description Return model install job corresponding to the given source.
+     */
+    get: operations["get_model_install_job"];
+    /**
+     * Cancel Model Install Job
+     * @description Cancel the model install job(s) corresponding to the given job ID.
+     */
+    delete: operations["cancel_model_install_job"];
+  };
   "/api/v1/model/record/sync": {
     /**
      * Sync Models To Config
-     * @description Traverse the models and autoimport directories. Model files without a corresponding
+     * @description Traverse the models and autoimport directories.
+     *
+     * Model files without a corresponding
      * record in the database are added. Orphan records without a models file are deleted.
      */
     patch: operations["sync_models_to_config"];
@@ -736,46 +775,31 @@ export type components = {
       version: string;
     };
     /**
-     * Average Images
-     * @description Average images
+     * BaseMetadata
+     * @description Adds typing data for discriminated union.
      */
-    AverageImagesInvocation: {
-      /** @description Optional metadata to be saved with the image */
-      metadata?: components["schemas"]["MetadataField"] | null;
+    BaseMetadata: {
       /**
-       * Id
-       * @description The id of this instance of an invocation. Must be unique among all instances of invocations.
+       * Name
+       * @description model's name
        */
-      id: string;
+      name: string;
       /**
-       * Is Intermediate
-       * @description Whether or not this is an intermediate invocation.
-       * @default false
+       * Author
+       * @description model's author
        */
-      is_intermediate?: boolean;
+      author: string;
       /**
-       * Use Cache
-       * @description Whether or not to use the cache
-       * @default true
+       * Tags
+       * @description tags provided by model source
        */
-      use_cache?: boolean;
+      tags: string[];
       /**
-       * Images
-       * @description The collection of images to average
-       */
-      images?: components["schemas"]["ImageField"][];
-      /**
-       * Gamma
-       * @description Gamma for color correcting before/after blending
-       * @default 2.2
-       */
-      gamma?: number;
-      /**
-       * type
-       * @default average_images
+       * Type
+       * @default basemetadata
        * @constant
        */
-      type: "average_images";
+      type?: "basemetadata";
     };
     /** Batch */
     Batch: {
@@ -1137,7 +1161,7 @@ export type components = {
     /** Body_import_model_record */
     Body_import_model_record: {
       /** Source */
-      source: components["schemas"]["LocalModelSource"] | components["schemas"]["HFModelSource"] | components["schemas"]["URLModelSource"];
+      source: components["schemas"]["LocalModelSource"] | components["schemas"]["HFModelSource"] | components["schemas"]["CivitaiModelSource"] | components["schemas"]["URLModelSource"];
       /**
        * Config
        * @description Dict of fields that override auto-probed values in the model config record, such as name, description and prediction_type
@@ -1747,6 +1771,136 @@ export type components = {
        */
       type: "img_pad_crop";
     };
+    /**
+     * CivitaiMetadata
+     * @description Extended metadata fields provided by Civitai.
+     */
+    CivitaiMetadata: {
+      /**
+       * Name
+       * @description model's name
+       */
+      name: string;
+      /**
+       * Author
+       * @description model's author
+       */
+      author: string;
+      /**
+       * Tags
+       * @description tags provided by model source
+       */
+      tags: string[];
+      /**
+       * Files
+       * @description model files and their sizes
+       */
+      files?: components["schemas"]["RemoteModelFile"][];
+      /**
+       * Type
+       * @default civitai
+       * @constant
+       */
+      type?: "civitai";
+      /**
+       * Id
+       * @description Civitai version identifier
+       */
+      id: number;
+      /**
+       * Version Name
+       * @description Version identifier, such as 'V2-alpha'
+       */
+      version_name: string;
+      /**
+       * Version Id
+       * @description Civitai model version identifier
+       */
+      version_id: number;
+      /**
+       * Created
+       * Format: date-time
+       * @description date the model was created
+       */
+      created: string;
+      /**
+       * Updated
+       * Format: date-time
+       * @description date the model was last modified
+       */
+      updated: string;
+      /**
+       * Published
+       * Format: date-time
+       * @description date the model was published to Civitai
+       */
+      published: string;
+      /**
+       * Description
+       * @description text description of model; may contain HTML
+       */
+      description: string;
+      /**
+       * Version Description
+       * @description text description of the model's reversion; usually change history; may contain HTML
+       */
+      version_description: string;
+      /**
+       * Nsfw
+       * @description whether the model tends to generate NSFW content
+       * @default false
+       */
+      nsfw?: boolean;
+      /** @description license terms */
+      restrictions?: components["schemas"]["LicenseRestrictions"];
+      /**
+       * Trained Words
+       * @description words to trigger the model
+       */
+      trained_words?: string[];
+      /**
+       * Download Url
+       * Format: uri
+       * @description download URL for this model
+       */
+      download_url: string;
+      /**
+       * Base Model Trained On
+       * @description base model on which this model was trained (currently not an enum)
+       */
+      base_model_trained_on: string;
+      /**
+       * Thumbnail Url
+       * @description a thumbnail image for this model
+       */
+      thumbnail_url?: string | null;
+      /**
+       * Weight Minmax
+       * @description minimum and maximum slider values for a LoRA or other secondary model
+       * @default [
+       *   -1,
+       *   2
+       * ]
+       */
+      weight_minmax?: [number, number];
+    };
+    /**
+     * CivitaiModelSource
+     * @description A Civitai version id, with optional variant and access token.
+     */
+    CivitaiModelSource: {
+      /** Version Id */
+      version_id: number;
+      variant?: components["schemas"]["ModelRepoVariant"] | null;
+      /** Access Token */
+      access_token?: string | null;
+      /**
+       * Type
+       * @default civitai
+       * @constant
+       */
+      type?: "civitai";
+    };
     /**
      * ClearResult
      * @description Result of clearing the session queue
@@ -2065,6 +2219,12 @@ export type components = {
        */
       type: "color_output";
     };
+    /**
+     * CommercialUsage
+     * @description Type of commercial usage allowed.
+     * @enum {string}
+     */
+    CommercialUsage: "None" | "Image" | "Rent" | "RentCivit" | "Sell";
     /**
      * Prompt
      * @description Parse prompt using compel package to conditioning.
@@ -2778,7 +2938,7 @@ export type components = {
       /**
        * Fp32
        * @description Whether or not to use full float32 precision
-       * @default false
+       * @default true
        */
       fp32?: boolean;
       /**
@@ -2993,7 +3153,7 @@ export type components = {
        */
       t2i_adapter?: components["schemas"]["T2IAdapterField"] | components["schemas"]["T2IAdapterField"][] | null;
       /**
-       * Cfg Rescale Multiplier
+       * CFG Rescale Multiplier
        * @description Rescale multiplier for CFG guidance, used for models trained with zero-terminal SNR
        * @default 0
        */
@@ -3134,6 +3294,11 @@ export type components = {
        * @description Timestamp for when the download job ende1d (completed or errored)
        */
       job_ended?: string | null;
+      /**
+       * Content Type
+       * @description Content type of downloaded file
+       */
+      content_type?: string | null;
       /**
        * Bytes
        * @description Bytes downloaded so far
@@ -3908,7 +4073,7 @@ export type components = {
        * @description The nodes in this graph
        */
       nodes?: {
-        [key: string]: components["schemas"]["ImageInverseLerpInvocation"] | components["schemas"]["HedImageProcessorInvocation"] | components["schemas"]["MidasDepthImageProcessorInvocation"] | components["schemas"]["ScaleLatentsInvocation"] | components["schemas"]["ColorCorrectInvocation"] | components["schemas"]["LineartAnimeImageProcessorInvocation"] | components["schemas"]["IntegerCollectionInvocation"] | components["schemas"]["MergeTilesToImageInvocation"] | components["schemas"]["FloatMathInvocation"] | components["schemas"]["ZoeDepthImageProcessorInvocation"] | components["schemas"]["ImageToLatentsInvocation"] | components["schemas"]["ImageChannelInvocation"] | components["schemas"]["ConditioningInvocation"] | components["schemas"]["BlendLatentsInvocation"] | components["schemas"]["MaskEdgeInvocation"] | components["schemas"]["BooleanInvocation"] | components["schemas"]["CollectInvocation"] | components["schemas"]["VaeLoaderInvocation"] | components["schemas"]["CvInpaintInvocation"] | components["schemas"]["FloatCollectionInvocation"] | components["schemas"]["IntegerMathInvocation"] | components["schemas"]["StringSplitInvocation"] | components["schemas"]["ESRGANInvocation"] | components["schemas"]["StringCollectionInvocation"] | components["schemas"]["CalculateImageTilesInvocation"] | components["schemas"]["LoraLoaderInvocation"] | components["schemas"]["MediapipeFaceProcessorInvocation"] | components["schemas"]["ImageInvocation"] | components["schemas"]["CompelInvocation"] | components["schemas"]["StringSplitNegInvocation"] | components["schemas"]["ConditioningCollectionInvocation"] | components["schemas"]["OnnxModelLoaderInvocation"] | components["schemas"]["FloatInvocation"] | components["schemas"]["ONNXLatentsToImageInvocation"] | components["schemas"]["LatentsCollectionInvocation"] | components["schemas"]["ImageCollectionInvocation"] | components["schemas"]["SchedulerInvocation"] | components["schemas"]["ImageNSFWBlurInvocation"] | components["schemas"]["CreateDenoiseMaskInvocation"] | components["schemas"]["LinearUIOutputInvocation"] | components["schemas"]["StringJoinInvocation"] | components["schemas"]["ImageChannelMultiplyInvocation"] | components["schemas"]["FloatToIntegerInvocation"] | components["schemas"]["StringInvocation"] | components["schemas"]["SDXLLoraLoaderInvocation"] | components["schemas"]["ImageMultiplyInvocation"] | components["schemas"]["InfillPatchMatchInvocation"] | components["schemas"]["CropLatentsCoreInvocation"] | components["schemas"]["ColorMapImageProcessorInvocation"] | components["schemas"]["SDXLRefinerCompelPromptInvocation"] | components["schemas"]["ImageBlurInvocation"] | components["schemas"]["ClipSkipInvocation"] | components["schemas"]["NormalbaeImageProcessorInvocation"] | components["schemas"]["InfillColorInvocation"] | components["schemas"]["DenoiseLatentsInvocation"] | components["schemas"]["ControlNetInvocation"] | components["schemas"]["IPAdapterInvocation"] | components["schemas"]["CoreMetadataInvocation"] | components["schemas"]["ImageLerpInvocation"] | components["schemas"]["SubtractInvocation"] | components["schemas"]["ShowImageInvocation"] | components["schemas"]["MultiplyInvocation"] | components["schemas"]["SeamlessModeInvocation"] | components["schemas"]["AddInvocation"] | components["schemas"]["FaceOffInvocation"] | components["schemas"]["SDXLRefinerModelLoaderInvocation"] | components["schemas"]["CenterPadCropInvocation"] | components["schemas"]["ImagePasteInvocation"] | components["schemas"]["PromptsFromFileInvocation"] | components["schemas"]["T2IAdapterInvocation"] | components["schemas"]["SaveImageInvocation"] | components["schemas"]["ResizeLatentsInvocation"] | components["schemas"]["IntegerInvocation"] | components["schemas"]["OpenposeImageProcessorInvocation"] | components["schemas"]["CannyImageProcessorInvocation"] | components["schemas"]["ImageWatermarkInvocation"] | components["schemas"]["StringJoinThreeInvocation"] | components["schemas"]["GraphInvocation"] | components["schemas"]["LineartImageProcessorInvocation"] | components["schemas"]["AverageImagesInvocation"] | components["schemas"]["FloatLinearRangeInvocation"] | components["schemas"]["ColorInvocation"] | components["schemas"]["DivideInvocation"] | components["schemas"]["RangeOfSizeInvocation"] | components["schemas"]["IdealSizeInvocation"] | components["schemas"]["ContentShuffleImageProcessorInvocation"] | components["schemas"]["MetadataItemInvocation"] | components["schemas"]["RoundInvocation"] | components["schemas"]["DynamicPromptInvocation"] | components["schemas"]["SDXLCompelPromptInvocation"] | components["schemas"]["RangeInvocation"] | components["schemas"]["ImageConvertInvocation"] | components["schemas"]["MaskFromAlphaInvocation"] | components["schemas"]["RandomIntInvocation"] | components["schemas"]["BooleanCollectionInvocation"] | components["schemas"]["MergeMetadataInvocation"] | components["schemas"]["LatentsToImageInvocation"] | components["schemas"]["TileResamplerProcessorInvocation"] | components["schemas"]["CalculateImageTilesMinimumOverlapInvocation"] | components["schemas"]["ImageScaleInvocation"] | components["schemas"]["PidiImageProcessorInvocation"] | components["schemas"]["ONNXTextToLatentsInvocation"] | components["schemas"]["PairTileImageInvocation"] | components["schemas"]["ImageChannelOffsetInvocation"] | components["schemas"]["ImageResizeInvocation"] | components["schemas"]["SDXLModelLoaderInvocation"] | components["schemas"]["StepParamEasingInvocation"] | components["schemas"]["IterateInvocation"] | components["schemas"]["RandomFloatInvocation"] | components["schemas"]["MetadataInvocation"] | components["schemas"]["SegmentAnythingProcessorInvocation"] | components["schemas"]["ImageHueAdjustmentInvocation"] | components["schemas"]["ImageCropInvocation"] | components["schemas"]["FreeUInvocation"] | components["schemas"]["RandomRangeInvocation"] | components["schemas"]["LaMaInfillInvocation"] | components["schemas"]["FaceMaskInvocation"] | components["schemas"]["MainModelLoaderInvocation"] | components["schemas"]["CV2InfillInvocation"] | components["schemas"]["CalculateImageTilesEvenSplitInvocation"] | components["schemas"]["BlankImageInvocation"] | components["schemas"]["MaskCombineInvocation"] | components["schemas"]["StringReplaceInvocation"] | components["schemas"]["NoiseInvocation"] | components["schemas"]["LeresImageProcessorInvocation"] | components["schemas"]["UnsharpMaskInvocation"] | components["schemas"]["TileToPropertiesInvocation"] | components["schemas"]["LatentsInvocation"] | components["schemas"]["ONNXPromptInvocation"] | components["schemas"]["FaceIdentifierInvocation"] | components["schemas"]["MlsdImageProcessorInvocation"] | components["schemas"]["InfillTileInvocation"];
+        [key: string]: components["schemas"]["ColorCorrectInvocation"] | components["schemas"]["SaveImageInvocation"] | components["schemas"]["OpenposeImageProcessorInvocation"] | components["schemas"]["GraphInvocation"] | components["schemas"]["ImageResizeInvocation"] | components["schemas"]["PromptsFromFileInvocation"] | components["schemas"]["CalculateImageTilesMinimumOverlapInvocation"] | components["schemas"]["ImageMultiplyInvocation"] | components["schemas"]["InfillTileInvocation"] | components["schemas"]["LeresImageProcessorInvocation"] | components["schemas"]["ShowImageInvocation"] | components["schemas"]["IntegerMathInvocation"] | components["schemas"]["LatentsToImageInvocation"] | components["schemas"]["CropLatentsCoreInvocation"] | components["schemas"]["MidasDepthImageProcessorInvocation"] | components["schemas"]["FloatToIntegerInvocation"] | components["schemas"]["BooleanCollectionInvocation"] | components["schemas"]["NormalbaeImageProcessorInvocation"] | components["schemas"]["CenterPadCropInvocation"] | components["schemas"]["BlendLatentsInvocation"] | components["schemas"]["ImageNSFWBlurInvocation"] | components["schemas"]["NoiseInvocation"] | components["schemas"]["CollectInvocation"] | components["schemas"]["SDXLCompelPromptInvocation"] | components["schemas"]["MultiplyInvocation"] | components["schemas"]["MaskCombineInvocation"] | components["schemas"]["LaMaInfillInvocation"] | components["schemas"]["StringJoinThreeInvocation"] | components["schemas"]["BlankImageInvocation"] | components["schemas"]["MetadataInvocation"] | components["schemas"]["ResizeLatentsInvocation"] | components["schemas"]["CompelInvocation"] | components["schemas"]["MetadataItemInvocation"] | components["schemas"]["StringJoinInvocation"] | components["schemas"]["ImageScaleInvocation"] | components["schemas"]["InfillColorInvocation"] | components["schemas"]["FaceMaskInvocation"] | components["schemas"]["StringSplitNegInvocation"] | components["schemas"]["FloatMathInvocation"] | components["schemas"]["LatentsInvocation"] | components["schemas"]["MlsdImageProcessorInvocation"] | components["schemas"]["SchedulerInvocation"] | components["schemas"]["RandomFloatInvocation"] | components["schemas"]["ConditioningCollectionInvocation"] | components["schemas"]["FreeUInvocation"] | components["schemas"]["SDXLModelLoaderInvocation"] | components["schemas"]["MaskFromAlphaInvocation"] | components["schemas"]["AddInvocation"] | components["schemas"]["FloatCollectionInvocation"] | components["schemas"]["StepParamEasingInvocation"] | components["schemas"]["SDXLRefinerModelLoaderInvocation"] | components["schemas"]["ImageChannelInvocation"] | components["schemas"]["ImageBlurInvocation"] | components["schemas"]["IntegerInvocation"] | components["schemas"]["CannyImageProcessorInvocation"] | components["schemas"]["StringSplitInvocation"] | components["schemas"]["ImagePasteInvocation"] | components["schemas"]["OnnxModelLoaderInvocation"] | components["schemas"]["CalculateImageTilesEvenSplitInvocation"] | components["schemas"]["FloatInvocation"] | components["schemas"]["SegmentAnythingProcessorInvocation"] | components["schemas"]["ZoeDepthImageProcessorInvocation"] | components["schemas"]["RandomRangeInvocation"] | components["schemas"]["SDXLRefinerCompelPromptInvocation"] | components["schemas"]["CV2InfillInvocation"] | components["schemas"]["FaceOffInvocation"] | components["schemas"]["BooleanInvocation"] | components["schemas"]["ONNXPromptInvocation"] | components["schemas"]["PidiImageProcessorInvocation"] | components["schemas"]["FaceIdentifierInvocation"] | components["schemas"]["T2IAdapterInvocation"] | components["schemas"]["ImageConvertInvocation"] | components["schemas"]["CoreMetadataInvocation"] | components["schemas"]["TileResamplerProcessorInvocation"] | components["schemas"]["ImageInverseLerpInvocation"] | components["schemas"]["IPAdapterInvocation"] | components["schemas"]["ImageHueAdjustmentInvocation"] | components["schemas"]["StringInvocation"] | components["schemas"]["CalculateImageTilesInvocation"] | components["schemas"]["ImageLerpInvocation"] | components["schemas"]["ONNXTextToLatentsInvocation"] | components["schemas"]["LoraLoaderInvocation"] | components["schemas"]["SubtractInvocation"] | components["schemas"]["ColorInvocation"] | components["schemas"]["PairTileImageInvocation"] | components["schemas"]["ImageCropInvocation"] | components["schemas"]["ScaleLatentsInvocation"] | components["schemas"]["UnsharpMaskInvocation"] | components["schemas"]["ImageChannelOffsetInvocation"] | components["schemas"]["StringCollectionInvocation"] | components["schemas"]["MediapipeFaceProcessorInvocation"] | components["schemas"]["ColorMapImageProcessorInvocation"] | components["schemas"]["SDXLLoraLoaderInvocation"] | components["schemas"]["InfillPatchMatchInvocation"] | components["schemas"]["IntegerCollectionInvocation"] | components["schemas"]["ImageCollectionInvocation"] | components["schemas"]["FloatLinearRangeInvocation"] | components["schemas"]["MergeMetadataInvocation"] | components["schemas"]["LatentsCollectionInvocation"] | components["schemas"]["LineartAnimeImageProcessorInvocation"] | components["schemas"]["MainModelLoaderInvocation"] | components["schemas"]["RandomIntInvocation"] | components["schemas"]["IterateInvocation"] | components["schemas"]["StringReplaceInvocation"] | components["schemas"]["TileToPropertiesInvocation"] | components["schemas"]["MaskEdgeInvocation"] | components["schemas"]["ImageChannelMultiplyInvocation"] | components["schemas"]["LineartImageProcessorInvocation"] | components["schemas"]["ONNXLatentsToImageInvocation"] | components["schemas"]["SeamlessModeInvocation"] | components["schemas"]["RoundInvocation"] | components["schemas"]["RangeInvocation"] | components["schemas"]["ContentShuffleImageProcessorInvocation"] | components["schemas"]["VaeLoaderInvocation"] | components["schemas"]["ClipSkipInvocation"] | components["schemas"]["ImageInvocation"] | components["schemas"]["ControlNetInvocation"] | components["schemas"]["MergeTilesToImageInvocation"] | components["schemas"]["ImageToLatentsInvocation"] | components["schemas"]["ESRGANInvocation"] | components["schemas"]["DynamicPromptInvocation"] | components["schemas"]["DenoiseLatentsInvocation"] | components["schemas"]["DivideInvocation"] | components["schemas"]["ImageWatermarkInvocation"] | components["schemas"]["ConditioningInvocation"] | components["schemas"]["RangeOfSizeInvocation"] | components["schemas"]["CvInpaintInvocation"] | components["schemas"]["CreateDenoiseMaskInvocation"] | components["schemas"]["LinearUIOutputInvocation"] | components["schemas"]["HedImageProcessorInvocation"];
       };
       /**
        * Edges
@@ -3945,7 +4110,7 @@ export type components = {
        * @description The results of node executions
        */
       results: {
-        [key: string]: components["schemas"]["CollectInvocationOutput"] | components["schemas"]["VAEOutput"] | components["schemas"]["IntegerOutput"] | components["schemas"]["FaceOffOutput"] | components["schemas"]["ColorCollectionOutput"] | components["schemas"]["FloatCollectionOutput"] | components["schemas"]["DenoiseMaskOutput"] | components["schemas"]["ConditioningOutput"] | components["schemas"]["StringOutput"] | components["schemas"]["SDXLLoraLoaderOutput"] | components["schemas"]["IdealSizeOutput"] | components["schemas"]["BooleanOutput"] | components["schemas"]["ConditioningCollectionOutput"] | components["schemas"]["SchedulerOutput"] | components["schemas"]["GraphInvocationOutput"] | components["schemas"]["String2Output"] | components["schemas"]["NoiseOutput"] | components["schemas"]["BooleanCollectionOutput"] | components["schemas"]["PairTileImageOutput"] | components["schemas"]["UNetOutput"] | components["schemas"]["FaceMaskOutput"] | components["schemas"]["ModelLoaderOutput"] | components["schemas"]["IPAdapterOutput"] | components["schemas"]["T2IAdapterOutput"] | components["schemas"]["MetadataOutput"] | components["schemas"]["SDXLModelLoaderOutput"] | components["schemas"]["ONNXModelLoaderOutput"] | components["schemas"]["StringPosNegOutput"] | components["schemas"]["MetadataItemOutput"] | components["schemas"]["IterateInvocationOutput"] | components["schemas"]["LatentsCollectionOutput"] | components["schemas"]["SDXLRefinerModelLoaderOutput"] | components["schemas"]["StringCollectionOutput"] | components["schemas"]["ImageCollectionOutput"] | components["schemas"]["ControlOutput"] | components["schemas"]["ClipSkipInvocationOutput"] | components["schemas"]["TileToPropertiesOutput"] | components["schemas"]["SeamlessModeOutput"] | components["schemas"]["LoraLoaderOutput"] | components["schemas"]["ColorOutput"] | components["schemas"]["CLIPOutput"] | components["schemas"]["LatentsOutput"] | components["schemas"]["CalculateImageTilesOutput"] | components["schemas"]["FloatOutput"] | components["schemas"]["ImageOutput"] | components["schemas"]["IntegerCollectionOutput"];
+        [key: string]: components["schemas"]["ColorOutput"] | components["schemas"]["MetadataOutput"] | components["schemas"]["T2IAdapterOutput"] | components["schemas"]["IPAdapterOutput"] | components["schemas"]["PairTileImageOutput"] | components["schemas"]["CLIPOutput"] | components["schemas"]["ONNXModelLoaderOutput"] | components["schemas"]["VAEOutput"] | components["schemas"]["ColorCollectionOutput"] | components["schemas"]["LatentsCollectionOutput"] | components["schemas"]["ControlOutput"] | components["schemas"]["UNetOutput"] | components["schemas"]["BooleanOutput"] | components["schemas"]["StringCollectionOutput"] | components["schemas"]["ClipSkipInvocationOutput"] | components["schemas"]["IterateInvocationOutput"] | components["schemas"]["ImageOutput"] | components["schemas"]["FloatCollectionOutput"] | components["schemas"]["CalculateImageTilesOutput"] | components["schemas"]["ImageCollectionOutput"] | components["schemas"]["ConditioningCollectionOutput"] | components["schemas"]["SDXLRefinerModelLoaderOutput"] | components["schemas"]["GraphInvocationOutput"] | components["schemas"]["ConditioningOutput"] | components["schemas"]["SDXLModelLoaderOutput"] | components["schemas"]["FaceMaskOutput"] | components["schemas"]["SeamlessModeOutput"] | components["schemas"]["BooleanCollectionOutput"] | components["schemas"]["SchedulerOutput"] | components["schemas"]["NoiseOutput"] | components["schemas"]["LoraLoaderOutput"] | components["schemas"]["IntegerCollectionOutput"] | components["schemas"]["IntegerOutput"] | components["schemas"]["String2Output"] | components["schemas"]["TileToPropertiesOutput"] | components["schemas"]["LatentsOutput"] | components["schemas"]["MetadataItemOutput"] | components["schemas"]["FloatOutput"] | components["schemas"]["FaceOffOutput"] | components["schemas"]["SDXLLoraLoaderOutput"] | components["schemas"]["ModelLoaderOutput"] | components["schemas"]["CollectInvocationOutput"] | components["schemas"]["StringPosNegOutput"] | components["schemas"]["StringOutput"] | components["schemas"]["DenoiseMaskOutput"];
       };
       /**
        * Errors
@@ -4011,13 +4176,15 @@ export type components = {
     };
     /**
      * HFModelSource
-     * @description A HuggingFace repo_id, with optional variant and sub-folder.
+     * @description A HuggingFace repo_id with optional variant, sub-folder and access token.
+     * Note that the variant option, if not provided to the constructor, will default to fp16, which is
+     * what people (almost) always want.
      */
     HFModelSource: {
       /** Repo Id */
       repo_id: string;
-      /** Variant */
-      variant?: string | null;
+      /** @default fp16 */
+      variant?: components["schemas"]["ModelRepoVariant"] | null;
       /** Subfolder */
       subfolder?: string | null;
       /** Access Token */
@@ -4085,6 +4252,51 @@ export type components = {
        */
       type: "hed_image_processor";
     };
+    /**
+     * HuggingFaceMetadata
+     * @description Extended metadata fields provided by HuggingFace.
+     */
+    HuggingFaceMetadata: {
+      /**
+       * Name
+       * @description model's name
+       */
+      name: string;
+      /**
+       * Author
+       * @description model's author
+       */
+      author: string;
+      /**
+       * Tags
+       * @description tags provided by model source
+       */
+      tags: string[];
+      /**
+       * Files
+       * @description model files and their sizes
+       */
+      files?: components["schemas"]["RemoteModelFile"][];
+      /**
+       * Type
+       * @default huggingface
+       * @constant
+       */
+      type?: "huggingface";
+      /**
+       * Id
+       * @description huggingface model id
+       */
+      id: string;
+      /** Tag Dict */
+      tag_dict: Record<string, never>;
+      /**
+       * Last Modified
+       * Format: date-time
+       * @description date of last commit to repo
+       */
+      last_modified: string;
+    };
     /**
      * IPAdapterConfig
      * @description Model config for IP Adaptor format models.
@@ -4288,79 +4500,6 @@ export type components = {
        */
       type: "ip_adapter_output";
     };
-    /**
-     * Ideal Size
-     * @description Calculates the ideal size for generation to avoid duplication
-     */
-    IdealSizeInvocation: {
-      /**
-       * Id
-       * @description The id of this instance of an invocation. Must be unique among all instances of invocations.
-       */
-      id: string;
-      /**
-       * Is Intermediate
-       * @description Whether or not this is an intermediate invocation.
-       * @default false
-       */
-      is_intermediate?: boolean;
-      /**
-       * Use Cache
-       * @description Whether or not to use the cache
-       * @default true
-       */
-      use_cache?: boolean;
-      /**
-       * Width
-       * @description Target width
-       * @default 1024
-       */
-      width?: number;
-      /**
-       * Height
-       * @description Target height
-       * @default 576
-       */
-      height?: number;
-      /** @description UNet submodel */
-      unet?: components["schemas"]["UNetField"];
-      /** @description Vae submodel */
-      vae?: components["schemas"]["VaeField"];
-      /**
-       * Multiplier
-       * @description Dimensional multiplier
-       * @default 1
-       */
-      multiplier?: number;
-      /**
-       * type
-       * @default ideal_size
-       * @constant
-       */
-      type: "ideal_size";
-    };
-    /**
-     * IdealSizeOutput
-     * @description Base class for invocations that output an image
-     */
-    IdealSizeOutput: {
-      /**
-       * Width
-       * @description The ideal width of the image in pixels
-       */
-      width: number;
-      /**
-       * Height
-       * @description The ideal height of the image in pixels
-       */
-      height: number;
-      /**
-       * type
-       * @default ideal_size_output
-       * @constant
-       */
-      type: "ideal_size_output";
-    };
     /**
      * Blur Image
      * @description Blurs an image
@@ -5264,7 +5403,7 @@ export type components = {
       /**
        * Fp32
        * @description Whether or not to use full float32 precision
-       * @default false
+       * @default true
        */
       fp32?: boolean;
       /**
@@ -5489,7 +5628,7 @@ export type components = {
      * @description State of an install job running in the background.
      * @enum {string}
      */
-    InstallStatus: "waiting" | "running" | "completed" | "error";
+    InstallStatus: "waiting" | "downloading" | "running" | "completed" | "error" | "cancelled";
     /**
      * Integer Collection Primitive
      * @description A collection of integer primitive values
@@ -5931,7 +6070,7 @@ export type components = {
       /**
        * Fp32
        * @description Whether or not to use full float32 precision
-       * @default false
+       * @default true
        */
       fp32?: boolean;
       /**
@@ -6004,6 +6143,32 @@ export type components = {
        */
       type: "leres_image_processor";
     };
+    /**
+     * LicenseRestrictions
+     * @description Broad categories of licensing restrictions.
+     */
+    LicenseRestrictions: {
+      /**
+       * Allownocredit
+       * @description if true, model can be redistributed without crediting author
+       * @default false
+       */
+      AllowNoCredit?: boolean;
+      /**
+       * Allowderivatives
+       * @description if true, derivatives of this model can be redistributed
+       * @default false
+       */
+      AllowDerivatives?: boolean;
+      /**
+       * Allowdifferentlicense
+       * @description if true, derivatives of this model be redistributed under a different license
+       * @default false
+       */
+      AllowDifferentLicense?: boolean;
+      /** @description Type of commercial use allowed or 'No' if no commercial use is allowed. */
+      AllowCommercialUse?: components["schemas"]["CommercialUsage"];
+    };
     /**
      * Linear UI Image Output
      * @description Handles Linear UI Image Outputting tasks.
@@ -7028,6 +7193,12 @@ export type components = {
      * @constant
      */
     ModelError: "not_found";
+    /**
+     * ModelFormat
+     * @description Storage format of model.
+     * @enum {string}
+     */
+    ModelFormat: "diffusers" | "checkpoint" | "lycoris" | "onnx" | "olive" | "embedding_file" | "embedding_folder" | "invokeai";
     /** ModelInfo */
     ModelInfo: {
       /**
@@ -7047,6 +7218,11 @@ export type components = {
      * @description Object that tracks the current status of an install request.
      */
     ModelInstallJob: {
+      /**
+       * Id
+       * @description Unique ID for this job
+       */
+      id: number;
       /**
        * @description Current status of install process
        * @default waiting
@@ -7072,7 +7248,7 @@ export type components = {
        * Source
        * @description Source (URL, repo_id, or local path) of model
        */
-      source: components["schemas"]["LocalModelSource"] | components["schemas"]["HFModelSource"] | components["schemas"]["URLModelSource"];
+      source: components["schemas"]["LocalModelSource"] | components["schemas"]["HFModelSource"] | components["schemas"]["CivitaiModelSource"] | components["schemas"]["URLModelSource"];
       /**
        * Local Path
        * Format: path
@@ -7080,15 +7256,26 @@ export type components = {
        */
       local_path: string;
       /**
-       * Error Type
-       * @description Class name of the exception that led to status==ERROR
+       * Bytes
+       * @description For a remote model, the number of bytes downloaded so far (may not be available)
        */
-      error_type?: string | null;
+      bytes?: number | null;
       /**
-       * Error
-       * @description Error traceback
+       * Total Bytes
+       * @description Total size of the model to be installed
+       * @default 0
        */
-      error?: string | null;
+      total_bytes?: number;
+      /**
+       * Source Metadata
+       * @description Metadata provided by the model source
+       */
+      source_metadata?: (components["schemas"]["BaseMetadata"] | components["schemas"]["HuggingFaceMetadata"] | components["schemas"]["CivitaiMetadata"]) | null;
+      /**
+       * Download Parts
+       * @description Download jobs contributing to this install
+       */
+      download_parts?: components["schemas"]["DownloadJob"][];
     };
     /**
      * ModelLoaderOutput
@@ -7117,6 +7304,50 @@ export type components = {
        */
       unet: components["schemas"]["UNetField"];
     };
+    /**
+     * ModelRecordOrderBy
+     * @description The order in which to return model summaries.
+     * @enum {string}
+     */
+    ModelRecordOrderBy: "default" | "type" | "base" | "name" | "format";
+    /**
+     * ModelRepoVariant
+     * @description Various hugging face variants on the diffusers format.
+     * @enum {string}
+     */
+    ModelRepoVariant: "default" | "fp16" | "fp32" | "onnx" | "openvino" | "flax";
+    /**
+     * ModelSummary
+     * @description A short summary of models for UI listing purposes.
+     */
+    ModelSummary: {
+      /**
+       * Key
+       * @description model key
+       */
+      key: string;
+      /** @description model type */
+      type: components["schemas"]["invokeai__backend__model_manager__config__ModelType"];
+      /** @description base model */
+      base: components["schemas"]["invokeai__backend__model_manager__config__BaseModelType"];
+      /** @description model format */
+      format: components["schemas"]["ModelFormat"];
+      /**
+       * Name
+       * @description model name
+       */
+      name: string;
+      /**
+       * Description
+       * @description short description of model
+       */
+      description: string;
+      /**
+       * Tags
+       * @description tags associated with model
+       */
+      tags: string[];
+    };
     /**
      * Multiply Integers
      * @description Multiplies two numbers
@@ -7791,6 +8022,34 @@ export type components = {
        */
       type: "openpose_image_processor";
     };
+    /** PaginatedResults[ModelSummary] */
+    PaginatedResults_ModelSummary_: {
+      /**
+       * Page
+       * @description Current Page
+       */
+      page: number;
+      /**
+       * Pages
+       * @description Total number of pages
+       */
+      pages: number;
+      /**
+       * Per Page
+       * @description Number of items per page
+       */
+      per_page: number;
+      /**
+       * Total
+       * @description Total number of items in result
+       */
+      total: number;
+      /**
+       * Items
+       * @description Items
+       */
+      items: components["schemas"]["ModelSummary"][];
+    };
     /** PaginatedResults[WorkflowRecordListItemDTO] */
     PaginatedResults_WorkflowRecordListItemDTO_: {
       /**
@@ -8222,6 +8481,34 @@ export type components = {
        */
       type: "range_of_size";
     };
+    /**
+     * RemoteModelFile
+     * @description Information about a downloadable file that forms part of a model.
+     */
+    RemoteModelFile: {
+      /**
+       * Url
+       * Format: uri
+       * @description The url to download this model file
+       */
+      url: string;
+      /**
+       * Path
+       * Format: path
+       * @description The path to the file, relative to the model root
+       */
+      path: string;
+      /**
+       * Size
+       * @description The size of this file, in bytes
+       */
+      size: number;
+      /**
+       * Sha256
+       * @description SHA256 hash of this model (not always available)
+       */
+      sha256?: string | null;
+    };
     /** RemoveImagesFromBoardResult */
     RemoveImagesFromBoardResult: {
       /**
@@ -10274,10 +10561,10 @@ export type components = {
       access_token?: string | null;
       /**
        * Type
-       * @default generic_url
+       * @default url
        * @constant
        */
-      type?: "generic_url";
+      type?: "url";
     };
     /**
      * Unsharp Mask
@@ -10603,7 +10890,7 @@ export type components = {
      * WorkflowCategory
      * @enum {string}
      */
-    WorkflowCategory: "user" | "default";
+    WorkflowCategory: "user" | "default" | "project";
     /** WorkflowMeta */
     WorkflowMeta: {
       /**
@@ -11004,23 +11291,17 @@ export type components = {
      */
     UIType: "SDXLMainModelField" | "SDXLRefinerModelField" | "ONNXModelField" | "VAEModelField" | "LoRAModelField" | "ControlNetModelField" | "IPAdapterModelField" | "SchedulerField" | "AnyField" | "CollectionField" | "CollectionItemField" | "DEPRECATED_Boolean" | "DEPRECATED_Color" | "DEPRECATED_Conditioning" | "DEPRECATED_Control" | "DEPRECATED_Float" | "DEPRECATED_Image" | "DEPRECATED_Integer" | "DEPRECATED_Latents" | "DEPRECATED_String" | "DEPRECATED_BooleanCollection" | "DEPRECATED_ColorCollection" | "DEPRECATED_ConditioningCollection" | "DEPRECATED_ControlCollection" | "DEPRECATED_FloatCollection" | "DEPRECATED_ImageCollection" | "DEPRECATED_IntegerCollection" | "DEPRECATED_LatentsCollection" | "DEPRECATED_StringCollection" | "DEPRECATED_BooleanPolymorphic" | "DEPRECATED_ColorPolymorphic" | "DEPRECATED_ConditioningPolymorphic" | "DEPRECATED_ControlPolymorphic" | "DEPRECATED_FloatPolymorphic" | "DEPRECATED_ImagePolymorphic" | "DEPRECATED_IntegerPolymorphic" | "DEPRECATED_LatentsPolymorphic" | "DEPRECATED_StringPolymorphic" | "DEPRECATED_MainModel" | "DEPRECATED_UNet" | "DEPRECATED_Vae" | "DEPRECATED_CLIP" | "DEPRECATED_Collection" | "DEPRECATED_CollectionItem" | "DEPRECATED_Enum" | "DEPRECATED_WorkflowField" | "DEPRECATED_IsIntermediate" | "DEPRECATED_BoardField" | "DEPRECATED_MetadataItem" | "DEPRECATED_MetadataItemCollection" | "DEPRECATED_MetadataItemPolymorphic" | "DEPRECATED_MetadataDict";
     /**
-     * ControlNetModelFormat
+     * StableDiffusion1ModelFormat
      * @description An enumeration.
      * @enum {string}
      */
-    ControlNetModelFormat: "checkpoint" | "diffusers";
+    StableDiffusion1ModelFormat: "checkpoint" | "diffusers";
     /**
-     * IPAdapterModelFormat
+     * StableDiffusionXLModelFormat
      * @description An enumeration.
      * @enum {string}
      */
-    IPAdapterModelFormat: "invokeai";
-    /**
-     * StableDiffusion2ModelFormat
-     * @description An enumeration.
-     * @enum {string}
-     */
-    StableDiffusion2ModelFormat: "checkpoint" | "diffusers";
+    StableDiffusionXLModelFormat: "checkpoint" | "diffusers";
     /**
      * T2IAdapterModelFormat
      * @description An enumeration.
@@ -11034,11 +11315,17 @@ export type components = {
      */
     CLIPVisionModelFormat: "diffusers";
     /**
-     * StableDiffusionXLModelFormat
+     * IPAdapterModelFormat
      * @description An enumeration.
      * @enum {string}
      */
-    StableDiffusionXLModelFormat: "checkpoint" | "diffusers";
+    IPAdapterModelFormat: "invokeai";
+    /**
+     * ControlNetModelFormat
+     * @description An enumeration.
+     * @enum {string}
+     */
+    ControlNetModelFormat: "checkpoint" | "diffusers";
     /**
      * StableDiffusionOnnxModelFormat
      * @description An enumeration.
@@ -11046,11 +11333,11 @@ export type components = {
      */
     StableDiffusionOnnxModelFormat: "olive" | "onnx";
     /**
-     * StableDiffusion1ModelFormat
+     * StableDiffusion2ModelFormat
      * @description An enumeration.
      * @enum {string}
      */
-    StableDiffusion1ModelFormat: "checkpoint" | "diffusers";
+    StableDiffusion2ModelFormat: "checkpoint" | "diffusers";
   };
   responses: never;
   parameters: never;
@@ -11456,7 +11743,7 @@ export type operations = {
         /** @description Exact match on the name of the model */
         model_name?: string | null;
         /** @description Exact match on the format of the model (e.g. 'diffusers') */
-        model_format?: string | null;
+        model_format?: components["schemas"]["ModelFormat"] | null;
       };
     };
     responses: {
@@ -11582,6 +11869,110 @@ export type operations = {
       };
     };
   };
+  /**
+   * List Model Summary
+   * @description Gets a page of model summary data.
+   */
+  list_model_summary: {
+    parameters: {
+      query?: {
+        /** @description The page to get */
+        page?: number;
+        /** @description The number of models per page */
+        per_page?: number;
+        /** @description The attribute to order by */
+        order_by?: components["schemas"]["ModelRecordOrderBy"];
+      };
+    };
+    responses: {
+      /** @description Successful Response */
+      200: {
+        content: {
+          "application/json": components["schemas"]["PaginatedResults_ModelSummary_"];
+        };
+      };
+      /** @description Validation Error */
+      422: {
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
+  /**
+   * Get Model Metadata
+   * @description Get a model metadata object.
+   */
+  get_model_metadata: {
+    parameters: {
+      path: {
+        /** @description Key of the model repo metadata to fetch. */
+        key: string;
+      };
+    };
+    responses: {
+      /** @description Success */
+      200: {
+        content: {
+          "application/json": (components["schemas"]["BaseMetadata"] | components["schemas"]["HuggingFaceMetadata"] | components["schemas"]["CivitaiMetadata"]) | null;
+        };
+      };
+      /** @description Bad request */
+      400: {
+        content: never;
+      };
+      /** @description No metadata available */
+      404: {
+        content: never;
+      };
+      /** @description Validation Error */
+      422: {
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
+  /**
+   * List Tags
+   * @description Get a unique set of all the model tags.
+   */
+  list_tags: {
+    responses: {
+      /** @description Successful Response */
+      200: {
+        content: {
+          "application/json": string[];
+        };
+      };
+    };
+  };
+  /**
+   * Search By Metadata Tags
+   * @description Get a list of models.
+   */
+  search_by_metadata_tags: {
+    parameters: {
+      query?: {
+        /** @description Tags to search for */
+        tags?: string[];
+      };
+    };
+    responses: {
+      /** @description Successful Response */
+      200: {
+        content: {
+          "application/json": components["schemas"]["invokeai__app__api__routers__model_records__ModelsList"];
+        };
+      };
+      /** @description Validation Error */
+      422: {
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
   /**
    * Add Model Record
    * @description Add a model using the configuration information appropriate for its type.
@@ -11618,9 +12009,6 @@ export type operations = {
   /**
    * List Model Install Jobs
    * @description Return list of model install jobs.
-   *
-   * If the optional 'source' argument is provided, then the list will be filtered
-   * for partial string matches against the install source.
    */
   list_model_install_jobs: {
     responses: {
@@ -11679,7 +12067,7 @@ export type operations = {
    * Installation occurs in the background. Either use list_model_install_jobs()
    * to poll for completion, or listen on the event bus for the following events:
    *
-   *   "model_install_started"
+   *   "model_install_running"
    *   "model_install_completed"
    *   "model_install_error"
    *
@@ -11743,9 +12131,71 @@ export type operations = {
       };
     };
   };
+  /**
+   * Get Model Install Job
+   * @description Return model install job corresponding to the given source.
+   */
+  get_model_install_job: {
+    parameters: {
+      path: {
+        /** @description Model install id */
+        id: number;
+      };
+    };
+    responses: {
+      /** @description Success */
+      200: {
+        content: {
+          "application/json": components["schemas"]["ModelInstallJob"];
+        };
+      };
+      /** @description No such job */
+      404: {
+        content: never;
+      };
+      /** @description Validation Error */
+      422: {
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
+  /**
+   * Cancel Model Install Job
+   * @description Cancel the model install job(s) corresponding to the given job ID.
+   */
+  cancel_model_install_job: {
+    parameters: {
+      path: {
+        /** @description Model install job ID */
+        id: number;
+      };
+    };
+    responses: {
+      /** @description The job was cancelled successfully */
+      201: {
+        content: {
+          "application/json": unknown;
+        };
+      };
+      /** @description No such job */
+      415: {
+        content: never;
+      };
+      /** @description Validation Error */
+      422: {
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+    };
+  };
   /**
    * Sync Models To Config
-   * @description Traverse the models and autoimport directories. Model files without a corresponding
+   * @description Traverse the models and autoimport directories.
+   *
+   * Model files without a corresponding
    * record in the database are added. Orphan records without a models file are deleted.
    */
   sync_models_to_config: {

From b7d19b81304ddde75dfb73e424e89e638a09c105 Mon Sep 17 00:00:00 2001
From: maryhipp <maryhipp@gmail.com>
Date: Tue, 23 Jan 2024 09:50:59 -0500
Subject: [PATCH 034/133] add project as category to back-end

---
 .../app/services/workflow_records/workflow_records_common.py     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/invokeai/app/services/workflow_records/workflow_records_common.py b/invokeai/app/services/workflow_records/workflow_records_common.py
index e7f3d4295f..e02600a0c3 100644
--- a/invokeai/app/services/workflow_records/workflow_records_common.py
+++ b/invokeai/app/services/workflow_records/workflow_records_common.py
@@ -31,6 +31,7 @@ class WorkflowRecordOrderBy(str, Enum, metaclass=MetaEnum):
 class WorkflowCategory(str, Enum, metaclass=MetaEnum):
     User = "user"
     Default = "default"
+    Project = "project"
 
 
 class WorkflowMeta(BaseModel):

From 470dbe75a213c3d2b76877e438bf1eac1c28fc51 Mon Sep 17 00:00:00 2001
From: Alexander Eichhorn <pfannkuchensack@einfach-doof.de>
Date: Mon, 22 Jan 2024 18:43:24 +0100
Subject: [PATCH 035/133] translationBot(ui): update translation (German)

Currently translated at 60.0% (850 of 1415 strings)

Co-authored-by: Alexander Eichhorn <pfannkuchensack@einfach-doof.de>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/de/
Translation: InvokeAI/Web UI
---
 invokeai/frontend/web/public/locales/de.json | 51 ++++++++++++++++++--
 1 file changed, 48 insertions(+), 3 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/de.json b/invokeai/frontend/web/public/locales/de.json
index f84416e6d1..10b2ce2b0c 100644
--- a/invokeai/frontend/web/public/locales/de.json
+++ b/invokeai/frontend/web/public/locales/de.json
@@ -110,7 +110,28 @@
         "somethingWentWrong": "Etwas ist schief gelaufen",
         "copyError": "$t(gallery.copy) Fehler",
         "input": "Eingabe",
-        "notInstalled": "Nicht $t(common.installed)"
+        "notInstalled": "Nicht $t(common.installed)",
+        "advancedOptions": "Erweiterte Einstellungen",
+        "alpha": "Alpha",
+        "red": "Rot",
+        "green": "Grün",
+        "blue": "Blau",
+        "delete": "Löschen",
+        "or": "oder",
+        "direction": "Richtung",
+        "free": "Frei",
+        "save": "Speichern",
+        "preferencesLabel": "Präferenzen",
+        "created": "Erstellt",
+        "prevPage": "Vorherige Seite",
+        "nextPage": "Nächste Seite",
+        "unknownError": "Unbekannter Fehler",
+        "unsaved": "Nicht gespeichert",
+        "aboutDesc": "Verwenden Sie Invoke für die Arbeit? Dann siehe hier:",
+        "localSystem": "Lokales System",
+        "orderBy": "Ordnen nach",
+        "saveAs": "Speicher als",
+        "updated": "Aktualisiert"
     },
     "gallery": {
         "generations": "Erzeugungen",
@@ -701,7 +722,8 @@
         "invokeProgressBar": "Invoke Fortschrittsanzeige",
         "mode": "Modus",
         "resetUI": "$t(accessibility.reset) von UI",
-        "createIssue": "Ticket erstellen"
+        "createIssue": "Ticket erstellen",
+        "about": "Über"
     },
     "boards": {
         "autoAddBoard": "Automatisches Hinzufügen zum Ordner",
@@ -809,7 +831,8 @@
         "canny": "Canny",
         "hedDescription": "Ganzheitlich verschachtelte Kantenerkennung",
         "scribble": "Scribble",
-        "maxFaces": "Maximal Anzahl Gesichter"
+        "maxFaces": "Maximal Anzahl Gesichter",
+        "resizeSimple": "Größe ändern (einfach)"
     },
     "queue": {
         "status": "Status",
@@ -999,5 +1022,27 @@
         "selectLoRA": "Wählen ein LoRA aus",
         "esrganModel": "ESRGAN Modell",
         "addLora": "LoRA hinzufügen"
+    },
+    "accordions": {
+        "generation": {
+            "title": "Erstellung",
+            "modelTab": "Modell",
+            "conceptsTab": "Konzepte"
+        },
+        "image": {
+            "title": "Bild"
+        },
+        "advanced": {
+            "title": "Erweitert"
+        },
+        "control": {
+            "title": "Kontrolle",
+            "controlAdaptersTab": "Kontroll Adapter",
+            "ipTab": "Bild Beschreibung"
+        },
+        "compositing": {
+            "coherenceTab": "Kohärenzpass",
+            "infillTab": "Füllung"
+        }
     }
 }

From 8b0ac451e3de8867548683537b14d9482252e6da Mon Sep 17 00:00:00 2001
From: Riccardo Giovanetti <riccardo.giovanetti@gmail.com>
Date: Mon, 22 Jan 2024 18:43:24 +0100
Subject: [PATCH 036/133] translationBot(ui): update translation (Italian)

Currently translated at 97.3% (1378 of 1415 strings)

Co-authored-by: Riccardo Giovanetti <riccardo.giovanetti@gmail.com>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/it/
Translation: InvokeAI/Web UI
---
 invokeai/frontend/web/public/locales/it.json | 23 +++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/it.json b/invokeai/frontend/web/public/locales/it.json
index d61f4f2fc5..cd8e74258c 100644
--- a/invokeai/frontend/web/public/locales/it.json
+++ b/invokeai/frontend/web/public/locales/it.json
@@ -118,7 +118,14 @@
         "advancedOptions": "Opzioni avanzate",
         "free": "Libero",
         "or": "o",
-        "preferencesLabel": "Preferenze"
+        "preferencesLabel": "Preferenze",
+        "red": "Rosso",
+        "aboutHeading": "Possiedi il tuo potere creativo",
+        "aboutDesc": "Utilizzi Invoke per lavoro? Guarda qui:",
+        "localSystem": "Sistema locale",
+        "green": "Verde",
+        "blue": "Blu",
+        "alpha": "Alfa"
     },
     "gallery": {
         "generations": "Generazioni",
@@ -521,7 +528,8 @@
         "customConfigFileLocation": "Posizione del file di configurazione personalizzato",
         "vaePrecision": "Precisione VAE",
         "noModelSelected": "Nessun modello selezionato",
-        "conversionNotSupported": "Conversione non supportata"
+        "conversionNotSupported": "Conversione non supportata",
+        "configFile": "File di configurazione"
     },
     "parameters": {
         "images": "Immagini",
@@ -660,7 +668,9 @@
         "lockAspectRatio": "Blocca proporzioni",
         "swapDimensions": "Scambia dimensioni",
         "aspect": "Aspetto",
-        "setToOptimalSizeTooLarge": "$t(parameters.setToOptimalSize) (potrebbe essere troppo grande)"
+        "setToOptimalSizeTooLarge": "$t(parameters.setToOptimalSize) (potrebbe essere troppo grande)",
+        "boxBlur": "Box",
+        "gaussianBlur": "Gaussian"
     },
     "settings": {
         "models": "Modelli",
@@ -794,7 +804,9 @@
         "invalidUpload": "Caricamento non valido",
         "problemDeletingWorkflow": "Problema durante l'eliminazione del flusso di lavoro",
         "workflowDeleted": "Flusso di lavoro eliminato",
-        "problemRetrievingWorkflow": "Problema nel recupero del flusso di lavoro"
+        "problemRetrievingWorkflow": "Problema nel recupero del flusso di lavoro",
+        "resetInitialImage": "Reimposta l'immagine iniziale",
+        "uploadInitialImage": "Carica l'immagine iniziale"
     },
     "tooltip": {
         "feature": {
@@ -899,7 +911,8 @@
         "loadMore": "Carica altro",
         "mode": "Modalità",
         "resetUI": "$t(accessibility.reset) l'Interfaccia Utente",
-        "createIssue": "Segnala un problema"
+        "createIssue": "Segnala un problema",
+        "about": "Informazioni"
     },
     "ui": {
         "hideProgressImages": "Nascondi avanzamento immagini",

From 9d20a2d5a32b40dd1133690aca6a3c89dbaf30c5 Mon Sep 17 00:00:00 2001
From: Wubbbi <clari.skyrim63@gmail.com>
Date: Tue, 23 Jan 2024 00:16:42 +0100
Subject: [PATCH 037/133] Update huggingface deps to their lastest versions

---
 pyproject.toml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/pyproject.toml b/pyproject.toml
index 5ebdd83e22..10536e0c15 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -33,12 +33,12 @@ classifiers = [
 ]
 dependencies = [
   # Core generation dependencies, pinned for reproducible builds.
-  "accelerate==0.25.0",
+  "accelerate==0.26.1",
   "basicsr==1.4.2",
   "clip_anytorch==2.5.2",       # replacing "clip @ https://github.com/openai/CLIP/archive/eaa22acb90a5876642d0507623e859909230a52d.zip",
   "compel==2.0.2",
   "controlnet-aux==0.0.7",
-  "diffusers[torch]==0.25.0",
+  "diffusers[torch]==0.25.1",
   "invisible-watermark==0.2.0", # needed to install SDXL base and refiner using their repo_ids
   "mediapipe==0.10.7",          # needed for "mediapipeface" controlnet model
   "numpy==1.26.3",              # >1.24.0 is needed to use the 'strict' argument to np.testing.assert_array_equal()
@@ -52,7 +52,7 @@ dependencies = [
   "torchmetrics==0.11.4",
   "torchsde==0.2.6",
   "torchvision==0.16.2",
-  "transformers==4.36.2",
+  "transformers==4.37.0",
 
   # Core application dependencies, pinned for reproducible builds.
   "fastapi-events==0.10.0",

From 61cf4d4c702b316cc5e7ea4ca9995d43f646c206 Mon Sep 17 00:00:00 2001
From: Josh Corbett <joshwcorbett@icloud.com>
Date: Tue, 23 Jan 2024 17:45:30 -0700
Subject: [PATCH 038/133] feat: :sparkles: "Remix Image" option on images
 (#5553)

* feat: :sparkles: "Remix Image" option on images

Adds a new "remix image" option where applicable, recalls all metadata except the seed

* refactor: :rotating_light: lint code

* feat: :sparkles: "Remix Image" option on images

Adds a new "remix image" option where applicable, recalls all metadata except the seed

* refactor: :rotating_light: lint code

* feat: :sparkles: add new remix hotkey to hotkeys modal

---------

Co-authored-by: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
---
 invokeai/frontend/web/public/locales/en.json  |  5 +++++
 .../CurrentImage/CurrentImageButtons.tsx      | 19 ++++++++++++++++
 .../SingleSelectionMenuItems.tsx              | 22 +++++++++++++++++++
 .../components/HotkeysModal/useHotkeyData.ts  |  5 +++++
 4 files changed, 51 insertions(+)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 54c259efbf..a4c6591802 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -600,6 +600,10 @@
             "desc": "Send current image to Image to Image",
             "title": "Send To Image To Image"
         },
+        "remixImage": {
+            "desc": "Use all parameters except seed from the current image",
+            "title": "Remix image"
+        },
         "setParameters": {
             "desc": "Use all parameters of the current image",
             "title": "Set Parameters"
@@ -1216,6 +1220,7 @@
         "useCpuNoise": "Use CPU Noise",
         "cpuNoise": "CPU Noise",
         "gpuNoise": "GPU Noise",
+        "remixImage": "Remix Image",
         "useInitImg": "Use Initial Image",
         "usePrompt": "Use Prompt",
         "useSeed": "Use Seed",
diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx
index 1dc4ca2265..d141371d3c 100644
--- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx
@@ -32,6 +32,7 @@ import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import {
+  PiArrowsCounterClockwiseBold,
   PiAsteriskBold,
   PiDotsThreeOutlineFill,
   PiFlowArrowBold,
@@ -129,6 +130,16 @@ const CurrentImageButtons = () => {
 
   useHotkeys('p', handleUsePrompt, [metadata]);
 
+  const handleRemixImage = useCallback(() => {
+    // Recalls all metadata parameters except seed
+    recallAllParameters({
+      ...metadata,
+      seed: undefined,
+    });
+  }, [metadata, recallAllParameters]);
+
+  useHotkeys('r', handleRemixImage, [metadata]);
+
   const handleUseSize = useCallback(() => {
     recallWidthAndHeight(metadata?.width, metadata?.height);
   }, [metadata?.width, metadata?.height, recallWidthAndHeight]);
@@ -231,6 +242,14 @@ const CurrentImageButtons = () => {
             onClick={handleLoadWorkflow}
             isLoading={getAndLoadEmbeddedWorkflowResult.isLoading}
           />
+          <IconButton
+            isLoading={isLoadingMetadata}
+            icon={<PiArrowsCounterClockwiseBold />}
+            tooltip={`${t('parameters.remixImage')} (R)`}
+            aria-label={`${t('parameters.remixImage')} (R)`}
+            isDisabled={!metadata?.positive_prompt}
+            onClick={handleRemixImage}
+          />
           <IconButton
             isLoading={isLoadingMetadata}
             icon={<PiQuotesBold />}
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
index acd70e2c64..049c58e70b 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
@@ -24,6 +24,7 @@ import { memo, useCallback } from 'react';
 import { flushSync } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import {
+  PiArrowsCounterClockwiseBold,
   PiAsteriskBold,
   PiCopyBold,
   PiDownloadSimpleBold,
@@ -127,6 +128,14 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
     recallAllParameters(metadata);
   }, [metadata, recallAllParameters]);
 
+  const handleRemixImage = useCallback(() => {
+    // Recalls all metadata parameters except seed
+    recallAllParameters({
+      ...metadata,
+      seed: undefined,
+    });
+  }, [metadata, recallAllParameters]);
+
   const handleChangeBoard = useCallback(() => {
     dispatch(imagesToChangeSelected([imageDTO]));
     dispatch(isModalOpenChanged(true));
@@ -187,6 +196,19 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
       >
         {t('nodes.loadWorkflow')}
       </MenuItem>
+      <MenuItem
+        icon={
+          isLoadingMetadata ? <SpinnerIcon /> : <PiArrowsCounterClockwiseBold />
+        }
+        onClickCapture={handleRemixImage}
+        isDisabled={
+          isLoadingMetadata ||
+          (metadata?.positive_prompt === undefined &&
+            metadata?.negative_prompt === undefined)
+        }
+      >
+        {t('parameters.remixImage')}
+      </MenuItem>
       <MenuItem
         icon={isLoadingMetadata ? <SpinnerIcon /> : <PiQuotesBold />}
         onClickCapture={handleRecallPrompt}
diff --git a/invokeai/frontend/web/src/features/system/components/HotkeysModal/useHotkeyData.ts b/invokeai/frontend/web/src/features/system/components/HotkeysModal/useHotkeyData.ts
index a96f118f68..57fd5a1ad0 100644
--- a/invokeai/frontend/web/src/features/system/components/HotkeysModal/useHotkeyData.ts
+++ b/invokeai/frontend/web/src/features/system/components/HotkeysModal/useHotkeyData.ts
@@ -81,6 +81,11 @@ export const useHotkeyData = (): HotkeyGroup[] => {
     () => ({
       title: t('hotkeys.generalHotkeys'),
       hotkeyListItems: [
+        {
+          title: t('hotkeys.remixImage.title'),
+          desc: t('hotkeys.remixImage.desc'),
+          hotkeys: [['R']],
+        },
         {
           title: t('hotkeys.setPrompt.title'),
           desc: t('hotkeys.setPrompt.desc'),

From f82744b95e51f293e11835198a5c8e1a1ac70900 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Wed, 24 Jan 2024 18:45:54 +0530
Subject: [PATCH 039/133] fix: linting issues

---
 .../frontend/web/src/services/api/schema.ts   | 52 +++++++++++--------
 1 file changed, 29 insertions(+), 23 deletions(-)

diff --git a/invokeai/frontend/web/src/services/api/schema.ts b/invokeai/frontend/web/src/services/api/schema.ts
index 0e9c02df48..a4f358640d 100644
--- a/invokeai/frontend/web/src/services/api/schema.ts
+++ b/invokeai/frontend/web/src/services/api/schema.ts
@@ -2938,7 +2938,7 @@ export type components = {
       /**
        * Fp32
        * @description Whether or not to use full float32 precision
-       * @default true
+       * @default false
        */
       fp32?: boolean;
       /**
@@ -4124,7 +4124,7 @@ export type components = {
        * @description The nodes in this graph
        */
       nodes?: {
-        [key: string]: components["schemas"]["ColorCorrectInvocation"] | components["schemas"]["SaveImageInvocation"] | components["schemas"]["OpenposeImageProcessorInvocation"] | components["schemas"]["GraphInvocation"] | components["schemas"]["ImageResizeInvocation"] | components["schemas"]["PromptsFromFileInvocation"] | components["schemas"]["CalculateImageTilesMinimumOverlapInvocation"] | components["schemas"]["ImageMultiplyInvocation"] | components["schemas"]["InfillTileInvocation"] | components["schemas"]["LeresImageProcessorInvocation"] | components["schemas"]["ShowImageInvocation"] | components["schemas"]["IntegerMathInvocation"] | components["schemas"]["LatentsToImageInvocation"] | components["schemas"]["CropLatentsCoreInvocation"] | components["schemas"]["MidasDepthImageProcessorInvocation"] | components["schemas"]["FloatToIntegerInvocation"] | components["schemas"]["BooleanCollectionInvocation"] | components["schemas"]["NormalbaeImageProcessorInvocation"] | components["schemas"]["CenterPadCropInvocation"] | components["schemas"]["BlendLatentsInvocation"] | components["schemas"]["ImageNSFWBlurInvocation"] | components["schemas"]["NoiseInvocation"] | components["schemas"]["CollectInvocation"] | components["schemas"]["SDXLCompelPromptInvocation"] | components["schemas"]["MultiplyInvocation"] | components["schemas"]["MaskCombineInvocation"] | components["schemas"]["LaMaInfillInvocation"] | components["schemas"]["StringJoinThreeInvocation"] | components["schemas"]["BlankImageInvocation"] | components["schemas"]["MetadataInvocation"] | components["schemas"]["ResizeLatentsInvocation"] | components["schemas"]["CompelInvocation"] | components["schemas"]["MetadataItemInvocation"] | components["schemas"]["StringJoinInvocation"] | components["schemas"]["ImageScaleInvocation"] | components["schemas"]["InfillColorInvocation"] | components["schemas"]["FaceMaskInvocation"] | components["schemas"]["StringSplitNegInvocation"] | components["schemas"]["FloatMathInvocation"] | components["schemas"]["LatentsInvocation"] | components["schemas"]["MlsdImageProcessorInvocation"] | components["schemas"]["SchedulerInvocation"] | components["schemas"]["RandomFloatInvocation"] | components["schemas"]["ConditioningCollectionInvocation"] | components["schemas"]["FreeUInvocation"] | components["schemas"]["SDXLModelLoaderInvocation"] | components["schemas"]["MaskFromAlphaInvocation"] | components["schemas"]["AddInvocation"] | components["schemas"]["FloatCollectionInvocation"] | components["schemas"]["StepParamEasingInvocation"] | components["schemas"]["SDXLRefinerModelLoaderInvocation"] | components["schemas"]["ImageChannelInvocation"] | components["schemas"]["ImageBlurInvocation"] | components["schemas"]["IntegerInvocation"] | components["schemas"]["CannyImageProcessorInvocation"] | components["schemas"]["StringSplitInvocation"] | components["schemas"]["ImagePasteInvocation"] | components["schemas"]["OnnxModelLoaderInvocation"] | components["schemas"]["CalculateImageTilesEvenSplitInvocation"] | components["schemas"]["FloatInvocation"] | components["schemas"]["SegmentAnythingProcessorInvocation"] | components["schemas"]["ZoeDepthImageProcessorInvocation"] | components["schemas"]["RandomRangeInvocation"] | components["schemas"]["SDXLRefinerCompelPromptInvocation"] | components["schemas"]["CV2InfillInvocation"] | components["schemas"]["FaceOffInvocation"] | components["schemas"]["BooleanInvocation"] | components["schemas"]["ONNXPromptInvocation"] | components["schemas"]["PidiImageProcessorInvocation"] | components["schemas"]["FaceIdentifierInvocation"] | components["schemas"]["T2IAdapterInvocation"] | components["schemas"]["ImageConvertInvocation"] | components["schemas"]["CoreMetadataInvocation"] | components["schemas"]["TileResamplerProcessorInvocation"] | components["schemas"]["ImageInverseLerpInvocation"] | components["schemas"]["IPAdapterInvocation"] | components["schemas"]["ImageHueAdjustmentInvocation"] | components["schemas"]["StringInvocation"] | components["schemas"]["CalculateImageTilesInvocation"] | components["schemas"]["ImageLerpInvocation"] | components["schemas"]["ONNXTextToLatentsInvocation"] | components["schemas"]["LoraLoaderInvocation"] | components["schemas"]["SubtractInvocation"] | components["schemas"]["ColorInvocation"] | components["schemas"]["PairTileImageInvocation"] | components["schemas"]["ImageCropInvocation"] | components["schemas"]["ScaleLatentsInvocation"] | components["schemas"]["UnsharpMaskInvocation"] | components["schemas"]["ImageChannelOffsetInvocation"] | components["schemas"]["StringCollectionInvocation"] | components["schemas"]["MediapipeFaceProcessorInvocation"] | components["schemas"]["ColorMapImageProcessorInvocation"] | components["schemas"]["SDXLLoraLoaderInvocation"] | components["schemas"]["InfillPatchMatchInvocation"] | components["schemas"]["IntegerCollectionInvocation"] | components["schemas"]["ImageCollectionInvocation"] | components["schemas"]["FloatLinearRangeInvocation"] | components["schemas"]["MergeMetadataInvocation"] | components["schemas"]["LatentsCollectionInvocation"] | components["schemas"]["LineartAnimeImageProcessorInvocation"] | components["schemas"]["MainModelLoaderInvocation"] | components["schemas"]["RandomIntInvocation"] | components["schemas"]["IterateInvocation"] | components["schemas"]["StringReplaceInvocation"] | components["schemas"]["TileToPropertiesInvocation"] | components["schemas"]["MaskEdgeInvocation"] | components["schemas"]["ImageChannelMultiplyInvocation"] | components["schemas"]["LineartImageProcessorInvocation"] | components["schemas"]["ONNXLatentsToImageInvocation"] | components["schemas"]["SeamlessModeInvocation"] | components["schemas"]["RoundInvocation"] | components["schemas"]["RangeInvocation"] | components["schemas"]["ContentShuffleImageProcessorInvocation"] | components["schemas"]["VaeLoaderInvocation"] | components["schemas"]["ClipSkipInvocation"] | components["schemas"]["ImageInvocation"] | components["schemas"]["ControlNetInvocation"] | components["schemas"]["MergeTilesToImageInvocation"] | components["schemas"]["ImageToLatentsInvocation"] | components["schemas"]["ESRGANInvocation"] | components["schemas"]["DynamicPromptInvocation"] | components["schemas"]["DenoiseLatentsInvocation"] | components["schemas"]["DivideInvocation"] | components["schemas"]["ImageWatermarkInvocation"] | components["schemas"]["ConditioningInvocation"] | components["schemas"]["RangeOfSizeInvocation"] | components["schemas"]["CvInpaintInvocation"] | components["schemas"]["CreateDenoiseMaskInvocation"] | components["schemas"]["LinearUIOutputInvocation"] | components["schemas"]["HedImageProcessorInvocation"];
+        [key: string]: components["schemas"]["LatentConsistencyInvocation"] | components["schemas"]["SDXLModelLoaderInvocation"] | components["schemas"]["CannyImageProcessorInvocation"] | components["schemas"]["MidasDepthImageProcessorInvocation"] | components["schemas"]["FloatToIntegerInvocation"] | components["schemas"]["ControlNetInvocation"] | components["schemas"]["ScaleLatentsInvocation"] | components["schemas"]["FloatCollectionInvocation"] | components["schemas"]["ImageChannelMultiplyInvocation"] | components["schemas"]["DynamicPromptInvocation"] | components["schemas"]["BooleanCollectionInvocation"] | components["schemas"]["HedImageProcessorInvocation"] | components["schemas"]["LoraLoaderInvocation"] | components["schemas"]["AddInvocation"] | components["schemas"]["StringSplitInvocation"] | components["schemas"]["CompelInvocation"] | components["schemas"]["MediapipeFaceProcessorInvocation"] | components["schemas"]["ImagePasteInvocation"] | components["schemas"]["MergeTilesToImageInvocation"] | components["schemas"]["ImageResizeInvocation"] | components["schemas"]["CV2InfillInvocation"] | components["schemas"]["ImageChannelInvocation"] | components["schemas"]["StringReplaceInvocation"] | components["schemas"]["SeamlessModeInvocation"] | components["schemas"]["LinearUIOutputInvocation"] | components["schemas"]["PromptsFromFileInvocation"] | components["schemas"]["RangeInvocation"] | components["schemas"]["IPAdapterInvocation"] | components["schemas"]["ConditioningCollectionInvocation"] | components["schemas"]["ImageChannelOffsetInvocation"] | components["schemas"]["CalculateImageTilesMinimumOverlapInvocation"] | components["schemas"]["MlsdImageProcessorInvocation"] | components["schemas"]["MaskFromAlphaInvocation"] | components["schemas"]["LaMaInfillInvocation"] | components["schemas"]["BooleanInvocation"] | components["schemas"]["ONNXLatentsToImageInvocation"] | components["schemas"]["ResizeLatentsInvocation"] | components["schemas"]["LineartAnimeImageProcessorInvocation"] | components["schemas"]["RoundInvocation"] | components["schemas"]["CenterPadCropInvocation"] | components["schemas"]["BlendLatentsInvocation"] | components["schemas"]["FreeUInvocation"] | components["schemas"]["ShowImageInvocation"] | components["schemas"]["LineartImageProcessorInvocation"] | components["schemas"]["DivideInvocation"] | components["schemas"]["VaeLoaderInvocation"] | components["schemas"]["CvInpaintInvocation"] | components["schemas"]["ImageLerpInvocation"] | components["schemas"]["SaveImageInvocation"] | components["schemas"]["LatentsToImageInvocation"] | components["schemas"]["ZoeDepthImageProcessorInvocation"] | components["schemas"]["FloatMathInvocation"] | components["schemas"]["SDXLRefinerCompelPromptInvocation"] | components["schemas"]["ImageCropInvocation"] | components["schemas"]["MaskCombineInvocation"] | components["schemas"]["CalculateImageTilesEvenSplitInvocation"] | components["schemas"]["StringSplitNegInvocation"] | components["schemas"]["FaceOffInvocation"] | components["schemas"]["StringInvocation"] | components["schemas"]["RangeOfSizeInvocation"] | components["schemas"]["FaceIdentifierInvocation"] | components["schemas"]["GraphInvocation"] | components["schemas"]["ImageCollectionInvocation"] | components["schemas"]["InfillColorInvocation"] | components["schemas"]["StringJoinInvocation"] | components["schemas"]["FaceMaskInvocation"] | components["schemas"]["ImageScaleInvocation"] | components["schemas"]["CollectInvocation"] | components["schemas"]["CalculateImageTilesInvocation"] | components["schemas"]["ONNXPromptInvocation"] | components["schemas"]["InfillPatchMatchInvocation"] | components["schemas"]["ImageToLatentsInvocation"] | components["schemas"]["NoiseInvocation"] | components["schemas"]["SegmentAnythingProcessorInvocation"] | components["schemas"]["SDXLCompelPromptInvocation"] | components["schemas"]["BlankImageInvocation"] | components["schemas"]["MaskEdgeInvocation"] | components["schemas"]["ColorInvocation"] | components["schemas"]["PairTileImageInvocation"] | components["schemas"]["OpenposeImageProcessorInvocation"] | components["schemas"]["FloatInvocation"] | components["schemas"]["SchedulerInvocation"] | components["schemas"]["TileToPropertiesInvocation"] | components["schemas"]["SubtractInvocation"] | components["schemas"]["RandomRangeInvocation"] | components["schemas"]["MetadataInvocation"] | components["schemas"]["ImageInvocation"] | components["schemas"]["ClipSkipInvocation"] | components["schemas"]["RandomIntInvocation"] | components["schemas"]["ContentShuffleImageProcessorInvocation"] | components["schemas"]["IntegerMathInvocation"] | components["schemas"]["ColorCorrectInvocation"] | components["schemas"]["DenoiseLatentsInvocation"] | components["schemas"]["MultiplyInvocation"] | components["schemas"]["SDXLLoraLoaderInvocation"] | components["schemas"]["OnnxModelLoaderInvocation"] | components["schemas"]["UnsharpMaskInvocation"] | components["schemas"]["NormalbaeImageProcessorInvocation"] | components["schemas"]["CoreMetadataInvocation"] | components["schemas"]["FloatLinearRangeInvocation"] | components["schemas"]["IterateInvocation"] | components["schemas"]["CropLatentsCoreInvocation"] | components["schemas"]["TileResamplerProcessorInvocation"] | components["schemas"]["ImageInverseLerpInvocation"] | components["schemas"]["StepParamEasingInvocation"] | components["schemas"]["LatentsCollectionInvocation"] | components["schemas"]["StringJoinThreeInvocation"] | components["schemas"]["ImageMultiplyInvocation"] | components["schemas"]["ImageHueAdjustmentInvocation"] | components["schemas"]["InfillTileInvocation"] | components["schemas"]["RandomFloatInvocation"] | components["schemas"]["MainModelLoaderInvocation"] | components["schemas"]["ColorMapImageProcessorInvocation"] | components["schemas"]["ImageBlurInvocation"] | components["schemas"]["StringCollectionInvocation"] | components["schemas"]["ConditioningInvocation"] | components["schemas"]["T2IAdapterInvocation"] | components["schemas"]["SDXLRefinerModelLoaderInvocation"] | components["schemas"]["ONNXTextToLatentsInvocation"] | components["schemas"]["ImageConvertInvocation"] | components["schemas"]["MetadataItemInvocation"] | components["schemas"]["ESRGANInvocation"] | components["schemas"]["IntegerCollectionInvocation"] | components["schemas"]["LatentsInvocation"] | components["schemas"]["CreateDenoiseMaskInvocation"] | components["schemas"]["ImageNSFWBlurInvocation"] | components["schemas"]["IntegerInvocation"] | components["schemas"]["PidiImageProcessorInvocation"] | components["schemas"]["DepthAnythingImageProcessorInvocation"] | components["schemas"]["MergeMetadataInvocation"] | components["schemas"]["ImageWatermarkInvocation"] | components["schemas"]["IdealSizeInvocation"] | components["schemas"]["LeresImageProcessorInvocation"];
       };
       /**
        * Edges
@@ -4161,7 +4161,7 @@ export type components = {
        * @description The results of node executions
        */
       results: {
-        [key: string]: components["schemas"]["ColorOutput"] | components["schemas"]["MetadataOutput"] | components["schemas"]["T2IAdapterOutput"] | components["schemas"]["IPAdapterOutput"] | components["schemas"]["PairTileImageOutput"] | components["schemas"]["CLIPOutput"] | components["schemas"]["ONNXModelLoaderOutput"] | components["schemas"]["VAEOutput"] | components["schemas"]["ColorCollectionOutput"] | components["schemas"]["LatentsCollectionOutput"] | components["schemas"]["ControlOutput"] | components["schemas"]["UNetOutput"] | components["schemas"]["BooleanOutput"] | components["schemas"]["StringCollectionOutput"] | components["schemas"]["ClipSkipInvocationOutput"] | components["schemas"]["IterateInvocationOutput"] | components["schemas"]["ImageOutput"] | components["schemas"]["FloatCollectionOutput"] | components["schemas"]["CalculateImageTilesOutput"] | components["schemas"]["ImageCollectionOutput"] | components["schemas"]["ConditioningCollectionOutput"] | components["schemas"]["SDXLRefinerModelLoaderOutput"] | components["schemas"]["GraphInvocationOutput"] | components["schemas"]["ConditioningOutput"] | components["schemas"]["SDXLModelLoaderOutput"] | components["schemas"]["FaceMaskOutput"] | components["schemas"]["SeamlessModeOutput"] | components["schemas"]["BooleanCollectionOutput"] | components["schemas"]["SchedulerOutput"] | components["schemas"]["NoiseOutput"] | components["schemas"]["LoraLoaderOutput"] | components["schemas"]["IntegerCollectionOutput"] | components["schemas"]["IntegerOutput"] | components["schemas"]["String2Output"] | components["schemas"]["TileToPropertiesOutput"] | components["schemas"]["LatentsOutput"] | components["schemas"]["MetadataItemOutput"] | components["schemas"]["FloatOutput"] | components["schemas"]["FaceOffOutput"] | components["schemas"]["SDXLLoraLoaderOutput"] | components["schemas"]["ModelLoaderOutput"] | components["schemas"]["CollectInvocationOutput"] | components["schemas"]["StringPosNegOutput"] | components["schemas"]["StringOutput"] | components["schemas"]["DenoiseMaskOutput"];
+        [key: string]: components["schemas"]["ColorCollectionOutput"] | components["schemas"]["PairTileImageOutput"] | components["schemas"]["StringCollectionOutput"] | components["schemas"]["FaceOffOutput"] | components["schemas"]["StringOutput"] | components["schemas"]["SeamlessModeOutput"] | components["schemas"]["SDXLModelLoaderOutput"] | components["schemas"]["VAEOutput"] | components["schemas"]["ColorOutput"] | components["schemas"]["StringPosNegOutput"] | components["schemas"]["LoraLoaderOutput"] | components["schemas"]["IntegerCollectionOutput"] | components["schemas"]["ImageCollectionOutput"] | components["schemas"]["LatentsCollectionOutput"] | components["schemas"]["SchedulerOutput"] | components["schemas"]["NoiseOutput"] | components["schemas"]["CollectInvocationOutput"] | components["schemas"]["IntegerOutput"] | components["schemas"]["MetadataItemOutput"] | components["schemas"]["SDXLLoraLoaderOutput"] | components["schemas"]["T2IAdapterOutput"] | components["schemas"]["IdealSizeOutput"] | components["schemas"]["UNetOutput"] | components["schemas"]["TileToPropertiesOutput"] | components["schemas"]["SDXLRefinerModelLoaderOutput"] | components["schemas"]["FloatCollectionOutput"] | components["schemas"]["BooleanCollectionOutput"] | components["schemas"]["DenoiseMaskOutput"] | components["schemas"]["ConditioningOutput"] | components["schemas"]["GraphInvocationOutput"] | components["schemas"]["BooleanOutput"] | components["schemas"]["CLIPOutput"] | components["schemas"]["MetadataOutput"] | components["schemas"]["ConditioningCollectionOutput"] | components["schemas"]["FloatOutput"] | components["schemas"]["IterateInvocationOutput"] | components["schemas"]["ClipSkipInvocationOutput"] | components["schemas"]["ONNXModelLoaderOutput"] | components["schemas"]["IPAdapterOutput"] | components["schemas"]["LatentsOutput"] | components["schemas"]["String2Output"] | components["schemas"]["ModelLoaderOutput"] | components["schemas"]["FaceMaskOutput"] | components["schemas"]["CalculateImageTilesOutput"] | components["schemas"]["ControlOutput"] | components["schemas"]["ImageOutput"];
       };
       /**
        * Errors
@@ -5525,7 +5525,7 @@ export type components = {
       /**
        * Fp32
        * @description Whether or not to use full float32 precision
-       * @default true
+       * @default false
        */
       fp32?: boolean;
       /**
@@ -6282,7 +6282,7 @@ export type components = {
       /**
        * Fp32
        * @description Whether or not to use full float32 precision
-       * @default true
+       * @default false
        */
       fp32?: boolean;
       /**
@@ -11502,24 +11502,42 @@ export type components = {
      * @enum {string}
      */
     UIType: "SDXLMainModelField" | "SDXLRefinerModelField" | "ONNXModelField" | "VAEModelField" | "LoRAModelField" | "ControlNetModelField" | "IPAdapterModelField" | "SchedulerField" | "AnyField" | "CollectionField" | "CollectionItemField" | "DEPRECATED_Boolean" | "DEPRECATED_Color" | "DEPRECATED_Conditioning" | "DEPRECATED_Control" | "DEPRECATED_Float" | "DEPRECATED_Image" | "DEPRECATED_Integer" | "DEPRECATED_Latents" | "DEPRECATED_String" | "DEPRECATED_BooleanCollection" | "DEPRECATED_ColorCollection" | "DEPRECATED_ConditioningCollection" | "DEPRECATED_ControlCollection" | "DEPRECATED_FloatCollection" | "DEPRECATED_ImageCollection" | "DEPRECATED_IntegerCollection" | "DEPRECATED_LatentsCollection" | "DEPRECATED_StringCollection" | "DEPRECATED_BooleanPolymorphic" | "DEPRECATED_ColorPolymorphic" | "DEPRECATED_ConditioningPolymorphic" | "DEPRECATED_ControlPolymorphic" | "DEPRECATED_FloatPolymorphic" | "DEPRECATED_ImagePolymorphic" | "DEPRECATED_IntegerPolymorphic" | "DEPRECATED_LatentsPolymorphic" | "DEPRECATED_StringPolymorphic" | "DEPRECATED_MainModel" | "DEPRECATED_UNet" | "DEPRECATED_Vae" | "DEPRECATED_CLIP" | "DEPRECATED_Collection" | "DEPRECATED_CollectionItem" | "DEPRECATED_Enum" | "DEPRECATED_WorkflowField" | "DEPRECATED_IsIntermediate" | "DEPRECATED_BoardField" | "DEPRECATED_MetadataItem" | "DEPRECATED_MetadataItemCollection" | "DEPRECATED_MetadataItemPolymorphic" | "DEPRECATED_MetadataDict";
-    /**
-     * StableDiffusion1ModelFormat
-     * @description An enumeration.
-     * @enum {string}
-     */
-    StableDiffusion1ModelFormat: "checkpoint" | "diffusers";
     /**
      * StableDiffusionXLModelFormat
      * @description An enumeration.
      * @enum {string}
      */
     StableDiffusionXLModelFormat: "checkpoint" | "diffusers";
+    /**
+     * CLIPVisionModelFormat
+     * @description An enumeration.
+     * @enum {string}
+     */
+    CLIPVisionModelFormat: "diffusers";
     /**
      * ControlNetModelFormat
      * @description An enumeration.
      * @enum {string}
      */
     ControlNetModelFormat: "checkpoint" | "diffusers";
+    /**
+     * T2IAdapterModelFormat
+     * @description An enumeration.
+     * @enum {string}
+     */
+    T2IAdapterModelFormat: "diffusers";
+    /**
+     * StableDiffusion1ModelFormat
+     * @description An enumeration.
+     * @enum {string}
+     */
+    StableDiffusion1ModelFormat: "checkpoint" | "diffusers";
+    /**
+     * StableDiffusion2ModelFormat
+     * @description An enumeration.
+     * @enum {string}
+     */
+    StableDiffusion2ModelFormat: "checkpoint" | "diffusers";
     /**
      * StableDiffusionOnnxModelFormat
      * @description An enumeration.
@@ -11532,18 +11550,6 @@ export type components = {
      * @enum {string}
      */
     IPAdapterModelFormat: "invokeai";
-    /**
-     * StableDiffusion2ModelFormat
-     * @description An enumeration.
-     * @enum {string}
-     */
-    StableDiffusion2ModelFormat: "checkpoint" | "diffusers";
-    /**
-     * StableDiffusionXLModelFormat
-     * @description An enumeration.
-     * @enum {string}
-     */
-    StableDiffusionXLModelFormat: "checkpoint" | "diffusers";
   };
   responses: never;
   parameters: never;

From 0a13d7d2c76eb17cdc3dde406d93d65016b49425 Mon Sep 17 00:00:00 2001
From: Millun Atluri <millun.atluri@gmail.com>
Date: Wed, 24 Jan 2024 11:27:36 -0500
Subject: [PATCH 040/133] {release} v3.6.1

---
 invokeai/version/invokeai_version.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/invokeai/version/invokeai_version.py b/invokeai/version/invokeai_version.py
index 85197cb4a0..b202327a86 100644
--- a/invokeai/version/invokeai_version.py
+++ b/invokeai/version/invokeai_version.py
@@ -1 +1 @@
-__version__ = "3.6.0"
+__version__ = "3.6.1"

From e59954f956160f5db827c7c5810cda90f4af65e6 Mon Sep 17 00:00:00 2001
From: Mary Hipp Rogers <maryhipp@gmail.com>
Date: Wed, 24 Jan 2024 16:10:19 -0500
Subject: [PATCH 041/133] fix workflow updating (#5567)

* retain id through workflow state so that we correctly update or save new

* lint

---------

Co-authored-by: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
---
 .../web/src/features/nodes/util/workflow/buildWorkflow.ts        | 1 +
 1 file changed, 1 insertion(+)

diff --git a/invokeai/frontend/web/src/features/nodes/util/workflow/buildWorkflow.ts b/invokeai/frontend/web/src/features/nodes/util/workflow/buildWorkflow.ts
index 35e189e246..1eaacb7827 100644
--- a/invokeai/frontend/web/src/features/nodes/util/workflow/buildWorkflow.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/workflow/buildWorkflow.ts
@@ -24,6 +24,7 @@ const workflowKeys = [
   'notes',
   'exposedFields',
   'meta',
+  'id',
 ] satisfies (keyof WorkflowV2)[];
 
 export type BuildWorkflowFunction = (arg: BuildWorkflowArg) => WorkflowV2;

From fc448d5b6dc47b87ae65567424cee6cc46e57c84 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 24 Jan 2024 12:03:09 +1100
Subject: [PATCH 042/133] feat(ui): handle proxy configs rewriting paths

We can't assume that the base URL is `host:port/` - it could be `host:port/some/path/`. Make the path handling dynamic to account for this.
---
 invokeai/frontend/web/src/app/hooks/useSocketIO.ts      | 2 +-
 invokeai/frontend/web/src/i18n.ts                       | 2 +-
 invokeai/frontend/web/src/services/api/index.ts         | 4 +++-
 invokeai/frontend/web/src/services/api/thunks/schema.ts | 5 +++--
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/invokeai/frontend/web/src/app/hooks/useSocketIO.ts b/invokeai/frontend/web/src/app/hooks/useSocketIO.ts
index dc2a8947fc..ad331bc385 100644
--- a/invokeai/frontend/web/src/app/hooks/useSocketIO.ts
+++ b/invokeai/frontend/web/src/app/hooks/useSocketIO.ts
@@ -45,7 +45,7 @@ export const useSocketIO = () => {
   const socketOptions = useMemo(() => {
     const options: Partial<ManagerOptions & SocketOptions> = {
       timeout: 60000,
-      path: '/ws/socket.io',
+      path: `${window.location.pathname}ws/socket.io`,
       autoConnect: false, // achtung! removing this breaks the dynamic middleware
       forceNew: true,
     };
diff --git a/invokeai/frontend/web/src/i18n.ts b/invokeai/frontend/web/src/i18n.ts
index f0cbe40a75..89c855bcd0 100644
--- a/invokeai/frontend/web/src/i18n.ts
+++ b/invokeai/frontend/web/src/i18n.ts
@@ -32,7 +32,7 @@ if (import.meta.env.MODE === 'package') {
       fallbackLng: 'en',
       debug: false,
       backend: {
-        loadPath: '/locales/{{lng}}.json',
+        loadPath: `${window.location.href.replace(/\/$/, '')}/locales/{{lng}}.json`,
       },
       interpolation: {
         escapeValue: false,
diff --git a/invokeai/frontend/web/src/services/api/index.ts b/invokeai/frontend/web/src/services/api/index.ts
index 1c76838db1..9679fabc3f 100644
--- a/invokeai/frontend/web/src/services/api/index.ts
+++ b/invokeai/frontend/web/src/services/api/index.ts
@@ -57,7 +57,9 @@ const dynamicBaseQuery: BaseQueryFn<
   const projectId = $projectId.get();
 
   const rawBaseQuery = fetchBaseQuery({
-    baseUrl: `${baseUrl ?? ''}/api/v1`,
+    baseUrl: baseUrl
+      ? `${baseUrl}/api/v1`
+      : `${window.location.href.replace(/\/$/, '')}/api/v1`,
     prepareHeaders: (headers) => {
       if (authToken) {
         headers.set('Authorization', `Bearer ${authToken}`);
diff --git a/invokeai/frontend/web/src/services/api/thunks/schema.ts b/invokeai/frontend/web/src/services/api/thunks/schema.ts
index c209469e02..ed36ac4cfb 100644
--- a/invokeai/frontend/web/src/services/api/thunks/schema.ts
+++ b/invokeai/frontend/web/src/services/api/thunks/schema.ts
@@ -26,8 +26,9 @@ export const receivedOpenAPISchema = createAsyncThunk(
   'nodes/receivedOpenAPISchema',
   async (_, { rejectWithValue }) => {
     try {
-      const url = [window.location.origin, 'openapi.json'].join('/');
-      const response = await fetch(url);
+      const response = await fetch(
+        `${window.location.href.replace(/\/$/, '')}/openapi.json`
+      );
       const openAPISchema = await response.json();
 
       const schemaJSON = JSON.parse(

From e611baa4b4797da0e6c9f622e155db4554074b9f Mon Sep 17 00:00:00 2001
From: Millun Atluri <millun.atluri@gmail.com>
Date: Wed, 24 Jan 2024 21:40:03 -0500
Subject: [PATCH 043/133] {release} v3.6.2

---
 invokeai/version/invokeai_version.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/invokeai/version/invokeai_version.py b/invokeai/version/invokeai_version.py
index b202327a86..4f8219395a 100644
--- a/invokeai/version/invokeai_version.py
+++ b/invokeai/version/invokeai_version.py
@@ -1 +1 @@
-__version__ = "3.6.1"
+__version__ = "3.6.2"

From 89da976949b673f65591c2210e7612224ec5b902 Mon Sep 17 00:00:00 2001
From: Mary Hipp Rogers <maryhipp@gmail.com>
Date: Thu, 25 Jan 2024 11:43:47 -0500
Subject: [PATCH 044/133] workflow library updates (#5568)

* dont show duplicate toasts if workflow actions fail due to auth

* dynamic order by options based on projectId

* add endpointName to authtoast to makeit unique per endpoint

* lint

* update toast logic to check based on endpoint name w type safety

* fix save as endpoit name

* lint

* fix type

---------

Co-authored-by: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
---
 .../components/WorkflowLibraryList.tsx        | 20 ++++++++++-----
 .../hooks/useDeleteLibraryWorkflow.ts         | 23 ++++++++++++-----
 .../hooks/useGetAndLoadLibraryWorkflow.ts     | 23 ++++++++++++-----
 .../workflowLibrary/hooks/useSaveWorkflow.ts  | 24 +++++++++++++-----
 .../hooks/useSaveWorkflowAs.ts                | 25 +++++++++++++------
 .../src/services/api/authToastMiddleware.ts   |  4 ++-
 6 files changed, 87 insertions(+), 32 deletions(-)

diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx
index 3ff519f672..9e8adb6503 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx
@@ -61,13 +61,21 @@ const WorkflowLibraryList = () => {
   const [category, setCategory] = useState<WorkflowCategory>('user');
   const [page, setPage] = useState(0);
   const [query, setQuery] = useState('');
-  const [order_by, setOrderBy] = useState<WorkflowRecordOrderBy>('opened_at');
+  const projectId = useStore($projectId);
+  const orderByOptions = useMemo(() => {
+    return projectId
+      ? ORDER_BY_OPTIONS.filter((option) => option.value !== 'opened_at')
+      : ORDER_BY_OPTIONS;
+  }, [projectId]);
+
+  const [order_by, setOrderBy] = useState<WorkflowRecordOrderBy>(
+    orderByOptions[0]?.value as WorkflowRecordOrderBy
+  );
   const [direction, setDirection] = useState<SQLiteDirection>('ASC');
   const [debouncedQuery] = useDebounce(query, 500);
-  const projectId = useStore($projectId);
 
   const queryArg = useMemo<Parameters<typeof useListWorkflowsQuery>[0]>(() => {
-    if (category === 'user') {
+    if (category !== 'default') {
       return {
         page,
         per_page: PER_PAGE,
@@ -101,8 +109,8 @@ const WorkflowLibraryList = () => {
     [order_by]
   );
   const valueOrderBy = useMemo(
-    () => ORDER_BY_OPTIONS.find((o) => o.value === order_by),
-    [order_by]
+    () => orderByOptions.find((o) => o.value === order_by),
+    [order_by, orderByOptions]
   );
 
   const onChangeDirection = useCallback<ComboboxOnChange>(
@@ -186,7 +194,7 @@ const WorkflowLibraryList = () => {
               <FormLabel>{t('common.orderBy')}</FormLabel>
               <Combobox
                 value={valueOrderBy}
-                options={ORDER_BY_OPTIONS}
+                options={orderByOptions}
                 onChange={onChangeOrderBy}
               />
             </FormControl>
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useDeleteLibraryWorkflow.ts b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useDeleteLibraryWorkflow.ts
index bf518fe409..ae541c8157 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useDeleteLibraryWorkflow.ts
+++ b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useDeleteLibraryWorkflow.ts
@@ -1,7 +1,11 @@
+import { useToast } from '@invoke-ai/ui';
 import { useAppToaster } from 'app/components/Toaster';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useDeleteWorkflowMutation } from 'services/api/endpoints/workflows';
+import {
+  useDeleteWorkflowMutation,
+  workflowsApi,
+} from 'services/api/endpoints/workflows';
 
 type UseDeleteLibraryWorkflowOptions = {
   onSuccess?: () => void;
@@ -22,6 +26,7 @@ export const useDeleteLibraryWorkflow: UseDeleteLibraryWorkflow = ({
   onError,
 }) => {
   const toaster = useAppToaster();
+  const toast = useToast();
   const { t } = useTranslation();
   const [_deleteWorkflow, deleteWorkflowResult] = useDeleteWorkflowMutation();
 
@@ -34,14 +39,20 @@ export const useDeleteLibraryWorkflow: UseDeleteLibraryWorkflow = ({
         });
         onSuccess && onSuccess();
       } catch {
-        toaster({
-          title: t('toast.problemDeletingWorkflow'),
-          status: 'error',
-        });
+        if (
+          !toast.isActive(
+            `auth-error-toast-${workflowsApi.endpoints.deleteWorkflow.name}`
+          )
+        ) {
+          toaster({
+            title: t('toast.problemDeletingWorkflow'),
+            status: 'error',
+          });
+        }
         onError && onError();
       }
     },
-    [_deleteWorkflow, toaster, t, onSuccess, onError]
+    [_deleteWorkflow, toaster, t, onSuccess, onError, toast]
   );
 
   return { deleteWorkflow, deleteWorkflowResult };
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useGetAndLoadLibraryWorkflow.ts b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useGetAndLoadLibraryWorkflow.ts
index 27de12789a..85a0a6c757 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useGetAndLoadLibraryWorkflow.ts
+++ b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useGetAndLoadLibraryWorkflow.ts
@@ -1,9 +1,13 @@
+import { useToast } from '@invoke-ai/ui';
 import { useAppToaster } from 'app/components/Toaster';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { workflowLoadRequested } from 'features/nodes/store/actions';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLazyGetWorkflowQuery } from 'services/api/endpoints/workflows';
+import {
+  useLazyGetWorkflowQuery,
+  workflowsApi,
+} from 'services/api/endpoints/workflows';
 
 type UseGetAndLoadLibraryWorkflowOptions = {
   onSuccess?: () => void;
@@ -25,6 +29,7 @@ export const useGetAndLoadLibraryWorkflow: UseGetAndLoadLibraryWorkflow = ({
 }) => {
   const dispatch = useAppDispatch();
   const toaster = useAppToaster();
+  const toast = useToast();
   const { t } = useTranslation();
   const [_getAndLoadWorkflow, getAndLoadWorkflowResult] =
     useLazyGetWorkflowQuery();
@@ -38,14 +43,20 @@ export const useGetAndLoadLibraryWorkflow: UseGetAndLoadLibraryWorkflow = ({
         // No toast - the listener for this action does that after the workflow is loaded
         onSuccess && onSuccess();
       } catch {
-        toaster({
-          title: t('toast.problemRetrievingWorkflow'),
-          status: 'error',
-        });
+        if (
+          !toast.isActive(
+            `auth-error-toast-${workflowsApi.endpoints.getWorkflow.name}`
+          )
+        ) {
+          toaster({
+            title: t('toast.problemRetrievingWorkflow'),
+            status: 'error',
+          });
+        }
         onError && onError();
       }
     },
-    [_getAndLoadWorkflow, dispatch, onSuccess, toaster, t, onError]
+    [_getAndLoadWorkflow, dispatch, onSuccess, toaster, t, onError, toast]
   );
 
   return { getAndLoadWorkflow, getAndLoadWorkflowResult };
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflow.ts b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflow.ts
index 6417084312..85589c6694 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflow.ts
+++ b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflow.ts
@@ -12,6 +12,7 @@ import { useTranslation } from 'react-i18next';
 import {
   useCreateWorkflowMutation,
   useUpdateWorkflowMutation,
+  workflowsApi,
 } from 'services/api/endpoints/workflows';
 import type { O } from 'ts-toolbelt';
 
@@ -60,12 +61,23 @@ export const useSaveLibraryWorkflow: UseSaveLibraryWorkflow = () => {
         isClosable: true,
       });
     } catch (e) {
-      toast.update(toastRef.current, {
-        title: t('workflows.problemSavingWorkflow'),
-        status: 'error',
-        duration: 1000,
-        isClosable: true,
-      });
+      if (
+        !toast.isActive(
+          `auth-error-toast-${workflowsApi.endpoints.createWorkflow.name}`
+        ) &&
+        !toast.isActive(
+          `auth-error-toast-${workflowsApi.endpoints.updateWorkflow.name}`
+        )
+      ) {
+        toast.update(toastRef.current, {
+          title: t('workflows.problemSavingWorkflow'),
+          status: 'error',
+          duration: 1000,
+          isClosable: true,
+        });
+      } else {
+        toast.close(toastRef.current);
+      }
     }
   }, [updateWorkflow, dispatch, toast, t, createWorkflow]);
   return {
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflowAs.ts b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflowAs.ts
index bd0b091346..cb827f2195 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflowAs.ts
+++ b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflowAs.ts
@@ -9,7 +9,10 @@ import {
 } from 'features/nodes/store/workflowSlice';
 import { useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useCreateWorkflowMutation } from 'services/api/endpoints/workflows';
+import {
+  useCreateWorkflowMutation,
+  workflowsApi,
+} from 'services/api/endpoints/workflows';
 
 type SaveWorkflowAsArg = {
   name: string;
@@ -59,12 +62,20 @@ export const useSaveWorkflowAs: UseSaveWorkflowAs = () => {
         });
       } catch (e) {
         onError && onError();
-        toast.update(toastRef.current, {
-          title: t('workflows.problemSavingWorkflow'),
-          status: 'error',
-          duration: 1000,
-          isClosable: true,
-        });
+        if (
+          !toast.isActive(
+            `auth-error-toast-${workflowsApi.endpoints.createWorkflow.name}`
+          )
+        ) {
+          toast.update(toastRef.current, {
+            title: t('workflows.problemSavingWorkflow'),
+            status: 'error',
+            duration: 1000,
+            isClosable: true,
+          });
+        } else {
+          toast.close(toastRef.current);
+        }
       }
     },
     [toast, createWorkflow, dispatch, t]
diff --git a/invokeai/frontend/web/src/services/api/authToastMiddleware.ts b/invokeai/frontend/web/src/services/api/authToastMiddleware.ts
index 366f4d06c4..f1e5862c57 100644
--- a/invokeai/frontend/web/src/services/api/authToastMiddleware.ts
+++ b/invokeai/frontend/web/src/services/api/authToastMiddleware.ts
@@ -27,7 +27,8 @@ export const authToastMiddleware: Middleware =
     if (isRejectedWithValue(action)) {
       try {
         const parsed = zRejectedForbiddenAction.parse(action);
-        if (parsed.meta?.arg?.endpointName === 'getImageDTO') {
+        const endpointName = parsed.meta?.arg?.endpointName;
+        if (endpointName === 'getImageDTO') {
           // do not show toast if problem is image access
           return;
         }
@@ -39,6 +40,7 @@ export const authToastMiddleware: Middleware =
             : undefined;
         dispatch(
           addToast({
+            id: `auth-error-toast-${endpointName}`,
             title: t('common.somethingWentWrong'),
             status: 'error',
             description: customMessage,

From f79bbd2d6e4b5cb5aab2d4c54fba58f95cd5f3b7 Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Fri, 26 Jan 2024 15:59:29 -0500
Subject: [PATCH 045/133] account for baseUrl

---
 invokeai/frontend/web/src/app/hooks/useSocketIO.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/app/hooks/useSocketIO.ts b/invokeai/frontend/web/src/app/hooks/useSocketIO.ts
index ad331bc385..5198498c7f 100644
--- a/invokeai/frontend/web/src/app/hooks/useSocketIO.ts
+++ b/invokeai/frontend/web/src/app/hooks/useSocketIO.ts
@@ -45,7 +45,7 @@ export const useSocketIO = () => {
   const socketOptions = useMemo(() => {
     const options: Partial<ManagerOptions & SocketOptions> = {
       timeout: 60000,
-      path: `${window.location.pathname}ws/socket.io`,
+      path: baseUrl ? '/ws/socket.io' : `${window.location.pathname}ws/socket.io`,
       autoConnect: false, // achtung! removing this breaks the dynamic middleware
       forceNew: true,
     };

From 55e91b97bec510accd784101c09a078c49ef1d4f Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Fri, 26 Jan 2024 16:05:13 -0500
Subject: [PATCH 046/133] dep

---
 invokeai/frontend/web/src/app/hooks/useSocketIO.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/app/hooks/useSocketIO.ts b/invokeai/frontend/web/src/app/hooks/useSocketIO.ts
index 5198498c7f..fe4b589aae 100644
--- a/invokeai/frontend/web/src/app/hooks/useSocketIO.ts
+++ b/invokeai/frontend/web/src/app/hooks/useSocketIO.ts
@@ -56,7 +56,7 @@ export const useSocketIO = () => {
     }
 
     return { ...options, ...addlSocketOptions };
-  }, [authToken, addlSocketOptions]);
+  }, [authToken, addlSocketOptions, baseUrl]);
 
   useEffect(() => {
     if ($isSocketInitialized.get()) {

From de20711637b7e04e7e1ce16cf06d41002542d897 Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Fri, 26 Jan 2024 16:36:24 -0500
Subject: [PATCH 047/133] add nanostore for open API schema

---
 .../frontend/web/src/app/components/InvokeAIUI.tsx  | 13 +++++++++++++
 invokeai/frontend/web/src/app/hooks/useSocketIO.ts  |  4 +++-
 .../src/app/store/nanostores/openAPISchemaUrl.ts    |  3 +++
 .../frontend/web/src/services/api/thunks/schema.ts  | 10 +++++++---
 4 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 invokeai/frontend/web/src/app/store/nanostores/openAPISchemaUrl.ts

diff --git a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
index 214e2c7b28..68cce1fd8f 100644
--- a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
+++ b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
@@ -10,6 +10,7 @@ import { $customStarUI } from 'app/store/nanostores/customStarUI';
 import { $galleryHeader } from 'app/store/nanostores/galleryHeader';
 import { $isDebugging } from 'app/store/nanostores/isDebugging';
 import { $logo } from 'app/store/nanostores/logo';
+import { $openAPISchemaUrl } from 'app/store/nanostores/openAPISchemaUrl';
 import { $projectId } from 'app/store/nanostores/projectId';
 import { $queueId, DEFAULT_QUEUE_ID } from 'app/store/nanostores/queueId';
 import { $store } from 'app/store/nanostores/store';
@@ -28,6 +29,7 @@ const ThemeLocaleProvider = lazy(() => import('./ThemeLocaleProvider'));
 
 interface Props extends PropsWithChildren {
   apiUrl?: string;
+  openAPISchemaUrl?: string;
   token?: string;
   config?: PartialAppConfig;
   customNavComponent?: ReactNode;
@@ -47,6 +49,7 @@ interface Props extends PropsWithChildren {
 
 const InvokeAIUI = ({
   apiUrl,
+  openAPISchemaUrl,
   token,
   config,
   customNavComponent,
@@ -123,6 +126,16 @@ const InvokeAIUI = ({
     };
   }, [customNavComponent]);
 
+  useEffect(() => {
+    if (openAPISchemaUrl) {
+      $openAPISchemaUrl.set(openAPISchemaUrl);
+    }
+
+    return () => {
+      $openAPISchemaUrl.set(undefined);
+    };
+  }, [openAPISchemaUrl]);
+
   useEffect(() => {
     if (galleryHeader) {
       $galleryHeader.set(galleryHeader);
diff --git a/invokeai/frontend/web/src/app/hooks/useSocketIO.ts b/invokeai/frontend/web/src/app/hooks/useSocketIO.ts
index fe4b589aae..7b6d05b7a1 100644
--- a/invokeai/frontend/web/src/app/hooks/useSocketIO.ts
+++ b/invokeai/frontend/web/src/app/hooks/useSocketIO.ts
@@ -45,7 +45,9 @@ export const useSocketIO = () => {
   const socketOptions = useMemo(() => {
     const options: Partial<ManagerOptions & SocketOptions> = {
       timeout: 60000,
-      path: baseUrl ? '/ws/socket.io' : `${window.location.pathname}ws/socket.io`,
+      path: baseUrl
+        ? '/ws/socket.io'
+        : `${window.location.pathname}ws/socket.io`,
       autoConnect: false, // achtung! removing this breaks the dynamic middleware
       forceNew: true,
     };
diff --git a/invokeai/frontend/web/src/app/store/nanostores/openAPISchemaUrl.ts b/invokeai/frontend/web/src/app/store/nanostores/openAPISchemaUrl.ts
new file mode 100644
index 0000000000..124815f7ea
--- /dev/null
+++ b/invokeai/frontend/web/src/app/store/nanostores/openAPISchemaUrl.ts
@@ -0,0 +1,3 @@
+import { atom } from 'nanostores';
+
+export const $openAPISchemaUrl = atom<string | undefined>(undefined);
diff --git a/invokeai/frontend/web/src/services/api/thunks/schema.ts b/invokeai/frontend/web/src/services/api/thunks/schema.ts
index ed36ac4cfb..b4134f9690 100644
--- a/invokeai/frontend/web/src/services/api/thunks/schema.ts
+++ b/invokeai/frontend/web/src/services/api/thunks/schema.ts
@@ -1,4 +1,5 @@
 import { createAsyncThunk } from '@reduxjs/toolkit';
+import { $openAPISchemaUrl } from 'app/store/nanostores/openAPISchemaUrl';
 
 function getCircularReplacer() {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -26,9 +27,12 @@ export const receivedOpenAPISchema = createAsyncThunk(
   'nodes/receivedOpenAPISchema',
   async (_, { rejectWithValue }) => {
     try {
-      const response = await fetch(
-        `${window.location.href.replace(/\/$/, '')}/openapi.json`
-      );
+      const openAPISchemaUrl = $openAPISchemaUrl.get();
+
+      const url = openAPISchemaUrl
+        ? openAPISchemaUrl
+        : `${window.location.href.replace(/\/$/, '')}/openapi.json`;
+      const response = await fetch(url);
       const openAPISchema = await response.json();
 
       const schemaJSON = JSON.parse(

From 18e61e92d944daf92d4cd37ebaf6775796b39ec3 Mon Sep 17 00:00:00 2001
From: Millun Atluri <millun.atluri@gmail.com>
Date: Fri, 26 Jan 2024 17:20:23 -0500
Subject: [PATCH 048/133] {fix} install docs house keeping

---
 docs/img/favicon.ico                          |  Bin 0 -> 4286 bytes
 docs/index.md                                 |    5 +
 docs/installation/INSTALLATION.md             |   15 +-
 .../SDXL_w_Refiner_Text_to_Image.json         | 1483 +++++++++++------
 mkdocs.yml                                    |    1 +
 5 files changed, 988 insertions(+), 516 deletions(-)
 create mode 100644 docs/img/favicon.ico

diff --git a/docs/img/favicon.ico b/docs/img/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..16a72bebcbb47fe477c1591e73780f2d3c469913
GIT binary patch
literal 4286
zcmc&%O-NKx6n-;WY3eAZHfq|`m{_Q_C^9IJtVptKvL7{c9C2f-s9j7^&`v0g=*LV8
zBP?lUS>|6^1_p+?$QDUSjs>M_SAN~^J#NnEj5^~uKKXq5-aX%W_uO;7bFZT4#E;3O
z@VC+wr6_TVqNE9kM@qH;pR1R6XU^21Jx~;23X>CG@%K{=9Gz$I^HtfBf<EYrK6y=!
z58-$3Md8!Bq<&rJWmSDnj*EHsR|nX)jIULTc}Hac=Pi9}cTej*Dso`#wau>}r|TMc
z{(rco6ul1$@TSh<7m$mb3-Rv|^X_dZz`mVHNJ)x>d66IoxyVWG`M!a1@2Wit^Ev~9
zgY;M*AA!{5D4#%Ea*&Ih<X)J63pOMgkZg=V<JJA@TD+@22BJs6-MaMLx2W&sIL4f|
z<RDj9t;K8qiE-h$bs-zAHxJ|ajXbo}<l(KziP1Kj8cW8L_|<O1z>`9C495|)p)EPQ
z_pilYuhStWDg?%u)hc46LvbW~BYw0_Yt?958NNI#MsaTH|8a6WZOP$H{5hWw50B%}
z9uqP)t#QE?b2Lix(lFxU--c`FcO!IFFbv@<k)GmeLk@D0b0PW1{P_N&6#b7+p|A18
zEDSUi{?8%ub&K^#Pl?8gU_I;=+wt+yY#VZsbH3bjeot;skmH71N>HA^8KRe|H8%LP
zNaRAfTRUmvuRC+F{&Ef?Ma;S0%~c2C5YPO@KNk=E^fjKuu1q6zIt6D>Z*|FuxorLM
zZsesE=SsFgC*q!!u~yBIK+e6nDi`rFVQTE_F6~wIz#sE+=5UvLV<NW(n~QKDD_PAs
zo5;OyA_rw}b7v!;IdjkVx2O7JZP_b!sI`_Zw4nQ*#igcMo9=4XoBHGTdeR?i3pFN0
zXbm-oH6Z6gO`<kYqh{)sH~Qn;|7Pm1)KzLNHJ92e{Zo^v&D3Z)&KLdF{A>M>z2ml1
z|B=1rv*<PKIUFm&{AX`skCOd|w!ZZr&3}?H91T};)PBqUEzxl|AMJN$qtj^&do*py
z;cNd3((8~A8wOK?!6(p`9NzXn=l$1W_F%O2cK^kETF(6^{ReXY?O4|HM<xFBUl%nz
zy`Pfxy!3aTzpAzK=X-mAzk%mZyXsp#e~U9P&!K@>3rA<AHt&fcar&NOA6wSzA4MFZ
APXGV_

literal 0
HcmV?d00001

diff --git a/docs/index.md b/docs/index.md
index 1fdc063c46..670e6b7aca 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -117,6 +117,11 @@ Mac and Linux machines, and runs on GPU cards with as little as 4 GB of RAM.
 
 ## :octicons-gift-24: InvokeAI Features
 
+### Installation
+  - [Automated Installer](installation/010_INSTALL_AUTOMATED.md)
+  - [Manual Installation](installation/020_INSTALL_MANUAL.md)
+  - [Docker Installation](installation/040_INSTALL_DOCKER.md)
+
 ### The InvokeAI Web Interface
 - [WebUI overview](features/WEB.md)
 - [WebUI hotkey reference guide](features/WEBUIHOTKEYS.md)
diff --git a/docs/installation/INSTALLATION.md b/docs/installation/INSTALLATION.md
index 8ac2c56c48..29a82bb57e 100644
--- a/docs/installation/INSTALLATION.md
+++ b/docs/installation/INSTALLATION.md
@@ -18,13 +18,18 @@ either an Nvidia-based card (with CUDA support) or an AMD card (using the ROCm
 driver).
 
 
-## **[Automated Installer](010_INSTALL_AUTOMATED.md)**
-✅ This is the recommended installation method for first-time users. 
+## **[Automated Installer (Recommended)](010_INSTALL_AUTOMATED.md)**
+ ✅ This is the recommended installation method for first-time users. 
 
   This is a script that will install all of InvokeAI's essential
-  third party libraries and InvokeAI itself. It includes access to a
-  "developer console" which will help us debug problems with you and
-  give you to access experimental features.
+  third party libraries and InvokeAI itself.
+
+🖥️ **Download the latest installer .zip file here** : https://github.com/invoke-ai/InvokeAI/releases/latest
+  
+- *Look for the file labelled "InvokeAI-installer-v3.X.X.zip" at the bottom of the page*
+- If you experience issues, read through the full [installation instructions](010_INSTALL_AUTOMATED.md) to make sure you have met all of the installation requirements. If you need more help, join the [Discord](discord.gg/invoke-ai) or create an issue on [Github](https://github.com/invoke-ai/InvokeAI).
+
+
 
 ## **[Manual Installation](020_INSTALL_MANUAL.md)**
 This method is recommended for experienced users and developers.
diff --git a/docs/workflows/SDXL_w_Refiner_Text_to_Image.json b/docs/workflows/SDXL_w_Refiner_Text_to_Image.json
index f70d974702..634b3fac4b 100644
--- a/docs/workflows/SDXL_w_Refiner_Text_to_Image.json
+++ b/docs/workflows/SDXL_w_Refiner_Text_to_Image.json
@@ -37,7 +37,8 @@
     }
   ],
   "meta": {
-    "version": "1.0.0"
+    "category": "user",
+    "version": "2.0.0"
   },
   "nodes": [
     {
@@ -46,13 +47,24 @@
       "data": {
         "id": "b2b35add-929d-4538-aecb-02c661768b29",
         "type": "string",
+        "label": "Positive Prompt",
+        "isOpen": false,
+        "notes": "",
+        "isIntermediate": true,
+        "useCache": true,
+        "version": "1.0.0",
+        "nodePack": "invokeai",
         "inputs": {
           "value": {
             "id": "89854c84-cbc1-4b60-921d-4bade11cab66",
             "name": "value",
-            "type": "string",
             "fieldKind": "input",
             "label": "Positive Prompt",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "StringField"
+            },
             "value": "super cute tiger"
           }
         },
@@ -60,24 +72,21 @@
           "value": {
             "id": "3617404e-e483-4e2e-8550-7080a1ef283f",
             "name": "value",
-            "type": "string",
-            "fieldKind": "output"
+            "fieldKind": "output",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "StringField"
+            }
           }
-        },
-        "label": "Positive Prompt",
-        "isOpen": false,
-        "notes": "",
-        "embedWorkflow": false,
-        "isIntermediate": true,
-        "useCache": true,
-        "version": "1.0.0"
+        }
       },
-      "width": 320,
-      "height": 32,
       "position": {
         "x": 700,
         "y": -75
-      }
+      },
+      "width": 320,
+      "height": 24
     },
     {
       "id": "8d54b9db-3662-43af-8369-9a277e063f3b",
@@ -85,13 +94,24 @@
       "data": {
         "id": "8d54b9db-3662-43af-8369-9a277e063f3b",
         "type": "string",
+        "label": "Negative Style",
+        "isOpen": false,
+        "notes": "",
+        "isIntermediate": true,
+        "useCache": true,
+        "version": "1.0.0",
+        "nodePack": "invokeai",
         "inputs": {
           "value": {
             "id": "89854c84-cbc1-4b60-921d-4bade11cab66",
             "name": "value",
-            "type": "string",
             "fieldKind": "input",
             "label": "Negative Style",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "StringField"
+            },
             "value": ""
           }
         },
@@ -99,24 +119,21 @@
           "value": {
             "id": "3617404e-e483-4e2e-8550-7080a1ef283f",
             "name": "value",
-            "type": "string",
-            "fieldKind": "output"
+            "fieldKind": "output",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "StringField"
+            }
           }
-        },
-        "label": "Negative Style",
-        "isOpen": false,
-        "notes": "",
-        "embedWorkflow": false,
-        "isIntermediate": true,
-        "useCache": true,
-        "version": "1.0.0"
+        }
       },
-      "width": 320,
-      "height": 32,
       "position": {
         "x": 700,
         "y": 75
-      }
+      },
+      "width": 320,
+      "height": 24
     },
     {
       "id": "f1a6a160-4c36-4902-8eeb-8b1c23e81bc8",
@@ -124,13 +141,24 @@
       "data": {
         "id": "f1a6a160-4c36-4902-8eeb-8b1c23e81bc8",
         "type": "string",
+        "label": "Postive Style",
+        "isOpen": false,
+        "notes": "",
+        "isIntermediate": true,
+        "useCache": true,
+        "version": "1.0.0",
+        "nodePack": "invokeai",
         "inputs": {
           "value": {
             "id": "89854c84-cbc1-4b60-921d-4bade11cab66",
             "name": "value",
-            "type": "string",
             "fieldKind": "input",
             "label": "Positive Style",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "StringField"
+            },
             "value": ""
           }
         },
@@ -138,24 +166,21 @@
           "value": {
             "id": "3617404e-e483-4e2e-8550-7080a1ef283f",
             "name": "value",
-            "type": "string",
-            "fieldKind": "output"
+            "fieldKind": "output",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "StringField"
+            }
           }
-        },
-        "label": "Postive Style",
-        "isOpen": false,
-        "notes": "",
-        "embedWorkflow": false,
-        "isIntermediate": true,
-        "useCache": true,
-        "version": "1.0.0"
+        }
       },
-      "width": 320,
-      "height": 32,
       "position": {
         "x": 700,
         "y": -25
-      }
+      },
+      "width": 320,
+      "height": 24
     },
     {
       "id": "fbb2f1a0-2e68-411d-a955-60c3b8a6f2d1",
@@ -163,85 +188,117 @@
       "data": {
         "id": "fbb2f1a0-2e68-411d-a955-60c3b8a6f2d1",
         "type": "sdxl_refiner_compel_prompt",
+        "label": "SDXL Refiner Negative Compel Prompt",
+        "isOpen": true,
+        "notes": "",
+        "isIntermediate": true,
+        "useCache": true,
+        "version": "1.0.0",
+        "nodePack": "invokeai",
         "inputs": {
           "style": {
             "id": "c6f91ecf-370f-44d0-8243-63724e75510a",
             "name": "style",
-            "type": "string",
             "fieldKind": "input",
             "label": "Negative Style",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "StringField"
+            },
             "value": ""
           },
           "original_width": {
             "id": "956f6eca-8324-41eb-a8dd-fa9b34164ca6",
             "name": "original_width",
-            "type": "integer",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            },
             "value": 1024
           },
           "original_height": {
             "id": "a41bb3a1-7664-4dac-b6ae-6f4dff3828a9",
             "name": "original_height",
-            "type": "integer",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            },
             "value": 1024
           },
           "crop_top": {
             "id": "81936e19-0ae7-4006-9d7c-e359fc7c7d15",
             "name": "crop_top",
-            "type": "integer",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            },
             "value": 0
           },
           "crop_left": {
             "id": "be94ddb8-88cc-4d6b-a2c0-f2b43143bfa1",
             "name": "crop_left",
-            "type": "integer",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            },
             "value": 0
           },
           "aesthetic_score": {
             "id": "60f380de-87b4-4535-b3ef-545a6e57283e",
             "name": "aesthetic_score",
-            "type": "float",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "FloatField"
+            },
             "value": 6
           },
           "clip2": {
             "id": "773c4054-c005-46ad-92c4-5c1fa4506041",
             "name": "clip2",
-            "type": "ClipField",
             "fieldKind": "input",
-            "label": ""
+            "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "ClipField"
+            }
           }
         },
         "outputs": {
           "conditioning": {
             "id": "63e16bfa-59d8-4d6f-abda-ad979b26adb5",
             "name": "conditioning",
-            "type": "ConditioningField",
-            "fieldKind": "output"
+            "fieldKind": "output",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "ConditioningField"
+            }
           }
-        },
-        "label": "SDXL Refiner Negative Compel Prompt",
-        "isOpen": true,
-        "notes": "",
-        "embedWorkflow": false,
-        "isIntermediate": true,
-        "useCache": true,
-        "version": "1.0.0"
+        }
       },
-      "width": 320,
-      "height": 547,
       "position": {
         "x": 1625,
         "y": -925
-      }
+      },
+      "width": 320,
+      "height": 483
     },
     {
       "id": "3193ad09-a7c2-4bf4-a3a9-1c61cc33a204",
@@ -249,108 +306,152 @@
       "data": {
         "id": "3193ad09-a7c2-4bf4-a3a9-1c61cc33a204",
         "type": "sdxl_compel_prompt",
+        "label": "SDXL Negative Compel Prompt",
+        "isOpen": true,
+        "notes": "",
+        "isIntermediate": true,
+        "useCache": true,
+        "version": "1.0.0",
+        "nodePack": "invokeai",
         "inputs": {
           "prompt": {
             "id": "5a6889e6-95cb-462f-8f4a-6b93ae7afaec",
             "name": "prompt",
-            "type": "string",
             "fieldKind": "input",
             "label": "Negative Prompt",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "StringField"
+            },
             "value": ""
           },
           "style": {
             "id": "f240d0e6-3a1c-4320-af23-20ebb707c276",
             "name": "style",
-            "type": "string",
             "fieldKind": "input",
             "label": "Negative Style",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "StringField"
+            },
             "value": ""
           },
           "original_width": {
             "id": "05af07b0-99a0-4a68-8ad2-697bbdb7fc7e",
             "name": "original_width",
-            "type": "integer",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            },
             "value": 1024
           },
           "original_height": {
             "id": "2c771996-a998-43b7-9dd3-3792664d4e5b",
             "name": "original_height",
-            "type": "integer",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            },
             "value": 1024
           },
           "crop_top": {
             "id": "66519dca-a151-4e3e-ae1f-88f1f9877bde",
             "name": "crop_top",
-            "type": "integer",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            },
             "value": 0
           },
           "crop_left": {
             "id": "349cf2e9-f3d0-4e16-9ae2-7097d25b6a51",
             "name": "crop_left",
-            "type": "integer",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            },
             "value": 0
           },
           "target_width": {
             "id": "44499347-7bd6-4a73-99d6-5a982786db05",
             "name": "target_width",
-            "type": "integer",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            },
             "value": 1024
           },
           "target_height": {
             "id": "fda359b0-ab80-4f3c-805b-c9f61319d7d2",
             "name": "target_height",
-            "type": "integer",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            },
             "value": 1024
           },
           "clip": {
             "id": "b447adaf-a649-4a76-a827-046a9fc8d89b",
             "name": "clip",
-            "type": "ClipField",
             "fieldKind": "input",
-            "label": ""
+            "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "ClipField"
+            }
           },
           "clip2": {
             "id": "86ee4e32-08f9-4baa-9163-31d93f5c0187",
             "name": "clip2",
-            "type": "ClipField",
             "fieldKind": "input",
-            "label": ""
+            "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "ClipField"
+            }
           }
         },
         "outputs": {
           "conditioning": {
             "id": "7c10118e-7b4e-4911-b98e-d3ba6347dfd0",
             "name": "conditioning",
-            "type": "ConditioningField",
-            "fieldKind": "output"
+            "fieldKind": "output",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "ConditioningField"
+            }
           }
-        },
-        "label": "SDXL Negative Compel Prompt",
-        "isOpen": true,
-        "notes": "",
-        "embedWorkflow": false,
-        "isIntermediate": true,
-        "useCache": true,
-        "version": "1.0.0"
+        }
       },
-      "width": 320,
-      "height": 793,
       "position": {
         "x": 900,
         "y": -925
-      }
+      },
+      "width": 320,
+      "height": 699
     },
     {
       "id": "55705012-79b9-4aac-9f26-c0b10309785b",
@@ -358,37 +459,60 @@
       "data": {
         "id": "55705012-79b9-4aac-9f26-c0b10309785b",
         "type": "noise",
+        "label": "",
+        "isOpen": false,
+        "notes": "",
+        "isIntermediate": true,
+        "useCache": true,
+        "version": "1.0.1",
+        "nodePack": "invokeai",
         "inputs": {
           "seed": {
             "id": "6431737c-918a-425d-a3b4-5d57e2f35d4d",
             "name": "seed",
-            "type": "integer",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            },
             "value": 0
           },
           "width": {
             "id": "38fc5b66-fe6e-47c8-bba9-daf58e454ed7",
             "name": "width",
-            "type": "integer",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            },
             "value": 1024
           },
           "height": {
             "id": "16298330-e2bf-4872-a514-d6923df53cbb",
             "name": "height",
-            "type": "integer",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            },
             "value": 1024
           },
           "use_cpu": {
             "id": "c7c436d3-7a7a-4e76-91e4-c6deb271623c",
             "name": "use_cpu",
-            "type": "boolean",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "BooleanField"
+            },
             "value": true
           }
         },
@@ -396,36 +520,41 @@
           "noise": {
             "id": "50f650dc-0184-4e23-a927-0497a96fe954",
             "name": "noise",
-            "type": "LatentsField",
-            "fieldKind": "output"
+            "fieldKind": "output",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "LatentsField"
+            }
           },
           "width": {
             "id": "bb8a452b-133d-42d1-ae4a-3843d7e4109a",
             "name": "width",
-            "type": "integer",
-            "fieldKind": "output"
+            "fieldKind": "output",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            }
           },
           "height": {
             "id": "35cfaa12-3b8b-4b7a-a884-327ff3abddd9",
             "name": "height",
-            "type": "integer",
-            "fieldKind": "output"
+            "fieldKind": "output",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            }
           }
-        },
-        "label": "",
-        "isOpen": false,
-        "notes": "",
-        "embedWorkflow": false,
-        "isIntermediate": true,
-        "useCache": true,
-        "version": "1.0.0"
+        }
       },
-      "width": 320,
-      "height": 32,
       "position": {
         "x": 1275,
         "y": -200
-      }
+      },
+      "width": 320,
+      "height": 24
     },
     {
       "id": "ea94bc37-d995-4a83-aa99-4af42479f2f2",
@@ -433,21 +562,36 @@
       "data": {
         "id": "ea94bc37-d995-4a83-aa99-4af42479f2f2",
         "type": "rand_int",
+        "label": "Random Seed",
+        "isOpen": false,
+        "notes": "",
+        "isIntermediate": true,
+        "useCache": false,
+        "version": "1.0.0",
+        "nodePack": "invokeai",
         "inputs": {
           "low": {
             "id": "3ec65a37-60ba-4b6c-a0b2-553dd7a84b84",
             "name": "low",
-            "type": "integer",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            },
             "value": 0
           },
           "high": {
             "id": "085f853a-1a5f-494d-8bec-e4ba29a3f2d1",
             "name": "high",
-            "type": "integer",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            },
             "value": 2147483647
           }
         },
@@ -455,24 +599,21 @@
           "value": {
             "id": "812ade4d-7699-4261-b9fc-a6c9d2ab55ee",
             "name": "value",
-            "type": "integer",
-            "fieldKind": "output"
+            "fieldKind": "output",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            }
           }
-        },
-        "label": "Random Seed",
-        "isOpen": false,
-        "notes": "",
-        "embedWorkflow": false,
-        "isIntermediate": true,
-        "useCache": false,
-        "version": "1.0.0"
+        }
       },
-      "width": 320,
-      "height": 32,
       "position": {
         "x": 1275,
         "y": -250
-      }
+      },
+      "width": 320,
+      "height": 24
     },
     {
       "id": "30d3289c-773c-4152-a9d2-bd8a99c8fd22",
@@ -480,13 +621,24 @@
       "data": {
         "id": "30d3289c-773c-4152-a9d2-bd8a99c8fd22",
         "type": "sdxl_model_loader",
+        "label": "",
+        "isOpen": false,
+        "notes": "",
+        "isIntermediate": true,
+        "useCache": true,
+        "version": "1.0.0",
+        "nodePack": "invokeai",
         "inputs": {
           "model": {
             "id": "39f9e799-bc95-4318-a200-30eed9e60c42",
             "name": "model",
-            "type": "SDXLMainModelField",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "SDXLMainModelField"
+            },
             "value": {
               "model_name": "stable-diffusion-xl-base-1.0",
               "base_model": "sdxl",
@@ -498,42 +650,51 @@
           "unet": {
             "id": "2626a45e-59aa-4609-b131-2d45c5eaed69",
             "name": "unet",
-            "type": "UNetField",
-            "fieldKind": "output"
+            "fieldKind": "output",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "UNetField"
+            }
           },
           "clip": {
             "id": "7c9c42fa-93d5-4639-ab8b-c4d9b0559baf",
             "name": "clip",
-            "type": "ClipField",
-            "fieldKind": "output"
+            "fieldKind": "output",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "ClipField"
+            }
           },
           "clip2": {
             "id": "0dafddcf-a472-49c1-a47c-7b8fab4c8bc9",
             "name": "clip2",
-            "type": "ClipField",
-            "fieldKind": "output"
+            "fieldKind": "output",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "ClipField"
+            }
           },
           "vae": {
             "id": "ee6a6997-1b3c-4ff3-99ce-1e7bfba2750c",
             "name": "vae",
-            "type": "VaeField",
-            "fieldKind": "output"
+            "fieldKind": "output",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "VaeField"
+            }
           }
-        },
-        "label": "",
-        "isOpen": false,
-        "notes": "",
-        "embedWorkflow": false,
-        "isIntermediate": true,
-        "useCache": true,
-        "version": "1.0.0"
+        }
       },
-      "width": 320,
-      "height": 32,
       "position": {
         "x": 700,
         "y": 175
-      }
+      },
+      "width": 320,
+      "height": 24
     },
     {
       "id": "faf965a4-7530-427b-b1f3-4ba6505c2a08",
@@ -541,108 +702,152 @@
       "data": {
         "id": "faf965a4-7530-427b-b1f3-4ba6505c2a08",
         "type": "sdxl_compel_prompt",
+        "label": "SDXL Positive Compel Prompt",
+        "isOpen": true,
+        "notes": "",
+        "isIntermediate": true,
+        "useCache": true,
+        "version": "1.0.0",
+        "nodePack": "invokeai",
         "inputs": {
           "prompt": {
             "id": "5a6889e6-95cb-462f-8f4a-6b93ae7afaec",
             "name": "prompt",
-            "type": "string",
             "fieldKind": "input",
             "label": "Positive Prompt",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "StringField"
+            },
             "value": ""
           },
           "style": {
             "id": "f240d0e6-3a1c-4320-af23-20ebb707c276",
             "name": "style",
-            "type": "string",
             "fieldKind": "input",
             "label": "Positive Style",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "StringField"
+            },
             "value": ""
           },
           "original_width": {
             "id": "05af07b0-99a0-4a68-8ad2-697bbdb7fc7e",
             "name": "original_width",
-            "type": "integer",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            },
             "value": 1024
           },
           "original_height": {
             "id": "2c771996-a998-43b7-9dd3-3792664d4e5b",
             "name": "original_height",
-            "type": "integer",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            },
             "value": 1024
           },
           "crop_top": {
             "id": "66519dca-a151-4e3e-ae1f-88f1f9877bde",
             "name": "crop_top",
-            "type": "integer",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            },
             "value": 0
           },
           "crop_left": {
             "id": "349cf2e9-f3d0-4e16-9ae2-7097d25b6a51",
             "name": "crop_left",
-            "type": "integer",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            },
             "value": 0
           },
           "target_width": {
             "id": "44499347-7bd6-4a73-99d6-5a982786db05",
             "name": "target_width",
-            "type": "integer",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            },
             "value": 1024
           },
           "target_height": {
             "id": "fda359b0-ab80-4f3c-805b-c9f61319d7d2",
             "name": "target_height",
-            "type": "integer",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            },
             "value": 1024
           },
           "clip": {
             "id": "b447adaf-a649-4a76-a827-046a9fc8d89b",
             "name": "clip",
-            "type": "ClipField",
             "fieldKind": "input",
-            "label": ""
+            "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "ClipField"
+            }
           },
           "clip2": {
             "id": "86ee4e32-08f9-4baa-9163-31d93f5c0187",
             "name": "clip2",
-            "type": "ClipField",
             "fieldKind": "input",
-            "label": ""
+            "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "ClipField"
+            }
           }
         },
         "outputs": {
           "conditioning": {
             "id": "7c10118e-7b4e-4911-b98e-d3ba6347dfd0",
             "name": "conditioning",
-            "type": "ConditioningField",
-            "fieldKind": "output"
+            "fieldKind": "output",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "ConditioningField"
+            }
           }
-        },
-        "label": "SDXL Positive Compel Prompt",
-        "isOpen": true,
-        "notes": "",
-        "embedWorkflow": false,
-        "isIntermediate": true,
-        "useCache": true,
-        "version": "1.0.0"
+        }
       },
-      "width": 320,
-      "height": 793,
       "position": {
         "x": 550,
         "y": -925
-      }
+      },
+      "width": 320,
+      "height": 699
     },
     {
       "id": "f0e06b70-9f53-44e3-8f5f-63d813b6b579",
@@ -650,85 +855,117 @@
       "data": {
         "id": "f0e06b70-9f53-44e3-8f5f-63d813b6b579",
         "type": "sdxl_refiner_compel_prompt",
+        "label": "SDXL Refiner Positive Compel Prompt",
+        "isOpen": true,
+        "notes": "",
+        "isIntermediate": true,
+        "useCache": true,
+        "version": "1.0.0",
+        "nodePack": "invokeai",
         "inputs": {
           "style": {
             "id": "c6f91ecf-370f-44d0-8243-63724e75510a",
             "name": "style",
-            "type": "string",
             "fieldKind": "input",
             "label": "Positive Style",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "StringField"
+            },
             "value": ""
           },
           "original_width": {
             "id": "956f6eca-8324-41eb-a8dd-fa9b34164ca6",
             "name": "original_width",
-            "type": "integer",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            },
             "value": 1024
           },
           "original_height": {
             "id": "a41bb3a1-7664-4dac-b6ae-6f4dff3828a9",
             "name": "original_height",
-            "type": "integer",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            },
             "value": 1024
           },
           "crop_top": {
             "id": "81936e19-0ae7-4006-9d7c-e359fc7c7d15",
             "name": "crop_top",
-            "type": "integer",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            },
             "value": 0
           },
           "crop_left": {
             "id": "be94ddb8-88cc-4d6b-a2c0-f2b43143bfa1",
             "name": "crop_left",
-            "type": "integer",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            },
             "value": 0
           },
           "aesthetic_score": {
             "id": "60f380de-87b4-4535-b3ef-545a6e57283e",
             "name": "aesthetic_score",
-            "type": "float",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "FloatField"
+            },
             "value": 6
           },
           "clip2": {
             "id": "773c4054-c005-46ad-92c4-5c1fa4506041",
             "name": "clip2",
-            "type": "ClipField",
             "fieldKind": "input",
-            "label": ""
+            "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "ClipField"
+            }
           }
         },
         "outputs": {
           "conditioning": {
             "id": "63e16bfa-59d8-4d6f-abda-ad979b26adb5",
             "name": "conditioning",
-            "type": "ConditioningField",
-            "fieldKind": "output"
+            "fieldKind": "output",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "ConditioningField"
+            }
           }
-        },
-        "label": "SDXL Refiner Positive Compel Prompt",
-        "isOpen": true,
-        "notes": "",
-        "embedWorkflow": false,
-        "isIntermediate": true,
-        "useCache": true,
-        "version": "1.0.0"
+        }
       },
-      "width": 320,
-      "height": 547,
       "position": {
         "x": 1275,
         "y": -925
-      }
+      },
+      "width": 320,
+      "height": 483
     },
     {
       "id": "62bdf243-d98f-4508-b6b5-c3af00ef49f0",
@@ -736,13 +973,24 @@
       "data": {
         "id": "62bdf243-d98f-4508-b6b5-c3af00ef49f0",
         "type": "sdxl_refiner_model_loader",
+        "label": "",
+        "isOpen": false,
+        "notes": "",
+        "isIntermediate": true,
+        "useCache": true,
+        "version": "1.0.0",
+        "nodePack": "invokeai",
         "inputs": {
           "model": {
             "id": "2f09431c-096b-4848-b580-b37be773839d",
             "name": "model",
-            "type": "SDXLRefinerModelField",
             "fieldKind": "input",
             "label": "Refiner Model",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "SDXLRefinerModelField"
+            },
             "value": {
               "model_name": "stable-diffusion-xl-refiner-1.0",
               "base_model": "sdxl-refiner",
@@ -754,36 +1002,41 @@
           "unet": {
             "id": "c06b335a-7f65-4165-9ca2-40107eb9c85b",
             "name": "unet",
-            "type": "UNetField",
-            "fieldKind": "output"
+            "fieldKind": "output",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "UNetField"
+            }
           },
           "clip2": {
             "id": "81ec105e-cc1f-4b78-a5bb-8df3a4dd2574",
             "name": "clip2",
-            "type": "ClipField",
-            "fieldKind": "output"
+            "fieldKind": "output",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "ClipField"
+            }
           },
           "vae": {
             "id": "f516feab-873d-47ec-a946-b8f15eed4bed",
             "name": "vae",
-            "type": "VaeField",
-            "fieldKind": "output"
+            "fieldKind": "output",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "VaeField"
+            }
           }
-        },
-        "label": "",
-        "isOpen": false,
-        "notes": "",
-        "embedWorkflow": false,
-        "isIntermediate": true,
-        "useCache": true,
-        "version": "1.0.0"
+        }
       },
-      "width": 320,
-      "height": 32,
       "position": {
         "x": 700,
         "y": 225
-      }
+      },
+      "width": 320,
+      "height": 24
     },
     {
       "id": "5639e3bc-b769-4ae5-9262-72db703c5a7b",
@@ -791,13 +1044,24 @@
       "data": {
         "id": "5639e3bc-b769-4ae5-9262-72db703c5a7b",
         "type": "string",
+        "label": "Negative Prompt",
+        "isOpen": false,
+        "notes": "",
+        "isIntermediate": true,
+        "useCache": true,
+        "version": "1.0.0",
+        "nodePack": "invokeai",
         "inputs": {
           "value": {
             "id": "89854c84-cbc1-4b60-921d-4bade11cab66",
             "name": "value",
-            "type": "string",
             "fieldKind": "input",
             "label": "Negative Prompt",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "StringField"
+            },
             "value": ""
           }
         },
@@ -805,24 +1069,21 @@
           "value": {
             "id": "3617404e-e483-4e2e-8550-7080a1ef283f",
             "name": "value",
-            "type": "string",
-            "fieldKind": "output"
+            "fieldKind": "output",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "StringField"
+            }
           }
-        },
-        "label": "Negative Prompt",
-        "isOpen": false,
-        "notes": "",
-        "embedWorkflow": false,
-        "isIntermediate": true,
-        "useCache": true,
-        "version": "1.0.0"
+        }
       },
-      "width": 320,
-      "height": 32,
       "position": {
         "x": 700,
         "y": 25
-      }
+      },
+      "width": 320,
+      "height": 24
     },
     {
       "id": "06a30867-1e9d-461f-bd58-14a63cc997dd",
@@ -830,13 +1091,24 @@
       "data": {
         "id": "06a30867-1e9d-461f-bd58-14a63cc997dd",
         "type": "scheduler",
+        "label": "",
+        "isOpen": false,
+        "notes": "",
+        "isIntermediate": true,
+        "useCache": true,
+        "version": "1.0.0",
+        "nodePack": "invokeai",
         "inputs": {
           "scheduler": {
             "id": "0be5a5a0-3388-41e1-a6c4-10d414d8fe5b",
             "name": "scheduler",
-            "type": "Scheduler",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "SchedulerField"
+            },
             "value": "euler"
           }
         },
@@ -844,24 +1116,21 @@
           "scheduler": {
             "id": "cafdef9d-61cd-4f43-be91-356a1d65afca",
             "name": "scheduler",
-            "type": "Scheduler",
-            "fieldKind": "output"
+            "fieldKind": "output",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "SchedulerField"
+            }
           }
-        },
-        "label": "",
-        "isOpen": false,
-        "notes": "",
-        "embedWorkflow": false,
-        "isIntermediate": true,
-        "useCache": true,
-        "version": "1.0.0"
+        }
       },
-      "width": 320,
-      "height": 32,
       "position": {
         "x": 700,
         "y": 125
-      }
+      },
+      "width": 320,
+      "height": 24
     },
     {
       "id": "84df8f00-ea7e-499f-ab86-d019ddea5393",
@@ -869,145 +1138,225 @@
       "data": {
         "id": "84df8f00-ea7e-499f-ab86-d019ddea5393",
         "type": "denoise_latents",
+        "label": "",
+        "isOpen": true,
+        "notes": "",
+        "isIntermediate": true,
+        "useCache": true,
+        "version": "1.5.1",
+        "nodePack": "invokeai",
         "inputs": {
           "positive_conditioning": {
             "id": "73b2ebc2-4a56-4809-b8ab-b78fde786961",
             "name": "positive_conditioning",
-            "type": "ConditioningField",
             "fieldKind": "input",
-            "label": ""
+            "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "ConditioningField"
+            }
           },
           "negative_conditioning": {
             "id": "04d1bfbb-6cdc-4c16-8e08-290ba86ca8ba",
             "name": "negative_conditioning",
-            "type": "ConditioningField",
             "fieldKind": "input",
-            "label": ""
+            "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "ConditioningField"
+            }
           },
           "noise": {
             "id": "39ea4659-ea69-415f-85c0-a06f94d53e14",
             "name": "noise",
-            "type": "LatentsField",
             "fieldKind": "input",
-            "label": ""
+            "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "LatentsField"
+            }
           },
           "steps": {
             "id": "dfd3c295-adae-499a-8c94-3c6c6d9ece0e",
             "name": "steps",
-            "type": "integer",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            },
             "value": 10
           },
           "cfg_scale": {
             "id": "2ae0c196-8c94-4ea8-a9fc-1be06938a0c3",
             "name": "cfg_scale",
-            "type": "FloatPolymorphic",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": true,
+              "name": "FloatField"
+            },
             "value": 7.5
           },
           "denoising_start": {
             "id": "3d085ec1-14de-4eef-9853-2edf5d81daac",
             "name": "denoising_start",
-            "type": "float",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "FloatField"
+            },
             "value": 0
           },
           "denoising_end": {
             "id": "1a820924-15ca-4ba5-b981-6b588e486a5b",
             "name": "denoising_end",
-            "type": "float",
             "fieldKind": "input",
             "label": "",
-            "value": 1
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "FloatField"
+            },
+            "value": 0.8
           },
           "scheduler": {
             "id": "d0d19fab-5001-4c5d-b664-031df1a65311",
             "name": "scheduler",
-            "type": "Scheduler",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "SchedulerField"
+            },
             "value": "euler"
           },
           "unet": {
             "id": "efbdecd1-5c07-420c-bd58-52de43fcde4c",
             "name": "unet",
-            "type": "UNetField",
             "fieldKind": "input",
-            "label": ""
+            "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "UNetField"
+            }
           },
           "control": {
             "id": "e1a457c4-5546-4c02-83e1-092776b27cd1",
             "name": "control",
-            "type": "ControlPolymorphic",
             "fieldKind": "input",
-            "label": ""
+            "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": true,
+              "name": "ControlField"
+            }
           },
           "ip_adapter": {
             "id": "d4082d78-7f17-4f87-af05-5a76129737ba",
             "name": "ip_adapter",
-            "type": "IPAdapterPolymorphic",
             "fieldKind": "input",
-            "label": ""
+            "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": true,
+              "name": "IPAdapterField"
+            }
           },
           "t2i_adapter": {
             "id": "4841595c-f81b-440a-9377-fe89b26b42ac",
             "name": "t2i_adapter",
-            "type": "T2IAdapterPolymorphic",
             "fieldKind": "input",
-            "label": ""
+            "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": true,
+              "name": "T2IAdapterField"
+            }
+          },
+          "cfg_rescale_multiplier": {
+            "id": "679083b2-f137-416f-a9d8-ec38f6263c1f",
+            "name": "cfg_rescale_multiplier",
+            "type": {
+              "name": "FloatField",
+              "isCollection": false,
+              "isCollectionOrScalar": false
+            },
+            "label": "",
+            "fieldKind": "input",
+            "value": 0
           },
           "latents": {
             "id": "60bbfc7e-6641-4354-b678-12029c580aa9",
             "name": "latents",
-            "type": "LatentsField",
             "fieldKind": "input",
-            "label": ""
+            "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "LatentsField"
+            }
           },
           "denoise_mask": {
             "id": "b2876171-e4c5-45cf-a352-852047c902fc",
             "name": "denoise_mask",
-            "type": "DenoiseMaskField",
             "fieldKind": "input",
-            "label": ""
+            "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "DenoiseMaskField"
+            }
           }
         },
         "outputs": {
           "latents": {
             "id": "62705a29-cc3a-4154-8f62-a8f821daf861",
             "name": "latents",
-            "type": "LatentsField",
-            "fieldKind": "output"
+            "fieldKind": "output",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "LatentsField"
+            }
           },
           "width": {
             "id": "eb2e2312-1e64-4008-a64f-6783d49dde29",
             "name": "width",
-            "type": "integer",
-            "fieldKind": "output"
+            "fieldKind": "output",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            }
           },
           "height": {
             "id": "7bd8d012-edcf-4def-98eb-7ebdd724c7c5",
             "name": "height",
-            "type": "integer",
-            "fieldKind": "output"
+            "fieldKind": "output",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            }
           }
-        },
-        "label": "",
-        "isOpen": true,
-        "notes": "",
-        "embedWorkflow": false,
-        "isIntermediate": true,
-        "useCache": true,
-        "version": "1.4.0"
+        }
       },
-      "width": 320,
-      "height": 646,
       "position": {
         "x": 1269.2683722842958,
         "y": -119.4839111990423
-      }
+      },
+      "width": 320,
+      "height": 614
     },
     {
       "id": "3d40eda5-ff7b-4dff-8d2e-4f44742faa1b",
@@ -1015,145 +1364,225 @@
       "data": {
         "id": "3d40eda5-ff7b-4dff-8d2e-4f44742faa1b",
         "type": "denoise_latents",
+        "label": "",
+        "isOpen": true,
+        "notes": "",
+        "isIntermediate": true,
+        "useCache": true,
+        "version": "1.5.1",
+        "nodePack": "invokeai",
         "inputs": {
           "positive_conditioning": {
             "id": "a9c932a9-6164-4333-bade-3909c9a3ce59",
             "name": "positive_conditioning",
-            "type": "ConditioningField",
             "fieldKind": "input",
-            "label": ""
+            "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "ConditioningField"
+            }
           },
           "negative_conditioning": {
             "id": "a57fced5-aca6-40c9-8197-ce4f01433111",
             "name": "negative_conditioning",
-            "type": "ConditioningField",
             "fieldKind": "input",
-            "label": ""
+            "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "ConditioningField"
+            }
           },
           "noise": {
             "id": "b4cbec14-c24e-4ec2-bda3-8fc19c089717",
             "name": "noise",
-            "type": "LatentsField",
             "fieldKind": "input",
-            "label": ""
+            "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "LatentsField"
+            }
           },
           "steps": {
             "id": "24dd36f7-fdf1-40c9-945c-216471b44a2f",
             "name": "steps",
-            "type": "integer",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            },
             "value": 10
           },
           "cfg_scale": {
             "id": "5f3a7f0c-5088-49e9-b490-75822d0c20cc",
             "name": "cfg_scale",
-            "type": "FloatPolymorphic",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": true,
+              "name": "FloatField"
+            },
             "value": 7.5
           },
           "denoising_start": {
             "id": "b326ffde-625c-49c5-b5e1-90b79df80979",
             "name": "denoising_start",
-            "type": "float",
             "fieldKind": "input",
             "label": "",
-            "value": 0
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "FloatField"
+            },
+            "value": 0.8
           },
           "denoising_end": {
             "id": "d4a458ef-5576-4c5d-8e6d-ee04c9c7c4dc",
             "name": "denoising_end",
-            "type": "float",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "FloatField"
+            },
             "value": 1
           },
           "scheduler": {
             "id": "95aba2d0-c470-44f2-a25c-a192600be6da",
             "name": "scheduler",
-            "type": "Scheduler",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "SchedulerField"
+            },
             "value": "euler"
           },
           "unet": {
             "id": "68a8636e-3b2f-4a95-bd05-d86a01edb74a",
             "name": "unet",
-            "type": "UNetField",
             "fieldKind": "input",
-            "label": ""
+            "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "UNetField"
+            }
           },
           "control": {
             "id": "508e68a6-1cfc-4121-baed-b829b2886474",
             "name": "control",
-            "type": "ControlPolymorphic",
             "fieldKind": "input",
-            "label": ""
+            "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": true,
+              "name": "ControlField"
+            }
           },
           "ip_adapter": {
             "id": "e976e72f-8bd1-44d4-ad75-8410db221e3f",
             "name": "ip_adapter",
-            "type": "IPAdapterPolymorphic",
             "fieldKind": "input",
-            "label": ""
+            "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": true,
+              "name": "IPAdapterField"
+            }
           },
           "t2i_adapter": {
             "id": "38e15c99-ff72-443a-bddc-440fab9ccefc",
             "name": "t2i_adapter",
-            "type": "T2IAdapterPolymorphic",
             "fieldKind": "input",
-            "label": ""
+            "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": true,
+              "name": "T2IAdapterField"
+            }
+          },
+          "cfg_rescale_multiplier": {
+            "id": "30c6aca9-333d-49fa-be99-89daf82fe850",
+            "name": "cfg_rescale_multiplier",
+            "type": {
+              "name": "FloatField",
+              "isCollection": false,
+              "isCollectionOrScalar": false
+            },
+            "label": "",
+            "fieldKind": "input",
+            "value": 0
           },
           "latents": {
             "id": "f6d628e8-05ca-4ee3-a5a4-35323ebeb853",
             "name": "latents",
-            "type": "LatentsField",
             "fieldKind": "input",
-            "label": ""
+            "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "LatentsField"
+            }
           },
           "denoise_mask": {
             "id": "e2385456-d127-4793-98ca-d93b4aee3481",
             "name": "denoise_mask",
-            "type": "DenoiseMaskField",
             "fieldKind": "input",
-            "label": ""
+            "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "DenoiseMaskField"
+            }
           }
         },
         "outputs": {
           "latents": {
             "id": "a61efc39-ba21-468b-ae58-5922337cf399",
             "name": "latents",
-            "type": "LatentsField",
-            "fieldKind": "output"
+            "fieldKind": "output",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "LatentsField"
+            }
           },
           "width": {
             "id": "9093043b-808b-4ac6-ab18-7d721a7e39d7",
             "name": "width",
-            "type": "integer",
-            "fieldKind": "output"
+            "fieldKind": "output",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            }
           },
           "height": {
             "id": "5ff472a4-ee22-4988-bcf7-7d6116a37e5a",
             "name": "height",
-            "type": "integer",
-            "fieldKind": "output"
+            "fieldKind": "output",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            }
           }
-        },
-        "label": "",
-        "isOpen": true,
-        "notes": "",
-        "embedWorkflow": false,
-        "isIntermediate": true,
-        "useCache": true,
-        "version": "1.4.0"
+        }
       },
-      "width": 320,
-      "height": 646,
       "position": {
         "x": 1672.552348276784,
         "y": -118.3156091718022
-      }
+      },
+      "width": 320,
+      "height": 614
     },
     {
       "id": "17eb4b88-bdd8-4984-affa-26586b146866",
@@ -1161,42 +1590,69 @@
       "data": {
         "id": "17eb4b88-bdd8-4984-affa-26586b146866",
         "type": "l2i",
+        "label": "",
+        "isOpen": true,
+        "notes": "",
+        "isIntermediate": false,
+        "useCache": true,
+        "version": "1.2.0",
+        "nodePack": "invokeai",
         "inputs": {
           "metadata": {
             "id": "04f49f70-8ee6-43e3-ac63-af02e5b34204",
             "name": "metadata",
-            "type": "MetadataField",
             "fieldKind": "input",
-            "label": ""
+            "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "MetadataField"
+            }
           },
           "latents": {
             "id": "d27c4313-01db-45cb-b9f4-6a827d0d766a",
             "name": "latents",
-            "type": "LatentsField",
             "fieldKind": "input",
-            "label": ""
+            "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "LatentsField"
+            }
           },
           "vae": {
             "id": "3751b0f6-69f3-4f95-a7f9-476b2d31e9f9",
             "name": "vae",
-            "type": "VaeField",
             "fieldKind": "input",
-            "label": ""
+            "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "VaeField"
+            }
           },
           "tiled": {
             "id": "07e5e79a-b452-4beb-b26f-715da2387ac7",
             "name": "tiled",
-            "type": "boolean",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "BooleanField"
+            },
             "value": false
           },
           "fp32": {
             "id": "afe954f6-ecaf-4eac-98ee-23f4d0eb7a6b",
             "name": "fp32",
-            "type": "boolean",
             "fieldKind": "input",
             "label": "",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "BooleanField"
+            },
             "value": false
           }
         },
@@ -1204,236 +1660,241 @@
           "image": {
             "id": "98515f37-9fe7-420e-839b-6e349d9407df",
             "name": "image",
-            "type": "ImageField",
-            "fieldKind": "output"
+            "fieldKind": "output",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "ImageField"
+            }
           },
           "width": {
             "id": "5203f61f-02db-423c-9c85-80aa20816dea",
             "name": "width",
-            "type": "integer",
-            "fieldKind": "output"
+            "fieldKind": "output",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            }
           },
           "height": {
             "id": "499e6152-c604-4dad-84c3-8c5b26a39919",
             "name": "height",
-            "type": "integer",
-            "fieldKind": "output"
+            "fieldKind": "output",
+            "type": {
+              "isCollection": false,
+              "isCollectionOrScalar": false,
+              "name": "IntegerField"
+            }
           }
-        },
-        "label": "",
-        "isOpen": true,
-        "notes": "",
-        "embedWorkflow": false,
-        "isIntermediate": false,
-        "useCache": true,
-        "version": "1.0.0"
+        }
       },
-      "width": 320,
-      "height": 267,
       "position": {
         "x": 2045.2934900771834,
         "y": -362.2916292593367
-      }
+      },
+      "width": 320,
+      "height": 225
     }
   ],
   "edges": [
     {
-      "source": "ea94bc37-d995-4a83-aa99-4af42479f2f2",
-      "target": "55705012-79b9-4aac-9f26-c0b10309785b",
       "id": "ea94bc37-d995-4a83-aa99-4af42479f2f2-55705012-79b9-4aac-9f26-c0b10309785b-collapsed",
-      "type": "collapsed"
-    },
-    {
+      "type": "collapsed",
       "source": "ea94bc37-d995-4a83-aa99-4af42479f2f2",
-      "sourceHandle": "value",
-      "target": "55705012-79b9-4aac-9f26-c0b10309785b",
-      "targetHandle": "seed",
+      "target": "55705012-79b9-4aac-9f26-c0b10309785b"
+    },
+    {
       "id": "reactflow__edge-ea94bc37-d995-4a83-aa99-4af42479f2f2value-55705012-79b9-4aac-9f26-c0b10309785bseed",
-      "type": "default"
+      "type": "default",
+      "source": "ea94bc37-d995-4a83-aa99-4af42479f2f2",
+      "target": "55705012-79b9-4aac-9f26-c0b10309785b",
+      "sourceHandle": "value",
+      "targetHandle": "seed"
     },
     {
-      "source": "30d3289c-773c-4152-a9d2-bd8a99c8fd22",
-      "sourceHandle": "clip",
-      "target": "faf965a4-7530-427b-b1f3-4ba6505c2a08",
-      "targetHandle": "clip",
       "id": "reactflow__edge-30d3289c-773c-4152-a9d2-bd8a99c8fd22clip-faf965a4-7530-427b-b1f3-4ba6505c2a08clip",
-      "type": "default"
-    },
-    {
+      "type": "default",
       "source": "30d3289c-773c-4152-a9d2-bd8a99c8fd22",
-      "sourceHandle": "clip2",
       "target": "faf965a4-7530-427b-b1f3-4ba6505c2a08",
-      "targetHandle": "clip2",
-      "id": "reactflow__edge-30d3289c-773c-4152-a9d2-bd8a99c8fd22clip2-faf965a4-7530-427b-b1f3-4ba6505c2a08clip2",
-      "type": "default"
-    },
-    {
-      "source": "30d3289c-773c-4152-a9d2-bd8a99c8fd22",
       "sourceHandle": "clip",
-      "target": "3193ad09-a7c2-4bf4-a3a9-1c61cc33a204",
-      "targetHandle": "clip",
+      "targetHandle": "clip"
+    },
+    {
+      "id": "reactflow__edge-30d3289c-773c-4152-a9d2-bd8a99c8fd22clip2-faf965a4-7530-427b-b1f3-4ba6505c2a08clip2",
+      "type": "default",
+      "source": "30d3289c-773c-4152-a9d2-bd8a99c8fd22",
+      "target": "faf965a4-7530-427b-b1f3-4ba6505c2a08",
+      "sourceHandle": "clip2",
+      "targetHandle": "clip2"
+    },
+    {
       "id": "reactflow__edge-30d3289c-773c-4152-a9d2-bd8a99c8fd22clip-3193ad09-a7c2-4bf4-a3a9-1c61cc33a204clip",
-      "type": "default"
+      "type": "default",
+      "source": "30d3289c-773c-4152-a9d2-bd8a99c8fd22",
+      "target": "3193ad09-a7c2-4bf4-a3a9-1c61cc33a204",
+      "sourceHandle": "clip",
+      "targetHandle": "clip"
     },
     {
-      "source": "30d3289c-773c-4152-a9d2-bd8a99c8fd22",
-      "sourceHandle": "clip2",
-      "target": "3193ad09-a7c2-4bf4-a3a9-1c61cc33a204",
-      "targetHandle": "clip2",
       "id": "reactflow__edge-30d3289c-773c-4152-a9d2-bd8a99c8fd22clip2-3193ad09-a7c2-4bf4-a3a9-1c61cc33a204clip2",
-      "type": "default"
-    },
-    {
-      "source": "62bdf243-d98f-4508-b6b5-c3af00ef49f0",
-      "sourceHandle": "clip2",
-      "target": "f0e06b70-9f53-44e3-8f5f-63d813b6b579",
-      "targetHandle": "clip2",
-      "id": "reactflow__edge-62bdf243-d98f-4508-b6b5-c3af00ef49f0clip2-f0e06b70-9f53-44e3-8f5f-63d813b6b579clip2",
-      "type": "default"
-    },
-    {
-      "source": "62bdf243-d98f-4508-b6b5-c3af00ef49f0",
-      "sourceHandle": "clip2",
-      "target": "fbb2f1a0-2e68-411d-a955-60c3b8a6f2d1",
-      "targetHandle": "clip2",
-      "id": "reactflow__edge-62bdf243-d98f-4508-b6b5-c3af00ef49f0clip2-fbb2f1a0-2e68-411d-a955-60c3b8a6f2d1clip2",
-      "type": "default"
-    },
-    {
-      "source": "5639e3bc-b769-4ae5-9262-72db703c5a7b",
-      "sourceHandle": "value",
-      "target": "3193ad09-a7c2-4bf4-a3a9-1c61cc33a204",
-      "targetHandle": "prompt",
-      "id": "reactflow__edge-5639e3bc-b769-4ae5-9262-72db703c5a7bvalue-3193ad09-a7c2-4bf4-a3a9-1c61cc33a204prompt",
-      "type": "default"
-    },
-    {
-      "source": "f1a6a160-4c36-4902-8eeb-8b1c23e81bc8",
-      "sourceHandle": "value",
-      "target": "faf965a4-7530-427b-b1f3-4ba6505c2a08",
-      "targetHandle": "style",
-      "id": "reactflow__edge-f1a6a160-4c36-4902-8eeb-8b1c23e81bc8value-faf965a4-7530-427b-b1f3-4ba6505c2a08style",
-      "type": "default"
-    },
-    {
-      "source": "b2b35add-929d-4538-aecb-02c661768b29",
-      "sourceHandle": "value",
-      "target": "faf965a4-7530-427b-b1f3-4ba6505c2a08",
-      "targetHandle": "prompt",
-      "id": "reactflow__edge-b2b35add-929d-4538-aecb-02c661768b29value-faf965a4-7530-427b-b1f3-4ba6505c2a08prompt",
-      "type": "default"
-    },
-    {
-      "source": "f1a6a160-4c36-4902-8eeb-8b1c23e81bc8",
-      "sourceHandle": "value",
-      "target": "f0e06b70-9f53-44e3-8f5f-63d813b6b579",
-      "targetHandle": "style",
-      "id": "reactflow__edge-f1a6a160-4c36-4902-8eeb-8b1c23e81bc8value-f0e06b70-9f53-44e3-8f5f-63d813b6b579style",
-      "type": "default"
-    },
-    {
-      "source": "8d54b9db-3662-43af-8369-9a277e063f3b",
-      "sourceHandle": "value",
-      "target": "fbb2f1a0-2e68-411d-a955-60c3b8a6f2d1",
-      "targetHandle": "style",
-      "id": "reactflow__edge-8d54b9db-3662-43af-8369-9a277e063f3bvalue-fbb2f1a0-2e68-411d-a955-60c3b8a6f2d1style",
-      "type": "default"
-    },
-    {
-      "source": "8d54b9db-3662-43af-8369-9a277e063f3b",
-      "sourceHandle": "value",
-      "target": "3193ad09-a7c2-4bf4-a3a9-1c61cc33a204",
-      "targetHandle": "style",
-      "id": "reactflow__edge-8d54b9db-3662-43af-8369-9a277e063f3bvalue-3193ad09-a7c2-4bf4-a3a9-1c61cc33a204style",
-      "type": "default"
-    },
-    {
-      "source": "3193ad09-a7c2-4bf4-a3a9-1c61cc33a204",
-      "sourceHandle": "conditioning",
-      "target": "84df8f00-ea7e-499f-ab86-d019ddea5393",
-      "targetHandle": "negative_conditioning",
-      "id": "reactflow__edge-3193ad09-a7c2-4bf4-a3a9-1c61cc33a204conditioning-84df8f00-ea7e-499f-ab86-d019ddea5393negative_conditioning",
-      "type": "default"
-    },
-    {
-      "source": "faf965a4-7530-427b-b1f3-4ba6505c2a08",
-      "sourceHandle": "conditioning",
-      "target": "84df8f00-ea7e-499f-ab86-d019ddea5393",
-      "targetHandle": "positive_conditioning",
-      "id": "reactflow__edge-faf965a4-7530-427b-b1f3-4ba6505c2a08conditioning-84df8f00-ea7e-499f-ab86-d019ddea5393positive_conditioning",
-      "type": "default"
-    },
-    {
-      "source": "55705012-79b9-4aac-9f26-c0b10309785b",
-      "sourceHandle": "noise",
-      "target": "84df8f00-ea7e-499f-ab86-d019ddea5393",
-      "targetHandle": "noise",
-      "id": "reactflow__edge-55705012-79b9-4aac-9f26-c0b10309785bnoise-84df8f00-ea7e-499f-ab86-d019ddea5393noise",
-      "type": "default"
-    },
-    {
+      "type": "default",
       "source": "30d3289c-773c-4152-a9d2-bd8a99c8fd22",
-      "sourceHandle": "unet",
+      "target": "3193ad09-a7c2-4bf4-a3a9-1c61cc33a204",
+      "sourceHandle": "clip2",
+      "targetHandle": "clip2"
+    },
+    {
+      "id": "reactflow__edge-62bdf243-d98f-4508-b6b5-c3af00ef49f0clip2-f0e06b70-9f53-44e3-8f5f-63d813b6b579clip2",
+      "type": "default",
+      "source": "62bdf243-d98f-4508-b6b5-c3af00ef49f0",
+      "target": "f0e06b70-9f53-44e3-8f5f-63d813b6b579",
+      "sourceHandle": "clip2",
+      "targetHandle": "clip2"
+    },
+    {
+      "id": "reactflow__edge-62bdf243-d98f-4508-b6b5-c3af00ef49f0clip2-fbb2f1a0-2e68-411d-a955-60c3b8a6f2d1clip2",
+      "type": "default",
+      "source": "62bdf243-d98f-4508-b6b5-c3af00ef49f0",
+      "target": "fbb2f1a0-2e68-411d-a955-60c3b8a6f2d1",
+      "sourceHandle": "clip2",
+      "targetHandle": "clip2"
+    },
+    {
+      "id": "reactflow__edge-5639e3bc-b769-4ae5-9262-72db703c5a7bvalue-3193ad09-a7c2-4bf4-a3a9-1c61cc33a204prompt",
+      "type": "default",
+      "source": "5639e3bc-b769-4ae5-9262-72db703c5a7b",
+      "target": "3193ad09-a7c2-4bf4-a3a9-1c61cc33a204",
+      "sourceHandle": "value",
+      "targetHandle": "prompt"
+    },
+    {
+      "id": "reactflow__edge-f1a6a160-4c36-4902-8eeb-8b1c23e81bc8value-faf965a4-7530-427b-b1f3-4ba6505c2a08style",
+      "type": "default",
+      "source": "f1a6a160-4c36-4902-8eeb-8b1c23e81bc8",
+      "target": "faf965a4-7530-427b-b1f3-4ba6505c2a08",
+      "sourceHandle": "value",
+      "targetHandle": "style"
+    },
+    {
+      "id": "reactflow__edge-b2b35add-929d-4538-aecb-02c661768b29value-faf965a4-7530-427b-b1f3-4ba6505c2a08prompt",
+      "type": "default",
+      "source": "b2b35add-929d-4538-aecb-02c661768b29",
+      "target": "faf965a4-7530-427b-b1f3-4ba6505c2a08",
+      "sourceHandle": "value",
+      "targetHandle": "prompt"
+    },
+    {
+      "id": "reactflow__edge-f1a6a160-4c36-4902-8eeb-8b1c23e81bc8value-f0e06b70-9f53-44e3-8f5f-63d813b6b579style",
+      "type": "default",
+      "source": "f1a6a160-4c36-4902-8eeb-8b1c23e81bc8",
+      "target": "f0e06b70-9f53-44e3-8f5f-63d813b6b579",
+      "sourceHandle": "value",
+      "targetHandle": "style"
+    },
+    {
+      "id": "reactflow__edge-8d54b9db-3662-43af-8369-9a277e063f3bvalue-fbb2f1a0-2e68-411d-a955-60c3b8a6f2d1style",
+      "type": "default",
+      "source": "8d54b9db-3662-43af-8369-9a277e063f3b",
+      "target": "fbb2f1a0-2e68-411d-a955-60c3b8a6f2d1",
+      "sourceHandle": "value",
+      "targetHandle": "style"
+    },
+    {
+      "id": "reactflow__edge-8d54b9db-3662-43af-8369-9a277e063f3bvalue-3193ad09-a7c2-4bf4-a3a9-1c61cc33a204style",
+      "type": "default",
+      "source": "8d54b9db-3662-43af-8369-9a277e063f3b",
+      "target": "3193ad09-a7c2-4bf4-a3a9-1c61cc33a204",
+      "sourceHandle": "value",
+      "targetHandle": "style"
+    },
+    {
+      "id": "reactflow__edge-3193ad09-a7c2-4bf4-a3a9-1c61cc33a204conditioning-84df8f00-ea7e-499f-ab86-d019ddea5393negative_conditioning",
+      "type": "default",
+      "source": "3193ad09-a7c2-4bf4-a3a9-1c61cc33a204",
       "target": "84df8f00-ea7e-499f-ab86-d019ddea5393",
-      "targetHandle": "unet",
+      "sourceHandle": "conditioning",
+      "targetHandle": "negative_conditioning"
+    },
+    {
+      "id": "reactflow__edge-faf965a4-7530-427b-b1f3-4ba6505c2a08conditioning-84df8f00-ea7e-499f-ab86-d019ddea5393positive_conditioning",
+      "type": "default",
+      "source": "faf965a4-7530-427b-b1f3-4ba6505c2a08",
+      "target": "84df8f00-ea7e-499f-ab86-d019ddea5393",
+      "sourceHandle": "conditioning",
+      "targetHandle": "positive_conditioning"
+    },
+    {
+      "id": "reactflow__edge-55705012-79b9-4aac-9f26-c0b10309785bnoise-84df8f00-ea7e-499f-ab86-d019ddea5393noise",
+      "type": "default",
+      "source": "55705012-79b9-4aac-9f26-c0b10309785b",
+      "target": "84df8f00-ea7e-499f-ab86-d019ddea5393",
+      "sourceHandle": "noise",
+      "targetHandle": "noise"
+    },
+    {
       "id": "reactflow__edge-30d3289c-773c-4152-a9d2-bd8a99c8fd22unet-84df8f00-ea7e-499f-ab86-d019ddea5393unet",
-      "type": "default"
-    },
-    {
-      "source": "06a30867-1e9d-461f-bd58-14a63cc997dd",
-      "sourceHandle": "scheduler",
+      "type": "default",
+      "source": "30d3289c-773c-4152-a9d2-bd8a99c8fd22",
       "target": "84df8f00-ea7e-499f-ab86-d019ddea5393",
-      "targetHandle": "scheduler",
-      "id": "reactflow__edge-06a30867-1e9d-461f-bd58-14a63cc997ddscheduler-84df8f00-ea7e-499f-ab86-d019ddea5393scheduler",
-      "type": "default"
-    },
-    {
-      "source": "84df8f00-ea7e-499f-ab86-d019ddea5393",
-      "sourceHandle": "latents",
-      "target": "3d40eda5-ff7b-4dff-8d2e-4f44742faa1b",
-      "targetHandle": "latents",
-      "id": "reactflow__edge-84df8f00-ea7e-499f-ab86-d019ddea5393latents-3d40eda5-ff7b-4dff-8d2e-4f44742faa1blatents",
-      "type": "default"
-    },
-    {
-      "source": "62bdf243-d98f-4508-b6b5-c3af00ef49f0",
       "sourceHandle": "unet",
-      "target": "3d40eda5-ff7b-4dff-8d2e-4f44742faa1b",
-      "targetHandle": "unet",
-      "id": "reactflow__edge-62bdf243-d98f-4508-b6b5-c3af00ef49f0unet-3d40eda5-ff7b-4dff-8d2e-4f44742faa1bunet",
-      "type": "default"
+      "targetHandle": "unet"
     },
     {
-      "source": "f0e06b70-9f53-44e3-8f5f-63d813b6b579",
-      "sourceHandle": "conditioning",
-      "target": "3d40eda5-ff7b-4dff-8d2e-4f44742faa1b",
-      "targetHandle": "positive_conditioning",
-      "id": "reactflow__edge-f0e06b70-9f53-44e3-8f5f-63d813b6b579conditioning-3d40eda5-ff7b-4dff-8d2e-4f44742faa1bpositive_conditioning",
-      "type": "default"
+      "id": "reactflow__edge-06a30867-1e9d-461f-bd58-14a63cc997ddscheduler-84df8f00-ea7e-499f-ab86-d019ddea5393scheduler",
+      "type": "default",
+      "source": "06a30867-1e9d-461f-bd58-14a63cc997dd",
+      "target": "84df8f00-ea7e-499f-ab86-d019ddea5393",
+      "sourceHandle": "scheduler",
+      "targetHandle": "scheduler"
     },
     {
-      "source": "fbb2f1a0-2e68-411d-a955-60c3b8a6f2d1",
-      "sourceHandle": "conditioning",
+      "id": "reactflow__edge-84df8f00-ea7e-499f-ab86-d019ddea5393latents-3d40eda5-ff7b-4dff-8d2e-4f44742faa1blatents",
+      "type": "default",
+      "source": "84df8f00-ea7e-499f-ab86-d019ddea5393",
       "target": "3d40eda5-ff7b-4dff-8d2e-4f44742faa1b",
-      "targetHandle": "negative_conditioning",
-      "id": "reactflow__edge-fbb2f1a0-2e68-411d-a955-60c3b8a6f2d1conditioning-3d40eda5-ff7b-4dff-8d2e-4f44742faa1bnegative_conditioning",
-      "type": "default"
-    },
-    {
-      "source": "3d40eda5-ff7b-4dff-8d2e-4f44742faa1b",
       "sourceHandle": "latents",
-      "target": "17eb4b88-bdd8-4984-affa-26586b146866",
-      "targetHandle": "latents",
-      "id": "reactflow__edge-3d40eda5-ff7b-4dff-8d2e-4f44742faa1blatents-17eb4b88-bdd8-4984-affa-26586b146866latents",
-      "type": "default"
+      "targetHandle": "latents"
     },
     {
+      "id": "reactflow__edge-62bdf243-d98f-4508-b6b5-c3af00ef49f0unet-3d40eda5-ff7b-4dff-8d2e-4f44742faa1bunet",
+      "type": "default",
       "source": "62bdf243-d98f-4508-b6b5-c3af00ef49f0",
-      "sourceHandle": "vae",
+      "target": "3d40eda5-ff7b-4dff-8d2e-4f44742faa1b",
+      "sourceHandle": "unet",
+      "targetHandle": "unet"
+    },
+    {
+      "id": "reactflow__edge-f0e06b70-9f53-44e3-8f5f-63d813b6b579conditioning-3d40eda5-ff7b-4dff-8d2e-4f44742faa1bpositive_conditioning",
+      "type": "default",
+      "source": "f0e06b70-9f53-44e3-8f5f-63d813b6b579",
+      "target": "3d40eda5-ff7b-4dff-8d2e-4f44742faa1b",
+      "sourceHandle": "conditioning",
+      "targetHandle": "positive_conditioning"
+    },
+    {
+      "id": "reactflow__edge-fbb2f1a0-2e68-411d-a955-60c3b8a6f2d1conditioning-3d40eda5-ff7b-4dff-8d2e-4f44742faa1bnegative_conditioning",
+      "type": "default",
+      "source": "fbb2f1a0-2e68-411d-a955-60c3b8a6f2d1",
+      "target": "3d40eda5-ff7b-4dff-8d2e-4f44742faa1b",
+      "sourceHandle": "conditioning",
+      "targetHandle": "negative_conditioning"
+    },
+    {
+      "id": "reactflow__edge-3d40eda5-ff7b-4dff-8d2e-4f44742faa1blatents-17eb4b88-bdd8-4984-affa-26586b146866latents",
+      "type": "default",
+      "source": "3d40eda5-ff7b-4dff-8d2e-4f44742faa1b",
       "target": "17eb4b88-bdd8-4984-affa-26586b146866",
-      "targetHandle": "vae",
+      "sourceHandle": "latents",
+      "targetHandle": "latents"
+    },
+    {
       "id": "reactflow__edge-62bdf243-d98f-4508-b6b5-c3af00ef49f0vae-17eb4b88-bdd8-4984-affa-26586b146866vae",
-      "type": "default"
+      "type": "default",
+      "source": "62bdf243-d98f-4508-b6b5-c3af00ef49f0",
+      "target": "17eb4b88-bdd8-4984-affa-26586b146866",
+      "sourceHandle": "vae",
+      "targetHandle": "vae"
     }
   ]
 }
\ No newline at end of file
diff --git a/mkdocs.yml b/mkdocs.yml
index fc41f68087..24206bfa6a 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -23,6 +23,7 @@ theme:
   icon:
     repo: fontawesome/brands/github
     edit: material/file-document-edit-outline
+  favicon: img/favicon.ico
   palette:
     # - media: '(prefers-color-scheme: light)'
     #   scheme: default

From 418cdbabb7276e922cf7e3b25dbed42ff308649e Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Fri, 26 Jan 2024 11:23:54 -0500
Subject: [PATCH 049/133] add option for workflowCategories

---
 .../web/src/app/components/InvokeAIUI.tsx     | 14 ++++
 .../store/nanostores/workflowCategories.ts    |  4 +
 .../components/WorkflowLibraryList.tsx        | 79 +++++++++++--------
 3 files changed, 63 insertions(+), 34 deletions(-)
 create mode 100644 invokeai/frontend/web/src/app/store/nanostores/workflowCategories.ts

diff --git a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
index 68cce1fd8f..0ae8f04d9d 100644
--- a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
+++ b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
@@ -23,6 +23,8 @@ import React, { lazy, memo, useEffect, useMemo } from 'react';
 import { Provider } from 'react-redux';
 import { addMiddleware, resetMiddlewares } from 'redux-dynamic-middlewares';
 import type { ManagerOptions, SocketOptions } from 'socket.io-client';
+import { WorkflowCategory } from '../../features/nodes/types/workflow';
+import { $workflowCategories } from '../store/nanostores/workflowCategories';
 
 const App = lazy(() => import('./App'));
 const ThemeLocaleProvider = lazy(() => import('./ThemeLocaleProvider'));
@@ -45,6 +47,7 @@ interface Props extends PropsWithChildren {
   socketOptions?: Partial<ManagerOptions & SocketOptions>;
   isDebugging?: boolean;
   logo?: ReactNode;
+  workflowCategories?: WorkflowCategory[];
 }
 
 const InvokeAIUI = ({
@@ -62,6 +65,7 @@ const InvokeAIUI = ({
   socketOptions,
   isDebugging = false,
   logo,
+  workflowCategories,
 }: Props) => {
   useEffect(() => {
     // configure API client token
@@ -156,6 +160,16 @@ const InvokeAIUI = ({
     };
   }, [logo]);
 
+  useEffect(() => {
+    if (workflowCategories) {
+      $workflowCategories.set(workflowCategories);
+    }
+
+    return () => {
+      $workflowCategories.set([]);
+    };
+  }, [workflowCategories]);
+
   useEffect(() => {
     if (socketOptions) {
       $socketOptions.set(socketOptions);
diff --git a/invokeai/frontend/web/src/app/store/nanostores/workflowCategories.ts b/invokeai/frontend/web/src/app/store/nanostores/workflowCategories.ts
new file mode 100644
index 0000000000..6ffc4cf77f
--- /dev/null
+++ b/invokeai/frontend/web/src/app/store/nanostores/workflowCategories.ts
@@ -0,0 +1,4 @@
+import { atom } from 'nanostores';
+import { WorkflowCategory } from '../../../features/nodes/types/workflow';
+
+export const $workflowCategories = atom<WorkflowCategory[]>(["user", "default"]);
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx
index 9e8adb6503..a3f4b154c2 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx
@@ -34,6 +34,7 @@ import type {
 } from 'services/api/types';
 import { useDebounce } from 'use-debounce';
 import { z } from 'zod';
+import { $workflowCategories } from '../../../app/store/nanostores/workflowCategories';
 
 const PER_PAGE = 10;
 
@@ -58,10 +59,13 @@ const DIRECTION_OPTIONS: ComboboxOption[] = [
 
 const WorkflowLibraryList = () => {
   const { t } = useTranslation();
-  const [category, setCategory] = useState<WorkflowCategory>('user');
+  const workflowCategories = useStore($workflowCategories);
+  const [selectedCategory, setSelectedCategory] =
+    useState<WorkflowCategory>('user');
   const [page, setPage] = useState(0);
   const [query, setQuery] = useState('');
   const projectId = useStore($projectId);
+
   const orderByOptions = useMemo(() => {
     return projectId
       ? ORDER_BY_OPTIONS.filter((option) => option.value !== 'opened_at')
@@ -75,13 +79,13 @@ const WorkflowLibraryList = () => {
   const [debouncedQuery] = useDebounce(query, 500);
 
   const queryArg = useMemo<Parameters<typeof useListWorkflowsQuery>[0]>(() => {
-    if (category !== 'default') {
+    if (selectedCategory !== 'default') {
       return {
         page,
         per_page: PER_PAGE,
         order_by,
         direction,
-        category,
+        category: selectedCategory,
         query: debouncedQuery,
       };
     }
@@ -90,10 +94,10 @@ const WorkflowLibraryList = () => {
       per_page: PER_PAGE,
       order_by: 'name' as const,
       direction: 'ASC' as const,
-      category,
+      category: selectedCategory,
       query: debouncedQuery,
     };
-  }, [category, debouncedQuery, direction, order_by, page]);
+  }, [selectedCategory, debouncedQuery, direction, order_by, page]);
 
   const { data, isLoading, isError, isFetching } =
     useListWorkflowsQuery(queryArg);
@@ -154,43 +158,42 @@ const WorkflowLibraryList = () => {
   );
 
   const handleSetCategory = useCallback((category: WorkflowCategory) => {
-    setCategory(category);
+    setSelectedCategory(category);
     setPage(0);
   }, []);
 
   return (
     <>
-      <Flex gap={4} alignItems="center" h={10} flexShrink={0} flexGrow={0}>
-        <ButtonGroup>
-          <Button
-            variant={category === 'user' ? undefined : 'ghost'}
-            onClick={handleSetCategory.bind(null, 'user')}
-            isChecked={category === 'user'}
-          >
-            {t('workflows.userWorkflows')}
-          </Button>
-          {projectId ? (
+      <Flex
+        gap={4}
+        alignItems="center"
+        h={16}
+        flexShrink={0}
+        flexGrow={0}
+        justifyContent={'space-between'}
+      >
+        <ButtonGroup alignSelf="flex-end">
+          {workflowCategories.map((category) => (
             <Button
-              variant={category === 'project' ? undefined : 'ghost'}
-              onClick={handleSetCategory.bind(null, 'project')}
-              isChecked={category === 'project'}
+              variant={selectedCategory === category ? undefined : 'ghost'}
+              onClick={handleSetCategory.bind(null, category)}
+              isChecked={selectedCategory === category}
             >
-              {t('workflows.projectWorkflows')}
+              {t(`workflows.${category}Workflows`)}
             </Button>
-          ) : (
-            <Button
-              variant={category === 'default' ? undefined : 'ghost'}
-              onClick={handleSetCategory.bind(null, 'default')}
-              isChecked={category === 'default'}
-            >
-              {t('workflows.defaultWorkflows')}
-            </Button>
-          )}
+          ))}
         </ButtonGroup>
-        <Spacer />
-        {category !== 'default' && (
+        {selectedCategory !== 'default' && (
           <>
-            <FormControl isDisabled={isFetching} w={64} minW={56}>
+            <FormControl
+              isDisabled={isFetching}
+              sx={{
+                flexDir: 'column',
+                alignItems: 'flex-start',
+                gap: 1,
+                maxW: 56,
+              }}
+            >
               <FormLabel>{t('common.orderBy')}</FormLabel>
               <Combobox
                 value={valueOrderBy}
@@ -198,7 +201,15 @@ const WorkflowLibraryList = () => {
                 onChange={onChangeOrderBy}
               />
             </FormControl>
-            <FormControl isDisabled={isFetching} w={64} minW={56}>
+            <FormControl
+              isDisabled={isFetching}
+              sx={{
+                flexDir: 'column',
+                alignItems: 'flex-start',
+                gap: 1,
+                maxW: 56,
+              }}
+            >
               <FormLabel>{t('common.direction')}</FormLabel>
               <Combobox
                 value={valueDirection}
@@ -208,7 +219,7 @@ const WorkflowLibraryList = () => {
             </FormControl>
           </>
         )}
-        <InputGroup w="20rem">
+        <InputGroup w="20rem" alignSelf="flex-end">
           <Input
             placeholder={t('workflows.searchWorkflows')}
             value={query}

From b28fcc6be546d70800f59ac3f9319c8e35140ae0 Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Fri, 26 Jan 2024 16:46:26 -0500
Subject: [PATCH 050/133] lint

---
 invokeai/frontend/web/src/app/components/InvokeAIUI.tsx    | 4 ++--
 .../web/src/app/store/nanostores/workflowCategories.ts     | 7 +++++--
 .../workflowLibrary/components/WorkflowLibraryList.tsx     | 6 +++---
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
index 0ae8f04d9d..12611943bc 100644
--- a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
+++ b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
@@ -14,17 +14,17 @@ import { $openAPISchemaUrl } from 'app/store/nanostores/openAPISchemaUrl';
 import { $projectId } from 'app/store/nanostores/projectId';
 import { $queueId, DEFAULT_QUEUE_ID } from 'app/store/nanostores/queueId';
 import { $store } from 'app/store/nanostores/store';
+import { $workflowCategories } from 'app/store/nanostores/workflowCategories';
 import { createStore } from 'app/store/store';
 import type { PartialAppConfig } from 'app/types/invokeai';
 import Loading from 'common/components/Loading/Loading';
 import AppDndContext from 'features/dnd/components/AppDndContext';
+import type { WorkflowCategory } from 'features/nodes/types/workflow';
 import type { PropsWithChildren, ReactNode } from 'react';
 import React, { lazy, memo, useEffect, useMemo } from 'react';
 import { Provider } from 'react-redux';
 import { addMiddleware, resetMiddlewares } from 'redux-dynamic-middlewares';
 import type { ManagerOptions, SocketOptions } from 'socket.io-client';
-import { WorkflowCategory } from '../../features/nodes/types/workflow';
-import { $workflowCategories } from '../store/nanostores/workflowCategories';
 
 const App = lazy(() => import('./App'));
 const ThemeLocaleProvider = lazy(() => import('./ThemeLocaleProvider'));
diff --git a/invokeai/frontend/web/src/app/store/nanostores/workflowCategories.ts b/invokeai/frontend/web/src/app/store/nanostores/workflowCategories.ts
index 6ffc4cf77f..a643219c66 100644
--- a/invokeai/frontend/web/src/app/store/nanostores/workflowCategories.ts
+++ b/invokeai/frontend/web/src/app/store/nanostores/workflowCategories.ts
@@ -1,4 +1,7 @@
+import type { WorkflowCategory } from 'features/nodes/types/workflow';
 import { atom } from 'nanostores';
-import { WorkflowCategory } from '../../../features/nodes/types/workflow';
 
-export const $workflowCategories = atom<WorkflowCategory[]>(["user", "default"]);
+export const $workflowCategories = atom<WorkflowCategory[]>([
+  'user',
+  'default',
+]);
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx
index a3f4b154c2..0aeab01680 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx
@@ -11,10 +11,10 @@ import {
   Input,
   InputGroup,
   InputRightElement,
-  Spacer,
 } from '@invoke-ai/ui';
 import { useStore } from '@nanostores/react';
 import { $projectId } from 'app/store/nanostores/projectId';
+import { $workflowCategories } from 'app/store/nanostores/workflowCategories';
 import {
   IAINoContentFallback,
   IAINoContentFallbackWithSpinner,
@@ -34,7 +34,6 @@ import type {
 } from 'services/api/types';
 import { useDebounce } from 'use-debounce';
 import { z } from 'zod';
-import { $workflowCategories } from '../../../app/store/nanostores/workflowCategories';
 
 const PER_PAGE = 10;
 
@@ -170,11 +169,12 @@ const WorkflowLibraryList = () => {
         h={16}
         flexShrink={0}
         flexGrow={0}
-        justifyContent={'space-between'}
+        justifyContent="space-between"
       >
         <ButtonGroup alignSelf="flex-end">
           {workflowCategories.map((category) => (
             <Button
+              key={category}
               variant={selectedCategory === category ? undefined : 'ghost'}
               onClick={handleSetCategory.bind(null, category)}
               isChecked={selectedCategory === category}

From fc29a5d439770450ff9879b17700732062c4d276 Mon Sep 17 00:00:00 2001
From: Lincoln Stein <lstein@gmail.com>
Date: Sat, 27 Jan 2024 16:59:56 -0500
Subject: [PATCH 051/133] update contributors list to bring into sync with
 discord roles

---
 docs/other/CONTRIBUTORS.md | 105 +++++++++++++++++++++++++++++++++----
 1 file changed, 95 insertions(+), 10 deletions(-)

diff --git a/docs/other/CONTRIBUTORS.md b/docs/other/CONTRIBUTORS.md
index 704f218027..a37ebf5642 100644
--- a/docs/other/CONTRIBUTORS.md
+++ b/docs/other/CONTRIBUTORS.md
@@ -13,46 +13,70 @@ We thank them for all of their time and hard work.
 
 - [Lincoln D. Stein](mailto:lincoln.stein@gmail.com)
 
-## **Current core team**
+## **Current Core Team**
 
 * @lstein (Lincoln Stein) - Co-maintainer
 * @blessedcoolant - Co-maintainer
 * @hipsterusername (Kent Keirsey) - Co-maintainer, CEO, Positive Vibes
 * @psychedelicious (Spencer Mabrito) - Web Team Leader
-* @Kyle0654 (Kyle Schouviller) - Node Architect and General Backend Wizard
-* @damian0815 - Attention Systems and Compel Maintainer
-* @ebr (Eugene Brodsky) - Cloud/DevOps/Sofware engineer; your friendly neighbourhood cluster-autoscaler
-* @genomancer (Gregg Helt) - Controlnet support
-* @StAlKeR7779 (Sergey Borisov) - Torch stack, ONNX, model management, optimization
+* @chainchompa (Jennifer Player) - Web Development & Chain-Chomping
+* @josh is toast (Josh Corbett) - Web Development
 * @cheerio (Mary Rogers) - Lead Engineer & Web App Development
+* @ebr (Eugene Brodsky) - Cloud/DevOps/Sofware engineer; your friendly neighbourhood cluster-autoscaler
+* @sunija - Standalone version
+* @genomancer (Gregg Helt) - Controlnet support
 * @brandon (Brandon Rising) - Platform, Infrastructure, Backend Systems
 * @ryanjdick (Ryan Dick) - Machine Learning & Training
-* @millu (Millun Atluri) - Community Manager, Documentation, Node-wrangler
-* @chainchompa (Jennifer Player) - Web Development & Chain-Chomping
+* @JPPhoto - Core image generation nodes
+* @dunkeroni - Image generation backend
+* @SkunkWorxDark - Image generation backend
 * @keturn (Kevin Turner) - Diffusers
+* @millu (Millun Atluri) - Community Manager, Documentation, Node-wrangler
+* @imic - Community Wizard
+* @glimmerleaf - Community Wizard
 * @gogurt enjoyer - Discord moderator and end user support
 * @whosawhatsis - Discord moderator and end user support
 * @dwinrger - Discord moderator and end user support
 * @526christian - Discord moderator and end user support
+* @harvester62 -  Discord moderator and end user support
+
+
+## **Honored Team Alumni**
+
+* @StAlKeR7779 (Sergey Borisov) - Torch stack, ONNX, model management, optimization
+* @damian0815 - Attention Systems and Compel Maintainer
+* @netsvetaev (Artur) - Localization support
+* @Kyle0654 (Kyle Schouviller) - Node Architect and General Backend Wizard
+* @tildebyte - Installation and configuration
+* @mauwii (Matthias Wilde) - Installation, release, continuous integration
+
 
 ## **Full List of Contributors by Commit Name**
 
+- 이승석
 - AbdBarho
 - ablattmann
 - AdamOStark
 - Adam Rice
 - Airton Silva
+- Aldo Hoeben
 - Alexander Eichhorn
 - Alexandre D. Roberge
+- Alexandre Macabies
+- Alfie John
 - Andreas Rozek
 - Andre LaBranche
 - Andy Bearman
 - Andy Luhrs
 - Andy Pilate
+- Anonymous
+- Anthony Monthe
 - Any-Winter-4079
 - apolinario
+- Ar7ific1al
 - ArDiouscuros
 - Armando C. Santisbon
+- Arnold Cordewiner
 - Arthur Holstvoogd
 - artmen1516
 - Artur
@@ -64,13 +88,16 @@ We thank them for all of their time and hard work.
 - blhook
 - BlueAmulet
 - Bouncyknighter
+- Brandon
 - Brandon Rising
 - Brent Ozar
 - Brian Racer
 - bsilvereagle
 - c67e708d
+- camenduru
 - CapableWeb
 - Carson Katri
+- chainchompa
 - Chloe
 - Chris Dawson
 - Chris Hayes
@@ -86,30 +113,45 @@ We thank them for all of their time and hard work.
 - cpacker
 - Cragin Godley
 - creachec
+- CrypticWit
+- d8ahazard
+- damian
+- damian0815
+- Damian at mba
 - Damian Stewart
 - Daniel Manzke
 - Danny Beer
 - Dan Sully
+- Darren Ringer
 - David Burnett
 - David Ford
 - David Regla
+- David Sisco
 - David Wager
 - Daya Adianto
 - db3000
+- DekitaRPG
 - Denis Olshin
 - Dennis
+- dependabot[bot]
+- Dmitry Parnas
+- Dobrynia100
 - Dominic Letz
 - DrGunnarMallon
+- Drun555
+- dunkeroni
 - Edward Johan
 - elliotsayes
 - Elrik
 - ElrikUnderlake
 - Eric Khun
 - Eric Wolf
+- Eugene
 - Eugene Brodsky
 - ExperimentalCyborg
 - Fabian Bahl
 - Fabio 'MrWHO' Torchetti
+- Fattire
 - fattire
 - Felipe Nogueira
 - Félix Sanz
@@ -118,8 +160,12 @@ We thank them for all of their time and hard work.
 - gabrielrotbart
 - gallegonovato
 - Gérald LONLAS
+- Gille
 - GitHub Actions Bot
+- glibesyck
 - gogurtenjoyer
+- Gohsuke Shimada
+- greatwolf
 - greentext2
 - Gregg Helt
 - H4rk
@@ -131,6 +177,7 @@ We thank them for all of their time and hard work.
 - Hosted Weblate
 - Iman Karim
 - ismail ihsan bülbül
+- ItzAttila
 - Ivan Efimov
 - jakehl
 - Jakub Kolčář
@@ -141,6 +188,7 @@ We thank them for all of their time and hard work.
 - Jason Toffaletti
 - Jaulustus
 - Jeff Mahoney
+- Jennifer Player
 - jeremy
 - Jeremy Clark
 - JigenD
@@ -148,19 +196,26 @@ We thank them for all of their time and hard work.
 - Johan Roxendal
 - Johnathon Selstad
 - Jonathan
+- Jordan Hewitt
 - Joseph Dries III
+- Josh Corbett
 - JPPhoto
 - jspraul
+- junzi
 - Justin Wong
 - Juuso V
 - Kaspar Emanuel
 - Katsuyuki-Karasawa
+- Keerigan45
 - Kent Keirsey
+- Kevin Brack
 - Kevin Coakley
 - Kevin Gibbons
 - Kevin Schaul
 - Kevin Turner
+- Kieran Klaassen
 - krummrey
+- Kyle
 - Kyle Lacy
 - Kyle Schouviller
 - Lawrence Norton
@@ -171,10 +226,15 @@ We thank them for all of their time and hard work.
 - Lynne Whitehorn
 - majick
 - Marco Labarile
+- Marta Nahorniuk
 - Martin Kristiansen
+- Mary Hipp
+- maryhipp
 - Mary Hipp Rogers
+- mastercaster
 - mastercaster9000
 - Matthias Wild
+- mauwii
 - michaelk71
 - mickr777
 - Mihai
@@ -182,11 +242,15 @@ We thank them for all of their time and hard work.
 - Mikhail Tishin
 - Millun Atluri
 - Minjune Song
+- Mitchell Allain
 - mitien
 - mofuzz
 - Muhammad Usama
 - Name
 - _nderscore
+- Neil Wang
+- nekowaiz
+- nemuruibai
 - Netzer R
 - Nicholas Koh
 - Nicholas Körfer
@@ -197,9 +261,11 @@ We thank them for all of their time and hard work.
 - ofirkris
 - Olivier Louvignes
 - owenvincent
+- pand4z31
 - Patrick Esser
 - Patrick Tien
 - Patrick von Platen
+- Paul Curry
 - Paul Sajna
 - pejotr
 - Peter Baylies
@@ -207,6 +273,7 @@ We thank them for all of their time and hard work.
 - plucked
 - prixt
 - psychedelicious
+- psychedelicious@windows
 - Rainer Bernhardt
 - Riccardo Giovanetti
 - Rich Jones
@@ -215,17 +282,22 @@ We thank them for all of their time and hard work.
 - Robert Bolender
 - Robin Rombach
 - Rohan Barar
-- rohinish404
+- Rohinish
 - rpagliuca
 - rromb
 - Rupesh Sreeraman
+- Ryan
 - Ryan Cao
+- Ryan Dick
 - Saifeddine
 - Saifeddine ALOUI
+- Sam
 - SammCheese
+- Sam McLeod
 - Sammy
 - sammyf
 - Samuel Husso
+- Saurav Maheshkar
 - Scott Lahteine
 - Sean McLellan
 - Sebastian Aigner
@@ -233,16 +305,21 @@ We thank them for all of their time and hard work.
 - Sergey Krashevich
 - Shapor Naghibzadeh
 - Shawn Zhong
+- Simona Liliac
 - Simon Vans-Colina
 - skunkworxdark
 - slashtechno
+- SoheilRezaei
+- Song, Pengcheng
 - spezialspezial
 - ssantos
 - StAlKeR7779
+- Stefan Tobler
 - Stephan Koglin-Fischer
 - SteveCaruso
 - Steve Martinelli
 - Steven Frank
+- Surisen
 - System X - Files
 - Taylor Kems
 - techicode
@@ -261,26 +338,34 @@ We thank them for all of their time and hard work.
 - tyler
 - unknown
 - user1
+- vedant-3010
 - Vedant Madane
 - veprogames
 - wa.code
 - wfng92
+- whjms
 - whosawhatsis
 - Will
 - William Becher
 - William Chong
+- Wilson E. Alvarez
+- woweenie
+- Wubbbi
 - xra
 - Yeung Yiu Hung
 - ymgenesis
 - Yorzaren
 - Yosuke Shinya
 - yun saki
+- ZachNagengast
 - Zadagu
 - zeptofine
+- Zerdoumi
+- Васянатор
 - 冯不游
 - 唐澤 克幸
 
-## **Original CompVis Authors**
+## **Original CompVis (Stable Diffusion) Authors**
 
 - [Robin Rombach](https://github.com/rromb)
 - [Patrick von Platen](https://github.com/patrickvonplaten)

From c955ea9de08c0ef807f025e66e2f0f5cddfc0185 Mon Sep 17 00:00:00 2001
From: Millun Atluri <Millu@users.noreply.github.com>
Date: Sat, 27 Jan 2024 17:04:32 -0500
Subject: [PATCH 052/133] Update CONTRIBUTORS.md

---
 docs/other/CONTRIBUTORS.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/docs/other/CONTRIBUTORS.md b/docs/other/CONTRIBUTORS.md
index a37ebf5642..448eddbcf0 100644
--- a/docs/other/CONTRIBUTORS.md
+++ b/docs/other/CONTRIBUTORS.md
@@ -31,9 +31,8 @@ We thank them for all of their time and hard work.
 * @dunkeroni - Image generation backend
 * @SkunkWorxDark - Image generation backend
 * @keturn (Kevin Turner) - Diffusers
-* @millu (Millun Atluri) - Community Manager, Documentation, Node-wrangler
-* @imic - Community Wizard
-* @glimmerleaf - Community Wizard
+* @millu (Millun Atluri) - Community Wizard, Documentation, Node-wrangler, 
+* @glimmerleaf (Devon Hopkins) - Community Wizard
 * @gogurt enjoyer - Discord moderator and end user support
 * @whosawhatsis - Discord moderator and end user support
 * @dwinrger - Discord moderator and end user support

From d0391cb430837d934098e1ff5025f6487bce5e3a Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Fri, 26 Jan 2024 15:02:48 -0500
Subject: [PATCH 053/133] chore(ui): bump @invoke-ai/ui-library, add
 @invoke-ai/eslint-config-react & @invoke-ai/prettier-config-react

---
 invokeai/frontend/web/package.json            |   8 +-
 invokeai/frontend/web/pnpm-lock.yaml          | 109 ++++++++++++++++--
 .../frontend/web/src/app/components/App.tsx   |   2 +-
 .../components/AppErrorBoundaryFallback.tsx   |   2 +-
 .../app/components/ThemeLocaleProvider.tsx    |   2 +-
 .../web/src/app/components/Toaster.ts         |   2 +-
 .../listeners/batchEnqueued.ts                |   2 +-
 .../listeners/imageUploaded.ts                |   2 +-
 .../src/app/store/nanostores/customStarUI.ts  |   2 +-
 .../src/common/components/IAIColorPicker.tsx  |   4 +-
 .../web/src/common/components/IAIDndImage.tsx |   4 +-
 .../src/common/components/IAIDndImageIcon.tsx |   4 +-
 .../src/common/components/IAIDraggable.tsx    |   4 +-
 .../src/common/components/IAIDropOverlay.tsx  |   2 +-
 .../src/common/components/IAIDroppable.tsx    |   2 +-
 .../src/common/components/IAIFillSkeleton.tsx |   4 +-
 .../common/components/IAIImageFallback.tsx    |   4 +-
 .../components/ImageMetadataOverlay.tsx       |   2 +-
 .../common/components/ImageUploadOverlay.tsx  |   2 +-
 .../InformationalPopover.tsx                  |   2 +-
 .../InformationalPopover/constants.ts         |   2 +-
 .../src/common/components/Loading/Loading.tsx |   2 +-
 .../components/NodeSelectionOverlay.tsx       |   2 +-
 .../OverlayScrollbars/ScrollableContent.tsx   |   4 +-
 .../common/components/SelectionOverlay.tsx    |   2 +-
 .../src/common/hooks/useChakraThemeTokens.ts  |   2 +-
 .../common/hooks/useGroupedModelCombobox.ts   |   2 +-
 .../web/src/common/hooks/useModelCombobox.ts  |   2 +-
 .../ClearCanvasHistoryButtonModal.tsx         |   2 +-
 .../features/canvas/components/IAICanvas.tsx  |   2 +-
 .../canvas/components/IAICanvasGrid.tsx       |   2 +-
 .../IAICanvasImageErrorFallback.tsx           |   2 +-
 .../IAICanvasStagingAreaToolbar.tsx           |   2 +-
 .../canvas/components/IAICanvasStatusText.tsx |   2 +-
 .../IAICanvasStatusTextCursorPos.tsx          |   2 +-
 .../IAICanvasToolbar/IAICanvasBoundingBox.tsx |   2 +-
 .../IAICanvasToolbar/IAICanvasMaskOptions.tsx |   4 +-
 .../IAICanvasToolbar/IAICanvasRedoButton.tsx  |   2 +-
 .../IAICanvasSettingsButtonPopover.tsx        |   4 +-
 .../IAICanvasToolChooserOptions.tsx           |   2 +-
 .../IAICanvasToolbar/IAICanvasToolbar.tsx     |   4 +-
 .../IAICanvasToolbar/IAICanvasUndoButton.tsx  |   2 +-
 .../components/ChangeBoardModal.tsx           |   4 +-
 .../components/ControlAdapterConfig.tsx       |   2 +-
 .../components/ControlAdapterImagePreview.tsx |   4 +-
 .../ControlAdapterShouldAutoConfig.tsx        |   2 +-
 .../imports/ControlNetCanvasImageImports.tsx  |   2 +-
 .../ParamControlAdapterBeginEnd.tsx           |   2 +-
 .../ParamControlAdapterControlMode.tsx        |   4 +-
 .../parameters/ParamControlAdapterModel.tsx   |   2 +-
 .../ParamControlAdapterProcessorSelect.tsx    |   4 +-
 .../ParamControlAdapterResizeMode.tsx         |   4 +-
 .../parameters/ParamControlAdapterWeight.tsx  |   2 +-
 .../components/processors/CannyProcessor.tsx  |   2 +-
 .../processors/ColorMapProcessor.tsx          |   2 +-
 .../processors/ContentShuffleProcessor.tsx    |   2 +-
 .../processors/DepthAnyThingProcessor.tsx     |   4 +-
 .../components/processors/HedProcessor.tsx    |   2 +-
 .../processors/LineartAnimeProcessor.tsx      |   2 +-
 .../processors/LineartProcessor.tsx           |   2 +-
 .../processors/MediapipeFaceProcessor.tsx     |   2 +-
 .../processors/MidasDepthProcessor.tsx        |   2 +-
 .../processors/MlsdImageProcessor.tsx         |   2 +-
 .../processors/NormalBaeProcessor.tsx         |   2 +-
 .../processors/OpenposeProcessor.tsx          |   2 +-
 .../components/processors/PidiProcessor.tsx   |   2 +-
 .../processors/common/ProcessorWrapper.tsx    |   2 +-
 .../components/DeleteImageButton.tsx          |   4 +-
 .../components/DeleteImageModal.tsx           |   2 +-
 .../components/ImageUsageMessage.tsx          |   2 +-
 .../features/dnd/components/DragPreview.tsx   |   4 +-
 .../components/DynamicPromptsPreviewModal.tsx |   2 +-
 .../ParamDynamicPromptsCombinatorial.tsx      |   2 +-
 .../ParamDynamicPromptsMaxPrompts.tsx         |   2 +-
 .../components/ParamDynamicPromptsPreview.tsx |   4 +-
 .../ParamDynamicPromptsSeedBehaviour.tsx      |   4 +-
 .../ShowDynamicPromptsPreviewButton.tsx       |   4 +-
 .../features/embedding/AddEmbeddingButton.tsx |   2 +-
 .../features/embedding/EmbeddingPopover.tsx   |   2 +-
 .../features/embedding/EmbeddingSelect.tsx    |   4 +-
 .../web/src/features/embedding/usePrompt.ts   |   2 +-
 .../gallery/components/Boards/AutoAddIcon.tsx |   2 +-
 .../components/Boards/BoardAutoAddSelect.tsx  |   4 +-
 .../components/Boards/BoardContextMenu.tsx    |   4 +-
 .../Boards/BoardsList/AddBoardButton.tsx      |   2 +-
 .../Boards/BoardsList/BoardsList.tsx          |   2 +-
 .../Boards/BoardsList/BoardsSearch.tsx        |   2 +-
 .../Boards/BoardsList/GalleryBoard.tsx        |   4 +-
 .../Boards/BoardsList/NoBoardBoard.tsx        |   2 +-
 .../components/Boards/DeleteBoardModal.tsx    |   2 +-
 .../Boards/GalleryBoardContextMenuItems.tsx   |   2 +-
 .../CurrentImage/CurrentImageButtons.tsx      |   2 +-
 .../CurrentImage/CurrentImageDisplay.tsx      |   2 +-
 .../CurrentImage/CurrentImagePreview.tsx      |   2 +-
 .../components/CurrentImage/ProgressImage.tsx |   4 +-
 .../gallery/components/GalleryBoardName.tsx   |   2 +-
 .../components/GallerySettingsPopover.tsx     |   4 +-
 .../ImageContextMenu/ImageContextMenu.tsx     |   4 +-
 .../MultipleSelectionMenuItems.tsx            |   2 +-
 .../SingleSelectionMenuItems.tsx              |   2 +-
 .../components/ImageGalleryContent.tsx        |   2 +-
 .../components/ImageGrid/GalleryImage.tsx     |   4 +-
 .../components/ImageGrid/GalleryImageGrid.tsx |   2 +-
 .../ImageGrid/ImageGridItemContainer.tsx      |   4 +-
 .../ImageGrid/ImageGridListContainer.tsx      |   4 +-
 .../ImageMetadataViewer/DataViewer.tsx        |   2 +-
 .../ImageMetadataViewer/ImageMetadataItem.tsx |   2 +-
 .../ImageMetadataViewer.tsx                   |   2 +-
 .../components/NextPrevImageButtons.tsx       |   4 +-
 .../features/hrf/components/HrfSettings.tsx   |   2 +-
 .../hrf/components/ParamHrfMethod.tsx         |   4 +-
 .../hrf/components/ParamHrfStrength.tsx       |   2 +-
 .../hrf/components/ParamHrfToggle.tsx         |   2 +-
 .../src/features/lora/components/LoRACard.tsx |   2 +-
 .../src/features/lora/components/LoRAList.tsx |   2 +-
 .../features/lora/components/LoRASelect.tsx   |   4 +-
 .../SyncModels/SyncModelsButton.tsx           |   4 +-
 .../SyncModels/SyncModelsIconButton.tsx       |   4 +-
 .../subpanels/AddModelsPanel/AddModels.tsx    |   2 +-
 .../AddModelsPanel/AdvancedAddCheckpoint.tsx  |   2 +-
 .../AddModelsPanel/AdvancedAddDiffusers.tsx   |   2 +-
 .../AddModelsPanel/AdvancedAddModels.tsx      |   4 +-
 .../AddModelsPanel/FoundModelsList.tsx        |   2 +-
 .../AddModelsPanel/ScanAdvancedAddModels.tsx  |   4 +-
 .../subpanels/AddModelsPanel/ScanModels.tsx   |   2 +-
 .../AddModelsPanel/SearchFolderForm.tsx       |   2 +-
 .../AddModelsPanel/SimpleAddModels.tsx        |   4 +-
 .../subpanels/ImportModelsPanel.tsx           |   2 +-
 .../subpanels/MergeModelsPanel.tsx            |   4 +-
 .../subpanels/ModelManagerPanel.tsx           |   2 +-
 .../ModelManagerPanel/CheckpointModelEdit.tsx |   2 +-
 .../ModelManagerPanel/DiffusersModelEdit.tsx  |   2 +-
 .../ModelManagerPanel/LoRAModelEdit.tsx       |   2 +-
 .../ModelManagerPanel/ModelConvert.tsx        |   2 +-
 .../subpanels/ModelManagerPanel/ModelList.tsx |   2 +-
 .../ModelManagerPanel/ModelListItem.tsx       |   2 +-
 .../subpanels/ModelManagerSettingsPanel.tsx   |   2 +-
 .../ModelManagerSettingsPanel/SyncModels.tsx  |   2 +-
 .../subpanels/shared/BaseModelSelect.tsx      |   4 +-
 .../shared/CheckpointConfigsSelect.tsx        |   4 +-
 .../subpanels/shared/ModelVariantSelect.tsx   |   4 +-
 .../features/nodes/components/NodeEditor.tsx  |   2 +-
 .../flow/AddNodePopover/AddNodePopover.tsx    |   4 +-
 .../features/nodes/components/flow/Flow.tsx   |   2 +-
 .../flow/edges/InvocationCollapsedEdge.tsx    |   2 +-
 .../nodes/CurrentImage/CurrentImageNode.tsx   |   2 +-
 .../flow/nodes/Invocation/InvocationNode.tsx  |   2 +-
 .../InvocationNodeClassificationIcon.tsx      |   2 +-
 .../nodes/Invocation/InvocationNodeFooter.tsx |   4 +-
 .../nodes/Invocation/InvocationNodeHeader.tsx |   2 +-
 .../Invocation/InvocationNodeInfoIcon.tsx     |   2 +-
 .../InvocationNodeStatusIndicator.tsx         |   4 +-
 .../InvocationNodeUnknownFallback.tsx         |   2 +-
 .../flow/nodes/Invocation/NotesTextarea.tsx   |   2 +-
 .../Invocation/SaveToGalleryCheckbox.tsx      |   2 +-
 .../nodes/Invocation/UseCacheCheckbox.tsx     |   2 +-
 .../Invocation/fields/EditableFieldTitle.tsx  |   4 +-
 .../Invocation/fields/FieldContextMenu.tsx    |   4 +-
 .../nodes/Invocation/fields/FieldHandle.tsx   |   2 +-
 .../nodes/Invocation/fields/FieldTitle.tsx    |   2 +-
 .../Invocation/fields/FieldTooltipContent.tsx |   2 +-
 .../nodes/Invocation/fields/InputField.tsx    |   2 +-
 .../Invocation/fields/InputFieldRenderer.tsx  |   2 +-
 .../Invocation/fields/LinearViewField.tsx     |   2 +-
 .../nodes/Invocation/fields/OutputField.tsx   |   2 +-
 .../inputs/BoardFieldInputComponent.tsx       |   4 +-
 .../inputs/BooleanFieldInputComponent.tsx     |   2 +-
 .../ControlNetModelFieldInputComponent.tsx    |   2 +-
 .../fields/inputs/EnumFieldInputComponent.tsx |   2 +-
 .../IPAdapterModelFieldInputComponent.tsx     |   2 +-
 .../inputs/ImageFieldInputComponent.tsx       |   2 +-
 .../inputs/LoRAModelFieldInputComponent.tsx   |   2 +-
 .../inputs/MainModelFieldInputComponent.tsx   |   2 +-
 .../inputs/NumberFieldInputComponent.tsx      |   2 +-
 .../RefinerModelFieldInputComponent.tsx       |   2 +-
 .../SDXLMainModelFieldInputComponent.tsx      |   2 +-
 .../inputs/SchedulerFieldInputComponent.tsx   |   4 +-
 .../inputs/StringFieldInputComponent.tsx      |   2 +-
 .../T2IAdapterModelFieldInputComponent.tsx    |   2 +-
 .../inputs/VAEModelFieldInputComponent.tsx    |   2 +-
 .../components/flow/nodes/Notes/NotesNode.tsx |   2 +-
 .../flow/nodes/common/NodeCollapseButton.tsx  |   2 +-
 .../flow/nodes/common/NodeTitle.tsx           |   4 +-
 .../flow/nodes/common/NodeWrapper.tsx         |   4 +-
 .../BottomLeftPanel/BottomLeftPanel.tsx       |   2 +-
 .../BottomLeftPanel/NodeOpacitySlider.tsx     |   2 +-
 .../BottomLeftPanel/ViewportControls.tsx      |   2 +-
 .../flow/panels/MinimapPanel/MinimapPanel.tsx |   4 +-
 .../flow/panels/TopPanel/AddNodeButton.tsx    |   2 +-
 .../flow/panels/TopPanel/TopPanel.tsx         |   2 +-
 .../panels/TopPanel/UpdateNodesButton.tsx     |   2 +-
 .../flow/panels/TopPanel/WorkflowName.tsx     |   2 +-
 .../TopRightPanel/ReloadSchemaButton.tsx      |   2 +-
 .../panels/TopRightPanel/TopRightPanel.tsx    |   2 +-
 .../TopRightPanel/WorkflowEditorSettings.tsx  |   2 +-
 .../sidePanel/NodeEditorPanelGroup.tsx        |   2 +-
 .../inspector/InspectorDetailsTab.tsx         |   2 +-
 .../inspector/InspectorOutputsTab.tsx         |   2 +-
 .../sidePanel/inspector/InspectorPanel.tsx    |   2 +-
 .../inspector/details/EditableNodeTitle.tsx   |   2 +-
 .../sidePanel/workflow/WorkflowGeneralTab.tsx |   4 +-
 .../sidePanel/workflow/WorkflowJSONTab.tsx    |   2 +-
 .../sidePanel/workflow/WorkflowLinearTab.tsx  |   2 +-
 .../sidePanel/workflow/WorkflowPanel.tsx      |   2 +-
 .../Advanced/ParamCFGRescaleMultiplier.tsx    |   2 +-
 .../components/Advanced/ParamClipSkip.tsx     |   2 +-
 .../BoundingBox/ParamBoundingBoxHeight.tsx    |   2 +-
 .../BoundingBox/ParamBoundingBoxWidth.tsx     |   2 +-
 .../ParamCanvasCoherenceMode.tsx              |   4 +-
 .../ParamCanvasCoherenceSteps.tsx             |   2 +-
 .../ParamCanvasCoherenceStrength.tsx          |   2 +-
 .../MaskAdjustment/ParamMaskBlur.tsx          |   2 +-
 .../MaskAdjustment/ParamMaskBlurMethod.tsx    |   4 +-
 .../Canvas/GenerationModeStatusText.tsx       |   2 +-
 .../InfillAndScaling/ParamInfillMethod.tsx    |   4 +-
 .../ParamInfillPatchmatchDownscaleSize.tsx    |   2 +-
 .../InfillAndScaling/ParamInfillTilesize.tsx  |   2 +-
 .../ParamScaleBeforeProcessing.tsx            |   4 +-
 .../InfillAndScaling/ParamScaledHeight.tsx    |   2 +-
 .../InfillAndScaling/ParamScaledWidth.tsx     |   2 +-
 .../components/Core/ParamCFGScale.tsx         |   2 +-
 .../components/Core/ParamHeight.tsx           |   2 +-
 .../components/Core/ParamNegativePrompt.tsx   |   2 +-
 .../components/Core/ParamPositivePrompt.tsx   |   2 +-
 .../components/Core/ParamScheduler.tsx        |   4 +-
 .../parameters/components/Core/ParamSteps.tsx |   2 +-
 .../parameters/components/Core/ParamWidth.tsx |   2 +-
 .../ImageSize/AspectRatioPreview.tsx          |   2 +-
 .../ImageSize/AspectRatioSelect.tsx           |   4 +-
 .../components/ImageSize/ImageSize.tsx        |   4 +-
 .../ImageSize/LockAspectRatioButton.tsx       |   2 +-
 .../ImageSize/SetOptimalSizeButton.tsx        |   2 +-
 .../ImageSize/SwapDimensionsButton.tsx        |   2 +-
 .../components/ImageSize/constants.ts         |   2 +-
 .../ImageToImage/ImageToImageFit.tsx          |   2 +-
 .../ImageToImage/ImageToImageStrength.tsx     |   2 +-
 .../ImageToImage/InitialImageDisplay.tsx      |   2 +-
 .../MainModel/ParamMainModelSelect.tsx        |   2 +-
 .../Prompts/PromptOverlayButtonWrapper.tsx    |   2 +-
 .../parameters/components/Prompts/Prompts.tsx |   2 +-
 .../Seamless/ParamSeamlessXAxis.tsx           |   2 +-
 .../Seamless/ParamSeamlessYAxis.tsx           |   2 +-
 .../components/Seed/ParamSeedNumberInput.tsx  |   2 +-
 .../components/Seed/ParamSeedRandomize.tsx    |   2 +-
 .../components/Seed/ParamSeedShuffle.tsx      |   2 +-
 .../Upscale/ParamRealESRGANModel.tsx          |   4 +-
 .../Upscale/ParamUpscaleSettings.tsx          |   2 +-
 .../VAEModel/ParamVAEModelSelect.tsx          |   2 +-
 .../components/VAEModel/ParamVAEPrecision.tsx |   4 +-
 .../features/parameters/types/constants.ts    |   2 +-
 .../CancelCurrentQueueItemIconButton.tsx      |   4 +-
 .../components/ClearInvocationCacheButton.tsx |   2 +-
 .../queue/components/ClearQueueButton.tsx     |   4 +-
 .../ClearQueueConfirmationAlertDialog.tsx     |   4 +-
 .../queue/components/ClearQueueIconButton.tsx |   4 +-
 .../components/InvocationCacheStatus.tsx      |   2 +-
 .../components/InvokeQueueBackButton.tsx      |   2 +-
 .../components/QueueActionsMenuButton.tsx     |   2 +-
 .../queue/components/QueueButtonTooltip.tsx   |   2 +-
 .../queue/components/QueueControls.tsx        |   2 +-
 .../queue/components/QueueFrontButton.tsx     |   2 +-
 .../components/QueueIterationsNumberInput.tsx |   2 +-
 .../QueueList/QueueItemComponent.tsx          |   4 +-
 .../components/QueueList/QueueItemDetail.tsx  |   2 +-
 .../queue/components/QueueList/QueueList.tsx  |   2 +-
 .../QueueList/QueueListComponent.tsx          |   2 +-
 .../components/QueueList/QueueListHeader.tsx  |   2 +-
 .../queue/components/QueueTabContent.tsx      |   2 +-
 .../components/QueueTabQueueControls.tsx      |   2 +-
 .../ToggleInvocationCacheButton.tsx           |   2 +-
 .../queue/components/common/QueueButton.tsx   |   4 +-
 .../components/common/QueueStatusBadge.tsx    |   2 +-
 .../components/common/StatusStatGroup.tsx     |   4 +-
 .../components/common/StatusStatItem.tsx      |   4 +-
 .../ParamSDXLNegativeStylePrompt.tsx          |   2 +-
 .../ParamSDXLPositiveStylePrompt.tsx          |   2 +-
 .../SDXLPrompts/SDXLConcatButton.tsx          |   2 +-
 .../components/SDXLPrompts/SDXLPrompts.tsx    |   2 +-
 .../SDXLRefiner/ParamSDXLRefinerCFGScale.tsx  |   2 +-
 .../ParamSDXLRefinerModelSelect.tsx           |   2 +-
 ...ParamSDXLRefinerNegativeAestheticScore.tsx |   2 +-
 ...ParamSDXLRefinerPositiveAestheticScore.tsx |   2 +-
 .../SDXLRefiner/ParamSDXLRefinerScheduler.tsx |   4 +-
 .../SDXLRefiner/ParamSDXLRefinerStart.tsx     |   2 +-
 .../SDXLRefiner/ParamSDXLRefinerSteps.tsx     |   2 +-
 .../AdvancedSettingsAccordion.tsx             |   4 +-
 .../CompositingSettingsAccordion.tsx          |   4 +-
 .../ControlSettingsAccordion.tsx              |   2 +-
 .../GenerationSettingsAccordion.tsx           |   4 +-
 .../ImageSettingsAccordion.tsx                |   4 +-
 .../RefinerSettingsAccordion.tsx              |   4 +-
 .../components/AboutModal/AboutModal.tsx      |   2 +-
 .../HotkeysModal/HotkeyListItem.tsx           |   2 +-
 .../components/HotkeysModal/HotkeysModal.tsx  |   2 +-
 .../components/InvokeAILogoComponent.tsx      |   2 +-
 .../system/components/ProgressBar.tsx         |   2 +-
 .../SettingsModal/SettingsLanguageSelect.tsx  |   4 +-
 .../SettingsModal/SettingsLogLevelSelect.tsx  |   4 +-
 .../components/SettingsModal/SettingsMenu.tsx |   2 +-
 .../SettingsModal/SettingsModal.tsx           |   2 +-
 .../components/SettingsModal/StyledFlex.tsx   |   2 +-
 .../system/components/StatusIndicator.tsx     |   2 +-
 .../system/components/StickyScrollable.tsx    |   2 +-
 .../src/features/system/store/systemSlice.ts  |   2 +-
 .../web/src/features/system/store/types.ts    |   2 +-
 .../web/src/features/system/util/makeToast.ts |   2 +-
 .../ui/components/FloatingGalleryButton.tsx   |   2 +-
 .../FloatingParametersPanelButtons.tsx        |   4 +-
 .../src/features/ui/components/InvokeTabs.tsx |   2 +-
 .../ui/components/ParametersPanel.tsx         |   2 +-
 .../ui/components/tabs/ImageToImageTab.tsx    |   2 +-
 .../ui/components/tabs/ModelManagerTab.tsx    |   2 +-
 .../ui/components/tabs/ResizeHandle.tsx       |   4 +-
 .../ui/components/tabs/TextToImageTab.tsx     |   2 +-
 .../ui/components/tabs/UnifiedCanvasTab.tsx   |   2 +-
 .../components/WorkflowLibraryButton.tsx      |   2 +-
 .../components/WorkflowLibraryList.tsx        |   4 +-
 .../components/WorkflowLibraryListItem.tsx    |   2 +-
 .../components/WorkflowLibraryListWrapper.tsx |   2 +-
 .../DownloadWorkflowMenuItem.tsx              |   2 +-
 .../NewWorkflowMenuItem.tsx                   |   2 +-
 .../SaveWorkflowAsMenuItem.tsx                |   2 +-
 .../SaveWorkflowMenuItem.tsx                  |   2 +-
 .../WorkflowLibraryMenu/SettingsMenuItem.tsx  |   2 +-
 .../UploadWorkflowMenuItem.tsx                |   2 +-
 .../WorkflowLibraryMenu.tsx                   |   2 +-
 .../components/WorkflowLibraryModal.tsx       |   2 +-
 .../components/WorkflowLibraryPagination.tsx  |   2 +-
 .../context/WorkflowLibraryModalContext.ts    |   2 +-
 .../hooks/useDeleteLibraryWorkflow.ts         |   2 +-
 .../hooks/useGetAndLoadLibraryWorkflow.ts     |   2 +-
 .../workflowLibrary/hooks/useSaveWorkflow.ts  |   4 +-
 .../hooks/useSaveWorkflowAs.ts                |   4 +-
 .../frontend/web/src/services/api/types.ts    |   2 +-
 334 files changed, 519 insertions(+), 430 deletions(-)

diff --git a/invokeai/frontend/web/package.json b/invokeai/frontend/web/package.json
index db43fd2f71..c9bde59ce2 100644
--- a/invokeai/frontend/web/package.json
+++ b/invokeai/frontend/web/package.json
@@ -32,8 +32,8 @@
     "fix": "eslint --fix . && prettier --log-level warn --write .",
     "preinstall": "npx only-allow pnpm",
     "postinstall": "pnpm run theme",
-    "theme": "chakra-cli tokens node_modules/@invoke-ai/ui",
-    "theme:watch": "chakra-cli tokens node_modules/@invoke-ai/ui --watch",
+    "theme": "chakra-cli tokens node_modules/@invoke-ai/ui-library",
+    "theme:watch": "chakra-cli tokens node_modules/@invoke-ai/ui-library --watch",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "unimported": "npx unimported"
@@ -57,7 +57,7 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@fontsource-variable/inter": "^5.0.16",
-    "@invoke-ai/ui": "0.0.13",
+    "@invoke-ai/ui-library": "^0.0.18",
     "@mantine/form": "6.0.21",
     "@nanostores/react": "^0.7.1",
     "@reduxjs/toolkit": "2.0.1",
@@ -116,6 +116,8 @@
   "devDependencies": {
     "@arthurgeron/eslint-plugin-react-usememo": "^2.2.3",
     "@chakra-ui/cli": "^2.4.1",
+    "@invoke-ai/eslint-config-react": "^0.0.11",
+    "@invoke-ai/prettier-config-react": "^0.0.6",
     "@storybook/addon-docs": "^7.6.10",
     "@storybook/addon-essentials": "^7.6.10",
     "@storybook/addon-interactions": "^7.6.10",
diff --git a/invokeai/frontend/web/pnpm-lock.yaml b/invokeai/frontend/web/pnpm-lock.yaml
index 958c3f6350..ae1dd40d34 100644
--- a/invokeai/frontend/web/pnpm-lock.yaml
+++ b/invokeai/frontend/web/pnpm-lock.yaml
@@ -28,9 +28,9 @@ dependencies:
   '@fontsource-variable/inter':
     specifier: ^5.0.16
     version: 5.0.16
-  '@invoke-ai/ui':
-    specifier: 0.0.13
-    version: 0.0.13(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.16)(@internationalized/date@3.5.1)(@types/react@18.2.48)(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0)
+  '@invoke-ai/ui-library':
+    specifier: ^0.0.18
+    version: 0.0.18(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.16)(@internationalized/date@3.5.1)(@types/react@18.2.48)(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0)
   '@mantine/form':
     specifier: 6.0.21
     version: 6.0.21(react@18.2.0)
@@ -180,6 +180,12 @@ devDependencies:
   '@chakra-ui/cli':
     specifier: ^2.4.1
     version: 2.4.1
+  '@invoke-ai/eslint-config-react':
+    specifier: ^0.0.11
+    version: 0.0.11(@typescript-eslint/eslint-plugin@6.19.0)(@typescript-eslint/parser@6.19.0)(eslint-config-prettier@9.1.0)(eslint-plugin-i18next@6.0.3)(eslint-plugin-import@2.29.1)(eslint-plugin-react-hooks@4.6.0)(eslint-plugin-react-refresh@0.4.5)(eslint-plugin-react@7.33.2)(eslint-plugin-simple-import-sort@10.0.0)(eslint-plugin-storybook@0.6.15)(eslint-plugin-unused-imports@3.0.0)(eslint@8.56.0)
+  '@invoke-ai/prettier-config-react':
+    specifier: ^0.0.6
+    version: 0.0.6(prettier@3.2.4)
   '@storybook/addon-docs':
     specifier: ^7.6.10
     version: 7.6.10(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0)
@@ -2907,7 +2913,7 @@ packages:
     resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==}
     dependencies:
       '@babel/helper-module-imports': 7.22.15
-      '@babel/runtime': 7.23.6
+      '@babel/runtime': 7.23.8
       '@emotion/hash': 0.9.1
       '@emotion/memoize': 0.8.1
       '@emotion/serialize': 1.1.3
@@ -2966,7 +2972,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.23.6
+      '@babel/runtime': 7.23.8
       '@emotion/babel-plugin': 11.11.0
       '@emotion/cache': 11.11.0
       '@emotion/serialize': 1.1.3
@@ -3759,8 +3765,46 @@ packages:
       '@swc/helpers': 0.5.3
     dev: false
 
-  /@invoke-ai/ui@0.0.13(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.16)(@internationalized/date@3.5.1)(@types/react@18.2.48)(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-X4Txij2dMnzPUXTPhorBHezByJQ/ceyHxCM+zZ0gpFsSyXUieOFWjaSu+dAVpghS9y0dxFQGayHvNyX6VsX/PA==}
+  /@invoke-ai/eslint-config-react@0.0.11(@typescript-eslint/eslint-plugin@6.19.0)(@typescript-eslint/parser@6.19.0)(eslint-config-prettier@9.1.0)(eslint-plugin-i18next@6.0.3)(eslint-plugin-import@2.29.1)(eslint-plugin-react-hooks@4.6.0)(eslint-plugin-react-refresh@0.4.5)(eslint-plugin-react@7.33.2)(eslint-plugin-simple-import-sort@10.0.0)(eslint-plugin-storybook@0.6.15)(eslint-plugin-unused-imports@3.0.0)(eslint@8.56.0):
+    resolution: {integrity: sha512-To3m1qd1XMOkBYAenVT6Zjb1iTvSwetoJZrCITD4DHAtYu/3srhYVykJrNEjslCvz7AGDRtDDCczcQMOIwUJOQ==}
+    peerDependencies:
+      '@typescript-eslint/eslint-plugin': ^6.19.0
+      '@typescript-eslint/parser': ^6.19.0
+      eslint: ^8.56.0
+      eslint-config-prettier: ^9.1.0
+      eslint-plugin-i18next: ^6.0.3
+      eslint-plugin-import: ^2.29.1
+      eslint-plugin-react: ^7.33.2
+      eslint-plugin-react-hooks: ^4.6.0
+      eslint-plugin-react-refresh: ^0.4.5
+      eslint-plugin-simple-import-sort: ^10.0.0
+      eslint-plugin-storybook: ^0.6.15
+      eslint-plugin-unused-imports: ^3.0.0
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 6.19.0(@typescript-eslint/parser@6.19.0)(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/parser': 6.19.0(eslint@8.56.0)(typescript@5.3.3)
+      eslint: 8.56.0
+      eslint-config-prettier: 9.1.0(eslint@8.56.0)
+      eslint-plugin-i18next: 6.0.3
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.19.0)(eslint@8.56.0)
+      eslint-plugin-react: 7.33.2(eslint@8.56.0)
+      eslint-plugin-react-hooks: 4.6.0(eslint@8.56.0)
+      eslint-plugin-react-refresh: 0.4.5(eslint@8.56.0)
+      eslint-plugin-simple-import-sort: 10.0.0(eslint@8.56.0)
+      eslint-plugin-storybook: 0.6.15(eslint@8.56.0)(typescript@5.3.3)
+      eslint-plugin-unused-imports: 3.0.0(@typescript-eslint/eslint-plugin@6.19.0)(eslint@8.56.0)
+    dev: true
+
+  /@invoke-ai/prettier-config-react@0.0.6(prettier@3.2.4):
+    resolution: {integrity: sha512-qHE6GAw/Aka/8TLTN9U1U+8pxjaFe5irDv/uSgzqmrBR1rGiVyMp19pEficWRRt+03zYdquiiDjTmoabWQxY0Q==}
+    peerDependencies:
+      prettier: ^3.2.4
+    dependencies:
+      prettier: 3.2.4
+    dev: true
+
+  /@invoke-ai/ui-library@0.0.18(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.16)(@internationalized/date@3.5.1)(@types/react@18.2.48)(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-Yme+2+pzYy3TPb7ZT0hYmBwahH29ZRSVIxLKSexh3BsbJXbTzGssRQU78QvK6Ymxemgbso3P8Rs+IW0zNhQKjQ==}
     peerDependencies:
       '@fontsource-variable/inter': ^5.0.16
       react: ^18.2.0
@@ -3782,11 +3826,12 @@ packages:
       framer-motion: 10.18.0(react-dom@18.2.0)(react@18.2.0)
       lodash-es: 4.17.21
       nanostores: 0.9.5
-      overlayscrollbars: 2.4.6
-      overlayscrollbars-react: 0.5.3(overlayscrollbars@2.4.6)(react@18.2.0)
+      overlayscrollbars: 2.4.7
+      overlayscrollbars-react: 0.5.4(overlayscrollbars@2.4.7)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      react-i18next: 14.0.0(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0)
+      react-i18next: 14.0.1(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0)
+      react-icons: 5.0.1(react@18.2.0)
       react-select: 5.8.0(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0)
     transitivePeerDependencies:
       - '@chakra-ui/form-control'
@@ -7640,7 +7685,7 @@ packages:
     resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
     engines: {node: '>=10', npm: '>=6'}
     dependencies:
-      '@babel/runtime': 7.23.6
+      '@babel/runtime': 7.23.8
       cosmiconfig: 7.1.0
       resolve: 1.22.8
     dev: false
@@ -9198,6 +9243,14 @@ packages:
       eslint: 8.56.0
     dev: true
 
+  /eslint-plugin-react-refresh@0.4.5(eslint@8.56.0):
+    resolution: {integrity: sha512-D53FYKJa+fDmZMtriODxvhwrO+IOqrxoEo21gMA0sjHdU6dPVH4OhyFip9ypl8HOF5RV5KdTo+rBQLvnY2cO8w==}
+    peerDependencies:
+      eslint: '>=7'
+    dependencies:
+      eslint: 8.56.0
+    dev: true
+
   /eslint-plugin-react@7.33.2(eslint@8.56.0):
     resolution: {integrity: sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==}
     engines: {node: '>=4'}
@@ -11565,10 +11618,24 @@ packages:
       react: 18.2.0
     dev: false
 
+  /overlayscrollbars-react@0.5.4(overlayscrollbars@2.4.7)(react@18.2.0):
+    resolution: {integrity: sha512-FPKx9XnXovTnI4+2JXig5uEaTLSEJ6svOwPzIfBBXTHBRNsz2+WhYUmfM0K/BNYxjgDEwuPm+NQhEoOA0RoG1g==}
+    peerDependencies:
+      overlayscrollbars: ^2.0.0
+      react: '>=16.8.0'
+    dependencies:
+      overlayscrollbars: 2.4.7
+      react: 18.2.0
+    dev: false
+
   /overlayscrollbars@2.4.6:
     resolution: {integrity: sha512-C7tmhetwMv9frEvIT/RfkAVEgbjRNz/Gh2zE8BVmN+jl35GRaAnz73rlGQCMRoC2arpACAXyMNnJkzHb7GBrcA==}
     dev: false
 
+  /overlayscrollbars@2.4.7:
+    resolution: {integrity: sha512-02X2/nHno35dzebCx+EO2tRDaKAOltZqUKdUqvq3Pt8htCuhJbYi+mjr0CYerVeGRRoZ2Uo6/8XrNg//DJJ+GA==}
+    dev: false
+
   /p-limit@2.3.0:
     resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
     engines: {node: '>=6'}
@@ -12207,6 +12274,26 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /react-i18next@14.0.1(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-TMV8hFismBmpMdIehoFHin/okfvgjFhp723RYgIqB4XyhDobVMyukyM3Z8wtTRmajyFMZrBl/OaaXF2P6WjUAw==}
+    peerDependencies:
+      i18next: '>= 23.2.3'
+      react: '>= 16.8.0'
+      react-dom: '*'
+      react-native: '*'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+      react-native:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.8
+      html-parse-stringify: 3.0.1
+      i18next: 23.7.16
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /react-icons@5.0.1(react@18.2.0):
     resolution: {integrity: sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==}
     peerDependencies:
diff --git a/invokeai/frontend/web/src/app/components/App.tsx b/invokeai/frontend/web/src/app/components/App.tsx
index ecd3c829d1..beb22d4446 100644
--- a/invokeai/frontend/web/src/app/components/App.tsx
+++ b/invokeai/frontend/web/src/app/components/App.tsx
@@ -1,4 +1,4 @@
-import { Box, useGlobalModifiersInit } from '@invoke-ai/ui';
+import { Box, useGlobalModifiersInit } from '@invoke-ai/ui-library';
 import { useSocketIO } from 'app/hooks/useSocketIO';
 import { useLogger } from 'app/logging/useLogger';
 import { appStarted } from 'app/store/middleware/listenerMiddleware/listeners/appStarted';
diff --git a/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx b/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx
index 8ee59e6648..be0269a41b 100644
--- a/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx
+++ b/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx
@@ -1,4 +1,4 @@
-import { Button, Flex, Heading, Link, Text, useToast } from '@invoke-ai/ui';
+import { Button, Flex, Heading, Link, Text, useToast } from '@invoke-ai/ui-library';
 import newGithubIssueUrl from 'new-github-issue-url';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
diff --git a/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx b/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx
index 15b4cf28fc..9d7520258c 100644
--- a/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx
+++ b/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx
@@ -7,7 +7,7 @@ import {
   extendTheme,
   theme as _theme,
   TOAST_OPTIONS,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import type { ReactNode } from 'react';
 import { memo, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
diff --git a/invokeai/frontend/web/src/app/components/Toaster.ts b/invokeai/frontend/web/src/app/components/Toaster.ts
index 6bb2592ba4..0102ce376d 100644
--- a/invokeai/frontend/web/src/app/components/Toaster.ts
+++ b/invokeai/frontend/web/src/app/components/Toaster.ts
@@ -1,4 +1,4 @@
-import { useToast } from '@invoke-ai/ui';
+import { useToast } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { addToast, clearToastQueue } from 'features/system/store/systemSlice';
 import type { MakeToastArg } from 'features/system/util/makeToast';
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts
index d848434df9..84de200e94 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts
@@ -1,4 +1,4 @@
-import { createStandaloneToast, theme, TOAST_OPTIONS } from '@invoke-ai/ui';
+import { createStandaloneToast, theme, TOAST_OPTIONS } from '@invoke-ai/ui-library';
 import { logger } from 'app/logging/logger';
 import { parseify } from 'common/util/serialize';
 import { zPydanticValidationError } from 'features/system/store/zodSchemas';
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts
index fdcfc7b360..675fc58ef7 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts
@@ -1,4 +1,4 @@
-import type { UseToastOptions } from '@invoke-ai/ui';
+import type { UseToastOptions } from '@invoke-ai/ui-library';
 import { logger } from 'app/logging/logger';
 import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice';
 import {
diff --git a/invokeai/frontend/web/src/app/store/nanostores/customStarUI.ts b/invokeai/frontend/web/src/app/store/nanostores/customStarUI.ts
index 71a8fc4017..9f6628ac9c 100644
--- a/invokeai/frontend/web/src/app/store/nanostores/customStarUI.ts
+++ b/invokeai/frontend/web/src/app/store/nanostores/customStarUI.ts
@@ -1,4 +1,4 @@
-import type { MenuItemProps } from '@invoke-ai/ui';
+import type { MenuItemProps } from '@invoke-ai/ui-library';
 import { atom } from 'nanostores';
 
 export type CustomStarUi = {
diff --git a/invokeai/frontend/web/src/common/components/IAIColorPicker.tsx b/invokeai/frontend/web/src/common/components/IAIColorPicker.tsx
index bacfcff880..b8d143c495 100644
--- a/invokeai/frontend/web/src/common/components/IAIColorPicker.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIColorPicker.tsx
@@ -1,10 +1,10 @@
-import type { ChakraProps } from '@invoke-ai/ui';
+import type { ChakraProps } from '@invoke-ai/ui-library';
 import {
   CompositeNumberInput,
   Flex,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import type { CSSProperties } from 'react';
 import { memo, useCallback } from 'react';
 import { RgbaColorPicker } from 'react-colorful';
diff --git a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
index 500ccdfb7b..851b21dd13 100644
--- a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
@@ -1,5 +1,5 @@
-import type { ChakraProps, FlexProps, SystemStyleObject } from '@invoke-ai/ui';
-import { Flex, Icon, Image } from '@invoke-ai/ui';
+import type { ChakraProps, FlexProps, SystemStyleObject } from '@invoke-ai/ui-library';
+import { Flex, Icon, Image } from '@invoke-ai/ui-library';
 import {
   IAILoadingImageFallback,
   IAINoContentFallback,
diff --git a/invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx b/invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx
index 1df0cb527a..650a0b6a14 100644
--- a/invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx
@@ -1,5 +1,5 @@
-import type { SystemStyleObject } from '@invoke-ai/ui';
-import { IconButton } from '@invoke-ai/ui';
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { IconButton } from '@invoke-ai/ui-library';
 import type { MouseEvent, ReactElement } from 'react';
 import { memo, useMemo } from 'react';
 
diff --git a/invokeai/frontend/web/src/common/components/IAIDraggable.tsx b/invokeai/frontend/web/src/common/components/IAIDraggable.tsx
index 678f60415d..9e0b5206bc 100644
--- a/invokeai/frontend/web/src/common/components/IAIDraggable.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIDraggable.tsx
@@ -1,5 +1,5 @@
-import type { BoxProps } from '@invoke-ai/ui';
-import { Box } from '@invoke-ai/ui';
+import type { BoxProps } from '@invoke-ai/ui-library';
+import { Box } from '@invoke-ai/ui-library';
 import { useDraggableTypesafe } from 'features/dnd/hooks/typesafeHooks';
 import type { TypesafeDraggableData } from 'features/dnd/types';
 import { memo, useRef } from 'react';
diff --git a/invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx b/invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx
index a6b654a947..e708d0097a 100644
--- a/invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex } from '@invoke-ai/ui';
+import { Box, Flex } from '@invoke-ai/ui-library';
 import type { AnimationProps } from 'framer-motion';
 import { motion } from 'framer-motion';
 import type { ReactNode } from 'react';
diff --git a/invokeai/frontend/web/src/common/components/IAIDroppable.tsx b/invokeai/frontend/web/src/common/components/IAIDroppable.tsx
index 2f48229010..3377422a85 100644
--- a/invokeai/frontend/web/src/common/components/IAIDroppable.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIDroppable.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@invoke-ai/ui';
+import { Box } from '@invoke-ai/ui-library';
 import { useDroppableTypesafe } from 'features/dnd/hooks/typesafeHooks';
 import type { TypesafeDroppableData } from 'features/dnd/types';
 import { isValidDrop } from 'features/dnd/util/isValidDrop';
diff --git a/invokeai/frontend/web/src/common/components/IAIFillSkeleton.tsx b/invokeai/frontend/web/src/common/components/IAIFillSkeleton.tsx
index c1e51226fd..29bcb927ac 100644
--- a/invokeai/frontend/web/src/common/components/IAIFillSkeleton.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIFillSkeleton.tsx
@@ -1,5 +1,5 @@
-import type { SystemStyleObject } from '@invoke-ai/ui';
-import { Box, Skeleton } from '@invoke-ai/ui';
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { Box, Skeleton } from '@invoke-ai/ui-library';
 import { memo } from 'react';
 
 const skeletonStyles: SystemStyleObject = {
diff --git a/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx b/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx
index 4ed3aa814b..c8cf83b5f1 100644
--- a/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx
@@ -1,5 +1,5 @@
-import type { As, ChakraProps, FlexProps } from '@invoke-ai/ui';
-import { Flex, Icon, Skeleton, Spinner, Text } from '@invoke-ai/ui';
+import type { As, ChakraProps, FlexProps } from '@invoke-ai/ui-library';
+import { Flex, Icon, Skeleton, Spinner, Text } from '@invoke-ai/ui-library';
 import { memo, useMemo } from 'react';
 import { PiImageBold } from 'react-icons/pi';
 import type { ImageDTO } from 'services/api/types';
diff --git a/invokeai/frontend/web/src/common/components/ImageMetadataOverlay.tsx b/invokeai/frontend/web/src/common/components/ImageMetadataOverlay.tsx
index 003ace0d1c..531b2b4298 100644
--- a/invokeai/frontend/web/src/common/components/ImageMetadataOverlay.tsx
+++ b/invokeai/frontend/web/src/common/components/ImageMetadataOverlay.tsx
@@ -1,4 +1,4 @@
-import { Badge, Flex } from '@invoke-ai/ui';
+import { Badge, Flex } from '@invoke-ai/ui-library';
 import { memo } from 'react';
 import type { ImageDTO } from 'services/api/types';
 
diff --git a/invokeai/frontend/web/src/common/components/ImageUploadOverlay.tsx b/invokeai/frontend/web/src/common/components/ImageUploadOverlay.tsx
index dd0b250110..070598f081 100644
--- a/invokeai/frontend/web/src/common/components/ImageUploadOverlay.tsx
+++ b/invokeai/frontend/web/src/common/components/ImageUploadOverlay.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Heading } from '@invoke-ai/ui';
+import { Box, Flex, Heading } from '@invoke-ai/ui-library';
 import type { AnimationProps } from 'framer-motion';
 import { motion } from 'framer-motion';
 import { memo } from 'react';
diff --git a/invokeai/frontend/web/src/common/components/InformationalPopover/InformationalPopover.tsx b/invokeai/frontend/web/src/common/components/InformationalPopover/InformationalPopover.tsx
index cd2b320155..0a52000664 100644
--- a/invokeai/frontend/web/src/common/components/InformationalPopover/InformationalPopover.tsx
+++ b/invokeai/frontend/web/src/common/components/InformationalPopover/InformationalPopover.tsx
@@ -11,7 +11,7 @@ import {
   PopoverTrigger,
   Portal,
   Text,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { merge, omit } from 'lodash-es';
 import type { ReactElement } from 'react';
diff --git a/invokeai/frontend/web/src/common/components/InformationalPopover/constants.ts b/invokeai/frontend/web/src/common/components/InformationalPopover/constants.ts
index 09d4e9c132..8d3337dcaa 100644
--- a/invokeai/frontend/web/src/common/components/InformationalPopover/constants.ts
+++ b/invokeai/frontend/web/src/common/components/InformationalPopover/constants.ts
@@ -1,4 +1,4 @@
-import type { PopoverProps } from '@invoke-ai/ui';
+import type { PopoverProps } from '@invoke-ai/ui-library';
 
 export type Feature =
   | 'clipSkip'
diff --git a/invokeai/frontend/web/src/common/components/Loading/Loading.tsx b/invokeai/frontend/web/src/common/components/Loading/Loading.tsx
index 024936ebd8..57b4d55560 100644
--- a/invokeai/frontend/web/src/common/components/Loading/Loading.tsx
+++ b/invokeai/frontend/web/src/common/components/Loading/Loading.tsx
@@ -1,4 +1,4 @@
-import { Flex, Image, Spinner } from '@invoke-ai/ui';
+import { Flex, Image, Spinner } from '@invoke-ai/ui-library';
 import InvokeLogoWhite from 'public/assets/images/invoke-symbol-wht-lrg.svg';
 import { memo } from 'react';
 
diff --git a/invokeai/frontend/web/src/common/components/NodeSelectionOverlay.tsx b/invokeai/frontend/web/src/common/components/NodeSelectionOverlay.tsx
index 7e31cd74c0..31ea415c90 100644
--- a/invokeai/frontend/web/src/common/components/NodeSelectionOverlay.tsx
+++ b/invokeai/frontend/web/src/common/components/NodeSelectionOverlay.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@invoke-ai/ui';
+import { Box } from '@invoke-ai/ui-library';
 import { memo, useMemo } from 'react';
 
 type Props = {
diff --git a/invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx b/invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx
index b78fd3d3a6..f7624075c2 100644
--- a/invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx
+++ b/invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx
@@ -1,5 +1,5 @@
-import type { ChakraProps } from '@invoke-ai/ui';
-import { Box, Flex } from '@invoke-ai/ui';
+import type { ChakraProps } from '@invoke-ai/ui-library';
+import { Box, Flex } from '@invoke-ai/ui-library';
 import { getOverlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import type { CSSProperties, PropsWithChildren } from 'react';
diff --git a/invokeai/frontend/web/src/common/components/SelectionOverlay.tsx b/invokeai/frontend/web/src/common/components/SelectionOverlay.tsx
index 9eb1af0b99..eb50a6b9d4 100644
--- a/invokeai/frontend/web/src/common/components/SelectionOverlay.tsx
+++ b/invokeai/frontend/web/src/common/components/SelectionOverlay.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@invoke-ai/ui';
+import { Box } from '@invoke-ai/ui-library';
 import { memo, useMemo } from 'react';
 
 type Props = {
diff --git a/invokeai/frontend/web/src/common/hooks/useChakraThemeTokens.ts b/invokeai/frontend/web/src/common/hooks/useChakraThemeTokens.ts
index 06090b3dbd..93345f6a4c 100644
--- a/invokeai/frontend/web/src/common/hooks/useChakraThemeTokens.ts
+++ b/invokeai/frontend/web/src/common/hooks/useChakraThemeTokens.ts
@@ -1,4 +1,4 @@
-import { useToken } from '@invoke-ai/ui';
+import { useToken } from '@invoke-ai/ui-library';
 
 export const useChakraThemeTokens = () => {
   const [
diff --git a/invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts b/invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts
index d76eab4a53..44e9101574 100644
--- a/invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts
+++ b/invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts
@@ -1,4 +1,4 @@
-import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui';
+import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
 import type { EntityState } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import type { GroupBase } from 'chakra-react-select';
diff --git a/invokeai/frontend/web/src/common/hooks/useModelCombobox.ts b/invokeai/frontend/web/src/common/hooks/useModelCombobox.ts
index 25908c5f62..6d2957aca9 100644
--- a/invokeai/frontend/web/src/common/hooks/useModelCombobox.ts
+++ b/invokeai/frontend/web/src/common/hooks/useModelCombobox.ts
@@ -1,4 +1,4 @@
-import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui';
+import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
 import type { EntityState } from '@reduxjs/toolkit';
 import { map } from 'lodash-es';
 import { useCallback, useMemo } from 'react';
diff --git a/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx b/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx
index 5d352c08c4..98b720f610 100644
--- a/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx
@@ -1,4 +1,4 @@
-import { Button, ConfirmationAlertDialog, useDisclosure } from '@invoke-ai/ui';
+import { Button, ConfirmationAlertDialog, useDisclosure } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import { clearCanvasHistory } from 'features/canvas/store/canvasSlice';
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx
index fafbccb705..06f9399ede 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx
@@ -1,4 +1,4 @@
-import { Box, chakra, Flex } from '@invoke-ai/ui';
+import { Box, chakra, Flex } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasGrid.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasGrid.tsx
index a049714037..06925d90a3 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasGrid.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasGrid.tsx
@@ -1,5 +1,5 @@
 // Grid drawing adapted from https://longviewcoder.com/2021/12/08/konva-a-better-grid/
-import { getArbitraryBaseColor } from '@invoke-ai/ui';
+import { getArbitraryBaseColor } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasImageErrorFallback.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasImageErrorFallback.tsx
index ef23a55cd2..55ef24f3e5 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasImageErrorFallback.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasImageErrorFallback.tsx
@@ -1,4 +1,4 @@
-import { useToken } from '@invoke-ai/ui';
+import { useToken } from '@invoke-ai/ui-library';
 import type { CanvasImage } from 'features/canvas/store/canvasTypes';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
index 976bc7c49a..326426cea8 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
@@ -1,4 +1,4 @@
-import { Button, ButtonGroup, Flex, IconButton } from '@invoke-ai/ui';
+import { Button, ButtonGroup, Flex, IconButton } from '@invoke-ai/ui-library';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx
index 8e99ffb65a..ff854aef60 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex } from '@invoke-ai/ui';
+import { Box, Flex } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx
index dd24ea34a1..6e5afde469 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@invoke-ai/ui';
+import { Box } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { $cursorPosition } from 'features/canvas/store/canvasNanostore';
 import roundToHundreth from 'features/canvas/util/roundToHundreth';
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx
index bc7bc6fa4c..3b64bca952 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx
@@ -1,4 +1,4 @@
-import { useShiftModifier } from '@invoke-ai/ui';
+import { useShiftModifier } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx
index 2e4fcccd85..5665fdc4e7 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx
@@ -1,4 +1,4 @@
-import type { FormLabelProps } from '@invoke-ai/ui';
+import type { FormLabelProps } from '@invoke-ai/ui-library';
 import {
   Box,
   Button,
@@ -13,7 +13,7 @@ import {
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIColorPicker from 'common/components/IAIColorPicker';
 import { canvasMaskSavedToGallery } from 'features/canvas/store/actions';
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx
index 1fdffa0d3e..d156944a60 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx
@@ -1,4 +1,4 @@
-import { IconButton } from '@invoke-ai/ui';
+import { IconButton } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { redo } from 'features/canvas/store/canvasSlice';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx
index bbdff781bf..32badac87b 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx
@@ -1,4 +1,4 @@
-import type { FormLabelProps } from '@invoke-ai/ui';
+import type { FormLabelProps } from '@invoke-ai/ui-library';
 import {
   Checkbox,
   Flex,
@@ -10,7 +10,7 @@ import {
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import ClearCanvasHistoryButtonModal from 'features/canvas/components/ClearCanvasHistoryButtonModal';
 import {
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx
index 5584be9ed1..9eb4a3cc65 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx
@@ -11,7 +11,7 @@ import {
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIColorPicker from 'common/components/IAIColorPicker';
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
index 865e0d5767..3d764c50d7 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
@@ -1,4 +1,4 @@
-import type { ComboboxOnChange } from '@invoke-ai/ui';
+import type { ComboboxOnChange } from '@invoke-ai/ui-library';
 import {
   ButtonGroup,
   Combobox,
@@ -6,7 +6,7 @@ import {
   FormControl,
   IconButton,
   Tooltip,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useCopyImageToClipboard } from 'common/hooks/useCopyImageToClipboard';
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx
index a2b8feac23..f1fcdf96e5 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx
@@ -1,4 +1,4 @@
-import { IconButton } from '@invoke-ai/ui';
+import { IconButton } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { undo } from 'features/canvas/store/canvasSlice';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
diff --git a/invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx b/invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx
index d7e774c87f..b8688b334d 100644
--- a/invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx
+++ b/invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx
@@ -1,11 +1,11 @@
-import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui';
+import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
 import {
   Combobox,
   ConfirmationAlertDialog,
   Flex,
   FormControl,
   Text,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx
index 8c40777714..21b05b30d7 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx
@@ -6,7 +6,7 @@ import {
   Icon,
   IconButton,
   Switch,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';
 import { useControlAdapterType } from 'features/controlAdapters/hooks/useControlAdapterType';
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx
index 8c4e96e799..84cd77fac3 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx
@@ -1,5 +1,5 @@
-import type { SystemStyleObject } from '@invoke-ai/ui';
-import { Box, Flex, Spinner } from '@invoke-ai/ui';
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { Box, Flex, Spinner } from '@invoke-ai/ui-library';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterShouldAutoConfig.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterShouldAutoConfig.tsx
index 073595cf38..b8bdbc7f5a 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterShouldAutoConfig.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterShouldAutoConfig.tsx
@@ -1,4 +1,4 @@
-import { FormControl, FormLabel, Switch } from '@invoke-ai/ui';
+import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';
 import { useControlAdapterShouldAutoConfig } from 'features/controlAdapters/hooks/useControlAdapterShouldAutoConfig';
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/imports/ControlNetCanvasImageImports.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/imports/ControlNetCanvasImageImports.tsx
index 4c94448cf5..8b24ec2b7e 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/imports/ControlNetCanvasImageImports.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/imports/ControlNetCanvasImageImports.tsx
@@ -1,4 +1,4 @@
-import { Flex, IconButton } from '@invoke-ai/ui';
+import { Flex, IconButton } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import {
   canvasImageToControlAdapter,
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx
index 891cd1776a..bfe513d1fd 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx
@@ -1,4 +1,4 @@
-import { CompositeRangeSlider, FormControl, FormLabel } from '@invoke-ai/ui';
+import { CompositeRangeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useControlAdapterBeginEndStepPct } from 'features/controlAdapters/hooks/useControlAdapterBeginEndStepPct';
 import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterControlMode.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterControlMode.tsx
index 1cee707bb6..3a55d97e6a 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterControlMode.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterControlMode.tsx
@@ -1,5 +1,5 @@
-import type { ComboboxOnChange } from '@invoke-ai/ui';
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
+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';
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterModel.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterModel.tsx
index 8323675caf..e835476ba1 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterModel.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterModel.tsx
@@ -1,4 +1,4 @@
-import { Combobox, FormControl, Tooltip } from '@invoke-ai/ui';
+import { Combobox, 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';
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterProcessorSelect.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterProcessorSelect.tsx
index f395dbad32..5f9dfd3b27 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterProcessorSelect.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterProcessorSelect.tsx
@@ -1,5 +1,5 @@
-import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui';
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
+import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterResizeMode.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterResizeMode.tsx
index 1ee1fdc2ca..3b6c23a2a1 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterResizeMode.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterResizeMode.tsx
@@ -1,5 +1,5 @@
-import type { ComboboxOnChange } from '@invoke-ai/ui';
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
+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 { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterWeight.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterWeight.tsx
index 27a4115ae7..068b38d6ba 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterWeight.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterWeight.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} 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';
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/CannyProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/CannyProcessor.tsx
index 4803188202..0f5c1b72e9 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/CannyProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/CannyProcessor.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredCannyImageProcessorInvocation } from 'features/controlAdapters/store/types';
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/ColorMapProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/ColorMapProcessor.tsx
index efbd4e5ba5..bfb2b880f2 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/ColorMapProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/ColorMapProcessor.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredColorMapImageProcessorInvocation } from 'features/controlAdapters/store/types';
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/ContentShuffleProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/ContentShuffleProcessor.tsx
index cca0aba74c..7343c220c6 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/ContentShuffleProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/ContentShuffleProcessor.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredContentShuffleImageProcessorInvocation } from 'features/controlAdapters/store/types';
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/DepthAnyThingProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/DepthAnyThingProcessor.tsx
index 025c53743e..d1a4db9818 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/DepthAnyThingProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/DepthAnyThingProcessor.tsx
@@ -1,11 +1,11 @@
-import type { ComboboxOnChange } from '@invoke-ai/ui';
+import type { ComboboxOnChange } from '@invoke-ai/ui-library';
 import {
   Combobox,
   CompositeNumberInput,
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type {
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/HedProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/HedProcessor.tsx
index 83c406829b..4242f7c95b 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/HedProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/HedProcessor.tsx
@@ -4,7 +4,7 @@ import {
   FormControl,
   FormLabel,
   Switch,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredHedImageProcessorInvocation } from 'features/controlAdapters/store/types';
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartAnimeProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartAnimeProcessor.tsx
index a1651cd428..741c02c106 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartAnimeProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartAnimeProcessor.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredLineartAnimeImageProcessorInvocation } from 'features/controlAdapters/store/types';
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartProcessor.tsx
index 3535d15d3c..6148364020 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartProcessor.tsx
@@ -4,7 +4,7 @@ import {
   FormControl,
   FormLabel,
   Switch,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredLineartImageProcessorInvocation } from 'features/controlAdapters/store/types';
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MediapipeFaceProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MediapipeFaceProcessor.tsx
index e914491000..2fb7aa7310 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MediapipeFaceProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MediapipeFaceProcessor.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredMediapipeFaceProcessorInvocation } from 'features/controlAdapters/store/types';
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MidasDepthProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MidasDepthProcessor.tsx
index e95c4c8a7f..ba52a102af 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MidasDepthProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MidasDepthProcessor.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredMidasDepthImageProcessorInvocation } from 'features/controlAdapters/store/types';
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MlsdImageProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MlsdImageProcessor.tsx
index 34a993b070..1091d5698d 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MlsdImageProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MlsdImageProcessor.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredMlsdImageProcessorInvocation } from 'features/controlAdapters/store/types';
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/NormalBaeProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/NormalBaeProcessor.tsx
index 24b83ef950..b1709d3bf1 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/NormalBaeProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/NormalBaeProcessor.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredNormalbaeImageProcessorInvocation } from 'features/controlAdapters/store/types';
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/OpenposeProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/OpenposeProcessor.tsx
index 8385183cbc..6e27deb291 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/OpenposeProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/OpenposeProcessor.tsx
@@ -4,7 +4,7 @@ import {
   FormControl,
   FormLabel,
   Switch,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredOpenposeImageProcessorInvocation } from 'features/controlAdapters/store/types';
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/PidiProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/PidiProcessor.tsx
index e8dac66e19..e723e876da 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/PidiProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/PidiProcessor.tsx
@@ -4,7 +4,7 @@ import {
   FormControl,
   FormLabel,
   Switch,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredPidiImageProcessorInvocation } from 'features/controlAdapters/store/types';
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/common/ProcessorWrapper.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/common/ProcessorWrapper.tsx
index 1eb1b45de1..0b99887b53 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/common/ProcessorWrapper.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/common/ProcessorWrapper.tsx
@@ -1,4 +1,4 @@
-import { Flex } from '@invoke-ai/ui';
+import { Flex } from '@invoke-ai/ui-library';
 import type { PropsWithChildren } from 'react';
 import { memo } from 'react';
 
diff --git a/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageButton.tsx b/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageButton.tsx
index e312553daf..9d46a185f8 100644
--- a/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageButton.tsx
+++ b/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageButton.tsx
@@ -1,5 +1,5 @@
-import type { IconButtonProps } from '@invoke-ai/ui';
-import { IconButton } from '@invoke-ai/ui';
+import type { IconButtonProps } from '@invoke-ai/ui-library';
+import { IconButton } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
diff --git a/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx b/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx
index b59d810bd1..2909559975 100644
--- a/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx
+++ b/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx
@@ -6,7 +6,7 @@ import {
   FormLabel,
   Switch,
   Text,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
diff --git a/invokeai/frontend/web/src/features/deleteImageModal/components/ImageUsageMessage.tsx b/invokeai/frontend/web/src/features/deleteImageModal/components/ImageUsageMessage.tsx
index 2e5c4efe24..756582c287 100644
--- a/invokeai/frontend/web/src/features/deleteImageModal/components/ImageUsageMessage.tsx
+++ b/invokeai/frontend/web/src/features/deleteImageModal/components/ImageUsageMessage.tsx
@@ -1,4 +1,4 @@
-import { ListItem, Text, UnorderedList } from '@invoke-ai/ui';
+import { ListItem, Text, UnorderedList } from '@invoke-ai/ui-library';
 import type { ImageUsage } from 'features/deleteImageModal/store/types';
 import { some } from 'lodash-es';
 import { memo } from 'react';
diff --git a/invokeai/frontend/web/src/features/dnd/components/DragPreview.tsx b/invokeai/frontend/web/src/features/dnd/components/DragPreview.tsx
index f52f7945e0..e9f6c6ee4d 100644
--- a/invokeai/frontend/web/src/features/dnd/components/DragPreview.tsx
+++ b/invokeai/frontend/web/src/features/dnd/components/DragPreview.tsx
@@ -1,5 +1,5 @@
-import type { ChakraProps } from '@invoke-ai/ui';
-import { Box, Flex, Heading, Image, Text } from '@invoke-ai/ui';
+import type { ChakraProps } from '@invoke-ai/ui-library';
+import { Box, Flex, Heading, Image, Text } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import type { TypesafeDraggableData } from 'features/dnd/types';
 import { memo } from 'react';
diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/DynamicPromptsPreviewModal.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/DynamicPromptsPreviewModal.tsx
index 1783ccf9d1..620bda597f 100644
--- a/invokeai/frontend/web/src/features/dynamicPrompts/components/DynamicPromptsPreviewModal.tsx
+++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/DynamicPromptsPreviewModal.tsx
@@ -6,7 +6,7 @@ import {
   ModalContent,
   ModalHeader,
   ModalOverlay,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useDynamicPromptsModal } from 'features/dynamicPrompts/hooks/useDynamicPromptsModal';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCombinatorial.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCombinatorial.tsx
index 1a772d8245..64901ddb86 100644
--- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCombinatorial.tsx
+++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCombinatorial.tsx
@@ -1,4 +1,4 @@
-import { FormControl, FormLabel, Switch } from '@invoke-ai/ui';
+import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { combinatorialToggled } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
 import { memo, useCallback } from 'react';
diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx
index cd0daaf22a..1dcd95010e 100644
--- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx
+++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { maxPromptsChanged } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx
index 48cfd9a8d4..0c374995a7 100644
--- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx
+++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx
@@ -1,4 +1,4 @@
-import type { ChakraProps } from '@invoke-ai/ui';
+import type { ChakraProps } from '@invoke-ai/ui-library';
 import {
   Flex,
   FormControl,
@@ -7,7 +7,7 @@ import {
   OrderedList,
   Spinner,
   Text,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsSeedBehaviour.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsSeedBehaviour.tsx
index 87a860ac89..7fb6e1a116 100644
--- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsSeedBehaviour.tsx
+++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsSeedBehaviour.tsx
@@ -1,5 +1,5 @@
-import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui';
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
+import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import {
diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx
index b590767868..78cd48f22f 100644
--- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx
+++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx
@@ -1,5 +1,5 @@
-import type { SystemStyleObject } from '@invoke-ai/ui';
-import { IconButton, spinAnimation, Tooltip } from '@invoke-ai/ui';
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { IconButton, spinAnimation, Tooltip } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useDynamicPromptsModal } from 'features/dynamicPrompts/hooks/useDynamicPromptsModal';
 import { memo } from 'react';
diff --git a/invokeai/frontend/web/src/features/embedding/AddEmbeddingButton.tsx b/invokeai/frontend/web/src/features/embedding/AddEmbeddingButton.tsx
index c1207a13b0..d32d6006ae 100644
--- a/invokeai/frontend/web/src/features/embedding/AddEmbeddingButton.tsx
+++ b/invokeai/frontend/web/src/features/embedding/AddEmbeddingButton.tsx
@@ -1,4 +1,4 @@
-import { IconButton, Tooltip } from '@invoke-ai/ui';
+import { IconButton, Tooltip } from '@invoke-ai/ui-library';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiCodeBold } from 'react-icons/pi';
diff --git a/invokeai/frontend/web/src/features/embedding/EmbeddingPopover.tsx b/invokeai/frontend/web/src/features/embedding/EmbeddingPopover.tsx
index bd39c1012a..42c690fe13 100644
--- a/invokeai/frontend/web/src/features/embedding/EmbeddingPopover.tsx
+++ b/invokeai/frontend/web/src/features/embedding/EmbeddingPopover.tsx
@@ -3,7 +3,7 @@ import {
   PopoverAnchor,
   PopoverBody,
   PopoverContent,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { EmbeddingSelect } from 'features/embedding/EmbeddingSelect';
 import type { EmbeddingPopoverProps } from 'features/embedding/types';
 import { memo } from 'react';
diff --git a/invokeai/frontend/web/src/features/embedding/EmbeddingSelect.tsx b/invokeai/frontend/web/src/features/embedding/EmbeddingSelect.tsx
index 2a263894ff..d90e0ac93c 100644
--- a/invokeai/frontend/web/src/features/embedding/EmbeddingSelect.tsx
+++ b/invokeai/frontend/web/src/features/embedding/EmbeddingSelect.tsx
@@ -1,5 +1,5 @@
-import type { ChakraProps } from '@invoke-ai/ui';
-import { Combobox, FormControl } from '@invoke-ai/ui';
+import type { ChakraProps } from '@invoke-ai/ui-library';
+import { Combobox, FormControl } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import type { EmbeddingSelectProps } from 'features/embedding/types';
diff --git a/invokeai/frontend/web/src/features/embedding/usePrompt.ts b/invokeai/frontend/web/src/features/embedding/usePrompt.ts
index 4c5878df6f..cdc4b1b80f 100644
--- a/invokeai/frontend/web/src/features/embedding/usePrompt.ts
+++ b/invokeai/frontend/web/src/features/embedding/usePrompt.ts
@@ -1,4 +1,4 @@
-import { useDisclosure } from '@invoke-ai/ui';
+import { useDisclosure } from '@invoke-ai/ui-library';
 import { isNil } from 'lodash-es';
 import type {
   ChangeEventHandler,
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddIcon.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddIcon.tsx
index edb15344c4..6541b66151 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddIcon.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddIcon.tsx
@@ -1,4 +1,4 @@
-import { Badge, Flex } from '@invoke-ai/ui';
+import { Badge, Flex } from '@invoke-ai/ui-library';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx
index 0286dd350d..73bb073464 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx
@@ -1,5 +1,5 @@
-import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui';
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
+import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { autoAddBoardIdChanged } from 'features/gallery/store/gallerySlice';
 import { memo, useCallback, useMemo } from 'react';
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx
index 09c4e94709..2e1f4ce90a 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx
@@ -1,5 +1,5 @@
-import type { ContextMenuProps } from '@invoke-ai/ui';
-import { ContextMenu, MenuGroup, MenuItem, MenuList } from '@invoke-ai/ui';
+import type { ContextMenuProps } from '@invoke-ai/ui-library';
+import { ContextMenu, MenuGroup, MenuItem, MenuList } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/AddBoardButton.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/AddBoardButton.tsx
index 5e7a4b0f99..5cd4d001f4 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/AddBoardButton.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/AddBoardButton.tsx
@@ -1,4 +1,4 @@
-import { IconButton } from '@invoke-ai/ui';
+import { IconButton } from '@invoke-ai/ui-library';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiPlusBold } from 'react-icons/pi';
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
index 4d62e5393c..ee5a7818d4 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
@@ -1,4 +1,4 @@
-import { Collapse, Flex, Grid, GridItem } from '@invoke-ai/ui';
+import { Collapse, Flex, Grid, GridItem } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
 import DeleteBoardModal from 'features/gallery/components/Boards/DeleteBoardModal';
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx
index 99d5367dd2..09e6fe0b26 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx
@@ -3,7 +3,7 @@ import {
   Input,
   InputGroup,
   InputRightElement,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { boardSearchTextChanged } from 'features/gallery/store/gallerySlice';
 import type { ChangeEvent, KeyboardEvent } from 'react';
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
index ca6eac89e4..c887777cdf 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
@@ -1,4 +1,4 @@
-import type { SystemStyleObject } from '@invoke-ai/ui';
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import {
   Box,
   Editable,
@@ -9,7 +9,7 @@ import {
   Image,
   Text,
   Tooltip,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx
index c8e8e3bb53..b7bfcdacac 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Image, Text, Tooltip } from '@invoke-ai/ui';
+import { Box, Flex, Image, Text, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIDroppable from 'common/components/IAIDroppable';
 import SelectionOverlay from 'common/components/SelectionOverlay';
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx
index 0f78177371..36a098df84 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx
@@ -9,7 +9,7 @@ import {
   Flex,
   Skeleton,
   Text,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/GalleryBoardContextMenuItems.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/GalleryBoardContextMenuItems.tsx
index 70e22a920c..9e7df6d16c 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/GalleryBoardContextMenuItems.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/GalleryBoardContextMenuItems.tsx
@@ -1,4 +1,4 @@
-import { MenuItem } from '@invoke-ai/ui';
+import { MenuItem } from '@invoke-ai/ui-library';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiTrashSimpleBold } from 'react-icons/pi';
diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx
index d141371d3c..24293ef070 100644
--- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx
@@ -5,7 +5,7 @@ import {
   Menu,
   MenuButton,
   MenuList,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { useAppToaster } from 'app/components/Toaster';
diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageDisplay.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageDisplay.tsx
index 5d7a3755c3..f4b707b859 100644
--- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageDisplay.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageDisplay.tsx
@@ -1,4 +1,4 @@
-import { Flex } from '@invoke-ai/ui';
+import { Flex } from '@invoke-ai/ui-library';
 import { memo } from 'react';
 
 import CurrentImageButtons from './CurrentImageButtons';
diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx
index 1496562d5e..a81aca16ed 100644
--- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex } from '@invoke-ai/ui';
+import { Box, Flex } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { useAppSelector } from 'app/store/storeHooks';
diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/ProgressImage.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/ProgressImage.tsx
index 6cb5ee05be..4b38743438 100644
--- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/ProgressImage.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/ProgressImage.tsx
@@ -1,5 +1,5 @@
-import type { SystemStyleObject } from '@invoke-ai/ui';
-import { Image } from '@invoke-ai/ui';
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { Image } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { memo, useMemo } from 'react';
 
diff --git a/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx b/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx
index 04a4ae8078..55aec17ab2 100644
--- a/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx
@@ -1,4 +1,4 @@
-import { Button, Flex, Icon, Spacer } from '@invoke-ai/ui';
+import { Button, Flex, Icon, Spacer } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { memo, useMemo } from 'react';
 import { PiCaretUpBold } from 'react-icons/pi';
diff --git a/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx b/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx
index bc5720e9fc..7672070463 100644
--- a/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx
@@ -1,4 +1,4 @@
-import type { FormLabelProps } from '@invoke-ai/ui';
+import type { FormLabelProps } from '@invoke-ai/ui-library';
 import {
   Checkbox,
   CompositeSlider,
@@ -12,7 +12,7 @@ import {
   PopoverContent,
   PopoverTrigger,
   Switch,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
   autoAssignBoardOnClickChanged,
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx
index ada0d7bf61..632763e313 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx
@@ -1,5 +1,5 @@
-import type { ContextMenuProps } from '@invoke-ai/ui';
-import { ContextMenu, MenuList } from '@invoke-ai/ui';
+import type { ContextMenuProps } from '@invoke-ai/ui-library';
+import { ContextMenu, MenuList } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { memo, useCallback } from 'react';
 import type { ImageDTO } from 'services/api/types';
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx
index bf30bd2565..64298a2f34 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx
@@ -1,4 +1,4 @@
-import { MenuDivider, MenuItem } from '@invoke-ai/ui';
+import { MenuDivider, MenuItem } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { $customStarUI } from 'app/store/nanostores/customStarUI';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
index 049c58e70b..8147892ac4 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
@@ -1,4 +1,4 @@
-import { Flex, MenuDivider, MenuItem, Spinner } from '@invoke-ai/ui';
+import { Flex, MenuDivider, MenuItem, Spinner } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { useAppToaster } from 'app/components/Toaster';
 import { $customStarUI } from 'app/store/nanostores/customStarUI';
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
index aad3bfeecc..16a1b367b1 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
@@ -8,7 +8,7 @@ import {
   Tabs,
   useDisclosure,
   VStack,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { $galleryHeader } from 'app/store/nanostores/galleryHeader';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
index 3c141a3b5b..25e6fcafdd 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
@@ -1,5 +1,5 @@
-import type { SystemStyleObject } from '@invoke-ai/ui';
-import { Box, Flex, useShiftModifier } from '@invoke-ai/ui';
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { Box, Flex, useShiftModifier } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { $customStarUI } from 'app/store/nanostores/customStarUI';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx
index b806909c46..86375af208 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Flex } from '@invoke-ai/ui';
+import { Box, Button, Flex } from '@invoke-ai/ui-library';
 import type { EntityId } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridItemContainer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridItemContainer.tsx
index 26247cc864..0e8a278371 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridItemContainer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridItemContainer.tsx
@@ -1,5 +1,5 @@
-import type { FlexProps } from '@invoke-ai/ui';
-import { Box, forwardRef } from '@invoke-ai/ui';
+import type { FlexProps } from '@invoke-ai/ui-library';
+import { Box, forwardRef } from '@invoke-ai/ui-library';
 import type { PropsWithChildren } from 'react';
 import { memo } from 'react';
 
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridListContainer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridListContainer.tsx
index 58d074712f..6a43171975 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridListContainer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridListContainer.tsx
@@ -1,5 +1,5 @@
-import type { FlexProps } from '@invoke-ai/ui';
-import { forwardRef, Grid } from '@invoke-ai/ui';
+import type { FlexProps } from '@invoke-ai/ui-library';
+import { forwardRef, Grid } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import type { PropsWithChildren } from 'react';
 import { memo } from 'react';
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx
index 394b6cbda9..8c5d55deef 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, IconButton, Tooltip } from '@invoke-ai/ui';
+import { Box, Flex, IconButton, Tooltip } from '@invoke-ai/ui-library';
 import { getOverlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
 import { isString } from 'lodash-es';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx
index 976ca2d5b6..7863a1ccb5 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx
@@ -1,4 +1,4 @@
-import { ExternalLink, Flex, IconButton, Text, Tooltip } from '@invoke-ai/ui';
+import { ExternalLink, Flex, IconButton, Text, Tooltip } from '@invoke-ai/ui-library';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { IoArrowUndoCircleOutline } from 'react-icons/io5';
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx
index 58c04e483b..d0d18c93fc 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx
@@ -6,7 +6,7 @@ import {
   TabPanel,
   TabPanels,
   Tabs,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { memo } from 'react';
diff --git a/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx
index 350ac9be1c..f526a1077f 100644
--- a/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx
@@ -1,5 +1,5 @@
-import type { ChakraProps } from '@invoke-ai/ui';
-import { Box, Flex, IconButton, Spinner } from '@invoke-ai/ui';
+import type { ChakraProps } from '@invoke-ai/ui-library';
+import { Box, Flex, IconButton, Spinner } from '@invoke-ai/ui-library';
 import { useGalleryImages } from 'features/gallery/hooks/useGalleryImages';
 import { useGalleryNavigation } from 'features/gallery/hooks/useGalleryNavigation';
 import { memo } from 'react';
diff --git a/invokeai/frontend/web/src/features/hrf/components/HrfSettings.tsx b/invokeai/frontend/web/src/features/hrf/components/HrfSettings.tsx
index cca4c49259..2cb96a935f 100644
--- a/invokeai/frontend/web/src/features/hrf/components/HrfSettings.tsx
+++ b/invokeai/frontend/web/src/features/hrf/components/HrfSettings.tsx
@@ -1,4 +1,4 @@
-import { FormControlGroup } from '@invoke-ai/ui';
+import { FormControlGroup } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { memo } from 'react';
diff --git a/invokeai/frontend/web/src/features/hrf/components/ParamHrfMethod.tsx b/invokeai/frontend/web/src/features/hrf/components/ParamHrfMethod.tsx
index f13c041f79..e045bdf767 100644
--- a/invokeai/frontend/web/src/features/hrf/components/ParamHrfMethod.tsx
+++ b/invokeai/frontend/web/src/features/hrf/components/ParamHrfMethod.tsx
@@ -1,5 +1,5 @@
-import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui';
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
+import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setHrfMethod } from 'features/hrf/store/hrfSlice';
 import { isParameterHRFMethod } from 'features/parameters/types/parameterSchemas';
diff --git a/invokeai/frontend/web/src/features/hrf/components/ParamHrfStrength.tsx b/invokeai/frontend/web/src/features/hrf/components/ParamHrfStrength.tsx
index 3033b6f578..ca42ae5055 100644
--- a/invokeai/frontend/web/src/features/hrf/components/ParamHrfStrength.tsx
+++ b/invokeai/frontend/web/src/features/hrf/components/ParamHrfStrength.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setHrfStrength } from 'features/hrf/store/hrfSlice';
 import { memo, useCallback } from 'react';
diff --git a/invokeai/frontend/web/src/features/hrf/components/ParamHrfToggle.tsx b/invokeai/frontend/web/src/features/hrf/components/ParamHrfToggle.tsx
index 47ce6190fc..5bdd85a679 100644
--- a/invokeai/frontend/web/src/features/hrf/components/ParamHrfToggle.tsx
+++ b/invokeai/frontend/web/src/features/hrf/components/ParamHrfToggle.tsx
@@ -1,4 +1,4 @@
-import { FormControl, FormLabel, Switch } from '@invoke-ai/ui';
+import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setHrfEnabled } from 'features/hrf/store/hrfSlice';
 import type { ChangeEvent } from 'react';
diff --git a/invokeai/frontend/web/src/features/lora/components/LoRACard.tsx b/invokeai/frontend/web/src/features/lora/components/LoRACard.tsx
index 9fdaa64bcc..f0c8e3fcd3 100644
--- a/invokeai/frontend/web/src/features/lora/components/LoRACard.tsx
+++ b/invokeai/frontend/web/src/features/lora/components/LoRACard.tsx
@@ -6,7 +6,7 @@ import {
   CompositeSlider,
   IconButton,
   Text,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import type { LoRA } from 'features/lora/store/loraSlice';
 import { loraRemoved, loraWeightChanged } from 'features/lora/store/loraSlice';
diff --git a/invokeai/frontend/web/src/features/lora/components/LoRAList.tsx b/invokeai/frontend/web/src/features/lora/components/LoRAList.tsx
index 4804cf76c6..3983062af1 100644
--- a/invokeai/frontend/web/src/features/lora/components/LoRAList.tsx
+++ b/invokeai/frontend/web/src/features/lora/components/LoRAList.tsx
@@ -1,4 +1,4 @@
-import { Flex } from '@invoke-ai/ui';
+import { Flex } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { LoRACard } from 'features/lora/components/LoRACard';
diff --git a/invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx b/invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx
index 8b51e6876e..aa866e8a55 100644
--- a/invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx
+++ b/invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx
@@ -1,5 +1,5 @@
-import type { ChakraProps } from '@invoke-ai/ui';
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
+import type { ChakraProps } from '@invoke-ai/ui-library';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
diff --git a/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsButton.tsx b/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsButton.tsx
index 0fd2bdb3a6..8a49bc2585 100644
--- a/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsButton.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsButton.tsx
@@ -1,5 +1,5 @@
-import type { ButtonProps } from '@invoke-ai/ui';
-import { Button } from '@invoke-ai/ui';
+import type { ButtonProps } from '@invoke-ai/ui-library';
+import { Button } from '@invoke-ai/ui-library';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
diff --git a/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsIconButton.tsx b/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsIconButton.tsx
index 0bff475673..3cf5f7444a 100644
--- a/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsIconButton.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsIconButton.tsx
@@ -1,5 +1,5 @@
-import type { IconButtonProps } from '@invoke-ai/ui';
-import { IconButton } from '@invoke-ai/ui';
+import type { IconButtonProps } from '@invoke-ai/ui-library';
+import { IconButton } from '@invoke-ai/ui-library';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx
index c3e85a3a5b..a056e54a10 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx
@@ -1,4 +1,4 @@
-import { Button, ButtonGroup, Flex } from '@invoke-ai/ui';
+import { Button, ButtonGroup, Flex } from '@invoke-ai/ui-library';
 import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx
index 0960c51417..9067d243fb 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx
@@ -6,7 +6,7 @@ import {
   FormErrorMessage,
   FormLabel,
   Input,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { setAdvancedAddScanModel } from 'features/modelManager/store/modelManagerSlice';
 import BaseModelSelect from 'features/modelManager/subpanels/shared/BaseModelSelect';
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx
index 090b65f8d7..d2be92392e 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx
@@ -5,7 +5,7 @@ import {
   FormErrorMessage,
   FormLabel,
   Input,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { setAdvancedAddScanModel } from 'features/modelManager/store/modelManagerSlice';
 import BaseModelSelect from 'features/modelManager/subpanels/shared/BaseModelSelect';
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx
index 7ea4c68370..2ce9392ef0 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx
@@ -1,5 +1,5 @@
-import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui';
-import { Combobox, Flex, FormControl, FormLabel } from '@invoke-ai/ui';
+import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
+import { Combobox, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx
index 9f58558d7a..6dd48e0aaf 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx
@@ -5,7 +5,7 @@ import {
   FormLabel,
   Input,
   Text,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { setAdvancedAddScanModel } from 'features/modelManager/store/modelManagerSlice';
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx
index 933a3c8498..c008038548 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx
@@ -1,4 +1,4 @@
-import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui';
+import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
 import {
   Box,
   Combobox,
@@ -7,7 +7,7 @@ import {
   FormLabel,
   IconButton,
   Text,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setAdvancedAddScanModel } from 'features/modelManager/store/modelManagerSlice';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanModels.tsx
index 694bcbc644..f3287270a2 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanModels.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanModels.tsx
@@ -1,4 +1,4 @@
-import { Flex } from '@invoke-ai/ui';
+import { Flex } from '@invoke-ai/ui-library';
 import { memo } from 'react';
 
 import FoundModelsList from './FoundModelsList';
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx
index 6e3368a4d2..3441ab0d4f 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx
@@ -1,4 +1,4 @@
-import { Flex, IconButton, Input, Text } from '@invoke-ai/ui';
+import { Flex, IconButton, Input, Text } from '@invoke-ai/ui-library';
 import { useForm } from '@mantine/form';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx
index 8b7367153e..aa74fc419f 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx
@@ -1,4 +1,4 @@
-import type { ComboboxOption } from '@invoke-ai/ui';
+import type { ComboboxOption } from '@invoke-ai/ui-library';
 import {
   Button,
   Combobox,
@@ -6,7 +6,7 @@ import {
   FormControl,
   FormLabel,
   Input,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useForm } from '@mantine/form';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { addToast } from 'features/system/store/systemSlice';
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ImportModelsPanel.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ImportModelsPanel.tsx
index 370af663f3..3558650f5b 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/ImportModelsPanel.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ImportModelsPanel.tsx
@@ -1,4 +1,4 @@
-import { Button, ButtonGroup, Flex } from '@invoke-ai/ui';
+import { Button, ButtonGroup, Flex } from '@invoke-ai/ui-library';
 import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx
index 8c113f5da5..865eb4914c 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx
@@ -1,4 +1,4 @@
-import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui';
+import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
 import {
   Button,
   Checkbox,
@@ -14,7 +14,7 @@ import {
   RadioGroup,
   Text,
   Tooltip,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { addToast } from 'features/system/store/systemSlice';
 import { makeToast } from 'features/system/util/makeToast';
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel.tsx
index 55272a98cc..aae1b4c05d 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text } from '@invoke-ai/ui';
+import { Flex, Text } from '@invoke-ai/ui-library';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ALL_BASE_MODELS } from 'services/api/constants';
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx
index 549c725b34..ecd89cc62a 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx
@@ -9,7 +9,7 @@ import {
   FormLabel,
   Input,
   Text,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import BaseModelSelect from 'features/modelManager/subpanels/shared/BaseModelSelect';
 import CheckpointConfigsSelect from 'features/modelManager/subpanels/shared/CheckpointConfigsSelect';
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx
index a873d06e61..c2c33fb63b 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx
@@ -7,7 +7,7 @@ import {
   FormLabel,
   Input,
   Text,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import BaseModelSelect from 'features/modelManager/subpanels/shared/BaseModelSelect';
 import ModelVariantSelect from 'features/modelManager/subpanels/shared/ModelVariantSelect';
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx
index 67a6f5c1e5..2c82ca56f9 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx
@@ -7,7 +7,7 @@ import {
   FormLabel,
   Input,
   Text,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import BaseModelSelect from 'features/modelManager/subpanels/shared/BaseModelSelect';
 import {
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelConvert.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelConvert.tsx
index ca272e8eff..748734fdde 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelConvert.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelConvert.tsx
@@ -12,7 +12,7 @@ import {
   Tooltip,
   UnorderedList,
   useDisclosure,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { addToast } from 'features/system/store/systemSlice';
 import { makeToast } from 'features/system/util/makeToast';
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelList.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelList.tsx
index 547050f80f..e138062b70 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelList.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelList.tsx
@@ -7,7 +7,7 @@ import {
   Input,
   Spinner,
   Text,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import type { EntityState } from '@reduxjs/toolkit';
 import { forEach } from 'lodash-es';
 import type { ChangeEvent, PropsWithChildren } from 'react';
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx
index 48774809d2..6203ea12f4 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx
@@ -7,7 +7,7 @@ import {
   Text,
   Tooltip,
   useDisclosure,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { MODEL_TYPE_SHORT_MAP } from 'features/parameters/types/constants';
 import { addToast } from 'features/system/store/systemSlice';
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel.tsx
index 91a6be5044..50118d9b97 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel.tsx
@@ -1,4 +1,4 @@
-import { Flex } from '@invoke-ai/ui';
+import { Flex } from '@invoke-ai/ui-library';
 import { memo } from 'react';
 
 import SyncModels from './ModelManagerSettingsPanel/SyncModels';
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModels.tsx
index d851b566ce..78a69fa0c4 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModels.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModels.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text } from '@invoke-ai/ui';
+import { Flex, Text } from '@invoke-ai/ui-library';
 import { SyncModelsButton } from 'features/modelManager/components/SyncModels/SyncModelsButton';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/BaseModelSelect.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/BaseModelSelect.tsx
index fdae4da7dd..345d13c2ea 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/BaseModelSelect.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/BaseModelSelect.tsx
@@ -1,5 +1,5 @@
-import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui';
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
+import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { typedMemo } from 'common/util/typedMemo';
 import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
 import { useCallback, useMemo } from 'react';
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/CheckpointConfigsSelect.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/CheckpointConfigsSelect.tsx
index 1e9ce209d3..2a15e3aabf 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/CheckpointConfigsSelect.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/CheckpointConfigsSelect.tsx
@@ -2,8 +2,8 @@ import type {
   ChakraProps,
   ComboboxOnChange,
   ComboboxOption,
-} from '@invoke-ai/ui';
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { memo, useCallback, useMemo } from 'react';
 import { useController, type UseControllerProps } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/ModelVariantSelect.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/ModelVariantSelect.tsx
index 4514e18250..6dcd5f28d3 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/ModelVariantSelect.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/ModelVariantSelect.tsx
@@ -1,5 +1,5 @@
-import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui';
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
+import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { typedMemo } from 'common/util/typedMemo';
 import { useCallback, useMemo } from 'react';
 import type { UseControllerProps } from 'react-hook-form';
diff --git a/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx b/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
index 65d142a830..c527085733 100644
--- a/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
@@ -1,6 +1,6 @@
 import 'reactflow/dist/style.css';
 
-import { Flex } from '@invoke-ai/ui';
+import { Flex } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import TopPanel from 'features/nodes/components/flow/panels/TopPanel/TopPanel';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx
index 368f3c4f7e..934c071da7 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx
@@ -1,6 +1,6 @@
 import 'reactflow/dist/style.css';
 
-import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui';
+import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
 import {
   Combobox,
   Flex,
@@ -8,7 +8,7 @@ import {
   PopoverAnchor,
   PopoverBody,
   PopoverContent,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppToaster } from 'app/components/Toaster';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx
index ff69164eb3..69109fe9f6 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx
@@ -1,4 +1,4 @@
-import { useGlobalMenuClose, useToken } from '@invoke-ai/ui';
+import { useGlobalMenuClose, useToken } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useIsValidConnection } from 'features/nodes/hooks/useIsValidConnection';
 import { $mouseOverNode } from 'features/nodes/hooks/useMouseOverNode';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx
index 4c313d8f15..084147675d 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx
@@ -1,4 +1,4 @@
-import { Badge, Flex } from '@invoke-ai/ui';
+import { Badge, Flex } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useChakraThemeTokens } from 'common/hooks/useChakraThemeTokens';
 import { memo, useMemo } from 'react';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx
index 038370db9c..3439bb76f0 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx
@@ -1,4 +1,4 @@
-import { Flex, Image, Text } from '@invoke-ai/ui';
+import { Flex, Image, Text } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import IAIDndImage from 'common/components/IAIDndImage';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx
index f798454be1..e14385c764 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx
@@ -1,4 +1,4 @@
-import { Flex, Grid, GridItem } from '@invoke-ai/ui';
+import { Flex, Grid, GridItem } from '@invoke-ai/ui-library';
 import NodeWrapper from 'features/nodes/components/flow/nodes/common/NodeWrapper';
 import { useAnyOrDirectInputFieldNames } from 'features/nodes/hooks/useAnyOrDirectInputFieldNames';
 import { useConnectionInputFieldNames } from 'features/nodes/hooks/useConnectionInputFieldNames';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon.tsx
index 0f21fd8c92..8e1147b944 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon.tsx
@@ -1,4 +1,4 @@
-import { Icon, Tooltip } from '@invoke-ai/ui';
+import { Icon, Tooltip } from '@invoke-ai/ui-library';
 import { useNodeClassification } from 'features/nodes/hooks/useNodeClassification';
 import type { Classification } from 'features/nodes/types/common';
 import { memo } from 'react';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeFooter.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeFooter.tsx
index abe4ca0856..1b93c0fdd3 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeFooter.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeFooter.tsx
@@ -1,5 +1,5 @@
-import type { ChakraProps } from '@invoke-ai/ui';
-import { Flex, FormControlGroup } from '@invoke-ai/ui';
+import type { ChakraProps } from '@invoke-ai/ui-library';
+import { Flex, FormControlGroup } from '@invoke-ai/ui-library';
 import { useHasImageOutput } from 'features/nodes/hooks/useHasImageOutput';
 import { DRAG_HANDLE_CLASSNAME } from 'features/nodes/types/constants';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeHeader.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeHeader.tsx
index 99caba2df8..21ba769bfd 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeHeader.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeHeader.tsx
@@ -1,4 +1,4 @@
-import { Flex } from '@invoke-ai/ui';
+import { Flex } from '@invoke-ai/ui-library';
 import NodeCollapseButton from 'features/nodes/components/flow/nodes/common/NodeCollapseButton';
 import NodeTitle from 'features/nodes/components/flow/nodes/common/NodeTitle';
 import InvocationNodeClassificationIcon from 'features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx
index 42fd120cd1..01a6d2e493 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx
@@ -1,4 +1,4 @@
-import { Flex, Icon, Text, Tooltip } from '@invoke-ai/ui';
+import { Flex, Icon, Text, Tooltip } from '@invoke-ai/ui-library';
 import { compare } from 'compare-versions';
 import { useNodeData } from 'features/nodes/hooks/useNodeData';
 import { useNodeNeedsUpdate } from 'features/nodes/hooks/useNodeNeedsUpdate';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx
index b96edf9b2a..0586353e64 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx
@@ -1,4 +1,4 @@
-import type { SystemStyleObject } from '@invoke-ai/ui';
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import {
   Badge,
   CircularProgress,
@@ -7,7 +7,7 @@ import {
   Image,
   Text,
   Tooltip,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeUnknownFallback.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeUnknownFallback.tsx
index a1d1a93b0c..914eb134f1 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeUnknownFallback.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeUnknownFallback.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text } from '@invoke-ai/ui';
+import { Flex, Text } from '@invoke-ai/ui-library';
 import NodeCollapseButton from 'features/nodes/components/flow/nodes/common/NodeCollapseButton';
 import NodeWrapper from 'features/nodes/components/flow/nodes/common/NodeWrapper';
 import { useNodePack } from 'features/nodes/hooks/useNodePack';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/NotesTextarea.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/NotesTextarea.tsx
index 6e092b0448..a6bdb1fa75 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/NotesTextarea.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/NotesTextarea.tsx
@@ -1,4 +1,4 @@
-import { FormControl, FormLabel, Textarea } from '@invoke-ai/ui';
+import { FormControl, FormLabel, Textarea } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useNodeData } from 'features/nodes/hooks/useNodeData';
 import { nodeNotesChanged } from 'features/nodes/store/nodesSlice';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/SaveToGalleryCheckbox.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/SaveToGalleryCheckbox.tsx
index ca18428d30..55ad9dcbf6 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/SaveToGalleryCheckbox.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/SaveToGalleryCheckbox.tsx
@@ -1,4 +1,4 @@
-import { Checkbox, FormControl, FormLabel } from '@invoke-ai/ui';
+import { Checkbox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useHasImageOutput } from 'features/nodes/hooks/useHasImageOutput';
 import { useIsIntermediate } from 'features/nodes/hooks/useIsIntermediate';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/UseCacheCheckbox.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/UseCacheCheckbox.tsx
index 3385c23940..e900747bbd 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/UseCacheCheckbox.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/UseCacheCheckbox.tsx
@@ -1,4 +1,4 @@
-import { Checkbox, FormControl, FormLabel } from '@invoke-ai/ui';
+import { Checkbox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useUseCache } from 'features/nodes/hooks/useUseCache';
 import { nodeUseCacheChanged } from 'features/nodes/store/nodesSlice';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/EditableFieldTitle.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/EditableFieldTitle.tsx
index 65d41accec..c5cbda148e 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/EditableFieldTitle.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/EditableFieldTitle.tsx
@@ -1,4 +1,4 @@
-import type { SystemStyleObject } from '@invoke-ai/ui';
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import {
   Editable,
   EditableInput,
@@ -7,7 +7,7 @@ import {
   forwardRef,
   Tooltip,
   useEditableControls,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useFieldLabel } from 'features/nodes/hooks/useFieldLabel';
 import { useFieldTemplateTitle } from 'features/nodes/hooks/useFieldTemplateTitle';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx
index 6c83cf2e9f..7ef79d9544 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx
@@ -1,5 +1,5 @@
-import type { ContextMenuProps } from '@invoke-ai/ui';
-import { ContextMenu, MenuGroup, MenuItem, MenuList } from '@invoke-ai/ui';
+import type { ContextMenuProps } from '@invoke-ai/ui-library';
+import { ContextMenu, MenuGroup, MenuItem, MenuList } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useFieldInputKind } from 'features/nodes/hooks/useFieldInputKind';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldHandle.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldHandle.tsx
index 1860217a92..84aebce773 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldHandle.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldHandle.tsx
@@ -1,4 +1,4 @@
-import { Tooltip } from '@invoke-ai/ui';
+import { Tooltip } from '@invoke-ai/ui-library';
 import { colorTokenToCssVar } from 'common/util/colorTokenToCssVar';
 import { getFieldColor } from 'features/nodes/components/flow/edges/util/getEdgeColor';
 import { useFieldTypeName } from 'features/nodes/hooks/usePrettyFieldType';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTitle.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTitle.tsx
index ead253c06e..dd934478e6 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTitle.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTitle.tsx
@@ -1,4 +1,4 @@
-import { Flex, forwardRef, Text } from '@invoke-ai/ui';
+import { Flex, forwardRef, Text } from '@invoke-ai/ui-library';
 import { useFieldLabel } from 'features/nodes/hooks/useFieldLabel';
 import { useFieldTemplateTitle } from 'features/nodes/hooks/useFieldTemplateTitle';
 import { memo } from 'react';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTooltipContent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTooltipContent.tsx
index 5251da442e..c87649cca0 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTooltipContent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTooltipContent.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text } from '@invoke-ai/ui';
+import { Flex, Text } from '@invoke-ai/ui-library';
 import { useFieldInstance } from 'features/nodes/hooks/useFieldData';
 import { useFieldTemplate } from 'features/nodes/hooks/useFieldTemplate';
 import { useFieldTypeName } from 'features/nodes/hooks/usePrettyFieldType';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx
index 0de87b8f58..d2513f27c1 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx
@@ -1,4 +1,4 @@
-import { Flex, FormControl, FormLabel } from '@invoke-ai/ui';
+import { Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useConnectionState } from 'features/nodes/hooks/useConnectionState';
 import { useDoesInputHaveValue } from 'features/nodes/hooks/useDoesInputHaveValue';
 import { useFieldInputInstance } from 'features/nodes/hooks/useFieldInputInstance';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx
index 161d5b64fd..9f3d9e2389 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx
@@ -1,4 +1,4 @@
-import { Box, Text } from '@invoke-ai/ui';
+import { Box, Text } from '@invoke-ai/ui-library';
 import { useFieldInstance } from 'features/nodes/hooks/useFieldData';
 import { useFieldTemplate } from 'features/nodes/hooks/useFieldTemplate';
 import {
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx
index 1c7d749b1e..6afc9b2485 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx
@@ -1,4 +1,4 @@
-import { Flex, Icon, IconButton, Spacer, Tooltip } from '@invoke-ai/ui';
+import { Flex, Icon, IconButton, Spacer, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import NodeSelectionOverlay from 'common/components/NodeSelectionOverlay';
 import { useMouseOverNode } from 'features/nodes/hooks/useMouseOverNode';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputField.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputField.tsx
index f88dedb178..213d4eb891 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputField.tsx
@@ -1,4 +1,4 @@
-import { Flex, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui';
+import { Flex, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui-library';
 import { useConnectionState } from 'features/nodes/hooks/useConnectionState';
 import { useFieldOutputInstance } from 'features/nodes/hooks/useFieldOutputInstance';
 import { useFieldOutputTemplate } from 'features/nodes/hooks/useFieldOutputTemplate';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/BoardFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/BoardFieldInputComponent.tsx
index 43c5246962..136445177a 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/BoardFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/BoardFieldInputComponent.tsx
@@ -1,5 +1,5 @@
-import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui';
-import { Combobox, FormControl } from '@invoke-ai/ui';
+import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
+import { Combobox, FormControl } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { fieldBoardValueChanged } from 'features/nodes/store/nodesSlice';
 import type {
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/BooleanFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/BooleanFieldInputComponent.tsx
index b4eb9b3b01..fdd8ab7355 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/BooleanFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/BooleanFieldInputComponent.tsx
@@ -1,4 +1,4 @@
-import { Switch } from '@invoke-ai/ui';
+import { Switch } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { fieldBooleanValueChanged } from 'features/nodes/store/nodesSlice';
 import type {
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ControlNetModelFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ControlNetModelFieldInputComponent.tsx
index 8b3c138a2f..0ff6243e19 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ControlNetModelFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ControlNetModelFieldInputComponent.tsx
@@ -1,4 +1,4 @@
-import { Combobox, FormControl, Tooltip } from '@invoke-ai/ui';
+import { Combobox, FormControl, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { fieldControlNetModelValueChanged } from 'features/nodes/store/nodesSlice';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/EnumFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/EnumFieldInputComponent.tsx
index 4d123a03b1..586def4367 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/EnumFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/EnumFieldInputComponent.tsx
@@ -1,4 +1,4 @@
-import { Select } from '@invoke-ai/ui';
+import { Select } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { fieldEnumModelValueChanged } from 'features/nodes/store/nodesSlice';
 import type {
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IPAdapterModelFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IPAdapterModelFieldInputComponent.tsx
index 20867949f5..e77652eb31 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IPAdapterModelFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IPAdapterModelFieldInputComponent.tsx
@@ -1,4 +1,4 @@
-import { Combobox, FormControl, Tooltip } from '@invoke-ai/ui';
+import { Combobox, FormControl, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { fieldIPAdapterModelValueChanged } from 'features/nodes/store/nodesSlice';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldInputComponent.tsx
index 67d4f366ca..04b8992910 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldInputComponent.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text } from '@invoke-ai/ui';
+import { Flex, Text } from '@invoke-ai/ui-library';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIDndImage from 'common/components/IAIDndImage';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/LoRAModelFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/LoRAModelFieldInputComponent.tsx
index 84dcdae740..e964ea3b95 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/LoRAModelFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/LoRAModelFieldInputComponent.tsx
@@ -1,4 +1,4 @@
-import { Combobox, FormControl } from '@invoke-ai/ui';
+import { Combobox, FormControl } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { fieldLoRAModelValueChanged } from 'features/nodes/store/nodesSlice';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/MainModelFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/MainModelFieldInputComponent.tsx
index b7c059a288..2f3605139f 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/MainModelFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/MainModelFieldInputComponent.tsx
@@ -1,4 +1,4 @@
-import { Combobox, Flex, FormControl } from '@invoke-ai/ui';
+import { Combobox, Flex, FormControl } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { SyncModelsIconButton } from 'features/modelManager/components/SyncModels/SyncModelsIconButton';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldInputComponent.tsx
index 08838057af..e9e84e526b 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldInputComponent.tsx
@@ -1,4 +1,4 @@
-import { CompositeNumberInput } from '@invoke-ai/ui';
+import { CompositeNumberInput } from '@invoke-ai/ui-library';
 import { NUMPY_RAND_MAX } from 'app/constants';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { fieldNumberValueChanged } from 'features/nodes/store/nodesSlice';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/RefinerModelFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/RefinerModelFieldInputComponent.tsx
index 0d306b073a..d4ea0b5585 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/RefinerModelFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/RefinerModelFieldInputComponent.tsx
@@ -1,4 +1,4 @@
-import { Combobox, Flex, FormControl } from '@invoke-ai/ui';
+import { Combobox, Flex, FormControl } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { SyncModelsIconButton } from 'features/modelManager/components/SyncModels/SyncModelsIconButton';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SDXLMainModelFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SDXLMainModelFieldInputComponent.tsx
index e34243d740..d46c43bbbe 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SDXLMainModelFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SDXLMainModelFieldInputComponent.tsx
@@ -1,4 +1,4 @@
-import { Combobox, Flex, FormControl } from '@invoke-ai/ui';
+import { Combobox, Flex, FormControl } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { SyncModelsIconButton } from 'features/modelManager/components/SyncModels/SyncModelsIconButton';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SchedulerFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SchedulerFieldInputComponent.tsx
index dfa75231a4..5a06e780d7 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SchedulerFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SchedulerFieldInputComponent.tsx
@@ -1,5 +1,5 @@
-import type { ComboboxOnChange } from '@invoke-ai/ui';
-import { Combobox, FormControl } from '@invoke-ai/ui';
+import type { ComboboxOnChange } from '@invoke-ai/ui-library';
+import { Combobox, FormControl } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { fieldSchedulerValueChanged } from 'features/nodes/store/nodesSlice';
 import type {
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldInputComponent.tsx
index e4f83a2c03..adcc814093 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldInputComponent.tsx
@@ -1,4 +1,4 @@
-import { Input, Textarea } from '@invoke-ai/ui';
+import { Input, Textarea } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { fieldStringValueChanged } from 'features/nodes/store/nodesSlice';
 import type {
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/T2IAdapterModelFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/T2IAdapterModelFieldInputComponent.tsx
index ce2a9b51cf..b013f18d8d 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/T2IAdapterModelFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/T2IAdapterModelFieldInputComponent.tsx
@@ -1,4 +1,4 @@
-import { Combobox, FormControl, Tooltip } from '@invoke-ai/ui';
+import { Combobox, FormControl, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { fieldT2IAdapterModelValueChanged } from 'features/nodes/store/nodesSlice';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/VAEModelFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/VAEModelFieldInputComponent.tsx
index 45e3c3c581..4be215c4c1 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/VAEModelFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/VAEModelFieldInputComponent.tsx
@@ -1,4 +1,4 @@
-import { Combobox, Flex, FormControl } from '@invoke-ai/ui';
+import { Combobox, Flex, FormControl } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { SyncModelsIconButton } from 'features/modelManager/components/SyncModels/SyncModelsIconButton';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx
index b9673e0474..896e8482d3 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Textarea } from '@invoke-ai/ui';
+import { Box, Flex, Textarea } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import NodeCollapseButton from 'features/nodes/components/flow/nodes/common/NodeCollapseButton';
 import NodeTitle from 'features/nodes/components/flow/nodes/common/NodeTitle';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeCollapseButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeCollapseButton.tsx
index f90c20fb57..372854b703 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeCollapseButton.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeCollapseButton.tsx
@@ -1,4 +1,4 @@
-import { Icon, IconButton } from '@invoke-ai/ui';
+import { Icon, IconButton } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { nodeIsOpenChanged } from 'features/nodes/store/nodesSlice';
 import { memo, useCallback } from 'react';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeTitle.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeTitle.tsx
index bff38cd608..39c3731bb9 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeTitle.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeTitle.tsx
@@ -1,4 +1,4 @@
-import type { SystemStyleObject } from '@invoke-ai/ui';
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import {
   Box,
   Editable,
@@ -6,7 +6,7 @@ import {
   EditablePreview,
   Flex,
   useEditableControls,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useNodeLabel } from 'features/nodes/hooks/useNodeLabel';
 import { useNodeTemplateTitle } from 'features/nodes/hooks/useNodeTemplateTitle';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx
index 2a3490d360..6cd0263b1c 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx
@@ -1,5 +1,5 @@
-import type { ChakraProps } from '@invoke-ai/ui';
-import { Box, useGlobalMenuClose, useToken } from '@invoke-ai/ui';
+import type { ChakraProps } from '@invoke-ai/ui-library';
+import { Box, useGlobalMenuClose, useToken } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import NodeSelectionOverlay from 'common/components/NodeSelectionOverlay';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/BottomLeftPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/BottomLeftPanel.tsx
index ebe2b93496..412ff00052 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/BottomLeftPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/BottomLeftPanel.tsx
@@ -1,4 +1,4 @@
-import { Flex } from '@invoke-ai/ui';
+import { Flex } from '@invoke-ai/ui-library';
 import { memo } from 'react';
 
 import NodeOpacitySlider from './NodeOpacitySlider';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/NodeOpacitySlider.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/NodeOpacitySlider.tsx
index 524e400741..b24b2058bd 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/NodeOpacitySlider.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/NodeOpacitySlider.tsx
@@ -1,4 +1,4 @@
-import { CompositeSlider, Flex } from '@invoke-ai/ui';
+import { CompositeSlider, Flex } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { nodeOpacityChanged } from 'features/nodes/store/nodesSlice';
 import { memo, useCallback } from 'react';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/ViewportControls.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/ViewportControls.tsx
index c97d7a9be4..8d0db533e9 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/ViewportControls.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/ViewportControls.tsx
@@ -1,4 +1,4 @@
-import { ButtonGroup, IconButton } from '@invoke-ai/ui';
+import { ButtonGroup, IconButton } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
   // shouldShowFieldTypeLegendChanged,
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx
index 45409c0016..b01860353b 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx
@@ -1,5 +1,5 @@
-import type { SystemStyleObject } from '@invoke-ai/ui';
-import { chakra, Flex } from '@invoke-ai/ui';
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { chakra, Flex } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { memo } from 'react';
 import { MiniMap } from 'reactflow';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/AddNodeButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/AddNodeButton.tsx
index cf59208749..63a5e7eccb 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/AddNodeButton.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/AddNodeButton.tsx
@@ -1,4 +1,4 @@
-import { IconButton } from '@invoke-ai/ui';
+import { IconButton } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { addNodePopoverOpened } from 'features/nodes/store/nodesSlice';
 import { memo, useCallback } from 'react';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/TopPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/TopPanel.tsx
index 3f7834b59b..8cdb4ae2ca 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/TopPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/TopPanel.tsx
@@ -1,4 +1,4 @@
-import { Flex, Spacer } from '@invoke-ai/ui';
+import { Flex, Spacer } from '@invoke-ai/ui-library';
 import AddNodeButton from 'features/nodes/components/flow/panels/TopPanel/AddNodeButton';
 import UpdateNodesButton from 'features/nodes/components/flow/panels/TopPanel/UpdateNodesButton';
 import WorkflowName from 'features/nodes/components/flow/panels/TopPanel/WorkflowName';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/UpdateNodesButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/UpdateNodesButton.tsx
index 1d64aae5db..63b0dbe9fb 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/UpdateNodesButton.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/UpdateNodesButton.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@invoke-ai/ui';
+import { Button } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useGetNodesNeedUpdate } from 'features/nodes/hooks/useGetNodesNeedUpdate';
 import { updateAllNodesRequested } from 'features/nodes/store/actions';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/WorkflowName.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/WorkflowName.tsx
index 76b81f6e2a..942e526adc 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/WorkflowName.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/WorkflowName.tsx
@@ -1,4 +1,4 @@
-import { Text } from '@invoke-ai/ui';
+import { Text } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { memo, useMemo } from 'react';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/ReloadSchemaButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/ReloadSchemaButton.tsx
index e3e40788aa..2d67482ec4 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/ReloadSchemaButton.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/ReloadSchemaButton.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@invoke-ai/ui';
+import { Button } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/TopRightPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/TopRightPanel.tsx
index 48f79573fe..f8e6d390aa 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/TopRightPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/TopRightPanel.tsx
@@ -1,4 +1,4 @@
-import { Flex } from '@invoke-ai/ui';
+import { Flex } from '@invoke-ai/ui-library';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import WorkflowLibraryButton from 'features/workflowLibrary/components/WorkflowLibraryButton';
 import WorkflowLibraryMenu from 'features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx
index 99c4f38ba0..8861c46225 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx
@@ -13,7 +13,7 @@ import {
   ModalOverlay,
   Switch,
   useDisclosure,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import ReloadNodeTemplatesButton from 'features/nodes/components/flow/panels/TopRightPanel/ReloadSchemaButton';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx
index 83c06051cc..0edd27d011 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx
@@ -1,6 +1,6 @@
 import 'reactflow/dist/style.css';
 
-import { Flex } from '@invoke-ai/ui';
+import { Flex } from '@invoke-ai/ui-library';
 import QueueControls from 'features/queue/components/QueueControls';
 import ResizeHandle from 'features/ui/components/tabs/ResizeHandle';
 import { usePanelStorage } from 'features/ui/hooks/usePanelStorage';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx
index a53f52b061..b278a9bea8 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, FormControl, FormLabel, HStack, Text } from '@invoke-ai/ui';
+import { Box, Flex, FormControl, FormLabel, HStack, Text } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorOutputsTab.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorOutputsTab.tsx
index 5c94bd0dbc..a9ae4d88cb 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorOutputsTab.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorOutputsTab.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex } from '@invoke-ai/ui';
+import { Box, Flex } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx
index 583c5435bd..a09970cdc5 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx
@@ -1,4 +1,4 @@
-import { Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui';
+import { Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/details/EditableNodeTitle.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/details/EditableNodeTitle.tsx
index e749424fc8..444eb09e35 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/details/EditableNodeTitle.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/details/EditableNodeTitle.tsx
@@ -1,4 +1,4 @@
-import { Editable, EditableInput, EditablePreview, Flex } from '@invoke-ai/ui';
+import { Editable, EditableInput, EditablePreview, Flex } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useNodeLabel } from 'features/nodes/hooks/useNodeLabel';
 import { useNodeTemplateTitle } from 'features/nodes/hooks/useNodeTemplateTitle';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowGeneralTab.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowGeneralTab.tsx
index 9fa7363d4a..4cd53e91ac 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowGeneralTab.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowGeneralTab.tsx
@@ -1,4 +1,4 @@
-import type { FormControlProps } from '@invoke-ai/ui';
+import type { FormControlProps } from '@invoke-ai/ui-library';
 import {
   Flex,
   FormControl,
@@ -6,7 +6,7 @@ import {
   FormLabel,
   Input,
   Textarea,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowJSONTab.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowJSONTab.tsx
index 0f3a3f5e08..321fe77b10 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowJSONTab.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowJSONTab.tsx
@@ -1,4 +1,4 @@
-import { Flex } from '@invoke-ai/ui';
+import { Flex } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import DataViewer from 'features/gallery/components/ImageMetadataViewer/DataViewer';
 import { $builtWorkflow } from 'features/nodes/hooks/useWorkflowWatcher';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx
index 30051f2f71..d2d8185e1a 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex } from '@invoke-ai/ui';
+import { Box, Flex } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
index deb833abc5..b9e09eb9e2 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
@@ -1,4 +1,4 @@
-import { Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui';
+import { Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
diff --git a/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamCFGRescaleMultiplier.tsx b/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamCFGRescaleMultiplier.tsx
index b1646b9b87..aa757e89bd 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamCFGRescaleMultiplier.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamCFGRescaleMultiplier.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { setCfgRescaleMultiplier } from 'features/parameters/store/generationSlice';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamClipSkip.tsx b/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamClipSkip.tsx
index ffb2e76829..ac7582c70c 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamClipSkip.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamClipSkip.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { setClipSkip } from 'features/parameters/store/generationSlice';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx
index f6b58972d7..34c9e67ae9 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx
index def547ada4..1336b4482e 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceMode.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceMode.tsx
index fcdc1eee6f..0b91154c9b 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceMode.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceMode.tsx
@@ -1,5 +1,5 @@
-import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui';
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
+import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { setCanvasCoherenceMode } from 'features/parameters/store/generationSlice';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps.tsx
index 9f6ca54f7a..c82a72a839 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { setCanvasCoherenceSteps } from 'features/parameters/store/generationSlice';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength.tsx
index ecac32251e..28998dcf05 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { setCanvasCoherenceStrength } from 'features/parameters/store/generationSlice';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx
index dd250fb6b0..4b4b6f8a2a 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { setMaskBlur } from 'features/parameters/store/generationSlice';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx
index 48f7927501..284a24dd07 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx
@@ -1,5 +1,5 @@
-import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui';
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
+import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { setMaskBlurMethod } from 'features/parameters/store/generationSlice';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/GenerationModeStatusText.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/GenerationModeStatusText.tsx
index 97781adb06..b4eaf7a43b 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/GenerationModeStatusText.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/GenerationModeStatusText.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@invoke-ai/ui';
+import { Box } from '@invoke-ai/ui-library';
 import { useCanvasGenerationMode } from 'features/canvas/hooks/useCanvasGenerationMode';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillMethod.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillMethod.tsx
index 62a51fed2c..df9c96ea6f 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillMethod.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillMethod.tsx
@@ -1,5 +1,5 @@
-import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui';
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
+import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { setInfillMethod } from 'features/parameters/store/generationSlice';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillPatchmatchDownscaleSize.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillPatchmatchDownscaleSize.tsx
index f879635e4d..113853ad9d 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillPatchmatchDownscaleSize.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillPatchmatchDownscaleSize.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setInfillPatchmatchDownscaleSize } from 'features/parameters/store/generationSlice';
 import { memo, useCallback } from 'react';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillTilesize.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillTilesize.tsx
index 4d04e2ed04..04006da019 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillTilesize.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillTilesize.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setInfillTileSize } from 'features/parameters/store/generationSlice';
 import { memo, useCallback } from 'react';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx
index bf4b9be2ba..998fa407c0 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx
@@ -1,5 +1,5 @@
-import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui';
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
+import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { setBoundingBoxScaleMethod } from 'features/canvas/store/canvasSlice';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight.tsx
index 7e1d19e68e..b25e23af53 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setScaledBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
 import { selectOptimalDimension } from 'features/parameters/store/generationSlice';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledWidth.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledWidth.tsx
index 4c3fec17a0..29de4c4934 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledWidth.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledWidth.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setScaledBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
 import { selectOptimalDimension } from 'features/parameters/store/generationSlice';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamCFGScale.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamCFGScale.tsx
index 985d5763a5..34fde9ce9d 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamCFGScale.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamCFGScale.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { setCfgScale } from 'features/parameters/store/generationSlice';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamHeight.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamHeight.tsx
index 73e89a3c6f..21300ca90e 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamHeight.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamHeight.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext';
 import { selectOptimalDimension } from 'features/parameters/store/generationSlice';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
index bece1338b1..780e6da1cf 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
@@ -1,4 +1,4 @@
-import { Box, Textarea } from '@invoke-ai/ui';
+import { Box, Textarea } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { AddEmbeddingButton } from 'features/embedding/AddEmbeddingButton';
 import { EmbeddingPopover } from 'features/embedding/EmbeddingPopover';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx
index 4ce90d5741..b192dee29a 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx
@@ -1,4 +1,4 @@
-import { Box, Textarea } from '@invoke-ai/ui';
+import { Box, Textarea } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { ShowDynamicPromptsPreviewButton } from 'features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton';
 import { AddEmbeddingButton } from 'features/embedding/AddEmbeddingButton';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamScheduler.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamScheduler.tsx
index 08d0ae635f..a0bae81aa3 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamScheduler.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamScheduler.tsx
@@ -1,5 +1,5 @@
-import type { ComboboxOnChange } from '@invoke-ai/ui';
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
+import type { ComboboxOnChange } from '@invoke-ai/ui-library';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { setScheduler } from 'features/parameters/store/generationSlice';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamSteps.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamSteps.tsx
index 3401f503ea..90f1fb63c4 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamSteps.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamSteps.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { setSteps } from 'features/parameters/store/generationSlice';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamWidth.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamWidth.tsx
index f0f1596981..1ef6d7dd08 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamWidth.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamWidth.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext';
 import { selectOptimalDimension } from 'features/parameters/store/generationSlice';
diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioPreview.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioPreview.tsx
index 65baa5223a..68885c9925 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioPreview.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioPreview.tsx
@@ -1,5 +1,5 @@
 import { useSize } from '@chakra-ui/react-use-size';
-import { Flex, Icon } from '@invoke-ai/ui';
+import { Flex, Icon } from '@invoke-ai/ui-library';
 import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useMemo, useRef } from 'react';
diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioSelect.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioSelect.tsx
index a5ee9d16c4..cfb26b51b3 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioSelect.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioSelect.tsx
@@ -1,5 +1,5 @@
-import type { ComboboxOption, SystemStyleObject } from '@invoke-ai/ui';
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
+import type { ComboboxOption, SystemStyleObject } from '@invoke-ai/ui-library';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import type { SingleValue } from 'chakra-react-select';
 import { ASPECT_RATIO_OPTIONS } from 'features/parameters/components/ImageSize/constants';
 import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext';
diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageSize/ImageSize.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageSize/ImageSize.tsx
index a4dab594cc..811578263a 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/ImageSize.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/ImageSize.tsx
@@ -1,5 +1,5 @@
-import type { FormLabelProps } from '@invoke-ai/ui';
-import { Flex, FormControlGroup } from '@invoke-ai/ui';
+import type { FormLabelProps } from '@invoke-ai/ui-library';
+import { Flex, FormControlGroup } from '@invoke-ai/ui-library';
 import { AspectRatioPreview } from 'features/parameters/components/ImageSize/AspectRatioPreview';
 import { AspectRatioSelect } from 'features/parameters/components/ImageSize/AspectRatioSelect';
 import type { ImageSizeContextInnerValue } from 'features/parameters/components/ImageSize/ImageSizeContext';
diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageSize/LockAspectRatioButton.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageSize/LockAspectRatioButton.tsx
index 31519f8f14..d6ec18c64e 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/LockAspectRatioButton.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/LockAspectRatioButton.tsx
@@ -1,4 +1,4 @@
-import { IconButton } from '@invoke-ai/ui';
+import { IconButton } from '@invoke-ai/ui-library';
 import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageSize/SetOptimalSizeButton.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageSize/SetOptimalSizeButton.tsx
index 4d58da7047..189978519b 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/SetOptimalSizeButton.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/SetOptimalSizeButton.tsx
@@ -1,4 +1,4 @@
-import { IconButton } from '@invoke-ai/ui';
+import { IconButton } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext';
 import { selectOptimalDimension } from 'features/parameters/store/generationSlice';
diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageSize/SwapDimensionsButton.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageSize/SwapDimensionsButton.tsx
index 1c126aa2ef..80cfc6952c 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/SwapDimensionsButton.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/SwapDimensionsButton.tsx
@@ -1,4 +1,4 @@
-import { IconButton } from '@invoke-ai/ui';
+import { IconButton } from '@invoke-ai/ui-library';
 import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageSize/constants.ts b/invokeai/frontend/web/src/features/parameters/components/ImageSize/constants.ts
index 939480554b..3f187100d4 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/constants.ts
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/constants.ts
@@ -1,4 +1,4 @@
-import type { ComboboxOption } from '@invoke-ai/ui';
+import type { ComboboxOption } from '@invoke-ai/ui-library';
 
 import type { AspectRatioID, AspectRatioState } from './types';
 
diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageFit.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageFit.tsx
index b0f4f5bae9..72c618941d 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageFit.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageFit.tsx
@@ -1,4 +1,4 @@
-import { FormControl, FormLabel, Switch } from '@invoke-ai/ui';
+import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
 import type { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setShouldFitToWidthHeight } from 'features/parameters/store/generationSlice';
diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageStrength.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageStrength.tsx
index 7f063aa841..b85a0291ee 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageStrength.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageStrength.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { setImg2imgStrength } from 'features/parameters/store/generationSlice';
diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageToImage/InitialImageDisplay.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageToImage/InitialImageDisplay.tsx
index 0d041e483d..879e899d19 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ImageToImage/InitialImageDisplay.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageToImage/InitialImageDisplay.tsx
@@ -1,4 +1,4 @@
-import { Flex, IconButton, Spacer, Text } from '@invoke-ai/ui';
+import { Flex, IconButton, Spacer, Text } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
diff --git a/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx b/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx
index 950ffa0f6e..0d626db26e 100644
--- a/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx
@@ -1,4 +1,4 @@
-import { Combobox, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui';
+import { Combobox, FormControl, FormLabel, 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';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Prompts/PromptOverlayButtonWrapper.tsx b/invokeai/frontend/web/src/features/parameters/components/Prompts/PromptOverlayButtonWrapper.tsx
index 2ecacf0b19..a45279fd34 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Prompts/PromptOverlayButtonWrapper.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Prompts/PromptOverlayButtonWrapper.tsx
@@ -1,4 +1,4 @@
-import { Flex } from '@invoke-ai/ui';
+import { Flex } from '@invoke-ai/ui-library';
 import { memo, type PropsWithChildren } from 'react';
 
 export const PromptOverlayButtonWrapper = memo((props: PropsWithChildren) => (
diff --git a/invokeai/frontend/web/src/features/parameters/components/Prompts/Prompts.tsx b/invokeai/frontend/web/src/features/parameters/components/Prompts/Prompts.tsx
index c92705cc27..320c15f7df 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Prompts/Prompts.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Prompts/Prompts.tsx
@@ -1,4 +1,4 @@
-import { Flex } from '@invoke-ai/ui';
+import { Flex } from '@invoke-ai/ui-library';
 import { ParamNegativePrompt } from 'features/parameters/components/Core/ParamNegativePrompt';
 import { ParamPositivePrompt } from 'features/parameters/components/Core/ParamPositivePrompt';
 import { memo } from 'react';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Seamless/ParamSeamlessXAxis.tsx b/invokeai/frontend/web/src/features/parameters/components/Seamless/ParamSeamlessXAxis.tsx
index fd2c823fbc..b66293580a 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Seamless/ParamSeamlessXAxis.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Seamless/ParamSeamlessXAxis.tsx
@@ -1,4 +1,4 @@
-import { FormControl, FormLabel, Switch } from '@invoke-ai/ui';
+import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setSeamlessXAxis } from 'features/parameters/store/generationSlice';
 import type { ChangeEvent } from 'react';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Seamless/ParamSeamlessYAxis.tsx b/invokeai/frontend/web/src/features/parameters/components/Seamless/ParamSeamlessYAxis.tsx
index 679fc546da..e983565476 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Seamless/ParamSeamlessYAxis.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Seamless/ParamSeamlessYAxis.tsx
@@ -1,4 +1,4 @@
-import { FormControl, FormLabel, Switch } from '@invoke-ai/ui';
+import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setSeamlessYAxis } from 'features/parameters/store/generationSlice';
 import type { ChangeEvent } from 'react';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedNumberInput.tsx b/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedNumberInput.tsx
index be6a980927..86cc7b0e54 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedNumberInput.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedNumberInput.tsx
@@ -1,4 +1,4 @@
-import { CompositeNumberInput, FormControl, FormLabel } from '@invoke-ai/ui';
+import { CompositeNumberInput, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from 'app/constants';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedRandomize.tsx b/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedRandomize.tsx
index 7416707210..29ccafe8fb 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedRandomize.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedRandomize.tsx
@@ -1,4 +1,4 @@
-import { FormControl, FormLabel, Switch } from '@invoke-ai/ui';
+import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setShouldRandomizeSeed } from 'features/parameters/store/generationSlice';
 import type { ChangeEvent } from 'react';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedShuffle.tsx b/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedShuffle.tsx
index 3a3a60fe02..71162c60ed 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedShuffle.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedShuffle.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@invoke-ai/ui';
+import { Button } from '@invoke-ai/ui-library';
 import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from 'app/constants';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import randomInt from 'common/util/randomInt';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamRealESRGANModel.tsx b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamRealESRGANModel.tsx
index 8e5141be82..813ee11c76 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamRealESRGANModel.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamRealESRGANModel.tsx
@@ -1,5 +1,5 @@
-import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui';
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
+import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import type { GroupBase } from 'chakra-react-select';
 import {
diff --git a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx
index d35d8cab14..c0309bebe4 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx
@@ -7,7 +7,7 @@ import {
   PopoverContent,
   PopoverTrigger,
   useDisclosure,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { upscaleRequested } from 'app/store/middleware/listenerMiddleware/listeners/upscaleRequested';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useIsAllowedToUpscale } from 'features/parameters/hooks/useIsAllowedToUpscale';
diff --git a/invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamVAEModelSelect.tsx b/invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamVAEModelSelect.tsx
index d0072442e7..2be948a9cb 100644
--- a/invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamVAEModelSelect.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamVAEModelSelect.tsx
@@ -1,4 +1,4 @@
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
diff --git a/invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamVAEPrecision.tsx b/invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamVAEPrecision.tsx
index 14b4700dea..18a627367f 100644
--- a/invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamVAEPrecision.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamVAEPrecision.tsx
@@ -1,5 +1,5 @@
-import type { ComboboxOnChange } from '@invoke-ai/ui';
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
+import type { ComboboxOnChange } from '@invoke-ai/ui-library';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { vaePrecisionChanged } from 'features/parameters/store/generationSlice';
diff --git a/invokeai/frontend/web/src/features/parameters/types/constants.ts b/invokeai/frontend/web/src/features/parameters/types/constants.ts
index d1cc9fd68a..a74807a959 100644
--- a/invokeai/frontend/web/src/features/parameters/types/constants.ts
+++ b/invokeai/frontend/web/src/features/parameters/types/constants.ts
@@ -1,4 +1,4 @@
-import type { ComboboxOption } from '@invoke-ai/ui';
+import type { ComboboxOption } from '@invoke-ai/ui-library';
 import type { LoRAModelFormat } from 'services/api/types';
 
 /**
diff --git a/invokeai/frontend/web/src/features/queue/components/CancelCurrentQueueItemIconButton.tsx b/invokeai/frontend/web/src/features/queue/components/CancelCurrentQueueItemIconButton.tsx
index 2195e5064d..a763ad23d3 100644
--- a/invokeai/frontend/web/src/features/queue/components/CancelCurrentQueueItemIconButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/CancelCurrentQueueItemIconButton.tsx
@@ -1,5 +1,5 @@
-import type { ChakraProps } from '@invoke-ai/ui';
-import { IconButton } from '@invoke-ai/ui';
+import type { ChakraProps } from '@invoke-ai/ui-library';
+import { IconButton } from '@invoke-ai/ui-library';
 import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
diff --git a/invokeai/frontend/web/src/features/queue/components/ClearInvocationCacheButton.tsx b/invokeai/frontend/web/src/features/queue/components/ClearInvocationCacheButton.tsx
index cba6115e2f..c13298da46 100644
--- a/invokeai/frontend/web/src/features/queue/components/ClearInvocationCacheButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/ClearInvocationCacheButton.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@invoke-ai/ui';
+import { Button } from '@invoke-ai/ui-library';
 import { useClearInvocationCache } from 'features/queue/hooks/useClearInvocationCache';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
diff --git a/invokeai/frontend/web/src/features/queue/components/ClearQueueButton.tsx b/invokeai/frontend/web/src/features/queue/components/ClearQueueButton.tsx
index 118314d667..c899dd0482 100644
--- a/invokeai/frontend/web/src/features/queue/components/ClearQueueButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/ClearQueueButton.tsx
@@ -1,5 +1,5 @@
-import type { ButtonProps } from '@invoke-ai/ui';
-import { Button, useDisclosure } from '@invoke-ai/ui';
+import type { ButtonProps } from '@invoke-ai/ui-library';
+import { Button, useDisclosure } from '@invoke-ai/ui-library';
 import ClearQueueConfirmationAlertDialog from 'features/queue/components/ClearQueueConfirmationAlertDialog';
 import { useClearQueue } from 'features/queue/hooks/useClearQueue';
 import { memo } from 'react';
diff --git a/invokeai/frontend/web/src/features/queue/components/ClearQueueConfirmationAlertDialog.tsx b/invokeai/frontend/web/src/features/queue/components/ClearQueueConfirmationAlertDialog.tsx
index 98d94c643b..291419d024 100644
--- a/invokeai/frontend/web/src/features/queue/components/ClearQueueConfirmationAlertDialog.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/ClearQueueConfirmationAlertDialog.tsx
@@ -1,5 +1,5 @@
-import type { UseDisclosureReturn } from '@invoke-ai/ui';
-import { ConfirmationAlertDialog, Text } from '@invoke-ai/ui';
+import type { UseDisclosureReturn } from '@invoke-ai/ui-library';
+import { ConfirmationAlertDialog, Text } from '@invoke-ai/ui-library';
 import { useClearQueue } from 'features/queue/hooks/useClearQueue';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
diff --git a/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx b/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx
index cb7061e92d..8400fab7fd 100644
--- a/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx
@@ -1,5 +1,5 @@
-import type { IconButtonProps } from '@invoke-ai/ui';
-import { IconButton, useDisclosure, useShiftModifier } from '@invoke-ai/ui';
+import type { IconButtonProps } from '@invoke-ai/ui-library';
+import { IconButton, useDisclosure, useShiftModifier } from '@invoke-ai/ui-library';
 import ClearQueueConfirmationAlertDialog from 'features/queue/components/ClearQueueConfirmationAlertDialog';
 import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem';
 import { useClearQueue } from 'features/queue/hooks/useClearQueue';
diff --git a/invokeai/frontend/web/src/features/queue/components/InvocationCacheStatus.tsx b/invokeai/frontend/web/src/features/queue/components/InvocationCacheStatus.tsx
index 0a5e1b3c30..9ce334c996 100644
--- a/invokeai/frontend/web/src/features/queue/components/InvocationCacheStatus.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/InvocationCacheStatus.tsx
@@ -1,4 +1,4 @@
-import { ButtonGroup } from '@invoke-ai/ui';
+import { ButtonGroup } from '@invoke-ai/ui-library';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useGetInvocationCacheStatusQuery } from 'services/api/endpoints/appInfo';
diff --git a/invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx b/invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx
index 13ed3086d2..7819fdbee6 100644
--- a/invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx
@@ -1,4 +1,4 @@
-import { Button, Flex, Spacer } from '@invoke-ai/ui';
+import { Button, Flex, Spacer } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { QueueIterationsNumberInput } from 'features/queue/components/QueueIterationsNumberInput';
 import { useQueueBack } from 'features/queue/hooks/useQueueBack';
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx b/invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx
index 2c1f808095..421a070b2f 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx
@@ -8,7 +8,7 @@ import {
   MenuItem,
   MenuList,
   useDisclosure,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import ClearQueueConfirmationAlertDialog from 'features/queue/components/ClearQueueConfirmationAlertDialog';
 import { useClearQueue } from 'features/queue/hooks/useClearQueue';
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx b/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx
index 6370e6ae6a..24baed9e3d 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx
@@ -1,4 +1,4 @@
-import { Divider, Flex, ListItem, Text, UnorderedList } from '@invoke-ai/ui';
+import { Divider, Flex, ListItem, Text, UnorderedList } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useIsReadyToEnqueue } from 'common/hooks/useIsReadyToEnqueue';
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueControls.tsx b/invokeai/frontend/web/src/features/queue/components/QueueControls.tsx
index 15b7191717..13946b87c1 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueControls.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueControls.tsx
@@ -1,4 +1,4 @@
-import { ButtonGroup, Flex, Spacer } from '@invoke-ai/ui';
+import { ButtonGroup, Flex, Spacer } from '@invoke-ai/ui-library';
 import ClearQueueIconButton from 'features/queue/components/ClearQueueIconButton';
 import QueueFrontButton from 'features/queue/components/QueueFrontButton';
 import ProgressBar from 'features/system/components/ProgressBar';
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueFrontButton.tsx b/invokeai/frontend/web/src/features/queue/components/QueueFrontButton.tsx
index ac091dbd0d..07ad0f5b3c 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueFrontButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueFrontButton.tsx
@@ -1,4 +1,4 @@
-import { IconButton } from '@invoke-ai/ui';
+import { IconButton } from '@invoke-ai/ui-library';
 import { useQueueFront } from 'features/queue/hooks/useQueueFront';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueIterationsNumberInput.tsx b/invokeai/frontend/web/src/features/queue/components/QueueIterationsNumberInput.tsx
index 10707da730..977a9f8989 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueIterationsNumberInput.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueIterationsNumberInput.tsx
@@ -1,4 +1,4 @@
-import { CompositeNumberInput } from '@invoke-ai/ui';
+import { CompositeNumberInput } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { setIterations } from 'features/parameters/store/generationSlice';
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx
index 9419c696f3..250bbbafb6 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx
@@ -1,5 +1,5 @@
-import type { ChakraProps, CollapseProps } from '@invoke-ai/ui';
-import { ButtonGroup, Collapse, Flex, IconButton, Text } from '@invoke-ai/ui';
+import type { ChakraProps, CollapseProps } from '@invoke-ai/ui-library';
+import { ButtonGroup, Collapse, Flex, IconButton, Text } from '@invoke-ai/ui-library';
 import QueueStatusBadge from 'features/queue/components/common/QueueStatusBadge';
 import { useCancelQueueItem } from 'features/queue/hooks/useCancelQueueItem';
 import { getSecondsFromTimestamps } from 'features/queue/util/getSecondsFromTimestamps';
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx
index 2401962e98..98794d3c8d 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx
@@ -5,7 +5,7 @@ import {
   Heading,
   Spinner,
   Text,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import DataViewer from 'features/gallery/components/ImageMetadataViewer/DataViewer';
 import { useCancelBatch } from 'features/queue/hooks/useCancelBatch';
 import { useCancelQueueItem } from 'features/queue/hooks/useCancelQueueItem';
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueList.tsx b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueList.tsx
index 3e2316478c..fa5b61cb5a 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueList.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueList.tsx
@@ -1,4 +1,4 @@
-import { Flex, Heading } from '@invoke-ai/ui';
+import { Flex, Heading } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallbackWithSpinner } from 'common/components/IAIImageFallback';
 import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueListComponent.tsx b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueListComponent.tsx
index a2ad566838..c76caeca12 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueListComponent.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueListComponent.tsx
@@ -1,4 +1,4 @@
-import { Flex, forwardRef } from '@invoke-ai/ui';
+import { Flex, forwardRef } from '@invoke-ai/ui-library';
 import { memo } from 'react';
 import type { Components } from 'react-virtuoso';
 import type { SessionQueueItemDTO } from 'services/api/types';
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueListHeader.tsx b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueListHeader.tsx
index 0287bbba4e..d025dafde9 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueListHeader.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueListHeader.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text } from '@invoke-ai/ui';
+import { Flex, Text } from '@invoke-ai/ui-library';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueTabContent.tsx b/invokeai/frontend/web/src/features/queue/components/QueueTabContent.tsx
index f0f4f6fd81..7f4f9b95b7 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueTabContent.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueTabContent.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex } from '@invoke-ai/ui';
+import { Box, Flex } from '@invoke-ai/ui-library';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { memo } from 'react';
 
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueTabQueueControls.tsx b/invokeai/frontend/web/src/features/queue/components/QueueTabQueueControls.tsx
index 64e539682d..b42fc04e4d 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueTabQueueControls.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueTabQueueControls.tsx
@@ -1,4 +1,4 @@
-import { ButtonGroup, Flex } from '@invoke-ai/ui';
+import { ButtonGroup, Flex } from '@invoke-ai/ui-library';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { memo } from 'react';
 
diff --git a/invokeai/frontend/web/src/features/queue/components/ToggleInvocationCacheButton.tsx b/invokeai/frontend/web/src/features/queue/components/ToggleInvocationCacheButton.tsx
index 6174ad96fd..f25696257f 100644
--- a/invokeai/frontend/web/src/features/queue/components/ToggleInvocationCacheButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/ToggleInvocationCacheButton.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@invoke-ai/ui';
+import { Button } from '@invoke-ai/ui-library';
 import { useDisableInvocationCache } from 'features/queue/hooks/useDisableInvocationCache';
 import { useEnableInvocationCache } from 'features/queue/hooks/useEnableInvocationCache';
 import { memo } from 'react';
diff --git a/invokeai/frontend/web/src/features/queue/components/common/QueueButton.tsx b/invokeai/frontend/web/src/features/queue/components/common/QueueButton.tsx
index 72307589d5..786708faf1 100644
--- a/invokeai/frontend/web/src/features/queue/components/common/QueueButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/common/QueueButton.tsx
@@ -1,5 +1,5 @@
-import type { ChakraProps, ThemeTypings } from '@invoke-ai/ui';
-import { Button, IconButton } from '@invoke-ai/ui';
+import type { ChakraProps, ThemeTypings } from '@invoke-ai/ui-library';
+import { Button, IconButton } from '@invoke-ai/ui-library';
 import type { ReactElement, ReactNode } from 'react';
 import { memo } from 'react';
 
diff --git a/invokeai/frontend/web/src/features/queue/components/common/QueueStatusBadge.tsx b/invokeai/frontend/web/src/features/queue/components/common/QueueStatusBadge.tsx
index ed15edb424..9bea1b4581 100644
--- a/invokeai/frontend/web/src/features/queue/components/common/QueueStatusBadge.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/common/QueueStatusBadge.tsx
@@ -1,4 +1,4 @@
-import { Badge } from '@invoke-ai/ui';
+import { Badge } from '@invoke-ai/ui-library';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { SessionQueueItemStatus } from 'services/api/endpoints/queue';
diff --git a/invokeai/frontend/web/src/features/queue/components/common/StatusStatGroup.tsx b/invokeai/frontend/web/src/features/queue/components/common/StatusStatGroup.tsx
index 13a9565b49..1a1e8054e8 100644
--- a/invokeai/frontend/web/src/features/queue/components/common/StatusStatGroup.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/common/StatusStatGroup.tsx
@@ -1,5 +1,5 @@
-import type { StatGroupProps } from '@invoke-ai/ui';
-import { StatGroup } from '@invoke-ai/ui';
+import type { StatGroupProps } from '@invoke-ai/ui-library';
+import { StatGroup } from '@invoke-ai/ui-library';
 import { memo } from 'react';
 
 const StatusStatGroup = ({ children, ...rest }: StatGroupProps) => (
diff --git a/invokeai/frontend/web/src/features/queue/components/common/StatusStatItem.tsx b/invokeai/frontend/web/src/features/queue/components/common/StatusStatItem.tsx
index c5f7e3d8fa..90413640c1 100644
--- a/invokeai/frontend/web/src/features/queue/components/common/StatusStatItem.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/common/StatusStatItem.tsx
@@ -1,5 +1,5 @@
-import type { ChakraProps, StatProps } from '@invoke-ai/ui';
-import { Stat, StatLabel, StatNumber } from '@invoke-ai/ui';
+import type { ChakraProps, StatProps } from '@invoke-ai/ui-library';
+import { Stat, StatLabel, StatNumber } from '@invoke-ai/ui-library';
 import { memo } from 'react';
 
 const sx: ChakraProps['sx'] = {
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx
index 87570f77fa..dca1f2b48d 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx
@@ -1,4 +1,4 @@
-import { Box, Textarea } from '@invoke-ai/ui';
+import { Box, Textarea } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { AddEmbeddingButton } from 'features/embedding/AddEmbeddingButton';
 import { EmbeddingPopover } from 'features/embedding/EmbeddingPopover';
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx
index 6e4ec72eec..183a9da038 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx
@@ -1,4 +1,4 @@
-import { Box, Textarea } from '@invoke-ai/ui';
+import { Box, Textarea } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { AddEmbeddingButton } from 'features/embedding/AddEmbeddingButton';
 import { EmbeddingPopover } from 'features/embedding/EmbeddingPopover';
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLConcatButton.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLConcatButton.tsx
index fb5d0b83bb..fa7e7e723b 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLConcatButton.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLConcatButton.tsx
@@ -1,4 +1,4 @@
-import { IconButton, Tooltip } from '@invoke-ai/ui';
+import { IconButton, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setShouldConcatSDXLStylePrompt } from 'features/sdxl/store/sdxlSlice';
 import { memo, useCallback, useMemo } from 'react';
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLPrompts.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLPrompts.tsx
index a2257366b9..f8274d2b0f 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLPrompts.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLPrompts.tsx
@@ -1,4 +1,4 @@
-import { Flex } from '@invoke-ai/ui';
+import { Flex } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { ParamNegativePrompt } from 'features/parameters/components/Core/ParamNegativePrompt';
 import { ParamPositivePrompt } from 'features/parameters/components/Core/ParamPositivePrompt';
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale.tsx
index db64c4ccd2..643bf51f8e 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setRefinerCFGScale } from 'features/sdxl/store/sdxlSlice';
 import { memo, useCallback, useMemo } from 'react';
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx
index 9b423676df..691fdf57a5 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx
@@ -1,4 +1,4 @@
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useModelCombobox } from 'common/hooks/useModelCombobox';
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerNegativeAestheticScore.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerNegativeAestheticScore.tsx
index 104ad3bec3..5379553217 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerNegativeAestheticScore.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerNegativeAestheticScore.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setRefinerNegativeAestheticScore } from 'features/sdxl/store/sdxlSlice';
 import { memo, useCallback } from 'react';
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerPositiveAestheticScore.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerPositiveAestheticScore.tsx
index 12477064b1..a65af5f75d 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerPositiveAestheticScore.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerPositiveAestheticScore.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setRefinerPositiveAestheticScore } from 'features/sdxl/store/sdxlSlice';
 import { memo, useCallback } from 'react';
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerScheduler.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerScheduler.tsx
index b0faabaf6a..c033880e63 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerScheduler.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerScheduler.tsx
@@ -1,5 +1,5 @@
-import type { ComboboxOnChange } from '@invoke-ai/ui';
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
+import type { ComboboxOnChange } from '@invoke-ai/ui-library';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { SCHEDULER_OPTIONS } from 'features/parameters/types/constants';
 import { isParameterScheduler } from 'features/parameters/types/parameterSchemas';
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart.tsx
index e21c129860..efb2948e8c 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setRefinerStart } from 'features/sdxl/store/sdxlSlice';
 import { memo, useCallback } from 'react';
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerSteps.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerSteps.tsx
index cec24f41a8..5fcb79ea39 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerSteps.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerSteps.tsx
@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setRefinerSteps } from 'features/sdxl/store/sdxlSlice';
 import { memo, useCallback, useMemo } from 'react';
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx
index 311b3907a6..229296b7ae 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx
@@ -1,5 +1,5 @@
-import type { FormLabelProps } from '@invoke-ai/ui';
-import { Flex, FormControlGroup, StandaloneAccordion } from '@invoke-ai/ui';
+import type { FormLabelProps } from '@invoke-ai/ui-library';
+import { Flex, FormControlGroup, StandaloneAccordion } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import ParamCFGRescaleMultiplier from 'features/parameters/components/Advanced/ParamCFGRescaleMultiplier';
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/CompositingSettingsAccordion/CompositingSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/CompositingSettingsAccordion/CompositingSettingsAccordion.tsx
index bbd569bfde..219255a440 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/CompositingSettingsAccordion/CompositingSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/components/CompositingSettingsAccordion/CompositingSettingsAccordion.tsx
@@ -1,4 +1,4 @@
-import type { FormLabelProps } from '@invoke-ai/ui';
+import type { FormLabelProps } from '@invoke-ai/ui-library';
 import {
   Flex,
   FormControlGroup,
@@ -8,7 +8,7 @@ import {
   TabPanel,
   TabPanels,
   Tabs,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import ParamCanvasCoherenceMode from 'features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceMode';
 import ParamCanvasCoherenceSteps from 'features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps';
 import ParamCanvasCoherenceStrength from 'features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength';
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/ControlSettingsAccordion/ControlSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/ControlSettingsAccordion/ControlSettingsAccordion.tsx
index 38c01ff2b2..454d49d704 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/ControlSettingsAccordion/ControlSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/components/ControlSettingsAccordion/ControlSettingsAccordion.tsx
@@ -4,7 +4,7 @@ import {
   Divider,
   Flex,
   StandaloneAccordion,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import ControlAdapterConfig from 'features/controlAdapters/components/ControlAdapterConfig';
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx
index cf0ff7b7ca..17427787d6 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx
@@ -1,4 +1,4 @@
-import type { FormLabelProps } from '@invoke-ai/ui';
+import type { FormLabelProps } from '@invoke-ai/ui-library';
 import {
   Expander,
   Flex,
@@ -9,7 +9,7 @@ import {
   TabPanel,
   TabPanels,
   Tabs,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { LoRAList } from 'features/lora/components/LoRAList';
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx
index 36b97ecd72..193032fd7f 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx
@@ -1,10 +1,10 @@
-import type { FormLabelProps } from '@invoke-ai/ui';
+import type { FormLabelProps } from '@invoke-ai/ui-library';
 import {
   Expander,
   Flex,
   FormControlGroup,
   StandaloneAccordion,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx
index ea50350a63..fd1cc03cd9 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/components/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx
@@ -1,10 +1,10 @@
-import type { FormLabelProps } from '@invoke-ai/ui';
+import type { FormLabelProps } from '@invoke-ai/ui-library';
 import {
   Flex,
   FormControlGroup,
   StandaloneAccordion,
   Text,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import ParamSDXLRefinerCFGScale from 'features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale';
diff --git a/invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx b/invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx
index 9ff0389e26..c4b38bbdbc 100644
--- a/invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx
+++ b/invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx
@@ -14,7 +14,7 @@ import {
   ModalOverlay,
   Text,
   useDisclosure,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import {
   discordLink,
diff --git a/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeyListItem.tsx b/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeyListItem.tsx
index c23b86a0e4..cf07acd789 100644
--- a/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeyListItem.tsx
+++ b/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeyListItem.tsx
@@ -1,4 +1,4 @@
-import { Flex, Kbd, Spacer, Text } from '@invoke-ai/ui';
+import { Flex, Kbd, Spacer, Text } from '@invoke-ai/ui-library';
 import { Fragment, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
diff --git a/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModal.tsx b/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModal.tsx
index 36d24ba5eb..d315ee3f90 100644
--- a/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModal.tsx
+++ b/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModal.tsx
@@ -13,7 +13,7 @@ import {
   ModalHeader,
   ModalOverlay,
   useDisclosure,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import type { HotkeyGroup } from 'features/system/components/HotkeysModal/useHotkeyData';
diff --git a/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx b/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx
index ba02ca1a1c..91d4382a52 100644
--- a/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx
+++ b/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable i18next/no-literal-string */
-import { Image, Text, Tooltip } from '@invoke-ai/ui';
+import { Image, Text, Tooltip } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { $logo } from 'app/store/nanostores/logo';
 import InvokeLogoYellow from 'public/assets/images/invoke-symbol-ylw-lrg.svg';
diff --git a/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx b/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx
index 600535fb66..6084facc4f 100644
--- a/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx
@@ -1,4 +1,4 @@
-import { Progress } from '@invoke-ai/ui';
+import { Progress } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import { selectSystemSlice } from 'features/system/store/systemSlice';
diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLanguageSelect.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLanguageSelect.tsx
index 5a71161010..9f40cfa99c 100644
--- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLanguageSelect.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLanguageSelect.tsx
@@ -1,5 +1,5 @@
-import type { ComboboxOnChange } from '@invoke-ai/ui';
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
+import type { ComboboxOnChange } from '@invoke-ai/ui-library';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { languageChanged } from 'features/system/store/systemSlice';
diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLogLevelSelect.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLogLevelSelect.tsx
index a83a6403bd..8d54c5a24b 100644
--- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLogLevelSelect.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLogLevelSelect.tsx
@@ -1,5 +1,5 @@
-import type { ComboboxOnChange } from '@invoke-ai/ui';
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
+import type { ComboboxOnChange } from '@invoke-ai/ui-library';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { isLogLevel, zLogLevel } from 'app/logging/logger';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { consoleLogLevelChanged } from 'features/system/store/systemSlice';
diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx
index 965a43690b..fa31dd0ade 100644
--- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx
@@ -7,7 +7,7 @@ import {
   MenuList,
   useDisclosure,
   useGlobalMenuClose,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import AboutModal from 'features/system/components/AboutModal/AboutModal';
 import HotkeysModal from 'features/system/components/HotkeysModal/HotkeysModal';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
index 31cb25620f..b69b406eff 100644
--- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
@@ -14,7 +14,7 @@ import {
   Switch,
   Text,
   useDisclosure,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/StyledFlex.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/StyledFlex.tsx
index 479bd5321b..5cc01a19ab 100644
--- a/invokeai/frontend/web/src/features/system/components/SettingsModal/StyledFlex.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/StyledFlex.tsx
@@ -1,4 +1,4 @@
-import { Flex } from '@invoke-ai/ui';
+import { Flex } from '@invoke-ai/ui-library';
 import type { PropsWithChildren } from 'react';
 import { memo } from 'react';
 
diff --git a/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx b/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx
index 52968ece2a..25dda11b4a 100644
--- a/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx
+++ b/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx
@@ -1,4 +1,4 @@
-import { Icon, Tooltip } from '@invoke-ai/ui';
+import { Icon, Tooltip } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
diff --git a/invokeai/frontend/web/src/features/system/components/StickyScrollable.tsx b/invokeai/frontend/web/src/features/system/components/StickyScrollable.tsx
index c705d90a80..87bc60bc89 100644
--- a/invokeai/frontend/web/src/features/system/components/StickyScrollable.tsx
+++ b/invokeai/frontend/web/src/features/system/components/StickyScrollable.tsx
@@ -1,4 +1,4 @@
-import { Flex, Heading } from '@invoke-ai/ui';
+import { Flex, Heading } from '@invoke-ai/ui-library';
 import type { PropsWithChildren } from 'react';
 import { memo } from 'react';
 
diff --git a/invokeai/frontend/web/src/features/system/store/systemSlice.ts b/invokeai/frontend/web/src/features/system/store/systemSlice.ts
index aee77b7d52..8da6c4b4cd 100644
--- a/invokeai/frontend/web/src/features/system/store/systemSlice.ts
+++ b/invokeai/frontend/web/src/features/system/store/systemSlice.ts
@@ -1,4 +1,4 @@
-import type { UseToastOptions } from '@invoke-ai/ui';
+import type { UseToastOptions } from '@invoke-ai/ui-library';
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice, isAnyOf } from '@reduxjs/toolkit';
 import type { RootState } from 'app/store/store';
diff --git a/invokeai/frontend/web/src/features/system/store/types.ts b/invokeai/frontend/web/src/features/system/store/types.ts
index 7df3f72c40..df774897e9 100644
--- a/invokeai/frontend/web/src/features/system/store/types.ts
+++ b/invokeai/frontend/web/src/features/system/store/types.ts
@@ -1,4 +1,4 @@
-import type { UseToastOptions } from '@invoke-ai/ui';
+import type { UseToastOptions } from '@invoke-ai/ui-library';
 import type { LogLevel } from 'app/logging/logger';
 import type { ProgressImage } from 'services/events/types';
 import { z } from 'zod';
diff --git a/invokeai/frontend/web/src/features/system/util/makeToast.ts b/invokeai/frontend/web/src/features/system/util/makeToast.ts
index 7afadd7ca8..aa77fd60ae 100644
--- a/invokeai/frontend/web/src/features/system/util/makeToast.ts
+++ b/invokeai/frontend/web/src/features/system/util/makeToast.ts
@@ -1,4 +1,4 @@
-import type { UseToastOptions } from '@invoke-ai/ui';
+import type { UseToastOptions } from '@invoke-ai/ui-library';
 
 export type MakeToastArg = string | UseToastOptions;
 
diff --git a/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx b/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx
index fd448758a8..65bb5cc015 100644
--- a/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx
@@ -1,4 +1,4 @@
-import { Flex, IconButton, Portal, Tooltip } from '@invoke-ai/ui';
+import { Flex, IconButton, Portal, Tooltip } from '@invoke-ai/ui-library';
 import type { UsePanelReturn } from 'features/ui/hooks/usePanel';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
diff --git a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
index 6e1278c665..f96a4e047c 100644
--- a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
@@ -1,4 +1,4 @@
-import type { SystemStyleObject } from '@invoke-ai/ui';
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import {
   ButtonGroup,
   Flex,
@@ -6,7 +6,7 @@ import {
   IconButton,
   Portal,
   spinAnimation,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import CancelCurrentQueueItemIconButton from 'features/queue/components/CancelCurrentQueueItemIconButton';
 import ClearQueueIconButton from 'features/queue/components/ClearQueueIconButton';
 import { QueueButtonTooltip } from 'features/queue/components/QueueButtonTooltip';
diff --git a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
index d79ea1e741..dd703e315b 100644
--- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
@@ -8,7 +8,7 @@ import {
   TabPanels,
   Tabs,
   Tooltip,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { $customNavComponent } from 'app/store/nanostores/customNavComponent';
diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx
index 6ff7228932..3551cd6cd1 100644
--- a/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex } from '@invoke-ai/ui';
+import { Box, Flex } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
 import { Prompts } from 'features/parameters/components/Prompts/Prompts';
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImageTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImageTab.tsx
index b2b2a8e103..2c32861b79 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImageTab.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImageTab.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@invoke-ai/ui';
+import { Box } from '@invoke-ai/ui-library';
 import InitialImageDisplay from 'features/parameters/components/ImageToImage/InitialImageDisplay';
 import ResizeHandle from 'features/ui/components/tabs/ResizeHandle';
 import TextToImageTabMain from 'features/ui/components/tabs/TextToImageTab';
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx
index d57177af9e..5c21ff3549 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx
@@ -1,4 +1,4 @@
-import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui';
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
 import ImportModelsPanel from 'features/modelManager/subpanels/ImportModelsPanel';
 import MergeModelsPanel from 'features/modelManager/subpanels/MergeModelsPanel';
 import ModelManagerPanel from 'features/modelManager/subpanels/ModelManagerPanel';
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ResizeHandle.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ResizeHandle.tsx
index af144c71ef..6f7ae7f549 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ResizeHandle.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ResizeHandle.tsx
@@ -1,5 +1,5 @@
-import type { SystemStyleObject } from '@invoke-ai/ui';
-import { Box, chakra, Flex } from '@invoke-ai/ui';
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { Box, chakra, Flex } from '@invoke-ai/ui-library';
 import { memo } from 'react';
 import type { PanelResizeHandleProps } from 'react-resizable-panels';
 import { PanelResizeHandle } from 'react-resizable-panels';
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImageTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImageTab.tsx
index 4dc7dd3aeb..2310be4f1d 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImageTab.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImageTab.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex } from '@invoke-ai/ui';
+import { Box, Flex } from '@invoke-ai/ui-library';
 import CurrentImageDisplay from 'features/gallery/components/CurrentImage/CurrentImageDisplay';
 import { memo } from 'react';
 
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvasTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvasTab.tsx
index b47717b8bd..1ab25c0507 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvasTab.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvasTab.tsx
@@ -1,4 +1,4 @@
-import { Flex } from '@invoke-ai/ui';
+import { Flex } from '@invoke-ai/ui-library';
 import IAIDropOverlay from 'common/components/IAIDropOverlay';
 import IAICanvas from 'features/canvas/components/IAICanvas';
 import IAICanvasToolbar from 'features/canvas/components/IAICanvasToolbar/IAICanvasToolbar';
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx
index 8b1f0a2283..8f7cebfcae 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx
@@ -1,4 +1,4 @@
-import { Button, useDisclosure } from '@invoke-ai/ui';
+import { Button, useDisclosure } from '@invoke-ai/ui-library';
 import { WorkflowLibraryModalContext } from 'features/workflowLibrary/context/WorkflowLibraryModalContext';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx
index 0aeab01680..5ce3d36a97 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx
@@ -1,4 +1,4 @@
-import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui';
+import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
 import {
   Button,
   ButtonGroup,
@@ -11,7 +11,7 @@ import {
   Input,
   InputGroup,
   InputRightElement,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { $projectId } from 'app/store/nanostores/projectId';
 import { $workflowCategories } from 'app/store/nanostores/workflowCategories';
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx
index da122c39e0..3ffd25281d 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx
@@ -1,4 +1,4 @@
-import { Button, Flex, Heading, Spacer, Text } from '@invoke-ai/ui';
+import { Button, Flex, Heading, Spacer, Text } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import dateFormat, { masks } from 'dateformat';
 import { useWorkflowLibraryModalContext } from 'features/workflowLibrary/context/useWorkflowLibraryModalContext';
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListWrapper.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListWrapper.tsx
index 3dd726b03f..157e552240 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListWrapper.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListWrapper.tsx
@@ -1,4 +1,4 @@
-import { Flex } from '@invoke-ai/ui';
+import { Flex } from '@invoke-ai/ui-library';
 import type { PropsWithChildren } from 'react';
 import { memo } from 'react';
 
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/DownloadWorkflowMenuItem.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/DownloadWorkflowMenuItem.tsx
index 62988147fe..add85d9e8a 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/DownloadWorkflowMenuItem.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/DownloadWorkflowMenuItem.tsx
@@ -1,4 +1,4 @@
-import { MenuItem } from '@invoke-ai/ui';
+import { MenuItem } from '@invoke-ai/ui-library';
 import { useDownloadWorkflow } from 'features/workflowLibrary/hooks/useDownloadWorkflow';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/NewWorkflowMenuItem.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/NewWorkflowMenuItem.tsx
index 82acfa860d..1c41c7be9e 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/NewWorkflowMenuItem.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/NewWorkflowMenuItem.tsx
@@ -4,7 +4,7 @@ import {
   MenuItem,
   Text,
   useDisclosure,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { nodeEditorReset } from 'features/nodes/store/nodesSlice';
 import { addToast } from 'features/system/store/systemSlice';
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowAsMenuItem.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowAsMenuItem.tsx
index 6510cac329..d57d76da2b 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowAsMenuItem.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowAsMenuItem.tsx
@@ -5,7 +5,7 @@ import {
   Input,
   MenuItem,
   useDisclosure,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useSaveWorkflowAs } from 'features/workflowLibrary/hooks/useSaveWorkflowAs';
 import { getWorkflowCopyName } from 'features/workflowLibrary/util/getWorkflowCopyName';
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowMenuItem.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowMenuItem.tsx
index a047444bbc..1e2866cb77 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowMenuItem.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowMenuItem.tsx
@@ -1,4 +1,4 @@
-import { MenuItem } from '@invoke-ai/ui';
+import { MenuItem } from '@invoke-ai/ui-library';
 import { useSaveLibraryWorkflow } from 'features/workflowLibrary/hooks/useSaveWorkflow';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SettingsMenuItem.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SettingsMenuItem.tsx
index c0aa94264e..157e6abc9b 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SettingsMenuItem.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SettingsMenuItem.tsx
@@ -1,4 +1,4 @@
-import { MenuItem } from '@invoke-ai/ui';
+import { MenuItem } from '@invoke-ai/ui-library';
 import WorkflowEditorSettings from 'features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/UploadWorkflowMenuItem.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/UploadWorkflowMenuItem.tsx
index d6c497cadb..a769f52909 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/UploadWorkflowMenuItem.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/UploadWorkflowMenuItem.tsx
@@ -1,4 +1,4 @@
-import { MenuItem } from '@invoke-ai/ui';
+import { MenuItem } from '@invoke-ai/ui-library';
 import { useLoadWorkflowFromFile } from 'features/workflowLibrary/hooks/useLoadWorkflowFromFile';
 import { memo, useCallback, useRef } from 'react';
 import { useDropzone } from 'react-dropzone';
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu.tsx
index b174bf483e..771a682854 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu.tsx
@@ -6,7 +6,7 @@ import {
   MenuList,
   useDisclosure,
   useGlobalMenuClose,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import DownloadWorkflowMenuItem from 'features/workflowLibrary/components/WorkflowLibraryMenu/DownloadWorkflowMenuItem';
 import NewWorkflowMenuItem from 'features/workflowLibrary/components/WorkflowLibraryMenu/NewWorkflowMenuItem';
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx
index e3367dfe28..ae8386e392 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx
@@ -6,7 +6,7 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
-} from '@invoke-ai/ui';
+} from '@invoke-ai/ui-library';
 import WorkflowLibraryContent from 'features/workflowLibrary/components/WorkflowLibraryContent';
 import { useWorkflowLibraryModalContext } from 'features/workflowLibrary/context/useWorkflowLibraryModalContext';
 import { memo } from 'react';
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryPagination.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryPagination.tsx
index d000d5863a..5664255fab 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryPagination.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryPagination.tsx
@@ -1,4 +1,4 @@
-import { Button, ButtonGroup, IconButton } from '@invoke-ai/ui';
+import { Button, ButtonGroup, IconButton } from '@invoke-ai/ui-library';
 import type { Dispatch, SetStateAction } from 'react';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/context/WorkflowLibraryModalContext.ts b/invokeai/frontend/web/src/features/workflowLibrary/context/WorkflowLibraryModalContext.ts
index 20e5640a33..0b3c4f7512 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/context/WorkflowLibraryModalContext.ts
+++ b/invokeai/frontend/web/src/features/workflowLibrary/context/WorkflowLibraryModalContext.ts
@@ -1,4 +1,4 @@
-import type { UseDisclosureReturn } from '@invoke-ai/ui';
+import type { UseDisclosureReturn } from '@invoke-ai/ui-library';
 import { createContext } from 'react';
 
 export const WorkflowLibraryModalContext =
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useDeleteLibraryWorkflow.ts b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useDeleteLibraryWorkflow.ts
index ae541c8157..c7d8ae39a4 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useDeleteLibraryWorkflow.ts
+++ b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useDeleteLibraryWorkflow.ts
@@ -1,4 +1,4 @@
-import { useToast } from '@invoke-ai/ui';
+import { useToast } from '@invoke-ai/ui-library';
 import { useAppToaster } from 'app/components/Toaster';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useGetAndLoadLibraryWorkflow.ts b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useGetAndLoadLibraryWorkflow.ts
index 85a0a6c757..62786e4405 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useGetAndLoadLibraryWorkflow.ts
+++ b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useGetAndLoadLibraryWorkflow.ts
@@ -1,4 +1,4 @@
-import { useToast } from '@invoke-ai/ui';
+import { useToast } from '@invoke-ai/ui-library';
 import { useAppToaster } from 'app/components/Toaster';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { workflowLoadRequested } from 'features/nodes/store/actions';
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflow.ts b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflow.ts
index 85589c6694..0e75417742 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflow.ts
+++ b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflow.ts
@@ -1,5 +1,5 @@
-import type { ToastId } from '@invoke-ai/ui';
-import { useToast } from '@invoke-ai/ui';
+import type { ToastId } from '@invoke-ai/ui-library';
+import { useToast } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { $builtWorkflow } from 'features/nodes/hooks/useWorkflowWatcher';
 import {
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflowAs.ts b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflowAs.ts
index cb827f2195..925984c56e 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflowAs.ts
+++ b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflowAs.ts
@@ -1,5 +1,5 @@
-import type { ToastId } from '@invoke-ai/ui';
-import { useToast } from '@invoke-ai/ui';
+import type { ToastId } from '@invoke-ai/ui-library';
+import { useToast } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { $builtWorkflow } from 'features/nodes/hooks/useWorkflowWatcher';
 import {
diff --git a/invokeai/frontend/web/src/services/api/types.ts b/invokeai/frontend/web/src/services/api/types.ts
index 871a7f5a2e..63969d3a62 100644
--- a/invokeai/frontend/web/src/services/api/types.ts
+++ b/invokeai/frontend/web/src/services/api/types.ts
@@ -1,4 +1,4 @@
-import type { UseToastOptions } from '@invoke-ai/ui';
+import type { UseToastOptions } from '@invoke-ai/ui-library';
 import type { EntityState } from '@reduxjs/toolkit';
 import type { components, paths } from 'services/api/schema';
 import type { O } from 'ts-toolbelt';

From aa134a2db80b04c94652b884204a273c4ce56200 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 27 Jan 2024 20:49:57 +1100
Subject: [PATCH 054/133] chore(ui): remove postinstall script

---
 invokeai/frontend/web/package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/invokeai/frontend/web/package.json b/invokeai/frontend/web/package.json
index c9bde59ce2..ba99b5fdcb 100644
--- a/invokeai/frontend/web/package.json
+++ b/invokeai/frontend/web/package.json
@@ -31,7 +31,6 @@
     "lint": "concurrently -g -n eslint,prettier,tsc,madge -c cyan,green,magenta,yellow \"pnpm run lint:eslint\" \"pnpm run lint:prettier\" \"pnpm run lint:tsc\" \"pnpm run lint:madge\"",
     "fix": "eslint --fix . && prettier --log-level warn --write .",
     "preinstall": "npx only-allow pnpm",
-    "postinstall": "pnpm run theme",
     "theme": "chakra-cli tokens node_modules/@invoke-ai/ui-library",
     "theme:watch": "chakra-cli tokens node_modules/@invoke-ai/ui-library --watch",
     "storybook": "storybook dev -p 6006",

From 26c3378ede6b74af674aa479453241b75e9621d9 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 27 Jan 2024 20:51:28 +1100
Subject: [PATCH 055/133] chore(ui): use new eslint config, add some overrides

---
 invokeai/frontend/web/.eslintrc.js | 132 ++---------------------------
 1 file changed, 5 insertions(+), 127 deletions(-)

diff --git a/invokeai/frontend/web/.eslintrc.js b/invokeai/frontend/web/.eslintrc.js
index 4ad387951f..2d1f21a0f2 100644
--- a/invokeai/frontend/web/.eslintrc.js
+++ b/invokeai/frontend/web/.eslintrc.js
@@ -1,131 +1,9 @@
 module.exports = {
-  env: {
-    browser: true,
-    es6: true,
-    node: true,
-  },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react/recommended',
-    'plugin:react-hooks/recommended',
-    'plugin:react/jsx-runtime',
-    'prettier',
-    'plugin:storybook/recommended',
-  ],
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    ecmaFeatures: {
-      jsx: true,
-    },
-    ecmaVersion: 2018,
-    sourceType: 'module',
-  },
-  plugins: [
-    'react',
-    '@typescript-eslint',
-    'eslint-plugin-react-hooks',
-    'i18next',
-    'path',
-    'unused-imports',
-    'simple-import-sort',
-    'eslint-plugin-import',
-    // These rules are too strict for normal usage, but are useful for optimizing rerenders
-    // '@arthurgeron/react-usememo',
-  ],
-  root: true,
+  extends: ['@invoke-ai/eslint-config-react'],
   rules: {
-    'path/no-relative-imports': ['error', { maxDepth: 0 }],
-    curly: 'error',
-    'i18next/no-literal-string': 'warn',
-    'react/jsx-no-bind': ['error', { allowBind: true }],
-    'react/jsx-curly-brace-presence': [
-      'error',
-      { props: 'never', children: 'never' },
-    ],
-    'react-hooks/exhaustive-deps': 'error',
-    'no-var': 'error',
-    'brace-style': 'error',
-    'prefer-template': 'error',
-    'import/no-duplicates': 'error',
-    radix: 'error',
-    'space-before-blocks': 'error',
-    'import/prefer-default-export': 'off',
-    '@typescript-eslint/no-unused-vars': 'off',
-    'unused-imports/no-unused-imports': 'error',
-    'unused-imports/no-unused-vars': [
-      'warn',
-      {
-        vars: 'all',
-        varsIgnorePattern: '^_',
-        args: 'after-used',
-        argsIgnorePattern: '^_',
-      },
-    ],
-    // These rules are too strict for normal usage, but are useful for optimizing rerenders
-    // '@arthurgeron/react-usememo/require-usememo': [
-    //   'warn',
-    //   {
-    //     strict: false,
-    //     checkHookReturnObject: false,
-    //     fix: { addImports: true },
-    //     checkHookCalls: false,
-
-    //   },
-    // ],
-    // '@arthurgeron/react-usememo/require-memo': 'warn',
-    '@typescript-eslint/ban-ts-comment': 'warn',
-    '@typescript-eslint/no-explicit-any': 'warn',
-    '@typescript-eslint/no-empty-interface': [
-      'error',
-      {
-        allowSingleExtends: true,
-      },
-    ],
-    '@typescript-eslint/consistent-type-imports': [
-      'error',
-      {
-        prefer: 'type-imports',
-        fixStyle: 'separate-type-imports',
-        disallowTypeAnnotations: true,
-      },
-    ],
-    '@typescript-eslint/no-import-type-side-effects': 'error',
-    'simple-import-sort/imports': 'error',
-    'simple-import-sort/exports': 'error',
-    // Prefer @invoke-ai/ui components over chakra
-    'no-restricted-imports': 'off',
-    '@typescript-eslint/no-restricted-imports': [
-      'warn',
-      {
-        paths: [
-          {
-            name: '@chakra-ui/react',
-            message: "Please import from '@invoke-ai/ui' instead.",
-          },
-          {
-            name: '@chakra-ui/layout',
-            message: "Please import from '@invoke-ai/ui' instead.",
-          },
-          {
-            name: '@chakra-ui/portal',
-            message: "Please import from '@invoke-ai/ui' instead.",
-          },
-        ],
-      },
-    ],
-  },
-  overrides: [
-    {
-      files: ['*.stories.tsx'],
-      rules: {
-        'i18next/no-literal-string': 'off',
-      },
-    },
-  ],
-  settings: {
-    react: {
-      version: 'detect',
-    },
+    // TODO(psyche): Enable this rule. Requires no default exports in components - many changes.
+    'react-refresh/only-export-components': 'off',
+    // TODO(psyche): Enable this rule. Requires a lot of eslint-disable-next-line comments.
+    '@typescript-eslint/consistent-type-assertions': 'off',
   },
 };

From 138caa34de036c69c7d5fe002a0255c46cfb53de Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 27 Jan 2024 20:51:34 +1100
Subject: [PATCH 056/133] chore(ui): lint

---
 .../web/src/app/components/AppErrorBoundaryFallback.tsx  | 9 ++++++++-
 .../listenerMiddleware/listeners/batchEnqueued.ts        | 6 +++++-
 .../frontend/web/src/common/components/IAIDndImage.tsx   | 6 +++++-
 .../canvas/components/ClearCanvasHistoryButtonModal.tsx  | 6 +++++-
 .../parameters/ParamControlAdapterBeginEnd.tsx           | 6 +++++-
 .../gallery/components/Boards/BoardContextMenu.tsx       | 7 ++++++-
 .../components/ImageMetadataViewer/ImageMetadataItem.tsx | 8 +++++++-
 .../flow/nodes/Invocation/fields/FieldContextMenu.tsx    | 7 ++++++-
 .../sidePanel/inspector/InspectorDetailsTab.tsx          | 9 ++++++++-
 .../components/sidePanel/inspector/InspectorPanel.tsx    | 9 ++++++++-
 .../sidePanel/inspector/details/EditableNodeTitle.tsx    | 7 ++++++-
 .../components/sidePanel/workflow/WorkflowPanel.tsx      | 9 ++++++++-
 .../components/MainModel/ParamMainModelSelect.tsx        | 7 ++++++-
 .../parameters/components/Seed/ParamSeedNumberInput.tsx  | 6 +++++-
 .../features/queue/components/ClearQueueIconButton.tsx   | 6 +++++-
 .../src/features/queue/components/QueueButtonTooltip.tsx | 8 +++++++-
 .../queue/components/QueueList/QueueItemComponent.tsx    | 8 +++++++-
 .../AdvancedSettingsAccordion.tsx                        | 6 +++++-
 18 files changed, 112 insertions(+), 18 deletions(-)

diff --git a/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx b/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx
index be0269a41b..b3a0368ac9 100644
--- a/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx
+++ b/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx
@@ -1,4 +1,11 @@
-import { Button, Flex, Heading, Link, Text, useToast } from '@invoke-ai/ui-library';
+import {
+  Button,
+  Flex,
+  Heading,
+  Link,
+  Text,
+  useToast,
+} from '@invoke-ai/ui-library';
 import newGithubIssueUrl from 'new-github-issue-url';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts
index 84de200e94..f6a59d3557 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts
@@ -1,4 +1,8 @@
-import { createStandaloneToast, theme, TOAST_OPTIONS } from '@invoke-ai/ui-library';
+import {
+  createStandaloneToast,
+  theme,
+  TOAST_OPTIONS,
+} from '@invoke-ai/ui-library';
 import { logger } from 'app/logging/logger';
 import { parseify } from 'common/util/serialize';
 import { zPydanticValidationError } from 'features/system/store/zodSchemas';
diff --git a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
index 851b21dd13..17fbaafa41 100644
--- a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
@@ -1,4 +1,8 @@
-import type { ChakraProps, FlexProps, SystemStyleObject } from '@invoke-ai/ui-library';
+import type {
+  ChakraProps,
+  FlexProps,
+  SystemStyleObject,
+} from '@invoke-ai/ui-library';
 import { Flex, Icon, Image } from '@invoke-ai/ui-library';
 import {
   IAILoadingImageFallback,
diff --git a/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx b/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx
index 98b720f610..209ca91479 100644
--- a/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx
@@ -1,4 +1,8 @@
-import { Button, ConfirmationAlertDialog, useDisclosure } from '@invoke-ai/ui-library';
+import {
+  Button,
+  ConfirmationAlertDialog,
+  useDisclosure,
+} from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import { clearCanvasHistory } from 'features/canvas/store/canvasSlice';
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx
index bfe513d1fd..409251d5d1 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx
@@ -1,4 +1,8 @@
-import { CompositeRangeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import {
+  CompositeRangeSlider,
+  FormControl,
+  FormLabel,
+} from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useControlAdapterBeginEndStepPct } from 'features/controlAdapters/hooks/useControlAdapterBeginEndStepPct';
 import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx
index 2e1f4ce90a..8d25fbff72 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx
@@ -1,5 +1,10 @@
 import type { ContextMenuProps } from '@invoke-ai/ui-library';
-import { ContextMenu, MenuGroup, MenuItem, MenuList } from '@invoke-ai/ui-library';
+import {
+  ContextMenu,
+  MenuGroup,
+  MenuItem,
+  MenuList,
+} from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx
index 7863a1ccb5..3018c80b94 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx
@@ -1,4 +1,10 @@
-import { ExternalLink, Flex, IconButton, Text, Tooltip } from '@invoke-ai/ui-library';
+import {
+  ExternalLink,
+  Flex,
+  IconButton,
+  Text,
+  Tooltip,
+} from '@invoke-ai/ui-library';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { IoArrowUndoCircleOutline } from 'react-icons/io5';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx
index 7ef79d9544..35ea2e80f1 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx
@@ -1,5 +1,10 @@
 import type { ContextMenuProps } from '@invoke-ai/ui-library';
-import { ContextMenu, MenuGroup, MenuItem, MenuList } from '@invoke-ai/ui-library';
+import {
+  ContextMenu,
+  MenuGroup,
+  MenuItem,
+  MenuList,
+} from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useFieldInputKind } from 'features/nodes/hooks/useFieldInputKind';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx
index b278a9bea8..a2c4759a72 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx
@@ -1,4 +1,11 @@
-import { Box, Flex, FormControl, FormLabel, HStack, Text } from '@invoke-ai/ui-library';
+import {
+  Box,
+  Flex,
+  FormControl,
+  FormLabel,
+  HStack,
+  Text,
+} from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx
index a09970cdc5..e4d1bc5d6c 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx
@@ -1,4 +1,11 @@
-import { Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
+import {
+  Flex,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+} from '@invoke-ai/ui-library';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/details/EditableNodeTitle.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/details/EditableNodeTitle.tsx
index 444eb09e35..d75e52f3ad 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/details/EditableNodeTitle.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/details/EditableNodeTitle.tsx
@@ -1,4 +1,9 @@
-import { Editable, EditableInput, EditablePreview, Flex } from '@invoke-ai/ui-library';
+import {
+  Editable,
+  EditableInput,
+  EditablePreview,
+  Flex,
+} from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useNodeLabel } from 'features/nodes/hooks/useNodeLabel';
 import { useNodeTemplateTitle } from 'features/nodes/hooks/useNodeTemplateTitle';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
index b9e09eb9e2..96d8764ccb 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
@@ -1,4 +1,11 @@
-import { Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
+import {
+  Flex,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+} from '@invoke-ai/ui-library';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
diff --git a/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx b/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx
index 0d626db26e..6de3868e72 100644
--- a/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx
@@ -1,4 +1,9 @@
-import { Combobox, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui-library';
+import {
+  Combobox,
+  FormControl,
+  FormLabel,
+  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';
diff --git a/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedNumberInput.tsx b/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedNumberInput.tsx
index 86cc7b0e54..6dc76adbe1 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedNumberInput.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedNumberInput.tsx
@@ -1,4 +1,8 @@
-import { CompositeNumberInput, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import {
+  CompositeNumberInput,
+  FormControl,
+  FormLabel,
+} from '@invoke-ai/ui-library';
 import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from 'app/constants';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
diff --git a/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx b/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx
index 8400fab7fd..fe8763d65f 100644
--- a/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx
@@ -1,5 +1,9 @@
 import type { IconButtonProps } from '@invoke-ai/ui-library';
-import { IconButton, useDisclosure, useShiftModifier } from '@invoke-ai/ui-library';
+import {
+  IconButton,
+  useDisclosure,
+  useShiftModifier,
+} from '@invoke-ai/ui-library';
 import ClearQueueConfirmationAlertDialog from 'features/queue/components/ClearQueueConfirmationAlertDialog';
 import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem';
 import { useClearQueue } from 'features/queue/hooks/useClearQueue';
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx b/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx
index 24baed9e3d..e34a096ae1 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx
@@ -1,4 +1,10 @@
-import { Divider, Flex, ListItem, Text, UnorderedList } from '@invoke-ai/ui-library';
+import {
+  Divider,
+  Flex,
+  ListItem,
+  Text,
+  UnorderedList,
+} from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useIsReadyToEnqueue } from 'common/hooks/useIsReadyToEnqueue';
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx
index 250bbbafb6..2e08d36db9 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx
@@ -1,5 +1,11 @@
 import type { ChakraProps, CollapseProps } from '@invoke-ai/ui-library';
-import { ButtonGroup, Collapse, Flex, IconButton, Text } from '@invoke-ai/ui-library';
+import {
+  ButtonGroup,
+  Collapse,
+  Flex,
+  IconButton,
+  Text,
+} from '@invoke-ai/ui-library';
 import QueueStatusBadge from 'features/queue/components/common/QueueStatusBadge';
 import { useCancelQueueItem } from 'features/queue/hooks/useCancelQueueItem';
 import { getSecondsFromTimestamps } from 'features/queue/util/getSecondsFromTimestamps';
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx
index 229296b7ae..637819ff9b 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx
@@ -1,5 +1,9 @@
 import type { FormLabelProps } from '@invoke-ai/ui-library';
-import { Flex, FormControlGroup, StandaloneAccordion } from '@invoke-ai/ui-library';
+import {
+  Flex,
+  FormControlGroup,
+  StandaloneAccordion,
+} from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import ParamCFGRescaleMultiplier from 'features/parameters/components/Advanced/ParamCFGRescaleMultiplier';

From 89da69f64705f2cd21ef682bfcff4434b39a00b0 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 27 Jan 2024 20:53:32 +1100
Subject: [PATCH 057/133] fix(ui): correct import in ReduxInit

---
 invokeai/frontend/web/.storybook/ReduxInit.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/.storybook/ReduxInit.tsx b/invokeai/frontend/web/.storybook/ReduxInit.tsx
index 9e62877ef0..55d0132242 100644
--- a/invokeai/frontend/web/.storybook/ReduxInit.tsx
+++ b/invokeai/frontend/web/.storybook/ReduxInit.tsx
@@ -1,7 +1,7 @@
 import { PropsWithChildren, memo, useEffect } from 'react';
 import { modelChanged } from '../src/features/parameters/store/generationSlice';
 import { useAppDispatch } from '../src/app/store/storeHooks';
-import { useGlobalModifiersInit } from '@invoke-ai/ui';
+import { useGlobalModifiersInit } from '@invoke-ai/ui-library';
 /**
  * Initializes some state for storybook. Must be in a different component
  * so that it is run inside the redux context.

From b922ee566a82914518d2141ee31652e2db658f6a Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 27 Jan 2024 20:54:54 +1100
Subject: [PATCH 058/133] chore(ui): use new prettier config

---
 invokeai/frontend/web/.prettierrc.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/invokeai/frontend/web/.prettierrc.js b/invokeai/frontend/web/.prettierrc.js
index bffbd08257..c7f57d1475 100644
--- a/invokeai/frontend/web/.prettierrc.js
+++ b/invokeai/frontend/web/.prettierrc.js
@@ -1,9 +1,5 @@
 module.exports = {
-  trailingComma: 'es5',
-  tabWidth: 2,
-  semi: true,
-  singleQuote: true,
-  endOfLine: 'auto',
+  ...require('@invoke-ai/prettier-config-react'),
   overrides: [
     {
       files: ['public/locales/*.json'],

From 189c430e46d5c0f5b5bf6231bc20d3a8ee2bb646 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 27 Jan 2024 20:55:55 +1100
Subject: [PATCH 059/133] chore(ui): format

Lots of changed bc the line length is now 120. May as well do it now.
---
 invokeai/frontend/web/.unimportedrc.json      |   8 +-
 invokeai/frontend/web/public/locales/en.json  |  37 +-
 invokeai/frontend/web/scripts/typegen.js      |   4 +-
 .../frontend/web/src/app/components/App.tsx   |  13 +-
 .../components/AppErrorBoundaryFallback.tsx   |  42 +-
 .../app/components/ThemeLocaleProvider.tsx    |   8 +-
 .../web/src/app/components/Toaster.ts         |   5 +-
 .../frontend/web/src/app/hooks/useSocketIO.ts |  14 +-
 .../frontend/web/src/app/logging/logger.ts    |  15 +-
 .../frontend/web/src/app/logging/useLogger.ts |   5 +-
 .../src/app/store/createMemoizedSelector.ts   |   6 +-
 .../store/enhancers/reduxRemember/driver.ts   |  11 +-
 .../store/middleware/debugLoggerMiddleware.ts |  19 +-
 .../middleware/devtools/actionSanitizer.ts    |   3 +-
 .../middleware/listenerMiddleware/index.ts    |  26 +-
 .../addCommitStagingAreaImageListener.ts      |  11 +-
 .../addFirstListImagesListener.ts.ts          |  10 +-
 .../listeners/appConfigReceived.ts            |  11 +-
 .../listeners/batchEnqueued.ts                |  21 +-
 .../listeners/boardAndImagesDeleted.ts        |   8 +-
 .../listeners/boardIdSelected.ts              |  45 +-
 .../listeners/canvasCopiedToClipboard.ts      |   4 +-
 .../listeners/canvasDownloadedAsImage.ts      |   8 +-
 .../listeners/canvasMerged.ts                 |   4 +-
 .../listeners/controlNetAutoProcess.ts        |  13 +-
 .../listeners/controlNetImageProcessed.ts     |  24 +-
 .../listeners/enqueueRequestedCanvas.ts       |  32 +-
 .../listeners/enqueueRequestedLinear.ts       |   4 +-
 .../listeners/galleryImageClicked.ts          |  22 +-
 .../listeners/imageDeleted.ts                 |  75 +--
 .../listeners/imageDropped.ts                 |  37 +-
 .../listeners/imageToDeleteSelected.ts        |   5 +-
 .../listeners/imageUploaded.ts                |  13 +-
 .../listeners/initialImageSelected.ts         |   6 +-
 .../listeners/modelSelected.ts                |  17 +-
 .../listeners/modelsLoaded.ts                 | 101 +--
 .../listeners/promptChanged.ts                |  13 +-
 .../listeners/receivedOpenAPISchema.ts        |  16 +-
 .../listeners/socketio/socketConnected.ts     |  10 +-
 .../socketio/socketInvocationComplete.ts      |  50 +-
 .../socketio/socketInvocationError.ts         |   5 +-
 .../socketInvocationRetrievalError.ts         |   5 +-
 .../socketio/socketInvocationStarted.ts       |   5 +-
 .../listeners/socketio/socketModelLoad.ts     |  11 +-
 .../socketio/socketQueueItemStatusChanged.ts  |  31 +-
 .../socketio/socketSessionRetrievalError.ts   |   5 +-
 .../listeners/updateAllNodesRequested.ts      |   5 +-
 .../listeners/upscaleRequested.ts             |  23 +-
 .../listeners/workflowLoadRequested.ts        |  20 +-
 .../web/src/app/store/nanostores/store.ts     |   4 +-
 .../store/nanostores/workflowCategories.ts    |   5 +-
 invokeai/frontend/web/src/app/store/store.ts  |  69 +-
 .../src/common/components/IAIColorPicker.tsx  |  39 +-
 .../web/src/common/components/IAIDndImage.tsx |  56 +-
 .../src/common/components/IAIDropOverlay.tsx  |   7 +-
 .../src/common/components/IAIDroppable.tsx    |   4 +-
 .../src/common/components/IAIFillSkeleton.tsx |   8 +-
 .../common/components/IAIImageFallback.tsx    |  62 +-
 .../common/components/ImageUploadOverlay.tsx  |   4 +-
 .../InformationalPopover.tsx                  |  70 +-
 .../InformationalPopover/constants.ts         |   4 +-
 .../src/common/components/Loading/Loading.tsx |   9 +-
 .../OverlayScrollbars/ScrollableContent.tsx   |  13 +-
 .../src/common/hooks/useFullscreenDropzone.ts |  29 +-
 .../web/src/common/hooks/useGlobalHotkeys.ts  |  21 +-
 .../common/hooks/useGroupedModelCombobox.ts   |  14 +-
 .../src/common/hooks/useImageUploadButton.tsx |   5 +-
 .../src/common/hooks/useIsReadyToEnqueue.ts   |  28 +-
 .../web/src/common/hooks/useModelCombobox.ts  |  14 +-
 .../web/src/common/util/arrayBuffer.ts        |   7 +-
 .../web/src/common/util/colorTokenToCssVar.ts |   3 +-
 .../web/src/common/util/generateSeeds.ts      |  12 +-
 .../src/common/util/roundDownToMultiple.ts    |   5 +-
 .../ClearCanvasHistoryButtonModal.tsx         |  18 +-
 .../features/canvas/components/IAICanvas.tsx  |  84 +--
 .../IAICanvasBoundingBoxOverlay.tsx           |  18 +-
 .../canvas/components/IAICanvasImage.tsx      |   9 +-
 .../IAICanvasImageErrorFallback.tsx           |   4 +-
 .../components/IAICanvasIntermediateImage.tsx |  26 +-
 .../components/IAICanvasMaskCompositer.tsx    |  31 +-
 .../canvas/components/IAICanvasMaskLines.tsx  |   4 +-
 .../components/IAICanvasObjectRenderer.tsx    |   4 +-
 .../components/IAICanvasStagingArea.tsx       |  19 +-
 .../IAICanvasStagingAreaToolbar.tsx           |  41 +-
 .../canvas/components/IAICanvasStatusText.tsx |  39 +-
 .../IAICanvasStatusTextCursorPos.tsx          |   6 +-
 .../components/IAICanvasToolPreview.tsx       | 161 ++---
 .../IAICanvasToolbar/IAICanvasBoundingBox.tsx |  76 +--
 .../IAICanvasToolbar/IAICanvasMaskOptions.tsx |  37 +-
 .../IAICanvasSettingsButtonPopover.tsx        |  86 +--
 .../IAICanvasToolChooserOptions.tsx           |  18 +-
 .../IAICanvasToolbar/IAICanvasToolbar.tsx     |  27 +-
 .../canvas/hooks/useCanvasDragMove.ts         |  14 +-
 .../canvas/hooks/useCanvasGenerationMode.ts   |  37 +-
 .../features/canvas/hooks/useCanvasHotkeys.ts |   7 +-
 .../canvas/hooks/useCanvasMouseDown.ts        |   6 +-
 .../canvas/hooks/useCanvasMouseMove.ts        |  19 +-
 .../features/canvas/hooks/useCanvasMouseUp.ts |  10 +-
 .../features/canvas/hooks/useCanvasZoom.ts    |  17 +-
 .../canvas/hooks/useColorUnderCursor.ts       |  25 +-
 .../web/src/features/canvas/store/actions.ts  |  24 +-
 .../features/canvas/store/canvasNanostore.ts  |   3 +-
 .../features/canvas/store/canvasSelectors.ts  |   9 +-
 .../src/features/canvas/store/canvasSlice.ts  | 140 +---
 .../src/features/canvas/store/canvasTypes.ts  |  16 +-
 .../canvas/util/calculateCoordinates.ts       |   8 +-
 .../features/canvas/util/createMaskStage.ts   |   3 +-
 .../canvas/util/dataURLToImageData.ts         |   6 +-
 .../features/canvas/util/getBaseLayerBlob.ts  |  11 +-
 .../src/features/canvas/util/getCanvasData.ts |  15 +-
 .../canvas/util/getCanvasGenerationMode.ts    |  16 +-
 .../util/getScaledBoundingBoxDimensions.ts    |  15 +-
 .../canvas/util/isElChildOfCanvasTab.tsx      |   4 +-
 .../features/canvas/util/konvaNodeToBlob.ts   |   5 +-
 .../canvas/util/konvaNodeToImageData.ts       |  11 +-
 .../canvas/util/roundDimensionsToMultiple.ts  |   5 +-
 .../components/ChangeBoardModal.tsx           |  30 +-
 .../features/changeBoardModal/store/slice.ts  |   6 +-
 .../components/ControlAdapterConfig.tsx       |  54 +-
 .../components/ControlAdapterImagePreview.tsx |  53 +-
 .../ControlAdapterProcessorComponent.tsx      | 112 +---
 .../ControlAdapterShouldAutoConfig.tsx        |   5 +-
 .../imports/ControlNetCanvasImageImports.tsx  |   9 +-
 .../ParamControlAdapterBeginEnd.tsx           |  11 +-
 .../ParamControlAdapterControlMode.tsx        |   6 +-
 .../parameters/ParamControlAdapterModel.tsx   |  40 +-
 .../ParamControlAdapterProcessorSelect.tsx    |  18 +-
 .../ParamControlAdapterResizeMode.tsx         |  12 +-
 .../parameters/ParamControlAdapterWeight.tsx  |  15 +-
 .../components/processors/CannyProcessor.tsx  |  10 +-
 .../processors/ColorMapProcessor.tsx          |  10 +-
 .../processors/ContentShuffleProcessor.tsx    |  58 +-
 .../processors/DepthAnyThingProcessor.tsx     |  13 +-
 .../components/processors/HedProcessor.tsx    |  11 +-
 .../processors/LineartAnimeProcessor.tsx      |   7 +-
 .../processors/LineartProcessor.tsx           |  11 +-
 .../processors/MediapipeFaceProcessor.tsx     |  10 +-
 .../processors/MidasDepthProcessor.tsx        |   7 +-
 .../processors/MlsdImageProcessor.tsx         |  10 +-
 .../processors/NormalBaeProcessor.tsx         |  10 +-
 .../processors/OpenposeProcessor.tsx          |  11 +-
 .../components/processors/PidiProcessor.tsx   |  11 +-
 .../hooks/useAddControlAdapter.ts             |   4 +-
 .../hooks/useControlAdapterControlImage.ts    |   3 +-
 .../hooks/useControlAdapterIsEnabled.ts       |   3 +-
 .../hooks/useControlAdapterModel.ts           |   3 +-
 .../hooks/useControlAdapterModels.ts          |  15 +-
 .../useControlAdapterProcessedControlImage.ts |   4 +-
 .../hooks/useControlAdapterProcessorNode.ts   |   4 +-
 .../hooks/useControlAdapterProcessorType.ts   |   4 +-
 .../hooks/useControlAdapterWeight.ts          |   3 +-
 .../controlAdapters/store/constants.ts        |   5 +-
 .../store/controlAdaptersPersistDenylist.ts   |   4 +-
 .../store/controlAdaptersSlice.ts             | 120 +---
 .../features/controlAdapters/store/types.ts   | 157 +----
 .../util/buildControlAdapter.ts               |   6 +-
 .../components/DeleteImageModal.tsx           |  53 +-
 .../components/ImageUsageMessage.tsx          |  16 +-
 .../deleteImageModal/store/selectors.ts       |  12 +-
 .../features/deleteImageModal/store/slice.ts  |   9 +-
 .../features/dnd/components/AppDndContext.tsx |  19 +-
 .../features/dnd/components/DndOverlay.tsx    |  13 +-
 .../features/dnd/components/DragPreview.tsx   |  17 +-
 .../dnd/hooks/useScaledCenteredModifer.ts     |   6 +-
 .../web/src/features/dnd/types/index.ts       |  31 +-
 .../features/dnd/util/customPointerWithin.ts  |  19 +-
 .../web/src/features/dnd/util/isValidDrop.ts  |  13 +-
 .../ParamDynamicPromptsMaxPrompts.tsx         |  27 +-
 .../components/ParamDynamicPromptsPreview.tsx |  51 +-
 .../ParamDynamicPromptsSeedBehaviour.tsx      |  15 +-
 .../ShowDynamicPromptsPreviewButton.tsx       |  12 +-
 .../store/dynamicPromptsPersistDenylist.ts    |   3 +-
 .../store/dynamicPromptsSlice.ts              |  11 +-
 .../util/getShouldProcessPrompt.ts            |   3 +-
 .../features/embedding/EmbeddingPopover.tsx   |   7 +-
 .../features/embedding/EmbeddingSelect.tsx    |  92 ++-
 .../web/src/features/embedding/usePrompt.ts   |  12 +-
 .../components/Boards/BoardAutoAddSelect.tsx  |   9 +-
 .../components/Boards/BoardContextMenu.tsx    |  44 +-
 .../Boards/BoardsList/BoardsList.tsx          |  30 +-
 .../Boards/BoardsList/BoardsSearch.tsx        |   7 +-
 .../Boards/BoardsList/GalleryBoard.tsx        |  74 +--
 .../Boards/BoardsList/NoBoardBoard.tsx        |  33 +-
 .../components/Boards/DeleteBoardModal.tsx    |  59 +-
 .../Boards/GalleryBoardContextMenuItems.tsx   |   6 +-
 .../CurrentImage/CurrentImageButtons.tsx      |  53 +-
 .../CurrentImage/CurrentImagePreview.tsx      |  43 +-
 .../components/CurrentImage/ProgressImage.tsx |   8 +-
 .../components/GallerySettingsPopover.tsx     |  21 +-
 .../MultipleSelectionMenuItems.tsx            |  37 +-
 .../SingleSelectionMenuItems.tsx              |  83 +--
 .../components/ImageGalleryContent.tsx        |  43 +-
 .../components/ImageGrid/GalleryImage.tsx     |  39 +-
 .../components/ImageGrid/GalleryImageGrid.tsx |  29 +-
 .../ImageGrid/ImageGridItemContainer.tsx      |   7 +-
 .../ImageGrid/ImageGridListContainer.tsx      |   4 +-
 .../ImageGrid/getGalleryImageDataTestId.ts    |   3 +-
 .../ImageMetadataViewer/DataViewer.tsx        |  36 +-
 .../ImageMetadataActions.tsx                  |  89 +--
 .../ImageMetadataViewer/ImageMetadataItem.tsx |  22 +-
 .../ImageMetadataViewer.tsx                   |  19 +-
 .../components/NextPrevImageButtons.tsx       |  23 +-
 .../gallery/hooks/useGalleryHotkeys.ts        |  26 +-
 .../gallery/hooks/useGalleryImages.ts         |   5 +-
 .../gallery/hooks/useGalleryNavigation.ts     |  39 +-
 .../features/gallery/hooks/useMultiselect.ts  |   9 +-
 .../gallery/hooks/useScrollIntoView.ts        |   6 +-
 .../web/src/features/gallery/store/actions.ts |   7 +-
 .../gallery/store/gallerySelectors.ts         |   8 +-
 .../features/gallery/store/gallerySlice.ts    |  26 +-
 .../web/src/features/gallery/store/types.ts   |   7 +-
 .../gallery/util/getScrollToIndexAlign.ts     |   5 +-
 .../hrf/components/ParamHrfMethod.tsx         |   5 +-
 .../hrf/components/ParamHrfStrength.tsx       |  15 +-
 .../hrf/components/ParamHrfToggle.tsx         |   3 +-
 .../web/src/features/hrf/store/hrfSlice.ts    |   5 +-
 .../src/features/lora/components/LoRAList.tsx |   4 +-
 .../features/lora/components/LoRASelect.tsx   |   9 +-
 .../web/src/features/lora/store/loraSlice.ts  |  20 +-
 .../SyncModels/SyncModelsIconButton.tsx       |  42 +-
 .../modelManager/store/modelManagerSlice.ts   |   3 +-
 .../subpanels/AddModelsPanel/AddModels.tsx    |  29 +-
 .../AddModelsPanel/AdvancedAddCheckpoint.tsx  |  44 +-
 .../AddModelsPanel/AdvancedAddDiffusers.tsx   |  33 +-
 .../AddModelsPanel/AdvancedAddModels.tsx      |  11 +-
 .../AddModelsPanel/FoundModelsList.tsx        | 102 +--
 .../AddModelsPanel/ScanAdvancedAddModels.tsx  |  52 +-
 .../AddModelsPanel/SearchFolderForm.tsx       |  41 +-
 .../AddModelsPanel/SimpleAddModels.tsx        |  29 +-
 .../subpanels/ImportModelsPanel.tsx           |  15 +-
 .../subpanels/MergeModelsPanel.tsx            | 145 +----
 .../subpanels/ModelManagerPanel.tsx           |  26 +-
 .../ModelManagerPanel/CheckpointModelEdit.tsx |  47 +-
 .../ModelManagerPanel/DiffusersModelEdit.tsx  |  35 +-
 .../ModelManagerPanel/LoRAModelEdit.tsx       |  39 +-
 .../ModelManagerPanel/ModelConvert.tsx        |  52 +-
 .../subpanels/ModelManagerPanel/ModelList.tsx | 159 ++---
 .../ModelManagerPanel/ModelListItem.tsx       |  29 +-
 .../ModelManagerSettingsPanel/SyncModels.tsx  |  10 +-
 .../subpanels/shared/BaseModelSelect.tsx      |   9 +-
 .../shared/CheckpointConfigsSelect.tsx        |  28 +-
 .../subpanels/shared/ModelVariantSelect.tsx   |  16 +-
 .../features/nodes/components/NodeEditor.tsx  |  19 +-
 .../flow/AddNodePopover/AddNodePopover.tsx    | 135 ++--
 .../features/nodes/components/flow/Flow.tsx   |  56 +-
 .../connectionLines/CustomConnectionLine.tsx  |  26 +-
 .../flow/edges/InvocationCollapsedEdge.tsx    |  16 +-
 .../flow/edges/InvocationDefaultEdge.tsx      |   9 +-
 .../flow/edges/util/makeEdgeSelector.ts       |  12 +-
 .../nodes/CurrentImage/CurrentImageNode.tsx   |  56 +-
 .../flow/nodes/Invocation/InvocationNode.tsx  |  26 +-
 .../InvocationNodeClassificationIcon.tsx      |  31 +-
 .../Invocation/InvocationNodeInfoIcon.tsx     |  14 +-
 .../InvocationNodeStatusIndicator.tsx         |  59 +-
 .../InvocationNodeUnknownFallback.tsx         |   8 +-
 .../Invocation/InvocationNodeWrapper.tsx      |  23 +-
 .../flow/nodes/Invocation/NotesTextarea.tsx   |   7 +-
 .../nodes/Invocation/UseCacheCheckbox.tsx     |   6 +-
 .../Invocation/fields/EditableFieldTitle.tsx  |  32 +-
 .../Invocation/fields/FieldContextMenu.tsx    |  46 +-
 .../nodes/Invocation/fields/FieldHandle.tsx   |  31 +-
 .../nodes/Invocation/fields/FieldTitle.tsx    |   4 +-
 .../Invocation/fields/FieldTooltipContent.tsx |   5 +-
 .../nodes/Invocation/fields/InputField.tsx    |  76 +--
 .../Invocation/fields/InputFieldRenderer.tsx  | 215 ++----
 .../Invocation/fields/LinearViewField.tsx     |  17 +-
 .../nodes/Invocation/fields/OutputField.tsx   |  65 +-
 .../inputs/BoardFieldInputComponent.tsx       |  14 +-
 .../inputs/BooleanFieldInputComponent.tsx     |  18 +-
 .../inputs/ColorFieldInputComponent.tsx       |  17 +-
 .../ControlNetModelFieldInputComponent.tsx    |  25 +-
 .../fields/inputs/EnumFieldInputComponent.tsx |  19 +-
 .../IPAdapterModelFieldInputComponent.tsx     |  21 +-
 .../inputs/ImageFieldInputComponent.tsx       |  26 +-
 .../inputs/LoRAModelFieldInputComponent.tsx   |  31 +-
 .../inputs/MainModelFieldInputComponent.tsx   |  29 +-
 .../inputs/NumberFieldInputComponent.tsx      |   5 +-
 .../RefinerModelFieldInputComponent.tsx       |  24 +-
 .../SDXLMainModelFieldInputComponent.tsx      |  29 +-
 .../inputs/SchedulerFieldInputComponent.tsx   |  15 +-
 .../inputs/StringFieldInputComponent.tsx      |  27 +-
 .../T2IAdapterModelFieldInputComponent.tsx    |  21 +-
 .../inputs/VAEModelFieldInputComponent.tsx    |  29 +-
 .../nodes/Invocation/fields/inputs/types.ts   |  10 +-
 .../components/flow/nodes/Notes/NotesNode.tsx |   8 +-
 .../flow/nodes/common/NodeTitle.tsx           |  32 +-
 .../flow/nodes/common/NodeWrapper.tsx         |  17 +-
 .../BottomLeftPanel/ViewportControls.tsx      |  16 +-
 .../flow/panels/MinimapPanel/MinimapPanel.tsx |   4 +-
 .../flow/panels/TopPanel/TopPanel.tsx         |  13 +-
 .../panels/TopPanel/UpdateNodesButton.tsx     |   6 +-
 .../flow/panels/TopPanel/WorkflowName.tsx     |  13 +-
 .../panels/TopRightPanel/TopRightPanel.tsx    |   3 +-
 .../TopRightPanel/WorkflowEditorSettings.tsx  |  50 +-
 .../sidePanel/NodeEditorPanelGroup.tsx        |   5 +-
 .../sidePanel/inspector/InspectorDataTab.tsx  |   7 +-
 .../inspector/InspectorDetailsTab.tsx         |  65 +-
 .../inspector/InspectorOutputsTab.tsx         |  63 +-
 .../sidePanel/inspector/InspectorPanel.tsx    |  19 +-
 .../inspector/InspectorTemplateTab.tsx        |  29 +-
 .../inspector/details/EditableNodeTitle.tsx   |  15 +-
 .../sidePanel/workflow/WorkflowGeneralTab.tsx |  33 +-
 .../sidePanel/workflow/WorkflowLinearTab.tsx  |  26 +-
 .../sidePanel/workflow/WorkflowPanel.tsx      |  19 +-
 .../hooks/useAnyOrDirectInputFieldNames.ts    |  35 +-
 .../src/features/nodes/hooks/useBuildNode.ts  |  14 +-
 .../hooks/useConnectionInputFieldNames.ts     |  41 +-
 .../nodes/hooks/useConnectionState.ts         |  29 +-
 .../nodes/hooks/useDoNodeVersionsMatch.ts     |  24 +-
 .../features/nodes/hooks/useFieldInputKind.ts |  20 +-
 .../nodes/hooks/useFieldInputTemplate.ts      |  18 +-
 .../nodes/hooks/useFieldOutputTemplate.ts     |  18 +-
 .../features/nodes/hooks/useFieldTemplate.ts  |  24 +-
 .../nodes/hooks/useFieldTemplateTitle.ts      |  24 +-
 .../features/nodes/hooks/useFieldType.ts.ts   |   6 +-
 .../nodes/hooks/useGetNodesNeedUpdate.ts      |  19 +-
 .../nodes/hooks/useIsValidConnection.ts       |   4 +-
 .../nodes/hooks/useNodeClassification.ts      |  18 +-
 .../nodes/hooks/useNodeNeedsUpdate.ts         |  18 +-
 .../features/nodes/hooks/useNodeTemplate.ts   |  14 +-
 .../nodes/hooks/useNodeTemplateByType.ts      |   9 +-
 .../nodes/hooks/useNodeTemplateTitle.ts       |  22 +-
 .../nodes/hooks/useOutputFieldNames.ts        |  26 +-
 .../src/features/nodes/hooks/useWithFooter.ts |   5 +-
 .../nodes/hooks/useWorkflowWatcher.ts         |  10 +-
 .../web/src/features/nodes/store/actions.ts   |  16 +-
 .../nodes/store/nodeTemplatesSlice.ts         |   8 +-
 .../src/features/nodes/store/nodesSlice.ts    | 228 ++-----
 .../web/src/features/nodes/store/types.ts     |   7 +-
 .../store/util/findConnectionToValidHandle.ts |  49 +-
 .../nodes/store/util/getIsGraphAcyclic.ts     |   7 +-
 .../util/makeIsConnectionValidSelector.ts     |  15 +-
 .../util/validateSourceAndTargetTypes.ts      |  28 +-
 .../src/features/nodes/store/workflowSlice.ts |  24 +-
 .../web/src/features/nodes/types/common.ts    |  31 +-
 .../web/src/features/nodes/types/field.ts     | 612 ++++++------------
 .../src/features/nodes/types/invocation.ts    |  30 +-
 .../web/src/features/nodes/types/metadata.ts  |   4 +-
 .../web/src/features/nodes/types/openapi.ts   |  47 +-
 .../web/src/features/nodes/types/semver.ts    |   4 +-
 .../src/features/nodes/types/v1/workflowV1.ts |  26 +-
 .../web/src/features/nodes/types/workflow.ts  |  14 +-
 .../util/graph/addControlNetToLinearGraph.ts  |  15 +-
 .../nodes/util/graph/addHrfToGraph.ts         |  29 +-
 .../util/graph/addIPAdapterToLinearGraph.ts   |  19 +-
 .../nodes/util/graph/addLinearUIOutputNode.ts |  13 +-
 .../nodes/util/graph/addLoRAsToGraph.ts       |  22 +-
 .../nodes/util/graph/addNSFWCheckerToGraph.ts |  10 +-
 .../nodes/util/graph/addSDXLLoRAstoGraph.ts   |  24 +-
 .../nodes/util/graph/addSDXLRefinerToGraph.ts |  39 +-
 .../util/graph/addSeamlessToLinearGraph.ts    |  15 +-
 .../util/graph/addT2IAdapterToLinearGraph.ts  |  19 +-
 .../nodes/util/graph/addVAEToGraph.ts         |   9 +-
 .../nodes/util/graph/addWatermarkerToGraph.ts |  11 +-
 .../util/graph/buildAdHocUpscaleGraph.ts      |  13 +-
 .../nodes/util/graph/buildCanvasGraph.ts      |  32 +-
 .../graph/buildCanvasImageToImageGraph.ts     |  34 +-
 .../util/graph/buildCanvasInpaintGraph.ts     |  18 +-
 .../util/graph/buildCanvasOutpaintGraph.ts    |  14 +-
 .../graph/buildCanvasSDXLImageToImageGraph.ts |  48 +-
 .../util/graph/buildCanvasSDXLInpaintGraph.ts |  25 +-
 .../graph/buildCanvasSDXLOutpaintGraph.ts     |  29 +-
 .../graph/buildCanvasSDXLTextToImageGraph.ts  |  34 +-
 .../util/graph/buildCanvasTextToImageGraph.ts |  24 +-
 .../util/graph/buildLinearBatchConfig.ts      |  18 +-
 .../graph/buildLinearImageToImageGraph.ts     |  15 +-
 .../graph/buildLinearSDXLImageToImageGraph.ts |  22 +-
 .../graph/buildLinearSDXLTextToImageGraph.ts  |   7 +-
 .../util/graph/buildLinearTextToImageGraph.ts |   4 +-
 .../nodes/util/graph/buildNodesGraph.ts       |  97 ++-
 .../features/nodes/util/graph/constants.ts    |  21 +-
 .../nodes/util/graph/getSDXLStylePrompt.ts    |  18 +-
 .../src/features/nodes/util/graph/metadata.ts |  27 +-
 .../nodes/util/node/buildCurrentImageNode.ts  |   4 +-
 .../nodes/util/node/buildInvocationNode.ts    |  20 +-
 .../util/node/getSortedFilteredFieldNames.ts  |   9 +-
 .../features/nodes/util/node/nodeUpdate.ts    |  20 +-
 .../util/schema/buildFieldInputInstance.ts    |  54 +-
 .../util/schema/buildFieldInputTemplate.ts    | 188 +++---
 .../util/schema/buildFieldOutputTemplate.ts   |   5 +-
 .../nodes/util/schema/parseFieldType.ts       |  29 +-
 .../features/nodes/util/schema/parseSchema.ts |  49 +-
 .../nodes/util/workflow/buildWorkflow.ts      |  12 +-
 .../nodes/util/workflow/migrations.ts         |  24 +-
 .../nodes/util/workflow/validateWorkflow.ts   |  32 +-
 .../Advanced/ParamCFGRescaleMultiplier.tsx    |  44 +-
 .../components/Advanced/ParamClipSkip.tsx     |  11 +-
 .../BoundingBox/ParamBoundingBoxHeight.tsx    |  31 +-
 .../BoundingBox/ParamBoundingBoxWidth.tsx     |  27 +-
 .../ParamCanvasCoherenceMode.tsx              |   9 +-
 .../ParamCanvasCoherenceSteps.tsx             |  39 +-
 .../ParamCanvasCoherenceStrength.tsx          |  11 +-
 .../MaskAdjustment/ParamMaskBlur.tsx          |  15 +-
 .../MaskAdjustment/ParamMaskBlurMethod.tsx    |   5 +-
 .../Canvas/GenerationModeStatusText.tsx       |   3 +-
 .../InfillAndScaling/ParamInfillMethod.tsx    |   5 +-
 .../ParamInfillPatchmatchDownscaleSize.tsx    |  39 +-
 .../InfillAndScaling/ParamInfillTilesize.tsx  |  19 +-
 .../ParamScaleBeforeProcessing.tsx            |   9 +-
 .../InfillAndScaling/ParamScaledHeight.tsx    |  39 +-
 .../InfillAndScaling/ParamScaledWidth.tsx     |  39 +-
 .../components/Core/ParamCFGScale.tsx         |  25 +-
 .../components/Core/ParamHeight.tsx           |  20 +-
 .../components/Core/ParamNegativePrompt.tsx   |  11 +-
 .../components/Core/ParamPositivePrompt.tsx   |  10 +-
 .../components/Core/ParamScheduler.tsx        |   5 +-
 .../parameters/components/Core/ParamSteps.tsx |  20 +-
 .../parameters/components/Core/ParamWidth.tsx |  20 +-
 .../ImageSize/AspectRatioPreview.tsx          |  18 +-
 .../ImageSize/AspectRatioSelect.tsx           |  12 +-
 .../components/ImageSize/ImageSizeContext.ts  |  42 +-
 .../ImageSize/LockAspectRatioButton.tsx       |   8 +-
 .../ImageSize/SetOptimalSizeButton.tsx        |   5 +-
 .../components/ImageSize/calculateNewSize.ts  |   5 +-
 .../components/ImageSize/constants.ts         |   5 +-
 .../parameters/components/ImageSize/hooks.ts  |   7 +-
 .../parameters/components/ImageSize/types.ts  |  14 +-
 .../ImageToImage/ImageToImageFit.tsx          |   4 +-
 .../ImageToImage/ImageToImageStrength.tsx     |  32 +-
 .../components/ImageToImage/InitialImage.tsx  |  25 +-
 .../ImageToImage/InitialImageDisplay.tsx      |  24 +-
 .../MainModel/ParamMainModelSelect.tsx        |  38 +-
 .../components/Seed/ParamSeedNumberInput.tsx  |  15 +-
 .../components/Seed/ParamSeedRandomize.tsx    |  12 +-
 .../components/Seed/ParamSeedShuffle.tsx      |   4 +-
 .../Upscale/ParamRealESRGANModel.tsx          |  17 +-
 .../VAEModel/ParamVAEModelSelect.tsx          |  20 +-
 .../components/VAEModel/ParamVAEPrecision.tsx |   5 +-
 .../hooks/useCoreParametersCollapseLabel.ts   |   9 +-
 .../parameters/hooks/useIsAllowedToUpscale.ts |  51 +-
 .../parameters/hooks/usePreselectedImage.ts   |  13 +-
 .../parameters/hooks/useRecallParameters.ts   | 149 +----
 .../src/features/parameters/store/actions.ts  |   8 +-
 .../parameters/store/generationSlice.ts       |  41 +-
 .../parameters/store/postprocessingSlice.ts   |   8 +-
 .../src/features/parameters/store/types.ts    |   6 +-
 .../parameters/types/parameterSchemas.ts      | 122 +---
 .../util/modelIdToControlNetModelParam.ts     |   4 +-
 .../util/modelIdToIPAdapterModelParams.ts     |   4 +-
 .../util/modelIdToLoRAModelParam.ts           |   4 +-
 .../util/modelIdToMainModelParam.ts           |   4 +-
 .../util/modelIdToSDXLRefinerModelParam.ts    |   4 +-
 .../util/modelIdToT2IAdapterModelParam.ts     |   4 +-
 .../parameters/util/modelIdToVAEModelParam.ts |   4 +-
 .../parameters/util/optimalDimension.ts       |  23 +-
 .../CancelCurrentQueueItemIconButton.tsx      |   3 +-
 .../components/ClearInvocationCacheButton.tsx |   9 +-
 .../queue/components/ClearQueueIconButton.tsx |  14 +-
 .../components/InvokeQueueBackButton.tsx      |   4 +-
 .../components/QueueActionsMenuButton.tsx     |  28 +-
 .../queue/components/QueueButtonTooltip.tsx   |  16 +-
 .../queue/components/QueueControls.tsx        |   9 +-
 .../QueueList/QueueItemComponent.tsx          |  59 +-
 .../components/QueueList/QueueItemDetail.tsx  |  70 +-
 .../queue/components/QueueList/QueueList.tsx  |  38 +-
 .../QueueList/QueueListComponent.tsx          |  19 +-
 .../components/QueueList/QueueListHeader.tsx  |   6 +-
 .../features/queue/components/QueueStatus.tsx |  30 +-
 .../queue/components/QueueTabContent.tsx      |   3 +-
 .../ToggleInvocationCacheButton.tsx           |  12 +-
 .../components/common/QueueStatusBadge.tsx    |   6 +-
 .../components/common/StatusStatItem.tsx      |   7 +-
 .../features/queue/hooks/useCancelBatch.ts    |   5 +-
 .../queue/hooks/useCancelCurrentQueueItem.ts  |  15 +-
 .../queue/hooks/useClearInvocationCache.ts    |  10 +-
 .../src/features/queue/hooks/useClearQueue.ts |  15 +-
 .../queue/hooks/useDisableInvocationCache.ts  |   5 +-
 .../queue/hooks/useEnableInvocationCache.ts   |   5 +-
 .../hooks/useIsQueueMutationInProgress.ts     |  42 +-
 .../features/queue/hooks/usePauseProcessor.ts |  15 +-
 .../src/features/queue/hooks/usePruneQueue.ts |  18 +-
 .../queue/hooks/useResumeProcessor.ts         |  15 +-
 .../src/features/queue/store/queueSlice.ts    |  10 +-
 .../ParamSDXLNegativeStylePrompt.tsx          |  10 +-
 .../ParamSDXLPositiveStylePrompt.tsx          |  11 +-
 .../SDXLPrompts/SDXLConcatButton.tsx          |  17 +-
 .../components/SDXLPrompts/SDXLPrompts.tsx    |   4 +-
 .../SDXLRefiner/ParamSDXLRefinerCFGScale.tsx  |  25 +-
 .../ParamSDXLRefinerModelSelect.tsx           |  28 +-
 ...ParamSDXLRefinerNegativeAestheticScore.tsx |  16 +-
 ...ParamSDXLRefinerPositiveAestheticScore.tsx |  16 +-
 .../SDXLRefiner/ParamSDXLRefinerScheduler.tsx |   5 +-
 .../SDXLRefiner/ParamSDXLRefinerStart.tsx     |  12 +-
 .../SDXLRefiner/ParamSDXLRefinerSteps.tsx     |  20 +-
 .../web/src/features/sdxl/store/sdxlSlice.ts  |  15 +-
 .../AdvancedSettingsAccordion.tsx             |  56 +-
 .../CompositingSettingsAccordion.tsx          |   6 +-
 .../ControlSettingsAccordion.tsx              | 115 ++--
 .../GenerationSettingsAccordion.tsx           |  44 +-
 .../ImageSettingsAccordion.tsx                |  35 +-
 .../ImageSizeCanvas.tsx                       |   9 +-
 .../ImageSizeLinear.tsx                       |   6 +-
 .../RefinerSettingsAccordion.tsx              |  41 +-
 .../hooks/useExpanderToggle.ts                |   6 +-
 .../hooks/useStandaloneAccordionToggle.ts     |  15 +-
 .../components/AboutModal/AboutModal.tsx      |  56 +-
 .../HotkeysModal/HotkeyListItem.tsx           |   5 +-
 .../components/HotkeysModal/HotkeysModal.tsx  |  37 +-
 .../components/HotkeysModal/useHotkeyData.ts  |  16 +-
 .../system/components/ProgressBar.tsx         |   4 +-
 .../SettingsModal/SettingsLanguageSelect.tsx  |   8 +-
 .../SettingsModal/SettingsLogLevelSelect.tsx  |  10 +-
 .../components/SettingsModal/SettingsMenu.tsx |  28 +-
 .../SettingsModal/SettingsModal.tsx           | 163 ++---
 .../components/SettingsModal/StyledFlex.tsx   |   8 +-
 .../SettingsModal/useClearIntermediates.ts    |  26 +-
 .../system/components/StatusIndicator.tsx     |   7 +-
 .../system/components/StickyScrollable.tsx    |  32 +-
 .../features/system/hooks/useFeatureStatus.ts |   4 +-
 .../src/features/system/store/configSlice.ts  |  14 +-
 .../system/store/systemPersistDenylist.ts     |   6 +-
 .../features/system/store/systemSelectors.ts  |   5 +-
 .../src/features/system/store/systemSlice.ts  |  22 +-
 .../web/src/features/system/store/types.ts    |  10 +-
 .../system/util/calculateStepPercentage.ts    |   6 +-
 .../system/util/copyBlobToClipboard.ts        |   5 +-
 .../ui/components/FloatingGalleryButton.tsx   |   8 +-
 .../FloatingParametersPanelButtons.tsx        |   9 +-
 .../src/features/ui/components/InvokeTabs.tsx |  57 +-
 .../ui/components/ParametersPanel.tsx         |  14 +-
 .../ui/components/tabs/ImageToImageTab.tsx    |  20 +-
 .../ui/components/tabs/ModelManagerTab.tsx    |  17 +-
 .../ui/components/tabs/ResizeHandle.tsx       |   5 +-
 .../ui/components/tabs/TextToImageTab.tsx     |   9 +-
 .../ui/components/tabs/UnifiedCanvasTab.tsx   |   5 +-
 .../web/src/features/ui/hooks/usePanel.ts     |  38 +-
 .../web/src/features/ui/store/tabMap.ts       |   9 +-
 .../web/src/features/ui/store/uiSelectors.ts  |  14 +-
 .../web/src/features/ui/store/uiSlice.ts      |  15 +-
 .../components/WorkflowLibraryButton.tsx      |   6 +-
 .../components/WorkflowLibraryList.tsx        |  75 +--
 .../components/WorkflowLibraryListItem.tsx    |  49 +-
 .../components/WorkflowLibraryListWrapper.tsx |  11 +-
 .../DownloadWorkflowMenuItem.tsx              |   6 +-
 .../NewWorkflowMenuItem.tsx                   |   8 +-
 .../SaveWorkflowAsMenuItem.tsx                |  16 +-
 .../WorkflowLibraryMenu.tsx                   |   3 +-
 .../components/WorkflowLibraryModal.tsx       |   9 +-
 .../components/WorkflowLibraryPagination.tsx  |  10 +-
 .../context/WorkflowLibraryModalContext.ts    |   3 +-
 .../context/useWorkflowLibraryModalContext.ts |   4 +-
 .../hooks/useDeleteLibraryWorkflow.ts         |  20 +-
 .../hooks/useGetAndLoadEmbeddedWorkflow.ts    |  16 +-
 .../hooks/useGetAndLoadLibraryWorkflow.ts     |  27 +-
 .../hooks/useLoadWorkflowFromFile.tsx         |  12 +-
 .../workflowLibrary/hooks/useSaveWorkflow.ts  |  23 +-
 .../hooks/useSaveWorkflowAs.ts                |  17 +-
 .../util/getWorkflowCopyName.ts               |   3 +-
 invokeai/frontend/web/src/main.tsx            |   4 +-
 .../src/services/api/authToastMiddleware.ts   |  54 +-
 .../web/src/services/api/constants.ts         |  13 +-
 .../web/src/services/api/endpoints/appInfo.ts |   6 +-
 .../web/src/services/api/endpoints/boards.ts  |  34 +-
 .../web/src/services/api/endpoints/images.ts  | 540 +++++-----------
 .../web/src/services/api/endpoints/models.ts  | 231 ++-----
 .../web/src/services/api/endpoints/queue.ts   |  73 +--
 .../src/services/api/endpoints/workflows.ts   |  11 +-
 .../src/services/api/hooks/useBoardTotal.ts   |   5 +-
 .../api/hooks/useDebouncedImageWorkflow.ts    |  13 +-
 .../api/hooks/useDebouncedMetadata.ts         |   8 +-
 .../frontend/web/src/services/api/index.ts    |  21 +-
 .../web/src/services/api/thunks/schema.ts     |  29 +-
 .../frontend/web/src/services/api/types.ts    |  73 +--
 .../frontend/web/src/services/api/util.ts     |  21 +-
 .../web/src/services/events/actions.ts        |   4 +-
 .../frontend/web/src/services/events/types.ts |  12 +-
 .../services/events/util/setEventListeners.ts |   9 +-
 invokeai/frontend/web/tsconfig.node.json      |   7 +-
 568 files changed, 3602 insertions(+), 11172 deletions(-)

diff --git a/invokeai/frontend/web/.unimportedrc.json b/invokeai/frontend/web/.unimportedrc.json
index 733e958861..cf96610502 100644
--- a/invokeai/frontend/web/.unimportedrc.json
+++ b/invokeai/frontend/web/.unimportedrc.json
@@ -1,13 +1,7 @@
 {
   "entry": ["src/main.tsx"],
   "extensions": [".ts", ".tsx"],
-  "ignorePatterns": [
-    "**/node_modules/**",
-    "dist/**",
-    "public/**",
-    "**/*.stories.tsx",
-    "config/**"
-  ],
+  "ignorePatterns": ["**/node_modules/**", "dist/**", "public/**", "**/*.stories.tsx", "config/**"],
   "ignoreUnresolved": [],
   "ignoreUnimported": ["src/i18.d.ts", "vite.config.ts", "src/vite-env.d.ts"],
   "respectGitignore": true,
diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 6b9dbaf7bc..b2d873d6d5 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -1463,9 +1463,7 @@
         },
         "compositingCoherencePass": {
             "heading": "Coherence Pass",
-            "paragraphs": [
-                "A second round of denoising helps to composite the Inpainted/Outpainted image."
-            ]
+            "paragraphs": ["A second round of denoising helps to composite the Inpainted/Outpainted image."]
         },
         "compositingCoherenceMode": {
             "heading": "Mode",
@@ -1473,10 +1471,7 @@
         },
         "compositingCoherenceSteps": {
             "heading": "Steps",
-            "paragraphs": [
-                "Number of denoising steps used in the Coherence Pass.",
-                "Same as the main Steps parameter."
-            ]
+            "paragraphs": ["Number of denoising steps used in the Coherence Pass.", "Same as the main Steps parameter."]
         },
         "compositingStrength": {
             "heading": "Strength",
@@ -1498,15 +1493,11 @@
         },
         "controlNetControlMode": {
             "heading": "Control Mode",
-            "paragraphs": [
-                "Lends more weight to either the prompt or ControlNet."
-            ]
+            "paragraphs": ["Lends more weight to either the prompt or ControlNet."]
         },
         "controlNetResizeMode": {
             "heading": "Resize Mode",
-            "paragraphs": [
-                "How the ControlNet image will be fit to the image output size."
-            ]
+            "paragraphs": ["How the ControlNet image will be fit to the image output size."]
         },
         "controlNet": {
             "heading": "ControlNet",
@@ -1516,9 +1507,7 @@
         },
         "controlNetWeight": {
             "heading": "Weight",
-            "paragraphs": [
-                "How strongly the ControlNet will impact the generated image."
-            ]
+            "paragraphs": ["How strongly the ControlNet will impact the generated image."]
         },
         "dynamicPrompts": {
             "heading": "Dynamic Prompts",
@@ -1530,9 +1519,7 @@
         },
         "dynamicPromptsMaxPrompts": {
             "heading": "Max Prompts",
-            "paragraphs": [
-                "Limits the number of prompts that can be generated by Dynamic Prompts."
-            ]
+            "paragraphs": ["Limits the number of prompts that can be generated by Dynamic Prompts."]
         },
         "dynamicPromptsSeedBehaviour": {
             "heading": "Seed Behaviour",
@@ -1549,9 +1536,7 @@
         },
         "lora": {
             "heading": "LoRA Weight",
-            "paragraphs": [
-                "Higher LoRA weight will lead to larger impacts on the final image."
-            ]
+            "paragraphs": ["Higher LoRA weight will lead to larger impacts on the final image."]
         },
         "noiseUseCPU": {
             "heading": "Use CPU Noise",
@@ -1563,9 +1548,7 @@
         },
         "paramCFGScale": {
             "heading": "CFG Scale",
-            "paragraphs": [
-                "Controls how much your prompt influences the generation process."
-            ]
+            "paragraphs": ["Controls how much your prompt influences the generation process."]
         },
         "paramCFGRescaleMultiplier": {
             "heading": "CFG Rescale Multiplier",
@@ -1617,9 +1600,7 @@
         },
         "paramVAE": {
             "heading": "VAE",
-            "paragraphs": [
-                "Model used for translating AI output into the final image."
-            ]
+            "paragraphs": ["Model used for translating AI output into the final image."]
         },
         "paramVAEPrecision": {
             "heading": "VAE Precision",
diff --git a/invokeai/frontend/web/scripts/typegen.js b/invokeai/frontend/web/scripts/typegen.js
index ce78e3e5ba..78ea6150cd 100644
--- a/invokeai/frontend/web/scripts/typegen.js
+++ b/invokeai/frontend/web/scripts/typegen.js
@@ -6,9 +6,7 @@ const OPENAPI_URL = 'http://127.0.0.1:9090/openapi.json';
 const OUTPUT_FILE = 'src/services/api/schema.ts';
 
 async function main() {
-  process.stdout.write(
-    `Generating types "${OPENAPI_URL}" --> "${OUTPUT_FILE}"...`
-  );
+  process.stdout.write(`Generating types "${OPENAPI_URL}" --> "${OUTPUT_FILE}"...`);
   const types = await openapiTS(OPENAPI_URL, {
     exportType: true,
     transform: (schemaObject) => {
diff --git a/invokeai/frontend/web/src/app/components/App.tsx b/invokeai/frontend/web/src/app/components/App.tsx
index beb22d4446..3474be5227 100644
--- a/invokeai/frontend/web/src/app/components/App.tsx
+++ b/invokeai/frontend/web/src/app/components/App.tsx
@@ -45,8 +45,7 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => {
   useGlobalModifiersInit();
   useGlobalHotkeys();
 
-  const { dropzone, isHandlingUpload, setIsHandlingUpload } =
-    useFullscreenDropzone();
+  const { dropzone, isHandlingUpload, setIsHandlingUpload } = useFullscreenDropzone();
 
   const handleReset = useCallback(() => {
     clearStorage();
@@ -70,10 +69,7 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => {
   }, [dispatch]);
 
   return (
-    <ErrorBoundary
-      onReset={handleReset}
-      FallbackComponent={AppErrorBoundaryFallback}
-    >
+    <ErrorBoundary onReset={handleReset} FallbackComponent={AppErrorBoundaryFallback}>
       <Box
         id="invoke-app-wrapper"
         w="100vw"
@@ -86,10 +82,7 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => {
         <InvokeTabs />
         <AnimatePresence>
           {dropzone.isDragActive && isHandlingUpload && (
-            <ImageUploadOverlay
-              dropzone={dropzone}
-              setIsHandlingUpload={setIsHandlingUpload}
-            />
+            <ImageUploadOverlay dropzone={dropzone} setIsHandlingUpload={setIsHandlingUpload} />
           )}
         </AnimatePresence>
       </Box>
diff --git a/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx b/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx
index b3a0368ac9..d2992a8cd9 100644
--- a/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx
+++ b/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx
@@ -1,19 +1,8 @@
-import {
-  Button,
-  Flex,
-  Heading,
-  Link,
-  Text,
-  useToast,
-} from '@invoke-ai/ui-library';
+import { Button, Flex, Heading, Link, Text, useToast } from '@invoke-ai/ui-library';
 import newGithubIssueUrl from 'new-github-issue-url';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  PiArrowCounterClockwiseBold,
-  PiArrowSquareOutBold,
-  PiCopyBold,
-} from 'react-icons/pi';
+import { PiArrowCounterClockwiseBold, PiArrowSquareOutBold, PiCopyBold } from 'react-icons/pi';
 import { serializeError } from 'serialize-error';
 
 type Props = {
@@ -44,22 +33,8 @@ const AppErrorBoundaryFallback = ({ error, resetErrorBoundary }: Props) => {
     [error.message, error.name]
   );
   return (
-    <Flex
-      layerStyle="body"
-      w="100vw"
-      h="100vh"
-      alignItems="center"
-      justifyContent="center"
-      p={4}
-    >
-      <Flex
-        layerStyle="first"
-        flexDir="column"
-        borderRadius="base"
-        justifyContent="center"
-        gap={8}
-        p={16}
-      >
+    <Flex layerStyle="body" w="100vw" h="100vh" alignItems="center" justifyContent="center" p={4}>
+      <Flex layerStyle="first" flexDir="column" borderRadius="base" justifyContent="center" gap={8} p={16}>
         <Heading>{t('common.somethingWentWrong')}</Heading>
         <Flex
           layerStyle="second"
@@ -75,19 +50,14 @@ const AppErrorBoundaryFallback = ({ error, resetErrorBoundary }: Props) => {
           </Text>
         </Flex>
         <Flex gap={4}>
-          <Button
-            leftIcon={<PiArrowCounterClockwiseBold />}
-            onClick={resetErrorBoundary}
-          >
+          <Button leftIcon={<PiArrowCounterClockwiseBold />} onClick={resetErrorBoundary}>
             {t('accessibility.resetUI')}
           </Button>
           <Button leftIcon={<PiCopyBold />} onClick={handleCopy}>
             {t('common.copyError')}
           </Button>
           <Link href={url} isExternal>
-            <Button leftIcon={<PiArrowSquareOutBold />}>
-              {t('accessibility.createIssue')}
-            </Button>
+            <Button leftIcon={<PiArrowSquareOutBold />}>{t('accessibility.createIssue')}</Button>
           </Link>
         </Flex>
       </Flex>
diff --git a/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx b/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx
index 9d7520258c..0b4ca90933 100644
--- a/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx
+++ b/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx
@@ -1,13 +1,7 @@
 import '@fontsource-variable/inter';
 import 'overlayscrollbars/overlayscrollbars.css';
 
-import {
-  ChakraProvider,
-  DarkMode,
-  extendTheme,
-  theme as _theme,
-  TOAST_OPTIONS,
-} from '@invoke-ai/ui-library';
+import { ChakraProvider, DarkMode, extendTheme, theme as _theme, TOAST_OPTIONS } from '@invoke-ai/ui-library';
 import type { ReactNode } from 'react';
 import { memo, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
diff --git a/invokeai/frontend/web/src/app/components/Toaster.ts b/invokeai/frontend/web/src/app/components/Toaster.ts
index 0102ce376d..c86fd5060d 100644
--- a/invokeai/frontend/web/src/app/components/Toaster.ts
+++ b/invokeai/frontend/web/src/app/components/Toaster.ts
@@ -36,10 +36,7 @@ const Toaster = () => {
  */
 export const useAppToaster = () => {
   const dispatch = useAppDispatch();
-  const toaster = useCallback(
-    (arg: MakeToastArg) => dispatch(addToast(makeToast(arg))),
-    [dispatch]
-  );
+  const toaster = useCallback((arg: MakeToastArg) => dispatch(addToast(makeToast(arg))), [dispatch]);
 
   return toaster;
 };
diff --git a/invokeai/frontend/web/src/app/hooks/useSocketIO.ts b/invokeai/frontend/web/src/app/hooks/useSocketIO.ts
index 7b6d05b7a1..058a607261 100644
--- a/invokeai/frontend/web/src/app/hooks/useSocketIO.ts
+++ b/invokeai/frontend/web/src/app/hooks/useSocketIO.ts
@@ -6,10 +6,7 @@ import { useAppDispatch } from 'app/store/storeHooks';
 import type { MapStore } from 'nanostores';
 import { atom, map } from 'nanostores';
 import { useEffect, useMemo } from 'react';
-import type {
-  ClientToServerEvents,
-  ServerToClientEvents,
-} from 'services/events/types';
+import type { ClientToServerEvents, ServerToClientEvents } from 'services/events/types';
 import { setEventListeners } from 'services/events/util/setEventListeners';
 import type { ManagerOptions, Socket, SocketOptions } from 'socket.io-client';
 import { io } from 'socket.io-client';
@@ -45,9 +42,7 @@ export const useSocketIO = () => {
   const socketOptions = useMemo(() => {
     const options: Partial<ManagerOptions & SocketOptions> = {
       timeout: 60000,
-      path: baseUrl
-        ? '/ws/socket.io'
-        : `${window.location.pathname}ws/socket.io`,
+      path: baseUrl ? '/ws/socket.io' : `${window.location.pathname}ws/socket.io`,
       autoConnect: false, // achtung! removing this breaks the dynamic middleware
       forceNew: true,
     };
@@ -66,10 +61,7 @@ export const useSocketIO = () => {
       return;
     }
 
-    const socket: Socket<ServerToClientEvents, ClientToServerEvents> = io(
-      socketUrl,
-      socketOptions
-    );
+    const socket: Socket<ServerToClientEvents, ClientToServerEvents> = io(socketUrl, socketOptions);
     setEventListeners({ dispatch, socket });
     socket.connect();
 
diff --git a/invokeai/frontend/web/src/app/logging/logger.ts b/invokeai/frontend/web/src/app/logging/logger.ts
index c68fe64d39..491fc27688 100644
--- a/invokeai/frontend/web/src/app/logging/logger.ts
+++ b/invokeai/frontend/web/src/app/logging/logger.ts
@@ -30,20 +30,11 @@ export type LoggerNamespace =
   | 'queue'
   | 'dnd';
 
-export const logger = (namespace: LoggerNamespace) =>
-  $logger.get().child({ namespace });
+export const logger = (namespace: LoggerNamespace) => $logger.get().child({ namespace });
 
-export const zLogLevel = z.enum([
-  'trace',
-  'debug',
-  'info',
-  'warn',
-  'error',
-  'fatal',
-]);
+export const zLogLevel = z.enum(['trace', 'debug', 'info', 'warn', 'error', 'fatal']);
 export type LogLevel = z.infer<typeof zLogLevel>;
-export const isLogLevel = (v: unknown): v is LogLevel =>
-  zLogLevel.safeParse(v).success;
+export const isLogLevel = (v: unknown): v is LogLevel => zLogLevel.safeParse(v).success;
 
 // Translate human-readable log levels to numbers, used for log filtering
 export const LOG_LEVEL_MAP: Record<LogLevel, number> = {
diff --git a/invokeai/frontend/web/src/app/logging/useLogger.ts b/invokeai/frontend/web/src/app/logging/useLogger.ts
index de60852c1b..6e170ca376 100644
--- a/invokeai/frontend/web/src/app/logging/useLogger.ts
+++ b/invokeai/frontend/web/src/app/logging/useLogger.ts
@@ -17,10 +17,7 @@ export const useLogger = (namespace: LoggerNamespace) => {
       localStorage.setItem('ROARR_LOG', 'true');
 
       // Use a filter to show only logs of the given level
-      localStorage.setItem(
-        'ROARR_FILTER',
-        `context.logLevel:>=${LOG_LEVEL_MAP[consoleLogLevel]}`
-      );
+      localStorage.setItem('ROARR_FILTER', `context.logLevel:>=${LOG_LEVEL_MAP[consoleLogLevel]}`);
     } else {
       // Disable console log output
       localStorage.setItem('ROARR_LOG', 'false');
diff --git a/invokeai/frontend/web/src/app/store/createMemoizedSelector.ts b/invokeai/frontend/web/src/app/store/createMemoizedSelector.ts
index b4d46a4ef8..8e6142ce1d 100644
--- a/invokeai/frontend/web/src/app/store/createMemoizedSelector.ts
+++ b/invokeai/frontend/web/src/app/store/createMemoizedSelector.ts
@@ -1,8 +1,4 @@
-import {
-  createDraftSafeSelectorCreator,
-  createSelectorCreator,
-  lruMemoize,
-} from '@reduxjs/toolkit';
+import { createDraftSafeSelectorCreator, createSelectorCreator, lruMemoize } from '@reduxjs/toolkit';
 import type { GetSelectorsOptions } from '@reduxjs/toolkit/dist/entities/state_selectors';
 import { isEqual } from 'lodash-es';
 
diff --git a/invokeai/frontend/web/src/app/store/enhancers/reduxRemember/driver.ts b/invokeai/frontend/web/src/app/store/enhancers/reduxRemember/driver.ts
index 465199002b..61fbd015f8 100644
--- a/invokeai/frontend/web/src/app/store/enhancers/reduxRemember/driver.ts
+++ b/invokeai/frontend/web/src/app/store/enhancers/reduxRemember/driver.ts
@@ -1,19 +1,12 @@
 import { StorageError } from 'app/store/enhancers/reduxRemember/errors';
 import { $projectId } from 'app/store/nanostores/projectId';
 import type { UseStore } from 'idb-keyval';
-import {
-  clear,
-  createStore as createIDBKeyValStore,
-  get,
-  set,
-} from 'idb-keyval';
+import { clear, createStore as createIDBKeyValStore, get, set } from 'idb-keyval';
 import { action, atom } from 'nanostores';
 import type { Driver } from 'redux-remember';
 
 // Create a custom idb-keyval store (just needed to customize the name)
-export const $idbKeyValStore = atom<UseStore>(
-  createIDBKeyValStore('invoke', 'invoke-store')
-);
+export const $idbKeyValStore = atom<UseStore>(createIDBKeyValStore('invoke', 'invoke-store'));
 
 export const clearIdbKeyValStore = action($idbKeyValStore, 'clear', (store) => {
   clear(store.get());
diff --git a/invokeai/frontend/web/src/app/store/middleware/debugLoggerMiddleware.ts b/invokeai/frontend/web/src/app/store/middleware/debugLoggerMiddleware.ts
index 501a8146ec..b6df6dab94 100644
--- a/invokeai/frontend/web/src/app/store/middleware/debugLoggerMiddleware.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/debugLoggerMiddleware.ts
@@ -4,13 +4,12 @@ import { diff } from 'jsondiffpatch';
 /**
  * Super simple logger middleware. Useful for debugging when the redux devtools are awkward.
  */
-export const debugLoggerMiddleware: Middleware =
-  (api: MiddlewareAPI) => (next) => (action) => {
-    const originalState = api.getState();
-    console.log('REDUX: dispatching', action);
-    const result = next(action);
-    const nextState = api.getState();
-    console.log('REDUX: next state', nextState);
-    console.log('REDUX: diff', diff(originalState, nextState));
-    return result;
-  };
+export const debugLoggerMiddleware: Middleware = (api: MiddlewareAPI) => (next) => (action) => {
+  const originalState = api.getState();
+  console.log('REDUX: dispatching', action);
+  const result = next(action);
+  const nextState = api.getState();
+  console.log('REDUX: next state', nextState);
+  console.log('REDUX: diff', diff(originalState, nextState));
+  return result;
+};
diff --git a/invokeai/frontend/web/src/app/store/middleware/devtools/actionSanitizer.ts b/invokeai/frontend/web/src/app/store/middleware/devtools/actionSanitizer.ts
index 9c7bae725b..f4fa2766e6 100644
--- a/invokeai/frontend/web/src/app/store/middleware/devtools/actionSanitizer.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/devtools/actionSanitizer.ts
@@ -35,8 +35,7 @@ export const actionSanitizer = <A extends UnknownAction>(action: A): A => {
   if (socketGeneratorProgress.match(action)) {
     const sanitized = cloneDeep(action);
     if (sanitized.payload.data.progress_image) {
-      sanitized.payload.data.progress_image.dataURL =
-        '<Progress image omitted>';
+      sanitized.payload.data.progress_image.dataURL = '<Progress image omitted>';
     }
     return sanitized;
   }
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts
index 0b3accfd4d..1d21215d9d 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts
@@ -1,9 +1,4 @@
-import type {
-  ListenerEffect,
-  TypedAddListener,
-  TypedStartListening,
-  UnknownAction,
-} from '@reduxjs/toolkit';
+import type { ListenerEffect, TypedAddListener, TypedStartListening, UnknownAction } from '@reduxjs/toolkit';
 import { addListener, createListenerMiddleware } from '@reduxjs/toolkit';
 import { addGalleryImageClickedListener } from 'app/store/middleware/listenerMiddleware/listeners/galleryImageClicked';
 import type { AppDispatch, RootState } from 'app/store/store';
@@ -47,10 +42,7 @@ import {
 import { addImagesStarredListener } from './listeners/imagesStarred';
 import { addImagesUnstarredListener } from './listeners/imagesUnstarred';
 import { addImageToDeleteSelectedListener } from './listeners/imageToDeleteSelected';
-import {
-  addImageUploadedFulfilledListener,
-  addImageUploadedRejectedListener,
-} from './listeners/imageUploaded';
+import { addImageUploadedFulfilledListener, addImageUploadedRejectedListener } from './listeners/imageUploaded';
 import { addInitialImageSelectedListener } from './listeners/initialImageSelected';
 import { addModelSelectedListener } from './listeners/modelSelected';
 import { addModelsLoadedListener } from './listeners/modelsLoaded';
@@ -78,19 +70,11 @@ export const listenerMiddleware = createListenerMiddleware();
 
 export type AppStartListening = TypedStartListening<RootState, AppDispatch>;
 
-export const startAppListening =
-  listenerMiddleware.startListening as AppStartListening;
+export const startAppListening = listenerMiddleware.startListening as AppStartListening;
 
-export const addAppListener = addListener as TypedAddListener<
-  RootState,
-  AppDispatch
->;
+export const addAppListener = addListener as TypedAddListener<RootState, AppDispatch>;
 
-export type AppListenerEffect = ListenerEffect<
-  UnknownAction,
-  RootState,
-  AppDispatch
->;
+export type AppListenerEffect = ListenerEffect<UnknownAction, RootState, AppDispatch>;
 
 /**
  * The RTK listener middleware is a lightweight alternative sagas/observables.
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addCommitStagingAreaImageListener.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addCommitStagingAreaImageListener.ts
index 2dbf68a837..2c5fbfbbe4 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addCommitStagingAreaImageListener.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addCommitStagingAreaImageListener.ts
@@ -1,10 +1,6 @@
 import { isAnyOf } from '@reduxjs/toolkit';
 import { logger } from 'app/logging/logger';
-import {
-  canvasBatchIdsReset,
-  commitStagingAreaImage,
-  discardStagedImages,
-} from 'features/canvas/store/canvasSlice';
+import { canvasBatchIdsReset, commitStagingAreaImage, discardStagedImages } from 'features/canvas/store/canvasSlice';
 import { addToast } from 'features/system/store/systemSlice';
 import { t } from 'i18next';
 import { queueApi } from 'services/api/endpoints/queue';
@@ -23,10 +19,7 @@ export const addCommitStagingAreaImageListener = () => {
 
       try {
         const req = dispatch(
-          queueApi.endpoints.cancelByBatchIds.initiate(
-            { batch_ids: batchIds },
-            { fixedCacheKey: 'cancelByBatchIds' }
-          )
+          queueApi.endpoints.cancelByBatchIds.initiate({ batch_ids: batchIds }, { fixedCacheKey: 'cancelByBatchIds' })
         );
         const { canceled } = await req.unwrap();
         req.reset();
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addFirstListImagesListener.ts.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addFirstListImagesListener.ts.ts
index ed85aa2714..3c9b245b11 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addFirstListImagesListener.ts.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addFirstListImagesListener.ts.ts
@@ -12,15 +12,9 @@ export const appStarted = createAction('app/appStarted');
 export const addFirstListImagesListener = () => {
   startAppListening({
     matcher: imagesApi.endpoints.listImages.matchFulfilled,
-    effect: async (
-      action,
-      { dispatch, unsubscribe, cancelActiveListeners }
-    ) => {
+    effect: async (action, { dispatch, unsubscribe, cancelActiveListeners }) => {
       // Only run this listener on the first listImages request for no-board images
-      if (
-        action.meta.arg.queryCacheKey !==
-        getListImagesUrl({ board_id: 'none', categories: IMAGE_CATEGORIES })
-      ) {
+      if (action.meta.arg.queryCacheKey !== getListImagesUrl({ board_id: 'none', categories: IMAGE_CATEGORIES })) {
         return;
       }
 
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/appConfigReceived.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/appConfigReceived.ts
index 52090f7ab7..3fc9cdda44 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/appConfigReceived.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/appConfigReceived.ts
@@ -1,8 +1,5 @@
 import { setInfillMethod } from 'features/parameters/store/generationSlice';
-import {
-  shouldUseNSFWCheckerChanged,
-  shouldUseWatermarkerChanged,
-} from 'features/system/store/systemSlice';
+import { shouldUseNSFWCheckerChanged, shouldUseWatermarkerChanged } from 'features/system/store/systemSlice';
 import { appInfoApi } from 'services/api/endpoints/appInfo';
 
 import { startAppListening } from '..';
@@ -11,11 +8,7 @@ export const addAppConfigReceivedListener = () => {
   startAppListening({
     matcher: appInfoApi.endpoints.getAppConfig.matchFulfilled,
     effect: async (action, { getState, dispatch }) => {
-      const {
-        infill_methods = [],
-        nsfw_methods = [],
-        watermarking_methods = [],
-      } = action.payload;
+      const { infill_methods = [], nsfw_methods = [], watermarking_methods = [] } = action.payload;
       const infillMethod = getState().generation.infillMethod;
 
       if (!infill_methods.includes(infillMethod)) {
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts
index f6a59d3557..6419f840ec 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts
@@ -1,8 +1,4 @@
-import {
-  createStandaloneToast,
-  theme,
-  TOAST_OPTIONS,
-} from '@invoke-ai/ui-library';
+import { createStandaloneToast, theme, TOAST_OPTIONS } from '@invoke-ai/ui-library';
 import { logger } from 'app/logging/logger';
 import { parseify } from 'common/util/serialize';
 import { zPydanticValidationError } from 'features/system/store/zodSchemas';
@@ -24,10 +20,7 @@ export const addBatchEnqueuedListener = () => {
     effect: async (action) => {
       const response = action.payload;
       const arg = action.meta.arg.originalArgs;
-      logger('queue').debug(
-        { enqueueResult: parseify(response) },
-        'Batch enqueued'
-      );
+      logger('queue').debug({ enqueueResult: parseify(response) }, 'Batch enqueued');
 
       if (!toast.isActive('batch-queued')) {
         toast({
@@ -57,10 +50,7 @@ export const addBatchEnqueuedListener = () => {
           status: 'error',
           description: 'Unknown Error',
         });
-        logger('queue').error(
-          { batchConfig: parseify(arg), error: parseify(response) },
-          t('queue.batchFailedToQueue')
-        );
+        logger('queue').error({ batchConfig: parseify(arg), error: parseify(response) }, t('queue.batchFailedToQueue'));
         return;
       }
 
@@ -85,10 +75,7 @@ export const addBatchEnqueuedListener = () => {
           status: 'error',
         });
       }
-      logger('queue').error(
-        { batchConfig: parseify(arg), error: parseify(response) },
-        t('queue.batchFailedToQueue')
-      );
+      logger('queue').error({ batchConfig: parseify(arg), error: parseify(response) }, t('queue.batchFailedToQueue'));
     },
   });
 };
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardAndImagesDeleted.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardAndImagesDeleted.ts
index 83fab1df54..2e77896ad3 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardAndImagesDeleted.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardAndImagesDeleted.ts
@@ -22,13 +22,7 @@ export const addDeleteBoardAndImagesFulfilledListener = () => {
 
       const { generation, canvas, nodes, controlAdapters } = getState();
       deleted_images.forEach((image_name) => {
-        const imageUsage = getImageUsage(
-          generation,
-          canvas,
-          nodes,
-          controlAdapters,
-          image_name
-        );
+        const imageUsage = getImageUsage(generation, canvas, nodes, controlAdapters, image_name);
 
         if (imageUsage.isInitialImage && !wasInitialImageReset) {
           dispatch(clearInitialImage());
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardIdSelected.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardIdSelected.ts
index 0bf5e9e264..c93381f0f2 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardIdSelected.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardIdSelected.ts
@@ -1,13 +1,6 @@
 import { isAnyOf } from '@reduxjs/toolkit';
-import {
-  boardIdSelected,
-  galleryViewChanged,
-  imageSelected,
-} from 'features/gallery/store/gallerySlice';
-import {
-  ASSETS_CATEGORIES,
-  IMAGE_CATEGORIES,
-} from 'features/gallery/store/types';
+import { boardIdSelected, galleryViewChanged, imageSelected } from 'features/gallery/store/gallerySlice';
+import { ASSETS_CATEGORIES, IMAGE_CATEGORIES } from 'features/gallery/store/types';
 import { imagesApi } from 'services/api/endpoints/images';
 import { imagesSelectors } from 'services/api/util';
 
@@ -16,53 +9,35 @@ import { startAppListening } from '..';
 export const addBoardIdSelectedListener = () => {
   startAppListening({
     matcher: isAnyOf(boardIdSelected, galleryViewChanged),
-    effect: async (
-      action,
-      { getState, dispatch, condition, cancelActiveListeners }
-    ) => {
+    effect: async (action, { getState, dispatch, condition, cancelActiveListeners }) => {
       // Cancel any in-progress instances of this listener, we don't want to select an image from a previous board
       cancelActiveListeners();
 
       const state = getState();
 
-      const board_id = boardIdSelected.match(action)
-        ? action.payload.boardId
-        : state.gallery.selectedBoardId;
+      const board_id = boardIdSelected.match(action) ? action.payload.boardId : state.gallery.selectedBoardId;
 
-      const galleryView = galleryViewChanged.match(action)
-        ? action.payload
-        : state.gallery.galleryView;
+      const galleryView = galleryViewChanged.match(action) ? action.payload : state.gallery.galleryView;
 
       // when a board is selected, we need to wait until the board has loaded *some* images, then select the first one
-      const categories =
-        galleryView === 'images' ? IMAGE_CATEGORIES : ASSETS_CATEGORIES;
+      const categories = galleryView === 'images' ? IMAGE_CATEGORIES : ASSETS_CATEGORIES;
 
       const queryArgs = { board_id: board_id ?? 'none', categories };
 
       // wait until the board has some images - maybe it already has some from a previous fetch
       // must use getState() to ensure we do not have stale state
       const isSuccess = await condition(
-        () =>
-          imagesApi.endpoints.listImages.select(queryArgs)(getState())
-            .isSuccess,
+        () => imagesApi.endpoints.listImages.select(queryArgs)(getState()).isSuccess,
         5000
       );
 
       if (isSuccess) {
         // the board was just changed - we can select the first image
-        const { data: boardImagesData } =
-          imagesApi.endpoints.listImages.select(queryArgs)(getState());
+        const { data: boardImagesData } = imagesApi.endpoints.listImages.select(queryArgs)(getState());
 
-        if (
-          boardImagesData &&
-          boardIdSelected.match(action) &&
-          action.payload.selectedImageName
-        ) {
+        if (boardImagesData && boardIdSelected.match(action) && action.payload.selectedImageName) {
           const firstImage = imagesSelectors.selectAll(boardImagesData)[0];
-          const selectedImage = imagesSelectors.selectById(
-            boardImagesData,
-            action.payload.selectedImageName
-          );
+          const selectedImage = imagesSelectors.selectById(boardImagesData, action.payload.selectedImageName);
 
           dispatch(imageSelected(selectedImage || firstImage || null));
         } else {
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasCopiedToClipboard.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasCopiedToClipboard.ts
index ec2c2388e5..a4ae936ada 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasCopiedToClipboard.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasCopiedToClipboard.ts
@@ -11,9 +11,7 @@ export const addCanvasCopiedToClipboardListener = () => {
   startAppListening({
     actionCreator: canvasCopiedToClipboard,
     effect: async (action, { dispatch, getState }) => {
-      const moduleLog = $logger
-        .get()
-        .child({ namespace: 'canvasCopiedToClipboardListener' });
+      const moduleLog = $logger.get().child({ namespace: 'canvasCopiedToClipboardListener' });
       const state = getState();
 
       try {
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasDownloadedAsImage.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasDownloadedAsImage.ts
index 0cbdb8bfcc..af37afa8d5 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasDownloadedAsImage.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasDownloadedAsImage.ts
@@ -11,9 +11,7 @@ export const addCanvasDownloadedAsImageListener = () => {
   startAppListening({
     actionCreator: canvasDownloadedAsImage,
     effect: async (action, { dispatch, getState }) => {
-      const moduleLog = $logger
-        .get()
-        .child({ namespace: 'canvasSavedToGalleryListener' });
+      const moduleLog = $logger.get().child({ namespace: 'canvasSavedToGalleryListener' });
       const state = getState();
 
       let blob;
@@ -32,9 +30,7 @@ export const addCanvasDownloadedAsImageListener = () => {
       }
 
       downloadBlob(blob, 'canvas.png');
-      dispatch(
-        addToast({ title: t('toast.canvasDownloaded'), status: 'success' })
-      );
+      dispatch(addToast({ title: t('toast.canvasDownloaded'), status: 'success' }));
     },
   });
 };
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasMerged.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasMerged.ts
index 946f413d34..f29a095c1f 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasMerged.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasMerged.ts
@@ -13,9 +13,7 @@ export const addCanvasMergedListener = () => {
   startAppListening({
     actionCreator: canvasMerged,
     effect: async (action, { dispatch }) => {
-      const moduleLog = $logger
-        .get()
-        .child({ namespace: 'canvasCopiedToClipboardListener' });
+      const moduleLog = $logger.get().child({ namespace: 'canvasCopiedToClipboardListener' });
       const blob = await getFullBaseLayerBlob();
 
       if (!blob) {
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetAutoProcess.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetAutoProcess.ts
index 78e69d71c1..d194195665 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetAutoProcess.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetAutoProcess.ts
@@ -21,11 +21,7 @@ type AnyControlAdapterParamChangeAction =
   | ReturnType<typeof controlAdapterProcessortTypeChanged>
   | ReturnType<typeof controlAdapterAutoConfigToggled>;
 
-const predicate: AnyListenerPredicate<RootState> = (
-  action,
-  state,
-  prevState
-) => {
+const predicate: AnyListenerPredicate<RootState> = (action, state, prevState) => {
   const isActionMatched =
     controlAdapterProcessorParamsChanged.match(action) ||
     controlAdapterModelChanged.match(action) ||
@@ -40,12 +36,7 @@ const predicate: AnyListenerPredicate<RootState> = (
   const { id } = action.payload;
   const prevCA = selectControlAdapterById(prevState.controlAdapters, id);
   const ca = selectControlAdapterById(state.controlAdapters, id);
-  if (
-    !prevCA ||
-    !isControlNetOrT2IAdapter(prevCA) ||
-    !ca ||
-    !isControlNetOrT2IAdapter(ca)
-  ) {
+  if (!prevCA || !isControlNetOrT2IAdapter(prevCA) || !ca || !isControlNetOrT2IAdapter(ca)) {
     return false;
   }
 
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetImageProcessed.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetImageProcessed.ts
index 61316231cc..fba274beb8 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetImageProcessed.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetImageProcessed.ts
@@ -64,37 +64,28 @@ export const addControlNetImageProcessedListener = () => {
         );
         const enqueueResult = await req.unwrap();
         req.reset();
-        log.debug(
-          { enqueueResult: parseify(enqueueResult) },
-          t('queue.graphQueued')
-        );
+        log.debug({ enqueueResult: parseify(enqueueResult) }, t('queue.graphQueued'));
 
         const [invocationCompleteAction] = await take(
           (action): action is ReturnType<typeof socketInvocationComplete> =>
             socketInvocationComplete.match(action) &&
-            action.payload.data.queue_batch_id ===
-              enqueueResult.batch.batch_id &&
+            action.payload.data.queue_batch_id === enqueueResult.batch.batch_id &&
             action.payload.data.source_node_id === nodeId
         );
 
         // We still have to check the output type
         if (isImageOutput(invocationCompleteAction.payload.data.result)) {
-          const { image_name } =
-            invocationCompleteAction.payload.data.result.image;
+          const { image_name } = invocationCompleteAction.payload.data.result.image;
 
           // Wait for the ImageDTO to be received
           const [{ payload }] = await take(
             (action) =>
-              imagesApi.endpoints.getImageDTO.matchFulfilled(action) &&
-              action.payload.image_name === image_name
+              imagesApi.endpoints.getImageDTO.matchFulfilled(action) && action.payload.image_name === image_name
           );
 
           const processedControlImage = payload as ImageDTO;
 
-          log.debug(
-            { controlNetId: action.payload, processedControlImage },
-            'ControlNet image processed'
-          );
+          log.debug({ controlNetId: action.payload, processedControlImage }, 'ControlNet image processed');
 
           // Update the processed image in the store
           dispatch(
@@ -105,10 +96,7 @@ export const addControlNetImageProcessedListener = () => {
           );
         }
       } catch (error) {
-        log.error(
-          { enqueueBatchArg: parseify(enqueueBatchArg) },
-          t('queue.graphFailedToQueue')
-        );
+        log.error({ enqueueBatchArg: parseify(enqueueBatchArg) }, t('queue.graphFailedToQueue'));
 
         if (error instanceof Object) {
           if ('data' in error && 'status' in error) {
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedCanvas.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedCanvas.ts
index a803441c59..7847448d3e 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedCanvas.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedCanvas.ts
@@ -2,10 +2,7 @@ import { logger } from 'app/logging/logger';
 import { enqueueRequested } from 'app/store/actions';
 import openBase64ImageInTab from 'common/util/openBase64ImageInTab';
 import { parseify } from 'common/util/serialize';
-import {
-  canvasBatchIdAdded,
-  stagingAreaInitialized,
-} from 'features/canvas/store/canvasSlice';
+import { canvasBatchIdAdded, stagingAreaInitialized } from 'features/canvas/store/canvasSlice';
 import { blobToDataURL } from 'features/canvas/util/blobToDataURL';
 import { getCanvasData } from 'features/canvas/util/getCanvasData';
 import { getCanvasGenerationMode } from 'features/canvas/util/getCanvasGenerationMode';
@@ -34,20 +31,14 @@ import { startAppListening } from '..';
 export const addEnqueueRequestedCanvasListener = () => {
   startAppListening({
     predicate: (action): action is ReturnType<typeof enqueueRequested> =>
-      enqueueRequested.match(action) &&
-      action.payload.tabName === 'unifiedCanvas',
+      enqueueRequested.match(action) && action.payload.tabName === 'unifiedCanvas',
     effect: async (action, { getState, dispatch }) => {
       const log = logger('queue');
       const { prepend } = action.payload;
       const state = getState();
 
-      const {
-        layerState,
-        boundingBoxCoordinates,
-        boundingBoxDimensions,
-        isMaskEnabled,
-        shouldPreserveMaskedArea,
-      } = state.canvas;
+      const { layerState, boundingBoxCoordinates, boundingBoxDimensions, isMaskEnabled, shouldPreserveMaskedArea } =
+        state.canvas;
 
       // Build canvas blobs
       const canvasBlobsAndImageData = await getCanvasData(
@@ -63,14 +54,10 @@ export const addEnqueueRequestedCanvasListener = () => {
         return;
       }
 
-      const { baseBlob, baseImageData, maskBlob, maskImageData } =
-        canvasBlobsAndImageData;
+      const { baseBlob, baseImageData, maskBlob, maskImageData } = canvasBlobsAndImageData;
 
       // Determine the generation mode
-      const generationMode = getCanvasGenerationMode(
-        baseImageData,
-        maskImageData
-      );
+      const generationMode = getCanvasGenerationMode(baseImageData, maskImageData);
 
       if (state.system.enableImageDebugging) {
         const baseDataURL = await blobToDataURL(baseBlob);
@@ -115,12 +102,7 @@ export const addEnqueueRequestedCanvasListener = () => {
         ).unwrap();
       }
 
-      const graph = buildCanvasGraph(
-        state,
-        generationMode,
-        canvasInitImage,
-        canvasMaskImage
-      );
+      const graph = buildCanvasGraph(state, generationMode, canvasInitImage, canvasMaskImage);
 
       log.debug({ graph: parseify(graph) }, `Canvas graph built`);
 
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts
index 547f5e5948..e1e13fadbe 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts
@@ -11,9 +11,7 @@ import { startAppListening } from '..';
 export const addEnqueueRequestedLinear = () => {
   startAppListening({
     predicate: (action): action is ReturnType<typeof enqueueRequested> =>
-      enqueueRequested.match(action) &&
-      (action.payload.tabName === 'txt2img' ||
-        action.payload.tabName === 'img2img'),
+      enqueueRequested.match(action) && (action.payload.tabName === 'txt2img' || action.payload.tabName === 'img2img'),
     effect: async (action, { getState, dispatch }) => {
       const state = getState();
       const model = state.generation.model;
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/galleryImageClicked.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/galleryImageClicked.ts
index 4287f3ec16..cc810a2517 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/galleryImageClicked.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/galleryImageClicked.ts
@@ -32,8 +32,7 @@ export const addGalleryImageClickedListener = () => {
       const { imageDTO, shiftKey, ctrlKey, metaKey } = action.payload;
       const state = getState();
       const queryArgs = selectListImagesQueryArgs(state);
-      const { data: listImagesData } =
-        imagesApi.endpoints.listImages.select(queryArgs)(state);
+      const { data: listImagesData } = imagesApi.endpoints.listImages.select(queryArgs)(state);
 
       if (!listImagesData) {
         // Should never happen if we have clicked a gallery image
@@ -46,12 +45,8 @@ export const addGalleryImageClickedListener = () => {
       if (shiftKey) {
         const rangeEndImageName = imageDTO.image_name;
         const lastSelectedImage = selection[selection.length - 1]?.image_name;
-        const lastClickedIndex = imageDTOs.findIndex(
-          (n) => n.image_name === lastSelectedImage
-        );
-        const currentClickedIndex = imageDTOs.findIndex(
-          (n) => n.image_name === rangeEndImageName
-        );
+        const lastClickedIndex = imageDTOs.findIndex((n) => n.image_name === lastSelectedImage);
+        const currentClickedIndex = imageDTOs.findIndex((n) => n.image_name === rangeEndImageName);
         if (lastClickedIndex > -1 && currentClickedIndex > -1) {
           // We have a valid range!
           const start = Math.min(lastClickedIndex, currentClickedIndex);
@@ -60,15 +55,8 @@ export const addGalleryImageClickedListener = () => {
           dispatch(selectionChanged(selection.concat(imagesToSelect)));
         }
       } else if (ctrlKey || metaKey) {
-        if (
-          selection.some((i) => i.image_name === imageDTO.image_name) &&
-          selection.length > 1
-        ) {
-          dispatch(
-            selectionChanged(
-              selection.filter((n) => n.image_name !== imageDTO.image_name)
-            )
-          );
+        if (selection.some((i) => i.image_name === imageDTO.image_name) && selection.length > 1) {
+          dispatch(selectionChanged(selection.filter((n) => n.image_name !== imageDTO.image_name)));
         } else {
           dispatch(selectionChanged(selection.concat(imageDTO)));
         }
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDeleted.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDeleted.ts
index ccc6130cff..1312e54891 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDeleted.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDeleted.ts
@@ -43,31 +43,21 @@ export const addRequestedSingleImageDeletionListener = () => {
       dispatch(isModalOpenChanged(false));
 
       const state = getState();
-      const lastSelectedImage =
-        state.gallery.selection[state.gallery.selection.length - 1]?.image_name;
+      const lastSelectedImage = state.gallery.selection[state.gallery.selection.length - 1]?.image_name;
 
       if (imageDTO && imageDTO?.image_name === lastSelectedImage) {
         const { image_name } = imageDTO;
 
         const baseQueryArgs = selectListImagesQueryArgs(state);
-        const { data } =
-          imagesApi.endpoints.listImages.select(baseQueryArgs)(state);
+        const { data } = imagesApi.endpoints.listImages.select(baseQueryArgs)(state);
 
         const cachedImageDTOs = data ? imagesSelectors.selectAll(data) : [];
 
-        const deletedImageIndex = cachedImageDTOs.findIndex(
-          (i) => i.image_name === image_name
-        );
+        const deletedImageIndex = cachedImageDTOs.findIndex((i) => i.image_name === image_name);
 
-        const filteredImageDTOs = cachedImageDTOs.filter(
-          (i) => i.image_name !== image_name
-        );
+        const filteredImageDTOs = cachedImageDTOs.filter((i) => i.image_name !== image_name);
 
-        const newSelectedImageIndex = clamp(
-          deletedImageIndex,
-          0,
-          filteredImageDTOs.length - 1
-        );
+        const newSelectedImageIndex = clamp(deletedImageIndex, 0, filteredImageDTOs.length - 1);
 
         const newSelectedImageDTO = filteredImageDTOs[newSelectedImageIndex];
 
@@ -85,9 +75,7 @@ export const addRequestedSingleImageDeletionListener = () => {
 
       imageDTOs.forEach((imageDTO) => {
         // reset init image if we deleted it
-        if (
-          getState().generation.initialImage?.imageName === imageDTO.image_name
-        ) {
+        if (getState().generation.initialImage?.imageName === imageDTO.image_name) {
           dispatch(clearInitialImage());
         }
 
@@ -95,8 +83,7 @@ export const addRequestedSingleImageDeletionListener = () => {
         forEach(selectControlAdapterAll(getState().controlAdapters), (ca) => {
           if (
             ca.controlImage === imageDTO.image_name ||
-            (isControlNetOrT2IAdapter(ca) &&
-              ca.processedControlImage === imageDTO.image_name)
+            (isControlNetOrT2IAdapter(ca) && ca.processedControlImage === imageDTO.image_name)
           ) {
             dispatch(
               controlAdapterImageChanged({
@@ -120,10 +107,7 @@ export const addRequestedSingleImageDeletionListener = () => {
           }
 
           forEach(node.data.inputs, (input) => {
-            if (
-              isImageFieldInputInstance(input) &&
-              input.value?.image_name === imageDTO.image_name
-            ) {
+            if (isImageFieldInputInstance(input) && input.value?.image_name === imageDTO.image_name) {
               dispatch(
                 fieldImageValueChanged({
                   nodeId: node.data.id,
@@ -137,24 +121,16 @@ export const addRequestedSingleImageDeletionListener = () => {
       });
 
       // Delete from server
-      const { requestId } = dispatch(
-        imagesApi.endpoints.deleteImage.initiate(imageDTO)
-      );
+      const { requestId } = dispatch(imagesApi.endpoints.deleteImage.initiate(imageDTO));
 
       // Wait for successful deletion, then trigger boards to re-fetch
       const wasImageDeleted = await condition(
-        (action) =>
-          imagesApi.endpoints.deleteImage.matchFulfilled(action) &&
-          action.meta.requestId === requestId,
+        (action) => imagesApi.endpoints.deleteImage.matchFulfilled(action) && action.meta.requestId === requestId,
         30000
       );
 
       if (wasImageDeleted) {
-        dispatch(
-          api.util.invalidateTags([
-            { type: 'Board', id: imageDTO.board_id ?? 'none' },
-          ])
-        );
+        dispatch(api.util.invalidateTags([{ type: 'Board', id: imageDTO.board_id ?? 'none' }]));
       }
     },
   });
@@ -176,17 +152,12 @@ export const addRequestedMultipleImageDeletionListener = () => {
 
       try {
         // Delete from server
-        await dispatch(
-          imagesApi.endpoints.deleteImages.initiate({ imageDTOs })
-        ).unwrap();
+        await dispatch(imagesApi.endpoints.deleteImages.initiate({ imageDTOs })).unwrap();
         const state = getState();
         const queryArgs = selectListImagesQueryArgs(state);
-        const { data } =
-          imagesApi.endpoints.listImages.select(queryArgs)(state);
+        const { data } = imagesApi.endpoints.listImages.select(queryArgs)(state);
 
-        const newSelectedImageDTO = data
-          ? imagesSelectors.selectAll(data)[0]
-          : undefined;
+        const newSelectedImageDTO = data ? imagesSelectors.selectAll(data)[0] : undefined;
 
         if (newSelectedImageDTO) {
           dispatch(imageSelected(newSelectedImageDTO));
@@ -204,10 +175,7 @@ export const addRequestedMultipleImageDeletionListener = () => {
 
         imageDTOs.forEach((imageDTO) => {
           // reset init image if we deleted it
-          if (
-            getState().generation.initialImage?.imageName ===
-            imageDTO.image_name
-          ) {
+          if (getState().generation.initialImage?.imageName === imageDTO.image_name) {
             dispatch(clearInitialImage());
           }
 
@@ -215,8 +183,7 @@ export const addRequestedMultipleImageDeletionListener = () => {
           forEach(selectControlAdapterAll(getState().controlAdapters), (ca) => {
             if (
               ca.controlImage === imageDTO.image_name ||
-              (isControlNetOrT2IAdapter(ca) &&
-                ca.processedControlImage === imageDTO.image_name)
+              (isControlNetOrT2IAdapter(ca) && ca.processedControlImage === imageDTO.image_name)
             ) {
               dispatch(
                 controlAdapterImageChanged({
@@ -240,10 +207,7 @@ export const addRequestedMultipleImageDeletionListener = () => {
             }
 
             forEach(node.data.inputs, (input) => {
-              if (
-                isImageFieldInputInstance(input) &&
-                input.value?.image_name === imageDTO.image_name
-              ) {
+              if (isImageFieldInputInstance(input) && input.value?.image_name === imageDTO.image_name) {
                 dispatch(
                   fieldImageValueChanged({
                     nodeId: node.data.id,
@@ -295,10 +259,7 @@ export const addImageDeletedRejectedListener = () => {
     matcher: imagesApi.endpoints.deleteImage.matchRejected,
     effect: (action) => {
       const log = logger('images');
-      log.debug(
-        { imageDTO: action.meta.arg.originalArgs },
-        'Unable to delete image'
-      );
+      log.debug({ imageDTO: action.meta.arg.originalArgs }, 'Unable to delete image');
     },
   });
 };
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDropped.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDropped.ts
index fdd5b45907..268aac25d9 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDropped.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDropped.ts
@@ -6,16 +6,10 @@ import {
   controlAdapterImageChanged,
   controlAdapterIsEnabledChanged,
 } from 'features/controlAdapters/store/controlAdaptersSlice';
-import type {
-  TypesafeDraggableData,
-  TypesafeDroppableData,
-} from 'features/dnd/types';
+import type { TypesafeDraggableData, TypesafeDroppableData } from 'features/dnd/types';
 import { imageSelected } from 'features/gallery/store/gallerySlice';
 import { fieldImageValueChanged } from 'features/nodes/store/nodesSlice';
-import {
-  initialImageChanged,
-  selectOptimalDimension,
-} from 'features/parameters/store/generationSlice';
+import { initialImageChanged, selectOptimalDimension } from 'features/parameters/store/generationSlice';
 import { imagesApi } from 'services/api/endpoints/images';
 
 import { startAppListening } from '../';
@@ -35,15 +29,9 @@ export const addImageDroppedListener = () => {
       if (activeData.payloadType === 'IMAGE_DTO') {
         log.debug({ activeData, overData }, 'Image dropped');
       } else if (activeData.payloadType === 'GALLERY_SELECTION') {
-        log.debug(
-          { activeData, overData },
-          `Images (${getState().gallery.selection.length}) dropped`
-        );
+        log.debug({ activeData, overData }, `Images (${getState().gallery.selection.length}) dropped`);
       } else if (activeData.payloadType === 'NODE_FIELD') {
-        log.debug(
-          { activeData: parseify(activeData), overData: parseify(overData) },
-          'Node field dropped'
-        );
+        log.debug({ activeData: parseify(activeData), overData: parseify(overData) }, 'Node field dropped');
       } else {
         log.debug({ activeData, overData }, `Unknown payload dropped`);
       }
@@ -104,12 +92,7 @@ export const addImageDroppedListener = () => {
         activeData.payloadType === 'IMAGE_DTO' &&
         activeData.payload.imageDTO
       ) {
-        dispatch(
-          setInitialCanvasImage(
-            activeData.payload.imageDTO,
-            selectOptimalDimension(getState())
-          )
-        );
+        dispatch(setInitialCanvasImage(activeData.payload.imageDTO, selectOptimalDimension(getState())));
         return;
       }
 
@@ -191,10 +174,7 @@ export const addImageDroppedListener = () => {
       /**
        * Multiple images dropped on user board
        */
-      if (
-        overData.actionType === 'ADD_TO_BOARD' &&
-        activeData.payloadType === 'GALLERY_SELECTION'
-      ) {
+      if (overData.actionType === 'ADD_TO_BOARD' && activeData.payloadType === 'GALLERY_SELECTION') {
         const imageDTOs = getState().gallery.selection;
         const { boardId } = overData.context;
         dispatch(
@@ -209,10 +189,7 @@ export const addImageDroppedListener = () => {
       /**
        * Multiple images dropped on 'none' board
        */
-      if (
-        overData.actionType === 'REMOVE_FROM_BOARD' &&
-        activeData.payloadType === 'GALLERY_SELECTION'
-      ) {
+      if (overData.actionType === 'REMOVE_FROM_BOARD' && activeData.payloadType === 'GALLERY_SELECTION') {
         const imageDTOs = getState().gallery.selection;
         dispatch(
           imagesApi.endpoints.removeImagesFromBoard.initiate({
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageToDeleteSelected.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageToDeleteSelected.ts
index ccc14165a3..03921264a2 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageToDeleteSelected.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageToDeleteSelected.ts
@@ -1,9 +1,6 @@
 import { imageDeletionConfirmed } from 'features/deleteImageModal/store/actions';
 import { selectImageUsage } from 'features/deleteImageModal/store/selectors';
-import {
-  imagesToDeleteSelected,
-  isModalOpenChanged,
-} from 'features/deleteImageModal/store/slice';
+import { imagesToDeleteSelected, isModalOpenChanged } from 'features/deleteImageModal/store/slice';
 
 import { startAppListening } from '..';
 
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts
index 675fc58ef7..d17727fcdc 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts
@@ -6,10 +6,7 @@ import {
   controlAdapterIsEnabledChanged,
 } from 'features/controlAdapters/store/controlAdaptersSlice';
 import { fieldImageValueChanged } from 'features/nodes/store/nodesSlice';
-import {
-  initialImageChanged,
-  selectOptimalDimension,
-} from 'features/parameters/store/generationSlice';
+import { initialImageChanged, selectOptimalDimension } from 'features/parameters/store/generationSlice';
 import { addToast } from 'features/system/store/systemSlice';
 import { t } from 'i18next';
 import { omit } from 'lodash-es';
@@ -79,9 +76,7 @@ export const addImageUploadedFulfilledListener = () => {
       }
 
       if (postUploadAction?.type === 'SET_CANVAS_INITIAL_IMAGE') {
-        dispatch(
-          setInitialCanvasImage(imageDTO, selectOptimalDimension(state))
-        );
+        dispatch(setInitialCanvasImage(imageDTO, selectOptimalDimension(state)));
         dispatch(
           addToast({
             ...DEFAULT_UPLOADED_TOAST,
@@ -127,9 +122,7 @@ export const addImageUploadedFulfilledListener = () => {
 
       if (postUploadAction?.type === 'SET_NODES_IMAGE') {
         const { nodeId, fieldName } = postUploadAction;
-        dispatch(
-          fieldImageValueChanged({ nodeId, fieldName, value: imageDTO })
-        );
+        dispatch(fieldImageValueChanged({ nodeId, fieldName, value: imageDTO }));
         dispatch(
           addToast({
             ...DEFAULT_UPLOADED_TOAST,
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/initialImageSelected.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/initialImageSelected.ts
index 09598440a5..93e921e911 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/initialImageSelected.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/initialImageSelected.ts
@@ -11,11 +11,7 @@ export const addInitialImageSelectedListener = () => {
     actionCreator: initialImageSelected,
     effect: (action, { dispatch }) => {
       if (!action.payload) {
-        dispatch(
-          addToast(
-            makeToast({ title: t('toast.imageNotLoadedDesc'), status: 'error' })
-          )
-        );
+        dispatch(addToast(makeToast({ title: t('toast.imageNotLoadedDesc'), status: 'error' })));
         return;
       }
 
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelSelected.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelSelected.ts
index fae6925ad5..7638c5522a 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelSelected.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelSelected.ts
@@ -5,10 +5,7 @@ import {
 } from 'features/controlAdapters/store/controlAdaptersSlice';
 import { loraRemoved } from 'features/lora/store/loraSlice';
 import { modelSelected } from 'features/parameters/store/actions';
-import {
-  modelChanged,
-  vaeSelected,
-} from 'features/parameters/store/generationSlice';
+import { modelChanged, vaeSelected } from 'features/parameters/store/generationSlice';
 import { zParameterModel } from 'features/parameters/types/parameterSchemas';
 import { addToast } from 'features/system/store/systemSlice';
 import { makeToast } from 'features/system/util/makeToast';
@@ -27,18 +24,14 @@ export const addModelSelectedListener = () => {
       const result = zParameterModel.safeParse(action.payload);
 
       if (!result.success) {
-        log.error(
-          { error: result.error.format() },
-          'Failed to parse main model'
-        );
+        log.error({ error: result.error.format() }, 'Failed to parse main model');
         return;
       }
 
       const newModel = result.data;
 
       const newBaseModel = newModel.base_model;
-      const didBaseModelChange =
-        state.generation.model?.base_model !== newBaseModel;
+      const didBaseModelChange = state.generation.model?.base_model !== newBaseModel;
 
       if (didBaseModelChange) {
         // we may need to reset some incompatible submodels
@@ -62,9 +55,7 @@ export const addModelSelectedListener = () => {
         // handle incompatible controlnets
         selectControlAdapterAll(state.controlAdapters).forEach((ca) => {
           if (ca.model?.base_model !== newBaseModel) {
-            dispatch(
-              controlAdapterIsEnabledChanged({ id: ca.id, isEnabled: false })
-            );
+            dispatch(controlAdapterIsEnabledChanged({ id: ca.id, isEnabled: false }));
             modelsCleared += 1;
           }
         });
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelsLoaded.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelsLoaded.ts
index 1e50d3578b..0ffe88cd07 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelsLoaded.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelsLoaded.ts
@@ -6,41 +6,24 @@ import {
   selectAllT2IAdapters,
 } from 'features/controlAdapters/store/controlAdaptersSlice';
 import { loraRemoved } from 'features/lora/store/loraSlice';
-import {
-  modelChanged,
-  vaeSelected,
-} from 'features/parameters/store/generationSlice';
-import {
-  zParameterModel,
-  zParameterVAEModel,
-} from 'features/parameters/types/parameterSchemas';
+import { modelChanged, vaeSelected } from 'features/parameters/store/generationSlice';
+import { zParameterModel, zParameterVAEModel } from 'features/parameters/types/parameterSchemas';
 import { refinerModelChanged } from 'features/sdxl/store/sdxlSlice';
 import { forEach, some } from 'lodash-es';
-import {
-  mainModelsAdapterSelectors,
-  modelsApi,
-  vaeModelsAdapterSelectors,
-} from 'services/api/endpoints/models';
+import { mainModelsAdapterSelectors, modelsApi, vaeModelsAdapterSelectors } from 'services/api/endpoints/models';
 import type { TypeGuardFor } from 'services/api/types';
 
 import { startAppListening } from '..';
 
 export const addModelsLoadedListener = () => {
   startAppListening({
-    predicate: (
-      action
-    ): action is TypeGuardFor<
-      typeof modelsApi.endpoints.getMainModels.matchFulfilled
-    > =>
+    predicate: (action): action is TypeGuardFor<typeof modelsApi.endpoints.getMainModels.matchFulfilled> =>
       modelsApi.endpoints.getMainModels.matchFulfilled(action) &&
       !action.meta.arg.originalArgs.includes('sdxl-refiner'),
     effect: async (action, { getState, dispatch }) => {
       // models loaded, we need to ensure the selected model is available and if not, select the first one
       const log = logger('models');
-      log.info(
-        { models: action.payload.entities },
-        `Main models loaded (${action.payload.ids.length})`
-      );
+      log.info({ models: action.payload.entities }, `Main models loaded (${action.payload.ids.length})`);
 
       const currentModel = getState().generation.model;
       const models = mainModelsAdapterSelectors.selectAll(action.payload);
@@ -67,10 +50,7 @@ export const addModelsLoadedListener = () => {
       const result = zParameterModel.safeParse(models[0]);
 
       if (!result.success) {
-        log.error(
-          { error: result.error.format() },
-          'Failed to parse main model'
-        );
+        log.error({ error: result.error.format() }, 'Failed to parse main model');
         return;
       }
 
@@ -78,20 +58,12 @@ export const addModelsLoadedListener = () => {
     },
   });
   startAppListening({
-    predicate: (
-      action
-    ): action is TypeGuardFor<
-      typeof modelsApi.endpoints.getMainModels.matchFulfilled
-    > =>
-      modelsApi.endpoints.getMainModels.matchFulfilled(action) &&
-      action.meta.arg.originalArgs.includes('sdxl-refiner'),
+    predicate: (action): action is TypeGuardFor<typeof modelsApi.endpoints.getMainModels.matchFulfilled> =>
+      modelsApi.endpoints.getMainModels.matchFulfilled(action) && action.meta.arg.originalArgs.includes('sdxl-refiner'),
     effect: async (action, { getState, dispatch }) => {
       // models loaded, we need to ensure the selected model is available and if not, select the first one
       const log = logger('models');
-      log.info(
-        { models: action.payload.entities },
-        `SDXL Refiner models loaded (${action.payload.ids.length})`
-      );
+      log.info({ models: action.payload.entities }, `SDXL Refiner models loaded (${action.payload.ids.length})`);
 
       const currentModel = getState().sdxl.refinerModel;
       const models = mainModelsAdapterSelectors.selectAll(action.payload);
@@ -122,10 +94,7 @@ export const addModelsLoadedListener = () => {
     effect: async (action, { getState, dispatch }) => {
       // VAEs loaded, need to reset the VAE is it's no longer available
       const log = logger('models');
-      log.info(
-        { models: action.payload.entities },
-        `VAEs loaded (${action.payload.ids.length})`
-      );
+      log.info({ models: action.payload.entities }, `VAEs loaded (${action.payload.ids.length})`);
 
       const currentVae = getState().generation.vae;
 
@@ -136,9 +105,7 @@ export const addModelsLoadedListener = () => {
 
       const isCurrentVAEAvailable = some(
         action.payload.entities,
-        (m) =>
-          m?.model_name === currentVae?.model_name &&
-          m?.base_model === currentVae?.base_model
+        (m) => m?.model_name === currentVae?.model_name && m?.base_model === currentVae?.base_model
       );
 
       if (isCurrentVAEAvailable) {
@@ -156,10 +123,7 @@ export const addModelsLoadedListener = () => {
       const result = zParameterVAEModel.safeParse(firstModel);
 
       if (!result.success) {
-        log.error(
-          { error: result.error.format() },
-          'Failed to parse VAE model'
-        );
+        log.error({ error: result.error.format() }, 'Failed to parse VAE model');
         return;
       }
 
@@ -171,19 +135,14 @@ export const addModelsLoadedListener = () => {
     effect: async (action, { getState, dispatch }) => {
       // LoRA models loaded - need to remove missing LoRAs from state
       const log = logger('models');
-      log.info(
-        { models: action.payload.entities },
-        `LoRAs loaded (${action.payload.ids.length})`
-      );
+      log.info({ models: action.payload.entities }, `LoRAs loaded (${action.payload.ids.length})`);
 
       const loras = getState().lora.loras;
 
       forEach(loras, (lora, id) => {
         const isLoRAAvailable = some(
           action.payload.entities,
-          (m) =>
-            m?.model_name === lora?.model_name &&
-            m?.base_model === lora?.base_model
+          (m) => m?.model_name === lora?.model_name && m?.base_model === lora?.base_model
         );
 
         if (isLoRAAvailable) {
@@ -199,17 +158,12 @@ export const addModelsLoadedListener = () => {
     effect: async (action, { getState, dispatch }) => {
       // ControlNet models loaded - need to remove missing ControlNets from state
       const log = logger('models');
-      log.info(
-        { models: action.payload.entities },
-        `ControlNet models loaded (${action.payload.ids.length})`
-      );
+      log.info({ models: action.payload.entities }, `ControlNet models loaded (${action.payload.ids.length})`);
 
       selectAllControlNets(getState().controlAdapters).forEach((ca) => {
         const isModelAvailable = some(
           action.payload.entities,
-          (m) =>
-            m?.model_name === ca?.model?.model_name &&
-            m?.base_model === ca?.model?.base_model
+          (m) => m?.model_name === ca?.model?.model_name && m?.base_model === ca?.model?.base_model
         );
 
         if (isModelAvailable) {
@@ -225,17 +179,12 @@ export const addModelsLoadedListener = () => {
     effect: async (action, { getState, dispatch }) => {
       // ControlNet models loaded - need to remove missing ControlNets from state
       const log = logger('models');
-      log.info(
-        { models: action.payload.entities },
-        `T2I Adapter models loaded (${action.payload.ids.length})`
-      );
+      log.info({ models: action.payload.entities }, `T2I Adapter models loaded (${action.payload.ids.length})`);
 
       selectAllT2IAdapters(getState().controlAdapters).forEach((ca) => {
         const isModelAvailable = some(
           action.payload.entities,
-          (m) =>
-            m?.model_name === ca?.model?.model_name &&
-            m?.base_model === ca?.model?.base_model
+          (m) => m?.model_name === ca?.model?.model_name && m?.base_model === ca?.model?.base_model
         );
 
         if (isModelAvailable) {
@@ -251,17 +200,12 @@ export const addModelsLoadedListener = () => {
     effect: async (action, { getState, dispatch }) => {
       // ControlNet models loaded - need to remove missing ControlNets from state
       const log = logger('models');
-      log.info(
-        { models: action.payload.entities },
-        `IP Adapter models loaded (${action.payload.ids.length})`
-      );
+      log.info({ models: action.payload.entities }, `IP Adapter models loaded (${action.payload.ids.length})`);
 
       selectAllIPAdapters(getState().controlAdapters).forEach((ca) => {
         const isModelAvailable = some(
           action.payload.entities,
-          (m) =>
-            m?.model_name === ca?.model?.model_name &&
-            m?.base_model === ca?.model?.base_model
+          (m) => m?.model_name === ca?.model?.model_name && m?.base_model === ca?.model?.base_model
         );
 
         if (isModelAvailable) {
@@ -276,10 +220,7 @@ export const addModelsLoadedListener = () => {
     matcher: modelsApi.endpoints.getTextualInversionModels.matchFulfilled,
     effect: async (action) => {
       const log = logger('models');
-      log.info(
-        { models: action.payload.entities },
-        `Embeddings loaded (${action.payload.ids.length})`
-      );
+      log.info({ models: action.payload.entities }, `Embeddings loaded (${action.payload.ids.length})`);
     },
   });
 };
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/promptChanged.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/promptChanged.ts
index 2dd36690a0..bd6cd502f6 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/promptChanged.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/promptChanged.ts
@@ -15,21 +15,12 @@ import { socketConnected } from 'services/events/actions';
 
 import { startAppListening } from '..';
 
-const matcher = isAnyOf(
-  setPositivePrompt,
-  combinatorialToggled,
-  maxPromptsChanged,
-  maxPromptsReset,
-  socketConnected
-);
+const matcher = isAnyOf(setPositivePrompt, combinatorialToggled, maxPromptsChanged, maxPromptsReset, socketConnected);
 
 export const addDynamicPromptsListener = () => {
   startAppListening({
     matcher,
-    effect: async (
-      action,
-      { dispatch, getState, cancelActiveListeners, delay }
-    ) => {
+    effect: async (action, { dispatch, getState, cancelActiveListeners, delay }) => {
       cancelActiveListeners();
       const state = getState();
       const { positivePrompt } = state.generation;
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/receivedOpenAPISchema.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/receivedOpenAPISchema.ts
index a11c49d069..4ab175cfba 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/receivedOpenAPISchema.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/receivedOpenAPISchema.ts
@@ -17,16 +17,9 @@ export const addReceivedOpenAPISchemaListener = () => {
       log.debug({ schemaJSON }, 'Received OpenAPI schema');
       const { nodesAllowlist, nodesDenylist } = getState().config;
 
-      const nodeTemplates = parseSchema(
-        schemaJSON,
-        nodesAllowlist,
-        nodesDenylist
-      );
+      const nodeTemplates = parseSchema(schemaJSON, nodesAllowlist, nodesDenylist);
 
-      log.debug(
-        { nodeTemplates: parseify(nodeTemplates) },
-        `Built ${size(nodeTemplates)} node templates`
-      );
+      log.debug({ nodeTemplates: parseify(nodeTemplates) }, `Built ${size(nodeTemplates)} node templates`);
 
       dispatch(nodeTemplatesBuilt(nodeTemplates));
     },
@@ -36,10 +29,7 @@ export const addReceivedOpenAPISchemaListener = () => {
     actionCreator: receivedOpenAPISchema.rejected,
     effect: (action) => {
       const log = logger('system');
-      log.error(
-        { error: parseify(action.error) },
-        'Problem retrieving OpenAPI Schema'
-      );
+      log.error({ error: parseify(action.error) }, 'Problem retrieving OpenAPI Schema');
     },
   });
 };
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketConnected.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketConnected.ts
index e8e36d026c..05cb0d64b3 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketConnected.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketConnected.ts
@@ -16,10 +16,7 @@ const $isFirstConnection = atom(true);
 export const addSocketConnectedEventListener = () => {
   startAppListening({
     actionCreator: socketConnected,
-    effect: async (
-      action,
-      { dispatch, getState, cancelActiveListeners, delay }
-    ) => {
+    effect: async (action, { dispatch, getState, cancelActiveListeners, delay }) => {
       log.debug('Connected');
 
       /**
@@ -86,10 +83,7 @@ export const addSocketConnectedEventListener = () => {
     effect: async (action, { dispatch, getState }) => {
       const { nodeTemplates, config } = getState();
       // We only want to re-fetch the schema if we don't have any node templates
-      if (
-        !size(nodeTemplates.templates) &&
-        !config.disabledTabs.includes('nodes')
-      ) {
+      if (!size(nodeTemplates.templates) && !config.disabledTabs.includes('nodes')) {
         // This request is a createAsyncThunk - resetting API state as in the above listener
         // will not trigger this request, so we need to manually do it.
         dispatch(receivedOpenAPISchema());
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts
index d59ac3fb11..d49f35cd2a 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts
@@ -1,17 +1,10 @@
 import { logger } from 'app/logging/logger';
 import { parseify } from 'common/util/serialize';
 import { addImageToStagingArea } from 'features/canvas/store/canvasSlice';
-import {
-  boardIdSelected,
-  galleryViewChanged,
-  imageSelected,
-} from 'features/gallery/store/gallerySlice';
+import { boardIdSelected, galleryViewChanged, imageSelected } from 'features/gallery/store/gallerySlice';
 import { IMAGE_CATEGORIES } from 'features/gallery/store/types';
 import { isImageOutput } from 'features/nodes/types/common';
-import {
-  LINEAR_UI_OUTPUT,
-  nodeIDDenyList,
-} from 'features/nodes/util/graph/constants';
+import { LINEAR_UI_OUTPUT, nodeIDDenyList } from 'features/nodes/util/graph/constants';
 import { boardsApi } from 'services/api/endpoints/boards';
 import { imagesApi } from 'services/api/endpoints/images';
 import { imagesAdapter } from 'services/api/util';
@@ -29,19 +22,12 @@ export const addInvocationCompleteEventListener = () => {
     actionCreator: socketInvocationComplete,
     effect: async (action, { dispatch, getState }) => {
       const { data } = action.payload;
-      log.debug(
-        { data: parseify(data) },
-        `Invocation complete (${action.payload.data.node.type})`
-      );
+      log.debug({ data: parseify(data) }, `Invocation complete (${action.payload.data.node.type})`);
 
       const { result, node, queue_batch_id, source_node_id } = data;
 
       // This complete event has an associated image output
-      if (
-        isImageOutput(result) &&
-        !nodeTypeDenylist.includes(node.type) &&
-        !nodeIDDenyList.includes(source_node_id)
-      ) {
+      if (isImageOutput(result) && !nodeTypeDenylist.includes(node.type) && !nodeIDDenyList.includes(source_node_id)) {
         const { image_name } = result.image;
         const { canvas, gallery } = getState();
 
@@ -56,10 +42,7 @@ export const addInvocationCompleteEventListener = () => {
         imageDTORequest.unsubscribe();
 
         // Add canvas images to the staging area
-        if (
-          canvas.batchIds.includes(queue_batch_id) &&
-          [LINEAR_UI_OUTPUT].includes(data.source_node_id)
-        ) {
+        if (canvas.batchIds.includes(queue_batch_id) && [LINEAR_UI_OUTPUT].includes(data.source_node_id)) {
           dispatch(addImageToStagingArea(imageDTO));
         }
 
@@ -84,21 +67,13 @@ export const addInvocationCompleteEventListener = () => {
 
           // update the total images for the board
           dispatch(
-            boardsApi.util.updateQueryData(
-              'getBoardImagesTotal',
-              imageDTO.board_id ?? 'none',
-              (draft) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                draft.total += 1;
-              }
-            )
+            boardsApi.util.updateQueryData('getBoardImagesTotal', imageDTO.board_id ?? 'none', (draft) => {
+              // eslint-disable-next-line @typescript-eslint/no-unused-vars
+              draft.total += 1;
+            })
           );
 
-          dispatch(
-            imagesApi.util.invalidateTags([
-              { type: 'Board', id: imageDTO.board_id ?? 'none' },
-            ])
-          );
+          dispatch(imagesApi.util.invalidateTags([{ type: 'Board', id: imageDTO.board_id ?? 'none' }]));
 
           const { shouldAutoSwitch } = gallery;
 
@@ -109,10 +84,7 @@ export const addInvocationCompleteEventListener = () => {
               dispatch(galleryViewChanged('images'));
             }
 
-            if (
-              imageDTO.board_id &&
-              imageDTO.board_id !== gallery.selectedBoardId
-            ) {
+            if (imageDTO.board_id && imageDTO.board_id !== gallery.selectedBoardId) {
               dispatch(
                 boardIdSelected({
                   boardId: imageDTO.board_id,
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationError.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationError.ts
index a13a9011c5..dfc1f0dd58 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationError.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationError.ts
@@ -9,10 +9,7 @@ export const addInvocationErrorEventListener = () => {
   startAppListening({
     actionCreator: socketInvocationError,
     effect: (action) => {
-      log.error(
-        action.payload,
-        `Invocation error (${action.payload.data.node.type})`
-      );
+      log.error(action.payload, `Invocation error (${action.payload.data.node.type})`);
     },
   });
 };
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationRetrievalError.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationRetrievalError.ts
index 394c67dbc9..f02317c236 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationRetrievalError.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationRetrievalError.ts
@@ -9,10 +9,7 @@ export const addInvocationRetrievalErrorEventListener = () => {
   startAppListening({
     actionCreator: socketInvocationRetrievalError,
     effect: (action) => {
-      log.error(
-        action.payload,
-        `Invocation retrieval error (${action.payload.data.graph_execution_state_id})`
-      );
+      log.error(action.payload, `Invocation retrieval error (${action.payload.data.graph_execution_state_id})`);
     },
   });
 };
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationStarted.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationStarted.ts
index 6b293132a2..12766b2707 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationStarted.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationStarted.ts
@@ -9,10 +9,7 @@ export const addInvocationStartedEventListener = () => {
   startAppListening({
     actionCreator: socketInvocationStarted,
     effect: (action) => {
-      log.debug(
-        action.payload,
-        `Invocation started (${action.payload.data.node.type})`
-      );
+      log.debug(action.payload, `Invocation started (${action.payload.data.node.type})`);
     },
   });
 };
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketModelLoad.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketModelLoad.ts
index 828102bfa9..aa91c69d75 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketModelLoad.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketModelLoad.ts
@@ -1,8 +1,5 @@
 import { logger } from 'app/logging/logger';
-import {
-  socketModelLoadCompleted,
-  socketModelLoadStarted,
-} from 'services/events/actions';
+import { socketModelLoadCompleted, socketModelLoadStarted } from 'services/events/actions';
 
 import { startAppListening } from '../..';
 
@@ -12,8 +9,7 @@ export const addModelLoadEventListener = () => {
   startAppListening({
     actionCreator: socketModelLoadStarted,
     effect: (action) => {
-      const { base_model, model_name, model_type, submodel } =
-        action.payload.data;
+      const { base_model, model_name, model_type, submodel } = action.payload.data;
 
       let message = `Model load started: ${base_model}/${model_type}/${model_name}`;
 
@@ -28,8 +24,7 @@ export const addModelLoadEventListener = () => {
   startAppListening({
     actionCreator: socketModelLoadCompleted,
     effect: (action) => {
-      const { base_model, model_name, model_type, submodel } =
-        action.payload.data;
+      const { base_model, model_name, model_type, submodel } = action.payload.data;
 
       let message = `Model load complete: ${base_model}/${model_type}/${model_name}`;
 
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketQueueItemStatusChanged.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketQueueItemStatusChanged.ts
index a766437f15..bd5471b299 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketQueueItemStatusChanged.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketQueueItemStatusChanged.ts
@@ -13,10 +13,7 @@ export const addSocketQueueItemStatusChangedEventListener = () => {
       // we've got new status for the queue item, batch and queue
       const { queue_item, batch_status, queue_status } = action.payload.data;
 
-      log.debug(
-        action.payload,
-        `Queue item ${queue_item.item_id} status updated: ${queue_item.status}`
-      );
+      log.debug(action.payload, `Queue item ${queue_item.item_id} status updated: ${queue_item.status}`);
 
       // Update this specific queue item in the list of queue items (this is the queue item DTO, without the session)
       dispatch(
@@ -40,35 +37,23 @@ export const addSocketQueueItemStatusChangedEventListener = () => {
 
       // Update the batch status
       dispatch(
-        queueApi.util.updateQueryData(
-          'getBatchStatus',
-          { batch_id: batch_status.batch_id },
-          () => batch_status
-        )
+        queueApi.util.updateQueryData('getBatchStatus', { batch_id: batch_status.batch_id }, () => batch_status)
       );
 
       // Update the queue item status (this is the full queue item, including the session)
       dispatch(
-        queueApi.util.updateQueryData(
-          'getQueueItem',
-          queue_item.item_id,
-          (draft) => {
-            if (!draft) {
-              return;
-            }
-            Object.assign(draft, queue_item);
+        queueApi.util.updateQueryData('getQueueItem', queue_item.item_id, (draft) => {
+          if (!draft) {
+            return;
           }
-        )
+          Object.assign(draft, queue_item);
+        })
       );
 
       // Invalidate caches for things we cannot update
       // TODO: technically, we could possibly update the current session queue item, but feels safer to just request it again
       dispatch(
-        queueApi.util.invalidateTags([
-          'CurrentSessionQueueItem',
-          'NextSessionQueueItem',
-          'InvocationCacheStatus',
-        ])
+        queueApi.util.invalidateTags(['CurrentSessionQueueItem', 'NextSessionQueueItem', 'InvocationCacheStatus'])
       );
     },
   });
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketSessionRetrievalError.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketSessionRetrievalError.ts
index e20a8cf6cb..b655a686de 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketSessionRetrievalError.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketSessionRetrievalError.ts
@@ -9,10 +9,7 @@ export const addSessionRetrievalErrorEventListener = () => {
   startAppListening({
     actionCreator: socketSessionRetrievalError,
     effect: (action) => {
-      log.error(
-        action.payload,
-        `Session retrieval error (${action.payload.data.graph_execution_state_id})`
-      );
+      log.error(action.payload, `Session retrieval error (${action.payload.data.graph_execution_state_id})`);
     },
   });
 };
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/updateAllNodesRequested.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/updateAllNodesRequested.ts
index 371983c781..752c3b09df 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/updateAllNodesRequested.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/updateAllNodesRequested.ts
@@ -3,10 +3,7 @@ import { updateAllNodesRequested } from 'features/nodes/store/actions';
 import { nodeReplaced } from 'features/nodes/store/nodesSlice';
 import { NodeUpdateError } from 'features/nodes/types/error';
 import { isInvocationNode } from 'features/nodes/types/invocation';
-import {
-  getNeedsUpdate,
-  updateNode,
-} from 'features/nodes/util/node/nodeUpdate';
+import { getNeedsUpdate, updateNode } from 'features/nodes/util/node/nodeUpdate';
 import { addToast } from 'features/system/store/systemSlice';
 import { makeToast } from 'features/system/util/makeToast';
 import { t } from 'i18next';
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/upscaleRequested.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/upscaleRequested.ts
index 75c67a08cc..46f55ef21f 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/upscaleRequested.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/upscaleRequested.ts
@@ -10,9 +10,7 @@ import type { BatchConfig, ImageDTO } from 'services/api/types';
 
 import { startAppListening } from '..';
 
-export const upscaleRequested = createAction<{ imageDTO: ImageDTO }>(
-  `upscale/upscaleRequested`
-);
+export const upscaleRequested = createAction<{ imageDTO: ImageDTO }>(`upscale/upscaleRequested`);
 
 export const addUpscaleRequestedListener = () => {
   startAppListening({
@@ -24,8 +22,7 @@ export const addUpscaleRequestedListener = () => {
       const { image_name } = imageDTO;
       const state = getState();
 
-      const { isAllowedToUpscale, detailTKey } =
-        createIsAllowedToUpscaleSelector(imageDTO)(state);
+      const { isAllowedToUpscale, detailTKey } = createIsAllowedToUpscaleSelector(imageDTO)(state);
 
       // if we can't upscale, show a toast and return
       if (!isAllowedToUpscale) {
@@ -66,21 +63,11 @@ export const addUpscaleRequestedListener = () => {
 
         const enqueueResult = await req.unwrap();
         req.reset();
-        log.debug(
-          { enqueueResult: parseify(enqueueResult) },
-          t('queue.graphQueued')
-        );
+        log.debug({ enqueueResult: parseify(enqueueResult) }, t('queue.graphQueued'));
       } catch (error) {
-        log.error(
-          { enqueueBatchArg: parseify(enqueueBatchArg) },
-          t('queue.graphFailedToQueue')
-        );
+        log.error({ enqueueBatchArg: parseify(enqueueBatchArg) }, t('queue.graphFailedToQueue'));
 
-        if (
-          error instanceof Object &&
-          'status' in error &&
-          error.status === 403
-        ) {
+        if (error instanceof Object && 'status' in error && error.status === 403) {
           return;
         } else {
           dispatch(
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/workflowLoadRequested.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/workflowLoadRequested.ts
index 1e26ea7a0c..0b37271be7 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/workflowLoadRequested.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/workflowLoadRequested.ts
@@ -1,14 +1,8 @@
 import { logger } from 'app/logging/logger';
 import { parseify } from 'common/util/serialize';
-import {
-  workflowLoaded,
-  workflowLoadRequested,
-} from 'features/nodes/store/actions';
+import { workflowLoaded, workflowLoadRequested } from 'features/nodes/store/actions';
 import { $flow } from 'features/nodes/store/reactFlowInstance';
-import {
-  WorkflowMigrationError,
-  WorkflowVersionError,
-} from 'features/nodes/types/error';
+import { WorkflowMigrationError, WorkflowVersionError } from 'features/nodes/types/error';
 import { validateWorkflow } from 'features/nodes/util/workflow/validateWorkflow';
 import { addToast } from 'features/system/store/systemSlice';
 import { makeToast } from 'features/system/util/makeToast';
@@ -28,10 +22,7 @@ export const addWorkflowLoadRequestedListener = () => {
       const nodeTemplates = getState().nodeTemplates.templates;
 
       try {
-        const { workflow: validatedWorkflow, warnings } = validateWorkflow(
-          workflow,
-          nodeTemplates
-        );
+        const { workflow: validatedWorkflow, warnings } = validateWorkflow(workflow, nodeTemplates);
 
         if (asCopy) {
           // If we're loading a copy, we need to remove the ID so that the backend will create a new workflow
@@ -108,10 +99,7 @@ export const addWorkflowLoadRequestedListener = () => {
           );
         } else {
           // Some other error occurred
-          log.error(
-            { error: parseify(e) },
-            t('nodes.unknownErrorValidatingWorkflow')
-          );
+          log.error({ error: parseify(e) }, t('nodes.unknownErrorValidatingWorkflow'));
           dispatch(
             addToast(
               makeToast({
diff --git a/invokeai/frontend/web/src/app/store/nanostores/store.ts b/invokeai/frontend/web/src/app/store/nanostores/store.ts
index 59eba50e87..aee0f0e6ef 100644
--- a/invokeai/frontend/web/src/app/store/nanostores/store.ts
+++ b/invokeai/frontend/web/src/app/store/nanostores/store.ts
@@ -8,6 +8,4 @@ declare global {
   }
 }
 
-export const $store = atom<
-  Readonly<ReturnType<typeof createStore>> | undefined
->();
+export const $store = atom<Readonly<ReturnType<typeof createStore>> | undefined>();
diff --git a/invokeai/frontend/web/src/app/store/nanostores/workflowCategories.ts b/invokeai/frontend/web/src/app/store/nanostores/workflowCategories.ts
index a643219c66..e0d6107129 100644
--- a/invokeai/frontend/web/src/app/store/nanostores/workflowCategories.ts
+++ b/invokeai/frontend/web/src/app/store/nanostores/workflowCategories.ts
@@ -1,7 +1,4 @@
 import type { WorkflowCategory } from 'features/nodes/types/workflow';
 import { atom } from 'nanostores';
 
-export const $workflowCategories = atom<WorkflowCategory[]>([
-  'user',
-  'default',
-]);
+export const $workflowCategories = atom<WorkflowCategory[]>(['user', 'default']);
diff --git a/invokeai/frontend/web/src/app/store/store.ts b/invokeai/frontend/web/src/app/store/store.ts
index 567b70786f..81088ffcbb 100644
--- a/invokeai/frontend/web/src/app/store/store.ts
+++ b/invokeai/frontend/web/src/app/store/store.ts
@@ -1,17 +1,10 @@
 import type { ThunkDispatch, UnknownAction } from '@reduxjs/toolkit';
-import {
-  autoBatchEnhancer,
-  combineReducers,
-  configureStore,
-} from '@reduxjs/toolkit';
+import { autoBatchEnhancer, combineReducers, configureStore } from '@reduxjs/toolkit';
 import { logger } from 'app/logging/logger';
 import { idbKeyValDriver } from 'app/store/enhancers/reduxRemember/driver';
 import { errorHandler } from 'app/store/enhancers/reduxRemember/errors';
 import { canvasPersistDenylist } from 'features/canvas/store/canvasPersistDenylist';
-import canvasReducer, {
-  initialCanvasState,
-  migrateCanvasState,
-} from 'features/canvas/store/canvasSlice';
+import canvasReducer, { initialCanvasState, migrateCanvasState } from 'features/canvas/store/canvasSlice';
 import changeBoardModalReducer from 'features/changeBoardModal/store/slice';
 import { controlAdaptersPersistDenylist } from 'features/controlAdapters/store/controlAdaptersPersistDenylist';
 import controlAdaptersReducer, {
@@ -25,32 +18,17 @@ import dynamicPromptsReducer, {
   migrateDynamicPromptsState,
 } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
 import { galleryPersistDenylist } from 'features/gallery/store/galleryPersistDenylist';
-import galleryReducer, {
-  initialGalleryState,
-  migrateGalleryState,
-} from 'features/gallery/store/gallerySlice';
-import hrfReducer, {
-  initialHRFState,
-  migrateHRFState,
-} from 'features/hrf/store/hrfSlice';
-import loraReducer, {
-  initialLoraState,
-  migrateLoRAState,
-} from 'features/lora/store/loraSlice';
+import galleryReducer, { initialGalleryState, migrateGalleryState } from 'features/gallery/store/gallerySlice';
+import hrfReducer, { initialHRFState, migrateHRFState } from 'features/hrf/store/hrfSlice';
+import loraReducer, { initialLoraState, migrateLoRAState } from 'features/lora/store/loraSlice';
 import modelmanagerReducer, {
   initialModelManagerState,
   migrateModelManagerState,
 } from 'features/modelManager/store/modelManagerSlice';
 import { nodesPersistDenylist } from 'features/nodes/store/nodesPersistDenylist';
-import nodesReducer, {
-  initialNodesState,
-  migrateNodesState,
-} from 'features/nodes/store/nodesSlice';
+import nodesReducer, { initialNodesState, migrateNodesState } from 'features/nodes/store/nodesSlice';
 import nodeTemplatesReducer from 'features/nodes/store/nodeTemplatesSlice';
-import workflowReducer, {
-  initialWorkflowState,
-  migrateWorkflowState,
-} from 'features/nodes/store/workflowSlice';
+import workflowReducer, { initialWorkflowState, migrateWorkflowState } from 'features/nodes/store/workflowSlice';
 import { generationPersistDenylist } from 'features/parameters/store/generationPersistDenylist';
 import generationReducer, {
   initialGenerationState,
@@ -62,21 +40,12 @@ import postprocessingReducer, {
   migratePostprocessingState,
 } from 'features/parameters/store/postprocessingSlice';
 import queueReducer from 'features/queue/store/queueSlice';
-import sdxlReducer, {
-  initialSDXLState,
-  migrateSDXLState,
-} from 'features/sdxl/store/sdxlSlice';
+import sdxlReducer, { initialSDXLState, migrateSDXLState } from 'features/sdxl/store/sdxlSlice';
 import configReducer from 'features/system/store/configSlice';
 import { systemPersistDenylist } from 'features/system/store/systemPersistDenylist';
-import systemReducer, {
-  initialSystemState,
-  migrateSystemState,
-} from 'features/system/store/systemSlice';
+import systemReducer, { initialSystemState, migrateSystemState } from 'features/system/store/systemSlice';
 import { uiPersistDenylist } from 'features/ui/store/uiPersistDenylist';
-import uiReducer, {
-  initialUIState,
-  migrateUIState,
-} from 'features/ui/store/uiSlice';
+import uiReducer, { initialUIState, migrateUIState } from 'features/ui/store/uiSlice';
 import { diff } from 'jsondiffpatch';
 import { defaultsDeep, keys, omit, pick } from 'lodash-es';
 import dynamicMiddlewares from 'redux-dynamic-middlewares';
@@ -206,10 +175,7 @@ const unserialize: UnserializeFunction = (data, key) => {
     );
     return transformed;
   } catch (err) {
-    log.warn(
-      { error: serializeError(err) },
-      `Error rehydrating slice "${key}", falling back to default initial state`
-    );
+    log.warn({ error: serializeError(err) }, `Error rehydrating slice "${key}", falling back to default initial state`);
     return config.initialState;
   }
 };
@@ -229,10 +195,7 @@ const serializationDenylist: {
 };
 
 export const serialize: SerializeFunction = (data, key) => {
-  const result = omit(
-    data,
-    serializationDenylist[key as keyof typeof serializationDenylist] ?? []
-  );
+  const result = omit(data, serializationDenylist[key as keyof typeof serializationDenylist] ?? []);
   return JSON.stringify(result);
 };
 
@@ -256,9 +219,7 @@ export const createStore = (uniqueStoreKey?: string, persist = true) =>
             persistDebounce: 300,
             serialize,
             unserialize,
-            prefix: uniqueStoreKey
-              ? `${STORAGE_PREFIX}${uniqueStoreKey}-`
-              : STORAGE_PREFIX,
+            prefix: uniqueStoreKey ? `${STORAGE_PREFIX}${uniqueStoreKey}-` : STORAGE_PREFIX,
             errorHandler,
           })
         );
@@ -278,9 +239,7 @@ export const createStore = (uniqueStoreKey?: string, persist = true) =>
     },
   });
 
-export type AppGetState = ReturnType<
-  ReturnType<typeof createStore>['getState']
->;
+export type AppGetState = ReturnType<ReturnType<typeof createStore>['getState']>;
 export type RootState = ReturnType<ReturnType<typeof createStore>['getState']>;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type AppThunkDispatch = ThunkDispatch<RootState, any, UnknownAction>;
diff --git a/invokeai/frontend/web/src/common/components/IAIColorPicker.tsx b/invokeai/frontend/web/src/common/components/IAIColorPicker.tsx
index b8d143c495..8c3b329f2f 100644
--- a/invokeai/frontend/web/src/common/components/IAIColorPicker.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIColorPicker.tsx
@@ -1,17 +1,9 @@
 import type { ChakraProps } from '@invoke-ai/ui-library';
-import {
-  CompositeNumberInput,
-  Flex,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+import { CompositeNumberInput, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import type { CSSProperties } from 'react';
 import { memo, useCallback } from 'react';
 import { RgbaColorPicker } from 'react-colorful';
-import type {
-  ColorPickerBaseProps,
-  RgbaColor,
-} from 'react-colorful/dist/types';
+import type { ColorPickerBaseProps, RgbaColor } from 'react-colorful/dist/types';
 import { useTranslation } from 'react-i18next';
 
 type IAIColorPickerProps = ColorPickerBaseProps<RgbaColor> & {
@@ -39,30 +31,13 @@ const numberInputWidth: ChakraProps['w'] = '4.2rem';
 const IAIColorPicker = (props: IAIColorPickerProps) => {
   const { color, onChange, withNumberInput, ...rest } = props;
   const { t } = useTranslation();
-  const handleChangeR = useCallback(
-    (r: number) => onChange({ ...color, r }),
-    [color, onChange]
-  );
-  const handleChangeG = useCallback(
-    (g: number) => onChange({ ...color, g }),
-    [color, onChange]
-  );
-  const handleChangeB = useCallback(
-    (b: number) => onChange({ ...color, b }),
-    [color, onChange]
-  );
-  const handleChangeA = useCallback(
-    (a: number) => onChange({ ...color, a }),
-    [color, onChange]
-  );
+  const handleChangeR = useCallback((r: number) => onChange({ ...color, r }), [color, onChange]);
+  const handleChangeG = useCallback((g: number) => onChange({ ...color, g }), [color, onChange]);
+  const handleChangeB = useCallback((b: number) => onChange({ ...color, b }), [color, onChange]);
+  const handleChangeA = useCallback((a: number) => onChange({ ...color, a }), [color, onChange]);
   return (
     <Flex sx={sx}>
-      <RgbaColorPicker
-        color={color}
-        onChange={onChange}
-        style={colorPickerStyles}
-        {...rest}
-      />
+      <RgbaColorPicker color={color} onChange={onChange} style={colorPickerStyles} {...rest} />
       {withNumberInput && (
         <Flex>
           <FormControl>
diff --git a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
index 17fbaafa41..01107c21b4 100644
--- a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
@@ -1,26 +1,11 @@
-import type {
-  ChakraProps,
-  FlexProps,
-  SystemStyleObject,
-} from '@invoke-ai/ui-library';
+import type { ChakraProps, FlexProps, SystemStyleObject } from '@invoke-ai/ui-library';
 import { Flex, Icon, Image } from '@invoke-ai/ui-library';
-import {
-  IAILoadingImageFallback,
-  IAINoContentFallback,
-} from 'common/components/IAIImageFallback';
+import { IAILoadingImageFallback, IAINoContentFallback } from 'common/components/IAIImageFallback';
 import ImageMetadataOverlay from 'common/components/ImageMetadataOverlay';
 import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
-import type {
-  TypesafeDraggableData,
-  TypesafeDroppableData,
-} from 'features/dnd/types';
+import type { TypesafeDraggableData, TypesafeDroppableData } from 'features/dnd/types';
 import ImageContextMenu from 'features/gallery/components/ImageContextMenu/ImageContextMenu';
-import type {
-  MouseEvent,
-  ReactElement,
-  ReactNode,
-  SyntheticEvent,
-} from 'react';
+import type { MouseEvent, ReactElement, ReactNode, SyntheticEvent } from 'react';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { PiImageBold, PiUploadSimpleBold } from 'react-icons/pi';
 import type { ImageDTO, PostUploadAction } from 'services/api/types';
@@ -165,14 +150,8 @@ const IAIDndImage = (props: IAIDndImageProps) => {
               <Image
                 src={thumbnail ? imageDTO.thumbnail_url : imageDTO.image_url}
                 fallbackStrategy="beforeLoadOrError"
-                fallbackSrc={
-                  useThumbailFallback ? imageDTO.thumbnail_url : undefined
-                }
-                fallback={
-                  useThumbailFallback ? undefined : (
-                    <IAILoadingImageFallback image={imageDTO} />
-                  )
-                }
+                fallbackSrc={useThumbailFallback ? imageDTO.thumbnail_url : undefined}
+                fallback={useThumbailFallback ? undefined : <IAILoadingImageFallback image={imageDTO} />}
                 onError={onError}
                 draggable={false}
                 w={imageDTO.width}
@@ -183,13 +162,8 @@ const IAIDndImage = (props: IAIDndImageProps) => {
                 sx={imageSx}
                 data-testid={dataTestId}
               />
-              {withMetadataOverlay && (
-                <ImageMetadataOverlay imageDTO={imageDTO} />
-              )}
-              <SelectionOverlay
-                isSelected={isSelected}
-                isHovered={withHoverOverlay ? isHovered : false}
-              />
+              {withMetadataOverlay && <ImageMetadataOverlay imageDTO={imageDTO} />}
+              <SelectionOverlay isSelected={isSelected} isHovered={withHoverOverlay ? isHovered : false} />
             </Flex>
           )}
           {!imageDTO && !isUploadDisabled && (
@@ -202,20 +176,10 @@ const IAIDndImage = (props: IAIDndImageProps) => {
           )}
           {!imageDTO && isUploadDisabled && noContentFallback}
           {imageDTO && !isDragDisabled && (
-            <IAIDraggable
-              data={draggableData}
-              disabled={isDragDisabled || !imageDTO}
-              onClick={onClick}
-            />
+            <IAIDraggable data={draggableData} disabled={isDragDisabled || !imageDTO} onClick={onClick} />
           )}
           {children}
-          {!isDropDisabled && (
-            <IAIDroppable
-              data={droppableData}
-              disabled={isDropDisabled}
-              dropLabel={dropLabel}
-            />
-          )}
+          {!isDropDisabled && <IAIDroppable data={droppableData} disabled={isDropDisabled} dropLabel={dropLabel} />}
         </Flex>
       )}
     </ImageContextMenu>
diff --git a/invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx b/invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx
index e708d0097a..cd3e0cbee1 100644
--- a/invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx
@@ -27,12 +27,7 @@ const IAIDropOverlay = (props: Props) => {
   const { isOver, label = t('gallery.drop') } = props;
   const motionId = useRef(uuidv4());
   return (
-    <motion.div
-      key={motionId.current}
-      initial={initial}
-      animate={animate}
-      exit={exit}
-    >
+    <motion.div key={motionId.current} initial={initial} animate={animate} exit={exit}>
       <Flex position="absolute" top={0} insetInlineStart={0} w="full" h="full">
         <Flex
           position="absolute"
diff --git a/invokeai/frontend/web/src/common/components/IAIDroppable.tsx b/invokeai/frontend/web/src/common/components/IAIDroppable.tsx
index 3377422a85..258a6e9004 100644
--- a/invokeai/frontend/web/src/common/components/IAIDroppable.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIDroppable.tsx
@@ -36,9 +36,7 @@ const IAIDroppable = (props: IAIDroppableProps) => {
       pointerEvents={active ? 'auto' : 'none'}
     >
       <AnimatePresence>
-        {isValidDrop(data, active) && (
-          <IAIDropOverlay isOver={isOver} label={dropLabel} />
-        )}
+        {isValidDrop(data, active) && <IAIDropOverlay isOver={isOver} label={dropLabel} />}
       </AnimatePresence>
     </Box>
   );
diff --git a/invokeai/frontend/web/src/common/components/IAIFillSkeleton.tsx b/invokeai/frontend/web/src/common/components/IAIFillSkeleton.tsx
index 29bcb927ac..20e9fa2c68 100644
--- a/invokeai/frontend/web/src/common/components/IAIFillSkeleton.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIFillSkeleton.tsx
@@ -16,13 +16,7 @@ const skeletonStyles: SystemStyleObject = {
 const IAIFillSkeleton = () => {
   return (
     <Skeleton sx={skeletonStyles}>
-      <Box
-        position="absolute"
-        top={0}
-        insetInlineStart={0}
-        height="full"
-        width="full"
-      />
+      <Box position="absolute" top={0} insetInlineStart={0} height="full" width="full" />
     </Skeleton>
   );
 };
diff --git a/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx b/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx
index c8cf83b5f1..1a23c458cf 100644
--- a/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx
@@ -19,15 +19,7 @@ export const IAILoadingImageFallback = memo((props: Props) => {
   }
 
   return (
-    <Flex
-      opacity={0.7}
-      w="full"
-      h="full"
-      alignItems="center"
-      justifyContent="center"
-      borderRadius="base"
-      bg="base.900"
-    >
+    <Flex opacity={0.7} w="full" h="full" alignItems="center" justifyContent="center" borderRadius="base" bg="base.900">
       <Spinner size="xl" />
     </Flex>
   );
@@ -77,32 +69,30 @@ type IAINoImageFallbackWithSpinnerProps = FlexProps & {
   label?: string;
 };
 
-export const IAINoContentFallbackWithSpinner = memo(
-  (props: IAINoImageFallbackWithSpinnerProps) => {
-    const { sx, ...rest } = props;
-    const styles = useMemo(
-      () => ({
-        w: 'full',
-        h: 'full',
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderRadius: 'base',
-        flexDir: 'column',
-        gap: 2,
-        userSelect: 'none',
-        opacity: 0.7,
-        color: 'base.500',
-        ...sx,
-      }),
-      [sx]
-    );
+export const IAINoContentFallbackWithSpinner = memo((props: IAINoImageFallbackWithSpinnerProps) => {
+  const { sx, ...rest } = props;
+  const styles = useMemo(
+    () => ({
+      w: 'full',
+      h: 'full',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 'base',
+      flexDir: 'column',
+      gap: 2,
+      userSelect: 'none',
+      opacity: 0.7,
+      color: 'base.500',
+      ...sx,
+    }),
+    [sx]
+  );
 
-    return (
-      <Flex sx={styles} {...rest}>
-        <Spinner size="xl" />
-        {props.label && <Text textAlign="center">{props.label}</Text>}
-      </Flex>
-    );
-  }
-);
+  return (
+    <Flex sx={styles} {...rest}>
+      <Spinner size="xl" />
+      {props.label && <Text textAlign="center">{props.label}</Text>}
+    </Flex>
+  );
+});
 IAINoContentFallbackWithSpinner.displayName = 'IAINoContentFallbackWithSpinner';
diff --git a/invokeai/frontend/web/src/common/components/ImageUploadOverlay.tsx b/invokeai/frontend/web/src/common/components/ImageUploadOverlay.tsx
index 070598f081..abd68e72cb 100644
--- a/invokeai/frontend/web/src/common/components/ImageUploadOverlay.tsx
+++ b/invokeai/frontend/web/src/common/components/ImageUploadOverlay.tsx
@@ -91,9 +91,7 @@ const ImageUploadOverlay = (props: ImageUploadOverlayProps) => {
           ) : (
             <>
               <Heading size="lg">{t('toast.invalidUpload')}</Heading>
-              <Heading size="md">
-                {t('toast.uploadFailedInvalidUploadDesc')}
-              </Heading>
+              <Heading size="md">{t('toast.uploadFailedInvalidUploadDesc')}</Heading>
             </>
           )}
         </Flex>
diff --git a/invokeai/frontend/web/src/common/components/InformationalPopover/InformationalPopover.tsx b/invokeai/frontend/web/src/common/components/InformationalPopover/InformationalPopover.tsx
index 0a52000664..935212ee58 100644
--- a/invokeai/frontend/web/src/common/components/InformationalPopover/InformationalPopover.tsx
+++ b/invokeai/frontend/web/src/common/components/InformationalPopover/InformationalPopover.tsx
@@ -28,46 +28,39 @@ type Props = {
   children: ReactElement;
 };
 
-export const InformationalPopover = memo(
-  ({ feature, children, inPortal = true, ...rest }: Props) => {
-    const shouldEnableInformationalPopovers = useAppSelector(
-      (s) => s.system.shouldEnableInformationalPopovers
-    );
+export const InformationalPopover = memo(({ feature, children, inPortal = true, ...rest }: Props) => {
+  const shouldEnableInformationalPopovers = useAppSelector((s) => s.system.shouldEnableInformationalPopovers);
 
-    const data = useMemo(() => POPOVER_DATA[feature], [feature]);
+  const data = useMemo(() => POPOVER_DATA[feature], [feature]);
 
-    const popoverProps = useMemo(
-      () => merge(omit(data, ['image', 'href', 'buttonLabel']), rest),
-      [data, rest]
-    );
+  const popoverProps = useMemo(() => merge(omit(data, ['image', 'href', 'buttonLabel']), rest), [data, rest]);
 
-    if (!shouldEnableInformationalPopovers) {
-      return children;
-    }
-
-    return (
-      <Popover
-        isLazy
-        closeOnBlur={false}
-        trigger="hover"
-        variant="informational"
-        openDelay={OPEN_DELAY}
-        modifiers={POPPER_MODIFIERS}
-        placement="top"
-        {...popoverProps}
-      >
-        <PopoverTrigger>{children}</PopoverTrigger>
-        {inPortal ? (
-          <Portal>
-            <Content data={data} feature={feature} />
-          </Portal>
-        ) : (
-          <Content data={data} feature={feature} />
-        )}
-      </Popover>
-    );
+  if (!shouldEnableInformationalPopovers) {
+    return children;
   }
-);
+
+  return (
+    <Popover
+      isLazy
+      closeOnBlur={false}
+      trigger="hover"
+      variant="informational"
+      openDelay={OPEN_DELAY}
+      modifiers={POPPER_MODIFIERS}
+      placement="top"
+      {...popoverProps}
+    >
+      <PopoverTrigger>{children}</PopoverTrigger>
+      {inPortal ? (
+        <Portal>
+          <Content data={data} feature={feature} />
+        </Portal>
+      ) : (
+        <Content data={data} feature={feature} />
+      )}
+    </Popover>
+  );
+});
 
 InformationalPopover.displayName = 'InformationalPopover';
 
@@ -79,10 +72,7 @@ type ContentProps = {
 const Content = ({ data, feature }: ContentProps) => {
   const { t } = useTranslation();
 
-  const heading = useMemo<string | undefined>(
-    () => t(`popovers.${feature}.heading`),
-    [feature, t]
-  );
+  const heading = useMemo<string | undefined>(() => t(`popovers.${feature}.heading`), [feature, t]);
 
   const paragraphs = useMemo<string[]>(
     () =>
diff --git a/invokeai/frontend/web/src/common/components/InformationalPopover/constants.ts b/invokeai/frontend/web/src/common/components/InformationalPopover/constants.ts
index 8d3337dcaa..bdcd1ca9a4 100644
--- a/invokeai/frontend/web/src/common/components/InformationalPopover/constants.ts
+++ b/invokeai/frontend/web/src/common/components/InformationalPopover/constants.ts
@@ -95,6 +95,4 @@ export const POPOVER_DATA: { [key in Feature]?: PopoverData } = {
 
 export const OPEN_DELAY = 1000; // in milliseconds
 
-export const POPPER_MODIFIERS: PopoverProps['modifiers'] = [
-  { name: 'preventOverflow', options: { padding: 10 } },
-];
+export const POPPER_MODIFIERS: PopoverProps['modifiers'] = [{ name: 'preventOverflow', options: { padding: 10 } }];
diff --git a/invokeai/frontend/web/src/common/components/Loading/Loading.tsx b/invokeai/frontend/web/src/common/components/Loading/Loading.tsx
index 57b4d55560..dae5b40e8c 100644
--- a/invokeai/frontend/web/src/common/components/Loading/Loading.tsx
+++ b/invokeai/frontend/web/src/common/components/Loading/Loading.tsx
@@ -6,14 +6,7 @@ import { memo } from 'react';
 
 const Loading = () => {
   return (
-    <Flex
-      position="relative"
-      width="100vw"
-      height="100vh"
-      alignItems="center"
-      justifyContent="center"
-      bg="#151519"
-    >
+    <Flex position="relative" width="100vw" height="100vh" alignItems="center" justifyContent="center" bg="#151519">
       <Image src={InvokeLogoWhite} w="8rem" h="8rem" />
       <Spinner
         label="Loading"
diff --git a/invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx b/invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx
index f7624075c2..c42fb48520 100644
--- a/invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx
+++ b/invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx
@@ -13,12 +13,7 @@ type Props = PropsWithChildren & {
 
 const styles: CSSProperties = { height: '100%', width: '100%' };
 
-const ScrollableContent = ({
-  children,
-  maxHeight,
-  overflowX = 'hidden',
-  overflowY = 'scroll',
-}: Props) => {
+const ScrollableContent = ({ children, maxHeight, overflowX = 'hidden', overflowY = 'scroll' }: Props) => {
   const overlayscrollbarsOptions = useMemo(
     () => getOverlayScrollbarsParams(overflowX, overflowY).options,
     [overflowX, overflowY]
@@ -26,11 +21,7 @@ const ScrollableContent = ({
   return (
     <Flex w="full" h="full" maxHeight={maxHeight} position="relative">
       <Box position="absolute" top={0} left={0} right={0} bottom={0}>
-        <OverlayScrollbarsComponent
-          defer
-          style={styles}
-          options={overlayscrollbarsOptions}
-        >
+        <OverlayScrollbarsComponent defer style={styles} options={overlayscrollbarsOptions}>
           {children}
         </OverlayScrollbarsComponent>
       </Box>
diff --git a/invokeai/frontend/web/src/common/hooks/useFullscreenDropzone.ts b/invokeai/frontend/web/src/common/hooks/useFullscreenDropzone.ts
index 2894414bb3..350e09b6e5 100644
--- a/invokeai/frontend/web/src/common/hooks/useFullscreenDropzone.ts
+++ b/invokeai/frontend/web/src/common/hooks/useFullscreenDropzone.ts
@@ -14,22 +14,19 @@ const accept: Accept = {
   'image/jpeg': ['.jpg', '.jpeg', '.png'],
 };
 
-const selectPostUploadAction = createMemoizedSelector(
-  activeTabNameSelector,
-  (activeTabName) => {
-    let postUploadAction: PostUploadAction = { type: 'TOAST' };
+const selectPostUploadAction = createMemoizedSelector(activeTabNameSelector, (activeTabName) => {
+  let postUploadAction: PostUploadAction = { type: 'TOAST' };
 
-    if (activeTabName === 'unifiedCanvas') {
-      postUploadAction = { type: 'SET_CANVAS_INITIAL_IMAGE' };
-    }
-
-    if (activeTabName === 'img2img') {
-      postUploadAction = { type: 'SET_INITIAL_IMAGE' };
-    }
-
-    return postUploadAction;
+  if (activeTabName === 'unifiedCanvas') {
+    postUploadAction = { type: 'SET_CANVAS_INITIAL_IMAGE' };
   }
-);
+
+  if (activeTabName === 'img2img') {
+    postUploadAction = { type: 'SET_INITIAL_IMAGE' };
+  }
+
+  return postUploadAction;
+});
 
 export const useFullscreenDropzone = () => {
   const { t } = useTranslation();
@@ -112,9 +109,7 @@ export const useFullscreenDropzone = () => {
         // Set the files on the dropzone.inputRef
         dropzone.inputRef.current.files = e.clipboardData.files;
         // Dispatch the change event, dropzone catches this and we get to use its own validation
-        dropzone.inputRef.current?.dispatchEvent(
-          new Event('change', { bubbles: true })
-        );
+        dropzone.inputRef.current?.dispatchEvent(new Event('change', { bubbles: true }));
       }
     };
 
diff --git a/invokeai/frontend/web/src/common/hooks/useGlobalHotkeys.ts b/invokeai/frontend/web/src/common/hooks/useGlobalHotkeys.ts
index 4416480f0e..372452ce99 100644
--- a/invokeai/frontend/web/src/common/hooks/useGlobalHotkeys.ts
+++ b/invokeai/frontend/web/src/common/hooks/useGlobalHotkeys.ts
@@ -9,13 +9,8 @@ import { useHotkeys } from 'react-hotkeys-hook';
 
 export const useGlobalHotkeys = () => {
   const dispatch = useAppDispatch();
-  const isModelManagerEnabled =
-    useFeatureStatus('modelManager').isFeatureEnabled;
-  const {
-    queueBack,
-    isDisabled: isDisabledQueueBack,
-    isLoading: isLoadingQueueBack,
-  } = useQueueBack();
+  const isModelManagerEnabled = useFeatureStatus('modelManager').isFeatureEnabled;
+  const { queueBack, isDisabled: isDisabledQueueBack, isLoading: isLoadingQueueBack } = useQueueBack();
 
   useHotkeys(
     ['ctrl+enter', 'meta+enter'],
@@ -28,11 +23,7 @@ export const useGlobalHotkeys = () => {
     [queueBack, isDisabledQueueBack, isLoadingQueueBack]
   );
 
-  const {
-    queueFront,
-    isDisabled: isDisabledQueueFront,
-    isLoading: isLoadingQueueFront,
-  } = useQueueFront();
+  const { queueFront, isDisabled: isDisabledQueueFront, isLoading: isLoadingQueueFront } = useQueueFront();
 
   useHotkeys(
     ['ctrl+shift+enter', 'meta+shift+enter'],
@@ -61,11 +52,7 @@ export const useGlobalHotkeys = () => {
     [cancelQueueItem, isDisabledCancelQueueItem, isLoadingCancelQueueItem]
   );
 
-  const {
-    clearQueue,
-    isDisabled: isDisabledClearQueue,
-    isLoading: isLoadingClearQueue,
-  } = useClearQueue();
+  const { clearQueue, isDisabled: isDisabledClearQueue, isLoading: isLoadingClearQueue } = useClearQueue();
 
   useHotkeys(
     ['ctrl+shift+x', 'meta+shift+x'],
diff --git a/invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts b/invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts
index 44e9101574..eb55db79ca 100644
--- a/invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts
+++ b/invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts
@@ -28,11 +28,8 @@ export const useGroupedModelCombobox = <T extends AnyModelConfigEntity>(
   arg: UseGroupedModelComboboxArg<T>
 ): UseGroupedModelComboboxReturn => {
   const { t } = useTranslation();
-  const base_model = useAppSelector(
-    (s) => s.generation.model?.base_model ?? 'sdxl'
-  );
-  const { modelEntities, selectedModel, getIsDisabled, onChange, isLoading } =
-    arg;
+  const base_model = useAppSelector((s) => s.generation.model?.base_model ?? 'sdxl');
+  const { modelEntities, selectedModel, getIsDisabled, onChange, isLoading } = arg;
   const options = useMemo<GroupBase<ComboboxOption>[]>(() => {
     if (!modelEntities) {
       return [];
@@ -60,11 +57,8 @@ export const useGroupedModelCombobox = <T extends AnyModelConfigEntity>(
 
   const value = useMemo(
     () =>
-      options
-        .flatMap((o) => o.options)
-        .find((m) =>
-          selectedModel ? m.value === getModelId(selectedModel) : false
-        ) ?? null,
+      options.flatMap((o) => o.options).find((m) => (selectedModel ? m.value === getModelId(selectedModel) : false)) ??
+      null,
     [options, selectedModel]
   );
 
diff --git a/invokeai/frontend/web/src/common/hooks/useImageUploadButton.tsx b/invokeai/frontend/web/src/common/hooks/useImageUploadButton.tsx
index 085c98cb38..011f49ec26 100644
--- a/invokeai/frontend/web/src/common/hooks/useImageUploadButton.tsx
+++ b/invokeai/frontend/web/src/common/hooks/useImageUploadButton.tsx
@@ -28,10 +28,7 @@ type UseImageUploadButtonArgs = {
  * <Button {...getUploadButtonProps()} /> // will open the file dialog on click
  * <input {...getUploadInputProps()} /> // hidden, handles native upload functionality
  */
-export const useImageUploadButton = ({
-  postUploadAction,
-  isDisabled,
-}: UseImageUploadButtonArgs) => {
+export const useImageUploadButton = ({ postUploadAction, isDisabled }: UseImageUploadButtonArgs) => {
   const autoAddBoardId = useAppSelector((s) => s.gallery.autoAddBoardId);
   const [uploadImage] = useUploadImageMutation();
   const onDropAccepted = useCallback(
diff --git a/invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts b/invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts
index 06a4bdec99..4952fa1c47 100644
--- a/invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts
+++ b/invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts
@@ -27,15 +27,7 @@ const selector = createMemoizedSelector(
     selectDynamicPromptsSlice,
     activeTabNameSelector,
   ],
-  (
-    controlAdapters,
-    generation,
-    system,
-    nodes,
-    nodeTemplates,
-    dynamicPrompts,
-    activeTabName
-  ) => {
+  (controlAdapters, generation, system, nodes, nodeTemplates, dynamicPrompts, activeTabName) => {
     const { initialImage, model, positivePrompt } = generation;
 
     const { isConnected } = system;
@@ -75,8 +67,7 @@ const selector = createMemoizedSelector(
           forEach(node.data.inputs, (field) => {
             const fieldTemplate = nodeTemplate.inputs[field.name];
             const hasConnection = connectedEdges.some(
-              (edge) =>
-                edge.target === node.id && edge.targetHandle === field.name
+              (edge) => edge.target === node.id && edge.targetHandle === field.name
             );
 
             if (!fieldTemplate) {
@@ -84,11 +75,7 @@ const selector = createMemoizedSelector(
               return;
             }
 
-            if (
-              fieldTemplate.required &&
-              field.value === undefined &&
-              !hasConnection
-            ) {
+            if (fieldTemplate.required && field.value === undefined && !hasConnection) {
               reasons.push(
                 i18n.t('parameters.invoke.missingInputForField', {
                   nodeLabel: node.data.label || nodeTemplate.title,
@@ -101,10 +88,7 @@ const selector = createMemoizedSelector(
         });
       }
     } else {
-      if (
-        dynamicPrompts.prompts.length === 0 &&
-        getShouldProcessPrompt(positivePrompt)
-      ) {
+      if (dynamicPrompts.prompts.length === 0 && getShouldProcessPrompt(positivePrompt)) {
         reasons.push(i18n.t('parameters.invoke.noPrompts'));
       }
 
@@ -134,9 +118,7 @@ const selector = createMemoizedSelector(
 
         if (
           !ca.controlImage ||
-          (isControlNetOrT2IAdapter(ca) &&
-            !ca.processedControlImage &&
-            ca.processorType !== 'none')
+          (isControlNetOrT2IAdapter(ca) && !ca.processedControlImage && ca.processorType !== 'none')
         ) {
           reasons.push(
             i18n.t('parameters.invoke.noControlImageForControlAdapter', {
diff --git a/invokeai/frontend/web/src/common/hooks/useModelCombobox.ts b/invokeai/frontend/web/src/common/hooks/useModelCombobox.ts
index 6d2957aca9..880b316379 100644
--- a/invokeai/frontend/web/src/common/hooks/useModelCombobox.ts
+++ b/invokeai/frontend/web/src/common/hooks/useModelCombobox.ts
@@ -27,14 +27,7 @@ export const useModelCombobox = <T extends AnyModelConfigEntity>(
   arg: UseModelComboboxArg<T>
 ): UseModelComboboxReturn => {
   const { t } = useTranslation();
-  const {
-    modelEntities,
-    selectedModel,
-    getIsDisabled,
-    onChange,
-    isLoading,
-    optionsFilter = () => true,
-  } = arg;
+  const { modelEntities, selectedModel, getIsDisabled, onChange, isLoading, optionsFilter = () => true } = arg;
   const options = useMemo<ComboboxOption[]>(() => {
     if (!modelEntities) {
       return [];
@@ -49,10 +42,7 @@ export const useModelCombobox = <T extends AnyModelConfigEntity>(
   }, [optionsFilter, getIsDisabled, modelEntities]);
 
   const value = useMemo(
-    () =>
-      options.find((m) =>
-        selectedModel ? m.value === getModelId(selectedModel) : false
-      ),
+    () => options.find((m) => (selectedModel ? m.value === getModelId(selectedModel) : false)),
     [options, selectedModel]
   );
 
diff --git a/invokeai/frontend/web/src/common/util/arrayBuffer.ts b/invokeai/frontend/web/src/common/util/arrayBuffer.ts
index cdfe84fccc..a21c9d8a47 100644
--- a/invokeai/frontend/web/src/common/util/arrayBuffer.ts
+++ b/invokeai/frontend/web/src/common/util/arrayBuffer.ts
@@ -20,12 +20,7 @@ export const areAnyPixelsBlack = (pixels: Uint8ClampedArray) => {
   const len = pixels.length;
   let i = 0;
   for (i; i < len; ) {
-    if (
-      pixels[i++] === 0 &&
-      pixels[i++] === 0 &&
-      pixels[i++] === 0 &&
-      pixels[i++] === 255
-    ) {
+    if (pixels[i++] === 0 && pixels[i++] === 0 && pixels[i++] === 0 && pixels[i++] === 255) {
       return true;
     }
   }
diff --git a/invokeai/frontend/web/src/common/util/colorTokenToCssVar.ts b/invokeai/frontend/web/src/common/util/colorTokenToCssVar.ts
index 2a7364aed7..0e7cce3cdf 100644
--- a/invokeai/frontend/web/src/common/util/colorTokenToCssVar.ts
+++ b/invokeai/frontend/web/src/common/util/colorTokenToCssVar.ts
@@ -1,2 +1 @@
-export const colorTokenToCssVar = (colorToken: string) =>
-  `var(--invoke-colors-${colorToken.split('.').join('-')})`;
+export const colorTokenToCssVar = (colorToken: string) => `var(--invoke-colors-${colorToken.split('.').join('-')})`;
diff --git a/invokeai/frontend/web/src/common/util/generateSeeds.ts b/invokeai/frontend/web/src/common/util/generateSeeds.ts
index ae74f80810..588f711148 100644
--- a/invokeai/frontend/web/src/common/util/generateSeeds.ts
+++ b/invokeai/frontend/web/src/common/util/generateSeeds.ts
@@ -8,12 +8,7 @@ export type GenerateSeedsArg = {
   max?: number;
 };
 
-export const generateSeeds = ({
-  count,
-  start,
-  min = NUMPY_RAND_MIN,
-  max = NUMPY_RAND_MAX,
-}: GenerateSeedsArg) => {
+export const generateSeeds = ({ count, start, min = NUMPY_RAND_MIN, max = NUMPY_RAND_MAX }: GenerateSeedsArg) => {
   const first = start ?? random(min, max);
   const seeds: number[] = [];
   for (let i = first; i < first + count; i++) {
@@ -22,7 +17,4 @@ export const generateSeeds = ({
   return seeds;
 };
 
-export const generateOneSeed = (
-  min: number = NUMPY_RAND_MIN,
-  max: number = NUMPY_RAND_MAX
-) => random(min, max);
+export const generateOneSeed = (min: number = NUMPY_RAND_MIN, max: number = NUMPY_RAND_MAX) => random(min, max);
diff --git a/invokeai/frontend/web/src/common/util/roundDownToMultiple.ts b/invokeai/frontend/web/src/common/util/roundDownToMultiple.ts
index c40a40df6f..55915ea7c7 100644
--- a/invokeai/frontend/web/src/common/util/roundDownToMultiple.ts
+++ b/invokeai/frontend/web/src/common/util/roundDownToMultiple.ts
@@ -1,10 +1,7 @@
 export const roundDownToMultiple = (num: number, multiple: number): number => {
   return Math.floor(num / multiple) * multiple;
 };
-export const roundDownToMultipleMin = (
-  num: number,
-  multiple: number
-): number => {
+export const roundDownToMultipleMin = (num: number, multiple: number): number => {
   return Math.max(multiple, Math.floor(num / multiple) * multiple);
 };
 
diff --git a/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx b/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx
index 209ca91479..e49976e532 100644
--- a/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx
@@ -1,8 +1,4 @@
-import {
-  Button,
-  ConfirmationAlertDialog,
-  useDisclosure,
-} from '@invoke-ai/ui-library';
+import { Button, ConfirmationAlertDialog, useDisclosure } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import { clearCanvasHistory } from 'features/canvas/store/canvasSlice';
@@ -15,19 +11,11 @@ const ClearCanvasHistoryButtonModal = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const acceptCallback = useCallback(
-    () => dispatch(clearCanvasHistory()),
-    [dispatch]
-  );
+  const acceptCallback = useCallback(() => dispatch(clearCanvasHistory()), [dispatch]);
 
   return (
     <>
-      <Button
-        onClick={onOpen}
-        size="sm"
-        leftIcon={<PiTrashSimpleFill />}
-        isDisabled={isStaging}
-      >
+      <Button onClick={onOpen} size="sm" leftIcon={<PiTrashSimpleFill />} isDisabled={isStaging}>
         {t('unifiedCanvas.clearCanvasHistory')}
       </Button>
       <ConfirmationAlertDialog
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx
index 06f9399ede..ac9d008e21 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx
@@ -19,10 +19,7 @@ import {
   $tool,
 } from 'features/canvas/store/canvasNanostore';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
-import {
-  canvasResized,
-  selectCanvasSlice,
-} from 'features/canvas/store/canvasSlice';
+import { canvasResized, selectCanvasSlice } from 'features/canvas/store/canvasSlice';
 import type Konva from 'konva';
 import type { KonvaEventObject } from 'konva/lib/Node';
 import type { Vector2d } from 'konva/lib/types';
@@ -55,18 +52,12 @@ const ChakraStage = chakra(Stage, {
 const IAICanvas = () => {
   const isStaging = useAppSelector(isStagingSelector);
   const isMaskEnabled = useAppSelector((s) => s.canvas.isMaskEnabled);
-  const shouldShowBoundingBox = useAppSelector(
-    (s) => s.canvas.shouldShowBoundingBox
-  );
+  const shouldShowBoundingBox = useAppSelector((s) => s.canvas.shouldShowBoundingBox);
   const shouldShowGrid = useAppSelector((s) => s.canvas.shouldShowGrid);
   const stageScale = useAppSelector((s) => s.canvas.stageScale);
-  const shouldShowIntermediates = useAppSelector(
-    (s) => s.canvas.shouldShowIntermediates
-  );
+  const shouldShowIntermediates = useAppSelector((s) => s.canvas.shouldShowIntermediates);
   const shouldAntialias = useAppSelector((s) => s.canvas.shouldAntialias);
-  const shouldRestrictStrokesToBox = useAppSelector(
-    (s) => s.canvas.shouldRestrictStrokesToBox
-  );
+  const shouldRestrictStrokesToBox = useAppSelector((s) => s.canvas.shouldRestrictStrokesToBox);
   const { stageCoordinates, stageDimensions } = useAppSelector(selector);
   const dispatch = useAppDispatch();
   const containerRef = useRef<HTMLDivElement>(null);
@@ -95,22 +86,12 @@ const IAICanvas = () => {
       return 'default';
     }
     return 'none';
-  }, [
-    isMouseOverBoundingBox,
-    isMovingStage,
-    isStaging,
-    isTransformingBoundingBox,
-    shouldRestrictStrokesToBox,
-    tool,
-  ]);
+  }, [isMouseOverBoundingBox, isMovingStage, isStaging, isTransformingBoundingBox, shouldRestrictStrokesToBox, tool]);
 
-  const canvasBaseLayerRefCallback = useCallback(
-    (layerElement: Konva.Layer) => {
-      $canvasBaseLayer.set(layerElement);
-      canvasBaseLayerRef.current = layerElement;
-    },
-    []
-  );
+  const canvasBaseLayerRefCallback = useCallback((layerElement: Konva.Layer) => {
+    $canvasBaseLayer.set(layerElement);
+    canvasBaseLayerRef.current = layerElement;
+  }, []);
 
   const lastCursorPositionRef = useRef<Vector2d>({ x: 0, y: 0 });
 
@@ -120,18 +101,10 @@ const IAICanvas = () => {
   const handleWheel = useCanvasWheel(stageRef);
   const handleMouseDown = useCanvasMouseDown(stageRef);
   const handleMouseUp = useCanvasMouseUp(stageRef, didMouseMoveRef);
-  const handleMouseMove = useCanvasMouseMove(
-    stageRef,
-    didMouseMoveRef,
-    lastCursorPositionRef
-  );
-  const { handleDragStart, handleDragMove, handleDragEnd } =
-    useCanvasDragMove();
+  const handleMouseMove = useCanvasMouseMove(stageRef, didMouseMoveRef, lastCursorPositionRef);
+  const { handleDragStart, handleDragMove, handleDragEnd } = useCanvasDragMove();
   const handleMouseOut = useCanvasMouseOut();
-  const handleContextMenu = useCallback(
-    (e: KonvaEventObject<MouseEvent>) => e.evt.preventDefault(),
-    []
-  );
+  const handleContextMenu = useCallback((e: KonvaEventObject<MouseEvent>) => e.evt.preventDefault(), []);
 
   useEffect(() => {
     if (!containerRef.current) {
@@ -169,14 +142,7 @@ const IAICanvas = () => {
   const scale = useMemo(() => ({ x: stageScale, y: stageScale }), [stageScale]);
 
   return (
-    <Flex
-      id="canvas-container"
-      ref={containerRef}
-      position="relative"
-      height="100%"
-      width="100%"
-      borderRadius="base"
-    >
+    <Flex id="canvas-container" ref={containerRef} position="relative" height="100%" width="100%" borderRadius="base">
       <Box position="absolute">
         <ChakraStage
           tabIndex={-1}
@@ -205,19 +171,10 @@ const IAICanvas = () => {
             <IAICanvasGrid />
           </Layer>
 
-          <Layer
-            id="base"
-            ref={canvasBaseLayerRefCallback}
-            listening={false}
-            imageSmoothingEnabled={shouldAntialias}
-          >
+          <Layer id="base" ref={canvasBaseLayerRefCallback} listening={false} imageSmoothingEnabled={shouldAntialias}>
             <IAICanvasObjectRenderer />
           </Layer>
-          <Layer
-            id="mask"
-            visible={isMaskEnabled && !isStaging}
-            listening={false}
-          >
+          <Layer id="mask" visible={isMaskEnabled && !isStaging} listening={false}>
             <IAICanvasMaskLines visible={true} listening={false} />
             <IAICanvasMaskCompositer listening={false} />
           </Layer>
@@ -225,17 +182,10 @@ const IAICanvas = () => {
             <IAICanvasBoundingBoxOverlay />
           </Layer>
           <Layer id="preview" imageSmoothingEnabled={shouldAntialias}>
-            {!isStaging && (
-              <IAICanvasToolPreview
-                visible={tool !== 'move'}
-                listening={false}
-              />
-            )}
+            {!isStaging && <IAICanvasToolPreview visible={tool !== 'move'} listening={false} />}
             <IAICanvasStagingArea listening={false} visible={isStaging} />
             {shouldShowIntermediates && <IAICanvasIntermediateImage />}
-            <IAICanvasBoundingBox
-              visible={shouldShowBoundingBox && !isStaging}
-            />
+            <IAICanvasBoundingBox visible={shouldShowBoundingBox && !isStaging} />
           </Layer>
         </ChakraStage>
       </Box>
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasBoundingBoxOverlay.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasBoundingBoxOverlay.tsx
index 8d364a91ab..3cb75c09c6 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasBoundingBoxOverlay.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasBoundingBoxOverlay.tsx
@@ -5,12 +5,7 @@ import { memo } from 'react';
 import { Group, Rect } from 'react-konva';
 
 const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => {
-  const {
-    boundingBoxCoordinates,
-    boundingBoxDimensions,
-    stageDimensions,
-    stageCoordinates,
-  } = canvas;
+  const { boundingBoxCoordinates, boundingBoxDimensions, stageDimensions, stageCoordinates } = canvas;
 
   return {
     boundingBoxCoordinates,
@@ -21,15 +16,8 @@ const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => {
 });
 
 const IAICanvasBoundingBoxOverlay = () => {
-  const {
-    boundingBoxCoordinates,
-    boundingBoxDimensions,
-    stageCoordinates,
-    stageDimensions,
-  } = useAppSelector(selector);
-  const shouldDarkenOutsideBoundingBox = useAppSelector(
-    (s) => s.canvas.shouldDarkenOutsideBoundingBox
-  );
+  const { boundingBoxCoordinates, boundingBoxDimensions, stageCoordinates, stageDimensions } = useAppSelector(selector);
+  const shouldDarkenOutsideBoundingBox = useAppSelector((s) => s.canvas.shouldDarkenOutsideBoundingBox);
   const stageScale = useAppSelector((s) => s.canvas.stageScale);
 
   return (
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasImage.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasImage.tsx
index 437f1d7d9d..75ae983f23 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasImage.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasImage.tsx
@@ -13,13 +13,8 @@ type IAICanvasImageProps = {
 };
 const IAICanvasImage = (props: IAICanvasImageProps) => {
   const { x, y, imageName } = props.canvasImage;
-  const { currentData: imageDTO, isError } = useGetImageDTOQuery(
-    imageName ?? skipToken
-  );
-  const [image, status] = useImage(
-    imageDTO?.image_url ?? '',
-    $authToken.get() ? 'use-credentials' : 'anonymous'
-  );
+  const { currentData: imageDTO, isError } = useGetImageDTOQuery(imageName ?? skipToken);
+  const [image, status] = useImage(imageDTO?.image_url ?? '', $authToken.get() ? 'use-credentials' : 'anonymous');
 
   if (isError || status === 'failed') {
     return <IAICanvasImageErrorFallback canvasImage={props.canvasImage} />;
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasImageErrorFallback.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasImageErrorFallback.tsx
index 55ef24f3e5..1606dfa844 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasImageErrorFallback.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasImageErrorFallback.tsx
@@ -7,9 +7,7 @@ import { Group, Rect, Text } from 'react-konva';
 type IAICanvasImageErrorFallbackProps = {
   canvasImage: CanvasImage;
 };
-const IAICanvasImageErrorFallback = ({
-  canvasImage,
-}: IAICanvasImageErrorFallbackProps) => {
+const IAICanvasImageErrorFallback = ({ canvasImage }: IAICanvasImageErrorFallbackProps) => {
   const [rectFill, textFill] = useToken('colors', ['base.500', 'base.900']);
   const { t } = useTranslation();
   return (
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasIntermediateImage.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasIntermediateImage.tsx
index 966017a814..bd9b93997e 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasIntermediateImage.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasIntermediateImage.tsx
@@ -5,26 +5,20 @@ import { selectSystemSlice } from 'features/system/store/systemSlice';
 import { memo, useEffect, useState } from 'react';
 import { Image as KonvaImage } from 'react-konva';
 
-const progressImageSelector = createMemoizedSelector(
-  [selectSystemSlice, selectCanvasSlice],
-  (system, canvas) => {
-    const { denoiseProgress } = system;
-    const { batchIds } = canvas;
+const progressImageSelector = createMemoizedSelector([selectSystemSlice, selectCanvasSlice], (system, canvas) => {
+  const { denoiseProgress } = system;
+  const { batchIds } = canvas;
 
-    return {
-      progressImage:
-        denoiseProgress && batchIds.includes(denoiseProgress.batch_id)
-          ? denoiseProgress.progress_image
-          : undefined,
-      boundingBox: canvas.layerState.stagingArea.boundingBox,
-    };
-  }
-);
+  return {
+    progressImage:
+      denoiseProgress && batchIds.includes(denoiseProgress.batch_id) ? denoiseProgress.progress_image : undefined,
+    boundingBox: canvas.layerState.stagingArea.boundingBox,
+  };
+});
 
 const IAICanvasIntermediateImage = () => {
   const { progressImage, boundingBox } = useAppSelector(progressImageSelector);
-  const [loadedImageElement, setLoadedImageElement] =
-    useState<HTMLImageElement | null>(null);
+  const [loadedImageElement, setLoadedImageElement] = useState<HTMLImageElement | null>(null);
 
   useEffect(() => {
     if (!progressImage) {
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskCompositer.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskCompositer.tsx
index 1a0aaa62d2..6098d85359 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskCompositer.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskCompositer.tsx
@@ -9,30 +9,22 @@ import { isNumber } from 'lodash-es';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Rect } from 'react-konva';
 
-export const canvasMaskCompositerSelector = createMemoizedSelector(
-  selectCanvasSlice,
-  (canvas) => {
-    return {
-      stageCoordinates: canvas.stageCoordinates,
-      stageDimensions: canvas.stageDimensions,
-    };
-  }
-);
+export const canvasMaskCompositerSelector = createMemoizedSelector(selectCanvasSlice, (canvas) => {
+  return {
+    stageCoordinates: canvas.stageCoordinates,
+    stageDimensions: canvas.stageDimensions,
+  };
+});
 
 type IAICanvasMaskCompositerProps = RectConfig;
 
 const IAICanvasMaskCompositer = (props: IAICanvasMaskCompositerProps) => {
   const { ...rest } = props;
 
-  const { stageCoordinates, stageDimensions } = useAppSelector(
-    canvasMaskCompositerSelector
-  );
+  const { stageCoordinates, stageDimensions } = useAppSelector(canvasMaskCompositerSelector);
   const stageScale = useAppSelector((s) => s.canvas.stageScale);
-  const maskColorString = useAppSelector((s) =>
-    rgbaColorToString(s.canvas.maskColor)
-  );
-  const [fillPatternImage, setFillPatternImage] =
-    useState<HTMLImageElement | null>(null);
+  const maskColorString = useAppSelector((s) => rgbaColorToString(s.canvas.maskColor));
+  const [fillPatternImage, setFillPatternImage] = useState<HTMLImageElement | null>(null);
 
   const [offset, setOffset] = useState<number>(0);
 
@@ -66,10 +58,7 @@ const IAICanvasMaskCompositer = (props: IAICanvasMaskCompositerProps) => {
     return () => clearInterval(timer);
   }, []);
 
-  const fillPatternScale = useMemo(
-    () => ({ x: 1 / stageScale, y: 1 / stageScale }),
-    [stageScale]
-  );
+  const fillPatternScale = useMemo(() => ({ x: 1 / stageScale, y: 1 / stageScale }), [stageScale]);
 
   if (
     !fillPatternImage ||
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskLines.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskLines.tsx
index 5511652e8d..27a733cb5e 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskLines.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskLines.tsx
@@ -27,9 +27,7 @@ const IAICanvasLines = (props: InpaintingCanvasLinesProps) => {
           lineJoin="round"
           shadowForStrokeEnabled={false}
           listening={false}
-          globalCompositeOperation={
-            line.tool === 'brush' ? 'source-over' : 'destination-out'
-          }
+          globalCompositeOperation={line.tool === 'brush' ? 'source-over' : 'destination-out'}
         />
       ))}
     </Group>
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasObjectRenderer.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasObjectRenderer.tsx
index bc089fe28a..23005a9d24 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasObjectRenderer.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasObjectRenderer.tsx
@@ -31,9 +31,7 @@ const IAICanvasObjectRenderer = () => {
               lineJoin="round"
               shadowForStrokeEnabled={false}
               listening={false}
-              globalCompositeOperation={
-                obj.tool === 'brush' ? 'source-over' : 'destination-out'
-              }
+              globalCompositeOperation={obj.tool === 'brush' ? 'source-over' : 'destination-out'}
             />
           );
           if (obj.clip) {
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingArea.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingArea.tsx
index 361da7658c..8b9b580e63 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingArea.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingArea.tsx
@@ -22,9 +22,7 @@ const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => {
 
   return {
     currentStagingAreaImage:
-      images.length > 0 && selectedImageIndex !== undefined
-        ? images[selectedImageIndex]
-        : undefined,
+      images.length > 0 && selectedImageIndex !== undefined ? images[selectedImageIndex] : undefined,
     isOnFirstImage: selectedImageIndex === 0,
     isOnLastImage: selectedImageIndex === images.length - 1,
     shouldShowStagingImage,
@@ -39,21 +37,12 @@ const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => {
 type Props = GroupConfig;
 
 const IAICanvasStagingArea = (props: Props) => {
-  const {
-    currentStagingAreaImage,
-    shouldShowStagingImage,
-    shouldShowStagingOutline,
-    x,
-    y,
-    width,
-    height,
-  } = useAppSelector(selector);
+  const { currentStagingAreaImage, shouldShowStagingImage, shouldShowStagingOutline, x, y, width, height } =
+    useAppSelector(selector);
 
   return (
     <Group {...props}>
-      {shouldShowStagingImage && currentStagingAreaImage && (
-        <IAICanvasImage canvasImage={currentStagingAreaImage} />
-      )}
+      {shouldShowStagingImage && currentStagingAreaImage && <IAICanvasImage canvasImage={currentStagingAreaImage} />}
       {shouldShowStagingOutline && (
         <Group listening={false}>
           <Rect
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
index 326426cea8..486372d728 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
@@ -38,8 +38,7 @@ const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => {
   return {
     currentIndex: selectedImageIndex,
     total: images.length,
-    currentStagingAreaImage:
-      images.length > 0 ? images[selectedImageIndex] : undefined,
+    currentStagingAreaImage: images.length > 0 ? images[selectedImageIndex] : undefined,
     shouldShowStagingImage,
     shouldShowStagingOutline,
   };
@@ -47,12 +46,7 @@ const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => {
 
 const IAICanvasStagingAreaToolbar = () => {
   const dispatch = useAppDispatch();
-  const {
-    currentStagingAreaImage,
-    shouldShowStagingImage,
-    currentIndex,
-    total,
-  } = useAppSelector(selector);
+  const { currentStagingAreaImage, shouldShowStagingImage, currentIndex, total } = useAppSelector(selector);
 
   const { t } = useTranslation();
 
@@ -64,20 +58,11 @@ const IAICanvasStagingAreaToolbar = () => {
     dispatch(setShouldShowStagingOutline(false));
   }, [dispatch]);
 
-  const handlePrevImage = useCallback(
-    () => dispatch(prevStagingAreaImage()),
-    [dispatch]
-  );
+  const handlePrevImage = useCallback(() => dispatch(prevStagingAreaImage()), [dispatch]);
 
-  const handleNextImage = useCallback(
-    () => dispatch(nextStagingAreaImage()),
-    [dispatch]
-  );
+  const handleNextImage = useCallback(() => dispatch(nextStagingAreaImage()), [dispatch]);
 
-  const handleAccept = useCallback(
-    () => dispatch(commitStagingAreaImage()),
-    [dispatch]
-  );
+  const handleAccept = useCallback(() => dispatch(commitStagingAreaImage()), [dispatch]);
 
   useHotkeys(['left'], handlePrevImage, {
     enabled: () => true,
@@ -94,9 +79,7 @@ const IAICanvasStagingAreaToolbar = () => {
     preventDefault: true,
   });
 
-  const { data: imageDTO } = useGetImageDTOQuery(
-    currentStagingAreaImage?.imageName ?? skipToken
-  );
+  const { data: imageDTO } = useGetImageDTOQuery(currentStagingAreaImage?.imageName ?? skipToken);
 
   const handleToggleShouldShowStagingImage = useCallback(() => {
     dispatch(setShouldShowStagingImage(!shouldShowStagingImage));
@@ -166,16 +149,8 @@ const IAICanvasStagingAreaToolbar = () => {
           colorScheme="invokeBlue"
         />
         <IconButton
-          tooltip={
-            shouldShowStagingImage
-              ? t('unifiedCanvas.showResultsOn')
-              : t('unifiedCanvas.showResultsOff')
-          }
-          aria-label={
-            shouldShowStagingImage
-              ? t('unifiedCanvas.showResultsOn')
-              : t('unifiedCanvas.showResultsOff')
-          }
+          tooltip={shouldShowStagingImage ? t('unifiedCanvas.showResultsOn') : t('unifiedCanvas.showResultsOff')}
+          aria-label={shouldShowStagingImage ? t('unifiedCanvas.showResultsOn') : t('unifiedCanvas.showResultsOff')}
           data-alert={!shouldShowStagingImage}
           icon={shouldShowStagingImage ? <PiEyeBold /> : <PiEyeSlashBold />}
           onClick={handleToggleShouldShowStagingImage}
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx
index ff854aef60..4c8153b83f 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx
@@ -16,10 +16,7 @@ const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => {
     stageDimensions: { width: stageWidth, height: stageHeight },
     stageCoordinates: { x: stageX, y: stageY },
     boundingBoxDimensions: { width: boxWidth, height: boxHeight },
-    scaledBoundingBoxDimensions: {
-      width: scaledBoxWidth,
-      height: scaledBoxHeight,
-    },
+    scaledBoundingBoxDimensions: { width: scaledBoxWidth, height: scaledBoxHeight },
     boundingBoxCoordinates: { x: boxX, y: boxY },
     stageScale,
     shouldShowCanvasDebugInfo,
@@ -31,10 +28,8 @@ const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => {
   let boundingBoxColor = 'inherit';
 
   if (
-    (boundingBoxScaleMethod === 'none' &&
-      (boxWidth < 512 || boxHeight < 512)) ||
-    (boundingBoxScaleMethod === 'manual' &&
-      scaledBoxWidth * scaledBoxHeight < 512 * 512)
+    (boundingBoxScaleMethod === 'none' && (boxWidth < 512 || boxHeight < 512)) ||
+    (boundingBoxScaleMethod === 'manual' && scaledBoxWidth * scaledBoxHeight < 512 * 512)
   ) {
     boundingBoxColor = warningColor;
   }
@@ -45,14 +40,10 @@ const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => {
     activeLayerColor,
     layer,
     boundingBoxColor,
-    boundingBoxCoordinatesString: `(${roundToHundreth(boxX)}, ${roundToHundreth(
-      boxY
-    )})`,
+    boundingBoxCoordinatesString: `(${roundToHundreth(boxX)}, ${roundToHundreth(boxY)})`,
     boundingBoxDimensionsString: `${boxWidth}×${boxHeight}`,
     scaledBoundingBoxDimensionsString: `${scaledBoxWidth}×${scaledBoxHeight}`,
-    canvasCoordinatesString: `${roundToHundreth(stageX)}×${roundToHundreth(
-      stageY
-    )}`,
+    canvasCoordinatesString: `${roundToHundreth(stageX)}×${roundToHundreth(stageY)}`,
     canvasDimensionsString: `${stageWidth}×${stageHeight}`,
     canvasScaleString: Math.round(stageScale * 100),
     shouldShowCanvasDebugInfo,
@@ -99,9 +90,7 @@ const IAICanvasStatusText = () => {
       bg="base.800"
     >
       <GenerationModeStatusText />
-      <Box color={activeLayerColor}>{`${t('unifiedCanvas.activeLayer')}: ${t(
-        `unifiedCanvas.${layer}`
-      )}`}</Box>
+      <Box color={activeLayerColor}>{`${t('unifiedCanvas.activeLayer')}: ${t(`unifiedCanvas.${layer}`)}`}</Box>
       <Box>{`${t('unifiedCanvas.canvasScale')}: ${canvasScaleString}%`}</Box>
       {shouldPreserveMaskedArea && (
         <Box color={warningColor}>
@@ -109,9 +98,7 @@ const IAICanvasStatusText = () => {
         </Box>
       )}
       {shouldShowBoundingBox && (
-        <Box color={boundingBoxColor}>{`${t(
-          'unifiedCanvas.boundingBox'
-        )}: ${boundingBoxDimensionsString}`}</Box>
+        <Box color={boundingBoxColor}>{`${t('unifiedCanvas.boundingBox')}: ${boundingBoxDimensionsString}`}</Box>
       )}
       {shouldShowScaledBoundingBox && (
         <Box color={boundingBoxColor}>{`${t(
@@ -120,15 +107,9 @@ const IAICanvasStatusText = () => {
       )}
       {shouldShowCanvasDebugInfo && (
         <>
-          <Box>{`${t(
-            'unifiedCanvas.boundingBoxPosition'
-          )}: ${boundingBoxCoordinatesString}`}</Box>
-          <Box>{`${t(
-            'unifiedCanvas.canvasDimensions'
-          )}: ${canvasDimensionsString}`}</Box>
-          <Box>{`${t(
-            'unifiedCanvas.canvasPosition'
-          )}: ${canvasCoordinatesString}`}</Box>
+          <Box>{`${t('unifiedCanvas.boundingBoxPosition')}: ${boundingBoxCoordinatesString}`}</Box>
+          <Box>{`${t('unifiedCanvas.canvasDimensions')}: ${canvasDimensionsString}`}</Box>
+          <Box>{`${t('unifiedCanvas.canvasPosition')}: ${canvasCoordinatesString}`}</Box>
           <IAICanvasStatusTextCursorPos />
         </>
       )}
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx
index 6e5afde469..a7e9ecb157 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx
@@ -14,11 +14,7 @@ const IAICanvasStatusTextCursorPos = () => {
     return `(${roundToHundreth(x)}, ${roundToHundreth(y)})`;
   }, [cursorPosition?.x, cursorPosition?.y]);
 
-  return (
-    <Box>{`${t(
-      'unifiedCanvas.cursorPosition'
-    )}: ${cursorCoordinatesString}`}</Box>
-  );
+  return <Box>{`${t('unifiedCanvas.cursorPosition')}: ${cursorCoordinatesString}`}</Box>;
 };
 
 export default memo(IAICanvasStatusTextCursorPos);
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolPreview.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolPreview.tsx
index 97ad0c6073..be1a4c2d4c 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolPreview.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolPreview.tsx
@@ -9,104 +9,84 @@ import {
 } from 'features/canvas/store/canvasNanostore';
 import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
 import { rgbaColorToString } from 'features/canvas/util/colorToString';
-import {
-  COLOR_PICKER_SIZE,
-  COLOR_PICKER_STROKE_RADIUS,
-} from 'features/canvas/util/constants';
+import { COLOR_PICKER_SIZE, COLOR_PICKER_STROKE_RADIUS } from 'features/canvas/util/constants';
 import type { GroupConfig } from 'konva/lib/Group';
 import { memo, useMemo } from 'react';
 import { Circle, Group } from 'react-konva';
 
-const canvasBrushPreviewSelector = createMemoizedSelector(
-  selectCanvasSlice,
-  (canvas) => {
-    const {
-      stageDimensions,
-      boundingBoxCoordinates,
-      boundingBoxDimensions,
-      shouldRestrictStrokesToBox,
-    } = canvas;
+const canvasBrushPreviewSelector = createMemoizedSelector(selectCanvasSlice, (canvas) => {
+  const { stageDimensions, boundingBoxCoordinates, boundingBoxDimensions, shouldRestrictStrokesToBox } = canvas;
 
-    const clip = shouldRestrictStrokesToBox
-      ? {
-          clipX: boundingBoxCoordinates.x,
-          clipY: boundingBoxCoordinates.y,
-          clipWidth: boundingBoxDimensions.width,
-          clipHeight: boundingBoxDimensions.height,
-        }
-      : {};
+  const clip = shouldRestrictStrokesToBox
+    ? {
+        clipX: boundingBoxCoordinates.x,
+        clipY: boundingBoxCoordinates.y,
+        clipWidth: boundingBoxDimensions.width,
+        clipHeight: boundingBoxDimensions.height,
+      }
+    : {};
 
-    // // big brain time; this is the *inverse* of the clip that is needed for shouldRestrictStrokesToBox
-    // // it took some fiddling to work out, so I am leaving it here in case it is needed for something else...
-    // const clipFunc = shouldRestrictStrokesToBox
-    //   ? (ctx: SceneContext) => {
-    //       console.log(
-    //         stageCoordinates.x / stageScale,
-    //         stageCoordinates.y / stageScale,
-    //         stageDimensions.height / stageScale,
-    //         stageDimensions.width / stageScale
-    //       );
-    //       ctx.fillStyle = 'red';
-    //       ctx.rect(
-    //         -stageCoordinates.x / stageScale,
-    //         -stageCoordinates.y / stageScale,
-    //         stageDimensions.width / stageScale,
-    //         stageCoordinates.y / stageScale + boundingBoxCoordinates.y
-    //       );
-    //       ctx.rect(
-    //         -stageCoordinates.x / stageScale,
-    //         boundingBoxCoordinates.y + boundingBoxDimensions.height,
-    //         stageDimensions.width / stageScale,
-    //         stageDimensions.height / stageScale
-    //       );
-    //       ctx.rect(
-    //         -stageCoordinates.x / stageScale,
-    //         -stageCoordinates.y / stageScale,
-    //         stageCoordinates.x / stageScale + boundingBoxCoordinates.x,
-    //         stageDimensions.height / stageScale
-    //       );
-    //       ctx.rect(
-    //         boundingBoxCoordinates.x + boundingBoxDimensions.width,
-    //         -stageCoordinates.y / stageScale,
-    //         stageDimensions.width / stageScale -
-    //           (boundingBoxCoordinates.x + boundingBoxDimensions.width),
-    //         stageDimensions.height / stageScale
-    //       );
-    //     }
-    //   : undefined;
+  // // big brain time; this is the *inverse* of the clip that is needed for shouldRestrictStrokesToBox
+  // // it took some fiddling to work out, so I am leaving it here in case it is needed for something else...
+  // const clipFunc = shouldRestrictStrokesToBox
+  //   ? (ctx: SceneContext) => {
+  //       console.log(
+  //         stageCoordinates.x / stageScale,
+  //         stageCoordinates.y / stageScale,
+  //         stageDimensions.height / stageScale,
+  //         stageDimensions.width / stageScale
+  //       );
+  //       ctx.fillStyle = 'red';
+  //       ctx.rect(
+  //         -stageCoordinates.x / stageScale,
+  //         -stageCoordinates.y / stageScale,
+  //         stageDimensions.width / stageScale,
+  //         stageCoordinates.y / stageScale + boundingBoxCoordinates.y
+  //       );
+  //       ctx.rect(
+  //         -stageCoordinates.x / stageScale,
+  //         boundingBoxCoordinates.y + boundingBoxDimensions.height,
+  //         stageDimensions.width / stageScale,
+  //         stageDimensions.height / stageScale
+  //       );
+  //       ctx.rect(
+  //         -stageCoordinates.x / stageScale,
+  //         -stageCoordinates.y / stageScale,
+  //         stageCoordinates.x / stageScale + boundingBoxCoordinates.x,
+  //         stageDimensions.height / stageScale
+  //       );
+  //       ctx.rect(
+  //         boundingBoxCoordinates.x + boundingBoxDimensions.width,
+  //         -stageCoordinates.y / stageScale,
+  //         stageDimensions.width / stageScale -
+  //           (boundingBoxCoordinates.x + boundingBoxDimensions.width),
+  //         stageDimensions.height / stageScale
+  //       );
+  //     }
+  //   : undefined;
 
-    return {
-      clip,
-      stageDimensions,
-    };
-  }
-);
+  return {
+    clip,
+    stageDimensions,
+  };
+});
 
 /**
  * Draws a black circle around the canvas brush preview.
  */
 const IAICanvasToolPreview = (props: GroupConfig) => {
   const radius = useAppSelector((s) => s.canvas.brushSize / 2);
-  const maskColorString = useAppSelector((s) =>
-    rgbaColorToString({ ...s.canvas.maskColor, a: 0.5 })
-  );
+  const maskColorString = useAppSelector((s) => rgbaColorToString({ ...s.canvas.maskColor, a: 0.5 }));
   const tool = useStore($tool);
   const layer = useAppSelector((s) => s.canvas.layer);
   const dotRadius = useAppSelector((s) => 1.5 / s.canvas.stageScale);
   const strokeWidth = useAppSelector((s) => 1.5 / s.canvas.stageScale);
-  const brushColorString = useAppSelector((s) =>
-    rgbaColorToString(s.canvas.brushColor)
-  );
-  const colorPickerColorString = useAppSelector((s) =>
-    rgbaColorToString(s.canvas.colorPickerColor)
-  );
+  const brushColorString = useAppSelector((s) => rgbaColorToString(s.canvas.brushColor));
+  const colorPickerColorString = useAppSelector((s) => rgbaColorToString(s.canvas.colorPickerColor));
   const colorPickerInnerRadius = useAppSelector(
-    (s) =>
-      (COLOR_PICKER_SIZE - COLOR_PICKER_STROKE_RADIUS + 1) / s.canvas.stageScale
-  );
-  const colorPickerOuterRadius = useAppSelector(
-    (s) => COLOR_PICKER_SIZE / s.canvas.stageScale
+    (s) => (COLOR_PICKER_SIZE - COLOR_PICKER_STROKE_RADIUS + 1) / s.canvas.stageScale
   );
+  const colorPickerOuterRadius = useAppSelector((s) => COLOR_PICKER_SIZE / s.canvas.stageScale);
   const { clip, stageDimensions } = useAppSelector(canvasBrushPreviewSelector);
 
   const cursorPosition = useStore($cursorPosition);
@@ -123,8 +103,7 @@ const IAICanvasToolPreview = (props: GroupConfig) => {
   );
 
   const shouldDrawBrushPreview = useMemo(
-    () =>
-      !(isMovingBoundingBox || isTransformingBoundingBox || !cursorPosition),
+    () => !(isMovingBoundingBox || isTransformingBoundingBox || !cursorPosition),
     [cursorPosition, isMovingBoundingBox, isTransformingBoundingBox]
   );
 
@@ -162,9 +141,7 @@ const IAICanvasToolPreview = (props: GroupConfig) => {
             y={brushY}
             radius={radius}
             fill={layer === 'mask' ? maskColorString : brushColorString}
-            globalCompositeOperation={
-              tool === 'eraser' ? 'destination-out' : 'source-out'
-            }
+            globalCompositeOperation={tool === 'eraser' ? 'destination-out' : 'source-out'}
             listening={false}
           />
           <Circle
@@ -187,20 +164,8 @@ const IAICanvasToolPreview = (props: GroupConfig) => {
           />
         </>
       )}
-      <Circle
-        x={brushX}
-        y={brushY}
-        radius={dotRadius * 2}
-        fill="rgba(255,255,255,0.4)"
-        listening={false}
-      />
-      <Circle
-        x={brushX}
-        y={brushY}
-        radius={dotRadius}
-        fill="rgba(0,0,0,1)"
-        listening={false}
-      />
+      <Circle x={brushX} y={brushY} radius={dotRadius * 2} fill="rgba(255,255,255,0.4)" listening={false} />
+      <Circle x={brushX} y={brushY} radius={dotRadius} fill="rgba(0,0,0,1)" listening={false} />
     </Group>
   );
 };
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx
index 3b64bca952..98ca55351c 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx
@@ -1,11 +1,7 @@
 import { useShiftModifier } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import {
-  roundDownToMultiple,
-  roundDownToMultipleMin,
-  roundToMultiple,
-} from 'common/util/roundDownToMultiple';
+import { roundDownToMultiple, roundDownToMultipleMin, roundToMultiple } from 'common/util/roundDownToMultiple';
 import {
   $isDrawing,
   $isMouseOverBoundingBox,
@@ -20,10 +16,7 @@ import {
   setBoundingBoxDimensions,
   setShouldSnapToGrid,
 } from 'features/canvas/store/canvasSlice';
-import {
-  CANVAS_GRID_SIZE_COARSE,
-  CANVAS_GRID_SIZE_FINE,
-} from 'features/canvas/store/constants';
+import { CANVAS_GRID_SIZE_COARSE, CANVAS_GRID_SIZE_FINE } from 'features/canvas/store/constants';
 import { calculateNewSize } from 'features/parameters/components/ImageSize/calculateNewSize';
 import { selectOptimalDimension } from 'features/parameters/store/generationSlice';
 import type Konva from 'konva';
@@ -41,12 +34,8 @@ type IAICanvasBoundingBoxPreviewProps = GroupConfig;
 const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
   const { ...rest } = props;
   const dispatch = useAppDispatch();
-  const boundingBoxCoordinates = useAppSelector(
-    (s) => s.canvas.boundingBoxCoordinates
-  );
-  const boundingBoxDimensions = useAppSelector(
-    (s) => s.canvas.boundingBoxDimensions
-  );
+  const boundingBoxCoordinates = useAppSelector((s) => s.canvas.boundingBoxCoordinates);
+  const boundingBoxDimensions = useAppSelector((s) => s.canvas.boundingBoxDimensions);
   const stageScale = useAppSelector((s) => s.canvas.stageScale);
   const shouldSnapToGrid = useAppSelector((s) => s.canvas.shouldSnapToGrid);
   const hitStrokeWidth = useAppSelector((s) => 20 / s.canvas.stageScale);
@@ -59,9 +48,7 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
   const isDrawing = useStore($isDrawing);
   const isMovingBoundingBox = useStore($isMovingBoundingBox);
   const isTransformingBoundingBox = useStore($isTransformingBoundingBox);
-  const isMouseOverBoundingBoxOutline = useStore(
-    $isMouseOverBoundingBoxOutline
-  );
+  const isMouseOverBoundingBoxOutline = useStore($isMouseOverBoundingBoxOutline);
 
   useEffect(() => {
     if (!transformerRef.current || !shapeRef.current) {
@@ -71,14 +58,8 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
     transformerRef.current.getLayer()?.batchDraw();
   }, []);
 
-  const gridSize = useMemo(
-    () => (shift ? CANVAS_GRID_SIZE_FINE : CANVAS_GRID_SIZE_COARSE),
-    [shift]
-  );
-  const scaledStep = useMemo(
-    () => gridSize * stageScale,
-    [gridSize, stageScale]
-  );
+  const gridSize = useMemo(() => (shift ? CANVAS_GRID_SIZE_FINE : CANVAS_GRID_SIZE_COARSE), [shift]);
+  const scaledStep = useMemo(() => gridSize * stageScale, [gridSize, stageScale]);
 
   useHotkeys(
     'N',
@@ -143,10 +124,7 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
       const y = Math.round(rect.y());
 
       if (aspectRatio.isLocked) {
-        const newDimensions = calculateNewSize(
-          aspectRatio.value,
-          width * height
-        );
+        const newDimensions = calculateNewSize(aspectRatio.value, width * height);
         dispatch(
           setBoundingBoxDimensions(
             {
@@ -186,14 +164,7 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
       rect.scaleX(1);
       rect.scaleY(1);
     },
-    [
-      aspectRatio.isLocked,
-      aspectRatio.value,
-      dispatch,
-      shouldSnapToGrid,
-      gridSize,
-      optimalDimension,
-    ]
+    [aspectRatio.isLocked, aspectRatio.value, dispatch, shouldSnapToGrid, gridSize, optimalDimension]
   );
 
   const anchorDragBoundFunc = useCallback(
@@ -255,9 +226,7 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
   }, []);
 
   const handleMouseOut = useCallback(() => {
-    !isTransformingBoundingBox &&
-      !isMovingBoundingBox &&
-      $isMouseOverBoundingBoxOutline.set(false);
+    !isTransformingBoundingBox && !isMovingBoundingBox && $isMouseOverBoundingBoxOutline.set(false);
   }, [isMovingBoundingBox, isTransformingBoundingBox]);
 
   const handleMouseEnterBoundingBox = useCallback(() => {
@@ -269,35 +238,18 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
   }, []);
 
   const stroke = useMemo(() => {
-    if (
-      isMouseOverBoundingBoxOutline ||
-      isMovingBoundingBox ||
-      isTransformingBoundingBox
-    ) {
+    if (isMouseOverBoundingBoxOutline || isMovingBoundingBox || isTransformingBoundingBox) {
       return 'rgba(255,255,255,0.5)';
     }
     return 'white';
-  }, [
-    isMouseOverBoundingBoxOutline,
-    isMovingBoundingBox,
-    isTransformingBoundingBox,
-  ]);
+  }, [isMouseOverBoundingBoxOutline, isMovingBoundingBox, isTransformingBoundingBox]);
 
   const strokeWidth = useMemo(() => {
-    if (
-      isMouseOverBoundingBoxOutline ||
-      isMovingBoundingBox ||
-      isTransformingBoundingBox
-    ) {
+    if (isMouseOverBoundingBoxOutline || isMovingBoundingBox || isTransformingBoundingBox) {
       return 6 / stageScale;
     }
     return 1 / stageScale;
-  }, [
-    isMouseOverBoundingBoxOutline,
-    isMovingBoundingBox,
-    isTransformingBoundingBox,
-    stageScale,
-  ]);
+  }, [isMouseOverBoundingBoxOutline, isMovingBoundingBox, isTransformingBoundingBox, stageScale]);
 
   const enabledAnchors = useMemo(() => {
     if (tool !== 'move') {
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx
index 5665fdc4e7..6dacb7c59d 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx
@@ -30,11 +30,7 @@ import { memo, useCallback } from 'react';
 import type { RgbaColor } from 'react-colorful';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
-import {
-  PiExcludeBold,
-  PiFloppyDiskBackFill,
-  PiTrashSimpleFill,
-} from 'react-icons/pi';
+import { PiExcludeBold, PiFloppyDiskBackFill, PiTrashSimpleFill } from 'react-icons/pi';
 
 const formLabelProps: FormLabelProps = {
   flexGrow: 1,
@@ -46,9 +42,7 @@ const IAICanvasMaskOptions = () => {
   const layer = useAppSelector((s) => s.canvas.layer);
   const maskColor = useAppSelector((s) => s.canvas.maskColor);
   const isMaskEnabled = useAppSelector((s) => s.canvas.isMaskEnabled);
-  const shouldPreserveMaskedArea = useAppSelector(
-    (s) => s.canvas.shouldPreserveMaskedArea
-  );
+  const shouldPreserveMaskedArea = useAppSelector((s) => s.canvas.shouldPreserveMaskedArea);
   const isStaging = useAppSelector(isStagingSelector);
 
   useHotkeys(
@@ -134,38 +128,21 @@ const IAICanvasMaskOptions = () => {
             <FormControlGroup formLabelProps={formLabelProps}>
               <FormControl>
                 <FormLabel>{`${t('unifiedCanvas.enableMask')} (H)`}</FormLabel>
-                <Checkbox
-                  isChecked={isMaskEnabled}
-                  onChange={handleToggleEnableMask}
-                />
+                <Checkbox isChecked={isMaskEnabled} onChange={handleToggleEnableMask} />
               </FormControl>
               <FormControl>
                 <FormLabel>{t('unifiedCanvas.preserveMaskedArea')}</FormLabel>
-                <Checkbox
-                  isChecked={shouldPreserveMaskedArea}
-                  onChange={handleChangePreserveMaskedArea}
-                />
+                <Checkbox isChecked={shouldPreserveMaskedArea} onChange={handleChangePreserveMaskedArea} />
               </FormControl>
             </FormControlGroup>
             <Box pt={2} pb={2}>
-              <IAIColorPicker
-                color={maskColor}
-                onChange={handleChangeMaskColor}
-              />
+              <IAIColorPicker color={maskColor} onChange={handleChangeMaskColor} />
             </Box>
             <ButtonGroup isAttached={false}>
-              <Button
-                size="sm"
-                leftIcon={<PiFloppyDiskBackFill />}
-                onClick={handleSaveMask}
-              >
+              <Button size="sm" leftIcon={<PiFloppyDiskBackFill />} onClick={handleSaveMask}>
                 {t('unifiedCanvas.saveMask')}
               </Button>
-              <Button
-                size="sm"
-                leftIcon={<PiTrashSimpleFill />}
-                onClick={handleClearMask}
-              >
+              <Button size="sm" leftIcon={<PiTrashSimpleFill />} onClick={handleClearMask}>
                 {t('unifiedCanvas.clearMask')}
               </Button>
             </ButtonGroup>
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx
index 32badac87b..1d3ccc52f9 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx
@@ -38,23 +38,13 @@ const IAICanvasSettingsButtonPopover = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const shouldAutoSave = useAppSelector((s) => s.canvas.shouldAutoSave);
-  const shouldCropToBoundingBoxOnSave = useAppSelector(
-    (s) => s.canvas.shouldCropToBoundingBoxOnSave
-  );
-  const shouldDarkenOutsideBoundingBox = useAppSelector(
-    (s) => s.canvas.shouldDarkenOutsideBoundingBox
-  );
-  const shouldShowCanvasDebugInfo = useAppSelector(
-    (s) => s.canvas.shouldShowCanvasDebugInfo
-  );
+  const shouldCropToBoundingBoxOnSave = useAppSelector((s) => s.canvas.shouldCropToBoundingBoxOnSave);
+  const shouldDarkenOutsideBoundingBox = useAppSelector((s) => s.canvas.shouldDarkenOutsideBoundingBox);
+  const shouldShowCanvasDebugInfo = useAppSelector((s) => s.canvas.shouldShowCanvasDebugInfo);
   const shouldShowGrid = useAppSelector((s) => s.canvas.shouldShowGrid);
-  const shouldShowIntermediates = useAppSelector(
-    (s) => s.canvas.shouldShowIntermediates
-  );
+  const shouldShowIntermediates = useAppSelector((s) => s.canvas.shouldShowIntermediates);
   const shouldSnapToGrid = useAppSelector((s) => s.canvas.shouldSnapToGrid);
-  const shouldRestrictStrokesToBox = useAppSelector(
-    (s) => s.canvas.shouldRestrictStrokesToBox
-  );
+  const shouldRestrictStrokesToBox = useAppSelector((s) => s.canvas.shouldRestrictStrokesToBox);
   const shouldAntialias = useAppSelector((s) => s.canvas.shouldAntialias);
 
   useHotkeys(
@@ -70,49 +60,40 @@ const IAICanvasSettingsButtonPopover = () => {
   );
 
   const handleChangeShouldSnapToGrid = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) =>
-      dispatch(setShouldSnapToGrid(e.target.checked)),
+    (e: ChangeEvent<HTMLInputElement>) => dispatch(setShouldSnapToGrid(e.target.checked)),
     [dispatch]
   );
 
   const handleChangeShouldShowIntermediates = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) =>
-      dispatch(setShouldShowIntermediates(e.target.checked)),
+    (e: ChangeEvent<HTMLInputElement>) => dispatch(setShouldShowIntermediates(e.target.checked)),
     [dispatch]
   );
   const handleChangeShouldShowGrid = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) =>
-      dispatch(setShouldShowGrid(e.target.checked)),
+    (e: ChangeEvent<HTMLInputElement>) => dispatch(setShouldShowGrid(e.target.checked)),
     [dispatch]
   );
   const handleChangeShouldDarkenOutsideBoundingBox = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) =>
-      dispatch(setShouldDarkenOutsideBoundingBox(e.target.checked)),
+    (e: ChangeEvent<HTMLInputElement>) => dispatch(setShouldDarkenOutsideBoundingBox(e.target.checked)),
     [dispatch]
   );
   const handleChangeShouldAutoSave = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) =>
-      dispatch(setShouldAutoSave(e.target.checked)),
+    (e: ChangeEvent<HTMLInputElement>) => dispatch(setShouldAutoSave(e.target.checked)),
     [dispatch]
   );
   const handleChangeShouldCropToBoundingBoxOnSave = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) =>
-      dispatch(setShouldCropToBoundingBoxOnSave(e.target.checked)),
+    (e: ChangeEvent<HTMLInputElement>) => dispatch(setShouldCropToBoundingBoxOnSave(e.target.checked)),
     [dispatch]
   );
   const handleChangeShouldRestrictStrokesToBox = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) =>
-      dispatch(setShouldRestrictStrokesToBox(e.target.checked)),
+    (e: ChangeEvent<HTMLInputElement>) => dispatch(setShouldRestrictStrokesToBox(e.target.checked)),
     [dispatch]
   );
   const handleChangeShouldShowCanvasDebugInfo = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) =>
-      dispatch(setShouldShowCanvasDebugInfo(e.target.checked)),
+    (e: ChangeEvent<HTMLInputElement>) => dispatch(setShouldShowCanvasDebugInfo(e.target.checked)),
     [dispatch]
   );
   const handleChangeShouldAntialias = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) =>
-      dispatch(setShouldAntialias(e.target.checked)),
+    (e: ChangeEvent<HTMLInputElement>) => dispatch(setShouldAntialias(e.target.checked)),
     [dispatch]
   );
 
@@ -131,29 +112,18 @@ const IAICanvasSettingsButtonPopover = () => {
             <FormControlGroup formLabelProps={formLabelProps}>
               <FormControl>
                 <FormLabel>{t('unifiedCanvas.showIntermediates')}</FormLabel>
-                <Checkbox
-                  isChecked={shouldShowIntermediates}
-                  onChange={handleChangeShouldShowIntermediates}
-                />
+                <Checkbox isChecked={shouldShowIntermediates} onChange={handleChangeShouldShowIntermediates} />
               </FormControl>
               <FormControl>
                 <FormLabel>{t('unifiedCanvas.showGrid')}</FormLabel>
-                <Checkbox
-                  isChecked={shouldShowGrid}
-                  onChange={handleChangeShouldShowGrid}
-                />
+                <Checkbox isChecked={shouldShowGrid} onChange={handleChangeShouldShowGrid} />
               </FormControl>
               <FormControl>
                 <FormLabel>{t('unifiedCanvas.snapToGrid')}</FormLabel>
-                <Checkbox
-                  isChecked={shouldSnapToGrid}
-                  onChange={handleChangeShouldSnapToGrid}
-                />
+                <Checkbox isChecked={shouldSnapToGrid} onChange={handleChangeShouldSnapToGrid} />
               </FormControl>
               <FormControl>
-                <FormLabel>
-                  {t('unifiedCanvas.darkenOutsideSelection')}
-                </FormLabel>
+                <FormLabel>{t('unifiedCanvas.darkenOutsideSelection')}</FormLabel>
                 <Checkbox
                   isChecked={shouldDarkenOutsideBoundingBox}
                   onChange={handleChangeShouldDarkenOutsideBoundingBox}
@@ -161,10 +131,7 @@ const IAICanvasSettingsButtonPopover = () => {
               </FormControl>
               <FormControl>
                 <FormLabel>{t('unifiedCanvas.autoSaveToGallery')}</FormLabel>
-                <Checkbox
-                  isChecked={shouldAutoSave}
-                  onChange={handleChangeShouldAutoSave}
-                />
+                <Checkbox isChecked={shouldAutoSave} onChange={handleChangeShouldAutoSave} />
               </FormControl>
               <FormControl>
                 <FormLabel>{t('unifiedCanvas.saveBoxRegionOnly')}</FormLabel>
@@ -175,24 +142,15 @@ const IAICanvasSettingsButtonPopover = () => {
               </FormControl>
               <FormControl>
                 <FormLabel>{t('unifiedCanvas.limitStrokesToBox')}</FormLabel>
-                <Checkbox
-                  isChecked={shouldRestrictStrokesToBox}
-                  onChange={handleChangeShouldRestrictStrokesToBox}
-                />
+                <Checkbox isChecked={shouldRestrictStrokesToBox} onChange={handleChangeShouldRestrictStrokesToBox} />
               </FormControl>
               <FormControl>
                 <FormLabel>{t('unifiedCanvas.showCanvasDebugInfo')}</FormLabel>
-                <Checkbox
-                  isChecked={shouldShowCanvasDebugInfo}
-                  onChange={handleChangeShouldShowCanvasDebugInfo}
-                />
+                <Checkbox isChecked={shouldShowCanvasDebugInfo} onChange={handleChangeShouldShowCanvasDebugInfo} />
               </FormControl>
               <FormControl>
                 <FormLabel>{t('unifiedCanvas.antialiasing')}</FormLabel>
-                <Checkbox
-                  isChecked={shouldAntialias}
-                  onChange={handleChangeShouldAntialias}
-                />
+                <Checkbox isChecked={shouldAntialias} onChange={handleChangeShouldAntialias} />
               </FormControl>
             </FormControlGroup>
             <ClearCanvasHistoryButtonModal />
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx
index 9eb4a3cc65..697434739e 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx
@@ -15,17 +15,9 @@ import {
 import { useStore } from '@nanostores/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIColorPicker from 'common/components/IAIColorPicker';
-import {
-  $tool,
-  resetToolInteractionState,
-} from 'features/canvas/store/canvasNanostore';
+import { $tool, resetToolInteractionState } from 'features/canvas/store/canvasNanostore';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
-import {
-  addEraseRect,
-  addFillRect,
-  setBrushColor,
-  setBrushSize,
-} from 'features/canvas/store/canvasSlice';
+import { addEraseRect, addFillRect, setBrushColor, setBrushSize } from 'features/canvas/store/canvasSlice';
 import { clamp } from 'lodash-es';
 import { memo, useCallback } from 'react';
 import type { RgbaColor } from 'react-colorful';
@@ -275,11 +267,7 @@ const IAICanvasToolChooserOptions = () => {
                 </FormControl>
               </Flex>
               <Box w="full" pt={2} pb={2}>
-                <IAIColorPicker
-                  color={brushColor}
-                  onChange={handleChangeBrushColor}
-                  withNumberInput
-                />
+                <IAIColorPicker color={brushColor} onChange={handleChangeBrushColor} withNumberInput />
               </Box>
             </Flex>
           </PopoverBody>
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
index 3d764c50d7..65a46d580a 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
@@ -1,12 +1,5 @@
 import type { ComboboxOnChange } from '@invoke-ai/ui-library';
-import {
-  ButtonGroup,
-  Combobox,
-  Flex,
-  FormControl,
-  IconButton,
-  Tooltip,
-} from '@invoke-ai/ui-library';
+import { ButtonGroup, Combobox, Flex, FormControl, IconButton, Tooltip } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useCopyImageToClipboard } from 'common/hooks/useCopyImageToClipboard';
@@ -20,12 +13,7 @@ import {
 } from 'features/canvas/store/actions';
 import { $canvasBaseLayer, $tool } from 'features/canvas/store/canvasNanostore';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
-import {
-  resetCanvas,
-  resetCanvasView,
-  setIsMaskEnabled,
-  setLayer,
-} from 'features/canvas/store/canvasSlice';
+import { resetCanvas, resetCanvasView, setIsMaskEnabled, setLayer } from 'features/canvas/store/canvasSlice';
 import type { CanvasLayer } from 'features/canvas/store/canvasTypes';
 import { LAYER_NAMES_DICT } from 'features/canvas/store/canvasTypes';
 import { memo, useCallback, useMemo } from 'react';
@@ -203,20 +191,13 @@ const IAICanvasToolbar = () => {
     [dispatch, isMaskEnabled]
   );
 
-  const value = useMemo(
-    () => LAYER_NAMES_DICT.filter((o) => o.value === layer)[0],
-    [layer]
-  );
+  const value = useMemo(() => LAYER_NAMES_DICT.filter((o) => o.value === layer)[0], [layer]);
 
   return (
     <Flex alignItems="center" gap={2} flexWrap="wrap">
       <Tooltip label={`${t('unifiedCanvas.layer')} (Q)`}>
         <FormControl isDisabled={isStaging} w="5rem">
-          <Combobox
-            value={value}
-            options={LAYER_NAMES_DICT}
-            onChange={handleChangeLayer}
-          />
+          <Combobox value={value} options={LAYER_NAMES_DICT} onChange={handleChangeLayer} />
         </FormControl>
       </Tooltip>
 
diff --git a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasDragMove.ts b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasDragMove.ts
index 8f777ca39b..d47b1c6ccd 100644
--- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasDragMove.ts
+++ b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasDragMove.ts
@@ -1,9 +1,5 @@
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import {
-  $isMovingBoundingBox,
-  $isMovingStage,
-  $tool,
-} from 'features/canvas/store/canvasNanostore';
+import { $isMovingBoundingBox, $isMovingStage, $tool } from 'features/canvas/store/canvasNanostore';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import { setStageCoordinates } from 'features/canvas/store/canvasSlice';
 import type { KonvaEventObject } from 'konva/lib/Node';
@@ -13,9 +9,7 @@ const useCanvasDrag = () => {
   const dispatch = useAppDispatch();
   const isStaging = useAppSelector(isStagingSelector);
   const handleDragStart = useCallback(() => {
-    if (
-      !(($tool.get() === 'move' || isStaging) && !$isMovingBoundingBox.get())
-    ) {
+    if (!(($tool.get() === 'move' || isStaging) && !$isMovingBoundingBox.get())) {
       return;
     }
     $isMovingStage.set(true);
@@ -36,9 +30,7 @@ const useCanvasDrag = () => {
   );
 
   const handleDragEnd = useCallback(() => {
-    if (
-      !(($tool.get() === 'move' || isStaging) && !$isMovingBoundingBox.get())
-    ) {
+    if (!(($tool.get() === 'move' || isStaging) && !$isMovingBoundingBox.get())) {
       return;
     }
     $isMovingStage.set(false);
diff --git a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasGenerationMode.ts b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasGenerationMode.ts
index a7d6a173ad..45852cd1bc 100644
--- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasGenerationMode.ts
+++ b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasGenerationMode.ts
@@ -8,30 +8,16 @@ import { useDebounce } from 'react-use';
 export const useCanvasGenerationMode = () => {
   const layerState = useAppSelector((s) => s.canvas.layerState);
 
-  const boundingBoxCoordinates = useAppSelector(
-    (s) => s.canvas.boundingBoxCoordinates
-  );
-  const boundingBoxDimensions = useAppSelector(
-    (s) => s.canvas.boundingBoxDimensions
-  );
+  const boundingBoxCoordinates = useAppSelector((s) => s.canvas.boundingBoxCoordinates);
+  const boundingBoxDimensions = useAppSelector((s) => s.canvas.boundingBoxDimensions);
   const isMaskEnabled = useAppSelector((s) => s.canvas.isMaskEnabled);
 
-  const shouldPreserveMaskedArea = useAppSelector(
-    (s) => s.canvas.shouldPreserveMaskedArea
-  );
-  const [generationMode, setGenerationMode] = useState<
-    GenerationMode | undefined
-  >();
+  const shouldPreserveMaskedArea = useAppSelector((s) => s.canvas.shouldPreserveMaskedArea);
+  const [generationMode, setGenerationMode] = useState<GenerationMode | undefined>();
 
   useEffect(() => {
     setGenerationMode(undefined);
-  }, [
-    layerState,
-    boundingBoxCoordinates,
-    boundingBoxDimensions,
-    isMaskEnabled,
-    shouldPreserveMaskedArea,
-  ]);
+  }, [layerState, boundingBoxCoordinates, boundingBoxDimensions, isMaskEnabled, shouldPreserveMaskedArea]);
 
   useDebounce(
     async () => {
@@ -51,21 +37,12 @@ export const useCanvasGenerationMode = () => {
       const { baseImageData, maskImageData } = canvasBlobsAndImageData;
 
       // Determine the generation mode
-      const generationMode = getCanvasGenerationMode(
-        baseImageData,
-        maskImageData
-      );
+      const generationMode = getCanvasGenerationMode(baseImageData, maskImageData);
 
       setGenerationMode(generationMode);
     },
     1000,
-    [
-      layerState,
-      boundingBoxCoordinates,
-      boundingBoxDimensions,
-      isMaskEnabled,
-      shouldPreserveMaskedArea,
-    ]
+    [layerState, boundingBoxCoordinates, boundingBoxDimensions, isMaskEnabled, shouldPreserveMaskedArea]
   );
 
   return generationMode;
diff --git a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts
index ed7434898e..05ed0d7119 100644
--- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts
+++ b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts
@@ -22,9 +22,7 @@ import { useHotkeys } from 'react-hotkeys-hook';
 const useInpaintingCanvasHotkeys = () => {
   const dispatch = useAppDispatch();
   const activeTabName = useAppSelector(activeTabNameSelector);
-  const shouldShowBoundingBox = useAppSelector(
-    (s) => s.canvas.shouldShowBoundingBox
-  );
+  const shouldShowBoundingBox = useAppSelector((s) => s.canvas.shouldShowBoundingBox);
   const isStaging = useAppSelector(isStagingSelector);
   const isMaskEnabled = useAppSelector((s) => s.canvas.isMaskEnabled);
   const shouldSnapToGrid = useAppSelector((s) => s.canvas.shouldSnapToGrid);
@@ -44,8 +42,7 @@ const useInpaintingCanvasHotkeys = () => {
     []
   );
 
-  const handleToggleEnableMask = () =>
-    dispatch(setIsMaskEnabled(!isMaskEnabled));
+  const handleToggleEnableMask = () => dispatch(setIsMaskEnabled(!isMaskEnabled));
 
   useHotkeys(
     ['h'],
diff --git a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseDown.ts b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseDown.ts
index a208c17378..b392b72e3f 100644
--- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseDown.ts
+++ b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseDown.ts
@@ -1,9 +1,5 @@
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import {
-  $isDrawing,
-  $isMovingStage,
-  $tool,
-} from 'features/canvas/store/canvasNanostore';
+import { $isDrawing, $isMovingStage, $tool } from 'features/canvas/store/canvasNanostore';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import { addLine } from 'features/canvas/store/canvasSlice';
 import getScaledCursorPosition from 'features/canvas/util/getScaledCursorPosition';
diff --git a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseMove.ts b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseMove.ts
index 3bf0953967..6d0a97031b 100644
--- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseMove.ts
+++ b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseMove.ts
@@ -1,9 +1,5 @@
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import {
-  $cursorPosition,
-  $isDrawing,
-  $tool,
-} from 'features/canvas/store/canvasNanostore';
+import { $cursorPosition, $isDrawing, $tool } from 'features/canvas/store/canvasNanostore';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import { addPointToCurrentLine } from 'features/canvas/store/canvasSlice';
 import getScaledCursorPosition from 'features/canvas/util/getScaledCursorPosition';
@@ -49,17 +45,8 @@ const useCanvasMouseMove = (
     }
 
     didMouseMoveRef.current = true;
-    dispatch(
-      addPointToCurrentLine([scaledCursorPosition.x, scaledCursorPosition.y])
-    );
-  }, [
-    didMouseMoveRef,
-    dispatch,
-    isStaging,
-    lastCursorPositionRef,
-    stageRef,
-    updateColorUnderCursor,
-  ]);
+    dispatch(addPointToCurrentLine([scaledCursorPosition.x, scaledCursorPosition.y]));
+  }, [didMouseMoveRef, dispatch, isStaging, lastCursorPositionRef, stageRef, updateColorUnderCursor]);
 };
 
 export default useCanvasMouseMove;
diff --git a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseUp.ts b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseUp.ts
index 9c6b4c6186..e3c291f1e1 100644
--- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseUp.ts
+++ b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseUp.ts
@@ -1,10 +1,6 @@
 import { useStore } from '@nanostores/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import {
-  $isDrawing,
-  $isMovingStage,
-  $tool,
-} from 'features/canvas/store/canvasNanostore';
+import { $isDrawing, $isMovingStage, $tool } from 'features/canvas/store/canvasNanostore';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import { addPointToCurrentLine } from 'features/canvas/store/canvasSlice';
 import getScaledCursorPosition from 'features/canvas/util/getScaledCursorPosition';
@@ -39,9 +35,7 @@ const useCanvasMouseUp = (
        * the line's existing points. This allows the line to render as a circle
        * centered on that point.
        */
-      dispatch(
-        addPointToCurrentLine([scaledCursorPosition.x, scaledCursorPosition.y])
-      );
+      dispatch(addPointToCurrentLine([scaledCursorPosition.x, scaledCursorPosition.y]));
     } else {
       didMouseMoveRef.current = false;
     }
diff --git a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasZoom.ts b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasZoom.ts
index 8c1ac9833b..fbcc133f7f 100644
--- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasZoom.ts
+++ b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasZoom.ts
@@ -1,15 +1,8 @@
 import { useStore } from '@nanostores/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { $isMoveStageKeyHeld } from 'features/canvas/store/canvasNanostore';
-import {
-  setStageCoordinates,
-  setStageScale,
-} from 'features/canvas/store/canvasSlice';
-import {
-  CANVAS_SCALE_BY,
-  MAX_CANVAS_SCALE,
-  MIN_CANVAS_SCALE,
-} from 'features/canvas/util/constants';
+import { setStageCoordinates, setStageScale } from 'features/canvas/store/canvasSlice';
+import { CANVAS_SCALE_BY, MAX_CANVAS_SCALE, MIN_CANVAS_SCALE } from 'features/canvas/util/constants';
 import type Konva from 'konva';
 import type { KonvaEventObject } from 'konva/lib/Node';
 import { clamp } from 'lodash-es';
@@ -49,11 +42,7 @@ const useCanvasWheel = (stageRef: MutableRefObject<Konva.Stage | null>) => {
         delta = -delta;
       }
 
-      const newScale = clamp(
-        stageScale * CANVAS_SCALE_BY ** delta,
-        MIN_CANVAS_SCALE,
-        MAX_CANVAS_SCALE
-      );
+      const newScale = clamp(stageScale * CANVAS_SCALE_BY ** delta, MIN_CANVAS_SCALE, MAX_CANVAS_SCALE);
 
       const newCoordinates = {
         x: cursorPos.x - mousePointTo.x * newScale,
diff --git a/invokeai/frontend/web/src/features/canvas/hooks/useColorUnderCursor.ts b/invokeai/frontend/web/src/features/canvas/hooks/useColorUnderCursor.ts
index 913dd3c8f0..f07433a3de 100644
--- a/invokeai/frontend/web/src/features/canvas/hooks/useColorUnderCursor.ts
+++ b/invokeai/frontend/web/src/features/canvas/hooks/useColorUnderCursor.ts
@@ -1,13 +1,6 @@
 import { useAppDispatch } from 'app/store/storeHooks';
-import {
-  $canvasBaseLayer,
-  $canvasStage,
-  $tool,
-} from 'features/canvas/store/canvasNanostore';
-import {
-  commitColorPickerColor,
-  setColorPickerColor,
-} from 'features/canvas/store/canvasSlice';
+import { $canvasBaseLayer, $canvasStage, $tool } from 'features/canvas/store/canvasNanostore';
+import { commitColorPickerColor, setColorPickerColor } from 'features/canvas/store/canvasSlice';
 import Konva from 'konva';
 import { useCallback } from 'react';
 
@@ -31,19 +24,9 @@ const useColorPicker = () => {
 
     const [r, g, b, a] = canvasBaseLayer
       .getContext()
-      .getImageData(
-        position.x * pixelRatio,
-        position.y * pixelRatio,
-        1,
-        1
-      ).data;
+      .getImageData(position.x * pixelRatio, position.y * pixelRatio, 1, 1).data;
 
-    if (
-      r === undefined ||
-      g === undefined ||
-      b === undefined ||
-      a === undefined
-    ) {
+    if (r === undefined || g === undefined || b === undefined || a === undefined) {
       return;
     }
 
diff --git a/invokeai/frontend/web/src/features/canvas/store/actions.ts b/invokeai/frontend/web/src/features/canvas/store/actions.ts
index 058f853192..b6483b7f3a 100644
--- a/invokeai/frontend/web/src/features/canvas/store/actions.ts
+++ b/invokeai/frontend/web/src/features/canvas/store/actions.ts
@@ -3,28 +3,16 @@ import type { ImageDTO } from 'services/api/types';
 
 export const canvasSavedToGallery = createAction('canvas/canvasSavedToGallery');
 
-export const canvasMaskSavedToGallery = createAction(
-  'canvas/canvasMaskSavedToGallery'
-);
+export const canvasMaskSavedToGallery = createAction('canvas/canvasMaskSavedToGallery');
 
-export const canvasCopiedToClipboard = createAction(
-  'canvas/canvasCopiedToClipboard'
-);
+export const canvasCopiedToClipboard = createAction('canvas/canvasCopiedToClipboard');
 
-export const canvasDownloadedAsImage = createAction(
-  'canvas/canvasDownloadedAsImage'
-);
+export const canvasDownloadedAsImage = createAction('canvas/canvasDownloadedAsImage');
 
 export const canvasMerged = createAction('canvas/canvasMerged');
 
-export const stagingAreaImageSaved = createAction<{ imageDTO: ImageDTO }>(
-  'canvas/stagingAreaImageSaved'
-);
+export const stagingAreaImageSaved = createAction<{ imageDTO: ImageDTO }>('canvas/stagingAreaImageSaved');
 
-export const canvasMaskToControlAdapter = createAction<{ id: string }>(
-  'canvas/canvasMaskToControlAdapter'
-);
+export const canvasMaskToControlAdapter = createAction<{ id: string }>('canvas/canvasMaskToControlAdapter');
 
-export const canvasImageToControlAdapter = createAction<{ id: string }>(
-  'canvas/canvasImageToControlAdapter'
-);
+export const canvasImageToControlAdapter = createAction<{ id: string }>('canvas/canvasImageToControlAdapter');
diff --git a/invokeai/frontend/web/src/features/canvas/store/canvasNanostore.ts b/invokeai/frontend/web/src/features/canvas/store/canvasNanostore.ts
index d90f7942e8..81ed62addf 100644
--- a/invokeai/frontend/web/src/features/canvas/store/canvasNanostore.ts
+++ b/invokeai/frontend/web/src/features/canvas/store/canvasNanostore.ts
@@ -16,8 +16,7 @@ export const $isTransformingBoundingBox = atom<boolean>(false);
 export const $isMouseOverBoundingBoxOutline = atom<boolean>(false);
 export const $isModifyingBoundingBox = computed(
   [$isTransformingBoundingBox, $isMovingBoundingBox],
-  (isTransformingBoundingBox, isMovingBoundingBox) =>
-    isTransformingBoundingBox || isMovingBoundingBox
+  (isTransformingBoundingBox, isMovingBoundingBox) => isTransformingBoundingBox || isMovingBoundingBox
 );
 
 export const resetCanvasInteractionState = () => {
diff --git a/invokeai/frontend/web/src/features/canvas/store/canvasSelectors.ts b/invokeai/frontend/web/src/features/canvas/store/canvasSelectors.ts
index 9158e3a137..a337cfaab1 100644
--- a/invokeai/frontend/web/src/features/canvas/store/canvasSelectors.ts
+++ b/invokeai/frontend/web/src/features/canvas/store/canvasSelectors.ts
@@ -6,12 +6,9 @@ import { isCanvasBaseImage } from './canvasTypes';
 
 export const isStagingSelector = createSelector(
   selectCanvasSlice,
-  (canvas) =>
-    canvas.batchIds.length > 0 ||
-    canvas.layerState.stagingArea.images.length > 0
+  (canvas) => canvas.batchIds.length > 0 || canvas.layerState.stagingArea.images.length > 0
 );
 
-export const initialCanvasImageSelector = createMemoizedSelector(
-  selectCanvasSlice,
-  (canvas) => canvas.layerState.objects.find(isCanvasBaseImage)
+export const initialCanvasImageSelector = createMemoizedSelector(selectCanvasSlice, (canvas) =>
+  canvas.layerState.objects.find(isCanvasBaseImage)
 );
diff --git a/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts b/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts
index 16535ad34e..a049c13419 100644
--- a/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts
+++ b/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts
@@ -1,10 +1,7 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 import type { RootState } from 'app/store/store';
-import {
-  roundDownToMultiple,
-  roundToMultiple,
-} from 'common/util/roundDownToMultiple';
+import { roundDownToMultiple, roundToMultiple } from 'common/util/roundDownToMultiple';
 import calculateCoordinates from 'features/canvas/util/calculateCoordinates';
 import calculateScale from 'features/canvas/util/calculateScale';
 import { STAGE_PADDING_PERCENTAGE } from 'features/canvas/util/constants';
@@ -14,10 +11,7 @@ import { initialAspectRatioState } from 'features/parameters/components/ImageSiz
 import type { AspectRatioState } from 'features/parameters/components/ImageSize/types';
 import { modelChanged } from 'features/parameters/store/generationSlice';
 import type { PayloadActionWithOptimalDimension } from 'features/parameters/store/types';
-import {
-  getIsSizeOptimal,
-  getOptimalDimension,
-} from 'features/parameters/util/optimalDimension';
+import { getIsSizeOptimal, getOptimalDimension } from 'features/parameters/util/optimalDimension';
 import type { IRect, Vector2d } from 'konva/lib/types';
 import { clamp, cloneDeep } from 'lodash-es';
 import type { RgbaColor } from 'react-colorful';
@@ -105,10 +99,7 @@ const setBoundingBoxDimensionsReducer = (
   };
   state.boundingBoxDimensions = newDimensions;
   if (state.boundingBoxScaleMethod === 'auto') {
-    const scaledDimensions = getScaledBoundingBoxDimensions(
-      newDimensions,
-      optimalDimension
-    );
+    const scaledDimensions = getScaledBoundingBoxDimensions(newDimensions, optimalDimension);
     state.scaledBoundingBoxDimensions = scaledDimensions;
   }
 };
@@ -131,9 +122,7 @@ export const canvasSlice = createSlice({
     },
     clearMask: (state) => {
       state.pastLayerStates.push(cloneDeep(state.layerState));
-      state.layerState.objects = state.layerState.objects.filter(
-        (obj) => !isCanvasMaskLine(obj)
-      );
+      state.layerState.objects = state.layerState.objects.filter((obj) => !isCanvasMaskLine(obj));
       state.futureLayerStates = [];
       state.shouldPreserveMaskedArea = false;
     },
@@ -157,32 +146,17 @@ export const canvasSlice = createSlice({
         const { stageDimensions } = state;
 
         const newBoundingBoxDimensions = {
-          width: roundDownToMultiple(
-            clamp(width, CANVAS_GRID_SIZE_FINE, optimalDimension),
-            CANVAS_GRID_SIZE_FINE
-          ),
-          height: roundDownToMultiple(
-            clamp(height, CANVAS_GRID_SIZE_FINE, optimalDimension),
-            CANVAS_GRID_SIZE_FINE
-          ),
+          width: roundDownToMultiple(clamp(width, CANVAS_GRID_SIZE_FINE, optimalDimension), CANVAS_GRID_SIZE_FINE),
+          height: roundDownToMultiple(clamp(height, CANVAS_GRID_SIZE_FINE, optimalDimension), CANVAS_GRID_SIZE_FINE),
         };
 
         const newBoundingBoxCoordinates = {
-          x: roundToMultiple(
-            width / 2 - newBoundingBoxDimensions.width / 2,
-            CANVAS_GRID_SIZE_FINE
-          ),
-          y: roundToMultiple(
-            height / 2 - newBoundingBoxDimensions.height / 2,
-            CANVAS_GRID_SIZE_FINE
-          ),
+          x: roundToMultiple(width / 2 - newBoundingBoxDimensions.width / 2, CANVAS_GRID_SIZE_FINE),
+          y: roundToMultiple(height / 2 - newBoundingBoxDimensions.height / 2, CANVAS_GRID_SIZE_FINE),
         };
 
         if (state.boundingBoxScaleMethod === 'auto') {
-          const scaledDimensions = getScaledBoundingBoxDimensions(
-            newBoundingBoxDimensions,
-            optimalDimension
-          );
+          const scaledDimensions = getScaledBoundingBoxDimensions(newBoundingBoxDimensions, optimalDimension);
           state.scaledBoundingBoxDimensions = scaledDimensions;
         }
 
@@ -247,10 +221,7 @@ export const canvasSlice = createSlice({
     setStageScale: (state, action: PayloadAction<number>) => {
       state.stageScale = action.payload;
     },
-    setShouldDarkenOutsideBoundingBox: (
-      state,
-      action: PayloadAction<boolean>
-    ) => {
+    setShouldDarkenOutsideBoundingBox: (state, action: PayloadAction<boolean>) => {
       state.shouldDarkenOutsideBoundingBox = action.payload;
     },
     clearCanvasHistory: (state) => {
@@ -306,8 +277,7 @@ export const canvasSlice = createSlice({
         imageName: image.image_name,
       });
 
-      state.layerState.stagingArea.selectedImageIndex =
-        state.layerState.stagingArea.images.length - 1;
+      state.layerState.stagingArea.selectedImageIndex = state.layerState.stagingArea.images.length - 1;
 
       state.futureLayerStates = [];
     },
@@ -318,9 +288,7 @@ export const canvasSlice = createSlice({
         state.pastLayerStates.shift();
       }
 
-      state.layerState.stagingArea = cloneDeep(
-        cloneDeep(initialLayerState)
-      ).stagingArea;
+      state.layerState.stagingArea = cloneDeep(cloneDeep(initialLayerState)).stagingArea;
 
       state.futureLayerStates = [];
       state.shouldShowStagingOutline = true;
@@ -328,8 +296,7 @@ export const canvasSlice = createSlice({
       state.batchIds = [];
     },
     addFillRect: (state) => {
-      const { boundingBoxCoordinates, boundingBoxDimensions, brushColor } =
-        state;
+      const { boundingBoxCoordinates, boundingBoxDimensions, brushColor } = state;
 
       state.pastLayerStates.push(cloneDeep(state.layerState));
 
@@ -365,12 +332,8 @@ export const canvasSlice = createSlice({
 
       state.futureLayerStates = [];
     },
-    addLine: (
-      state,
-      action: PayloadAction<{ points: number[]; tool: CanvasTool }>
-    ) => {
-      const { layer, brushColor, brushSize, shouldRestrictStrokesToBox } =
-        state;
+    addLine: (state, action: PayloadAction<{ points: number[]; tool: CanvasTool }>) => {
+      const { layer, brushColor, brushSize, shouldRestrictStrokesToBox } = state;
       const { points, tool } = action.payload;
 
       if (tool === 'move' || tool === 'colorPicker') {
@@ -380,8 +343,7 @@ export const canvasSlice = createSlice({
       const newStrokeWidth = brushSize / 2;
 
       // set & then spread this to only conditionally add the "color" key
-      const newColor =
-        layer === 'base' && tool === 'brush' ? { color: brushColor } : {};
+      const newColor = layer === 'base' && tool === 'brush' ? { color: brushColor } : {};
 
       state.pastLayerStates.push(cloneDeep(state.layerState));
 
@@ -488,10 +450,7 @@ export const canvasSlice = createSlice({
         1
       );
     },
-    canvasResized: (
-      state,
-      action: PayloadAction<{ width: number; height: number }>
-    ) => {
+    canvasResized: (state, action: PayloadAction<{ width: number; height: number }>) => {
       state.stageDimensions = {
         width: Math.floor(action.payload.width),
         height: Math.floor(action.payload.height),
@@ -540,8 +499,7 @@ export const canvasSlice = createSlice({
       const nextIndex = state.layerState.stagingArea.selectedImageIndex + 1;
       const lastIndex = state.layerState.stagingArea.images.length - 1;
 
-      state.layerState.stagingArea.selectedImageIndex =
-        nextIndex > lastIndex ? 0 : nextIndex;
+      state.layerState.stagingArea.selectedImageIndex = nextIndex > lastIndex ? 0 : nextIndex;
     },
     prevStagingAreaImage: (state) => {
       if (!state.layerState.stagingArea.images.length) {
@@ -551,8 +509,7 @@ export const canvasSlice = createSlice({
       const prevIndex = state.layerState.stagingArea.selectedImageIndex - 1;
       const lastIndex = state.layerState.stagingArea.images.length - 1;
 
-      state.layerState.stagingArea.selectedImageIndex =
-        prevIndex < 0 ? lastIndex : prevIndex;
+      state.layerState.stagingArea.selectedImageIndex = prevIndex < 0 ? lastIndex : prevIndex;
     },
     commitStagingAreaImage: (state) => {
       if (!state.layerState.stagingArea.images.length) {
@@ -582,19 +539,13 @@ export const canvasSlice = createSlice({
       state.batchIds = [];
     },
     setBoundingBoxScaleMethod: {
-      reducer: (
-        state,
-        action: PayloadActionWithOptimalDimension<BoundingBoxScaleMethod>
-      ) => {
+      reducer: (state, action: PayloadActionWithOptimalDimension<BoundingBoxScaleMethod>) => {
         const boundingBoxScaleMethod = action.payload;
         const { optimalDimension } = action.meta;
         state.boundingBoxScaleMethod = boundingBoxScaleMethod;
 
         if (boundingBoxScaleMethod === 'auto') {
-          const scaledDimensions = getScaledBoundingBoxDimensions(
-            state.boundingBoxDimensions,
-            optimalDimension
-          );
+          const scaledDimensions = getScaledBoundingBoxDimensions(state.boundingBoxDimensions, optimalDimension);
           state.scaledBoundingBoxDimensions = scaledDimensions;
         }
       },
@@ -605,25 +556,15 @@ export const canvasSlice = createSlice({
         },
       }),
     },
-    setScaledBoundingBoxDimensions: (
-      state,
-      action: PayloadAction<Partial<Dimensions>>
-    ) => {
+    setScaledBoundingBoxDimensions: (state, action: PayloadAction<Partial<Dimensions>>) => {
       state.scaledBoundingBoxDimensions = {
         ...state.scaledBoundingBoxDimensions,
         ...action.payload,
       };
     },
     setBoundingBoxDimensions: {
-      reducer: (
-        state,
-        action: PayloadActionWithOptimalDimension<Partial<Dimensions>>
-      ) => {
-        setBoundingBoxDimensionsReducer(
-          state,
-          action.payload,
-          action.meta.optimalDimension
-        );
+      reducer: (state, action: PayloadActionWithOptimalDimension<Partial<Dimensions>>) => {
+        setBoundingBoxDimensionsReducer(state, action.payload, action.meta.optimalDimension);
       },
       prepare: (payload: Partial<Dimensions>, optimalDimension: number) => ({
         payload,
@@ -660,10 +601,7 @@ export const canvasSlice = createSlice({
     setShouldAntialias: (state, action: PayloadAction<boolean>) => {
       state.shouldAntialias = action.payload;
     },
-    setShouldCropToBoundingBoxOnSave: (
-      state,
-      action: PayloadAction<boolean>
-    ) => {
+    setShouldCropToBoundingBoxOnSave: (state, action: PayloadAction<boolean>) => {
       state.shouldCropToBoundingBoxOnSave = action.payload;
     },
     setColorPickerColor: (state, action: PayloadAction<RgbaColor>) => {
@@ -688,9 +626,7 @@ export const canvasSlice = createSlice({
   },
   extraReducers: (builder) => {
     builder.addCase(modelChanged, (state, action) => {
-      if (
-        action.meta.previousModel?.base_model === action.payload?.base_model
-      ) {
+      if (action.meta.previousModel?.base_model === action.payload?.base_model) {
         // The base model hasn't changed, we don't need to optimize the size
         return;
       }
@@ -716,25 +652,15 @@ export const canvasSlice = createSlice({
       }
 
       if (batch_status.in_progress === 0 && batch_status.pending === 0) {
-        state.batchIds = state.batchIds.filter(
-          (id) => id !== batch_status.batch_id
-        );
+        state.batchIds = state.batchIds.filter((id) => id !== batch_status.batch_id);
       }
     });
-    builder.addMatcher(
-      queueApi.endpoints.clearQueue.matchFulfilled,
-      (state) => {
-        state.batchIds = [];
-      }
-    );
-    builder.addMatcher(
-      queueApi.endpoints.cancelByBatchIds.matchFulfilled,
-      (state, action) => {
-        state.batchIds = state.batchIds.filter(
-          (id) => !action.meta.arg.originalArgs.batch_ids.includes(id)
-        );
-      }
-    );
+    builder.addMatcher(queueApi.endpoints.clearQueue.matchFulfilled, (state) => {
+      state.batchIds = [];
+    });
+    builder.addMatcher(queueApi.endpoints.cancelByBatchIds.matchFulfilled, (state, action) => {
+      state.batchIds = state.batchIds.filter((id) => !action.meta.arg.originalArgs.batch_ids.includes(id));
+    });
   },
 });
 
diff --git a/invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts b/invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts
index 56bca50a77..dc6b764075 100644
--- a/invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts
+++ b/invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts
@@ -14,9 +14,8 @@ export const LAYER_NAMES = ['base', 'mask'] as const;
 
 export const zBoundingBoxScaleMethod = z.enum(['none', 'auto', 'manual']);
 export type BoundingBoxScaleMethod = z.infer<typeof zBoundingBoxScaleMethod>;
-export const isBoundingBoxScaleMethod = (
-  v: unknown
-): v is BoundingBoxScaleMethod => zBoundingBoxScaleMethod.safeParse(v).success;
+export const isBoundingBoxScaleMethod = (v: unknown): v is BoundingBoxScaleMethod =>
+  zBoundingBoxScaleMethod.safeParse(v).success;
 
 export type CanvasDrawingTool = 'brush' | 'eraser';
 
@@ -75,12 +74,7 @@ export type CanvasEraseRect = {
   height: number;
 };
 
-export type CanvasObject =
-  | CanvasImage
-  | CanvasBaseLine
-  | CanvasMaskLine
-  | CanvasFillRect
-  | CanvasEraseRect;
+export type CanvasObject = CanvasImage | CanvasBaseLine | CanvasMaskLine | CanvasFillRect | CanvasEraseRect;
 
 export type CanvasLayerState = {
   objects: CanvasObject[];
@@ -112,9 +106,7 @@ export const isCanvasFillRect = (obj: CanvasObject): obj is CanvasFillRect =>
 export const isCanvasEraseRect = (obj: CanvasObject): obj is CanvasEraseRect =>
   obj.kind === 'eraseRect' && obj.layer === 'base';
 
-export const isCanvasAnyLine = (
-  obj: CanvasObject
-): obj is CanvasMaskLine | CanvasBaseLine => obj.kind === 'line';
+export const isCanvasAnyLine = (obj: CanvasObject): obj is CanvasMaskLine | CanvasBaseLine => obj.kind === 'line';
 
 export interface CanvasState {
   _version: 1;
diff --git a/invokeai/frontend/web/src/features/canvas/util/calculateCoordinates.ts b/invokeai/frontend/web/src/features/canvas/util/calculateCoordinates.ts
index e6c935c95b..fe9c14b2ba 100644
--- a/invokeai/frontend/web/src/features/canvas/util/calculateCoordinates.ts
+++ b/invokeai/frontend/web/src/features/canvas/util/calculateCoordinates.ts
@@ -9,12 +9,8 @@ const calculateCoordinates = (
   contentHeight: number,
   scale: number
 ): Vector2d => {
-  const x = Math.floor(
-    containerWidth / 2 - (containerX + contentWidth / 2) * scale
-  );
-  const y = Math.floor(
-    containerHeight / 2 - (containerY + contentHeight / 2) * scale
-  );
+  const x = Math.floor(containerWidth / 2 - (containerX + contentWidth / 2) * scale);
+  const y = Math.floor(containerHeight / 2 - (containerY + contentHeight / 2) * scale);
   return { x, y };
 };
 
diff --git a/invokeai/frontend/web/src/features/canvas/util/createMaskStage.ts b/invokeai/frontend/web/src/features/canvas/util/createMaskStage.ts
index 4a7ceb5d50..d0a71dee40 100644
--- a/invokeai/frontend/web/src/features/canvas/util/createMaskStage.ts
+++ b/invokeai/frontend/web/src/features/canvas/util/createMaskStage.ts
@@ -44,8 +44,7 @@ const createMaskStage = async (
         lineCap: 'round',
         lineJoin: 'round',
         shadowForStrokeEnabled: false,
-        globalCompositeOperation:
-          line.tool === 'brush' ? 'source-over' : 'destination-out',
+        globalCompositeOperation: line.tool === 'brush' ? 'source-over' : 'destination-out',
       })
     )
   );
diff --git a/invokeai/frontend/web/src/features/canvas/util/dataURLToImageData.ts b/invokeai/frontend/web/src/features/canvas/util/dataURLToImageData.ts
index 739240a79d..d19cbe4612 100644
--- a/invokeai/frontend/web/src/features/canvas/util/dataURLToImageData.ts
+++ b/invokeai/frontend/web/src/features/canvas/util/dataURLToImageData.ts
@@ -1,11 +1,7 @@
 /**
  * Gets an ImageData object from an image dataURL by drawing it to a canvas.
  */
-export const dataURLToImageData = async (
-  dataURL: string,
-  width: number,
-  height: number
-): Promise<ImageData> =>
+export const dataURLToImageData = async (dataURL: string, width: number, height: number): Promise<ImageData> =>
   new Promise((resolve, reject) => {
     const canvas = document.createElement('canvas');
     canvas.width = width;
diff --git a/invokeai/frontend/web/src/features/canvas/util/getBaseLayerBlob.ts b/invokeai/frontend/web/src/features/canvas/util/getBaseLayerBlob.ts
index ac6bed10a7..d37d644008 100644
--- a/invokeai/frontend/web/src/features/canvas/util/getBaseLayerBlob.ts
+++ b/invokeai/frontend/web/src/features/canvas/util/getBaseLayerBlob.ts
@@ -6,21 +6,14 @@ import { konvaNodeToBlob } from './konvaNodeToBlob';
 /**
  * Get the canvas base layer blob, with or without bounding box according to `shouldCropToBoundingBoxOnSave`
  */
-export const getBaseLayerBlob = async (
-  state: RootState,
-  alwaysUseBoundingBox: boolean = false
-) => {
+export const getBaseLayerBlob = async (state: RootState, alwaysUseBoundingBox: boolean = false) => {
   const canvasBaseLayer = $canvasBaseLayer.get();
 
   if (!canvasBaseLayer) {
     throw new Error('Problem getting base layer blob');
   }
 
-  const {
-    shouldCropToBoundingBoxOnSave,
-    boundingBoxCoordinates,
-    boundingBoxDimensions,
-  } = state.canvas;
+  const { shouldCropToBoundingBoxOnSave, boundingBoxCoordinates, boundingBoxDimensions } = state.canvas;
 
   const clonedBaseLayer = canvasBaseLayer.clone();
 
diff --git a/invokeai/frontend/web/src/features/canvas/util/getCanvasData.ts b/invokeai/frontend/web/src/features/canvas/util/getCanvasData.ts
index e521cbe091..d17096cb71 100644
--- a/invokeai/frontend/web/src/features/canvas/util/getCanvasData.ts
+++ b/invokeai/frontend/web/src/features/canvas/util/getCanvasData.ts
@@ -1,12 +1,6 @@
 import { logger } from 'app/logging/logger';
-import {
-  $canvasBaseLayer,
-  $canvasStage,
-} from 'features/canvas/store/canvasNanostore';
-import type {
-  CanvasLayerState,
-  Dimensions,
-} from 'features/canvas/store/canvasTypes';
+import { $canvasBaseLayer, $canvasStage } from 'features/canvas/store/canvasNanostore';
+import type { CanvasLayerState, Dimensions } from 'features/canvas/store/canvasTypes';
 import { isCanvasMaskLine } from 'features/canvas/store/canvasTypes';
 import { konvaNodeToImageData } from 'features/canvas/util/konvaNodeToImageData';
 import type { Vector2d } from 'konva/lib/types';
@@ -57,10 +51,7 @@ export const getCanvasData = async (
 
   // For the base layer, use the offset boundingBox
   const baseBlob = await konvaNodeToBlob(clonedBaseLayer, offsetBoundingBox);
-  const baseImageData = await konvaNodeToImageData(
-    clonedBaseLayer,
-    offsetBoundingBox
-  );
+  const baseImageData = await konvaNodeToImageData(clonedBaseLayer, offsetBoundingBox);
 
   // For the mask layer, use the normal boundingBox
   const maskStage = await createMaskStage(
diff --git a/invokeai/frontend/web/src/features/canvas/util/getCanvasGenerationMode.ts b/invokeai/frontend/web/src/features/canvas/util/getCanvasGenerationMode.ts
index aa3b586869..f0a3464986 100644
--- a/invokeai/frontend/web/src/features/canvas/util/getCanvasGenerationMode.ts
+++ b/invokeai/frontend/web/src/features/canvas/util/getCanvasGenerationMode.ts
@@ -1,17 +1,9 @@
-import {
-  areAnyPixelsBlack,
-  getImageDataTransparency,
-} from 'common/util/arrayBuffer';
+import { areAnyPixelsBlack, getImageDataTransparency } from 'common/util/arrayBuffer';
 import type { GenerationMode } from 'features/canvas/store/canvasTypes';
 
-export const getCanvasGenerationMode = (
-  baseImageData: ImageData,
-  maskImageData: ImageData
-): GenerationMode => {
-  const {
-    isPartiallyTransparent: baseIsPartiallyTransparent,
-    isFullyTransparent: baseIsFullyTransparent,
-  } = getImageDataTransparency(baseImageData.data);
+export const getCanvasGenerationMode = (baseImageData: ImageData, maskImageData: ImageData): GenerationMode => {
+  const { isPartiallyTransparent: baseIsPartiallyTransparent, isFullyTransparent: baseIsFullyTransparent } =
+    getImageDataTransparency(baseImageData.data);
 
   // check mask for black
   const doesMaskHaveBlackPixels = areAnyPixelsBlack(maskImageData.data);
diff --git a/invokeai/frontend/web/src/features/canvas/util/getScaledBoundingBoxDimensions.ts b/invokeai/frontend/web/src/features/canvas/util/getScaledBoundingBoxDimensions.ts
index 4f8f217701..de38d12cf5 100644
--- a/invokeai/frontend/web/src/features/canvas/util/getScaledBoundingBoxDimensions.ts
+++ b/invokeai/frontend/web/src/features/canvas/util/getScaledBoundingBoxDimensions.ts
@@ -2,10 +2,7 @@ import { roundToMultiple } from 'common/util/roundDownToMultiple';
 import type { Dimensions } from 'features/canvas/store/canvasTypes';
 import { CANVAS_GRID_SIZE_FINE } from 'features/canvas/store/constants';
 
-const getScaledBoundingBoxDimensions = (
-  dimensions: Dimensions,
-  optimalDimension: number
-) => {
+const getScaledBoundingBoxDimensions = (dimensions: Dimensions, optimalDimension: number) => {
   const { width, height } = dimensions;
 
   const scaledDimensions = { width, height };
@@ -22,16 +19,10 @@ const getScaledBoundingBoxDimensions = (
     } else {
       if (aspectRatio > 1) {
         scaledDimensions.width = maxDimension;
-        scaledDimensions.height = roundToMultiple(
-          maxDimension / aspectRatio,
-          CANVAS_GRID_SIZE_FINE
-        );
+        scaledDimensions.height = roundToMultiple(maxDimension / aspectRatio, CANVAS_GRID_SIZE_FINE);
       } else if (aspectRatio < 1) {
         scaledDimensions.height = maxDimension;
-        scaledDimensions.width = roundToMultiple(
-          maxDimension * aspectRatio,
-          CANVAS_GRID_SIZE_FINE
-        );
+        scaledDimensions.width = roundToMultiple(maxDimension * aspectRatio, CANVAS_GRID_SIZE_FINE);
       }
       currentArea = scaledDimensions.width * scaledDimensions.height;
     }
diff --git a/invokeai/frontend/web/src/features/canvas/util/isElChildOfCanvasTab.tsx b/invokeai/frontend/web/src/features/canvas/util/isElChildOfCanvasTab.tsx
index ea2b781e34..a59e780abc 100644
--- a/invokeai/frontend/web/src/features/canvas/util/isElChildOfCanvasTab.tsx
+++ b/invokeai/frontend/web/src/features/canvas/util/isElChildOfCanvasTab.tsx
@@ -7,8 +7,6 @@ import { CANVAS_TAB_TESTID } from 'features/canvas/store/constants';
  * it's safer to check the canvas tab and grab its parent.
  */
 export const isElChildOfCanvasTab = (el: HTMLElement) => {
-  const canvasContainerEl = document.querySelector(
-    `[data-testid="${CANVAS_TAB_TESTID}"]`
-  );
+  const canvasContainerEl = document.querySelector(`[data-testid="${CANVAS_TAB_TESTID}"]`);
   return Boolean(canvasContainerEl?.parentElement?.contains(el));
 };
diff --git a/invokeai/frontend/web/src/features/canvas/util/konvaNodeToBlob.ts b/invokeai/frontend/web/src/features/canvas/util/konvaNodeToBlob.ts
index 40b9768e5a..e16988ea23 100644
--- a/invokeai/frontend/web/src/features/canvas/util/konvaNodeToBlob.ts
+++ b/invokeai/frontend/web/src/features/canvas/util/konvaNodeToBlob.ts
@@ -9,9 +9,6 @@ import { canvasToBlob } from './canvasToBlob';
  * @param boundingBox - The bounding box to crop to
  * @returns A Promise that resolves with Blob of the node cropped to the bounding box
  */
-export const konvaNodeToBlob = async (
-  node: Konva.Node,
-  boundingBox: IRect
-): Promise<Blob> => {
+export const konvaNodeToBlob = async (node: Konva.Node, boundingBox: IRect): Promise<Blob> => {
   return await canvasToBlob(node.toCanvas(boundingBox));
 };
diff --git a/invokeai/frontend/web/src/features/canvas/util/konvaNodeToImageData.ts b/invokeai/frontend/web/src/features/canvas/util/konvaNodeToImageData.ts
index e3c3c008fa..3b5780ae16 100644
--- a/invokeai/frontend/web/src/features/canvas/util/konvaNodeToImageData.ts
+++ b/invokeai/frontend/web/src/features/canvas/util/konvaNodeToImageData.ts
@@ -9,16 +9,9 @@ import { dataURLToImageData } from './dataURLToImageData';
  * @param boundingBox - The bounding box to crop to
  * @returns A Promise that resolves with ImageData object of the node cropped to the bounding box
  */
-export const konvaNodeToImageData = async (
-  node: Konva.Node,
-  boundingBox: IRect
-): Promise<ImageData> => {
+export const konvaNodeToImageData = async (node: Konva.Node, boundingBox: IRect): Promise<ImageData> => {
   // get a dataURL of the bbox'd region
   const dataURL = node.toDataURL(boundingBox);
 
-  return await dataURLToImageData(
-    dataURL,
-    boundingBox.width,
-    boundingBox.height
-  );
+  return await dataURLToImageData(dataURL, boundingBox.width, boundingBox.height);
 };
diff --git a/invokeai/frontend/web/src/features/canvas/util/roundDimensionsToMultiple.ts b/invokeai/frontend/web/src/features/canvas/util/roundDimensionsToMultiple.ts
index 18141d29a8..8e526a54e6 100644
--- a/invokeai/frontend/web/src/features/canvas/util/roundDimensionsToMultiple.ts
+++ b/invokeai/frontend/web/src/features/canvas/util/roundDimensionsToMultiple.ts
@@ -1,10 +1,7 @@
 import { roundToMultiple } from 'common/util/roundDownToMultiple';
 import type { Dimensions } from 'features/canvas/store/canvasTypes';
 
-const roundDimensionsToMultiple = (
-  dimensions: Dimensions,
-  multiple: number
-): Dimensions => {
+const roundDimensionsToMultiple = (dimensions: Dimensions, multiple: number): Dimensions => {
   return {
     width: roundToMultiple(dimensions.width, multiple),
     height: roundToMultiple(dimensions.height, multiple),
diff --git a/invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx b/invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx
index b8688b334d..218e297393 100644
--- a/invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx
+++ b/invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx
@@ -1,11 +1,5 @@
 import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
-import {
-  Combobox,
-  ConfirmationAlertDialog,
-  Flex,
-  FormControl,
-  Text,
-} from '@invoke-ai/ui-library';
+import { Combobox, ConfirmationAlertDialog, Flex, FormControl, Text } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
@@ -16,10 +10,7 @@ import {
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useListAllBoardsQuery } from 'services/api/endpoints/boards';
-import {
-  useAddImagesToBoardMutation,
-  useRemoveImagesFromBoardMutation,
-} from 'services/api/endpoints/images';
+import { useAddImagesToBoardMutation, useRemoveImagesFromBoardMutation } from 'services/api/endpoints/images';
 
 const selectImagesToChange = createMemoizedSelector(
   selectChangeBoardModalSlice,
@@ -45,10 +36,7 @@ const ChangeBoardModal = () => {
     );
   }, [boards, t]);
 
-  const value = useMemo(
-    () => options.find((o) => o.value === selectedBoard),
-    [options, selectedBoard]
-  );
+  const value = useMemo(() => options.find((o) => o.value === selectedBoard), [options, selectedBoard]);
 
   const handleClose = useCallback(() => {
     dispatch(changeBoardReset());
@@ -70,13 +58,7 @@ const ChangeBoardModal = () => {
     }
     setSelectedBoard(null);
     dispatch(changeBoardReset());
-  }, [
-    addImagesToBoard,
-    dispatch,
-    imagesToChange,
-    removeImagesFromBoard,
-    selectedBoard,
-  ]);
+  }, [addImagesToBoard, dispatch, imagesToChange, removeImagesFromBoard, selectedBoard]);
 
   const onChange = useCallback<ComboboxOnChange>((v) => {
     if (!v) {
@@ -103,9 +85,7 @@ const ChangeBoardModal = () => {
         </Text>
         <FormControl isDisabled={isFetching}>
           <Combobox
-            placeholder={
-              isFetching ? t('boards.loading') : t('boards.selectBoard')
-            }
+            placeholder={isFetching ? t('boards.loading') : t('boards.selectBoard')}
             onChange={onChange}
             value={value}
             options={options}
diff --git a/invokeai/frontend/web/src/features/changeBoardModal/store/slice.ts b/invokeai/frontend/web/src/features/changeBoardModal/store/slice.ts
index d4abf3069a..b585b2b697 100644
--- a/invokeai/frontend/web/src/features/changeBoardModal/store/slice.ts
+++ b/invokeai/frontend/web/src/features/changeBoardModal/store/slice.ts
@@ -22,10 +22,8 @@ const changeBoardModal = createSlice({
   },
 });
 
-export const { isModalOpenChanged, imagesToChangeSelected, changeBoardReset } =
-  changeBoardModal.actions;
+export const { isModalOpenChanged, imagesToChangeSelected, changeBoardReset } = changeBoardModal.actions;
 
 export default changeBoardModal.reducer;
 
-export const selectChangeBoardModalSlice = (state: RootState) =>
-  state.changeBoardModal;
+export const selectChangeBoardModalSlice = (state: RootState) => state.changeBoardModal;
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx
index 21b05b30d7..6124823808 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx
@@ -1,12 +1,4 @@
-import {
-  Box,
-  Flex,
-  FormControl,
-  FormLabel,
-  Icon,
-  IconButton,
-  Switch,
-} from '@invoke-ai/ui-library';
+import { Box, Flex, FormControl, FormLabel, Icon, IconButton, Switch } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';
 import { useControlAdapterType } from 'features/controlAdapters/hooks/useControlAdapterType';
@@ -68,19 +60,10 @@ const ControlAdapterConfig = (props: { id: string; number: number }) => {
   }
 
   return (
-    <Flex
-      flexDir="column"
-      gap={4}
-      p={4}
-      borderRadius="base"
-      position="relative"
-      bg="base.750"
-    >
+    <Flex flexDir="column" gap={4} p={4} borderRadius="base" position="relative" bg="base.750">
       <Flex gap={2} alignItems="center" justifyContent="space-between">
         <FormControl>
-          <FormLabel flexGrow={1}>
-            {t(`controlnet.${controlAdapterType}`, { number })}
-          </FormLabel>
+          <FormLabel flexGrow={1}>{t(`controlnet.${controlAdapterType}`, { number })}</FormLabel>
           <Switch
             aria-label={t('controlnet.toggleControlNet')}
             isChecked={isEnabled}
@@ -89,17 +72,10 @@ const ControlAdapterConfig = (props: { id: string; number: number }) => {
         </FormControl>
       </Flex>
       <Flex gap={4} alignItems="center">
-        <Box
-          minW={0}
-          w="full"
-          transitionProperty="common"
-          transitionDuration="0.1s"
-        >
+        <Box minW={0} w="full" transitionProperty="common" transitionDuration="0.1s">
           <ParamControlAdapterModel id={id} />
         </Box>
-        {activeTabName === 'unifiedCanvas' && (
-          <ControlNetCanvasImageImports id={id} />
-        )}
+        {activeTabName === 'unifiedCanvas' && <ControlNetCanvasImageImports id={id} />}
         <IconButton
           size="sm"
           tooltip={t('controlnet.duplicate')}
@@ -117,16 +93,8 @@ const ControlAdapterConfig = (props: { id: string; number: number }) => {
         />
         <IconButton
           size="sm"
-          tooltip={
-            isExpanded
-              ? t('controlnet.hideAdvanced')
-              : t('controlnet.showAdvanced')
-          }
-          aria-label={
-            isExpanded
-              ? t('controlnet.hideAdvanced')
-              : t('controlnet.showAdvanced')
-          }
+          tooltip={isExpanded ? t('controlnet.hideAdvanced') : t('controlnet.showAdvanced')}
+          aria-label={isExpanded ? t('controlnet.hideAdvanced') : t('controlnet.showAdvanced')}
           onClick={toggleIsExpanded}
           variant="ghost"
           icon={
@@ -148,13 +116,7 @@ const ControlAdapterConfig = (props: { id: string; number: number }) => {
             <ParamControlAdapterBeginEnd id={id} />
           </Flex>
           {!isExpanded && (
-            <Flex
-              alignItems="center"
-              justifyContent="center"
-              h={32}
-              w={32}
-              aspectRatio="1/1"
-            >
+            <Flex alignItems="center" justifyContent="center" h={32} w={32} aspectRatio="1/1">
               <ControlAdapterImagePreview id={id} isSmall />
             </Flex>
           )}
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx
index 84cd77fac3..32aca81185 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx
@@ -13,23 +13,12 @@ import {
   controlAdapterImageChanged,
   selectControlAdaptersSlice,
 } from 'features/controlAdapters/store/controlAdaptersSlice';
-import type {
-  TypesafeDraggableData,
-  TypesafeDroppableData,
-} from 'features/dnd/types';
-import {
-  heightChanged,
-  selectOptimalDimension,
-  widthChanged,
-} from 'features/parameters/store/generationSlice';
+import type { TypesafeDraggableData, TypesafeDroppableData } from 'features/dnd/types';
+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';
-import {
-  PiArrowCounterClockwiseBold,
-  PiFloppyDiskBold,
-  PiRulerBold,
-} from 'react-icons/pi';
+import { PiArrowCounterClockwiseBold, PiFloppyDiskBold, PiRulerBold } from 'react-icons/pi';
 import {
   useAddImageToBoardMutation,
   useChangeImageIsIntermediateMutation,
@@ -62,13 +51,13 @@ const ControlAdapterImagePreview = ({ isSmall, id }: Props) => {
 
   const [isMouseOverImage, setIsMouseOverImage] = useState(false);
 
-  const { currentData: controlImage, isError: isErrorControlImage } =
-    useGetImageDTOQuery(controlImageName ?? skipToken);
+  const { currentData: controlImage, isError: isErrorControlImage } = useGetImageDTOQuery(
+    controlImageName ?? skipToken
+  );
 
-  const {
-    currentData: processedControlImage,
-    isError: isErrorProcessedControlImage,
-  } = useGetImageDTOQuery(processedControlImageName ?? skipToken);
+  const { currentData: processedControlImage, isError: isErrorProcessedControlImage } = useGetImageDTOQuery(
+    processedControlImageName ?? skipToken
+  );
 
   const [changeIsIntermediate] = useChangeImageIsIntermediateMutation();
   const [addToBoard] = useAddImageToBoardMutation();
@@ -95,13 +84,7 @@ const ControlAdapterImagePreview = ({ isSmall, id }: Props) => {
     } else {
       removeFromBoard({ imageDTO: processedControlImage });
     }
-  }, [
-    processedControlImage,
-    changeIsIntermediate,
-    autoAddBoardId,
-    addToBoard,
-    removeFromBoard,
-  ]);
+  }, [processedControlImage, changeIsIntermediate, autoAddBoardId, addToBoard, removeFromBoard]);
 
   const handleSetControlImageToDimensions = useCallback(() => {
     if (!controlImage) {
@@ -151,10 +134,7 @@ const ControlAdapterImagePreview = ({ isSmall, id }: Props) => {
     [id]
   );
 
-  const postUploadAction = useMemo<PostUploadAction>(
-    () => ({ type: 'SET_CONTROL_ADAPTER_IMAGE', id }),
-    [id]
-  );
+  const postUploadAction = useMemo<PostUploadAction>(() => ({ type: 'SET_CONTROL_ADAPTER_IMAGE', id }), [id]);
 
   const shouldShowProcessedImage =
     controlImage &&
@@ -167,12 +147,7 @@ const ControlAdapterImagePreview = ({ isSmall, id }: Props) => {
     if (isConnected && (isErrorControlImage || isErrorProcessedControlImage)) {
       handleResetControlImage();
     }
-  }, [
-    handleResetControlImage,
-    isConnected,
-    isErrorControlImage,
-    isErrorProcessedControlImage,
-  ]);
+  }, [handleResetControlImage, isConnected, isErrorControlImage, isErrorProcessedControlImage]);
 
   return (
     <Flex
@@ -214,9 +189,7 @@ const ControlAdapterImagePreview = ({ isSmall, id }: Props) => {
       <>
         <IAIDndImageIcon
           onClick={handleResetControlImage}
-          icon={
-            controlImage ? <PiArrowCounterClockwiseBold size={16} /> : undefined
-          }
+          icon={controlImage ? <PiArrowCounterClockwiseBold size={16} /> : undefined}
           tooltip={t('controlnet.resetControlImage')}
         />
         <IAIDndImageIcon
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterProcessorComponent.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterProcessorComponent.tsx
index 45c4b7fac9..73d4f801c7 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterProcessorComponent.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterProcessorComponent.tsx
@@ -30,143 +30,59 @@ const ControlAdapterProcessorComponent = ({ id }: Props) => {
   }
 
   if (processorNode.type === 'canny_image_processor') {
-    return (
-      <CannyProcessor
-        controlNetId={id}
-        processorNode={processorNode}
-        isEnabled={isEnabled}
-      />
-    );
+    return <CannyProcessor controlNetId={id} processorNode={processorNode} isEnabled={isEnabled} />;
   }
 
   if (processorNode.type === 'color_map_image_processor') {
-    return (
-      <ColorMapProcessor
-        controlNetId={id}
-        processorNode={processorNode}
-        isEnabled={isEnabled}
-      />
-    );
+    return <ColorMapProcessor controlNetId={id} processorNode={processorNode} isEnabled={isEnabled} />;
   }
 
   if (processorNode.type === 'depth_anything_image_processor') {
-    return (
-      <DepthAnyThingProcessor
-        controlNetId={id}
-        processorNode={processorNode}
-        isEnabled={isEnabled}
-      />
-    );
+    return <DepthAnyThingProcessor controlNetId={id} processorNode={processorNode} isEnabled={isEnabled} />;
   }
 
   if (processorNode.type === 'hed_image_processor') {
-    return (
-      <HedProcessor
-        controlNetId={id}
-        processorNode={processorNode}
-        isEnabled={isEnabled}
-      />
-    );
+    return <HedProcessor controlNetId={id} processorNode={processorNode} isEnabled={isEnabled} />;
   }
 
   if (processorNode.type === 'lineart_image_processor') {
-    return (
-      <LineartProcessor
-        controlNetId={id}
-        processorNode={processorNode}
-        isEnabled={isEnabled}
-      />
-    );
+    return <LineartProcessor controlNetId={id} processorNode={processorNode} isEnabled={isEnabled} />;
   }
 
   if (processorNode.type === 'content_shuffle_image_processor') {
-    return (
-      <ContentShuffleProcessor
-        controlNetId={id}
-        processorNode={processorNode}
-        isEnabled={isEnabled}
-      />
-    );
+    return <ContentShuffleProcessor controlNetId={id} processorNode={processorNode} isEnabled={isEnabled} />;
   }
 
   if (processorNode.type === 'lineart_anime_image_processor') {
-    return (
-      <LineartAnimeProcessor
-        controlNetId={id}
-        processorNode={processorNode}
-        isEnabled={isEnabled}
-      />
-    );
+    return <LineartAnimeProcessor controlNetId={id} processorNode={processorNode} isEnabled={isEnabled} />;
   }
 
   if (processorNode.type === 'mediapipe_face_processor') {
-    return (
-      <MediapipeFaceProcessor
-        controlNetId={id}
-        processorNode={processorNode}
-        isEnabled={isEnabled}
-      />
-    );
+    return <MediapipeFaceProcessor controlNetId={id} processorNode={processorNode} isEnabled={isEnabled} />;
   }
 
   if (processorNode.type === 'midas_depth_image_processor') {
-    return (
-      <MidasDepthProcessor
-        controlNetId={id}
-        processorNode={processorNode}
-        isEnabled={isEnabled}
-      />
-    );
+    return <MidasDepthProcessor controlNetId={id} processorNode={processorNode} isEnabled={isEnabled} />;
   }
 
   if (processorNode.type === 'mlsd_image_processor') {
-    return (
-      <MlsdImageProcessor
-        controlNetId={id}
-        processorNode={processorNode}
-        isEnabled={isEnabled}
-      />
-    );
+    return <MlsdImageProcessor controlNetId={id} processorNode={processorNode} isEnabled={isEnabled} />;
   }
 
   if (processorNode.type === 'normalbae_image_processor') {
-    return (
-      <NormalBaeProcessor
-        controlNetId={id}
-        processorNode={processorNode}
-        isEnabled={isEnabled}
-      />
-    );
+    return <NormalBaeProcessor controlNetId={id} processorNode={processorNode} isEnabled={isEnabled} />;
   }
 
   if (processorNode.type === 'openpose_image_processor') {
-    return (
-      <OpenposeProcessor
-        controlNetId={id}
-        processorNode={processorNode}
-        isEnabled={isEnabled}
-      />
-    );
+    return <OpenposeProcessor controlNetId={id} processorNode={processorNode} isEnabled={isEnabled} />;
   }
 
   if (processorNode.type === 'pidi_image_processor') {
-    return (
-      <PidiProcessor
-        controlNetId={id}
-        processorNode={processorNode}
-        isEnabled={isEnabled}
-      />
-    );
+    return <PidiProcessor controlNetId={id} processorNode={processorNode} isEnabled={isEnabled} />;
   }
 
   if (processorNode.type === 'zoe_depth_image_processor') {
-    return (
-      <ZoeDepthProcessor
-        controlNetId={id}
-        processorNode={processorNode}
-        isEnabled={isEnabled}
-      />
-    );
+    return <ZoeDepthProcessor controlNetId={id} processorNode={processorNode} isEnabled={isEnabled} />;
   }
 
   return null;
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterShouldAutoConfig.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterShouldAutoConfig.tsx
index b8bdbc7f5a..7399febb2d 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterShouldAutoConfig.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterShouldAutoConfig.tsx
@@ -28,10 +28,7 @@ const ControlAdapterShouldAutoConfig = ({ id }: Props) => {
   return (
     <FormControl isDisabled={!isEnabled}>
       <FormLabel flexGrow={1}>{t('controlnet.autoConfigure')}</FormLabel>
-      <Switch
-        isChecked={shouldAutoConfig}
-        onChange={handleShouldAutoConfigChanged}
-      />
+      <Switch isChecked={shouldAutoConfig} onChange={handleShouldAutoConfigChanged} />
     </FormControl>
   );
 };
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/imports/ControlNetCanvasImageImports.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/imports/ControlNetCanvasImageImports.tsx
index 8b24ec2b7e..fada3e3abf 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/imports/ControlNetCanvasImageImports.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/imports/ControlNetCanvasImageImports.tsx
@@ -1,9 +1,6 @@
 import { Flex, IconButton } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
-import {
-  canvasImageToControlAdapter,
-  canvasMaskToControlAdapter,
-} from 'features/canvas/store/actions';
+import { canvasImageToControlAdapter, canvasMaskToControlAdapter } from 'features/canvas/store/actions';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiExcludeBold, PiImageSquareBold } from 'react-icons/pi';
@@ -12,9 +9,7 @@ type ControlNetCanvasImageImportsProps = {
   id: string;
 };
 
-const ControlNetCanvasImageImports = (
-  props: ControlNetCanvasImageImportsProps
-) => {
+const ControlNetCanvasImageImports = (props: ControlNetCanvasImageImportsProps) => {
   const { id } = props;
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx
index 409251d5d1..a62f7e7d8a 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx
@@ -1,8 +1,4 @@
-import {
-  CompositeRangeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+import { CompositeRangeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useControlAdapterBeginEndStepPct } from 'features/controlAdapters/hooks/useControlAdapterBeginEndStepPct';
 import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';
@@ -58,10 +54,7 @@ export const ParamControlAdapterBeginEnd = memo(({ id }: Props) => {
     );
   }, [dispatch, id]);
 
-  const value = useMemo<[number, number]>(
-    () => [stepPcts?.beginStepPct ?? 0, stepPcts?.endStepPct ?? 1],
-    [stepPcts]
-  );
+  const value = useMemo<[number, number]>(() => [stepPcts?.beginStepPct ?? 0, stepPcts?.endStepPct ?? 1], [stepPcts]);
 
   if (!stepPcts) {
     return null;
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterControlMode.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterControlMode.tsx
index 3a55d97e6a..ea16d6bc1f 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterControlMode.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterControlMode.tsx
@@ -58,11 +58,7 @@ const ParamControlAdapterControlMode = ({ id }: Props) => {
       <InformationalPopover feature="controlNetControlMode">
         <FormLabel>{t('controlnet.controlMode')}</FormLabel>
       </InformationalPopover>
-      <Combobox
-        value={value}
-        options={CONTROL_MODE_DATA}
-        onChange={handleControlModeChange}
-      />
+      <Combobox value={value} options={CONTROL_MODE_DATA} onChange={handleControlModeChange} />
     </FormControl>
   );
 };
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterModel.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterModel.tsx
index e835476ba1..13851b143c 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterModel.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterModel.tsx
@@ -22,32 +22,21 @@ type ParamControlAdapterModelProps = {
   id: string;
 };
 
-const selectMainModel = createMemoizedSelector(
-  selectGenerationSlice,
-  (generation) => generation.model
-);
+const selectMainModel = createMemoizedSelector(selectGenerationSlice, (generation) => generation.model);
 
 const ParamControlAdapterModel = ({ id }: ParamControlAdapterModelProps) => {
   const isEnabled = useControlAdapterIsEnabled(id);
   const controlAdapterType = useControlAdapterType(id);
   const model = useControlAdapterModel(id);
   const dispatch = useAppDispatch();
-  const currentBaseModel = useAppSelector(
-    (s) => s.generation.model?.base_model
-  );
+  const currentBaseModel = useAppSelector((s) => s.generation.model?.base_model);
   const mainModel = useAppSelector(selectMainModel);
   const { t } = useTranslation();
 
   const models = useControlAdapterModelEntities(controlAdapterType);
 
   const _onChange = useCallback(
-    (
-      model:
-        | ControlNetModelConfigEntity
-        | IPAdapterModelConfigEntity
-        | T2IAdapterModelConfigEntity
-        | null
-    ) => {
+    (model: ControlNetModelConfigEntity | IPAdapterModelConfigEntity | T2IAdapterModelConfigEntity | null) => {
       if (!model) {
         return;
       }
@@ -62,10 +51,7 @@ const ParamControlAdapterModel = ({ id }: ParamControlAdapterModelProps) => {
   );
 
   const selectedModel = useMemo(
-    () =>
-      model && controlAdapterType
-        ? { ...model, model_type: controlAdapterType }
-        : null,
+    () => (model && controlAdapterType ? { ...model, model_type: controlAdapterType } : null),
     [controlAdapterType, model]
   );
 
@@ -78,20 +64,16 @@ const ParamControlAdapterModel = ({ id }: ParamControlAdapterModelProps) => {
     [currentBaseModel]
   );
 
-  const { options, value, onChange, noOptionsMessage } =
-    useGroupedModelCombobox({
-      modelEntities: models,
-      onChange: _onChange,
-      selectedModel,
-      getIsDisabled,
-    });
+  const { options, value, onChange, noOptionsMessage } = useGroupedModelCombobox({
+    modelEntities: models,
+    onChange: _onChange,
+    selectedModel,
+    getIsDisabled,
+  });
 
   return (
     <Tooltip label={value?.description}>
-      <FormControl
-        isDisabled={!isEnabled}
-        isInvalid={!value || mainModel?.base_model !== model?.base_model}
-      >
+      <FormControl isDisabled={!isEnabled} isInvalid={!value || mainModel?.base_model !== model?.base_model}>
         <Combobox
           options={options}
           placeholder={t('controlnet.selectModel')}
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterProcessorSelect.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterProcessorSelect.tsx
index 5f9dfd3b27..326dcc412a 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterProcessorSelect.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterProcessorSelect.tsx
@@ -23,18 +23,9 @@ const selectOptions = createMemoizedSelector(configSelector, (config) => {
   }))
     .sort((a, b) =>
       // sort 'none' to the top
-      a.value === 'none'
-        ? -1
-        : b.value === 'none'
-          ? 1
-          : a.label.localeCompare(b.label)
+      a.value === 'none' ? -1 : b.value === 'none' ? 1 : a.label.localeCompare(b.label)
     )
-    .filter(
-      (d) =>
-        !config.sd.disabledControlNetProcessors.includes(
-          d.value as ControlAdapterProcessorType
-        )
-    );
+    .filter((d) => !config.sd.disabledControlNetProcessors.includes(d.value as ControlAdapterProcessorType));
 
   return options;
 });
@@ -60,10 +51,7 @@ const ParamControlAdapterProcessorSelect = ({ id }: Props) => {
     },
     [id, dispatch]
   );
-  const value = useMemo(
-    () => options.find((o) => o.value === processorNode?.type),
-    [options, processorNode]
-  );
+  const value = useMemo(() => options.find((o) => o.value === processorNode?.type), [options, processorNode]);
 
   if (!processorNode) {
     return null;
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterResizeMode.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterResizeMode.tsx
index 3b6c23a2a1..58b8905f5a 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterResizeMode.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterResizeMode.tsx
@@ -45,10 +45,7 @@ const ParamControlAdapterResizeMode = ({ id }: Props) => {
     [id, dispatch]
   );
 
-  const value = useMemo(
-    () => options.find((o) => o.value === resizeMode),
-    [options, resizeMode]
-  );
+  const value = useMemo(() => options.find((o) => o.value === resizeMode), [options, resizeMode]);
 
   if (!resizeMode) {
     return null;
@@ -59,12 +56,7 @@ const ParamControlAdapterResizeMode = ({ id }: Props) => {
       <InformationalPopover feature="controlNetResizeMode">
         <FormLabel>{t('controlnet.resizeMode')}</FormLabel>
       </InformationalPopover>
-      <Combobox
-        value={value}
-        options={options}
-        isDisabled={!isEnabled}
-        onChange={handleResizeModeChange}
-      />
+      <Combobox value={value} options={options} isDisabled={!isEnabled} onChange={handleResizeModeChange} />
     </FormControl>
   );
 };
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterWeight.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterWeight.tsx
index 068b38d6ba..7f45901f53 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterWeight.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterWeight.tsx
@@ -1,9 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+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';
@@ -27,12 +22,8 @@ const ParamControlAdapterWeight = ({ id }: ParamControlAdapterWeightProps) => {
   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 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);
 
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/CannyProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/CannyProcessor.tsx
index 0f5c1b72e9..1cc458be8e 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/CannyProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/CannyProcessor.tsx
@@ -1,9 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredCannyImageProcessorInvocation } from 'features/controlAdapters/store/types';
@@ -12,8 +7,7 @@ import { useTranslation } from 'react-i18next';
 
 import ProcessorWrapper from './common/ProcessorWrapper';
 
-const DEFAULTS = CONTROLNET_PROCESSORS.canny_image_processor
-  .default as RequiredCannyImageProcessorInvocation;
+const DEFAULTS = CONTROLNET_PROCESSORS.canny_image_processor.default as RequiredCannyImageProcessorInvocation;
 
 type CannyProcessorProps = {
   controlNetId: string;
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/ColorMapProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/ColorMapProcessor.tsx
index bfb2b880f2..b0ddde6f93 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/ColorMapProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/ColorMapProcessor.tsx
@@ -1,9 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredColorMapImageProcessorInvocation } from 'features/controlAdapters/store/types';
@@ -12,8 +7,7 @@ import { useTranslation } from 'react-i18next';
 
 import ProcessorWrapper from './common/ProcessorWrapper';
 
-const DEFAULTS = CONTROLNET_PROCESSORS.color_map_image_processor
-  .default as RequiredColorMapImageProcessorInvocation;
+const DEFAULTS = CONTROLNET_PROCESSORS.color_map_image_processor.default as RequiredColorMapImageProcessorInvocation;
 
 type ColorMapProcessorProps = {
   controlNetId: string;
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/ContentShuffleProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/ContentShuffleProcessor.tsx
index 7343c220c6..413f301f5a 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/ContentShuffleProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/ContentShuffleProcessor.tsx
@@ -1,9 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredContentShuffleImageProcessorInvocation } from 'features/controlAdapters/store/types';
@@ -102,57 +97,18 @@ const ContentShuffleProcessor = (props: Props) => {
       </FormControl>
       <FormControl isDisabled={!isEnabled}>
         <FormLabel>{t('controlnet.w')}</FormLabel>
-        <CompositeSlider
-          value={w}
-          defaultValue={DEFAULTS.w}
-          onChange={handleWChanged}
-          min={0}
-          max={4096}
-          marks
-        />
-        <CompositeNumberInput
-          value={w}
-          defaultValue={DEFAULTS.w}
-          onChange={handleWChanged}
-          min={0}
-          max={4096}
-        />
+        <CompositeSlider value={w} defaultValue={DEFAULTS.w} onChange={handleWChanged} min={0} max={4096} marks />
+        <CompositeNumberInput value={w} defaultValue={DEFAULTS.w} onChange={handleWChanged} min={0} max={4096} />
       </FormControl>
       <FormControl isDisabled={!isEnabled}>
         <FormLabel>{t('controlnet.h')}</FormLabel>
-        <CompositeSlider
-          value={h}
-          defaultValue={DEFAULTS.h}
-          onChange={handleHChanged}
-          min={0}
-          max={4096}
-          marks
-        />
-        <CompositeNumberInput
-          value={h}
-          defaultValue={DEFAULTS.h}
-          onChange={handleHChanged}
-          min={0}
-          max={4096}
-        />
+        <CompositeSlider value={h} defaultValue={DEFAULTS.h} onChange={handleHChanged} min={0} max={4096} marks />
+        <CompositeNumberInput value={h} defaultValue={DEFAULTS.h} onChange={handleHChanged} min={0} max={4096} />
       </FormControl>
       <FormControl isDisabled={!isEnabled}>
         <FormLabel>{t('controlnet.f')}</FormLabel>
-        <CompositeSlider
-          value={f}
-          defaultValue={DEFAULTS.f}
-          onChange={handleFChanged}
-          min={0}
-          max={4096}
-          marks
-        />
-        <CompositeNumberInput
-          value={f}
-          defaultValue={DEFAULTS.f}
-          onChange={handleFChanged}
-          min={0}
-          max={4096}
-        />
+        <CompositeSlider value={f} defaultValue={DEFAULTS.f} onChange={handleFChanged} min={0} max={4096} marks />
+        <CompositeNumberInput value={f} defaultValue={DEFAULTS.f} onChange={handleFChanged} min={0} max={4096} />
       </FormControl>
     </ProcessorWrapper>
   );
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/DepthAnyThingProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/DepthAnyThingProcessor.tsx
index d1a4db9818..272a2cab49 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/DepthAnyThingProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/DepthAnyThingProcessor.tsx
@@ -1,11 +1,5 @@
 import type { ComboboxOnChange } from '@invoke-ai/ui-library';
-import {
-  Combobox,
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+import { Combobox, CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type {
@@ -55,10 +49,7 @@ const DepthAnythingProcessor = (props: Props) => {
     [t]
   );
 
-  const value = useMemo(
-    () => options.filter((o) => o.value === model_size)[0],
-    [options, model_size]
-  );
+  const value = useMemo(() => options.filter((o) => o.value === model_size)[0], [options, model_size]);
 
   const handleResolutionChange = useCallback(
     (v: number) => {
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/HedProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/HedProcessor.tsx
index 4242f7c95b..2452021d5e 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/HedProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/HedProcessor.tsx
@@ -1,10 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-  Switch,
-} from '@invoke-ai/ui-library';
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredHedImageProcessorInvocation } from 'features/controlAdapters/store/types';
@@ -14,8 +8,7 @@ import { useTranslation } from 'react-i18next';
 
 import ProcessorWrapper from './common/ProcessorWrapper';
 
-const DEFAULTS = CONTROLNET_PROCESSORS.hed_image_processor
-  .default as RequiredHedImageProcessorInvocation;
+const DEFAULTS = CONTROLNET_PROCESSORS.hed_image_processor.default as RequiredHedImageProcessorInvocation;
 
 type HedProcessorProps = {
   controlNetId: string;
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartAnimeProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartAnimeProcessor.tsx
index 741c02c106..3d08e4724a 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartAnimeProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartAnimeProcessor.tsx
@@ -1,9 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredLineartAnimeImageProcessorInvocation } from 'features/controlAdapters/store/types';
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartProcessor.tsx
index 6148364020..22a96f51f9 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartProcessor.tsx
@@ -1,10 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-  Switch,
-} from '@invoke-ai/ui-library';
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredLineartImageProcessorInvocation } from 'features/controlAdapters/store/types';
@@ -14,8 +8,7 @@ import { useTranslation } from 'react-i18next';
 
 import ProcessorWrapper from './common/ProcessorWrapper';
 
-const DEFAULTS = CONTROLNET_PROCESSORS.lineart_image_processor
-  .default as RequiredLineartImageProcessorInvocation;
+const DEFAULTS = CONTROLNET_PROCESSORS.lineart_image_processor.default as RequiredLineartImageProcessorInvocation;
 
 type LineartProcessorProps = {
   controlNetId: string;
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MediapipeFaceProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MediapipeFaceProcessor.tsx
index 2fb7aa7310..a0d5308210 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MediapipeFaceProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MediapipeFaceProcessor.tsx
@@ -1,9 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredMediapipeFaceProcessorInvocation } from 'features/controlAdapters/store/types';
@@ -12,8 +7,7 @@ import { useTranslation } from 'react-i18next';
 
 import ProcessorWrapper from './common/ProcessorWrapper';
 
-const DEFAULTS = CONTROLNET_PROCESSORS.mediapipe_face_processor
-  .default as RequiredMediapipeFaceProcessorInvocation;
+const DEFAULTS = CONTROLNET_PROCESSORS.mediapipe_face_processor.default as RequiredMediapipeFaceProcessorInvocation;
 
 type Props = {
   controlNetId: string;
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MidasDepthProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MidasDepthProcessor.tsx
index ba52a102af..ba245bc2eb 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MidasDepthProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MidasDepthProcessor.tsx
@@ -1,9 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredMidasDepthImageProcessorInvocation } from 'features/controlAdapters/store/types';
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MlsdImageProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MlsdImageProcessor.tsx
index 1091d5698d..5138b2168b 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MlsdImageProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MlsdImageProcessor.tsx
@@ -1,9 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredMlsdImageProcessorInvocation } from 'features/controlAdapters/store/types';
@@ -12,8 +7,7 @@ import { useTranslation } from 'react-i18next';
 
 import ProcessorWrapper from './common/ProcessorWrapper';
 
-const DEFAULTS = CONTROLNET_PROCESSORS.mlsd_image_processor
-  .default as RequiredMlsdImageProcessorInvocation;
+const DEFAULTS = CONTROLNET_PROCESSORS.mlsd_image_processor.default as RequiredMlsdImageProcessorInvocation;
 
 type Props = {
   controlNetId: string;
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/NormalBaeProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/NormalBaeProcessor.tsx
index b1709d3bf1..d05f600eaf 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/NormalBaeProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/NormalBaeProcessor.tsx
@@ -1,9 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredNormalbaeImageProcessorInvocation } from 'features/controlAdapters/store/types';
@@ -12,8 +7,7 @@ import { useTranslation } from 'react-i18next';
 
 import ProcessorWrapper from './common/ProcessorWrapper';
 
-const DEFAULTS = CONTROLNET_PROCESSORS.normalbae_image_processor
-  .default as RequiredNormalbaeImageProcessorInvocation;
+const DEFAULTS = CONTROLNET_PROCESSORS.normalbae_image_processor.default as RequiredNormalbaeImageProcessorInvocation;
 
 type Props = {
   controlNetId: string;
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/OpenposeProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/OpenposeProcessor.tsx
index 6e27deb291..bdc2e633ae 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/OpenposeProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/OpenposeProcessor.tsx
@@ -1,10 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-  Switch,
-} from '@invoke-ai/ui-library';
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredOpenposeImageProcessorInvocation } from 'features/controlAdapters/store/types';
@@ -14,8 +8,7 @@ import { useTranslation } from 'react-i18next';
 
 import ProcessorWrapper from './common/ProcessorWrapper';
 
-const DEFAULTS = CONTROLNET_PROCESSORS.openpose_image_processor
-  .default as RequiredOpenposeImageProcessorInvocation;
+const DEFAULTS = CONTROLNET_PROCESSORS.openpose_image_processor.default as RequiredOpenposeImageProcessorInvocation;
 
 type Props = {
   controlNetId: string;
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/PidiProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/PidiProcessor.tsx
index e723e876da..8948e8250d 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/PidiProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/PidiProcessor.tsx
@@ -1,10 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-  Switch,
-} from '@invoke-ai/ui-library';
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredPidiImageProcessorInvocation } from 'features/controlAdapters/store/types';
@@ -14,8 +8,7 @@ import { useTranslation } from 'react-i18next';
 
 import ProcessorWrapper from './common/ProcessorWrapper';
 
-const DEFAULTS = CONTROLNET_PROCESSORS.pidi_image_processor
-  .default as RequiredPidiImageProcessorInvocation;
+const DEFAULTS = CONTROLNET_PROCESSORS.pidi_image_processor.default as RequiredPidiImageProcessorInvocation;
 
 type Props = {
   controlNetId: string;
diff --git a/invokeai/frontend/web/src/features/controlAdapters/hooks/useAddControlAdapter.ts b/invokeai/frontend/web/src/features/controlAdapters/hooks/useAddControlAdapter.ts
index c08adc7f6f..51b36968d2 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/hooks/useAddControlAdapter.ts
+++ b/invokeai/frontend/web/src/features/controlAdapters/hooks/useAddControlAdapter.ts
@@ -13,9 +13,7 @@ export const useAddControlAdapter = (type: ControlAdapterType) => {
 
   const firstModel = useMemo(() => {
     // prefer to use a model that matches the base model
-    const firstCompatibleModel = models.filter((m) =>
-      baseModel ? m.base_model === baseModel : true
-    )[0];
+    const firstCompatibleModel = models.filter((m) => (baseModel ? m.base_model === baseModel : true))[0];
 
     if (firstCompatibleModel) {
       return firstCompatibleModel;
diff --git a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterControlImage.ts b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterControlImage.ts
index 2ac85b960a..c8efdf9125 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterControlImage.ts
+++ b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterControlImage.ts
@@ -11,8 +11,7 @@ export const useControlAdapterControlImage = (id: string) => {
     () =>
       createSelector(
         selectControlAdaptersSlice,
-        (controlAdapters) =>
-          selectControlAdapterById(controlAdapters, id)?.controlImage
+        (controlAdapters) => selectControlAdapterById(controlAdapters, id)?.controlImage
       ),
     [id]
   );
diff --git a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterIsEnabled.ts b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterIsEnabled.ts
index ba4e263f59..58bb956ce3 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterIsEnabled.ts
+++ b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterIsEnabled.ts
@@ -11,8 +11,7 @@ export const useControlAdapterIsEnabled = (id: string) => {
     () =>
       createSelector(
         selectControlAdaptersSlice,
-        (controlAdapters) =>
-          selectControlAdapterById(controlAdapters, id)?.isEnabled ?? false
+        (controlAdapters) => selectControlAdapterById(controlAdapters, id)?.isEnabled ?? false
       ),
     [id]
   );
diff --git a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterModel.ts b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterModel.ts
index dd23c8ff44..1416c8c9f1 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterModel.ts
+++ b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterModel.ts
@@ -11,8 +11,7 @@ export const useControlAdapterModel = (id: string) => {
     () =>
       createMemoizedSelector(
         selectControlAdaptersSlice,
-        (controlAdapters) =>
-          selectControlAdapterById(controlAdapters, id)?.model
+        (controlAdapters) => selectControlAdapterById(controlAdapters, id)?.model
       ),
     [id]
   );
diff --git a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterModels.ts b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterModels.ts
index 57da6ec6e8..dd23211b9b 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterModels.ts
+++ b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterModels.ts
@@ -12,27 +12,18 @@ import {
 export const useControlAdapterModels = (type?: ControlAdapterType) => {
   const { data: controlNetModelsData } = useGetControlNetModelsQuery();
   const controlNetModels = useMemo(
-    () =>
-      controlNetModelsData
-        ? controlNetModelsAdapterSelectors.selectAll(controlNetModelsData)
-        : [],
+    () => (controlNetModelsData ? controlNetModelsAdapterSelectors.selectAll(controlNetModelsData) : []),
     [controlNetModelsData]
   );
 
   const { data: t2iAdapterModelsData } = useGetT2IAdapterModelsQuery();
   const t2iAdapterModels = useMemo(
-    () =>
-      t2iAdapterModelsData
-        ? t2iAdapterModelsAdapterSelectors.selectAll(t2iAdapterModelsData)
-        : [],
+    () => (t2iAdapterModelsData ? t2iAdapterModelsAdapterSelectors.selectAll(t2iAdapterModelsData) : []),
     [t2iAdapterModelsData]
   );
   const { data: ipAdapterModelsData } = useGetIPAdapterModelsQuery();
   const ipAdapterModels = useMemo(
-    () =>
-      ipAdapterModelsData
-        ? ipAdapterModelsAdapterSelectors.selectAll(ipAdapterModelsData)
-        : [],
+    () => (ipAdapterModelsData ? ipAdapterModelsAdapterSelectors.selectAll(ipAdapterModelsData) : []),
     [ipAdapterModelsData]
   );
 
diff --git a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterProcessedControlImage.ts b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterProcessedControlImage.ts
index d316ecb0a0..a02e1f9ed9 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterProcessedControlImage.ts
+++ b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterProcessedControlImage.ts
@@ -13,9 +13,7 @@ export const useControlAdapterProcessedControlImage = (id: string) => {
       createSelector(selectControlAdaptersSlice, (controlAdapters) => {
         const ca = selectControlAdapterById(controlAdapters, id);
 
-        return ca && isControlNetOrT2IAdapter(ca)
-          ? ca.processedControlImage
-          : undefined;
+        return ca && isControlNetOrT2IAdapter(ca) ? ca.processedControlImage : undefined;
       }),
     [id]
   );
diff --git a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterProcessorNode.ts b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterProcessorNode.ts
index 6626374dd2..272af132a6 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterProcessorNode.ts
+++ b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterProcessorNode.ts
@@ -13,9 +13,7 @@ export const useControlAdapterProcessorNode = (id: string) => {
       createMemoizedSelector(selectControlAdaptersSlice, (controlAdapters) => {
         const ca = selectControlAdapterById(controlAdapters, id);
 
-        return ca && isControlNetOrT2IAdapter(ca)
-          ? ca.processorNode
-          : undefined;
+        return ca && isControlNetOrT2IAdapter(ca) ? ca.processorNode : undefined;
       }),
     [id]
   );
diff --git a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterProcessorType.ts b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterProcessorType.ts
index b7b58aed8b..777bfc05b4 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterProcessorType.ts
+++ b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterProcessorType.ts
@@ -13,9 +13,7 @@ export const useControlAdapterProcessorType = (id: string) => {
       createSelector(selectControlAdaptersSlice, (controlAdapters) => {
         const ca = selectControlAdapterById(controlAdapters, id);
 
-        return ca && isControlNetOrT2IAdapter(ca)
-          ? ca.processorType
-          : undefined;
+        return ca && isControlNetOrT2IAdapter(ca) ? ca.processorType : undefined;
       }),
     [id]
   );
diff --git a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterWeight.ts b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterWeight.ts
index 53f1074bd0..9e65993fde 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterWeight.ts
+++ b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterWeight.ts
@@ -11,8 +11,7 @@ export const useControlAdapterWeight = (id: string) => {
     () =>
       createSelector(
         selectControlAdaptersSlice,
-        (controlAdapters) =>
-          selectControlAdapterById(controlAdapters, id)?.weight
+        (controlAdapters) => selectControlAdapterById(controlAdapters, id)?.weight
       ),
     [id]
   );
diff --git a/invokeai/frontend/web/src/features/controlAdapters/store/constants.ts b/invokeai/frontend/web/src/features/controlAdapters/store/constants.ts
index ddebffcfde..61af98afc4 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/store/constants.ts
+++ b/invokeai/frontend/web/src/features/controlAdapters/store/constants.ts
@@ -1,9 +1,6 @@
 import i18n from 'i18next';
 
-import type {
-  ControlAdapterProcessorType,
-  RequiredControlAdapterProcessorNode,
-} from './types';
+import type { ControlAdapterProcessorType, RequiredControlAdapterProcessorNode } from './types';
 
 type ControlNetProcessorsDict = Record<
   ControlAdapterProcessorType,
diff --git a/invokeai/frontend/web/src/features/controlAdapters/store/controlAdaptersPersistDenylist.ts b/invokeai/frontend/web/src/features/controlAdapters/store/controlAdaptersPersistDenylist.ts
index 0dfd46889f..ff8fcd1594 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/store/controlAdaptersPersistDenylist.ts
+++ b/invokeai/frontend/web/src/features/controlAdapters/store/controlAdaptersPersistDenylist.ts
@@ -3,6 +3,4 @@ import type { ControlAdaptersState } from './types';
 /**
  * ControlNet slice persist denylist
  */
-export const controlAdaptersPersistDenylist: (keyof ControlAdaptersState)[] = [
-  'pendingControlImages',
-];
+export const controlAdaptersPersistDenylist: (keyof ControlAdaptersState)[] = ['pendingControlImages'];
diff --git a/invokeai/frontend/web/src/features/controlAdapters/store/controlAdaptersSlice.ts b/invokeai/frontend/web/src/features/controlAdapters/store/controlAdaptersSlice.ts
index 5e856a01eb..fd9a70ef57 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/store/controlAdaptersSlice.ts
+++ b/invokeai/frontend/web/src/features/controlAdapters/store/controlAdaptersSlice.ts
@@ -28,20 +28,12 @@ import type {
   ResizeMode,
   T2IAdapterConfig,
 } from './types';
-import {
-  isControlNet,
-  isControlNetOrT2IAdapter,
-  isIPAdapter,
-  isT2IAdapter,
-} from './types';
+import { isControlNet, isControlNetOrT2IAdapter, isIPAdapter, isT2IAdapter } from './types';
 
 export const caAdapter = createEntityAdapter<ControlAdapterConfig, string>({
   selectId: (ca) => ca.id,
 });
-export const caAdapterSelectors = caAdapter.getSelectors(
-  undefined,
-  getSelectorsOptions
-);
+export const caAdapterSelectors = caAdapter.getSelectors(undefined, getSelectorsOptions);
 
 export const {
   selectById: selectControlAdapterById,
@@ -51,14 +43,13 @@ export const {
   selectTotal: selectControlAdapterTotal,
 } = caAdapterSelectors;
 
-export const initialControlAdaptersState: ControlAdaptersState =
-  caAdapter.getInitialState<{
-    _version: 1;
-    pendingControlImages: string[];
-  }>({
-    _version: 1,
-    pendingControlImages: [],
-  });
+export const initialControlAdaptersState: ControlAdaptersState = caAdapter.getInitialState<{
+  _version: 1;
+  pendingControlImages: string[];
+}>({
+  _version: 1,
+  pendingControlImages: [],
+});
 
 export const selectAllControlNets = (controlAdapters: ControlAdaptersState) =>
   selectControlAdapterAll(controlAdapters).filter(isControlNet);
@@ -70,8 +61,7 @@ export const selectValidControlNets = (controlAdapters: ControlAdaptersState) =>
       (ca) =>
         ca.isEnabled &&
         ca.model &&
-        (Boolean(ca.processedControlImage) ||
-          (ca.processorType === 'none' && Boolean(ca.controlImage)))
+        (Boolean(ca.processedControlImage) || (ca.processorType === 'none' && Boolean(ca.controlImage)))
     );
 
 export const selectAllIPAdapters = (controlAdapters: ControlAdaptersState) =>
@@ -92,8 +82,7 @@ export const selectValidT2IAdapters = (controlAdapters: ControlAdaptersState) =>
       (ca) =>
         ca.isEnabled &&
         ca.model &&
-        (Boolean(ca.processedControlImage) ||
-          (ca.processorType === 'none' && Boolean(ca.controlImage)))
+        (Boolean(ca.processedControlImage) || (ca.processorType === 'none' && Boolean(ca.controlImage)))
     );
 
 export const controlAdaptersSlice = createSlice({
@@ -112,20 +101,11 @@ export const controlAdaptersSlice = createSlice({
         const { id, type, overrides } = action.payload;
         caAdapter.addOne(state, buildControlAdapter(id, type, overrides));
       },
-      prepare: ({
-        type,
-        overrides,
-      }: {
-        type: ControlAdapterType;
-        overrides?: Partial<ControlAdapterConfig>;
-      }) => {
+      prepare: ({ type, overrides }: { type: ControlAdapterType; overrides?: Partial<ControlAdapterConfig> }) => {
         return { payload: { id: uuidv4(), type, overrides } };
       },
     },
-    controlAdapterRecalled: (
-      state,
-      action: PayloadAction<ControlAdapterConfig>
-    ) => {
+    controlAdapterRecalled: (state, action: PayloadAction<ControlAdapterConfig>) => {
       caAdapter.addOne(state, action.payload);
     },
     controlAdapterDuplicated: {
@@ -161,25 +141,16 @@ export const controlAdaptersSlice = createSlice({
         }>
       ) => {
         const { id, type, controlImage } = action.payload;
-        caAdapter.addOne(
-          state,
-          buildControlAdapter(id, type, { controlImage })
-        );
+        caAdapter.addOne(state, buildControlAdapter(id, type, { controlImage }));
       },
-      prepare: (payload: {
-        type: ControlAdapterType;
-        controlImage: string;
-      }) => {
+      prepare: (payload: { type: ControlAdapterType; controlImage: string }) => {
         return { payload: { ...payload, id: uuidv4() } };
       },
     },
     controlAdapterRemoved: (state, action: PayloadAction<{ id: string }>) => {
       caAdapter.removeOne(state, action.payload.id);
     },
-    controlAdapterIsEnabledChanged: (
-      state,
-      action: PayloadAction<{ id: string; isEnabled: boolean }>
-    ) => {
+    controlAdapterIsEnabledChanged: (state, action: PayloadAction<{ id: string; isEnabled: boolean }>) => {
       const { id, isEnabled } = action.payload;
       caAdapter.updateOne(state, { id, changes: { isEnabled } });
     },
@@ -201,11 +172,7 @@ export const controlAdaptersSlice = createSlice({
         changes: { controlImage, processedControlImage: null },
       });
 
-      if (
-        controlImage !== null &&
-        isControlNetOrT2IAdapter(ca) &&
-        ca.processorType !== 'none'
-      ) {
+      if (controlImage !== null && isControlNetOrT2IAdapter(ca) && ca.processorType !== 'none') {
         state.pendingControlImages.push(id);
       }
     },
@@ -233,14 +200,9 @@ export const controlAdaptersSlice = createSlice({
         },
       });
 
-      state.pendingControlImages = state.pendingControlImages.filter(
-        (pendingId) => pendingId !== id
-      );
+      state.pendingControlImages = state.pendingControlImages.filter((pendingId) => pendingId !== id);
     },
-    controlAdapterModelCleared: (
-      state,
-      action: PayloadAction<{ id: string }>
-    ) => {
+    controlAdapterModelCleared: (state, action: PayloadAction<{ id: string }>) => {
       caAdapter.updateOne(state, {
         id: action.payload.id,
         changes: { model: null },
@@ -250,10 +212,7 @@ export const controlAdaptersSlice = createSlice({
       state,
       action: PayloadAction<{
         id: string;
-        model:
-          | ParameterControlNetModel
-          | ParameterT2IAdapterModel
-          | ParameterIPAdapterModel;
+        model: ParameterControlNetModel | ParameterT2IAdapterModel | ParameterIPAdapterModel;
       }>
     ) => {
       const { id, model } = action.payload;
@@ -278,8 +237,7 @@ export const controlAdaptersSlice = createSlice({
 
       for (const modelSubstring in CONTROLADAPTER_MODEL_DEFAULT_PROCESSORS) {
         if (model.model_name.includes(modelSubstring)) {
-          processorType =
-            CONTROLADAPTER_MODEL_DEFAULT_PROCESSORS[modelSubstring];
+          processorType = CONTROLADAPTER_MODEL_DEFAULT_PROCESSORS[modelSubstring];
           break;
         }
       }
@@ -290,37 +248,24 @@ export const controlAdaptersSlice = createSlice({
           .default as RequiredControlAdapterProcessorNode;
       } else {
         update.changes.processorType = 'none';
-        update.changes.processorNode = CONTROLNET_PROCESSORS.none
-          .default as RequiredControlAdapterProcessorNode;
+        update.changes.processorNode = CONTROLNET_PROCESSORS.none.default as RequiredControlAdapterProcessorNode;
       }
 
       caAdapter.updateOne(state, update);
     },
-    controlAdapterWeightChanged: (
-      state,
-      action: PayloadAction<{ id: string; weight: number }>
-    ) => {
+    controlAdapterWeightChanged: (state, action: PayloadAction<{ id: string; weight: number }>) => {
       const { id, weight } = action.payload;
       caAdapter.updateOne(state, { id, changes: { weight } });
     },
-    controlAdapterBeginStepPctChanged: (
-      state,
-      action: PayloadAction<{ id: string; beginStepPct: number }>
-    ) => {
+    controlAdapterBeginStepPctChanged: (state, action: PayloadAction<{ id: string; beginStepPct: number }>) => {
       const { id, beginStepPct } = action.payload;
       caAdapter.updateOne(state, { id, changes: { beginStepPct } });
     },
-    controlAdapterEndStepPctChanged: (
-      state,
-      action: PayloadAction<{ id: string; endStepPct: number }>
-    ) => {
+    controlAdapterEndStepPctChanged: (state, action: PayloadAction<{ id: string; endStepPct: number }>) => {
       const { id, endStepPct } = action.payload;
       caAdapter.updateOne(state, { id, changes: { endStepPct } });
     },
-    controlAdapterControlModeChanged: (
-      state,
-      action: PayloadAction<{ id: string; controlMode: ControlMode }>
-    ) => {
+    controlAdapterControlModeChanged: (state, action: PayloadAction<{ id: string; controlMode: ControlMode }>) => {
       const { id, controlMode } = action.payload;
       const cn = selectControlAdapterById(state, id);
       if (!cn || !isControlNet(cn)) {
@@ -415,8 +360,7 @@ export const controlAdaptersSlice = createSlice({
 
         for (const modelSubstring in CONTROLADAPTER_MODEL_DEFAULT_PROCESSORS) {
           if (cn.model?.model_name.includes(modelSubstring)) {
-            processorType =
-              CONTROLADAPTER_MODEL_DEFAULT_PROCESSORS[modelSubstring];
+            processorType = CONTROLADAPTER_MODEL_DEFAULT_PROCESSORS[modelSubstring];
             break;
           }
         }
@@ -427,8 +371,7 @@ export const controlAdaptersSlice = createSlice({
             .default as RequiredControlAdapterProcessorNode;
         } else {
           update.changes.processorType = 'none';
-          update.changes.processorNode = CONTROLNET_PROCESSORS.none
-            .default as RequiredControlAdapterProcessorNode;
+          update.changes.processorNode = CONTROLNET_PROCESSORS.none.default as RequiredControlAdapterProcessorNode;
         }
       }
 
@@ -448,9 +391,7 @@ export const controlAdaptersSlice = createSlice({
         return;
       }
       if (cn.controlImage !== null) {
-        state.pendingControlImages = uniq(
-          state.pendingControlImages.concat(action.payload.id)
-        );
+        state.pendingControlImages = uniq(state.pendingControlImages.concat(action.payload.id));
       }
     });
 
@@ -491,8 +432,7 @@ export const isAnyControlAdapterAdded = isAnyOf(
   controlAdapterRecalled
 );
 
-export const selectControlAdaptersSlice = (state: RootState) =>
-  state.controlAdapters;
+export const selectControlAdaptersSlice = (state: RootState) => state.controlAdapters;
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const migrateControlAdaptersState = (state: any): any => {
diff --git a/invokeai/frontend/web/src/features/controlAdapters/store/types.ts b/invokeai/frontend/web/src/features/controlAdapters/store/types.ts
index 87366a443d..86aff63155 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/store/types.ts
+++ b/invokeai/frontend/web/src/features/controlAdapters/store/types.ts
@@ -47,9 +47,7 @@ export type ControlAdapterProcessorNode =
 /**
  * Any ControlNet processor type
  */
-export type ControlAdapterProcessorType = NonNullable<
-  ControlAdapterProcessorNode['type'] | 'none'
->;
+export type ControlAdapterProcessorType = NonNullable<ControlAdapterProcessorNode['type'] | 'none'>;
 
 /**
  * The Canny processor node, with parameters flagged as required
@@ -85,9 +83,8 @@ export type RequiredDepthAnythingImageProcessorInvocation = O.Required<
 
 export const zDepthAnythingModelSize = z.enum(['large', 'base', 'small']);
 export type DepthAnythingModelSize = z.infer<typeof zDepthAnythingModelSize>;
-export const isDepthAnythingModelSize = (
-  v: unknown
-): v is DepthAnythingModelSize => zDepthAnythingModelSize.safeParse(v).success;
+export const isDepthAnythingModelSize = (v: unknown): v is DepthAnythingModelSize =>
+  zDepthAnythingModelSize.safeParse(v).success;
 
 /**
  * The HED processor node, with parameters flagged as required
@@ -164,10 +161,7 @@ export type RequiredPidiImageProcessorInvocation = O.Required<
 /**
  * The ZoeDepth processor node, with parameters flagged as required
  */
-export type RequiredZoeDepthImageProcessorInvocation = O.Required<
-  ZoeDepthImageProcessorInvocation,
-  'type'
->;
+export type RequiredZoeDepthImageProcessorInvocation = O.Required<ZoeDepthImageProcessorInvocation, 'type'>;
 
 /**
  * Any ControlNet Processor node, with its parameters flagged as required
@@ -195,9 +189,7 @@ export type RequiredControlAdapterProcessorNode =
 /**
  * Type guard for CannyImageProcessorInvocation
  */
-export const isCannyImageProcessorInvocation = (
-  obj: unknown
-): obj is CannyImageProcessorInvocation => {
+export const isCannyImageProcessorInvocation = (obj: unknown): obj is CannyImageProcessorInvocation => {
   if (isObject(obj) && 'type' in obj && obj.type === 'canny_image_processor') {
     return true;
   }
@@ -207,14 +199,8 @@ export const isCannyImageProcessorInvocation = (
 /**
  * Type guard for ColorMapImageProcessorInvocation
  */
-export const isColorMapImageProcessorInvocation = (
-  obj: unknown
-): obj is ColorMapImageProcessorInvocation => {
-  if (
-    isObject(obj) &&
-    'type' in obj &&
-    obj.type === 'color_map_image_processor'
-  ) {
+export const isColorMapImageProcessorInvocation = (obj: unknown): obj is ColorMapImageProcessorInvocation => {
+  if (isObject(obj) && 'type' in obj && obj.type === 'color_map_image_processor') {
     return true;
   }
   return false;
@@ -226,11 +212,7 @@ export const isColorMapImageProcessorInvocation = (
 export const isContentShuffleImageProcessorInvocation = (
   obj: unknown
 ): obj is ContentShuffleImageProcessorInvocation => {
-  if (
-    isObject(obj) &&
-    'type' in obj &&
-    obj.type === 'content_shuffle_image_processor'
-  ) {
+  if (isObject(obj) && 'type' in obj && obj.type === 'content_shuffle_image_processor') {
     return true;
   }
   return false;
@@ -239,14 +221,8 @@ export const isContentShuffleImageProcessorInvocation = (
 /**
  * Type guard for DepthAnythingImageProcessorInvocation
  */
-export const isDepthAnythingImageProcessorInvocation = (
-  obj: unknown
-): obj is DepthAnythingImageProcessorInvocation => {
-  if (
-    isObject(obj) &&
-    'type' in obj &&
-    obj.type === 'depth_anything_image_processor'
-  ) {
+export const isDepthAnythingImageProcessorInvocation = (obj: unknown): obj is DepthAnythingImageProcessorInvocation => {
+  if (isObject(obj) && 'type' in obj && obj.type === 'depth_anything_image_processor') {
     return true;
   }
   return false;
@@ -255,9 +231,7 @@ export const isDepthAnythingImageProcessorInvocation = (
 /**
  * Type guard for HedImageprocessorInvocation
  */
-export const isHedImageprocessorInvocation = (
-  obj: unknown
-): obj is HedImageProcessorInvocation => {
+export const isHedImageprocessorInvocation = (obj: unknown): obj is HedImageProcessorInvocation => {
   if (isObject(obj) && 'type' in obj && obj.type === 'hed_image_processor') {
     return true;
   }
@@ -267,14 +241,8 @@ export const isHedImageprocessorInvocation = (
 /**
  * Type guard for LineartAnimeImageProcessorInvocation
  */
-export const isLineartAnimeImageProcessorInvocation = (
-  obj: unknown
-): obj is LineartAnimeImageProcessorInvocation => {
-  if (
-    isObject(obj) &&
-    'type' in obj &&
-    obj.type === 'lineart_anime_image_processor'
-  ) {
+export const isLineartAnimeImageProcessorInvocation = (obj: unknown): obj is LineartAnimeImageProcessorInvocation => {
+  if (isObject(obj) && 'type' in obj && obj.type === 'lineart_anime_image_processor') {
     return true;
   }
   return false;
@@ -283,14 +251,8 @@ export const isLineartAnimeImageProcessorInvocation = (
 /**
  * Type guard for LineartImageProcessorInvocation
  */
-export const isLineartImageProcessorInvocation = (
-  obj: unknown
-): obj is LineartImageProcessorInvocation => {
-  if (
-    isObject(obj) &&
-    'type' in obj &&
-    obj.type === 'lineart_image_processor'
-  ) {
+export const isLineartImageProcessorInvocation = (obj: unknown): obj is LineartImageProcessorInvocation => {
+  if (isObject(obj) && 'type' in obj && obj.type === 'lineart_image_processor') {
     return true;
   }
   return false;
@@ -299,14 +261,8 @@ export const isLineartImageProcessorInvocation = (
 /**
  * Type guard for MediapipeFaceProcessorInvocation
  */
-export const isMediapipeFaceProcessorInvocation = (
-  obj: unknown
-): obj is MediapipeFaceProcessorInvocation => {
-  if (
-    isObject(obj) &&
-    'type' in obj &&
-    obj.type === 'mediapipe_face_processor'
-  ) {
+export const isMediapipeFaceProcessorInvocation = (obj: unknown): obj is MediapipeFaceProcessorInvocation => {
+  if (isObject(obj) && 'type' in obj && obj.type === 'mediapipe_face_processor') {
     return true;
   }
   return false;
@@ -315,14 +271,8 @@ export const isMediapipeFaceProcessorInvocation = (
 /**
  * Type guard for MidasDepthImageProcessorInvocation
  */
-export const isMidasDepthImageProcessorInvocation = (
-  obj: unknown
-): obj is MidasDepthImageProcessorInvocation => {
-  if (
-    isObject(obj) &&
-    'type' in obj &&
-    obj.type === 'midas_depth_image_processor'
-  ) {
+export const isMidasDepthImageProcessorInvocation = (obj: unknown): obj is MidasDepthImageProcessorInvocation => {
+  if (isObject(obj) && 'type' in obj && obj.type === 'midas_depth_image_processor') {
     return true;
   }
   return false;
@@ -331,9 +281,7 @@ export const isMidasDepthImageProcessorInvocation = (
 /**
  * Type guard for MlsdImageProcessorInvocation
  */
-export const isMlsdImageProcessorInvocation = (
-  obj: unknown
-): obj is MlsdImageProcessorInvocation => {
+export const isMlsdImageProcessorInvocation = (obj: unknown): obj is MlsdImageProcessorInvocation => {
   if (isObject(obj) && 'type' in obj && obj.type === 'mlsd_image_processor') {
     return true;
   }
@@ -343,14 +291,8 @@ export const isMlsdImageProcessorInvocation = (
 /**
  * Type guard for NormalbaeImageProcessorInvocation
  */
-export const isNormalbaeImageProcessorInvocation = (
-  obj: unknown
-): obj is NormalbaeImageProcessorInvocation => {
-  if (
-    isObject(obj) &&
-    'type' in obj &&
-    obj.type === 'normalbae_image_processor'
-  ) {
+export const isNormalbaeImageProcessorInvocation = (obj: unknown): obj is NormalbaeImageProcessorInvocation => {
+  if (isObject(obj) && 'type' in obj && obj.type === 'normalbae_image_processor') {
     return true;
   }
   return false;
@@ -359,14 +301,8 @@ export const isNormalbaeImageProcessorInvocation = (
 /**
  * Type guard for OpenposeImageProcessorInvocation
  */
-export const isOpenposeImageProcessorInvocation = (
-  obj: unknown
-): obj is OpenposeImageProcessorInvocation => {
-  if (
-    isObject(obj) &&
-    'type' in obj &&
-    obj.type === 'openpose_image_processor'
-  ) {
+export const isOpenposeImageProcessorInvocation = (obj: unknown): obj is OpenposeImageProcessorInvocation => {
+  if (isObject(obj) && 'type' in obj && obj.type === 'openpose_image_processor') {
     return true;
   }
   return false;
@@ -375,9 +311,7 @@ export const isOpenposeImageProcessorInvocation = (
 /**
  * Type guard for PidiImageProcessorInvocation
  */
-export const isPidiImageProcessorInvocation = (
-  obj: unknown
-): obj is PidiImageProcessorInvocation => {
+export const isPidiImageProcessorInvocation = (obj: unknown): obj is PidiImageProcessorInvocation => {
   if (isObject(obj) && 'type' in obj && obj.type === 'pidi_image_processor') {
     return true;
   }
@@ -387,32 +321,18 @@ export const isPidiImageProcessorInvocation = (
 /**
  * Type guard for ZoeDepthImageProcessorInvocation
  */
-export const isZoeDepthImageProcessorInvocation = (
-  obj: unknown
-): obj is ZoeDepthImageProcessorInvocation => {
-  if (
-    isObject(obj) &&
-    'type' in obj &&
-    obj.type === 'zoe_depth_image_processor'
-  ) {
+export const isZoeDepthImageProcessorInvocation = (obj: unknown): obj is ZoeDepthImageProcessorInvocation => {
+  if (isObject(obj) && 'type' in obj && obj.type === 'zoe_depth_image_processor') {
     return true;
   }
   return false;
 };
 
-export type ControlMode = NonNullable<
-  components['schemas']['ControlNetInvocation']['control_mode']
->;
+export type ControlMode = NonNullable<components['schemas']['ControlNetInvocation']['control_mode']>;
 
-export const zResizeMode = z.enum([
-  'just_resize',
-  'crop_resize',
-  'fill_resize',
-  'just_resize_simple',
-]);
+export const zResizeMode = z.enum(['just_resize', 'crop_resize', 'fill_resize', 'just_resize_simple']);
 export type ResizeMode = z.infer<typeof zResizeMode>;
-export const isResizeMode = (v: unknown): v is ResizeMode =>
-  zResizeMode.safeParse(v).success;
+export const isResizeMode = (v: unknown): v is ResizeMode => zResizeMode.safeParse(v).success;
 
 export type ControlNetConfig = {
   type: 'controlnet';
@@ -458,10 +378,7 @@ export type IPAdapterConfig = {
   endStepPct: number;
 };
 
-export type ControlAdapterConfig =
-  | ControlNetConfig
-  | IPAdapterConfig
-  | T2IAdapterConfig;
+export type ControlAdapterConfig = ControlNetConfig | IPAdapterConfig | T2IAdapterConfig;
 
 export type ControlAdapterType = ControlAdapterConfig['type'];
 
@@ -469,21 +386,15 @@ export type ControlAdaptersState = EntityState<ControlAdapterConfig, string> & {
   pendingControlImages: string[];
 };
 
-export const isControlNet = (
-  controlAdapter: ControlAdapterConfig
-): controlAdapter is ControlNetConfig => {
+export const isControlNet = (controlAdapter: ControlAdapterConfig): controlAdapter is ControlNetConfig => {
   return controlAdapter.type === 'controlnet';
 };
 
-export const isIPAdapter = (
-  controlAdapter: ControlAdapterConfig
-): controlAdapter is IPAdapterConfig => {
+export const isIPAdapter = (controlAdapter: ControlAdapterConfig): controlAdapter is IPAdapterConfig => {
   return controlAdapter.type === 'ip_adapter';
 };
 
-export const isT2IAdapter = (
-  controlAdapter: ControlAdapterConfig
-): controlAdapter is T2IAdapterConfig => {
+export const isT2IAdapter = (controlAdapter: ControlAdapterConfig): controlAdapter is T2IAdapterConfig => {
   return controlAdapter.type === 't2i_adapter';
 };
 
diff --git a/invokeai/frontend/web/src/features/controlAdapters/util/buildControlAdapter.ts b/invokeai/frontend/web/src/features/controlAdapters/util/buildControlAdapter.ts
index fb8a019570..34803b3de3 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/util/buildControlAdapter.ts
+++ b/invokeai/frontend/web/src/features/controlAdapters/util/buildControlAdapter.ts
@@ -21,8 +21,7 @@ export const initialControlNet: Omit<ControlNetConfig, 'id'> = {
   controlImage: null,
   processedControlImage: null,
   processorType: 'canny_image_processor',
-  processorNode: CONTROLNET_PROCESSORS.canny_image_processor
-    .default as RequiredCannyImageProcessorInvocation,
+  processorNode: CONTROLNET_PROCESSORS.canny_image_processor.default as RequiredCannyImageProcessorInvocation,
   shouldAutoConfig: true,
 };
 
@@ -37,8 +36,7 @@ export const initialT2IAdapter: Omit<T2IAdapterConfig, 'id'> = {
   controlImage: null,
   processedControlImage: null,
   processorType: 'canny_image_processor',
-  processorNode: CONTROLNET_PROCESSORS.canny_image_processor
-    .default as RequiredCannyImageProcessorInvocation,
+  processorNode: CONTROLNET_PROCESSORS.canny_image_processor.default as RequiredCannyImageProcessorInvocation,
   shouldAutoConfig: true,
 };
 
diff --git a/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx b/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx
index 2909559975..5783fe4ffc 100644
--- a/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx
+++ b/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx
@@ -1,21 +1,10 @@
-import {
-  ConfirmationAlertDialog,
-  Divider,
-  Flex,
-  FormControl,
-  FormLabel,
-  Switch,
-  Text,
-} from '@invoke-ai/ui-library';
+import { ConfirmationAlertDialog, Divider, Flex, FormControl, FormLabel, Switch, Text } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
 import { selectControlAdaptersSlice } from 'features/controlAdapters/store/controlAdaptersSlice';
 import { imageDeletionConfirmed } from 'features/deleteImageModal/store/actions';
-import {
-  getImageUsage,
-  selectImageUsage,
-} from 'features/deleteImageModal/store/selectors';
+import { getImageUsage, selectImageUsage } from 'features/deleteImageModal/store/selectors';
 import {
   imageDeletionCanceled,
   isModalOpenChanged,
@@ -41,14 +30,7 @@ const selectImageUsages = createMemoizedSelector(
     selectControlAdaptersSlice,
     selectImageUsage,
   ],
-  (
-    deleteImageModal,
-    generation,
-    canvas,
-    nodes,
-    controlAdapters,
-    imagesUsage
-  ) => {
+  (deleteImageModal, generation, canvas, nodes, controlAdapters, imagesUsage) => {
     const { imagesToDelete } = deleteImageModal;
 
     const allImageUsage = (imagesToDelete ?? []).map(({ image_name }) =>
@@ -73,19 +55,13 @@ const selectImageUsages = createMemoizedSelector(
 const DeleteImageModal = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
-  const shouldConfirmOnDelete = useAppSelector(
-    (s) => s.system.shouldConfirmOnDelete
-  );
-  const canRestoreDeletedImagesFromBin = useAppSelector(
-    (s) => s.config.canRestoreDeletedImagesFromBin
-  );
+  const shouldConfirmOnDelete = useAppSelector((s) => s.system.shouldConfirmOnDelete);
+  const canRestoreDeletedImagesFromBin = useAppSelector((s) => s.config.canRestoreDeletedImagesFromBin);
   const isModalOpen = useAppSelector((s) => s.deleteImageModal.isModalOpen);
-  const { imagesToDelete, imagesUsage, imageUsageSummary } =
-    useAppSelector(selectImageUsages);
+  const { imagesToDelete, imagesUsage, imageUsageSummary } = useAppSelector(selectImageUsages);
 
   const handleChangeShouldConfirmOnDelete = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) =>
-      dispatch(setShouldConfirmOnDelete(!e.target.checked)),
+    (e: ChangeEvent<HTMLInputElement>) => dispatch(setShouldConfirmOnDelete(!e.target.checked)),
     [dispatch]
   );
 
@@ -99,9 +75,7 @@ const DeleteImageModal = () => {
       return;
     }
     dispatch(imageDeletionCanceled());
-    dispatch(
-      imageDeletionConfirmed({ imageDTOs: imagesToDelete, imagesUsage })
-    );
+    dispatch(imageDeletionConfirmed({ imageDTOs: imagesToDelete, imagesUsage }));
   }, [dispatch, imagesToDelete, imagesUsage]);
 
   return (
@@ -116,18 +90,11 @@ const DeleteImageModal = () => {
       <Flex direction="column" gap={3}>
         <ImageUsageMessage imageUsage={imageUsageSummary} />
         <Divider />
-        <Text>
-          {canRestoreDeletedImagesFromBin
-            ? t('gallery.deleteImageBin')
-            : t('gallery.deleteImagePermanent')}
-        </Text>
+        <Text>{canRestoreDeletedImagesFromBin ? t('gallery.deleteImageBin') : t('gallery.deleteImagePermanent')}</Text>
         <Text>{t('common.areYouSure')}</Text>
         <FormControl>
           <FormLabel>{t('common.dontAskMeAgain')}</FormLabel>
-          <Switch
-            isChecked={!shouldConfirmOnDelete}
-            onChange={handleChangeShouldConfirmOnDelete}
-          />
+          <Switch isChecked={!shouldConfirmOnDelete} onChange={handleChangeShouldConfirmOnDelete} />
         </FormControl>
       </Flex>
     </ConfirmationAlertDialog>
diff --git a/invokeai/frontend/web/src/features/deleteImageModal/components/ImageUsageMessage.tsx b/invokeai/frontend/web/src/features/deleteImageModal/components/ImageUsageMessage.tsx
index 756582c287..5a6856f346 100644
--- a/invokeai/frontend/web/src/features/deleteImageModal/components/ImageUsageMessage.tsx
+++ b/invokeai/frontend/web/src/features/deleteImageModal/components/ImageUsageMessage.tsx
@@ -29,18 +29,10 @@ const ImageUsageMessage = (props: Props) => {
     <>
       <Text>{topMessage}</Text>
       <UnorderedList paddingInlineStart={6}>
-        {imageUsage.isInitialImage && (
-          <ListItem>{t('common.img2img')}</ListItem>
-        )}
-        {imageUsage.isCanvasImage && (
-          <ListItem>{t('common.unifiedCanvas')}</ListItem>
-        )}
-        {imageUsage.isControlImage && (
-          <ListItem>{t('common.controlNet')}</ListItem>
-        )}
-        {imageUsage.isNodesImage && (
-          <ListItem>{t('common.nodeEditor')}</ListItem>
-        )}
+        {imageUsage.isInitialImage && <ListItem>{t('common.img2img')}</ListItem>}
+        {imageUsage.isCanvasImage && <ListItem>{t('common.unifiedCanvas')}</ListItem>}
+        {imageUsage.isControlImage && <ListItem>{t('common.controlNet')}</ListItem>}
+        {imageUsage.isNodesImage && <ListItem>{t('common.nodeEditor')}</ListItem>}
       </UnorderedList>
       <Text>{bottomMessage}</Text>
     </>
diff --git a/invokeai/frontend/web/src/features/deleteImageModal/store/selectors.ts b/invokeai/frontend/web/src/features/deleteImageModal/store/selectors.ts
index 24192647fc..f54f9a0dbb 100644
--- a/invokeai/frontend/web/src/features/deleteImageModal/store/selectors.ts
+++ b/invokeai/frontend/web/src/features/deleteImageModal/store/selectors.ts
@@ -27,23 +27,17 @@ export const getImageUsage = (
 ) => {
   const isInitialImage = generation.initialImage?.imageName === image_name;
 
-  const isCanvasImage = canvas.layerState.objects.some(
-    (obj) => obj.kind === 'image' && obj.imageName === image_name
-  );
+  const isCanvasImage = canvas.layerState.objects.some((obj) => obj.kind === 'image' && obj.imageName === image_name);
 
   const isNodesImage = nodes.nodes.filter(isInvocationNode).some((node) => {
     return some(
       node.data.inputs,
-      (input) =>
-        isImageFieldInputInstance(input) &&
-        input.value?.image_name === image_name
+      (input) => isImageFieldInputInstance(input) && input.value?.image_name === image_name
     );
   });
 
   const isControlImage = selectControlAdapterAll(controlAdapters).some(
-    (ca) =>
-      ca.controlImage === image_name ||
-      (isControlNetOrT2IAdapter(ca) && ca.processedControlImage === image_name)
+    (ca) => ca.controlImage === image_name || (isControlNetOrT2IAdapter(ca) && ca.processedControlImage === image_name)
   );
 
   const imageUsage: ImageUsage = {
diff --git a/invokeai/frontend/web/src/features/deleteImageModal/store/slice.ts b/invokeai/frontend/web/src/features/deleteImageModal/store/slice.ts
index 03d1901d99..268602c350 100644
--- a/invokeai/frontend/web/src/features/deleteImageModal/store/slice.ts
+++ b/invokeai/frontend/web/src/features/deleteImageModal/store/slice.ts
@@ -22,13 +22,8 @@ const deleteImageModal = createSlice({
   },
 });
 
-export const {
-  isModalOpenChanged,
-  imagesToDeleteSelected,
-  imageDeletionCanceled,
-} = deleteImageModal.actions;
+export const { isModalOpenChanged, imagesToDeleteSelected, imageDeletionCanceled } = deleteImageModal.actions;
 
 export default deleteImageModal.reducer;
 
-export const selectDeleteImageModalSlice = (state: RootState) =>
-  state.deleteImageModal;
+export const selectDeleteImageModalSlice = (state: RootState) => state.deleteImageModal;
diff --git a/invokeai/frontend/web/src/features/dnd/components/AppDndContext.tsx b/invokeai/frontend/web/src/features/dnd/components/AppDndContext.tsx
index 0fe069f68a..f800e5c869 100644
--- a/invokeai/frontend/web/src/features/dnd/components/AppDndContext.tsx
+++ b/invokeai/frontend/web/src/features/dnd/components/AppDndContext.tsx
@@ -4,11 +4,7 @@ import { dndDropped } from 'app/store/middleware/listenerMiddleware/listeners/im
 import { useAppDispatch } from 'app/store/storeHooks';
 import { parseify } from 'common/util/serialize';
 import DndOverlay from 'features/dnd/components/DndOverlay';
-import type {
-  DragEndEvent,
-  DragStartEvent,
-  TypesafeDraggableData,
-} from 'features/dnd/types';
+import type { DragEndEvent, DragStartEvent, TypesafeDraggableData } from 'features/dnd/types';
 import { customPointerWithin } from 'features/dnd/util/customPointerWithin';
 import type { PropsWithChildren } from 'react';
 import { memo, useCallback, useState } from 'react';
@@ -16,18 +12,14 @@ import { memo, useCallback, useState } from 'react';
 import { DndContextTypesafe } from './DndContextTypesafe';
 
 const AppDndContext = (props: PropsWithChildren) => {
-  const [activeDragData, setActiveDragData] =
-    useState<TypesafeDraggableData | null>(null);
+  const [activeDragData, setActiveDragData] = useState<TypesafeDraggableData | null>(null);
   const log = logger('images');
 
   const dispatch = useAppDispatch();
 
   const handleDragStart = useCallback(
     (event: DragStartEvent) => {
-      log.trace(
-        { dragData: parseify(event.active.data.current) },
-        'Drag started'
-      );
+      log.trace({ dragData: parseify(event.active.data.current) }, 'Drag started');
       const activeData = event.active.data.current;
       if (!activeData) {
         return;
@@ -39,10 +31,7 @@ const AppDndContext = (props: PropsWithChildren) => {
 
   const handleDragEnd = useCallback(
     (event: DragEndEvent) => {
-      log.trace(
-        { dragData: parseify(event.active.data.current) },
-        'Drag ended'
-      );
+      log.trace({ dragData: parseify(event.active.data.current) }, 'Drag ended');
       const overData = event.over?.data.current;
       if (!activeDragData || !overData) {
         return;
diff --git a/invokeai/frontend/web/src/features/dnd/components/DndOverlay.tsx b/invokeai/frontend/web/src/features/dnd/components/DndOverlay.tsx
index 263ebf928c..34067c9b46 100644
--- a/invokeai/frontend/web/src/features/dnd/components/DndOverlay.tsx
+++ b/invokeai/frontend/web/src/features/dnd/components/DndOverlay.tsx
@@ -17,19 +17,10 @@ const DndOverlay = (props: DndOverlayProps) => {
   const modifiers = useMemo(() => [scaledModifier], [scaledModifier]);
 
   return (
-    <DragOverlay
-      dropAnimation={null}
-      modifiers={modifiers}
-      style={dragOverlayStyles}
-    >
+    <DragOverlay dropAnimation={null} modifiers={modifiers} style={dragOverlayStyles}>
       <AnimatePresence>
         {props.activeDragData && (
-          <motion.div
-            layout
-            key="overlay-drag-image"
-            initial={initial}
-            animate={animate}
-          >
+          <motion.div layout key="overlay-drag-image" initial={initial} animate={animate}>
             <DragPreview dragData={props.activeDragData} />
           </motion.div>
         )}
diff --git a/invokeai/frontend/web/src/features/dnd/components/DragPreview.tsx b/invokeai/frontend/web/src/features/dnd/components/DragPreview.tsx
index e9f6c6ee4d..9c4b715953 100644
--- a/invokeai/frontend/web/src/features/dnd/components/DragPreview.tsx
+++ b/invokeai/frontend/web/src/features/dnd/components/DragPreview.tsx
@@ -61,21 +61,8 @@ const DragPreview = (props: OverlayDragImageProps) => {
   if (props.dragData.payloadType === 'IMAGE_DTO') {
     const { thumbnail_url, width, height } = props.dragData.payload.imageDTO;
     return (
-      <Box
-        position="relative"
-        width="full"
-        height="full"
-        display="flex"
-        alignItems="center"
-        justifyContent="center"
-      >
-        <Image
-          sx={imageStyles}
-          objectFit="contain"
-          src={thumbnail_url}
-          width={width}
-          height={height}
-        />
+      <Box position="relative" width="full" height="full" display="flex" alignItems="center" justifyContent="center">
+        <Image sx={imageStyles} objectFit="contain" src={thumbnail_url} width={width} height={height} />
       </Box>
     );
   }
diff --git a/invokeai/frontend/web/src/features/dnd/hooks/useScaledCenteredModifer.ts b/invokeai/frontend/web/src/features/dnd/hooks/useScaledCenteredModifer.ts
index e2ef6ab75c..2816fc4830 100644
--- a/invokeai/frontend/web/src/features/dnd/hooks/useScaledCenteredModifer.ts
+++ b/invokeai/frontend/web/src/features/dnd/hooks/useScaledCenteredModifer.ts
@@ -6,10 +6,8 @@ import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { useCallback } from 'react';
 
-const selectZoom = createSelector(
-  [selectNodesSlice, activeTabNameSelector],
-  (nodes, activeTabName) =>
-    activeTabName === 'nodes' ? nodes.viewport.zoom : 1
+const selectZoom = createSelector([selectNodesSlice, activeTabNameSelector], (nodes, activeTabName) =>
+  activeTabName === 'nodes' ? nodes.viewport.zoom : 1
 );
 
 /**
diff --git a/invokeai/frontend/web/src/features/dnd/types/index.ts b/invokeai/frontend/web/src/features/dnd/types/index.ts
index ac62eb65cd..6e680b4ba9 100644
--- a/invokeai/frontend/web/src/features/dnd/types/index.ts
+++ b/invokeai/frontend/web/src/features/dnd/types/index.ts
@@ -11,10 +11,7 @@ import type {
   UseDroppableArguments,
 } from '@dnd-kit/core';
 import type { BoardId } from 'features/gallery/store/types';
-import type {
-  FieldInputInstance,
-  FieldInputTemplate,
-} from 'features/nodes/types/field';
+import type { FieldInputInstance, FieldInputTemplate } from 'features/nodes/types/field';
 import type { ImageDTO } from 'services/api/types';
 
 type BaseDropData = {
@@ -93,33 +90,22 @@ export type GallerySelectionDraggableData = BaseDragData & {
   payload: { boardId: BoardId };
 };
 
-export type TypesafeDraggableData =
-  | NodeFieldDraggableData
-  | ImageDraggableData
-  | GallerySelectionDraggableData;
+export type TypesafeDraggableData = NodeFieldDraggableData | ImageDraggableData | GallerySelectionDraggableData;
 
-export interface UseDroppableTypesafeArguments
-  extends Omit<UseDroppableArguments, 'data'> {
+export interface UseDroppableTypesafeArguments extends Omit<UseDroppableArguments, 'data'> {
   data?: TypesafeDroppableData;
 }
 
-export type UseDroppableTypesafeReturnValue = Omit<
-  ReturnType<typeof useOriginalDroppable>,
-  'active' | 'over'
-> & {
+export type UseDroppableTypesafeReturnValue = Omit<ReturnType<typeof useOriginalDroppable>, 'active' | 'over'> & {
   active: TypesafeActive | null;
   over: TypesafeOver | null;
 };
 
-export interface UseDraggableTypesafeArguments
-  extends Omit<UseDraggableArguments, 'data'> {
+export interface UseDraggableTypesafeArguments extends Omit<UseDraggableArguments, 'data'> {
   data?: TypesafeDraggableData;
 }
 
-export type UseDraggableTypesafeReturnValue = Omit<
-  ReturnType<typeof useOriginalDraggable>,
-  'active' | 'over'
-> & {
+export type UseDraggableTypesafeReturnValue = Omit<ReturnType<typeof useOriginalDraggable>, 'active' | 'over'> & {
   active: TypesafeActive | null;
   over: TypesafeOver | null;
 };
@@ -147,10 +133,7 @@ export interface DragEndEvent extends DragEvent {}
 export interface DragCancelEvent extends DragEndEvent {}
 
 export interface DndContextTypesafeProps
-  extends Omit<
-    DndContextProps,
-    'onDragStart' | 'onDragMove' | 'onDragOver' | 'onDragEnd' | 'onDragCancel'
-  > {
+  extends Omit<DndContextProps, 'onDragStart' | 'onDragMove' | 'onDragOver' | 'onDragEnd' | 'onDragCancel'> {
   onDragStart?(event: DragStartEvent): void;
   onDragMove?(event: DragMoveEvent): void;
   onDragOver?(event: DragOverEvent): void;
diff --git a/invokeai/frontend/web/src/features/dnd/util/customPointerWithin.ts b/invokeai/frontend/web/src/features/dnd/util/customPointerWithin.ts
index f3d08a75ca..5de1248324 100644
--- a/invokeai/frontend/web/src/features/dnd/util/customPointerWithin.ts
+++ b/invokeai/frontend/web/src/features/dnd/util/customPointerWithin.ts
@@ -16,20 +16,15 @@ export const customPointerWithin: CollisionDetection = (arg) => {
 
   // Get all elements at the pointer coordinates. This excludes elements which are overflowed,
   // so it won't include the droppable elements that are scrolled out of view.
-  const targetElements = document.elementsFromPoint(
-    arg.pointerCoordinates.x,
-    arg.pointerCoordinates.y
-  );
+  const targetElements = document.elementsFromPoint(arg.pointerCoordinates.x, arg.pointerCoordinates.y);
 
-  const filteredDroppableContainers = arg.droppableContainers.filter(
-    (container) => {
-      if (!container.node.current) {
-        return false;
-      }
-      // Only include droppable elements that are in the list of elements at the pointer coordinates.
-      return targetElements.includes(container.node.current);
+  const filteredDroppableContainers = arg.droppableContainers.filter((container) => {
+    if (!container.node.current) {
+      return false;
     }
-  );
+    // Only include droppable elements that are in the list of elements at the pointer coordinates.
+    return targetElements.includes(container.node.current);
+  });
 
   // Run the provided collision detection with the filtered droppable elements.
   return pointerWithin({
diff --git a/invokeai/frontend/web/src/features/dnd/util/isValidDrop.ts b/invokeai/frontend/web/src/features/dnd/util/isValidDrop.ts
index c691a1deba..c2c9de3f0c 100644
--- a/invokeai/frontend/web/src/features/dnd/util/isValidDrop.ts
+++ b/invokeai/frontend/web/src/features/dnd/util/isValidDrop.ts
@@ -1,9 +1,6 @@
 import type { TypesafeActive, TypesafeDroppableData } from 'features/dnd/types';
 
-export const isValidDrop = (
-  overData: TypesafeDroppableData | undefined,
-  active: TypesafeActive | null
-) => {
+export const isValidDrop = (overData: TypesafeDroppableData | undefined, active: TypesafeActive | null) => {
   if (!overData || !active?.data.current) {
     return false;
   }
@@ -30,9 +27,7 @@ export const isValidDrop = (
       // If the board is the same, don't allow the drop
 
       // Check the payload types
-      const isPayloadValid = ['IMAGE_DTO', 'GALLERY_SELECTION'].includes(
-        payloadType
-      );
+      const isPayloadValid = ['IMAGE_DTO', 'GALLERY_SELECTION'].includes(payloadType);
       if (!isPayloadValid) {
         return false;
       }
@@ -59,9 +54,7 @@ export const isValidDrop = (
       // If the board is the same, don't allow the drop
 
       // Check the payload types
-      const isPayloadValid = ['IMAGE_DTO', 'GALLERY_SELECTION'].includes(
-        payloadType
-      );
+      const isPayloadValid = ['IMAGE_DTO', 'GALLERY_SELECTION'].includes(payloadType);
       if (!isPayloadValid) {
         return false;
       }
diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx
index 1dcd95010e..eb533db74f 100644
--- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx
+++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx
@@ -1,9 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+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 { maxPromptsChanged } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
@@ -12,21 +7,11 @@ import { useTranslation } from 'react-i18next';
 
 const ParamDynamicPromptsMaxPrompts = () => {
   const maxPrompts = useAppSelector((s) => s.dynamicPrompts.maxPrompts);
-  const sliderMin = useAppSelector(
-    (s) => s.config.sd.dynamicPrompts.maxPrompts.sliderMin
-  );
-  const sliderMax = useAppSelector(
-    (s) => s.config.sd.dynamicPrompts.maxPrompts.sliderMax
-  );
-  const numberInputMin = useAppSelector(
-    (s) => s.config.sd.dynamicPrompts.maxPrompts.numberInputMin
-  );
-  const numberInputMax = useAppSelector(
-    (s) => s.config.sd.dynamicPrompts.maxPrompts.numberInputMax
-  );
-  const initial = useAppSelector(
-    (s) => s.config.sd.dynamicPrompts.maxPrompts.initial
-  );
+  const sliderMin = useAppSelector((s) => s.config.sd.dynamicPrompts.maxPrompts.sliderMin);
+  const sliderMax = useAppSelector((s) => s.config.sd.dynamicPrompts.maxPrompts.sliderMax);
+  const numberInputMin = useAppSelector((s) => s.config.sd.dynamicPrompts.maxPrompts.numberInputMin);
+  const numberInputMax = useAppSelector((s) => s.config.sd.dynamicPrompts.maxPrompts.numberInputMax);
+  const initial = useAppSelector((s) => s.config.sd.dynamicPrompts.maxPrompts.initial);
   const isDisabled = useAppSelector((s) => !s.dynamicPrompts.combinatorial);
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx
index 0c374995a7..e714533a30 100644
--- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx
+++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx
@@ -1,13 +1,5 @@
 import type { ChakraProps } from '@invoke-ai/ui-library';
-import {
-  Flex,
-  FormControl,
-  FormLabel,
-  ListItem,
-  OrderedList,
-  Spinner,
-  Text,
-} from '@invoke-ai/ui-library';
+import { Flex, FormControl, FormLabel, ListItem, OrderedList, Spinner, Text } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
@@ -18,10 +10,7 @@ import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiWarningCircleBold } from 'react-icons/pi';
 
-const selectPrompts = createMemoizedSelector(
-  selectDynamicPromptsSlice,
-  (dynamicPrompts) => dynamicPrompts.prompts
-);
+const selectPrompts = createMemoizedSelector(selectDynamicPromptsSlice, (dynamicPrompts) => dynamicPrompts.prompts);
 
 const listItemStyles: ChakraProps['sx'] = {
   '&::marker': { color: 'base.500' },
@@ -44,48 +33,22 @@ const ParamDynamicPromptsPreview = () => {
 
   if (isError) {
     return (
-      <Flex
-        w="full"
-        h="full"
-        layerStyle="second"
-        alignItems="center"
-        justifyContent="center"
-        p={8}
-      >
-        <IAINoContentFallback
-          icon={PiWarningCircleBold}
-          label="Problem generating prompts"
-        />
+      <Flex w="full" h="full" layerStyle="second" alignItems="center" justifyContent="center" p={8}>
+        <IAINoContentFallback icon={PiWarningCircleBold} label="Problem generating prompts" />
       </Flex>
     );
   }
 
   return (
-    <FormControl
-      orientation="vertical"
-      w="full"
-      h="full"
-      isInvalid={Boolean(parsingError || isError)}
-    >
+    <FormControl orientation="vertical" w="full" h="full" isInvalid={Boolean(parsingError || isError)}>
       <InformationalPopover feature="dynamicPrompts" inPortal={false}>
         <FormLabel>{label}</FormLabel>
       </InformationalPopover>
-      <Flex
-        w="full"
-        h="full"
-        pos="relative"
-        layerStyle="first"
-        p={4}
-        borderRadius="base"
-      >
+      <Flex w="full" h="full" pos="relative" layerStyle="first" p={4} borderRadius="base">
         <ScrollableContent>
           <OrderedList stylePosition="inside" ms={0}>
             {prompts.map((prompt, i) => (
-              <ListItem
-                fontSize="sm"
-                key={`${prompt}.${i}`}
-                sx={listItemStyles}
-              >
+              <ListItem fontSize="sm" key={`${prompt}.${i}`} sx={listItemStyles}>
                 <Text as="span">{prompt}</Text>
               </ListItem>
             ))}
diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsSeedBehaviour.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsSeedBehaviour.tsx
index 7fb6e1a116..d04faf0d10 100644
--- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsSeedBehaviour.tsx
+++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsSeedBehaviour.tsx
@@ -2,10 +2,7 @@ import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
 import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
-import {
-  isSeedBehaviour,
-  seedBehaviourChanged,
-} from 'features/dynamicPrompts/store/dynamicPromptsSlice';
+import { isSeedBehaviour, seedBehaviourChanged } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -39,17 +36,11 @@ const ParamDynamicPromptsSeedBehaviour = () => {
     [dispatch]
   );
 
-  const value = useMemo(
-    () => options.find((o) => o.value === seedBehaviour),
-    [options, seedBehaviour]
-  );
+  const value = useMemo(() => options.find((o) => o.value === seedBehaviour), [options, seedBehaviour]);
 
   return (
     <FormControl>
-      <InformationalPopover
-        feature="dynamicPromptsSeedBehaviour"
-        inPortal={false}
-      >
+      <InformationalPopover feature="dynamicPromptsSeedBehaviour" inPortal={false}>
         <FormLabel>{t('dynamicPrompts.seedBehaviour.label')}</FormLabel>
       </InformationalPopover>
       <Combobox value={value} options={options} onChange={handleChange} />
diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx
index 78cd48f22f..3be6bfa747 100644
--- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx
+++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx
@@ -13,19 +13,11 @@ const loadingStyles: SystemStyleObject = {
 export const ShowDynamicPromptsPreviewButton = memo(() => {
   const { t } = useTranslation();
   const isLoading = useAppSelector((s) => s.dynamicPrompts.isLoading);
-  const isError = useAppSelector((s) =>
-    Boolean(s.dynamicPrompts.isError || s.dynamicPrompts.parsingError)
-  );
+  const isError = useAppSelector((s) => Boolean(s.dynamicPrompts.isError || s.dynamicPrompts.parsingError));
   const { isOpen, onOpen } = useDynamicPromptsModal();
 
   return (
-    <Tooltip
-      label={
-        isLoading
-          ? t('dynamicPrompts.loading')
-          : t('dynamicPrompts.showDynamicPrompts')
-      }
-    >
+    <Tooltip label={isLoading ? t('dynamicPrompts.loading') : t('dynamicPrompts.showDynamicPrompts')}>
       <IconButton
         size="sm"
         variant="promptOverlay"
diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/store/dynamicPromptsPersistDenylist.ts b/invokeai/frontend/web/src/features/dynamicPrompts/store/dynamicPromptsPersistDenylist.ts
index 8fb46e6299..a411b0beec 100644
--- a/invokeai/frontend/web/src/features/dynamicPrompts/store/dynamicPromptsPersistDenylist.ts
+++ b/invokeai/frontend/web/src/features/dynamicPrompts/store/dynamicPromptsPersistDenylist.ts
@@ -1,4 +1,3 @@
 import type { initialDynamicPromptsState } from './dynamicPromptsSlice';
 
-export const dynamicPromptsPersistDenylist: (keyof typeof initialDynamicPromptsState)[] =
-  ['prompts'];
+export const dynamicPromptsPersistDenylist: (keyof typeof initialDynamicPromptsState)[] = ['prompts'];
diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/store/dynamicPromptsSlice.ts b/invokeai/frontend/web/src/features/dynamicPrompts/store/dynamicPromptsSlice.ts
index 603faa5535..450dbb9f23 100644
--- a/invokeai/frontend/web/src/features/dynamicPrompts/store/dynamicPromptsSlice.ts
+++ b/invokeai/frontend/web/src/features/dynamicPrompts/store/dynamicPromptsSlice.ts
@@ -5,8 +5,7 @@ import { z } from 'zod';
 
 export const zSeedBehaviour = z.enum(['PER_ITERATION', 'PER_PROMPT']);
 export type SeedBehaviour = z.infer<typeof zSeedBehaviour>;
-export const isSeedBehaviour = (v: unknown): v is SeedBehaviour =>
-  zSeedBehaviour.safeParse(v).success;
+export const isSeedBehaviour = (v: unknown): v is SeedBehaviour => zSeedBehaviour.safeParse(v).success;
 
 export interface DynamicPromptsState {
   _version: 1;
@@ -49,10 +48,7 @@ export const dynamicPromptsSlice = createSlice({
       state.prompts = action.payload;
       state.isLoading = false;
     },
-    parsingErrorChanged: (
-      state,
-      action: PayloadAction<string | null | undefined>
-    ) => {
+    parsingErrorChanged: (state, action: PayloadAction<string | null | undefined>) => {
       state.parsingError = action.payload;
     },
     isErrorChanged: (state, action: PayloadAction<boolean>) => {
@@ -80,8 +76,7 @@ export const {
 
 export default dynamicPromptsSlice.reducer;
 
-export const selectDynamicPromptsSlice = (state: RootState) =>
-  state.dynamicPrompts;
+export const selectDynamicPromptsSlice = (state: RootState) => state.dynamicPrompts;
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const migrateDynamicPromptsState = (state: any): any => {
diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/util/getShouldProcessPrompt.ts b/invokeai/frontend/web/src/features/dynamicPrompts/util/getShouldProcessPrompt.ts
index 1d2a5e715e..416363fec1 100644
--- a/invokeai/frontend/web/src/features/dynamicPrompts/util/getShouldProcessPrompt.ts
+++ b/invokeai/frontend/web/src/features/dynamicPrompts/util/getShouldProcessPrompt.ts
@@ -1,3 +1,2 @@
 const hasOpenCloseCurlyBracesRegex = /.*\{[\s\S]*\}.*/;
-export const getShouldProcessPrompt = (prompt: string): boolean =>
-  hasOpenCloseCurlyBracesRegex.test(prompt);
+export const getShouldProcessPrompt = (prompt: string): boolean => hasOpenCloseCurlyBracesRegex.test(prompt);
diff --git a/invokeai/frontend/web/src/features/embedding/EmbeddingPopover.tsx b/invokeai/frontend/web/src/features/embedding/EmbeddingPopover.tsx
index 42c690fe13..1ff18dc107 100644
--- a/invokeai/frontend/web/src/features/embedding/EmbeddingPopover.tsx
+++ b/invokeai/frontend/web/src/features/embedding/EmbeddingPopover.tsx
@@ -1,9 +1,4 @@
-import {
-  Popover,
-  PopoverAnchor,
-  PopoverBody,
-  PopoverContent,
-} from '@invoke-ai/ui-library';
+import { Popover, PopoverAnchor, PopoverBody, PopoverContent } from '@invoke-ai/ui-library';
 import { EmbeddingSelect } from 'features/embedding/EmbeddingSelect';
 import type { EmbeddingPopoverProps } from 'features/embedding/types';
 import { memo } from 'react';
diff --git a/invokeai/frontend/web/src/features/embedding/EmbeddingSelect.tsx b/invokeai/frontend/web/src/features/embedding/EmbeddingSelect.tsx
index d90e0ac93c..ffe9d63360 100644
--- a/invokeai/frontend/web/src/features/embedding/EmbeddingSelect.tsx
+++ b/invokeai/frontend/web/src/features/embedding/EmbeddingSelect.tsx
@@ -11,60 +11,54 @@ import { useGetTextualInversionModelsQuery } from 'services/api/endpoints/models
 
 const noOptionsMessage = () => t('embedding.noMatchingEmbedding');
 
-export const EmbeddingSelect = memo(
-  ({ onSelect, onClose }: EmbeddingSelectProps) => {
-    const { t } = useTranslation();
+export const EmbeddingSelect = memo(({ onSelect, onClose }: EmbeddingSelectProps) => {
+  const { t } = useTranslation();
 
-    const currentBaseModel = useAppSelector(
-      (s) => s.generation.model?.base_model
-    );
+  const currentBaseModel = useAppSelector((s) => s.generation.model?.base_model);
 
-    const getIsDisabled = useCallback(
-      (embedding: TextualInversionModelConfigEntity): boolean => {
-        const isCompatible = currentBaseModel === embedding.base_model;
-        const hasMainModel = Boolean(currentBaseModel);
-        return !hasMainModel || !isCompatible;
-      },
-      [currentBaseModel]
-    );
-    const { data, isLoading } = useGetTextualInversionModelsQuery();
+  const getIsDisabled = useCallback(
+    (embedding: TextualInversionModelConfigEntity): boolean => {
+      const isCompatible = currentBaseModel === embedding.base_model;
+      const hasMainModel = Boolean(currentBaseModel);
+      return !hasMainModel || !isCompatible;
+    },
+    [currentBaseModel]
+  );
+  const { data, isLoading } = useGetTextualInversionModelsQuery();
 
-    const _onChange = useCallback(
-      (embedding: TextualInversionModelConfigEntity | null) => {
-        if (!embedding) {
-          return;
-        }
-        onSelect(embedding.model_name);
-      },
-      [onSelect]
-    );
+  const _onChange = useCallback(
+    (embedding: TextualInversionModelConfigEntity | null) => {
+      if (!embedding) {
+        return;
+      }
+      onSelect(embedding.model_name);
+    },
+    [onSelect]
+  );
 
-    const { options, onChange } = useGroupedModelCombobox({
-      modelEntities: data,
-      getIsDisabled,
-      onChange: _onChange,
-    });
+  const { options, onChange } = useGroupedModelCombobox({
+    modelEntities: data,
+    getIsDisabled,
+    onChange: _onChange,
+  });
 
-    return (
-      <FormControl>
-        <Combobox
-          placeholder={
-            isLoading ? t('common.loading') : t('embedding.addEmbedding')
-          }
-          defaultMenuIsOpen
-          autoFocus
-          value={null}
-          options={options}
-          noOptionsMessage={noOptionsMessage}
-          onChange={onChange}
-          onMenuClose={onClose}
-          data-testid="add-embedding"
-          sx={selectStyles}
-        />
-      </FormControl>
-    );
-  }
-);
+  return (
+    <FormControl>
+      <Combobox
+        placeholder={isLoading ? t('common.loading') : t('embedding.addEmbedding')}
+        defaultMenuIsOpen
+        autoFocus
+        value={null}
+        options={options}
+        noOptionsMessage={noOptionsMessage}
+        onChange={onChange}
+        onMenuClose={onClose}
+        data-testid="add-embedding"
+        sx={selectStyles}
+      />
+    </FormControl>
+  );
+});
 
 EmbeddingSelect.displayName = 'EmbeddingSelect';
 
diff --git a/invokeai/frontend/web/src/features/embedding/usePrompt.ts b/invokeai/frontend/web/src/features/embedding/usePrompt.ts
index cdc4b1b80f..c3a708e6ce 100644
--- a/invokeai/frontend/web/src/features/embedding/usePrompt.ts
+++ b/invokeai/frontend/web/src/features/embedding/usePrompt.ts
@@ -1,10 +1,6 @@
 import { useDisclosure } from '@invoke-ai/ui-library';
 import { isNil } from 'lodash-es';
-import type {
-  ChangeEventHandler,
-  KeyboardEventHandler,
-  RefObject,
-} from 'react';
+import type { ChangeEventHandler, KeyboardEventHandler, RefObject } from 'react';
 import { useCallback } from 'react';
 import { flushSync } from 'react-dom';
 
@@ -14,11 +10,7 @@ export type UseInsertEmbeddingArg = {
   onChange: (v: string) => void;
 };
 
-export const usePrompt = ({
-  prompt,
-  textareaRef,
-  onChange: _onChange,
-}: UseInsertEmbeddingArg) => {
+export const usePrompt = ({ prompt, textareaRef, onChange: _onChange }: UseInsertEmbeddingArg) => {
   const { isOpen, onClose, onOpen } = useDisclosure();
 
   const onChange: ChangeEventHandler<HTMLTextAreaElement> = useCallback(
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx
index 73bb073464..da05209d9d 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx
@@ -10,9 +10,7 @@ const BoardAutoAddSelect = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const autoAddBoardId = useAppSelector((s) => s.gallery.autoAddBoardId);
-  const autoAssignBoardOnClick = useAppSelector(
-    (s) => s.gallery.autoAssignBoardOnClick
-  );
+  const autoAssignBoardOnClick = useAppSelector((s) => s.gallery.autoAssignBoardOnClick);
   const { options, hasBoards } = useListAllBoardsQuery(undefined, {
     selectFromResult: ({ data }) => {
       const options: ComboboxOption[] = [
@@ -43,10 +41,7 @@ const BoardAutoAddSelect = () => {
     [dispatch]
   );
 
-  const value = useMemo(
-    () => options.find((o) => o.value === autoAddBoardId),
-    [options, autoAddBoardId]
-  );
+  const value = useMemo(() => options.find((o) => o.value === autoAddBoardId), [options, autoAddBoardId]);
 
   const noOptionsMessage = useCallback(() => t('boards.noMatching'), [t]);
 
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx
index 8d25fbff72..490e8eac9e 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx
@@ -1,16 +1,8 @@
 import type { ContextMenuProps } from '@invoke-ai/ui-library';
-import {
-  ContextMenu,
-  MenuGroup,
-  MenuItem,
-  MenuList,
-} from '@invoke-ai/ui-library';
+import { ContextMenu, MenuGroup, MenuItem, MenuList } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import {
-  autoAddBoardIdChanged,
-  selectGallerySlice,
-} from 'features/gallery/store/gallerySlice';
+import { autoAddBoardIdChanged, selectGallerySlice } from 'features/gallery/store/gallerySlice';
 import type { BoardId } from 'features/gallery/store/types';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { addToast } from 'features/system/store/systemSlice';
@@ -30,30 +22,18 @@ type Props = {
   setBoardToDelete?: (board?: BoardDTO) => void;
 };
 
-const BoardContextMenu = ({
-  board,
-  board_id,
-  setBoardToDelete,
-  children,
-}: Props) => {
+const BoardContextMenu = ({ board, board_id, setBoardToDelete, children }: Props) => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const autoAssignBoardOnClick = useAppSelector(
-    (s) => s.gallery.autoAssignBoardOnClick
-  );
+  const autoAssignBoardOnClick = useAppSelector((s) => s.gallery.autoAssignBoardOnClick);
   const selectIsSelectedForAutoAdd = useMemo(
-    () =>
-      createSelector(
-        selectGallerySlice,
-        (gallery) => board && board.board_id === gallery.autoAddBoardId
-      ),
+    () => createSelector(selectGallerySlice, (gallery) => board && board.board_id === gallery.autoAddBoardId),
     [board]
   );
 
   const isSelectedForAutoAdd = useAppSelector(selectIsSelectedForAutoAdd);
   const boardName = useBoardName(board_id);
-  const isBulkDownloadEnabled =
-    useFeatureStatus('bulkDownload').isFeatureEnabled;
+  const isBulkDownloadEnabled = useFeatureStatus('bulkDownload').isFeatureEnabled;
 
   const [bulkDownload] = useBulkDownloadImagesMutation();
 
@@ -103,19 +83,11 @@ const BoardContextMenu = ({
             {t('boards.menuItemAutoAdd')}
           </MenuItem>
           {isBulkDownloadEnabled && (
-            <MenuItem
-              icon={<PiDownloadBold />}
-              onClickCapture={handleBulkDownload}
-            >
+            <MenuItem icon={<PiDownloadBold />} onClickCapture={handleBulkDownload}>
               {t('boards.downloadBoard')}
             </MenuItem>
           )}
-          {board && (
-            <GalleryBoardContextMenuItems
-              board={board}
-              setBoardToDelete={setBoardToDelete}
-            />
-          )}
+          {board && <GalleryBoardContextMenuItems board={board} setBoardToDelete={setBoardToDelete} />}
         </MenuGroup>
       </MenuList>
     ),
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
index ee5a7818d4..7f95bcc973 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
@@ -28,32 +28,19 @@ const BoardsList = (props: Props) => {
   const boardSearchText = useAppSelector((s) => s.gallery.boardSearchText);
   const { data: boards } = useListAllBoardsQuery();
   const filteredBoards = boardSearchText
-    ? boards?.filter((board) =>
-        board.board_name.toLowerCase().includes(boardSearchText.toLowerCase())
-      )
+    ? boards?.filter((board) => board.board_name.toLowerCase().includes(boardSearchText.toLowerCase()))
     : boards;
   const [boardToDelete, setBoardToDelete] = useState<BoardDTO>();
 
   return (
     <>
       <Collapse in={isOpen} animateOpacity>
-        <Flex
-          layerStyle="first"
-          flexDir="column"
-          gap={2}
-          p={2}
-          mt={2}
-          borderRadius="base"
-        >
+        <Flex layerStyle="first" flexDir="column" gap={2} p={2} mt={2} borderRadius="base">
           <Flex gap={2} alignItems="center">
             <BoardsSearch />
             <AddBoardButton />
           </Flex>
-          <OverlayScrollbarsComponent
-            defer
-            style={overlayScrollbarsStyles}
-            options={overlayScrollbarsParams.options}
-          >
+          <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
             <Grid
               className="list-container"
               data-testid="boards-list"
@@ -65,11 +52,7 @@ const BoardsList = (props: Props) => {
               </GridItem>
               {filteredBoards &&
                 filteredBoards.map((board, index) => (
-                  <GridItem
-                    key={board.board_id}
-                    p={1.5}
-                    data-testid={`board-${index}`}
-                  >
+                  <GridItem key={board.board_id} p={1.5} data-testid={`board-${index}`}>
                     <GalleryBoard
                       board={board}
                       isSelected={selectedBoardId === board.board_id}
@@ -81,10 +64,7 @@ const BoardsList = (props: Props) => {
           </OverlayScrollbarsComponent>
         </Flex>
       </Collapse>
-      <DeleteBoardModal
-        boardToDelete={boardToDelete}
-        setBoardToDelete={setBoardToDelete}
-      />
+      <DeleteBoardModal boardToDelete={boardToDelete} setBoardToDelete={setBoardToDelete} />
     </>
   );
 };
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx
index 09e6fe0b26..931c1e6cbb 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx
@@ -1,9 +1,4 @@
-import {
-  IconButton,
-  Input,
-  InputGroup,
-  InputRightElement,
-} from '@invoke-ai/ui-library';
+import { IconButton, Input, InputGroup, InputRightElement } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { boardSearchTextChanged } from 'features/gallery/store/gallerySlice';
 import type { ChangeEvent, KeyboardEvent } from 'react';
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
index c887777cdf..8e3c7e4ab2 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
@@ -1,15 +1,5 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
-import {
-  Box,
-  Editable,
-  EditableInput,
-  EditablePreview,
-  Flex,
-  Icon,
-  Image,
-  Text,
-  Tooltip,
-} from '@invoke-ai/ui-library';
+import { Box, Editable, EditableInput, EditablePreview, Flex, Icon, Image, Text, Tooltip } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
@@ -18,11 +8,7 @@ import SelectionOverlay from 'common/components/SelectionOverlay';
 import type { AddToBoardDropData } from 'features/dnd/types';
 import AutoAddIcon from 'features/gallery/components/Boards/AutoAddIcon';
 import BoardContextMenu from 'features/gallery/components/Boards/BoardContextMenu';
-import {
-  autoAddBoardIdChanged,
-  boardIdSelected,
-  selectGallerySlice,
-} from 'features/gallery/store/gallerySlice';
+import { autoAddBoardIdChanged, boardIdSelected, selectGallerySlice } from 'features/gallery/store/gallerySlice';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiImagesSquare } from 'react-icons/pi';
@@ -48,21 +34,11 @@ interface GalleryBoardProps {
   setBoardToDelete: (board?: BoardDTO) => void;
 }
 
-const GalleryBoard = ({
-  board,
-  isSelected,
-  setBoardToDelete,
-}: GalleryBoardProps) => {
+const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps) => {
   const dispatch = useAppDispatch();
-  const autoAssignBoardOnClick = useAppSelector(
-    (s) => s.gallery.autoAssignBoardOnClick
-  );
+  const autoAssignBoardOnClick = useAppSelector((s) => s.gallery.autoAssignBoardOnClick);
   const selectIsSelectedForAutoAdd = useMemo(
-    () =>
-      createSelector(
-        selectGallerySlice,
-        (gallery) => board.board_id === gallery.autoAddBoardId
-      ),
+    () => createSelector(selectGallerySlice, (gallery) => board.board_id === gallery.autoAddBoardId),
     [board.board_id]
   );
 
@@ -86,9 +62,7 @@ const GalleryBoard = ({
     } asset${assetsTotal.total === 1 ? '' : 's'}`;
   }, [assetsTotal, imagesTotal]);
 
-  const { currentData: coverImage } = useGetImageDTOQuery(
-    board.cover_image_name ?? skipToken
-  );
+  const { currentData: coverImage } = useGetImageDTOQuery(board.cover_image_name ?? skipToken);
 
   const { board_name, board_id } = board;
   const [localBoardName, setLocalBoardName] = useState(board_name);
@@ -100,8 +74,7 @@ const GalleryBoard = ({
     }
   }, [board_id, autoAssignBoardOnClick, dispatch]);
 
-  const [updateBoard, { isLoading: isUpdateBoardLoading }] =
-    useUpdateBoardMutation();
+  const [updateBoard, { isLoading: isUpdateBoardLoading }] = useUpdateBoardMutation();
 
   const droppableData: AddToBoardDropData = useMemo(
     () => ({
@@ -157,11 +130,7 @@ const GalleryBoard = ({
         w="full"
         h="full"
       >
-        <BoardContextMenu
-          board={board}
-          board_id={board_id}
-          setBoardToDelete={setBoardToDelete}
-        >
+        <BoardContextMenu board={board} board_id={board_id} setBoardToDelete={setBoardToDelete}>
           {(ref) => (
             <Tooltip label={tooltip} openDelay={1000}>
               <Flex
@@ -188,26 +157,12 @@ const GalleryBoard = ({
                     borderBottomRadius="lg"
                   />
                 ) : (
-                  <Flex
-                    w="full"
-                    h="full"
-                    justifyContent="center"
-                    alignItems="center"
-                  >
-                    <Icon
-                      boxSize={14}
-                      as={PiImagesSquare}
-                      mt={-6}
-                      opacity={0.7}
-                      color="base.500"
-                    />
+                  <Flex w="full" h="full" justifyContent="center" alignItems="center">
+                    <Icon boxSize={14} as={PiImagesSquare} mt={-6} opacity={0.7} color="base.500" />
                   </Flex>
                 )}
                 {isSelectedForAutoAdd && <AutoAddIcon />}
-                <SelectionOverlay
-                  isSelected={isSelected}
-                  isHovered={isHovered}
-                />
+                <SelectionOverlay isSelected={isSelected} isHovered={isHovered} />
                 <Flex
                   position="absolute"
                   bottom={0}
@@ -243,12 +198,7 @@ const GalleryBoard = ({
                   </Editable>
                 </Flex>
 
-                <IAIDroppable
-                  data={droppableData}
-                  dropLabel={
-                    <Text fontSize="md">{t('unifiedCanvas.move')}</Text>
-                  }
-                />
+                <IAIDroppable data={droppableData} dropLabel={<Text fontSize="md">{t('unifiedCanvas.move')}</Text>} />
               </Flex>
             </Tooltip>
           )}
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx
index b7bfcdacac..2b022dc90a 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx
@@ -5,17 +5,11 @@ import SelectionOverlay from 'common/components/SelectionOverlay';
 import type { RemoveFromBoardDropData } from 'features/dnd/types';
 import AutoAddIcon from 'features/gallery/components/Boards/AutoAddIcon';
 import BoardContextMenu from 'features/gallery/components/Boards/BoardContextMenu';
-import {
-  autoAddBoardIdChanged,
-  boardIdSelected,
-} from 'features/gallery/store/gallerySlice';
+import { autoAddBoardIdChanged, boardIdSelected } from 'features/gallery/store/gallerySlice';
 import InvokeLogoSVG from 'public/assets/images/invoke-symbol-wht-lrg.svg';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  useGetBoardAssetsTotalQuery,
-  useGetBoardImagesTotalQuery,
-} from 'services/api/endpoints/boards';
+import { useGetBoardAssetsTotalQuery, useGetBoardImagesTotalQuery } from 'services/api/endpoints/boards';
 import { useBoardName } from 'services/api/hooks/useBoardName';
 
 interface Props {
@@ -25,9 +19,7 @@ interface Props {
 const NoBoardBoard = memo(({ isSelected }: Props) => {
   const dispatch = useAppDispatch();
   const autoAddBoardId = useAppSelector((s) => s.gallery.autoAddBoardId);
-  const autoAssignBoardOnClick = useAppSelector(
-    (s) => s.gallery.autoAssignBoardOnClick
-  );
+  const autoAssignBoardOnClick = useAppSelector((s) => s.gallery.autoAssignBoardOnClick);
   const boardName = useBoardName('none');
   const handleSelectBoard = useCallback(() => {
     dispatch(boardIdSelected({ boardId: 'none' }));
@@ -92,12 +84,7 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
                 cursor="pointer"
                 bg="base.800"
               >
-                <Flex
-                  w="full"
-                  h="full"
-                  justifyContent="center"
-                  alignItems="center"
-                >
+                <Flex w="full" h="full" justifyContent="center" alignItems="center">
                   <Image
                     src={InvokeLogoSVG}
                     alt="invoke-ai-logo"
@@ -130,16 +117,8 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
                 >
                   {boardName}
                 </Flex>
-                <SelectionOverlay
-                  isSelected={isSelected}
-                  isHovered={isHovered}
-                />
-                <IAIDroppable
-                  data={droppableData}
-                  dropLabel={
-                    <Text fontSize="md">{t('unifiedCanvas.move')}</Text>
-                  }
-                />
+                <SelectionOverlay isSelected={isSelected} isHovered={isHovered} />
+                <IAIDroppable data={droppableData} dropLabel={<Text fontSize="md">{t('unifiedCanvas.move')}</Text>} />
               </Flex>
             </Tooltip>
           )}
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx
index 36a098df84..6581033aaa 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx
@@ -24,10 +24,7 @@ import { some } from 'lodash-es';
 import { memo, useCallback, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useListAllImageNamesForBoardQuery } from 'services/api/endpoints/boards';
-import {
-  useDeleteBoardAndImagesMutation,
-  useDeleteBoardMutation,
-} from 'services/api/endpoints/images';
+import { useDeleteBoardAndImagesMutation, useDeleteBoardMutation } from 'services/api/endpoints/images';
 import type { BoardDTO } from 'services/api/types';
 
 type Props = {
@@ -38,21 +35,15 @@ type Props = {
 const DeleteBoardModal = (props: Props) => {
   const { boardToDelete, setBoardToDelete } = props;
   const { t } = useTranslation();
-  const canRestoreDeletedImagesFromBin = useAppSelector(
-    (s) => s.config.canRestoreDeletedImagesFromBin
+  const canRestoreDeletedImagesFromBin = useAppSelector((s) => s.config.canRestoreDeletedImagesFromBin);
+  const { currentData: boardImageNames, isFetching: isFetchingBoardNames } = useListAllImageNamesForBoardQuery(
+    boardToDelete?.board_id ?? skipToken
   );
-  const { currentData: boardImageNames, isFetching: isFetchingBoardNames } =
-    useListAllImageNamesForBoardQuery(boardToDelete?.board_id ?? skipToken);
 
   const selectImageUsageSummary = useMemo(
     () =>
       createMemoizedSelector(
-        [
-          selectGenerationSlice,
-          selectCanvasSlice,
-          selectNodesSlice,
-          selectControlAdaptersSlice,
-        ],
+        [selectGenerationSlice, selectCanvasSlice, selectNodesSlice, selectControlAdaptersSlice],
         (generation, canvas, nodes, controlAdapters) => {
           const allImageUsage = (boardImageNames ?? []).map((imageName) =>
             getImageUsage(generation, canvas, nodes, controlAdapters, imageName)
@@ -71,11 +62,9 @@ const DeleteBoardModal = (props: Props) => {
     [boardImageNames]
   );
 
-  const [deleteBoardOnly, { isLoading: isDeleteBoardOnlyLoading }] =
-    useDeleteBoardMutation();
+  const [deleteBoardOnly, { isLoading: isDeleteBoardOnlyLoading }] = useDeleteBoardMutation();
 
-  const [deleteBoardAndImages, { isLoading: isDeleteBoardAndImagesLoading }] =
-    useDeleteBoardAndImagesMutation();
+  const [deleteBoardAndImages, { isLoading: isDeleteBoardAndImagesLoading }] = useDeleteBoardAndImagesMutation();
 
   const imageUsageSummary = useAppSelector(selectImageUsageSummary);
 
@@ -102,15 +91,8 @@ const DeleteBoardModal = (props: Props) => {
   const cancelRef = useRef<HTMLButtonElement>(null);
 
   const isLoading = useMemo(
-    () =>
-      isDeleteBoardAndImagesLoading ||
-      isDeleteBoardOnlyLoading ||
-      isFetchingBoardNames,
-    [
-      isDeleteBoardAndImagesLoading,
-      isDeleteBoardOnlyLoading,
-      isFetchingBoardNames,
-    ]
+    () => isDeleteBoardAndImagesLoading || isDeleteBoardOnlyLoading || isFetchingBoardNames,
+    [isDeleteBoardAndImagesLoading, isDeleteBoardOnlyLoading, isFetchingBoardNames]
   );
 
   if (!boardToDelete) {
@@ -118,12 +100,7 @@ const DeleteBoardModal = (props: Props) => {
   }
 
   return (
-    <AlertDialog
-      isOpen={Boolean(boardToDelete)}
-      onClose={handleClose}
-      leastDestructiveRef={cancelRef}
-      isCentered
-    >
+    <AlertDialog isOpen={Boolean(boardToDelete)} onClose={handleClose} leastDestructiveRef={cancelRef} isCentered>
       <AlertDialogOverlay>
         <AlertDialogContent>
           <AlertDialogHeader fontSize="lg" fontWeight="bold">
@@ -145,9 +122,7 @@ const DeleteBoardModal = (props: Props) => {
               )}
               <Text>{t('boards.deletedBoardsCannotbeRestored')}</Text>
               <Text>
-                {canRestoreDeletedImagesFromBin
-                  ? t('gallery.deleteImageBin')
-                  : t('gallery.deleteImagePermanent')}
+                {canRestoreDeletedImagesFromBin ? t('gallery.deleteImageBin') : t('gallery.deleteImagePermanent')}
               </Text>
             </Flex>
           </AlertDialogBody>
@@ -156,18 +131,10 @@ const DeleteBoardModal = (props: Props) => {
               <Button ref={cancelRef} onClick={handleClose}>
                 {t('boards.cancel')}
               </Button>
-              <Button
-                colorScheme="warning"
-                isLoading={isLoading}
-                onClick={handleDeleteBoardOnly}
-              >
+              <Button colorScheme="warning" isLoading={isLoading} onClick={handleDeleteBoardOnly}>
                 {t('boards.deleteBoardOnly')}
               </Button>
-              <Button
-                colorScheme="error"
-                isLoading={isLoading}
-                onClick={handleDeleteBoardAndImages}
-              >
+              <Button colorScheme="error" isLoading={isLoading} onClick={handleDeleteBoardAndImages}>
                 {t('boards.deleteBoardAndImages')}
               </Button>
             </Flex>
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/GalleryBoardContextMenuItems.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/GalleryBoardContextMenuItems.tsx
index 9e7df6d16c..d1280bf109 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/GalleryBoardContextMenuItems.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/GalleryBoardContextMenuItems.tsx
@@ -20,11 +20,7 @@ const GalleryBoardContextMenuItems = ({ board, setBoardToDelete }: Props) => {
 
   return (
     <>
-      <MenuItem
-        color="error.300"
-        icon={<PiTrashSimpleBold />}
-        onClick={handleDelete}
-      >
+      <MenuItem color="error.300" icon={<PiTrashSimpleBold />} onClick={handleDelete}>
         {t('boards.deleteBoard')}
       </MenuItem>
     </>
diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx
index 24293ef070..e25324b9ea 100644
--- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx
@@ -1,11 +1,4 @@
-import {
-  ButtonGroup,
-  Flex,
-  IconButton,
-  Menu,
-  MenuButton,
-  MenuList,
-} from '@invoke-ai/ui-library';
+import { ButtonGroup, Flex, IconButton, Menu, MenuButton, MenuList } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { useAppToaster } from 'app/components/Toaster';
@@ -23,10 +16,7 @@ import { initialImageSelected } from 'features/parameters/store/actions';
 import { useIsQueueMutationInProgress } from 'features/queue/hooks/useIsQueueMutationInProgress';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { selectSystemSlice } from 'features/system/store/systemSlice';
-import {
-  setShouldShowImageDetails,
-  setShouldShowProgressInViewer,
-} from 'features/ui/store/uiSlice';
+import { setShouldShowImageDetails, setShouldShowProgressInViewer } from 'features/ui/store/uiSlice';
 import { useGetAndLoadEmbeddedWorkflow } from 'features/workflowLibrary/hooks/useGetAndLoadEmbeddedWorkflow';
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -58,39 +48,23 @@ const selectShouldDisableToolbarButtons = createSelector(
 const CurrentImageButtons = () => {
   const dispatch = useAppDispatch();
   const isConnected = useAppSelector((s) => s.system.isConnected);
-  const shouldShowImageDetails = useAppSelector(
-    (s) => s.ui.shouldShowImageDetails
-  );
-  const shouldShowProgressInViewer = useAppSelector(
-    (s) => s.ui.shouldShowProgressInViewer
-  );
+  const shouldShowImageDetails = useAppSelector((s) => s.ui.shouldShowImageDetails);
+  const shouldShowProgressInViewer = useAppSelector((s) => s.ui.shouldShowProgressInViewer);
   const lastSelectedImage = useAppSelector(selectLastSelectedImage);
-  const shouldDisableToolbarButtons = useAppSelector(
-    selectShouldDisableToolbarButtons
-  );
+  const shouldDisableToolbarButtons = useAppSelector(selectShouldDisableToolbarButtons);
 
   const isUpscalingEnabled = useFeatureStatus('upscaling').isFeatureEnabled;
   const isQueueMutationInProgress = useIsQueueMutationInProgress();
   const toaster = useAppToaster();
   const { t } = useTranslation();
 
-  const {
-    recallBothPrompts,
-    recallSeed,
-    recallWidthAndHeight,
-    recallAllParameters,
-  } = useRecallParameters();
+  const { recallBothPrompts, recallSeed, recallWidthAndHeight, recallAllParameters } = useRecallParameters();
 
-  const { currentData: imageDTO } = useGetImageDTOQuery(
-    lastSelectedImage?.image_name ?? skipToken
-  );
+  const { currentData: imageDTO } = useGetImageDTOQuery(lastSelectedImage?.image_name ?? skipToken);
 
-  const { metadata, isLoading: isLoadingMetadata } = useDebouncedMetadata(
-    lastSelectedImage?.image_name
-  );
+  const { metadata, isLoading: isLoadingMetadata } = useDebouncedMetadata(lastSelectedImage?.image_name);
 
-  const { getAndLoadEmbeddedWorkflow, getAndLoadEmbeddedWorkflowResult } =
-    useGetAndLoadEmbeddedWorkflow({});
+  const { getAndLoadEmbeddedWorkflow, getAndLoadEmbeddedWorkflowResult } = useGetAndLoadEmbeddedWorkflow({});
 
   const handleLoadWorkflow = useCallback(() => {
     if (!lastSelectedImage || !lastSelectedImage.has_workflow) {
@@ -173,10 +147,7 @@ const CurrentImageButtons = () => {
       handleClickUpscale();
     },
     {
-      enabled: () =>
-        Boolean(
-          isUpscalingEnabled && !shouldDisableToolbarButtons && isConnected
-        ),
+      enabled: () => Boolean(isUpscalingEnabled && !shouldDisableToolbarButtons && isConnected),
     },
     [isUpscalingEnabled, imageDTO, shouldDisableToolbarButtons, isConnected]
   );
@@ -227,9 +198,7 @@ const CurrentImageButtons = () => {
               isDisabled={!imageDTO}
               icon={<PiDotsThreeOutlineFill />}
             />
-            <MenuList>
-              {imageDTO && <SingleSelectionMenuItems imageDTO={imageDTO} />}
-            </MenuList>
+            <MenuList>{imageDTO && <SingleSelectionMenuItems imageDTO={imageDTO} />}</MenuList>
           </Menu>
         </ButtonGroup>
 
diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx
index a81aca16ed..02863daa2f 100644
--- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx
@@ -4,10 +4,7 @@ import { skipToken } from '@reduxjs/toolkit/query';
 import { useAppSelector } from 'app/store/storeHooks';
 import IAIDndImage from 'common/components/IAIDndImage';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
-import type {
-  TypesafeDraggableData,
-  TypesafeDroppableData,
-} from 'features/dnd/types';
+import type { TypesafeDraggableData, TypesafeDroppableData } from 'features/dnd/types';
 import ProgressImage from 'features/gallery/components/CurrentImage/ProgressImage';
 import ImageMetadataViewer from 'features/gallery/components/ImageMetadataViewer/ImageMetadataViewer';
 import NextPrevImageButtons from 'features/gallery/components/NextPrevImageButtons';
@@ -26,16 +23,10 @@ const selectLastSelectedImageName = createSelector(
 );
 
 const CurrentImagePreview = () => {
-  const shouldShowImageDetails = useAppSelector(
-    (s) => s.ui.shouldShowImageDetails
-  );
+  const shouldShowImageDetails = useAppSelector((s) => s.ui.shouldShowImageDetails);
   const imageName = useAppSelector(selectLastSelectedImageName);
-  const hasDenoiseProgress = useAppSelector((s) =>
-    Boolean(s.system.denoiseProgress)
-  );
-  const shouldShowProgressInViewer = useAppSelector(
-    (s) => s.ui.shouldShowProgressInViewer
-  );
+  const hasDenoiseProgress = useAppSelector((s) => Boolean(s.system.denoiseProgress));
+  const shouldShowProgressInViewer = useAppSelector((s) => s.ui.shouldShowProgressInViewer);
 
   const { currentData: imageDTO } = useGetImageDTOQuery(imageName ?? skipToken);
 
@@ -58,8 +49,7 @@ const CurrentImagePreview = () => {
   );
 
   // Show and hide the next/prev buttons on mouse move
-  const [shouldShowNextPrevButtons, setShouldShowNextPrevButtons] =
-    useState<boolean>(false);
+  const [shouldShowNextPrevButtons, setShouldShowNextPrevButtons] = useState<boolean>(false);
 
   const timeoutId = useRef(0);
 
@@ -97,35 +87,18 @@ const CurrentImagePreview = () => {
           fitContainer
           useThumbailFallback
           dropLabel={t('gallery.setCurrentImage')}
-          noContentFallback={
-            <IAINoContentFallback
-              icon={PiImageBold}
-              label={t('gallery.noImageSelected')}
-            />
-          }
+          noContentFallback={<IAINoContentFallback icon={PiImageBold} label={t('gallery.noImageSelected')} />}
           dataTestId="image-preview"
         />
       )}
       {shouldShowImageDetails && imageDTO && (
-        <Box
-          position="absolute"
-          top="0"
-          width="full"
-          height="full"
-          borderRadius="base"
-        >
+        <Box position="absolute" top="0" width="full" height="full" borderRadius="base">
           <ImageMetadataViewer image={imageDTO} />
         </Box>
       )}
       <AnimatePresence>
         {!shouldShowImageDetails && imageDTO && shouldShowNextPrevButtons && (
-          <motion.div
-            key="nextPrevButtons"
-            initial={initial}
-            animate={animate}
-            exit={exit}
-            style={motionStyles}
-          >
+          <motion.div key="nextPrevButtons" initial={initial} animate={animate} exit={exit} style={motionStyles}>
             <NextPrevImageButtons />
           </motion.div>
         )}
diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/ProgressImage.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/ProgressImage.tsx
index 4b38743438..0ee75fbcd4 100644
--- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/ProgressImage.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/ProgressImage.tsx
@@ -4,12 +4,8 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { memo, useMemo } from 'react';
 
 const CurrentImagePreview = () => {
-  const progress_image = useAppSelector(
-    (s) => s.system.denoiseProgress?.progress_image
-  );
-  const shouldAntialiasProgressImage = useAppSelector(
-    (s) => s.system.shouldAntialiasProgressImage
-  );
+  const progress_image = useAppSelector((s) => s.system.denoiseProgress?.progress_image);
+  const shouldAntialiasProgressImage = useAppSelector((s) => s.system.shouldAntialiasProgressImage);
 
   const sx = useMemo<SystemStyleObject>(
     () => ({
diff --git a/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx b/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx
index 7672070463..a877ce0128 100644
--- a/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx
@@ -33,13 +33,9 @@ const formLabelProps: FormLabelProps = {
 const GallerySettingsPopover = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
-  const galleryImageMinimumWidth = useAppSelector(
-    (s) => s.gallery.galleryImageMinimumWidth
-  );
+  const galleryImageMinimumWidth = useAppSelector((s) => s.gallery.galleryImageMinimumWidth);
   const shouldAutoSwitch = useAppSelector((s) => s.gallery.shouldAutoSwitch);
-  const autoAssignBoardOnClick = useAppSelector(
-    (s) => s.gallery.autoAssignBoardOnClick
-  );
+  const autoAssignBoardOnClick = useAppSelector((s) => s.gallery.autoAssignBoardOnClick);
 
   const handleChangeGalleryImageMinimumWidth = useCallback(
     (v: number) => {
@@ -56,8 +52,7 @@ const GallerySettingsPopover = () => {
   );
 
   const handleChangeAutoAssignBoardOnClick = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) =>
-      dispatch(autoAssignBoardOnClickChanged(e.target.checked)),
+    (e: ChangeEvent<HTMLInputElement>) => dispatch(autoAssignBoardOnClickChanged(e.target.checked)),
     [dispatch]
   );
 
@@ -87,17 +82,11 @@ const GallerySettingsPopover = () => {
             <FormControlGroup formLabelProps={formLabelProps}>
               <FormControl>
                 <FormLabel>{t('gallery.autoSwitchNewImages')}</FormLabel>
-                <Switch
-                  isChecked={shouldAutoSwitch}
-                  onChange={handleChangeAutoSwitch}
-                />
+                <Switch isChecked={shouldAutoSwitch} onChange={handleChangeAutoSwitch} />
               </FormControl>
               <FormControl>
                 <FormLabel>{t('gallery.autoAssignBoardOnClick')}</FormLabel>
-                <Checkbox
-                  isChecked={autoAssignBoardOnClick}
-                  onChange={handleChangeAutoAssignBoardOnClick}
-                />
+                <Checkbox isChecked={autoAssignBoardOnClick} onChange={handleChangeAutoAssignBoardOnClick} />
               </FormControl>
             </FormControlGroup>
             <BoardAutoAddSelect />
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx
index 64298a2f34..e8f71c02f3 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx
@@ -2,22 +2,13 @@ import { MenuDivider, MenuItem } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { $customStarUI } from 'app/store/nanostores/customStarUI';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import {
-  imagesToChangeSelected,
-  isModalOpenChanged,
-} from 'features/changeBoardModal/store/slice';
+import { imagesToChangeSelected, isModalOpenChanged } from 'features/changeBoardModal/store/slice';
 import { imagesToDeleteSelected } from 'features/deleteImageModal/store/slice';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { addToast } from 'features/system/store/systemSlice';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  PiDownloadSimpleBold,
-  PiFoldersBold,
-  PiStarBold,
-  PiStarFill,
-  PiTrashSimpleBold,
-} from 'react-icons/pi';
+import { PiDownloadSimpleBold, PiFoldersBold, PiStarBold, PiStarFill, PiTrashSimpleBold } from 'react-icons/pi';
 import {
   useBulkDownloadImagesMutation,
   useStarImagesMutation,
@@ -30,8 +21,7 @@ const MultipleSelectionMenuItems = () => {
   const selection = useAppSelector((s) => s.gallery.selection);
   const customStarUi = useStore($customStarUI);
 
-  const isBulkDownloadEnabled =
-    useFeatureStatus('bulkDownload').isFeatureEnabled;
+  const isBulkDownloadEnabled = useFeatureStatus('bulkDownload').isFeatureEnabled;
 
   const [starImages] = useStarImagesMutation();
   const [unstarImages] = useUnstarImagesMutation();
@@ -94,26 +84,17 @@ const MultipleSelectionMenuItems = () => {
   return (
     <>
       {areAllStarred && (
-        <MenuItem
-          icon={customStarUi ? customStarUi.on.icon : <PiStarBold />}
-          onClickCapture={handleUnstarSelection}
-        >
+        <MenuItem icon={customStarUi ? customStarUi.on.icon : <PiStarBold />} onClickCapture={handleUnstarSelection}>
           {customStarUi ? customStarUi.off.text : `Unstar All`}
         </MenuItem>
       )}
       {(areAllUnstarred || (!areAllStarred && !areAllUnstarred)) && (
-        <MenuItem
-          icon={customStarUi ? customStarUi.on.icon : <PiStarFill />}
-          onClickCapture={handleStarSelection}
-        >
+        <MenuItem icon={customStarUi ? customStarUi.on.icon : <PiStarFill />} onClickCapture={handleStarSelection}>
           {customStarUi ? customStarUi.on.text : `Star All`}
         </MenuItem>
       )}
       {isBulkDownloadEnabled && (
-        <MenuItem
-          icon={<PiDownloadSimpleBold />}
-          onClickCapture={handleBulkDownload}
-        >
+        <MenuItem icon={<PiDownloadSimpleBold />} onClickCapture={handleBulkDownload}>
           {t('gallery.downloadSelection')}
         </MenuItem>
       )}
@@ -121,11 +102,7 @@ const MultipleSelectionMenuItems = () => {
         {t('boards.changeBoard')}
       </MenuItem>
       <MenuDivider />
-      <MenuItem
-        color="error.300"
-        icon={<PiTrashSimpleBold />}
-        onClickCapture={handleDeleteSelection}
-      >
+      <MenuItem color="error.300" icon={<PiTrashSimpleBold />} onClickCapture={handleDeleteSelection}>
         {t('gallery.deleteSelection')}
       </MenuItem>
     </>
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
index 8147892ac4..4a9b9c6e8b 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
@@ -5,15 +5,9 @@ import { $customStarUI } from 'app/store/nanostores/customStarUI';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useCopyImageToClipboard } from 'common/hooks/useCopyImageToClipboard';
 import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice';
-import {
-  imagesToChangeSelected,
-  isModalOpenChanged,
-} from 'features/changeBoardModal/store/slice';
+import { imagesToChangeSelected, isModalOpenChanged } from 'features/changeBoardModal/store/slice';
 import { imagesToDeleteSelected } from 'features/deleteImageModal/store/slice';
-import {
-  sentImageToCanvas,
-  sentImageToImg2Img,
-} from 'features/gallery/store/actions';
+import { sentImageToCanvas, sentImageToImg2Img } from 'features/gallery/store/actions';
 import { useRecallParameters } from 'features/parameters/hooks/useRecallParameters';
 import { initialImageSelected } from 'features/parameters/store/actions';
 import { selectOptimalDimension } from 'features/parameters/store/generationSlice';
@@ -37,10 +31,7 @@ import {
   PiStarFill,
   PiTrashSimpleBold,
 } from 'react-icons/pi';
-import {
-  useStarImagesMutation,
-  useUnstarImagesMutation,
-} from 'services/api/endpoints/images';
+import { useStarImagesMutation, useUnstarImagesMutation } from 'services/api/endpoints/images';
 import { useDebouncedMetadata } from 'services/api/hooks/useDebouncedMetadata';
 import type { ImageDTO } from 'services/api/types';
 
@@ -57,12 +48,9 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
   const isCanvasEnabled = useFeatureStatus('unifiedCanvas').isFeatureEnabled;
   const customStarUi = useStore($customStarUI);
 
-  const { metadata, isLoading: isLoadingMetadata } = useDebouncedMetadata(
-    imageDTO?.image_name
-  );
+  const { metadata, isLoading: isLoadingMetadata } = useDebouncedMetadata(imageDTO?.image_name);
 
-  const { getAndLoadEmbeddedWorkflow, getAndLoadEmbeddedWorkflowResult } =
-    useGetAndLoadEmbeddedWorkflow({});
+  const { getAndLoadEmbeddedWorkflow, getAndLoadEmbeddedWorkflowResult } = useGetAndLoadEmbeddedWorkflow({});
 
   const handleLoadWorkflow = useCallback(() => {
     getAndLoadEmbeddedWorkflow(imageDTO.image_name);
@@ -71,8 +59,7 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
   const [starImages] = useStarImagesMutation();
   const [unstarImages] = useUnstarImagesMutation();
 
-  const { isClipboardAPIAvailable, copyImageToClipboard } =
-    useCopyImageToClipboard();
+  const { isClipboardAPIAvailable, copyImageToClipboard } = useCopyImageToClipboard();
 
   const handleDelete = useCallback(() => {
     if (!imageDTO) {
@@ -81,8 +68,7 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
     dispatch(imagesToDeleteSelected([imageDTO]));
   }, [dispatch, imageDTO]);
 
-  const { recallBothPrompts, recallSeed, recallAllParameters } =
-    useRecallParameters();
+  const { recallBothPrompts, recallSeed, recallAllParameters } = useRecallParameters();
 
   // Recall parameters handlers
   const handleRecallPrompt = useCallback(() => {
@@ -159,12 +145,7 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
 
   return (
     <>
-      <MenuItem
-        as="a"
-        href={imageDTO.image_url}
-        target="_blank"
-        icon={<PiShareFatBold />}
-      >
+      <MenuItem as="a" href={imageDTO.image_url} target="_blank" icon={<PiShareFatBold />}>
         {t('common.openInNewTab')}
       </MenuItem>
       {isClipboardAPIAvailable && (
@@ -184,27 +165,17 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
       </MenuItem>
       <MenuDivider />
       <MenuItem
-        icon={
-          getAndLoadEmbeddedWorkflowResult.isLoading ? (
-            <SpinnerIcon />
-          ) : (
-            <PiFlowArrowBold />
-          )
-        }
+        icon={getAndLoadEmbeddedWorkflowResult.isLoading ? <SpinnerIcon /> : <PiFlowArrowBold />}
         onClickCapture={handleLoadWorkflow}
         isDisabled={!imageDTO.has_workflow}
       >
         {t('nodes.loadWorkflow')}
       </MenuItem>
       <MenuItem
-        icon={
-          isLoadingMetadata ? <SpinnerIcon /> : <PiArrowsCounterClockwiseBold />
-        }
+        icon={isLoadingMetadata ? <SpinnerIcon /> : <PiArrowsCounterClockwiseBold />}
         onClickCapture={handleRemixImage}
         isDisabled={
-          isLoadingMetadata ||
-          (metadata?.positive_prompt === undefined &&
-            metadata?.negative_prompt === undefined)
+          isLoadingMetadata || (metadata?.positive_prompt === undefined && metadata?.negative_prompt === undefined)
         }
       >
         {t('parameters.remixImage')}
@@ -213,9 +184,7 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
         icon={isLoadingMetadata ? <SpinnerIcon /> : <PiQuotesBold />}
         onClickCapture={handleRecallPrompt}
         isDisabled={
-          isLoadingMetadata ||
-          (metadata?.positive_prompt === undefined &&
-            metadata?.negative_prompt === undefined)
+          isLoadingMetadata || (metadata?.positive_prompt === undefined && metadata?.negative_prompt === undefined)
         }
       >
         {t('parameters.usePrompt')}
@@ -235,19 +204,11 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
         {t('parameters.useAll')}
       </MenuItem>
       <MenuDivider />
-      <MenuItem
-        icon={<PiShareFatBold />}
-        onClickCapture={handleSendToImageToImage}
-        id="send-to-img2img"
-      >
+      <MenuItem icon={<PiShareFatBold />} onClickCapture={handleSendToImageToImage} id="send-to-img2img">
         {t('parameters.sendToImg2Img')}
       </MenuItem>
       {isCanvasEnabled && (
-        <MenuItem
-          icon={<PiShareFatBold />}
-          onClickCapture={handleSendToCanvas}
-          id="send-to-canvas"
-        >
+        <MenuItem icon={<PiShareFatBold />} onClickCapture={handleSendToCanvas} id="send-to-canvas">
           {t('parameters.sendToUnifiedCanvas')}
         </MenuItem>
       )}
@@ -256,26 +217,16 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
         {t('boards.changeBoard')}
       </MenuItem>
       {imageDTO.starred ? (
-        <MenuItem
-          icon={customStarUi ? customStarUi.off.icon : <PiStarFill />}
-          onClickCapture={handleUnstarImage}
-        >
+        <MenuItem icon={customStarUi ? customStarUi.off.icon : <PiStarFill />} onClickCapture={handleUnstarImage}>
           {customStarUi ? customStarUi.off.text : t('gallery.unstarImage')}
         </MenuItem>
       ) : (
-        <MenuItem
-          icon={customStarUi ? customStarUi.on.icon : <PiStarBold />}
-          onClickCapture={handleStarImage}
-        >
+        <MenuItem icon={customStarUi ? customStarUi.on.icon : <PiStarBold />} onClickCapture={handleStarImage}>
           {customStarUi ? customStarUi.on.text : t('gallery.starImage')}
         </MenuItem>
       )}
       <MenuDivider />
-      <MenuItem
-        color="error.300"
-        icon={<PiTrashSimpleBold />}
-        onClickCapture={handleDelete}
-      >
+      <MenuItem color="error.300" icon={<PiTrashSimpleBold />} onClickCapture={handleDelete}>
         {t('gallery.deleteImage')}
       </MenuItem>
     </>
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
index 16a1b367b1..bd9afcd417 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
@@ -1,14 +1,4 @@
-import {
-  Box,
-  Button,
-  ButtonGroup,
-  Flex,
-  Tab,
-  TabList,
-  Tabs,
-  useDisclosure,
-  VStack,
-} from '@invoke-ai/ui-library';
+import { Box, Button, ButtonGroup, Flex, Tab, TabList, Tabs, useDisclosure, VStack } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { $galleryHeader } from 'app/store/nanostores/galleryHeader';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
@@ -30,8 +20,7 @@ const ImageGalleryContent = () => {
   const galleryView = useAppSelector((s) => s.gallery.galleryView);
   const dispatch = useAppDispatch();
   const galleryHeader = useStore($galleryHeader);
-  const { isOpen: isBoardListOpen, onToggle: onToggleBoardList } =
-    useDisclosure({ defaultIsOpen: true });
+  const { isOpen: isBoardListOpen, onToggle: onToggleBoardList } = useDisclosure({ defaultIsOpen: true });
 
   const handleClickImages = useCallback(() => {
     dispatch(galleryViewChanged('images'));
@@ -42,26 +31,11 @@ const ImageGalleryContent = () => {
   }, [dispatch]);
 
   return (
-    <VStack
-      layerStyle="first"
-      flexDirection="column"
-      h="full"
-      w="full"
-      borderRadius="base"
-      p={2}
-    >
+    <VStack layerStyle="first" flexDirection="column" h="full" w="full" borderRadius="base" p={2}>
       {galleryHeader}
       <Box w="full">
-        <Flex
-          ref={resizeObserverRef}
-          alignItems="center"
-          justifyContent="space-between"
-          gap={2}
-        >
-          <GalleryBoardName
-            isOpen={isBoardListOpen}
-            onToggle={onToggleBoardList}
-          />
+        <Flex ref={resizeObserverRef} alignItems="center" justifyContent="space-between" gap={2}>
+          <GalleryBoardName isOpen={isBoardListOpen} onToggle={onToggleBoardList} />
           <GallerySettingsPopover />
         </Flex>
         <Box>
@@ -70,12 +44,7 @@ const ImageGalleryContent = () => {
       </Box>
       <Flex ref={galleryGridRef} direction="column" gap={2} h="full" w="full">
         <Flex alignItems="center" justifyContent="space-between" gap={2}>
-          <Tabs
-            index={galleryView === 'images' ? 0 : 1}
-            variant="unstyled"
-            size="sm"
-            w="full"
-          >
+          <Tabs index={galleryView === 'images' ? 0 : 1} variant="unstyled" size="sm" w="full">
             <TabList>
               <ButtonGroup w="full">
                 <Tab
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
index 25e6fcafdd..15780f3d3d 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
@@ -7,11 +7,7 @@ import IAIDndImage from 'common/components/IAIDndImage';
 import IAIDndImageIcon from 'common/components/IAIDndImageIcon';
 import IAIFillSkeleton from 'common/components/IAIFillSkeleton';
 import { imagesToDeleteSelected } from 'features/deleteImageModal/store/slice';
-import type {
-  GallerySelectionDraggableData,
-  ImageDraggableData,
-  TypesafeDraggableData,
-} from 'features/dnd/types';
+import type { GallerySelectionDraggableData, ImageDraggableData, TypesafeDraggableData } from 'features/dnd/types';
 import { getGalleryImageDataTestId } from 'features/gallery/components/ImageGrid/getGalleryImageDataTestId';
 import { useMultiselect } from 'features/gallery/hooks/useMultiselect';
 import { useScrollIntoView } from 'features/gallery/hooks/useScrollIntoView';
@@ -19,11 +15,7 @@ import type { MouseEvent } from 'react';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiStarBold, PiStarFill, PiTrashSimpleFill } from 'react-icons/pi';
-import {
-  useGetImageDTOQuery,
-  useStarImagesMutation,
-  useUnstarImagesMutation,
-} from 'services/api/endpoints/images';
+import { useGetImageDTOQuery, useStarImagesMutation, useUnstarImagesMutation } from 'services/api/endpoints/images';
 
 const imageSx: SystemStyleObject = { w: 'full', h: 'full' };
 const imageIconStyleOverrides: SystemStyleObject = {
@@ -42,16 +34,11 @@ const GalleryImage = (props: HoverableImageProps) => {
   const shift = useShiftModifier();
   const { t } = useTranslation();
   const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId);
-  const { handleClick, isSelected, areMultiplesSelected } =
-    useMultiselect(imageDTO);
+  const { handleClick, isSelected, areMultiplesSelected } = useMultiselect(imageDTO);
 
   const customStarUi = useStore($customStarUI);
 
-  const imageContainerRef = useScrollIntoView(
-    isSelected,
-    props.index,
-    areMultiplesSelected
-  );
+  const imageContainerRef = useScrollIntoView(isSelected, props.index, areMultiplesSelected);
 
   const handleDelete = useCallback(
     (e: MouseEvent<HTMLButtonElement>) => {
@@ -127,22 +114,14 @@ const GalleryImage = (props: HoverableImageProps) => {
     return '';
   }, [imageDTO?.starred, customStarUi]);
 
-  const dataTestId = useMemo(
-    () => getGalleryImageDataTestId(imageDTO?.image_name),
-    [imageDTO?.image_name]
-  );
+  const dataTestId = useMemo(() => getGalleryImageDataTestId(imageDTO?.image_name), [imageDTO?.image_name]);
 
   if (!imageDTO) {
     return <IAIFillSkeleton />;
   }
 
   return (
-    <Box
-      w="full"
-      h="full"
-      className="gallerygrid-image"
-      data-testid={dataTestId}
-    >
+    <Box w="full" h="full" className="gallerygrid-image" data-testid={dataTestId}>
       <Flex
         ref={imageContainerRef}
         userSelect="none"
@@ -166,11 +145,7 @@ const GalleryImage = (props: HoverableImageProps) => {
           onMouseOut={handleMouseOut}
         >
           <>
-            <IAIDndImageIcon
-              onClick={toggleStarredState}
-              icon={starIcon}
-              tooltip={starTooltip}
-            />
+            <IAIDndImageIcon onClick={toggleStarredState} icon={starIcon} tooltip={starTooltip} />
 
             {isHovered && shift && (
               <IAIDndImageIcon
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx
index 86375af208..608205c894 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx
@@ -11,12 +11,7 @@ import type { CSSProperties } from 'react';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiImageBold, PiWarningCircleBold } from 'react-icons/pi';
-import type {
-  GridComponents,
-  ItemContent,
-  ListRange,
-  VirtuosoGridHandle,
-} from 'react-virtuoso';
+import type { GridComponents, ItemContent, ListRange, VirtuosoGridHandle } from 'react-virtuoso';
 import { VirtuosoGrid } from 'react-virtuoso';
 import { useBoardTotal } from 'services/api/hooks/useBoardTotal';
 
@@ -35,9 +30,7 @@ const GalleryImageGrid = () => {
   const { t } = useTranslation();
   const rootRef = useRef<HTMLDivElement>(null);
   const [scroller, setScroller] = useState<HTMLElement | null>(null);
-  const [initialize, osInstance] = useOverlayScrollbars(
-    overlayScrollbarsParams
-  );
+  const [initialize, osInstance] = useOverlayScrollbars(overlayScrollbarsParams);
   const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId);
   const { currentViewTotal } = useBoardTotal(selectedBoardId);
   const virtuosoRangeRef = useRef<ListRange | null>(null);
@@ -49,13 +42,7 @@ const GalleryImageGrid = () => {
   } = useGalleryImages();
   useGalleryHotkeys();
   const itemContentFunc: ItemContent<EntityId, void> = useCallback(
-    (index, imageName) => (
-      <GalleryImage
-        key={imageName}
-        index={index}
-        imageName={imageName as string}
-      />
-    ),
+    (index, imageName) => <GalleryImage key={imageName} index={index} imageName={imageName as string} />,
     []
   );
 
@@ -95,10 +82,7 @@ const GalleryImageGrid = () => {
   if (isSuccess && currentData?.ids.length === 0) {
     return (
       <Flex w="full" h="full" alignItems="center" justifyContent="center">
-        <IAINoContentFallback
-          label={t('gallery.noImagesInGallery')}
-          icon={PiImageBold}
-        />
+        <IAINoContentFallback label={t('gallery.noImagesInGallery')} icon={PiImageBold} />
       </Flex>
     );
   }
@@ -135,10 +119,7 @@ const GalleryImageGrid = () => {
   if (isError) {
     return (
       <Box w="full" h="full">
-        <IAINoContentFallback
-          label={t('gallery.unableToLoad')}
-          icon={PiWarningCircleBold}
-        />
+        <IAINoContentFallback label={t('gallery.unableToLoad')} icon={PiWarningCircleBold} />
       </Box>
     );
   }
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridItemContainer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridItemContainer.tsx
index 0e8a278371..16e851c0eb 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridItemContainer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridItemContainer.tsx
@@ -7,12 +7,7 @@ export const imageItemContainerTestId = 'image-item-container';
 
 type ItemContainerProps = PropsWithChildren & FlexProps;
 const ItemContainer = forwardRef((props: ItemContainerProps, ref) => (
-  <Box
-    className="item-container"
-    ref={ref}
-    p={1.5}
-    data-testid={imageItemContainerTestId}
-  >
+  <Box className="item-container" ref={ref} p={1.5} data-testid={imageItemContainerTestId}>
     {props.children}
   </Box>
 ));
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridListContainer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridListContainer.tsx
index 6a43171975..1dbf7d95a6 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridListContainer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridListContainer.tsx
@@ -8,9 +8,7 @@ export const imageListContainerTestId = 'image-list-container';
 
 type ListContainerProps = PropsWithChildren & FlexProps;
 const ListContainer = forwardRef((props: ListContainerProps, ref) => {
-  const galleryImageMinimumWidth = useAppSelector(
-    (s) => s.gallery.galleryImageMinimumWidth
-  );
+  const galleryImageMinimumWidth = useAppSelector((s) => s.gallery.galleryImageMinimumWidth);
 
   return (
     <Grid
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/getGalleryImageDataTestId.ts b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/getGalleryImageDataTestId.ts
index ce3ab4ae46..031e30dcfe 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/getGalleryImageDataTestId.ts
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/getGalleryImageDataTestId.ts
@@ -1,2 +1 @@
-export const getGalleryImageDataTestId = (imageName?: string) =>
-  `gallery-image-${imageName}`;
+export const getGalleryImageDataTestId = (imageName?: string) => `gallery-image-${imageName}`;
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx
index 8c5d55deef..8f6cef2c20 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx
@@ -15,17 +15,11 @@ type Props = {
   withCopy?: boolean;
 };
 
-const overlayscrollbarsOptions = getOverlayScrollbarsParams(
-  'scroll',
-  'scroll'
-).options;
+const overlayscrollbarsOptions = getOverlayScrollbarsParams('scroll', 'scroll').options;
 
 const DataViewer = (props: Props) => {
   const { label, data, fileName, withDownload = true, withCopy = true } = props;
-  const dataString = useMemo(
-    () => (isString(data) ? data : JSON.stringify(data, null, 2)),
-    [data]
-  );
+  const dataString = useMemo(() => (isString(data) ? data : JSON.stringify(data, null, 2)), [data]);
 
   const handleCopy = useCallback(() => {
     navigator.clipboard.writeText(dataString);
@@ -44,29 +38,9 @@ const DataViewer = (props: Props) => {
   const { t } = useTranslation();
 
   return (
-    <Flex
-      layerStyle="second"
-      borderRadius="base"
-      flexGrow={1}
-      w="full"
-      h="full"
-      position="relative"
-    >
-      <Box
-        position="absolute"
-        top={0}
-        left={0}
-        right={0}
-        bottom={0}
-        overflow="auto"
-        p={4}
-        fontSize="sm"
-      >
-        <OverlayScrollbarsComponent
-          defer
-          style={overlayScrollbarsStyles}
-          options={overlayscrollbarsOptions}
-        >
+    <Flex layerStyle="second" borderRadius="base" flexGrow={1} w="full" h="full" position="relative">
+      <Box position="absolute" top={0} left={0} right={0} bottom={0} overflow="auto" p={4} fontSize="sm">
+        <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayscrollbarsOptions}>
           <pre>{dataString}</pre>
         </OverlayScrollbarsComponent>
       </Box>
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx
index 3cf0d5db10..e9a1461186 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx
@@ -147,25 +147,19 @@ const ImageMetadataActions = (props: Props) => {
 
   const validControlNets: ControlNetMetadataItem[] = useMemo(() => {
     return metadata?.controlnets
-      ? metadata.controlnets.filter((controlnet) =>
-          isParameterControlNetModel(controlnet.control_model)
-        )
+      ? metadata.controlnets.filter((controlnet) => isParameterControlNetModel(controlnet.control_model))
       : [];
   }, [metadata?.controlnets]);
 
   const validIPAdapters: IPAdapterMetadataItem[] = useMemo(() => {
     return metadata?.ipAdapters
-      ? metadata.ipAdapters.filter((ipAdapter) =>
-          isParameterControlNetModel(ipAdapter.ip_adapter_model)
-        )
+      ? metadata.ipAdapters.filter((ipAdapter) => isParameterControlNetModel(ipAdapter.ip_adapter_model))
       : [];
   }, [metadata?.ipAdapters]);
 
   const validT2IAdapters: T2IAdapterMetadataItem[] = useMemo(() => {
     return metadata?.t2iAdapters
-      ? metadata.t2iAdapters.filter((t2iAdapter) =>
-          isParameterT2IAdapterModel(t2iAdapter.t2i_adapter_model)
-        )
+      ? metadata.t2iAdapters.filter((t2iAdapter) => isParameterT2IAdapterModel(t2iAdapter.t2i_adapter_model))
       : [];
   }, [metadata?.t2iAdapters]);
 
@@ -175,17 +169,9 @@ const ImageMetadataActions = (props: Props) => {
 
   return (
     <>
-      {metadata.created_by && (
-        <ImageMetadataItem
-          label={t('metadata.createdBy')}
-          value={metadata.created_by}
-        />
-      )}
+      {metadata.created_by && <ImageMetadataItem label={t('metadata.createdBy')} value={metadata.created_by} />}
       {metadata.generation_mode && (
-        <ImageMetadataItem
-          label={t('metadata.generationMode')}
-          value={metadata.generation_mode}
-        />
+        <ImageMetadataItem label={t('metadata.generationMode')} value={metadata.generation_mode} />
       )}
       {metadata.positive_prompt && (
         <ImageMetadataItem
@@ -220,41 +206,19 @@ const ImageMetadataActions = (props: Props) => {
         />
       )}
       {metadata.seed !== undefined && metadata.seed !== null && (
-        <ImageMetadataItem
-          label={t('metadata.seed')}
-          value={metadata.seed}
-          onClick={handleRecallSeed}
-        />
+        <ImageMetadataItem label={t('metadata.seed')} value={metadata.seed} onClick={handleRecallSeed} />
+      )}
+      {metadata.model !== undefined && metadata.model !== null && metadata.model.model_name && (
+        <ImageMetadataItem label={t('metadata.model')} value={metadata.model.model_name} onClick={handleRecallModel} />
       )}
-      {metadata.model !== undefined &&
-        metadata.model !== null &&
-        metadata.model.model_name && (
-          <ImageMetadataItem
-            label={t('metadata.model')}
-            value={metadata.model.model_name}
-            onClick={handleRecallModel}
-          />
-        )}
       {metadata.width && (
-        <ImageMetadataItem
-          label={t('metadata.width')}
-          value={metadata.width}
-          onClick={handleRecallWidth}
-        />
+        <ImageMetadataItem label={t('metadata.width')} value={metadata.width} onClick={handleRecallWidth} />
       )}
       {metadata.height && (
-        <ImageMetadataItem
-          label={t('metadata.height')}
-          value={metadata.height}
-          onClick={handleRecallHeight}
-        />
+        <ImageMetadataItem label={t('metadata.height')} value={metadata.height} onClick={handleRecallHeight} />
       )}
       {metadata.scheduler && (
-        <ImageMetadataItem
-          label={t('metadata.scheduler')}
-          value={metadata.scheduler}
-          onClick={handleRecallScheduler}
-        />
+        <ImageMetadataItem label={t('metadata.scheduler')} value={metadata.scheduler} onClick={handleRecallScheduler} />
       )}
       <ImageMetadataItem
         label={t('metadata.vae')}
@@ -262,33 +226,20 @@ const ImageMetadataActions = (props: Props) => {
         onClick={handleRecallVaeModel}
       />
       {metadata.steps && (
-        <ImageMetadataItem
-          label={t('metadata.steps')}
-          value={metadata.steps}
-          onClick={handleRecallSteps}
-        />
+        <ImageMetadataItem label={t('metadata.steps')} value={metadata.steps} onClick={handleRecallSteps} />
       )}
       {metadata.cfg_scale !== undefined && metadata.cfg_scale !== null && (
+        <ImageMetadataItem label={t('metadata.cfgScale')} value={metadata.cfg_scale} onClick={handleRecallCfgScale} />
+      )}
+      {metadata.cfg_rescale_multiplier !== undefined && metadata.cfg_rescale_multiplier !== null && (
         <ImageMetadataItem
-          label={t('metadata.cfgScale')}
-          value={metadata.cfg_scale}
-          onClick={handleRecallCfgScale}
+          label={t('metadata.cfgRescaleMultiplier')}
+          value={metadata.cfg_rescale_multiplier}
+          onClick={handleRecallCfgRescaleMultiplier}
         />
       )}
-      {metadata.cfg_rescale_multiplier !== undefined &&
-        metadata.cfg_rescale_multiplier !== null && (
-          <ImageMetadataItem
-            label={t('metadata.cfgRescaleMultiplier')}
-            value={metadata.cfg_rescale_multiplier}
-            onClick={handleRecallCfgRescaleMultiplier}
-          />
-        )}
       {metadata.strength && (
-        <ImageMetadataItem
-          label={t('metadata.strength')}
-          value={metadata.strength}
-          onClick={handleRecallStrength}
-        />
+        <ImageMetadataItem label={t('metadata.strength')} value={metadata.strength} onClick={handleRecallStrength} />
       )}
       {metadata.hrf_enabled && (
         <ImageMetadataItem
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx
index 3018c80b94..c6dbd16269 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx
@@ -1,10 +1,4 @@
-import {
-  ExternalLink,
-  Flex,
-  IconButton,
-  Text,
-  Tooltip,
-} from '@invoke-ai/ui-library';
+import { ExternalLink, Flex, IconButton, Text, Tooltip } from '@invoke-ai/ui-library';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { IoArrowUndoCircleOutline } from 'react-icons/io5';
@@ -22,20 +16,10 @@ type MetadataItemProps = {
 /**
  * Component to display an individual metadata item or parameter.
  */
-const ImageMetadataItem = ({
-  label,
-  value,
-  onClick,
-  isLink,
-  labelPosition,
-  withCopy = false,
-}: MetadataItemProps) => {
+const ImageMetadataItem = ({ label, value, onClick, isLink, labelPosition, withCopy = false }: MetadataItemProps) => {
   const { t } = useTranslation();
 
-  const handleCopy = useCallback(
-    () => navigator.clipboard.writeText(value.toString()),
-    [value]
-  );
+  const handleCopy = useCallback(() => navigator.clipboard.writeText(value.toString()), [value]);
 
   if (!value) {
     return null;
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx
index d0d18c93fc..6cb4f6ddd3 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx
@@ -1,12 +1,4 @@
-import {
-  ExternalLink,
-  Flex,
-  Tab,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Tabs,
-} from '@invoke-ai/ui-library';
+import { ExternalLink, Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { memo } from 'react';
@@ -46,14 +38,7 @@ const ImageMetadataViewer = ({ image }: ImageMetadataViewerProps) => {
     >
       <ExternalLink href={image.image_url} label={image.image_name} />
 
-      <Tabs
-        variant="line"
-        isLazy={true}
-        display="flex"
-        flexDir="column"
-        w="full"
-        h="full"
-      >
+      <Tabs variant="line" isLazy={true} display="flex" flexDir="column" w="full" h="full">
         <TabList>
           <Tab>{t('metadata.recallParameters')}</Tab>
           <Tab>{t('metadata.metadata')}</Tab>
diff --git a/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx
index f526a1077f..9949fb5bd5 100644
--- a/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx
@@ -4,11 +4,7 @@ import { useGalleryImages } from 'features/gallery/hooks/useGalleryImages';
 import { useGalleryNavigation } from 'features/gallery/hooks/useGalleryNavigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  PiCaretDoubleRightBold,
-  PiCaretLeftBold,
-  PiCaretRightBold,
-} from 'react-icons/pi';
+import { PiCaretDoubleRightBold, PiCaretLeftBold, PiCaretRightBold } from 'react-icons/pi';
 
 const nextPrevButtonStyles: ChakraProps['sx'] = {
   color: 'base.100',
@@ -18,8 +14,7 @@ const nextPrevButtonStyles: ChakraProps['sx'] = {
 const NextPrevImageButtons = () => {
   const { t } = useTranslation();
 
-  const { handleLeftImage, handleRightImage, isOnFirstImage, isOnLastImage } =
-    useGalleryNavigation();
+  const { handleLeftImage, handleRightImage, isOnFirstImage, isOnLastImage } = useGalleryNavigation();
 
   const {
     areMoreImagesAvailable,
@@ -29,12 +24,7 @@ const NextPrevImageButtons = () => {
 
   return (
     <Box pos="relative" h="full" w="full">
-      <Box
-        pos="absolute"
-        top="50%"
-        transform="translate(0, -50%)"
-        insetInlineStart={1}
-      >
+      <Box pos="absolute" top="50%" transform="translate(0, -50%)" insetInlineStart={1}>
         {!isOnFirstImage && (
           <IconButton
             aria-label={t('accessibility.previousImage')}
@@ -46,12 +36,7 @@ const NextPrevImageButtons = () => {
           />
         )}
       </Box>
-      <Box
-        pos="absolute"
-        top="50%"
-        transform="translate(0, -50%)"
-        insetInlineEnd={6}
-      >
+      <Box pos="absolute" top="50%" transform="translate(0, -50%)" insetInlineEnd={6}>
         {!isOnLastImage && (
           <IconButton
             aria-label={t('accessibility.nextImage')}
diff --git a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts
index e027900b93..f802b290cf 100644
--- a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts
+++ b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts
@@ -12,14 +12,8 @@ export const useGalleryHotkeys = () => {
     queryResult: { isFetching },
   } = useGalleryImages();
 
-  const {
-    handleLeftImage,
-    handleRightImage,
-    handleUpImage,
-    handleDownImage,
-    isOnLastImage,
-    areImagesBelowCurrent,
-  } = useGalleryNavigation();
+  const { handleLeftImage, handleRightImage, handleUpImage, handleDownImage, isOnLastImage, areImagesBelowCurrent } =
+    useGalleryNavigation();
 
   useHotkeys(
     'left',
@@ -40,13 +34,7 @@ export const useGalleryHotkeys = () => {
         handleRightImage();
       }
     },
-    [
-      isOnLastImage,
-      areMoreImagesAvailable,
-      handleLoadMoreImages,
-      isFetching,
-      handleRightImage,
-    ]
+    [isOnLastImage, areMoreImagesAvailable, handleLoadMoreImages, isFetching, handleRightImage]
   );
 
   useHotkeys(
@@ -68,12 +56,6 @@ export const useGalleryHotkeys = () => {
       handleDownImage();
     },
     { preventDefault: true },
-    [
-      areImagesBelowCurrent,
-      areMoreImagesAvailable,
-      handleLoadMoreImages,
-      isFetching,
-      handleDownImage,
-    ]
+    [areImagesBelowCurrent, areMoreImagesAvailable, handleLoadMoreImages, isFetching, handleDownImage]
   );
 };
diff --git a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryImages.ts b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryImages.ts
index 773fba9013..b3310d5e34 100644
--- a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryImages.ts
+++ b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryImages.ts
@@ -2,10 +2,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { selectListImagesQueryArgs } from 'features/gallery/store/gallerySelectors';
 import { moreImagesLoaded } from 'features/gallery/store/gallerySlice';
 import { useCallback, useMemo } from 'react';
-import {
-  useGetBoardAssetsTotalQuery,
-  useGetBoardImagesTotalQuery,
-} from 'services/api/endpoints/boards';
+import { useGetBoardAssetsTotalQuery, useGetBoardImagesTotalQuery } from 'services/api/endpoints/boards';
 import { useListImagesQuery } from 'services/api/endpoints/images';
 
 /**
diff --git a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryNavigation.ts b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryNavigation.ts
index a0d6d208a4..b6fdb183e6 100644
--- a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryNavigation.ts
+++ b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryNavigation.ts
@@ -29,14 +29,10 @@ import { imagesSelectors } from 'services/api/util';
  */
 const getImagesPerRow = (): number => {
   const widthOfGalleryImage =
-    document
-      .querySelector(`[data-testid="${imageItemContainerTestId}"]`)
-      ?.getBoundingClientRect().width ?? 1;
+    document.querySelector(`[data-testid="${imageItemContainerTestId}"]`)?.getBoundingClientRect().width ?? 1;
 
   const widthOfGalleryGrid =
-    document
-      .querySelector(`[data-testid="${imageListContainerTestId}"]`)
-      ?.getBoundingClientRect().width ?? 0;
+    document.querySelector(`[data-testid="${imageListContainerTestId}"]`)?.getBoundingClientRect().width ?? 0;
 
   const imagesPerRow = Math.round(widthOfGalleryGrid / widthOfGalleryImage);
 
@@ -59,9 +55,7 @@ const scrollToImage = (imageName: string, index: number) => {
     return;
   }
 
-  const imageElement = document.querySelector(
-    `[data-testid="${getGalleryImageDataTestId(imageName)}"]`
-  );
+  const imageElement = document.querySelector(`[data-testid="${getGalleryImageDataTestId(imageName)}"]`);
   const itemRect = imageElement?.getBoundingClientRect();
   const rootRect = root.getBoundingClientRect();
   if (!itemRect || !getIsVisible(itemRect, rootRect)) {
@@ -90,9 +84,7 @@ const getUpImage = (images: ImageDTO[], currentIndex: number) => {
   const imagesPerRow = getImagesPerRow();
   // If we are on the first row, we want to stay on the first row, not go to first image
   const isOnFirstRow = currentIndex < imagesPerRow;
-  const index = isOnFirstRow
-    ? currentIndex
-    : clamp(currentIndex - imagesPerRow, 0, images.length - 1);
+  const index = isOnFirstRow ? currentIndex : clamp(currentIndex - imagesPerRow, 0, images.length - 1);
   const image = images[index];
   return { index, image };
 };
@@ -101,9 +93,7 @@ const getDownImage = (images: ImageDTO[], currentIndex: number) => {
   const imagesPerRow = getImagesPerRow();
   // If there are no images below the current image, we want to stay where we are
   const areImagesBelow = currentIndex < images.length - imagesPerRow;
-  const index = areImagesBelow
-    ? clamp(currentIndex + imagesPerRow, 0, images.length - 1)
-    : currentIndex;
+  const index = areImagesBelow ? clamp(currentIndex + imagesPerRow, 0, images.length - 1) : currentIndex;
   const image = images[index];
   return { index, image };
 };
@@ -137,17 +127,12 @@ export const useGalleryNavigation = (): UseGalleryNavigationReturn => {
   const {
     queryResult: { data },
   } = useGalleryImages();
-  const loadedImagesCount = useMemo(
-    () => data?.ids.length ?? 0,
-    [data?.ids.length]
-  );
+  const loadedImagesCount = useMemo(() => data?.ids.length ?? 0, [data?.ids.length]);
   const lastSelectedImageIndex = useMemo(() => {
     if (!data || !lastSelectedImage) {
       return 0;
     }
-    return imagesSelectors
-      .selectAll(data)
-      .findIndex((i) => i.image_name === lastSelectedImage.image_name);
+    return imagesSelectors.selectAll(data).findIndex((i) => i.image_name === lastSelectedImage.image_name);
   }, [lastSelectedImage, data]);
 
   const handleNavigation = useCallback(
@@ -155,10 +140,7 @@ export const useGalleryNavigation = (): UseGalleryNavigationReturn => {
       if (!data) {
         return;
       }
-      const { index, image } = getImageFuncs[direction](
-        imagesSelectors.selectAll(data),
-        lastSelectedImageIndex
-      );
+      const { index, image } = getImageFuncs[direction](imagesSelectors.selectAll(data), lastSelectedImageIndex);
       if (!image || index === lastSelectedImageIndex) {
         return;
       }
@@ -168,10 +150,7 @@ export const useGalleryNavigation = (): UseGalleryNavigationReturn => {
     [dispatch, lastSelectedImageIndex, data]
   );
 
-  const isOnFirstImage = useMemo(
-    () => lastSelectedImageIndex === 0,
-    [lastSelectedImageIndex]
-  );
+  const isOnFirstImage = useMemo(() => lastSelectedImageIndex === 0, [lastSelectedImageIndex]);
 
   const isOnLastImage = useMemo(
     () => lastSelectedImageIndex === loadedImagesCount - 1,
diff --git a/invokeai/frontend/web/src/features/gallery/hooks/useMultiselect.ts b/invokeai/frontend/web/src/features/gallery/hooks/useMultiselect.ts
index b32fec6e02..05e7d075e5 100644
--- a/invokeai/frontend/web/src/features/gallery/hooks/useMultiselect.ts
+++ b/invokeai/frontend/web/src/features/gallery/hooks/useMultiselect.ts
@@ -1,10 +1,7 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { galleryImageClicked } from 'app/store/middleware/listenerMiddleware/listeners/galleryImageClicked';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import {
-  selectGallerySlice,
-  selectionChanged,
-} from 'features/gallery/store/gallerySlice';
+import { selectGallerySlice, selectionChanged } from 'features/gallery/store/gallerySlice';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import type { MouseEvent } from 'react';
 import { useCallback, useMemo } from 'react';
@@ -12,9 +9,7 @@ import type { ImageDTO } from 'services/api/types';
 
 export const useMultiselect = (imageDTO?: ImageDTO) => {
   const dispatch = useAppDispatch();
-  const areMultiplesSelected = useAppSelector(
-    (s) => s.gallery.selection.length > 1
-  );
+  const areMultiplesSelected = useAppSelector((s) => s.gallery.selection.length > 1);
   const selectIsSelected = useMemo(
     () =>
       createSelector(selectGallerySlice, (gallery) =>
diff --git a/invokeai/frontend/web/src/features/gallery/hooks/useScrollIntoView.ts b/invokeai/frontend/web/src/features/gallery/hooks/useScrollIntoView.ts
index 01579cfe79..9947a4d78c 100644
--- a/invokeai/frontend/web/src/features/gallery/hooks/useScrollIntoView.ts
+++ b/invokeai/frontend/web/src/features/gallery/hooks/useScrollIntoView.ts
@@ -16,11 +16,7 @@ import { useEffect, useRef } from 'react';
  * @param selectionCount The number of images selected.
  * @returns
  */
-export const useScrollIntoView = (
-  isSelected: boolean,
-  index: number,
-  areMultiplesSelected: boolean
-) => {
+export const useScrollIntoView = (isSelected: boolean, index: number, areMultiplesSelected: boolean) => {
   const imageContainerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
diff --git a/invokeai/frontend/web/src/features/gallery/store/actions.ts b/invokeai/frontend/web/src/features/gallery/store/actions.ts
index 5b2891e147..4ebf4e021d 100644
--- a/invokeai/frontend/web/src/features/gallery/store/actions.ts
+++ b/invokeai/frontend/web/src/features/gallery/store/actions.ts
@@ -7,10 +7,9 @@ export type RequestedBoardImagesDeletionArg = {
   imagesUsage: ImageUsage;
 };
 
-export const requestedBoardImagesDeletion =
-  createAction<RequestedBoardImagesDeletionArg>(
-    'gallery/requestedBoardImagesDeletion'
-  );
+export const requestedBoardImagesDeletion = createAction<RequestedBoardImagesDeletionArg>(
+  'gallery/requestedBoardImagesDeletion'
+);
 
 export const sentImageToCanvas = createAction('gallery/sentImageToCanvas');
 
diff --git a/invokeai/frontend/web/src/features/gallery/store/gallerySelectors.ts b/invokeai/frontend/web/src/features/gallery/store/gallerySelectors.ts
index ceea56b2da..1c64fc7809 100644
--- a/invokeai/frontend/web/src/features/gallery/store/gallerySelectors.ts
+++ b/invokeai/frontend/web/src/features/gallery/store/gallerySelectors.ts
@@ -1,9 +1,6 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { selectGallerySlice } from 'features/gallery/store/gallerySlice';
-import {
-  ASSETS_CATEGORIES,
-  IMAGE_CATEGORIES,
-} from 'features/gallery/store/types';
+import { ASSETS_CATEGORIES, IMAGE_CATEGORIES } from 'features/gallery/store/types';
 import type { ListImagesArgs } from 'services/api/types';
 
 export const selectLastSelectedImage = createMemoizedSelector(
@@ -15,8 +12,7 @@ export const selectListImagesQueryArgs = createMemoizedSelector(
   selectGallerySlice,
   (gallery): ListImagesArgs => ({
     board_id: gallery.selectedBoardId,
-    categories:
-      gallery.galleryView === 'images' ? IMAGE_CATEGORIES : ASSETS_CATEGORIES,
+    categories: gallery.galleryView === 'images' ? IMAGE_CATEGORIES : ASSETS_CATEGORIES,
     offset: gallery.offset,
     limit: gallery.limit,
     is_intermediate: false,
diff --git a/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts b/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts
index d1158173ed..6adad0be70 100644
--- a/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts
+++ b/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts
@@ -41,10 +41,7 @@ export const gallerySlice = createSlice({
     autoAssignBoardOnClickChanged: (state, action: PayloadAction<boolean>) => {
       state.autoAssignBoardOnClick = action.payload;
     },
-    boardIdSelected: (
-      state,
-      action: PayloadAction<{ boardId: BoardId; selectedImageName?: string }>
-    ) => {
+    boardIdSelected: (state, action: PayloadAction<{ boardId: BoardId; selectedImageName?: string }>) => {
       state.selectedBoardId = action.payload.boardId;
       state.galleryView = 'images';
       state.offset = 0;
@@ -86,19 +83,16 @@ export const gallerySlice = createSlice({
         state.autoAddBoardId = 'none';
       }
     });
-    builder.addMatcher(
-      boardsApi.endpoints.listAllBoards.matchFulfilled,
-      (state, action) => {
-        const boards = action.payload;
-        if (!state.autoAddBoardId) {
-          return;
-        }
-
-        if (!boards.map((b) => b.board_id).includes(state.autoAddBoardId)) {
-          state.autoAddBoardId = 'none';
-        }
+    builder.addMatcher(boardsApi.endpoints.listAllBoards.matchFulfilled, (state, action) => {
+      const boards = action.payload;
+      if (!state.autoAddBoardId) {
+        return;
       }
-    );
+
+      if (!boards.map((b) => b.board_id).includes(state.autoAddBoardId)) {
+        state.autoAddBoardId = 'none';
+      }
+    });
   },
 });
 
diff --git a/invokeai/frontend/web/src/features/gallery/store/types.ts b/invokeai/frontend/web/src/features/gallery/store/types.ts
index 9f7ceedc6a..6ac9269b36 100644
--- a/invokeai/frontend/web/src/features/gallery/store/types.ts
+++ b/invokeai/frontend/web/src/features/gallery/store/types.ts
@@ -1,12 +1,7 @@
 import type { ImageCategory, ImageDTO } from 'services/api/types';
 
 export const IMAGE_CATEGORIES: ImageCategory[] = ['general'];
-export const ASSETS_CATEGORIES: ImageCategory[] = [
-  'control',
-  'mask',
-  'user',
-  'other',
-];
+export const ASSETS_CATEGORIES: ImageCategory[] = ['control', 'mask', 'user', 'other'];
 export const INITIAL_IMAGE_LIMIT = 100;
 export const IMAGE_LIMIT = 20;
 
diff --git a/invokeai/frontend/web/src/features/gallery/util/getScrollToIndexAlign.ts b/invokeai/frontend/web/src/features/gallery/util/getScrollToIndexAlign.ts
index 46be56db88..686f89cd45 100644
--- a/invokeai/frontend/web/src/features/gallery/util/getScrollToIndexAlign.ts
+++ b/invokeai/frontend/web/src/features/gallery/util/getScrollToIndexAlign.ts
@@ -6,10 +6,7 @@ import type { ListRange } from 'react-virtuoso';
  * @param range The range of items currently visible.
  * @returns
  */
-export const getScrollToIndexAlign = (
-  index: number,
-  range: ListRange
-): 'start' | 'end' => {
+export const getScrollToIndexAlign = (index: number, range: ListRange): 'start' | 'end' => {
   if (index > (range.endIndex - range.startIndex) / 2 + range.startIndex) {
     return 'end';
   }
diff --git a/invokeai/frontend/web/src/features/hrf/components/ParamHrfMethod.tsx b/invokeai/frontend/web/src/features/hrf/components/ParamHrfMethod.tsx
index e045bdf767..8a94544233 100644
--- a/invokeai/frontend/web/src/features/hrf/components/ParamHrfMethod.tsx
+++ b/invokeai/frontend/web/src/features/hrf/components/ParamHrfMethod.tsx
@@ -26,10 +26,7 @@ const ParamHrfMethodSelect = () => {
     [dispatch]
   );
 
-  const value = useMemo(
-    () => options.find((o) => o.value === hrfMethod),
-    [hrfMethod]
-  );
+  const value = useMemo(() => options.find((o) => o.value === hrfMethod), [hrfMethod]);
 
   return (
     <FormControl>
diff --git a/invokeai/frontend/web/src/features/hrf/components/ParamHrfStrength.tsx b/invokeai/frontend/web/src/features/hrf/components/ParamHrfStrength.tsx
index ca42ae5055..c663989b08 100644
--- a/invokeai/frontend/web/src/features/hrf/components/ParamHrfStrength.tsx
+++ b/invokeai/frontend/web/src/features/hrf/components/ParamHrfStrength.tsx
@@ -1,9 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setHrfStrength } from 'features/hrf/store/hrfSlice';
 import { memo, useCallback } from 'react';
@@ -14,12 +9,8 @@ const ParamHrfStrength = () => {
   const initial = useAppSelector((s) => s.config.sd.hrfStrength.initial);
   const sliderMin = useAppSelector((s) => s.config.sd.hrfStrength.sliderMin);
   const sliderMax = useAppSelector((s) => s.config.sd.hrfStrength.sliderMax);
-  const numberInputMin = useAppSelector(
-    (s) => s.config.sd.hrfStrength.numberInputMin
-  );
-  const numberInputMax = useAppSelector(
-    (s) => s.config.sd.hrfStrength.numberInputMax
-  );
+  const numberInputMin = useAppSelector((s) => s.config.sd.hrfStrength.numberInputMin);
+  const numberInputMax = useAppSelector((s) => s.config.sd.hrfStrength.numberInputMax);
   const coarseStep = useAppSelector((s) => s.config.sd.hrfStrength.coarseStep);
   const fineStep = useAppSelector((s) => s.config.sd.hrfStrength.fineStep);
   const dispatch = useAppDispatch();
diff --git a/invokeai/frontend/web/src/features/hrf/components/ParamHrfToggle.tsx b/invokeai/frontend/web/src/features/hrf/components/ParamHrfToggle.tsx
index 5bdd85a679..fdd2c97e9f 100644
--- a/invokeai/frontend/web/src/features/hrf/components/ParamHrfToggle.tsx
+++ b/invokeai/frontend/web/src/features/hrf/components/ParamHrfToggle.tsx
@@ -12,8 +12,7 @@ const ParamHrfToggle = () => {
   const hrfEnabled = useAppSelector((s) => s.hrf.hrfEnabled);
 
   const handleHrfEnabled = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) =>
-      dispatch(setHrfEnabled(e.target.checked)),
+    (e: ChangeEvent<HTMLInputElement>) => dispatch(setHrfEnabled(e.target.checked)),
     [dispatch]
   );
 
diff --git a/invokeai/frontend/web/src/features/hrf/store/hrfSlice.ts b/invokeai/frontend/web/src/features/hrf/store/hrfSlice.ts
index 5190272b97..ac846ec58e 100644
--- a/invokeai/frontend/web/src/features/hrf/store/hrfSlice.ts
+++ b/invokeai/frontend/web/src/features/hrf/store/hrfSlice.ts
@@ -1,10 +1,7 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 import type { RootState } from 'app/store/store';
-import type {
-  ParameterHRFMethod,
-  ParameterStrength,
-} from 'features/parameters/types/parameterSchemas';
+import type { ParameterHRFMethod, ParameterStrength } from 'features/parameters/types/parameterSchemas';
 
 export interface HRFState {
   _version: 1;
diff --git a/invokeai/frontend/web/src/features/lora/components/LoRAList.tsx b/invokeai/frontend/web/src/features/lora/components/LoRAList.tsx
index 3983062af1..9f37454d16 100644
--- a/invokeai/frontend/web/src/features/lora/components/LoRAList.tsx
+++ b/invokeai/frontend/web/src/features/lora/components/LoRAList.tsx
@@ -6,9 +6,7 @@ import { selectLoraSlice } from 'features/lora/store/loraSlice';
 import { map } from 'lodash-es';
 import { memo } from 'react';
 
-const selectLoRAsArray = createMemoizedSelector(selectLoraSlice, (lora) =>
-  map(lora.loras)
-);
+const selectLoRAsArray = createMemoizedSelector(selectLoraSlice, (lora) => map(lora.loras));
 
 export const LoRAList = memo(() => {
   const lorasArray = useAppSelector(selectLoRAsArray);
diff --git a/invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx b/invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx
index aa866e8a55..30ef99d2f7 100644
--- a/invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx
+++ b/invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx
@@ -9,19 +9,14 @@ import { useTranslation } from 'react-i18next';
 import type { LoRAModelConfigEntity } from 'services/api/endpoints/models';
 import { useGetLoRAModelsQuery } from 'services/api/endpoints/models';
 
-const selectAddedLoRAs = createMemoizedSelector(
-  selectLoraSlice,
-  (lora) => lora.loras
-);
+const selectAddedLoRAs = createMemoizedSelector(selectLoraSlice, (lora) => lora.loras);
 
 const LoRASelect = () => {
   const dispatch = useAppDispatch();
   const { data, isLoading } = useGetLoRAModelsQuery();
   const { t } = useTranslation();
   const addedLoRAs = useAppSelector(selectAddedLoRAs);
-  const currentBaseModel = useAppSelector(
-    (s) => s.generation.model?.base_model
-  );
+  const currentBaseModel = useAppSelector((s) => s.generation.model?.base_model);
 
   const getIsDisabled = (lora: LoRAModelConfigEntity): boolean => {
     const isCompatible = currentBaseModel === lora.base_model;
diff --git a/invokeai/frontend/web/src/features/lora/store/loraSlice.ts b/invokeai/frontend/web/src/features/lora/store/loraSlice.ts
index c61a42af02..8562090fbc 100644
--- a/invokeai/frontend/web/src/features/lora/store/loraSlice.ts
+++ b/invokeai/frontend/web/src/features/lora/store/loraSlice.ts
@@ -31,10 +31,7 @@ export const loraSlice = createSlice({
       const { model_name, id, base_model } = action.payload;
       state.loras[id] = { id, model_name, base_model, ...defaultLoRAConfig };
     },
-    loraRecalled: (
-      state,
-      action: PayloadAction<LoRAModelConfigEntity & { weight: number }>
-    ) => {
+    loraRecalled: (state, action: PayloadAction<LoRAModelConfigEntity & { weight: number }>) => {
       const { model_name, id, base_model, weight } = action.payload;
       state.loras[id] = { id, model_name, base_model, weight };
     },
@@ -45,10 +42,7 @@ export const loraSlice = createSlice({
     lorasCleared: (state) => {
       state.loras = {};
     },
-    loraWeightChanged: (
-      state,
-      action: PayloadAction<{ id: string; weight: number }>
-    ) => {
+    loraWeightChanged: (state, action: PayloadAction<{ id: string; weight: number }>) => {
       const { id, weight } = action.payload;
       const lora = state.loras[id];
       if (!lora) {
@@ -67,14 +61,8 @@ export const loraSlice = createSlice({
   },
 });
 
-export const {
-  loraAdded,
-  loraRemoved,
-  loraWeightChanged,
-  loraWeightReset,
-  lorasCleared,
-  loraRecalled,
-} = loraSlice.actions;
+export const { loraAdded, loraRemoved, loraWeightChanged, loraWeightReset, lorasCleared, loraRecalled } =
+  loraSlice.actions;
 
 export default loraSlice.reducer;
 
diff --git a/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsIconButton.tsx b/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsIconButton.tsx
index 3cf5f7444a..986a99bd0b 100644
--- a/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsIconButton.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsIconButton.tsx
@@ -7,29 +7,27 @@ import { PiArrowsClockwiseBold } from 'react-icons/pi';
 
 import { useSyncModels } from './useSyncModels';
 
-export const SyncModelsIconButton = memo(
-  (props: Omit<IconButtonProps, 'aria-label'>) => {
-    const { t } = useTranslation();
-    const { syncModels, isLoading } = useSyncModels();
-    const isSyncModelEnabled = useFeatureStatus('syncModels').isFeatureEnabled;
+export const SyncModelsIconButton = memo((props: Omit<IconButtonProps, 'aria-label'>) => {
+  const { t } = useTranslation();
+  const { syncModels, isLoading } = useSyncModels();
+  const isSyncModelEnabled = useFeatureStatus('syncModels').isFeatureEnabled;
 
-    if (!isSyncModelEnabled) {
-      return null;
-    }
-
-    return (
-      <IconButton
-        icon={<PiArrowsClockwiseBold />}
-        tooltip={t('modelManager.syncModels')}
-        aria-label={t('modelManager.syncModels')}
-        isLoading={isLoading}
-        onClick={syncModels}
-        size="sm"
-        variant="ghost"
-        {...props}
-      />
-    );
+  if (!isSyncModelEnabled) {
+    return null;
   }
-);
+
+  return (
+    <IconButton
+      icon={<PiArrowsClockwiseBold />}
+      tooltip={t('modelManager.syncModels')}
+      aria-label={t('modelManager.syncModels')}
+      isLoading={isLoading}
+      onClick={syncModels}
+      size="sm"
+      variant="ghost"
+      {...props}
+    />
+  );
+});
 
 SyncModelsIconButton.displayName = 'SyncModelsIconButton';
diff --git a/invokeai/frontend/web/src/features/modelManager/store/modelManagerSlice.ts b/invokeai/frontend/web/src/features/modelManager/store/modelManagerSlice.ts
index 829e9d4d9b..5da08d7f54 100644
--- a/invokeai/frontend/web/src/features/modelManager/store/modelManagerSlice.ts
+++ b/invokeai/frontend/web/src/features/modelManager/store/modelManagerSlice.ts
@@ -27,8 +27,7 @@ export const modelManagerSlice = createSlice({
   },
 });
 
-export const { setSearchFolder, setAdvancedAddScanModel } =
-  modelManagerSlice.actions;
+export const { setSearchFolder, setAdvancedAddScanModel } = modelManagerSlice.actions;
 
 export default modelManagerSlice.reducer;
 
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx
index a056e54a10..9796a0e6a3 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx
@@ -7,35 +7,16 @@ import SimpleAddModels from './SimpleAddModels';
 
 const AddModels = () => {
   const { t } = useTranslation();
-  const [addModelMode, setAddModelMode] = useState<'simple' | 'advanced'>(
-    'simple'
-  );
+  const [addModelMode, setAddModelMode] = useState<'simple' | 'advanced'>('simple');
   const handleAddModelSimple = useCallback(() => setAddModelMode('simple'), []);
-  const handleAddModelAdvanced = useCallback(
-    () => setAddModelMode('advanced'),
-    []
-  );
+  const handleAddModelAdvanced = useCallback(() => setAddModelMode('advanced'), []);
   return (
-    <Flex
-      flexDirection="column"
-      width="100%"
-      overflow="scroll"
-      maxHeight={window.innerHeight - 250}
-      gap={4}
-    >
+    <Flex flexDirection="column" width="100%" overflow="scroll" maxHeight={window.innerHeight - 250} gap={4}>
       <ButtonGroup>
-        <Button
-          size="sm"
-          isChecked={addModelMode == 'simple'}
-          onClick={handleAddModelSimple}
-        >
+        <Button size="sm" isChecked={addModelMode == 'simple'} onClick={handleAddModelSimple}>
           {t('common.simple')}
         </Button>
-        <Button
-          size="sm"
-          isChecked={addModelMode == 'advanced'}
-          onClick={handleAddModelAdvanced}
-        >
+        <Button size="sm" isChecked={addModelMode == 'advanced'} onClick={handleAddModelAdvanced}>
           {t('common.advanced')}
         </Button>
       </ButtonGroup>
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx
index 9067d243fb..31f4312eb5 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx
@@ -1,12 +1,4 @@
-import {
-  Button,
-  Checkbox,
-  Flex,
-  FormControl,
-  FormErrorMessage,
-  FormLabel,
-  Input,
-} from '@invoke-ai/ui-library';
+import { Button, Checkbox, Flex, FormControl, FormErrorMessage, FormLabel, Input } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { setAdvancedAddScanModel } from 'features/modelManager/store/modelManagerSlice';
 import BaseModelSelect from 'features/modelManager/subpanels/shared/BaseModelSelect';
@@ -113,10 +105,7 @@ const AdvancedAddCheckpoint = (props: AdvancedAddCheckpointProps) => {
     [getValues, setValue]
   );
 
-  const handleChangeUseCustomConfig = useCallback(
-    () => setUseCustomConfig((prev) => !prev),
-    []
-  );
+  const handleChangeUseCustomConfig = useCallback(() => setUseCustomConfig((prev) => !prev), []);
 
   return (
     <form onSubmit={handleSubmit(onSubmit)} style={formStyles}>
@@ -125,30 +114,21 @@ const AdvancedAddCheckpoint = (props: AdvancedAddCheckpointProps) => {
           <FormLabel>{t('modelManager.model')}</FormLabel>
           <Input
             {...register('model_name', {
-              validate: (value) =>
-                value.trim().length > 3 || 'Must be at least 3 characters',
+              validate: (value) => value.trim().length > 3 || 'Must be at least 3 characters',
             })}
           />
-          {errors.model_name?.message && (
-            <FormErrorMessage>{errors.model_name?.message}</FormErrorMessage>
-          )}
+          {errors.model_name?.message && <FormErrorMessage>{errors.model_name?.message}</FormErrorMessage>}
         </FormControl>
-        <BaseModelSelect<CheckpointModelConfig>
-          control={control}
-          name="base_model"
-        />
+        <BaseModelSelect<CheckpointModelConfig> control={control} name="base_model" />
         <FormControl isInvalid={Boolean(errors.path)}>
           <FormLabel>{t('modelManager.modelLocation')}</FormLabel>
           <Input
             {...register('path', {
-              validate: (value) =>
-                value.trim().length > 0 || 'Must provide a path',
+              validate: (value) => value.trim().length > 0 || 'Must provide a path',
               onBlur,
             })}
           />
-          {errors.path?.message && (
-            <FormErrorMessage>{errors.path?.message}</FormErrorMessage>
-          )}
+          {errors.path?.message && <FormErrorMessage>{errors.path?.message}</FormErrorMessage>}
         </FormControl>
         <FormControl>
           <FormLabel>{t('modelManager.description')}</FormLabel>
@@ -158,10 +138,7 @@ const AdvancedAddCheckpoint = (props: AdvancedAddCheckpointProps) => {
           <FormLabel>{t('modelManager.vaeLocation')}</FormLabel>
           <Input {...register('vae')} />
         </FormControl>
-        <ModelVariantSelect<CheckpointModelConfig>
-          control={control}
-          name="variant"
-        />
+        <ModelVariantSelect<CheckpointModelConfig> control={control} name="variant" />
         <Flex flexDirection="column" width="100%" gap={2}>
           {!useCustomConfig ? (
             <CheckpointConfigsSelect control={control} name="config" />
@@ -173,10 +150,7 @@ const AdvancedAddCheckpoint = (props: AdvancedAddCheckpointProps) => {
           )}
           <FormControl>
             <FormLabel>{t('modelManager.useCustomConfig')}</FormLabel>
-            <Checkbox
-              isChecked={useCustomConfig}
-              onChange={handleChangeUseCustomConfig}
-            />
+            <Checkbox isChecked={useCustomConfig} onChange={handleChangeUseCustomConfig} />
           </FormControl>
           <Button mt={2} type="submit">
             {t('modelManager.addModel')}
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx
index d2be92392e..07b28d35fd 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx
@@ -1,11 +1,4 @@
-import {
-  Button,
-  Flex,
-  FormControl,
-  FormErrorMessage,
-  FormLabel,
-  Input,
-} from '@invoke-ai/ui-library';
+import { Button, Flex, FormControl, FormErrorMessage, FormLabel, Input } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { setAdvancedAddScanModel } from 'features/modelManager/store/modelManagerSlice';
 import BaseModelSelect from 'features/modelManager/subpanels/shared/BaseModelSelect';
@@ -114,30 +107,21 @@ const AdvancedAddDiffusers = (props: AdvancedAddDiffusersProps) => {
           <FormLabel>{t('modelManager.name')}</FormLabel>
           <Input
             {...register('model_name', {
-              validate: (value) =>
-                value.trim().length > 3 || 'Must be at least 3 characters',
+              validate: (value) => value.trim().length > 3 || 'Must be at least 3 characters',
             })}
           />
-          {errors.model_name?.message && (
-            <FormErrorMessage>{errors.model_name?.message}</FormErrorMessage>
-          )}
+          {errors.model_name?.message && <FormErrorMessage>{errors.model_name?.message}</FormErrorMessage>}
         </FormControl>
-        <BaseModelSelect<DiffusersModelConfig>
-          control={control}
-          name="base_model"
-        />
+        <BaseModelSelect<DiffusersModelConfig> control={control} name="base_model" />
         <FormControl isInvalid={Boolean(errors.path)}>
           <FormLabel>{t('modelManager.modelLocation')}</FormLabel>
           <Input
             {...register('path', {
-              validate: (value) =>
-                value.trim().length > 0 || 'Must provide a path',
+              validate: (value) => value.trim().length > 0 || 'Must provide a path',
               onBlur,
             })}
           />
-          {errors.path?.message && (
-            <FormErrorMessage>{errors.path?.message}</FormErrorMessage>
-          )}
+          {errors.path?.message && <FormErrorMessage>{errors.path?.message}</FormErrorMessage>}
         </FormControl>
         <FormControl>
           <FormLabel>{t('modelManager.description')}</FormLabel>
@@ -147,10 +131,7 @@ const AdvancedAddDiffusers = (props: AdvancedAddDiffusersProps) => {
           <FormLabel>{t('modelManager.vaeLocation')}</FormLabel>
           <Input {...register('vae')} />
         </FormControl>
-        <ModelVariantSelect<DiffusersModelConfig>
-          control={control}
-          name="variant"
-        />
+        <ModelVariantSelect<DiffusersModelConfig> control={control} name="variant" />
 
         <Button mt={2} type="submit">
           {t('modelManager.addModel')}
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx
index 2ce9392ef0..fc03c6bb1f 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx
@@ -9,12 +9,10 @@ import AdvancedAddDiffusers from './AdvancedAddDiffusers';
 
 export const zManualAddMode = z.enum(['diffusers', 'checkpoint']);
 export type ManualAddMode = z.infer<typeof zManualAddMode>;
-export const isManualAddMode = (v: unknown): v is ManualAddMode =>
-  zManualAddMode.safeParse(v).success;
+export const isManualAddMode = (v: unknown): v is ManualAddMode => zManualAddMode.safeParse(v).success;
 
 const AdvancedAddModels = () => {
-  const [advancedAddMode, setAdvancedAddMode] =
-    useState<ManualAddMode>('diffusers');
+  const [advancedAddMode, setAdvancedAddMode] = useState<ManualAddMode>('diffusers');
 
   const { t } = useTranslation();
   const handleChange: ComboboxOnChange = useCallback((v) => {
@@ -32,10 +30,7 @@ const AdvancedAddModels = () => {
     [t]
   );
 
-  const value = useMemo(
-    () => options.find((o) => o.value === advancedAddMode),
-    [options, advancedAddMode]
-  );
+  const value = useMemo(() => options.find((o) => o.value === advancedAddMode), [options, advancedAddMode]);
 
   return (
     <Flex flexDirection="column" gap={4} width="100%">
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx
index 6dd48e0aaf..206a955e29 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx
@@ -1,11 +1,4 @@
-import {
-  Button,
-  Flex,
-  FormControl,
-  FormLabel,
-  Input,
-  Text,
-} from '@invoke-ai/ui-library';
+import { Button, Flex, FormControl, FormLabel, Input, Text } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { setAdvancedAddScanModel } from 'features/modelManager/store/modelManagerSlice';
@@ -31,26 +24,25 @@ const FoundModelsList = () => {
   const { data: installedModels } = useGetMainModelsQuery(ALL_BASE_MODELS);
 
   // Get all model paths from a given directory
-  const { foundModels, alreadyInstalled, filteredModels } =
-    useGetModelsInFolderQuery(
-      {
-        search_path: searchFolder ? searchFolder : '',
+  const { foundModels, alreadyInstalled, filteredModels } = useGetModelsInFolderQuery(
+    {
+      search_path: searchFolder ? searchFolder : '',
+    },
+    {
+      selectFromResult: ({ data }) => {
+        const installedModelValues = values(installedModels?.entities);
+        const installedModelPaths = map(installedModelValues, 'path');
+        // Only select models those that aren't already installed to Invoke
+        const notInstalledModels = difference(data, installedModelPaths);
+        const alreadyInstalled = intersection(data, installedModelPaths);
+        return {
+          foundModels: data,
+          alreadyInstalled: foundModelsFilter(alreadyInstalled, nameFilter),
+          filteredModels: foundModelsFilter(notInstalledModels, nameFilter),
+        };
       },
-      {
-        selectFromResult: ({ data }) => {
-          const installedModelValues = values(installedModels?.entities);
-          const installedModelPaths = map(installedModelValues, 'path');
-          // Only select models those that aren't already installed to Invoke
-          const notInstalledModels = difference(data, installedModelPaths);
-          const alreadyInstalled = intersection(data, installedModelPaths);
-          return {
-            foundModels: data,
-            alreadyInstalled: foundModelsFilter(alreadyInstalled, nameFilter),
-            filteredModels: foundModelsFilter(notInstalledModels, nameFilter),
-          };
-        },
-      }
-    );
+    }
+  );
 
   const [importMainModel, { isLoading }] = useImportMainModelsMutation();
   const dispatch = useAppDispatch();
@@ -95,28 +87,12 @@ const FoundModelsList = () => {
     setNameFilter(e.target.value);
   }, []);
 
-  const handleClickSetAdvanced = useCallback(
-    (model: string) => dispatch(setAdvancedAddScanModel(model)),
-    [dispatch]
-  );
+  const handleClickSetAdvanced = useCallback((model: string) => dispatch(setAdvancedAddScanModel(model)), [dispatch]);
 
-  const renderModels = ({
-    models,
-    showActions = true,
-  }: {
-    models: string[];
-    showActions?: boolean;
-  }) => {
+  const renderModels = ({ models, showActions = true }: { models: string[]; showActions?: boolean }) => {
     return models.map((model) => {
       return (
-        <Flex
-          key={model}
-          p={4}
-          gap={4}
-          alignItems="center"
-          borderRadius={4}
-          bg="base.800"
-        >
+        <Flex key={model} p={4} gap={4} alignItems="center" borderRadius={4} bg="base.800">
           <Flex w="full" minW="25%" flexDir="column">
             <Text fontWeight="semibold">{model.split('\\').slice(-1)[0]}</Text>
             <Text fontSize="sm" color="base.400">
@@ -125,28 +101,15 @@ const FoundModelsList = () => {
           </Flex>
           {showActions ? (
             <Flex gap={2}>
-              <Button
-                id={model}
-                onClick={quickAddHandler}
-                isLoading={isLoading}
-              >
+              <Button id={model} onClick={quickAddHandler} isLoading={isLoading}>
                 {t('modelManager.quickAdd')}
               </Button>
-              <Button
-                onClick={handleClickSetAdvanced.bind(null, model)}
-                isLoading={isLoading}
-              >
+              <Button onClick={handleClickSetAdvanced.bind(null, model)} isLoading={isLoading}>
                 {t('modelManager.advanced')}
               </Button>
             </Flex>
           ) : (
-            <Text
-              fontWeight="semibold"
-              p={2}
-              borderRadius={4}
-              color="invokeBlue.100"
-              bg="invokeBlue.600"
-            >
+            <Text fontWeight="semibold" p={2} borderRadius={4} color="invokeBlue.100" bg="invokeBlue.600">
               {t('common.installed')}
             </Text>
           )}
@@ -162,15 +125,7 @@ const FoundModelsList = () => {
 
     if (!foundModels || foundModels.length === 0) {
       return (
-        <Flex
-          w="full"
-          h="full"
-          justifyContent="center"
-          alignItems="center"
-          height={96}
-          userSelect="none"
-          bg="base.900"
-        >
+        <Flex w="full" h="full" justifyContent="center" alignItems="center" height={96} userSelect="none" bg="base.900">
           <Text variant="subtext">{t('modelManager.noModels')}</Text>
         </Flex>
       );
@@ -204,10 +159,7 @@ const FoundModelsList = () => {
   return renderFoundModels();
 };
 
-const foundModelsFilter = (
-  data: SearchFolderResponse | undefined,
-  nameFilter: string
-) => {
+const foundModelsFilter = (data: SearchFolderResponse | undefined, nameFilter: string) => {
   const filteredModels: SearchFolderResponse = [];
   forEach(data, (model) => {
     if (!model) {
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx
index c008038548..445eb7ed5a 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx
@@ -1,13 +1,5 @@
 import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
-import {
-  Box,
-  Combobox,
-  Flex,
-  FormControl,
-  FormLabel,
-  IconButton,
-  Text,
-} from '@invoke-ai/ui-library';
+import { Box, Combobox, Flex, FormControl, FormLabel, IconButton, Text } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setAdvancedAddScanModel } from 'features/modelManager/store/modelManagerSlice';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
@@ -20,9 +12,7 @@ import type { ManualAddMode } from './AdvancedAddModels';
 import { isManualAddMode } from './AdvancedAddModels';
 
 const ScanAdvancedAddModels = () => {
-  const advancedAddScanModel = useAppSelector(
-    (s) => s.modelmanager.advancedAddScanModel
-  );
+  const advancedAddScanModel = useAppSelector((s) => s.modelmanager.advancedAddScanModel);
 
   const { t } = useTranslation();
 
@@ -34,26 +24,19 @@ const ScanAdvancedAddModels = () => {
     [t]
   );
 
-  const [advancedAddMode, setAdvancedAddMode] =
-    useState<ManualAddMode>('diffusers');
+  const [advancedAddMode, setAdvancedAddMode] = useState<ManualAddMode>('diffusers');
 
   const [isCheckpoint, setIsCheckpoint] = useState<boolean>(true);
 
   useEffect(() => {
-    advancedAddScanModel &&
-    ['.ckpt', '.safetensors', '.pth', '.pt'].some((ext) =>
-      advancedAddScanModel.endsWith(ext)
-    )
+    advancedAddScanModel && ['.ckpt', '.safetensors', '.pth', '.pt'].some((ext) => advancedAddScanModel.endsWith(ext))
       ? setAdvancedAddMode('checkpoint')
       : setAdvancedAddMode('diffusers');
   }, [advancedAddScanModel, setAdvancedAddMode, isCheckpoint]);
 
   const dispatch = useAppDispatch();
 
-  const handleClickSetAdvanced = useCallback(
-    () => dispatch(setAdvancedAddScanModel(null)),
-    [dispatch]
-  );
+  const handleClickSetAdvanced = useCallback(() => dispatch(setAdvancedAddScanModel(null)), [dispatch]);
 
   const handleChangeAddMode = useCallback<ComboboxOnChange>((v) => {
     if (!isManualAddMode(v?.value)) {
@@ -67,10 +50,7 @@ const ScanAdvancedAddModels = () => {
     }
   }, []);
 
-  const value = useMemo(
-    () => options.find((o) => o.value === advancedAddMode),
-    [options, advancedAddMode]
-  );
+  const value = useMemo(() => options.find((o) => o.value === advancedAddMode), [options, advancedAddMode]);
 
   if (!advancedAddScanModel) {
     return null;
@@ -90,9 +70,7 @@ const ScanAdvancedAddModels = () => {
     >
       <Flex justifyContent="space-between" alignItems="center">
         <Text size="xl" fontWeight="semibold">
-          {isCheckpoint || advancedAddMode === 'checkpoint'
-            ? 'Add Checkpoint Model'
-            : 'Add Diffusers Model'}
+          {isCheckpoint || advancedAddMode === 'checkpoint' ? 'Add Checkpoint Model' : 'Add Diffusers Model'}
         </Text>
         <IconButton
           icon={<PiXBold />}
@@ -103,22 +81,12 @@ const ScanAdvancedAddModels = () => {
       </Flex>
       <FormControl>
         <FormLabel>{t('modelManager.modelType')}</FormLabel>
-        <Combobox
-          value={value}
-          options={options}
-          onChange={handleChangeAddMode}
-        />
+        <Combobox value={value} options={options} onChange={handleChangeAddMode} />
       </FormControl>
       {isCheckpoint ? (
-        <AdvancedAddCheckpoint
-          key={advancedAddScanModel}
-          model_path={advancedAddScanModel}
-        />
+        <AdvancedAddCheckpoint key={advancedAddScanModel} model_path={advancedAddScanModel} />
       ) : (
-        <AdvancedAddDiffusers
-          key={advancedAddScanModel}
-          model_path={advancedAddScanModel}
-        />
+        <AdvancedAddDiffusers key={advancedAddScanModel} model_path={advancedAddScanModel} />
       )}
     </Box>
   );
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx
index 3441ab0d4f..dc1d39f7aa 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx
@@ -1,18 +1,11 @@
 import { Flex, IconButton, Input, Text } from '@invoke-ai/ui-library';
 import { useForm } from '@mantine/form';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import {
-  setAdvancedAddScanModel,
-  setSearchFolder,
-} from 'features/modelManager/store/modelManagerSlice';
+import { setAdvancedAddScanModel, setSearchFolder } from 'features/modelManager/store/modelManagerSlice';
 import type { CSSProperties } from 'react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  PiArrowsCounterClockwiseBold,
-  PiMagnifyingGlassBold,
-  PiTrashSimpleBold,
-} from 'react-icons/pi';
+import { PiArrowsCounterClockwiseBold, PiMagnifyingGlassBold, PiTrashSimpleBold } from 'react-icons/pi';
 import { useGetModelsInFolderQuery } from 'services/api/endpoints/models';
 
 type SearchFolderForm = {
@@ -52,38 +45,16 @@ function SearchFolderForm() {
   }, [dispatch]);
 
   return (
-    <form
-      onSubmit={searchFolderForm.onSubmit((values) =>
-        searchFolderFormSubmitHandler(values)
-      )}
-      style={formStyles}
-    >
+    <form onSubmit={searchFolderForm.onSubmit((values) => searchFolderFormSubmitHandler(values))} style={formStyles}>
       <Flex w="100%" gap={2} borderRadius={4} alignItems="center">
         <Flex w="100%" alignItems="center" gap={4} minH={12}>
-          <Text
-            fontSize="sm"
-            fontWeight="semibold"
-            color="base.300"
-            minW="max-content"
-          >
+          <Text fontSize="sm" fontWeight="semibold" color="base.300" minW="max-content">
             {t('common.folder')}
           </Text>
           {!searchFolder ? (
-            <Input
-              w="100%"
-              size="md"
-              {...searchFolderForm.getInputProps('folder')}
-            />
+            <Input w="100%" size="md" {...searchFolderForm.getInputProps('folder')} />
           ) : (
-            <Flex
-              w="100%"
-              p={2}
-              px={4}
-              bg="base.700"
-              borderRadius={4}
-              fontSize="sm"
-              fontWeight="bold"
-            >
+            <Flex w="100%" p={2} px={4} bg="base.700" borderRadius={4} fontSize="sm" fontWeight="bold">
               {searchFolder}
             </Flex>
           )}
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx
index aa74fc419f..d7f705aedc 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx
@@ -1,12 +1,5 @@
 import type { ComboboxOption } from '@invoke-ai/ui-library';
-import {
-  Button,
-  Combobox,
-  Flex,
-  FormControl,
-  FormLabel,
-  Input,
-} from '@invoke-ai/ui-library';
+import { Button, Combobox, Flex, FormControl, FormLabel, Input } from '@invoke-ai/ui-library';
 import { useForm } from '@mantine/form';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { addToast } from 'features/system/store/systemSlice';
@@ -44,8 +37,7 @@ const SimpleAddModels = () => {
   const handleAddModelSubmit = (values: ExtendedImportModelConfig) => {
     const importModelResponseBody = {
       location: values.location,
-      prediction_type:
-        values.prediction_type === 'none' ? undefined : values.prediction_type,
+      prediction_type: values.prediction_type === 'none' ? undefined : values.prediction_type,
     };
 
     importMainModel({ body: importModelResponseBody })
@@ -76,26 +68,15 @@ const SimpleAddModels = () => {
   };
 
   return (
-    <form
-      onSubmit={addModelForm.onSubmit((v) => handleAddModelSubmit(v))}
-      style={formStyles}
-    >
+    <form onSubmit={addModelForm.onSubmit((v) => handleAddModelSubmit(v))} style={formStyles}>
       <Flex flexDirection="column" width="100%" gap={4}>
         <FormControl>
           <FormLabel>{t('modelManager.modelLocation')}</FormLabel>
-          <Input
-            placeholder={t('modelManager.simpleModelDesc')}
-            w="100%"
-            {...addModelForm.getInputProps('location')}
-          />
+          <Input placeholder={t('modelManager.simpleModelDesc')} w="100%" {...addModelForm.getInputProps('location')} />
         </FormControl>
         <FormControl>
           <FormLabel>{t('modelManager.predictionType')}</FormLabel>
-          <Combobox
-            options={options}
-            defaultValue={options[0]}
-            {...addModelForm.getInputProps('prediction_type')}
-          />
+          <Combobox options={options} defaultValue={options[0]} {...addModelForm.getInputProps('prediction_type')} />
         </FormControl>
         <Button type="submit" isLoading={isLoading}>
           {t('modelManager.addModel')}
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ImportModelsPanel.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ImportModelsPanel.tsx
index 3558650f5b..93cdd25a7e 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/ImportModelsPanel.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ImportModelsPanel.tsx
@@ -17,21 +17,10 @@ const ImportModelsPanel = () => {
   return (
     <Flex flexDirection="column" gap={4} h="full">
       <ButtonGroup>
-        <Button
-          onClick={handleClickAddTab}
-          isChecked={addModelTab == 'add'}
-          size="sm"
-          width="100%"
-        >
+        <Button onClick={handleClickAddTab} isChecked={addModelTab == 'add'} size="sm" width="100%">
           {t('modelManager.addModel')}
         </Button>
-        <Button
-          onClick={handleClickScanTab}
-          isChecked={addModelTab == 'scan'}
-          size="sm"
-          width="100%"
-          isDisabled
-        >
+        <Button onClick={handleClickScanTab} isChecked={addModelTab == 'scan'} size="sm" width="100%" isDisabled>
           {t('modelManager.scanForModels')}
         </Button>
       </ButtonGroup>
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx
index 865eb4914c..fe90db5b8a 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx
@@ -23,10 +23,7 @@ import type { ChangeEvent } from 'react';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ALL_BASE_MODELS } from 'services/api/constants';
-import {
-  useGetMainModelsQuery,
-  useMergeMainModelsMutation,
-} from 'services/api/endpoints/models';
+import { useGetMainModelsQuery, useMergeMainModelsMutation } from 'services/api/endpoints/models';
 import type { BaseModelType, MergeModelConfig } from 'services/api/types';
 
 const baseModelTypeSelectOptions: ComboboxOption[] = [
@@ -34,11 +31,7 @@ const baseModelTypeSelectOptions: ComboboxOption[] = [
   { label: 'Stable Diffusion 2', value: 'sd-2' },
 ];
 
-type MergeInterpolationMethods =
-  | 'weighted_sum'
-  | 'sigmoid'
-  | 'inv_sigmoid'
-  | 'add_difference';
+type MergeInterpolationMethods = 'weighted_sum' | 'sigmoid' | 'inv_sigmoid' | 'add_difference';
 
 const MergeModelsPanel = () => {
   const { t } = useTranslation();
@@ -49,20 +42,15 @@ const MergeModelsPanel = () => {
   const [mergeModels, { isLoading }] = useMergeMainModelsMutation();
 
   const [baseModel, setBaseModel] = useState<BaseModelType>('sd-1');
-  const valueBaseModel = useMemo(
-    () => baseModelTypeSelectOptions.find((o) => o.value === baseModel),
-    [baseModel]
-  );
+  const valueBaseModel = useMemo(() => baseModelTypeSelectOptions.find((o) => o.value === baseModel), [baseModel]);
   const sd1DiffusersModels = pickBy(
     data?.entities,
-    (value, _) =>
-      value?.model_format === 'diffusers' && value?.base_model === 'sd-1'
+    (value, _) => value?.model_format === 'diffusers' && value?.base_model === 'sd-1'
   );
 
   const sd2DiffusersModels = pickBy(
     data?.entities,
-    (value, _) =>
-      value?.model_format === 'diffusers' && value?.base_model === 'sd-2'
+    (value, _) => value?.model_format === 'diffusers' && value?.base_model === 'sd-2'
   );
 
   const modelsMap = useMemo(() => {
@@ -83,15 +71,11 @@ const MergeModelsPanel = () => {
   const [mergedModelName, setMergedModelName] = useState<string>('');
   const [modelMergeAlpha, setModelMergeAlpha] = useState<number>(0.5);
 
-  const [modelMergeInterp, setModelMergeInterp] =
-    useState<MergeInterpolationMethods>('weighted_sum');
+  const [modelMergeInterp, setModelMergeInterp] = useState<MergeInterpolationMethods>('weighted_sum');
 
-  const [modelMergeSaveLocType, setModelMergeSaveLocType] = useState<
-    'root' | 'custom'
-  >('root');
+  const [modelMergeSaveLocType, setModelMergeSaveLocType] = useState<'root' | 'custom'>('root');
 
-  const [modelMergeCustomSaveLoc, setModelMergeCustomSaveLoc] =
-    useState<string>('');
+  const [modelMergeCustomSaveLoc, setModelMergeCustomSaveLoc] = useState<string>('');
 
   const [modelMergeForce, setModelMergeForce] = useState<boolean>(false);
 
@@ -153,14 +137,8 @@ const MergeModelsPanel = () => {
     }
   }, []);
 
-  const valueModelOne = useMemo(
-    () => optionsModelOne.find((o) => o.value === modelOne),
-    [modelOne, optionsModelOne]
-  );
-  const valueModelTwo = useMemo(
-    () => optionsModelTwo.find((o) => o.value === modelTwo),
-    [modelTwo, optionsModelTwo]
-  );
+  const valueModelOne = useMemo(() => optionsModelOne.find((o) => o.value === modelOne), [modelOne, optionsModelOne]);
+  const valueModelTwo = useMemo(() => optionsModelTwo.find((o) => o.value === modelTwo), [modelTwo, optionsModelTwo]);
   const valueModelThree = useMemo(
     () => optionsModelThree.find((o) => o.value === modelThree),
     [modelThree, optionsModelThree]
@@ -170,25 +148,12 @@ const MergeModelsPanel = () => {
     (e: ChangeEvent<HTMLInputElement>) => setMergedModelName(e.target.value),
     []
   );
-  const handleChangeModelMergeAlpha = useCallback(
-    (v: number) => setModelMergeAlpha(v),
-    []
-  );
-  const handleResetModelMergeAlpha = useCallback(
-    () => setModelMergeAlpha(0.5),
-    []
-  );
-  const handleChangeMergeInterp = useCallback(
-    (v: MergeInterpolationMethods) => setModelMergeInterp(v),
-    []
-  );
-  const handleChangeMergeSaveLocType = useCallback(
-    (v: 'root' | 'custom') => setModelMergeSaveLocType(v),
-    []
-  );
+  const handleChangeModelMergeAlpha = useCallback((v: number) => setModelMergeAlpha(v), []);
+  const handleResetModelMergeAlpha = useCallback(() => setModelMergeAlpha(0.5), []);
+  const handleChangeMergeInterp = useCallback((v: MergeInterpolationMethods) => setModelMergeInterp(v), []);
+  const handleChangeMergeSaveLocType = useCallback((v: 'root' | 'custom') => setModelMergeSaveLocType(v), []);
   const handleChangeMergeCustomSaveLoc = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) =>
-      setModelMergeCustomSaveLoc(e.target.value),
+    (e: ChangeEvent<HTMLInputElement>) => setModelMergeCustomSaveLoc(e.target.value),
     []
   );
   const handleChangeModelMergeForce = useCallback(
@@ -210,13 +175,11 @@ const MergeModelsPanel = () => {
 
     const mergeModelsInfo: MergeModelConfig['body'] = {
       model_names: models_names,
-      merged_model_name:
-        mergedModelName !== '' ? mergedModelName : models_names.join('-'),
+      merged_model_name: mergedModelName !== '' ? mergedModelName : models_names.join('-'),
       alpha: modelMergeAlpha,
       interp: modelMergeInterp,
       force: modelMergeForce,
-      merge_dest_directory:
-        modelMergeSaveLocType === 'root' ? undefined : modelMergeCustomSaveLoc,
+      merge_dest_directory: modelMergeSaveLocType === 'root' ? undefined : modelMergeCustomSaveLoc,
     };
 
     mergeModels({
@@ -274,36 +237,19 @@ const MergeModelsPanel = () => {
       <Flex columnGap={4}>
         <FormControl w="full">
           <FormLabel>{t('modelManager.modelType')}</FormLabel>
-          <Combobox
-            options={baseModelTypeSelectOptions}
-            value={valueBaseModel}
-            onChange={onChangeBaseModel}
-          />
+          <Combobox options={baseModelTypeSelectOptions} value={valueBaseModel} onChange={onChangeBaseModel} />
         </FormControl>
         <FormControl w="full">
           <FormLabel>{t('modelManager.modelOne')}</FormLabel>
-          <Combobox
-            options={optionsModelOne}
-            value={valueModelOne}
-            onChange={onChangeModelOne}
-          />
+          <Combobox options={optionsModelOne} value={valueModelOne} onChange={onChangeModelOne} />
         </FormControl>
         <FormControl w="full">
           <FormLabel>{t('modelManager.modelTwo')}</FormLabel>
-          <Combobox
-            options={optionsModelTwo}
-            value={valueModelTwo}
-            onChange={onChangeModelTwo}
-          />
+          <Combobox options={optionsModelTwo} value={valueModelTwo} onChange={onChangeModelTwo} />
         </FormControl>
         <FormControl w="full">
           <FormLabel>{t('modelManager.modelThree')}</FormLabel>
-          <Combobox
-            options={optionsModelThree}
-            value={valueModelThree}
-            onChange={onChangeModelThree}
-            isClearable
-          />
+          <Combobox options={optionsModelThree} value={valueModelThree} onChange={onChangeModelThree} isClearable />
         </FormControl>
       </Flex>
 
@@ -312,13 +258,7 @@ const MergeModelsPanel = () => {
         <Input value={mergedModelName} onChange={handleChangeMergedModelName} />
       </FormControl>
 
-      <Flex
-        flexDirection="column"
-        padding={4}
-        borderRadius="base"
-        gap={4}
-        bg="base.800"
-      >
+      <Flex flexDirection="column" padding={4} borderRadius="base" gap={4} bg="base.800">
         <FormControl>
           <FormLabel>{t('modelManager.alpha')}</FormLabel>
           <CompositeSlider
@@ -338,9 +278,7 @@ const MergeModelsPanel = () => {
             onChange={handleChangeModelMergeAlpha}
             onReset={handleResetModelMergeAlpha}
           />
-          <FormHelperText>
-            {t('modelManager.modelMergeAlphaHelp')}
-          </FormHelperText>
+          <FormHelperText>{t('modelManager.modelMergeAlphaHelp')}</FormHelperText>
         </FormControl>
       </Flex>
 
@@ -364,9 +302,7 @@ const MergeModelsPanel = () => {
               </>
             ) : (
               <Radio value="add_difference">
-                <Tooltip
-                  label={t('modelManager.modelMergeInterpAddDifferenceHelp')}
-                >
+                <Tooltip label={t('modelManager.modelMergeInterpAddDifferenceHelp')}>
                   <Text fontSize="sm">{t('modelManager.addDifference')}</Text>
                 </Tooltip>
               </Radio>
@@ -375,21 +311,12 @@ const MergeModelsPanel = () => {
         </RadioGroup>
       </Flex>
 
-      <Flex
-        flexDirection="column"
-        padding={4}
-        borderRadius="base"
-        gap={4}
-        bg="base.900"
-      >
+      <Flex flexDirection="column" padding={4} borderRadius="base" gap={4} bg="base.900">
         <Flex columnGap={4}>
           <Text fontSize="sm" variant="subtext">
             {t('modelManager.mergedModelSaveLocation')}
           </Text>
-          <RadioGroup
-            value={modelMergeSaveLocType}
-            onChange={handleChangeMergeSaveLocType}
-          >
+          <RadioGroup value={modelMergeSaveLocType} onChange={handleChangeMergeSaveLocType}>
             <Flex columnGap={4}>
               <Radio value="root">
                 <Text fontSize="sm">{t('modelManager.invokeAIFolder')}</Text>
@@ -404,30 +331,18 @@ const MergeModelsPanel = () => {
 
         {modelMergeSaveLocType === 'custom' && (
           <FormControl>
-            <FormLabel>
-              {t('modelManager.mergedModelCustomSaveLocation')}
-            </FormLabel>
-            <Input
-              value={modelMergeCustomSaveLoc}
-              onChange={handleChangeMergeCustomSaveLoc}
-            />
+            <FormLabel>{t('modelManager.mergedModelCustomSaveLocation')}</FormLabel>
+            <Input value={modelMergeCustomSaveLoc} onChange={handleChangeMergeCustomSaveLoc} />
           </FormControl>
         )}
       </Flex>
 
       <FormControl>
         <FormLabel>{t('modelManager.ignoreMismatch')}</FormLabel>
-        <Checkbox
-          isChecked={modelMergeForce}
-          onChange={handleChangeModelMergeForce}
-        />
+        <Checkbox isChecked={modelMergeForce} onChange={handleChangeModelMergeForce} />
       </FormControl>
 
-      <Button
-        onClick={mergeModelsHandler}
-        isLoading={isLoading}
-        isDisabled={modelOne === null || modelTwo === null}
-      >
+      <Button onClick={mergeModelsHandler} isLoading={isLoading} isDisabled={modelOne === null || modelTwo === null}>
         {t('modelManager.merge')}
       </Button>
     </Flex>
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel.tsx
index aae1b4c05d..6b9abdbfec 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel.tsx
@@ -7,10 +7,7 @@ import type {
   LoRAModelConfigEntity,
   MainModelConfigEntity,
 } from 'services/api/endpoints/models';
-import {
-  useGetLoRAModelsQuery,
-  useGetMainModelsQuery,
-} from 'services/api/endpoints/models';
+import { useGetLoRAModelsQuery, useGetMainModelsQuery } from 'services/api/endpoints/models';
 
 import CheckpointModelEdit from './ModelManagerPanel/CheckpointModelEdit';
 import DiffusersModelEdit from './ModelManagerPanel/DiffusersModelEdit';
@@ -34,10 +31,7 @@ const ModelManagerPanel = () => {
 
   return (
     <Flex gap={8} w="full" h="full">
-      <ModelList
-        selectedModelId={selectedModelId}
-        setSelectedModelId={setSelectedModelId}
-      />
+      <ModelList selectedModelId={selectedModelId} setSelectedModelId={setSelectedModelId} />
       <ModelEdit model={model} />
     </Flex>
   );
@@ -56,12 +50,7 @@ const ModelEdit = (props: ModelEditProps) => {
   }
 
   if (model?.model_format === 'diffusers') {
-    return (
-      <DiffusersModelEdit
-        key={model.id}
-        model={model as DiffusersModelConfigEntity}
-      />
-    );
+    return <DiffusersModelEdit key={model.id} model={model as DiffusersModelConfigEntity} />;
   }
 
   if (model?.model_type === 'lora') {
@@ -69,14 +58,7 @@ const ModelEdit = (props: ModelEditProps) => {
   }
 
   return (
-    <Flex
-      w="full"
-      h="full"
-      justifyContent="center"
-      alignItems="center"
-      maxH={96}
-      userSelect="none"
-    >
+    <Flex w="full" h="full" justifyContent="center" alignItems="center" maxH={96} userSelect="none">
       <Text variant="subtext">{t('modelManager.noModelSelected')}</Text>
     </Flex>
   );
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx
index ecd89cc62a..f4d271187d 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx
@@ -22,10 +22,7 @@ import type { SubmitHandler } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import type { CheckpointModelConfigEntity } from 'services/api/endpoints/models';
-import {
-  useGetCheckpointConfigsQuery,
-  useUpdateMainModelsMutation,
-} from 'services/api/endpoints/models';
+import { useGetCheckpointConfigsQuery, useUpdateMainModelsMutation } from 'services/api/endpoints/models';
 import type { CheckpointModelConfig } from 'services/api/types';
 
 import ModelConvert from './ModelConvert';
@@ -72,10 +69,7 @@ const CheckpointModelEdit = (props: CheckpointModelEditProps) => {
     mode: 'onChange',
   });
 
-  const handleChangeUseCustomConfig = useCallback(
-    () => setUseCustomConfig((prev) => !prev),
-    []
-  );
+  const handleChangeUseCustomConfig = useCallback(() => setUseCustomConfig((prev) => !prev), []);
 
   const onSubmit = useCallback<SubmitHandler<CheckpointModelConfig>>(
     (values) => {
@@ -133,50 +127,32 @@ const CheckpointModelEdit = (props: CheckpointModelEditProps) => {
       </Flex>
       <Divider />
 
-      <Flex
-        flexDirection="column"
-        maxHeight={window.innerHeight - 270}
-        overflowY="scroll"
-      >
+      <Flex flexDirection="column" maxHeight={window.innerHeight - 270} overflowY="scroll">
         <form onSubmit={handleSubmit(onSubmit)}>
           <Flex flexDirection="column" overflowY="scroll" gap={4}>
             <FormControl isInvalid={Boolean(errors.model_name)}>
               <FormLabel>{t('modelManager.name')}</FormLabel>
               <Input
                 {...register('model_name', {
-                  validate: (value) =>
-                    value.trim().length > 3 || 'Must be at least 3 characters',
+                  validate: (value) => value.trim().length > 3 || 'Must be at least 3 characters',
                 })}
               />
-              {errors.model_name?.message && (
-                <FormErrorMessage>
-                  {errors.model_name?.message}
-                </FormErrorMessage>
-              )}
+              {errors.model_name?.message && <FormErrorMessage>{errors.model_name?.message}</FormErrorMessage>}
             </FormControl>
             <FormControl>
               <FormLabel>{t('modelManager.description')}</FormLabel>
               <Input {...register('description')} />
             </FormControl>
-            <BaseModelSelect<CheckpointModelConfig>
-              control={control}
-              name="base_model"
-            />
-            <ModelVariantSelect<CheckpointModelConfig>
-              control={control}
-              name="variant"
-            />
+            <BaseModelSelect<CheckpointModelConfig> control={control} name="base_model" />
+            <ModelVariantSelect<CheckpointModelConfig> control={control} name="variant" />
             <FormControl isInvalid={Boolean(errors.path)}>
               <FormLabel>{t('modelManager.modelLocation')}</FormLabel>
               <Input
                 {...register('path', {
-                  validate: (value) =>
-                    value.trim().length > 0 || 'Must provide a path',
+                  validate: (value) => value.trim().length > 0 || 'Must provide a path',
                 })}
               />
-              {errors.path?.message && (
-                <FormErrorMessage>{errors.path?.message}</FormErrorMessage>
-              )}
+              {errors.path?.message && <FormErrorMessage>{errors.path?.message}</FormErrorMessage>}
             </FormControl>
             <FormControl>
               <FormLabel>{t('modelManager.vaeLocation')}</FormLabel>
@@ -194,10 +170,7 @@ const CheckpointModelEdit = (props: CheckpointModelEditProps) => {
               )}
               <FormControl>
                 <FormLabel>{t('modelManager.useCustomConfig')}</FormLabel>
-                <Checkbox
-                  isChecked={useCustomConfig}
-                  onChange={handleChangeUseCustomConfig}
-                />
+                <Checkbox isChecked={useCustomConfig} onChange={handleChangeUseCustomConfig} />
               </FormControl>
             </Flex>
 
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx
index c2c33fb63b..4670f32157 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx
@@ -1,13 +1,4 @@
-import {
-  Button,
-  Divider,
-  Flex,
-  FormControl,
-  FormErrorMessage,
-  FormLabel,
-  Input,
-  Text,
-} from '@invoke-ai/ui-library';
+import { Button, Divider, Flex, FormControl, FormErrorMessage, FormLabel, Input, Text } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import BaseModelSelect from 'features/modelManager/subpanels/shared/BaseModelSelect';
 import ModelVariantSelect from 'features/modelManager/subpanels/shared/ModelVariantSelect';
@@ -108,37 +99,25 @@ const DiffusersModelEdit = (props: DiffusersModelEditProps) => {
             <FormLabel>{t('modelManager.name')}</FormLabel>
             <Input
               {...register('model_name', {
-                validate: (value) =>
-                  value.trim().length > 3 || 'Must be at least 3 characters',
+                validate: (value) => value.trim().length > 3 || 'Must be at least 3 characters',
               })}
             />
-            {errors.model_name?.message && (
-              <FormErrorMessage>{errors.model_name?.message}</FormErrorMessage>
-            )}
+            {errors.model_name?.message && <FormErrorMessage>{errors.model_name?.message}</FormErrorMessage>}
           </FormControl>
           <FormControl>
             <FormLabel>{t('modelManager.description')}</FormLabel>
             <Input {...register('description')} />
           </FormControl>
-          <BaseModelSelect<DiffusersModelConfig>
-            control={control}
-            name="base_model"
-          />
-          <ModelVariantSelect<DiffusersModelConfig>
-            control={control}
-            name="variant"
-          />
+          <BaseModelSelect<DiffusersModelConfig> control={control} name="base_model" />
+          <ModelVariantSelect<DiffusersModelConfig> control={control} name="variant" />
           <FormControl isInvalid={Boolean(errors.path)}>
             <FormLabel>{t('modelManager.modelLocation')}</FormLabel>
             <Input
               {...register('path', {
-                validate: (value) =>
-                  value.trim().length > 0 || 'Must provide a path',
+                validate: (value) => value.trim().length > 0 || 'Must provide a path',
               })}
             />
-            {errors.path?.message && (
-              <FormErrorMessage>{errors.path?.message}</FormErrorMessage>
-            )}
+            {errors.path?.message && <FormErrorMessage>{errors.path?.message}</FormErrorMessage>}
           </FormControl>
           <FormControl>
             <FormLabel>{t('modelManager.vaeLocation')}</FormLabel>
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx
index 2c82ca56f9..2baf735bee 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx
@@ -1,19 +1,7 @@
-import {
-  Button,
-  Divider,
-  Flex,
-  FormControl,
-  FormErrorMessage,
-  FormLabel,
-  Input,
-  Text,
-} from '@invoke-ai/ui-library';
+import { Button, Divider, Flex, FormControl, FormErrorMessage, FormLabel, Input, Text } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import BaseModelSelect from 'features/modelManager/subpanels/shared/BaseModelSelect';
-import {
-  LORA_MODEL_FORMAT_MAP,
-  MODEL_TYPE_MAP,
-} from 'features/parameters/types/constants';
+import { LORA_MODEL_FORMAT_MAP, MODEL_TYPE_MAP } from 'features/parameters/types/constants';
 import { addToast } from 'features/system/store/systemSlice';
 import { makeToast } from 'features/system/util/makeToast';
 import { memo, useCallback } from 'react';
@@ -97,8 +85,8 @@ const LoRAModelEdit = (props: LoRAModelEditProps) => {
           {model.model_name}
         </Text>
         <Text fontSize="sm" color="base.400">
-          {MODEL_TYPE_MAP[model.base_model]} {t('modelManager.model')} ⋅{' '}
-          {LORA_MODEL_FORMAT_MAP[model.model_format]} {t('common.format')}
+          {MODEL_TYPE_MAP[model.base_model]} {t('modelManager.model')} ⋅ {LORA_MODEL_FORMAT_MAP[model.model_format]}{' '}
+          {t('common.format')}
         </Text>
       </Flex>
       <Divider />
@@ -109,34 +97,25 @@ const LoRAModelEdit = (props: LoRAModelEditProps) => {
             <FormLabel>{t('modelManager.name')}</FormLabel>
             <Input
               {...register('model_name', {
-                validate: (value) =>
-                  value.trim().length > 3 || 'Must be at least 3 characters',
+                validate: (value) => value.trim().length > 3 || 'Must be at least 3 characters',
               })}
             />
-            {errors.model_name?.message && (
-              <FormErrorMessage>{errors.model_name?.message}</FormErrorMessage>
-            )}
+            {errors.model_name?.message && <FormErrorMessage>{errors.model_name?.message}</FormErrorMessage>}
           </FormControl>
           <FormControl>
             <FormLabel>{t('modelManager.description')}</FormLabel>
             <Input {...register('description')} />
           </FormControl>
-          <BaseModelSelect<LoRAModelConfig>
-            control={control}
-            name="base_model"
-          />
+          <BaseModelSelect<LoRAModelConfig> control={control} name="base_model" />
 
           <FormControl isInvalid={Boolean(errors.path)}>
             <FormLabel>{t('modelManager.modelLocation')}</FormLabel>
             <Input
               {...register('path', {
-                validate: (value) =>
-                  value.trim().length > 0 || 'Must provide a path',
+                validate: (value) => value.trim().length > 0 || 'Must provide a path',
               })}
             />
-            {errors.path?.message && (
-              <FormErrorMessage>{errors.path?.message}</FormErrorMessage>
-            )}
+            {errors.path?.message && <FormErrorMessage>{errors.path?.message}</FormErrorMessage>}
           </FormControl>
           <Button type="submit" isLoading={isLoading}>
             {t('modelManager.updateModel')}
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelConvert.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelConvert.tsx
index 748734fdde..6e34d5039e 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelConvert.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelConvert.tsx
@@ -34,8 +34,7 @@ const ModelConvert = (props: ModelConvertProps) => {
   const { t } = useTranslation();
   const [convertModel, { isLoading }] = useConvertMainModelsMutation();
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const [saveLocation, setSaveLocation] =
-    useState<SaveLocation>('InvokeAIRoot');
+  const [saveLocation, setSaveLocation] = useState<SaveLocation>('InvokeAIRoot');
   const [customSaveLocation, setCustomSaveLocation] = useState<string>('');
 
   useEffect(() => {
@@ -49,19 +48,15 @@ const ModelConvert = (props: ModelConvertProps) => {
   const handleChangeSaveLocation = useCallback((v: string) => {
     setSaveLocation(v as SaveLocation);
   }, []);
-  const handleChangeCustomSaveLocation = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => {
-      setCustomSaveLocation(e.target.value);
-    },
-    []
-  );
+  const handleChangeCustomSaveLocation = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    setCustomSaveLocation(e.target.value);
+  }, []);
 
   const modelConvertHandler = useCallback(() => {
     const queryArg = {
       base_model: model.base_model,
       model_name: model.model_name,
-      convert_dest_directory:
-        saveLocation === 'Custom' ? customSaveLocation : undefined,
+      convert_dest_directory: saveLocation === 'Custom' ? customSaveLocation : undefined,
     };
 
     if (saveLocation === 'Custom' && customSaveLocation === '') {
@@ -79,9 +74,7 @@ const ModelConvert = (props: ModelConvertProps) => {
     dispatch(
       addToast(
         makeToast({
-          title: `${t('modelManager.convertingModelBegin')}: ${
-            model.model_name
-          }`,
+          title: `${t('modelManager.convertingModelBegin')}: ${model.model_name}`,
           status: 'info',
         })
       )
@@ -103,23 +96,13 @@ const ModelConvert = (props: ModelConvertProps) => {
         dispatch(
           addToast(
             makeToast({
-              title: `${t('modelManager.modelConversionFailed')}: ${
-                model.model_name
-              }`,
+              title: `${t('modelManager.modelConversionFailed')}: ${model.model_name}`,
               status: 'error',
             })
           )
         );
       });
-  }, [
-    convertModel,
-    customSaveLocation,
-    dispatch,
-    model.base_model,
-    model.model_name,
-    saveLocation,
-    t,
-  ]);
+  }, [convertModel, customSaveLocation, dispatch, model.base_model, model.model_name, saveLocation, t]);
 
   return (
     <>
@@ -153,13 +136,8 @@ const ModelConvert = (props: ModelConvertProps) => {
 
         <Flex flexDir="column" gap={2}>
           <Flex marginTop={4} flexDir="column" gap={2}>
-            <Text fontWeight="semibold">
-              {t('modelManager.convertToDiffusersSaveLocation')}
-            </Text>
-            <RadioGroup
-              value={saveLocation}
-              onChange={handleChangeSaveLocation}
-            >
+            <Text fontWeight="semibold">{t('modelManager.convertToDiffusersSaveLocation')}</Text>
+            <RadioGroup value={saveLocation} onChange={handleChangeSaveLocation}>
               <Flex gap={4}>
                 <Radio value="InvokeAIRoot">
                   <Tooltip label="Save converted model in the InvokeAI root folder">
@@ -167,9 +145,7 @@ const ModelConvert = (props: ModelConvertProps) => {
                   </Tooltip>
                 </Radio>
                 <Radio value="Custom">
-                  <Tooltip label="Save converted model in a custom folder">
-                    {t('modelManager.custom')}
-                  </Tooltip>
+                  <Tooltip label="Save converted model in a custom folder">{t('modelManager.custom')}</Tooltip>
                 </Radio>
               </Flex>
             </RadioGroup>
@@ -177,11 +153,7 @@ const ModelConvert = (props: ModelConvertProps) => {
           {saveLocation === 'Custom' && (
             <FormControl>
               <FormLabel>{t('modelManager.customSaveLocation')}</FormLabel>
-              <Input
-                width="full"
-                value={customSaveLocation}
-                onChange={handleChangeCustomSaveLocation}
-              />
+              <Input width="full" value={customSaveLocation} onChange={handleChangeCustomSaveLocation} />
             </FormControl>
           )}
         </Flex>
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelList.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelList.tsx
index e138062b70..94db3d20c3 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelList.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelList.tsx
@@ -1,27 +1,12 @@
-import {
-  Button,
-  ButtonGroup,
-  Flex,
-  FormControl,
-  FormLabel,
-  Input,
-  Spinner,
-  Text,
-} from '@invoke-ai/ui-library';
+import { Button, ButtonGroup, Flex, FormControl, FormLabel, Input, Spinner, Text } from '@invoke-ai/ui-library';
 import type { EntityState } from '@reduxjs/toolkit';
 import { forEach } from 'lodash-es';
 import type { ChangeEvent, PropsWithChildren } from 'react';
 import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ALL_BASE_MODELS } from 'services/api/constants';
-import type {
-  LoRAModelConfigEntity,
-  MainModelConfigEntity,
-} from 'services/api/endpoints/models';
-import {
-  useGetLoRAModelsQuery,
-  useGetMainModelsQuery,
-} from 'services/api/endpoints/models';
+import type { LoRAModelConfigEntity, MainModelConfigEntity } from 'services/api/endpoints/models';
+import { useGetLoRAModelsQuery, useGetMainModelsQuery } from 'services/api/endpoints/models';
 
 import ModelListItem from './ModelListItem';
 
@@ -40,44 +25,28 @@ const ModelList = (props: ModelListProps) => {
   const { selectedModelId, setSelectedModelId } = props;
   const { t } = useTranslation();
   const [nameFilter, setNameFilter] = useState<string>('');
-  const [modelFormatFilter, setModelFormatFilter] =
-    useState<CombinedModelFormat>('all');
+  const [modelFormatFilter, setModelFormatFilter] = useState<CombinedModelFormat>('all');
 
-  const { filteredDiffusersModels, isLoadingDiffusersModels } =
-    useGetMainModelsQuery(ALL_BASE_MODELS, {
-      selectFromResult: ({ data, isLoading }) => ({
-        filteredDiffusersModels: modelsFilter(
-          data,
-          'main',
-          'diffusers',
-          nameFilter
-        ),
-        isLoadingDiffusersModels: isLoading,
-      }),
-    });
+  const { filteredDiffusersModels, isLoadingDiffusersModels } = useGetMainModelsQuery(ALL_BASE_MODELS, {
+    selectFromResult: ({ data, isLoading }) => ({
+      filteredDiffusersModels: modelsFilter(data, 'main', 'diffusers', nameFilter),
+      isLoadingDiffusersModels: isLoading,
+    }),
+  });
 
-  const { filteredCheckpointModels, isLoadingCheckpointModels } =
-    useGetMainModelsQuery(ALL_BASE_MODELS, {
-      selectFromResult: ({ data, isLoading }) => ({
-        filteredCheckpointModels: modelsFilter(
-          data,
-          'main',
-          'checkpoint',
-          nameFilter
-        ),
-        isLoadingCheckpointModels: isLoading,
-      }),
-    });
+  const { filteredCheckpointModels, isLoadingCheckpointModels } = useGetMainModelsQuery(ALL_BASE_MODELS, {
+    selectFromResult: ({ data, isLoading }) => ({
+      filteredCheckpointModels: modelsFilter(data, 'main', 'checkpoint', nameFilter),
+      isLoadingCheckpointModels: isLoading,
+    }),
+  });
 
-  const { filteredLoraModels, isLoadingLoraModels } = useGetLoRAModelsQuery(
-    undefined,
-    {
-      selectFromResult: ({ data, isLoading }) => ({
-        filteredLoraModels: modelsFilter(data, 'lora', undefined, nameFilter),
-        isLoadingLoraModels: isLoading,
-      }),
-    }
-  );
+  const { filteredLoraModels, isLoadingLoraModels } = useGetLoRAModelsQuery(undefined, {
+    selectFromResult: ({ data, isLoading }) => ({
+      filteredLoraModels: modelsFilter(data, 'lora', undefined, nameFilter),
+      isLoadingLoraModels: isLoading,
+    }),
+  });
 
   const handleSearchFilter = useCallback((e: ChangeEvent<HTMLInputElement>) => {
     setNameFilter(e.target.value);
@@ -87,11 +56,7 @@ const ModelList = (props: ModelListProps) => {
     <Flex flexDirection="column" rowGap={4} width="50%" minWidth="50%">
       <Flex flexDirection="column" gap={4} paddingInlineEnd={4}>
         <ButtonGroup>
-          <Button
-            onClick={setModelFormatFilter.bind(null, 'all')}
-            isChecked={modelFormatFilter === 'all'}
-            size="sm"
-          >
+          <Button onClick={setModelFormatFilter.bind(null, 'all')} isChecked={modelFormatFilter === 'all'} size="sm">
             {t('modelManager.allModels')}
           </Button>
           <Button
@@ -108,11 +73,7 @@ const ModelList = (props: ModelListProps) => {
           >
             {t('modelManager.checkpointModels')}
           </Button>
-          <Button
-            size="sm"
-            onClick={setModelFormatFilter.bind(null, 'lora')}
-            isChecked={modelFormatFilter === 'lora'}
-          >
+          <Button size="sm" onClick={setModelFormatFilter.bind(null, 'lora')} isChecked={modelFormatFilter === 'lora'}>
             {t('modelManager.loraModels')}
           </Button>
         </ButtonGroup>
@@ -122,16 +83,9 @@ const ModelList = (props: ModelListProps) => {
           <Input onChange={handleSearchFilter} />
         </FormControl>
 
-        <Flex
-          flexDirection="column"
-          gap={4}
-          maxHeight={window.innerHeight - 280}
-          overflow="scroll"
-        >
+        <Flex flexDirection="column" gap={4} maxHeight={window.innerHeight - 280} overflow="scroll">
           {/* Diffusers List */}
-          {isLoadingDiffusersModels && (
-            <FetchingModelsLoader loadingMessage="Loading Diffusers..." />
-          )}
+          {isLoadingDiffusersModels && <FetchingModelsLoader loadingMessage="Loading Diffusers..." />}
           {['all', 'diffusers'].includes(modelFormatFilter) &&
             !isLoadingDiffusersModels &&
             filteredDiffusersModels.length > 0 && (
@@ -143,9 +97,7 @@ const ModelList = (props: ModelListProps) => {
               />
             )}
           {/* Checkpoints List */}
-          {isLoadingCheckpointModels && (
-            <FetchingModelsLoader loadingMessage="Loading Checkpoints..." />
-          )}
+          {isLoadingCheckpointModels && <FetchingModelsLoader loadingMessage="Loading Checkpoints..." />}
           {['all', 'checkpoint'].includes(modelFormatFilter) &&
             !isLoadingCheckpointModels &&
             filteredCheckpointModels.length > 0 && (
@@ -158,19 +110,15 @@ const ModelList = (props: ModelListProps) => {
             )}
 
           {/* LoRAs List */}
-          {isLoadingLoraModels && (
-            <FetchingModelsLoader loadingMessage="Loading LoRAs..." />
+          {isLoadingLoraModels && <FetchingModelsLoader loadingMessage="Loading LoRAs..." />}
+          {['all', 'lora'].includes(modelFormatFilter) && !isLoadingLoraModels && filteredLoraModels.length > 0 && (
+            <ModelListWrapper
+              title="LoRAs"
+              modelList={filteredLoraModels}
+              selected={{ selectedModelId, setSelectedModelId }}
+              key="loras"
+            />
           )}
-          {['all', 'lora'].includes(modelFormatFilter) &&
-            !isLoadingLoraModels &&
-            filteredLoraModels.length > 0 && (
-              <ModelListWrapper
-                title="LoRAs"
-                modelList={filteredLoraModels}
-                selected={{ selectedModelId, setSelectedModelId }}
-                key="loras"
-              />
-            )}
         </Flex>
       </Flex>
     </Flex>
@@ -191,12 +139,9 @@ const modelsFilter = <T extends MainModelConfigEntity | LoRAModelConfigEntity>(
       return;
     }
 
-    const matchesFilter = model.model_name
-      .toLowerCase()
-      .includes(nameFilter.toLowerCase());
+    const matchesFilter = model.model_name.toLowerCase().includes(nameFilter.toLowerCase());
 
-    const matchesFormat =
-      model_format === undefined || model.model_format === model_format;
+    const matchesFormat = model_format === undefined || model.model_format === model_format;
     const matchesType = model.model_type === model_type;
 
     if (matchesFilter && matchesFormat && matchesType) {
@@ -245,25 +190,15 @@ const ModelListWrapper = memo((props: ModelListWrapperProps) => {
 
 ModelListWrapper.displayName = 'ModelListWrapper';
 
-const FetchingModelsLoader = memo(
-  ({ loadingMessage }: { loadingMessage?: string }) => {
-    return (
-      <StyledModelContainer>
-        <Flex
-          justifyContent="center"
-          alignItems="center"
-          flexDirection="column"
-          p={4}
-          gap={8}
-        >
-          <Spinner />
-          <Text variant="subtext">
-            {loadingMessage ? loadingMessage : 'Fetching...'}
-          </Text>
-        </Flex>
-      </StyledModelContainer>
-    );
-  }
-);
+const FetchingModelsLoader = memo(({ loadingMessage }: { loadingMessage?: string }) => {
+  return (
+    <StyledModelContainer>
+      <Flex justifyContent="center" alignItems="center" flexDirection="column" p={4} gap={8}>
+        <Spinner />
+        <Text variant="subtext">{loadingMessage ? loadingMessage : 'Fetching...'}</Text>
+      </Flex>
+    </StyledModelContainer>
+  );
+});
 
 FetchingModelsLoader.displayName = 'FetchingModelsLoader';
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx
index 6203ea12f4..fdd13e09f5 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx
@@ -15,14 +15,8 @@ import { makeToast } from 'features/system/util/makeToast';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiTrashSimpleBold } from 'react-icons/pi';
-import type {
-  LoRAModelConfigEntity,
-  MainModelConfigEntity,
-} from 'services/api/endpoints/models';
-import {
-  useDeleteLoRAModelsMutation,
-  useDeleteMainModelsMutation,
-} from 'services/api/endpoints/models';
+import type { LoRAModelConfigEntity, MainModelConfigEntity } from 'services/api/endpoints/models';
+import { useDeleteLoRAModelsMutation, useDeleteMainModelsMutation } from 'services/api/endpoints/models';
 
 type ModelListItemProps = {
   model: MainModelConfigEntity | LoRAModelConfigEntity;
@@ -66,9 +60,7 @@ const ModelListItem = (props: ModelListItemProps) => {
           dispatch(
             addToast(
               makeToast({
-                title: `${t('modelManager.modelDeleteFailed')}: ${
-                  model.model_name
-                }`,
+                title: `${t('modelManager.modelDeleteFailed')}: ${model.model_name}`,
                 status: 'error',
               })
             )
@@ -76,14 +68,7 @@ const ModelListItem = (props: ModelListItemProps) => {
         }
       });
     setSelectedModelId(undefined);
-  }, [
-    deleteMainModel,
-    deleteLoRAModel,
-    model,
-    setSelectedModelId,
-    dispatch,
-    t,
-  ]);
+  }, [deleteMainModel, deleteLoRAModel, model, setSelectedModelId, dispatch, t]);
 
   return (
     <Flex gap={2} alignItems="center" w="full">
@@ -100,11 +85,7 @@ const ModelListItem = (props: ModelListItemProps) => {
       >
         <Flex gap={4} alignItems="center">
           <Badge minWidth={14} p={0.5} fontSize="sm" variant="solid">
-            {
-              MODEL_TYPE_SHORT_MAP[
-                model.base_model as keyof typeof MODEL_TYPE_SHORT_MAP
-              ]
-            }
+            {MODEL_TYPE_SHORT_MAP[model.base_model as keyof typeof MODEL_TYPE_SHORT_MAP]}
           </Badge>
           <Tooltip label={model.description} placement="bottom">
             <Text>{model.model_name}</Text>
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModels.tsx
index 78a69fa0c4..a4af3e1517 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModels.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModels.tsx
@@ -7,15 +7,7 @@ const SyncModels = () => {
   const { t } = useTranslation();
 
   return (
-    <Flex
-      w="full"
-      p={4}
-      borderRadius={4}
-      gap={4}
-      justifyContent="space-between"
-      alignItems="center"
-      bg="base.800"
-    >
+    <Flex w="full" p={4} borderRadius={4} gap={4} justifyContent="space-between" alignItems="center" bg="base.800">
       <Flex flexDirection="column" gap={2}>
         <Text fontWeight="semibold">{t('modelManager.syncModels')}</Text>
         <Text fontSize="sm" variant="subtext">
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/BaseModelSelect.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/BaseModelSelect.tsx
index 345d13c2ea..fce16f3f13 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/BaseModelSelect.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/BaseModelSelect.tsx
@@ -15,15 +15,10 @@ const options: ComboboxOption[] = [
   { value: 'sdxl-refiner', label: MODEL_TYPE_MAP['sdxl-refiner'] },
 ];
 
-const BaseModelSelect = <T extends AnyModelConfig>(
-  props: UseControllerProps<T>
-) => {
+const BaseModelSelect = <T extends AnyModelConfig>(props: UseControllerProps<T>) => {
   const { t } = useTranslation();
   const { field } = useController(props);
-  const value = useMemo(
-    () => options.find((o) => o.value === field.value),
-    [field.value]
-  );
+  const value = useMemo(() => options.find((o) => o.value === field.value), [field.value]);
   const onChange = useCallback<ComboboxOnChange>(
     (v) => {
       field.onChange(v?.value);
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/CheckpointConfigsSelect.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/CheckpointConfigsSelect.tsx
index 2a15e3aabf..569f1abbba 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/CheckpointConfigsSelect.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/CheckpointConfigsSelect.tsx
@@ -1,8 +1,4 @@
-import type {
-  ChakraProps,
-  ComboboxOnChange,
-  ComboboxOption,
-} from '@invoke-ai/ui-library';
+import type { ChakraProps, ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
 import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { memo, useCallback, useMemo } from 'react';
 import { useController, type UseControllerProps } from 'react-hook-form';
@@ -12,20 +8,12 @@ import type { CheckpointModelConfig } from 'services/api/types';
 
 const sx: ChakraProps['sx'] = { w: 'full' };
 
-const CheckpointConfigsSelect = (
-  props: UseControllerProps<CheckpointModelConfig>
-) => {
+const CheckpointConfigsSelect = (props: UseControllerProps<CheckpointModelConfig>) => {
   const { data } = useGetCheckpointConfigsQuery();
   const { t } = useTranslation();
-  const options = useMemo<ComboboxOption[]>(
-    () => (data ? data.map((i) => ({ label: i, value: i })) : []),
-    [data]
-  );
+  const options = useMemo<ComboboxOption[]>(() => (data ? data.map((i) => ({ label: i, value: i })) : []), [data]);
   const { field } = useController(props);
-  const value = useMemo(
-    () => options.find((o) => o.value === field.value),
-    [field.value, options]
-  );
+  const value = useMemo(() => options.find((o) => o.value === field.value), [field.value, options]);
   const onChange = useCallback<ComboboxOnChange>(
     (v) => {
       field.onChange(v?.value);
@@ -36,13 +24,7 @@ const CheckpointConfigsSelect = (
   return (
     <FormControl>
       <FormLabel>{t('modelManager.configFile')}</FormLabel>
-      <Combobox
-        placeholder="Select A Config File"
-        value={value}
-        options={options}
-        onChange={onChange}
-        sx={sx}
-      />
+      <Combobox placeholder="Select A Config File" value={value} options={options} onChange={onChange} sx={sx} />
     </FormControl>
   );
 };
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/ModelVariantSelect.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/ModelVariantSelect.tsx
index 6dcd5f28d3..27ded93843 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/ModelVariantSelect.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/ModelVariantSelect.tsx
@@ -5,10 +5,7 @@ import { useCallback, useMemo } from 'react';
 import type { UseControllerProps } from 'react-hook-form';
 import { useController } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import type {
-  CheckpointModelConfig,
-  DiffusersModelConfig,
-} from 'services/api/types';
+import type { CheckpointModelConfig, DiffusersModelConfig } from 'services/api/types';
 
 const options: ComboboxOption[] = [
   { value: 'normal', label: 'Normal' },
@@ -16,17 +13,10 @@ const options: ComboboxOption[] = [
   { value: 'depth', label: 'Depth' },
 ];
 
-const ModelVariantSelect = <
-  T extends CheckpointModelConfig | DiffusersModelConfig,
->(
-  props: UseControllerProps<T>
-) => {
+const ModelVariantSelect = <T extends CheckpointModelConfig | DiffusersModelConfig>(props: UseControllerProps<T>) => {
   const { t } = useTranslation();
   const { field } = useController(props);
-  const value = useMemo(
-    () => options.find((o) => o.value === field.value),
-    [field.value]
-  );
+  const value = useMemo(() => options.find((o) => o.value === field.value), [field.value]);
   const onChange = useCallback<ComboboxOnChange>(
     (v) => {
       field.onChange(v?.value);
diff --git a/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx b/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
index c527085733..501d263c38 100644
--- a/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
@@ -53,12 +53,7 @@ const NodeEditor = () => {
     >
       <AnimatePresence>
         {isReady && (
-          <motion.div
-            initial={initial}
-            animate={animate}
-            exit={exit}
-            style={isReadyMotionStyles}
-          >
+          <motion.div initial={initial} animate={animate} exit={exit} style={isReadyMotionStyles}>
             <Flow />
             <AddNodePopover />
             <TopPanel />
@@ -69,12 +64,7 @@ const NodeEditor = () => {
       </AnimatePresence>
       <AnimatePresence>
         {!isReady && (
-          <motion.div
-            initial={initial}
-            animate={animate}
-            exit={exit}
-            style={notIsReadyMotionStyles}
-          >
+          <motion.div initial={initial} animate={animate} exit={exit} style={notIsReadyMotionStyles}>
             <Flex
               layerStyle="first"
               position="relative"
@@ -85,10 +75,7 @@ const NodeEditor = () => {
               justifyContent="center"
               pointerEvents="none"
             >
-              <IAINoContentFallback
-                label={t('nodes.loadingNodes')}
-                icon={MdDeviceHub}
-              />
+              <IAINoContentFallback label={t('nodes.loadingNodes')} icon={MdDeviceHub} />
             </Flex>
           </motion.div>
         )}
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx
index 934c071da7..5d2bb1f3d2 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx
@@ -1,24 +1,13 @@
 import 'reactflow/dist/style.css';
 
 import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
-import {
-  Combobox,
-  Flex,
-  Popover,
-  PopoverAnchor,
-  PopoverBody,
-  PopoverContent,
-} from '@invoke-ai/ui-library';
+import { Combobox, Flex, Popover, PopoverAnchor, PopoverBody, PopoverContent } from '@invoke-ai/ui-library';
 import { useAppToaster } from 'app/components/Toaster';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import type { SelectInstance } from 'chakra-react-select';
 import { useBuildNode } from 'features/nodes/hooks/useBuildNode';
-import {
-  addNodePopoverClosed,
-  addNodePopoverOpened,
-  nodeAdded,
-} from 'features/nodes/store/nodesSlice';
+import { addNodePopoverClosed, addNodePopoverOpened, nodeAdded } from 'features/nodes/store/nodesSlice';
 import { selectNodeTemplatesSlice } from 'features/nodes/store/nodeTemplatesSlice';
 import { validateSourceAndTargetTypes } from 'features/nodes/store/util/validateSourceAndTargetTypes';
 import { filter, map, memoize, some } from 'lodash-es';
@@ -42,19 +31,17 @@ const createRegex = memoize(
     )
 );
 
-const filterOption = memoize(
-  (option: FilterOptionOption<ComboboxOption>, inputValue: string) => {
-    if (!inputValue) {
-      return true;
-    }
-    const regex = createRegex(inputValue);
-    return (
-      regex.test(option.label) ||
-      regex.test(option.data.description ?? '') ||
-      (option.data.tags ?? []).some((tag) => regex.test(tag))
-    );
+const filterOption = memoize((option: FilterOptionOption<ComboboxOption>, inputValue: string) => {
+  if (!inputValue) {
+    return true;
   }
-);
+  const regex = createRegex(inputValue);
+  return (
+    regex.test(option.label) ||
+    regex.test(option.data.description ?? '') ||
+    (option.data.tags ?? []).some((tag) => regex.test(tag))
+  );
+});
 
 const AddNodePopover = () => {
   const dispatch = useAppDispatch();
@@ -65,64 +52,53 @@ const AddNodePopover = () => {
   const inputRef = useRef<HTMLInputElement>(null);
 
   const fieldFilter = useAppSelector((s) => s.nodes.connectionStartFieldType);
-  const handleFilter = useAppSelector(
-    (s) => s.nodes.connectionStartParams?.handleType
-  );
+  const handleFilter = useAppSelector((s) => s.nodes.connectionStartParams?.handleType);
 
-  const selector = createMemoizedSelector(
-    selectNodeTemplatesSlice,
-    (nodeTemplates) => {
-      // If we have a connection in progress, we need to filter the node choices
-      const filteredNodeTemplates = fieldFilter
-        ? filter(nodeTemplates.templates, (template) => {
-            const handles =
-              handleFilter == 'source' ? template.inputs : template.outputs;
+  const selector = createMemoizedSelector(selectNodeTemplatesSlice, (nodeTemplates) => {
+    // If we have a connection in progress, we need to filter the node choices
+    const filteredNodeTemplates = fieldFilter
+      ? filter(nodeTemplates.templates, (template) => {
+          const handles = handleFilter == 'source' ? template.inputs : template.outputs;
 
-            return some(handles, (handle) => {
-              const sourceType =
-                handleFilter == 'source' ? fieldFilter : handle.type;
-              const targetType =
-                handleFilter == 'target' ? fieldFilter : handle.type;
+          return some(handles, (handle) => {
+            const sourceType = handleFilter == 'source' ? fieldFilter : handle.type;
+            const targetType = handleFilter == 'target' ? fieldFilter : handle.type;
 
-              return validateSourceAndTargetTypes(sourceType, targetType);
-            });
-          })
-        : map(nodeTemplates.templates);
+            return validateSourceAndTargetTypes(sourceType, targetType);
+          });
+        })
+      : map(nodeTemplates.templates);
 
-      const options: ComboboxOption[] = map(
-        filteredNodeTemplates,
-        (template) => {
-          return {
-            label: template.title,
-            value: template.type,
-            description: template.description,
-            tags: template.tags,
-          };
-        }
-      );
+    const options: ComboboxOption[] = map(filteredNodeTemplates, (template) => {
+      return {
+        label: template.title,
+        value: template.type,
+        description: template.description,
+        tags: template.tags,
+      };
+    });
 
-      //We only want these nodes if we're not filtered
-      if (fieldFilter === null) {
-        options.push({
-          label: t('nodes.currentImage'),
-          value: 'current_image',
-          description: t('nodes.currentImageDescription'),
-          tags: ['progress'],
-        });
+    //We only want these nodes if we're not filtered
+    if (fieldFilter === null) {
+      options.push({
+        label: t('nodes.currentImage'),
+        value: 'current_image',
+        description: t('nodes.currentImageDescription'),
+        tags: ['progress'],
+      });
 
-        options.push({
-          label: t('nodes.notes'),
-          value: 'notes',
-          description: t('nodes.notesDescription'),
-          tags: ['notes'],
-        });
-      }
-
-      options.sort((a, b) => a.label.localeCompare(b.label));
-
-      return { options };
+      options.push({
+        label: t('nodes.notes'),
+        value: 'notes',
+        description: t('nodes.notesDescription'),
+        tags: ['notes'],
+      });
     }
-  );
+
+    options.sort((a, b) => a.label.localeCompare(b.label));
+
+    return { options };
+  });
 
   const { options } = useAppSelector(selector);
   const isOpen = useAppSelector((s) => s.nodes.isAddNodePopoverOpen);
@@ -205,12 +181,7 @@ const AddNodePopover = () => {
       initialFocusRef={inputRef}
     >
       <PopoverAnchor>
-        <Flex
-          position="absolute"
-          top="15%"
-          insetInlineStart="50%"
-          pointerEvents="none"
-        />
+        <Flex position="absolute" top="15%" insetInlineStart="50%" pointerEvents="none" />
       </PopoverAnchor>
       <PopoverContent
         p={0}
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx
index 69109fe9f6..4b9249e94f 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx
@@ -193,17 +193,16 @@ export const Flow = memo(() => {
   // Easiest to just keep track of the last mouse event for this particular feature
   const edgeUpdateMouseEvent = useRef<MouseEvent>();
 
-  const onEdgeUpdateStart: NonNullable<ReactFlowProps['onEdgeUpdateStart']> =
-    useCallback(
-      (e, edge, _handleType) => {
-        // update mouse event
-        edgeUpdateMouseEvent.current = e;
-        // always delete the edge when starting an updated
-        dispatch(edgeDeleted(edge.id));
-        dispatch(edgeChangeStarted());
-      },
-      [dispatch]
-    );
+  const onEdgeUpdateStart: NonNullable<ReactFlowProps['onEdgeUpdateStart']> = useCallback(
+    (e, edge, _handleType) => {
+      // update mouse event
+      edgeUpdateMouseEvent.current = e;
+      // always delete the edge when starting an updated
+      dispatch(edgeDeleted(edge.id));
+      dispatch(edgeChangeStarted());
+    },
+    [dispatch]
+  );
 
   const onEdgeUpdate: OnEdgeUpdateFunc = useCallback(
     (_oldEdge, newConnection) => {
@@ -214,24 +213,23 @@ export const Flow = memo(() => {
     [dispatch]
   );
 
-  const onEdgeUpdateEnd: NonNullable<ReactFlowProps['onEdgeUpdateEnd']> =
-    useCallback(
-      (e, edge, _handleType) => {
-        // Handle the case where user begins a drag but didn't move the cursor -
-        // bc we deleted the edge, we need to add it back
-        if (
-          // ignore touch events
-          !('touches' in e) &&
-          edgeUpdateMouseEvent.current?.clientX === e.clientX &&
-          edgeUpdateMouseEvent.current?.clientY === e.clientY
-        ) {
-          dispatch(edgeAdded(edge));
-        }
-        // reset mouse event
-        edgeUpdateMouseEvent.current = undefined;
-      },
-      [dispatch]
-    );
+  const onEdgeUpdateEnd: NonNullable<ReactFlowProps['onEdgeUpdateEnd']> = useCallback(
+    (e, edge, _handleType) => {
+      // Handle the case where user begins a drag but didn't move the cursor -
+      // bc we deleted the edge, we need to add it back
+      if (
+        // ignore touch events
+        !('touches' in e) &&
+        edgeUpdateMouseEvent.current?.clientX === e.clientX &&
+        edgeUpdateMouseEvent.current?.clientY === e.clientY
+      ) {
+        dispatch(edgeAdded(edge));
+      }
+      // reset mouse event
+      edgeUpdateMouseEvent.current = undefined;
+    },
+    [dispatch]
+  );
 
   // #endregion
 
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/connectionLines/CustomConnectionLine.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/connectionLines/CustomConnectionLine.tsx
index 7be6f1544b..61efcea06a 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/connectionLines/CustomConnectionLine.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/connectionLines/CustomConnectionLine.tsx
@@ -9,27 +9,16 @@ import type { ConnectionLineComponentProps } from 'reactflow';
 import { getBezierPath } from 'reactflow';
 
 const selectStroke = createSelector(selectNodesSlice, (nodes) =>
-  nodes.shouldColorEdges
-    ? getFieldColor(nodes.connectionStartFieldType)
-    : colorTokenToCssVar('base.500')
+  nodes.shouldColorEdges ? getFieldColor(nodes.connectionStartFieldType) : colorTokenToCssVar('base.500')
 );
 
 const selectClassName = createSelector(selectNodesSlice, (nodes) =>
-  nodes.shouldAnimateEdges
-    ? 'react-flow__custom_connection-path animated'
-    : 'react-flow__custom_connection-path'
+  nodes.shouldAnimateEdges ? 'react-flow__custom_connection-path animated' : 'react-flow__custom_connection-path'
 );
 
 const pathStyles: CSSProperties = { opacity: 0.8 };
 
-const CustomConnectionLine = ({
-  fromX,
-  fromY,
-  fromPosition,
-  toX,
-  toY,
-  toPosition,
-}: ConnectionLineComponentProps) => {
+const CustomConnectionLine = ({ fromX, fromY, fromPosition, toX, toY, toPosition }: ConnectionLineComponentProps) => {
   const stroke = useAppSelector(selectStroke);
   const className = useAppSelector(selectClassName);
 
@@ -46,14 +35,7 @@ const CustomConnectionLine = ({
 
   return (
     <g>
-      <path
-        fill="none"
-        stroke={stroke}
-        strokeWidth={2}
-        className={className}
-        d={dAttr}
-        style={pathStyles}
-      />
+      <path fill="none" stroke={stroke} strokeWidth={2} className={className} d={dAttr} style={pathStyles} />
     </g>
   );
 };
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx
index 084147675d..eae7970804 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx
@@ -23,14 +23,7 @@ const InvocationCollapsedEdge = ({
   targetHandleId,
 }: EdgeProps<{ count: number }>) => {
   const selector = useMemo(
-    () =>
-      makeEdgeSelector(
-        source,
-        sourceHandleId,
-        target,
-        targetHandleId,
-        selected
-      ),
+    () => makeEdgeSelector(source, sourceHandleId, target, targetHandleId, selected),
     [selected, source, sourceHandleId, target, targetHandleId]
   );
 
@@ -68,12 +61,7 @@ const InvocationCollapsedEdge = ({
             transform={`translate(-50%, -50%) translate(${labelX}px,${labelY}px)`}
             className="nodrag nopan"
           >
-            <Badge
-              variant="solid"
-              bg="base.500"
-              opacity={isSelected ? 0.8 : 0.5}
-              boxShadow="base"
-            >
+            <Badge variant="solid" bg="base.500" opacity={isSelected ? 0.8 : 0.5} boxShadow="base">
               {data.count}
             </Badge>
           </Flex>
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationDefaultEdge.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationDefaultEdge.tsx
index 15e0f851ca..0a18c2a959 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationDefaultEdge.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationDefaultEdge.tsx
@@ -21,14 +21,7 @@ const InvocationDefaultEdge = ({
   targetHandleId,
 }: EdgeProps) => {
   const selector = useMemo(
-    () =>
-      makeEdgeSelector(
-        source,
-        sourceHandleId,
-        target,
-        targetHandleId,
-        selected
-      ),
+    () => makeEdgeSelector(source, sourceHandleId, target, targetHandleId, selected),
     [source, sourceHandleId, target, targetHandleId, selected]
   );
 
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/edges/util/makeEdgeSelector.ts b/invokeai/frontend/web/src/features/nodes/components/flow/edges/util/makeEdgeSelector.ts
index 89d9e514ff..4bfc588e67 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/edges/util/makeEdgeSelector.ts
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/edges/util/makeEdgeSelector.ts
@@ -16,18 +16,12 @@ export const makeEdgeSelector = (
     const sourceNode = nodes.nodes.find((node) => node.id === source);
     const targetNode = nodes.nodes.find((node) => node.id === target);
 
-    const isInvocationToInvocationEdge =
-      isInvocationNode(sourceNode) && isInvocationNode(targetNode);
+    const isInvocationToInvocationEdge = isInvocationNode(sourceNode) && isInvocationNode(targetNode);
 
     const isSelected = sourceNode?.selected || targetNode?.selected || selected;
-    const sourceType = isInvocationToInvocationEdge
-      ? sourceNode?.data?.outputs[sourceHandleId || '']?.type
-      : undefined;
+    const sourceType = isInvocationToInvocationEdge ? sourceNode?.data?.outputs[sourceHandleId || '']?.type : undefined;
 
-    const stroke =
-      sourceType && nodes.shouldColorEdges
-        ? getFieldColor(sourceType)
-        : colorTokenToCssVar('base.500');
+    const stroke = sourceType && nodes.shouldColorEdges ? getFieldColor(sourceType) : colorTokenToCssVar('base.500');
 
     return {
       isSelected,
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx
index 3439bb76f0..968136a3c2 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx
@@ -15,18 +15,14 @@ import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { NodeProps } from 'reactflow';
 
-const selector = createMemoizedSelector(
-  selectSystemSlice,
-  selectGallerySlice,
-  (system, gallery) => {
-    const imageDTO = gallery.selection[gallery.selection.length - 1];
+const selector = createMemoizedSelector(selectSystemSlice, selectGallerySlice, (system, gallery) => {
+  const imageDTO = gallery.selection[gallery.selection.length - 1];
 
-    return {
-      imageDTO,
-      progressImage: system.denoiseProgress?.progress_image,
-    };
-  }
-);
+  return {
+    imageDTO,
+    progressImage: system.denoiseProgress?.progress_image,
+  };
+});
 
 const CurrentImageNode = (props: NodeProps) => {
   const { progressImage, imageDTO } = useAppSelector(selector);
@@ -34,13 +30,7 @@ const CurrentImageNode = (props: NodeProps) => {
   if (progressImage) {
     return (
       <Wrapper nodeProps={props}>
-        <Image
-          src={progressImage.dataURL}
-          w="full"
-          h="full"
-          objectFit="contain"
-          borderRadius="base"
-        />
+        <Image src={progressImage.dataURL} w="full" h="full" objectFit="contain" borderRadius="base" />
       </Wrapper>
     );
   }
@@ -74,11 +64,7 @@ const Wrapper = (props: PropsWithChildren<{ nodeProps: NodeProps }>) => {
   }, []);
   const { t } = useTranslation();
   return (
-    <NodeWrapper
-      nodeId={props.nodeProps.id}
-      selected={props.nodeProps.selected}
-      width={384}
-    >
+    <NodeWrapper nodeId={props.nodeProps.id} selected={props.nodeProps.selected} width={384}>
       <Flex
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
@@ -86,33 +72,15 @@ const Wrapper = (props: PropsWithChildren<{ nodeProps: NodeProps }>) => {
         position="relative"
         flexDirection="column"
       >
-        <Flex
-          layerStyle="nodeHeader"
-          borderTopRadius="base"
-          alignItems="center"
-          justifyContent="center"
-          h={8}
-        >
+        <Flex layerStyle="nodeHeader" borderTopRadius="base" alignItems="center" justifyContent="center" h={8}>
           <Text fontSize="sm" fontWeight="semibold" color="base.200">
             {t('nodes.currentImage')}
           </Text>
         </Flex>
-        <Flex
-          layerStyle="nodeBody"
-          w="full"
-          h="full"
-          borderBottomRadius="base"
-          p={2}
-        >
+        <Flex layerStyle="nodeBody" w="full" h="full" borderBottomRadius="base" p={2}>
           {props.children}
           {isHovering && (
-            <motion.div
-              key="nextPrevButtons"
-              initial={initial}
-              animate={animate}
-              exit={exit}
-              style={styles}
-            >
+            <motion.div key="nextPrevButtons" initial={initial} animate={animate} exit={exit} style={styles}>
               <NextPrevImageButtons />
             </motion.div>
           )}
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx
index e14385c764..0147bcaed2 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx
@@ -27,13 +27,7 @@ const InvocationNode = ({ nodeId, isOpen, label, type, selected }: Props) => {
 
   return (
     <NodeWrapper nodeId={nodeId} selected={selected}>
-      <InvocationNodeHeader
-        nodeId={nodeId}
-        isOpen={isOpen}
-        label={label}
-        selected={selected}
-        type={type}
-      />
+      <InvocationNodeHeader nodeId={nodeId} isOpen={isOpen} label={label} selected={selected} type={type} />
       {isOpen && (
         <>
           <Flex
@@ -48,30 +42,18 @@ const InvocationNode = ({ nodeId, isOpen, label, type, selected }: Props) => {
             <Flex flexDir="column" px={2} w="full" h="full">
               <Grid gridTemplateColumns="1fr auto" gridAutoRows="1fr">
                 {inputConnectionFieldNames.map((fieldName, i) => (
-                  <GridItem
-                    gridColumnStart={1}
-                    gridRowStart={i + 1}
-                    key={`${nodeId}.${fieldName}.input-field`}
-                  >
+                  <GridItem gridColumnStart={1} gridRowStart={i + 1} key={`${nodeId}.${fieldName}.input-field`}>
                     <InputField nodeId={nodeId} fieldName={fieldName} />
                   </GridItem>
                 ))}
                 {outputFieldNames.map((fieldName, i) => (
-                  <GridItem
-                    gridColumnStart={2}
-                    gridRowStart={i + 1}
-                    key={`${nodeId}.${fieldName}.output-field`}
-                  >
+                  <GridItem gridColumnStart={2} gridRowStart={i + 1} key={`${nodeId}.${fieldName}.output-field`}>
                     <OutputField nodeId={nodeId} fieldName={fieldName} />
                   </GridItem>
                 ))}
               </Grid>
               {inputAnyOrDirectFieldNames.map((fieldName) => (
-                <InputField
-                  key={`${nodeId}.${fieldName}.input-field`}
-                  nodeId={nodeId}
-                  fieldName={fieldName}
-                />
+                <InputField key={`${nodeId}.${fieldName}.input-field`} nodeId={nodeId} fieldName={fieldName} />
               ))}
             </Flex>
           </Flex>
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon.tsx
index 8e1147b944..ddeb883d23 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon.tsx
@@ -22,33 +22,26 @@ const InvocationNodeClassificationIcon = ({ nodeId }: Props) => {
       placement="top"
       shouldWrapChildren
     >
-      <Icon
-        as={getIcon(classification)}
-        display="block"
-        boxSize={4}
-        color="base.400"
-      />
+      <Icon as={getIcon(classification)} display="block" boxSize={4} color="base.400" />
     </Tooltip>
   );
 };
 
 export default memo(InvocationNodeClassificationIcon);
 
-const ClassificationTooltipContent = memo(
-  ({ classification }: { classification: Classification }) => {
-    const { t } = useTranslation();
+const ClassificationTooltipContent = memo(({ classification }: { classification: Classification }) => {
+  const { t } = useTranslation();
 
-    if (classification === 'beta') {
-      return t('nodes.betaDesc');
-    }
-
-    if (classification === 'prototype') {
-      return t('nodes.prototypeDesc');
-    }
-
-    return null;
+  if (classification === 'beta') {
+    return t('nodes.betaDesc');
   }
-);
+
+  if (classification === 'prototype') {
+    return t('nodes.prototypeDesc');
+  }
+
+  return null;
+});
 
 ClassificationTooltipContent.displayName = 'ClassificationTooltipContent';
 
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx
index 01a6d2e493..58e881860e 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx
@@ -16,18 +16,8 @@ const InvocationNodeInfoIcon = ({ nodeId }: Props) => {
   const needsUpdate = useNodeNeedsUpdate(nodeId);
 
   return (
-    <Tooltip
-      label={<TooltipContent nodeId={nodeId} />}
-      placement="top"
-      shouldWrapChildren
-    >
-      <Icon
-        as={PiInfoBold}
-        display="block"
-        boxSize={4}
-        w={8}
-        color={needsUpdate ? 'error.400' : 'base.400'}
-      />
+    <Tooltip label={<TooltipContent nodeId={nodeId} />} placement="top" shouldWrapChildren>
+      <Icon as={PiInfoBold} display="block" boxSize={4} w={8} color={needsUpdate ? 'error.400' : 'base.400'} />
     </Tooltip>
   );
 };
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx
index 0586353e64..3138cb32fe 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx
@@ -1,13 +1,5 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
-import {
-  Badge,
-  CircularProgress,
-  Flex,
-  Icon,
-  Image,
-  Text,
-  Tooltip,
-} from '@invoke-ai/ui-library';
+import { Badge, CircularProgress, Flex, Icon, Image, Text, Tooltip } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
@@ -16,11 +8,7 @@ import type { NodeExecutionState } from 'features/nodes/types/invocation';
 import { zNodeStatus } from 'features/nodes/types/invocation';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  PiCheckBold,
-  PiDotsThreeOutlineFill,
-  PiWarningBold,
-} from 'react-icons/pi';
+import { PiCheckBold, PiDotsThreeOutlineFill, PiWarningBold } from 'react-icons/pi';
 
 type Props = {
   nodeId: string;
@@ -37,11 +25,7 @@ const circleStyles: SystemStyleObject = {
 
 const InvocationNodeStatusIndicator = ({ nodeId }: Props) => {
   const selectNodeExecutionState = useMemo(
-    () =>
-      createMemoizedSelector(
-        selectNodesSlice,
-        (nodes) => nodes.nodeExecutionStates[nodeId]
-      ),
+    () => createMemoizedSelector(selectNodesSlice, (nodes) => nodes.nodeExecutionStates[nodeId]),
     [nodeId]
   );
 
@@ -52,17 +36,8 @@ const InvocationNodeStatusIndicator = ({ nodeId }: Props) => {
   }
 
   return (
-    <Tooltip
-      label={<TooltipLabel nodeExecutionState={nodeExecutionState} />}
-      placement="top"
-    >
-      <Flex
-        className={DRAG_HANDLE_CLASSNAME}
-        w={5}
-        h="full"
-        alignItems="center"
-        justifyContent="flex-end"
-      >
+    <Tooltip label={<TooltipLabel nodeExecutionState={nodeExecutionState} />} placement="top">
+      <Flex className={DRAG_HANDLE_CLASSNAME} w={5} h="full" alignItems="center" justifyContent="flex-end">
         <StatusIcon nodeExecutionState={nodeExecutionState} />
       </Flex>
     </Tooltip>
@@ -85,13 +60,7 @@ const TooltipLabel = memo(({ nodeExecutionState }: TooltipLabelProps) => {
     if (progressImage) {
       return (
         <Flex pos="relative" pt={1.5} pb={0.5}>
-          <Image
-            src={progressImage.dataURL}
-            w={32}
-            h={32}
-            borderRadius="base"
-            objectFit="contain"
-          />
+          <Image src={progressImage.dataURL} w={32} h={32} borderRadius="base" objectFit="contain" />
           {progress !== null && (
             <Badge variant="solid" pos="absolute" top={2.5} insetInlineEnd={1}>
               {Math.round(progress * 100)}%
@@ -132,23 +101,11 @@ type StatusIconProps = {
 const StatusIcon = memo((props: StatusIconProps) => {
   const { progress, status } = props.nodeExecutionState;
   if (status === zNodeStatus.enum.PENDING) {
-    return (
-      <Icon
-        as={PiDotsThreeOutlineFill}
-        boxSize={iconBoxSize}
-        color="base.300"
-      />
-    );
+    return <Icon as={PiDotsThreeOutlineFill} boxSize={iconBoxSize} color="base.300" />;
   }
   if (status === zNodeStatus.enum.IN_PROGRESS) {
     return progress === null ? (
-      <CircularProgress
-        isIndeterminate
-        size="14px"
-        color="base.500"
-        thickness={14}
-        sx={circleStyles}
-      />
+      <CircularProgress isIndeterminate size="14px" color="base.500" thickness={14} sx={circleStyles} />
     ) : (
       <CircularProgress
         value={Math.round(progress * 100)}
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeUnknownFallback.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeUnknownFallback.tsx
index 914eb134f1..cc26e672f6 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeUnknownFallback.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeUnknownFallback.tsx
@@ -14,13 +14,7 @@ type Props = {
   selected: boolean;
 };
 
-const InvocationNodeUnknownFallback = ({
-  nodeId,
-  isOpen,
-  label,
-  type,
-  selected,
-}: Props) => {
+const InvocationNodeUnknownFallback = ({ nodeId, isOpen, label, type, selected }: Props) => {
   const { t } = useTranslation();
   const nodePack = useNodePack(nodeId);
   return (
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeWrapper.tsx
index b2ee81c292..d7a5dc3895 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeWrapper.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeWrapper.tsx
@@ -13,10 +13,7 @@ const InvocationNodeWrapper = (props: NodeProps<InvocationNodeData>) => {
   const { id: nodeId, type, isOpen, label } = data;
 
   const hasTemplateSelector = useMemo(
-    () =>
-      createSelector(selectNodeTemplatesSlice, (nodeTemplates) =>
-        Boolean(nodeTemplates.templates[type])
-      ),
+    () => createSelector(selectNodeTemplatesSlice, (nodeTemplates) => Boolean(nodeTemplates.templates[type])),
     [type]
   );
 
@@ -24,25 +21,11 @@ const InvocationNodeWrapper = (props: NodeProps<InvocationNodeData>) => {
 
   if (!hasTemplate) {
     return (
-      <InvocationNodeUnknownFallback
-        nodeId={nodeId}
-        isOpen={isOpen}
-        label={label}
-        type={type}
-        selected={selected}
-      />
+      <InvocationNodeUnknownFallback nodeId={nodeId} isOpen={isOpen} label={label} type={type} selected={selected} />
     );
   }
 
-  return (
-    <InvocationNode
-      nodeId={nodeId}
-      isOpen={isOpen}
-      label={label}
-      type={type}
-      selected={selected}
-    />
-  );
+  return <InvocationNode nodeId={nodeId} isOpen={isOpen} label={label} type={type} selected={selected} />;
 };
 
 export default memo(InvocationNodeWrapper);
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/NotesTextarea.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/NotesTextarea.tsx
index a6bdb1fa75..ed5031d435 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/NotesTextarea.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/NotesTextarea.tsx
@@ -23,12 +23,7 @@ const NotesTextarea = ({ nodeId }: { nodeId: string }) => {
   return (
     <FormControl orientation="vertical" h="full">
       <FormLabel>{t('nodes.notes')}</FormLabel>
-      <Textarea
-        value={data?.notes}
-        onChange={handleNotesChanged}
-        rows={10}
-        resize="none"
-      />
+      <Textarea value={data?.notes} onChange={handleNotesChanged} rows={10} resize="none" />
     </FormControl>
   );
 };
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/UseCacheCheckbox.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/UseCacheCheckbox.tsx
index e900747bbd..e8069bf38d 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/UseCacheCheckbox.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/UseCacheCheckbox.tsx
@@ -24,11 +24,7 @@ const UseCacheCheckbox = ({ nodeId }: { nodeId: string }) => {
   return (
     <FormControl>
       <FormLabel>{t('invocationCache.useCache')}</FormLabel>
-      <Checkbox
-        className="nopan"
-        onChange={handleChange}
-        isChecked={useCache}
-      />
+      <Checkbox className="nopan" onChange={handleChange} isChecked={useCache} />
     </FormControl>
   );
 };
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/EditableFieldTitle.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/EditableFieldTitle.tsx
index c5cbda148e..c2231f703a 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/EditableFieldTitle.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/EditableFieldTitle.tsx
@@ -28,21 +28,13 @@ interface Props {
 }
 
 const EditableFieldTitle = forwardRef((props: Props, ref) => {
-  const {
-    nodeId,
-    fieldName,
-    kind,
-    isMissingInput = false,
-    withTooltip = false,
-  } = props;
+  const { nodeId, fieldName, kind, isMissingInput = false, withTooltip = false } = props;
   const label = useFieldLabel(nodeId, fieldName);
   const fieldTemplateTitle = useFieldTemplateTitle(nodeId, fieldName, kind);
   const { t } = useTranslation();
 
   const dispatch = useAppDispatch();
-  const [localTitle, setLocalTitle] = useState(
-    label || fieldTemplateTitle || t('nodes.unknownField')
-  );
+  const [localTitle, setLocalTitle] = useState(label || fieldTemplateTitle || t('nodes.unknownField'));
 
   const handleSubmit = useCallback(
     async (newTitle: string) => {
@@ -66,15 +58,7 @@ const EditableFieldTitle = forwardRef((props: Props, ref) => {
 
   return (
     <Tooltip
-      label={
-        withTooltip ? (
-          <FieldTooltipContent
-            nodeId={nodeId}
-            fieldName={fieldName}
-            kind="input"
-          />
-        ) : undefined
-      }
+      label={withTooltip ? <FieldTooltipContent nodeId={nodeId} fieldName={fieldName} kind="input" /> : undefined}
       openDelay={HANDLE_TOOLTIP_OPEN_DELAY}
     >
       <Editable
@@ -143,15 +127,7 @@ const EditableControls = memo(() => {
   }
 
   return (
-    <Flex
-      onClick={handleClick}
-      position="absolute"
-      w="full"
-      h="full"
-      top={0}
-      insetInlineStart={0}
-      cursor="text"
-    />
+    <Flex onClick={handleClick} position="absolute" w="full" h="full" top={0} insetInlineStart={0} cursor="text" />
   );
 });
 
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx
index 35ea2e80f1..ec1500db9d 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx
@@ -1,10 +1,5 @@
 import type { ContextMenuProps } from '@invoke-ai/ui-library';
-import {
-  ContextMenu,
-  MenuGroup,
-  MenuItem,
-  MenuList,
-} from '@invoke-ai/ui-library';
+import { ContextMenu, MenuGroup, MenuItem, MenuList } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useFieldInputKind } from 'features/nodes/hooks/useFieldInputKind';
@@ -37,19 +32,12 @@ const FieldContextMenu = ({ nodeId, fieldName, kind, children }: Props) => {
   const selectIsExposed = useMemo(
     () =>
       createSelector(selectWorkflowSlice, (workflow) => {
-        return Boolean(
-          workflow.exposedFields.find(
-            (f) => f.nodeId === nodeId && f.fieldName === fieldName
-          )
-        );
+        return Boolean(workflow.exposedFields.find((f) => f.nodeId === nodeId && f.fieldName === fieldName));
       }),
     [fieldName, nodeId]
   );
 
-  const mayExpose = useMemo(
-    () => input && ['any', 'direct'].includes(input),
-    [input]
-  );
+  const mayExpose = useMemo(() => input && ['any', 'direct'].includes(input), [input]);
 
   const isExposed = useAppSelector(selectIsExposed);
 
@@ -65,46 +53,26 @@ const FieldContextMenu = ({ nodeId, fieldName, kind, children }: Props) => {
     const menuItems: ReactNode[] = [];
     if (mayExpose && !isExposed) {
       menuItems.push(
-        <MenuItem
-          key={`${nodeId}.${fieldName}.expose-field`}
-          icon={<PiPlusBold />}
-          onClick={handleExposeField}
-        >
+        <MenuItem key={`${nodeId}.${fieldName}.expose-field`} icon={<PiPlusBold />} onClick={handleExposeField}>
           {t('nodes.addLinearView')}
         </MenuItem>
       );
     }
     if (mayExpose && isExposed) {
       menuItems.push(
-        <MenuItem
-          key={`${nodeId}.${fieldName}.unexpose-field`}
-          icon={<PiMinusBold />}
-          onClick={handleUnexposeField}
-        >
+        <MenuItem key={`${nodeId}.${fieldName}.unexpose-field`} icon={<PiMinusBold />} onClick={handleUnexposeField}>
           {t('nodes.removeLinearView')}
         </MenuItem>
       );
     }
     return menuItems;
-  }, [
-    fieldName,
-    handleExposeField,
-    handleUnexposeField,
-    isExposed,
-    mayExpose,
-    nodeId,
-    t,
-  ]);
+  }, [fieldName, handleExposeField, handleUnexposeField, isExposed, mayExpose, nodeId, t]);
 
   const renderMenuFunc = useCallback(
     () =>
       !menuItems.length ? null : (
         <MenuList visibility="visible">
-          <MenuGroup
-            title={label || fieldTemplateTitle || t('nodes.unknownField')}
-          >
-            {menuItems}
-          </MenuGroup>
+          <MenuGroup title={label || fieldTemplateTitle || t('nodes.unknownField')}>{menuItems}</MenuGroup>
         </MenuList>
       ),
     [fieldTemplateTitle, label, menuItems, t]
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldHandle.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldHandle.tsx
index 84aebce773..acff5895f3 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldHandle.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldHandle.tsx
@@ -2,14 +2,8 @@ import { Tooltip } from '@invoke-ai/ui-library';
 import { colorTokenToCssVar } from 'common/util/colorTokenToCssVar';
 import { getFieldColor } from 'features/nodes/components/flow/edges/util/getEdgeColor';
 import { useFieldTypeName } from 'features/nodes/hooks/usePrettyFieldType';
-import {
-  HANDLE_TOOLTIP_OPEN_DELAY,
-  MODEL_TYPES,
-} from 'features/nodes/types/constants';
-import type {
-  FieldInputTemplate,
-  FieldOutputTemplate,
-} from 'features/nodes/types/field';
+import { HANDLE_TOOLTIP_OPEN_DELAY, MODEL_TYPES } from 'features/nodes/types/constants';
+import type { FieldInputTemplate, FieldOutputTemplate } from 'features/nodes/types/field';
 import type { CSSProperties } from 'react';
 import { memo, useMemo } from 'react';
 import type { HandleType } from 'reactflow';
@@ -41,13 +35,7 @@ type FieldHandleProps = {
 };
 
 const FieldHandle = (props: FieldHandleProps) => {
-  const {
-    fieldTemplate,
-    handleType,
-    isConnectionInProgress,
-    isConnectionStartField,
-    connectionError,
-  } = props;
+  const { fieldTemplate, handleType, isConnectionInProgress, isConnectionStartField, connectionError } = props;
   const { name } = fieldTemplate;
   const type = fieldTemplate.type;
   const fieldTypeName = useFieldTypeName(type);
@@ -55,10 +43,7 @@ const FieldHandle = (props: FieldHandleProps) => {
     const isModelType = MODEL_TYPES.some((t) => t === type.name);
     const color = getFieldColor(type);
     const s: CSSProperties = {
-      backgroundColor:
-        type.isCollection || type.isCollectionOrScalar
-          ? colorTokenToCssVar('base.900')
-          : color,
+      backgroundColor: type.isCollection || type.isCollectionOrScalar ? colorTokenToCssVar('base.900') : color,
       position: 'absolute',
       width: '1rem',
       height: '1rem',
@@ -90,13 +75,7 @@ const FieldHandle = (props: FieldHandleProps) => {
     }
 
     return s;
-  }, [
-    connectionError,
-    handleType,
-    isConnectionInProgress,
-    isConnectionStartField,
-    type,
-  ]);
+  }, [connectionError, handleType, isConnectionInProgress, isConnectionStartField, type]);
 
   const tooltip = useMemo(() => {
     if (isConnectionInProgress && connectionError) {
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTitle.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTitle.tsx
index dd934478e6..0d01aaf0ca 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTitle.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTitle.tsx
@@ -26,9 +26,7 @@ const FieldTitle = forwardRef((props: Props, ref) => {
       h="full"
       w="full"
     >
-      <Text fontWeight={isMissingInput ? 'bold' : 'normal'}>
-        {label || fieldTemplateTitle}
-      </Text>
+      <Text fontWeight={isMissingInput ? 'bold' : 'normal'}>{label || fieldTemplateTitle}</Text>
     </Flex>
   );
 });
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTooltipContent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTooltipContent.tsx
index c87649cca0..ce5ab2f8bb 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTooltipContent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTooltipContent.tsx
@@ -2,10 +2,7 @@ import { Flex, Text } from '@invoke-ai/ui-library';
 import { useFieldInstance } from 'features/nodes/hooks/useFieldData';
 import { useFieldTemplate } from 'features/nodes/hooks/useFieldTemplate';
 import { useFieldTypeName } from 'features/nodes/hooks/usePrettyFieldType';
-import {
-  isFieldInputInstance,
-  isFieldInputTemplate,
-} from 'features/nodes/types/field';
+import { isFieldInputInstance, isFieldInputTemplate } from 'features/nodes/types/field';
 import { startCase } from 'lodash-es';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx
index d2513f27c1..b33b65dfb5 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx
@@ -23,13 +23,8 @@ const InputField = ({ nodeId, fieldName }: Props) => {
   const fieldInstance = useFieldInputInstance(nodeId, fieldName);
   const doesFieldHaveValue = useDoesInputHaveValue(nodeId, fieldName);
 
-  const {
-    isConnected,
-    isConnectionInProgress,
-    isConnectionStartField,
-    connectionError,
-    shouldDim,
-  } = useConnectionState({ nodeId, fieldName, kind: 'input' });
+  const { isConnected, isConnectionInProgress, isConnectionStartField, connectionError, shouldDim } =
+    useConnectionState({ nodeId, fieldName, kind: 'input' });
 
   const isMissingInput = useMemo(() => {
     if (!fieldTemplate) {
@@ -44,11 +39,7 @@ const InputField = ({ nodeId, fieldName }: Props) => {
       return true;
     }
 
-    if (
-      !doesFieldHaveValue &&
-      !isConnected &&
-      fieldTemplate.input !== 'connection'
-    ) {
+    if (!doesFieldHaveValue && !isConnected && fieldTemplate.input !== 'connection') {
       return true;
     }
 
@@ -58,22 +49,8 @@ const InputField = ({ nodeId, fieldName }: Props) => {
   if (!fieldTemplate || !fieldInstance) {
     return (
       <InputFieldWrapper shouldDim={shouldDim}>
-        <FormControl
-          alignItems="stretch"
-          justifyContent="space-between"
-          flexDir="column"
-          gap={2}
-          h="full"
-          w="full"
-        >
-          <FormLabel
-            display="flex"
-            alignItems="center"
-            mb={0}
-            px={1}
-            gap={2}
-            h="full"
-          >
+        <FormControl alignItems="stretch" justifyContent="space-between" flexDir="column" gap={2} h="full" w="full">
+          <FormLabel display="flex" alignItems="center" mb={0} px={1} gap={2} h="full">
             {t('nodes.unknownInput', {
               name: fieldInstance?.label ?? fieldTemplate?.title ?? fieldName,
             })}
@@ -109,12 +86,7 @@ const InputField = ({ nodeId, fieldName }: Props) => {
 
   return (
     <InputFieldWrapper shouldDim={shouldDim}>
-      <FormControl
-        isInvalid={isMissingInput}
-        isDisabled={isConnected}
-        orientation="vertical"
-        px={2}
-      >
+      <FormControl isInvalid={isMissingInput} isDisabled={isConnected} orientation="vertical" px={2}>
         <Flex flexDir="column" w="full" gap={1}>
           <FieldContextMenu nodeId={nodeId} fieldName={fieldName} kind="input">
             {(ref) => (
@@ -151,24 +123,22 @@ type InputFieldWrapperProps = PropsWithChildren<{
   shouldDim: boolean;
 }>;
 
-const InputFieldWrapper = memo(
-  ({ shouldDim, children }: InputFieldWrapperProps) => {
-    return (
-      <Flex
-        position="relative"
-        minH={8}
-        py={0.5}
-        alignItems="center"
-        opacity={shouldDim ? 0.5 : 1}
-        transitionProperty="opacity"
-        transitionDuration="0.1s"
-        w="full"
-        h="full"
-      >
-        {children}
-      </Flex>
-    );
-  }
-);
+const InputFieldWrapper = memo(({ shouldDim, children }: InputFieldWrapperProps) => {
+  return (
+    <Flex
+      position="relative"
+      minH={8}
+      py={0.5}
+      alignItems="center"
+      opacity={shouldDim ? 0.5 : 1}
+      transitionProperty="opacity"
+      transitionDuration="0.1s"
+      w="full"
+      h="full"
+    >
+      {children}
+    </Flex>
+  );
+});
 
 InputFieldWrapper.displayName = 'InputFieldWrapper';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx
index 9f3d9e2389..c1d52c1d4f 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx
@@ -75,213 +75,70 @@ const InputFieldRenderer = ({ nodeId, fieldName }: InputFieldProps) => {
     );
   }
 
-  if (
-    isStringFieldInputInstance(fieldInstance) &&
-    isStringFieldInputTemplate(fieldTemplate)
-  ) {
-    return (
-      <StringFieldInputComponent
-        nodeId={nodeId}
-        field={fieldInstance}
-        fieldTemplate={fieldTemplate}
-      />
-    );
+  if (isStringFieldInputInstance(fieldInstance) && isStringFieldInputTemplate(fieldTemplate)) {
+    return <StringFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  }
+
+  if (isBooleanFieldInputInstance(fieldInstance) && isBooleanFieldInputTemplate(fieldTemplate)) {
+    return <BooleanFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
   }
 
   if (
-    isBooleanFieldInputInstance(fieldInstance) &&
-    isBooleanFieldInputTemplate(fieldTemplate)
+    (isIntegerFieldInputInstance(fieldInstance) && isIntegerFieldInputTemplate(fieldTemplate)) ||
+    (isFloatFieldInputInstance(fieldInstance) && isFloatFieldInputTemplate(fieldTemplate))
   ) {
-    return (
-      <BooleanFieldInputComponent
-        nodeId={nodeId}
-        field={fieldInstance}
-        fieldTemplate={fieldTemplate}
-      />
-    );
+    return <NumberFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
   }
 
-  if (
-    (isIntegerFieldInputInstance(fieldInstance) &&
-      isIntegerFieldInputTemplate(fieldTemplate)) ||
-    (isFloatFieldInputInstance(fieldInstance) &&
-      isFloatFieldInputTemplate(fieldTemplate))
-  ) {
-    return (
-      <NumberFieldInputComponent
-        nodeId={nodeId}
-        field={fieldInstance}
-        fieldTemplate={fieldTemplate}
-      />
-    );
+  if (isEnumFieldInputInstance(fieldInstance) && isEnumFieldInputTemplate(fieldTemplate)) {
+    return <EnumFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
   }
 
-  if (
-    isEnumFieldInputInstance(fieldInstance) &&
-    isEnumFieldInputTemplate(fieldTemplate)
-  ) {
-    return (
-      <EnumFieldInputComponent
-        nodeId={nodeId}
-        field={fieldInstance}
-        fieldTemplate={fieldTemplate}
-      />
-    );
+  if (isImageFieldInputInstance(fieldInstance) && isImageFieldInputTemplate(fieldTemplate)) {
+    return <ImageFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
   }
 
-  if (
-    isImageFieldInputInstance(fieldInstance) &&
-    isImageFieldInputTemplate(fieldTemplate)
-  ) {
-    return (
-      <ImageFieldInputComponent
-        nodeId={nodeId}
-        field={fieldInstance}
-        fieldTemplate={fieldTemplate}
-      />
-    );
+  if (isBoardFieldInputInstance(fieldInstance) && isBoardFieldInputTemplate(fieldTemplate)) {
+    return <BoardFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
   }
 
-  if (
-    isBoardFieldInputInstance(fieldInstance) &&
-    isBoardFieldInputTemplate(fieldTemplate)
-  ) {
-    return (
-      <BoardFieldInputComponent
-        nodeId={nodeId}
-        field={fieldInstance}
-        fieldTemplate={fieldTemplate}
-      />
-    );
+  if (isMainModelFieldInputInstance(fieldInstance) && isMainModelFieldInputTemplate(fieldTemplate)) {
+    return <MainModelFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
   }
 
-  if (
-    isMainModelFieldInputInstance(fieldInstance) &&
-    isMainModelFieldInputTemplate(fieldTemplate)
-  ) {
-    return (
-      <MainModelFieldInputComponent
-        nodeId={nodeId}
-        field={fieldInstance}
-        fieldTemplate={fieldTemplate}
-      />
-    );
+  if (isSDXLRefinerModelFieldInputInstance(fieldInstance) && isSDXLRefinerModelFieldInputTemplate(fieldTemplate)) {
+    return <RefinerModelFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
   }
 
-  if (
-    isSDXLRefinerModelFieldInputInstance(fieldInstance) &&
-    isSDXLRefinerModelFieldInputTemplate(fieldTemplate)
-  ) {
-    return (
-      <RefinerModelFieldInputComponent
-        nodeId={nodeId}
-        field={fieldInstance}
-        fieldTemplate={fieldTemplate}
-      />
-    );
+  if (isVAEModelFieldInputInstance(fieldInstance) && isVAEModelFieldInputTemplate(fieldTemplate)) {
+    return <VAEModelFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
   }
 
-  if (
-    isVAEModelFieldInputInstance(fieldInstance) &&
-    isVAEModelFieldInputTemplate(fieldTemplate)
-  ) {
-    return (
-      <VAEModelFieldInputComponent
-        nodeId={nodeId}
-        field={fieldInstance}
-        fieldTemplate={fieldTemplate}
-      />
-    );
+  if (isLoRAModelFieldInputInstance(fieldInstance) && isLoRAModelFieldInputTemplate(fieldTemplate)) {
+    return <LoRAModelFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
   }
 
-  if (
-    isLoRAModelFieldInputInstance(fieldInstance) &&
-    isLoRAModelFieldInputTemplate(fieldTemplate)
-  ) {
-    return (
-      <LoRAModelFieldInputComponent
-        nodeId={nodeId}
-        field={fieldInstance}
-        fieldTemplate={fieldTemplate}
-      />
-    );
+  if (isControlNetModelFieldInputInstance(fieldInstance) && isControlNetModelFieldInputTemplate(fieldTemplate)) {
+    return <ControlNetModelFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
   }
 
-  if (
-    isControlNetModelFieldInputInstance(fieldInstance) &&
-    isControlNetModelFieldInputTemplate(fieldTemplate)
-  ) {
-    return (
-      <ControlNetModelFieldInputComponent
-        nodeId={nodeId}
-        field={fieldInstance}
-        fieldTemplate={fieldTemplate}
-      />
-    );
+  if (isIPAdapterModelFieldInputInstance(fieldInstance) && isIPAdapterModelFieldInputTemplate(fieldTemplate)) {
+    return <IPAdapterModelFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
   }
 
-  if (
-    isIPAdapterModelFieldInputInstance(fieldInstance) &&
-    isIPAdapterModelFieldInputTemplate(fieldTemplate)
-  ) {
-    return (
-      <IPAdapterModelFieldInputComponent
-        nodeId={nodeId}
-        field={fieldInstance}
-        fieldTemplate={fieldTemplate}
-      />
-    );
+  if (isT2IAdapterModelFieldInputInstance(fieldInstance) && isT2IAdapterModelFieldInputTemplate(fieldTemplate)) {
+    return <T2IAdapterModelFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  }
+  if (isColorFieldInputInstance(fieldInstance) && isColorFieldInputTemplate(fieldTemplate)) {
+    return <ColorFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
   }
 
-  if (
-    isT2IAdapterModelFieldInputInstance(fieldInstance) &&
-    isT2IAdapterModelFieldInputTemplate(fieldTemplate)
-  ) {
-    return (
-      <T2IAdapterModelFieldInputComponent
-        nodeId={nodeId}
-        field={fieldInstance}
-        fieldTemplate={fieldTemplate}
-      />
-    );
-  }
-  if (
-    isColorFieldInputInstance(fieldInstance) &&
-    isColorFieldInputTemplate(fieldTemplate)
-  ) {
-    return (
-      <ColorFieldInputComponent
-        nodeId={nodeId}
-        field={fieldInstance}
-        fieldTemplate={fieldTemplate}
-      />
-    );
+  if (isSDXLMainModelFieldInputInstance(fieldInstance) && isSDXLMainModelFieldInputTemplate(fieldTemplate)) {
+    return <SDXLMainModelFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
   }
 
-  if (
-    isSDXLMainModelFieldInputInstance(fieldInstance) &&
-    isSDXLMainModelFieldInputTemplate(fieldTemplate)
-  ) {
-    return (
-      <SDXLMainModelFieldInputComponent
-        nodeId={nodeId}
-        field={fieldInstance}
-        fieldTemplate={fieldTemplate}
-      />
-    );
-  }
-
-  if (
-    isSchedulerFieldInputInstance(fieldInstance) &&
-    isSchedulerFieldInputTemplate(fieldTemplate)
-  ) {
-    return (
-      <SchedulerFieldInputComponent
-        nodeId={nodeId}
-        field={fieldInstance}
-        fieldTemplate={fieldTemplate}
-      />
-    );
+  if (isSchedulerFieldInputInstance(fieldInstance) && isSchedulerFieldInputTemplate(fieldTemplate)) {
+    return <SchedulerFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
   }
 
   if (fieldInstance && fieldTemplate) {
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx
index 6afc9b2485..3ec4ab1b42 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx
@@ -19,8 +19,7 @@ type Props = {
 
 const LinearViewField = ({ nodeId, fieldName }: Props) => {
   const dispatch = useAppDispatch();
-  const { isMouseOverNode, handleMouseOut, handleMouseOver } =
-    useMouseOverNode(nodeId);
+  const { isMouseOverNode, handleMouseOut, handleMouseOver } = useMouseOverNode(nodeId);
   const { t } = useTranslation();
   const handleRemoveField = useCallback(() => {
     dispatch(workflowExposedFieldRemoved({ nodeId, fieldName }));
@@ -38,20 +37,10 @@ const LinearViewField = ({ nodeId, fieldName }: Props) => {
       flexDir="column"
     >
       <Flex>
-        <EditableFieldTitle
-          nodeId={nodeId}
-          fieldName={fieldName}
-          kind="input"
-        />
+        <EditableFieldTitle nodeId={nodeId} fieldName={fieldName} kind="input" />
         <Spacer />
         <Tooltip
-          label={
-            <FieldTooltipContent
-              nodeId={nodeId}
-              fieldName={fieldName}
-              kind="input"
-            />
-          }
+          label={<FieldTooltipContent nodeId={nodeId} fieldName={fieldName} kind="input" />}
           openDelay={HANDLE_TOOLTIP_OPEN_DELAY}
           placement="top"
         >
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputField.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputField.tsx
index 213d4eb891..48c4c0d740 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputField.tsx
@@ -20,33 +20,14 @@ const OutputField = ({ nodeId, fieldName }: Props) => {
   const fieldTemplate = useFieldOutputTemplate(nodeId, fieldName);
   const fieldInstance = useFieldOutputInstance(nodeId, fieldName);
 
-  const {
-    isConnected,
-    isConnectionInProgress,
-    isConnectionStartField,
-    connectionError,
-    shouldDim,
-  } = useConnectionState({ nodeId, fieldName, kind: 'output' });
+  const { isConnected, isConnectionInProgress, isConnectionStartField, connectionError, shouldDim } =
+    useConnectionState({ nodeId, fieldName, kind: 'output' });
 
   if (!fieldTemplate || !fieldInstance) {
     return (
       <OutputFieldWrapper shouldDim={shouldDim}>
-        <FormControl
-          alignItems="stretch"
-          justifyContent="space-between"
-          gap={2}
-          h="full"
-          w="full"
-        >
-          <FormLabel
-            display="flex"
-            alignItems="center"
-            h="full"
-            color="error.300"
-            mb={0}
-            px={1}
-            gap={2}
-          >
+        <FormControl alignItems="stretch" justifyContent="space-between" gap={2} h="full" w="full">
+          <FormLabel display="flex" alignItems="center" h="full" color="error.300" mb={0} px={1} gap={2}>
             {t('nodes.unknownOutput', {
               name: fieldTemplate?.title ?? fieldName,
             })}
@@ -59,13 +40,7 @@ const OutputField = ({ nodeId, fieldName }: Props) => {
   return (
     <OutputFieldWrapper shouldDim={shouldDim}>
       <Tooltip
-        label={
-          <FieldTooltipContent
-            nodeId={nodeId}
-            fieldName={fieldName}
-            kind="output"
-          />
-        }
+        label={<FieldTooltipContent nodeId={nodeId} fieldName={fieldName} kind="output" />}
         openDelay={HANDLE_TOOLTIP_OPEN_DELAY}
         placement="top"
         shouldWrapChildren
@@ -91,21 +66,19 @@ type OutputFieldWrapperProps = PropsWithChildren<{
   shouldDim: boolean;
 }>;
 
-const OutputFieldWrapper = memo(
-  ({ shouldDim, children }: OutputFieldWrapperProps) => (
-    <Flex
-      position="relative"
-      minH={8}
-      py={0.5}
-      alignItems="center"
-      opacity={shouldDim ? 0.5 : 1}
-      transitionProperty="opacity"
-      transitionDuration="0.1s"
-      justifyContent="flex-end"
-    >
-      {children}
-    </Flex>
-  )
-);
+const OutputFieldWrapper = memo(({ shouldDim, children }: OutputFieldWrapperProps) => (
+  <Flex
+    position="relative"
+    minH={8}
+    py={0.5}
+    alignItems="center"
+    opacity={shouldDim ? 0.5 : 1}
+    transitionProperty="opacity"
+    transitionDuration="0.1s"
+    justifyContent="flex-end"
+  >
+    {children}
+  </Flex>
+));
 
 OutputFieldWrapper.displayName = 'OutputFieldWrapper';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/BoardFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/BoardFieldInputComponent.tsx
index 136445177a..7d46ef8bea 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/BoardFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/BoardFieldInputComponent.tsx
@@ -2,19 +2,14 @@ import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
 import { Combobox, FormControl } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { fieldBoardValueChanged } from 'features/nodes/store/nodesSlice';
-import type {
-  BoardFieldInputInstance,
-  BoardFieldInputTemplate,
-} from 'features/nodes/types/field';
+import type { BoardFieldInputInstance, BoardFieldInputTemplate } from 'features/nodes/types/field';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useListAllBoardsQuery } from 'services/api/endpoints/boards';
 
 import type { FieldComponentProps } from './types';
 
-const BoardFieldInputComponent = (
-  props: FieldComponentProps<BoardFieldInputInstance, BoardFieldInputTemplate>
-) => {
+const BoardFieldInputComponent = (props: FieldComponentProps<BoardFieldInputInstance, BoardFieldInputTemplate>) => {
   const { nodeId, field } = props;
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
@@ -54,10 +49,7 @@ const BoardFieldInputComponent = (
     [dispatch, field.name, nodeId]
   );
 
-  const value = useMemo(
-    () => options.find((o) => o.value === field.value?.board_id),
-    [options, field.value]
-  );
+  const value = useMemo(() => options.find((o) => o.value === field.value?.board_id), [options, field.value]);
 
   const noOptionsMessage = useCallback(() => t('boards.noMatching'), [t]);
 
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/BooleanFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/BooleanFieldInputComponent.tsx
index fdd8ab7355..9d3f4cd13f 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/BooleanFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/BooleanFieldInputComponent.tsx
@@ -1,20 +1,14 @@
 import { Switch } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { fieldBooleanValueChanged } from 'features/nodes/store/nodesSlice';
-import type {
-  BooleanFieldInputInstance,
-  BooleanFieldInputTemplate,
-} from 'features/nodes/types/field';
+import type { BooleanFieldInputInstance, BooleanFieldInputTemplate } from 'features/nodes/types/field';
 import type { ChangeEvent } from 'react';
 import { memo, useCallback } from 'react';
 
 import type { FieldComponentProps } from './types';
 
 const BooleanFieldInputComponent = (
-  props: FieldComponentProps<
-    BooleanFieldInputInstance,
-    BooleanFieldInputTemplate
-  >
+  props: FieldComponentProps<BooleanFieldInputInstance, BooleanFieldInputTemplate>
 ) => {
   const { nodeId, field } = props;
 
@@ -33,13 +27,7 @@ const BooleanFieldInputComponent = (
     [dispatch, field.name, nodeId]
   );
 
-  return (
-    <Switch
-      className="nodrag"
-      onChange={handleValueChanged}
-      isChecked={field.value}
-    ></Switch>
-  );
+  return <Switch className="nodrag" onChange={handleValueChanged} isChecked={field.value}></Switch>;
 };
 
 export default memo(BooleanFieldInputComponent);
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ColorFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ColorFieldInputComponent.tsx
index 5bb54904f1..716c922939 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ColorFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ColorFieldInputComponent.tsx
@@ -1,18 +1,13 @@
 import { useAppDispatch } from 'app/store/storeHooks';
 import { fieldColorValueChanged } from 'features/nodes/store/nodesSlice';
-import type {
-  ColorFieldInputInstance,
-  ColorFieldInputTemplate,
-} from 'features/nodes/types/field';
+import type { ColorFieldInputInstance, ColorFieldInputTemplate } from 'features/nodes/types/field';
 import { memo, useCallback } from 'react';
 import type { RgbaColor } from 'react-colorful';
 import { RgbaColorPicker } from 'react-colorful';
 
 import type { FieldComponentProps } from './types';
 
-const ColorFieldInputComponent = (
-  props: FieldComponentProps<ColorFieldInputInstance, ColorFieldInputTemplate>
-) => {
+const ColorFieldInputComponent = (props: FieldComponentProps<ColorFieldInputInstance, ColorFieldInputTemplate>) => {
   const { nodeId, field } = props;
 
   const dispatch = useAppDispatch();
@@ -30,13 +25,7 @@ const ColorFieldInputComponent = (
     [dispatch, field.name, nodeId]
   );
 
-  return (
-    <RgbaColorPicker
-      className="nodrag"
-      color={field.value}
-      onChange={handleValueChanged}
-    />
-  );
+  return <RgbaColorPicker className="nodrag" color={field.value} onChange={handleValueChanged} />;
 };
 
 export default memo(ColorFieldInputComponent);
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ControlNetModelFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ControlNetModelFieldInputComponent.tsx
index 0ff6243e19..22024f3d3c 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ControlNetModelFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ControlNetModelFieldInputComponent.tsx
@@ -2,20 +2,14 @@ import { Combobox, FormControl, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { fieldControlNetModelValueChanged } from 'features/nodes/store/nodesSlice';
-import type {
-  ControlNetModelFieldInputInstance,
-  ControlNetModelFieldInputTemplate,
-} from 'features/nodes/types/field';
+import type { ControlNetModelFieldInputInstance, ControlNetModelFieldInputTemplate } from 'features/nodes/types/field';
 import { memo, useCallback } from 'react';
 import type { ControlNetModelConfigEntity } from 'services/api/endpoints/models';
 import { useGetControlNetModelsQuery } from 'services/api/endpoints/models';
 
 import type { FieldComponentProps } from './types';
 
-type Props = FieldComponentProps<
-  ControlNetModelFieldInputInstance,
-  ControlNetModelFieldInputTemplate
->;
+type Props = FieldComponentProps<ControlNetModelFieldInputInstance, ControlNetModelFieldInputTemplate>;
 
 const ControlNetModelFieldInputComponent = (props: Props) => {
   const { nodeId, field } = props;
@@ -38,15 +32,12 @@ const ControlNetModelFieldInputComponent = (props: Props) => {
     [dispatch, field.name, nodeId]
   );
 
-  const { options, value, onChange, placeholder, noOptionsMessage } =
-    useGroupedModelCombobox({
-      modelEntities: data,
-      onChange: _onChange,
-      selectedModel: field.value
-        ? { ...field.value, model_type: 'controlnet' }
-        : undefined,
-      isLoading,
-    });
+  const { options, value, onChange, placeholder, noOptionsMessage } = useGroupedModelCombobox({
+    modelEntities: data,
+    onChange: _onChange,
+    selectedModel: field.value ? { ...field.value, model_type: 'controlnet' } : undefined,
+    isLoading,
+  });
 
   return (
     <Tooltip label={value?.description}>
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/EnumFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/EnumFieldInputComponent.tsx
index 586def4367..0a632ee94e 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/EnumFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/EnumFieldInputComponent.tsx
@@ -1,18 +1,13 @@
 import { Select } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { fieldEnumModelValueChanged } from 'features/nodes/store/nodesSlice';
-import type {
-  EnumFieldInputInstance,
-  EnumFieldInputTemplate,
-} from 'features/nodes/types/field';
+import type { EnumFieldInputInstance, EnumFieldInputTemplate } from 'features/nodes/types/field';
 import type { ChangeEvent } from 'react';
 import { memo, useCallback } from 'react';
 
 import type { FieldComponentProps } from './types';
 
-const EnumFieldInputComponent = (
-  props: FieldComponentProps<EnumFieldInputInstance, EnumFieldInputTemplate>
-) => {
+const EnumFieldInputComponent = (props: FieldComponentProps<EnumFieldInputInstance, EnumFieldInputTemplate>) => {
   const { nodeId, field, fieldTemplate } = props;
 
   const dispatch = useAppDispatch();
@@ -31,16 +26,10 @@ const EnumFieldInputComponent = (
   );
 
   return (
-    <Select
-      className="nowheel nodrag"
-      onChange={handleValueChanged}
-      value={field.value}
-    >
+    <Select className="nowheel nodrag" onChange={handleValueChanged} value={field.value}>
       {fieldTemplate.options.map((option) => (
         <option key={option} value={option}>
-          {fieldTemplate.ui_choice_labels
-            ? fieldTemplate.ui_choice_labels[option]
-            : option}
+          {fieldTemplate.ui_choice_labels ? fieldTemplate.ui_choice_labels[option] : option}
         </option>
       ))}
     </Select>
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IPAdapterModelFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IPAdapterModelFieldInputComponent.tsx
index e77652eb31..2cde347247 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IPAdapterModelFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IPAdapterModelFieldInputComponent.tsx
@@ -2,10 +2,7 @@ import { Combobox, FormControl, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { fieldIPAdapterModelValueChanged } from 'features/nodes/store/nodesSlice';
-import type {
-  IPAdapterModelFieldInputInstance,
-  IPAdapterModelFieldInputTemplate,
-} from 'features/nodes/types/field';
+import type { IPAdapterModelFieldInputInstance, IPAdapterModelFieldInputTemplate } from 'features/nodes/types/field';
 import { memo, useCallback } from 'react';
 import type { IPAdapterModelConfigEntity } from 'services/api/endpoints/models';
 import { useGetIPAdapterModelsQuery } from 'services/api/endpoints/models';
@@ -13,10 +10,7 @@ import { useGetIPAdapterModelsQuery } from 'services/api/endpoints/models';
 import type { FieldComponentProps } from './types';
 
 const IPAdapterModelFieldInputComponent = (
-  props: FieldComponentProps<
-    IPAdapterModelFieldInputInstance,
-    IPAdapterModelFieldInputTemplate
-  >
+  props: FieldComponentProps<IPAdapterModelFieldInputInstance, IPAdapterModelFieldInputTemplate>
 ) => {
   const { nodeId, field } = props;
   const dispatch = useAppDispatch();
@@ -41,20 +35,13 @@ const IPAdapterModelFieldInputComponent = (
   const { options, value, onChange } = useGroupedModelCombobox({
     modelEntities: ipAdapterModels,
     onChange: _onChange,
-    selectedModel: field.value
-      ? { ...field.value, model_type: 'ip_adapter' }
-      : undefined,
+    selectedModel: field.value ? { ...field.value, model_type: 'ip_adapter' } : undefined,
   });
 
   return (
     <Tooltip label={value?.description}>
       <FormControl className="nowheel nodrag" isInvalid={!value}>
-        <Combobox
-          value={value}
-          placeholder="Pick one"
-          options={options}
-          onChange={onChange}
-        />
+        <Combobox value={value} placeholder="Pick one" options={options} onChange={onChange} />
       </FormControl>
     </Tooltip>
   );
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldInputComponent.tsx
index 04b8992910..c3224238c5 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldInputComponent.tsx
@@ -3,15 +3,9 @@ import { skipToken } from '@reduxjs/toolkit/query';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIDndImage from 'common/components/IAIDndImage';
 import IAIDndImageIcon from 'common/components/IAIDndImageIcon';
-import type {
-  TypesafeDraggableData,
-  TypesafeDroppableData,
-} from 'features/dnd/types';
+import type { TypesafeDraggableData, TypesafeDroppableData } from 'features/dnd/types';
 import { fieldImageValueChanged } from 'features/nodes/store/nodesSlice';
-import type {
-  ImageFieldInputInstance,
-  ImageFieldInputTemplate,
-} from 'features/nodes/types/field';
+import type { ImageFieldInputInstance, ImageFieldInputTemplate } from 'features/nodes/types/field';
 import { memo, useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiArrowCounterClockwiseBold } from 'react-icons/pi';
@@ -20,15 +14,11 @@ import type { PostUploadAction } from 'services/api/types';
 
 import type { FieldComponentProps } from './types';
 
-const ImageFieldInputComponent = (
-  props: FieldComponentProps<ImageFieldInputInstance, ImageFieldInputTemplate>
-) => {
+const ImageFieldInputComponent = (props: FieldComponentProps<ImageFieldInputInstance, ImageFieldInputTemplate>) => {
   const { nodeId, field } = props;
   const dispatch = useAppDispatch();
   const isConnected = useAppSelector((s) => s.system.isConnected);
-  const { currentData: imageDTO, isError } = useGetImageDTOQuery(
-    field.value?.image_name ?? skipToken
-  );
+  const { currentData: imageDTO, isError } = useGetImageDTOQuery(field.value?.image_name ?? skipToken);
 
   const handleReset = useCallback(() => {
     dispatch(
@@ -75,13 +65,7 @@ const ImageFieldInputComponent = (
   }, [handleReset, isConnected, isError]);
 
   return (
-    <Flex
-      className="nodrag"
-      w="full"
-      h="full"
-      alignItems="center"
-      justifyContent="center"
-    >
+    <Flex className="nodrag" w="full" h="full" alignItems="center" justifyContent="center">
       <IAIDndImage
         imageDTO={imageDTO}
         droppableData={droppableData}
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/LoRAModelFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/LoRAModelFieldInputComponent.tsx
index e964ea3b95..96208d68d4 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/LoRAModelFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/LoRAModelFieldInputComponent.tsx
@@ -2,20 +2,14 @@ import { Combobox, FormControl } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { fieldLoRAModelValueChanged } from 'features/nodes/store/nodesSlice';
-import type {
-  LoRAModelFieldInputInstance,
-  LoRAModelFieldInputTemplate,
-} from 'features/nodes/types/field';
+import type { LoRAModelFieldInputInstance, LoRAModelFieldInputTemplate } from 'features/nodes/types/field';
 import { memo, useCallback } from 'react';
 import type { LoRAModelConfigEntity } from 'services/api/endpoints/models';
 import { useGetLoRAModelsQuery } from 'services/api/endpoints/models';
 
 import type { FieldComponentProps } from './types';
 
-type Props = FieldComponentProps<
-  LoRAModelFieldInputInstance,
-  LoRAModelFieldInputTemplate
->;
+type Props = FieldComponentProps<LoRAModelFieldInputInstance, LoRAModelFieldInputTemplate>;
 
 const LoRAModelFieldInputComponent = (props: Props) => {
   const { nodeId, field } = props;
@@ -37,22 +31,15 @@ const LoRAModelFieldInputComponent = (props: Props) => {
     [dispatch, field.name, nodeId]
   );
 
-  const { options, value, onChange, placeholder, noOptionsMessage } =
-    useGroupedModelCombobox({
-      modelEntities: data,
-      onChange: _onChange,
-      selectedModel: field.value
-        ? { ...field.value, model_type: 'lora' }
-        : undefined,
-      isLoading,
-    });
+  const { options, value, onChange, placeholder, noOptionsMessage } = useGroupedModelCombobox({
+    modelEntities: data,
+    onChange: _onChange,
+    selectedModel: field.value ? { ...field.value, model_type: 'lora' } : undefined,
+    isLoading,
+  });
 
   return (
-    <FormControl
-      className="nowheel nodrag"
-      isInvalid={!value}
-      isDisabled={!options.length}
-    >
+    <FormControl className="nowheel nodrag" isInvalid={!value} isDisabled={!options.length}>
       <Combobox
         value={value}
         placeholder={placeholder}
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/MainModelFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/MainModelFieldInputComponent.tsx
index 2f3605139f..64c6970cae 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/MainModelFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/MainModelFieldInputComponent.tsx
@@ -3,10 +3,7 @@ import { useAppDispatch } from 'app/store/storeHooks';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { SyncModelsIconButton } from 'features/modelManager/components/SyncModels/SyncModelsIconButton';
 import { fieldMainModelValueChanged } from 'features/nodes/store/nodesSlice';
-import type {
-  MainModelFieldInputInstance,
-  MainModelFieldInputTemplate,
-} from 'features/nodes/types/field';
+import type { MainModelFieldInputInstance, MainModelFieldInputTemplate } from 'features/nodes/types/field';
 import { memo, useCallback } from 'react';
 import { NON_SDXL_MAIN_MODELS } from 'services/api/constants';
 import type { MainModelConfigEntity } from 'services/api/endpoints/models';
@@ -14,10 +11,7 @@ import { useGetMainModelsQuery } from 'services/api/endpoints/models';
 
 import type { FieldComponentProps } from './types';
 
-type Props = FieldComponentProps<
-  MainModelFieldInputInstance,
-  MainModelFieldInputTemplate
->;
+type Props = FieldComponentProps<MainModelFieldInputInstance, MainModelFieldInputTemplate>;
 
 const MainModelFieldInputComponent = (props: Props) => {
   const { nodeId, field } = props;
@@ -38,21 +32,16 @@ const MainModelFieldInputComponent = (props: Props) => {
     },
     [dispatch, field.name, nodeId]
   );
-  const { options, value, onChange, placeholder, noOptionsMessage } =
-    useGroupedModelCombobox({
-      modelEntities: data,
-      onChange: _onChange,
-      isLoading,
-      selectedModel: field.value,
-    });
+  const { options, value, onChange, placeholder, noOptionsMessage } = useGroupedModelCombobox({
+    modelEntities: data,
+    onChange: _onChange,
+    isLoading,
+    selectedModel: field.value,
+  });
 
   return (
     <Flex w="full" alignItems="center" gap={2}>
-      <FormControl
-        className="nowheel nodrag"
-        isDisabled={!options.length}
-        isInvalid={!value}
-      >
+      <FormControl className="nowheel nodrag" isDisabled={!options.length} isInvalid={!value}>
         <Combobox
           value={value}
           placeholder={placeholder}
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldInputComponent.tsx
index e9e84e526b..0cb250bb22 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldInputComponent.tsx
@@ -21,10 +21,7 @@ const NumberFieldInputComponent = (
 ) => {
   const { nodeId, field, fieldTemplate } = props;
   const dispatch = useAppDispatch();
-  const isIntegerField = useMemo(
-    () => fieldTemplate.type.name === 'IntegerField',
-    [fieldTemplate.type]
-  );
+  const isIntegerField = useMemo(() => fieldTemplate.type.name === 'IntegerField', [fieldTemplate.type]);
 
   const handleValueChanged = useCallback(
     (v: number) => {
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/RefinerModelFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/RefinerModelFieldInputComponent.tsx
index d4ea0b5585..98901af38b 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/RefinerModelFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/RefinerModelFieldInputComponent.tsx
@@ -14,10 +14,7 @@ import { useGetMainModelsQuery } from 'services/api/endpoints/models';
 
 import type { FieldComponentProps } from './types';
 
-type Props = FieldComponentProps<
-  SDXLRefinerModelFieldInputInstance,
-  SDXLRefinerModelFieldInputTemplate
->;
+type Props = FieldComponentProps<SDXLRefinerModelFieldInputInstance, SDXLRefinerModelFieldInputTemplate>;
 
 const RefinerModelFieldInputComponent = (props: Props) => {
   const { nodeId, field } = props;
@@ -38,21 +35,16 @@ const RefinerModelFieldInputComponent = (props: Props) => {
     },
     [dispatch, field.name, nodeId]
   );
-  const { options, value, onChange, placeholder, noOptionsMessage } =
-    useGroupedModelCombobox({
-      modelEntities: data,
-      onChange: _onChange,
-      isLoading,
-      selectedModel: field.value,
-    });
+  const { options, value, onChange, placeholder, noOptionsMessage } = useGroupedModelCombobox({
+    modelEntities: data,
+    onChange: _onChange,
+    isLoading,
+    selectedModel: field.value,
+  });
 
   return (
     <Flex w="full" alignItems="center" gap={2}>
-      <FormControl
-        className="nowheel nodrag"
-        isDisabled={!options.length}
-        isInvalid={!value}
-      >
+      <FormControl className="nowheel nodrag" isDisabled={!options.length} isInvalid={!value}>
         <Combobox
           value={value}
           placeholder={placeholder}
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SDXLMainModelFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SDXLMainModelFieldInputComponent.tsx
index d46c43bbbe..f5bc7ac3e4 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SDXLMainModelFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SDXLMainModelFieldInputComponent.tsx
@@ -3,10 +3,7 @@ import { useAppDispatch } from 'app/store/storeHooks';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { SyncModelsIconButton } from 'features/modelManager/components/SyncModels/SyncModelsIconButton';
 import { fieldMainModelValueChanged } from 'features/nodes/store/nodesSlice';
-import type {
-  SDXLMainModelFieldInputInstance,
-  SDXLMainModelFieldInputTemplate,
-} from 'features/nodes/types/field';
+import type { SDXLMainModelFieldInputInstance, SDXLMainModelFieldInputTemplate } from 'features/nodes/types/field';
 import { memo, useCallback } from 'react';
 import { SDXL_MAIN_MODELS } from 'services/api/constants';
 import type { MainModelConfigEntity } from 'services/api/endpoints/models';
@@ -14,10 +11,7 @@ import { useGetMainModelsQuery } from 'services/api/endpoints/models';
 
 import type { FieldComponentProps } from './types';
 
-type Props = FieldComponentProps<
-  SDXLMainModelFieldInputInstance,
-  SDXLMainModelFieldInputTemplate
->;
+type Props = FieldComponentProps<SDXLMainModelFieldInputInstance, SDXLMainModelFieldInputTemplate>;
 
 const SDXLMainModelFieldInputComponent = (props: Props) => {
   const { nodeId, field } = props;
@@ -38,21 +32,16 @@ const SDXLMainModelFieldInputComponent = (props: Props) => {
     },
     [dispatch, field.name, nodeId]
   );
-  const { options, value, onChange, placeholder, noOptionsMessage } =
-    useGroupedModelCombobox({
-      modelEntities: data,
-      onChange: _onChange,
-      isLoading,
-      selectedModel: field.value,
-    });
+  const { options, value, onChange, placeholder, noOptionsMessage } = useGroupedModelCombobox({
+    modelEntities: data,
+    onChange: _onChange,
+    isLoading,
+    selectedModel: field.value,
+  });
 
   return (
     <Flex w="full" alignItems="center" gap={2}>
-      <FormControl
-        className="nowheel nodrag"
-        isDisabled={!options.length}
-        isInvalid={!value}
-      >
+      <FormControl className="nowheel nodrag" isDisabled={!options.length} isInvalid={!value}>
         <Combobox
           value={value}
           placeholder={placeholder}
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SchedulerFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SchedulerFieldInputComponent.tsx
index 5a06e780d7..3e04dc5f14 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SchedulerFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SchedulerFieldInputComponent.tsx
@@ -2,20 +2,14 @@ import type { ComboboxOnChange } from '@invoke-ai/ui-library';
 import { Combobox, FormControl } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { fieldSchedulerValueChanged } from 'features/nodes/store/nodesSlice';
-import type {
-  SchedulerFieldInputInstance,
-  SchedulerFieldInputTemplate,
-} from 'features/nodes/types/field';
+import type { SchedulerFieldInputInstance, SchedulerFieldInputTemplate } from 'features/nodes/types/field';
 import { SCHEDULER_OPTIONS } from 'features/parameters/types/constants';
 import { isParameterScheduler } from 'features/parameters/types/parameterSchemas';
 import { memo, useCallback, useMemo } from 'react';
 
 import type { FieldComponentProps } from './types';
 
-type Props = FieldComponentProps<
-  SchedulerFieldInputInstance,
-  SchedulerFieldInputTemplate
->;
+type Props = FieldComponentProps<SchedulerFieldInputInstance, SchedulerFieldInputTemplate>;
 
 const SchedulerFieldInputComponent = (props: Props) => {
   const { nodeId, field } = props;
@@ -37,10 +31,7 @@ const SchedulerFieldInputComponent = (props: Props) => {
     [dispatch, field.name, nodeId]
   );
 
-  const value = useMemo(
-    () => SCHEDULER_OPTIONS.find((o) => o.value === field?.value),
-    [field?.value]
-  );
+  const value = useMemo(() => SCHEDULER_OPTIONS.find((o) => o.value === field?.value), [field?.value]);
 
   return (
     <FormControl className="nowheel nodrag">
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldInputComponent.tsx
index adcc814093..d7307f3384 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldInputComponent.tsx
@@ -1,18 +1,13 @@
 import { Input, Textarea } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { fieldStringValueChanged } from 'features/nodes/store/nodesSlice';
-import type {
-  StringFieldInputInstance,
-  StringFieldInputTemplate,
-} from 'features/nodes/types/field';
+import type { StringFieldInputInstance, StringFieldInputTemplate } from 'features/nodes/types/field';
 import type { ChangeEvent } from 'react';
 import { memo, useCallback } from 'react';
 
 import type { FieldComponentProps } from './types';
 
-const StringFieldInputComponent = (
-  props: FieldComponentProps<StringFieldInputInstance, StringFieldInputTemplate>
-) => {
+const StringFieldInputComponent = (props: FieldComponentProps<StringFieldInputInstance, StringFieldInputTemplate>) => {
   const { nodeId, field, fieldTemplate } = props;
   const dispatch = useAppDispatch();
 
@@ -30,24 +25,10 @@ const StringFieldInputComponent = (
   );
 
   if (fieldTemplate.ui_component === 'textarea') {
-    return (
-      <Textarea
-        className="nodrag"
-        onChange={handleValueChanged}
-        value={field.value}
-        rows={5}
-        resize="none"
-      />
-    );
+    return <Textarea className="nodrag" onChange={handleValueChanged} value={field.value} rows={5} resize="none" />;
   }
 
-  return (
-    <Input
-      className="nodrag"
-      onChange={handleValueChanged}
-      value={field.value}
-    />
-  );
+  return <Input className="nodrag" onChange={handleValueChanged} value={field.value} />;
 };
 
 export default memo(StringFieldInputComponent);
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/T2IAdapterModelFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/T2IAdapterModelFieldInputComponent.tsx
index b013f18d8d..9baf0d2d61 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/T2IAdapterModelFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/T2IAdapterModelFieldInputComponent.tsx
@@ -2,10 +2,7 @@ import { Combobox, FormControl, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { fieldT2IAdapterModelValueChanged } from 'features/nodes/store/nodesSlice';
-import type {
-  T2IAdapterModelFieldInputInstance,
-  T2IAdapterModelFieldInputTemplate,
-} from 'features/nodes/types/field';
+import type { T2IAdapterModelFieldInputInstance, T2IAdapterModelFieldInputTemplate } from 'features/nodes/types/field';
 import { memo, useCallback } from 'react';
 import type { T2IAdapterModelConfigEntity } from 'services/api/endpoints/models';
 import { useGetT2IAdapterModelsQuery } from 'services/api/endpoints/models';
@@ -13,10 +10,7 @@ import { useGetT2IAdapterModelsQuery } from 'services/api/endpoints/models';
 import type { FieldComponentProps } from './types';
 
 const T2IAdapterModelFieldInputComponent = (
-  props: FieldComponentProps<
-    T2IAdapterModelFieldInputInstance,
-    T2IAdapterModelFieldInputTemplate
-  >
+  props: FieldComponentProps<T2IAdapterModelFieldInputInstance, T2IAdapterModelFieldInputTemplate>
 ) => {
   const { nodeId, field } = props;
   const dispatch = useAppDispatch();
@@ -42,20 +36,13 @@ const T2IAdapterModelFieldInputComponent = (
   const { options, value, onChange } = useGroupedModelCombobox({
     modelEntities: t2iAdapterModels,
     onChange: _onChange,
-    selectedModel: field.value
-      ? { ...field.value, model_type: 't2i_adapter' }
-      : undefined,
+    selectedModel: field.value ? { ...field.value, model_type: 't2i_adapter' } : undefined,
   });
 
   return (
     <Tooltip label={value?.description}>
       <FormControl className="nowheel nodrag" isInvalid={!value}>
-        <Combobox
-          value={value}
-          placeholder="Pick one"
-          options={options}
-          onChange={onChange}
-        />
+        <Combobox value={value} placeholder="Pick one" options={options} onChange={onChange} />
       </FormControl>
     </Tooltip>
   );
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/VAEModelFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/VAEModelFieldInputComponent.tsx
index 4be215c4c1..070178f32a 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/VAEModelFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/VAEModelFieldInputComponent.tsx
@@ -3,20 +3,14 @@ import { useAppDispatch } from 'app/store/storeHooks';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { SyncModelsIconButton } from 'features/modelManager/components/SyncModels/SyncModelsIconButton';
 import { fieldVaeModelValueChanged } from 'features/nodes/store/nodesSlice';
-import type {
-  VAEModelFieldInputInstance,
-  VAEModelFieldInputTemplate,
-} from 'features/nodes/types/field';
+import type { VAEModelFieldInputInstance, VAEModelFieldInputTemplate } from 'features/nodes/types/field';
 import { memo, useCallback } from 'react';
 import type { VaeModelConfigEntity } from 'services/api/endpoints/models';
 import { useGetVaeModelsQuery } from 'services/api/endpoints/models';
 
 import type { FieldComponentProps } from './types';
 
-type Props = FieldComponentProps<
-  VAEModelFieldInputInstance,
-  VAEModelFieldInputTemplate
->;
+type Props = FieldComponentProps<VAEModelFieldInputInstance, VAEModelFieldInputTemplate>;
 
 const VAEModelFieldInputComponent = (props: Props) => {
   const { nodeId, field } = props;
@@ -37,21 +31,16 @@ const VAEModelFieldInputComponent = (props: Props) => {
     },
     [dispatch, field.name, nodeId]
   );
-  const { options, value, onChange, placeholder, noOptionsMessage } =
-    useGroupedModelCombobox({
-      modelEntities: data,
-      onChange: _onChange,
-      selectedModel: field.value ? { ...field.value, model_type: 'vae' } : null,
-      isLoading,
-    });
+  const { options, value, onChange, placeholder, noOptionsMessage } = useGroupedModelCombobox({
+    modelEntities: data,
+    onChange: _onChange,
+    selectedModel: field.value ? { ...field.value, model_type: 'vae' } : null,
+    isLoading,
+  });
 
   return (
     <Flex w="full" alignItems="center" gap={2}>
-      <FormControl
-        className="nowheel nodrag"
-        isDisabled={!options.length}
-        isInvalid={!value}
-      >
+      <FormControl className="nowheel nodrag" isDisabled={!options.length} isInvalid={!value}>
         <Combobox
           value={value}
           placeholder={placeholder}
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/types.ts b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/types.ts
index d3edfae04c..fea6396075 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/types.ts
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/types.ts
@@ -1,12 +1,6 @@
-import type {
-  FieldInputInstance,
-  FieldInputTemplate,
-} from 'features/nodes/types/field';
+import type { FieldInputInstance, FieldInputTemplate } from 'features/nodes/types/field';
 
-export type FieldComponentProps<
-  V extends FieldInputInstance,
-  T extends FieldInputTemplate,
-> = {
+export type FieldComponentProps<V extends FieldInputInstance, T extends FieldInputTemplate> = {
   nodeId: string;
   field: V;
   fieldTemplate: T;
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx
index 896e8482d3..966809cb0e 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx
@@ -48,13 +48,7 @@ const NotesNode = (props: NodeProps<NotesNodeData>) => {
             gap={1}
           >
             <Flex className="nopan" w="full" h="full" flexDir="column">
-              <Textarea
-                value={notes}
-                onChange={handleChange}
-                rows={8}
-                resize="none"
-                fontSize="sm"
-              />
+              <Textarea value={notes} onChange={handleChange} rows={8} resize="none" fontSize="sm" />
             </Flex>
           </Flex>
         </>
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeTitle.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeTitle.tsx
index 39c3731bb9..0252249c0c 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeTitle.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeTitle.tsx
@@ -1,12 +1,5 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
-import {
-  Box,
-  Editable,
-  EditableInput,
-  EditablePreview,
-  Flex,
-  useEditableControls,
-} from '@invoke-ai/ui-library';
+import { Box, Editable, EditableInput, EditablePreview, Flex, useEditableControls } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useNodeLabel } from 'features/nodes/hooks/useNodeLabel';
 import { useNodeTemplateTitle } from 'features/nodes/hooks/useNodeTemplateTitle';
@@ -31,9 +24,7 @@ const NodeTitle = ({ nodeId, title }: Props) => {
   const handleSubmit = useCallback(
     async (newTitle: string) => {
       dispatch(nodeLabelChanged({ nodeId, label: newTitle }));
-      setLocalTitle(
-        label || title || templateTitle || t('nodes.problemSettingTitle')
-      );
+      setLocalTitle(label || title || templateTitle || t('nodes.problemSettingTitle'));
     },
     [dispatch, nodeId, title, templateTitle, label, t]
   );
@@ -44,20 +35,11 @@ const NodeTitle = ({ nodeId, title }: Props) => {
 
   useEffect(() => {
     // Another component may change the title; sync local title with global state
-    setLocalTitle(
-      label || title || templateTitle || t('nodes.problemSettingTitle')
-    );
+    setLocalTitle(label || title || templateTitle || t('nodes.problemSettingTitle'));
   }, [label, templateTitle, title, t]);
 
   return (
-    <Flex
-      overflow="hidden"
-      w="full"
-      h="full"
-      alignItems="center"
-      justifyContent="center"
-      cursor="text"
-    >
+    <Flex overflow="hidden" w="full" h="full" alignItems="center" justifyContent="center" cursor="text">
       <Editable
         as={Flex}
         value={localTitle}
@@ -69,11 +51,7 @@ const NodeTitle = ({ nodeId, title }: Props) => {
         h="full"
       >
         <EditablePreview fontSize="sm" p={0} w="full" noOfLines={1} />
-        <EditableInput
-          className="nodrag"
-          fontSize="sm"
-          sx={editableInputStyles}
-        />
+        <EditableInput className="nodrag" fontSize="sm" sx={editableInputStyles} />
         <EditableControls />
       </Editable>
     </Flex>
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx
index 6cd0263b1c..3811514ad4 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx
@@ -4,14 +4,8 @@ import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import NodeSelectionOverlay from 'common/components/NodeSelectionOverlay';
 import { useMouseOverNode } from 'features/nodes/hooks/useMouseOverNode';
-import {
-  nodeExclusivelySelected,
-  selectNodesSlice,
-} from 'features/nodes/store/nodesSlice';
-import {
-  DRAG_HANDLE_CLASSNAME,
-  NODE_WIDTH,
-} from 'features/nodes/types/constants';
+import { nodeExclusivelySelected, selectNodesSlice } from 'features/nodes/store/nodesSlice';
+import { DRAG_HANDLE_CLASSNAME, NODE_WIDTH } from 'features/nodes/types/constants';
 import { zNodeStatus } from 'features/nodes/types/invocation';
 import type { MouseEvent, PropsWithChildren } from 'react';
 import { memo, useCallback, useMemo } from 'react';
@@ -24,16 +18,13 @@ type NodeWrapperProps = PropsWithChildren & {
 
 const NodeWrapper = (props: NodeWrapperProps) => {
   const { nodeId, width, children, selected } = props;
-  const { isMouseOverNode, handleMouseOut, handleMouseOver } =
-    useMouseOverNode(nodeId);
+  const { isMouseOverNode, handleMouseOut, handleMouseOver } = useMouseOverNode(nodeId);
 
   const selectIsInProgress = useMemo(
     () =>
       createSelector(
         selectNodesSlice,
-        (nodes) =>
-          nodes.nodeExecutionStates[nodeId]?.status ===
-          zNodeStatus.enum.IN_PROGRESS
+        (nodes) => nodes.nodeExecutionStates[nodeId]?.status === zNodeStatus.enum.IN_PROGRESS
       ),
     [nodeId]
   );
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/ViewportControls.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/ViewportControls.tsx
index 8d0db533e9..b2251480d7 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/ViewportControls.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/ViewportControls.tsx
@@ -21,9 +21,7 @@ const ViewportControls = () => {
   // const shouldShowFieldTypeLegend = useAppSelector(
   //   (s) => s.nodes.shouldShowFieldTypeLegend
   // );
-  const shouldShowMinimapPanel = useAppSelector(
-    (s) => s.nodes.shouldShowMinimapPanel
-  );
+  const shouldShowMinimapPanel = useAppSelector((s) => s.nodes.shouldShowMinimapPanel);
 
   const handleClickedZoomIn = useCallback(() => {
     zoomIn();
@@ -80,16 +78,8 @@ const ViewportControls = () => {
         />
       </Tooltip> */}
       <IconButton
-        tooltip={
-          shouldShowMinimapPanel
-            ? t('nodes.hideMinimapnodes')
-            : t('nodes.showMinimapnodes')
-        }
-        aria-label={
-          shouldShowMinimapPanel
-            ? t('nodes.hideMinimapnodes')
-            : t('nodes.showMinimapnodes')
-        }
+        tooltip={shouldShowMinimapPanel ? t('nodes.hideMinimapnodes') : t('nodes.showMinimapnodes')}
+        aria-label={shouldShowMinimapPanel ? t('nodes.hideMinimapnodes') : t('nodes.showMinimapnodes')}
         isChecked={shouldShowMinimapPanel}
         onClick={handleClickedToggleMiniMapPanel}
         icon={<PiMapPinBold />}
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx
index b01860353b..8c8d803cdb 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx
@@ -16,9 +16,7 @@ const minimapStyles: SystemStyleObject = {
 };
 
 const MinimapPanel = () => {
-  const shouldShowMinimapPanel = useAppSelector(
-    (s) => s.nodes.shouldShowMinimapPanel
-  );
+  const shouldShowMinimapPanel = useAppSelector((s) => s.nodes.shouldShowMinimapPanel);
 
   return (
     <Flex gap={2} position="absolute" bottom={2} insetInlineEnd={2}>
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/TopPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/TopPanel.tsx
index 8cdb4ae2ca..442b0d33b8 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/TopPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/TopPanel.tsx
@@ -8,19 +8,10 @@ import WorkflowLibraryMenu from 'features/workflowLibrary/components/WorkflowLib
 import { memo } from 'react';
 
 const TopCenterPanel = () => {
-  const isWorkflowLibraryEnabled =
-    useFeatureStatus('workflowLibrary').isFeatureEnabled;
+  const isWorkflowLibraryEnabled = useFeatureStatus('workflowLibrary').isFeatureEnabled;
 
   return (
-    <Flex
-      gap={2}
-      top={2}
-      left={2}
-      right={2}
-      position="absolute"
-      alignItems="center"
-      pointerEvents="none"
-    >
+    <Flex gap={2} top={2} left={2} right={2} position="absolute" alignItems="center" pointerEvents="none">
       <AddNodeButton />
       <UpdateNodesButton />
       <Spacer />
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/UpdateNodesButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/UpdateNodesButton.tsx
index 63b0dbe9fb..300eb19396 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/UpdateNodesButton.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/UpdateNodesButton.tsx
@@ -19,11 +19,7 @@ const UpdateNodesButton = () => {
   }
 
   return (
-    <Button
-      leftIcon={<PiWarningBold />}
-      onClick={handleClickUpdateNodes}
-      pointerEvents="auto"
-    >
+    <Button leftIcon={<PiWarningBold />} onClick={handleClickUpdateNodes} pointerEvents="auto">
       {t('nodes.updateAllNodes')}
     </Button>
   );
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/WorkflowName.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/WorkflowName.tsx
index 942e526adc..5573e89270 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/WorkflowName.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/WorkflowName.tsx
@@ -8,8 +8,7 @@ const TopCenterPanel = () => {
   const { t } = useTranslation();
   const name = useAppSelector((s) => s.workflow.name);
   const isTouched = useAppSelector((s) => s.workflow.isTouched);
-  const isWorkflowLibraryEnabled =
-    useFeatureStatus('workflowLibrary').isFeatureEnabled;
+  const isWorkflowLibraryEnabled = useFeatureStatus('workflowLibrary').isFeatureEnabled;
 
   const displayName = useMemo(() => {
     let _displayName = name || t('workflows.unnamedWorkflow');
@@ -20,15 +19,7 @@ const TopCenterPanel = () => {
   }, [t, name, isTouched, isWorkflowLibraryEnabled]);
 
   return (
-    <Text
-      m={2}
-      fontSize="lg"
-      userSelect="none"
-      noOfLines={1}
-      wordBreak="break-all"
-      fontWeight="semibold"
-      opacity={0.8}
-    >
+    <Text m={2} fontSize="lg" userSelect="none" noOfLines={1} wordBreak="break-all" fontWeight="semibold" opacity={0.8}>
       {displayName}
     </Text>
   );
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/TopRightPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/TopRightPanel.tsx
index f8e6d390aa..f3c903bf4a 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/TopRightPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/TopRightPanel.tsx
@@ -5,8 +5,7 @@ import WorkflowLibraryMenu from 'features/workflowLibrary/components/WorkflowLib
 import { memo } from 'react';
 
 const TopRightPanel = () => {
-  const isWorkflowLibraryEnabled =
-    useFeatureStatus('workflowLibrary').isFeatureEnabled;
+  const isWorkflowLibraryEnabled = useFeatureStatus('workflowLibrary').isFeatureEnabled;
 
   return (
     <Flex gap={2} position="absolute" top={2} insetInlineEnd={2}>
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx
index 8861c46225..152594f42a 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx
@@ -31,13 +31,7 @@ import { useTranslation } from 'react-i18next';
 import { SelectionMode } from 'reactflow';
 
 const selector = createMemoizedSelector(selectNodesSlice, (nodes) => {
-  const {
-    shouldAnimateEdges,
-    shouldValidateGraph,
-    shouldSnapToGrid,
-    shouldColorEdges,
-    selectionMode,
-  } = nodes;
+  const { shouldAnimateEdges, shouldValidateGraph, shouldSnapToGrid, shouldColorEdges, selectionMode } = nodes;
   return {
     shouldAnimateEdges,
     shouldValidateGraph,
@@ -54,13 +48,8 @@ type Props = {
 const WorkflowEditorSettings = ({ children }: Props) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const dispatch = useAppDispatch();
-  const {
-    shouldAnimateEdges,
-    shouldValidateGraph,
-    shouldSnapToGrid,
-    shouldColorEdges,
-    selectionModeIsChecked,
-  } = useAppSelector(selector);
+  const { shouldAnimateEdges, shouldValidateGraph, shouldSnapToGrid, shouldColorEdges, selectionModeIsChecked } =
+    useAppSelector(selector);
 
   const handleChangeShouldValidate = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
@@ -113,53 +102,34 @@ const WorkflowEditorSettings = ({ children }: Props) => {
               <Heading size="sm">{t('parameters.general')}</Heading>
               <FormControl>
                 <FormLabel>{t('nodes.animatedEdges')}</FormLabel>
-                <Switch
-                  onChange={handleChangeShouldAnimate}
-                  isChecked={shouldAnimateEdges}
-                />
+                <Switch onChange={handleChangeShouldAnimate} isChecked={shouldAnimateEdges} />
                 <FormHelperText>{t('nodes.animatedEdgesHelp')}</FormHelperText>
               </FormControl>
               <Divider />
               <FormControl>
                 <FormLabel>{t('nodes.snapToGrid')}</FormLabel>
-                <Switch
-                  isChecked={shouldSnapToGrid}
-                  onChange={handleChangeShouldSnap}
-                />
+                <Switch isChecked={shouldSnapToGrid} onChange={handleChangeShouldSnap} />
                 <FormHelperText>{t('nodes.snapToGridHelp')}</FormHelperText>
               </FormControl>
               <Divider />
               <FormControl>
                 <FormLabel>{t('nodes.colorCodeEdges')}</FormLabel>
-                <Switch
-                  isChecked={shouldColorEdges}
-                  onChange={handleChangeShouldColor}
-                />
+                <Switch isChecked={shouldColorEdges} onChange={handleChangeShouldColor} />
                 <FormHelperText>{t('nodes.colorCodeEdgesHelp')}</FormHelperText>
               </FormControl>
               <Divider />
               <FormControl>
                 <FormLabel>{t('nodes.fullyContainNodes')}</FormLabel>
-                <Switch
-                  isChecked={selectionModeIsChecked}
-                  onChange={handleChangeSelectionMode}
-                />
-                <FormHelperText>
-                  {t('nodes.fullyContainNodesHelp')}
-                </FormHelperText>
+                <Switch isChecked={selectionModeIsChecked} onChange={handleChangeSelectionMode} />
+                <FormHelperText>{t('nodes.fullyContainNodesHelp')}</FormHelperText>
               </FormControl>
               <Heading size="sm" pt={4}>
                 {t('common.advanced')}
               </Heading>
               <FormControl>
                 <FormLabel>{t('nodes.validateConnections')}</FormLabel>
-                <Switch
-                  isChecked={shouldValidateGraph}
-                  onChange={handleChangeShouldValidate}
-                />
-                <FormHelperText>
-                  {t('nodes.validateConnectionsHelp')}
-                </FormHelperText>
+                <Switch isChecked={shouldValidateGraph} onChange={handleChangeShouldValidate} />
+                <FormHelperText>{t('nodes.validateConnectionsHelp')}</FormHelperText>
               </FormControl>
               <ReloadNodeTemplatesButton />
             </Flex>
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx
index 0edd27d011..c145003c95 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx
@@ -38,10 +38,7 @@ const NodeEditorPanelGroup = () => {
         <Panel id="workflow" collapsible minSize={25}>
           <WorkflowPanel />
         </Panel>
-        <ResizeHandle
-          orientation="horizontal"
-          onDoubleClick={handleDoubleClickHandle}
-        />
+        <ResizeHandle orientation="horizontal" onDoubleClick={handleDoubleClickHandle} />
         <Panel id="inspector" collapsible minSize={25}>
           <InspectorPanel />
         </Panel>
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDataTab.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDataTab.tsx
index 3478cc2056..bcd88a0985 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDataTab.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDataTab.tsx
@@ -6,12 +6,9 @@ import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
 import { memo } from 'react';
 
 const selector = createMemoizedSelector(selectNodesSlice, (nodes) => {
-  const lastSelectedNodeId =
-    nodes.selectedNodes[nodes.selectedNodes.length - 1];
+  const lastSelectedNodeId = nodes.selectedNodes[nodes.selectedNodes.length - 1];
 
-  const lastSelectedNode = nodes.nodes.find(
-    (node) => node.id === lastSelectedNodeId
-  );
+  const lastSelectedNode = nodes.nodes.find((node) => node.id === lastSelectedNodeId);
 
   return {
     data: lastSelectedNode?.data,
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx
index a2c4759a72..b7c9033d6b 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx
@@ -1,11 +1,4 @@
-import {
-  Box,
-  Flex,
-  FormControl,
-  FormLabel,
-  HStack,
-  Text,
-} from '@invoke-ai/ui-library';
+import { Box, Flex, FormControl, FormLabel, HStack, Text } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
@@ -20,50 +13,33 @@ import { useTranslation } from 'react-i18next';
 
 import EditableNodeTitle from './details/EditableNodeTitle';
 
-const selector = createMemoizedSelector(
-  selectNodesSlice,
-  selectNodeTemplatesSlice,
-  (nodes, nodeTemplates) => {
-    const lastSelectedNodeId =
-      nodes.selectedNodes[nodes.selectedNodes.length - 1];
+const selector = createMemoizedSelector(selectNodesSlice, selectNodeTemplatesSlice, (nodes, nodeTemplates) => {
+  const lastSelectedNodeId = nodes.selectedNodes[nodes.selectedNodes.length - 1];
 
-    const lastSelectedNode = nodes.nodes.find(
-      (node) => node.id === lastSelectedNodeId
-    );
+  const lastSelectedNode = nodes.nodes.find((node) => node.id === lastSelectedNodeId);
 
-    const lastSelectedNodeTemplate = lastSelectedNode
-      ? nodeTemplates.templates[lastSelectedNode.data.type]
-      : undefined;
+  const lastSelectedNodeTemplate = lastSelectedNode ? nodeTemplates.templates[lastSelectedNode.data.type] : undefined;
 
-    if (!isInvocationNode(lastSelectedNode) || !lastSelectedNodeTemplate) {
-      return;
-    }
-
-    return {
-      nodeId: lastSelectedNode.data.id,
-      nodeVersion: lastSelectedNode.data.version,
-      templateTitle: lastSelectedNodeTemplate.title,
-    };
+  if (!isInvocationNode(lastSelectedNode) || !lastSelectedNodeTemplate) {
+    return;
   }
-);
+
+  return {
+    nodeId: lastSelectedNode.data.id,
+    nodeVersion: lastSelectedNode.data.version,
+    templateTitle: lastSelectedNodeTemplate.title,
+  };
+});
 
 const InspectorDetailsTab = () => {
   const data = useAppSelector(selector);
   const { t } = useTranslation();
 
   if (!data) {
-    return (
-      <IAINoContentFallback label={t('nodes.noNodeSelected')} icon={null} />
-    );
+    return <IAINoContentFallback label={t('nodes.noNodeSelected')} icon={null} />;
   }
 
-  return (
-    <Content
-      nodeId={data.nodeId}
-      nodeVersion={data.nodeVersion}
-      templateTitle={data.templateTitle}
-    />
-  );
+  return <Content nodeId={data.nodeId} nodeVersion={data.nodeVersion} templateTitle={data.templateTitle} />;
 };
 
 export default memo(InspectorDetailsTab);
@@ -80,14 +56,7 @@ const Content = memo((props: ContentProps) => {
   return (
     <Box position="relative" w="full" h="full">
       <ScrollableContent>
-        <Flex
-          flexDir="column"
-          position="relative"
-          w="full"
-          h="full"
-          p={1}
-          gap={2}
-        >
+        <Flex flexDir="column" position="relative" w="full" h="full" p={1} gap={2}>
           <EditableNodeTitle nodeId={props.nodeId} />
           <HStack>
             <FormControl>
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorOutputsTab.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorOutputsTab.tsx
index a9ae4d88cb..ee7dfaa693 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorOutputsTab.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorOutputsTab.tsx
@@ -14,73 +14,44 @@ import type { AnyResult } from 'services/events/types';
 
 import ImageOutputPreview from './outputs/ImageOutputPreview';
 
-const selector = createMemoizedSelector(
-  selectNodesSlice,
-  selectNodeTemplatesSlice,
-  (nodes, nodeTemplates) => {
-    const lastSelectedNodeId =
-      nodes.selectedNodes[nodes.selectedNodes.length - 1];
+const selector = createMemoizedSelector(selectNodesSlice, selectNodeTemplatesSlice, (nodes, nodeTemplates) => {
+  const lastSelectedNodeId = nodes.selectedNodes[nodes.selectedNodes.length - 1];
 
-    const lastSelectedNode = nodes.nodes.find(
-      (node) => node.id === lastSelectedNodeId
-    );
+  const lastSelectedNode = nodes.nodes.find((node) => node.id === lastSelectedNodeId);
 
-    const lastSelectedNodeTemplate = lastSelectedNode
-      ? nodeTemplates.templates[lastSelectedNode.data.type]
-      : undefined;
+  const lastSelectedNodeTemplate = lastSelectedNode ? nodeTemplates.templates[lastSelectedNode.data.type] : undefined;
 
-    const nes =
-      nodes.nodeExecutionStates[lastSelectedNodeId ?? '__UNKNOWN_NODE__'];
+  const nes = nodes.nodeExecutionStates[lastSelectedNodeId ?? '__UNKNOWN_NODE__'];
 
-    if (
-      !isInvocationNode(lastSelectedNode) ||
-      !nes ||
-      !lastSelectedNodeTemplate
-    ) {
-      return;
-    }
-
-    return {
-      outputs: nes.outputs,
-      outputType: lastSelectedNodeTemplate.outputType,
-    };
+  if (!isInvocationNode(lastSelectedNode) || !nes || !lastSelectedNodeTemplate) {
+    return;
   }
-);
+
+  return {
+    outputs: nes.outputs,
+    outputType: lastSelectedNodeTemplate.outputType,
+  };
+});
 
 const InspectorOutputsTab = () => {
   const data = useAppSelector(selector);
   const { t } = useTranslation();
 
   if (!data) {
-    return (
-      <IAINoContentFallback label={t('nodes.noNodeSelected')} icon={null} />
-    );
+    return <IAINoContentFallback label={t('nodes.noNodeSelected')} icon={null} />;
   }
 
   if (data.outputs.length === 0) {
-    return (
-      <IAINoContentFallback label={t('nodes.noOutputRecorded')} icon={null} />
-    );
+    return <IAINoContentFallback label={t('nodes.noOutputRecorded')} icon={null} />;
   }
 
   return (
     <Box position="relative" w="full" h="full">
       <ScrollableContent>
-        <Flex
-          position="relative"
-          flexDir="column"
-          alignItems="flex-start"
-          p={1}
-          gap={2}
-          h="full"
-          w="full"
-        >
+        <Flex position="relative" flexDir="column" alignItems="flex-start" p={1} gap={2} h="full" w="full">
           {data.outputType === 'image_output' ? (
             data.outputs.map((result, i) => (
-              <ImageOutputPreview
-                key={getKey(result, i)}
-                output={result as ImageOutput}
-              />
+              <ImageOutputPreview key={getKey(result, i)} output={result as ImageOutput} />
             ))
           ) : (
             <DataViewer data={data.outputs} label={t('nodes.nodeOutputs')} />
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx
index e4d1bc5d6c..9bbf7e6aac 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx
@@ -1,11 +1,4 @@
-import {
-  Flex,
-  Tab,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Tabs,
-} from '@invoke-ai/ui-library';
+import { Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -17,15 +10,7 @@ import InspectorTemplateTab from './InspectorTemplateTab';
 const InspectorPanel = () => {
   const { t } = useTranslation();
   return (
-    <Flex
-      layerStyle="first"
-      flexDir="column"
-      w="full"
-      h="full"
-      borderRadius="base"
-      p={2}
-      gap={2}
-    >
+    <Flex layerStyle="first" flexDir="column" w="full" h="full" borderRadius="base" p={2} gap={2}>
       <Tabs variant="line" display="flex" flexDir="column" w="full" h="full">
         <TabList>
           <Tab>{t('common.details')}</Tab>
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorTemplateTab.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorTemplateTab.tsx
index cd37d685b2..28f0e82d68 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorTemplateTab.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorTemplateTab.tsx
@@ -7,35 +7,24 @@ import { selectNodeTemplatesSlice } from 'features/nodes/store/nodeTemplatesSlic
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const selector = createMemoizedSelector(
-  selectNodesSlice,
-  selectNodeTemplatesSlice,
-  (nodes, nodeTemplates) => {
-    const lastSelectedNodeId =
-      nodes.selectedNodes[nodes.selectedNodes.length - 1];
+const selector = createMemoizedSelector(selectNodesSlice, selectNodeTemplatesSlice, (nodes, nodeTemplates) => {
+  const lastSelectedNodeId = nodes.selectedNodes[nodes.selectedNodes.length - 1];
 
-    const lastSelectedNode = nodes.nodes.find(
-      (node) => node.id === lastSelectedNodeId
-    );
+  const lastSelectedNode = nodes.nodes.find((node) => node.id === lastSelectedNodeId);
 
-    const lastSelectedNodeTemplate = lastSelectedNode
-      ? nodeTemplates.templates[lastSelectedNode.data.type]
-      : undefined;
+  const lastSelectedNodeTemplate = lastSelectedNode ? nodeTemplates.templates[lastSelectedNode.data.type] : undefined;
 
-    return {
-      template: lastSelectedNodeTemplate,
-    };
-  }
-);
+  return {
+    template: lastSelectedNodeTemplate,
+  };
+});
 
 const NodeTemplateInspector = () => {
   const { template } = useAppSelector(selector);
   const { t } = useTranslation();
 
   if (!template) {
-    return (
-      <IAINoContentFallback label={t('nodes.noNodeSelected')} icon={null} />
-    );
+    return <IAINoContentFallback label={t('nodes.noNodeSelected')} icon={null} />;
   }
 
   return <DataViewer data={template} label={t('nodes.nodeTemplate')} />;
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/details/EditableNodeTitle.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/details/EditableNodeTitle.tsx
index d75e52f3ad..5120c5f66f 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/details/EditableNodeTitle.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/details/EditableNodeTitle.tsx
@@ -1,9 +1,4 @@
-import {
-  Editable,
-  EditableInput,
-  EditablePreview,
-  Flex,
-} from '@invoke-ai/ui-library';
+import { Editable, EditableInput, EditablePreview, Flex } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useNodeLabel } from 'features/nodes/hooks/useNodeLabel';
 import { useNodeTemplateTitle } from 'features/nodes/hooks/useNodeTemplateTitle';
@@ -26,9 +21,7 @@ const EditableNodeTitle = ({ nodeId, title }: Props) => {
   const handleSubmit = useCallback(
     async (newTitle: string) => {
       dispatch(nodeLabelChanged({ nodeId, label: newTitle }));
-      setLocalTitle(
-        label || title || templateTitle || t('nodes.problemSettingTitle')
-      );
+      setLocalTitle(label || title || templateTitle || t('nodes.problemSettingTitle'));
     },
     [dispatch, nodeId, title, templateTitle, label, t]
   );
@@ -39,9 +32,7 @@ const EditableNodeTitle = ({ nodeId, title }: Props) => {
 
   useEffect(() => {
     // Another component may change the title; sync local title with global state
-    setLocalTitle(
-      label || title || templateTitle || t('nodes.problemSettingTitle')
-    );
+    setLocalTitle(label || title || templateTitle || t('nodes.problemSettingTitle'));
   }, [label, templateTitle, title, t]);
 
   return (
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowGeneralTab.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowGeneralTab.tsx
index 4cd53e91ac..8820ad9fb7 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowGeneralTab.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowGeneralTab.tsx
@@ -1,12 +1,5 @@
 import type { FormControlProps } from '@invoke-ai/ui-library';
-import {
-  Flex,
-  FormControl,
-  FormControlGroup,
-  FormLabel,
-  Input,
-  Textarea,
-} from '@invoke-ai/ui-library';
+import { Flex, FormControl, FormControlGroup, FormLabel, Input, Textarea } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
@@ -39,8 +32,7 @@ const selector = createMemoizedSelector(selectWorkflowSlice, (workflow) => {
 });
 
 const WorkflowGeneralTab = () => {
-  const { author, name, description, tags, version, contact, notes } =
-    useAppSelector(selector);
+  const { author, name, description, tags, version, contact, notes } = useAppSelector(selector);
   const dispatch = useAppDispatch();
 
   const handleChangeName = useCallback(
@@ -92,10 +84,7 @@ const WorkflowGeneralTab = () => {
   return (
     <ScrollableContent>
       <Flex flexDir="column" alignItems="flex-start" gap={2} h="full">
-        <FormControlGroup
-          orientation="vertical"
-          formControlProps={formControlProps}
-        >
+        <FormControlGroup orientation="vertical" formControlProps={formControlProps}>
           <Flex gap={2} w="full">
             <FormControl>
               <FormLabel>{t('nodes.workflowName')}</FormLabel>
@@ -122,23 +111,11 @@ const WorkflowGeneralTab = () => {
           </FormControl>
           <FormControl>
             <FormLabel>{t('nodes.workflowDescription')}</FormLabel>
-            <Textarea
-              onChange={handleChangeDescription}
-              value={description}
-              fontSize="sm"
-              resize="none"
-              rows={3}
-            />
+            <Textarea onChange={handleChangeDescription} value={description} fontSize="sm" resize="none" rows={3} />
           </FormControl>
           <FormControl>
             <FormLabel>{t('nodes.workflowNotes')}</FormLabel>
-            <Textarea
-              onChange={handleChangeNotes}
-              value={notes}
-              fontSize="sm"
-              resize="none"
-              rows={10}
-            />
+            <Textarea onChange={handleChangeNotes} value={notes} fontSize="sm" resize="none" rows={10} />
           </FormControl>
         </FormControlGroup>
       </Flex>
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx
index d2d8185e1a..51fb6faf0c 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx
@@ -8,10 +8,7 @@ import { selectWorkflowSlice } from 'features/nodes/store/workflowSlice';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const selector = createMemoizedSelector(
-  selectWorkflowSlice,
-  (workflow) => workflow.exposedFields
-);
+const selector = createMemoizedSelector(selectWorkflowSlice, (workflow) => workflow.exposedFields);
 
 const WorkflowLinearTab = () => {
   const fields = useAppSelector(selector);
@@ -20,28 +17,13 @@ const WorkflowLinearTab = () => {
   return (
     <Box position="relative" w="full" h="full">
       <ScrollableContent>
-        <Flex
-          position="relative"
-          flexDir="column"
-          alignItems="flex-start"
-          p={1}
-          gap={2}
-          h="full"
-          w="full"
-        >
+        <Flex position="relative" flexDir="column" alignItems="flex-start" p={1} gap={2} h="full" w="full">
           {fields.length ? (
             fields.map(({ nodeId, fieldName }) => (
-              <LinearViewField
-                key={`${nodeId}.${fieldName}`}
-                nodeId={nodeId}
-                fieldName={fieldName}
-              />
+              <LinearViewField key={`${nodeId}.${fieldName}`} nodeId={nodeId} fieldName={fieldName} />
             ))
           ) : (
-            <IAINoContentFallback
-              label={t('nodes.noFieldsLinearview')}
-              icon={null}
-            />
+            <IAINoContentFallback label={t('nodes.noFieldsLinearview')} icon={null} />
           )}
         </Flex>
       </ScrollableContent>
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
index 96d8764ccb..bdc384d40d 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
@@ -1,11 +1,4 @@
-import {
-  Flex,
-  Tab,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Tabs,
-} from '@invoke-ai/ui-library';
+import { Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -16,15 +9,7 @@ import WorkflowLinearTab from './WorkflowLinearTab';
 const WorkflowPanel = () => {
   const { t } = useTranslation();
   return (
-    <Flex
-      layerStyle="first"
-      flexDir="column"
-      w="full"
-      h="full"
-      borderRadius="base"
-      p={2}
-      gap={2}
-    >
+    <Flex layerStyle="first" flexDir="column" w="full" h="full" borderRadius="base" p={2} gap={2}>
       <Tabs variant="line" display="flex" w="full" h="full" flexDir="column">
         <TabList>
           <Tab>{t('common.linear')}</Tab>
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useAnyOrDirectInputFieldNames.ts b/invokeai/frontend/web/src/features/nodes/hooks/useAnyOrDirectInputFieldNames.ts
index dbb9e1f799..d0263a8bda 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useAnyOrDirectInputFieldNames.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useAnyOrDirectInputFieldNames.ts
@@ -11,27 +11,22 @@ import { useMemo } from 'react';
 export const useAnyOrDirectInputFieldNames = (nodeId: string) => {
   const selector = useMemo(
     () =>
-      createMemoizedSelector(
-        selectNodesSlice,
-        selectNodeTemplatesSlice,
-        (nodes, nodeTemplates) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return [];
-          }
-          const nodeTemplate = nodeTemplates.templates[node.data.type];
-          if (!nodeTemplate) {
-            return [];
-          }
-          const fields = map(nodeTemplate.inputs).filter(
-            (field) =>
-              (['any', 'direct'].includes(field.input) ||
-                field.type.isCollectionOrScalar) &&
-              keys(TEMPLATE_BUILDER_MAP).includes(field.type.name)
-          );
-          return getSortedFilteredFieldNames(fields);
+      createMemoizedSelector(selectNodesSlice, selectNodeTemplatesSlice, (nodes, nodeTemplates) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return [];
         }
-      ),
+        const nodeTemplate = nodeTemplates.templates[node.data.type];
+        if (!nodeTemplate) {
+          return [];
+        }
+        const fields = map(nodeTemplate.inputs).filter(
+          (field) =>
+            (['any', 'direct'].includes(field.input) || field.type.isCollectionOrScalar) &&
+            keys(TEMPLATE_BUILDER_MAP).includes(field.type.name)
+        );
+        return getSortedFilteredFieldNames(fields);
+      }),
     [nodeId]
   );
 
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useBuildNode.ts b/invokeai/frontend/web/src/features/nodes/hooks/useBuildNode.ts
index 9628a00fca..aecc931893 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useBuildNode.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useBuildNode.ts
@@ -1,12 +1,6 @@
 import { useAppSelector } from 'app/store/storeHooks';
-import {
-  DRAG_HANDLE_CLASSNAME,
-  NODE_WIDTH,
-} from 'features/nodes/types/constants';
-import type {
-  AnyNode,
-  InvocationTemplate,
-} from 'features/nodes/types/invocation';
+import { DRAG_HANDLE_CLASSNAME, NODE_WIDTH } from 'features/nodes/types/constants';
+import type { AnyNode, InvocationTemplate } from 'features/nodes/types/invocation';
 import { buildCurrentImageNode } from 'features/nodes/util/node/buildCurrentImageNode';
 import { buildInvocationNode } from 'features/nodes/util/node/buildInvocationNode';
 import { buildNotesNode } from 'features/nodes/util/node/buildNotesNode';
@@ -30,9 +24,7 @@ export const useBuildNode = () => {
       let _y = window.innerHeight / 2;
 
       // attempt to center the node in the middle of the flow
-      const rect = document
-        .querySelector('#workflow-editor')
-        ?.getBoundingClientRect();
+      const rect = document.querySelector('#workflow-editor')?.getBoundingClientRect();
 
       if (rect) {
         _x = rect.width / 2 - NODE_WIDTH / 2 + rect.left;
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useConnectionInputFieldNames.ts b/invokeai/frontend/web/src/features/nodes/hooks/useConnectionInputFieldNames.ts
index 22b7fe2778..23f318517b 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useConnectionInputFieldNames.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useConnectionInputFieldNames.ts
@@ -11,30 +11,25 @@ import { useMemo } from 'react';
 export const useConnectionInputFieldNames = (nodeId: string) => {
   const selector = useMemo(
     () =>
-      createMemoizedSelector(
-        selectNodesSlice,
-        selectNodeTemplatesSlice,
-        (nodes, nodeTemplates) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return [];
-          }
-          const nodeTemplate = nodeTemplates.templates[node.data.type];
-          if (!nodeTemplate) {
-            return [];
-          }
-
-          // get the visible fields
-          const fields = map(nodeTemplate.inputs).filter(
-            (field) =>
-              (field.input === 'connection' &&
-                !field.type.isCollectionOrScalar) ||
-              !keys(TEMPLATE_BUILDER_MAP).includes(field.type.name)
-          );
-
-          return getSortedFilteredFieldNames(fields);
+      createMemoizedSelector(selectNodesSlice, selectNodeTemplatesSlice, (nodes, nodeTemplates) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return [];
         }
-      ),
+        const nodeTemplate = nodeTemplates.templates[node.data.type];
+        if (!nodeTemplate) {
+          return [];
+        }
+
+        // get the visible fields
+        const fields = map(nodeTemplate.inputs).filter(
+          (field) =>
+            (field.input === 'connection' && !field.type.isCollectionOrScalar) ||
+            !keys(TEMPLATE_BUILDER_MAP).includes(field.type.name)
+        );
+
+        return getSortedFilteredFieldNames(fields);
+      }),
     [nodeId]
   );
 
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useConnectionState.ts b/invokeai/frontend/web/src/features/nodes/hooks/useConnectionState.ts
index def08441dc..a6f8b663f6 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useConnectionState.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useConnectionState.ts
@@ -8,9 +8,7 @@ import { useFieldType } from './useFieldType.ts';
 
 const selectIsConnectionInProgress = createSelector(
   selectNodesSlice,
-  (nodes) =>
-    nodes.connectionStartFieldType !== null &&
-    nodes.connectionStartParams !== null
+  (nodes) => nodes.connectionStartFieldType !== null && nodes.connectionStartParams !== null
 );
 
 export type UseConnectionStateProps = {
@@ -19,11 +17,7 @@ export type UseConnectionStateProps = {
   kind: 'input' | 'output';
 };
 
-export const useConnectionState = ({
-  nodeId,
-  fieldName,
-  kind,
-}: UseConnectionStateProps) => {
+export const useConnectionState = ({ nodeId, fieldName, kind }: UseConnectionStateProps) => {
   const fieldType = useFieldType(nodeId, fieldName, kind);
 
   const selectIsConnected = useMemo(
@@ -33,8 +27,7 @@ export const useConnectionState = ({
           nodes.edges.filter((edge) => {
             return (
               (kind === 'input' ? edge.target : edge.source) === nodeId &&
-              (kind === 'input' ? edge.targetHandle : edge.sourceHandle) ===
-                fieldName
+              (kind === 'input' ? edge.targetHandle : edge.sourceHandle) === fieldName
             );
           }).length
         )
@@ -43,13 +36,7 @@ export const useConnectionState = ({
   );
 
   const selectConnectionError = useMemo(
-    () =>
-      makeConnectionErrorSelector(
-        nodeId,
-        fieldName,
-        kind === 'input' ? 'target' : 'source',
-        fieldType
-      ),
+    () => makeConnectionErrorSelector(nodeId, fieldName, kind === 'input' ? 'target' : 'source', fieldType),
     [nodeId, fieldName, kind, fieldType]
   );
 
@@ -59,8 +46,7 @@ export const useConnectionState = ({
         Boolean(
           nodes.connectionStartParams?.nodeId === nodeId &&
             nodes.connectionStartParams?.handleId === fieldName &&
-            nodes.connectionStartParams?.handleType ===
-              { input: 'target', output: 'source' }[kind]
+            nodes.connectionStartParams?.handleType === { input: 'target', output: 'source' }[kind]
         )
       ),
     [fieldName, kind, nodeId]
@@ -72,10 +58,7 @@ export const useConnectionState = ({
   const connectionError = useAppSelector(selectConnectionError);
 
   const shouldDim = useMemo(
-    () =>
-      Boolean(
-        isConnectionInProgress && connectionError && !isConnectionStartField
-      ),
+    () => Boolean(isConnectionInProgress && connectionError && !isConnectionStartField),
     [connectionError, isConnectionInProgress, isConnectionStartField]
   );
 
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useDoNodeVersionsMatch.ts b/invokeai/frontend/web/src/features/nodes/hooks/useDoNodeVersionsMatch.ts
index f639c5279e..bfbf0a3b2d 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useDoNodeVersionsMatch.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useDoNodeVersionsMatch.ts
@@ -9,21 +9,17 @@ import { useMemo } from 'react';
 export const useDoNodeVersionsMatch = (nodeId: string) => {
   const selector = useMemo(
     () =>
-      createSelector(
-        selectNodesSlice,
-        selectNodeTemplatesSlice,
-        (nodes, nodeTemplates) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return false;
-          }
-          const nodeTemplate = nodeTemplates.templates[node?.data.type ?? ''];
-          if (!nodeTemplate?.version || !node.data?.version) {
-            return false;
-          }
-          return compareVersions(nodeTemplate.version, node.data.version) === 0;
+      createSelector(selectNodesSlice, selectNodeTemplatesSlice, (nodes, nodeTemplates) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return false;
         }
-      ),
+        const nodeTemplate = nodeTemplates.templates[node?.data.type ?? ''];
+        if (!nodeTemplate?.version || !node.data?.version) {
+          return false;
+        }
+        return compareVersions(nodeTemplate.version, node.data.version) === 0;
+      }),
     [nodeId]
   );
 
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputKind.ts b/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputKind.ts
index 882d9a459b..11d44dbde2 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputKind.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputKind.ts
@@ -8,19 +8,15 @@ import { useMemo } from 'react';
 export const useFieldInputKind = (nodeId: string, fieldName: string) => {
   const selector = useMemo(
     () =>
-      createSelector(
-        selectNodesSlice,
-        selectNodeTemplatesSlice,
-        (nodes, nodeTemplates) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return;
-          }
-          const nodeTemplate = nodeTemplates.templates[node?.data.type ?? ''];
-          const fieldTemplate = nodeTemplate?.inputs[fieldName];
-          return fieldTemplate?.input;
+      createSelector(selectNodesSlice, selectNodeTemplatesSlice, (nodes, nodeTemplates) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return;
         }
-      ),
+        const nodeTemplate = nodeTemplates.templates[node?.data.type ?? ''];
+        const fieldTemplate = nodeTemplate?.inputs[fieldName];
+        return fieldTemplate?.input;
+      }),
     [fieldName, nodeId]
   );
 
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputTemplate.ts b/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputTemplate.ts
index 46a22e107d..8533d2be8d 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputTemplate.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputTemplate.ts
@@ -8,18 +8,14 @@ import { useMemo } from 'react';
 export const useFieldInputTemplate = (nodeId: string, fieldName: string) => {
   const selector = useMemo(
     () =>
-      createMemoizedSelector(
-        selectNodesSlice,
-        selectNodeTemplatesSlice,
-        (nodes, nodeTemplates) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return;
-          }
-          const nodeTemplate = nodeTemplates.templates[node?.data.type ?? ''];
-          return nodeTemplate?.inputs[fieldName];
+      createMemoizedSelector(selectNodesSlice, selectNodeTemplatesSlice, (nodes, nodeTemplates) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return;
         }
-      ),
+        const nodeTemplate = nodeTemplates.templates[node?.data.type ?? ''];
+        return nodeTemplate?.inputs[fieldName];
+      }),
     [fieldName, nodeId]
   );
 
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldOutputTemplate.ts b/invokeai/frontend/web/src/features/nodes/hooks/useFieldOutputTemplate.ts
index e81c24f8c8..11f592b399 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useFieldOutputTemplate.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useFieldOutputTemplate.ts
@@ -8,18 +8,14 @@ import { useMemo } from 'react';
 export const useFieldOutputTemplate = (nodeId: string, fieldName: string) => {
   const selector = useMemo(
     () =>
-      createMemoizedSelector(
-        selectNodesSlice,
-        selectNodeTemplatesSlice,
-        (nodes, nodeTemplates) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return;
-          }
-          const nodeTemplate = nodeTemplates.templates[node?.data.type ?? ''];
-          return nodeTemplate?.outputs[fieldName];
+      createMemoizedSelector(selectNodesSlice, selectNodeTemplatesSlice, (nodes, nodeTemplates) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return;
         }
-      ),
+        const nodeTemplate = nodeTemplates.templates[node?.data.type ?? ''];
+        return nodeTemplate?.outputs[fieldName];
+      }),
     [fieldName, nodeId]
   );
 
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldTemplate.ts b/invokeai/frontend/web/src/features/nodes/hooks/useFieldTemplate.ts
index 7588ebbbfc..663821da81 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useFieldTemplate.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useFieldTemplate.ts
@@ -6,25 +6,17 @@ import { KIND_MAP } from 'features/nodes/types/constants';
 import { isInvocationNode } from 'features/nodes/types/invocation';
 import { useMemo } from 'react';
 
-export const useFieldTemplate = (
-  nodeId: string,
-  fieldName: string,
-  kind: 'input' | 'output'
-) => {
+export const useFieldTemplate = (nodeId: string, fieldName: string, kind: 'input' | 'output') => {
   const selector = useMemo(
     () =>
-      createMemoizedSelector(
-        selectNodesSlice,
-        selectNodeTemplatesSlice,
-        (nodes, nodeTemplates) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return;
-          }
-          const nodeTemplate = nodeTemplates.templates[node?.data.type ?? ''];
-          return nodeTemplate?.[KIND_MAP[kind]][fieldName];
+      createMemoizedSelector(selectNodesSlice, selectNodeTemplatesSlice, (nodes, nodeTemplates) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return;
         }
-      ),
+        const nodeTemplate = nodeTemplates.templates[node?.data.type ?? ''];
+        return nodeTemplate?.[KIND_MAP[kind]][fieldName];
+      }),
     [fieldName, kind, nodeId]
   );
 
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldTemplateTitle.ts b/invokeai/frontend/web/src/features/nodes/hooks/useFieldTemplateTitle.ts
index c82c4e46be..cfdcda6efa 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useFieldTemplateTitle.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useFieldTemplateTitle.ts
@@ -6,25 +6,17 @@ import { KIND_MAP } from 'features/nodes/types/constants';
 import { isInvocationNode } from 'features/nodes/types/invocation';
 import { useMemo } from 'react';
 
-export const useFieldTemplateTitle = (
-  nodeId: string,
-  fieldName: string,
-  kind: 'input' | 'output'
-) => {
+export const useFieldTemplateTitle = (nodeId: string, fieldName: string, kind: 'input' | 'output') => {
   const selector = useMemo(
     () =>
-      createSelector(
-        selectNodesSlice,
-        selectNodeTemplatesSlice,
-        (nodes, nodeTemplates) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return;
-          }
-          const nodeTemplate = nodeTemplates.templates[node?.data.type ?? ''];
-          return nodeTemplate?.[KIND_MAP[kind]][fieldName]?.title;
+      createSelector(selectNodesSlice, selectNodeTemplatesSlice, (nodes, nodeTemplates) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return;
         }
-      ),
+        const nodeTemplate = nodeTemplates.templates[node?.data.type ?? ''];
+        return nodeTemplate?.[KIND_MAP[kind]][fieldName]?.title;
+      }),
     [fieldName, kind, nodeId]
   );
 
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldType.ts.ts b/invokeai/frontend/web/src/features/nodes/hooks/useFieldType.ts.ts
index 13190f51c1..a834726a13 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useFieldType.ts.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useFieldType.ts.ts
@@ -5,11 +5,7 @@ import { KIND_MAP } from 'features/nodes/types/constants';
 import { isInvocationNode } from 'features/nodes/types/invocation';
 import { useMemo } from 'react';
 
-export const useFieldType = (
-  nodeId: string,
-  fieldName: string,
-  kind: 'input' | 'output'
-) => {
+export const useFieldType = (nodeId: string, fieldName: string, kind: 'input' | 'output') => {
   const selector = useMemo(
     () =>
       createMemoizedSelector(selectNodesSlice, (nodes) => {
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useGetNodesNeedUpdate.ts b/invokeai/frontend/web/src/features/nodes/hooks/useGetNodesNeedUpdate.ts
index 97df979a35..a8019c92d6 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useGetNodesNeedUpdate.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useGetNodesNeedUpdate.ts
@@ -5,17 +5,14 @@ import { selectNodeTemplatesSlice } from 'features/nodes/store/nodeTemplatesSlic
 import { isInvocationNode } from 'features/nodes/types/invocation';
 import { getNeedsUpdate } from 'features/nodes/util/node/nodeUpdate';
 
-const selector = createSelector(
-  selectNodesSlice,
-  selectNodeTemplatesSlice,
-  (nodes, nodeTemplates) =>
-    nodes.nodes.filter(isInvocationNode).some((node) => {
-      const template = nodeTemplates.templates[node.data.type];
-      if (!template) {
-        return false;
-      }
-      return getNeedsUpdate(node, template);
-    })
+const selector = createSelector(selectNodesSlice, selectNodeTemplatesSlice, (nodes, nodeTemplates) =>
+  nodes.nodes.filter(isInvocationNode).some((node) => {
+    const template = nodeTemplates.templates[node.data.type];
+    if (!template) {
+      return false;
+    }
+    return getNeedsUpdate(node, template);
+  })
 );
 
 export const useGetNodesNeedUpdate = () => {
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useIsValidConnection.ts b/invokeai/frontend/web/src/features/nodes/hooks/useIsValidConnection.ts
index 2c80de0e97..39a8abbe7a 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useIsValidConnection.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useIsValidConnection.ts
@@ -14,9 +14,7 @@ import { useReactFlow } from 'reactflow';
 
 export const useIsValidConnection = () => {
   const flow = useReactFlow();
-  const shouldValidateGraph = useAppSelector(
-    (s) => s.nodes.shouldValidateGraph
-  );
+  const shouldValidateGraph = useAppSelector((s) => s.nodes.shouldValidateGraph);
   const isValidConnection = useCallback(
     ({ source, sourceHandle, target, targetHandle }: Connection): boolean => {
       const edges = flow.getEdges();
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useNodeClassification.ts b/invokeai/frontend/web/src/features/nodes/hooks/useNodeClassification.ts
index 55979ddd96..c61721030e 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useNodeClassification.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useNodeClassification.ts
@@ -8,18 +8,14 @@ import { useMemo } from 'react';
 export const useNodeClassification = (nodeId: string) => {
   const selector = useMemo(
     () =>
-      createMemoizedSelector(
-        selectNodesSlice,
-        selectNodeTemplatesSlice,
-        (nodes, nodeTemplates) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return false;
-          }
-          const nodeTemplate = nodeTemplates.templates[node?.data.type ?? ''];
-          return nodeTemplate?.classification;
+      createMemoizedSelector(selectNodesSlice, selectNodeTemplatesSlice, (nodes, nodeTemplates) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return false;
         }
-      ),
+        const nodeTemplate = nodeTemplates.templates[node?.data.type ?? ''];
+        return nodeTemplate?.classification;
+      }),
     [nodeId]
   );
 
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useNodeNeedsUpdate.ts b/invokeai/frontend/web/src/features/nodes/hooks/useNodeNeedsUpdate.ts
index cebf3eef22..e6efa667f1 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useNodeNeedsUpdate.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useNodeNeedsUpdate.ts
@@ -9,18 +9,14 @@ import { useMemo } from 'react';
 export const useNodeNeedsUpdate = (nodeId: string) => {
   const selector = useMemo(
     () =>
-      createMemoizedSelector(
-        selectNodesSlice,
-        selectNodeTemplatesSlice,
-        (nodes, nodeTemplates) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          const template = nodeTemplates.templates[node?.data.type ?? ''];
-          if (isInvocationNode(node) && template) {
-            return getNeedsUpdate(node, template);
-          }
-          return false;
+      createMemoizedSelector(selectNodesSlice, selectNodeTemplatesSlice, (nodes, nodeTemplates) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        const template = nodeTemplates.templates[node?.data.type ?? ''];
+        if (isInvocationNode(node) && template) {
+          return getNeedsUpdate(node, template);
         }
-      ),
+        return false;
+      }),
     [nodeId]
   );
 
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useNodeTemplate.ts b/invokeai/frontend/web/src/features/nodes/hooks/useNodeTemplate.ts
index c9c635610d..7544cbff46 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useNodeTemplate.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useNodeTemplate.ts
@@ -7,15 +7,11 @@ import { useMemo } from 'react';
 export const useNodeTemplate = (nodeId: string) => {
   const selector = useMemo(
     () =>
-      createMemoizedSelector(
-        selectNodesSlice,
-        selectNodeTemplatesSlice,
-        (nodes, nodeTemplates) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          const nodeTemplate = nodeTemplates.templates[node?.data.type ?? ''];
-          return nodeTemplate;
-        }
-      ),
+      createMemoizedSelector(selectNodesSlice, selectNodeTemplatesSlice, (nodes, nodeTemplates) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        const nodeTemplate = nodeTemplates.templates[node?.data.type ?? ''];
+        return nodeTemplate;
+      }),
     [nodeId]
   );
 
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useNodeTemplateByType.ts b/invokeai/frontend/web/src/features/nodes/hooks/useNodeTemplateByType.ts
index f6eb529d9c..8fd1345f6f 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useNodeTemplateByType.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useNodeTemplateByType.ts
@@ -7,12 +7,9 @@ import { useMemo } from 'react';
 export const useNodeTemplateByType = (type: string) => {
   const selector = useMemo(
     () =>
-      createMemoizedSelector(
-        selectNodeTemplatesSlice,
-        (nodeTemplates): InvocationTemplate | undefined => {
-          return nodeTemplates.templates[type];
-        }
-      ),
+      createMemoizedSelector(selectNodeTemplatesSlice, (nodeTemplates): InvocationTemplate | undefined => {
+        return nodeTemplates.templates[type];
+      }),
     [type]
   );
 
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useNodeTemplateTitle.ts b/invokeai/frontend/web/src/features/nodes/hooks/useNodeTemplateTitle.ts
index 8729742de9..15d2ec38c3 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useNodeTemplateTitle.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useNodeTemplateTitle.ts
@@ -8,21 +8,15 @@ import { useMemo } from 'react';
 export const useNodeTemplateTitle = (nodeId: string) => {
   const selector = useMemo(
     () =>
-      createSelector(
-        selectNodesSlice,
-        selectNodeTemplatesSlice,
-        (nodes, nodeTemplates) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return false;
-          }
-          const nodeTemplate = node
-            ? nodeTemplates.templates[node.data.type]
-            : undefined;
-
-          return nodeTemplate?.title;
+      createSelector(selectNodesSlice, selectNodeTemplatesSlice, (nodes, nodeTemplates) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return false;
         }
-      ),
+        const nodeTemplate = node ? nodeTemplates.templates[node.data.type] : undefined;
+
+        return nodeTemplate?.title;
+      }),
     [nodeId]
   );
 
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useOutputFieldNames.ts b/invokeai/frontend/web/src/features/nodes/hooks/useOutputFieldNames.ts
index 1320f07f83..e352bd8b90 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useOutputFieldNames.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useOutputFieldNames.ts
@@ -10,22 +10,18 @@ import { useMemo } from 'react';
 export const useOutputFieldNames = (nodeId: string) => {
   const selector = useMemo(
     () =>
-      createMemoizedSelector(
-        selectNodesSlice,
-        selectNodeTemplatesSlice,
-        (nodes, nodeTemplates) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return [];
-          }
-          const nodeTemplate = nodeTemplates.templates[node.data.type];
-          if (!nodeTemplate) {
-            return [];
-          }
-
-          return getSortedFilteredFieldNames(map(nodeTemplate.outputs));
+      createMemoizedSelector(selectNodesSlice, selectNodeTemplatesSlice, (nodes, nodeTemplates) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return [];
         }
-      ),
+        const nodeTemplate = nodeTemplates.templates[node.data.type];
+        if (!nodeTemplate) {
+          return [];
+        }
+
+        return getSortedFilteredFieldNames(map(nodeTemplate.outputs));
+      }),
     [nodeId]
   );
 
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useWithFooter.ts b/invokeai/frontend/web/src/features/nodes/hooks/useWithFooter.ts
index e13c42be1c..b3676f9722 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useWithFooter.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useWithFooter.ts
@@ -7,9 +7,6 @@ export const useWithFooter = (nodeId: string) => {
   const hasImageOutput = useHasImageOutput(nodeId);
   const isCacheEnabled = useFeatureStatus('invocationCache').isFeatureEnabled;
 
-  const withFooter = useMemo(
-    () => hasImageOutput || isCacheEnabled,
-    [hasImageOutput, isCacheEnabled]
-  );
+  const withFooter = useMemo(() => hasImageOutput || isCacheEnabled, [hasImageOutput, isCacheEnabled]);
   return withFooter;
 };
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useWorkflowWatcher.ts b/invokeai/frontend/web/src/features/nodes/hooks/useWorkflowWatcher.ts
index 1a67d45b21..0e4806d81b 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useWorkflowWatcher.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useWorkflowWatcher.ts
@@ -15,11 +15,11 @@ const debouncedBuildWorkflow = debounce((arg: BuildWorkflowArg) => {
   $builtWorkflow.set(buildWorkflowFast(arg));
 }, 300);
 
-const selectWorkflowSlices = createSelector(
-  selectNodesSlice,
-  selectWorkflowSlice,
-  (nodes, workflow) => ({ nodes: nodes.nodes, edges: nodes.edges, workflow })
-);
+const selectWorkflowSlices = createSelector(selectNodesSlice, selectWorkflowSlice, (nodes, workflow) => ({
+  nodes: nodes.nodes,
+  edges: nodes.edges,
+  workflow,
+}));
 
 export const useWorkflowWatcher = () => {
   const buildWorkflowArg = useAppSelector(selectWorkflowSlices);
diff --git a/invokeai/frontend/web/src/features/nodes/store/actions.ts b/invokeai/frontend/web/src/features/nodes/store/actions.ts
index 008731d5aa..00457494bf 100644
--- a/invokeai/frontend/web/src/features/nodes/store/actions.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/actions.ts
@@ -2,12 +2,8 @@ import { createAction, isAnyOf } from '@reduxjs/toolkit';
 import type { WorkflowV2 } from 'features/nodes/types/workflow';
 import type { Graph } from 'services/api/types';
 
-export const textToImageGraphBuilt = createAction<Graph>(
-  'nodes/textToImageGraphBuilt'
-);
-export const imageToImageGraphBuilt = createAction<Graph>(
-  'nodes/imageToImageGraphBuilt'
-);
+export const textToImageGraphBuilt = createAction<Graph>('nodes/textToImageGraphBuilt');
+export const imageToImageGraphBuilt = createAction<Graph>('nodes/imageToImageGraphBuilt');
 export const canvasGraphBuilt = createAction<Graph>('nodes/canvasGraphBuilt');
 export const nodesGraphBuilt = createAction<Graph>('nodes/nodesGraphBuilt');
 
@@ -23,10 +19,6 @@ export const workflowLoadRequested = createAction<{
   asCopy: boolean;
 }>('nodes/workflowLoadRequested');
 
-export const updateAllNodesRequested = createAction(
-  'nodes/updateAllNodesRequested'
-);
+export const updateAllNodesRequested = createAction('nodes/updateAllNodesRequested');
 
-export const workflowLoaded = createAction<WorkflowV2>(
-  'workflow/workflowLoaded'
-);
+export const workflowLoaded = createAction<WorkflowV2>('workflow/workflowLoaded');
diff --git a/invokeai/frontend/web/src/features/nodes/store/nodeTemplatesSlice.ts b/invokeai/frontend/web/src/features/nodes/store/nodeTemplatesSlice.ts
index 13d2a70fd5..ac67b19e43 100644
--- a/invokeai/frontend/web/src/features/nodes/store/nodeTemplatesSlice.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/nodeTemplatesSlice.ts
@@ -13,10 +13,7 @@ const nodesTemplatesSlice = createSlice({
   name: 'nodeTemplates',
   initialState: initialNodeTemplatesState,
   reducers: {
-    nodeTemplatesBuilt: (
-      state,
-      action: PayloadAction<Record<string, InvocationTemplate>>
-    ) => {
+    nodeTemplatesBuilt: (state, action: PayloadAction<Record<string, InvocationTemplate>>) => {
       state.templates = action.payload;
     },
   },
@@ -26,5 +23,4 @@ export const { nodeTemplatesBuilt } = nodesTemplatesSlice.actions;
 
 export default nodesTemplatesSlice.reducer;
 
-export const selectNodeTemplatesSlice = (state: RootState) =>
-  state.nodeTemplates;
+export const selectNodeTemplatesSlice = (state: RootState) => state.nodeTemplates;
diff --git a/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts b/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
index ecf2895f3a..a0074c1e47 100644
--- a/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
@@ -41,15 +41,8 @@ import {
   zT2IAdapterModelFieldValue,
   zVAEModelFieldValue,
 } from 'features/nodes/types/field';
-import type {
-  AnyNode,
-  NodeExecutionState,
-} from 'features/nodes/types/invocation';
-import {
-  isInvocationNode,
-  isNotesNode,
-  zNodeStatus,
-} from 'features/nodes/types/invocation';
+import type { AnyNode, NodeExecutionState } from 'features/nodes/types/invocation';
+import { isInvocationNode, isNotesNode, zNodeStatus } from 'features/nodes/types/invocation';
 import { cloneDeep, forEach } from 'lodash-es';
 import type {
   Connection,
@@ -153,13 +146,8 @@ const nodesSlice = createSlice({
     nodesChanged: (state, action: PayloadAction<NodeChange[]>) => {
       state.nodes = applyNodeChanges(action.payload, state.nodes);
     },
-    nodeReplaced: (
-      state,
-      action: PayloadAction<{ nodeId: string; node: Node }>
-    ) => {
-      const nodeIndex = state.nodes.findIndex(
-        (n) => n.id === action.payload.nodeId
-      );
+    nodeReplaced: (state, action: PayloadAction<{ nodeId: string; node: Node }>) => {
+      const nodeIndex = state.nodes.findIndex((n) => n.id === action.payload.nodeId);
       if (nodeIndex < 0) {
         return;
       }
@@ -198,12 +186,7 @@ const nodesSlice = createSlice({
 
       if (state.connectionStartParams) {
         const { nodeId, handleId, handleType } = state.connectionStartParams;
-        if (
-          nodeId &&
-          handleId &&
-          handleType &&
-          state.connectionStartFieldType
-        ) {
+        if (nodeId && handleId && handleType && state.connectionStartFieldType) {
           const newConnection = findConnectionToValidHandle(
             node,
             state.nodes,
@@ -214,10 +197,7 @@ const nodesSlice = createSlice({
             state.connectionStartFieldType
           );
           if (newConnection) {
-            state.edges = addEdge(
-              { ...newConnection, type: 'default' },
-              state.edges
-            );
+            state.edges = addEdge({ ...newConnection, type: 'default' }, state.edges);
           }
         }
       }
@@ -234,10 +214,7 @@ const nodesSlice = createSlice({
     edgeAdded: (state, action: PayloadAction<Edge>) => {
       state.edges = addEdge(action.payload, state.edges);
     },
-    edgeUpdated: (
-      state,
-      action: PayloadAction<{ oldEdge: Edge; newConnection: Connection }>
-    ) => {
+    edgeUpdated: (state, action: PayloadAction<{ oldEdge: Edge; newConnection: Connection }>) => {
       const { oldEdge, newConnection } = action.payload;
       state.edges = updateEdge(oldEdge, newConnection, state.edges);
     },
@@ -253,10 +230,7 @@ const nodesSlice = createSlice({
       if (!isInvocationNode(node)) {
         return;
       }
-      const field =
-        handleType === 'source'
-          ? node.data.outputs[handleId]
-          : node.data.inputs[handleId];
+      const field = handleType === 'source' ? node.data.outputs[handleId] : node.data.inputs[handleId];
       state.connectionStartFieldType = field?.type ?? null;
     },
     connectionMade: (state, action: PayloadAction<Connection>) => {
@@ -264,10 +238,7 @@ const nodesSlice = createSlice({
       if (!fieldType) {
         return;
       }
-      state.edges = addEdge(
-        { ...action.payload, type: 'default' },
-        state.edges
-      );
+      state.edges = addEdge({ ...action.payload, type: 'default' }, state.edges);
 
       state.connectionMade = true;
     },
@@ -281,19 +252,11 @@ const nodesSlice = createSlice({
       const { cursorPosition, mouseOverNodeId } = action.payload;
       if (!state.connectionMade) {
         if (mouseOverNodeId) {
-          const nodeIndex = state.nodes.findIndex(
-            (n) => n.id === mouseOverNodeId
-          );
+          const nodeIndex = state.nodes.findIndex((n) => n.id === mouseOverNodeId);
           const mouseOverNode = state.nodes?.[nodeIndex];
           if (mouseOverNode && state.connectionStartParams) {
-            const { nodeId, handleId, handleType } =
-              state.connectionStartParams;
-            if (
-              nodeId &&
-              handleId &&
-              handleType &&
-              state.connectionStartFieldType
-            ) {
+            const { nodeId, handleId, handleType } = state.connectionStartParams;
+            if (nodeId && handleId && handleType && state.connectionStartFieldType) {
               const newConnection = findConnectionToValidHandle(
                 mouseOverNode,
                 state.nodes,
@@ -304,10 +267,7 @@ const nodesSlice = createSlice({
                 state.connectionStartFieldType
               );
               if (newConnection) {
-                state.edges = addEdge(
-                  { ...newConnection, type: 'default' },
-                  state.edges
-                );
+                state.edges = addEdge({ ...newConnection, type: 'default' }, state.edges);
               }
             }
           }
@@ -342,10 +302,7 @@ const nodesSlice = createSlice({
       }
       field.label = label;
     },
-    nodeUseCacheChanged: (
-      state,
-      action: PayloadAction<{ nodeId: string; useCache: boolean }>
-    ) => {
+    nodeUseCacheChanged: (state, action: PayloadAction<{ nodeId: string; useCache: boolean }>) => {
       const { nodeId, useCache } = action.payload;
       const nodeIndex = state.nodes.findIndex((n) => n.id === nodeId);
 
@@ -356,10 +313,7 @@ const nodesSlice = createSlice({
       }
       node.data.useCache = useCache;
     },
-    nodeIsIntermediateChanged: (
-      state,
-      action: PayloadAction<{ nodeId: string; isIntermediate: boolean }>
-    ) => {
+    nodeIsIntermediateChanged: (state, action: PayloadAction<{ nodeId: string; isIntermediate: boolean }>) => {
       const { nodeId, isIntermediate } = action.payload;
       const nodeIndex = state.nodes.findIndex((n) => n.id === nodeId);
 
@@ -370,10 +324,7 @@ const nodesSlice = createSlice({
       }
       node.data.isIntermediate = isIntermediate;
     },
-    nodeIsOpenChanged: (
-      state,
-      action: PayloadAction<{ nodeId: string; isOpen: boolean }>
-    ) => {
+    nodeIsOpenChanged: (state, action: PayloadAction<{ nodeId: string; isOpen: boolean }>) => {
       const { nodeId, isOpen } = action.payload;
       const nodeIndex = state.nodes.findIndex((n) => n.id === nodeId);
 
@@ -406,19 +357,11 @@ const nodesSlice = createSlice({
           }
         });
       } else {
-        const closedIncomers = getIncomers(
-          node,
-          state.nodes,
-          state.edges
-        ).filter(
+        const closedIncomers = getIncomers(node, state.nodes, state.edges).filter(
           (node) => isInvocationNode(node) && node.data.isOpen === false
         );
 
-        const closedOutgoers = getOutgoers(
-          node,
-          state.nodes,
-          state.edges
-        ).filter(
+        const closedOutgoers = getOutgoers(node, state.nodes, state.edges).filter(
           (node) => isInvocationNode(node) && node.data.isOpen === false
         );
 
@@ -426,10 +369,7 @@ const nodesSlice = createSlice({
 
         // hide all edges
         connectedEdges.forEach((edge) => {
-          if (
-            edge.target === nodeId &&
-            closedIncomers.find((node) => node.id === edge.source)
-          ) {
+          if (edge.target === nodeId && closedIncomers.find((node) => node.id === edge.source)) {
             edge.hidden = true;
             const collapsedEdge = collapsedEdgesToCreate.find(
               (e) => e.source === edge.source && e.target === edge.target
@@ -449,10 +389,7 @@ const nodesSlice = createSlice({
               });
             }
           }
-          if (
-            edge.source === nodeId &&
-            closedOutgoers.find((node) => node.id === edge.target)
-          ) {
+          if (edge.source === nodeId && closedOutgoers.find((node) => node.id === edge.target)) {
             const collapsedEdge = collapsedEdgesToCreate.find(
               (e) => e.source === edge.source && e.target === edge.target
             );
@@ -493,10 +430,7 @@ const nodesSlice = createSlice({
         const edgeChanges: EdgeRemoveChange[] = [];
         collapsedEdges.forEach((collapsedEdge) => {
           state.edges.forEach((edge) => {
-            if (
-              edge.source === collapsedEdge.source &&
-              edge.target === collapsedEdge.target
-            ) {
+            if (edge.source === collapsedEdge.source && edge.target === collapsedEdge.target) {
               edgeChanges.push({ id: edge.id, type: 'remove' });
             }
           });
@@ -512,10 +446,7 @@ const nodesSlice = createSlice({
         delete state.nodeExecutionStates[node.id];
       });
     },
-    nodeLabelChanged: (
-      state,
-      action: PayloadAction<{ nodeId: string; label: string }>
-    ) => {
+    nodeLabelChanged: (state, action: PayloadAction<{ nodeId: string; label: string }>) => {
       const { nodeId, label } = action.payload;
       const nodeIndex = state.nodes.findIndex((n) => n.id === nodeId);
       const node = state.nodes?.[nodeIndex];
@@ -524,10 +455,7 @@ const nodesSlice = createSlice({
       }
       node.data.label = label;
     },
-    nodeNotesChanged: (
-      state,
-      action: PayloadAction<{ nodeId: string; notes: string }>
-    ) => {
+    nodeNotesChanged: (state, action: PayloadAction<{ nodeId: string; notes: string }>) => {
       const { nodeId, notes } = action.payload;
       const nodeIndex = state.nodes.findIndex((n) => n.id === nodeId);
       const node = state.nodes?.[nodeIndex];
@@ -553,100 +481,52 @@ const nodesSlice = createSlice({
     selectedEdgesChanged: (state, action: PayloadAction<string[]>) => {
       state.selectedEdges = action.payload;
     },
-    fieldStringValueChanged: (
-      state,
-      action: FieldValueAction<StringFieldValue>
-    ) => {
+    fieldStringValueChanged: (state, action: FieldValueAction<StringFieldValue>) => {
       fieldValueReducer(state, action, zStringFieldValue);
     },
-    fieldNumberValueChanged: (
-      state,
-      action: FieldValueAction<IntegerFieldValue | FloatFieldValue>
-    ) => {
+    fieldNumberValueChanged: (state, action: FieldValueAction<IntegerFieldValue | FloatFieldValue>) => {
       fieldValueReducer(state, action, zIntegerFieldValue.or(zFloatFieldValue));
     },
-    fieldBooleanValueChanged: (
-      state,
-      action: FieldValueAction<BooleanFieldValue>
-    ) => {
+    fieldBooleanValueChanged: (state, action: FieldValueAction<BooleanFieldValue>) => {
       fieldValueReducer(state, action, zBooleanFieldValue);
     },
-    fieldBoardValueChanged: (
-      state,
-      action: FieldValueAction<BoardFieldValue>
-    ) => {
+    fieldBoardValueChanged: (state, action: FieldValueAction<BoardFieldValue>) => {
       fieldValueReducer(state, action, zBoardFieldValue);
     },
-    fieldImageValueChanged: (
-      state,
-      action: FieldValueAction<ImageFieldValue>
-    ) => {
+    fieldImageValueChanged: (state, action: FieldValueAction<ImageFieldValue>) => {
       fieldValueReducer(state, action, zImageFieldValue);
     },
-    fieldColorValueChanged: (
-      state,
-      action: FieldValueAction<ColorFieldValue>
-    ) => {
+    fieldColorValueChanged: (state, action: FieldValueAction<ColorFieldValue>) => {
       fieldValueReducer(state, action, zColorFieldValue);
     },
-    fieldMainModelValueChanged: (
-      state,
-      action: FieldValueAction<MainModelFieldValue>
-    ) => {
+    fieldMainModelValueChanged: (state, action: FieldValueAction<MainModelFieldValue>) => {
       fieldValueReducer(state, action, zMainModelFieldValue);
     },
-    fieldRefinerModelValueChanged: (
-      state,
-      action: FieldValueAction<SDXLRefinerModelFieldValue>
-    ) => {
+    fieldRefinerModelValueChanged: (state, action: FieldValueAction<SDXLRefinerModelFieldValue>) => {
       fieldValueReducer(state, action, zSDXLRefinerModelFieldValue);
     },
-    fieldVaeModelValueChanged: (
-      state,
-      action: FieldValueAction<VAEModelFieldValue>
-    ) => {
+    fieldVaeModelValueChanged: (state, action: FieldValueAction<VAEModelFieldValue>) => {
       fieldValueReducer(state, action, zVAEModelFieldValue);
     },
-    fieldLoRAModelValueChanged: (
-      state,
-      action: FieldValueAction<LoRAModelFieldValue>
-    ) => {
+    fieldLoRAModelValueChanged: (state, action: FieldValueAction<LoRAModelFieldValue>) => {
       fieldValueReducer(state, action, zLoRAModelFieldValue);
     },
-    fieldControlNetModelValueChanged: (
-      state,
-      action: FieldValueAction<ControlNetModelFieldValue>
-    ) => {
+    fieldControlNetModelValueChanged: (state, action: FieldValueAction<ControlNetModelFieldValue>) => {
       fieldValueReducer(state, action, zControlNetModelFieldValue);
     },
-    fieldIPAdapterModelValueChanged: (
-      state,
-      action: FieldValueAction<IPAdapterModelFieldValue>
-    ) => {
+    fieldIPAdapterModelValueChanged: (state, action: FieldValueAction<IPAdapterModelFieldValue>) => {
       fieldValueReducer(state, action, zIPAdapterModelFieldValue);
     },
-    fieldT2IAdapterModelValueChanged: (
-      state,
-      action: FieldValueAction<T2IAdapterModelFieldValue>
-    ) => {
+    fieldT2IAdapterModelValueChanged: (state, action: FieldValueAction<T2IAdapterModelFieldValue>) => {
       fieldValueReducer(state, action, zT2IAdapterModelFieldValue);
     },
-    fieldEnumModelValueChanged: (
-      state,
-      action: FieldValueAction<EnumFieldValue>
-    ) => {
+    fieldEnumModelValueChanged: (state, action: FieldValueAction<EnumFieldValue>) => {
       fieldValueReducer(state, action, zEnumFieldValue);
     },
-    fieldSchedulerValueChanged: (
-      state,
-      action: FieldValueAction<SchedulerFieldValue>
-    ) => {
+    fieldSchedulerValueChanged: (state, action: FieldValueAction<SchedulerFieldValue>) => {
       fieldValueReducer(state, action, zSchedulerFieldValue);
     },
-    notesNodeValueChanged: (
-      state,
-      action: PayloadAction<{ nodeId: string; value: string }>
-    ) => {
+    notesNodeValueChanged: (state, action: PayloadAction<{ nodeId: string; value: string }>) => {
       const { nodeId, value } = action.payload;
       const nodeIndex = state.nodes.findIndex((n) => n.id === nodeId);
       const node = state.nodes?.[nodeIndex];
@@ -712,17 +592,12 @@ const nodesSlice = createSlice({
         });
       }
     },
-    selectionPasted: (
-      state,
-      action: PayloadAction<{ cursorPosition?: XYPosition }>
-    ) => {
+    selectionPasted: (state, action: PayloadAction<{ cursorPosition?: XYPosition }>) => {
       const { cursorPosition } = action.payload;
       const newNodes = state.nodesToCopy.map(cloneDeep);
       const oldNodeIds = newNodes.map((n) => n.data.id);
       const newEdges = state.edgesToCopy
-        .filter(
-          (e) => oldNodeIds.includes(e.source) && oldNodeIds.includes(e.target)
-        )
+        .filter((e) => oldNodeIds.includes(e.source) && oldNodeIds.includes(e.target))
         .map(cloneDeep);
 
       newEdges.forEach((e) => (e.selected = true));
@@ -772,15 +647,9 @@ const nodesSlice = createSlice({
         selected: false,
       }));
 
-      state.nodes = applyNodeChanges(
-        nodeAdditions.concat(nodeSelectionChanges),
-        state.nodes
-      );
+      state.nodes = applyNodeChanges(nodeAdditions.concat(nodeSelectionChanges), state.nodes);
 
-      state.edges = applyEdgeChanges(
-        edgeAdditions.concat(edgeSelectionChanges),
-        state.edges
-      );
+      state.edges = applyEdgeChanges(edgeAdditions.concat(edgeSelectionChanges), state.edges);
 
       newNodes.forEach((node) => {
         state.nodeExecutionStates[node.id] = {
@@ -804,9 +673,7 @@ const nodesSlice = createSlice({
       state.isAddNodePopoverOpen = !state.isAddNodePopoverOpen;
     },
     selectionModeChanged: (state, action: PayloadAction<boolean>) => {
-      state.selectionMode = action.payload
-        ? SelectionMode.Full
-        : SelectionMode.Partial;
+      state.selectionMode = action.payload ? SelectionMode.Full : SelectionMode.Partial;
     },
   },
   extraReducers: (builder) => {
@@ -828,9 +695,7 @@ const nodesSlice = createSlice({
         []
       );
 
-      state.nodeExecutionStates = nodes.reduce<
-        Record<string, NodeExecutionState>
-      >((acc, node) => {
+      state.nodeExecutionStates = nodes.reduce<Record<string, NodeExecutionState>>((acc, node) => {
         acc[node.id] = {
           nodeId: node.id,
           ...initialNodeExecutionState,
@@ -868,8 +733,7 @@ const nodesSlice = createSlice({
       }
     });
     builder.addCase(socketGeneratorProgress, (state, action) => {
-      const { source_node_id, step, total_steps, progress_image } =
-        action.payload.data;
+      const { source_node_id, step, total_steps, progress_image } = action.payload.data;
       const node = state.nodeExecutionStates[source_node_id];
       if (node) {
         node.status = zNodeStatus.enum.IN_PROGRESS;
diff --git a/invokeai/frontend/web/src/features/nodes/store/types.ts b/invokeai/frontend/web/src/features/nodes/store/types.ts
index 807ed87ed7..88ea97d480 100644
--- a/invokeai/frontend/web/src/features/nodes/store/types.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/types.ts
@@ -6,12 +6,7 @@ import type {
   NodeExecutionState,
 } from 'features/nodes/types/invocation';
 import type { WorkflowV2 } from 'features/nodes/types/workflow';
-import type {
-  OnConnectStartParams,
-  SelectionMode,
-  Viewport,
-  XYPosition,
-} from 'reactflow';
+import type { OnConnectStartParams, SelectionMode, Viewport, XYPosition } from 'reactflow';
 
 export type NodesState = {
   _version: 1;
diff --git a/invokeai/frontend/web/src/features/nodes/store/util/findConnectionToValidHandle.ts b/invokeai/frontend/web/src/features/nodes/store/util/findConnectionToValidHandle.ts
index 21b203aad4..49970a8f9e 100644
--- a/invokeai/frontend/web/src/features/nodes/store/util/findConnectionToValidHandle.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/util/findConnectionToValidHandle.ts
@@ -1,8 +1,4 @@
-import type {
-  FieldInputInstance,
-  FieldOutputInstance,
-  FieldType,
-} from 'features/nodes/types/field';
+import type { FieldInputInstance, FieldOutputInstance, FieldType } from 'features/nodes/types/field';
 import type { Connection, Edge, HandleType, Node } from 'reactflow';
 
 import { getIsGraphAcyclic } from './getIsGraphAcyclic';
@@ -54,31 +50,20 @@ export const findConnectionToValidHandle = (
     return null;
   }
 
-  const handles =
-    handleCurrentType == 'source' ? node.data.inputs : node.data.outputs;
+  const handles = handleCurrentType == 'source' ? node.data.inputs : node.data.outputs;
 
   //Prioritize handles whos name matches the node we're coming from
   if (handles[handleCurrentName]) {
     const handle = handles[handleCurrentName];
 
-    const sourceID =
-      handleCurrentType == 'source' ? handleCurrentNodeId : node.id;
-    const targetID =
-      handleCurrentType == 'source' ? node.id : handleCurrentNodeId;
-    const sourceHandle =
-      handleCurrentType == 'source' ? handleCurrentName : handle.name;
-    const targetHandle =
-      handleCurrentType == 'source' ? handle.name : handleCurrentName;
+    const sourceID = handleCurrentType == 'source' ? handleCurrentNodeId : node.id;
+    const targetID = handleCurrentType == 'source' ? node.id : handleCurrentNodeId;
+    const sourceHandle = handleCurrentType == 'source' ? handleCurrentName : handle.name;
+    const targetHandle = handleCurrentType == 'source' ? handle.name : handleCurrentName;
 
     const isGraphAcyclic = getIsGraphAcyclic(sourceID, targetID, nodes, edges);
 
-    const valid = isValidConnection(
-      edges,
-      handleCurrentType,
-      handleCurrentFieldType,
-      node,
-      handle
-    );
+    const valid = isValidConnection(edges, handleCurrentType, handleCurrentFieldType, node, handle);
 
     if (isGraphAcyclic && valid) {
       return {
@@ -93,24 +78,14 @@ export const findConnectionToValidHandle = (
   for (const handleName in handles) {
     const handle = handles[handleName];
 
-    const sourceID =
-      handleCurrentType == 'source' ? handleCurrentNodeId : node.id;
-    const targetID =
-      handleCurrentType == 'source' ? node.id : handleCurrentNodeId;
-    const sourceHandle =
-      handleCurrentType == 'source' ? handleCurrentName : handle.name;
-    const targetHandle =
-      handleCurrentType == 'source' ? handle.name : handleCurrentName;
+    const sourceID = handleCurrentType == 'source' ? handleCurrentNodeId : node.id;
+    const targetID = handleCurrentType == 'source' ? node.id : handleCurrentNodeId;
+    const sourceHandle = handleCurrentType == 'source' ? handleCurrentName : handle.name;
+    const targetHandle = handleCurrentType == 'source' ? handle.name : handleCurrentName;
 
     const isGraphAcyclic = getIsGraphAcyclic(sourceID, targetID, nodes, edges);
 
-    const valid = isValidConnection(
-      edges,
-      handleCurrentType,
-      handleCurrentFieldType,
-      node,
-      handle
-    );
+    const valid = isValidConnection(edges, handleCurrentType, handleCurrentFieldType, node, handle);
 
     if (isGraphAcyclic && valid) {
       return {
diff --git a/invokeai/frontend/web/src/features/nodes/store/util/getIsGraphAcyclic.ts b/invokeai/frontend/web/src/features/nodes/store/util/getIsGraphAcyclic.ts
index f9577dbe12..2ef1c64c0e 100644
--- a/invokeai/frontend/web/src/features/nodes/store/util/getIsGraphAcyclic.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/util/getIsGraphAcyclic.ts
@@ -1,12 +1,7 @@
 import graphlib from '@dagrejs/graphlib';
 import type { Edge, Node } from 'reactflow';
 
-export const getIsGraphAcyclic = (
-  source: string,
-  target: string,
-  nodes: Node[],
-  edges: Edge[]
-) => {
+export const getIsGraphAcyclic = (source: string, target: string, nodes: Node[], edges: Edge[]) => {
   // construct graphlib graph from editor state
   const g = new graphlib.Graph();
 
diff --git a/invokeai/frontend/web/src/features/nodes/store/util/makeIsConnectionValidSelector.ts b/invokeai/frontend/web/src/features/nodes/store/util/makeIsConnectionValidSelector.ts
index 6bdde218df..8575932cbd 100644
--- a/invokeai/frontend/web/src/features/nodes/store/util/makeIsConnectionValidSelector.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/util/makeIsConnectionValidSelector.ts
@@ -23,8 +23,7 @@ export const makeConnectionErrorSelector = (
       return i18n.t('nodes.noFieldType');
     }
 
-    const { connectionStartFieldType, connectionStartParams, nodes, edges } =
-      nodesSlice;
+    const { connectionStartFieldType, connectionStartParams, nodes, edges } = nodesSlice;
 
     if (!connectionStartParams || !connectionStartFieldType) {
       return i18n.t('nodes.noConnectionInProgress');
@@ -40,10 +39,8 @@ export const makeConnectionErrorSelector = (
       return i18n.t('nodes.noConnectionData');
     }
 
-    const targetType =
-      handleType === 'target' ? fieldType : connectionStartFieldType;
-    const sourceType =
-      handleType === 'source' ? fieldType : connectionStartFieldType;
+    const targetType = handleType === 'target' ? fieldType : connectionStartFieldType;
+    const sourceType = handleType === 'source' ? fieldType : connectionStartFieldType;
 
     if (nodeId === connectionNodeId) {
       return i18n.t('nodes.cannotConnectToSelf');
@@ -58,11 +55,9 @@ export const makeConnectionErrorSelector = (
 
     // we have to figure out which is the target and which is the source
     const target = handleType === 'target' ? nodeId : connectionNodeId;
-    const targetHandle =
-      handleType === 'target' ? fieldName : connectionFieldName;
+    const targetHandle = handleType === 'target' ? fieldName : connectionFieldName;
     const source = handleType === 'source' ? nodeId : connectionNodeId;
-    const sourceHandle =
-      handleType === 'source' ? fieldName : connectionFieldName;
+    const sourceHandle = handleType === 'source' ? fieldName : connectionFieldName;
 
     if (
       edges.find((edge) => {
diff --git a/invokeai/frontend/web/src/features/nodes/store/util/validateSourceAndTargetTypes.ts b/invokeai/frontend/web/src/features/nodes/store/util/validateSourceAndTargetTypes.ts
index 4448a4cbf4..3cbfb5b89c 100644
--- a/invokeai/frontend/web/src/features/nodes/store/util/validateSourceAndTargetTypes.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/util/validateSourceAndTargetTypes.ts
@@ -7,17 +7,11 @@ import { isEqual } from 'lodash-es';
  * @param targetType The type of the target field.
  * @returns True if the connection is valid, false otherwise.
  */
-export const validateSourceAndTargetTypes = (
-  sourceType: FieldType,
-  targetType: FieldType
-) => {
+export const validateSourceAndTargetTypes = (sourceType: FieldType, targetType: FieldType) => {
   // TODO: There's a bug with Collect -> Iterate nodes:
   // https://github.com/invoke-ai/InvokeAI/issues/3956
   // Once this is resolved, we can remove this check.
-  if (
-    sourceType.name === 'CollectionField' &&
-    targetType.name === 'CollectionField'
-  ) {
+  if (sourceType.name === 'CollectionField' && targetType.name === 'CollectionField') {
     return false;
   }
 
@@ -34,23 +28,18 @@ export const validateSourceAndTargetTypes = (
    * - Any Collection can connect to a Generic Collection
    */
 
-  const isCollectionItemToNonCollection =
-    sourceType.name === 'CollectionItemField' && !targetType.isCollection;
+  const isCollectionItemToNonCollection = sourceType.name === 'CollectionItemField' && !targetType.isCollection;
 
   const isNonCollectionToCollectionItem =
-    targetType.name === 'CollectionItemField' &&
-    !sourceType.isCollection &&
-    !sourceType.isCollectionOrScalar;
+    targetType.name === 'CollectionItemField' && !sourceType.isCollection && !sourceType.isCollectionOrScalar;
 
   const isAnythingToCollectionOrScalarOfSameBaseType =
     targetType.isCollectionOrScalar && sourceType.name === targetType.name;
 
   const isGenericCollectionToAnyCollectionOrCollectionOrScalar =
-    sourceType.name === 'CollectionField' &&
-    (targetType.isCollection || targetType.isCollectionOrScalar);
+    sourceType.name === 'CollectionField' && (targetType.isCollection || targetType.isCollectionOrScalar);
 
-  const isCollectionToGenericCollection =
-    targetType.name === 'CollectionField' && sourceType.isCollection;
+  const isCollectionToGenericCollection = targetType.name === 'CollectionField' && sourceType.isCollection;
 
   const areBothTypesSingle =
     !sourceType.isCollection &&
@@ -58,10 +47,7 @@ export const validateSourceAndTargetTypes = (
     !targetType.isCollection &&
     !targetType.isCollectionOrScalar;
 
-  const isIntToFloat =
-    areBothTypesSingle &&
-    sourceType.name === 'IntegerField' &&
-    targetType.name === 'FloatField';
+  const isIntToFloat = areBothTypesSingle && sourceType.name === 'IntegerField' && targetType.name === 'FloatField';
 
   const isIntOrFloatToString =
     areBothTypesSingle &&
diff --git a/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts b/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
index 5c437679fa..5f6859c623 100644
--- a/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
@@ -2,11 +2,7 @@ import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 import type { RootState } from 'app/store/store';
 import { workflowLoaded } from 'features/nodes/store/actions';
-import {
-  isAnyNodeOrEdgeMutation,
-  nodeEditorReset,
-  nodesDeleted,
-} from 'features/nodes/store/nodesSlice';
+import { isAnyNodeOrEdgeMutation, nodeEditorReset, nodesDeleted } from 'features/nodes/store/nodesSlice';
 import type { WorkflowsState as WorkflowState } from 'features/nodes/store/types';
 import type { FieldIdentifier } from 'features/nodes/types/field';
 import type { WorkflowV2 } from 'features/nodes/types/workflow';
@@ -35,23 +31,15 @@ const workflowSlice = createSlice({
   name: 'workflow',
   initialState: initialWorkflowState,
   reducers: {
-    workflowExposedFieldAdded: (
-      state,
-      action: PayloadAction<FieldIdentifier>
-    ) => {
+    workflowExposedFieldAdded: (state, action: PayloadAction<FieldIdentifier>) => {
       state.exposedFields = uniqBy(
         state.exposedFields.concat(action.payload),
         (field) => `${field.nodeId}-${field.fieldName}`
       );
       state.isTouched = true;
     },
-    workflowExposedFieldRemoved: (
-      state,
-      action: PayloadAction<FieldIdentifier>
-    ) => {
-      state.exposedFields = state.exposedFields.filter(
-        (field) => !isEqual(field, action.payload)
-      );
+    workflowExposedFieldRemoved: (state, action: PayloadAction<FieldIdentifier>) => {
+      state.exposedFields = state.exposedFields.filter((field) => !isEqual(field, action.payload));
       state.isTouched = true;
     },
     workflowNameChanged: (state, action: PayloadAction<string>) => {
@@ -98,9 +86,7 @@ const workflowSlice = createSlice({
 
     builder.addCase(nodesDeleted, (state, action) => {
       action.payload.forEach((node) => {
-        state.exposedFields = state.exposedFields.filter(
-          (f) => f.nodeId !== node.id
-        );
+        state.exposedFields = state.exposedFields.filter((f) => f.nodeId !== node.id);
       });
     });
 
diff --git a/invokeai/frontend/web/src/features/nodes/types/common.ts b/invokeai/frontend/web/src/features/nodes/types/common.ts
index c3cb758c87..b524474379 100644
--- a/invokeai/frontend/web/src/features/nodes/types/common.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/common.ts
@@ -51,20 +51,8 @@ export type SchedulerField = z.infer<typeof zSchedulerField>;
 // #endregion
 
 // #region Model-related schemas
-export const zBaseModel = z.enum([
-  'any',
-  'sd-1',
-  'sd-2',
-  'sdxl',
-  'sdxl-refiner',
-]);
-export const zModelType = z.enum([
-  'main',
-  'vae',
-  'lora',
-  'controlnet',
-  'embedding',
-]);
+export const zBaseModel = z.enum(['any', 'sd-1', 'sd-2', 'sdxl', 'sdxl-refiner']);
+export const zModelType = z.enum(['main', 'vae', 'lora', 'controlnet', 'embedding']);
 export const zModelName = z.string().min(3);
 export const zModelIdentifier = z.object({
   model_name: zModelName,
@@ -154,12 +142,8 @@ export const zControlField = z.object({
   control_weight: z.union([z.number(), z.array(z.number())]).optional(),
   begin_step_percent: z.number().optional(),
   end_step_percent: z.number().optional(),
-  control_mode: z
-    .enum(['balanced', 'more_prompt', 'more_control', 'unbalanced'])
-    .optional(),
-  resize_mode: z
-    .enum(['just_resize', 'crop_resize', 'fill_resize', 'just_resize_simple'])
-    .optional(),
+  control_mode: z.enum(['balanced', 'more_prompt', 'more_control', 'unbalanced']).optional(),
+  resize_mode: z.enum(['just_resize', 'crop_resize', 'fill_resize', 'just_resize_simple']).optional(),
 });
 export type ControlField = z.infer<typeof zControlField>;
 
@@ -178,9 +162,7 @@ export const zT2IAdapterField = z.object({
   weight: z.union([z.number(), z.array(z.number())]).optional(),
   begin_step_percent: z.number().optional(),
   end_step_percent: z.number().optional(),
-  resize_mode: z
-    .enum(['just_resize', 'crop_resize', 'fill_resize', 'just_resize_simple'])
-    .optional(),
+  resize_mode: z.enum(['just_resize', 'crop_resize', 'fill_resize', 'just_resize_simple']).optional(),
 });
 export type T2IAdapterField = z.infer<typeof zT2IAdapterField>;
 // #endregion
@@ -202,6 +184,5 @@ export const zImageOutput = z.object({
   type: z.literal('image_output'),
 });
 export type ImageOutput = z.infer<typeof zImageOutput>;
-export const isImageOutput = (output: unknown): output is ImageOutput =>
-  zImageOutput.safeParse(output).success;
+export const isImageOutput = (output: unknown): output is ImageOutput => zImageOutput.safeParse(output).success;
 // #endregion
diff --git a/invokeai/frontend/web/src/features/nodes/types/field.ts b/invokeai/frontend/web/src/features/nodes/types/field.ts
index 027817badf..38f1af55dd 100644
--- a/invokeai/frontend/web/src/features/nodes/types/field.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/field.ts
@@ -93,8 +93,7 @@ export const zFieldIdentifier = z.object({
   fieldName: z.string().trim().min(1),
 });
 export type FieldIdentifier = z.infer<typeof zFieldIdentifier>;
-export const isFieldIdentifier = (val: unknown): val is FieldIdentifier =>
-  zFieldIdentifier.safeParse(val).success;
+export const isFieldIdentifier = (val: unknown): val is FieldIdentifier => zFieldIdentifier.safeParse(val).success;
 // #endregion
 
 // #region IntegerField
@@ -123,19 +122,11 @@ export const zIntegerFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 });
 export type IntegerFieldType = z.infer<typeof zIntegerFieldType>;
 export type IntegerFieldValue = z.infer<typeof zIntegerFieldValue>;
-export type IntegerFieldInputInstance = z.infer<
-  typeof zIntegerFieldInputInstance
->;
-export type IntegerFieldInputTemplate = z.infer<
-  typeof zIntegerFieldInputTemplate
->;
-export const isIntegerFieldInputInstance = (
-  val: unknown
-): val is IntegerFieldInputInstance =>
+export type IntegerFieldInputInstance = z.infer<typeof zIntegerFieldInputInstance>;
+export type IntegerFieldInputTemplate = z.infer<typeof zIntegerFieldInputTemplate>;
+export const isIntegerFieldInputInstance = (val: unknown): val is IntegerFieldInputInstance =>
   zIntegerFieldInputInstance.safeParse(val).success;
-export const isIntegerFieldInputTemplate = (
-  val: unknown
-): val is IntegerFieldInputTemplate =>
+export const isIntegerFieldInputTemplate = (val: unknown): val is IntegerFieldInputTemplate =>
   zIntegerFieldInputTemplate.safeParse(val).success;
 // #endregion
 
@@ -166,20 +157,12 @@ export const zFloatFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 export type FloatFieldType = z.infer<typeof zFloatFieldType>;
 export type FloatFieldValue = z.infer<typeof zFloatFieldValue>;
 export type FloatFieldInputInstance = z.infer<typeof zFloatFieldInputInstance>;
-export type FloatFieldOutputInstance = z.infer<
-  typeof zFloatFieldOutputInstance
->;
+export type FloatFieldOutputInstance = z.infer<typeof zFloatFieldOutputInstance>;
 export type FloatFieldInputTemplate = z.infer<typeof zFloatFieldInputTemplate>;
-export type FloatFieldOutputTemplate = z.infer<
-  typeof zFloatFieldOutputTemplate
->;
-export const isFloatFieldInputInstance = (
-  val: unknown
-): val is FloatFieldInputInstance =>
+export type FloatFieldOutputTemplate = z.infer<typeof zFloatFieldOutputTemplate>;
+export const isFloatFieldInputInstance = (val: unknown): val is FloatFieldInputInstance =>
   zFloatFieldInputInstance.safeParse(val).success;
-export const isFloatFieldInputTemplate = (
-  val: unknown
-): val is FloatFieldInputTemplate =>
+export const isFloatFieldInputTemplate = (val: unknown): val is FloatFieldInputTemplate =>
   zFloatFieldInputTemplate.safeParse(val).success;
 // #endregion
 
@@ -207,25 +190,13 @@ export const zStringFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 
 export type StringFieldType = z.infer<typeof zStringFieldType>;
 export type StringFieldValue = z.infer<typeof zStringFieldValue>;
-export type StringFieldInputInstance = z.infer<
-  typeof zStringFieldInputInstance
->;
-export type StringFieldOutputInstance = z.infer<
-  typeof zStringFieldOutputInstance
->;
-export type StringFieldInputTemplate = z.infer<
-  typeof zStringFieldInputTemplate
->;
-export type StringFieldOutputTemplate = z.infer<
-  typeof zStringFieldOutputTemplate
->;
-export const isStringFieldInputInstance = (
-  val: unknown
-): val is StringFieldInputInstance =>
+export type StringFieldInputInstance = z.infer<typeof zStringFieldInputInstance>;
+export type StringFieldOutputInstance = z.infer<typeof zStringFieldOutputInstance>;
+export type StringFieldInputTemplate = z.infer<typeof zStringFieldInputTemplate>;
+export type StringFieldOutputTemplate = z.infer<typeof zStringFieldOutputTemplate>;
+export const isStringFieldInputInstance = (val: unknown): val is StringFieldInputInstance =>
   zStringFieldInputInstance.safeParse(val).success;
-export const isStringFieldInputTemplate = (
-  val: unknown
-): val is StringFieldInputTemplate =>
+export const isStringFieldInputTemplate = (val: unknown): val is StringFieldInputTemplate =>
   zStringFieldInputTemplate.safeParse(val).success;
 // #endregion
 
@@ -250,25 +221,13 @@ export const zBooleanFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 });
 export type BooleanFieldType = z.infer<typeof zBooleanFieldType>;
 export type BooleanFieldValue = z.infer<typeof zBooleanFieldValue>;
-export type BooleanFieldInputInstance = z.infer<
-  typeof zBooleanFieldInputInstance
->;
-export type BooleanFieldOutputInstance = z.infer<
-  typeof zBooleanFieldOutputInstance
->;
-export type BooleanFieldInputTemplate = z.infer<
-  typeof zBooleanFieldInputTemplate
->;
-export type BooleanFieldOutputTemplate = z.infer<
-  typeof zBooleanFieldOutputTemplate
->;
-export const isBooleanFieldInputInstance = (
-  val: unknown
-): val is BooleanFieldInputInstance =>
+export type BooleanFieldInputInstance = z.infer<typeof zBooleanFieldInputInstance>;
+export type BooleanFieldOutputInstance = z.infer<typeof zBooleanFieldOutputInstance>;
+export type BooleanFieldInputTemplate = z.infer<typeof zBooleanFieldInputTemplate>;
+export type BooleanFieldOutputTemplate = z.infer<typeof zBooleanFieldOutputTemplate>;
+export const isBooleanFieldInputInstance = (val: unknown): val is BooleanFieldInputInstance =>
   zBooleanFieldInputInstance.safeParse(val).success;
-export const isBooleanFieldInputTemplate = (
-  val: unknown
-): val is BooleanFieldInputTemplate =>
+export const isBooleanFieldInputTemplate = (val: unknown): val is BooleanFieldInputTemplate =>
   zBooleanFieldInputTemplate.safeParse(val).success;
 // #endregion
 
@@ -299,13 +258,9 @@ export type EnumFieldInputInstance = z.infer<typeof zEnumFieldInputInstance>;
 export type EnumFieldOutputInstance = z.infer<typeof zEnumFieldOutputInstance>;
 export type EnumFieldInputTemplate = z.infer<typeof zEnumFieldInputTemplate>;
 export type EnumFieldOutputTemplate = z.infer<typeof zEnumFieldOutputTemplate>;
-export const isEnumFieldInputInstance = (
-  val: unknown
-): val is EnumFieldInputInstance =>
+export const isEnumFieldInputInstance = (val: unknown): val is EnumFieldInputInstance =>
   zEnumFieldInputInstance.safeParse(val).success;
-export const isEnumFieldInputTemplate = (
-  val: unknown
-): val is EnumFieldInputTemplate =>
+export const isEnumFieldInputTemplate = (val: unknown): val is EnumFieldInputTemplate =>
   zEnumFieldInputTemplate.safeParse(val).success;
 // #endregion
 
@@ -331,20 +286,12 @@ export const zImageFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 export type ImageFieldType = z.infer<typeof zImageFieldType>;
 export type ImageFieldValue = z.infer<typeof zImageFieldValue>;
 export type ImageFieldInputInstance = z.infer<typeof zImageFieldInputInstance>;
-export type ImageFieldOutputInstance = z.infer<
-  typeof zImageFieldOutputInstance
->;
+export type ImageFieldOutputInstance = z.infer<typeof zImageFieldOutputInstance>;
 export type ImageFieldInputTemplate = z.infer<typeof zImageFieldInputTemplate>;
-export type ImageFieldOutputTemplate = z.infer<
-  typeof zImageFieldOutputTemplate
->;
-export const isImageFieldInputInstance = (
-  val: unknown
-): val is ImageFieldInputInstance =>
+export type ImageFieldOutputTemplate = z.infer<typeof zImageFieldOutputTemplate>;
+export const isImageFieldInputInstance = (val: unknown): val is ImageFieldInputInstance =>
   zImageFieldInputInstance.safeParse(val).success;
-export const isImageFieldInputTemplate = (
-  val: unknown
-): val is ImageFieldInputTemplate =>
+export const isImageFieldInputTemplate = (val: unknown): val is ImageFieldInputTemplate =>
   zImageFieldInputTemplate.safeParse(val).success;
 // #endregion
 
@@ -370,20 +317,12 @@ export const zBoardFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 export type BoardFieldType = z.infer<typeof zBoardFieldType>;
 export type BoardFieldValue = z.infer<typeof zBoardFieldValue>;
 export type BoardFieldInputInstance = z.infer<typeof zBoardFieldInputInstance>;
-export type BoardFieldOutputInstance = z.infer<
-  typeof zBoardFieldOutputInstance
->;
+export type BoardFieldOutputInstance = z.infer<typeof zBoardFieldOutputInstance>;
 export type BoardFieldInputTemplate = z.infer<typeof zBoardFieldInputTemplate>;
-export type BoardFieldOutputTemplate = z.infer<
-  typeof zBoardFieldOutputTemplate
->;
-export const isBoardFieldInputInstance = (
-  val: unknown
-): val is BoardFieldInputInstance =>
+export type BoardFieldOutputTemplate = z.infer<typeof zBoardFieldOutputTemplate>;
+export const isBoardFieldInputInstance = (val: unknown): val is BoardFieldInputInstance =>
   zBoardFieldInputInstance.safeParse(val).success;
-export const isBoardFieldInputTemplate = (
-  val: unknown
-): val is BoardFieldInputTemplate =>
+export const isBoardFieldInputTemplate = (val: unknown): val is BoardFieldInputTemplate =>
   zBoardFieldInputTemplate.safeParse(val).success;
 // #endregion
 
@@ -409,20 +348,12 @@ export const zColorFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 export type ColorFieldType = z.infer<typeof zColorFieldType>;
 export type ColorFieldValue = z.infer<typeof zColorFieldValue>;
 export type ColorFieldInputInstance = z.infer<typeof zColorFieldInputInstance>;
-export type ColorFieldOutputInstance = z.infer<
-  typeof zColorFieldOutputInstance
->;
+export type ColorFieldOutputInstance = z.infer<typeof zColorFieldOutputInstance>;
 export type ColorFieldInputTemplate = z.infer<typeof zColorFieldInputTemplate>;
-export type ColorFieldOutputTemplate = z.infer<
-  typeof zColorFieldOutputTemplate
->;
-export const isColorFieldInputInstance = (
-  val: unknown
-): val is ColorFieldInputInstance =>
+export type ColorFieldOutputTemplate = z.infer<typeof zColorFieldOutputTemplate>;
+export const isColorFieldInputInstance = (val: unknown): val is ColorFieldInputInstance =>
   zColorFieldInputInstance.safeParse(val).success;
-export const isColorFieldInputTemplate = (
-  val: unknown
-): val is ColorFieldInputTemplate =>
+export const isColorFieldInputTemplate = (val: unknown): val is ColorFieldInputTemplate =>
   zColorFieldInputTemplate.safeParse(val).success;
 // #endregion
 
@@ -447,25 +378,13 @@ export const zMainModelFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 });
 export type MainModelFieldType = z.infer<typeof zMainModelFieldType>;
 export type MainModelFieldValue = z.infer<typeof zMainModelFieldValue>;
-export type MainModelFieldInputInstance = z.infer<
-  typeof zMainModelFieldInputInstance
->;
-export type MainModelFieldOutputInstance = z.infer<
-  typeof zMainModelFieldOutputInstance
->;
-export type MainModelFieldInputTemplate = z.infer<
-  typeof zMainModelFieldInputTemplate
->;
-export type MainModelFieldOutputTemplate = z.infer<
-  typeof zMainModelFieldOutputTemplate
->;
-export const isMainModelFieldInputInstance = (
-  val: unknown
-): val is MainModelFieldInputInstance =>
+export type MainModelFieldInputInstance = z.infer<typeof zMainModelFieldInputInstance>;
+export type MainModelFieldOutputInstance = z.infer<typeof zMainModelFieldOutputInstance>;
+export type MainModelFieldInputTemplate = z.infer<typeof zMainModelFieldInputTemplate>;
+export type MainModelFieldOutputTemplate = z.infer<typeof zMainModelFieldOutputTemplate>;
+export const isMainModelFieldInputInstance = (val: unknown): val is MainModelFieldInputInstance =>
   zMainModelFieldInputInstance.safeParse(val).success;
-export const isMainModelFieldInputTemplate = (
-  val: unknown
-): val is MainModelFieldInputTemplate =>
+export const isMainModelFieldInputTemplate = (val: unknown): val is MainModelFieldInputTemplate =>
   zMainModelFieldInputTemplate.safeParse(val).success;
 // #endregion
 
@@ -478,39 +397,25 @@ export const zSDXLMainModelFieldInputInstance = zFieldInputInstanceBase.extend({
   type: zSDXLMainModelFieldType,
   value: zSDXLMainModelFieldValue,
 });
-export const zSDXLMainModelFieldOutputInstance =
-  zFieldOutputInstanceBase.extend({
-    type: zSDXLMainModelFieldType,
-  });
+export const zSDXLMainModelFieldOutputInstance = zFieldOutputInstanceBase.extend({
+  type: zSDXLMainModelFieldType,
+});
 export const zSDXLMainModelFieldInputTemplate = zFieldInputTemplateBase.extend({
   type: zSDXLMainModelFieldType,
   default: zSDXLMainModelFieldValue,
 });
-export const zSDXLMainModelFieldOutputTemplate =
-  zFieldOutputTemplateBase.extend({
-    type: zSDXLMainModelFieldType,
-  });
+export const zSDXLMainModelFieldOutputTemplate = zFieldOutputTemplateBase.extend({
+  type: zSDXLMainModelFieldType,
+});
 export type SDXLMainModelFieldType = z.infer<typeof zSDXLMainModelFieldType>;
 export type SDXLMainModelFieldValue = z.infer<typeof zSDXLMainModelFieldValue>;
-export type SDXLMainModelFieldInputInstance = z.infer<
-  typeof zSDXLMainModelFieldInputInstance
->;
-export type SDXLMainModelFieldOutputInstance = z.infer<
-  typeof zSDXLMainModelFieldOutputInstance
->;
-export type SDXLMainModelFieldInputTemplate = z.infer<
-  typeof zSDXLMainModelFieldInputTemplate
->;
-export type SDXLMainModelFieldOutputTemplate = z.infer<
-  typeof zSDXLMainModelFieldOutputTemplate
->;
-export const isSDXLMainModelFieldInputInstance = (
-  val: unknown
-): val is SDXLMainModelFieldInputInstance =>
+export type SDXLMainModelFieldInputInstance = z.infer<typeof zSDXLMainModelFieldInputInstance>;
+export type SDXLMainModelFieldOutputInstance = z.infer<typeof zSDXLMainModelFieldOutputInstance>;
+export type SDXLMainModelFieldInputTemplate = z.infer<typeof zSDXLMainModelFieldInputTemplate>;
+export type SDXLMainModelFieldOutputTemplate = z.infer<typeof zSDXLMainModelFieldOutputTemplate>;
+export const isSDXLMainModelFieldInputInstance = (val: unknown): val is SDXLMainModelFieldInputInstance =>
   zSDXLMainModelFieldInputInstance.safeParse(val).success;
-export const isSDXLMainModelFieldInputTemplate = (
-  val: unknown
-): val is SDXLMainModelFieldInputTemplate =>
+export const isSDXLMainModelFieldInputTemplate = (val: unknown): val is SDXLMainModelFieldInputTemplate =>
   zSDXLMainModelFieldInputTemplate.safeParse(val).success;
 // #endregion
 
@@ -519,49 +424,29 @@ export const zSDXLRefinerModelFieldType = zFieldTypeBase.extend({
   name: z.literal('SDXLRefinerModelField'),
 });
 export const zSDXLRefinerModelFieldValue = zMainModelFieldValue; // TODO: Narrow to SDXL Refiner models only.
-export const zSDXLRefinerModelFieldInputInstance =
-  zFieldInputInstanceBase.extend({
-    type: zSDXLRefinerModelFieldType,
-    value: zSDXLRefinerModelFieldValue,
-  });
-export const zSDXLRefinerModelFieldOutputInstance =
-  zFieldOutputInstanceBase.extend({
-    type: zSDXLRefinerModelFieldType,
-  });
-export const zSDXLRefinerModelFieldInputTemplate =
-  zFieldInputTemplateBase.extend({
-    type: zSDXLRefinerModelFieldType,
-    default: zSDXLRefinerModelFieldValue,
-  });
-export const zSDXLRefinerModelFieldOutputTemplate =
-  zFieldOutputTemplateBase.extend({
-    type: zSDXLRefinerModelFieldType,
-  });
-export type SDXLRefinerModelFieldType = z.infer<
-  typeof zSDXLRefinerModelFieldType
->;
-export type SDXLRefinerModelFieldValue = z.infer<
-  typeof zSDXLRefinerModelFieldValue
->;
-export type SDXLRefinerModelFieldInputInstance = z.infer<
-  typeof zSDXLRefinerModelFieldInputInstance
->;
-export type SDXLRefinerModelFieldOutputInstance = z.infer<
-  typeof zSDXLRefinerModelFieldOutputInstance
->;
-export type SDXLRefinerModelFieldInputTemplate = z.infer<
-  typeof zSDXLRefinerModelFieldInputTemplate
->;
-export type SDXLRefinerModelFieldOutputTemplate = z.infer<
-  typeof zSDXLRefinerModelFieldOutputTemplate
->;
-export const isSDXLRefinerModelFieldInputInstance = (
-  val: unknown
-): val is SDXLRefinerModelFieldInputInstance =>
+export const zSDXLRefinerModelFieldInputInstance = zFieldInputInstanceBase.extend({
+  type: zSDXLRefinerModelFieldType,
+  value: zSDXLRefinerModelFieldValue,
+});
+export const zSDXLRefinerModelFieldOutputInstance = zFieldOutputInstanceBase.extend({
+  type: zSDXLRefinerModelFieldType,
+});
+export const zSDXLRefinerModelFieldInputTemplate = zFieldInputTemplateBase.extend({
+  type: zSDXLRefinerModelFieldType,
+  default: zSDXLRefinerModelFieldValue,
+});
+export const zSDXLRefinerModelFieldOutputTemplate = zFieldOutputTemplateBase.extend({
+  type: zSDXLRefinerModelFieldType,
+});
+export type SDXLRefinerModelFieldType = z.infer<typeof zSDXLRefinerModelFieldType>;
+export type SDXLRefinerModelFieldValue = z.infer<typeof zSDXLRefinerModelFieldValue>;
+export type SDXLRefinerModelFieldInputInstance = z.infer<typeof zSDXLRefinerModelFieldInputInstance>;
+export type SDXLRefinerModelFieldOutputInstance = z.infer<typeof zSDXLRefinerModelFieldOutputInstance>;
+export type SDXLRefinerModelFieldInputTemplate = z.infer<typeof zSDXLRefinerModelFieldInputTemplate>;
+export type SDXLRefinerModelFieldOutputTemplate = z.infer<typeof zSDXLRefinerModelFieldOutputTemplate>;
+export const isSDXLRefinerModelFieldInputInstance = (val: unknown): val is SDXLRefinerModelFieldInputInstance =>
   zSDXLRefinerModelFieldInputInstance.safeParse(val).success;
-export const isSDXLRefinerModelFieldInputTemplate = (
-  val: unknown
-): val is SDXLRefinerModelFieldInputTemplate =>
+export const isSDXLRefinerModelFieldInputTemplate = (val: unknown): val is SDXLRefinerModelFieldInputTemplate =>
   zSDXLRefinerModelFieldInputTemplate.safeParse(val).success;
 // #endregion
 
@@ -586,25 +471,13 @@ export const zVAEModelFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 });
 export type VAEModelFieldType = z.infer<typeof zVAEModelFieldType>;
 export type VAEModelFieldValue = z.infer<typeof zVAEModelFieldValue>;
-export type VAEModelFieldInputInstance = z.infer<
-  typeof zVAEModelFieldInputInstance
->;
-export type VAEModelFieldOutputInstance = z.infer<
-  typeof zVAEModelFieldOutputInstance
->;
-export type VAEModelFieldInputTemplate = z.infer<
-  typeof zVAEModelFieldInputTemplate
->;
-export type VAEModelFieldOutputTemplate = z.infer<
-  typeof zVAEModelFieldOutputTemplate
->;
-export const isVAEModelFieldInputInstance = (
-  val: unknown
-): val is VAEModelFieldInputInstance =>
+export type VAEModelFieldInputInstance = z.infer<typeof zVAEModelFieldInputInstance>;
+export type VAEModelFieldOutputInstance = z.infer<typeof zVAEModelFieldOutputInstance>;
+export type VAEModelFieldInputTemplate = z.infer<typeof zVAEModelFieldInputTemplate>;
+export type VAEModelFieldOutputTemplate = z.infer<typeof zVAEModelFieldOutputTemplate>;
+export const isVAEModelFieldInputInstance = (val: unknown): val is VAEModelFieldInputInstance =>
   zVAEModelFieldInputInstance.safeParse(val).success;
-export const isVAEModelFieldInputTemplate = (
-  val: unknown
-): val is VAEModelFieldInputTemplate =>
+export const isVAEModelFieldInputTemplate = (val: unknown): val is VAEModelFieldInputTemplate =>
   zVAEModelFieldInputTemplate.safeParse(val).success;
 // #endregion
 
@@ -629,25 +502,13 @@ export const zLoRAModelFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 });
 export type LoRAModelFieldType = z.infer<typeof zLoRAModelFieldType>;
 export type LoRAModelFieldValue = z.infer<typeof zLoRAModelFieldValue>;
-export type LoRAModelFieldInputInstance = z.infer<
-  typeof zLoRAModelFieldInputInstance
->;
-export type LoRAModelFieldOutputInstance = z.infer<
-  typeof zLoRAModelFieldOutputInstance
->;
-export type LoRAModelFieldInputTemplate = z.infer<
-  typeof zLoRAModelFieldInputTemplate
->;
-export type LoRAModelFieldOutputTemplate = z.infer<
-  typeof zLoRAModelFieldOutputTemplate
->;
-export const isLoRAModelFieldInputInstance = (
-  val: unknown
-): val is LoRAModelFieldInputInstance =>
+export type LoRAModelFieldInputInstance = z.infer<typeof zLoRAModelFieldInputInstance>;
+export type LoRAModelFieldOutputInstance = z.infer<typeof zLoRAModelFieldOutputInstance>;
+export type LoRAModelFieldInputTemplate = z.infer<typeof zLoRAModelFieldInputTemplate>;
+export type LoRAModelFieldOutputTemplate = z.infer<typeof zLoRAModelFieldOutputTemplate>;
+export const isLoRAModelFieldInputInstance = (val: unknown): val is LoRAModelFieldInputInstance =>
   zLoRAModelFieldInputInstance.safeParse(val).success;
-export const isLoRAModelFieldInputTemplate = (
-  val: unknown
-): val is LoRAModelFieldInputTemplate =>
+export const isLoRAModelFieldInputTemplate = (val: unknown): val is LoRAModelFieldInputTemplate =>
   zLoRAModelFieldInputTemplate.safeParse(val).success;
 // #endregion
 
@@ -656,53 +517,31 @@ export const zControlNetModelFieldType = zFieldTypeBase.extend({
   name: z.literal('ControlNetModelField'),
 });
 export const zControlNetModelFieldValue = zControlNetModelField.optional();
-export const zControlNetModelFieldInputInstance =
-  zFieldInputInstanceBase.extend({
-    type: zControlNetModelFieldType,
-    value: zControlNetModelFieldValue,
-  });
-export const zControlNetModelFieldOutputInstance =
-  zFieldOutputInstanceBase.extend({
-    type: zControlNetModelFieldType,
-  });
-export const zControlNetModelFieldInputTemplate =
-  zFieldInputTemplateBase.extend({
-    type: zControlNetModelFieldType,
-    default: zControlNetModelFieldValue,
-  });
-export const zControlNetModelFieldOutputTemplate =
-  zFieldOutputTemplateBase.extend({
-    type: zControlNetModelFieldType,
-  });
-export type ControlNetModelFieldType = z.infer<
-  typeof zControlNetModelFieldType
->;
-export type ControlNetModelFieldValue = z.infer<
-  typeof zControlNetModelFieldValue
->;
-export type ControlNetModelFieldInputInstance = z.infer<
-  typeof zControlNetModelFieldInputInstance
->;
-export type ControlNetModelFieldOutputInstance = z.infer<
-  typeof zControlNetModelFieldOutputInstance
->;
-export type ControlNetModelFieldInputTemplate = z.infer<
-  typeof zControlNetModelFieldInputTemplate
->;
-export type ControlNetModelFieldOutputTemplate = z.infer<
-  typeof zControlNetModelFieldOutputTemplate
->;
-export const isControlNetModelFieldInputInstance = (
-  val: unknown
-): val is ControlNetModelFieldInputInstance =>
+export const zControlNetModelFieldInputInstance = zFieldInputInstanceBase.extend({
+  type: zControlNetModelFieldType,
+  value: zControlNetModelFieldValue,
+});
+export const zControlNetModelFieldOutputInstance = zFieldOutputInstanceBase.extend({
+  type: zControlNetModelFieldType,
+});
+export const zControlNetModelFieldInputTemplate = zFieldInputTemplateBase.extend({
+  type: zControlNetModelFieldType,
+  default: zControlNetModelFieldValue,
+});
+export const zControlNetModelFieldOutputTemplate = zFieldOutputTemplateBase.extend({
+  type: zControlNetModelFieldType,
+});
+export type ControlNetModelFieldType = z.infer<typeof zControlNetModelFieldType>;
+export type ControlNetModelFieldValue = z.infer<typeof zControlNetModelFieldValue>;
+export type ControlNetModelFieldInputInstance = z.infer<typeof zControlNetModelFieldInputInstance>;
+export type ControlNetModelFieldOutputInstance = z.infer<typeof zControlNetModelFieldOutputInstance>;
+export type ControlNetModelFieldInputTemplate = z.infer<typeof zControlNetModelFieldInputTemplate>;
+export type ControlNetModelFieldOutputTemplate = z.infer<typeof zControlNetModelFieldOutputTemplate>;
+export const isControlNetModelFieldInputInstance = (val: unknown): val is ControlNetModelFieldInputInstance =>
   zControlNetModelFieldInputInstance.safeParse(val).success;
-export const isControlNetModelFieldInputTemplate = (
-  val: unknown
-): val is ControlNetModelFieldInputTemplate =>
+export const isControlNetModelFieldInputTemplate = (val: unknown): val is ControlNetModelFieldInputTemplate =>
   zControlNetModelFieldInputTemplate.safeParse(val).success;
-export const isControlNetModelFieldValue = (
-  v: unknown
-): v is ControlNetModelFieldValue =>
+export const isControlNetModelFieldValue = (v: unknown): v is ControlNetModelFieldValue =>
   zControlNetModelFieldValue.safeParse(v).success;
 // #endregion
 
@@ -711,50 +550,31 @@ export const zIPAdapterModelFieldType = zFieldTypeBase.extend({
   name: z.literal('IPAdapterModelField'),
 });
 export const zIPAdapterModelFieldValue = zIPAdapterModelField.optional();
-export const zIPAdapterModelFieldInputInstance = zFieldInputInstanceBase.extend(
-  {
-    type: zIPAdapterModelFieldType,
-    value: zIPAdapterModelFieldValue,
-  }
-);
-export const zIPAdapterModelFieldOutputInstance =
-  zFieldOutputInstanceBase.extend({
-    type: zIPAdapterModelFieldType,
-  });
-export const zIPAdapterModelFieldInputTemplate = zFieldInputTemplateBase.extend(
-  { type: zIPAdapterModelFieldType, default: zIPAdapterModelFieldValue }
-);
-export const zIPAdapterModelFieldOutputTemplate =
-  zFieldOutputTemplateBase.extend({
-    type: zIPAdapterModelFieldType,
-  });
+export const zIPAdapterModelFieldInputInstance = zFieldInputInstanceBase.extend({
+  type: zIPAdapterModelFieldType,
+  value: zIPAdapterModelFieldValue,
+});
+export const zIPAdapterModelFieldOutputInstance = zFieldOutputInstanceBase.extend({
+  type: zIPAdapterModelFieldType,
+});
+export const zIPAdapterModelFieldInputTemplate = zFieldInputTemplateBase.extend({
+  type: zIPAdapterModelFieldType,
+  default: zIPAdapterModelFieldValue,
+});
+export const zIPAdapterModelFieldOutputTemplate = zFieldOutputTemplateBase.extend({
+  type: zIPAdapterModelFieldType,
+});
 export type IPAdapterModelFieldType = z.infer<typeof zIPAdapterModelFieldType>;
-export type IPAdapterModelFieldValue = z.infer<
-  typeof zIPAdapterModelFieldValue
->;
-export type IPAdapterModelFieldInputInstance = z.infer<
-  typeof zIPAdapterModelFieldInputInstance
->;
-export type IPAdapterModelFieldOutputInstance = z.infer<
-  typeof zIPAdapterModelFieldOutputInstance
->;
-export type IPAdapterModelFieldInputTemplate = z.infer<
-  typeof zIPAdapterModelFieldInputTemplate
->;
-export type IPAdapterModelFieldOutputTemplate = z.infer<
-  typeof zIPAdapterModelFieldOutputTemplate
->;
-export const isIPAdapterModelFieldInputInstance = (
-  val: unknown
-): val is IPAdapterModelFieldInputInstance =>
+export type IPAdapterModelFieldValue = z.infer<typeof zIPAdapterModelFieldValue>;
+export type IPAdapterModelFieldInputInstance = z.infer<typeof zIPAdapterModelFieldInputInstance>;
+export type IPAdapterModelFieldOutputInstance = z.infer<typeof zIPAdapterModelFieldOutputInstance>;
+export type IPAdapterModelFieldInputTemplate = z.infer<typeof zIPAdapterModelFieldInputTemplate>;
+export type IPAdapterModelFieldOutputTemplate = z.infer<typeof zIPAdapterModelFieldOutputTemplate>;
+export const isIPAdapterModelFieldInputInstance = (val: unknown): val is IPAdapterModelFieldInputInstance =>
   zIPAdapterModelFieldInputInstance.safeParse(val).success;
-export const isIPAdapterModelFieldInputTemplate = (
-  val: unknown
-): val is IPAdapterModelFieldInputTemplate =>
+export const isIPAdapterModelFieldInputTemplate = (val: unknown): val is IPAdapterModelFieldInputTemplate =>
   zIPAdapterModelFieldInputTemplate.safeParse(val).success;
-export const isIPAdapterModelFieldValue = (
-  val: unknown
-): val is IPAdapterModelFieldValue =>
+export const isIPAdapterModelFieldValue = (val: unknown): val is IPAdapterModelFieldValue =>
   zIPAdapterModelFieldValue.safeParse(val).success;
 // #endregion
 
@@ -763,49 +583,29 @@ export const zT2IAdapterModelFieldType = zFieldTypeBase.extend({
   name: z.literal('T2IAdapterModelField'),
 });
 export const zT2IAdapterModelFieldValue = zT2IAdapterModelField.optional();
-export const zT2IAdapterModelFieldInputInstance =
-  zFieldInputInstanceBase.extend({
-    type: zT2IAdapterModelFieldType,
-    value: zT2IAdapterModelFieldValue,
-  });
-export const zT2IAdapterModelFieldOutputInstance =
-  zFieldOutputInstanceBase.extend({
-    type: zT2IAdapterModelFieldType,
-  });
-export const zT2IAdapterModelFieldInputTemplate =
-  zFieldInputTemplateBase.extend({
-    type: zT2IAdapterModelFieldType,
-    default: zT2IAdapterModelFieldValue,
-  });
-export const zT2IAdapterModelFieldOutputTemplate =
-  zFieldOutputTemplateBase.extend({
-    type: zT2IAdapterModelFieldType,
-  });
-export type T2IAdapterModelFieldType = z.infer<
-  typeof zT2IAdapterModelFieldType
->;
-export type T2IAdapterModelFieldValue = z.infer<
-  typeof zT2IAdapterModelFieldValue
->;
-export type T2IAdapterModelFieldInputInstance = z.infer<
-  typeof zT2IAdapterModelFieldInputInstance
->;
-export type T2IAdapterModelFieldOutputInstance = z.infer<
-  typeof zT2IAdapterModelFieldOutputInstance
->;
-export type T2IAdapterModelFieldInputTemplate = z.infer<
-  typeof zT2IAdapterModelFieldInputTemplate
->;
-export type T2IAdapterModelFieldOutputTemplate = z.infer<
-  typeof zT2IAdapterModelFieldOutputTemplate
->;
-export const isT2IAdapterModelFieldInputInstance = (
-  val: unknown
-): val is T2IAdapterModelFieldInputInstance =>
+export const zT2IAdapterModelFieldInputInstance = zFieldInputInstanceBase.extend({
+  type: zT2IAdapterModelFieldType,
+  value: zT2IAdapterModelFieldValue,
+});
+export const zT2IAdapterModelFieldOutputInstance = zFieldOutputInstanceBase.extend({
+  type: zT2IAdapterModelFieldType,
+});
+export const zT2IAdapterModelFieldInputTemplate = zFieldInputTemplateBase.extend({
+  type: zT2IAdapterModelFieldType,
+  default: zT2IAdapterModelFieldValue,
+});
+export const zT2IAdapterModelFieldOutputTemplate = zFieldOutputTemplateBase.extend({
+  type: zT2IAdapterModelFieldType,
+});
+export type T2IAdapterModelFieldType = z.infer<typeof zT2IAdapterModelFieldType>;
+export type T2IAdapterModelFieldValue = z.infer<typeof zT2IAdapterModelFieldValue>;
+export type T2IAdapterModelFieldInputInstance = z.infer<typeof zT2IAdapterModelFieldInputInstance>;
+export type T2IAdapterModelFieldOutputInstance = z.infer<typeof zT2IAdapterModelFieldOutputInstance>;
+export type T2IAdapterModelFieldInputTemplate = z.infer<typeof zT2IAdapterModelFieldInputTemplate>;
+export type T2IAdapterModelFieldOutputTemplate = z.infer<typeof zT2IAdapterModelFieldOutputTemplate>;
+export const isT2IAdapterModelFieldInputInstance = (val: unknown): val is T2IAdapterModelFieldInputInstance =>
   zT2IAdapterModelFieldInputInstance.safeParse(val).success;
-export const isT2IAdapterModelFieldInputTemplate = (
-  val: unknown
-): val is T2IAdapterModelFieldInputTemplate =>
+export const isT2IAdapterModelFieldInputTemplate = (val: unknown): val is T2IAdapterModelFieldInputTemplate =>
   zT2IAdapterModelFieldInputTemplate.safeParse(val).success;
 // #endregion
 
@@ -830,25 +630,13 @@ export const zSchedulerFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 });
 export type SchedulerFieldType = z.infer<typeof zSchedulerFieldType>;
 export type SchedulerFieldValue = z.infer<typeof zSchedulerFieldValue>;
-export type SchedulerFieldInputInstance = z.infer<
-  typeof zSchedulerFieldInputInstance
->;
-export type SchedulerFieldOutputInstance = z.infer<
-  typeof zSchedulerFieldOutputInstance
->;
-export type SchedulerFieldInputTemplate = z.infer<
-  typeof zSchedulerFieldInputTemplate
->;
-export type SchedulerFieldOutputTemplate = z.infer<
-  typeof zSchedulerFieldOutputTemplate
->;
-export const isSchedulerFieldInputInstance = (
-  val: unknown
-): val is SchedulerFieldInputInstance =>
+export type SchedulerFieldInputInstance = z.infer<typeof zSchedulerFieldInputInstance>;
+export type SchedulerFieldOutputInstance = z.infer<typeof zSchedulerFieldOutputInstance>;
+export type SchedulerFieldInputTemplate = z.infer<typeof zSchedulerFieldInputTemplate>;
+export type SchedulerFieldOutputTemplate = z.infer<typeof zSchedulerFieldOutputTemplate>;
+export const isSchedulerFieldInputInstance = (val: unknown): val is SchedulerFieldInputInstance =>
   zSchedulerFieldInputInstance.safeParse(val).success;
-export const isSchedulerFieldInputTemplate = (
-  val: unknown
-): val is SchedulerFieldInputTemplate =>
+export const isSchedulerFieldInputTemplate = (val: unknown): val is SchedulerFieldInputTemplate =>
   zSchedulerFieldInputTemplate.safeParse(val).success;
 // #endregion
 
@@ -886,18 +674,10 @@ export const zStatelessFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 
 export type StatelessFieldType = z.infer<typeof zStatelessFieldType>;
 export type StatelessFieldValue = z.infer<typeof zStatelessFieldValue>;
-export type StatelessFieldInputInstance = z.infer<
-  typeof zStatelessFieldInputInstance
->;
-export type StatelessFieldOutputInstance = z.infer<
-  typeof zStatelessFieldOutputInstance
->;
-export type StatelessFieldInputTemplate = z.infer<
-  typeof zStatelessFieldInputTemplate
->;
-export type StatelessFieldOutputTemplate = z.infer<
-  typeof zStatelessFieldOutputTemplate
->;
+export type StatelessFieldInputInstance = z.infer<typeof zStatelessFieldInputInstance>;
+export type StatelessFieldOutputInstance = z.infer<typeof zStatelessFieldOutputInstance>;
+export type StatelessFieldInputTemplate = z.infer<typeof zStatelessFieldInputTemplate>;
+export type StatelessFieldOutputTemplate = z.infer<typeof zStatelessFieldOutputTemplate>;
 // #endregion
 
 /**
@@ -941,8 +721,7 @@ export const isStatefulFieldType = (val: unknown): val is StatefulFieldType =>
 
 export const zFieldType = z.union([zStatefulFieldType, zStatelessFieldType]);
 export type FieldType = z.infer<typeof zFieldType>;
-export const isFieldType = (val: unknown): val is FieldType =>
-  zFieldType.safeParse(val).success;
+export const isFieldType = (val: unknown): val is FieldType => zFieldType.safeParse(val).success;
 // #endregion
 
 // #region StatefulFieldValue & FieldValue
@@ -971,8 +750,7 @@ export const isStatefulFieldValue = (val: unknown): val is StatefulFieldValue =>
 
 export const zFieldValue = z.union([zStatefulFieldValue, zStatelessFieldValue]);
 export type FieldValue = z.infer<typeof zFieldValue>;
-export const isFieldValue = (val: unknown): val is FieldValue =>
-  zFieldValue.safeParse(val).success;
+export const isFieldValue = (val: unknown): val is FieldValue => zFieldValue.safeParse(val).success;
 // #endregion
 
 // #region StatefulFieldInputInstance & FieldInputInstance
@@ -995,18 +773,11 @@ export const zStatefulFieldInputInstance = z.union([
   zColorFieldInputInstance,
   zSchedulerFieldInputInstance,
 ]);
-export type StatefulFieldInputInstance = z.infer<
-  typeof zStatefulFieldInputInstance
->;
-export const isStatefulFieldInputInstance = (
-  val: unknown
-): val is StatefulFieldInputInstance =>
+export type StatefulFieldInputInstance = z.infer<typeof zStatefulFieldInputInstance>;
+export const isStatefulFieldInputInstance = (val: unknown): val is StatefulFieldInputInstance =>
   zStatefulFieldInputInstance.safeParse(val).success;
 
-export const zFieldInputInstance = z.union([
-  zStatefulFieldInputInstance,
-  zStatelessFieldInputInstance,
-]);
+export const zFieldInputInstance = z.union([zStatefulFieldInputInstance, zStatelessFieldInputInstance]);
 export type FieldInputInstance = z.infer<typeof zFieldInputInstance>;
 export const isFieldInputInstance = (val: unknown): val is FieldInputInstance =>
   zFieldInputInstance.safeParse(val).success;
@@ -1032,22 +803,14 @@ export const zStatefulFieldOutputInstance = z.union([
   zColorFieldOutputInstance,
   zSchedulerFieldOutputInstance,
 ]);
-export type StatefulFieldOutputInstance = z.infer<
-  typeof zStatefulFieldOutputInstance
->;
-export const isStatefulFieldOutputInstance = (
-  val: unknown
-): val is StatefulFieldOutputInstance =>
+export type StatefulFieldOutputInstance = z.infer<typeof zStatefulFieldOutputInstance>;
+export const isStatefulFieldOutputInstance = (val: unknown): val is StatefulFieldOutputInstance =>
   zStatefulFieldOutputInstance.safeParse(val).success;
 
-export const zFieldOutputInstance = z.union([
-  zStatefulFieldOutputInstance,
-  zStatelessFieldOutputInstance,
-]);
+export const zFieldOutputInstance = z.union([zStatefulFieldOutputInstance, zStatelessFieldOutputInstance]);
 export type FieldOutputInstance = z.infer<typeof zFieldOutputInstance>;
-export const isFieldOutputInstance = (
-  val: unknown
-): val is FieldOutputInstance => zFieldOutputInstance.safeParse(val).success;
+export const isFieldOutputInstance = (val: unknown): val is FieldOutputInstance =>
+  zFieldOutputInstance.safeParse(val).success;
 // #endregion
 
 // #region StatefulFieldInputTemplate & FieldInputTemplate
@@ -1072,15 +835,10 @@ export const zStatefulFieldInputTemplate = z.union([
   zStatelessFieldInputTemplate,
 ]);
 export type StatefulFieldInputTemplate = z.infer<typeof zFieldInputTemplate>;
-export const isStatefulFieldInputTemplate = (
-  val: unknown
-): val is StatefulFieldInputTemplate =>
+export const isStatefulFieldInputTemplate = (val: unknown): val is StatefulFieldInputTemplate =>
   zStatefulFieldInputTemplate.safeParse(val).success;
 
-export const zFieldInputTemplate = z.union([
-  zStatefulFieldInputTemplate,
-  zStatelessFieldInputTemplate,
-]);
+export const zFieldInputTemplate = z.union([zStatefulFieldInputTemplate, zStatelessFieldInputTemplate]);
 export type FieldInputTemplate = z.infer<typeof zFieldInputTemplate>;
 export const isFieldInputTemplate = (val: unknown): val is FieldInputTemplate =>
   zFieldInputTemplate.safeParse(val).success;
@@ -1106,20 +864,12 @@ export const zStatefulFieldOutputTemplate = z.union([
   zColorFieldOutputTemplate,
   zSchedulerFieldOutputTemplate,
 ]);
-export type StatefulFieldOutputTemplate = z.infer<
-  typeof zStatefulFieldOutputTemplate
->;
-export const isStatefulFieldOutputTemplate = (
-  val: unknown
-): val is StatefulFieldOutputTemplate =>
+export type StatefulFieldOutputTemplate = z.infer<typeof zStatefulFieldOutputTemplate>;
+export const isStatefulFieldOutputTemplate = (val: unknown): val is StatefulFieldOutputTemplate =>
   zStatefulFieldOutputTemplate.safeParse(val).success;
 
-export const zFieldOutputTemplate = z.union([
-  zStatefulFieldOutputTemplate,
-  zStatelessFieldOutputTemplate,
-]);
+export const zFieldOutputTemplate = z.union([zStatefulFieldOutputTemplate, zStatelessFieldOutputTemplate]);
 export type FieldOutputTemplate = z.infer<typeof zFieldOutputTemplate>;
-export const isFieldOutputTemplate = (
-  val: unknown
-): val is FieldOutputTemplate => zFieldOutputTemplate.safeParse(val).success;
+export const isFieldOutputTemplate = (val: unknown): val is FieldOutputTemplate =>
+  zFieldOutputTemplate.safeParse(val).success;
 // #endregion
diff --git a/invokeai/frontend/web/src/features/nodes/types/invocation.ts b/invokeai/frontend/web/src/features/nodes/types/invocation.ts
index 227d13459d..86ec70fd9b 100644
--- a/invokeai/frontend/web/src/features/nodes/types/invocation.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/invocation.ts
@@ -2,12 +2,7 @@ import type { Edge, Node } from 'reactflow';
 import { z } from 'zod';
 
 import { zClassification, zProgressImage } from './common';
-import {
-  zFieldInputInstance,
-  zFieldInputTemplate,
-  zFieldOutputInstance,
-  zFieldOutputTemplate,
-} from './field';
+import { zFieldInputInstance, zFieldInputTemplate, zFieldOutputInstance, zFieldOutputTemplate } from './field';
 import { zSemVer } from './semver';
 
 // #region InvocationTemplate
@@ -55,11 +50,7 @@ export const zCurrentImageNodeData = z.object({
   label: z.string(),
   isOpen: z.boolean(),
 });
-export const zAnyNodeData = z.union([
-  zInvocationNodeData,
-  zNotesNodeData,
-  zCurrentImageNodeData,
-]);
+export const zAnyNodeData = z.union([zInvocationNodeData, zNotesNodeData, zCurrentImageNodeData]);
 
 export type NotesNodeData = z.infer<typeof zNotesNodeData>;
 export type InvocationNodeData = z.infer<typeof zInvocationNodeData>;
@@ -71,25 +62,16 @@ export type NotesNode = Node<NotesNodeData, 'notes'>;
 export type CurrentImageNode = Node<CurrentImageNodeData, 'current_image'>;
 export type AnyNode = Node<AnyNodeData>;
 
-export const isInvocationNode = (node?: AnyNode): node is InvocationNode =>
-  Boolean(node && node.type === 'invocation');
-export const isNotesNode = (node?: AnyNode): node is NotesNode =>
-  Boolean(node && node.type === 'notes');
+export const isInvocationNode = (node?: AnyNode): node is InvocationNode => Boolean(node && node.type === 'invocation');
+export const isNotesNode = (node?: AnyNode): node is NotesNode => Boolean(node && node.type === 'notes');
 export const isCurrentImageNode = (node?: AnyNode): node is CurrentImageNode =>
   Boolean(node && node.type === 'current_image');
-export const isInvocationNodeData = (
-  node?: AnyNodeData
-): node is InvocationNodeData =>
+export const isInvocationNodeData = (node?: AnyNodeData): node is InvocationNodeData =>
   Boolean(node && !['notes', 'current_image'].includes(node.type)); // node.type may be 'notes', 'current_image', or any invocation type
 // #endregion
 
 // #region NodeExecutionState
-export const zNodeStatus = z.enum([
-  'PENDING',
-  'IN_PROGRESS',
-  'COMPLETED',
-  'FAILED',
-]);
+export const zNodeStatus = z.enum(['PENDING', 'IN_PROGRESS', 'COMPLETED', 'FAILED']);
 export const zNodeExecutionState = z.object({
   nodeId: z.string().trim().min(1),
   status: zNodeStatus,
diff --git a/invokeai/frontend/web/src/features/nodes/types/metadata.ts b/invokeai/frontend/web/src/features/nodes/types/metadata.ts
index 6155c263d0..0cc30499e3 100644
--- a/invokeai/frontend/web/src/features/nodes/types/metadata.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/metadata.ts
@@ -28,9 +28,7 @@ export type LoRAMetadataItem = z.infer<typeof zLoRAMetadataItem>;
 export type ControlNetMetadataItem = z.infer<typeof zControlNetMetadataItem>;
 export type IPAdapterMetadataItem = z.infer<typeof zIPAdapterMetadataItem>;
 export type T2IAdapterMetadataItem = z.infer<typeof zT2IAdapterMetadataItem>;
-export type SDXLRefinerModelMetadataItem = z.infer<
-  typeof zSDXLRefinerModelMetadataItem
->;
+export type SDXLRefinerModelMetadataItem = z.infer<typeof zSDXLRefinerModelMetadataItem>;
 export type ModelMetadataItem = z.infer<typeof zModelMetadataItem>;
 export type VAEModelMetadataItem = z.infer<typeof zVAEModelMetadataItem>;
 // #endregion
diff --git a/invokeai/frontend/web/src/features/nodes/types/openapi.ts b/invokeai/frontend/web/src/features/nodes/types/openapi.ts
index 0b5fc04cec..83d774439a 100644
--- a/invokeai/frontend/web/src/features/nodes/types/openapi.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/openapi.ts
@@ -14,8 +14,7 @@ export type InvocationSchemaExtra = InvocationJSONSchemaExtra & {
   tags?: string[];
   version: string;
   properties: Omit<
-    NonNullable<OpenAPIV3_1.SchemaObject['properties']> &
-      (InputFieldJSONSchemaExtra | OutputFieldJSONSchemaExtra),
+    NonNullable<OpenAPIV3_1.SchemaObject['properties']> & (InputFieldJSONSchemaExtra | OutputFieldJSONSchemaExtra),
     'type'
   > & {
     type: Omit<OpenAPIV3_1.SchemaObject, 'default'> & {
@@ -31,16 +30,10 @@ export type InvocationSchemaType = {
   default: string; // the type of the invocation
 };
 
-export type InvocationBaseSchemaObject = Omit<
-  OpenAPIV3_1.BaseSchemaObject,
-  'title' | 'type' | 'properties'
-> &
+export type InvocationBaseSchemaObject = Omit<OpenAPIV3_1.BaseSchemaObject, 'title' | 'type' | 'properties'> &
   InvocationSchemaExtra;
 
-export type InvocationOutputSchemaObject = Omit<
-  OpenAPIV3_1.SchemaObject,
-  'properties'
-> & {
+export type InvocationOutputSchemaObject = Omit<OpenAPIV3_1.SchemaObject, 'properties'> & {
   properties: OpenAPIV3_1.SchemaObject['properties'] & {
     type: Omit<OpenAPIV3_1.SchemaObject, 'default'> & {
       default: string;
@@ -50,12 +43,9 @@ export type InvocationOutputSchemaObject = Omit<
   };
 };
 
-export type InvocationFieldSchema = OpenAPIV3_1.SchemaObject &
-  InputFieldJSONSchemaExtra;
+export type InvocationFieldSchema = OpenAPIV3_1.SchemaObject & InputFieldJSONSchemaExtra;
 
-export type OpenAPIV3_1SchemaOrRef =
-  | OpenAPIV3_1.ReferenceObject
-  | OpenAPIV3_1.SchemaObject;
+export type OpenAPIV3_1SchemaOrRef = OpenAPIV3_1.ReferenceObject | OpenAPIV3_1.SchemaObject;
 
 export interface ArraySchemaObject extends InvocationBaseSchemaObject {
   type: OpenAPIV3_1.ArraySchemaObjectType;
@@ -65,10 +55,7 @@ export interface NonArraySchemaObject extends InvocationBaseSchemaObject {
   type?: OpenAPIV3_1.NonArraySchemaObjectType;
 }
 
-export type InvocationSchemaObject = (
-  | ArraySchemaObject
-  | NonArraySchemaObject
-) & { class: 'invocation' };
+export type InvocationSchemaObject = (ArraySchemaObject | NonArraySchemaObject) & { class: 'invocation' };
 
 export const isSchemaObject = (
   obj: OpenAPIV3_1.ReferenceObject | OpenAPIV3_1.SchemaObject | undefined
@@ -76,33 +63,23 @@ export const isSchemaObject = (
 
 export const isArraySchemaObject = (
   obj: OpenAPIV3_1.ReferenceObject | OpenAPIV3_1.SchemaObject | undefined
-): obj is OpenAPIV3_1.ArraySchemaObject =>
-  Boolean(obj && !('$ref' in obj) && obj.type === 'array');
+): obj is OpenAPIV3_1.ArraySchemaObject => Boolean(obj && !('$ref' in obj) && obj.type === 'array');
 
 export const isNonArraySchemaObject = (
   obj: OpenAPIV3_1.ReferenceObject | OpenAPIV3_1.SchemaObject | undefined
-): obj is OpenAPIV3_1.NonArraySchemaObject =>
-  Boolean(obj && !('$ref' in obj) && obj.type !== 'array');
+): obj is OpenAPIV3_1.NonArraySchemaObject => Boolean(obj && !('$ref' in obj) && obj.type !== 'array');
 
 export const isRefObject = (
   obj: OpenAPIV3_1.ReferenceObject | OpenAPIV3_1.SchemaObject | undefined
 ): obj is OpenAPIV3_1.ReferenceObject => Boolean(obj && '$ref' in obj);
 
 export const isInvocationSchemaObject = (
-  obj:
-    | OpenAPIV3_1.ReferenceObject
-    | OpenAPIV3_1.SchemaObject
-    | InvocationSchemaObject
-): obj is InvocationSchemaObject =>
-  'class' in obj && obj.class === 'invocation';
+  obj: OpenAPIV3_1.ReferenceObject | OpenAPIV3_1.SchemaObject | InvocationSchemaObject
+): obj is InvocationSchemaObject => 'class' in obj && obj.class === 'invocation';
 
 export const isInvocationOutputSchemaObject = (
-  obj:
-    | OpenAPIV3_1.ReferenceObject
-    | OpenAPIV3_1.SchemaObject
-    | InvocationOutputSchemaObject
-): obj is InvocationOutputSchemaObject =>
-  'class' in obj && obj.class === 'output';
+  obj: OpenAPIV3_1.ReferenceObject | OpenAPIV3_1.SchemaObject | InvocationOutputSchemaObject
+): obj is InvocationOutputSchemaObject => 'class' in obj && obj.class === 'output';
 
 export const isInvocationFieldSchema = (
   obj: OpenAPIV3_1.ReferenceObject | OpenAPIV3_1.SchemaObject
diff --git a/invokeai/frontend/web/src/features/nodes/types/semver.ts b/invokeai/frontend/web/src/features/nodes/types/semver.ts
index 70dc228819..3ba330eac4 100644
--- a/invokeai/frontend/web/src/features/nodes/types/semver.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/semver.ts
@@ -7,9 +7,7 @@ const zVersionInt = z.coerce.number().int().min(0);
 export const zSemVer = z.string().refine((val) => {
   const [major, minor, patch] = val.split('.');
   return (
-    zVersionInt.safeParse(major).success &&
-    zVersionInt.safeParse(minor).success &&
-    zVersionInt.safeParse(patch).success
+    zVersionInt.safeParse(major).success && zVersionInt.safeParse(minor).success && zVersionInt.safeParse(patch).success
   );
 });
 
diff --git a/invokeai/frontend/web/src/features/nodes/types/v1/workflowV1.ts b/invokeai/frontend/web/src/features/nodes/types/v1/workflowV1.ts
index 98e4158f9a..c7a50b20e4 100644
--- a/invokeai/frontend/web/src/features/nodes/types/v1/workflowV1.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/v1/workflowV1.ts
@@ -261,12 +261,8 @@ const zControlField = z.object({
   control_weight: z.union([z.number(), z.array(z.number())]).optional(),
   begin_step_percent: z.number().optional(),
   end_step_percent: z.number().optional(),
-  control_mode: z
-    .enum(['balanced', 'more_prompt', 'more_control', 'unbalanced'])
-    .optional(),
-  resize_mode: z
-    .enum(['just_resize', 'crop_resize', 'fill_resize', 'just_resize_simple'])
-    .optional(),
+  control_mode: z.enum(['balanced', 'more_prompt', 'more_control', 'unbalanced']).optional(),
+  resize_mode: z.enum(['just_resize', 'crop_resize', 'fill_resize', 'just_resize_simple']).optional(),
 });
 
 const zControlInputFieldValue = zInputFieldValueBase.extend({
@@ -317,9 +313,7 @@ const zT2IAdapterField = z.object({
   weight: z.union([z.number(), z.array(z.number())]).optional(),
   begin_step_percent: z.number().optional(),
   end_step_percent: z.number().optional(),
-  resize_mode: z
-    .enum(['just_resize', 'crop_resize', 'fill_resize', 'just_resize_simple'])
-    .optional(),
+  resize_mode: z.enum(['just_resize', 'crop_resize', 'fill_resize', 'just_resize_simple']).optional(),
 });
 
 const zT2IAdapterInputFieldValue = zInputFieldValueBase.extend({
@@ -337,14 +331,7 @@ const zT2IAdapterCollectionInputFieldValue = zInputFieldValueBase.extend({
   value: z.array(zT2IAdapterField).optional(),
 });
 
-const zModelType = z.enum([
-  'onnx',
-  'main',
-  'vae',
-  'lora',
-  'controlnet',
-  'embedding',
-]);
+const zModelType = z.enum(['onnx', 'main', 'vae', 'lora', 'controlnet', 'embedding']);
 
 const zSubModelType = z.enum([
   'unet',
@@ -666,10 +653,7 @@ const zWorkflowNotesNode = z.object({
   position: zPosition,
 });
 
-const zWorkflowNode = z.discriminatedUnion('type', [
-  zWorkflowInvocationNode,
-  zWorkflowNotesNode,
-]);
+const zWorkflowNode = z.discriminatedUnion('type', [zWorkflowInvocationNode, zWorkflowNotesNode]);
 
 const zDefaultWorkflowEdge = z.object({
   source: z.string().trim().min(1),
diff --git a/invokeai/frontend/web/src/features/nodes/types/workflow.ts b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
index 8919e597dc..723a354013 100644
--- a/invokeai/frontend/web/src/features/nodes/types/workflow.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
@@ -36,18 +36,13 @@ export const zWorkflowNotesNode = z.object({
   height: zDimension,
   position: zXYPosition,
 });
-export const zWorkflowNode = z.union([
-  zWorkflowInvocationNode,
-  zWorkflowNotesNode,
-]);
+export const zWorkflowNode = z.union([zWorkflowInvocationNode, zWorkflowNotesNode]);
 
 export type WorkflowInvocationNode = z.infer<typeof zWorkflowInvocationNode>;
 export type WorkflowNotesNode = z.infer<typeof zWorkflowNotesNode>;
 export type WorkflowNode = z.infer<typeof zWorkflowNode>;
 
-export const isWorkflowInvocationNode = (
-  val: unknown
-): val is WorkflowInvocationNode =>
+export const isWorkflowInvocationNode = (val: unknown): val is WorkflowInvocationNode =>
   zWorkflowInvocationNode.safeParse(val).success;
 // #endregion
 
@@ -65,10 +60,7 @@ export const zWorkflowEdgeDefault = zWorkflowEdgeBase.extend({
 export const zWorkflowEdgeCollapsed = zWorkflowEdgeBase.extend({
   type: z.literal('collapsed'),
 });
-export const zWorkflowEdge = z.union([
-  zWorkflowEdgeDefault,
-  zWorkflowEdgeCollapsed,
-]);
+export const zWorkflowEdge = z.union([zWorkflowEdgeDefault, zWorkflowEdgeCollapsed]);
 
 export type WorkflowEdgeDefault = z.infer<typeof zWorkflowEdgeDefault>;
 export type WorkflowEdgeCollapsed = z.infer<typeof zWorkflowEdgeCollapsed>;
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addControlNetToLinearGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addControlNetToLinearGraph.ts
index 2f44e3beae..d862b0986e 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/addControlNetToLinearGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/addControlNetToLinearGraph.ts
@@ -9,17 +9,10 @@ import type {
   NonNullableGraph,
 } from 'services/api/types';
 
-import {
-  CANVAS_COHERENCE_DENOISE_LATENTS,
-  CONTROL_NET_COLLECT,
-} from './constants';
+import { CANVAS_COHERENCE_DENOISE_LATENTS, CONTROL_NET_COLLECT } from './constants';
 import { upsertMetadata } from './metadata';
 
-export const addControlNetToLinearGraph = (
-  state: RootState,
-  graph: NonNullableGraph,
-  baseNodeId: string
-): void => {
+export const addControlNetToLinearGraph = (state: RootState, graph: NonNullableGraph, baseNodeId: string): void => {
   const validControlNets = selectValidControlNets(state.controlAdapters).filter(
     (ca) => ca.model?.base_model === state.generation.model?.base_model
   );
@@ -102,9 +95,7 @@ export const addControlNetToLinearGraph = (
 
       graph.nodes[controlNetNode.id] = controlNetNode as ControlNetInvocation;
 
-      controlNetMetadata.push(
-        omit(controlNetNode, ['id', 'type', 'is_intermediate']) as ControlField
-      );
+      controlNetMetadata.push(omit(controlNetNode, ['id', 'type', 'is_intermediate']) as ControlField);
 
       graph.edges.push({
         source: { node_id: controlNetNode.id, field: 'control' },
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addHrfToGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addHrfToGraph.ts
index 6ca263a903..9e9fcefcb0 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/addHrfToGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/addHrfToGraph.ts
@@ -42,10 +42,7 @@ function copyConnectionsToDenoiseLatentsHrf(graph: NonNullableGraph): void {
 
   // Loop through the existing edges connected to DENOISE_LATENTS
   graph.edges.forEach((edge: Edge) => {
-    if (
-      edge.destination.node_id === DENOISE_LATENTS &&
-      destinationFields.includes(edge.destination.field)
-    ) {
+    if (edge.destination.node_id === DENOISE_LATENTS && destinationFields.includes(edge.destination.field)) {
       // Add a similar connection to DENOISE_LATENTS_HRF
       newEdges.push({
         source: {
@@ -103,15 +100,9 @@ function calculateHrfRes(
 }
 
 // Adds the high-res fix feature to the given graph.
-export const addHrfToGraph = (
-  state: RootState,
-  graph: NonNullableGraph
-): void => {
+export const addHrfToGraph = (state: RootState, graph: NonNullableGraph): void => {
   // Double check hrf is enabled.
-  if (
-    !state.hrf.hrfEnabled ||
-    state.config.disabledSDFeatures.includes('hrf')
-  ) {
+  if (!state.hrf.hrfEnabled || state.config.disabledSDFeatures.includes('hrf')) {
     return;
   }
   const log = logger('txt2img');
@@ -122,20 +113,12 @@ export const addHrfToGraph = (
   const width = state.generation.width;
   const height = state.generation.height;
   const optimalDimension = selectOptimalDimension(state);
-  const { newWidth: hrfWidth, newHeight: hrfHeight } = calculateHrfRes(
-    optimalDimension,
-    width,
-    height
-  );
+  const { newWidth: hrfWidth, newHeight: hrfHeight } = calculateHrfRes(optimalDimension, width, height);
 
   // Pre-existing (original) graph nodes.
-  const originalDenoiseLatentsNode = graph.nodes[DENOISE_LATENTS] as
-    | DenoiseLatentsInvocation
-    | undefined;
+  const originalDenoiseLatentsNode = graph.nodes[DENOISE_LATENTS] as DenoiseLatentsInvocation | undefined;
   const originalNoiseNode = graph.nodes[NOISE] as NoiseInvocation | undefined;
-  const originalLatentsToImageNode = graph.nodes[LATENTS_TO_IMAGE] as
-    | LatentsToImageInvocation
-    | undefined;
+  const originalLatentsToImageNode = graph.nodes[LATENTS_TO_IMAGE] as LatentsToImageInvocation | undefined;
   if (!originalDenoiseLatentsNode) {
     log.error('originalDenoiseLatentsNode is undefined');
     return;
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addIPAdapterToLinearGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addIPAdapterToLinearGraph.ts
index 21253f8669..3a79b78c6e 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/addIPAdapterToLinearGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/addIPAdapterToLinearGraph.ts
@@ -9,17 +9,10 @@ import type {
   NonNullableGraph,
 } from 'services/api/types';
 
-import {
-  CANVAS_COHERENCE_DENOISE_LATENTS,
-  IP_ADAPTER_COLLECT,
-} from './constants';
+import { CANVAS_COHERENCE_DENOISE_LATENTS, IP_ADAPTER_COLLECT } from './constants';
 import { upsertMetadata } from './metadata';
 
-export const addIPAdapterToLinearGraph = (
-  state: RootState,
-  graph: NonNullableGraph,
-  baseNodeId: string
-): void => {
+export const addIPAdapterToLinearGraph = (state: RootState, graph: NonNullableGraph, baseNodeId: string): void => {
   const validIPAdapters = selectValidIPAdapters(state.controlAdapters).filter(
     (ca) => ca.model?.base_model === state.generation.model?.base_model
   );
@@ -76,13 +69,7 @@ export const addIPAdapterToLinearGraph = (
 
       graph.nodes[ipAdapterNode.id] = ipAdapterNode as IPAdapterInvocation;
 
-      ipAdapterMetdata.push(
-        omit(ipAdapterNode, [
-          'id',
-          'type',
-          'is_intermediate',
-        ]) as IPAdapterMetadataField
-      );
+      ipAdapterMetdata.push(omit(ipAdapterNode, ['id', 'type', 'is_intermediate']) as IPAdapterMetadataField);
 
       graph.edges.push({
         source: { node_id: ipAdapterNode.id, field: 'ip_adapter' },
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addLinearUIOutputNode.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addLinearUIOutputNode.ts
index ea14ebeddf..5c78ad804e 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/addLinearUIOutputNode.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/addLinearUIOutputNode.ts
@@ -1,9 +1,6 @@
 import type { RootState } from 'app/store/store';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import type {
-  LinearUIOutputInvocation,
-  NonNullableGraph,
-} from 'services/api/types';
+import type { LinearUIOutputInvocation, NonNullableGraph } from 'services/api/types';
 
 import {
   CANVAS_OUTPUT,
@@ -17,13 +14,9 @@ import {
 /**
  * Set the `use_cache` field on the linear/canvas graph's final image output node to False.
  */
-export const addLinearUIOutputNode = (
-  state: RootState,
-  graph: NonNullableGraph
-): void => {
+export const addLinearUIOutputNode = (state: RootState, graph: NonNullableGraph): void => {
   const activeTabName = activeTabNameSelector(state);
-  const is_intermediate =
-    activeTabName === 'unifiedCanvas' ? !state.canvas.shouldAutoSave : false;
+  const is_intermediate = activeTabName === 'unifiedCanvas' ? !state.canvas.shouldAutoSave : false;
   const { autoAddBoardId } = state.gallery;
 
   const linearUIOutputNode: LinearUIOutputInvocation = {
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addLoRAsToGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addLoRAsToGraph.ts
index 5f3029d4fb..d1b5ddde84 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/addLoRAsToGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/addLoRAsToGraph.ts
@@ -1,10 +1,6 @@
 import type { RootState } from 'app/store/store';
 import { forEach, size } from 'lodash-es';
-import type {
-  CoreMetadataInvocation,
-  LoraLoaderInvocation,
-  NonNullableGraph,
-} from 'services/api/types';
+import type { CoreMetadataInvocation, LoraLoaderInvocation, NonNullableGraph } from 'services/api/types';
 
 import {
   CANVAS_COHERENCE_DENOISE_LATENTS,
@@ -41,17 +37,10 @@ export const addLoRAsToGraph = (
 
   // Remove modelLoaderNodeId unet connection to feed it to LoRAs
   graph.edges = graph.edges.filter(
-    (e) =>
-      !(
-        e.source.node_id === modelLoaderNodeId &&
-        ['unet'].includes(e.source.field)
-      )
+    (e) => !(e.source.node_id === modelLoaderNodeId && ['unet'].includes(e.source.field))
   );
   // Remove CLIP_SKIP connections to conditionings to feed it through LoRAs
-  graph.edges = graph.edges.filter(
-    (e) =>
-      !(e.source.node_id === CLIP_SKIP && ['clip'].includes(e.source.field))
-  );
+  graph.edges = graph.edges.filter((e) => !(e.source.node_id === CLIP_SKIP && ['clip'].includes(e.source.field)));
 
   // we need to remember the last lora so we can chain from it
   let lastLoraNodeId = '';
@@ -137,10 +126,7 @@ export const addLoRAsToGraph = (
         },
       });
 
-      if (
-        graph.id &&
-        [CANVAS_INPAINT_GRAPH, CANVAS_OUTPAINT_GRAPH].includes(graph.id)
-      ) {
+      if (graph.id && [CANVAS_INPAINT_GRAPH, CANVAS_OUTPAINT_GRAPH].includes(graph.id)) {
         graph.edges.push({
           source: {
             node_id: currentLoraNodeId,
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addNSFWCheckerToGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addNSFWCheckerToGraph.ts
index f129db6b8a..4a8e77abfa 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/addNSFWCheckerToGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/addNSFWCheckerToGraph.ts
@@ -1,9 +1,5 @@
 import type { RootState } from 'app/store/store';
-import type {
-  ImageNSFWBlurInvocation,
-  LatentsToImageInvocation,
-  NonNullableGraph,
-} from 'services/api/types';
+import type { ImageNSFWBlurInvocation, LatentsToImageInvocation, NonNullableGraph } from 'services/api/types';
 
 import { LATENTS_TO_IMAGE, NSFW_CHECKER } from './constants';
 
@@ -12,9 +8,7 @@ export const addNSFWCheckerToGraph = (
   graph: NonNullableGraph,
   nodeIdToAddTo = LATENTS_TO_IMAGE
 ): void => {
-  const nodeToAddTo = graph.nodes[nodeIdToAddTo] as
-    | LatentsToImageInvocation
-    | undefined;
+  const nodeToAddTo = graph.nodes[nodeIdToAddTo] as LatentsToImageInvocation | undefined;
 
   if (!nodeToAddTo) {
     // something has gone terribly awry
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addSDXLLoRAstoGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addSDXLLoRAstoGraph.ts
index 72848b5c6f..76927ad0f0 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/addSDXLLoRAstoGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/addSDXLLoRAstoGraph.ts
@@ -2,10 +2,7 @@ import type { RootState } from 'app/store/store';
 import type { LoRAMetadataItem } from 'features/nodes/types/metadata';
 import { zLoRAMetadataItem } from 'features/nodes/types/metadata';
 import { forEach, size } from 'lodash-es';
-import type {
-  NonNullableGraph,
-  SDXLLoraLoaderInvocation,
-} from 'services/api/types';
+import type { NonNullableGraph, SDXLLoraLoaderInvocation } from 'services/api/types';
 
 import {
   CANVAS_COHERENCE_DENOISE_LATENTS,
@@ -46,21 +43,15 @@ export const addSDXLLoRAsToGraph = (
   // Handle Seamless Plugs
   const unetLoaderId = modelLoaderNodeId;
   let clipLoaderId = modelLoaderNodeId;
-  if (
-    [SEAMLESS, SDXL_REFINER_INPAINT_CREATE_MASK].includes(modelLoaderNodeId)
-  ) {
+  if ([SEAMLESS, SDXL_REFINER_INPAINT_CREATE_MASK].includes(modelLoaderNodeId)) {
     clipLoaderId = SDXL_MODEL_LOADER;
   }
 
   // Remove modelLoaderNodeId unet/clip/clip2 connections to feed it to LoRAs
   graph.edges = graph.edges.filter(
     (e) =>
-      !(
-        e.source.node_id === unetLoaderId && ['unet'].includes(e.source.field)
-      ) &&
-      !(
-        e.source.node_id === clipLoaderId && ['clip'].includes(e.source.field)
-      ) &&
+      !(e.source.node_id === unetLoaderId && ['unet'].includes(e.source.field)) &&
+      !(e.source.node_id === clipLoaderId && ['clip'].includes(e.source.field)) &&
       !(e.source.node_id === clipLoaderId && ['clip2'].includes(e.source.field))
   );
 
@@ -171,12 +162,7 @@ export const addSDXLLoRAsToGraph = (
         },
       });
 
-      if (
-        graph.id &&
-        [SDXL_CANVAS_INPAINT_GRAPH, SDXL_CANVAS_OUTPAINT_GRAPH].includes(
-          graph.id
-        )
-      ) {
+      if (graph.id && [SDXL_CANVAS_INPAINT_GRAPH, SDXL_CANVAS_OUTPAINT_GRAPH].includes(graph.id)) {
         graph.edges.push({
           source: {
             node_id: currentLoraNodeId,
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addSDXLRefinerToGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addSDXLRefinerToGraph.ts
index 07c1fb55e6..708353e4d6 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/addSDXLRefinerToGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/addSDXLRefinerToGraph.ts
@@ -54,9 +54,7 @@ export const addSDXLRefinerToGraph = (
 
   const fp32 = vaePrecision === 'fp32';
 
-  const isUsingScaledDimensions = ['auto', 'manual'].includes(
-    boundingBoxScaleMethod
-  );
+  const isUsingScaledDimensions = ['auto', 'manual'].includes(boundingBoxScaleMethod);
 
   upsertMetadata(graph, {
     refiner_model: refinerModel,
@@ -68,24 +66,15 @@ export const addSDXLRefinerToGraph = (
     refiner_steps: refinerSteps,
   });
 
-  const modelLoaderId = modelLoaderNodeId
-    ? modelLoaderNodeId
-    : SDXL_MODEL_LOADER;
+  const modelLoaderId = modelLoaderNodeId ? modelLoaderNodeId : SDXL_MODEL_LOADER;
 
   // Construct Style Prompt
-  const { positiveStylePrompt, negativeStylePrompt } =
-    getSDXLStylePrompts(state);
+  const { positiveStylePrompt, negativeStylePrompt } = getSDXLStylePrompts(state);
 
   // Unplug SDXL Latents Generation To Latents To Image
-  graph.edges = graph.edges.filter(
-    (e) =>
-      !(e.source.node_id === baseNodeId && ['latents'].includes(e.source.field))
-  );
+  graph.edges = graph.edges.filter((e) => !(e.source.node_id === baseNodeId && ['latents'].includes(e.source.field)));
 
-  graph.edges = graph.edges.filter(
-    (e) =>
-      !(e.source.node_id === modelLoaderId && ['vae'].includes(e.source.field))
-  );
+  graph.edges = graph.edges.filter((e) => !(e.source.node_id === modelLoaderId && ['vae'].includes(e.source.field)));
 
   graph.nodes[SDXL_REFINER_MODEL_LOADER] = {
     type: 'sdxl_refiner_model_loader',
@@ -221,10 +210,7 @@ export const addSDXLRefinerToGraph = (
     }
   );
 
-  if (
-    graph.id === SDXL_CANVAS_INPAINT_GRAPH ||
-    graph.id === SDXL_CANVAS_OUTPAINT_GRAPH
-  ) {
+  if (graph.id === SDXL_CANVAS_INPAINT_GRAPH || graph.id === SDXL_CANVAS_OUTPAINT_GRAPH) {
     graph.nodes[SDXL_REFINER_INPAINT_CREATE_MASK] = {
       type: 'create_denoise_mask',
       id: SDXL_REFINER_INPAINT_CREATE_MASK,
@@ -245,9 +231,7 @@ export const addSDXLRefinerToGraph = (
       });
     } else {
       graph.nodes[SDXL_REFINER_INPAINT_CREATE_MASK] = {
-        ...(graph.nodes[
-          SDXL_REFINER_INPAINT_CREATE_MASK
-        ] as CreateDenoiseMaskInvocation),
+        ...(graph.nodes[SDXL_REFINER_INPAINT_CREATE_MASK] as CreateDenoiseMaskInvocation),
         image: canvasInitImage,
       };
     }
@@ -266,9 +250,7 @@ export const addSDXLRefinerToGraph = (
         });
       } else {
         graph.nodes[SDXL_REFINER_INPAINT_CREATE_MASK] = {
-          ...(graph.nodes[
-            SDXL_REFINER_INPAINT_CREATE_MASK
-          ] as CreateDenoiseMaskInvocation),
+          ...(graph.nodes[SDXL_REFINER_INPAINT_CREATE_MASK] as CreateDenoiseMaskInvocation),
           mask: canvasMaskImage,
         };
       }
@@ -299,10 +281,7 @@ export const addSDXLRefinerToGraph = (
     });
   }
 
-  if (
-    graph.id === SDXL_CANVAS_TEXT_TO_IMAGE_GRAPH ||
-    graph.id === SDXL_CANVAS_IMAGE_TO_IMAGE_GRAPH
-  ) {
+  if (graph.id === SDXL_CANVAS_TEXT_TO_IMAGE_GRAPH || graph.id === SDXL_CANVAS_IMAGE_TO_IMAGE_GRAPH) {
     graph.edges.push({
       source: {
         node_id: SDXL_REFINER_DENOISE_LATENTS,
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addSeamlessToLinearGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addSeamlessToLinearGraph.ts
index 330aa75545..89e8900644 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/addSeamlessToLinearGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/addSeamlessToLinearGraph.ts
@@ -1,8 +1,5 @@
 import type { RootState } from 'app/store/store';
-import type {
-  NonNullableGraph,
-  SeamlessModeInvocation,
-} from 'services/api/types';
+import type { NonNullableGraph, SeamlessModeInvocation } from 'services/api/types';
 
 import {
   CANVAS_COHERENCE_DENOISE_LATENTS,
@@ -61,14 +58,8 @@ export const addSeamlessToLinearGraph = (
 
   graph.edges = graph.edges.filter(
     (e) =>
-      !(
-        e.source.node_id === modelLoaderNodeId &&
-        ['unet'].includes(e.source.field)
-      ) &&
-      !(
-        e.source.node_id === modelLoaderNodeId &&
-        ['vae'].includes(e.source.field)
-      )
+      !(e.source.node_id === modelLoaderNodeId && ['unet'].includes(e.source.field)) &&
+      !(e.source.node_id === modelLoaderNodeId && ['vae'].includes(e.source.field))
   );
 
   graph.edges.push(
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addT2IAdapterToLinearGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addT2IAdapterToLinearGraph.ts
index c7be26ec0b..d35f72a2b4 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/addT2IAdapterToLinearGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/addT2IAdapterToLinearGraph.ts
@@ -9,17 +9,10 @@ import type {
   T2IAdapterInvocation,
 } from 'services/api/types';
 
-import {
-  CANVAS_COHERENCE_DENOISE_LATENTS,
-  T2I_ADAPTER_COLLECT,
-} from './constants';
+import { CANVAS_COHERENCE_DENOISE_LATENTS, T2I_ADAPTER_COLLECT } from './constants';
 import { upsertMetadata } from './metadata';
 
-export const addT2IAdaptersToLinearGraph = (
-  state: RootState,
-  graph: NonNullableGraph,
-  baseNodeId: string
-): void => {
+export const addT2IAdaptersToLinearGraph = (state: RootState, graph: NonNullableGraph, baseNodeId: string): void => {
   const validT2IAdapters = selectValidT2IAdapters(state.controlAdapters).filter(
     (ca) => ca.model?.base_model === state.generation.model?.base_model
   );
@@ -95,13 +88,7 @@ export const addT2IAdaptersToLinearGraph = (
 
       graph.nodes[t2iAdapterNode.id] = t2iAdapterNode as T2IAdapterInvocation;
 
-      t2iAdapterMetdata.push(
-        omit(t2iAdapterNode, [
-          'id',
-          'type',
-          'is_intermediate',
-        ]) as T2IAdapterField
-      );
+      t2iAdapterMetdata.push(omit(t2iAdapterNode, ['id', 'type', 'is_intermediate']) as T2IAdapterField);
 
       graph.edges.push({
         source: { node_id: t2iAdapterNode.id, field: 't2i_adapter' },
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addVAEToGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addVAEToGraph.ts
index 405f1e9379..c0b44d9100 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/addVAEToGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/addVAEToGraph.ts
@@ -35,9 +35,7 @@ export const addVAEToGraph = (
   const { boundingBoxScaleMethod } = state.canvas;
   const { refinerModel } = state.sdxl;
 
-  const isUsingScaledDimensions = ['auto', 'manual'].includes(
-    boundingBoxScaleMethod
-  );
+  const isUsingScaledDimensions = ['auto', 'manual'].includes(boundingBoxScaleMethod);
 
   const isAutoVae = !vae;
 
@@ -159,10 +157,7 @@ export const addVAEToGraph = (
   }
 
   if (refinerModel) {
-    if (
-      graph.id === SDXL_CANVAS_INPAINT_GRAPH ||
-      graph.id === SDXL_CANVAS_OUTPAINT_GRAPH
-    ) {
+    if (graph.id === SDXL_CANVAS_INPAINT_GRAPH || graph.id === SDXL_CANVAS_OUTPAINT_GRAPH) {
       graph.edges.push({
         source: {
           node_id: isAutoVae ? modelLoaderNodeId : VAE_LOADER,
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addWatermarkerToGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addWatermarkerToGraph.ts
index 4d3a164d7a..99c5c07be4 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/addWatermarkerToGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/addWatermarkerToGraph.ts
@@ -16,16 +16,11 @@ export const addWatermarkerToGraph = (
 ): void => {
   const activeTabName = activeTabNameSelector(state);
 
-  const is_intermediate =
-    activeTabName === 'unifiedCanvas' ? !state.canvas.shouldAutoSave : false;
+  const is_intermediate = activeTabName === 'unifiedCanvas' ? !state.canvas.shouldAutoSave : false;
 
-  const nodeToAddTo = graph.nodes[nodeIdToAddTo] as
-    | LatentsToImageInvocation
-    | undefined;
+  const nodeToAddTo = graph.nodes[nodeIdToAddTo] as LatentsToImageInvocation | undefined;
 
-  const nsfwCheckerNode = graph.nodes[NSFW_CHECKER] as
-    | ImageNSFWBlurInvocation
-    | undefined;
+  const nsfwCheckerNode = graph.nodes[NSFW_CHECKER] as ImageNSFWBlurInvocation | undefined;
 
   if (!nodeToAddTo) {
     // something has gone terribly awry
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildAdHocUpscaleGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildAdHocUpscaleGraph.ts
index 6c7c10a956..fa20206d91 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildAdHocUpscaleGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildAdHocUpscaleGraph.ts
@@ -1,11 +1,6 @@
 import type { BoardId } from 'features/gallery/store/types';
 import type { ParamESRGANModelName } from 'features/parameters/store/postprocessingSlice';
-import type {
-  ESRGANInvocation,
-  Graph,
-  LinearUIOutputInvocation,
-  NonNullableGraph,
-} from 'services/api/types';
+import type { ESRGANInvocation, Graph, LinearUIOutputInvocation, NonNullableGraph } from 'services/api/types';
 
 import { ESRGAN, LINEAR_UI_OUTPUT } from './constants';
 import { addCoreMetadataNode, upsertMetadata } from './metadata';
@@ -16,11 +11,7 @@ type Arg = {
   autoAddBoardId: BoardId;
 };
 
-export const buildAdHocUpscaleGraph = ({
-  image_name,
-  esrganModelName,
-  autoAddBoardId,
-}: Arg): Graph => {
+export const buildAdHocUpscaleGraph = ({ image_name, esrganModelName, autoAddBoardId }: Arg): Graph => {
   const realesrganNode: ESRGANInvocation = {
     id: ESRGAN,
     type: 'esrgan',
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasGraph.ts
index fe86c7b467..2b64f4898b 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasGraph.ts
@@ -19,10 +19,7 @@ export const buildCanvasGraph = (
   let graph: NonNullableGraph;
 
   if (generationMode === 'txt2img') {
-    if (
-      state.generation.model &&
-      state.generation.model.base_model === 'sdxl'
-    ) {
+    if (state.generation.model && state.generation.model.base_model === 'sdxl') {
       graph = buildCanvasSDXLTextToImageGraph(state);
     } else {
       graph = buildCanvasTextToImageGraph(state);
@@ -31,10 +28,7 @@ export const buildCanvasGraph = (
     if (!canvasInitImage) {
       throw new Error('Missing canvas init image');
     }
-    if (
-      state.generation.model &&
-      state.generation.model.base_model === 'sdxl'
-    ) {
+    if (state.generation.model && state.generation.model.base_model === 'sdxl') {
       graph = buildCanvasSDXLImageToImageGraph(state, canvasInitImage);
     } else {
       graph = buildCanvasImageToImageGraph(state, canvasInitImage);
@@ -43,15 +37,8 @@ export const buildCanvasGraph = (
     if (!canvasInitImage || !canvasMaskImage) {
       throw new Error('Missing canvas init and mask images');
     }
-    if (
-      state.generation.model &&
-      state.generation.model.base_model === 'sdxl'
-    ) {
-      graph = buildCanvasSDXLInpaintGraph(
-        state,
-        canvasInitImage,
-        canvasMaskImage
-      );
+    if (state.generation.model && state.generation.model.base_model === 'sdxl') {
+      graph = buildCanvasSDXLInpaintGraph(state, canvasInitImage, canvasMaskImage);
     } else {
       graph = buildCanvasInpaintGraph(state, canvasInitImage, canvasMaskImage);
     }
@@ -59,15 +46,8 @@ export const buildCanvasGraph = (
     if (!canvasInitImage) {
       throw new Error('Missing canvas init image');
     }
-    if (
-      state.generation.model &&
-      state.generation.model.base_model === 'sdxl'
-    ) {
-      graph = buildCanvasSDXLOutpaintGraph(
-        state,
-        canvasInitImage,
-        canvasMaskImage
-      );
+    if (state.generation.model && state.generation.model.base_model === 'sdxl') {
+      graph = buildCanvasSDXLOutpaintGraph(state, canvasInitImage, canvasMaskImage);
     } else {
       graph = buildCanvasOutpaintGraph(state, canvasInitImage, canvasMaskImage);
     }
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasImageToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasImageToImageGraph.ts
index 8e830c6aef..7a4ca0096f 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasImageToImageGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasImageToImageGraph.ts
@@ -1,10 +1,6 @@
 import { logger } from 'app/logging/logger';
 import type { RootState } from 'app/store/store';
-import type {
-  ImageDTO,
-  ImageToLatentsInvocation,
-  NonNullableGraph,
-} from 'services/api/types';
+import type { ImageDTO, ImageToLatentsInvocation, NonNullableGraph } from 'services/api/types';
 
 import { addControlNetToLinearGraph } from './addControlNetToLinearGraph';
 import { addIPAdapterToLinearGraph } from './addIPAdapterToLinearGraph';
@@ -34,10 +30,7 @@ import { addCoreMetadataNode } from './metadata';
 /**
  * Builds the Canvas tab's Image to Image graph.
  */
-export const buildCanvasImageToImageGraph = (
-  state: RootState,
-  initialImage: ImageDTO
-): NonNullableGraph => {
+export const buildCanvasImageToImageGraph = (state: RootState, initialImage: ImageDTO): NonNullableGraph => {
   const log = logger('nodes');
   const {
     positivePrompt,
@@ -63,9 +56,7 @@ export const buildCanvasImageToImageGraph = (
 
   const fp32 = vaePrecision === 'fp32';
   const is_intermediate = true;
-  const isUsingScaledDimensions = ['auto', 'manual'].includes(
-    boundingBoxScaleMethod
-  );
+  const isUsingScaledDimensions = ['auto', 'manual'].includes(boundingBoxScaleMethod);
 
   if (!model) {
     log.error('No model found in state');
@@ -119,12 +110,8 @@ export const buildCanvasImageToImageGraph = (
         is_intermediate,
         use_cpu,
         seed,
-        width: !isUsingScaledDimensions
-          ? width
-          : scaledBoundingBoxDimensions.width,
-        height: !isUsingScaledDimensions
-          ? height
-          : scaledBoundingBoxDimensions.height,
+        width: !isUsingScaledDimensions ? width : scaledBoundingBoxDimensions.width,
+        height: !isUsingScaledDimensions ? height : scaledBoundingBoxDimensions.height,
       },
       [IMAGE_TO_LATENTS]: {
         type: 'i2l',
@@ -301,8 +288,7 @@ export const buildCanvasImageToImageGraph = (
       use_cache: false,
     };
 
-    (graph.nodes[IMAGE_TO_LATENTS] as ImageToLatentsInvocation).image =
-      initialImage;
+    (graph.nodes[IMAGE_TO_LATENTS] as ImageToLatentsInvocation).image = initialImage;
 
     graph.edges.push({
       source: {
@@ -322,12 +308,8 @@ export const buildCanvasImageToImageGraph = (
       generation_mode: 'img2img',
       cfg_scale,
       cfg_rescale_multiplier,
-      width: !isUsingScaledDimensions
-        ? width
-        : scaledBoundingBoxDimensions.width,
-      height: !isUsingScaledDimensions
-        ? height
-        : scaledBoundingBoxDimensions.height,
+      width: !isUsingScaledDimensions ? width : scaledBoundingBoxDimensions.width,
+      height: !isUsingScaledDimensions ? height : scaledBoundingBoxDimensions.height,
       positive_prompt: positivePrompt,
       negative_prompt: negativePrompt,
       model,
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasInpaintGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasInpaintGraph.ts
index 8eb5ab267e..407581c181 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasInpaintGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasInpaintGraph.ts
@@ -87,9 +87,7 @@ export const buildCanvasInpaintGraph = (
   const is_intermediate = true;
   const fp32 = vaePrecision === 'fp32';
 
-  const isUsingScaledDimensions = ['auto', 'manual'].includes(
-    boundingBoxScaleMethod
-  );
+  const isUsingScaledDimensions = ['auto', 'manual'].includes(boundingBoxScaleMethod);
 
   let modelLoaderNodeId = MAIN_MODEL_LOADER;
 
@@ -404,10 +402,8 @@ export const buildCanvasInpaintGraph = (
 
     (graph.nodes[NOISE] as NoiseInvocation).width = scaledWidth;
     (graph.nodes[NOISE] as NoiseInvocation).height = scaledHeight;
-    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).width =
-      scaledWidth;
-    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).height =
-      scaledHeight;
+    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).width = scaledWidth;
+    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).height = scaledHeight;
 
     // Connect Nodes
     graph.edges.push(
@@ -553,9 +549,7 @@ export const buildCanvasInpaintGraph = (
       });
     } else {
       graph.nodes[CANVAS_COHERENCE_INPAINT_CREATE_MASK] = {
-        ...(graph.nodes[
-          CANVAS_COHERENCE_INPAINT_CREATE_MASK
-        ] as CreateDenoiseMaskInvocation),
+        ...(graph.nodes[CANVAS_COHERENCE_INPAINT_CREATE_MASK] as CreateDenoiseMaskInvocation),
         image: canvasInitImage,
       };
     }
@@ -575,9 +569,7 @@ export const buildCanvasInpaintGraph = (
         });
       } else {
         graph.nodes[CANVAS_COHERENCE_INPAINT_CREATE_MASK] = {
-          ...(graph.nodes[
-            CANVAS_COHERENCE_INPAINT_CREATE_MASK
-          ] as CreateDenoiseMaskInvocation),
+          ...(graph.nodes[CANVAS_COHERENCE_INPAINT_CREATE_MASK] as CreateDenoiseMaskInvocation),
           mask: canvasMaskImage,
         };
       }
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasOutpaintGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasOutpaintGraph.ts
index d016cf4dd1..5614aa0604 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasOutpaintGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasOutpaintGraph.ts
@@ -91,9 +91,7 @@ export const buildCanvasOutpaintGraph = (
 
   const fp32 = vaePrecision === 'fp32';
   const is_intermediate = true;
-  const isUsingScaledDimensions = ['auto', 'manual'].includes(
-    boundingBoxScaleMethod
-  );
+  const isUsingScaledDimensions = ['auto', 'manual'].includes(boundingBoxScaleMethod);
 
   let modelLoaderNodeId = MAIN_MODEL_LOADER;
 
@@ -485,10 +483,8 @@ export const buildCanvasOutpaintGraph = (
 
     (graph.nodes[NOISE] as NoiseInvocation).width = scaledWidth;
     (graph.nodes[NOISE] as NoiseInvocation).height = scaledHeight;
-    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).width =
-      scaledWidth;
-    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).height =
-      scaledHeight;
+    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).width = scaledWidth;
+    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).height = scaledHeight;
 
     // Connect Nodes
     graph.edges.push(
@@ -581,9 +577,7 @@ export const buildCanvasOutpaintGraph = (
   } else {
     // Add Images To Nodes
     graph.nodes[INPAINT_INFILL] = {
-      ...(graph.nodes[INPAINT_INFILL] as
-        | InfillTileInvocation
-        | InfillPatchMatchInvocation),
+      ...(graph.nodes[INPAINT_INFILL] as InfillTileInvocation | InfillPatchMatchInvocation),
       image: canvasInitImage,
     };
 
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLImageToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLImageToImageGraph.ts
index 58a59c980f..40f71930a3 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLImageToImageGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLImageToImageGraph.ts
@@ -1,10 +1,6 @@
 import { logger } from 'app/logging/logger';
 import type { RootState } from 'app/store/store';
-import type {
-  ImageDTO,
-  ImageToLatentsInvocation,
-  NonNullableGraph,
-} from 'services/api/types';
+import type { ImageDTO, ImageToLatentsInvocation, NonNullableGraph } from 'services/api/types';
 
 import { addControlNetToLinearGraph } from './addControlNetToLinearGraph';
 import { addIPAdapterToLinearGraph } from './addIPAdapterToLinearGraph';
@@ -36,10 +32,7 @@ import { addCoreMetadataNode } from './metadata';
 /**
  * Builds the Canvas tab's Image to Image graph.
  */
-export const buildCanvasSDXLImageToImageGraph = (
-  state: RootState,
-  initialImage: ImageDTO
-): NonNullableGraph => {
+export const buildCanvasSDXLImageToImageGraph = (state: RootState, initialImage: ImageDTO): NonNullableGraph => {
   const log = logger('nodes');
   const {
     positivePrompt,
@@ -66,9 +59,7 @@ export const buildCanvasSDXLImageToImageGraph = (
 
   const fp32 = vaePrecision === 'fp32';
   const is_intermediate = true;
-  const isUsingScaledDimensions = ['auto', 'manual'].includes(
-    boundingBoxScaleMethod
-  );
+  const isUsingScaledDimensions = ['auto', 'manual'].includes(boundingBoxScaleMethod);
 
   if (!model) {
     log.error('No model found in state');
@@ -81,8 +72,7 @@ export const buildCanvasSDXLImageToImageGraph = (
   const use_cpu = shouldUseCpuNoise;
 
   // Construct Style Prompt
-  const { positiveStylePrompt, negativeStylePrompt } =
-    getSDXLStylePrompts(state);
+  const { positiveStylePrompt, negativeStylePrompt } = getSDXLStylePrompts(state);
 
   /**
    * The easiest way to build linear graphs is to do it in the node editor, then copy and paste the
@@ -120,12 +110,8 @@ export const buildCanvasSDXLImageToImageGraph = (
         is_intermediate,
         use_cpu,
         seed,
-        width: !isUsingScaledDimensions
-          ? width
-          : scaledBoundingBoxDimensions.width,
-        height: !isUsingScaledDimensions
-          ? height
-          : scaledBoundingBoxDimensions.height,
+        width: !isUsingScaledDimensions ? width : scaledBoundingBoxDimensions.width,
+        height: !isUsingScaledDimensions ? height : scaledBoundingBoxDimensions.height,
       },
       [IMAGE_TO_LATENTS]: {
         type: 'i2l',
@@ -140,9 +126,7 @@ export const buildCanvasSDXLImageToImageGraph = (
         cfg_scale,
         scheduler,
         steps,
-        denoising_start: refinerModel
-          ? Math.min(refinerStart, 1 - strength)
-          : 1 - strength,
+        denoising_start: refinerModel ? Math.min(refinerStart, 1 - strength) : 1 - strength,
         denoising_end: refinerModel ? refinerStart : 1,
       },
     },
@@ -308,8 +292,7 @@ export const buildCanvasSDXLImageToImageGraph = (
       use_cache: false,
     };
 
-    (graph.nodes[IMAGE_TO_LATENTS] as ImageToLatentsInvocation).image =
-      initialImage;
+    (graph.nodes[IMAGE_TO_LATENTS] as ImageToLatentsInvocation).image = initialImage;
 
     graph.edges.push({
       source: {
@@ -329,12 +312,8 @@ export const buildCanvasSDXLImageToImageGraph = (
       generation_mode: 'img2img',
       cfg_scale,
       cfg_rescale_multiplier,
-      width: !isUsingScaledDimensions
-        ? width
-        : scaledBoundingBoxDimensions.width,
-      height: !isUsingScaledDimensions
-        ? height
-        : scaledBoundingBoxDimensions.height,
+      width: !isUsingScaledDimensions ? width : scaledBoundingBoxDimensions.width,
+      height: !isUsingScaledDimensions ? height : scaledBoundingBoxDimensions.height,
       positive_prompt: positivePrompt,
       negative_prompt: negativePrompt,
       model,
@@ -358,12 +337,7 @@ export const buildCanvasSDXLImageToImageGraph = (
 
   // Add Refiner if enabled
   if (refinerModel) {
-    addSDXLRefinerToGraph(
-      state,
-      graph,
-      SDXL_DENOISE_LATENTS,
-      modelLoaderNodeId
-    );
+    addSDXLRefinerToGraph(state, graph, SDXL_DENOISE_LATENTS, modelLoaderNodeId);
     if (seamlessXAxis || seamlessYAxis) {
       modelLoaderNodeId = SDXL_REFINER_SEAMLESS;
     }
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLInpaintGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLInpaintGraph.ts
index ab6fc10f1f..afc0fd9386 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLInpaintGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLInpaintGraph.ts
@@ -90,17 +90,14 @@ export const buildCanvasSDXLInpaintGraph = (
 
   const fp32 = vaePrecision === 'fp32';
   const is_intermediate = true;
-  const isUsingScaledDimensions = ['auto', 'manual'].includes(
-    boundingBoxScaleMethod
-  );
+  const isUsingScaledDimensions = ['auto', 'manual'].includes(boundingBoxScaleMethod);
 
   let modelLoaderNodeId = SDXL_MODEL_LOADER;
 
   const use_cpu = shouldUseCpuNoise;
 
   // Construct Style Prompt
-  const { positiveStylePrompt, negativeStylePrompt } =
-    getSDXLStylePrompts(state);
+  const { positiveStylePrompt, negativeStylePrompt } = getSDXLStylePrompts(state);
 
   const graph: NonNullableGraph = {
     id: SDXL_CANVAS_INPAINT_GRAPH,
@@ -155,9 +152,7 @@ export const buildCanvasSDXLInpaintGraph = (
         steps: steps,
         cfg_scale: cfg_scale,
         scheduler: scheduler,
-        denoising_start: refinerModel
-          ? Math.min(refinerStart, 1 - strength)
-          : 1 - strength,
+        denoising_start: refinerModel ? Math.min(refinerStart, 1 - strength) : 1 - strength,
         denoising_end: refinerModel ? refinerStart : 1,
       },
       [CANVAS_COHERENCE_NOISE]: {
@@ -415,10 +410,8 @@ export const buildCanvasSDXLInpaintGraph = (
 
     (graph.nodes[NOISE] as NoiseInvocation).width = scaledWidth;
     (graph.nodes[NOISE] as NoiseInvocation).height = scaledHeight;
-    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).width =
-      scaledWidth;
-    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).height =
-      scaledHeight;
+    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).width = scaledWidth;
+    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).height = scaledHeight;
 
     // Connect Nodes
     graph.edges.push(
@@ -564,9 +557,7 @@ export const buildCanvasSDXLInpaintGraph = (
       });
     } else {
       graph.nodes[CANVAS_COHERENCE_INPAINT_CREATE_MASK] = {
-        ...(graph.nodes[
-          CANVAS_COHERENCE_INPAINT_CREATE_MASK
-        ] as CreateDenoiseMaskInvocation),
+        ...(graph.nodes[CANVAS_COHERENCE_INPAINT_CREATE_MASK] as CreateDenoiseMaskInvocation),
         image: canvasInitImage,
       };
     }
@@ -586,9 +577,7 @@ export const buildCanvasSDXLInpaintGraph = (
         });
       } else {
         graph.nodes[CANVAS_COHERENCE_INPAINT_CREATE_MASK] = {
-          ...(graph.nodes[
-            CANVAS_COHERENCE_INPAINT_CREATE_MASK
-          ] as CreateDenoiseMaskInvocation),
+          ...(graph.nodes[CANVAS_COHERENCE_INPAINT_CREATE_MASK] as CreateDenoiseMaskInvocation),
           mask: canvasMaskImage,
         };
       }
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLOutpaintGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLOutpaintGraph.ts
index a898df5c8d..2d70dc219b 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLOutpaintGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLOutpaintGraph.ts
@@ -94,17 +94,14 @@ export const buildCanvasSDXLOutpaintGraph = (
 
   const fp32 = vaePrecision === 'fp32';
   const is_intermediate = true;
-  const isUsingScaledDimensions = ['auto', 'manual'].includes(
-    boundingBoxScaleMethod
-  );
+  const isUsingScaledDimensions = ['auto', 'manual'].includes(boundingBoxScaleMethod);
 
   let modelLoaderNodeId = SDXL_MODEL_LOADER;
 
   const use_cpu = shouldUseCpuNoise;
 
   // Construct Style Prompt
-  const { positiveStylePrompt, negativeStylePrompt } =
-    getSDXLStylePrompts(state);
+  const { positiveStylePrompt, negativeStylePrompt } = getSDXLStylePrompts(state);
 
   const graph: NonNullableGraph = {
     id: SDXL_CANVAS_OUTPAINT_GRAPH,
@@ -164,9 +161,7 @@ export const buildCanvasSDXLOutpaintGraph = (
         steps: steps,
         cfg_scale: cfg_scale,
         scheduler: scheduler,
-        denoising_start: refinerModel
-          ? Math.min(refinerStart, 1 - strength)
-          : 1 - strength,
+        denoising_start: refinerModel ? Math.min(refinerStart, 1 - strength) : 1 - strength,
         denoising_end: refinerModel ? refinerStart : 1,
       },
       [CANVAS_COHERENCE_NOISE]: {
@@ -496,10 +491,8 @@ export const buildCanvasSDXLOutpaintGraph = (
 
     (graph.nodes[NOISE] as NoiseInvocation).width = scaledWidth;
     (graph.nodes[NOISE] as NoiseInvocation).height = scaledHeight;
-    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).width =
-      scaledWidth;
-    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).height =
-      scaledHeight;
+    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).width = scaledWidth;
+    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).height = scaledHeight;
 
     // Connect Nodes
     graph.edges.push(
@@ -593,9 +586,7 @@ export const buildCanvasSDXLOutpaintGraph = (
   } else {
     // Add Images To Nodes
     graph.nodes[INPAINT_INFILL] = {
-      ...(graph.nodes[INPAINT_INFILL] as
-        | InfillTileInvocation
-        | InfillPatchMatchInvocation),
+      ...(graph.nodes[INPAINT_INFILL] as InfillTileInvocation | InfillPatchMatchInvocation),
       image: canvasInitImage,
     };
 
@@ -761,13 +752,7 @@ export const buildCanvasSDXLOutpaintGraph = (
 
   // Add Refiner if enabled
   if (refinerModel) {
-    addSDXLRefinerToGraph(
-      state,
-      graph,
-      CANVAS_COHERENCE_DENOISE_LATENTS,
-      modelLoaderNodeId,
-      canvasInitImage
-    );
+    addSDXLRefinerToGraph(state, graph, CANVAS_COHERENCE_DENOISE_LATENTS, modelLoaderNodeId, canvasInitImage);
     if (seamlessXAxis || seamlessYAxis) {
       modelLoaderNodeId = SDXL_REFINER_SEAMLESS;
     }
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLTextToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLTextToImageGraph.ts
index 276fe42049..772990ee0e 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLTextToImageGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLTextToImageGraph.ts
@@ -30,9 +30,7 @@ import { addCoreMetadataNode } from './metadata';
 /**
  * Builds the Canvas tab's Text to Image graph.
  */
-export const buildCanvasSDXLTextToImageGraph = (
-  state: RootState
-): NonNullableGraph => {
+export const buildCanvasSDXLTextToImageGraph = (state: RootState): NonNullableGraph => {
   const log = logger('nodes');
   const {
     positivePrompt,
@@ -56,9 +54,7 @@ export const buildCanvasSDXLTextToImageGraph = (
 
   const fp32 = vaePrecision === 'fp32';
   const is_intermediate = true;
-  const isUsingScaledDimensions = ['auto', 'manual'].includes(
-    boundingBoxScaleMethod
-  );
+  const isUsingScaledDimensions = ['auto', 'manual'].includes(boundingBoxScaleMethod);
 
   const { refinerModel, refinerStart } = state.sdxl;
 
@@ -72,8 +68,7 @@ export const buildCanvasSDXLTextToImageGraph = (
   let modelLoaderNodeId = SDXL_MODEL_LOADER;
 
   // Construct Style Prompt
-  const { positiveStylePrompt, negativeStylePrompt } =
-    getSDXLStylePrompts(state);
+  const { positiveStylePrompt, negativeStylePrompt } = getSDXLStylePrompts(state);
 
   /**
    * The easiest way to build linear graphs is to do it in the node editor, then copy and paste the
@@ -113,12 +108,8 @@ export const buildCanvasSDXLTextToImageGraph = (
         id: NOISE,
         is_intermediate,
         seed,
-        width: !isUsingScaledDimensions
-          ? width
-          : scaledBoundingBoxDimensions.width,
-        height: !isUsingScaledDimensions
-          ? height
-          : scaledBoundingBoxDimensions.height,
+        width: !isUsingScaledDimensions ? width : scaledBoundingBoxDimensions.width,
+        height: !isUsingScaledDimensions ? height : scaledBoundingBoxDimensions.height,
         use_cpu,
       },
       [SDXL_DENOISE_LATENTS]: {
@@ -285,12 +276,8 @@ export const buildCanvasSDXLTextToImageGraph = (
       generation_mode: 'txt2img',
       cfg_scale,
       cfg_rescale_multiplier,
-      width: !isUsingScaledDimensions
-        ? width
-        : scaledBoundingBoxDimensions.width,
-      height: !isUsingScaledDimensions
-        ? height
-        : scaledBoundingBoxDimensions.height,
+      width: !isUsingScaledDimensions ? width : scaledBoundingBoxDimensions.width,
+      height: !isUsingScaledDimensions ? height : scaledBoundingBoxDimensions.height,
       positive_prompt: positivePrompt,
       negative_prompt: negativePrompt,
       positive_style_prompt: positiveStylePrompt,
@@ -312,12 +299,7 @@ export const buildCanvasSDXLTextToImageGraph = (
 
   // Add Refiner if enabled
   if (refinerModel) {
-    addSDXLRefinerToGraph(
-      state,
-      graph,
-      SDXL_DENOISE_LATENTS,
-      modelLoaderNodeId
-    );
+    addSDXLRefinerToGraph(state, graph, SDXL_DENOISE_LATENTS, modelLoaderNodeId);
     if (seamlessXAxis || seamlessYAxis) {
       modelLoaderNodeId = SDXL_REFINER_SEAMLESS;
     }
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasTextToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasTextToImageGraph.ts
index c940183383..1869619346 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasTextToImageGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasTextToImageGraph.ts
@@ -28,9 +28,7 @@ import { addCoreMetadataNode } from './metadata';
 /**
  * Builds the Canvas tab's Text to Image graph.
  */
-export const buildCanvasTextToImageGraph = (
-  state: RootState
-): NonNullableGraph => {
+export const buildCanvasTextToImageGraph = (state: RootState): NonNullableGraph => {
   const log = logger('nodes');
   const {
     positivePrompt,
@@ -55,9 +53,7 @@ export const buildCanvasTextToImageGraph = (
 
   const fp32 = vaePrecision === 'fp32';
   const is_intermediate = true;
-  const isUsingScaledDimensions = ['auto', 'manual'].includes(
-    boundingBoxScaleMethod
-  );
+  const isUsingScaledDimensions = ['auto', 'manual'].includes(boundingBoxScaleMethod);
 
   if (!model) {
     log.error('No model found in state');
@@ -110,12 +106,8 @@ export const buildCanvasTextToImageGraph = (
         id: NOISE,
         is_intermediate,
         seed,
-        width: !isUsingScaledDimensions
-          ? width
-          : scaledBoundingBoxDimensions.width,
-        height: !isUsingScaledDimensions
-          ? height
-          : scaledBoundingBoxDimensions.height,
+        width: !isUsingScaledDimensions ? width : scaledBoundingBoxDimensions.width,
+        height: !isUsingScaledDimensions ? height : scaledBoundingBoxDimensions.height,
         use_cpu,
       },
       [DENOISE_LATENTS]: {
@@ -273,12 +265,8 @@ export const buildCanvasTextToImageGraph = (
       generation_mode: 'txt2img',
       cfg_scale,
       cfg_rescale_multiplier,
-      width: !isUsingScaledDimensions
-        ? width
-        : scaledBoundingBoxDimensions.width,
-      height: !isUsingScaledDimensions
-        ? height
-        : scaledBoundingBoxDimensions.height,
+      width: !isUsingScaledDimensions ? width : scaledBoundingBoxDimensions.width,
+      height: !isUsingScaledDimensions ? height : scaledBoundingBoxDimensions.height,
       positive_prompt: positivePrompt,
       negative_prompt: negativePrompt,
       model,
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearBatchConfig.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearBatchConfig.ts
index a888479304..d0e331fb46 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearBatchConfig.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearBatchConfig.ts
@@ -5,19 +5,10 @@ import { range } from 'lodash-es';
 import type { components } from 'services/api/schema';
 import type { Batch, BatchConfig, NonNullableGraph } from 'services/api/types';
 
-import {
-  CANVAS_COHERENCE_NOISE,
-  METADATA,
-  NOISE,
-  POSITIVE_CONDITIONING,
-} from './constants';
+import { CANVAS_COHERENCE_NOISE, METADATA, NOISE, POSITIVE_CONDITIONING } from './constants';
 import { getHasMetadata, removeMetadata } from './metadata';
 
-export const prepareLinearUIBatch = (
-  state: RootState,
-  graph: NonNullableGraph,
-  prepend: boolean
-): BatchConfig => {
+export const prepareLinearUIBatch = (state: RootState, graph: NonNullableGraph, prepend: boolean): BatchConfig => {
   const { iterations, model, shouldRandomizeSeed, seed } = state.generation;
   const { shouldConcatSDXLStylePrompt } = state.sdxl;
   const { prompts, seedBehaviour } = state.dynamicPrompts;
@@ -93,10 +84,7 @@ export const prepareLinearUIBatch = (
     data.push(secondBatchDatumList);
   }
 
-  const extendedPrompts =
-    seedBehaviour === 'PER_PROMPT'
-      ? range(iterations).flatMap(() => prompts)
-      : prompts;
+  const extendedPrompts = seedBehaviour === 'PER_PROMPT' ? range(iterations).flatMap(() => prompts) : prompts;
 
   // zipped batch of prompts
   if (graph.nodes[POSITIVE_CONDITIONING]) {
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearImageToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearImageToImageGraph.ts
index d6f52b5e91..15d46053b9 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearImageToImageGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearImageToImageGraph.ts
@@ -1,10 +1,6 @@
 import { logger } from 'app/logging/logger';
 import type { RootState } from 'app/store/store';
-import type {
-  ImageResizeInvocation,
-  ImageToLatentsInvocation,
-  NonNullableGraph,
-} from 'services/api/types';
+import type { ImageResizeInvocation, ImageToLatentsInvocation, NonNullableGraph } from 'services/api/types';
 
 import { addControlNetToLinearGraph } from './addControlNetToLinearGraph';
 import { addIPAdapterToLinearGraph } from './addIPAdapterToLinearGraph';
@@ -33,9 +29,7 @@ import { addCoreMetadataNode } from './metadata';
 /**
  * Builds the Image to Image tab graph.
  */
-export const buildLinearImageToImageGraph = (
-  state: RootState
-): NonNullableGraph => {
+export const buildLinearImageToImageGraph = (state: RootState): NonNullableGraph => {
   const log = logger('nodes');
   const {
     positivePrompt,
@@ -246,10 +240,7 @@ export const buildLinearImageToImageGraph = (
   };
 
   // handle `fit`
-  if (
-    shouldFitToWidthHeight &&
-    (initialImage.width !== width || initialImage.height !== height)
-  ) {
+  if (shouldFitToWidthHeight && (initialImage.width !== width || initialImage.height !== height)) {
     // The init image needs to be resized to the specified width and height before being passed to `IMAGE_TO_LATENTS`
 
     // Create a resize node, explicitly setting its image
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearSDXLImageToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearSDXLImageToImageGraph.ts
index 96fd3570a3..585d80fd41 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearSDXLImageToImageGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearSDXLImageToImageGraph.ts
@@ -1,10 +1,6 @@
 import { logger } from 'app/logging/logger';
 import type { RootState } from 'app/store/store';
-import type {
-  ImageResizeInvocation,
-  ImageToLatentsInvocation,
-  NonNullableGraph,
-} from 'services/api/types';
+import type { ImageResizeInvocation, ImageToLatentsInvocation, NonNullableGraph } from 'services/api/types';
 
 import { addControlNetToLinearGraph } from './addControlNetToLinearGraph';
 import { addIPAdapterToLinearGraph } from './addIPAdapterToLinearGraph';
@@ -35,9 +31,7 @@ import { addCoreMetadataNode } from './metadata';
 /**
  * Builds the Image to Image tab graph.
  */
-export const buildLinearSDXLImageToImageGraph = (
-  state: RootState
-): NonNullableGraph => {
+export const buildLinearSDXLImageToImageGraph = (state: RootState): NonNullableGraph => {
   const log = logger('nodes');
   const {
     positivePrompt,
@@ -89,8 +83,7 @@ export const buildLinearSDXLImageToImageGraph = (
   const use_cpu = shouldUseCpuNoise;
 
   // Construct Style Prompt
-  const { positiveStylePrompt, negativeStylePrompt } =
-    getSDXLStylePrompts(state);
+  const { positiveStylePrompt, negativeStylePrompt } = getSDXLStylePrompts(state);
 
   // copy-pasted graph from node editor, filled in with state values & friendly node ids
   const graph: NonNullableGraph = {
@@ -135,9 +128,7 @@ export const buildLinearSDXLImageToImageGraph = (
         cfg_scale,
         scheduler,
         steps,
-        denoising_start: refinerModel
-          ? Math.min(refinerStart, 1 - strength)
-          : 1 - strength,
+        denoising_start: refinerModel ? Math.min(refinerStart, 1 - strength) : 1 - strength,
         denoising_end: refinerModel ? refinerStart : 1,
         is_intermediate,
       },
@@ -261,10 +252,7 @@ export const buildLinearSDXLImageToImageGraph = (
   };
 
   // handle `fit`
-  if (
-    shouldFitToWidthHeight &&
-    (initialImage.width !== width || initialImage.height !== height)
-  ) {
+  if (shouldFitToWidthHeight && (initialImage.width !== width || initialImage.height !== height)) {
     // The init image needs to be resized to the specified width and height before being passed to `IMAGE_TO_LATENTS`
 
     // Create a resize node, explicitly setting its image
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearSDXLTextToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearSDXLTextToImageGraph.ts
index 1e7392eaf8..3af044e46d 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearSDXLTextToImageGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearSDXLTextToImageGraph.ts
@@ -26,9 +26,7 @@ import {
 import { getSDXLStylePrompts } from './getSDXLStylePrompt';
 import { addCoreMetadataNode } from './metadata';
 
-export const buildLinearSDXLTextToImageGraph = (
-  state: RootState
-): NonNullableGraph => {
+export const buildLinearSDXLTextToImageGraph = (state: RootState): NonNullableGraph => {
   const log = logger('nodes');
   const {
     positivePrompt,
@@ -60,8 +58,7 @@ export const buildLinearSDXLTextToImageGraph = (
   const is_intermediate = true;
 
   // Construct Style Prompt
-  const { positiveStylePrompt, negativeStylePrompt } =
-    getSDXLStylePrompts(state);
+  const { positiveStylePrompt, negativeStylePrompt } = getSDXLStylePrompts(state);
 
   // Model Loader ID
   let modelLoaderNodeId = SDXL_MODEL_LOADER;
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearTextToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearTextToImageGraph.ts
index f33f88f5ba..0a45d91deb 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearTextToImageGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearTextToImageGraph.ts
@@ -25,9 +25,7 @@ import {
 } from './constants';
 import { addCoreMetadataNode } from './metadata';
 
-export const buildLinearTextToImageGraph = (
-  state: RootState
-): NonNullableGraph => {
+export const buildLinearTextToImageGraph = (state: RootState): NonNullableGraph => {
   const log = logger('nodes');
   const {
     positivePrompt,
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildNodesGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildNodesGraph.ts
index f54df1178f..3dc8c8f735 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildNodesGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildNodesGraph.ts
@@ -38,68 +38,62 @@ export const buildNodesGraph = (nodesState: NodesState): Graph => {
   const filteredNodes = nodes.filter(isInvocationNode);
 
   // Reduce the node editor nodes into invocation graph nodes
-  const parsedNodes = filteredNodes.reduce<NonNullable<Graph['nodes']>>(
-    (nodesAccumulator, node) => {
-      const { id, data } = node;
-      const { type, inputs, isIntermediate } = data;
+  const parsedNodes = filteredNodes.reduce<NonNullable<Graph['nodes']>>((nodesAccumulator, node) => {
+    const { id, data } = node;
+    const { type, inputs, isIntermediate } = data;
 
-      // Transform each node's inputs to simple key-value pairs
-      const transformedInputs = reduce(
-        inputs,
-        (inputsAccumulator, input, name) => {
-          const parsedValue = parseFieldValue(input);
-          inputsAccumulator[name] = parsedValue;
+    // Transform each node's inputs to simple key-value pairs
+    const transformedInputs = reduce(
+      inputs,
+      (inputsAccumulator, input, name) => {
+        const parsedValue = parseFieldValue(input);
+        inputsAccumulator[name] = parsedValue;
 
-          return inputsAccumulator;
-        },
-        {} as Record<Exclude<string, 'id' | 'type'>, unknown>
-      );
+        return inputsAccumulator;
+      },
+      {} as Record<Exclude<string, 'id' | 'type'>, unknown>
+    );
 
-      // add reserved use_cache
-      transformedInputs['use_cache'] = node.data.useCache;
+    // add reserved use_cache
+    transformedInputs['use_cache'] = node.data.useCache;
 
-      // Build this specific node
-      const graphNode = {
-        type,
-        id,
-        ...transformedInputs,
-        is_intermediate: isIntermediate,
-      };
+    // Build this specific node
+    const graphNode = {
+      type,
+      id,
+      ...transformedInputs,
+      is_intermediate: isIntermediate,
+    };
 
-      // Add it to the nodes object
-      Object.assign(nodesAccumulator, {
-        [id]: graphNode,
-      });
+    // Add it to the nodes object
+    Object.assign(nodesAccumulator, {
+      [id]: graphNode,
+    });
 
-      return nodesAccumulator;
-    },
-    {}
-  );
+    return nodesAccumulator;
+  }, {});
 
   // skip out the "dummy" edges between collapsed nodes
   const filteredEdges = edges.filter((n) => n.type !== 'collapsed');
 
   // Reduce the node editor edges into invocation graph edges
-  const parsedEdges = filteredEdges.reduce<NonNullable<Graph['edges']>>(
-    (edgesAccumulator, edge) => {
-      const { source, target, sourceHandle, targetHandle } = edge;
+  const parsedEdges = filteredEdges.reduce<NonNullable<Graph['edges']>>((edgesAccumulator, edge) => {
+    const { source, target, sourceHandle, targetHandle } = edge;
 
-      // Format the edges and add to the edges array
-      edgesAccumulator.push({
-        source: {
-          node_id: source,
-          field: sourceHandle as string,
-        },
-        destination: {
-          node_id: target,
-          field: targetHandle as string,
-        },
-      });
+    // Format the edges and add to the edges array
+    edgesAccumulator.push({
+      source: {
+        node_id: source,
+        field: sourceHandle as string,
+      },
+      destination: {
+        node_id: target,
+        field: targetHandle as string,
+      },
+    });
 
-      return edgesAccumulator;
-    },
-    []
-  );
+    return edgesAccumulator;
+  }, []);
 
   /**
    * Omit all inputs that have edges connected.
@@ -113,10 +107,7 @@ export const buildNodesGraph = (nodesState: NodesState): Graph => {
   parsedEdges.forEach((edge) => {
     const destination_node = parsedNodes[edge.destination.node_id];
     const field = edge.destination.field;
-    parsedNodes[edge.destination.node_id] = omit(
-      destination_node,
-      field
-    ) as AnyInvocation;
+    parsedNodes[edge.destination.node_id] = omit(destination_node, field) as AnyInvocation;
   });
 
   // Assemble!
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/constants.ts b/invokeai/frontend/web/src/features/nodes/util/graph/constants.ts
index cfb34e6090..363d319121 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/constants.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/constants.ts
@@ -35,14 +35,11 @@ export const INPAINT_INFILL_RESIZE_DOWN = 'inpaint_infill_resize_down';
 export const INPAINT_FINAL_IMAGE = 'inpaint_final_image';
 export const INPAINT_CREATE_MASK = 'inpaint_create_mask';
 export const INPAINT_MASK = 'inpaint_mask';
-export const CANVAS_COHERENCE_DENOISE_LATENTS =
-  'canvas_coherence_denoise_latents';
+export const CANVAS_COHERENCE_DENOISE_LATENTS = 'canvas_coherence_denoise_latents';
 export const CANVAS_COHERENCE_NOISE = 'canvas_coherence_noise';
-export const CANVAS_COHERENCE_NOISE_INCREMENT =
-  'canvas_coherence_noise_increment';
+export const CANVAS_COHERENCE_NOISE_INCREMENT = 'canvas_coherence_noise_increment';
 export const CANVAS_COHERENCE_MASK_EDGE = 'canvas_coherence_mask_edge';
-export const CANVAS_COHERENCE_INPAINT_CREATE_MASK =
-  'canvas_coherence_inpaint_create_mask';
+export const CANVAS_COHERENCE_INPAINT_CREATE_MASK = 'canvas_coherence_inpaint_create_mask';
 export const MASK_FROM_ALPHA = 'tomask';
 export const MASK_EDGE = 'mask_edge';
 export const MASK_BLUR = 'mask_blur';
@@ -72,10 +69,8 @@ export const SCALE = 'scale_image';
 export const SDXL_MODEL_LOADER = 'sdxl_model_loader';
 export const SDXL_DENOISE_LATENTS = 'sdxl_denoise_latents';
 export const SDXL_REFINER_MODEL_LOADER = 'sdxl_refiner_model_loader';
-export const SDXL_REFINER_POSITIVE_CONDITIONING =
-  'sdxl_refiner_positive_conditioning';
-export const SDXL_REFINER_NEGATIVE_CONDITIONING =
-  'sdxl_refiner_negative_conditioning';
+export const SDXL_REFINER_POSITIVE_CONDITIONING = 'sdxl_refiner_positive_conditioning';
+export const SDXL_REFINER_NEGATIVE_CONDITIONING = 'sdxl_refiner_negative_conditioning';
 export const SDXL_REFINER_DENOISE_LATENTS = 'sdxl_refiner_denoise_latents';
 export const SDXL_REFINER_INPAINT_CREATE_MASK = 'refiner_inpaint_create_mask';
 export const SEAMLESS = 'seamless';
@@ -116,9 +111,7 @@ export const CANVAS_INPAINT_GRAPH = 'canvas_inpaint_graph';
 export const CANVAS_OUTPAINT_GRAPH = 'canvas_outpaint_graph';
 export const SDXL_TEXT_TO_IMAGE_GRAPH = 'sdxl_text_to_image_graph';
 export const SDXL_IMAGE_TO_IMAGE_GRAPH = 'sxdl_image_to_image_graph';
-export const SDXL_CANVAS_TEXT_TO_IMAGE_GRAPH =
-  'sdxl_canvas_text_to_image_graph';
-export const SDXL_CANVAS_IMAGE_TO_IMAGE_GRAPH =
-  'sdxl_canvas_image_to_image_graph';
+export const SDXL_CANVAS_TEXT_TO_IMAGE_GRAPH = 'sdxl_canvas_text_to_image_graph';
+export const SDXL_CANVAS_IMAGE_TO_IMAGE_GRAPH = 'sdxl_canvas_image_to_image_graph';
 export const SDXL_CANVAS_INPAINT_GRAPH = 'sdxl_canvas_inpaint_graph';
 export const SDXL_CANVAS_OUTPAINT_GRAPH = 'sdxl_canvas_outpaint_graph';
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/getSDXLStylePrompt.ts b/invokeai/frontend/web/src/features/nodes/util/graph/getSDXLStylePrompt.ts
index 04262d975e..e1cd8518fd 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/getSDXLStylePrompt.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/getSDXLStylePrompt.ts
@@ -1,21 +1,11 @@
 import type { RootState } from 'app/store/store';
 
-export const getSDXLStylePrompts = (
-  state: RootState
-): { positiveStylePrompt: string; negativeStylePrompt: string } => {
+export const getSDXLStylePrompts = (state: RootState): { positiveStylePrompt: string; negativeStylePrompt: string } => {
   const { positivePrompt, negativePrompt } = state.generation;
-  const {
-    positiveStylePrompt,
-    negativeStylePrompt,
-    shouldConcatSDXLStylePrompt,
-  } = state.sdxl;
+  const { positiveStylePrompt, negativeStylePrompt, shouldConcatSDXLStylePrompt } = state.sdxl;
 
   return {
-    positiveStylePrompt: shouldConcatSDXLStylePrompt
-      ? positivePrompt
-      : positiveStylePrompt,
-    negativeStylePrompt: shouldConcatSDXLStylePrompt
-      ? negativePrompt
-      : negativeStylePrompt,
+    positiveStylePrompt: shouldConcatSDXLStylePrompt ? positivePrompt : positiveStylePrompt,
+    negativeStylePrompt: shouldConcatSDXLStylePrompt ? negativePrompt : negativeStylePrompt,
   };
 };
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/metadata.ts b/invokeai/frontend/web/src/features/nodes/util/graph/metadata.ts
index 95771c931a..781ce57ebc 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/metadata.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/metadata.ts
@@ -1,7 +1,4 @@
-import type {
-  CoreMetadataInvocation,
-  NonNullableGraph,
-} from 'services/api/types';
+import type { CoreMetadataInvocation, NonNullableGraph } from 'services/api/types';
 import type { JsonObject } from 'type-fest';
 
 import { METADATA } from './constants';
@@ -35,9 +32,7 @@ export const upsertMetadata = (
   graph: NonNullableGraph,
   metadata: Partial<CoreMetadataInvocation> | JsonObject
 ): void => {
-  const metadataNode = graph.nodes[METADATA] as
-    | CoreMetadataInvocation
-    | undefined;
+  const metadataNode = graph.nodes[METADATA] as CoreMetadataInvocation | undefined;
 
   if (!metadataNode) {
     return;
@@ -46,13 +41,8 @@ export const upsertMetadata = (
   Object.assign(metadataNode, metadata);
 };
 
-export const removeMetadata = (
-  graph: NonNullableGraph,
-  key: keyof CoreMetadataInvocation
-): void => {
-  const metadataNode = graph.nodes[METADATA] as
-    | CoreMetadataInvocation
-    | undefined;
+export const removeMetadata = (graph: NonNullableGraph, key: keyof CoreMetadataInvocation): void => {
+  const metadataNode = graph.nodes[METADATA] as CoreMetadataInvocation | undefined;
 
   if (!metadataNode) {
     return;
@@ -62,17 +52,12 @@ export const removeMetadata = (
 };
 
 export const getHasMetadata = (graph: NonNullableGraph): boolean => {
-  const metadataNode = graph.nodes[METADATA] as
-    | CoreMetadataInvocation
-    | undefined;
+  const metadataNode = graph.nodes[METADATA] as CoreMetadataInvocation | undefined;
 
   return Boolean(metadataNode);
 };
 
-export const setMetadataReceivingNode = (
-  graph: NonNullableGraph,
-  nodeId: string
-) => {
+export const setMetadataReceivingNode = (graph: NonNullableGraph, nodeId: string) => {
   graph.edges = graph.edges.filter((edge) => edge.source.node_id !== METADATA);
 
   graph.edges.push({
diff --git a/invokeai/frontend/web/src/features/nodes/util/node/buildCurrentImageNode.ts b/invokeai/frontend/web/src/features/nodes/util/node/buildCurrentImageNode.ts
index 663c5ae4e2..d90ea31561 100644
--- a/invokeai/frontend/web/src/features/nodes/util/node/buildCurrentImageNode.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/node/buildCurrentImageNode.ts
@@ -3,9 +3,7 @@ import type { CurrentImageNode } from 'features/nodes/types/invocation';
 import type { XYPosition } from 'reactflow';
 import { v4 as uuidv4 } from 'uuid';
 
-export const buildCurrentImageNode = (
-  position: XYPosition
-): CurrentImageNode => {
+export const buildCurrentImageNode = (position: XYPosition): CurrentImageNode => {
   const nodeId = uuidv4();
   const node: CurrentImageNode = {
     ...SHARED_NODE_PROPERTIES,
diff --git a/invokeai/frontend/web/src/features/nodes/util/node/buildInvocationNode.ts b/invokeai/frontend/web/src/features/nodes/util/node/buildInvocationNode.ts
index 3a61e3fd7d..ea40bd4660 100644
--- a/invokeai/frontend/web/src/features/nodes/util/node/buildInvocationNode.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/node/buildInvocationNode.ts
@@ -1,21 +1,12 @@
 import { SHARED_NODE_PROPERTIES } from 'features/nodes/types/constants';
-import type {
-  FieldInputInstance,
-  FieldOutputInstance,
-} from 'features/nodes/types/field';
-import type {
-  InvocationNode,
-  InvocationTemplate,
-} from 'features/nodes/types/invocation';
+import type { FieldInputInstance, FieldOutputInstance } from 'features/nodes/types/field';
+import type { InvocationNode, InvocationTemplate } from 'features/nodes/types/invocation';
 import { buildFieldInputInstance } from 'features/nodes/util/schema/buildFieldInputInstance';
 import { reduce } from 'lodash-es';
 import type { XYPosition } from 'reactflow';
 import { v4 as uuidv4 } from 'uuid';
 
-export const buildInvocationNode = (
-  position: XYPosition,
-  template: InvocationTemplate
-): InvocationNode => {
+export const buildInvocationNode = (position: XYPosition, template: InvocationTemplate): InvocationNode => {
   const nodeId = uuidv4();
   const { type } = template;
 
@@ -24,10 +15,7 @@ export const buildInvocationNode = (
     (inputsAccumulator, inputTemplate, inputName) => {
       const fieldId = uuidv4();
 
-      const inputFieldValue: FieldInputInstance = buildFieldInputInstance(
-        fieldId,
-        inputTemplate
-      );
+      const inputFieldValue: FieldInputInstance = buildFieldInputInstance(fieldId, inputTemplate);
 
       inputsAccumulator[inputName] = inputFieldValue;
 
diff --git a/invokeai/frontend/web/src/features/nodes/util/node/getSortedFilteredFieldNames.ts b/invokeai/frontend/web/src/features/nodes/util/node/getSortedFilteredFieldNames.ts
index aa8bc04abf..031c0ed4ee 100644
--- a/invokeai/frontend/web/src/features/nodes/util/node/getSortedFilteredFieldNames.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/node/getSortedFilteredFieldNames.ts
@@ -1,12 +1,7 @@
-import type {
-  FieldInputTemplate,
-  FieldOutputTemplate,
-} from 'features/nodes/types/field';
+import type { FieldInputTemplate, FieldOutputTemplate } from 'features/nodes/types/field';
 import { isNil } from 'lodash-es';
 
-export const getSortedFilteredFieldNames = (
-  fields: FieldInputTemplate[] | FieldOutputTemplate[]
-): string[] => {
+export const getSortedFilteredFieldNames = (fields: FieldInputTemplate[] | FieldOutputTemplate[]): string[] => {
   const visibleFields = fields.filter((field) => !field.ui_hidden);
 
   // we want explicitly ordered fields to be before unordered fields; split the list
diff --git a/invokeai/frontend/web/src/features/nodes/util/node/nodeUpdate.ts b/invokeai/frontend/web/src/features/nodes/util/node/nodeUpdate.ts
index ec16207642..f195c49d30 100644
--- a/invokeai/frontend/web/src/features/nodes/util/node/nodeUpdate.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/node/nodeUpdate.ts
@@ -1,18 +1,12 @@
 import { satisfies } from 'compare-versions';
 import { NodeUpdateError } from 'features/nodes/types/error';
-import type {
-  InvocationNode,
-  InvocationTemplate,
-} from 'features/nodes/types/invocation';
+import type { InvocationNode, InvocationTemplate } from 'features/nodes/types/invocation';
 import { zParsedSemver } from 'features/nodes/types/semver';
 import { cloneDeep, defaultsDeep, keys, pick } from 'lodash-es';
 
 import { buildInvocationNode } from './buildInvocationNode';
 
-export const getNeedsUpdate = (
-  node: InvocationNode,
-  template: InvocationTemplate
-): boolean => {
+export const getNeedsUpdate = (node: InvocationNode, template: InvocationTemplate): boolean => {
   if (node.data.type !== template.type) {
     return true;
   }
@@ -23,10 +17,7 @@ export const getNeedsUpdate = (
  * @param template The invocation template to check against.
  */
 
-export const getMayUpdateNode = (
-  node: InvocationNode,
-  template: InvocationTemplate
-): boolean => {
+export const getMayUpdateNode = (node: InvocationNode, template: InvocationTemplate): boolean => {
   const needsUpdate = getNeedsUpdate(node, template);
   if (!needsUpdate || node.data.type !== template.type) {
     return false;
@@ -44,10 +35,7 @@ export const getMayUpdateNode = (
  * @throws {NodeUpdateError} If the node is not an invocation node.
  */
 
-export const updateNode = (
-  node: InvocationNode,
-  template: InvocationTemplate
-): InvocationNode => {
+export const updateNode = (node: InvocationNode, template: InvocationTemplate): InvocationNode => {
   const mayUpdate = getMayUpdateNode(node, template);
 
   if (!mayUpdate || node.data.type !== template.type) {
diff --git a/invokeai/frontend/web/src/features/nodes/util/schema/buildFieldInputInstance.ts b/invokeai/frontend/web/src/features/nodes/util/schema/buildFieldInputInstance.ts
index 5d1e45ecf8..dd3cf0ad7b 100644
--- a/invokeai/frontend/web/src/features/nodes/util/schema/buildFieldInputInstance.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/schema/buildFieldInputInstance.ts
@@ -1,44 +1,34 @@
-import type {
-  FieldInputInstance,
-  FieldInputTemplate,
-  FieldValue,
-  StatefulFieldType,
-} from 'features/nodes/types/field';
+import type { FieldInputInstance, FieldInputTemplate, FieldValue, StatefulFieldType } from 'features/nodes/types/field';
 import { get } from 'lodash-es';
 
-const FIELD_VALUE_FALLBACK_MAP: Record<StatefulFieldType['name'], FieldValue> =
-  {
-    EnumField: '',
-    BoardField: undefined,
-    BooleanField: false,
-    ColorField: { r: 0, g: 0, b: 0, a: 1 },
-    FloatField: 0,
-    ImageField: undefined,
-    IntegerField: 0,
-    IPAdapterModelField: undefined,
-    LoRAModelField: undefined,
-    MainModelField: undefined,
-    SchedulerField: 'euler',
-    SDXLMainModelField: undefined,
-    SDXLRefinerModelField: undefined,
-    StringField: '',
-    T2IAdapterModelField: undefined,
-    VAEModelField: undefined,
-    ControlNetModelField: undefined,
-  };
+const FIELD_VALUE_FALLBACK_MAP: Record<StatefulFieldType['name'], FieldValue> = {
+  EnumField: '',
+  BoardField: undefined,
+  BooleanField: false,
+  ColorField: { r: 0, g: 0, b: 0, a: 1 },
+  FloatField: 0,
+  ImageField: undefined,
+  IntegerField: 0,
+  IPAdapterModelField: undefined,
+  LoRAModelField: undefined,
+  MainModelField: undefined,
+  SchedulerField: 'euler',
+  SDXLMainModelField: undefined,
+  SDXLRefinerModelField: undefined,
+  StringField: '',
+  T2IAdapterModelField: undefined,
+  VAEModelField: undefined,
+  ControlNetModelField: undefined,
+};
 
-export const buildFieldInputInstance = (
-  id: string,
-  template: FieldInputTemplate
-): FieldInputInstance => {
+export const buildFieldInputInstance = (id: string, template: FieldInputTemplate): FieldInputInstance => {
   const fieldInstance: FieldInputInstance = {
     id,
     name: template.name,
     type: template.type,
     label: '',
     fieldKind: 'input' as const,
-    value:
-      template.default ?? get(FIELD_VALUE_FALLBACK_MAP, template.type.name),
+    value: template.default ?? get(FIELD_VALUE_FALLBACK_MAP, template.type.name),
   };
 
   return fieldInstance;
diff --git a/invokeai/frontend/web/src/features/nodes/util/schema/buildFieldInputTemplate.ts b/invokeai/frontend/web/src/features/nodes/util/schema/buildFieldInputTemplate.ts
index cda7e3677a..b2ada08368 100644
--- a/invokeai/frontend/web/src/features/nodes/util/schema/buildFieldInputTemplate.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/schema/buildFieldInputTemplate.ts
@@ -37,9 +37,12 @@ type FieldInputTemplateBuilder<T extends FieldInputTemplate = any> = // valid `a
     isCollectionOrScalar: boolean;
   }) => T;
 
-const buildIntegerFieldInputTemplate: FieldInputTemplateBuilder<
-  IntegerFieldInputTemplate
-> = ({ schemaObject, baseField, isCollection, isCollectionOrScalar }) => {
+const buildIntegerFieldInputTemplate: FieldInputTemplateBuilder<IntegerFieldInputTemplate> = ({
+  schemaObject,
+  baseField,
+  isCollection,
+  isCollectionOrScalar,
+}) => {
   const template: IntegerFieldInputTemplate = {
     ...baseField,
     type: {
@@ -58,10 +61,7 @@ const buildIntegerFieldInputTemplate: FieldInputTemplateBuilder<
     template.maximum = schemaObject.maximum;
   }
 
-  if (
-    schemaObject.exclusiveMaximum !== undefined &&
-    isNumber(schemaObject.exclusiveMaximum)
-  ) {
+  if (schemaObject.exclusiveMaximum !== undefined && isNumber(schemaObject.exclusiveMaximum)) {
     template.exclusiveMaximum = schemaObject.exclusiveMaximum;
   }
 
@@ -69,19 +69,19 @@ const buildIntegerFieldInputTemplate: FieldInputTemplateBuilder<
     template.minimum = schemaObject.minimum;
   }
 
-  if (
-    schemaObject.exclusiveMinimum !== undefined &&
-    isNumber(schemaObject.exclusiveMinimum)
-  ) {
+  if (schemaObject.exclusiveMinimum !== undefined && isNumber(schemaObject.exclusiveMinimum)) {
     template.exclusiveMinimum = schemaObject.exclusiveMinimum;
   }
 
   return template;
 };
 
-const buildFloatFieldInputTemplate: FieldInputTemplateBuilder<
-  FloatFieldInputTemplate
-> = ({ schemaObject, baseField, isCollection, isCollectionOrScalar }) => {
+const buildFloatFieldInputTemplate: FieldInputTemplateBuilder<FloatFieldInputTemplate> = ({
+  schemaObject,
+  baseField,
+  isCollection,
+  isCollectionOrScalar,
+}) => {
   const template: FloatFieldInputTemplate = {
     ...baseField,
     type: {
@@ -100,10 +100,7 @@ const buildFloatFieldInputTemplate: FieldInputTemplateBuilder<
     template.maximum = schemaObject.maximum;
   }
 
-  if (
-    schemaObject.exclusiveMaximum !== undefined &&
-    isNumber(schemaObject.exclusiveMaximum)
-  ) {
+  if (schemaObject.exclusiveMaximum !== undefined && isNumber(schemaObject.exclusiveMaximum)) {
     template.exclusiveMaximum = schemaObject.exclusiveMaximum;
   }
 
@@ -111,19 +108,19 @@ const buildFloatFieldInputTemplate: FieldInputTemplateBuilder<
     template.minimum = schemaObject.minimum;
   }
 
-  if (
-    schemaObject.exclusiveMinimum !== undefined &&
-    isNumber(schemaObject.exclusiveMinimum)
-  ) {
+  if (schemaObject.exclusiveMinimum !== undefined && isNumber(schemaObject.exclusiveMinimum)) {
     template.exclusiveMinimum = schemaObject.exclusiveMinimum;
   }
 
   return template;
 };
 
-const buildStringFieldInputTemplate: FieldInputTemplateBuilder<
-  StringFieldInputTemplate
-> = ({ schemaObject, baseField, isCollection, isCollectionOrScalar }) => {
+const buildStringFieldInputTemplate: FieldInputTemplateBuilder<StringFieldInputTemplate> = ({
+  schemaObject,
+  baseField,
+  isCollection,
+  isCollectionOrScalar,
+}) => {
   const template: StringFieldInputTemplate = {
     ...baseField,
     type: {
@@ -145,9 +142,12 @@ const buildStringFieldInputTemplate: FieldInputTemplateBuilder<
   return template;
 };
 
-const buildBooleanFieldInputTemplate: FieldInputTemplateBuilder<
-  BooleanFieldInputTemplate
-> = ({ schemaObject, baseField, isCollection, isCollectionOrScalar }) => {
+const buildBooleanFieldInputTemplate: FieldInputTemplateBuilder<BooleanFieldInputTemplate> = ({
+  schemaObject,
+  baseField,
+  isCollection,
+  isCollectionOrScalar,
+}) => {
   const template: BooleanFieldInputTemplate = {
     ...baseField,
     type: {
@@ -161,9 +161,12 @@ const buildBooleanFieldInputTemplate: FieldInputTemplateBuilder<
   return template;
 };
 
-const buildMainModelFieldInputTemplate: FieldInputTemplateBuilder<
-  MainModelFieldInputTemplate
-> = ({ schemaObject, baseField, isCollection, isCollectionOrScalar }) => {
+const buildMainModelFieldInputTemplate: FieldInputTemplateBuilder<MainModelFieldInputTemplate> = ({
+  schemaObject,
+  baseField,
+  isCollection,
+  isCollectionOrScalar,
+}) => {
   const template: MainModelFieldInputTemplate = {
     ...baseField,
     type: {
@@ -177,9 +180,12 @@ const buildMainModelFieldInputTemplate: FieldInputTemplateBuilder<
   return template;
 };
 
-const buildSDXLMainModelFieldInputTemplate: FieldInputTemplateBuilder<
-  SDXLMainModelFieldInputTemplate
-> = ({ schemaObject, baseField, isCollection, isCollectionOrScalar }) => {
+const buildSDXLMainModelFieldInputTemplate: FieldInputTemplateBuilder<SDXLMainModelFieldInputTemplate> = ({
+  schemaObject,
+  baseField,
+  isCollection,
+  isCollectionOrScalar,
+}) => {
   const template: SDXLMainModelFieldInputTemplate = {
     ...baseField,
     type: {
@@ -193,9 +199,12 @@ const buildSDXLMainModelFieldInputTemplate: FieldInputTemplateBuilder<
   return template;
 };
 
-const buildRefinerModelFieldInputTemplate: FieldInputTemplateBuilder<
-  SDXLRefinerModelFieldInputTemplate
-> = ({ schemaObject, baseField, isCollection, isCollectionOrScalar }) => {
+const buildRefinerModelFieldInputTemplate: FieldInputTemplateBuilder<SDXLRefinerModelFieldInputTemplate> = ({
+  schemaObject,
+  baseField,
+  isCollection,
+  isCollectionOrScalar,
+}) => {
   const template: SDXLRefinerModelFieldInputTemplate = {
     ...baseField,
     type: {
@@ -209,9 +218,12 @@ const buildRefinerModelFieldInputTemplate: FieldInputTemplateBuilder<
   return template;
 };
 
-const buildVAEModelFieldInputTemplate: FieldInputTemplateBuilder<
-  VAEModelFieldInputTemplate
-> = ({ schemaObject, baseField, isCollection, isCollectionOrScalar }) => {
+const buildVAEModelFieldInputTemplate: FieldInputTemplateBuilder<VAEModelFieldInputTemplate> = ({
+  schemaObject,
+  baseField,
+  isCollection,
+  isCollectionOrScalar,
+}) => {
   const template: VAEModelFieldInputTemplate = {
     ...baseField,
     type: {
@@ -225,9 +237,12 @@ const buildVAEModelFieldInputTemplate: FieldInputTemplateBuilder<
   return template;
 };
 
-const buildLoRAModelFieldInputTemplate: FieldInputTemplateBuilder<
-  LoRAModelFieldInputTemplate
-> = ({ schemaObject, baseField, isCollection, isCollectionOrScalar }) => {
+const buildLoRAModelFieldInputTemplate: FieldInputTemplateBuilder<LoRAModelFieldInputTemplate> = ({
+  schemaObject,
+  baseField,
+  isCollection,
+  isCollectionOrScalar,
+}) => {
   const template: LoRAModelFieldInputTemplate = {
     ...baseField,
     type: {
@@ -241,9 +256,12 @@ const buildLoRAModelFieldInputTemplate: FieldInputTemplateBuilder<
   return template;
 };
 
-const buildControlNetModelFieldInputTemplate: FieldInputTemplateBuilder<
-  ControlNetModelFieldInputTemplate
-> = ({ schemaObject, baseField, isCollection, isCollectionOrScalar }) => {
+const buildControlNetModelFieldInputTemplate: FieldInputTemplateBuilder<ControlNetModelFieldInputTemplate> = ({
+  schemaObject,
+  baseField,
+  isCollection,
+  isCollectionOrScalar,
+}) => {
   const template: ControlNetModelFieldInputTemplate = {
     ...baseField,
     type: {
@@ -257,9 +275,12 @@ const buildControlNetModelFieldInputTemplate: FieldInputTemplateBuilder<
   return template;
 };
 
-const buildIPAdapterModelFieldInputTemplate: FieldInputTemplateBuilder<
-  IPAdapterModelFieldInputTemplate
-> = ({ schemaObject, baseField, isCollection, isCollectionOrScalar }) => {
+const buildIPAdapterModelFieldInputTemplate: FieldInputTemplateBuilder<IPAdapterModelFieldInputTemplate> = ({
+  schemaObject,
+  baseField,
+  isCollection,
+  isCollectionOrScalar,
+}) => {
   const template: IPAdapterModelFieldInputTemplate = {
     ...baseField,
     type: {
@@ -273,9 +294,12 @@ const buildIPAdapterModelFieldInputTemplate: FieldInputTemplateBuilder<
   return template;
 };
 
-const buildT2IAdapterModelFieldInputTemplate: FieldInputTemplateBuilder<
-  T2IAdapterModelFieldInputTemplate
-> = ({ schemaObject, baseField, isCollection, isCollectionOrScalar }) => {
+const buildT2IAdapterModelFieldInputTemplate: FieldInputTemplateBuilder<T2IAdapterModelFieldInputTemplate> = ({
+  schemaObject,
+  baseField,
+  isCollection,
+  isCollectionOrScalar,
+}) => {
   const template: T2IAdapterModelFieldInputTemplate = {
     ...baseField,
     type: {
@@ -289,9 +313,12 @@ const buildT2IAdapterModelFieldInputTemplate: FieldInputTemplateBuilder<
   return template;
 };
 
-const buildBoardFieldInputTemplate: FieldInputTemplateBuilder<
-  BoardFieldInputTemplate
-> = ({ schemaObject, baseField, isCollection, isCollectionOrScalar }) => {
+const buildBoardFieldInputTemplate: FieldInputTemplateBuilder<BoardFieldInputTemplate> = ({
+  schemaObject,
+  baseField,
+  isCollection,
+  isCollectionOrScalar,
+}) => {
   const template: BoardFieldInputTemplate = {
     ...baseField,
     type: {
@@ -305,9 +332,12 @@ const buildBoardFieldInputTemplate: FieldInputTemplateBuilder<
   return template;
 };
 
-const buildImageFieldInputTemplate: FieldInputTemplateBuilder<
-  ImageFieldInputTemplate
-> = ({ schemaObject, baseField, isCollection, isCollectionOrScalar }) => {
+const buildImageFieldInputTemplate: FieldInputTemplateBuilder<ImageFieldInputTemplate> = ({
+  schemaObject,
+  baseField,
+  isCollection,
+  isCollectionOrScalar,
+}) => {
   const template: ImageFieldInputTemplate = {
     ...baseField,
     type: {
@@ -321,9 +351,12 @@ const buildImageFieldInputTemplate: FieldInputTemplateBuilder<
   return template;
 };
 
-const buildEnumFieldInputTemplate: FieldInputTemplateBuilder<
-  EnumFieldInputTemplate
-> = ({ schemaObject, baseField, isCollection, isCollectionOrScalar }) => {
+const buildEnumFieldInputTemplate: FieldInputTemplateBuilder<EnumFieldInputTemplate> = ({
+  schemaObject,
+  baseField,
+  isCollection,
+  isCollectionOrScalar,
+}) => {
   let options: EnumFieldInputTemplate['options'] = [];
   if (schemaObject.anyOf) {
     const filteredAnyOf = schemaObject.anyOf.filter((i) => {
@@ -361,9 +394,12 @@ const buildEnumFieldInputTemplate: FieldInputTemplateBuilder<
   return template;
 };
 
-const buildColorFieldInputTemplate: FieldInputTemplateBuilder<
-  ColorFieldInputTemplate
-> = ({ schemaObject, baseField, isCollection, isCollectionOrScalar }) => {
+const buildColorFieldInputTemplate: FieldInputTemplateBuilder<ColorFieldInputTemplate> = ({
+  schemaObject,
+  baseField,
+  isCollection,
+  isCollectionOrScalar,
+}) => {
   const template: ColorFieldInputTemplate = {
     ...baseField,
     type: {
@@ -377,9 +413,12 @@ const buildColorFieldInputTemplate: FieldInputTemplateBuilder<
   return template;
 };
 
-const buildSchedulerFieldInputTemplate: FieldInputTemplateBuilder<
-  SchedulerFieldInputTemplate
-> = ({ schemaObject, baseField, isCollection, isCollectionOrScalar }) => {
+const buildSchedulerFieldInputTemplate: FieldInputTemplateBuilder<SchedulerFieldInputTemplate> = ({
+  schemaObject,
+  baseField,
+  isCollection,
+  isCollectionOrScalar,
+}) => {
   const template: SchedulerFieldInputTemplate = {
     ...baseField,
     type: {
@@ -393,10 +432,7 @@ const buildSchedulerFieldInputTemplate: FieldInputTemplateBuilder<
   return template;
 };
 
-export const TEMPLATE_BUILDER_MAP: Record<
-  StatefulFieldType['name'],
-  FieldInputTemplateBuilder
-> = {
+export const TEMPLATE_BUILDER_MAP: Record<StatefulFieldType['name'], FieldInputTemplateBuilder> = {
   BoardField: buildBoardFieldInputTemplate,
   BooleanField: buildBooleanFieldInputTemplate,
   ColorField: buildColorFieldInputTemplate,
@@ -421,15 +457,7 @@ export const buildFieldInputTemplate = (
   fieldName: string,
   fieldType: FieldType
 ): FieldInputTemplate => {
-  const {
-    input,
-    ui_hidden,
-    ui_component,
-    ui_type,
-    ui_order,
-    ui_choice_labels,
-    orig_required: required,
-  } = fieldSchema;
+  const { input, ui_hidden, ui_component, ui_type, ui_order, ui_choice_labels, orig_required: required } = fieldSchema;
 
   // This is the base field template that is common to all fields. The builder function will add all other
   // properties to this template.
diff --git a/invokeai/frontend/web/src/features/nodes/util/schema/buildFieldOutputTemplate.ts b/invokeai/frontend/web/src/features/nodes/util/schema/buildFieldOutputTemplate.ts
index ced4cf9552..8c789493ad 100644
--- a/invokeai/frontend/web/src/features/nodes/util/schema/buildFieldOutputTemplate.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/schema/buildFieldOutputTemplate.ts
@@ -1,7 +1,4 @@
-import type {
-  FieldOutputTemplate,
-  FieldType,
-} from 'features/nodes/types/field';
+import type { FieldOutputTemplate, FieldType } from 'features/nodes/types/field';
 import type { InvocationFieldSchema } from 'features/nodes/types/openapi';
 import { startCase } from 'lodash-es';
 
diff --git a/invokeai/frontend/web/src/features/nodes/util/schema/parseFieldType.ts b/invokeai/frontend/web/src/features/nodes/util/schema/parseFieldType.ts
index d679c568ac..ba85354f9a 100644
--- a/invokeai/frontend/web/src/features/nodes/util/schema/parseFieldType.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/schema/parseFieldType.ts
@@ -20,8 +20,7 @@ import type { OpenAPIV3_1 } from 'openapi-types';
  * @example
  * refObjectToFieldType({ "$ref": "#/components/schemas/ImageField" }) --> 'ImageField'
  */
-export const refObjectToSchemaName = (refObject: OpenAPIV3_1.ReferenceObject) =>
-  refObject.$ref.split('/').slice(-1)[0];
+export const refObjectToSchemaName = (refObject: OpenAPIV3_1.ReferenceObject) => refObject.$ref.split('/').slice(-1)[0];
 
 const OPENAPI_TO_FIELD_TYPE_MAP: Record<string, string> = {
   integer: 'IntegerField',
@@ -43,9 +42,7 @@ const isCollectionFieldType = (fieldType: string) => {
   return false;
 };
 
-export const parseFieldType = (
-  schemaObject: OpenAPIV3_1SchemaOrRef
-): FieldType => {
+export const parseFieldType = (schemaObject: OpenAPIV3_1SchemaOrRef): FieldType => {
   if (isInvocationFieldSchema(schemaObject)) {
     // Check if this field has an explicit type provided by the node schema
     const { ui_type } = schemaObject;
@@ -67,9 +64,7 @@ export const parseFieldType = (
           // This is a single ref type
           const name = refObjectToSchemaName(allOf[0]);
           if (!name) {
-            throw new FieldParseError(
-              t('nodes.unableToExtractSchemaNameFromRef')
-            );
+            throw new FieldParseError(t('nodes.unableToExtractSchemaNameFromRef'));
           }
           return {
             name,
@@ -92,9 +87,7 @@ export const parseFieldType = (
           if (isRefObject(filteredAnyOf[0])) {
             const name = refObjectToSchemaName(filteredAnyOf[0]);
             if (!name) {
-              throw new FieldParseError(
-                t('nodes.unableToExtractSchemaNameFromRef')
-              );
+              throw new FieldParseError(t('nodes.unableToExtractSchemaNameFromRef'));
             }
 
             return {
@@ -134,10 +127,7 @@ export const parseFieldType = (
           if (isRefObject(first) && isRefObject(second)) {
             firstType = refObjectToSchemaName(first);
             secondType = refObjectToSchemaName(second);
-          } else if (
-            isNonArraySchemaObject(first) &&
-            isNonArraySchemaObject(second)
-          ) {
+          } else if (isNonArraySchemaObject(first) && isNonArraySchemaObject(second)) {
             firstType = first.type;
             secondType = second.type;
           }
@@ -148,10 +138,7 @@ export const parseFieldType = (
           if (isRefObject(first) && isRefObject(second)) {
             firstType = refObjectToSchemaName(first);
             secondType = refObjectToSchemaName(second);
-          } else if (
-            isNonArraySchemaObject(first) &&
-            isNonArraySchemaObject(second)
-          ) {
+          } else if (isNonArraySchemaObject(first) && isNonArraySchemaObject(second)) {
             firstType = first.type;
             secondType = second.type;
           }
@@ -209,9 +196,7 @@ export const parseFieldType = (
         // This is a ref object, extract the type name
         const name = refObjectToSchemaName(schemaObject.items);
         if (!name) {
-          throw new FieldParseError(
-            t('nodes.unableToExtractSchemaNameFromRef')
-          );
+          throw new FieldParseError(t('nodes.unableToExtractSchemaNameFromRef'));
         }
         return {
           name,
diff --git a/invokeai/frontend/web/src/features/nodes/util/schema/parseSchema.ts b/invokeai/frontend/web/src/features/nodes/util/schema/parseSchema.ts
index e832b324a1..cc7f6e040b 100644
--- a/invokeai/frontend/web/src/features/nodes/util/schema/parseSchema.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/schema/parseSchema.ts
@@ -1,10 +1,7 @@
 import { logger } from 'app/logging/logger';
 import { parseify } from 'common/util/serialize';
 import { FieldParseError } from 'features/nodes/types/error';
-import type {
-  FieldInputTemplate,
-  FieldOutputTemplate,
-} from 'features/nodes/types/field';
+import type { FieldInputTemplate, FieldOutputTemplate } from 'features/nodes/types/field';
 import type { InvocationTemplate } from 'features/nodes/types/invocation';
 import type { InvocationSchemaObject } from 'features/nodes/types/openapi';
 import {
@@ -71,20 +68,10 @@ export const parseSchema = (
   const filteredSchemas = Object.values(openAPI.components?.schemas ?? {})
     .filter(isInvocationSchemaObject)
     .filter(isNotInDenylist)
-    .filter((schema) =>
-      nodesAllowlistExtra
-        ? nodesAllowlistExtra.includes(schema.properties.type.default)
-        : true
-    )
-    .filter((schema) =>
-      nodesDenylistExtra
-        ? !nodesDenylistExtra.includes(schema.properties.type.default)
-        : true
-    );
+    .filter((schema) => (nodesAllowlistExtra ? nodesAllowlistExtra.includes(schema.properties.type.default) : true))
+    .filter((schema) => (nodesDenylistExtra ? !nodesDenylistExtra.includes(schema.properties.type.default) : true));
 
-  const invocations = filteredSchemas.reduce<
-    Record<string, InvocationTemplate>
-  >((invocationsAccumulator, schema) => {
+  const invocations = filteredSchemas.reduce<Record<string, InvocationTemplate>>((invocationsAccumulator, schema) => {
     const type = schema.properties.type.default;
     const title = schema.title.replace('Invocation', '');
     const tags = schema.tags ?? [];
@@ -95,11 +82,7 @@ export const parseSchema = (
 
     const inputs = reduce(
       schema.properties,
-      (
-        inputsAccumulator: Record<string, FieldInputTemplate>,
-        property,
-        propertyName
-      ) => {
+      (inputsAccumulator: Record<string, FieldInputTemplate>, property, propertyName) => {
         if (isReservedInputField(type, propertyName)) {
           logger('nodes').trace(
             { node: type, field: propertyName, schema: parseify(property) },
@@ -124,11 +107,7 @@ export const parseSchema = (
             return inputsAccumulator;
           }
 
-          const fieldInputTemplate = buildFieldInputTemplate(
-            property,
-            propertyName,
-            fieldType
-          );
+          const fieldInputTemplate = buildFieldInputTemplate(property, propertyName, fieldType);
 
           inputsAccumulator[propertyName] = fieldInputTemplate;
         } catch (e) {
@@ -156,10 +135,7 @@ export const parseSchema = (
     const outputSchemaName = schema.output.$ref.split('/').pop();
 
     if (!outputSchemaName) {
-      logger('nodes').warn(
-        { outputRefObject: parseify(schema.output) },
-        'No output schema name found in ref object'
-      );
+      logger('nodes').warn({ outputRefObject: parseify(schema.output) }, 'No output schema name found in ref object');
       return invocationsAccumulator;
     }
 
@@ -170,10 +146,7 @@ export const parseSchema = (
     }
 
     if (!isInvocationOutputSchemaObject(outputSchema)) {
-      logger('nodes').error(
-        { outputSchema: parseify(outputSchema) },
-        'Invalid output schema'
-      );
+      logger('nodes').error({ outputSchema: parseify(outputSchema) }, 'Invalid output schema');
       return invocationsAccumulator;
     }
 
@@ -213,11 +186,7 @@ export const parseSchema = (
             return outputsAccumulator;
           }
 
-          const fieldOutputTemplate = buildFieldOutputTemplate(
-            property,
-            propertyName,
-            fieldType
-          );
+          const fieldOutputTemplate = buildFieldOutputTemplate(property, propertyName, fieldType);
 
           outputsAccumulator[propertyName] = fieldOutputTemplate;
         } catch (e) {
diff --git a/invokeai/frontend/web/src/features/nodes/util/workflow/buildWorkflow.ts b/invokeai/frontend/web/src/features/nodes/util/workflow/buildWorkflow.ts
index 1eaacb7827..70775a9882 100644
--- a/invokeai/frontend/web/src/features/nodes/util/workflow/buildWorkflow.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/workflow/buildWorkflow.ts
@@ -29,11 +29,7 @@ const workflowKeys = [
 
 export type BuildWorkflowFunction = (arg: BuildWorkflowArg) => WorkflowV2;
 
-export const buildWorkflowFast: BuildWorkflowFunction = ({
-  nodes,
-  edges,
-  workflow,
-}: BuildWorkflowArg): WorkflowV2 => {
+export const buildWorkflowFast: BuildWorkflowFunction = ({ nodes, edges, workflow }: BuildWorkflowArg): WorkflowV2 => {
   const clonedWorkflow = pick(cloneDeep(workflow), workflowKeys);
 
   const newWorkflow: WorkflowV2 = {
@@ -87,11 +83,7 @@ export const buildWorkflowFast: BuildWorkflowFunction = ({
   return newWorkflow;
 };
 
-export const buildWorkflowWithValidation = ({
-  nodes,
-  edges,
-  workflow,
-}: BuildWorkflowArg): WorkflowV2 | null => {
+export const buildWorkflowWithValidation = ({ nodes, edges, workflow }: BuildWorkflowArg): WorkflowV2 | null => {
   // builds what really, really should be a valid workflow
   const workflowToValidate = buildWorkflowFast({ nodes, edges, workflow });
 
diff --git a/invokeai/frontend/web/src/features/nodes/util/workflow/migrations.ts b/invokeai/frontend/web/src/features/nodes/util/workflow/migrations.ts
index 004c59d9e5..a2677f3d17 100644
--- a/invokeai/frontend/web/src/features/nodes/util/workflow/migrations.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/workflow/migrations.ts
@@ -1,8 +1,5 @@
 import { $store } from 'app/store/nanostores/store';
-import {
-  WorkflowMigrationError,
-  WorkflowVersionError,
-} from 'features/nodes/types/error';
+import { WorkflowMigrationError, WorkflowVersionError } from 'features/nodes/types/error';
 import type { FieldType } from 'features/nodes/types/field';
 import type { InvocationNodeData } from 'features/nodes/types/invocation';
 import { zSemVer } from 'features/nodes/types/semver';
@@ -45,27 +42,20 @@ const migrateV1toV2 = (workflowToMigrate: WorkflowV1): WorkflowV2 => {
       forEach(node.data.inputs, (input) => {
         const newFieldType = FIELD_TYPE_V1_TO_FIELD_TYPE_V2_MAPPING[input.type];
         if (!newFieldType) {
-          throw new WorkflowMigrationError(
-            t('nodes.unknownFieldType', { type: input.type })
-          );
+          throw new WorkflowMigrationError(t('nodes.unknownFieldType', { type: input.type }));
         }
         (input.type as unknown as FieldType) = newFieldType;
       });
       forEach(node.data.outputs, (output) => {
-        const newFieldType =
-          FIELD_TYPE_V1_TO_FIELD_TYPE_V2_MAPPING[output.type];
+        const newFieldType = FIELD_TYPE_V1_TO_FIELD_TYPE_V2_MAPPING[output.type];
         if (!newFieldType) {
-          throw new WorkflowMigrationError(
-            t('nodes.unknownFieldType', { type: output.type })
-          );
+          throw new WorkflowMigrationError(t('nodes.unknownFieldType', { type: output.type }));
         }
         (output.type as unknown as FieldType) = newFieldType;
       });
       // Add node pack
       const invocationTemplate = invocationTemplates[node.data.type];
-      const nodePack = invocationTemplate
-        ? invocationTemplate.nodePack
-        : t('common.unknown');
+      const nodePack = invocationTemplate ? invocationTemplate.nodePack : t('common.unknown');
 
       (node.data as unknown as InvocationNodeData).nodePack = nodePack;
       // Fallback to 1.0.0 if not specified - this matches the behavior of the backend
@@ -101,7 +91,5 @@ export const parseAndMigrateWorkflow = (data: unknown): WorkflowV2 => {
     return zWorkflowV2.parse(data);
   }
 
-  throw new WorkflowVersionError(
-    t('nodes.unrecognizedWorkflowVersion', { version })
-  );
+  throw new WorkflowVersionError(t('nodes.unrecognizedWorkflowVersion', { version }));
 };
diff --git a/invokeai/frontend/web/src/features/nodes/util/workflow/validateWorkflow.ts b/invokeai/frontend/web/src/features/nodes/util/workflow/validateWorkflow.ts
index 5f9ad9345b..848d2aee77 100644
--- a/invokeai/frontend/web/src/features/nodes/util/workflow/validateWorkflow.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/workflow/validateWorkflow.ts
@@ -85,12 +85,8 @@ export const validateWorkflow = (
     // Validate each edge. If the edge is invalid, we must remove it to prevent runtime errors with reactflow.
     const sourceNode = keyedNodes[edge.source];
     const targetNode = keyedNodes[edge.target];
-    const sourceTemplate = sourceNode
-      ? invocationTemplates[sourceNode.data.type]
-      : undefined;
-    const targetTemplate = targetNode
-      ? invocationTemplates[targetNode.data.type]
-      : undefined;
+    const sourceTemplate = sourceNode ? invocationTemplates[sourceNode.data.type] : undefined;
+    const targetTemplate = targetNode ? invocationTemplates[targetNode.data.type] : undefined;
     const issues: string[] = [];
 
     if (!sourceNode) {
@@ -112,12 +108,7 @@ export const validateWorkflow = (
       );
     }
 
-    if (
-      sourceNode &&
-      sourceTemplate &&
-      edge.type === 'default' &&
-      !(edge.sourceHandle in sourceTemplate.outputs)
-    ) {
+    if (sourceNode && sourceTemplate && edge.type === 'default' && !(edge.sourceHandle in sourceTemplate.outputs)) {
       // The edge's source/output node field does not exist
       issues.push(
         t('nodes.sourceNodeFieldDoesNotExist', {
@@ -146,12 +137,7 @@ export const validateWorkflow = (
       );
     }
 
-    if (
-      targetNode &&
-      targetTemplate &&
-      edge.type === 'default' &&
-      !(edge.targetHandle in targetTemplate.inputs)
-    ) {
+    if (targetNode && targetTemplate && edge.type === 'default' && !(edge.targetHandle in targetTemplate.inputs)) {
       // The edge's target/input node field does not exist
       issues.push(
         t('nodes.targetNodeFieldDoesNotExist', {
@@ -164,14 +150,8 @@ export const validateWorkflow = (
     if (issues.length) {
       // This edge has some issues. Remove it.
       delete edges[i];
-      const source =
-        edge.type === 'default'
-          ? `${edge.source}.${edge.sourceHandle}`
-          : edge.source;
-      const target =
-        edge.type === 'default'
-          ? `${edge.source}.${edge.targetHandle}`
-          : edge.target;
+      const source = edge.type === 'default' ? `${edge.source}.${edge.sourceHandle}` : edge.source;
+      const target = edge.type === 'default' ? `${edge.source}.${edge.targetHandle}` : edge.target;
       warnings.push({
         message: t('nodes.deletedInvalidEdge', { source, target }),
         issues,
diff --git a/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamCFGRescaleMultiplier.tsx b/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamCFGRescaleMultiplier.tsx
index aa757e89bd..368b6abe8f 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamCFGRescaleMultiplier.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamCFGRescaleMultiplier.tsx
@@ -1,9 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+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 { setCfgRescaleMultiplier } from 'features/parameters/store/generationSlice';
@@ -11,38 +6,19 @@ import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const ParamCFGRescaleMultiplier = () => {
-  const cfgRescaleMultiplier = useAppSelector(
-    (s) => s.generation.cfgRescaleMultiplier
-  );
-  const initial = useAppSelector(
-    (s) => s.config.sd.cfgRescaleMultiplier.initial
-  );
-  const sliderMin = useAppSelector(
-    (s) => s.config.sd.cfgRescaleMultiplier.sliderMin
-  );
-  const sliderMax = useAppSelector(
-    (s) => s.config.sd.cfgRescaleMultiplier.sliderMax
-  );
-  const numberInputMin = useAppSelector(
-    (s) => s.config.sd.cfgRescaleMultiplier.numberInputMin
-  );
-  const numberInputMax = useAppSelector(
-    (s) => s.config.sd.cfgRescaleMultiplier.numberInputMax
-  );
-  const coarseStep = useAppSelector(
-    (s) => s.config.sd.cfgRescaleMultiplier.coarseStep
-  );
-  const fineStep = useAppSelector(
-    (s) => s.config.sd.cfgRescaleMultiplier.fineStep
-  );
+  const cfgRescaleMultiplier = useAppSelector((s) => s.generation.cfgRescaleMultiplier);
+  const initial = useAppSelector((s) => s.config.sd.cfgRescaleMultiplier.initial);
+  const sliderMin = useAppSelector((s) => s.config.sd.cfgRescaleMultiplier.sliderMin);
+  const sliderMax = useAppSelector((s) => s.config.sd.cfgRescaleMultiplier.sliderMax);
+  const numberInputMin = useAppSelector((s) => s.config.sd.cfgRescaleMultiplier.numberInputMin);
+  const numberInputMax = useAppSelector((s) => s.config.sd.cfgRescaleMultiplier.numberInputMax);
+  const coarseStep = useAppSelector((s) => s.config.sd.cfgRescaleMultiplier.coarseStep);
+  const fineStep = useAppSelector((s) => s.config.sd.cfgRescaleMultiplier.fineStep);
 
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
-  const handleChange = useCallback(
-    (v: number) => dispatch(setCfgRescaleMultiplier(v)),
-    [dispatch]
-  );
+  const handleChange = useCallback((v: number) => dispatch(setCfgRescaleMultiplier(v)), [dispatch]);
 
   return (
     <FormControl>
diff --git a/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamClipSkip.tsx b/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamClipSkip.tsx
index ac7582c70c..621ed56ef6 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamClipSkip.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamClipSkip.tsx
@@ -1,9 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+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 { setClipSkip } from 'features/parameters/store/generationSlice';
@@ -15,9 +10,7 @@ const ParamClipSkip = () => {
   const clipSkip = useAppSelector((s) => s.generation.clipSkip);
   const initial = useAppSelector((s) => s.config.sd.clipSkip.initial);
   const sliderMin = useAppSelector((s) => s.config.sd.clipSkip.sliderMin);
-  const numberInputMin = useAppSelector(
-    (s) => s.config.sd.clipSkip.numberInputMin
-  );
+  const numberInputMin = useAppSelector((s) => s.config.sd.clipSkip.numberInputMin);
   const coarseStep = useAppSelector((s) => s.config.sd.clipSkip.coarseStep);
   const fineStep = useAppSelector((s) => s.config.sd.clipSkip.fineStep);
   const { model } = useAppSelector((s) => s.generation);
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx
index 34c9e67ae9..bc9d389cc5 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx
@@ -1,9 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext';
@@ -16,24 +11,12 @@ const ParamBoundingBoxHeight = () => {
   const ctx = useImageSizeContext();
   const isStaging = useAppSelector(isStagingSelector);
   const optimalDimension = useAppSelector(selectOptimalDimension);
-  const sliderMin = useAppSelector(
-    (s) => s.config.sd.boundingBoxHeight.sliderMin
-  );
-  const sliderMax = useAppSelector(
-    (s) => s.config.sd.boundingBoxHeight.sliderMax
-  );
-  const numberInputMin = useAppSelector(
-    (s) => s.config.sd.boundingBoxHeight.numberInputMin
-  );
-  const numberInputMax = useAppSelector(
-    (s) => s.config.sd.boundingBoxHeight.numberInputMax
-  );
-  const coarseStep = useAppSelector(
-    (s) => s.config.sd.boundingBoxHeight.coarseStep
-  );
-  const fineStep = useAppSelector(
-    (s) => s.config.sd.boundingBoxHeight.fineStep
-  );
+  const sliderMin = useAppSelector((s) => s.config.sd.boundingBoxHeight.sliderMin);
+  const sliderMax = useAppSelector((s) => s.config.sd.boundingBoxHeight.sliderMax);
+  const numberInputMin = useAppSelector((s) => s.config.sd.boundingBoxHeight.numberInputMin);
+  const numberInputMax = useAppSelector((s) => s.config.sd.boundingBoxHeight.numberInputMax);
+  const coarseStep = useAppSelector((s) => s.config.sd.boundingBoxHeight.coarseStep);
+  const fineStep = useAppSelector((s) => s.config.sd.boundingBoxHeight.fineStep);
   const onChange = useCallback(
     (v: number) => {
       ctx.heightChanged(v);
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx
index 1336b4482e..bc57074e35 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx
@@ -1,9 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext';
@@ -16,21 +11,11 @@ const ParamBoundingBoxWidth = () => {
   const ctx = useImageSizeContext();
   const isStaging = useAppSelector(isStagingSelector);
   const optimalDimension = useAppSelector(selectOptimalDimension);
-  const sliderMin = useAppSelector(
-    (s) => s.config.sd.boundingBoxWidth.sliderMin
-  );
-  const sliderMax = useAppSelector(
-    (s) => s.config.sd.boundingBoxWidth.sliderMax
-  );
-  const numberInputMin = useAppSelector(
-    (s) => s.config.sd.boundingBoxWidth.numberInputMin
-  );
-  const numberInputMax = useAppSelector(
-    (s) => s.config.sd.boundingBoxWidth.numberInputMax
-  );
-  const coarseStep = useAppSelector(
-    (s) => s.config.sd.boundingBoxWidth.coarseStep
-  );
+  const sliderMin = useAppSelector((s) => s.config.sd.boundingBoxWidth.sliderMin);
+  const sliderMax = useAppSelector((s) => s.config.sd.boundingBoxWidth.sliderMax);
+  const numberInputMin = useAppSelector((s) => s.config.sd.boundingBoxWidth.numberInputMin);
+  const numberInputMax = useAppSelector((s) => s.config.sd.boundingBoxWidth.numberInputMax);
+  const coarseStep = useAppSelector((s) => s.config.sd.boundingBoxWidth.coarseStep);
   const fineStep = useAppSelector((s) => s.config.sd.boundingBoxWidth.fineStep);
   const onChange = useCallback(
     (v: number) => {
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceMode.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceMode.tsx
index 0b91154c9b..1060a06694 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceMode.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceMode.tsx
@@ -9,9 +9,7 @@ import { useTranslation } from 'react-i18next';
 
 const ParamCanvasCoherenceMode = () => {
   const dispatch = useAppDispatch();
-  const canvasCoherenceMode = useAppSelector(
-    (s) => s.generation.canvasCoherenceMode
-  );
+  const canvasCoherenceMode = useAppSelector((s) => s.generation.canvasCoherenceMode);
   const { t } = useTranslation();
 
   const options = useMemo<ComboboxOption[]>(
@@ -34,10 +32,7 @@ const ParamCanvasCoherenceMode = () => {
     [dispatch]
   );
 
-  const value = useMemo(
-    () => options.find((o) => o.value === canvasCoherenceMode),
-    [canvasCoherenceMode, options]
-  );
+  const value = useMemo(() => options.find((o) => o.value === canvasCoherenceMode), [canvasCoherenceMode, options]);
 
   return (
     <FormControl>
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps.tsx
index c82a72a839..d427f3c22e 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps.tsx
@@ -1,9 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+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 { setCanvasCoherenceSteps } from 'features/parameters/store/generationSlice';
@@ -12,30 +7,14 @@ import { useTranslation } from 'react-i18next';
 
 const ParamCanvasCoherenceSteps = () => {
   const dispatch = useAppDispatch();
-  const canvasCoherenceSteps = useAppSelector(
-    (s) => s.generation.canvasCoherenceSteps
-  );
-  const initial = useAppSelector(
-    (s) => s.config.sd.canvasCoherenceSteps.initial
-  );
-  const sliderMin = useAppSelector(
-    (s) => s.config.sd.canvasCoherenceSteps.sliderMin
-  );
-  const sliderMax = useAppSelector(
-    (s) => s.config.sd.canvasCoherenceSteps.sliderMax
-  );
-  const numberInputMin = useAppSelector(
-    (s) => s.config.sd.canvasCoherenceSteps.numberInputMin
-  );
-  const numberInputMax = useAppSelector(
-    (s) => s.config.sd.canvasCoherenceSteps.numberInputMax
-  );
-  const coarseStep = useAppSelector(
-    (s) => s.config.sd.canvasCoherenceSteps.coarseStep
-  );
-  const fineStep = useAppSelector(
-    (s) => s.config.sd.canvasCoherenceSteps.fineStep
-  );
+  const canvasCoherenceSteps = useAppSelector((s) => s.generation.canvasCoherenceSteps);
+  const initial = useAppSelector((s) => s.config.sd.canvasCoherenceSteps.initial);
+  const sliderMin = useAppSelector((s) => s.config.sd.canvasCoherenceSteps.sliderMin);
+  const sliderMax = useAppSelector((s) => s.config.sd.canvasCoherenceSteps.sliderMax);
+  const numberInputMin = useAppSelector((s) => s.config.sd.canvasCoherenceSteps.numberInputMin);
+  const numberInputMax = useAppSelector((s) => s.config.sd.canvasCoherenceSteps.numberInputMax);
+  const coarseStep = useAppSelector((s) => s.config.sd.canvasCoherenceSteps.coarseStep);
+  const fineStep = useAppSelector((s) => s.config.sd.canvasCoherenceSteps.fineStep);
 
   const { t } = useTranslation();
 
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength.tsx
index 28998dcf05..d4f6b4444c 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength.tsx
@@ -1,9 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+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 { setCanvasCoherenceStrength } from 'features/parameters/store/generationSlice';
@@ -12,9 +7,7 @@ import { useTranslation } from 'react-i18next';
 
 const ParamCanvasCoherenceStrength = () => {
   const dispatch = useAppDispatch();
-  const canvasCoherenceStrength = useAppSelector(
-    (s) => s.generation.canvasCoherenceStrength
-  );
+  const canvasCoherenceStrength = useAppSelector((s) => s.generation.canvasCoherenceStrength);
   const { t } = useTranslation();
 
   const handleChange = useCallback(
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx
index 4b4b6f8a2a..ca5a209db7 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx
@@ -1,9 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+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 { setMaskBlur } from 'features/parameters/store/generationSlice';
@@ -17,12 +12,8 @@ const ParamMaskBlur = () => {
   const initial = useAppSelector((s) => s.config.sd.maskBlur.initial);
   const sliderMin = useAppSelector((s) => s.config.sd.maskBlur.sliderMin);
   const sliderMax = useAppSelector((s) => s.config.sd.maskBlur.sliderMax);
-  const numberInputMin = useAppSelector(
-    (s) => s.config.sd.maskBlur.numberInputMin
-  );
-  const numberInputMax = useAppSelector(
-    (s) => s.config.sd.maskBlur.numberInputMax
-  );
+  const numberInputMin = useAppSelector((s) => s.config.sd.maskBlur.numberInputMin);
+  const numberInputMax = useAppSelector((s) => s.config.sd.maskBlur.numberInputMax);
   const coarseStep = useAppSelector((s) => s.config.sd.maskBlur.coarseStep);
   const fineStep = useAppSelector((s) => s.config.sd.maskBlur.fineStep);
 
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx
index 284a24dd07..95b402a1c8 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx
@@ -30,10 +30,7 @@ const ParamMaskBlurMethod = () => {
     [dispatch]
   );
 
-  const value = useMemo(
-    () => options.find((o) => o.value === maskBlurMethod),
-    [maskBlurMethod, options]
-  );
+  const value = useMemo(() => options.find((o) => o.value === maskBlurMethod), [maskBlurMethod, options]);
 
   return (
     <FormControl>
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/GenerationModeStatusText.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/GenerationModeStatusText.tsx
index b4eaf7a43b..a5efd67bf4 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/GenerationModeStatusText.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/GenerationModeStatusText.tsx
@@ -19,8 +19,7 @@ const GenerationModeStatusText = () => {
 
   return (
     <Box>
-      {t('accessibility.mode')}:{' '}
-      {generationMode ? GENERATION_MODE_NAME_MAP[generationMode] : '...'}
+      {t('accessibility.mode')}: {generationMode ? GENERATION_MODE_NAME_MAP[generationMode] : '...'}
     </Box>
   );
 };
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillMethod.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillMethod.tsx
index df9c96ea6f..0414bf6a25 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillMethod.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillMethod.tsx
@@ -33,10 +33,7 @@ const ParamInfillMethod = () => {
     [dispatch, options]
   );
 
-  const value = useMemo(
-    () => options.find((o) => o.value === infillMethod),
-    [options, infillMethod]
-  );
+  const value = useMemo(() => options.find((o) => o.value === infillMethod), [options, infillMethod]);
 
   return (
     <FormControl isDisabled={options.length === 0}>
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillPatchmatchDownscaleSize.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillPatchmatchDownscaleSize.tsx
index 113853ad9d..98fa05b3ac 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillPatchmatchDownscaleSize.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillPatchmatchDownscaleSize.tsx
@@ -1,9 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setInfillPatchmatchDownscaleSize } from 'features/parameters/store/generationSlice';
 import { memo, useCallback } from 'react';
@@ -12,30 +7,14 @@ import { useTranslation } from 'react-i18next';
 const ParamInfillPatchmatchDownscaleSize = () => {
   const dispatch = useAppDispatch();
   const infillMethod = useAppSelector((s) => s.generation.infillMethod);
-  const infillPatchmatchDownscaleSize = useAppSelector(
-    (s) => s.generation.infillPatchmatchDownscaleSize
-  );
-  const initial = useAppSelector(
-    (s) => s.config.sd.infillPatchmatchDownscaleSize.initial
-  );
-  const sliderMin = useAppSelector(
-    (s) => s.config.sd.infillPatchmatchDownscaleSize.sliderMin
-  );
-  const sliderMax = useAppSelector(
-    (s) => s.config.sd.infillPatchmatchDownscaleSize.sliderMax
-  );
-  const numberInputMin = useAppSelector(
-    (s) => s.config.sd.infillPatchmatchDownscaleSize.numberInputMin
-  );
-  const numberInputMax = useAppSelector(
-    (s) => s.config.sd.infillPatchmatchDownscaleSize.numberInputMax
-  );
-  const coarseStep = useAppSelector(
-    (s) => s.config.sd.infillPatchmatchDownscaleSize.coarseStep
-  );
-  const fineStep = useAppSelector(
-    (s) => s.config.sd.infillPatchmatchDownscaleSize.fineStep
-  );
+  const infillPatchmatchDownscaleSize = useAppSelector((s) => s.generation.infillPatchmatchDownscaleSize);
+  const initial = useAppSelector((s) => s.config.sd.infillPatchmatchDownscaleSize.initial);
+  const sliderMin = useAppSelector((s) => s.config.sd.infillPatchmatchDownscaleSize.sliderMin);
+  const sliderMax = useAppSelector((s) => s.config.sd.infillPatchmatchDownscaleSize.sliderMax);
+  const numberInputMin = useAppSelector((s) => s.config.sd.infillPatchmatchDownscaleSize.numberInputMin);
+  const numberInputMax = useAppSelector((s) => s.config.sd.infillPatchmatchDownscaleSize.numberInputMax);
+  const coarseStep = useAppSelector((s) => s.config.sd.infillPatchmatchDownscaleSize.coarseStep);
+  const fineStep = useAppSelector((s) => s.config.sd.infillPatchmatchDownscaleSize.fineStep);
 
   const { t } = useTranslation();
 
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillTilesize.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillTilesize.tsx
index 04006da019..f4eb0a94d5 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillTilesize.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillTilesize.tsx
@@ -1,9 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setInfillTileSize } from 'features/parameters/store/generationSlice';
 import { memo, useCallback } from 'react';
@@ -15,15 +10,9 @@ const ParamInfillTileSize = () => {
   const initial = useAppSelector((s) => s.config.sd.infillTileSize.initial);
   const sliderMin = useAppSelector((s) => s.config.sd.infillTileSize.sliderMin);
   const sliderMax = useAppSelector((s) => s.config.sd.infillTileSize.sliderMax);
-  const numberInputMin = useAppSelector(
-    (s) => s.config.sd.infillTileSize.numberInputMin
-  );
-  const numberInputMax = useAppSelector(
-    (s) => s.config.sd.infillTileSize.numberInputMax
-  );
-  const coarseStep = useAppSelector(
-    (s) => s.config.sd.infillTileSize.coarseStep
-  );
+  const numberInputMin = useAppSelector((s) => s.config.sd.infillTileSize.numberInputMin);
+  const numberInputMax = useAppSelector((s) => s.config.sd.infillTileSize.numberInputMax);
+  const coarseStep = useAppSelector((s) => s.config.sd.infillTileSize.coarseStep);
   const fineStep = useAppSelector((s) => s.config.sd.infillTileSize.fineStep);
 
   const infillMethod = useAppSelector((s) => s.generation.infillMethod);
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx
index 998fa407c0..ade66c2b57 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx
@@ -17,9 +17,7 @@ export const OPTIONS: ComboboxOption[] = [
 const ParamScaleBeforeProcessing = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
-  const boundingBoxScaleMethod = useAppSelector(
-    (s) => s.canvas.boundingBoxScaleMethod
-  );
+  const boundingBoxScaleMethod = useAppSelector((s) => s.canvas.boundingBoxScaleMethod);
   const optimalDimension = useAppSelector(selectOptimalDimension);
 
   const onChange = useCallback<ComboboxOnChange>(
@@ -32,10 +30,7 @@ const ParamScaleBeforeProcessing = () => {
     [dispatch, optimalDimension]
   );
 
-  const value = useMemo(
-    () => OPTIONS.find((o) => o.value === boundingBoxScaleMethod),
-    [boundingBoxScaleMethod]
-  );
+  const value = useMemo(() => OPTIONS.find((o) => o.value === boundingBoxScaleMethod), [boundingBoxScaleMethod]);
 
   return (
     <FormControl>
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight.tsx
index b25e23af53..502cdac996 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight.tsx
@@ -1,9 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setScaledBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
 import { selectOptimalDimension } from 'features/parameters/store/generationSlice';
@@ -14,30 +9,14 @@ const ParamScaledHeight = () => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const optimalDimension = useAppSelector(selectOptimalDimension);
-  const isManual = useAppSelector(
-    (s) => s.canvas.boundingBoxScaleMethod === 'manual'
-  );
-  const height = useAppSelector(
-    (s) => s.canvas.scaledBoundingBoxDimensions.height
-  );
-  const sliderMin = useAppSelector(
-    (s) => s.config.sd.scaledBoundingBoxHeight.sliderMin
-  );
-  const sliderMax = useAppSelector(
-    (s) => s.config.sd.scaledBoundingBoxHeight.sliderMax
-  );
-  const numberInputMin = useAppSelector(
-    (s) => s.config.sd.scaledBoundingBoxHeight.numberInputMin
-  );
-  const numberInputMax = useAppSelector(
-    (s) => s.config.sd.scaledBoundingBoxHeight.numberInputMax
-  );
-  const coarseStep = useAppSelector(
-    (s) => s.config.sd.scaledBoundingBoxHeight.coarseStep
-  );
-  const fineStep = useAppSelector(
-    (s) => s.config.sd.scaledBoundingBoxHeight.fineStep
-  );
+  const isManual = useAppSelector((s) => s.canvas.boundingBoxScaleMethod === 'manual');
+  const height = useAppSelector((s) => s.canvas.scaledBoundingBoxDimensions.height);
+  const sliderMin = useAppSelector((s) => s.config.sd.scaledBoundingBoxHeight.sliderMin);
+  const sliderMax = useAppSelector((s) => s.config.sd.scaledBoundingBoxHeight.sliderMax);
+  const numberInputMin = useAppSelector((s) => s.config.sd.scaledBoundingBoxHeight.numberInputMin);
+  const numberInputMax = useAppSelector((s) => s.config.sd.scaledBoundingBoxHeight.numberInputMax);
+  const coarseStep = useAppSelector((s) => s.config.sd.scaledBoundingBoxHeight.coarseStep);
+  const fineStep = useAppSelector((s) => s.config.sd.scaledBoundingBoxHeight.fineStep);
 
   const onChange = useCallback(
     (height: number) => {
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledWidth.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledWidth.tsx
index 29de4c4934..d6c53e39b3 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledWidth.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledWidth.tsx
@@ -1,9 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setScaledBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
 import { selectOptimalDimension } from 'features/parameters/store/generationSlice';
@@ -14,30 +9,14 @@ const ParamScaledWidth = () => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const optimalDimension = useAppSelector(selectOptimalDimension);
-  const isManual = useAppSelector(
-    (s) => s.canvas.boundingBoxScaleMethod === 'manual'
-  );
-  const width = useAppSelector(
-    (s) => s.canvas.scaledBoundingBoxDimensions.width
-  );
-  const sliderMin = useAppSelector(
-    (s) => s.config.sd.scaledBoundingBoxWidth.sliderMin
-  );
-  const sliderMax = useAppSelector(
-    (s) => s.config.sd.scaledBoundingBoxWidth.sliderMax
-  );
-  const numberInputMin = useAppSelector(
-    (s) => s.config.sd.scaledBoundingBoxWidth.numberInputMin
-  );
-  const numberInputMax = useAppSelector(
-    (s) => s.config.sd.scaledBoundingBoxWidth.numberInputMax
-  );
-  const coarseStep = useAppSelector(
-    (s) => s.config.sd.scaledBoundingBoxWidth.coarseStep
-  );
-  const fineStep = useAppSelector(
-    (s) => s.config.sd.scaledBoundingBoxWidth.fineStep
-  );
+  const isManual = useAppSelector((s) => s.canvas.boundingBoxScaleMethod === 'manual');
+  const width = useAppSelector((s) => s.canvas.scaledBoundingBoxDimensions.width);
+  const sliderMin = useAppSelector((s) => s.config.sd.scaledBoundingBoxWidth.sliderMin);
+  const sliderMax = useAppSelector((s) => s.config.sd.scaledBoundingBoxWidth.sliderMax);
+  const numberInputMin = useAppSelector((s) => s.config.sd.scaledBoundingBoxWidth.numberInputMin);
+  const numberInputMax = useAppSelector((s) => s.config.sd.scaledBoundingBoxWidth.numberInputMax);
+  const coarseStep = useAppSelector((s) => s.config.sd.scaledBoundingBoxWidth.coarseStep);
+  const fineStep = useAppSelector((s) => s.config.sd.scaledBoundingBoxWidth.fineStep);
   const onChange = useCallback(
     (width: number) => {
       dispatch(setScaledBoundingBoxDimensions({ width }));
diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamCFGScale.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamCFGScale.tsx
index 34fde9ce9d..b75db17c4e 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamCFGScale.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamCFGScale.tsx
@@ -1,9 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+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 { setCfgScale } from 'features/parameters/store/generationSlice';
@@ -14,25 +9,15 @@ const ParamCFGScale = () => {
   const cfgScale = useAppSelector((s) => s.generation.cfgScale);
   const sliderMin = useAppSelector((s) => s.config.sd.guidance.sliderMin);
   const sliderMax = useAppSelector((s) => s.config.sd.guidance.sliderMax);
-  const numberInputMin = useAppSelector(
-    (s) => s.config.sd.guidance.numberInputMin
-  );
-  const numberInputMax = useAppSelector(
-    (s) => s.config.sd.guidance.numberInputMax
-  );
+  const numberInputMin = useAppSelector((s) => s.config.sd.guidance.numberInputMin);
+  const numberInputMax = useAppSelector((s) => s.config.sd.guidance.numberInputMax);
   const coarseStep = useAppSelector((s) => s.config.sd.guidance.coarseStep);
   const fineStep = useAppSelector((s) => s.config.sd.guidance.fineStep);
   const initial = useAppSelector((s) => s.config.sd.guidance.initial);
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
-  const marks = useMemo(
-    () => [sliderMin, Math.floor(sliderMax / 2), sliderMax],
-    [sliderMax, sliderMin]
-  );
-  const onChange = useCallback(
-    (v: number) => dispatch(setCfgScale(v)),
-    [dispatch]
-  );
+  const marks = useMemo(() => [sliderMin, Math.floor(sliderMax / 2), sliderMax], [sliderMax, sliderMin]);
+  const onChange = useCallback((v: number) => dispatch(setCfgScale(v)), [dispatch]);
 
   return (
     <FormControl>
diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamHeight.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamHeight.tsx
index 21300ca90e..dc74697a1a 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamHeight.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamHeight.tsx
@@ -1,9 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext';
 import { selectOptimalDimension } from 'features/parameters/store/generationSlice';
@@ -16,12 +11,8 @@ export const ParamHeight = memo(() => {
   const optimalDimension = useAppSelector(selectOptimalDimension);
   const sliderMin = useAppSelector((s) => s.config.sd.height.sliderMin);
   const sliderMax = useAppSelector((s) => s.config.sd.height.sliderMax);
-  const numberInputMin = useAppSelector(
-    (s) => s.config.sd.height.numberInputMin
-  );
-  const numberInputMax = useAppSelector(
-    (s) => s.config.sd.height.numberInputMax
-  );
+  const numberInputMin = useAppSelector((s) => s.config.sd.height.numberInputMin);
+  const numberInputMax = useAppSelector((s) => s.config.sd.height.numberInputMax);
   const coarseStep = useAppSelector((s) => s.config.sd.height.coarseStep);
   const fineStep = useAppSelector((s) => s.config.sd.height.fineStep);
 
@@ -32,10 +23,7 @@ export const ParamHeight = memo(() => {
     [ctx]
   );
 
-  const marks = useMemo(
-    () => [sliderMin, optimalDimension, sliderMax],
-    [sliderMin, optimalDimension, sliderMax]
-  );
+  const marks = useMemo(() => [sliderMin, optimalDimension, sliderMax], [sliderMin, optimalDimension, sliderMax]);
 
   return (
     <FormControl>
diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
index 780e6da1cf..d10982a4ff 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
@@ -19,12 +19,11 @@ export const ParamNegativePrompt = memo(() => {
     },
     [dispatch]
   );
-  const { onChange, isOpen, onClose, onOpen, onSelectEmbedding, onKeyDown } =
-    usePrompt({
-      prompt,
-      textareaRef,
-      onChange: _onChange,
-    });
+  const { onChange, isOpen, onClose, onOpen, onSelectEmbedding, onKeyDown } = usePrompt({
+    prompt,
+    textareaRef,
+    onChange: _onChange,
+  });
 
   return (
     <EmbeddingPopover
diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx
index b192dee29a..ae81f78fd1 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx
@@ -25,15 +25,7 @@ export const ParamPositivePrompt = memo(() => {
     },
     [dispatch]
   );
-  const {
-    onChange,
-    isOpen,
-    onClose,
-    onOpen,
-    onSelectEmbedding,
-    onKeyDown,
-    onFocus,
-  } = usePrompt({
+  const { onChange, isOpen, onClose, onOpen, onSelectEmbedding, onKeyDown, onFocus } = usePrompt({
     prompt,
     textareaRef: textareaRef,
     onChange: handleChange,
diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamScheduler.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamScheduler.tsx
index a0bae81aa3..b0d79596e2 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamScheduler.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamScheduler.tsx
@@ -23,10 +23,7 @@ const ParamScheduler = () => {
     [dispatch]
   );
 
-  const value = useMemo(
-    () => SCHEDULER_OPTIONS.find((o) => o.value === scheduler),
-    [scheduler]
-  );
+  const value = useMemo(() => SCHEDULER_OPTIONS.find((o) => o.value === scheduler), [scheduler]);
 
   return (
     <FormControl>
diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamSteps.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamSteps.tsx
index 90f1fb63c4..f119ae888a 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamSteps.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamSteps.tsx
@@ -1,9 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+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 { setSteps } from 'features/parameters/store/generationSlice';
@@ -15,20 +10,13 @@ const ParamSteps = () => {
   const initial = useAppSelector((s) => s.config.sd.steps.initial);
   const sliderMin = useAppSelector((s) => s.config.sd.steps.sliderMin);
   const sliderMax = useAppSelector((s) => s.config.sd.steps.sliderMax);
-  const numberInputMin = useAppSelector(
-    (s) => s.config.sd.steps.numberInputMin
-  );
-  const numberInputMax = useAppSelector(
-    (s) => s.config.sd.steps.numberInputMax
-  );
+  const numberInputMin = useAppSelector((s) => s.config.sd.steps.numberInputMin);
+  const numberInputMax = useAppSelector((s) => s.config.sd.steps.numberInputMax);
   const coarseStep = useAppSelector((s) => s.config.sd.steps.coarseStep);
   const fineStep = useAppSelector((s) => s.config.sd.steps.fineStep);
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
-  const marks = useMemo(
-    () => [sliderMin, Math.floor(sliderMax / 2), sliderMax],
-    [sliderMax, sliderMin]
-  );
+  const marks = useMemo(() => [sliderMin, Math.floor(sliderMax / 2), sliderMax], [sliderMax, sliderMin]);
   const onChange = useCallback(
     (v: number) => {
       dispatch(setSteps(v));
diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamWidth.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamWidth.tsx
index 1ef6d7dd08..6f9e996d4c 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamWidth.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamWidth.tsx
@@ -1,9 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext';
 import { selectOptimalDimension } from 'features/parameters/store/generationSlice';
@@ -16,12 +11,8 @@ export const ParamWidth = memo(() => {
   const optimalDimension = useAppSelector(selectOptimalDimension);
   const sliderMin = useAppSelector((s) => s.config.sd.width.sliderMin);
   const sliderMax = useAppSelector((s) => s.config.sd.width.sliderMax);
-  const numberInputMin = useAppSelector(
-    (s) => s.config.sd.width.numberInputMin
-  );
-  const numberInputMax = useAppSelector(
-    (s) => s.config.sd.width.numberInputMax
-  );
+  const numberInputMin = useAppSelector((s) => s.config.sd.width.numberInputMin);
+  const numberInputMax = useAppSelector((s) => s.config.sd.width.numberInputMax);
   const coarseStep = useAppSelector((s) => s.config.sd.width.coarseStep);
   const fineStep = useAppSelector((s) => s.config.sd.width.fineStep);
 
@@ -32,10 +23,7 @@ export const ParamWidth = memo(() => {
     [ctx]
   );
 
-  const marks = useMemo(
-    () => [sliderMin, optimalDimension, sliderMax],
-    [sliderMin, optimalDimension, sliderMax]
-  );
+  const marks = useMemo(() => [sliderMin, optimalDimension, sliderMax], [sliderMin, optimalDimension, sliderMax]);
 
   return (
     <FormControl>
diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioPreview.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioPreview.tsx
index 68885c9925..950422aa65 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioPreview.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioPreview.tsx
@@ -26,9 +26,7 @@ export const AspectRatioPreview = () => {
   const containerSize = useSize(containerRef);
 
   const shouldShowIcon = useMemo(
-    () =>
-      ctx.aspectRatioState.value < ICON_HIGH_CUTOFF &&
-      ctx.aspectRatioState.value > ICON_LOW_CUTOFF,
+    () => ctx.aspectRatioState.value < ICON_HIGH_CUTOFF && ctx.aspectRatioState.value > ICON_LOW_CUTOFF,
     [ctx.aspectRatioState.value]
   );
 
@@ -52,13 +50,7 @@ export const AspectRatioPreview = () => {
   }, [containerSize, ctx.width, ctx.height, ctx.aspectRatioState.value]);
 
   return (
-    <Flex
-      w="full"
-      h="full"
-      alignItems="center"
-      justifyContent="center"
-      ref={containerRef}
-    >
+    <Flex w="full" h="full" alignItems="center" justifyContent="center" ref={containerRef}>
       <Flex
         bg="blackAlpha.400"
         borderRadius="base"
@@ -76,11 +68,7 @@ export const AspectRatioPreview = () => {
               exit={MOTION_ICON_EXIT}
               style={ICON_CONTAINER_STYLES}
             >
-              <Icon
-                as={PiFrameCorners}
-                color="base.700"
-                boxSize={BOX_SIZE_CSS_CALC}
-              />
+              <Icon as={PiFrameCorners} color="base.700" boxSize={BOX_SIZE_CSS_CALC} />
             </Flex>
           )}
         </AnimatePresence>
diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioSelect.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioSelect.tsx
index cfb26b51b3..1ab2fc6945 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioSelect.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioSelect.tsx
@@ -22,22 +22,14 @@ export const AspectRatioSelect = memo(() => {
   );
 
   const value = useMemo(
-    () =>
-      ASPECT_RATIO_OPTIONS.filter(
-        (o) => o.value === ctx.aspectRatioState.id
-      )[0],
+    () => ASPECT_RATIO_OPTIONS.filter((o) => o.value === ctx.aspectRatioState.id)[0],
     [ctx.aspectRatioState.id]
   );
 
   return (
     <FormControl>
       <FormLabel>{t('parameters.aspect')}</FormLabel>
-      <Combobox
-        value={value}
-        onChange={onChange}
-        options={ASPECT_RATIO_OPTIONS}
-        sx={selectStyles}
-      />
+      <Combobox value={value} onChange={onChange} options={ASPECT_RATIO_OPTIONS} sx={selectStyles} />
     </FormControl>
   );
 });
diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageSize/ImageSizeContext.ts b/invokeai/frontend/web/src/features/parameters/components/ImageSize/ImageSizeContext.ts
index 68bc593a35..f8057f2fd3 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/ImageSizeContext.ts
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/ImageSizeContext.ts
@@ -1,14 +1,8 @@
 import { useAppSelector } from 'app/store/storeHooks';
 import { roundToMultiple } from 'common/util/roundDownToMultiple';
 import { calculateNewSize } from 'features/parameters/components/ImageSize/calculateNewSize';
-import {
-  ASPECT_RATIO_MAP,
-  initialAspectRatioState,
-} from 'features/parameters/components/ImageSize/constants';
-import type {
-  AspectRatioID,
-  AspectRatioState,
-} from 'features/parameters/components/ImageSize/types';
+import { ASPECT_RATIO_MAP, initialAspectRatioState } from 'features/parameters/components/ImageSize/constants';
+import type { AspectRatioID, AspectRatioState } from 'features/parameters/components/ImageSize/types';
 import { selectOptimalDimension } from 'features/parameters/store/generationSlice';
 import { createContext, useCallback, useContext, useMemo } from 'react';
 
@@ -33,17 +27,14 @@ export type ImageSizeContext = {
   setOptimalSize: () => void;
 };
 
-export const ImageSizeContext =
-  createContext<ImageSizeContextInnerValue | null>(null);
+export const ImageSizeContext = createContext<ImageSizeContextInnerValue | null>(null);
 
 export const useImageSizeContext = (): ImageSizeContext => {
   const _ctx = useContext(ImageSizeContext);
   const optimalDimension = useAppSelector(selectOptimalDimension);
 
   if (!_ctx) {
-    throw new Error(
-      'useImageSizeContext must be used within a ImageSizeContext.Provider'
-    );
+    throw new Error('useImageSizeContext must be used within a ImageSizeContext.Provider');
   }
 
   const aspectRatioSelected = useCallback(
@@ -59,10 +50,7 @@ export const useImageSizeContext = (): ImageSizeContext => {
         // The new aspect ratio not free, so we need to coerce the size & lock
         state.isLocked = true;
         state.value = ASPECT_RATIO_MAP[state.id].ratio;
-        const { width, height } = calculateNewSize(
-          state.value,
-          _ctx.width * _ctx.height
-        );
+        const { width, height } = calculateNewSize(state.value, _ctx.width * _ctx.height);
         _ctx.onChangeWidth(width);
         _ctx.onChangeHeight(height);
       }
@@ -84,10 +72,7 @@ export const useImageSizeContext = (): ImageSizeContext => {
       _ctx.onChangeHeight(newHeight);
     } else {
       // Else we need to calculate the new size
-      const { width, height } = calculateNewSize(
-        state.value,
-        _ctx.width * _ctx.height
-      );
+      const { width, height } = calculateNewSize(state.value, _ctx.width * _ctx.height);
       _ctx.onChangeWidth(width);
       _ctx.onChangeHeight(height);
       // Update the aspect ratio ID to match the new aspect ratio
@@ -144,10 +129,7 @@ export const useImageSizeContext = (): ImageSizeContext => {
 
   const setOptimalSize = useCallback(() => {
     if (_ctx.aspectRatioState.isLocked) {
-      const { width, height } = calculateNewSize(
-        _ctx.aspectRatioState.value,
-        optimalDimension * optimalDimension
-      );
+      const { width, height } = calculateNewSize(_ctx.aspectRatioState.value, optimalDimension * optimalDimension);
       _ctx.onChangeWidth(width);
       _ctx.onChangeHeight(height);
     } else {
@@ -167,15 +149,7 @@ export const useImageSizeContext = (): ImageSizeContext => {
       isLockedToggled,
       setOptimalSize,
     }),
-    [
-      _ctx,
-      aspectRatioSelected,
-      dimensionsSwapped,
-      heightChanged,
-      isLockedToggled,
-      setOptimalSize,
-      widthChanged,
-    ]
+    [_ctx, aspectRatioSelected, dimensionsSwapped, heightChanged, isLockedToggled, setOptimalSize, widthChanged]
   );
 
   return ctx;
diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageSize/LockAspectRatioButton.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageSize/LockAspectRatioButton.tsx
index d6ec18c64e..f24a52b12e 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/LockAspectRatioButton.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/LockAspectRatioButton.tsx
@@ -18,13 +18,7 @@ export const LockAspectRatioButton = memo(() => {
       onClick={onClick}
       variant={ctx.aspectRatioState.isLocked ? 'outline' : 'ghost'}
       size="sm"
-      icon={
-        ctx.aspectRatioState.isLocked ? (
-          <PiLockSimpleFill />
-        ) : (
-          <PiLockSimpleOpenBold />
-        )
-      }
+      icon={ctx.aspectRatioState.isLocked ? <PiLockSimpleFill /> : <PiLockSimpleOpenBold />}
     />
   );
 });
diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageSize/SetOptimalSizeButton.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageSize/SetOptimalSizeButton.tsx
index 189978519b..83770e4e15 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/SetOptimalSizeButton.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/SetOptimalSizeButton.tsx
@@ -2,10 +2,7 @@ import { IconButton } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext';
 import { selectOptimalDimension } from 'features/parameters/store/generationSlice';
-import {
-  getIsSizeTooLarge,
-  getIsSizeTooSmall,
-} from 'features/parameters/util/optimalDimension';
+import { getIsSizeTooLarge, getIsSizeTooSmall } from 'features/parameters/util/optimalDimension';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { RiSparklingFill } from 'react-icons/ri';
diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageSize/calculateNewSize.ts b/invokeai/frontend/web/src/features/parameters/components/ImageSize/calculateNewSize.ts
index 2dcc314ab5..87b14865c4 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/calculateNewSize.ts
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/calculateNewSize.ts
@@ -6,10 +6,7 @@ import { roundToMultiple } from 'common/util/roundDownToMultiple';
  * @param area The input area
  * @returns The width and height that will fit the given aspect ratio, retaining the input area
  */
-export const calculateNewSize = (
-  ratio: number,
-  area: number
-): { width: number; height: number } => {
+export const calculateNewSize = (ratio: number, area: number): { width: number; height: number } => {
   const exactWidth = Math.sqrt(area * ratio);
   const exactHeight = exactWidth / ratio;
 
diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageSize/constants.ts b/invokeai/frontend/web/src/features/parameters/components/ImageSize/constants.ts
index 3f187100d4..133ca1e1ca 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/constants.ts
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/constants.ts
@@ -37,10 +37,7 @@ export const ASPECT_RATIO_OPTIONS: ComboboxOption[] = [
   { label: '9:16' as const, value: '9:16' },
 ] as const;
 
-export const ASPECT_RATIO_MAP: Record<
-  Exclude<AspectRatioID, 'Free'>,
-  { ratio: number; inverseID: AspectRatioID }
-> = {
+export const ASPECT_RATIO_MAP: Record<Exclude<AspectRatioID, 'Free'>, { ratio: number; inverseID: AspectRatioID }> = {
   '16:9': { ratio: 16 / 9, inverseID: '9:16' },
   '3:2': { ratio: 3 / 2, inverseID: '2:3' },
   '4:3': { ratio: 4 / 3, inverseID: '4:3' },
diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageSize/hooks.ts b/invokeai/frontend/web/src/features/parameters/components/ImageSize/hooks.ts
index 47eab46844..bc6f1019c6 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/hooks.ts
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/hooks.ts
@@ -12,9 +12,7 @@ type UseAspectRatioPreviewStateArg = {
   height: number;
   containerSize?: Dimensions;
 };
-type UseAspectRatioPreviewState = (
-  arg: UseAspectRatioPreviewStateArg
-) => Dimensions & { shouldShowIcon: boolean };
+type UseAspectRatioPreviewState = (arg: UseAspectRatioPreviewStateArg) => Dimensions & { shouldShowIcon: boolean };
 
 export const useAspectRatioPreviewState: UseAspectRatioPreviewState = ({
   width: _width,
@@ -38,8 +36,7 @@ export const useAspectRatioPreviewState: UseAspectRatioPreviewState = ({
       width = height * aspectRatio;
     }
 
-    const shouldShowIcon =
-      aspectRatio < ICON_HIGH_CUTOFF && aspectRatio > ICON_LOW_CUTOFF;
+    const shouldShowIcon = aspectRatio < ICON_HIGH_CUTOFF && aspectRatio > ICON_LOW_CUTOFF;
 
     return { width, height, shouldShowIcon };
   }, [_height, _width, containerSize]);
diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageSize/types.ts b/invokeai/frontend/web/src/features/parameters/components/ImageSize/types.ts
index 880095f2d9..73322187ff 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/types.ts
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/types.ts
@@ -1,18 +1,8 @@
 import { z } from 'zod';
 
-export const zAspectRatioID = z.enum([
-  'Free',
-  '16:9',
-  '3:2',
-  '4:3',
-  '1:1',
-  '3:4',
-  '2:3',
-  '9:16',
-]);
+export const zAspectRatioID = z.enum(['Free', '16:9', '3:2', '4:3', '1:1', '3:4', '2:3', '9:16']);
 export type AspectRatioID = z.infer<typeof zAspectRatioID>;
-export const isAspectRatioID = (v: string): v is AspectRatioID =>
-  zAspectRatioID.safeParse(v).success;
+export const isAspectRatioID = (v: string): v is AspectRatioID => zAspectRatioID.safeParse(v).success;
 
 export type AspectRatioState = {
   id: AspectRatioID;
diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageFit.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageFit.tsx
index 72c618941d..9c41b2d56c 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageFit.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageFit.tsx
@@ -9,9 +9,7 @@ import { useTranslation } from 'react-i18next';
 const ImageToImageFit = () => {
   const dispatch = useAppDispatch();
 
-  const shouldFitToWidthHeight = useAppSelector(
-    (state: RootState) => state.generation.shouldFitToWidthHeight
-  );
+  const shouldFitToWidthHeight = useAppSelector((state: RootState) => state.generation.shouldFitToWidthHeight);
 
   const handleChangeFit = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageStrength.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageStrength.tsx
index b85a0291ee..e92831ecd9 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageStrength.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageStrength.tsx
@@ -1,9 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+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 { setImg2imgStrength } from 'features/parameters/store/generationSlice';
@@ -15,29 +10,16 @@ const marks = [0, 0.5, 1];
 const ImageToImageStrength = () => {
   const img2imgStrength = useAppSelector((s) => s.generation.img2imgStrength);
   const initial = useAppSelector((s) => s.config.sd.img2imgStrength.initial);
-  const sliderMin = useAppSelector(
-    (s) => s.config.sd.img2imgStrength.sliderMin
-  );
-  const sliderMax = useAppSelector(
-    (s) => s.config.sd.img2imgStrength.sliderMax
-  );
-  const numberInputMin = useAppSelector(
-    (s) => s.config.sd.img2imgStrength.numberInputMin
-  );
-  const numberInputMax = useAppSelector(
-    (s) => s.config.sd.img2imgStrength.numberInputMax
-  );
-  const coarseStep = useAppSelector(
-    (s) => s.config.sd.img2imgStrength.coarseStep
-  );
+  const sliderMin = useAppSelector((s) => s.config.sd.img2imgStrength.sliderMin);
+  const sliderMax = useAppSelector((s) => s.config.sd.img2imgStrength.sliderMax);
+  const numberInputMin = useAppSelector((s) => s.config.sd.img2imgStrength.numberInputMin);
+  const numberInputMax = useAppSelector((s) => s.config.sd.img2imgStrength.numberInputMax);
+  const coarseStep = useAppSelector((s) => s.config.sd.img2imgStrength.coarseStep);
   const fineStep = useAppSelector((s) => s.config.sd.img2imgStrength.fineStep);
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
-  const handleChange = useCallback(
-    (v: number) => dispatch(setImg2imgStrength(v)),
-    [dispatch]
-  );
+  const handleChange = useCallback((v: number) => dispatch(setImg2imgStrength(v)), [dispatch]);
 
   return (
     <FormControl>
diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageToImage/InitialImage.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageToImage/InitialImage.tsx
index 711ade4ec1..f70ea70616 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ImageToImage/InitialImage.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageToImage/InitialImage.tsx
@@ -3,22 +3,13 @@ import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIDndImage from 'common/components/IAIDndImage';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
-import type {
-  TypesafeDraggableData,
-  TypesafeDroppableData,
-} from 'features/dnd/types';
-import {
-  clearInitialImage,
-  selectGenerationSlice,
-} from 'features/parameters/store/generationSlice';
+import type { TypesafeDraggableData, TypesafeDroppableData } from 'features/dnd/types';
+import { clearInitialImage, selectGenerationSlice } from 'features/parameters/store/generationSlice';
 import { memo, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';
 
-const selectInitialImage = createMemoizedSelector(
-  selectGenerationSlice,
-  (generation) => generation.initialImage
-);
+const selectInitialImage = createMemoizedSelector(selectGenerationSlice, (generation) => generation.initialImage);
 
 const InitialImage = () => {
   const { t } = useTranslation();
@@ -26,9 +17,7 @@ const InitialImage = () => {
   const initialImage = useAppSelector(selectInitialImage);
   const isConnected = useAppSelector((s) => s.system.isConnected);
 
-  const { currentData: imageDTO, isError } = useGetImageDTOQuery(
-    initialImage?.imageName ?? skipToken
-  );
+  const { currentData: imageDTO, isError } = useGetImageDTOQuery(initialImage?.imageName ?? skipToken);
 
   const draggableData = useMemo<TypesafeDraggableData | undefined>(() => {
     if (imageDTO) {
@@ -63,11 +52,7 @@ const InitialImage = () => {
       isUploadDisabled={true}
       fitContainer
       dropLabel={t('toast.setInitialImage')}
-      noContentFallback={
-        <IAINoContentFallback
-          label={t('parameters.invoke.noInitialImageSelected')}
-        />
-      }
+      noContentFallback={<IAINoContentFallback label={t('parameters.invoke.noInitialImageSelected')} />}
       dataTestId="initial-image"
     />
   );
diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageToImage/InitialImageDisplay.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageToImage/InitialImageDisplay.tsx
index 879e899d19..110f9bb2a2 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ImageToImage/InitialImageDisplay.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageToImage/InitialImageDisplay.tsx
@@ -3,26 +3,16 @@ import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
 import { useRecallParameters } from 'features/parameters/hooks/useRecallParameters';
-import {
-  clearInitialImage,
-  selectGenerationSlice,
-} from 'features/parameters/store/generationSlice';
+import { clearInitialImage, selectGenerationSlice } from 'features/parameters/store/generationSlice';
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
-import {
-  PiArrowCounterClockwiseBold,
-  PiRulerBold,
-  PiUploadSimpleBold,
-} from 'react-icons/pi';
+import { PiArrowCounterClockwiseBold, PiRulerBold, PiUploadSimpleBold } from 'react-icons/pi';
 import type { PostUploadAction } from 'services/api/types';
 
 import InitialImage from './InitialImage';
 
-const selectInitialImage = createMemoizedSelector(
-  selectGenerationSlice,
-  (generation) => generation.initialImage
-);
+const selectInitialImage = createMemoizedSelector(selectGenerationSlice, (generation) => generation.initialImage);
 
 const postUploadAction: PostUploadAction = {
   type: 'SET_INITIAL_IMAGE',
@@ -63,13 +53,7 @@ const InitialImageDisplay = () => {
       p={2}
       gap={4}
     >
-      <Flex
-        w="full"
-        flexWrap="wrap"
-        justifyContent="center"
-        alignItems="center"
-        gap={2}
-      >
+      <Flex w="full" flexWrap="wrap" justifyContent="center" alignItems="center" gap={2}>
         <Text ps={2} fontWeight="semibold" userSelect="none" color="base.200">
           {t('metadata.initImage')}
         </Text>
diff --git a/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx b/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx
index 6de3868e72..13e03962b4 100644
--- a/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx
@@ -1,9 +1,4 @@
-import {
-  Combobox,
-  FormControl,
-  FormLabel,
-  Tooltip,
-} from '@invoke-ai/ui-library';
+import { Combobox, FormControl, FormLabel, 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';
@@ -14,16 +9,9 @@ import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { NON_REFINER_BASE_MODELS } from 'services/api/constants';
 import type { MainModelConfigEntity } from 'services/api/endpoints/models';
-import {
-  getModelId,
-  mainModelsAdapterSelectors,
-  useGetMainModelsQuery,
-} from 'services/api/endpoints/models';
+import { getModelId, mainModelsAdapterSelectors, useGetMainModelsQuery } from 'services/api/endpoints/models';
 
-const selectModel = createMemoizedSelector(
-  selectGenerationSlice,
-  (generation) => generation.model
-);
+const selectModel = createMemoizedSelector(selectGenerationSlice, (generation) => generation.model);
 
 const ParamMainModelSelect = () => {
   const dispatch = useAppDispatch();
@@ -34,27 +22,23 @@ const ParamMainModelSelect = () => {
     if (!data || !model) {
       return;
     }
-    return mainModelsAdapterSelectors.selectById(data, getModelId(model))
-      ?.description;
+    return mainModelsAdapterSelectors.selectById(data, getModelId(model))?.description;
   }, [data, model]);
   const _onChange = useCallback(
     (model: MainModelConfigEntity | null) => {
       if (!model) {
         return;
       }
-      dispatch(
-        modelSelected(pick(model, ['base_model', 'model_name', 'model_type']))
-      );
+      dispatch(modelSelected(pick(model, ['base_model', 'model_name', 'model_type'])));
     },
     [dispatch]
   );
-  const { options, value, onChange, placeholder, noOptionsMessage } =
-    useGroupedModelCombobox({
-      modelEntities: data,
-      onChange: _onChange,
-      selectedModel: model,
-      isLoading,
-    });
+  const { options, value, onChange, placeholder, noOptionsMessage } = useGroupedModelCombobox({
+    modelEntities: data,
+    onChange: _onChange,
+    selectedModel: model,
+    isLoading,
+  });
 
   return (
     <Tooltip label={tooltipLabel}>
diff --git a/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedNumberInput.tsx b/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedNumberInput.tsx
index 6dc76adbe1..de893e001e 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedNumberInput.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedNumberInput.tsx
@@ -1,8 +1,4 @@
-import {
-  CompositeNumberInput,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+import { CompositeNumberInput, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from 'app/constants';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
@@ -12,18 +8,13 @@ import { useTranslation } from 'react-i18next';
 
 export const ParamSeedNumberInput = memo(() => {
   const seed = useAppSelector((s) => s.generation.seed);
-  const shouldRandomizeSeed = useAppSelector(
-    (s) => s.generation.shouldRandomizeSeed
-  );
+  const shouldRandomizeSeed = useAppSelector((s) => s.generation.shouldRandomizeSeed);
 
   const { t } = useTranslation();
 
   const dispatch = useAppDispatch();
 
-  const handleChangeSeed = useCallback(
-    (v: number) => dispatch(setSeed(v)),
-    [dispatch]
-  );
+  const handleChangeSeed = useCallback((v: number) => dispatch(setSeed(v)), [dispatch]);
 
   return (
     <FormControl flexGrow={1}>
diff --git a/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedRandomize.tsx b/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedRandomize.tsx
index 29ccafe8fb..3648cae016 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedRandomize.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedRandomize.tsx
@@ -9,23 +9,17 @@ export const ParamSeedRandomize = memo(() => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
-  const shouldRandomizeSeed = useAppSelector(
-    (s) => s.generation.shouldRandomizeSeed
-  );
+  const shouldRandomizeSeed = useAppSelector((s) => s.generation.shouldRandomizeSeed);
 
   const handleChangeShouldRandomizeSeed = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) =>
-      dispatch(setShouldRandomizeSeed(e.target.checked)),
+    (e: ChangeEvent<HTMLInputElement>) => dispatch(setShouldRandomizeSeed(e.target.checked)),
     [dispatch]
   );
 
   return (
     <FormControl w="min-content">
       <FormLabel>{t('common.random')}</FormLabel>
-      <Switch
-        isChecked={shouldRandomizeSeed}
-        onChange={handleChangeShouldRandomizeSeed}
-      />
+      <Switch isChecked={shouldRandomizeSeed} onChange={handleChangeShouldRandomizeSeed} />
     </FormControl>
   );
 });
diff --git a/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedShuffle.tsx b/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedShuffle.tsx
index 71162c60ed..88c5813351 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedShuffle.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedShuffle.tsx
@@ -9,9 +9,7 @@ import { PiShuffleBold } from 'react-icons/pi';
 
 export const ParamSeedShuffle = memo(() => {
   const dispatch = useAppDispatch();
-  const shouldRandomizeSeed = useAppSelector(
-    (s) => s.generation.shouldRandomizeSeed
-  );
+  const shouldRandomizeSeed = useAppSelector((s) => s.generation.shouldRandomizeSeed);
   const { t } = useTranslation();
 
   const handleClickRandomizeSeed = useCallback(
diff --git a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamRealESRGANModel.tsx b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamRealESRGANModel.tsx
index 813ee11c76..6c1a3ab3a7 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamRealESRGANModel.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamRealESRGANModel.tsx
@@ -2,10 +2,7 @@ import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
 import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import type { GroupBase } from 'chakra-react-select';
-import {
-  esrganModelNameChanged,
-  isParamESRGANModelName,
-} from 'features/parameters/store/postprocessingSlice';
+import { esrganModelNameChanged, isParamESRGANModelName } from 'features/parameters/store/postprocessingSlice';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -26,8 +23,7 @@ const options: GroupBase<ComboboxOption>[] = [
       {
         label: 'RealESRGAN x4 Plus',
         value: 'RealESRGAN_x4plus.pth',
-        description:
-          'Best for photos and highly detailed images, medium smoothing',
+        description: 'Best for photos and highly detailed images, medium smoothing',
       },
       {
         label: 'RealESRGAN x4 Plus (anime 6B)',
@@ -46,9 +42,7 @@ const options: GroupBase<ComboboxOption>[] = [
 const ParamESRGANModel = () => {
   const { t } = useTranslation();
 
-  const esrganModelName = useAppSelector(
-    (s) => s.postprocessing.esrganModelName
-  );
+  const esrganModelName = useAppSelector((s) => s.postprocessing.esrganModelName);
 
   const dispatch = useAppDispatch();
 
@@ -63,10 +57,7 @@ const ParamESRGANModel = () => {
   );
 
   const value = useMemo(
-    () =>
-      options
-        .flatMap((o) => o.options)
-        .find((m) => m.value === esrganModelName),
+    () => options.flatMap((o) => o.options).find((m) => m.value === esrganModelName),
     [esrganModelName]
   );
 
diff --git a/invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamVAEModelSelect.tsx b/invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamVAEModelSelect.tsx
index 2be948a9cb..f290378aa8 100644
--- a/invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamVAEModelSelect.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamVAEModelSelect.tsx
@@ -3,10 +3,7 @@ import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
-import {
-  selectGenerationSlice,
-  vaeSelected,
-} from 'features/parameters/store/generationSlice';
+import { selectGenerationSlice, vaeSelected } from 'features/parameters/store/generationSlice';
 import { pick } from 'lodash-es';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -37,14 +34,13 @@ const ParamVAEModelSelect = () => {
     },
     [dispatch]
   );
-  const { options, value, onChange, placeholder, noOptionsMessage } =
-    useGroupedModelCombobox({
-      modelEntities: data,
-      onChange: _onChange,
-      selectedModel: vae ? { ...vae, model_type: 'vae' } : null,
-      isLoading,
-      getIsDisabled,
-    });
+  const { options, value, onChange, placeholder, noOptionsMessage } = useGroupedModelCombobox({
+    modelEntities: data,
+    onChange: _onChange,
+    selectedModel: vae ? { ...vae, model_type: 'vae' } : null,
+    isLoading,
+    getIsDisabled,
+  });
 
   return (
     <FormControl isDisabled={!options.length} isInvalid={!options.length}>
diff --git a/invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamVAEPrecision.tsx b/invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamVAEPrecision.tsx
index 18a627367f..63ac4a621d 100644
--- a/invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamVAEPrecision.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamVAEPrecision.tsx
@@ -28,10 +28,7 @@ const ParamVAEModelSelect = () => {
     [dispatch]
   );
 
-  const value = useMemo(
-    () => options.find((o) => o.value === vaePrecision),
-    [vaePrecision]
-  );
+  const value = useMemo(() => options.find((o) => o.value === vaePrecision), [vaePrecision]);
 
   return (
     <FormControl w="14rem" flexShrink={0}>
diff --git a/invokeai/frontend/web/src/features/parameters/hooks/useCoreParametersCollapseLabel.ts b/invokeai/frontend/web/src/features/parameters/hooks/useCoreParametersCollapseLabel.ts
index b0412e06cd..794f841451 100644
--- a/invokeai/frontend/web/src/features/parameters/hooks/useCoreParametersCollapseLabel.ts
+++ b/invokeai/frontend/web/src/features/parameters/hooks/useCoreParametersCollapseLabel.ts
@@ -4,9 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 export const useCoreParametersCollapseLabel = () => {
   const { t } = useTranslation();
-  const shouldRandomizeSeed = useAppSelector(
-    (s) => s.generation.shouldRandomizeSeed
-  );
+  const shouldRandomizeSeed = useAppSelector((s) => s.generation.shouldRandomizeSeed);
   const iterations = useAppSelector((s) => s.generation.iterations);
 
   const iterationsLabel = useMemo(() => {
@@ -25,10 +23,7 @@ export const useCoreParametersCollapseLabel = () => {
     }
   }, [shouldRandomizeSeed, t]);
 
-  const iterationsAndSeedLabel = useMemo(
-    () => [iterationsLabel, seedLabel].join(', '),
-    [iterationsLabel, seedLabel]
-  );
+  const iterationsAndSeedLabel = useMemo(() => [iterationsLabel, seedLabel].join(', '), [iterationsLabel, seedLabel]);
 
   return { iterationsAndSeedLabel, iterationsLabel, seedLabel };
 };
diff --git a/invokeai/frontend/web/src/features/parameters/hooks/useIsAllowedToUpscale.ts b/invokeai/frontend/web/src/features/parameters/hooks/useIsAllowedToUpscale.ts
index 62e14ab3d1..95fc52df22 100644
--- a/invokeai/frontend/web/src/features/parameters/hooks/useIsAllowedToUpscale.ts
+++ b/invokeai/frontend/web/src/features/parameters/hooks/useIsAllowedToUpscale.ts
@@ -19,10 +19,7 @@ const getUpscaledPixels = (imageDTO?: ImageDTO, maxUpscalePixels?: number) => {
   return { x4, x2 };
 };
 
-const getIsAllowedToUpscale = (
-  upscaledPixels?: ReturnType<typeof getUpscaledPixels>,
-  maxUpscalePixels?: number
-) => {
+const getIsAllowedToUpscale = (upscaledPixels?: ReturnType<typeof getUpscaledPixels>, maxUpscalePixels?: number) => {
   if (!upscaledPixels || !maxUpscalePixels) {
     return { x4: true, x2: true };
   }
@@ -37,10 +34,7 @@ const getIsAllowedToUpscale = (
   return isAllowedToUpscale;
 };
 
-const getDetailTKey = (
-  isAllowedToUpscale?: ReturnType<typeof getIsAllowedToUpscale>,
-  scaleFactor?: number
-) => {
+const getDetailTKey = (isAllowedToUpscale?: ReturnType<typeof getIsAllowedToUpscale>, scaleFactor?: number) => {
   if (!isAllowedToUpscale || !scaleFactor) {
     return;
   }
@@ -61,37 +55,24 @@ const getDetailTKey = (
 };
 
 export const createIsAllowedToUpscaleSelector = (imageDTO?: ImageDTO) =>
-  createMemoizedSelector(
-    selectPostprocessingSlice,
-    selectConfigSlice,
-    (postprocessing, config) => {
-      const { esrganModelName } = postprocessing;
-      const { maxUpscalePixels } = config;
+  createMemoizedSelector(selectPostprocessingSlice, selectConfigSlice, (postprocessing, config) => {
+    const { esrganModelName } = postprocessing;
+    const { maxUpscalePixels } = config;
 
-      const upscaledPixels = getUpscaledPixels(imageDTO, maxUpscalePixels);
-      const isAllowedToUpscale = getIsAllowedToUpscale(
-        upscaledPixels,
-        maxUpscalePixels
-      );
-      const scaleFactor = esrganModelName.includes('x2') ? 2 : 4;
-      const detailTKey = getDetailTKey(isAllowedToUpscale, scaleFactor);
-      return {
-        isAllowedToUpscale:
-          scaleFactor === 2 ? isAllowedToUpscale.x2 : isAllowedToUpscale.x4,
-        detailTKey,
-      };
-    }
-  );
+    const upscaledPixels = getUpscaledPixels(imageDTO, maxUpscalePixels);
+    const isAllowedToUpscale = getIsAllowedToUpscale(upscaledPixels, maxUpscalePixels);
+    const scaleFactor = esrganModelName.includes('x2') ? 2 : 4;
+    const detailTKey = getDetailTKey(isAllowedToUpscale, scaleFactor);
+    return {
+      isAllowedToUpscale: scaleFactor === 2 ? isAllowedToUpscale.x2 : isAllowedToUpscale.x4,
+      detailTKey,
+    };
+  });
 
 export const useIsAllowedToUpscale = (imageDTO?: ImageDTO) => {
   const { t } = useTranslation();
-  const selectIsAllowedToUpscale = useMemo(
-    () => createIsAllowedToUpscaleSelector(imageDTO),
-    [imageDTO]
-  );
-  const { isAllowedToUpscale, detailTKey } = useAppSelector(
-    selectIsAllowedToUpscale
-  );
+  const selectIsAllowedToUpscale = useMemo(() => createIsAllowedToUpscaleSelector(imageDTO), [imageDTO]);
+  const { isAllowedToUpscale, detailTKey } = useAppSelector(selectIsAllowedToUpscale);
 
   return {
     isAllowedToUpscale,
diff --git a/invokeai/frontend/web/src/features/parameters/hooks/usePreselectedImage.ts b/invokeai/frontend/web/src/features/parameters/hooks/usePreselectedImage.ts
index 138cecd094..4ec1a50dab 100644
--- a/invokeai/frontend/web/src/features/parameters/hooks/usePreselectedImage.ts
+++ b/invokeai/frontend/web/src/features/parameters/hooks/usePreselectedImage.ts
@@ -7,10 +7,7 @@ import { selectOptimalDimension } from 'features/parameters/store/generationSlic
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import { t } from 'i18next';
 import { useCallback, useEffect } from 'react';
-import {
-  useGetImageDTOQuery,
-  useGetImageMetadataQuery,
-} from 'services/api/endpoints/images';
+import { useGetImageDTOQuery, useGetImageMetadataQuery } from 'services/api/endpoints/images';
 
 import { useRecallParameters } from './useRecallParameters';
 
@@ -23,13 +20,9 @@ export const usePreselectedImage = (selectedImage?: {
   const optimalDimension = useAppSelector(selectOptimalDimension);
   const toaster = useAppToaster();
 
-  const { currentData: selectedImageDto } = useGetImageDTOQuery(
-    selectedImage?.imageName ?? skipToken
-  );
+  const { currentData: selectedImageDto } = useGetImageDTOQuery(selectedImage?.imageName ?? skipToken);
 
-  const { currentData: selectedImageMetadata } = useGetImageMetadataQuery(
-    selectedImage?.imageName ?? skipToken
-  );
+  const { currentData: selectedImageMetadata } = useGetImageMetadataQuery(selectedImage?.imageName ?? skipToken);
 
   const handleSendToCanvas = useCallback(() => {
     if (selectedImageDto) {
diff --git a/invokeai/frontend/web/src/features/parameters/hooks/useRecallParameters.ts b/invokeai/frontend/web/src/features/parameters/hooks/useRecallParameters.ts
index 126b700fde..5a9fa6c66d 100644
--- a/invokeai/frontend/web/src/features/parameters/hooks/useRecallParameters.ts
+++ b/invokeai/frontend/web/src/features/parameters/hooks/useRecallParameters.ts
@@ -2,25 +2,14 @@ import { useAppToaster } from 'app/components/Toaster';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
-import {
-  controlAdapterRecalled,
-  controlAdaptersReset,
-} from 'features/controlAdapters/store/controlAdaptersSlice';
-import type {
-  ControlNetConfig,
-  IPAdapterConfig,
-  T2IAdapterConfig,
-} from 'features/controlAdapters/store/types';
+import { controlAdapterRecalled, controlAdaptersReset } from 'features/controlAdapters/store/controlAdaptersSlice';
+import type { ControlNetConfig, IPAdapterConfig, T2IAdapterConfig } from 'features/controlAdapters/store/types';
 import {
   initialControlNet,
   initialIPAdapter,
   initialT2IAdapter,
 } from 'features/controlAdapters/util/buildControlAdapter';
-import {
-  setHrfEnabled,
-  setHrfMethod,
-  setHrfStrength,
-} from 'features/hrf/store/hrfSlice';
+import { setHrfEnabled, setHrfMethod, setHrfStrength } from 'features/hrf/store/hrfSlice';
 import { loraRecalled, lorasCleared } from 'features/lora/store/loraSlice';
 import type {
   ControlNetMetadataItem,
@@ -29,10 +18,7 @@ import type {
   LoRAMetadataItem,
   T2IAdapterMetadataItem,
 } from 'features/nodes/types/metadata';
-import {
-  initialImageSelected,
-  modelSelected,
-} from 'features/parameters/store/actions';
+import { initialImageSelected, modelSelected } from 'features/parameters/store/actions';
 import {
   heightRecalled,
   selectGenerationSlice,
@@ -100,10 +86,7 @@ import {
 import type { ImageDTO } from 'services/api/types';
 import { v4 as uuidv4 } from 'uuid';
 
-const selectModel = createMemoizedSelector(
-  selectGenerationSlice,
-  (generation) => generation.model
-);
+const selectModel = createMemoizedSelector(selectGenerationSlice, (generation) => generation.model);
 
 export const useRecallParameters = () => {
   const dispatch = useAppDispatch();
@@ -159,12 +142,7 @@ export const useRecallParameters = () => {
    * Recall both prompts with toast
    */
   const recallBothPrompts = useCallback(
-    (
-      positivePrompt: unknown,
-      negativePrompt: unknown,
-      positiveStylePrompt: unknown,
-      negativeStylePrompt: unknown
-    ) => {
+    (positivePrompt: unknown, negativePrompt: unknown, positiveStylePrompt: unknown, negativeStylePrompt: unknown) => {
       if (
         isParameterPositivePrompt(positivePrompt) ||
         isParameterNegativePrompt(negativePrompt) ||
@@ -489,18 +467,14 @@ export const useRecallParameters = () => {
       const { base_model, model_name } = loraMetadataItem.lora;
 
       const matchingLoRA = loraModels
-        ? loraModelsAdapterSelectors.selectById(
-            loraModels,
-            `${base_model}/lora/${model_name}`
-          )
+        ? loraModelsAdapterSelectors.selectById(loraModels, `${base_model}/lora/${model_name}`)
         : undefined;
 
       if (!matchingLoRA) {
         return { lora: null, error: 'LoRA model is not installed' };
       }
 
-      const isCompatibleBaseModel =
-        matchingLoRA?.base_model === (newModel ?? model)?.base_model;
+      const isCompatibleBaseModel = matchingLoRA?.base_model === (newModel ?? model)?.base_model;
 
       if (!isCompatibleBaseModel) {
         return {
@@ -523,9 +497,7 @@ export const useRecallParameters = () => {
         return;
       }
 
-      dispatch(
-        loraRecalled({ ...result.lora, weight: loraMetadataItem.weight })
-      );
+      dispatch(loraRecalled({ ...result.lora, weight: loraMetadataItem.weight }));
 
       parameterSetToast();
     },
@@ -539,23 +511,13 @@ export const useRecallParameters = () => {
   const { data: controlNetModels } = useGetControlNetModelsQuery(undefined);
 
   const prepareControlNetMetadataItem = useCallback(
-    (
-      controlnetMetadataItem: ControlNetMetadataItem,
-      newModel?: ParameterModel
-    ) => {
+    (controlnetMetadataItem: ControlNetMetadataItem, newModel?: ParameterModel) => {
       if (!isParameterControlNetModel(controlnetMetadataItem.control_model)) {
         return { controlnet: null, error: 'Invalid ControlNet model' };
       }
 
-      const {
-        image,
-        control_model,
-        control_weight,
-        begin_step_percent,
-        end_step_percent,
-        control_mode,
-        resize_mode,
-      } = controlnetMetadataItem;
+      const { image, control_model, control_weight, begin_step_percent, end_step_percent, control_mode, resize_mode } =
+        controlnetMetadataItem;
 
       const matchingControlNetModel = controlNetModels
         ? controlNetModelsAdapterSelectors.selectById(
@@ -568,8 +530,7 @@ export const useRecallParameters = () => {
         return { controlnet: null, error: 'ControlNet model is not installed' };
       }
 
-      const isCompatibleBaseModel =
-        matchingControlNetModel?.base_model === (newModel ?? model)?.base_model;
+      const isCompatibleBaseModel = matchingControlNetModel?.base_model === (newModel ?? model)?.base_model;
 
       if (!isCompatibleBaseModel) {
         return {
@@ -586,10 +547,7 @@ export const useRecallParameters = () => {
         type: 'controlnet',
         isEnabled: true,
         model: matchingControlNetModel,
-        weight:
-          typeof control_weight === 'number'
-            ? control_weight
-            : initialControlNet.weight,
+        weight: typeof control_weight === 'number' ? control_weight : initialControlNet.weight,
         beginStepPct: begin_step_percent || initialControlNet.beginStepPct,
         endStepPct: end_step_percent || initialControlNet.endStepPct,
         controlMode: control_mode || initialControlNet.controlMode,
@@ -620,12 +578,7 @@ export const useRecallParameters = () => {
 
       parameterSetToast();
     },
-    [
-      prepareControlNetMetadataItem,
-      dispatch,
-      parameterSetToast,
-      parameterNotSetToast,
-    ]
+    [prepareControlNetMetadataItem, dispatch, parameterSetToast, parameterNotSetToast]
   );
 
   /**
@@ -635,24 +588,13 @@ export const useRecallParameters = () => {
   const { data: t2iAdapterModels } = useGetT2IAdapterModelsQuery(undefined);
 
   const prepareT2IAdapterMetadataItem = useCallback(
-    (
-      t2iAdapterMetadataItem: T2IAdapterMetadataItem,
-      newModel?: ParameterModel
-    ) => {
-      if (
-        !isParameterControlNetModel(t2iAdapterMetadataItem.t2i_adapter_model)
-      ) {
+    (t2iAdapterMetadataItem: T2IAdapterMetadataItem, newModel?: ParameterModel) => {
+      if (!isParameterControlNetModel(t2iAdapterMetadataItem.t2i_adapter_model)) {
         return { controlnet: null, error: 'Invalid ControlNet model' };
       }
 
-      const {
-        image,
-        t2i_adapter_model,
-        weight,
-        begin_step_percent,
-        end_step_percent,
-        resize_mode,
-      } = t2iAdapterMetadataItem;
+      const { image, t2i_adapter_model, weight, begin_step_percent, end_step_percent, resize_mode } =
+        t2iAdapterMetadataItem;
 
       const matchingT2IAdapterModel = t2iAdapterModels
         ? t2iAdapterModelsAdapterSelectors.selectById(
@@ -665,8 +607,7 @@ export const useRecallParameters = () => {
         return { controlnet: null, error: 'ControlNet model is not installed' };
       }
 
-      const isCompatibleBaseModel =
-        matchingT2IAdapterModel?.base_model === (newModel ?? model)?.base_model;
+      const isCompatibleBaseModel = matchingT2IAdapterModel?.base_model === (newModel ?? model)?.base_model;
 
       if (!isCompatibleBaseModel) {
         return {
@@ -713,12 +654,7 @@ export const useRecallParameters = () => {
 
       parameterSetToast();
     },
-    [
-      prepareT2IAdapterMetadataItem,
-      dispatch,
-      parameterSetToast,
-      parameterNotSetToast,
-    ]
+    [prepareT2IAdapterMetadataItem, dispatch, parameterSetToast, parameterNotSetToast]
   );
 
   /**
@@ -728,21 +664,12 @@ export const useRecallParameters = () => {
   const { data: ipAdapterModels } = useGetIPAdapterModelsQuery(undefined);
 
   const prepareIPAdapterMetadataItem = useCallback(
-    (
-      ipAdapterMetadataItem: IPAdapterMetadataItem,
-      newModel?: ParameterModel
-    ) => {
+    (ipAdapterMetadataItem: IPAdapterMetadataItem, newModel?: ParameterModel) => {
       if (!isParameterIPAdapterModel(ipAdapterMetadataItem?.ip_adapter_model)) {
         return { ipAdapter: null, error: 'Invalid IP Adapter model' };
       }
 
-      const {
-        image,
-        ip_adapter_model,
-        weight,
-        begin_step_percent,
-        end_step_percent,
-      } = ipAdapterMetadataItem;
+      const { image, ip_adapter_model, weight, begin_step_percent, end_step_percent } = ipAdapterMetadataItem;
 
       const matchingIPAdapterModel = ipAdapterModels
         ? ipAdapterModelsAdapterSelectors.selectById(
@@ -755,8 +682,7 @@ export const useRecallParameters = () => {
         return { ipAdapter: null, error: 'IP Adapter model is not installed' };
       }
 
-      const isCompatibleBaseModel =
-        matchingIPAdapterModel?.base_model === (newModel ?? model)?.base_model;
+      const isCompatibleBaseModel = matchingIPAdapterModel?.base_model === (newModel ?? model)?.base_model;
 
       if (!isCompatibleBaseModel) {
         return {
@@ -794,12 +720,7 @@ export const useRecallParameters = () => {
 
       parameterSetToast();
     },
-    [
-      prepareIPAdapterMetadataItem,
-      dispatch,
-      parameterSetToast,
-      parameterNotSetToast,
-    ]
+    [prepareIPAdapterMetadataItem, dispatch, parameterSetToast, parameterNotSetToast]
   );
 
   /*
@@ -940,24 +861,12 @@ export const useRecallParameters = () => {
         dispatch(setRefinerScheduler(refiner_scheduler));
       }
 
-      if (
-        isParameterSDXLRefinerPositiveAestheticScore(
-          refiner_positive_aesthetic_score
-        )
-      ) {
-        dispatch(
-          setRefinerPositiveAestheticScore(refiner_positive_aesthetic_score)
-        );
+      if (isParameterSDXLRefinerPositiveAestheticScore(refiner_positive_aesthetic_score)) {
+        dispatch(setRefinerPositiveAestheticScore(refiner_positive_aesthetic_score));
       }
 
-      if (
-        isParameterSDXLRefinerNegativeAestheticScore(
-          refiner_negative_aesthetic_score
-        )
-      ) {
-        dispatch(
-          setRefinerNegativeAestheticScore(refiner_negative_aesthetic_score)
-        );
+      if (isParameterSDXLRefinerNegativeAestheticScore(refiner_negative_aesthetic_score)) {
+        dispatch(setRefinerNegativeAestheticScore(refiner_negative_aesthetic_score));
       }
 
       if (isParameterSDXLRefinerStart(refiner_start)) {
diff --git a/invokeai/frontend/web/src/features/parameters/store/actions.ts b/invokeai/frontend/web/src/features/parameters/store/actions.ts
index 995bf332af..0d4dda0e87 100644
--- a/invokeai/frontend/web/src/features/parameters/store/actions.ts
+++ b/invokeai/frontend/web/src/features/parameters/store/actions.ts
@@ -1,10 +1,6 @@
 import { createAction } from '@reduxjs/toolkit';
 import type { ImageDTO, MainModelField } from 'services/api/types';
 
-export const initialImageSelected = createAction<ImageDTO | undefined>(
-  'generation/initialImageSelected'
-);
+export const initialImageSelected = createAction<ImageDTO | undefined>('generation/initialImageSelected');
 
-export const modelSelected = createAction<MainModelField>(
-  'generation/modelSelected'
-);
+export const modelSelected = createAction<MainModelField>('generation/modelSelected');
diff --git a/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts b/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts
index baa4852697..9359fd4b84 100644
--- a/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts
+++ b/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts
@@ -18,10 +18,7 @@ import type {
   ParameterVAEModel,
 } from 'features/parameters/types/parameterSchemas';
 import { zParameterModel } from 'features/parameters/types/parameterSchemas';
-import {
-  getIsSizeOptimal,
-  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 { ImageDTO } from 'services/api/types';
@@ -81,10 +78,7 @@ export const generationSlice = createSlice({
     setCfgScale: (state, action: PayloadAction<ParameterCFGScale>) => {
       state.cfgScale = action.payload;
     },
-    setCfgRescaleMultiplier: (
-      state,
-      action: PayloadAction<ParameterCFGRescaleMultiplier>
-    ) => {
+    setCfgRescaleMultiplier: (state, action: PayloadAction<ParameterCFGRescaleMultiplier>) => {
       state.cfgRescaleMultiplier = action.payload;
     },
     setScheduler: (state, action: PayloadAction<ParameterScheduler>) => {
@@ -124,16 +118,10 @@ export const generationSlice = createSlice({
     setMaskBlur: (state, action: PayloadAction<number>) => {
       state.maskBlur = action.payload;
     },
-    setMaskBlurMethod: (
-      state,
-      action: PayloadAction<ParameterMaskBlurMethod>
-    ) => {
+    setMaskBlurMethod: (state, action: PayloadAction<ParameterMaskBlurMethod>) => {
       state.maskBlurMethod = action.payload;
     },
-    setCanvasCoherenceMode: (
-      state,
-      action: PayloadAction<ParameterCanvasCoherenceMode>
-    ) => {
+    setCanvasCoherenceMode: (state, action: PayloadAction<ParameterCanvasCoherenceMode>) => {
       state.canvasCoherenceMode = action.payload;
     },
     setCanvasCoherenceSteps: (state, action: PayloadAction<number>) => {
@@ -148,10 +136,7 @@ export const generationSlice = createSlice({
     setInfillTileSize: (state, action: PayloadAction<number>) => {
       state.infillTileSize = action.payload;
     },
-    setInfillPatchmatchDownscaleSize: (
-      state,
-      action: PayloadAction<number>
-    ) => {
+    setInfillPatchmatchDownscaleSize: (state, action: PayloadAction<number>) => {
       state.infillPatchmatchDownscaleSize = action.payload;
     },
     initialImageChanged: (state, action: PayloadAction<ImageDTO>) => {
@@ -161,11 +146,7 @@ export const generationSlice = createSlice({
     modelChanged: {
       reducer: (
         state,
-        action: PayloadAction<
-          ParameterModel | null,
-          string,
-          { previousModel?: ParameterModel | null }
-        >
+        action: PayloadAction<ParameterModel | null, string, { previousModel?: ParameterModel | null }>
       ) => {
         const newModel = action.payload;
         state.model = newModel;
@@ -194,17 +175,11 @@ export const generationSlice = createSlice({
         if (getIsSizeOptimal(state.width, state.height, optimalDimension)) {
           return;
         }
-        const { width, height } = calculateNewSize(
-          state.aspectRatio.value,
-          optimalDimension * optimalDimension
-        );
+        const { width, height } = calculateNewSize(state.aspectRatio.value, optimalDimension * optimalDimension);
         state.width = width;
         state.height = height;
       },
-      prepare: (
-        payload: ParameterModel | null,
-        previousModel?: ParameterModel | null
-      ) => ({
+      prepare: (payload: ParameterModel | null, previousModel?: ParameterModel | null) => ({
         payload,
         meta: {
           previousModel,
diff --git a/invokeai/frontend/web/src/features/parameters/store/postprocessingSlice.ts b/invokeai/frontend/web/src/features/parameters/store/postprocessingSlice.ts
index a681077e54..bb74c988a0 100644
--- a/invokeai/frontend/web/src/features/parameters/store/postprocessingSlice.ts
+++ b/invokeai/frontend/web/src/features/parameters/store/postprocessingSlice.ts
@@ -27,10 +27,7 @@ export const postprocessingSlice = createSlice({
   name: 'postprocessing',
   initialState: initialPostprocessingState,
   reducers: {
-    esrganModelNameChanged: (
-      state,
-      action: PayloadAction<ParamESRGANModelName>
-    ) => {
+    esrganModelNameChanged: (state, action: PayloadAction<ParamESRGANModelName>) => {
       state.esrganModelName = action.payload;
     },
   },
@@ -40,8 +37,7 @@ export const { esrganModelNameChanged } = postprocessingSlice.actions;
 
 export default postprocessingSlice.reducer;
 
-export const selectPostprocessingSlice = (state: RootState) =>
-  state.postprocessing;
+export const selectPostprocessingSlice = (state: RootState) => state.postprocessing;
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const migratePostprocessingState = (state: any): any => {
diff --git a/invokeai/frontend/web/src/features/parameters/store/types.ts b/invokeai/frontend/web/src/features/parameters/store/types.ts
index fa9e7acf4b..0c20019d70 100644
--- a/invokeai/frontend/web/src/features/parameters/store/types.ts
+++ b/invokeai/frontend/web/src/features/parameters/store/types.ts
@@ -53,8 +53,4 @@ export interface GenerationState {
   aspectRatio: AspectRatioState;
 }
 
-export type PayloadActionWithOptimalDimension<T = void> = PayloadAction<
-  T,
-  string,
-  { optimalDimension: number }
->;
+export type PayloadActionWithOptimalDimension<T = void> = PayloadAction<T, string, { optimalDimension: number }>;
diff --git a/invokeai/frontend/web/src/features/parameters/types/parameterSchemas.ts b/invokeai/frontend/web/src/features/parameters/types/parameterSchemas.ts
index 00632c2068..7a5efe9dcf 100644
--- a/invokeai/frontend/web/src/features/parameters/types/parameterSchemas.ts
+++ b/invokeai/frontend/web/src/features/parameters/types/parameterSchemas.ts
@@ -26,48 +26,35 @@ import { z } from 'zod';
 // #region Positive prompt
 export const zParameterPositivePrompt = z.string();
 export type ParameterPositivePrompt = z.infer<typeof zParameterPositivePrompt>;
-export const isParameterPositivePrompt = (
-  val: unknown
-): val is ParameterPositivePrompt =>
+export const isParameterPositivePrompt = (val: unknown): val is ParameterPositivePrompt =>
   zParameterPositivePrompt.safeParse(val).success;
 // #endregion
 
 // #region Negative prompt
 export const zParameterNegativePrompt = z.string();
 export type ParameterNegativePrompt = z.infer<typeof zParameterNegativePrompt>;
-export const isParameterNegativePrompt = (
-  val: unknown
-): val is ParameterNegativePrompt =>
+export const isParameterNegativePrompt = (val: unknown): val is ParameterNegativePrompt =>
   zParameterNegativePrompt.safeParse(val).success;
 // #endregion
 
 // #region Positive style prompt (SDXL)
 export const zParameterPositiveStylePromptSDXL = z.string();
-export type ParameterPositiveStylePromptSDXL = z.infer<
-  typeof zParameterPositiveStylePromptSDXL
->;
-export const isParameterPositiveStylePromptSDXL = (
-  val: unknown
-): val is ParameterPositiveStylePromptSDXL =>
+export type ParameterPositiveStylePromptSDXL = z.infer<typeof zParameterPositiveStylePromptSDXL>;
+export const isParameterPositiveStylePromptSDXL = (val: unknown): val is ParameterPositiveStylePromptSDXL =>
   zParameterPositiveStylePromptSDXL.safeParse(val).success;
 // #endregion
 
 // #region Positive style prompt (SDXL)
 export const zParameterNegativeStylePromptSDXL = z.string();
-export type ParameterNegativeStylePromptSDXL = z.infer<
-  typeof zParameterNegativeStylePromptSDXL
->;
-export const isParameterNegativeStylePromptSDXL = (
-  val: unknown
-): val is ParameterNegativeStylePromptSDXL =>
+export type ParameterNegativeStylePromptSDXL = z.infer<typeof zParameterNegativeStylePromptSDXL>;
+export const isParameterNegativeStylePromptSDXL = (val: unknown): val is ParameterNegativeStylePromptSDXL =>
   zParameterNegativeStylePromptSDXL.safeParse(val).success;
 // #endregion
 
 // #region Steps
 export const zParameterSteps = z.number().int().min(1);
 export type ParameterSteps = z.infer<typeof zParameterSteps>;
-export const isParameterSteps = (val: unknown): val is ParameterSteps =>
-  zParameterSteps.safeParse(val).success;
+export const isParameterSteps = (val: unknown): val is ParameterSteps => zParameterSteps.safeParse(val).success;
 // #endregion
 
 // #region CFG scale parameter
@@ -79,12 +66,8 @@ export const isParameterCFGScale = (val: unknown): val is ParameterCFGScale =>
 
 // #region CFG Rescale Multiplier
 export const zParameterCFGRescaleMultiplier = z.number().gte(0).lt(1);
-export type ParameterCFGRescaleMultiplier = z.infer<
-  typeof zParameterCFGRescaleMultiplier
->;
-export const isParameterCFGRescaleMultiplier = (
-  val: unknown
-): val is ParameterCFGRescaleMultiplier =>
+export type ParameterCFGRescaleMultiplier = z.infer<typeof zParameterCFGRescaleMultiplier>;
+export const isParameterCFGRescaleMultiplier = (val: unknown): val is ParameterCFGRescaleMultiplier =>
   zParameterCFGRescaleMultiplier.safeParse(val).success;
 // #endregion
 
@@ -98,47 +81,38 @@ export const isParameterScheduler = (val: unknown): val is ParameterScheduler =>
 // #region seed
 export const zParameterSeed = z.number().int().min(0).max(NUMPY_RAND_MAX);
 export type ParameterSeed = z.infer<typeof zParameterSeed>;
-export const isParameterSeed = (val: unknown): val is ParameterSeed =>
-  zParameterSeed.safeParse(val).success;
+export const isParameterSeed = (val: unknown): val is ParameterSeed => zParameterSeed.safeParse(val).success;
 // #endregion
 
 // #region Width
 export const zParameterWidth = z.number().multipleOf(8).min(64);
 export type ParameterWidth = z.infer<typeof zParameterWidth>;
-export const isParameterWidth = (val: unknown): val is ParameterWidth =>
-  zParameterWidth.safeParse(val).success;
+export const isParameterWidth = (val: unknown): val is ParameterWidth => zParameterWidth.safeParse(val).success;
 // #endregion
 
 // #region Height
 export const zParameterHeight = zParameterWidth;
 export type ParameterHeight = z.infer<typeof zParameterHeight>;
-export const isParameterHeight = (val: unknown): val is ParameterHeight =>
-  zParameterHeight.safeParse(val).success;
+export const isParameterHeight = (val: unknown): val is ParameterHeight => zParameterHeight.safeParse(val).success;
 // #endregion
 
 // #region Aspect Ratio
 export const zParameterAspectRatio = z.number().int().min(0).max(6);
 export type ParameterAspectRatio = z.infer<typeof zParameterAspectRatio>;
-export const isParameterAspectRatio = (
-  val: unknown
-): val is ParameterAspectRatio => zParameterAspectRatio.safeParse(val).success;
+export const isParameterAspectRatio = (val: unknown): val is ParameterAspectRatio =>
+  zParameterAspectRatio.safeParse(val).success;
 // #endregion
 
 // #region Model
 export const zParameterModel = zMainModelField;
 export type ParameterModel = z.infer<typeof zParameterModel>;
-export const isParameterModel = (val: unknown): val is ParameterModel =>
-  zParameterModel.safeParse(val).success;
+export const isParameterModel = (val: unknown): val is ParameterModel => zParameterModel.safeParse(val).success;
 // #endregion
 
 // #region SDXL Refiner Model
 export const zParameterSDXLRefinerModel = zSDXLRefinerModelField;
-export type ParameterSDXLRefinerModel = z.infer<
-  typeof zParameterSDXLRefinerModel
->;
-export const isParameterSDXLRefinerModel = (
-  val: unknown
-): val is ParameterSDXLRefinerModel =>
+export type ParameterSDXLRefinerModel = z.infer<typeof zParameterSDXLRefinerModel>;
+export const isParameterSDXLRefinerModel = (val: unknown): val is ParameterSDXLRefinerModel =>
   zParameterSDXLRefinerModel.safeParse(val).success;
 // #endregion
 
@@ -159,29 +133,21 @@ export const isParameterLoRAModel = (val: unknown): val is ParameterLoRAModel =>
 // #region ControlNet Model
 export const zParameterControlNetModel = zControlNetModelField;
 export type ParameterControlNetModel = z.infer<typeof zParameterLoRAModel>;
-export const isParameterControlNetModel = (
-  val: unknown
-): val is ParameterControlNetModel =>
+export const isParameterControlNetModel = (val: unknown): val is ParameterControlNetModel =>
   zParameterControlNetModel.safeParse(val).success;
 // #endregion
 
 // #region IP Adapter Model
 export const zParameterIPAdapterModel = zIPAdapterModelField;
 export type ParameterIPAdapterModel = z.infer<typeof zParameterIPAdapterModel>;
-export const isParameterIPAdapterModel = (
-  val: unknown
-): val is ParameterIPAdapterModel =>
+export const isParameterIPAdapterModel = (val: unknown): val is ParameterIPAdapterModel =>
   zParameterIPAdapterModel.safeParse(val).success;
 // #endregion
 
 // #region T2I Adapter Model
 export const zParameterT2IAdapterModel = zT2IAdapterModelField;
-export type ParameterT2IAdapterModel = z.infer<
-  typeof zParameterT2IAdapterModel
->;
-export const isParameterT2IAdapterModel = (
-  val: unknown
-): val is ParameterT2IAdapterModel =>
+export type ParameterT2IAdapterModel = z.infer<typeof zParameterT2IAdapterModel>;
+export const isParameterT2IAdapterModel = (val: unknown): val is ParameterT2IAdapterModel =>
   zParameterT2IAdapterModel.safeParse(val).success;
 // #endregion
 
@@ -210,19 +176,12 @@ export const isParameterHRFMethod = (val: unknown): val is ParameterHRFMethod =>
 export const zParameterHRFEnabled = z.boolean();
 export type ParameterHRFEnabled = z.infer<typeof zParameterHRFEnabled>;
 export const isParameterHRFEnabled = (val: unknown): val is boolean =>
-  zParameterHRFEnabled.safeParse(val).success &&
-  val !== null &&
-  val !== undefined;
+  zParameterHRFEnabled.safeParse(val).success && val !== null && val !== undefined;
 // #endregion
 
 // #region SDXL Refiner Positive Aesthetic Score
-export const zParameterSDXLRefinerPositiveAestheticScore = z
-  .number()
-  .min(1)
-  .max(10);
-export type ParameterSDXLRefinerPositiveAestheticScore = z.infer<
-  typeof zParameterSDXLRefinerPositiveAestheticScore
->;
+export const zParameterSDXLRefinerPositiveAestheticScore = z.number().min(1).max(10);
+export type ParameterSDXLRefinerPositiveAestheticScore = z.infer<typeof zParameterSDXLRefinerPositiveAestheticScore>;
 export const isParameterSDXLRefinerPositiveAestheticScore = (
   val: unknown
 ): val is ParameterSDXLRefinerPositiveAestheticScore =>
@@ -230,11 +189,8 @@ export const isParameterSDXLRefinerPositiveAestheticScore = (
 // #endregion
 
 // #region SDXL Refiner Negative Aesthetic Score
-export const zParameterSDXLRefinerNegativeAestheticScore =
-  zParameterSDXLRefinerPositiveAestheticScore;
-export type ParameterSDXLRefinerNegativeAestheticScore = z.infer<
-  typeof zParameterSDXLRefinerNegativeAestheticScore
->;
+export const zParameterSDXLRefinerNegativeAestheticScore = zParameterSDXLRefinerPositiveAestheticScore;
+export type ParameterSDXLRefinerNegativeAestheticScore = z.infer<typeof zParameterSDXLRefinerNegativeAestheticScore>;
 export const isParameterSDXLRefinerNegativeAestheticScore = (
   val: unknown
 ): val is ParameterSDXLRefinerNegativeAestheticScore =>
@@ -243,35 +199,21 @@ export const isParameterSDXLRefinerNegativeAestheticScore = (
 
 // #region SDXL Refiner Start
 export const zParameterSDXLRefinerStart = z.number().min(0).max(1);
-export type ParameterSDXLRefinerStart = z.infer<
-  typeof zParameterSDXLRefinerStart
->;
-export const isParameterSDXLRefinerStart = (
-  val: unknown
-): val is ParameterSDXLRefinerStart =>
+export type ParameterSDXLRefinerStart = z.infer<typeof zParameterSDXLRefinerStart>;
+export const isParameterSDXLRefinerStart = (val: unknown): val is ParameterSDXLRefinerStart =>
   zParameterSDXLRefinerStart.safeParse(val).success;
 // #endregion
 
 // #region Mask Blur Method
 export const zParameterMaskBlurMethod = z.enum(['box', 'gaussian']);
 export type ParameterMaskBlurMethod = z.infer<typeof zParameterMaskBlurMethod>;
-export const isParameterMaskBlurMethod = (
-  val: unknown
-): val is ParameterMaskBlurMethod =>
+export const isParameterMaskBlurMethod = (val: unknown): val is ParameterMaskBlurMethod =>
   zParameterMaskBlurMethod.safeParse(val).success;
 // #endregion
 
 // #region Canvas Coherence Mode
-export const zParameterCanvasCoherenceMode = z.enum([
-  'unmasked',
-  'mask',
-  'edge',
-]);
-export type ParameterCanvasCoherenceMode = z.infer<
-  typeof zParameterCanvasCoherenceMode
->;
-export const isParameterCanvasCoherenceMode = (
-  val: unknown
-): val is ParameterCanvasCoherenceMode =>
+export const zParameterCanvasCoherenceMode = z.enum(['unmasked', 'mask', 'edge']);
+export type ParameterCanvasCoherenceMode = z.infer<typeof zParameterCanvasCoherenceMode>;
+export const isParameterCanvasCoherenceMode = (val: unknown): val is ParameterCanvasCoherenceMode =>
   zParameterCanvasCoherenceMode.safeParse(val).success;
 // #endregion
diff --git a/invokeai/frontend/web/src/features/parameters/util/modelIdToControlNetModelParam.ts b/invokeai/frontend/web/src/features/parameters/util/modelIdToControlNetModelParam.ts
index 8859ba1b85..f98a1bd579 100644
--- a/invokeai/frontend/web/src/features/parameters/util/modelIdToControlNetModelParam.ts
+++ b/invokeai/frontend/web/src/features/parameters/util/modelIdToControlNetModelParam.ts
@@ -2,9 +2,7 @@ import { logger } from 'app/logging/logger';
 import { zParameterControlNetModel } from 'features/parameters/types/parameterSchemas';
 import type { ControlNetModelField } from 'services/api/types';
 
-export const modelIdToControlNetModelParam = (
-  controlNetModelId: string
-): ControlNetModelField | undefined => {
+export const modelIdToControlNetModelParam = (controlNetModelId: string): ControlNetModelField | undefined => {
   const log = logger('models');
   const [base_model, _model_type, model_name] = controlNetModelId.split('/');
 
diff --git a/invokeai/frontend/web/src/features/parameters/util/modelIdToIPAdapterModelParams.ts b/invokeai/frontend/web/src/features/parameters/util/modelIdToIPAdapterModelParams.ts
index 951c2f41b8..f3143b6421 100644
--- a/invokeai/frontend/web/src/features/parameters/util/modelIdToIPAdapterModelParams.ts
+++ b/invokeai/frontend/web/src/features/parameters/util/modelIdToIPAdapterModelParams.ts
@@ -2,9 +2,7 @@ import { logger } from 'app/logging/logger';
 import { zParameterIPAdapterModel } from 'features/parameters/types/parameterSchemas';
 import type { IPAdapterModelField } from 'services/api/types';
 
-export const modelIdToIPAdapterModelParam = (
-  ipAdapterModelId: string
-): IPAdapterModelField | undefined => {
+export const modelIdToIPAdapterModelParam = (ipAdapterModelId: string): IPAdapterModelField | undefined => {
   const log = logger('models');
   const [base_model, _model_type, model_name] = ipAdapterModelId.split('/');
 
diff --git a/invokeai/frontend/web/src/features/parameters/util/modelIdToLoRAModelParam.ts b/invokeai/frontend/web/src/features/parameters/util/modelIdToLoRAModelParam.ts
index 0eb64b939e..16cdaae5de 100644
--- a/invokeai/frontend/web/src/features/parameters/util/modelIdToLoRAModelParam.ts
+++ b/invokeai/frontend/web/src/features/parameters/util/modelIdToLoRAModelParam.ts
@@ -2,9 +2,7 @@ import { logger } from 'app/logging/logger';
 import type { ParameterLoRAModel } from 'features/parameters/types/parameterSchemas';
 import { zParameterLoRAModel } from 'features/parameters/types/parameterSchemas';
 
-export const modelIdToLoRAModelParam = (
-  loraModelId: string
-): ParameterLoRAModel | undefined => {
+export const modelIdToLoRAModelParam = (loraModelId: string): ParameterLoRAModel | undefined => {
   const log = logger('models');
 
   const [base_model, _model_type, model_name] = loraModelId.split('/');
diff --git a/invokeai/frontend/web/src/features/parameters/util/modelIdToMainModelParam.ts b/invokeai/frontend/web/src/features/parameters/util/modelIdToMainModelParam.ts
index 94c512c2d7..4fe7c8e4ac 100644
--- a/invokeai/frontend/web/src/features/parameters/util/modelIdToMainModelParam.ts
+++ b/invokeai/frontend/web/src/features/parameters/util/modelIdToMainModelParam.ts
@@ -2,9 +2,7 @@ import { logger } from 'app/logging/logger';
 import type { ParameterModel } from 'features/parameters/types/parameterSchemas';
 import { zParameterModel } from 'features/parameters/types/parameterSchemas';
 
-export const modelIdToMainModelParam = (
-  mainModelId: string
-): ParameterModel | undefined => {
+export const modelIdToMainModelParam = (mainModelId: string): ParameterModel | undefined => {
   const log = logger('models');
   const [base_model, model_type, model_name] = mainModelId.split('/');
 
diff --git a/invokeai/frontend/web/src/features/parameters/util/modelIdToSDXLRefinerModelParam.ts b/invokeai/frontend/web/src/features/parameters/util/modelIdToSDXLRefinerModelParam.ts
index 0c03282e5f..aec3018ac8 100644
--- a/invokeai/frontend/web/src/features/parameters/util/modelIdToSDXLRefinerModelParam.ts
+++ b/invokeai/frontend/web/src/features/parameters/util/modelIdToSDXLRefinerModelParam.ts
@@ -2,9 +2,7 @@ import { logger } from 'app/logging/logger';
 import type { ParameterSDXLRefinerModel } from 'features/parameters/types/parameterSchemas';
 import { zParameterSDXLRefinerModel } from 'features/parameters/types/parameterSchemas';
 
-export const modelIdToSDXLRefinerModelParam = (
-  mainModelId: string
-): ParameterSDXLRefinerModel | undefined => {
+export const modelIdToSDXLRefinerModelParam = (mainModelId: string): ParameterSDXLRefinerModel | undefined => {
   const log = logger('models');
   const [base_model, model_type, model_name] = mainModelId.split('/');
 
diff --git a/invokeai/frontend/web/src/features/parameters/util/modelIdToT2IAdapterModelParam.ts b/invokeai/frontend/web/src/features/parameters/util/modelIdToT2IAdapterModelParam.ts
index cf0340b4fd..23097aee0b 100644
--- a/invokeai/frontend/web/src/features/parameters/util/modelIdToT2IAdapterModelParam.ts
+++ b/invokeai/frontend/web/src/features/parameters/util/modelIdToT2IAdapterModelParam.ts
@@ -2,9 +2,7 @@ import { logger } from 'app/logging/logger';
 import { zParameterT2IAdapterModel } from 'features/parameters/types/parameterSchemas';
 import type { T2IAdapterModelField } from 'services/api/types';
 
-export const modelIdToT2IAdapterModelParam = (
-  t2iAdapterModelId: string
-): T2IAdapterModelField | undefined => {
+export const modelIdToT2IAdapterModelParam = (t2iAdapterModelId: string): T2IAdapterModelField | undefined => {
   const log = logger('models');
   const [base_model, _model_type, model_name] = t2iAdapterModelId.split('/');
 
diff --git a/invokeai/frontend/web/src/features/parameters/util/modelIdToVAEModelParam.ts b/invokeai/frontend/web/src/features/parameters/util/modelIdToVAEModelParam.ts
index ff45d1c9ec..90d74a2f80 100644
--- a/invokeai/frontend/web/src/features/parameters/util/modelIdToVAEModelParam.ts
+++ b/invokeai/frontend/web/src/features/parameters/util/modelIdToVAEModelParam.ts
@@ -2,9 +2,7 @@ import { logger } from 'app/logging/logger';
 import type { ParameterVAEModel } from 'features/parameters/types/parameterSchemas';
 import { zParameterVAEModel } from 'features/parameters/types/parameterSchemas';
 
-export const modelIdToVAEModelParam = (
-  vaeModelId: string
-): ParameterVAEModel | undefined => {
+export const modelIdToVAEModelParam = (vaeModelId: string): ParameterVAEModel | undefined => {
   const log = logger('models');
   const [base_model, _model_type, model_name] = vaeModelId.split('/');
 
diff --git a/invokeai/frontend/web/src/features/parameters/util/optimalDimension.ts b/invokeai/frontend/web/src/features/parameters/util/optimalDimension.ts
index 28bbd1e62f..1c550eb8a4 100644
--- a/invokeai/frontend/web/src/features/parameters/util/optimalDimension.ts
+++ b/invokeai/frontend/web/src/features/parameters/util/optimalDimension.ts
@@ -11,11 +11,7 @@ export const getOptimalDimension = (model?: ModelIdentifier | null): number =>
 const MIN_AREA_FACTOR = 0.8;
 const MAX_AREA_FACTOR = 1.2;
 
-export const getIsSizeTooSmall = (
-  width: number,
-  height: number,
-  optimalDimension: number
-): boolean => {
+export const getIsSizeTooSmall = (width: number, height: number, optimalDimension: number): boolean => {
   const currentArea = width * height;
   const optimalArea = optimalDimension * optimalDimension;
   if (currentArea < optimalArea * MIN_AREA_FACTOR) {
@@ -24,11 +20,7 @@ export const getIsSizeTooSmall = (
   return false;
 };
 
-export const getIsSizeTooLarge = (
-  width: number,
-  height: number,
-  optimalDimension: number
-): boolean => {
+export const getIsSizeTooLarge = (width: number, height: number, optimalDimension: number): boolean => {
   const currentArea = width * height;
   const optimalArea = optimalDimension * optimalDimension;
   if (currentArea > optimalArea * MAX_AREA_FACTOR) {
@@ -45,13 +37,6 @@ export const getIsSizeTooLarge = (
  * @param optimalDimension The optimal dimension
  * @returns Whether the current width and height needs to be resized to the optimal dimension
  */
-export const getIsSizeOptimal = (
-  width: number,
-  height: number,
-  optimalDimension: number
-): boolean => {
-  return (
-    !getIsSizeTooSmall(width, height, optimalDimension) &&
-    !getIsSizeTooLarge(width, height, optimalDimension)
-  );
+export const getIsSizeOptimal = (width: number, height: number, optimalDimension: number): boolean => {
+  return !getIsSizeTooSmall(width, height, optimalDimension) && !getIsSizeTooLarge(width, height, optimalDimension);
 };
diff --git a/invokeai/frontend/web/src/features/queue/components/CancelCurrentQueueItemIconButton.tsx b/invokeai/frontend/web/src/features/queue/components/CancelCurrentQueueItemIconButton.tsx
index a763ad23d3..e13d03e7f4 100644
--- a/invokeai/frontend/web/src/features/queue/components/CancelCurrentQueueItemIconButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/CancelCurrentQueueItemIconButton.tsx
@@ -10,8 +10,7 @@ type Props = {
 
 const CancelCurrentQueueItemIconButton = ({ sx }: Props) => {
   const { t } = useTranslation();
-  const { cancelQueueItem, isLoading, isDisabled } =
-    useCancelCurrentQueueItem();
+  const { cancelQueueItem, isLoading, isDisabled } = useCancelCurrentQueueItem();
 
   return (
     <IconButton
diff --git a/invokeai/frontend/web/src/features/queue/components/ClearInvocationCacheButton.tsx b/invokeai/frontend/web/src/features/queue/components/ClearInvocationCacheButton.tsx
index c13298da46..52b1b237e7 100644
--- a/invokeai/frontend/web/src/features/queue/components/ClearInvocationCacheButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/ClearInvocationCacheButton.tsx
@@ -5,15 +5,10 @@ import { useTranslation } from 'react-i18next';
 
 const ClearInvocationCacheButton = () => {
   const { t } = useTranslation();
-  const { clearInvocationCache, isDisabled, isLoading } =
-    useClearInvocationCache();
+  const { clearInvocationCache, isDisabled, isLoading } = useClearInvocationCache();
 
   return (
-    <Button
-      isDisabled={isDisabled}
-      isLoading={isLoading}
-      onClick={clearInvocationCache}
-    >
+    <Button isDisabled={isDisabled} isLoading={isLoading} onClick={clearInvocationCache}>
       {t('invocationCache.clear')}
     </Button>
   );
diff --git a/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx b/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx
index fe8763d65f..6bc8cfb6a1 100644
--- a/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx
@@ -1,9 +1,5 @@
 import type { IconButtonProps } from '@invoke-ai/ui-library';
-import {
-  IconButton,
-  useDisclosure,
-  useShiftModifier,
-} from '@invoke-ai/ui-library';
+import { IconButton, useDisclosure, useShiftModifier } from '@invoke-ai/ui-library';
 import ClearQueueConfirmationAlertDialog from 'features/queue/components/ClearQueueConfirmationAlertDialog';
 import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem';
 import { useClearQueue } from 'features/queue/hooks/useClearQueue';
@@ -16,10 +12,7 @@ type ClearQueueIconButtonProps = ClearQueueButtonProps & {
   onOpen: () => void;
 };
 
-const ClearAllQueueIconButton = ({
-  onOpen,
-  ...props
-}: ClearQueueIconButtonProps) => {
+const ClearAllQueueIconButton = ({ onOpen, ...props }: ClearQueueIconButtonProps) => {
   const { t } = useTranslation();
   const { isLoading, isDisabled } = useClearQueue();
 
@@ -40,8 +33,7 @@ const ClearAllQueueIconButton = ({
 
 const ClearSingleQueueItemIconButton = (props: ClearQueueButtonProps) => {
   const { t } = useTranslation();
-  const { cancelQueueItem, isLoading, isDisabled } =
-    useCancelCurrentQueueItem();
+  const { cancelQueueItem, isLoading, isDisabled } = useCancelCurrentQueueItem();
 
   return (
     <IconButton
diff --git a/invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx b/invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx
index 7819fdbee6..314616da59 100644
--- a/invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx
@@ -11,9 +11,7 @@ const invoke = 'Invoke';
 
 export const InvokeQueueBackButton = memo(() => {
   const { queueBack, isLoading, isDisabled } = useQueueBack();
-  const isLoadingDynamicPrompts = useAppSelector(
-    (s) => s.dynamicPrompts.isLoading
-  );
+  const isLoadingDynamicPrompts = useAppSelector((s) => s.dynamicPrompts.isLoading);
 
   return (
     <Flex pos="relative" flexGrow={1} minW="240px">
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx b/invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx
index 421a070b2f..37b6318a53 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx
@@ -31,13 +31,10 @@ export const QueueActionsMenuButton = memo(() => {
   const isResumeEnabled = useFeatureStatus('resumeQueue').isFeatureEnabled;
   const { queueSize } = useGetQueueStatusQuery(undefined, {
     selectFromResult: (res) => ({
-      queueSize: res.data
-        ? res.data.queue.pending + res.data.queue.in_progress
-        : 0,
+      queueSize: res.data ? res.data.queue.pending + res.data.queue.in_progress : 0,
     }),
   });
-  const { isLoading: isLoadingClearQueue, isDisabled: isDisabledClearQueue } =
-    useClearQueue();
+  const { isLoading: isLoadingClearQueue, isDisabled: isDisabledClearQueue } = useClearQueue();
   const {
     resumeProcessor,
     isLoading: isLoadingResumeProcessor,
@@ -56,17 +53,8 @@ export const QueueActionsMenuButton = memo(() => {
     <Box pos="relative">
       <ClearQueueConfirmationAlertDialog disclosure={clearQueueDisclosure} />
 
-      <Menu
-        isOpen={isOpen}
-        onOpen={onOpen}
-        onClose={onClose}
-        placement="bottom-end"
-      >
-        <MenuButton
-          as={IconButton}
-          aria-label="Queue Actions Menu"
-          icon={<RiListCheck />}
-        />
+      <Menu isOpen={isOpen} onOpen={onOpen} onClose={onClose} placement="bottom-end">
+        <MenuButton as={IconButton} aria-label="Queue Actions Menu" icon={<RiListCheck />} />
         <MenuList>
           <MenuItem
             isDestructive
@@ -104,13 +92,7 @@ export const QueueActionsMenuButton = memo(() => {
         </MenuList>
       </Menu>
       {queueSize > 0 && (
-        <Badge
-          pos="absolute"
-          insetInlineStart={-3}
-          insetBlockStart={-1.5}
-          colorScheme="invokeYellow"
-          zIndex="docked"
-        >
+        <Badge pos="absolute" insetInlineStart={-3} insetBlockStart={-1.5} colorScheme="invokeYellow" zIndex="docked">
           {queueSize}
         </Badge>
       )}
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx b/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx
index e34a096ae1..5d1b7264ea 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx
@@ -1,10 +1,4 @@
-import {
-  Divider,
-  Flex,
-  ListItem,
-  Text,
-  UnorderedList,
-} from '@invoke-ai/ui-library';
+import { Divider, Flex, ListItem, Text, UnorderedList } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useIsReadyToEnqueue } from 'common/hooks/useIsReadyToEnqueue';
@@ -20,9 +14,7 @@ const selectPromptsCount = createSelector(
   selectGenerationSlice,
   selectDynamicPromptsSlice,
   (generation, dynamicPrompts) =>
-    getShouldProcessPrompt(generation.positivePrompt)
-      ? dynamicPrompts.prompts.length
-      : 1
+    getShouldProcessPrompt(generation.positivePrompt) ? dynamicPrompts.prompts.length : 1
 );
 
 type Props = {
@@ -32,9 +24,7 @@ type Props = {
 export const QueueButtonTooltip = memo(({ prepend = false }: Props) => {
   const { t } = useTranslation();
   const { isReady, reasons } = useIsReadyToEnqueue();
-  const isLoadingDynamicPrompts = useAppSelector(
-    (s) => s.dynamicPrompts.isLoading
-  );
+  const isLoadingDynamicPrompts = useAppSelector((s) => s.dynamicPrompts.isLoading);
   const promptsCount = useAppSelector(selectPromptsCount);
   const iterations = useAppSelector((s) => s.generation.iterations);
   const autoAddBoardId = useAppSelector((s) => s.gallery.autoAddBoardId);
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueControls.tsx b/invokeai/frontend/web/src/features/queue/components/QueueControls.tsx
index 13946b87c1..044ccc30a1 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueControls.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueControls.tsx
@@ -11,14 +11,7 @@ import { QueueActionsMenuButton } from './QueueActionsMenuButton';
 const QueueControls = () => {
   const isPrependEnabled = useFeatureStatus('prependQueue').isFeatureEnabled;
   return (
-    <Flex
-      w="full"
-      position="relative"
-      borderRadius="base"
-      gap={2}
-      pt={2}
-      flexDir="column"
-    >
+    <Flex w="full" position="relative" borderRadius="base" gap={2} pt={2} flexDir="column">
       <ButtonGroup size="lg" isAttached={false}>
         {isPrependEnabled && <QueueFrontButton />}
         <InvokeQueueBackButton />
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx
index 2e08d36db9..3565ebc3d6 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx
@@ -1,11 +1,5 @@
 import type { ChakraProps, CollapseProps } from '@invoke-ai/ui-library';
-import {
-  ButtonGroup,
-  Collapse,
-  Flex,
-  IconButton,
-  Text,
-} from '@invoke-ai/ui-library';
+import { ButtonGroup, Collapse, Flex, IconButton, Text } from '@invoke-ai/ui-library';
 import QueueStatusBadge from 'features/queue/components/common/QueueStatusBadge';
 import { useCancelQueueItem } from 'features/queue/hooks/useCancelQueueItem';
 import { getSecondsFromTimestamps } from 'features/queue/util/getSecondsFromTimestamps';
@@ -45,26 +39,17 @@ const QueueItemComponent = ({ index, item, context }: InnerItemProps) => {
     },
     [cancelQueueItem]
   );
-  const isOpen = useMemo(
-    () => context.openQueueItems.includes(item.item_id),
-    [context.openQueueItems, item.item_id]
-  );
+  const isOpen = useMemo(() => context.openQueueItems.includes(item.item_id), [context.openQueueItems, item.item_id]);
 
   const executionTime = useMemo(() => {
     if (!item.completed_at || !item.started_at) {
       return;
     }
-    const seconds = getSecondsFromTimestamps(
-      item.started_at,
-      item.completed_at
-    );
+    const seconds = getSecondsFromTimestamps(item.started_at, item.completed_at);
     return `${seconds}s`;
   }, [item]);
 
-  const isCanceled = useMemo(
-    () => ['canceled', 'completed', 'failed'].includes(item.status),
-    [item.status]
-  );
+  const isCanceled = useMemo(() => ['canceled', 'completed', 'failed'].includes(item.status), [item.status]);
 
   const icon = useMemo(() => <PiXBold />, []);
   return (
@@ -77,20 +62,8 @@ const QueueItemComponent = ({ index, item, context }: InnerItemProps) => {
       sx={sx}
       data-testid="queue-item"
     >
-      <Flex
-        minH={9}
-        alignItems="center"
-        gap={4}
-        p={1.5}
-        cursor="pointer"
-        onClick={handleToggle}
-      >
-        <Flex
-          w={COLUMN_WIDTHS.number}
-          justifyContent="flex-end"
-          alignItems="center"
-          flexShrink={0}
-        >
+      <Flex minH={9} alignItems="center" gap={4} p={1.5} cursor="pointer" onClick={handleToggle}>
+        <Flex w={COLUMN_WIDTHS.number} justifyContent="flex-end" alignItems="center" flexShrink={0}>
           <Text variant="subtext">{index + 1}</Text>
         </Flex>
         <Flex w={COLUMN_WIDTHS.statusBadge} alignItems="center" flexShrink={0}>
@@ -100,31 +73,17 @@ const QueueItemComponent = ({ index, item, context }: InnerItemProps) => {
           {executionTime || '-'}
         </Flex>
         <Flex w={COLUMN_WIDTHS.batchId} flexShrink={0}>
-          <Text
-            overflow="hidden"
-            textOverflow="ellipsis"
-            whiteSpace="nowrap"
-            alignItems="center"
-          >
+          <Text overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" alignItems="center">
             {item.batch_id}
           </Text>
         </Flex>
         <Flex alignItems="center" overflow="hidden" flexGrow={1}>
           {item.field_values && (
-            <Flex
-              gap={2}
-              w="full"
-              whiteSpace="nowrap"
-              textOverflow="ellipsis"
-              overflow="hidden"
-            >
+            <Flex gap={2} w="full" whiteSpace="nowrap" textOverflow="ellipsis" overflow="hidden">
               {item.field_values
                 .filter((v) => v.node_path !== 'metadata_accumulator')
                 .map(({ node_path, field_name, value }) => (
-                  <Text
-                    as="span"
-                    key={`${item.item_id}.${node_path}.${field_name}.${value}`}
-                  >
+                  <Text as="span" key={`${item.item_id}.${node_path}.${field_name}.${value}`}>
                     <Text as="span" fontWeight="semibold">
                       {node_path}.{field_name}
                     </Text>
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx
index 98794d3c8d..a26a7d4360 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx
@@ -1,11 +1,4 @@
-import {
-  Button,
-  ButtonGroup,
-  Flex,
-  Heading,
-  Spinner,
-  Text,
-} from '@invoke-ai/ui-library';
+import { Button, ButtonGroup, Flex, Heading, Spinner, Text } from '@invoke-ai/ui-library';
 import DataViewer from 'features/gallery/components/ImageMetadataViewer/DataViewer';
 import { useCancelBatch } from 'features/queue/hooks/useCancelBatch';
 import { useCancelQueueItem } from 'features/queue/hooks/useCancelQueueItem';
@@ -24,14 +17,9 @@ type Props = {
 const QueueItemComponent = ({ queueItemDTO }: Props) => {
   const { session_id, batch_id, item_id } = queueItemDTO;
   const { t } = useTranslation();
-  const {
-    cancelBatch,
-    isLoading: isLoadingCancelBatch,
-    isCanceled,
-  } = useCancelBatch(batch_id);
+  const { cancelBatch, isLoading: isLoadingCancelBatch, isCanceled } = useCancelBatch(batch_id);
 
-  const { cancelQueueItem, isLoading: isLoadingCancelQueueItem } =
-    useCancelQueueItem(item_id);
+  const { cancelQueueItem, isLoading: isLoadingCancelQueueItem } = useCancelQueueItem(item_id);
 
   const { data: queueItem } = useGetQueueItemQuery(item_id);
 
@@ -42,10 +30,7 @@ const QueueItemComponent = ({ queueItemDTO }: Props) => {
     if (!queueItem.completed_at || !queueItem.started_at) {
       return t(`queue.${queueItem.status}`);
     }
-    const seconds = getSecondsFromTimestamps(
-      queueItem.started_at,
-      queueItem.completed_at
-    );
+    const seconds = getSecondsFromTimestamps(queueItem.started_at, queueItem.completed_at);
     if (queueItem.status === 'completed') {
       return `${t('queue.completedIn')} ${seconds}${seconds === 1 ? '' : 's'}`;
     }
@@ -53,14 +38,7 @@ const QueueItemComponent = ({ queueItemDTO }: Props) => {
   }, [queueItem, t]);
 
   return (
-    <Flex
-      layerStyle="third"
-      flexDir="column"
-      p={2}
-      pt={0}
-      borderRadius="base"
-      gap={2}
-    >
+    <Flex layerStyle="third" flexDir="column" p={2} pt={0} borderRadius="base" gap={2}>
       <Flex
         layerStyle="second"
         p={2}
@@ -78,11 +56,7 @@ const QueueItemComponent = ({ queueItemDTO }: Props) => {
           <Button
             onClick={cancelQueueItem}
             isLoading={isLoadingCancelQueueItem}
-            isDisabled={
-              queueItem
-                ? ['canceled', 'completed', 'failed'].includes(queueItem.status)
-                : true
-            }
+            isDisabled={queueItem ? ['canceled', 'completed', 'failed'].includes(queueItem.status) : true}
             aria-label={t('queue.cancelItem')}
             leftIcon={<PiXBold />}
             colorScheme="error"
@@ -117,19 +91,8 @@ const QueueItemComponent = ({ queueItemDTO }: Props) => {
           <pre>{queueItem.error}</pre>
         </Flex>
       )}
-      <Flex
-        layerStyle="second"
-        h={512}
-        w="full"
-        borderRadius="base"
-        alignItems="center"
-        justifyContent="center"
-      >
-        {queueItem ? (
-          <DataViewer label="Queue Item" data={queueItem} />
-        ) : (
-          <Spinner opacity={0.5} />
-        )}
+      <Flex layerStyle="second" h={512} w="full" borderRadius="base" alignItems="center" justifyContent="center">
+        {queueItem ? <DataViewer label="Queue Item" data={queueItem} /> : <Spinner opacity={0.5} />}
       </Flex>
     </Flex>
   );
@@ -141,21 +104,8 @@ type QueueItemDataProps = { label: string; data: ReactNode };
 
 const QueueItemData = ({ label, data }: QueueItemDataProps) => {
   return (
-    <Flex
-      flexDir="column"
-      justifyContent="flex-start"
-      p={1}
-      gap={1}
-      overflow="hidden"
-      h="full"
-      w="full"
-    >
-      <Heading
-        size="md"
-        overflow="hidden"
-        textOverflow="ellipsis"
-        whiteSpace="nowrap"
-      >
+    <Flex flexDir="column" justifyContent="flex-start" p={1} gap={1} overflow="hidden" h="full" w="full">
+      <Heading size="md" overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap">
         {label}
       </Heading>
       <Text overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap">
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueList.tsx b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueList.tsx
index fa5b61cb5a..bda048d57a 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueList.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueList.tsx
@@ -2,19 +2,13 @@ import { Flex, Heading } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallbackWithSpinner } from 'common/components/IAIImageFallback';
 import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
-import {
-  listCursorChanged,
-  listPriorityChanged,
-} from 'features/queue/store/queueSlice';
+import { listCursorChanged, listPriorityChanged } from 'features/queue/store/queueSlice';
 import { useOverlayScrollbars } from 'overlayscrollbars-react';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { Components, ItemContent } from 'react-virtuoso';
 import { Virtuoso } from 'react-virtuoso';
-import {
-  queueItemsAdapterSelectors,
-  useListQueueItemsQuery,
-} from 'services/api/endpoints/queue';
+import { queueItemsAdapterSelectors, useListQueueItemsQuery } from 'services/api/endpoints/queue';
 import type { SessionQueueItemDTO } from 'services/api/types';
 
 import QueueItemComponent from './QueueItemComponent';
@@ -25,18 +19,15 @@ import type { ListContext } from './types';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type TableVirtuosoScrollerRef = (ref: HTMLElement | Window | null) => any;
 
-const computeItemKey = (index: number, item: SessionQueueItemDTO): number =>
-  item.item_id;
+const computeItemKey = (index: number, item: SessionQueueItemDTO): number => item.item_id;
 
 const components: Components<SessionQueueItemDTO, ListContext> = {
   List: QueueListComponent,
 };
 
-const itemContent: ItemContent<SessionQueueItemDTO, ListContext> = (
-  index,
-  item,
-  context
-) => <QueueItemComponent index={index} item={item} context={context} />;
+const itemContent: ItemContent<SessionQueueItemDTO, ListContext> = (index, item, context) => (
+  <QueueItemComponent index={index} item={item} context={context} />
+);
 
 const QueueList = () => {
   const listCursor = useAppSelector((s) => s.queue.listCursor);
@@ -44,9 +35,7 @@ const QueueList = () => {
   const dispatch = useAppDispatch();
   const rootRef = useRef<HTMLDivElement>(null);
   const [scroller, setScroller] = useState<HTMLElement | null>(null);
-  const [initialize, osInstance] = useOverlayScrollbars(
-    overlayScrollbarsParams
-  );
+  const [initialize, osInstance] = useOverlayScrollbars(overlayScrollbarsParams);
   const { t } = useTranslation();
 
   useEffect(() => {
@@ -97,10 +86,7 @@ const QueueList = () => {
     });
   }, []);
 
-  const context = useMemo<ListContext>(
-    () => ({ openQueueItems, toggleQueueItem }),
-    [openQueueItems, toggleQueueItem]
-  );
+  const context = useMemo<ListContext>(() => ({ openQueueItems, toggleQueueItem }), [openQueueItems, toggleQueueItem]);
 
   if (isLoading) {
     return <IAINoContentFallbackWithSpinner />;
@@ -117,13 +103,7 @@ const QueueList = () => {
   return (
     <Flex w="full" h="full" flexDir="column">
       <QueueListHeader />
-      <Flex
-        ref={rootRef}
-        w="full"
-        h="full"
-        alignItems="center"
-        justifyContent="center"
-      >
+      <Flex ref={rootRef} w="full" h="full" alignItems="center" justifyContent="center">
         <Virtuoso<SessionQueueItemDTO, ListContext>
           data={queueItems}
           endReached={handleLoadMore}
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueListComponent.tsx b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueListComponent.tsx
index c76caeca12..456833674d 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueListComponent.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueListComponent.tsx
@@ -5,15 +5,14 @@ import type { SessionQueueItemDTO } from 'services/api/types';
 
 import type { ListContext } from './types';
 
-const QueueListComponent: Components<SessionQueueItemDTO, ListContext>['List'] =
-  memo(
-    forwardRef((props, ref) => {
-      return (
-        <Flex {...props} ref={ref} flexDirection="column" gap={0.5}>
-          {props.children}
-        </Flex>
-      );
-    })
-  );
+const QueueListComponent: Components<SessionQueueItemDTO, ListContext>['List'] = memo(
+  forwardRef((props, ref) => {
+    return (
+      <Flex {...props} ref={ref} flexDirection="column" gap={0.5}>
+        {props.children}
+      </Flex>
+    );
+  })
+);
 
 export default memo(QueueListComponent);
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueListHeader.tsx b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueListHeader.tsx
index d025dafde9..15be90b748 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueListHeader.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueListHeader.tsx
@@ -16,11 +16,7 @@ const QueueListHeader = () => {
       fontSize="sm"
       letterSpacing={1}
     >
-      <Flex
-        w={COLUMN_WIDTHS.number}
-        justifyContent="flex-end"
-        alignItems="center"
-      >
+      <Flex w={COLUMN_WIDTHS.number} justifyContent="flex-end" alignItems="center">
         <Text variant="subtext">#</Text>
       </Flex>
       <Flex ps={0.5} w={COLUMN_WIDTHS.statusBadge} alignItems="center">
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueStatus.tsx b/invokeai/frontend/web/src/features/queue/components/QueueStatus.tsx
index e39c211279..769a30e5bb 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueStatus.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueStatus.tsx
@@ -10,30 +10,12 @@ const QueueStatus = () => {
   const { t } = useTranslation();
   return (
     <StatusStatGroup data-testid="queue-status">
-      <StatusStatItem
-        label={t('queue.in_progress')}
-        value={queueStatus?.queue.in_progress ?? 0}
-      />
-      <StatusStatItem
-        label={t('queue.pending')}
-        value={queueStatus?.queue.pending ?? 0}
-      />
-      <StatusStatItem
-        label={t('queue.completed')}
-        value={queueStatus?.queue.completed ?? 0}
-      />
-      <StatusStatItem
-        label={t('queue.failed')}
-        value={queueStatus?.queue.failed ?? 0}
-      />
-      <StatusStatItem
-        label={t('queue.canceled')}
-        value={queueStatus?.queue.canceled ?? 0}
-      />
-      <StatusStatItem
-        label={t('queue.total')}
-        value={queueStatus?.queue.total ?? 0}
-      />
+      <StatusStatItem label={t('queue.in_progress')} value={queueStatus?.queue.in_progress ?? 0} />
+      <StatusStatItem label={t('queue.pending')} value={queueStatus?.queue.pending ?? 0} />
+      <StatusStatItem label={t('queue.completed')} value={queueStatus?.queue.completed ?? 0} />
+      <StatusStatItem label={t('queue.failed')} value={queueStatus?.queue.failed ?? 0} />
+      <StatusStatItem label={t('queue.canceled')} value={queueStatus?.queue.canceled ?? 0} />
+      <StatusStatItem label={t('queue.total')} value={queueStatus?.queue.total ?? 0} />
     </StatusStatGroup>
   );
 };
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueTabContent.tsx b/invokeai/frontend/web/src/features/queue/components/QueueTabContent.tsx
index 7f4f9b95b7..d7c27d54fc 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueTabContent.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueTabContent.tsx
@@ -8,8 +8,7 @@ import QueueStatus from './QueueStatus';
 import QueueTabQueueControls from './QueueTabQueueControls';
 
 const QueueTabContent = () => {
-  const isInvocationCacheEnabled =
-    useFeatureStatus('invocationCache').isFeatureEnabled;
+  const isInvocationCacheEnabled = useFeatureStatus('invocationCache').isFeatureEnabled;
 
   return (
     <Flex borderRadius="base" w="full" h="full" flexDir="column" gap={2}>
diff --git a/invokeai/frontend/web/src/features/queue/components/ToggleInvocationCacheButton.tsx b/invokeai/frontend/web/src/features/queue/components/ToggleInvocationCacheButton.tsx
index f25696257f..1720e6a69d 100644
--- a/invokeai/frontend/web/src/features/queue/components/ToggleInvocationCacheButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/ToggleInvocationCacheButton.tsx
@@ -23,22 +23,14 @@ const ToggleInvocationCacheButton = () => {
 
   if (cacheStatus?.enabled) {
     return (
-      <Button
-        isDisabled={isDisableDisabled}
-        isLoading={isDisableLoading}
-        onClick={disableInvocationCache}
-      >
+      <Button isDisabled={isDisableDisabled} isLoading={isDisableLoading} onClick={disableInvocationCache}>
         {t('invocationCache.disable')}
       </Button>
     );
   }
 
   return (
-    <Button
-      isDisabled={isEnableDisabled}
-      isLoading={isEnableLoading}
-      onClick={enableInvocationCache}
-    >
+    <Button isDisabled={isEnableDisabled} isLoading={isEnableLoading} onClick={enableInvocationCache}>
       {t('invocationCache.enable')}
     </Button>
   );
diff --git a/invokeai/frontend/web/src/features/queue/components/common/QueueStatusBadge.tsx b/invokeai/frontend/web/src/features/queue/components/common/QueueStatusBadge.tsx
index 9bea1b4581..09924c6cfd 100644
--- a/invokeai/frontend/web/src/features/queue/components/common/QueueStatusBadge.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/common/QueueStatusBadge.tsx
@@ -13,10 +13,6 @@ const STATUSES = {
 
 const StatusBadge = ({ status }: { status: SessionQueueItemStatus }) => {
   const { t } = useTranslation();
-  return (
-    <Badge colorScheme={STATUSES[status].colorScheme}>
-      {t(STATUSES[status].translationKey)}
-    </Badge>
-  );
+  return <Badge colorScheme={STATUSES[status].colorScheme}>{t(STATUSES[status].translationKey)}</Badge>;
 };
 export default memo(StatusBadge);
diff --git a/invokeai/frontend/web/src/features/queue/components/common/StatusStatItem.tsx b/invokeai/frontend/web/src/features/queue/components/common/StatusStatItem.tsx
index 90413640c1..0c0cd839b6 100644
--- a/invokeai/frontend/web/src/features/queue/components/common/StatusStatItem.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/common/StatusStatItem.tsx
@@ -14,12 +14,7 @@ type Props = Omit<StatProps, 'children'> & {
   isDisabled?: boolean;
 };
 
-const StatusStatItem = ({
-  label,
-  value,
-  isDisabled = false,
-  ...rest
-}: Props) => (
+const StatusStatItem = ({ label, value, isDisabled = false, ...rest }: Props) => (
   <Stat
     flexGrow={1}
     textOverflow="ellipsis"
diff --git a/invokeai/frontend/web/src/features/queue/hooks/useCancelBatch.ts b/invokeai/frontend/web/src/features/queue/hooks/useCancelBatch.ts
index b0a565d20e..8600525dae 100644
--- a/invokeai/frontend/web/src/features/queue/hooks/useCancelBatch.ts
+++ b/invokeai/frontend/web/src/features/queue/hooks/useCancelBatch.ts
@@ -2,10 +2,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { addToast } from 'features/system/store/systemSlice';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  useCancelByBatchIdsMutation,
-  useGetBatchStatusQuery,
-} from 'services/api/endpoints/queue';
+import { useCancelByBatchIdsMutation, useGetBatchStatusQuery } from 'services/api/endpoints/queue';
 
 export const useCancelBatch = (batch_id: string) => {
   const isConnected = useAppSelector((s) => s.system.isConnected);
diff --git a/invokeai/frontend/web/src/features/queue/hooks/useCancelCurrentQueueItem.ts b/invokeai/frontend/web/src/features/queue/hooks/useCancelCurrentQueueItem.ts
index 9e4b1cd4ab..a0275076e3 100644
--- a/invokeai/frontend/web/src/features/queue/hooks/useCancelCurrentQueueItem.ts
+++ b/invokeai/frontend/web/src/features/queue/hooks/useCancelCurrentQueueItem.ts
@@ -3,10 +3,7 @@ import { addToast } from 'features/system/store/systemSlice';
 import { isNil } from 'lodash-es';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  useCancelQueueItemMutation,
-  useGetQueueStatusQuery,
-} from 'services/api/endpoints/queue';
+import { useCancelQueueItemMutation, useGetQueueStatusQuery } from 'services/api/endpoints/queue';
 
 export const useCancelCurrentQueueItem = () => {
   const isConnected = useAppSelector((s) => s.system.isConnected);
@@ -14,10 +11,7 @@ export const useCancelCurrentQueueItem = () => {
   const [trigger, { isLoading }] = useCancelQueueItemMutation();
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
-  const currentQueueItemId = useMemo(
-    () => queueStatus?.queue.item_id,
-    [queueStatus?.queue.item_id]
-  );
+  const currentQueueItemId = useMemo(() => queueStatus?.queue.item_id, [queueStatus?.queue.item_id]);
   const cancelQueueItem = useCallback(async () => {
     if (!currentQueueItemId) {
       return;
@@ -40,10 +34,7 @@ export const useCancelCurrentQueueItem = () => {
     }
   }, [currentQueueItemId, dispatch, t, trigger]);
 
-  const isDisabled = useMemo(
-    () => !isConnected || isNil(currentQueueItemId),
-    [isConnected, currentQueueItemId]
-  );
+  const isDisabled = useMemo(() => !isConnected || isNil(currentQueueItemId), [isConnected, currentQueueItemId]);
 
   return {
     cancelQueueItem,
diff --git a/invokeai/frontend/web/src/features/queue/hooks/useClearInvocationCache.ts b/invokeai/frontend/web/src/features/queue/hooks/useClearInvocationCache.ts
index 468864d765..34b46d79b4 100644
--- a/invokeai/frontend/web/src/features/queue/hooks/useClearInvocationCache.ts
+++ b/invokeai/frontend/web/src/features/queue/hooks/useClearInvocationCache.ts
@@ -2,10 +2,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { addToast } from 'features/system/store/systemSlice';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  useClearInvocationCacheMutation,
-  useGetInvocationCacheStatusQuery,
-} from 'services/api/endpoints/appInfo';
+import { useClearInvocationCacheMutation, useGetInvocationCacheStatusQuery } from 'services/api/endpoints/appInfo';
 
 export const useClearInvocationCache = () => {
   const { t } = useTranslation();
@@ -16,10 +13,7 @@ export const useClearInvocationCache = () => {
     fixedCacheKey: 'clearInvocationCache',
   });
 
-  const isDisabled = useMemo(
-    () => !cacheStatus?.size || !isConnected,
-    [cacheStatus?.size, isConnected]
-  );
+  const isDisabled = useMemo(() => !cacheStatus?.size || !isConnected, [cacheStatus?.size, isConnected]);
 
   const clearInvocationCache = useCallback(async () => {
     if (isDisabled) {
diff --git a/invokeai/frontend/web/src/features/queue/hooks/useClearQueue.ts b/invokeai/frontend/web/src/features/queue/hooks/useClearQueue.ts
index 19a01f8b50..0ca2528dab 100644
--- a/invokeai/frontend/web/src/features/queue/hooks/useClearQueue.ts
+++ b/invokeai/frontend/web/src/features/queue/hooks/useClearQueue.ts
@@ -1,15 +1,9 @@
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import {
-  listCursorChanged,
-  listPriorityChanged,
-} from 'features/queue/store/queueSlice';
+import { listCursorChanged, listPriorityChanged } from 'features/queue/store/queueSlice';
 import { addToast } from 'features/system/store/systemSlice';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  useClearQueueMutation,
-  useGetQueueStatusQuery,
-} from 'services/api/endpoints/queue';
+import { useClearQueueMutation, useGetQueueStatusQuery } from 'services/api/endpoints/queue';
 
 export const useClearQueue = () => {
   const { t } = useTranslation();
@@ -45,10 +39,7 @@ export const useClearQueue = () => {
     }
   }, [queueStatus?.queue.total, trigger, dispatch, t]);
 
-  const isDisabled = useMemo(
-    () => !isConnected || !queueStatus?.queue.total,
-    [isConnected, queueStatus?.queue.total]
-  );
+  const isDisabled = useMemo(() => !isConnected || !queueStatus?.queue.total, [isConnected, queueStatus?.queue.total]);
 
   return { clearQueue, isLoading, queueStatus, isDisabled };
 };
diff --git a/invokeai/frontend/web/src/features/queue/hooks/useDisableInvocationCache.ts b/invokeai/frontend/web/src/features/queue/hooks/useDisableInvocationCache.ts
index 62e7e689be..c7d5a575d2 100644
--- a/invokeai/frontend/web/src/features/queue/hooks/useDisableInvocationCache.ts
+++ b/invokeai/frontend/web/src/features/queue/hooks/useDisableInvocationCache.ts
@@ -2,10 +2,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { addToast } from 'features/system/store/systemSlice';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  useDisableInvocationCacheMutation,
-  useGetInvocationCacheStatusQuery,
-} from 'services/api/endpoints/appInfo';
+import { useDisableInvocationCacheMutation, useGetInvocationCacheStatusQuery } from 'services/api/endpoints/appInfo';
 
 export const useDisableInvocationCache = () => {
   const { t } = useTranslation();
diff --git a/invokeai/frontend/web/src/features/queue/hooks/useEnableInvocationCache.ts b/invokeai/frontend/web/src/features/queue/hooks/useEnableInvocationCache.ts
index 31b1fc6e04..22bb7aa97d 100644
--- a/invokeai/frontend/web/src/features/queue/hooks/useEnableInvocationCache.ts
+++ b/invokeai/frontend/web/src/features/queue/hooks/useEnableInvocationCache.ts
@@ -2,10 +2,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { addToast } from 'features/system/store/systemSlice';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  useEnableInvocationCacheMutation,
-  useGetInvocationCacheStatusQuery,
-} from 'services/api/endpoints/appInfo';
+import { useEnableInvocationCacheMutation, useGetInvocationCacheStatusQuery } from 'services/api/endpoints/appInfo';
 
 export const useEnableInvocationCache = () => {
   const { t } = useTranslation();
diff --git a/invokeai/frontend/web/src/features/queue/hooks/useIsQueueMutationInProgress.ts b/invokeai/frontend/web/src/features/queue/hooks/useIsQueueMutationInProgress.ts
index 7fbd815696..302a2cb2c0 100644
--- a/invokeai/frontend/web/src/features/queue/hooks/useIsQueueMutationInProgress.ts
+++ b/invokeai/frontend/web/src/features/queue/hooks/useIsQueueMutationInProgress.ts
@@ -9,30 +9,24 @@ import {
 } from 'services/api/endpoints/queue';
 
 export const useIsQueueMutationInProgress = () => {
-  const [_triggerEnqueueBatch, { isLoading: isLoadingEnqueueBatch }] =
-    useEnqueueBatchMutation({
-      fixedCacheKey: 'enqueueBatch',
-    });
-  const [_triggerResumeProcessor, { isLoading: isLoadingResumeProcessor }] =
-    useResumeProcessorMutation({
-      fixedCacheKey: 'resumeProcessor',
-    });
-  const [_triggerPauseProcessor, { isLoading: isLoadingPauseProcessor }] =
-    usePauseProcessorMutation({
-      fixedCacheKey: 'pauseProcessor',
-    });
-  const [_triggerCancelQueue, { isLoading: isLoadingCancelQueue }] =
-    useCancelQueueItemMutation({
-      fixedCacheKey: 'cancelQueueItem',
-    });
-  const [_triggerClearQueue, { isLoading: isLoadingClearQueue }] =
-    useClearQueueMutation({
-      fixedCacheKey: 'clearQueue',
-    });
-  const [_triggerPruneQueue, { isLoading: isLoadingPruneQueue }] =
-    usePruneQueueMutation({
-      fixedCacheKey: 'pruneQueue',
-    });
+  const [_triggerEnqueueBatch, { isLoading: isLoadingEnqueueBatch }] = useEnqueueBatchMutation({
+    fixedCacheKey: 'enqueueBatch',
+  });
+  const [_triggerResumeProcessor, { isLoading: isLoadingResumeProcessor }] = useResumeProcessorMutation({
+    fixedCacheKey: 'resumeProcessor',
+  });
+  const [_triggerPauseProcessor, { isLoading: isLoadingPauseProcessor }] = usePauseProcessorMutation({
+    fixedCacheKey: 'pauseProcessor',
+  });
+  const [_triggerCancelQueue, { isLoading: isLoadingCancelQueue }] = useCancelQueueItemMutation({
+    fixedCacheKey: 'cancelQueueItem',
+  });
+  const [_triggerClearQueue, { isLoading: isLoadingClearQueue }] = useClearQueueMutation({
+    fixedCacheKey: 'clearQueue',
+  });
+  const [_triggerPruneQueue, { isLoading: isLoadingPruneQueue }] = usePruneQueueMutation({
+    fixedCacheKey: 'pruneQueue',
+  });
   // const [_triggerCancelByBatchIds, { isLoading: isLoadingCancelByBatchIds }] =
   //   useCancelByBatchIdsMutation({
   //     fixedCacheKey: 'cancelByBatchIds',
diff --git a/invokeai/frontend/web/src/features/queue/hooks/usePauseProcessor.ts b/invokeai/frontend/web/src/features/queue/hooks/usePauseProcessor.ts
index 784b5f81d6..25c3423bcf 100644
--- a/invokeai/frontend/web/src/features/queue/hooks/usePauseProcessor.ts
+++ b/invokeai/frontend/web/src/features/queue/hooks/usePauseProcessor.ts
@@ -2,10 +2,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { addToast } from 'features/system/store/systemSlice';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  useGetQueueStatusQuery,
-  usePauseProcessorMutation,
-} from 'services/api/endpoints/queue';
+import { useGetQueueStatusQuery, usePauseProcessorMutation } from 'services/api/endpoints/queue';
 
 export const usePauseProcessor = () => {
   const dispatch = useAppDispatch();
@@ -16,10 +13,7 @@ export const usePauseProcessor = () => {
     fixedCacheKey: 'pauseProcessor',
   });
 
-  const isStarted = useMemo(
-    () => Boolean(queueStatus?.processor.is_started),
-    [queueStatus?.processor.is_started]
-  );
+  const isStarted = useMemo(() => Boolean(queueStatus?.processor.is_started), [queueStatus?.processor.is_started]);
 
   const pauseProcessor = useCallback(async () => {
     if (!isStarted) {
@@ -43,10 +37,7 @@ export const usePauseProcessor = () => {
     }
   }, [isStarted, trigger, dispatch, t]);
 
-  const isDisabled = useMemo(
-    () => !isConnected || !isStarted,
-    [isConnected, isStarted]
-  );
+  const isDisabled = useMemo(() => !isConnected || !isStarted, [isConnected, isStarted]);
 
   return { pauseProcessor, isLoading, isStarted, isDisabled };
 };
diff --git a/invokeai/frontend/web/src/features/queue/hooks/usePruneQueue.ts b/invokeai/frontend/web/src/features/queue/hooks/usePruneQueue.ts
index e499a29a20..2cfec364fa 100644
--- a/invokeai/frontend/web/src/features/queue/hooks/usePruneQueue.ts
+++ b/invokeai/frontend/web/src/features/queue/hooks/usePruneQueue.ts
@@ -1,15 +1,9 @@
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import {
-  listCursorChanged,
-  listPriorityChanged,
-} from 'features/queue/store/queueSlice';
+import { listCursorChanged, listPriorityChanged } from 'features/queue/store/queueSlice';
 import { addToast } from 'features/system/store/systemSlice';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  useGetQueueStatusQuery,
-  usePruneQueueMutation,
-} from 'services/api/endpoints/queue';
+import { useGetQueueStatusQuery, usePruneQueueMutation } from 'services/api/endpoints/queue';
 
 export const usePruneQueue = () => {
   const dispatch = useAppDispatch();
@@ -25,8 +19,7 @@ export const usePruneQueue = () => {
       }
 
       return {
-        finishedCount:
-          data.queue.completed + data.queue.canceled + data.queue.failed,
+        finishedCount: data.queue.completed + data.queue.canceled + data.queue.failed,
       };
     },
   });
@@ -55,10 +48,7 @@ export const usePruneQueue = () => {
     }
   }, [finishedCount, trigger, dispatch, t]);
 
-  const isDisabled = useMemo(
-    () => !isConnected || !finishedCount,
-    [finishedCount, isConnected]
-  );
+  const isDisabled = useMemo(() => !isConnected || !finishedCount, [finishedCount, isConnected]);
 
   return { pruneQueue, isLoading, finishedCount, isDisabled };
 };
diff --git a/invokeai/frontend/web/src/features/queue/hooks/useResumeProcessor.ts b/invokeai/frontend/web/src/features/queue/hooks/useResumeProcessor.ts
index 89029267ca..6e3ea83d7d 100644
--- a/invokeai/frontend/web/src/features/queue/hooks/useResumeProcessor.ts
+++ b/invokeai/frontend/web/src/features/queue/hooks/useResumeProcessor.ts
@@ -2,10 +2,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { addToast } from 'features/system/store/systemSlice';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  useGetQueueStatusQuery,
-  useResumeProcessorMutation,
-} from 'services/api/endpoints/queue';
+import { useGetQueueStatusQuery, useResumeProcessorMutation } from 'services/api/endpoints/queue';
 
 export const useResumeProcessor = () => {
   const dispatch = useAppDispatch();
@@ -16,10 +13,7 @@ export const useResumeProcessor = () => {
     fixedCacheKey: 'resumeProcessor',
   });
 
-  const isStarted = useMemo(
-    () => Boolean(queueStatus?.processor.is_started),
-    [queueStatus?.processor.is_started]
-  );
+  const isStarted = useMemo(() => Boolean(queueStatus?.processor.is_started), [queueStatus?.processor.is_started]);
 
   const resumeProcessor = useCallback(async () => {
     if (isStarted) {
@@ -43,10 +37,7 @@ export const useResumeProcessor = () => {
     }
   }, [isStarted, trigger, dispatch, t]);
 
-  const isDisabled = useMemo(
-    () => !isConnected || isStarted,
-    [isConnected, isStarted]
-  );
+  const isDisabled = useMemo(() => !isConnected || isStarted, [isConnected, isStarted]);
 
   return { resumeProcessor, isLoading, isStarted, isDisabled };
 };
diff --git a/invokeai/frontend/web/src/features/queue/store/queueSlice.ts b/invokeai/frontend/web/src/features/queue/store/queueSlice.ts
index 461ae72dfe..43baa57bb2 100644
--- a/invokeai/frontend/web/src/features/queue/store/queueSlice.ts
+++ b/invokeai/frontend/web/src/features/queue/store/queueSlice.ts
@@ -32,20 +32,14 @@ export const queueSlice = createSlice({
       state.listCursor = undefined;
       state.listPriority = undefined;
     },
-    queueItemSelectionToggled: (
-      state,
-      action: PayloadAction<string | undefined>
-    ) => {
+    queueItemSelectionToggled: (state, action: PayloadAction<string | undefined>) => {
       if (state.selectedQueueItem === action.payload) {
         state.selectedQueueItem = undefined;
       } else {
         state.selectedQueueItem = action.payload;
       }
     },
-    resumeProcessorOnEnqueueChanged: (
-      state,
-      action: PayloadAction<boolean>
-    ) => {
+    resumeProcessorOnEnqueueChanged: (state, action: PayloadAction<boolean>) => {
       state.resumeProcessorOnEnqueue = action.payload;
     },
   },
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx
index dca1f2b48d..d0feac4e85 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx
@@ -20,15 +20,7 @@ export const ParamSDXLNegativeStylePrompt = memo(() => {
     },
     [dispatch]
   );
-  const {
-    onChange,
-    isOpen,
-    onClose,
-    onOpen,
-    onSelectEmbedding,
-    onKeyDown,
-    onFocus,
-  } = usePrompt({
+  const { onChange, isOpen, onClose, onOpen, onSelectEmbedding, onKeyDown, onFocus } = usePrompt({
     prompt,
     textareaRef: textareaRef,
     onChange: handleChange,
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx
index 183a9da038..9967fac8e1 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx
@@ -19,12 +19,11 @@ export const ParamSDXLPositiveStylePrompt = memo(() => {
     },
     [dispatch]
   );
-  const { onChange, isOpen, onClose, onOpen, onSelectEmbedding, onKeyDown } =
-    usePrompt({
-      prompt,
-      textareaRef: textareaRef,
-      onChange: handleChange,
-    });
+  const { onChange, isOpen, onClose, onOpen, onSelectEmbedding, onKeyDown } = usePrompt({
+    prompt,
+    textareaRef: textareaRef,
+    onChange: handleChange,
+  });
 
   return (
     <EmbeddingPopover
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLConcatButton.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLConcatButton.tsx
index fa7e7e723b..31df7d62d0 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLConcatButton.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLConcatButton.tsx
@@ -6,9 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { PiLinkSimpleBold, PiLinkSimpleBreakBold } from 'react-icons/pi';
 
 export const SDXLConcatButton = memo(() => {
-  const shouldConcatSDXLStylePrompt = useAppSelector(
-    (s) => s.sdxl.shouldConcatSDXLStylePrompt
-  );
+  const shouldConcatSDXLStylePrompt = useAppSelector((s) => s.sdxl.shouldConcatSDXLStylePrompt);
 
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
@@ -18,10 +16,7 @@ export const SDXLConcatButton = memo(() => {
   }, [dispatch, shouldConcatSDXLStylePrompt]);
 
   const label = useMemo(
-    () =>
-      shouldConcatSDXLStylePrompt
-        ? t('sdxl.concatPromptStyle')
-        : t('sdxl.freePromptStyle'),
+    () => (shouldConcatSDXLStylePrompt ? t('sdxl.concatPromptStyle') : t('sdxl.freePromptStyle')),
     [shouldConcatSDXLStylePrompt, t]
   );
 
@@ -30,13 +25,7 @@ export const SDXLConcatButton = memo(() => {
       <IconButton
         aria-label={label}
         onClick={handleShouldConcatPromptChange}
-        icon={
-          shouldConcatSDXLStylePrompt ? (
-            <PiLinkSimpleBold size={14} />
-          ) : (
-            <PiLinkSimpleBreakBold size={14} />
-          )
-        }
+        icon={shouldConcatSDXLStylePrompt ? <PiLinkSimpleBold size={14} /> : <PiLinkSimpleBreakBold size={14} />}
         variant="promptOverlay"
         fontSize={12}
         px={0.5}
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLPrompts.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLPrompts.tsx
index f8274d2b0f..4aca9a85a6 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLPrompts.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLPrompts.tsx
@@ -8,9 +8,7 @@ import { ParamSDXLNegativeStylePrompt } from './ParamSDXLNegativeStylePrompt';
 import { ParamSDXLPositiveStylePrompt } from './ParamSDXLPositiveStylePrompt';
 
 export const SDXLPrompts = memo(() => {
-  const shouldConcatSDXLStylePrompt = useAppSelector(
-    (s) => s.sdxl.shouldConcatSDXLStylePrompt
-  );
+  const shouldConcatSDXLStylePrompt = useAppSelector((s) => s.sdxl.shouldConcatSDXLStylePrompt);
   return (
     <Flex flexDir="column" gap={2} pos="relative">
       <ParamPositivePrompt />
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale.tsx
index 643bf51f8e..9f3bf33848 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale.tsx
@@ -1,9 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setRefinerCFGScale } from 'features/sdxl/store/sdxlSlice';
 import { memo, useCallback, useMemo } from 'react';
@@ -15,24 +10,14 @@ const ParamSDXLRefinerCFGScale = () => {
   const refinerCFGScale = useAppSelector((s) => s.sdxl.refinerCFGScale);
   const sliderMin = useAppSelector((s) => s.config.sd.guidance.sliderMin);
   const sliderMax = useAppSelector((s) => s.config.sd.guidance.sliderMax);
-  const numberInputMin = useAppSelector(
-    (s) => s.config.sd.guidance.numberInputMin
-  );
-  const numberInputMax = useAppSelector(
-    (s) => s.config.sd.guidance.numberInputMax
-  );
+  const numberInputMin = useAppSelector((s) => s.config.sd.guidance.numberInputMin);
+  const numberInputMax = useAppSelector((s) => s.config.sd.guidance.numberInputMax);
   const coarseStep = useAppSelector((s) => s.config.sd.guidance.coarseStep);
   const fineStep = useAppSelector((s) => s.config.sd.guidance.fineStep);
   const initial = useAppSelector((s) => s.config.sd.guidance.initial);
-  const marks = useMemo(
-    () => [sliderMin, Math.floor(sliderMax / 2), sliderMax],
-    [sliderMax, sliderMin]
-  );
+  const marks = useMemo(() => [sliderMin, Math.floor(sliderMax / 2), sliderMax], [sliderMax, sliderMin]);
 
-  const onChange = useCallback(
-    (v: number) => dispatch(setRefinerCFGScale(v)),
-    [dispatch]
-  );
+  const onChange = useCallback((v: number) => dispatch(setRefinerCFGScale(v)), [dispatch]);
 
   return (
     <FormControl>
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx
index 691fdf57a5..c19dc10fb5 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx
@@ -2,23 +2,16 @@ import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useModelCombobox } from 'common/hooks/useModelCombobox';
-import {
-  refinerModelChanged,
-  selectSdxlSlice,
-} from 'features/sdxl/store/sdxlSlice';
+import { refinerModelChanged, selectSdxlSlice } from 'features/sdxl/store/sdxlSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { REFINER_BASE_MODELS } from 'services/api/constants';
 import type { MainModelConfigEntity } from 'services/api/endpoints/models';
 import { useGetMainModelsQuery } from 'services/api/endpoints/models';
 
-const selectModel = createMemoizedSelector(
-  selectSdxlSlice,
-  (sdxl) => sdxl.refinerModel
-);
+const selectModel = createMemoizedSelector(selectSdxlSlice, (sdxl) => sdxl.refinerModel);
 
-const optionsFilter = (model: MainModelConfigEntity) =>
-  model.base_model === 'sdxl-refiner';
+const optionsFilter = (model: MainModelConfigEntity) => model.base_model === 'sdxl-refiner';
 
 const ParamSDXLRefinerModelSelect = () => {
   const dispatch = useAppDispatch();
@@ -41,14 +34,13 @@ const ParamSDXLRefinerModelSelect = () => {
     },
     [dispatch]
   );
-  const { options, value, onChange, placeholder, noOptionsMessage } =
-    useModelCombobox({
-      modelEntities: data,
-      onChange: _onChange,
-      selectedModel: model,
-      isLoading,
-      optionsFilter,
-    });
+  const { options, value, onChange, placeholder, noOptionsMessage } = useModelCombobox({
+    modelEntities: data,
+    onChange: _onChange,
+    selectedModel: model,
+    isLoading,
+    optionsFilter,
+  });
   return (
     <FormControl isDisabled={!options.length} isInvalid={!options.length}>
       <FormLabel>{t('sdxl.refinermodel')}</FormLabel>
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerNegativeAestheticScore.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerNegativeAestheticScore.tsx
index 5379553217..933043f843 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerNegativeAestheticScore.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerNegativeAestheticScore.tsx
@@ -1,26 +1,16 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setRefinerNegativeAestheticScore } from 'features/sdxl/store/sdxlSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const ParamSDXLRefinerNegativeAestheticScore = () => {
-  const refinerNegativeAestheticScore = useAppSelector(
-    (s) => s.sdxl.refinerNegativeAestheticScore
-  );
+  const refinerNegativeAestheticScore = useAppSelector((s) => s.sdxl.refinerNegativeAestheticScore);
 
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
-  const handleChange = useCallback(
-    (v: number) => dispatch(setRefinerNegativeAestheticScore(v)),
-    [dispatch]
-  );
+  const handleChange = useCallback((v: number) => dispatch(setRefinerNegativeAestheticScore(v)), [dispatch]);
 
   return (
     <FormControl>
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerPositiveAestheticScore.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerPositiveAestheticScore.tsx
index a65af5f75d..a170b1afb4 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerPositiveAestheticScore.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerPositiveAestheticScore.tsx
@@ -1,25 +1,15 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setRefinerPositiveAestheticScore } from 'features/sdxl/store/sdxlSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const ParamSDXLRefinerPositiveAestheticScore = () => {
-  const refinerPositiveAestheticScore = useAppSelector(
-    (s) => s.sdxl.refinerPositiveAestheticScore
-  );
+  const refinerPositiveAestheticScore = useAppSelector((s) => s.sdxl.refinerPositiveAestheticScore);
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
-  const handleChange = useCallback(
-    (v: number) => dispatch(setRefinerPositiveAestheticScore(v)),
-    [dispatch]
-  );
+  const handleChange = useCallback((v: number) => dispatch(setRefinerPositiveAestheticScore(v)), [dispatch]);
 
   return (
     <FormControl>
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerScheduler.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerScheduler.tsx
index c033880e63..196c4d3dfb 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerScheduler.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerScheduler.tsx
@@ -22,10 +22,7 @@ const ParamSDXLRefinerScheduler = () => {
     [dispatch]
   );
 
-  const value = useMemo(
-    () => SCHEDULER_OPTIONS.find((o) => o.value === refinerScheduler),
-    [refinerScheduler]
-  );
+  const value = useMemo(() => SCHEDULER_OPTIONS.find((o) => o.value === refinerScheduler), [refinerScheduler]);
 
   return (
     <FormControl>
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart.tsx
index efb2948e8c..c2eea5d925 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart.tsx
@@ -1,9 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setRefinerStart } from 'features/sdxl/store/sdxlSlice';
 import { memo, useCallback } from 'react';
@@ -12,10 +7,7 @@ import { useTranslation } from 'react-i18next';
 const ParamSDXLRefinerStart = () => {
   const refinerStart = useAppSelector((s) => s.sdxl.refinerStart);
   const dispatch = useAppDispatch();
-  const handleChange = useCallback(
-    (v: number) => dispatch(setRefinerStart(v)),
-    [dispatch]
-  );
+  const handleChange = useCallback((v: number) => dispatch(setRefinerStart(v)), [dispatch]);
   const { t } = useTranslation();
 
   return (
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerSteps.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerSteps.tsx
index 5fcb79ea39..5c4a885ecd 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerSteps.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerSteps.tsx
@@ -1,9 +1,4 @@
-import {
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setRefinerSteps } from 'features/sdxl/store/sdxlSlice';
 import { memo, useCallback, useMemo } from 'react';
@@ -16,19 +11,12 @@ const ParamSDXLRefinerSteps = () => {
   const initial = useAppSelector((s) => s.config.sd.steps.initial);
   const sliderMin = useAppSelector((s) => s.config.sd.steps.sliderMin);
   const sliderMax = useAppSelector((s) => s.config.sd.steps.sliderMax);
-  const numberInputMin = useAppSelector(
-    (s) => s.config.sd.steps.numberInputMin
-  );
-  const numberInputMax = useAppSelector(
-    (s) => s.config.sd.steps.numberInputMax
-  );
+  const numberInputMin = useAppSelector((s) => s.config.sd.steps.numberInputMin);
+  const numberInputMax = useAppSelector((s) => s.config.sd.steps.numberInputMax);
   const coarseStep = useAppSelector((s) => s.config.sd.steps.coarseStep);
   const fineStep = useAppSelector((s) => s.config.sd.steps.fineStep);
 
-  const marks = useMemo(
-    () => [sliderMin, Math.floor(sliderMax / 2), sliderMax],
-    [sliderMax, sliderMin]
-  );
+  const marks = useMemo(() => [sliderMin, Math.floor(sliderMax / 2), sliderMax], [sliderMax, sliderMin]);
 
   const onChange = useCallback(
     (v: number) => {
diff --git a/invokeai/frontend/web/src/features/sdxl/store/sdxlSlice.ts b/invokeai/frontend/web/src/features/sdxl/store/sdxlSlice.ts
index f401a48c94..a8f4b45359 100644
--- a/invokeai/frontend/web/src/features/sdxl/store/sdxlSlice.ts
+++ b/invokeai/frontend/web/src/features/sdxl/store/sdxlSlice.ts
@@ -49,10 +49,7 @@ const sdxlSlice = createSlice({
     setShouldConcatSDXLStylePrompt: (state, action: PayloadAction<boolean>) => {
       state.shouldConcatSDXLStylePrompt = action.payload;
     },
-    refinerModelChanged: (
-      state,
-      action: PayloadAction<ParameterSDXLRefinerModel | null>
-    ) => {
+    refinerModelChanged: (state, action: PayloadAction<ParameterSDXLRefinerModel | null>) => {
       state.refinerModel = action.payload;
     },
     setRefinerSteps: (state, action: PayloadAction<number>) => {
@@ -64,16 +61,10 @@ const sdxlSlice = createSlice({
     setRefinerScheduler: (state, action: PayloadAction<ParameterScheduler>) => {
       state.refinerScheduler = action.payload;
     },
-    setRefinerPositiveAestheticScore: (
-      state,
-      action: PayloadAction<number>
-    ) => {
+    setRefinerPositiveAestheticScore: (state, action: PayloadAction<number>) => {
       state.refinerPositiveAestheticScore = action.payload;
     },
-    setRefinerNegativeAestheticScore: (
-      state,
-      action: PayloadAction<number>
-    ) => {
+    setRefinerNegativeAestheticScore: (state, action: PayloadAction<number>) => {
       state.refinerNegativeAestheticScore = action.payload;
     },
     setRefinerStart: (state, action: PayloadAction<number>) => {
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx
index 637819ff9b..bceee915cd 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx
@@ -1,9 +1,5 @@
 import type { FormLabelProps } from '@invoke-ai/ui-library';
-import {
-  Flex,
-  FormControlGroup,
-  StandaloneAccordion,
-} from '@invoke-ai/ui-library';
+import { Flex, FormControlGroup, StandaloneAccordion } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import ParamCFGRescaleMultiplier from 'features/parameters/components/Advanced/ParamCFGRescaleMultiplier';
@@ -25,31 +21,28 @@ const formLabelProps2: FormLabelProps = {
   flexGrow: 1,
 };
 
-const selectBadges = createMemoizedSelector(
-  selectGenerationSlice,
-  (generation) => {
-    const badges: (string | number)[] = [];
-    if (generation.vae) {
-      let vaeBadge = generation.vae.model_name;
-      if (generation.vaePrecision === 'fp16') {
-        vaeBadge += ` ${generation.vaePrecision}`;
-      }
-      badges.push(vaeBadge);
-    } else if (generation.vaePrecision === 'fp16') {
-      badges.push(`VAE ${generation.vaePrecision}`);
+const selectBadges = createMemoizedSelector(selectGenerationSlice, (generation) => {
+  const badges: (string | number)[] = [];
+  if (generation.vae) {
+    let vaeBadge = generation.vae.model_name;
+    if (generation.vaePrecision === 'fp16') {
+      vaeBadge += ` ${generation.vaePrecision}`;
     }
-    if (generation.clipSkip) {
-      badges.push(`Skip ${generation.clipSkip}`);
-    }
-    if (generation.cfgRescaleMultiplier) {
-      badges.push(`Rescale ${generation.cfgRescaleMultiplier}`);
-    }
-    if (generation.seamlessXAxis || generation.seamlessYAxis) {
-      badges.push('seamless');
-    }
-    return badges;
+    badges.push(vaeBadge);
+  } else if (generation.vaePrecision === 'fp16') {
+    badges.push(`VAE ${generation.vaePrecision}`);
   }
-);
+  if (generation.clipSkip) {
+    badges.push(`Skip ${generation.clipSkip}`);
+  }
+  if (generation.cfgRescaleMultiplier) {
+    badges.push(`Rescale ${generation.cfgRescaleMultiplier}`);
+  }
+  if (generation.seamlessXAxis || generation.seamlessYAxis) {
+    badges.push('seamless');
+  }
+  return badges;
+});
 
 export const AdvancedSettingsAccordion = memo(() => {
   const badges = useAppSelector(selectBadges);
@@ -60,12 +53,7 @@ export const AdvancedSettingsAccordion = memo(() => {
   });
 
   return (
-    <StandaloneAccordion
-      label={t('accordions.advanced.title')}
-      badges={badges}
-      isOpen={isOpen}
-      onToggle={onToggle}
-    >
+    <StandaloneAccordion label={t('accordions.advanced.title')} badges={badges} isOpen={isOpen} onToggle={onToggle}>
       <Flex gap={4} alignItems="center" p={4} flexDir="column">
         <Flex gap={4} w="full">
           <ParamVAEModelSelect />
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/CompositingSettingsAccordion/CompositingSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/CompositingSettingsAccordion/CompositingSettingsAccordion.tsx
index 219255a440..30c7b361d9 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/CompositingSettingsAccordion/CompositingSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/components/CompositingSettingsAccordion/CompositingSettingsAccordion.tsx
@@ -32,11 +32,7 @@ export const CompositingSettingsAccordion = memo(() => {
   });
 
   return (
-    <StandaloneAccordion
-      isOpen={isOpen}
-      onToggle={onToggle}
-      label={t('accordions.compositing.title')}
-    >
+    <StandaloneAccordion isOpen={isOpen} onToggle={onToggle} label={t('accordions.compositing.title')}>
       <Tabs variant="collapse">
         <TabList>
           <Tab>{t('accordions.compositing.coherenceTab')}</Tab>
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/ControlSettingsAccordion/ControlSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/ControlSettingsAccordion/ControlSettingsAccordion.tsx
index 454d49d704..a02eadef36 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/ControlSettingsAccordion/ControlSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/components/ControlSettingsAccordion/ControlSettingsAccordion.tsx
@@ -1,10 +1,4 @@
-import {
-  Button,
-  ButtonGroup,
-  Divider,
-  Flex,
-  StandaloneAccordion,
-} from '@invoke-ai/ui-library';
+import { Button, ButtonGroup, Divider, Flex, StandaloneAccordion } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import ControlAdapterConfig from 'features/controlAdapters/components/ControlAdapterConfig';
@@ -25,54 +19,45 @@ import { Fragment, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiPlusBold } from 'react-icons/pi';
 
-const selector = createMemoizedSelector(
-  selectControlAdaptersSlice,
-  (controlAdapters) => {
-    const badges: string[] = [];
-    let isError = false;
+const selector = createMemoizedSelector(selectControlAdaptersSlice, (controlAdapters) => {
+  const badges: string[] = [];
+  let isError = false;
 
-    const enabledIPAdapterCount = selectAllIPAdapters(controlAdapters).filter(
-      (ca) => ca.isEnabled
-    ).length;
-    const validIPAdapterCount = selectValidIPAdapters(controlAdapters).length;
-    if (enabledIPAdapterCount > 0) {
-      badges.push(`${enabledIPAdapterCount} IP`);
-    }
-    if (enabledIPAdapterCount > validIPAdapterCount) {
-      isError = true;
-    }
-
-    const enabledControlNetCount = selectAllControlNets(controlAdapters).filter(
-      (ca) => ca.isEnabled
-    ).length;
-    const validControlNetCount = selectValidControlNets(controlAdapters).length;
-    if (enabledControlNetCount > 0) {
-      badges.push(`${enabledControlNetCount} ControlNet`);
-    }
-    if (enabledControlNetCount > validControlNetCount) {
-      isError = true;
-    }
-
-    const enabledT2IAdapterCount = selectAllT2IAdapters(controlAdapters).filter(
-      (ca) => ca.isEnabled
-    ).length;
-    const validT2IAdapterCount = selectValidT2IAdapters(controlAdapters).length;
-    if (enabledT2IAdapterCount > 0) {
-      badges.push(`${enabledT2IAdapterCount} T2I`);
-    }
-    if (enabledT2IAdapterCount > validT2IAdapterCount) {
-      isError = true;
-    }
-
-    const controlAdapterIds = selectControlAdapterIds(controlAdapters);
-
-    return {
-      controlAdapterIds,
-      badges,
-      isError, // TODO: Add some visual indicator that the control adapters are in an error state
-    };
+  const enabledIPAdapterCount = selectAllIPAdapters(controlAdapters).filter((ca) => ca.isEnabled).length;
+  const validIPAdapterCount = selectValidIPAdapters(controlAdapters).length;
+  if (enabledIPAdapterCount > 0) {
+    badges.push(`${enabledIPAdapterCount} IP`);
   }
-);
+  if (enabledIPAdapterCount > validIPAdapterCount) {
+    isError = true;
+  }
+
+  const enabledControlNetCount = selectAllControlNets(controlAdapters).filter((ca) => ca.isEnabled).length;
+  const validControlNetCount = selectValidControlNets(controlAdapters).length;
+  if (enabledControlNetCount > 0) {
+    badges.push(`${enabledControlNetCount} ControlNet`);
+  }
+  if (enabledControlNetCount > validControlNetCount) {
+    isError = true;
+  }
+
+  const enabledT2IAdapterCount = selectAllT2IAdapters(controlAdapters).filter((ca) => ca.isEnabled).length;
+  const validT2IAdapterCount = selectValidT2IAdapters(controlAdapters).length;
+  if (enabledT2IAdapterCount > 0) {
+    badges.push(`${enabledT2IAdapterCount} T2I`);
+  }
+  if (enabledT2IAdapterCount > validT2IAdapterCount) {
+    isError = true;
+  }
+
+  const controlAdapterIds = selectControlAdapterIds(controlAdapters);
+
+  return {
+    controlAdapterIds,
+    badges,
+    isError, // TODO: Add some visual indicator that the control adapters are in an error state
+  };
+});
 
 export const ControlSettingsAccordion: React.FC = memo(() => {
   const { t } = useTranslation();
@@ -82,32 +67,18 @@ export const ControlSettingsAccordion: React.FC = memo(() => {
     id: 'control-settings',
     defaultIsOpen: true,
   });
-  const [addControlNet, isAddControlNetDisabled] =
-    useAddControlAdapter('controlnet');
-  const [addIPAdapter, isAddIPAdapterDisabled] =
-    useAddControlAdapter('ip_adapter');
-  const [addT2IAdapter, isAddT2IAdapterDisabled] =
-    useAddControlAdapter('t2i_adapter');
+  const [addControlNet, isAddControlNetDisabled] = useAddControlAdapter('controlnet');
+  const [addIPAdapter, isAddIPAdapterDisabled] = useAddControlAdapter('ip_adapter');
+  const [addT2IAdapter, isAddT2IAdapterDisabled] = useAddControlAdapter('t2i_adapter');
 
   if (isControlNetDisabled) {
     return null;
   }
 
   return (
-    <StandaloneAccordion
-      label={t('accordions.control.title')}
-      badges={badges}
-      isOpen={isOpen}
-      onToggle={onToggle}
-    >
+    <StandaloneAccordion label={t('accordions.control.title')} badges={badges} isOpen={isOpen} onToggle={onToggle}>
       <Flex gap={2} p={4} flexDir="column">
-        <ButtonGroup
-          size="sm"
-          w="full"
-          justifyContent="space-between"
-          variant="ghost"
-          isAttached={false}
-        >
+        <ButtonGroup size="sm" w="full" justifyContent="space-between" variant="ghost" isAttached={false}>
           <Button
             tooltip={t('controlnet.addControlNet')}
             leftIcon={<PiPlusBold />}
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx
index 17427787d6..d641ea9929 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx
@@ -31,34 +31,28 @@ const formLabelProps: FormLabelProps = {
   minW: '4rem',
 };
 
-const badgesSelector = createMemoizedSelector(
-  selectLoraSlice,
-  selectGenerationSlice,
-  (lora, generation) => {
-    const loraTabBadges = size(lora.loras) ? [size(lora.loras)] : [];
-    const accordionBadges: (string | number)[] = [];
-    if (generation.model) {
-      accordionBadges.push(generation.model.model_name);
-      accordionBadges.push(generation.model.base_model);
-    }
-
-    return { loraTabBadges, accordionBadges };
+const badgesSelector = createMemoizedSelector(selectLoraSlice, selectGenerationSlice, (lora, generation) => {
+  const loraTabBadges = size(lora.loras) ? [size(lora.loras)] : [];
+  const accordionBadges: (string | number)[] = [];
+  if (generation.model) {
+    accordionBadges.push(generation.model.model_name);
+    accordionBadges.push(generation.model.base_model);
   }
-);
+
+  return { loraTabBadges, accordionBadges };
+});
 
 export const GenerationSettingsAccordion = memo(() => {
   const { t } = useTranslation();
   const { loraTabBadges, accordionBadges } = useAppSelector(badgesSelector);
-  const { isOpen: isOpenExpander, onToggle: onToggleExpander } =
-    useExpanderToggle({
-      id: 'generation-settings-advanced',
-      defaultIsOpen: false,
-    });
-  const { isOpen: isOpenAccordion, onToggle: onToggleAccordion } =
-    useStandaloneAccordionToggle({
-      id: 'generation-settings',
-      defaultIsOpen: true,
-    });
+  const { isOpen: isOpenExpander, onToggle: onToggleExpander } = useExpanderToggle({
+    id: 'generation-settings-advanced',
+    defaultIsOpen: false,
+  });
+  const { isOpen: isOpenAccordion, onToggle: onToggleAccordion } = useStandaloneAccordionToggle({
+    id: 'generation-settings',
+    defaultIsOpen: true,
+  });
 
   return (
     <StandaloneAccordion
@@ -70,9 +64,7 @@ export const GenerationSettingsAccordion = memo(() => {
       <Tabs variant="collapse">
         <TabList>
           <Tab>{t('accordions.generation.modelTab')}</Tab>
-          <Tab badges={loraTabBadges}>
-            {t('accordions.generation.conceptsTab')}
-          </Tab>
+          <Tab badges={loraTabBadges}>{t('accordions.generation.conceptsTab')}</Tab>
         </TabList>
         <TabPanels>
           <TabPanel overflow="visible" px={4} pt={4}>
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx
index 193032fd7f..4b5cc9c1d3 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx
@@ -1,10 +1,5 @@
 import type { FormLabelProps } from '@invoke-ai/ui-library';
-import {
-  Expander,
-  Flex,
-  FormControlGroup,
-  StandaloneAccordion,
-} from '@invoke-ai/ui-library';
+import { Expander, Flex, FormControlGroup, StandaloneAccordion } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
@@ -29,12 +24,7 @@ import { ImageSizeCanvas } from './ImageSizeCanvas';
 import { ImageSizeLinear } from './ImageSizeLinear';
 
 const selector = createMemoizedSelector(
-  [
-    selectGenerationSlice,
-    selectCanvasSlice,
-    selectHrfSlice,
-    activeTabNameSelector,
-  ],
+  [selectGenerationSlice, selectCanvasSlice, selectHrfSlice, activeTabNameSelector],
   (generation, canvas, hrf, activeTabName) => {
     const { shouldRandomizeSeed } = generation;
     const { hrfEnabled } = hrf;
@@ -77,10 +67,14 @@ const scalingLabelProps: FormLabelProps = {
 export const ImageSettingsAccordion = memo(() => {
   const { t } = useTranslation();
   const { badges, activeTabName } = useAppSelector(selector);
-  const { isOpen: isOpenAccordion, onToggle: onToggleAccordion } =
-    useStandaloneAccordionToggle({ id: 'image-settings', defaultIsOpen: true });
-  const { isOpen: isOpenExpander, onToggle: onToggleExpander } =
-    useExpanderToggle({ id: 'image-settings-advanced', defaultIsOpen: false });
+  const { isOpen: isOpenAccordion, onToggle: onToggleAccordion } = useStandaloneAccordionToggle({
+    id: 'image-settings',
+    defaultIsOpen: true,
+  });
+  const { isOpen: isOpenExpander, onToggle: onToggleExpander } = useExpanderToggle({
+    id: 'image-settings-advanced',
+    defaultIsOpen: false,
+  });
 
   return (
     <StandaloneAccordion
@@ -90,11 +84,7 @@ export const ImageSettingsAccordion = memo(() => {
       onToggle={onToggleAccordion}
     >
       <Flex px={4} pt={4} w="full" h="full" flexDir="column">
-        {activeTabName === 'unifiedCanvas' ? (
-          <ImageSizeCanvas />
-        ) : (
-          <ImageSizeLinear />
-        )}
+        {activeTabName === 'unifiedCanvas' ? <ImageSizeCanvas /> : <ImageSizeLinear />}
         <Expander isOpen={isOpenExpander} onToggle={onToggleExpander}>
           <Flex gap={4} pb={4} flexDir="column">
             <Flex gap={4} alignItems="center">
@@ -102,8 +92,7 @@ export const ImageSettingsAccordion = memo(() => {
               <ParamSeedShuffle />
               <ParamSeedRandomize />
             </Flex>
-            {(activeTabName === 'img2img' ||
-              activeTabName === 'unifiedCanvas') && <ImageToImageStrength />}
+            {(activeTabName === 'img2img' || activeTabName === 'unifiedCanvas') && <ImageToImageStrength />}
             {activeTabName === 'img2img' && <ImageToImageFit />}
             {activeTabName === 'txt2img' && <HrfSettings />}
             {activeTabName === 'unifiedCanvas' && (
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSizeCanvas.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSizeCanvas.tsx
index 327afacb94..eaf7b25730 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSizeCanvas.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSizeCanvas.tsx
@@ -1,8 +1,5 @@
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import {
-  aspectRatioChanged,
-  setBoundingBoxDimensions,
-} from 'features/canvas/store/canvasSlice';
+import { aspectRatioChanged, setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
 import ParamBoundingBoxHeight from 'features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxHeight';
 import ParamBoundingBoxWidth from 'features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxWidth';
 import { ImageSize } from 'features/parameters/components/ImageSize/ImageSize';
@@ -12,9 +9,7 @@ import { memo, useCallback } from 'react';
 
 export const ImageSizeCanvas = memo(() => {
   const dispatch = useAppDispatch();
-  const { width, height } = useAppSelector(
-    (s) => s.canvas.boundingBoxDimensions
-  );
+  const { width, height } = useAppSelector((s) => s.canvas.boundingBoxDimensions);
   const aspectRatioState = useAppSelector((s) => s.canvas.aspectRatio);
   const optimalDimension = useAppSelector(selectOptimalDimension);
 
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSizeLinear.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSizeLinear.tsx
index 0aee28ee31..9d5d2eb284 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSizeLinear.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSizeLinear.tsx
@@ -3,11 +3,7 @@ import { ParamHeight } from 'features/parameters/components/Core/ParamHeight';
 import { ParamWidth } from 'features/parameters/components/Core/ParamWidth';
 import { ImageSize } from 'features/parameters/components/ImageSize/ImageSize';
 import type { AspectRatioState } from 'features/parameters/components/ImageSize/types';
-import {
-  aspectRatioChanged,
-  heightChanged,
-  widthChanged,
-} from 'features/parameters/store/generationSlice';
+import { aspectRatioChanged, heightChanged, widthChanged } from 'features/parameters/store/generationSlice';
 import { memo, useCallback } from 'react';
 
 export const ImageSizeLinear = memo(() => {
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx
index fd1cc03cd9..bf5bdf13e4 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/components/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx
@@ -1,10 +1,5 @@
 import type { FormLabelProps } from '@invoke-ai/ui-library';
-import {
-  Flex,
-  FormControlGroup,
-  StandaloneAccordion,
-  Text,
-} from '@invoke-ai/ui-library';
+import { Flex, FormControlGroup, StandaloneAccordion, Text } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import ParamSDXLRefinerCFGScale from 'features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale';
@@ -29,9 +24,7 @@ const stepsScaleLabelProps: FormLabelProps = {
   minW: '5rem',
 };
 
-const selectBadges = createMemoizedSelector(selectSdxlSlice, (sdxl) =>
-  sdxl.refinerModel ? ['Enabled'] : undefined
-);
+const selectBadges = createMemoizedSelector(selectSdxlSlice, (sdxl) => (sdxl.refinerModel ? ['Enabled'] : undefined));
 
 export const RefinerSettingsAccordion: React.FC = memo(() => {
   const { t } = useTranslation();
@@ -43,17 +36,8 @@ export const RefinerSettingsAccordion: React.FC = memo(() => {
   });
 
   return (
-    <StandaloneAccordion
-      label={t('sdxl.refiner')}
-      badges={badges}
-      isOpen={isOpen}
-      onToggle={onToggle}
-    >
-      {isRefinerAvailable ? (
-        <RefinerSettingsAccordionContent />
-      ) : (
-        <RefinerSettingsAccordionNoRefiner />
-      )}
+    <StandaloneAccordion label={t('sdxl.refiner')} badges={badges} isOpen={isOpen} onToggle={onToggle}>
+      {isRefinerAvailable ? <RefinerSettingsAccordionContent /> : <RefinerSettingsAccordionNoRefiner />}
     </StandaloneAccordion>
   );
 });
@@ -71,31 +55,22 @@ const RefinerSettingsAccordionNoRefiner: React.FC = memo(() => {
   );
 });
 
-RefinerSettingsAccordionNoRefiner.displayName =
-  'RefinerSettingsAccordionNoRefiner';
+RefinerSettingsAccordionNoRefiner.displayName = 'RefinerSettingsAccordionNoRefiner';
 
 const RefinerSettingsAccordionContent: React.FC = memo(() => {
-  const isRefinerModelSelected = useAppSelector(
-    (state) => !isNil(state.sdxl.refinerModel)
-  );
+  const isRefinerModelSelected = useAppSelector((state) => !isNil(state.sdxl.refinerModel));
 
   return (
     <FormControlGroup isDisabled={!isRefinerModelSelected}>
       <Flex p={4} gap={4} flexDir="column">
         <ParamSDXLRefinerModelSelect />
-        <FormControlGroup
-          formLabelProps={stepsScaleLabelProps}
-          isDisabled={!isRefinerModelSelected}
-        >
+        <FormControlGroup formLabelProps={stepsScaleLabelProps} isDisabled={!isRefinerModelSelected}>
           <ParamSDXLRefinerScheduler />
           <ParamSDXLRefinerSteps />
           <ParamSDXLRefinerCFGScale />
           <ParamSDXLRefinerStart />
         </FormControlGroup>
-        <FormControlGroup
-          formLabelProps={aestheticLabelProps}
-          isDisabled={!isRefinerModelSelected}
-        >
+        <FormControlGroup formLabelProps={aestheticLabelProps} isDisabled={!isRefinerModelSelected}>
           <ParamSDXLRefinerPositiveAestheticScore />
           <ParamSDXLRefinerNegativeAestheticScore />
         </FormControlGroup>
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/hooks/useExpanderToggle.ts b/invokeai/frontend/web/src/features/settingsAccordions/hooks/useExpanderToggle.ts
index a8cce6ba20..dc29b36042 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/hooks/useExpanderToggle.ts
+++ b/invokeai/frontend/web/src/features/settingsAccordions/hooks/useExpanderToggle.ts
@@ -11,11 +11,7 @@ type UseExpanderToggleArg = {
 export const useExpanderToggle = (arg: UseExpanderToggleArg) => {
   const dispatch = useAppDispatch();
   const selectIsOpen = useMemo(
-    () =>
-      createSelector(
-        selectUiSlice,
-        (ui) => ui.expanders[arg.id] ?? arg.defaultIsOpen
-      ),
+    () => createSelector(selectUiSlice, (ui) => ui.expanders[arg.id] ?? arg.defaultIsOpen),
     [arg]
   );
   const isOpen = useAppSelector(selectIsOpen);
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/hooks/useStandaloneAccordionToggle.ts b/invokeai/frontend/web/src/features/settingsAccordions/hooks/useStandaloneAccordionToggle.ts
index d7a7ea0dc8..d69d08d17d 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/hooks/useStandaloneAccordionToggle.ts
+++ b/invokeai/frontend/web/src/features/settingsAccordions/hooks/useStandaloneAccordionToggle.ts
@@ -1,9 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import {
-  accordionStateChanged,
-  selectUiSlice,
-} from 'features/ui/store/uiSlice';
+import { accordionStateChanged, selectUiSlice } from 'features/ui/store/uiSlice';
 import { useCallback, useMemo } from 'react';
 
 type UseStandaloneAccordionToggleArg = {
@@ -11,16 +8,10 @@ type UseStandaloneAccordionToggleArg = {
   id: string;
 };
 
-export const useStandaloneAccordionToggle = (
-  arg: UseStandaloneAccordionToggleArg
-) => {
+export const useStandaloneAccordionToggle = (arg: UseStandaloneAccordionToggleArg) => {
   const dispatch = useAppDispatch();
   const selectIsOpen = useMemo(
-    () =>
-      createSelector(
-        selectUiSlice,
-        (ui) => ui.accordions[arg.id] ?? arg.defaultIsOpen
-      ),
+    () => createSelector(selectUiSlice, (ui) => ui.accordions[arg.id] ?? arg.defaultIsOpen),
     [arg]
   );
   const isOpen = useAppSelector(selectIsOpen);
diff --git a/invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx b/invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx
index c4b38bbdbc..932af0298e 100644
--- a/invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx
+++ b/invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx
@@ -16,20 +16,13 @@ import {
   useDisclosure,
 } from '@invoke-ai/ui-library';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
-import {
-  discordLink,
-  githubLink,
-  websiteLink,
-} from 'features/system/store/constants';
+import { discordLink, githubLink, websiteLink } from 'features/system/store/constants';
 import { map } from 'lodash-es';
 import InvokeLogoYellow from 'public/assets/images/invoke-tag-lrg.svg';
 import type { ReactElement } from 'react';
 import { cloneElement, memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  useGetAppDepsQuery,
-  useGetAppVersionQuery,
-} from 'services/api/endpoints/appInfo';
+import { useGetAppDepsQuery, useGetAppVersionQuery } from 'services/api/endpoints/appInfo';
 
 type AboutModalProps = {
   /* The button to open the Settings Modal */
@@ -58,60 +51,29 @@ const AboutModal = ({ children }: AboutModalProps) => {
           <ModalCloseButton />
           <ModalBody display="flex" flexDir="column" gap={4}>
             <Grid templateColumns="repeat(2, 1fr)" h="full">
-              <GridItem
-                backgroundColor="base.750"
-                borderRadius="base"
-                p="4"
-                h="full"
-              >
+              <GridItem backgroundColor="base.750" borderRadius="base" p="4" h="full">
                 <ScrollableContent>
-                  <Heading
-                    position="sticky"
-                    top="0"
-                    backgroundColor="base.750"
-                    size="md"
-                    p="1"
-                  >
+                  <Heading position="sticky" top="0" backgroundColor="base.750" size="md" p="1">
                     {t('common.localSystem')}
                   </Heading>
                   {deps.map(({ name, version }, i) => (
-                    <Grid
-                      key={i}
-                      py="2"
-                      px="1"
-                      w="full"
-                      templateColumns="repeat(2, 1fr)"
-                    >
+                    <Grid key={i} py="2" px="1" w="full" templateColumns="repeat(2, 1fr)">
                       <Text>{name}</Text>
-                      <Text>
-                        {version ? version : t('common.notInstalled')}
-                      </Text>
+                      <Text>{version ? version : t('common.notInstalled')}</Text>
                     </Grid>
                   ))}
                 </ScrollableContent>
               </GridItem>
               <GridItem>
-                <Flex
-                  flexDir="column"
-                  gap={3}
-                  justifyContent="center"
-                  alignItems="center"
-                  h="full"
-                >
+                <Flex flexDir="column" gap={3} justifyContent="center" alignItems="center" h="full">
                   <Image src={InvokeLogoYellow} alt="invoke-logo" w="120px" />
                   {appVersion && <Text>{`v${appVersion?.version}`}</Text>}
                   <Grid templateColumns="repeat(2, 1fr)" gap="3">
                     <GridItem>
-                      <ExternalLink
-                        href={githubLink}
-                        label={t('common.githubLabel')}
-                      />
+                      <ExternalLink href={githubLink} label={t('common.githubLabel')} />
                     </GridItem>
                     <GridItem>
-                      <ExternalLink
-                        href={discordLink}
-                        label={t('common.discordLabel')}
-                      />
+                      <ExternalLink href={discordLink} label={t('common.discordLabel')} />
                     </GridItem>
                   </Grid>
                   <Heading fontSize="large">{t('common.aboutHeading')}</Heading>
diff --git a/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeyListItem.tsx b/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeyListItem.tsx
index cf07acd789..864d9be883 100644
--- a/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeyListItem.tsx
+++ b/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeyListItem.tsx
@@ -21,10 +21,7 @@ const HotkeyListItem = (props: HotkeysModalProps) => {
             <Fragment key={`${hotkey}-${index}`}>
               {hotkey.map((key, index) => (
                 <>
-                  <Kbd
-                    textTransform="lowercase"
-                    key={`${hotkey}-${key}-${index}`}
-                  >
+                  <Kbd textTransform="lowercase" key={`${hotkey}-${key}-${index}`}>
                     {key}
                   </Kbd>
                   {index !== hotkey.length - 1 && (
diff --git a/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModal.tsx b/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModal.tsx
index d315ee3f90..0a823b8dfa 100644
--- a/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModal.tsx
+++ b/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModal.tsx
@@ -20,14 +20,7 @@ import type { HotkeyGroup } from 'features/system/components/HotkeysModal/useHot
 import { useHotkeyData } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { StickyScrollable } from 'features/system/components/StickyScrollable';
 import type { ChangeEventHandler, ReactElement } from 'react';
-import {
-  cloneElement,
-  Fragment,
-  memo,
-  useCallback,
-  useMemo,
-  useState,
-} from 'react';
+import { cloneElement, Fragment, memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiXBold } from 'react-icons/pi';
 
@@ -43,10 +36,7 @@ const HotkeysModal = ({ children }: HotkeysModalProps) => {
   const { t } = useTranslation();
   const [hotkeyFilter, setHotkeyFilter] = useState('');
   const clearHotkeyFilter = useCallback(() => setHotkeyFilter(''), []);
-  const onChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
-    (e) => setHotkeyFilter(e.target.value),
-    []
-  );
+  const onChange = useCallback<ChangeEventHandler<HTMLInputElement>>((e) => setHotkeyFilter(e.target.value), []);
   const hotkeyGroups = useHotkeyData();
   const filteredHotkeyGroups = useMemo(() => {
     if (!hotkeyFilter.trim().length) {
@@ -63,11 +53,7 @@ const HotkeysModal = ({ children }: HotkeysModalProps) => {
         if (
           item.title.toLowerCase().includes(trimmedHotkeyFilter) ||
           item.desc.toLowerCase().includes(trimmedHotkeyFilter) ||
-          item.hotkeys.some((hotkey) =>
-            hotkey.some((key) =>
-              key.toLowerCase().includes(trimmedHotkeyFilter)
-            )
-          )
+          item.hotkeys.some((hotkey) => hotkey.some((key) => key.toLowerCase().includes(trimmedHotkeyFilter)))
         ) {
           filteredGroup.hotkeyListItems.push(item);
         }
@@ -91,11 +77,7 @@ const HotkeysModal = ({ children }: HotkeysModalProps) => {
           <ModalCloseButton />
           <ModalBody display="flex" flexDir="column" gap={4}>
             <InputGroup>
-              <Input
-                placeholder={t('hotkeys.searchHotkeys')}
-                value={hotkeyFilter}
-                onChange={onChange}
-              />
+              <Input placeholder={t('hotkeys.searchHotkeys')} value={hotkeyFilter} onChange={onChange} />
               {hotkeyFilter.length && (
                 <InputRightElement h="full" pe={2}>
                   <IconButton
@@ -116,21 +98,14 @@ const HotkeysModal = ({ children }: HotkeysModalProps) => {
                   <StickyScrollable key={group.title} title={group.title}>
                     {group.hotkeyListItems.map((hotkey, i) => (
                       <Fragment key={i}>
-                        <HotkeyListItem
-                          title={hotkey.title}
-                          description={hotkey.desc}
-                          hotkeys={hotkey.hotkeys}
-                        />
+                        <HotkeyListItem title={hotkey.title} description={hotkey.desc} hotkeys={hotkey.hotkeys} />
                         {i < group.hotkeyListItems.length - 1 && <Divider />}
                       </Fragment>
                     ))}
                   </StickyScrollable>
                 ))}
                 {!filteredHotkeyGroups.length && (
-                  <IAINoContentFallback
-                    label={t('hotkeys.noHotkeysFound')}
-                    icon={null}
-                  />
+                  <IAINoContentFallback label={t('hotkeys.noHotkeysFound')} icon={null} />
                 )}
               </Flex>
             </ScrollableContent>
diff --git a/invokeai/frontend/web/src/features/system/components/HotkeysModal/useHotkeyData.ts b/invokeai/frontend/web/src/features/system/components/HotkeysModal/useHotkeyData.ts
index 57fd5a1ad0..f3f5056eae 100644
--- a/invokeai/frontend/web/src/features/system/components/HotkeysModal/useHotkeyData.ts
+++ b/invokeai/frontend/web/src/features/system/components/HotkeysModal/useHotkeyData.ts
@@ -312,20 +312,8 @@ export const useHotkeyData = (): HotkeyGroup[] => {
   );
 
   const hotkeyGroups = useMemo<HotkeyGroup[]>(
-    () => [
-      appHotkeys,
-      generalHotkeys,
-      galleryHotkeys,
-      unifiedCanvasHotkeys,
-      nodesHotkeys,
-    ],
-    [
-      appHotkeys,
-      generalHotkeys,
-      galleryHotkeys,
-      unifiedCanvasHotkeys,
-      nodesHotkeys,
-    ]
+    () => [appHotkeys, generalHotkeys, galleryHotkeys, unifiedCanvasHotkeys, nodesHotkeys],
+    [appHotkeys, generalHotkeys, galleryHotkeys, unifiedCanvasHotkeys, nodesHotkeys]
   );
 
   return hotkeyGroups;
diff --git a/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx b/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx
index 6084facc4f..4389431813 100644
--- a/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx
@@ -22,9 +22,7 @@ const ProgressBar = () => {
     <Progress
       value={value}
       aria-label={t('accessibility.invokeProgressBar')}
-      isIndeterminate={
-        isConnected && Boolean(queueStatus?.queue.in_progress) && !hasSteps
-      }
+      isIndeterminate={isConnected && Boolean(queueStatus?.queue.in_progress) && !hasSteps}
       h={2}
       w="full"
       colorScheme="invokeBlue"
diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLanguageSelect.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLanguageSelect.tsx
index 9f40cfa99c..c43c147e6a 100644
--- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLanguageSelect.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLanguageSelect.tsx
@@ -35,13 +35,9 @@ export const SettingsLanguageSelect = memo(() => {
     ],
     [t]
   );
-  const isLocalizationEnabled =
-    useFeatureStatus('localization').isFeatureEnabled;
+  const isLocalizationEnabled = useFeatureStatus('localization').isFeatureEnabled;
 
-  const value = useMemo(
-    () => options.find((o) => o.value === language),
-    [language, options]
-  );
+  const value = useMemo(() => options.find((o) => o.value === language), [language, options]);
 
   const onChange = useCallback<ComboboxOnChange>(
     (v) => {
diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLogLevelSelect.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLogLevelSelect.tsx
index 8d54c5a24b..d3cdb54a48 100644
--- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLogLevelSelect.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLogLevelSelect.tsx
@@ -11,15 +11,9 @@ export const SettingsLogLevelSelect = memo(() => {
   const dispatch = useAppDispatch();
   const consoleLogLevel = useAppSelector((s) => s.system.consoleLogLevel);
   const shouldLogToConsole = useAppSelector((s) => s.system.shouldLogToConsole);
-  const options = useMemo(
-    () => zLogLevel.options.map((o) => ({ label: o, value: o })),
-    []
-  );
+  const options = useMemo(() => zLogLevel.options.map((o) => ({ label: o, value: o })), []);
 
-  const value = useMemo(
-    () => options.find((o) => o.value === consoleLogLevel),
-    [consoleLogLevel, options]
-  );
+  const value = useMemo(() => options.find((o) => o.value === consoleLogLevel), [consoleLogLevel, options]);
 
   const onChange = useCallback<ComboboxOnChange>(
     (v) => {
diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx
index fa31dd0ade..6cf37334e7 100644
--- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx
@@ -14,12 +14,7 @@ import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { discordLink, githubLink } from 'features/system/store/constants';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  PiBugBeetleBold,
-  PiInfoBold,
-  PiKeyboardBold,
-  PiToggleRightFill,
-} from 'react-icons/pi';
+import { PiBugBeetleBold, PiInfoBold, PiKeyboardBold, PiToggleRightFill } from 'react-icons/pi';
 import { RiDiscordFill, RiGithubFill, RiSettings4Line } from 'react-icons/ri';
 
 import SettingsModal from './SettingsModal';
@@ -45,32 +40,17 @@ const SettingsMenu = () => {
       <MenuList>
         <MenuGroup title={t('common.communityLabel')}>
           {isGithubLinkEnabled && (
-            <MenuItem
-              as="a"
-              href={githubLink}
-              target="_blank"
-              icon={<RiGithubFill />}
-            >
+            <MenuItem as="a" href={githubLink} target="_blank" icon={<RiGithubFill />}>
               {t('common.githubLabel')}
             </MenuItem>
           )}
           {isBugLinkEnabled && (
-            <MenuItem
-              as="a"
-              href={`${githubLink}/issues`}
-              target="_blank"
-              icon={<PiBugBeetleBold />}
-            >
+            <MenuItem as="a" href={`${githubLink}/issues`} target="_blank" icon={<PiBugBeetleBold />}>
               {t('common.reportBugLabel')}
             </MenuItem>
           )}
           {isDiscordLinkEnabled && (
-            <MenuItem
-              as="a"
-              href={discordLink}
-              target="_blank"
-              icon={<RiDiscordFill />}
-            >
+            <MenuItem as="a" href={discordLink} target="_blank" icon={<RiDiscordFill />}>
               {t('common.discordLabel')}
             </MenuItem>
           )}
diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
index b69b406eff..1590ec762f 100644
--- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
@@ -58,13 +58,10 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
   const { t } = useTranslation();
   const [countdown, setCountdown] = useState(3);
 
-  const shouldShowDeveloperSettings =
-    config?.shouldShowDeveloperSettings ?? true;
+  const shouldShowDeveloperSettings = config?.shouldShowDeveloperSettings ?? true;
   const shouldShowResetWebUiText = config?.shouldShowResetWebUiText ?? true;
-  const shouldShowClearIntermediates =
-    config?.shouldShowClearIntermediates ?? true;
-  const shouldShowLocalizationToggle =
-    config?.shouldShowLocalizationToggle ?? true;
+  const shouldShowClearIntermediates = config?.shouldShowClearIntermediates ?? true;
+  const shouldShowLocalizationToggle = config?.shouldShowLocalizationToggle ?? true;
 
   useEffect(() => {
     if (!shouldShowDeveloperSettings) {
@@ -72,15 +69,12 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
     }
   }, [shouldShowDeveloperSettings, dispatch]);
 
-  const { isNSFWCheckerAvailable, isWatermarkerAvailable } =
-    useGetAppConfigQuery(undefined, {
-      selectFromResult: ({ data }) => ({
-        isNSFWCheckerAvailable:
-          data?.nsfw_methods.includes('nsfw_checker') ?? false,
-        isWatermarkerAvailable:
-          data?.watermarking_methods.includes('invisible_watermark') ?? false,
-      }),
-    });
+  const { isNSFWCheckerAvailable, isWatermarkerAvailable } = useGetAppConfigQuery(undefined, {
+    selectFromResult: ({ data }) => ({
+      isNSFWCheckerAvailable: data?.nsfw_methods.includes('nsfw_checker') ?? false,
+      isWatermarkerAvailable: data?.watermarking_methods.includes('invisible_watermark') ?? false,
+    }),
+  });
 
   const {
     clearIntermediates,
@@ -89,43 +83,19 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
     isLoading: isLoadingClearIntermediates,
   } = useClearIntermediates(shouldShowClearIntermediates);
 
-  const {
-    isOpen: isSettingsModalOpen,
-    onOpen: onSettingsModalOpen,
-    onClose: onSettingsModalClose,
-  } = useDisclosure();
+  const { isOpen: isSettingsModalOpen, onOpen: onSettingsModalOpen, onClose: onSettingsModalClose } = useDisclosure();
 
-  const {
-    isOpen: isRefreshModalOpen,
-    onOpen: onRefreshModalOpen,
-    onClose: onRefreshModalClose,
-  } = useDisclosure();
+  const { isOpen: isRefreshModalOpen, onOpen: onRefreshModalOpen, onClose: onRefreshModalClose } = useDisclosure();
 
-  const shouldUseCpuNoise = useAppSelector(
-    (s) => s.generation.shouldUseCpuNoise
-  );
-  const shouldConfirmOnDelete = useAppSelector(
-    (s) => s.system.shouldConfirmOnDelete
-  );
-  const enableImageDebugging = useAppSelector(
-    (s) => s.system.enableImageDebugging
-  );
-  const shouldShowProgressInViewer = useAppSelector(
-    (s) => s.ui.shouldShowProgressInViewer
-  );
+  const shouldUseCpuNoise = useAppSelector((s) => s.generation.shouldUseCpuNoise);
+  const shouldConfirmOnDelete = useAppSelector((s) => s.system.shouldConfirmOnDelete);
+  const enableImageDebugging = useAppSelector((s) => s.system.enableImageDebugging);
+  const shouldShowProgressInViewer = useAppSelector((s) => s.ui.shouldShowProgressInViewer);
   const shouldLogToConsole = useAppSelector((s) => s.system.shouldLogToConsole);
-  const shouldAntialiasProgressImage = useAppSelector(
-    (s) => s.system.shouldAntialiasProgressImage
-  );
-  const shouldUseNSFWChecker = useAppSelector(
-    (s) => s.system.shouldUseNSFWChecker
-  );
-  const shouldUseWatermarker = useAppSelector(
-    (s) => s.system.shouldUseWatermarker
-  );
-  const shouldEnableInformationalPopovers = useAppSelector(
-    (s) => s.system.shouldEnableInformationalPopovers
-  );
+  const shouldAntialiasProgressImage = useAppSelector((s) => s.system.shouldAntialiasProgressImage);
+  const shouldUseNSFWChecker = useAppSelector((s) => s.system.shouldUseNSFWChecker);
+  const shouldUseWatermarker = useAppSelector((s) => s.system.shouldUseWatermarker);
+  const shouldEnableInformationalPopovers = useAppSelector((s) => s.system.shouldEnableInformationalPopovers);
 
   const clearStorage = useClearStorage();
 
@@ -204,12 +174,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
         onClick: onSettingsModalOpen,
       })}
 
-      <Modal
-        isOpen={isSettingsModalOpen}
-        onClose={onSettingsModalClose}
-        size="2xl"
-        isCentered
-      >
+      <Modal isOpen={isSettingsModalOpen} onClose={onSettingsModalClose} size="2xl" isCentered>
         <ModalOverlay />
         <ModalContent maxH="80vh" h="68rem">
           <ModalHeader bg="none">{t('common.settingsLabel')}</ModalHeader>
@@ -221,68 +186,45 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
                   <StickyScrollable title={t('settings.general')}>
                     <FormControl>
                       <FormLabel>{t('settings.confirmOnDelete')}</FormLabel>
-                      <Switch
-                        isChecked={shouldConfirmOnDelete}
-                        onChange={handleChangeShouldConfirmOnDelete}
-                      />
+                      <Switch isChecked={shouldConfirmOnDelete} onChange={handleChangeShouldConfirmOnDelete} />
                     </FormControl>
                   </StickyScrollable>
 
                   <StickyScrollable title={t('settings.generation')}>
                     <FormControl isDisabled={!isNSFWCheckerAvailable}>
                       <FormLabel>{t('settings.enableNSFWChecker')}</FormLabel>
-                      <Switch
-                        isChecked={shouldUseNSFWChecker}
-                        onChange={handleChangeShouldUseNSFWChecker}
-                      />
+                      <Switch isChecked={shouldUseNSFWChecker} onChange={handleChangeShouldUseNSFWChecker} />
                     </FormControl>
                     <FormControl isDisabled={!isWatermarkerAvailable}>
-                      <FormLabel>
-                        {t('settings.enableInvisibleWatermark')}
-                      </FormLabel>
-                      <Switch
-                        isChecked={shouldUseWatermarker}
-                        onChange={handleChangeShouldUseWatermarker}
-                      />
+                      <FormLabel>{t('settings.enableInvisibleWatermark')}</FormLabel>
+                      <Switch isChecked={shouldUseWatermarker} onChange={handleChangeShouldUseWatermarker} />
                     </FormControl>
                   </StickyScrollable>
 
                   <StickyScrollable title={t('settings.ui')}>
                     <FormControl>
-                      <FormLabel>
-                        {t('settings.showProgressInViewer')}
-                      </FormLabel>
+                      <FormLabel>{t('settings.showProgressInViewer')}</FormLabel>
                       <Switch
                         isChecked={shouldShowProgressInViewer}
                         onChange={handleChangeShouldShowProgressInViewer}
                       />
                     </FormControl>
                     <FormControl>
-                      <FormLabel>
-                        {t('settings.antialiasProgressImages')}
-                      </FormLabel>
+                      <FormLabel>{t('settings.antialiasProgressImages')}</FormLabel>
                       <Switch
                         isChecked={shouldAntialiasProgressImage}
                         onChange={handleChangeShouldAntialiasProgressImage}
                       />
                     </FormControl>
                     <FormControl>
-                      <InformationalPopover
-                        feature="noiseUseCPU"
-                        inPortal={false}
-                      >
+                      <InformationalPopover feature="noiseUseCPU" inPortal={false}>
                         <FormLabel>{t('parameters.useCpuNoise')}</FormLabel>
                       </InformationalPopover>
-                      <Switch
-                        isChecked={shouldUseCpuNoise}
-                        onChange={handleChangeShouldUseCpuNoise}
-                      />
+                      <Switch isChecked={shouldUseCpuNoise} onChange={handleChangeShouldUseCpuNoise} />
                     </FormControl>
                     {shouldShowLocalizationToggle && <SettingsLanguageSelect />}
                     <FormControl>
-                      <FormLabel>
-                        {t('settings.enableInformationalPopovers')}
-                      </FormLabel>
+                      <FormLabel>{t('settings.enableInformationalPopovers')}</FormLabel>
                       <Switch
                         isChecked={shouldEnableInformationalPopovers}
                         onChange={handleChangeShouldEnableInformationalPopovers}
@@ -293,23 +235,13 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
                   {shouldShowDeveloperSettings && (
                     <StickyScrollable title={t('settings.developer')}>
                       <FormControl>
-                        <FormLabel>
-                          {t('settings.shouldLogToConsole')}
-                        </FormLabel>
-                        <Switch
-                          isChecked={shouldLogToConsole}
-                          onChange={handleLogToConsoleChanged}
-                        />
+                        <FormLabel>{t('settings.shouldLogToConsole')}</FormLabel>
+                        <Switch isChecked={shouldLogToConsole} onChange={handleLogToConsoleChanged} />
                       </FormControl>
                       <SettingsLogLevelSelect />
                       <FormControl>
-                        <FormLabel>
-                          {t('settings.enableImageDebugging')}
-                        </FormLabel>
-                        <Switch
-                          isChecked={enableImageDebugging}
-                          onChange={handleChangeEnableImageDebugging}
-                        />
+                        <FormLabel>{t('settings.enableImageDebugging')}</FormLabel>
+                        <Switch isChecked={enableImageDebugging} onChange={handleChangeEnableImageDebugging} />
                       </FormControl>
                     </StickyScrollable>
                   )}
@@ -317,11 +249,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
                   {shouldShowClearIntermediates && (
                     <StickyScrollable title={t('settings.clearIntermediates')}>
                       <Button
-                        tooltip={
-                          hasPendingItems
-                            ? t('settings.clearIntermediatesDisabled')
-                            : undefined
-                        }
+                        tooltip={hasPendingItems ? t('settings.clearIntermediatesDisabled') : undefined}
                         colorScheme="warning"
                         onClick={clearIntermediates}
                         isLoading={isLoadingClearIntermediates}
@@ -331,15 +259,9 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
                           count: intermediatesCount ?? 0,
                         })}
                       </Button>
-                      <Text fontWeight="bold">
-                        {t('settings.clearIntermediatesDesc1')}
-                      </Text>
-                      <Text variant="subtext">
-                        {t('settings.clearIntermediatesDesc2')}
-                      </Text>
-                      <Text variant="subtext">
-                        {t('settings.clearIntermediatesDesc3')}
-                      </Text>
+                      <Text fontWeight="bold">{t('settings.clearIntermediatesDesc1')}</Text>
+                      <Text variant="subtext">{t('settings.clearIntermediatesDesc2')}</Text>
+                      <Text variant="subtext">{t('settings.clearIntermediatesDesc3')}</Text>
                     </StickyScrollable>
                   )}
 
@@ -349,12 +271,8 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
                     </Button>
                     {shouldShowResetWebUiText && (
                       <>
-                        <Text variant="subtext">
-                          {t('settings.resetWebUIDesc1')}
-                        </Text>
-                        <Text variant="subtext">
-                          {t('settings.resetWebUIDesc2')}
-                        </Text>
+                        <Text variant="subtext">{t('settings.resetWebUIDesc1')}</Text>
+                        <Text variant="subtext">{t('settings.resetWebUIDesc2')}</Text>
                       </>
                     )}
                   </StickyScrollable>
@@ -381,8 +299,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
             <Flex justifyContent="center">
               <Text fontSize="lg">
                 <Text>
-                  {t('settings.resetComplete')} {t('settings.reloadingIn')}{' '}
-                  {countdown}...
+                  {t('settings.resetComplete')} {t('settings.reloadingIn')} {countdown}...
                 </Text>
               </Text>
             </Flex>
diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/StyledFlex.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/StyledFlex.tsx
index 5cc01a19ab..2b2d548323 100644
--- a/invokeai/frontend/web/src/features/system/components/SettingsModal/StyledFlex.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/StyledFlex.tsx
@@ -4,13 +4,7 @@ import { memo } from 'react';
 
 const StyledFlex = (props: PropsWithChildren) => {
   return (
-    <Flex
-      flexDirection="column"
-      gap={2}
-      p={4}
-      borderRadius="base"
-      bg="base.900"
-    >
+    <Flex flexDirection="column" gap={2} p={4} borderRadius="base" bg="base.900">
       {props.children}
     </Flex>
   );
diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/useClearIntermediates.ts b/invokeai/frontend/web/src/features/system/components/SettingsModal/useClearIntermediates.ts
index 0bd56e0e22..6d953c3c11 100644
--- a/invokeai/frontend/web/src/features/system/components/SettingsModal/useClearIntermediates.ts
+++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/useClearIntermediates.ts
@@ -4,10 +4,7 @@ import { controlAdaptersReset } from 'features/controlAdapters/store/controlAdap
 import { addToast } from 'features/system/store/systemSlice';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  useClearIntermediatesMutation,
-  useGetIntermediatesCountQuery,
-} from 'services/api/endpoints/images';
+import { useClearIntermediatesMutation, useGetIntermediatesCountQuery } from 'services/api/endpoints/images';
 import { useGetQueueStatusQuery } from 'services/api/endpoints/queue';
 
 export type UseClearIntermediatesReturn = {
@@ -17,29 +14,20 @@ export type UseClearIntermediatesReturn = {
   hasPendingItems: boolean;
 };
 
-export const useClearIntermediates = (
-  shouldShowClearIntermediates: boolean
-): UseClearIntermediatesReturn => {
+export const useClearIntermediates = (shouldShowClearIntermediates: boolean): UseClearIntermediatesReturn => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
 
-  const { data: intermediatesCount } = useGetIntermediatesCountQuery(
-    undefined,
-    {
-      refetchOnMountOrArgChange: true,
-      skip: !shouldShowClearIntermediates,
-    }
-  );
+  const { data: intermediatesCount } = useGetIntermediatesCountQuery(undefined, {
+    refetchOnMountOrArgChange: true,
+    skip: !shouldShowClearIntermediates,
+  });
 
   const [_clearIntermediates, { isLoading }] = useClearIntermediatesMutation();
 
   const { data: queueStatus } = useGetQueueStatusQuery();
   const hasPendingItems = useMemo(
-    () =>
-      Boolean(
-        queueStatus &&
-          (queueStatus.queue.in_progress > 0 || queueStatus.queue.pending > 0)
-      ),
+    () => Boolean(queueStatus && (queueStatus.queue.in_progress > 0 || queueStatus.queue.pending > 0)),
     [queueStatus]
   );
 
diff --git a/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx b/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx
index 25dda11b4a..61a577d4f0 100644
--- a/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx
+++ b/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx
@@ -10,12 +10,7 @@ const StatusIndicator = () => {
 
   if (!isConnected) {
     return (
-      <Tooltip
-        label={t('common.statusDisconnected')}
-        placement="end"
-        shouldWrapChildren
-        gutter={10}
-      >
+      <Tooltip label={t('common.statusDisconnected')} placement="end" shouldWrapChildren gutter={10}>
         <Icon as={PiWarningBold} color="error.300" />
       </Tooltip>
     );
diff --git a/invokeai/frontend/web/src/features/system/components/StickyScrollable.tsx b/invokeai/frontend/web/src/features/system/components/StickyScrollable.tsx
index 87bc60bc89..073b7f5f89 100644
--- a/invokeai/frontend/web/src/features/system/components/StickyScrollable.tsx
+++ b/invokeai/frontend/web/src/features/system/components/StickyScrollable.tsx
@@ -6,29 +6,25 @@ export type StickyScrollableHeadingProps = {
   title: string;
 };
 
-export const StickyScrollableHeading = memo(
-  (props: StickyScrollableHeadingProps) => {
-    return (
-      <Flex ps={2} pb={4} position="sticky" zIndex={1} top={0} bg="base.800">
-        <Heading size="sm">{props.title}</Heading>
-      </Flex>
-    );
-  }
-);
+export const StickyScrollableHeading = memo((props: StickyScrollableHeadingProps) => {
+  return (
+    <Flex ps={2} pb={4} position="sticky" zIndex={1} top={0} bg="base.800">
+      <Heading size="sm">{props.title}</Heading>
+    </Flex>
+  );
+});
 
 StickyScrollableHeading.displayName = 'StickyScrollableHeading';
 
 export type StickyScrollableContentProps = PropsWithChildren;
 
-export const StickyScrollableContent = memo(
-  (props: StickyScrollableContentProps) => {
-    return (
-      <Flex p={4} borderRadius="base" bg="base.750" flexDir="column" gap={4}>
-        {props.children}
-      </Flex>
-    );
-  }
-);
+export const StickyScrollableContent = memo((props: StickyScrollableContentProps) => {
+  return (
+    <Flex p={4} borderRadius="base" bg="base.750" flexDir="column" gap={4}>
+      {props.children}
+    </Flex>
+  );
+});
 
 StickyScrollableContent.displayName = 'StickyScrollableContent';
 
diff --git a/invokeai/frontend/web/src/features/system/hooks/useFeatureStatus.ts b/invokeai/frontend/web/src/features/system/hooks/useFeatureStatus.ts
index f052c23335..2c13c06b36 100644
--- a/invokeai/frontend/web/src/features/system/hooks/useFeatureStatus.ts
+++ b/invokeai/frontend/web/src/features/system/hooks/useFeatureStatus.ts
@@ -3,9 +3,7 @@ import type { AppFeature, SDFeature } from 'app/types/invokeai';
 import type { InvokeTabName } from 'features/ui/store/tabMap';
 import { useMemo } from 'react';
 
-export const useFeatureStatus = (
-  feature: AppFeature | SDFeature | InvokeTabName
-) => {
+export const useFeatureStatus = (feature: AppFeature | SDFeature | InvokeTabName) => {
   const disabledTabs = useAppSelector((s) => s.config.disabledTabs);
 
   const disabledFeatures = useAppSelector((s) => s.config.disabledFeatures);
diff --git a/invokeai/frontend/web/src/features/system/store/configSlice.ts b/invokeai/frontend/web/src/features/system/store/configSlice.ts
index fad698ef51..948634e41b 100644
--- a/invokeai/frontend/web/src/features/system/store/configSlice.ts
+++ b/invokeai/frontend/web/src/features/system/store/configSlice.ts
@@ -1,11 +1,7 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 import type { RootState } from 'app/store/store';
-import type {
-  AppConfig,
-  NumericalParameterConfig,
-  PartialAppConfig,
-} from 'app/types/invokeai';
+import type { AppConfig, NumericalParameterConfig, PartialAppConfig } from 'app/types/invokeai';
 import { merge } from 'lodash-es';
 
 const baseDimensionConfig: NumericalParameterConfig = {
@@ -23,13 +19,7 @@ export const initialConfigState: AppConfig = {
   shouldFetchMetadataFromApi: false,
   disabledTabs: [],
   disabledFeatures: ['lightbox', 'faceRestore', 'batches', 'bulkDownload'],
-  disabledSDFeatures: [
-    'variation',
-    'symmetry',
-    'hires',
-    'perlinNoise',
-    'noiseThreshold',
-  ],
+  disabledSDFeatures: ['variation', 'symmetry', 'hires', 'perlinNoise', 'noiseThreshold'],
   nodesAllowlist: undefined,
   nodesDenylist: undefined,
   canRestoreDeletedImagesFromBin: true,
diff --git a/invokeai/frontend/web/src/features/system/store/systemPersistDenylist.ts b/invokeai/frontend/web/src/features/system/store/systemPersistDenylist.ts
index 7e838b0328..75da6f63a9 100644
--- a/invokeai/frontend/web/src/features/system/store/systemPersistDenylist.ts
+++ b/invokeai/frontend/web/src/features/system/store/systemPersistDenylist.ts
@@ -1,7 +1,3 @@
 import type { SystemState } from './types';
 
-export const systemPersistDenylist: (keyof SystemState)[] = [
-  'isConnected',
-  'denoiseProgress',
-  'status',
-];
+export const systemPersistDenylist: (keyof SystemState)[] = ['isConnected', 'denoiseProgress', 'status'];
diff --git a/invokeai/frontend/web/src/features/system/store/systemSelectors.ts b/invokeai/frontend/web/src/features/system/store/systemSelectors.ts
index 067e702b8a..817e2f2b86 100644
--- a/invokeai/frontend/web/src/features/system/store/systemSelectors.ts
+++ b/invokeai/frontend/web/src/features/system/store/systemSelectors.ts
@@ -1,7 +1,4 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { selectSystemSlice } from 'features/system/store/systemSlice';
 
-export const languageSelector = createSelector(
-  selectSystemSlice,
-  (system) => system.language
-);
+export const languageSelector = createSelector(selectSystemSlice, (system) => system.language);
diff --git a/invokeai/frontend/web/src/features/system/store/systemSlice.ts b/invokeai/frontend/web/src/features/system/store/systemSlice.ts
index 8da6c4b4cd..4f31ca80f5 100644
--- a/invokeai/frontend/web/src/features/system/store/systemSlice.ts
+++ b/invokeai/frontend/web/src/features/system/store/systemSlice.ts
@@ -63,10 +63,7 @@ export const systemSlice = createSlice({
     shouldLogToConsoleChanged: (state, action: PayloadAction<boolean>) => {
       state.shouldLogToConsole = action.payload;
     },
-    shouldAntialiasProgressImageChanged: (
-      state,
-      action: PayloadAction<boolean>
-    ) => {
+    shouldAntialiasProgressImageChanged: (state, action: PayloadAction<boolean>) => {
       state.shouldAntialiasProgressImage = action.payload;
     },
     languageChanged: (state, action: PayloadAction<Language>) => {
@@ -78,10 +75,7 @@ export const systemSlice = createSlice({
     shouldUseWatermarkerChanged(state, action: PayloadAction<boolean>) {
       state.shouldUseWatermarker = action.payload;
     },
-    setShouldEnableInformationalPopovers(
-      state,
-      action: PayloadAction<boolean>
-    ) {
+    setShouldEnableInformationalPopovers(state, action: PayloadAction<boolean>) {
       state.shouldEnableInformationalPopovers = action.payload;
     },
   },
@@ -163,11 +157,7 @@ export const systemSlice = createSlice({
     });
 
     builder.addCase(socketQueueItemStatusChanged, (state, action) => {
-      if (
-        ['completed', 'canceled', 'failed'].includes(
-          action.payload.data.queue_item.status
-        )
-      ) {
+      if (['completed', 'canceled', 'failed'].includes(action.payload.data.queue_item.status)) {
         state.status = 'CONNECTED';
         state.denoiseProgress = null;
       }
@@ -206,11 +196,7 @@ export const {
 
 export default systemSlice.reducer;
 
-const isAnyServerError = isAnyOf(
-  socketInvocationError,
-  socketSessionRetrievalError,
-  socketInvocationRetrievalError
-);
+const isAnyServerError = isAnyOf(socketInvocationError, socketSessionRetrievalError, socketInvocationRetrievalError);
 
 export const selectSystemSlice = (state: RootState) => state.system;
 
diff --git a/invokeai/frontend/web/src/features/system/store/types.ts b/invokeai/frontend/web/src/features/system/store/types.ts
index df774897e9..09d5fdcd6f 100644
--- a/invokeai/frontend/web/src/features/system/store/types.ts
+++ b/invokeai/frontend/web/src/features/system/store/types.ts
@@ -3,12 +3,7 @@ import type { LogLevel } from 'app/logging/logger';
 import type { ProgressImage } from 'services/events/types';
 import { z } from 'zod';
 
-export type SystemStatus =
-  | 'CONNECTED'
-  | 'DISCONNECTED'
-  | 'PROCESSING'
-  | 'ERROR'
-  | 'LOADING_MODEL';
+export type SystemStatus = 'CONNECTED' | 'DISCONNECTED' | 'PROCESSING' | 'ERROR' | 'LOADING_MODEL';
 
 export type DenoiseProgress = {
   session_id: string;
@@ -39,8 +34,7 @@ export const zLanguage = z.enum([
   'uk',
 ]);
 export type Language = z.infer<typeof zLanguage>;
-export const isLanguage = (v: unknown): v is Language =>
-  zLanguage.safeParse(v).success;
+export const isLanguage = (v: unknown): v is Language => zLanguage.safeParse(v).success;
 
 export interface SystemState {
   _version: 1;
diff --git a/invokeai/frontend/web/src/features/system/util/calculateStepPercentage.ts b/invokeai/frontend/web/src/features/system/util/calculateStepPercentage.ts
index 080c7b1ee6..70902e4a92 100644
--- a/invokeai/frontend/web/src/features/system/util/calculateStepPercentage.ts
+++ b/invokeai/frontend/web/src/features/system/util/calculateStepPercentage.ts
@@ -1,8 +1,4 @@
-export const calculateStepPercentage = (
-  step: number,
-  total_steps: number,
-  order: number
-) => {
+export const calculateStepPercentage = (step: number, total_steps: number, order: number) => {
   if (total_steps === 0) {
     return 0;
   }
diff --git a/invokeai/frontend/web/src/features/system/util/copyBlobToClipboard.ts b/invokeai/frontend/web/src/features/system/util/copyBlobToClipboard.ts
index b5e896f3bf..ccdb9e1af0 100644
--- a/invokeai/frontend/web/src/features/system/util/copyBlobToClipboard.ts
+++ b/invokeai/frontend/web/src/features/system/util/copyBlobToClipboard.ts
@@ -1,10 +1,7 @@
 /**
  * Copies a blob to the clipboard by calling navigator.clipboard.write().
  */
-export const copyBlobToClipboard = (
-  blob: Promise<Blob> | Blob,
-  type = 'image/png'
-) => {
+export const copyBlobToClipboard = (blob: Promise<Blob> | Blob, type = 'image/png') => {
   navigator.clipboard.write([
     new ClipboardItem({
       [type]: blob,
diff --git a/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx b/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx
index 65bb5cc015..c2d8d9addb 100644
--- a/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx
@@ -17,13 +17,7 @@ const FloatingGalleryButton = (props: Props) => {
 
   return (
     <Portal>
-      <Flex
-        pos="absolute"
-        transform="translate(0, -50%)"
-        minW={8}
-        top="50%"
-        insetInlineEnd="21px"
-      >
+      <Flex pos="absolute" transform="translate(0, -50%)" minW={8} top="50%" insetInlineEnd="21px">
         <Tooltip label={t('accessibility.showGalleryPanel')} placement="start">
           <IconButton
             aria-label={t('accessibility.showGalleryPanel')}
diff --git a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
index f96a4e047c..16500a1a79 100644
--- a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
@@ -1,12 +1,5 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
-import {
-  ButtonGroup,
-  Flex,
-  Icon,
-  IconButton,
-  Portal,
-  spinAnimation,
-} from '@invoke-ai/ui-library';
+import { ButtonGroup, Flex, Icon, IconButton, Portal, spinAnimation } from '@invoke-ai/ui-library';
 import CancelCurrentQueueItemIconButton from 'features/queue/components/CancelCurrentQueueItemIconButton';
 import ClearQueueIconButton from 'features/queue/components/ClearQueueIconButton';
 import { QueueButtonTooltip } from 'features/queue/components/QueueButtonTooltip';
diff --git a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
index dd703e315b..efff22bb02 100644
--- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
@@ -1,14 +1,4 @@
-import {
-  Flex,
-  IconButton,
-  Spacer,
-  Tab,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Tabs,
-  Tooltip,
-} from '@invoke-ai/ui-library';
+import { Flex, IconButton, Spacer, Tab, TabList, TabPanel, TabPanels, Tabs, Tooltip } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { $customNavComponent } from 'app/store/nanostores/customNavComponent';
@@ -25,23 +15,14 @@ import type { UsePanelOptions } from 'features/ui/hooks/usePanel';
 import { usePanel } from 'features/ui/hooks/usePanel';
 import { usePanelStorage } from 'features/ui/hooks/usePanelStorage';
 import type { InvokeTabName } from 'features/ui/store/tabMap';
-import {
-  activeTabIndexSelector,
-  activeTabNameSelector,
-} from 'features/ui/store/uiSelectors';
+import { activeTabIndexSelector, activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import type { CSSProperties, MouseEvent, ReactElement, ReactNode } from 'react';
 import { memo, useCallback, useMemo, useRef } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { PiFlowArrowBold } from 'react-icons/pi';
-import {
-  RiBox2Line,
-  RiBrushLine,
-  RiImage2Line,
-  RiInputMethodLine,
-  RiPlayList2Fill,
-} from 'react-icons/ri';
+import { RiBox2Line, RiBrushLine, RiImage2Line, RiInputMethodLine, RiPlayList2Fill } from 'react-icons/ri';
 import type { ImperativePanelGroupHandle } from 'react-resizable-panels';
 import { Panel, PanelGroup } from 'react-resizable-panels';
 
@@ -100,9 +81,8 @@ const tabs: InvokeTabInfo[] = [
   },
 ];
 
-const enabledTabsSelector = createMemoizedSelector(
-  selectConfigSlice,
-  (config) => tabs.filter((tab) => !config.disabledTabs.includes(tab.id))
+const enabledTabsSelector = createMemoizedSelector(selectConfigSlice, (config) =>
+  tabs.filter((tab) => !config.disabledTabs.includes(tab.id))
 );
 
 export const NO_GALLERY_PANEL_TABS: InvokeTabName[] = ['modelManager', 'queue'];
@@ -128,14 +108,8 @@ const InvokeTabs = () => {
       e.target.blur();
     }
   }, []);
-  const shouldShowOptionsPanel = useMemo(
-    () => !NO_OPTIONS_PANEL_TABS.includes(activeTabName),
-    [activeTabName]
-  );
-  const shouldShowGalleryPanel = useMemo(
-    () => !NO_GALLERY_PANEL_TABS.includes(activeTabName),
-    [activeTabName]
-  );
+  const shouldShowOptionsPanel = useMemo(() => !NO_OPTIONS_PANEL_TABS.includes(activeTabName), [activeTabName]);
+  const shouldShowGalleryPanel = useMemo(() => !NO_GALLERY_PANEL_TABS.includes(activeTabName), [activeTabName]);
 
   const tabs = useMemo(
     () =>
@@ -159,8 +133,7 @@ const InvokeTabs = () => {
   );
 
   const tabPanels = useMemo(
-    () =>
-      enabledTabs.map((tab) => <TabPanel key={tab.id}>{tab.content}</TabPanel>),
+    () => enabledTabs.map((tab) => <TabPanel key={tab.id}>{tab.content}</TabPanel>),
     [enabledTabs]
   );
 
@@ -276,11 +249,7 @@ const InvokeTabs = () => {
               onExpand={optionsPanel.onExpand}
               collapsible
             >
-              {activeTabName === 'nodes' ? (
-                <NodeEditorPanelGroup />
-              ) : (
-                <ParametersPanel />
-              )}
+              {activeTabName === 'nodes' ? <NodeEditorPanelGroup /> : <ParametersPanel />}
             </Panel>
             <ResizeHandle
               id="options-main-handle"
@@ -316,12 +285,8 @@ const InvokeTabs = () => {
           </>
         )}
       </PanelGroup>
-      {shouldShowOptionsPanel && (
-        <FloatingParametersPanelButtons panelApi={optionsPanel} />
-      )}
-      {shouldShowGalleryPanel && (
-        <FloatingGalleryButton panelApi={galleryPanel} />
-      )}
+      {shouldShowOptionsPanel && <FloatingParametersPanelButtons panelApi={optionsPanel} />}
+      {shouldShowGalleryPanel && <FloatingGalleryButton panelApi={galleryPanel} />}
     </Tabs>
   );
 };
diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx
index 3551cd6cd1..d52b2d9000 100644
--- a/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx
@@ -22,28 +22,20 @@ const overlayScrollbarsStyles: CSSProperties = {
 
 const ParametersPanel = () => {
   const activeTabName = useAppSelector(activeTabNameSelector);
-  const isSDXL = useAppSelector(
-    (s) => s.generation.model?.base_model === 'sdxl'
-  );
+  const isSDXL = useAppSelector((s) => s.generation.model?.base_model === 'sdxl');
 
   return (
     <Flex w="full" h="full" flexDir="column" gap={2}>
       <QueueControls />
       <Flex w="full" h="full" position="relative">
         <Box position="absolute" top={0} left={0} right={0} bottom={0}>
-          <OverlayScrollbarsComponent
-            defer
-            style={overlayScrollbarsStyles}
-            options={overlayScrollbarsParams.options}
-          >
+          <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
             <Flex gap={2} flexDirection="column" h="full" w="full">
               {isSDXL ? <SDXLPrompts /> : <Prompts />}
               <ImageSettingsAccordion />
               <GenerationSettingsAccordion />
               <ControlSettingsAccordion />
-              {activeTabName === 'unifiedCanvas' && (
-                <CompositingSettingsAccordion />
-              )}
+              {activeTabName === 'unifiedCanvas' && <CompositingSettingsAccordion />}
               {isSDXL && <RefinerSettingsAccordion />}
               <AdvancedSettingsAccordion />
             </Flex>
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImageTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImageTab.tsx
index 2c32861b79..dcacdbdff4 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImageTab.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImageTab.tsx
@@ -37,25 +37,11 @@ const ImageToImageTab = () => {
         style={panelGroupStyles}
         storage={panelStorage}
       >
-        <Panel
-          id="imageTab.content.initImage"
-          order={0}
-          defaultSize={50}
-          minSize={25}
-          style={panelStyles}
-        >
+        <Panel id="imageTab.content.initImage" order={0} defaultSize={50} minSize={25} style={panelStyles}>
           <InitialImageDisplay />
         </Panel>
-        <ResizeHandle
-          orientation="vertical"
-          onDoubleClick={handleDoubleClickHandle}
-        />
-        <Panel
-          id="imageTab.content.selectedImage"
-          order={1}
-          defaultSize={50}
-          minSize={25}
-        >
+        <ResizeHandle orientation="vertical" onDoubleClick={handleDoubleClickHandle} />
+        <Panel id="imageTab.content.selectedImage" order={1} defaultSize={50} minSize={25}>
           <TextToImageTabMain />
         </Panel>
       </PanelGroup>
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx
index 5c21ff3549..124c9b31a5 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx
@@ -7,11 +7,7 @@ import type { ReactNode } from 'react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-type ModelManagerTabName =
-  | 'modelManager'
-  | 'importModels'
-  | 'mergeModels'
-  | 'settings';
+type ModelManagerTabName = 'modelManager' | 'importModels' | 'mergeModels' | 'settings';
 
 type ModelManagerTabInfo = {
   id: ModelManagerTabName;
@@ -48,16 +44,7 @@ const ModelManagerTab = () => {
     [t]
   );
   return (
-    <Tabs
-      isLazy
-      variant="line"
-      layerStyle="first"
-      w="full"
-      h="full"
-      p={4}
-      gap={4}
-      borderRadius="base"
-    >
+    <Tabs isLazy variant="line" layerStyle="first" w="full" h="full" p={4} gap={4} borderRadius="base">
       <TabList>
         {tabs.map((tab) => (
           <Tab borderTopRadius="base" key={tab.id}>
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ResizeHandle.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ResizeHandle.tsx
index 6f7ae7f549..b9c9b70c94 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ResizeHandle.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ResizeHandle.tsx
@@ -17,10 +17,7 @@ const ResizeHandle = (props: ResizeHandleProps) => {
     <ChakraPanelResizeHandle {...rest}>
       <Flex sx={sx} data-orientation={orientation}>
         <Box className="resize-handle-inner" data-orientation={orientation} />
-        <Box
-          className="resize-handle-drag-handle"
-          data-orientation={orientation}
-        />
+        <Box className="resize-handle-drag-handle" data-orientation={orientation} />
       </Flex>
     </ChakraPanelResizeHandle>
   );
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImageTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImageTab.tsx
index 2310be4f1d..fd38514edc 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImageTab.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImageTab.tsx
@@ -4,14 +4,7 @@ import { memo } from 'react';
 
 const TextToImageTab = () => {
   return (
-    <Box
-      layerStyle="first"
-      position="relative"
-      w="full"
-      h="full"
-      p={2}
-      borderRadius="base"
-    >
+    <Box layerStyle="first" position="relative" w="full" h="full" p={2} borderRadius="base">
       <Flex w="full" h="full">
         <CurrentImageDisplay />
       </Flex>
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvasTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvasTab.tsx
index 1ab25c0507..0f594ed705 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvasTab.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvasTab.tsx
@@ -41,10 +41,7 @@ const UnifiedCanvasTab = () => {
       <IAICanvasToolbar />
       <IAICanvas />
       {isValidDrop(droppableData, active) && (
-        <IAIDropOverlay
-          isOver={isOver}
-          label={t('toast.setCanvasInitialImage')}
-        />
+        <IAIDropOverlay isOver={isOver} label={t('toast.setCanvasInitialImage')} />
       )}
     </Flex>
   );
diff --git a/invokeai/frontend/web/src/features/ui/hooks/usePanel.ts b/invokeai/frontend/web/src/features/ui/hooks/usePanel.ts
index d602ffc0e6..efb0f3cdd1 100644
--- a/invokeai/frontend/web/src/features/ui/hooks/usePanel.ts
+++ b/invokeai/frontend/web/src/features/ui/hooks/usePanel.ts
@@ -6,10 +6,7 @@ import type {
   PanelOnCollapse,
   PanelOnExpand,
 } from 'react-resizable-panels';
-import {
-  getPanelGroupElement,
-  getResizeHandleElementsForGroup,
-} from 'react-resizable-panels';
+import { getPanelGroupElement, getResizeHandleElementsForGroup } from 'react-resizable-panels';
 
 type Direction = 'horizontal' | 'vertical';
 
@@ -96,9 +93,7 @@ export type UsePanelReturn = {
 
 export const usePanel = (arg: UsePanelOptions): UsePanelReturn => {
   const panelHandleRef = useRef<ImperativePanelHandle>(null);
-  const [_minSize, _setMinSize] = useState<number>(
-    arg.unit === 'percentages' ? arg.minSize : 0
-  );
+  const [_minSize, _setMinSize] = useState<number>(arg.unit === 'percentages' ? arg.minSize : 0);
 
   // If the units are pixels, we need to calculate the min size as a percentage of the available space,
   // then resize the panel if it is too small.
@@ -117,11 +112,7 @@ export const usePanel = (arg: UsePanelOptions): UsePanelReturn => {
         return;
       }
 
-      const minSizePct = getSizeAsPercentage(
-        arg.minSize,
-        arg.panelGroupRef,
-        arg.panelGroupDirection
-      );
+      const minSizePct = getSizeAsPercentage(arg.minSize, arg.panelGroupRef, arg.panelGroupDirection);
 
       _setMinSize(minSizePct);
 
@@ -140,11 +131,7 @@ export const usePanel = (arg: UsePanelOptions): UsePanelReturn => {
     panelGroupHandleElements.forEach((el) => resizeObserver.observe(el));
 
     // Resize the panel to the min size once on startup
-    const minSizePct = getSizeAsPercentage(
-      arg.minSize,
-      arg.panelGroupRef,
-      arg.panelGroupDirection
-    );
+    const minSizePct = getSizeAsPercentage(arg.minSize, arg.panelGroupRef, arg.panelGroupDirection);
     panelHandleRef.current?.resize(minSizePct);
 
     return () => {
@@ -152,9 +139,7 @@ export const usePanel = (arg: UsePanelOptions): UsePanelReturn => {
     };
   }, [arg]);
 
-  const [isCollapsed, setIsCollapsed] = useState(() =>
-    Boolean(panelHandleRef.current?.isCollapsed())
-  );
+  const [isCollapsed, setIsCollapsed] = useState(() => Boolean(panelHandleRef.current?.isCollapsed()));
 
   const onCollapse = useCallback<PanelOnCollapse>(() => {
     setIsCollapsed(true);
@@ -189,11 +174,7 @@ export const usePanel = (arg: UsePanelOptions): UsePanelReturn => {
       }
 
       // If we are using pixels, we need to calculate the size as a percentage of the available space
-      const sizeAsPct = getSizeAsPercentage(
-        size,
-        arg.panelGroupRef,
-        arg.panelGroupDirection
-      );
+      const sizeAsPct = getSizeAsPercentage(size, arg.panelGroupRef, arg.panelGroupDirection);
       panelHandleRef.current?.resize(sizeAsPct);
     },
     [arg]
@@ -254,14 +235,11 @@ const getSizeAsPercentage = (
 
   // The available space is the width/height of the panel group...
   let availableSpace =
-    panelGroupDirection === 'horizontal'
-      ? panelGroupElement.offsetWidth
-      : panelGroupElement.offsetHeight;
+    panelGroupDirection === 'horizontal' ? panelGroupElement.offsetWidth : panelGroupElement.offsetHeight;
 
   // ...minus the width/height of the resize handles
   getResizeHandleElementsForGroup(id).forEach((el) => {
-    availableSpace -=
-      panelGroupDirection === 'horizontal' ? el.offsetWidth : el.offsetHeight;
+    availableSpace -= panelGroupDirection === 'horizontal' ? el.offsetWidth : el.offsetHeight;
   });
 
   // The final value is a percentage of the available space
diff --git a/invokeai/frontend/web/src/features/ui/store/tabMap.ts b/invokeai/frontend/web/src/features/ui/store/tabMap.ts
index f4abd17203..a25d98187b 100644
--- a/invokeai/frontend/web/src/features/ui/store/tabMap.ts
+++ b/invokeai/frontend/web/src/features/ui/store/tabMap.ts
@@ -1,10 +1,3 @@
-export const tabMap = [
-  'txt2img',
-  'img2img',
-  'unifiedCanvas',
-  'nodes',
-  'modelManager',
-  'queue',
-] as const;
+export const tabMap = ['txt2img', 'img2img', 'unifiedCanvas', 'nodes', 'modelManager', 'queue'] as const;
 
 export type InvokeTabName = (typeof tabMap)[number];
diff --git a/invokeai/frontend/web/src/features/ui/store/uiSelectors.ts b/invokeai/frontend/web/src/features/ui/store/uiSelectors.ts
index 7556adef79..07f3a99224 100644
--- a/invokeai/frontend/web/src/features/ui/store/uiSelectors.ts
+++ b/invokeai/frontend/web/src/features/ui/store/uiSelectors.ts
@@ -14,12 +14,8 @@ export const activeTabNameSelector = createSelector(
   (ui) => (isString(ui.activeTab) ? ui.activeTab : 'txt2img')
 );
 
-export const activeTabIndexSelector = createSelector(
-  selectUiSlice,
-  selectConfigSlice,
-  (ui, config) => {
-    const tabs = tabMap.filter((t) => !config.disabledTabs.includes(t));
-    const idx = tabs.indexOf(ui.activeTab);
-    return idx === -1 ? 0 : idx;
-  }
-);
+export const activeTabIndexSelector = createSelector(selectUiSlice, selectConfigSlice, (ui, config) => {
+  const tabs = tabMap.filter((t) => !config.disabledTabs.includes(t));
+  const idx = tabs.indexOf(ui.activeTab);
+  return idx === -1 ? 0 : idx;
+});
diff --git a/invokeai/frontend/web/src/features/ui/store/uiSlice.ts b/invokeai/frontend/web/src/features/ui/store/uiSlice.ts
index 51262b9b90..acca0ad67b 100644
--- a/invokeai/frontend/web/src/features/ui/store/uiSlice.ts
+++ b/invokeai/frontend/web/src/features/ui/store/uiSlice.ts
@@ -29,23 +29,14 @@ export const uiSlice = createSlice({
     setShouldShowProgressInViewer: (state, action: PayloadAction<boolean>) => {
       state.shouldShowProgressInViewer = action.payload;
     },
-    panelsChanged: (
-      state,
-      action: PayloadAction<{ name: string; value: string }>
-    ) => {
+    panelsChanged: (state, action: PayloadAction<{ name: string; value: string }>) => {
       state.panels[action.payload.name] = action.payload.value;
     },
-    accordionStateChanged: (
-      state,
-      action: PayloadAction<{ id: string; isOpen: boolean }>
-    ) => {
+    accordionStateChanged: (state, action: PayloadAction<{ id: string; isOpen: boolean }>) => {
       const { id, isOpen } = action.payload;
       state.accordions[id] = isOpen;
     },
-    expanderStateChanged: (
-      state,
-      action: PayloadAction<{ id: string; isOpen: boolean }>
-    ) => {
+    expanderStateChanged: (state, action: PayloadAction<{ id: string; isOpen: boolean }>) => {
       const { id, isOpen } = action.payload;
       state.expanders[id] = isOpen;
     },
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx
index 8f7cebfcae..f128505dbe 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx
@@ -12,11 +12,7 @@ const WorkflowLibraryButton = () => {
 
   return (
     <WorkflowLibraryModalContext.Provider value={disclosure}>
-      <Button
-        leftIcon={<PiBooksBold />}
-        onClick={disclosure.onOpen}
-        pointerEvents="auto"
-      >
+      <Button leftIcon={<PiBooksBold />} onClick={disclosure.onOpen} pointerEvents="auto">
         {t('workflows.workflowLibrary')}
       </Button>
       <WorkflowLibraryModal />
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx
index 5ce3d36a97..c653870af1 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx
@@ -15,10 +15,7 @@ import {
 import { useStore } from '@nanostores/react';
 import { $projectId } from 'app/store/nanostores/projectId';
 import { $workflowCategories } from 'app/store/nanostores/workflowCategories';
-import {
-  IAINoContentFallback,
-  IAINoContentFallbackWithSpinner,
-} from 'common/components/IAIImageFallback';
+import { IAINoContentFallback, IAINoContentFallbackWithSpinner } from 'common/components/IAIImageFallback';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import type { WorkflowCategory } from 'features/nodes/types/workflow';
 import WorkflowLibraryListItem from 'features/workflowLibrary/components/WorkflowLibraryListItem';
@@ -28,10 +25,7 @@ import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiXBold } from 'react-icons/pi';
 import { useListWorkflowsQuery } from 'services/api/endpoints/workflows';
-import type {
-  SQLiteDirection,
-  WorkflowRecordOrderBy,
-} from 'services/api/types';
+import type { SQLiteDirection, WorkflowRecordOrderBy } from 'services/api/types';
 import { useDebounce } from 'use-debounce';
 import { z } from 'zod';
 
@@ -49,8 +43,7 @@ const ORDER_BY_OPTIONS: ComboboxOption[] = [
 
 const zDirection = z.enum(['ASC', 'DESC']);
 type Direction = z.infer<typeof zDirection>;
-const isDirection = (v: unknown): v is Direction =>
-  zDirection.safeParse(v).success;
+const isDirection = (v: unknown): v is Direction => zDirection.safeParse(v).success;
 const DIRECTION_OPTIONS: ComboboxOption[] = [
   { value: 'ASC', label: 'Ascending' },
   { value: 'DESC', label: 'Descending' },
@@ -59,21 +52,16 @@ const DIRECTION_OPTIONS: ComboboxOption[] = [
 const WorkflowLibraryList = () => {
   const { t } = useTranslation();
   const workflowCategories = useStore($workflowCategories);
-  const [selectedCategory, setSelectedCategory] =
-    useState<WorkflowCategory>('user');
+  const [selectedCategory, setSelectedCategory] = useState<WorkflowCategory>('user');
   const [page, setPage] = useState(0);
   const [query, setQuery] = useState('');
   const projectId = useStore($projectId);
 
   const orderByOptions = useMemo(() => {
-    return projectId
-      ? ORDER_BY_OPTIONS.filter((option) => option.value !== 'opened_at')
-      : ORDER_BY_OPTIONS;
+    return projectId ? ORDER_BY_OPTIONS.filter((option) => option.value !== 'opened_at') : ORDER_BY_OPTIONS;
   }, [projectId]);
 
-  const [order_by, setOrderBy] = useState<WorkflowRecordOrderBy>(
-    orderByOptions[0]?.value as WorkflowRecordOrderBy
-  );
+  const [order_by, setOrderBy] = useState<WorkflowRecordOrderBy>(orderByOptions[0]?.value as WorkflowRecordOrderBy);
   const [direction, setDirection] = useState<SQLiteDirection>('ASC');
   const [debouncedQuery] = useDebounce(query, 500);
 
@@ -98,8 +86,7 @@ const WorkflowLibraryList = () => {
     };
   }, [selectedCategory, debouncedQuery, direction, order_by, page]);
 
-  const { data, isLoading, isError, isFetching } =
-    useListWorkflowsQuery(queryArg);
+  const { data, isLoading, isError, isFetching } = useListWorkflowsQuery(queryArg);
 
   const onChangeOrderBy = useCallback<ComboboxOnChange>(
     (v) => {
@@ -111,10 +98,7 @@ const WorkflowLibraryList = () => {
     },
     [order_by]
   );
-  const valueOrderBy = useMemo(
-    () => orderByOptions.find((o) => o.value === order_by),
-    [order_by, orderByOptions]
-  );
+  const valueOrderBy = useMemo(() => orderByOptions.find((o) => o.value === order_by), [order_by, orderByOptions]);
 
   const onChangeDirection = useCallback<ComboboxOnChange>(
     (v) => {
@@ -126,10 +110,7 @@ const WorkflowLibraryList = () => {
     },
     [direction]
   );
-  const valueDirection = useMemo(
-    () => DIRECTION_OPTIONS.find((o) => o.value === direction),
-    [direction]
-  );
+  const valueDirection = useMemo(() => DIRECTION_OPTIONS.find((o) => o.value === direction), [direction]);
 
   const resetFilterText = useCallback(() => {
     setQuery('');
@@ -148,13 +129,10 @@ const WorkflowLibraryList = () => {
     [resetFilterText]
   );
 
-  const handleChangeFilterText = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => {
-      setQuery(e.target.value);
-      setPage(0);
-    },
-    []
-  );
+  const handleChangeFilterText = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    setQuery(e.target.value);
+    setPage(0);
+  }, []);
 
   const handleSetCategory = useCallback((category: WorkflowCategory) => {
     setSelectedCategory(category);
@@ -163,14 +141,7 @@ const WorkflowLibraryList = () => {
 
   return (
     <>
-      <Flex
-        gap={4}
-        alignItems="center"
-        h={16}
-        flexShrink={0}
-        flexGrow={0}
-        justifyContent="space-between"
-      >
+      <Flex gap={4} alignItems="center" h={16} flexShrink={0} flexGrow={0} justifyContent="space-between">
         <ButtonGroup alignSelf="flex-end">
           {workflowCategories.map((category) => (
             <Button
@@ -195,11 +166,7 @@ const WorkflowLibraryList = () => {
               }}
             >
               <FormLabel>{t('common.orderBy')}</FormLabel>
-              <Combobox
-                value={valueOrderBy}
-                options={orderByOptions}
-                onChange={onChangeOrderBy}
-              />
+              <Combobox value={valueOrderBy} options={orderByOptions} onChange={onChangeOrderBy} />
             </FormControl>
             <FormControl
               isDisabled={isFetching}
@@ -211,11 +178,7 @@ const WorkflowLibraryList = () => {
               }}
             >
               <FormLabel>{t('common.direction')}</FormLabel>
-              <Combobox
-                value={valueDirection}
-                options={DIRECTION_OPTIONS}
-                onChange={onChangeDirection}
-              />
+              <Combobox value={valueDirection} options={DIRECTION_OPTIONS} onChange={onChangeDirection} />
             </FormControl>
           </>
         )}
@@ -260,11 +223,7 @@ const WorkflowLibraryList = () => {
       <Divider />
       {data && (
         <Flex w="full" justifyContent="space-around">
-          <WorkflowLibraryPagination
-            data={data}
-            page={page}
-            setPage={setPage}
-          />
+          <WorkflowLibraryPagination data={data} page={page} setPage={setPage} />
         </Flex>
       )}
     </>
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx
index 3ffd25281d..11a9530cad 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx
@@ -17,8 +17,7 @@ const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
   const workflowId = useAppSelector((s) => s.workflow.id);
   const { onClose } = useWorkflowLibraryModalContext();
   const { deleteWorkflow, deleteWorkflowResult } = useDeleteLibraryWorkflow({});
-  const { getAndLoadWorkflow, getAndLoadWorkflowResult } =
-    useGetAndLoadLibraryWorkflow({ onSuccess: onClose });
+  const { getAndLoadWorkflow, getAndLoadWorkflowResult } = useGetAndLoadLibraryWorkflow({ onSuccess: onClose });
 
   const handleDeleteWorkflow = useCallback(() => {
     deleteWorkflow(workflowDTO.workflow_id);
@@ -28,39 +27,20 @@ const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
     getAndLoadWorkflow(workflowDTO.workflow_id);
   }, [getAndLoadWorkflow, workflowDTO.workflow_id]);
 
-  const isOpen = useMemo(
-    () => workflowId === workflowDTO.workflow_id,
-    [workflowId, workflowDTO.workflow_id]
-  );
+  const isOpen = useMemo(() => workflowId === workflowDTO.workflow_id, [workflowId, workflowDTO.workflow_id]);
 
   return (
-    <Flex
-      key={workflowDTO.workflow_id}
-      w="full"
-      p={2}
-      borderRadius="base"
-      _hover={{ bg: 'base.750' }}
-    >
+    <Flex key={workflowDTO.workflow_id} w="full" p={2} borderRadius="base" _hover={{ bg: 'base.750' }}>
       <Flex w="full" alignItems="center" gap={2} h={12}>
         <Flex flexDir="column" flexGrow={1} h="full">
           <Flex alignItems="center" w="full" h="50%">
-            <Heading
-              size="sm"
-              noOfLines={1}
-              variant={isOpen ? 'invokeBlue' : undefined}
-            >
+            <Heading size="sm" noOfLines={1} variant={isOpen ? 'invokeBlue' : undefined}>
               {workflowDTO.name || t('workflows.unnamedWorkflow')}
             </Heading>
             <Spacer />
             {workflowDTO.category !== 'default' && (
-              <Text
-                fontSize="sm"
-                variant="subtext"
-                flexShrink={0}
-                noOfLines={1}
-              >
-                {t('common.updated')}:{' '}
-                {dateFormat(workflowDTO.updated_at, masks.shortDate)}{' '}
+              <Text fontSize="sm" variant="subtext" flexShrink={0} noOfLines={1}>
+                {t('common.updated')}: {dateFormat(workflowDTO.updated_at, masks.shortDate)}{' '}
                 {dateFormat(workflowDTO.updated_at, masks.shortTime)}
               </Text>
             )}
@@ -71,25 +51,14 @@ const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
                 {workflowDTO.description}
               </Text>
             ) : (
-              <Text
-                fontSize="sm"
-                variant="subtext"
-                fontStyle="italic"
-                noOfLines={1}
-              >
+              <Text fontSize="sm" variant="subtext" fontStyle="italic" noOfLines={1}>
                 {t('workflows.noDescription')}
               </Text>
             )}
             <Spacer />
             {workflowDTO.category !== 'default' && (
-              <Text
-                fontSize="sm"
-                variant="subtext"
-                flexShrink={0}
-                noOfLines={1}
-              >
-                {t('common.created')}:{' '}
-                {dateFormat(workflowDTO.created_at, masks.shortDate)}{' '}
+              <Text fontSize="sm" variant="subtext" flexShrink={0} noOfLines={1}>
+                {t('common.created')}: {dateFormat(workflowDTO.created_at, masks.shortDate)}{' '}
                 {dateFormat(workflowDTO.created_at, masks.shortTime)}
               </Text>
             )}
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListWrapper.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListWrapper.tsx
index 157e552240..2a53ca787e 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListWrapper.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListWrapper.tsx
@@ -4,16 +4,7 @@ import { memo } from 'react';
 
 const WorkflowLibraryListWrapper = (props: PropsWithChildren) => {
   return (
-    <Flex
-      w="full"
-      h="full"
-      flexDir="column"
-      layerStyle="second"
-      py={2}
-      px={4}
-      gap={2}
-      borderRadius="base"
-    >
+    <Flex w="full" h="full" flexDir="column" layerStyle="second" py={2} px={4} gap={2} borderRadius="base">
       {props.children}
     </Flex>
   );
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/DownloadWorkflowMenuItem.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/DownloadWorkflowMenuItem.tsx
index add85d9e8a..485c4c9a3c 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/DownloadWorkflowMenuItem.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/DownloadWorkflowMenuItem.tsx
@@ -9,11 +9,7 @@ const DownloadWorkflowMenuItem = () => {
   const downloadWorkflow = useDownloadWorkflow();
 
   return (
-    <MenuItem
-      as="button"
-      icon={<PiDownloadSimpleBold />}
-      onClick={downloadWorkflow}
-    >
+    <MenuItem as="button" icon={<PiDownloadSimpleBold />} onClick={downloadWorkflow}>
       {t('workflows.downloadWorkflow')}
     </MenuItem>
   );
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/NewWorkflowMenuItem.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/NewWorkflowMenuItem.tsx
index 1c41c7be9e..8a41efc1b8 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/NewWorkflowMenuItem.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/NewWorkflowMenuItem.tsx
@@ -1,10 +1,4 @@
-import {
-  ConfirmationAlertDialog,
-  Flex,
-  MenuItem,
-  Text,
-  useDisclosure,
-} from '@invoke-ai/ui-library';
+import { ConfirmationAlertDialog, Flex, MenuItem, Text, useDisclosure } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { nodeEditorReset } from 'features/nodes/store/nodesSlice';
 import { addToast } from 'features/system/store/systemSlice';
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowAsMenuItem.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowAsMenuItem.tsx
index d57d76da2b..55add16267 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowAsMenuItem.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowAsMenuItem.tsx
@@ -1,11 +1,4 @@
-import {
-  ConfirmationAlertDialog,
-  FormControl,
-  FormLabel,
-  Input,
-  MenuItem,
-  useDisclosure,
-} from '@invoke-ai/ui-library';
+import { ConfirmationAlertDialog, FormControl, FormLabel, Input, MenuItem, useDisclosure } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useSaveWorkflowAs } from 'features/workflowLibrary/hooks/useSaveWorkflowAs';
 import { getWorkflowCopyName } from 'features/workflowLibrary/util/getWorkflowCopyName';
@@ -50,12 +43,7 @@ const SaveWorkflowAsButton = () => {
       >
         <FormControl>
           <FormLabel>{t('workflows.workflowName')}</FormLabel>
-          <Input
-            ref={inputRef}
-            value={name}
-            onChange={onChange}
-            placeholder={t('workflows.workflowName')}
-          />
+          <Input ref={inputRef} value={name} onChange={onChange} placeholder={t('workflows.workflowName')} />
         </FormControl>
       </ConfirmationAlertDialog>
     </>
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu.tsx
index 771a682854..158eb73edc 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu.tsx
@@ -23,8 +23,7 @@ const WorkflowLibraryMenu = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   useGlobalMenuClose(onClose);
 
-  const isWorkflowLibraryEnabled =
-    useFeatureStatus('workflowLibrary').isFeatureEnabled;
+  const isWorkflowLibraryEnabled = useFeatureStatus('workflowLibrary').isFeatureEnabled;
 
   return (
     <Menu isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx
index ae8386e392..7aaac5ec14 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx
@@ -18,14 +18,7 @@ const WorkflowLibraryModal = () => {
   return (
     <Modal isOpen={isOpen} onClose={onClose} isCentered>
       <ModalOverlay />
-      <ModalContent
-        w="80%"
-        h="80%"
-        minW="unset"
-        minH="unset"
-        maxW="1200px"
-        maxH="664px"
-      >
+      <ModalContent w="80%" h="80%" minW="unset" minH="unset" maxW="1200px" maxH="664px">
         <ModalHeader>{t('workflows.workflowLibrary')}</ModalHeader>
         <ModalCloseButton />
         <ModalBody>
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryPagination.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryPagination.tsx
index 5664255fab..f2b6d958ab 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryPagination.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryPagination.tsx
@@ -31,14 +31,8 @@ const WorkflowLibraryPagination = ({ page, setPage, data }: Props) => {
 
   const pages: PageData[] = useMemo(() => {
     const pages = [];
-    let first =
-      data.pages > PAGES_TO_DISPLAY
-        ? Math.max(0, page - Math.floor(PAGES_TO_DISPLAY / 2))
-        : 0;
-    const last =
-      data.pages > PAGES_TO_DISPLAY
-        ? Math.min(data.pages, first + PAGES_TO_DISPLAY)
-        : data.pages;
+    let first = data.pages > PAGES_TO_DISPLAY ? Math.max(0, page - Math.floor(PAGES_TO_DISPLAY / 2)) : 0;
+    const last = data.pages > PAGES_TO_DISPLAY ? Math.min(data.pages, first + PAGES_TO_DISPLAY) : data.pages;
     if (last - first < PAGES_TO_DISPLAY && data.pages > PAGES_TO_DISPLAY) {
       first = last - PAGES_TO_DISPLAY;
     }
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/context/WorkflowLibraryModalContext.ts b/invokeai/frontend/web/src/features/workflowLibrary/context/WorkflowLibraryModalContext.ts
index 0b3c4f7512..1da2fbee9c 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/context/WorkflowLibraryModalContext.ts
+++ b/invokeai/frontend/web/src/features/workflowLibrary/context/WorkflowLibraryModalContext.ts
@@ -1,5 +1,4 @@
 import type { UseDisclosureReturn } from '@invoke-ai/ui-library';
 import { createContext } from 'react';
 
-export const WorkflowLibraryModalContext =
-  createContext<UseDisclosureReturn | null>(null);
+export const WorkflowLibraryModalContext = createContext<UseDisclosureReturn | null>(null);
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/context/useWorkflowLibraryModalContext.ts b/invokeai/frontend/web/src/features/workflowLibrary/context/useWorkflowLibraryModalContext.ts
index 11b0771643..27987834c8 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/context/useWorkflowLibraryModalContext.ts
+++ b/invokeai/frontend/web/src/features/workflowLibrary/context/useWorkflowLibraryModalContext.ts
@@ -4,9 +4,7 @@ import { useContext } from 'react';
 export const useWorkflowLibraryModalContext = () => {
   const context = useContext(WorkflowLibraryModalContext);
   if (!context) {
-    throw new Error(
-      'useWorkflowLibraryContext must be used within a WorkflowLibraryContext.Provider'
-    );
+    throw new Error('useWorkflowLibraryContext must be used within a WorkflowLibraryContext.Provider');
   }
   return context;
 };
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useDeleteLibraryWorkflow.ts b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useDeleteLibraryWorkflow.ts
index c7d8ae39a4..7d2c636e9c 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useDeleteLibraryWorkflow.ts
+++ b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useDeleteLibraryWorkflow.ts
@@ -2,10 +2,7 @@ import { useToast } from '@invoke-ai/ui-library';
 import { useAppToaster } from 'app/components/Toaster';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  useDeleteWorkflowMutation,
-  workflowsApi,
-} from 'services/api/endpoints/workflows';
+import { useDeleteWorkflowMutation, workflowsApi } from 'services/api/endpoints/workflows';
 
 type UseDeleteLibraryWorkflowOptions = {
   onSuccess?: () => void;
@@ -17,14 +14,9 @@ type UseDeleteLibraryWorkflowReturn = {
   deleteWorkflowResult: ReturnType<typeof useDeleteWorkflowMutation>[1];
 };
 
-type UseDeleteLibraryWorkflow = (
-  arg: UseDeleteLibraryWorkflowOptions
-) => UseDeleteLibraryWorkflowReturn;
+type UseDeleteLibraryWorkflow = (arg: UseDeleteLibraryWorkflowOptions) => UseDeleteLibraryWorkflowReturn;
 
-export const useDeleteLibraryWorkflow: UseDeleteLibraryWorkflow = ({
-  onSuccess,
-  onError,
-}) => {
+export const useDeleteLibraryWorkflow: UseDeleteLibraryWorkflow = ({ onSuccess, onError }) => {
   const toaster = useAppToaster();
   const toast = useToast();
   const { t } = useTranslation();
@@ -39,11 +31,7 @@ export const useDeleteLibraryWorkflow: UseDeleteLibraryWorkflow = ({
         });
         onSuccess && onSuccess();
       } catch {
-        if (
-          !toast.isActive(
-            `auth-error-toast-${workflowsApi.endpoints.deleteWorkflow.name}`
-          )
-        ) {
+        if (!toast.isActive(`auth-error-toast-${workflowsApi.endpoints.deleteWorkflow.name}`)) {
           toaster({
             title: t('toast.problemDeletingWorkflow'),
             status: 'error',
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useGetAndLoadEmbeddedWorkflow.ts b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useGetAndLoadEmbeddedWorkflow.ts
index a1292fce55..b55a01dd6d 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useGetAndLoadEmbeddedWorkflow.ts
+++ b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useGetAndLoadEmbeddedWorkflow.ts
@@ -12,31 +12,23 @@ type UseGetAndLoadEmbeddedWorkflowOptions = {
 
 type UseGetAndLoadEmbeddedWorkflowReturn = {
   getAndLoadEmbeddedWorkflow: (imageName: string) => Promise<void>;
-  getAndLoadEmbeddedWorkflowResult: ReturnType<
-    typeof useLazyGetImageWorkflowQuery
-  >[1];
+  getAndLoadEmbeddedWorkflowResult: ReturnType<typeof useLazyGetImageWorkflowQuery>[1];
 };
 
 type UseGetAndLoadEmbeddedWorkflow = (
   options: UseGetAndLoadEmbeddedWorkflowOptions
 ) => UseGetAndLoadEmbeddedWorkflowReturn;
 
-export const useGetAndLoadEmbeddedWorkflow: UseGetAndLoadEmbeddedWorkflow = ({
-  onSuccess,
-  onError,
-}) => {
+export const useGetAndLoadEmbeddedWorkflow: UseGetAndLoadEmbeddedWorkflow = ({ onSuccess, onError }) => {
   const dispatch = useAppDispatch();
   const toaster = useAppToaster();
   const { t } = useTranslation();
-  const [_getAndLoadEmbeddedWorkflow, getAndLoadEmbeddedWorkflowResult] =
-    useLazyGetImageWorkflowQuery();
+  const [_getAndLoadEmbeddedWorkflow, getAndLoadEmbeddedWorkflowResult] = useLazyGetImageWorkflowQuery();
   const getAndLoadEmbeddedWorkflow = useCallback(
     async (imageName: string) => {
       try {
         const workflow = await _getAndLoadEmbeddedWorkflow(imageName);
-        dispatch(
-          workflowLoadRequested({ workflow: workflow.data, asCopy: true })
-        );
+        dispatch(workflowLoadRequested({ workflow: workflow.data, asCopy: true }));
         // No toast - the listener for this action does that after the workflow is loaded
         onSuccess && onSuccess();
       } catch {
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useGetAndLoadLibraryWorkflow.ts b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useGetAndLoadLibraryWorkflow.ts
index 62786e4405..ca4e72e34c 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useGetAndLoadLibraryWorkflow.ts
+++ b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useGetAndLoadLibraryWorkflow.ts
@@ -4,10 +4,7 @@ import { useAppDispatch } from 'app/store/storeHooks';
 import { workflowLoadRequested } from 'features/nodes/store/actions';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  useLazyGetWorkflowQuery,
-  workflowsApi,
-} from 'services/api/endpoints/workflows';
+import { useLazyGetWorkflowQuery, workflowsApi } from 'services/api/endpoints/workflows';
 
 type UseGetAndLoadLibraryWorkflowOptions = {
   onSuccess?: () => void;
@@ -19,35 +16,23 @@ type UseGetAndLoadLibraryWorkflowReturn = {
   getAndLoadWorkflowResult: ReturnType<typeof useLazyGetWorkflowQuery>[1];
 };
 
-type UseGetAndLoadLibraryWorkflow = (
-  arg: UseGetAndLoadLibraryWorkflowOptions
-) => UseGetAndLoadLibraryWorkflowReturn;
+type UseGetAndLoadLibraryWorkflow = (arg: UseGetAndLoadLibraryWorkflowOptions) => UseGetAndLoadLibraryWorkflowReturn;
 
-export const useGetAndLoadLibraryWorkflow: UseGetAndLoadLibraryWorkflow = ({
-  onSuccess,
-  onError,
-}) => {
+export const useGetAndLoadLibraryWorkflow: UseGetAndLoadLibraryWorkflow = ({ onSuccess, onError }) => {
   const dispatch = useAppDispatch();
   const toaster = useAppToaster();
   const toast = useToast();
   const { t } = useTranslation();
-  const [_getAndLoadWorkflow, getAndLoadWorkflowResult] =
-    useLazyGetWorkflowQuery();
+  const [_getAndLoadWorkflow, getAndLoadWorkflowResult] = useLazyGetWorkflowQuery();
   const getAndLoadWorkflow = useCallback(
     async (workflow_id: string) => {
       try {
         const data = await _getAndLoadWorkflow(workflow_id).unwrap();
-        dispatch(
-          workflowLoadRequested({ workflow: data.workflow, asCopy: false })
-        );
+        dispatch(workflowLoadRequested({ workflow: data.workflow, asCopy: false }));
         // No toast - the listener for this action does that after the workflow is loaded
         onSuccess && onSuccess();
       } catch {
-        if (
-          !toast.isActive(
-            `auth-error-toast-${workflowsApi.endpoints.getWorkflow.name}`
-          )
-        ) {
+        if (!toast.isActive(`auth-error-toast-${workflowsApi.endpoints.getWorkflow.name}`)) {
           toaster({
             title: t('toast.problemRetrievingWorkflow'),
             status: 'error',
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useLoadWorkflowFromFile.tsx b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useLoadWorkflowFromFile.tsx
index 91451ac68b..a6f5f16497 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useLoadWorkflowFromFile.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useLoadWorkflowFromFile.tsx
@@ -11,13 +11,9 @@ type useLoadWorkflowFromFileOptions = {
   resetRef: RefObject<() => void>;
 };
 
-type UseLoadWorkflowFromFile = (
-  options: useLoadWorkflowFromFileOptions
-) => (file: File | null) => void;
+type UseLoadWorkflowFromFile = (options: useLoadWorkflowFromFileOptions) => (file: File | null) => void;
 
-export const useLoadWorkflowFromFile: UseLoadWorkflowFromFile = ({
-  resetRef,
-}) => {
+export const useLoadWorkflowFromFile: UseLoadWorkflowFromFile = ({ resetRef }) => {
   const dispatch = useAppDispatch();
   const logger = useLogger('nodes');
   const { t } = useTranslation();
@@ -32,9 +28,7 @@ export const useLoadWorkflowFromFile: UseLoadWorkflowFromFile = ({
 
         try {
           const parsedJSON = JSON.parse(String(rawJSON));
-          dispatch(
-            workflowLoadRequested({ workflow: parsedJSON, asCopy: true })
-          );
+          dispatch(workflowLoadRequested({ workflow: parsedJSON, asCopy: true }));
         } catch (e) {
           // There was a problem reading the file
           logger.error(t('nodes.unableToLoadWorkflow'));
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflow.ts b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflow.ts
index 0e75417742..15d0fc650e 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflow.ts
+++ b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflow.ts
@@ -2,18 +2,11 @@ import type { ToastId } from '@invoke-ai/ui-library';
 import { useToast } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { $builtWorkflow } from 'features/nodes/hooks/useWorkflowWatcher';
-import {
-  workflowIDChanged,
-  workflowSaved,
-} from 'features/nodes/store/workflowSlice';
+import { workflowIDChanged, workflowSaved } from 'features/nodes/store/workflowSlice';
 import type { WorkflowV2 } from 'features/nodes/types/workflow';
 import { useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  useCreateWorkflowMutation,
-  useUpdateWorkflowMutation,
-  workflowsApi,
-} from 'services/api/endpoints/workflows';
+import { useCreateWorkflowMutation, useUpdateWorkflowMutation, workflowsApi } from 'services/api/endpoints/workflows';
 import type { O } from 'ts-toolbelt';
 
 type UseSaveLibraryWorkflowReturn = {
@@ -24,9 +17,7 @@ type UseSaveLibraryWorkflowReturn = {
 
 type UseSaveLibraryWorkflow = () => UseSaveLibraryWorkflowReturn;
 
-const isWorkflowWithID = (
-  workflow: WorkflowV2
-): workflow is O.Required<WorkflowV2, 'id'> => Boolean(workflow.id);
+const isWorkflowWithID = (workflow: WorkflowV2): workflow is O.Required<WorkflowV2, 'id'> => Boolean(workflow.id);
 
 export const useSaveLibraryWorkflow: UseSaveLibraryWorkflow = () => {
   const { t } = useTranslation();
@@ -62,12 +53,8 @@ export const useSaveLibraryWorkflow: UseSaveLibraryWorkflow = () => {
       });
     } catch (e) {
       if (
-        !toast.isActive(
-          `auth-error-toast-${workflowsApi.endpoints.createWorkflow.name}`
-        ) &&
-        !toast.isActive(
-          `auth-error-toast-${workflowsApi.endpoints.updateWorkflow.name}`
-        )
+        !toast.isActive(`auth-error-toast-${workflowsApi.endpoints.createWorkflow.name}`) &&
+        !toast.isActive(`auth-error-toast-${workflowsApi.endpoints.updateWorkflow.name}`)
       ) {
         toast.update(toastRef.current, {
           title: t('workflows.problemSavingWorkflow'),
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflowAs.ts b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflowAs.ts
index 925984c56e..c24961b918 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflowAs.ts
+++ b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflowAs.ts
@@ -2,17 +2,10 @@ import type { ToastId } from '@invoke-ai/ui-library';
 import { useToast } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { $builtWorkflow } from 'features/nodes/hooks/useWorkflowWatcher';
-import {
-  workflowIDChanged,
-  workflowNameChanged,
-  workflowSaved,
-} from 'features/nodes/store/workflowSlice';
+import { workflowIDChanged, workflowNameChanged, workflowSaved } from 'features/nodes/store/workflowSlice';
 import { useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  useCreateWorkflowMutation,
-  workflowsApi,
-} from 'services/api/endpoints/workflows';
+import { useCreateWorkflowMutation, workflowsApi } from 'services/api/endpoints/workflows';
 
 type SaveWorkflowAsArg = {
   name: string;
@@ -62,11 +55,7 @@ export const useSaveWorkflowAs: UseSaveWorkflowAs = () => {
         });
       } catch (e) {
         onError && onError();
-        if (
-          !toast.isActive(
-            `auth-error-toast-${workflowsApi.endpoints.createWorkflow.name}`
-          )
-        ) {
+        if (!toast.isActive(`auth-error-toast-${workflowsApi.endpoints.createWorkflow.name}`)) {
           toast.update(toastRef.current, {
             title: t('workflows.problemSavingWorkflow'),
             status: 'error',
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/util/getWorkflowCopyName.ts b/invokeai/frontend/web/src/features/workflowLibrary/util/getWorkflowCopyName.ts
index b5d990bb49..d4cb9a2c30 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/util/getWorkflowCopyName.ts
+++ b/invokeai/frontend/web/src/features/workflowLibrary/util/getWorkflowCopyName.ts
@@ -1,2 +1 @@
-export const getWorkflowCopyName = (name: string): string =>
-  `${name.trim()} (copy)`;
+export const getWorkflowCopyName = (name: string): string => `${name.trim()} (copy)`;
diff --git a/invokeai/frontend/web/src/main.tsx b/invokeai/frontend/web/src/main.tsx
index c07decae63..acf9491778 100644
--- a/invokeai/frontend/web/src/main.tsx
+++ b/invokeai/frontend/web/src/main.tsx
@@ -2,6 +2,4 @@ import ReactDOM from 'react-dom/client';
 
 import InvokeAIUI from './app/components/InvokeAIUI';
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <InvokeAIUI />
-);
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<InvokeAIUI />);
diff --git a/invokeai/frontend/web/src/services/api/authToastMiddleware.ts b/invokeai/frontend/web/src/services/api/authToastMiddleware.ts
index f1e5862c57..002cc96174 100644
--- a/invokeai/frontend/web/src/services/api/authToastMiddleware.ts
+++ b/invokeai/frontend/web/src/services/api/authToastMiddleware.ts
@@ -22,34 +22,30 @@ const zRejectedForbiddenAction = z.object({
     .optional(),
 });
 
-export const authToastMiddleware: Middleware =
-  (api: MiddlewareAPI) => (next) => (action) => {
-    if (isRejectedWithValue(action)) {
-      try {
-        const parsed = zRejectedForbiddenAction.parse(action);
-        const endpointName = parsed.meta?.arg?.endpointName;
-        if (endpointName === 'getImageDTO') {
-          // do not show toast if problem is image access
-          return;
-        }
-
-        const { dispatch } = api;
-        const customMessage =
-          parsed.payload.data.detail !== 'Forbidden'
-            ? parsed.payload.data.detail
-            : undefined;
-        dispatch(
-          addToast({
-            id: `auth-error-toast-${endpointName}`,
-            title: t('common.somethingWentWrong'),
-            status: 'error',
-            description: customMessage,
-          })
-        );
-      } catch (error) {
-        // no-op
+export const authToastMiddleware: Middleware = (api: MiddlewareAPI) => (next) => (action) => {
+  if (isRejectedWithValue(action)) {
+    try {
+      const parsed = zRejectedForbiddenAction.parse(action);
+      const endpointName = parsed.meta?.arg?.endpointName;
+      if (endpointName === 'getImageDTO') {
+        // do not show toast if problem is image access
+        return;
       }
-    }
 
-    return next(action);
-  };
+      const { dispatch } = api;
+      const customMessage = parsed.payload.data.detail !== 'Forbidden' ? parsed.payload.data.detail : undefined;
+      dispatch(
+        addToast({
+          id: `auth-error-toast-${endpointName}`,
+          title: t('common.somethingWentWrong'),
+          status: 'error',
+          description: customMessage,
+        })
+      );
+    } catch (error) {
+      // no-op
+    }
+  }
+
+  return next(action);
+};
diff --git a/invokeai/frontend/web/src/services/api/constants.ts b/invokeai/frontend/web/src/services/api/constants.ts
index 36364e7d1a..d29dc3fda8 100644
--- a/invokeai/frontend/web/src/services/api/constants.ts
+++ b/invokeai/frontend/web/src/services/api/constants.ts
@@ -1,17 +1,8 @@
 import type { BaseModelType } from './types';
 
-export const ALL_BASE_MODELS: BaseModelType[] = [
-  'sd-1',
-  'sd-2',
-  'sdxl',
-  'sdxl-refiner',
-];
+export const ALL_BASE_MODELS: BaseModelType[] = ['sd-1', 'sd-2', 'sdxl', 'sdxl-refiner'];
 
-export const NON_REFINER_BASE_MODELS: BaseModelType[] = [
-  'sd-1',
-  'sd-2',
-  'sdxl',
-];
+export const NON_REFINER_BASE_MODELS: BaseModelType[] = ['sd-1', 'sd-2', 'sdxl'];
 
 export const SDXL_MAIN_MODELS: BaseModelType[] = ['sdxl'];
 export const NON_SDXL_MAIN_MODELS: BaseModelType[] = ['sd-1', 'sd-2'];
diff --git a/invokeai/frontend/web/src/services/api/endpoints/appInfo.ts b/invokeai/frontend/web/src/services/api/endpoints/appInfo.ts
index 8cde3c3528..c1003a1503 100644
--- a/invokeai/frontend/web/src/services/api/endpoints/appInfo.ts
+++ b/invokeai/frontend/web/src/services/api/endpoints/appInfo.ts
@@ -1,9 +1,5 @@
 import type { paths } from 'services/api/schema';
-import type {
-  AppConfig,
-  AppDependencyVersions,
-  AppVersion,
-} from 'services/api/types';
+import type { AppConfig, AppDependencyVersions, AppVersion } from 'services/api/types';
 
 import { api } from '..';
 
diff --git a/invokeai/frontend/web/src/services/api/endpoints/boards.ts b/invokeai/frontend/web/src/services/api/endpoints/boards.ts
index 811687ba21..6977a2bd53 100644
--- a/invokeai/frontend/web/src/services/api/endpoints/boards.ts
+++ b/invokeai/frontend/web/src/services/api/endpoints/boards.ts
@@ -1,7 +1,4 @@
-import {
-  ASSETS_CATEGORIES,
-  IMAGE_CATEGORIES,
-} from 'features/gallery/store/types';
+import { ASSETS_CATEGORIES, IMAGE_CATEGORIES } from 'features/gallery/store/types';
 import type {
   BoardDTO,
   ListBoardsArg,
@@ -23,10 +20,7 @@ export const boardsApi = api.injectEndpoints({
       query: (arg) => ({ url: 'boards/', params: arg }),
       providesTags: (result) => {
         // any list of boards
-        const tags: ApiTagDescription[] = [
-          { type: 'Board', id: LIST_TAG },
-          'FetchOnReconnect',
-        ];
+        const tags: ApiTagDescription[] = [{ type: 'Board', id: LIST_TAG }, 'FetchOnReconnect'];
 
         if (result) {
           // and individual tags for each board
@@ -49,10 +43,7 @@ export const boardsApi = api.injectEndpoints({
       }),
       providesTags: (result) => {
         // any list of boards
-        const tags: ApiTagDescription[] = [
-          { type: 'Board', id: LIST_TAG },
-          'FetchOnReconnect',
-        ];
+        const tags: ApiTagDescription[] = [{ type: 'Board', id: LIST_TAG }, 'FetchOnReconnect'];
 
         if (result) {
           // and individual tags for each board
@@ -72,10 +63,7 @@ export const boardsApi = api.injectEndpoints({
       query: (board_id) => ({
         url: `boards/${board_id}/image_names`,
       }),
-      providesTags: (result, error, arg) => [
-        { type: 'ImageNameList', id: arg },
-        'FetchOnReconnect',
-      ],
+      providesTags: (result, error, arg) => [{ type: 'ImageNameList', id: arg }, 'FetchOnReconnect'],
       keepUnusedDataFor: 0,
     }),
 
@@ -90,10 +78,7 @@ export const boardsApi = api.injectEndpoints({
         }),
         method: 'GET',
       }),
-      providesTags: (result, error, arg) => [
-        { type: 'BoardImagesTotal', id: arg ?? 'none' },
-        'FetchOnReconnect',
-      ],
+      providesTags: (result, error, arg) => [{ type: 'BoardImagesTotal', id: arg ?? 'none' }, 'FetchOnReconnect'],
       transformResponse: (response: OffsetPaginatedResults_ImageDTO_) => {
         return { total: response.total };
       },
@@ -110,10 +95,7 @@ export const boardsApi = api.injectEndpoints({
         }),
         method: 'GET',
       }),
-      providesTags: (result, error, arg) => [
-        { type: 'BoardAssetsTotal', id: arg ?? 'none' },
-        'FetchOnReconnect',
-      ],
+      providesTags: (result, error, arg) => [{ type: 'BoardAssetsTotal', id: arg ?? 'none' }, 'FetchOnReconnect'],
       transformResponse: (response: OffsetPaginatedResults_ImageDTO_) => {
         return { total: response.total };
       },
@@ -138,9 +120,7 @@ export const boardsApi = api.injectEndpoints({
         method: 'PATCH',
         body: changes,
       }),
-      invalidatesTags: (result, error, arg) => [
-        { type: 'Board', id: arg.board_id },
-      ],
+      invalidatesTags: (result, error, arg) => [{ type: 'Board', id: arg.board_id }],
     }),
   }),
 });
diff --git a/invokeai/frontend/web/src/services/api/endpoints/images.ts b/invokeai/frontend/web/src/services/api/endpoints/images.ts
index dbada82aa1..181c8d23fc 100644
--- a/invokeai/frontend/web/src/services/api/endpoints/images.ts
+++ b/invokeai/frontend/web/src/services/api/endpoints/images.ts
@@ -2,11 +2,7 @@ import type { EntityState, Update } from '@reduxjs/toolkit';
 import type { PatchCollection } from '@reduxjs/toolkit/dist/query/core/buildThunks';
 import { logger } from 'app/logging/logger';
 import type { BoardId } from 'features/gallery/store/types';
-import {
-  ASSETS_CATEGORIES,
-  IMAGE_CATEGORIES,
-  IMAGE_LIMIT,
-} from 'features/gallery/store/types';
+import { ASSETS_CATEGORIES, IMAGE_CATEGORIES, IMAGE_LIMIT } from 'features/gallery/store/types';
 import type { CoreMetadata } from 'features/nodes/types/metadata';
 import { zCoreMetadata } from 'features/nodes/types/metadata';
 import { addToast } from 'features/system/store/systemSlice';
@@ -84,13 +80,7 @@ export const imagesApi = api.injectEndpoints({
 
           // update the `getImageDTO` cache for each image
           imagesSelectors.selectAll(data).forEach((imageDTO) => {
-            dispatch(
-              imagesApi.util.upsertQueryData(
-                'getImageDTO',
-                imageDTO.image_name,
-                imageDTO
-              )
-            );
+            dispatch(imagesApi.util.upsertQueryData('getImageDTO', imageDTO.image_name, imageDTO));
           });
         } catch {
           // no-op
@@ -109,16 +99,12 @@ export const imagesApi = api.injectEndpoints({
     }),
     getImageDTO: build.query<ImageDTO, string>({
       query: (image_name) => ({ url: `images/i/${image_name}` }),
-      providesTags: (result, error, image_name) => [
-        { type: 'Image', id: image_name },
-      ],
+      providesTags: (result, error, image_name) => [{ type: 'Image', id: image_name }],
       keepUnusedDataFor: 86400, // 24 hours
     }),
     getImageMetadata: build.query<CoreMetadata | undefined, string>({
       query: (image_name) => ({ url: `images/i/${image_name}/metadata` }),
-      providesTags: (result, error, image_name) => [
-        { type: 'ImageMetadata', id: image_name },
-      ],
+      providesTags: (result, error, image_name) => [{ type: 'ImageMetadata', id: image_name }],
       transformResponse: (
         response: paths['/api/v1/images/i/{image_name}/metadata']['get']['responses']['200']['content']['application/json']
       ) => {
@@ -139,9 +125,7 @@ export const imagesApi = api.injectEndpoints({
       string
     >({
       query: (image_name) => ({ url: `images/i/${image_name}/workflow` }),
-      providesTags: (result, error, image_name) => [
-        { type: 'ImageWorkflow', id: image_name },
-      ],
+      providesTags: (result, error, image_name) => [{ type: 'ImageWorkflow', id: image_name }],
       keepUnusedDataFor: 86400, // 24 hours
     }),
     deleteImage: build.mutation<void, ImageDTO>({
@@ -197,10 +181,7 @@ export const imagesApi = api.injectEndpoints({
         }
       },
     }),
-    deleteImages: build.mutation<
-      components['schemas']['DeleteImagesFromListResult'],
-      { imageDTOs: ImageDTO[] }
-    >({
+    deleteImages: build.mutation<components['schemas']['DeleteImagesFromListResult'], { imageDTOs: ImageDTO[] }>({
       query: ({ imageDTOs }) => {
         const image_names = imageDTOs.map((imageDTO) => imageDTO.image_name);
         return {
@@ -248,18 +229,12 @@ export const imagesApi = api.injectEndpoints({
               };
               // remove all deleted images from their boards
               dispatch(
-                imagesApi.util.updateQueryData(
-                  'listImages',
-                  queryArg,
-                  (draft) => {
-                    imagesAdapter.removeOne(draft, image_name);
-                  }
-                )
+                imagesApi.util.updateQueryData('listImages', queryArg, (draft) => {
+                  imagesAdapter.removeOne(draft, image_name);
+                })
               );
 
-              const isAsset = ASSETS_CATEGORIES.includes(
-                imageDTO.image_category
-              );
+              const isAsset = ASSETS_CATEGORIES.includes(imageDTO.image_category);
 
               // decrement the image board's total
               dispatch(
@@ -281,19 +256,13 @@ export const imagesApi = api.injectEndpoints({
     /**
      * Change an image's `is_intermediate` property.
      */
-    changeImageIsIntermediate: build.mutation<
-      ImageDTO,
-      { imageDTO: ImageDTO; is_intermediate: boolean }
-    >({
+    changeImageIsIntermediate: build.mutation<ImageDTO, { imageDTO: ImageDTO; is_intermediate: boolean }>({
       query: ({ imageDTO, is_intermediate }) => ({
         url: `images/i/${imageDTO.image_name}`,
         method: 'PATCH',
         body: { is_intermediate },
       }),
-      async onQueryStarted(
-        { imageDTO, is_intermediate },
-        { dispatch, queryFulfilled, getState }
-      ) {
+      async onQueryStarted({ imageDTO, is_intermediate }, { dispatch, queryFulfilled, getState }) {
         /**
          * Cache changes for `changeImageIsIntermediate`:
          * - *update* getImageDTO
@@ -313,13 +282,9 @@ export const imagesApi = api.injectEndpoints({
         // *update* getImageDTO
         patches.push(
           dispatch(
-            imagesApi.util.updateQueryData(
-              'getImageDTO',
-              imageDTO.image_name,
-              (draft) => {
-                Object.assign(draft, { is_intermediate });
-              }
-            )
+            imagesApi.util.updateQueryData('getImageDTO', imageDTO.image_name, (draft) => {
+              Object.assign(draft, { is_intermediate });
+            })
           )
         );
 
@@ -375,16 +340,11 @@ export const imagesApi = api.injectEndpoints({
             categories,
           };
 
-          const currentCache =
-            imagesApi.endpoints.listImages.select(queryArgs)(getState());
+          const currentCache = imagesApi.endpoints.listImages.select(queryArgs)(getState());
 
           const { data } = IMAGE_CATEGORIES.includes(imageDTO.image_category)
-            ? boardsApi.endpoints.getBoardImagesTotal.select(
-                imageDTO.board_id ?? 'none'
-              )(getState())
-            : boardsApi.endpoints.getBoardAssetsTotal.select(
-                imageDTO.board_id ?? 'none'
-              )(getState());
+            ? boardsApi.endpoints.getBoardImagesTotal.select(imageDTO.board_id ?? 'none')(getState())
+            : boardsApi.endpoints.getBoardAssetsTotal.select(imageDTO.board_id ?? 'none')(getState());
 
           // IF it eligible for insertion into existing $cache
           // "eligible" means either:
@@ -392,26 +352,17 @@ export const imagesApi = api.injectEndpoints({
           //    OR
           // - The image's `created_at` is within the range of the cached images
 
-          const isCacheFullyPopulated =
-            currentCache.data &&
-            currentCache.data.ids.length >= (data?.total ?? 0);
+          const isCacheFullyPopulated = currentCache.data && currentCache.data.ids.length >= (data?.total ?? 0);
 
-          const isInDateRange = getIsImageInDateRange(
-            currentCache.data,
-            imageDTO
-          );
+          const isInDateRange = getIsImageInDateRange(currentCache.data, imageDTO);
 
           if (isCacheFullyPopulated || isInDateRange) {
             // *upsert* to $cache
             patches.push(
               dispatch(
-                imagesApi.util.updateQueryData(
-                  'listImages',
-                  queryArgs,
-                  (draft) => {
-                    imagesAdapter.upsertOne(draft, imageDTO);
-                  }
-                )
+                imagesApi.util.updateQueryData('listImages', queryArgs, (draft) => {
+                  imagesAdapter.upsertOne(draft, imageDTO);
+                })
               )
             );
           }
@@ -427,19 +378,13 @@ export const imagesApi = api.injectEndpoints({
     /**
      * Change an image's `session_id` association.
      */
-    changeImageSessionId: build.mutation<
-      ImageDTO,
-      { imageDTO: ImageDTO; session_id: string }
-    >({
+    changeImageSessionId: build.mutation<ImageDTO, { imageDTO: ImageDTO; session_id: string }>({
       query: ({ imageDTO, session_id }) => ({
         url: `images/i/${imageDTO.image_name}`,
         method: 'PATCH',
         body: { session_id },
       }),
-      async onQueryStarted(
-        { imageDTO, session_id },
-        { dispatch, queryFulfilled }
-      ) {
+      async onQueryStarted({ imageDTO, session_id }, { dispatch, queryFulfilled }) {
         /**
          * Cache changes for `changeImageSessionId`:
          * - *update* getImageDTO
@@ -451,13 +396,9 @@ export const imagesApi = api.injectEndpoints({
         // *update* getImageDTO
         patches.push(
           dispatch(
-            imagesApi.util.updateQueryData(
-              'getImageDTO',
-              imageDTO.image_name,
-              (draft) => {
-                Object.assign(draft, { session_id });
-              }
-            )
+            imagesApi.util.updateQueryData('getImageDTO', imageDTO.image_name, (draft) => {
+              Object.assign(draft, { session_id });
+            })
           )
         );
 
@@ -502,10 +443,7 @@ export const imagesApi = api.injectEndpoints({
         }
         return [];
       },
-      async onQueryStarted(
-        { imageDTOs },
-        { dispatch, queryFulfilled, getState }
-      ) {
+      async onQueryStarted({ imageDTOs }, { dispatch, queryFulfilled, getState }) {
         try {
           /**
            * Cache changes for pinImages:
@@ -514,9 +452,7 @@ export const imagesApi = api.injectEndpoints({
            */
 
           const { data } = await queryFulfilled;
-          const updatedImages = imageDTOs.filter((i) =>
-            data.updated_image_names.includes(i.image_name)
-          );
+          const updatedImages = imageDTOs.filter((i) => data.updated_image_names.includes(i.image_name));
 
           if (!updatedImages[0]) {
             return;
@@ -529,13 +465,9 @@ export const imagesApi = api.injectEndpoints({
           updatedImages.forEach((imageDTO) => {
             const { image_name } = imageDTO;
             dispatch(
-              imagesApi.util.updateQueryData(
-                'getImageDTO',
-                image_name,
-                (draft) => {
-                  draft.starred = true;
-                }
-              )
+              imagesApi.util.updateQueryData('getImageDTO', image_name, (draft) => {
+                draft.starred = true;
+              })
             );
 
             const queryArgs = {
@@ -543,39 +475,26 @@ export const imagesApi = api.injectEndpoints({
               categories,
             };
 
-            const currentCache =
-              imagesApi.endpoints.listImages.select(queryArgs)(getState());
+            const currentCache = imagesApi.endpoints.listImages.select(queryArgs)(getState());
 
             const { data } = IMAGE_CATEGORIES.includes(imageDTO.image_category)
-              ? boardsApi.endpoints.getBoardImagesTotal.select(
-                  boardId ?? 'none'
-                )(getState())
-              : boardsApi.endpoints.getBoardAssetsTotal.select(
-                  boardId ?? 'none'
-                )(getState());
+              ? boardsApi.endpoints.getBoardImagesTotal.select(boardId ?? 'none')(getState())
+              : boardsApi.endpoints.getBoardAssetsTotal.select(boardId ?? 'none')(getState());
 
-            const isCacheFullyPopulated =
-              currentCache.data &&
-              currentCache.data.ids.length >= (data?.total ?? 0);
+            const isCacheFullyPopulated = currentCache.data && currentCache.data.ids.length >= (data?.total ?? 0);
 
             const isInDateRange =
-              (data?.total ?? 0) >= IMAGE_LIMIT
-                ? getIsImageInDateRange(currentCache.data, imageDTO)
-                : true;
+              (data?.total ?? 0) >= IMAGE_LIMIT ? getIsImageInDateRange(currentCache.data, imageDTO) : true;
 
             if (isCacheFullyPopulated || isInDateRange) {
               // *upsert* to $cache
               dispatch(
-                imagesApi.util.updateQueryData(
-                  'listImages',
-                  queryArgs,
-                  (draft) => {
-                    imagesAdapter.upsertOne(draft, {
-                      ...imageDTO,
-                      starred: true,
-                    });
-                  }
-                )
+                imagesApi.util.updateQueryData('listImages', queryArgs, (draft) => {
+                  imagesAdapter.upsertOne(draft, {
+                    ...imageDTO,
+                    starred: true,
+                  });
+                })
               );
             }
           });
@@ -617,10 +536,7 @@ export const imagesApi = api.injectEndpoints({
         }
         return [];
       },
-      async onQueryStarted(
-        { imageDTOs },
-        { dispatch, queryFulfilled, getState }
-      ) {
+      async onQueryStarted({ imageDTOs }, { dispatch, queryFulfilled, getState }) {
         try {
           /**
            * Cache changes for unstarImages:
@@ -629,9 +545,7 @@ export const imagesApi = api.injectEndpoints({
            */
 
           const { data } = await queryFulfilled;
-          const updatedImages = imageDTOs.filter((i) =>
-            data.updated_image_names.includes(i.image_name)
-          );
+          const updatedImages = imageDTOs.filter((i) => data.updated_image_names.includes(i.image_name));
 
           if (!updatedImages[0]) {
             return;
@@ -643,13 +557,9 @@ export const imagesApi = api.injectEndpoints({
           updatedImages.forEach((imageDTO) => {
             const { image_name } = imageDTO;
             dispatch(
-              imagesApi.util.updateQueryData(
-                'getImageDTO',
-                image_name,
-                (draft) => {
-                  draft.starred = false;
-                }
-              )
+              imagesApi.util.updateQueryData('getImageDTO', image_name, (draft) => {
+                draft.starred = false;
+              })
             );
 
             const queryArgs = {
@@ -657,39 +567,26 @@ export const imagesApi = api.injectEndpoints({
               categories,
             };
 
-            const currentCache =
-              imagesApi.endpoints.listImages.select(queryArgs)(getState());
+            const currentCache = imagesApi.endpoints.listImages.select(queryArgs)(getState());
 
             const { data } = IMAGE_CATEGORIES.includes(imageDTO.image_category)
-              ? boardsApi.endpoints.getBoardImagesTotal.select(
-                  boardId ?? 'none'
-                )(getState())
-              : boardsApi.endpoints.getBoardAssetsTotal.select(
-                  boardId ?? 'none'
-                )(getState());
+              ? boardsApi.endpoints.getBoardImagesTotal.select(boardId ?? 'none')(getState())
+              : boardsApi.endpoints.getBoardAssetsTotal.select(boardId ?? 'none')(getState());
 
-            const isCacheFullyPopulated =
-              currentCache.data &&
-              currentCache.data.ids.length >= (data?.total ?? 0);
+            const isCacheFullyPopulated = currentCache.data && currentCache.data.ids.length >= (data?.total ?? 0);
 
             const isInDateRange =
-              (data?.total ?? 0) >= IMAGE_LIMIT
-                ? getIsImageInDateRange(currentCache.data, imageDTO)
-                : true;
+              (data?.total ?? 0) >= IMAGE_LIMIT ? getIsImageInDateRange(currentCache.data, imageDTO) : true;
 
             if (isCacheFullyPopulated || isInDateRange) {
               // *upsert* to $cache
               dispatch(
-                imagesApi.util.updateQueryData(
-                  'listImages',
-                  queryArgs,
-                  (draft) => {
-                    imagesAdapter.upsertOne(draft, {
-                      ...imageDTO,
-                      starred: false,
-                    });
-                  }
-                )
+                imagesApi.util.updateQueryData('listImages', queryArgs, (draft) => {
+                  imagesAdapter.upsertOne(draft, {
+                    ...imageDTO,
+                    starred: false,
+                  });
+                })
               );
             }
           });
@@ -710,14 +607,7 @@ export const imagesApi = api.injectEndpoints({
         crop_visible?: boolean;
       }
     >({
-      query: ({
-        file,
-        image_category,
-        is_intermediate,
-        session_id,
-        board_id,
-        crop_visible,
-      }) => {
+      query: ({ file, image_category, is_intermediate, session_id, board_id, crop_visible }) => {
         const formData = new FormData();
         formData.append('file', file);
         return {
@@ -753,13 +643,7 @@ export const imagesApi = api.injectEndpoints({
           }
 
           // *add* to `getImageDTO`
-          dispatch(
-            imagesApi.util.upsertQueryData(
-              'getImageDTO',
-              imageDTO.image_name,
-              imageDTO
-            )
-          );
+          dispatch(imagesApi.util.upsertQueryData('getImageDTO', imageDTO.image_name, imageDTO));
 
           const categories = getCategories(imageDTO);
 
@@ -779,13 +663,9 @@ export const imagesApi = api.injectEndpoints({
 
           // increment new board's total
           dispatch(
-            boardsApi.util.updateQueryData(
-              'getBoardAssetsTotal',
-              imageDTO.board_id ?? 'none',
-              (draft) => {
-                draft.total += 1;
-              }
-            )
+            boardsApi.util.updateQueryData('getBoardAssetsTotal', imageDTO.board_id ?? 'none', (draft) => {
+              draft.total += 1;
+            })
           );
         } catch {
           // query failed, no action needed
@@ -834,36 +714,24 @@ export const imagesApi = api.injectEndpoints({
           // update getImageDTO caches
           deleted_board_images.forEach((image_id) => {
             dispatch(
-              imagesApi.util.updateQueryData(
-                'getImageDTO',
-                image_id,
-                (draft) => {
-                  draft.board_id = undefined;
-                }
-              )
+              imagesApi.util.updateQueryData('getImageDTO', image_id, (draft) => {
+                draft.board_id = undefined;
+              })
             );
           });
 
           // set the board's asset total to 0 (feels unnecessary since we are deleting it?)
           dispatch(
-            boardsApi.util.updateQueryData(
-              'getBoardAssetsTotal',
-              board_id,
-              (draft) => {
-                draft.total = 0;
-              }
-            )
+            boardsApi.util.updateQueryData('getBoardAssetsTotal', board_id, (draft) => {
+              draft.total = 0;
+            })
           );
 
           // set the board's images total to 0 (feels unnecessary since we are deleting it?)
           dispatch(
-            boardsApi.util.updateQueryData(
-              'getBoardImagesTotal',
-              board_id,
-              (draft) => {
-                draft.total = 0;
-              }
-            )
+            boardsApi.util.updateQueryData('getBoardImagesTotal', board_id, (draft) => {
+              draft.total = 0;
+            })
           );
 
           // update 'All Images' & 'All Assets' caches
@@ -876,22 +744,16 @@ export const imagesApi = api.injectEndpoints({
             },
           ];
 
-          const updates: Update<ImageDTO, string>[] = deleted_board_images.map(
-            (image_name) => ({
-              id: image_name,
-              changes: { board_id: undefined },
-            })
-          );
+          const updates: Update<ImageDTO, string>[] = deleted_board_images.map((image_name) => ({
+            id: image_name,
+            changes: { board_id: undefined },
+          }));
 
           queryArgsToUpdate.forEach((queryArgs) => {
             dispatch(
-              imagesApi.util.updateQueryData(
-                'listImages',
-                queryArgs,
-                (draft) => {
-                  imagesAdapter.updateMany(draft, updates);
-                }
-              )
+              imagesApi.util.updateQueryData('listImages', queryArgs, (draft) => {
+                imagesAdapter.updateMany(draft, updates);
+              })
             );
           });
         } catch {
@@ -950,46 +812,31 @@ export const imagesApi = api.injectEndpoints({
 
           queryArgsToUpdate.forEach((queryArgs) => {
             dispatch(
-              imagesApi.util.updateQueryData(
-                'listImages',
-                queryArgs,
-                (draft) => {
-                  imagesAdapter.removeMany(draft, deleted_images);
-                }
-              )
+              imagesApi.util.updateQueryData('listImages', queryArgs, (draft) => {
+                imagesAdapter.removeMany(draft, deleted_images);
+              })
             );
           });
 
           // set the board's asset total to 0 (feels unnecessary since we are deleting it?)
           dispatch(
-            boardsApi.util.updateQueryData(
-              'getBoardAssetsTotal',
-              board_id,
-              (draft) => {
-                draft.total = 0;
-              }
-            )
+            boardsApi.util.updateQueryData('getBoardAssetsTotal', board_id, (draft) => {
+              draft.total = 0;
+            })
           );
 
           // set the board's images total to 0 (feels unnecessary since we are deleting it?)
           dispatch(
-            boardsApi.util.updateQueryData(
-              'getBoardImagesTotal',
-              board_id,
-              (draft) => {
-                draft.total = 0;
-              }
-            )
+            boardsApi.util.updateQueryData('getBoardImagesTotal', board_id, (draft) => {
+              draft.total = 0;
+            })
           );
         } catch {
           //no-op
         }
       },
     }),
-    addImageToBoard: build.mutation<
-      void,
-      { board_id: BoardId; imageDTO: ImageDTO }
-    >({
+    addImageToBoard: build.mutation<void, { board_id: BoardId; imageDTO: ImageDTO }>({
       query: ({ board_id, imageDTO }) => {
         const { image_name } = imageDTO;
         return {
@@ -1002,10 +849,7 @@ export const imagesApi = api.injectEndpoints({
         // refresh the board itself
         { type: 'Board', id: board_id },
       ],
-      async onQueryStarted(
-        { board_id, imageDTO },
-        { dispatch, queryFulfilled, getState }
-      ) {
+      async onQueryStarted({ board_id, imageDTO }, { dispatch, queryFulfilled, getState }) {
         /**
          * Cache changes for `addImageToBoard`:
          * - *update* getImageDTO
@@ -1027,13 +871,9 @@ export const imagesApi = api.injectEndpoints({
         // *update* getImageDTO
         patches.push(
           dispatch(
-            imagesApi.util.updateQueryData(
-              'getImageDTO',
-              imageDTO.image_name,
-              (draft) => {
-                draft.board_id = board_id;
-              }
-            )
+            imagesApi.util.updateQueryData('getImageDTO', imageDTO.image_name, (draft) => {
+              draft.board_id = board_id;
+            })
           )
         );
 
@@ -1082,8 +922,7 @@ export const imagesApi = api.injectEndpoints({
 
           // $cache = board_id/[images|assets]
           const queryArgs = { board_id: board_id ?? 'none', categories };
-          const currentCache =
-            imagesApi.endpoints.listImages.select(queryArgs)(getState());
+          const currentCache = imagesApi.endpoints.listImages.select(queryArgs)(getState());
 
           // IF it eligible for insertion into existing $cache
           // "eligible" means either:
@@ -1092,33 +931,20 @@ export const imagesApi = api.injectEndpoints({
           // - The image's `created_at` is within the range of the cached images
 
           const { data } = IMAGE_CATEGORIES.includes(imageDTO.image_category)
-            ? boardsApi.endpoints.getBoardImagesTotal.select(
-                imageDTO.board_id ?? 'none'
-              )(getState())
-            : boardsApi.endpoints.getBoardAssetsTotal.select(
-                imageDTO.board_id ?? 'none'
-              )(getState());
+            ? boardsApi.endpoints.getBoardImagesTotal.select(imageDTO.board_id ?? 'none')(getState())
+            : boardsApi.endpoints.getBoardAssetsTotal.select(imageDTO.board_id ?? 'none')(getState());
 
-          const isCacheFullyPopulated =
-            currentCache.data &&
-            currentCache.data.ids.length >= (data?.total ?? 0);
+          const isCacheFullyPopulated = currentCache.data && currentCache.data.ids.length >= (data?.total ?? 0);
 
-          const isInDateRange = getIsImageInDateRange(
-            currentCache.data,
-            imageDTO
-          );
+          const isInDateRange = getIsImageInDateRange(currentCache.data, imageDTO);
 
           if (isCacheFullyPopulated || isInDateRange) {
             // THEN *add* to $cache
             patches.push(
               dispatch(
-                imagesApi.util.updateQueryData(
-                  'listImages',
-                  queryArgs,
-                  (draft) => {
-                    imagesAdapter.addOne(draft, imageDTO);
-                  }
-                )
+                imagesApi.util.updateQueryData('listImages', queryArgs, (draft) => {
+                  imagesAdapter.addOne(draft, imageDTO);
+                })
               )
             );
           }
@@ -1147,10 +973,7 @@ export const imagesApi = api.injectEndpoints({
           { type: 'Board', id: board_id ?? 'none' },
         ];
       },
-      async onQueryStarted(
-        { imageDTO },
-        { dispatch, queryFulfilled, getState }
-      ) {
+      async onQueryStarted({ imageDTO }, { dispatch, queryFulfilled, getState }) {
         /**
          * Cache changes for removeImageFromBoard:
          * - *update* getImageDTO
@@ -1169,13 +992,9 @@ export const imagesApi = api.injectEndpoints({
         // *update* getImageDTO
         patches.push(
           dispatch(
-            imagesApi.util.updateQueryData(
-              'getImageDTO',
-              imageDTO.image_name,
-              (draft) => {
-                draft.board_id = undefined;
-              }
-            )
+            imagesApi.util.updateQueryData('getImageDTO', imageDTO.image_name, (draft) => {
+              draft.board_id = undefined;
+            })
           )
         );
 
@@ -1211,20 +1030,15 @@ export const imagesApi = api.injectEndpoints({
         // increment new board's total (no board)
         patches.push(
           dispatch(
-            boardsApi.util.updateQueryData(
-              isAsset ? 'getBoardAssetsTotal' : 'getBoardImagesTotal',
-              'none',
-              (draft) => {
-                draft.total += 1;
-              }
-            )
+            boardsApi.util.updateQueryData(isAsset ? 'getBoardAssetsTotal' : 'getBoardImagesTotal', 'none', (draft) => {
+              draft.total += 1;
+            })
           )
         );
 
         // $cache = no_board/[images|assets]
         const queryArgs = { board_id: 'none', categories };
-        const currentCache =
-          imagesApi.endpoints.listImages.select(queryArgs)(getState());
+        const currentCache = imagesApi.endpoints.listImages.select(queryArgs)(getState());
 
         // IF it eligible for insertion into existing $cache
         // "eligible" means either:
@@ -1233,33 +1047,20 @@ export const imagesApi = api.injectEndpoints({
         // - The image's `created_at` is within the range of the cached images
 
         const { data } = IMAGE_CATEGORIES.includes(imageDTO.image_category)
-          ? boardsApi.endpoints.getBoardImagesTotal.select(
-              imageDTO.board_id ?? 'none'
-            )(getState())
-          : boardsApi.endpoints.getBoardAssetsTotal.select(
-              imageDTO.board_id ?? 'none'
-            )(getState());
+          ? boardsApi.endpoints.getBoardImagesTotal.select(imageDTO.board_id ?? 'none')(getState())
+          : boardsApi.endpoints.getBoardAssetsTotal.select(imageDTO.board_id ?? 'none')(getState());
 
-        const isCacheFullyPopulated =
-          currentCache.data &&
-          currentCache.data.ids.length >= (data?.total ?? 0);
+        const isCacheFullyPopulated = currentCache.data && currentCache.data.ids.length >= (data?.total ?? 0);
 
-        const isInDateRange = getIsImageInDateRange(
-          currentCache.data,
-          imageDTO
-        );
+        const isInDateRange = getIsImageInDateRange(currentCache.data, imageDTO);
 
         if (isCacheFullyPopulated || isInDateRange) {
           // THEN *upsert* to $cache
           patches.push(
             dispatch(
-              imagesApi.util.updateQueryData(
-                'listImages',
-                queryArgs,
-                (draft) => {
-                  imagesAdapter.upsertOne(draft, imageDTO);
-                }
-              )
+              imagesApi.util.updateQueryData('listImages', queryArgs, (draft) => {
+                imagesAdapter.upsertOne(draft, imageDTO);
+              })
             )
           );
         }
@@ -1292,10 +1093,7 @@ export const imagesApi = api.injectEndpoints({
           { type: 'Board', id: board_id ?? 'none' },
         ];
       },
-      async onQueryStarted(
-        { board_id: new_board_id, imageDTOs },
-        { dispatch, queryFulfilled, getState }
-      ) {
+      async onQueryStarted({ board_id: new_board_id, imageDTOs }, { dispatch, queryFulfilled, getState }) {
         try {
           const { data } = await queryFulfilled;
           const { added_image_names } = data;
@@ -1311,14 +1109,9 @@ export const imagesApi = api.injectEndpoints({
 
           added_image_names.forEach((image_name) => {
             dispatch(
-              imagesApi.util.updateQueryData(
-                'getImageDTO',
-                image_name,
-                (draft) => {
-                  draft.board_id =
-                    new_board_id === 'none' ? undefined : new_board_id;
-                }
-              )
+              imagesApi.util.updateQueryData('getImageDTO', image_name, (draft) => {
+                draft.board_id = new_board_id === 'none' ? undefined : new_board_id;
+              })
             );
 
             const imageDTO = imageDTOs.find((i) => i.image_name === image_name);
@@ -1369,39 +1162,26 @@ export const imagesApi = api.injectEndpoints({
               categories,
             };
 
-            const currentCache =
-              imagesApi.endpoints.listImages.select(queryArgs)(getState());
+            const currentCache = imagesApi.endpoints.listImages.select(queryArgs)(getState());
 
             const { data } = IMAGE_CATEGORIES.includes(imageDTO.image_category)
-              ? boardsApi.endpoints.getBoardImagesTotal.select(
-                  new_board_id ?? 'none'
-                )(getState())
-              : boardsApi.endpoints.getBoardAssetsTotal.select(
-                  new_board_id ?? 'none'
-                )(getState());
+              ? boardsApi.endpoints.getBoardImagesTotal.select(new_board_id ?? 'none')(getState())
+              : boardsApi.endpoints.getBoardAssetsTotal.select(new_board_id ?? 'none')(getState());
 
-            const isCacheFullyPopulated =
-              currentCache.data &&
-              currentCache.data.ids.length >= (data?.total ?? 0);
+            const isCacheFullyPopulated = currentCache.data && currentCache.data.ids.length >= (data?.total ?? 0);
 
             const isInDateRange =
-              (data?.total ?? 0) >= IMAGE_LIMIT
-                ? getIsImageInDateRange(currentCache.data, imageDTO)
-                : true;
+              (data?.total ?? 0) >= IMAGE_LIMIT ? getIsImageInDateRange(currentCache.data, imageDTO) : true;
 
             if (isCacheFullyPopulated || isInDateRange) {
               // *upsert* to $cache
               dispatch(
-                imagesApi.util.updateQueryData(
-                  'listImages',
-                  queryArgs,
-                  (draft) => {
-                    imagesAdapter.upsertOne(draft, {
-                      ...imageDTO,
-                      board_id: new_board_id,
-                    });
-                  }
-                )
+                imagesApi.util.updateQueryData('listImages', queryArgs, (draft) => {
+                  imagesAdapter.upsertOne(draft, {
+                    ...imageDTO,
+                    board_id: new_board_id,
+                  });
+                })
               );
             }
           });
@@ -1428,9 +1208,7 @@ export const imagesApi = api.injectEndpoints({
         const tags: ApiTagDescription[] = [];
 
         result?.removed_image_names.forEach((image_name) => {
-          const board_id = imageDTOs.find(
-            (i) => i.image_name === image_name
-          )?.board_id;
+          const board_id = imageDTOs.find((i) => i.image_name === image_name)?.board_id;
 
           if (!board_id || touchedBoardIds.includes(board_id)) {
             return;
@@ -1441,10 +1219,7 @@ export const imagesApi = api.injectEndpoints({
 
         return tags;
       },
-      async onQueryStarted(
-        { imageDTOs },
-        { dispatch, queryFulfilled, getState }
-      ) {
+      async onQueryStarted({ imageDTOs }, { dispatch, queryFulfilled, getState }) {
         try {
           const { data } = await queryFulfilled;
           const { removed_image_names } = data;
@@ -1460,13 +1235,9 @@ export const imagesApi = api.injectEndpoints({
 
           removed_image_names.forEach((image_name) => {
             dispatch(
-              imagesApi.util.updateQueryData(
-                'getImageDTO',
-                image_name,
-                (draft) => {
-                  draft.board_id = undefined;
-                }
-              )
+              imagesApi.util.updateQueryData('getImageDTO', image_name, (draft) => {
+                draft.board_id = undefined;
+              })
             );
 
             const imageDTO = imageDTOs.find((i) => i.image_name === image_name);
@@ -1517,39 +1288,26 @@ export const imagesApi = api.injectEndpoints({
               categories,
             };
 
-            const currentCache =
-              imagesApi.endpoints.listImages.select(queryArgs)(getState());
+            const currentCache = imagesApi.endpoints.listImages.select(queryArgs)(getState());
 
             const { data } = IMAGE_CATEGORIES.includes(imageDTO.image_category)
-              ? boardsApi.endpoints.getBoardImagesTotal.select(
-                  imageDTO.board_id ?? 'none'
-                )(getState())
-              : boardsApi.endpoints.getBoardAssetsTotal.select(
-                  imageDTO.board_id ?? 'none'
-                )(getState());
+              ? boardsApi.endpoints.getBoardImagesTotal.select(imageDTO.board_id ?? 'none')(getState())
+              : boardsApi.endpoints.getBoardAssetsTotal.select(imageDTO.board_id ?? 'none')(getState());
 
-            const isCacheFullyPopulated =
-              currentCache.data &&
-              currentCache.data.ids.length >= (data?.total ?? 0);
+            const isCacheFullyPopulated = currentCache.data && currentCache.data.ids.length >= (data?.total ?? 0);
 
             const isInDateRange =
-              (data?.total ?? 0) >= IMAGE_LIMIT
-                ? getIsImageInDateRange(currentCache.data, imageDTO)
-                : true;
+              (data?.total ?? 0) >= IMAGE_LIMIT ? getIsImageInDateRange(currentCache.data, imageDTO) : true;
 
             if (isCacheFullyPopulated || isInDateRange) {
               // *upsert* to $cache
               dispatch(
-                imagesApi.util.updateQueryData(
-                  'listImages',
-                  queryArgs,
-                  (draft) => {
-                    imagesAdapter.upsertOne(draft, {
-                      ...imageDTO,
-                      board_id: 'none',
-                    });
-                  }
-                )
+                imagesApi.util.updateQueryData('listImages', queryArgs, (draft) => {
+                  imagesAdapter.upsertOne(draft, {
+                    ...imageDTO,
+                    board_id: 'none',
+                  });
+                })
               );
             }
           });
diff --git a/invokeai/frontend/web/src/services/api/endpoints/models.ts b/invokeai/frontend/web/src/services/api/endpoints/models.ts
index 7f20531f4d..c11c8b45e5 100644
--- a/invokeai/frontend/web/src/services/api/endpoints/models.ts
+++ b/invokeai/frontend/web/src/services/api/endpoints/models.ts
@@ -28,9 +28,7 @@ export type DiffusersModelConfigEntity = DiffusersModelConfig & { id: string };
 export type CheckpointModelConfigEntity = CheckpointModelConfig & {
   id: string;
 };
-export type MainModelConfigEntity =
-  | DiffusersModelConfigEntity
-  | CheckpointModelConfigEntity;
+export type MainModelConfigEntity = DiffusersModelConfigEntity | CheckpointModelConfigEntity;
 
 export type LoRAModelConfigEntity = LoRAModelConfig & { id: string };
 
@@ -118,11 +116,9 @@ type AddMainModelArg = {
   body: MainModelConfig;
 };
 
-type AddMainModelResponse =
-  paths['/api/v1/models/add']['post']['responses']['201']['content']['application/json'];
+type AddMainModelResponse = paths['/api/v1/models/add']['post']['responses']['201']['content']['application/json'];
 
-type SyncModelsResponse =
-  paths['/api/v1/models/sync']['post']['responses']['201']['content']['application/json'];
+type SyncModelsResponse = paths['/api/v1/models/sync']['post']['responses']['201']['content']['application/json'];
 
 export type SearchFolderResponse =
   paths['/api/v1/models/search']['get']['responses']['200']['content']['application/json'];
@@ -135,59 +131,42 @@ type SearchFolderArg = operations['search_for_models']['parameters']['query'];
 export const mainModelsAdapter = createEntityAdapter<MainModelConfigEntity>({
   sortComparer: (a, b) => a.model_name.localeCompare(b.model_name),
 });
-export const mainModelsAdapterSelectors = mainModelsAdapter.getSelectors(
-  undefined,
-  getSelectorsOptions
-);
+export const mainModelsAdapterSelectors = mainModelsAdapter.getSelectors(undefined, getSelectorsOptions);
 export const loraModelsAdapter = createEntityAdapter<LoRAModelConfigEntity>({
   sortComparer: (a, b) => a.model_name.localeCompare(b.model_name),
 });
-export const loraModelsAdapterSelectors = loraModelsAdapter.getSelectors(
+export const loraModelsAdapterSelectors = loraModelsAdapter.getSelectors(undefined, getSelectorsOptions);
+export const controlNetModelsAdapter = createEntityAdapter<ControlNetModelConfigEntity>({
+  sortComparer: (a, b) => a.model_name.localeCompare(b.model_name),
+});
+export const controlNetModelsAdapterSelectors = controlNetModelsAdapter.getSelectors(undefined, getSelectorsOptions);
+export const ipAdapterModelsAdapter = createEntityAdapter<IPAdapterModelConfigEntity>({
+  sortComparer: (a, b) => a.model_name.localeCompare(b.model_name),
+});
+export const ipAdapterModelsAdapterSelectors = ipAdapterModelsAdapter.getSelectors(undefined, getSelectorsOptions);
+export const t2iAdapterModelsAdapter = createEntityAdapter<T2IAdapterModelConfigEntity>({
+  sortComparer: (a, b) => a.model_name.localeCompare(b.model_name),
+});
+export const t2iAdapterModelsAdapterSelectors = t2iAdapterModelsAdapter.getSelectors(undefined, getSelectorsOptions);
+export const textualInversionModelsAdapter = createEntityAdapter<TextualInversionModelConfigEntity>({
+  sortComparer: (a, b) => a.model_name.localeCompare(b.model_name),
+});
+export const textualInversionModelsAdapterSelectors = textualInversionModelsAdapter.getSelectors(
   undefined,
   getSelectorsOptions
 );
-export const controlNetModelsAdapter =
-  createEntityAdapter<ControlNetModelConfigEntity>({
-    sortComparer: (a, b) => a.model_name.localeCompare(b.model_name),
-  });
-export const controlNetModelsAdapterSelectors =
-  controlNetModelsAdapter.getSelectors(undefined, getSelectorsOptions);
-export const ipAdapterModelsAdapter =
-  createEntityAdapter<IPAdapterModelConfigEntity>({
-    sortComparer: (a, b) => a.model_name.localeCompare(b.model_name),
-  });
-export const ipAdapterModelsAdapterSelectors =
-  ipAdapterModelsAdapter.getSelectors(undefined, getSelectorsOptions);
-export const t2iAdapterModelsAdapter =
-  createEntityAdapter<T2IAdapterModelConfigEntity>({
-    sortComparer: (a, b) => a.model_name.localeCompare(b.model_name),
-  });
-export const t2iAdapterModelsAdapterSelectors =
-  t2iAdapterModelsAdapter.getSelectors(undefined, getSelectorsOptions);
-export const textualInversionModelsAdapter =
-  createEntityAdapter<TextualInversionModelConfigEntity>({
-    sortComparer: (a, b) => a.model_name.localeCompare(b.model_name),
-  });
-export const textualInversionModelsAdapterSelectors =
-  textualInversionModelsAdapter.getSelectors(undefined, getSelectorsOptions);
 export const vaeModelsAdapter = createEntityAdapter<VaeModelConfigEntity>({
   sortComparer: (a, b) => a.model_name.localeCompare(b.model_name),
 });
-export const vaeModelsAdapterSelectors = vaeModelsAdapter.getSelectors(
-  undefined,
-  getSelectorsOptions
-);
+export const vaeModelsAdapterSelectors = vaeModelsAdapter.getSelectors(undefined, getSelectorsOptions);
 
 export const getModelId = ({
   base_model,
   model_type,
   model_name,
-}: Pick<AnyModelConfig, 'base_model' | 'model_name' | 'model_type'>) =>
-  `${base_model}/${model_type}/${model_name}`;
+}: Pick<AnyModelConfig, 'base_model' | 'model_name' | 'model_type'>) => `${base_model}/${model_type}/${model_name}`;
 
-const createModelEntities = <T extends AnyModelConfigEntity>(
-  models: AnyModelConfig[]
-): T[] => {
+const createModelEntities = <T extends AnyModelConfigEntity>(models: AnyModelConfig[]): T[] => {
   const entityArray: T[] = [];
   models.forEach((model) => {
     const entity = {
@@ -201,10 +180,7 @@ const createModelEntities = <T extends AnyModelConfigEntity>(
 
 export const modelsApi = api.injectEndpoints({
   endpoints: (build) => ({
-    getMainModels: build.query<
-      EntityState<MainModelConfigEntity, string>,
-      BaseModelType[]
-    >({
+    getMainModels: build.query<EntityState<MainModelConfigEntity, string>, BaseModelType[]>({
       query: (base_models) => {
         const params = {
           model_type: 'main',
@@ -215,10 +191,7 @@ export const modelsApi = api.injectEndpoints({
         return `models/?${query}`;
       },
       providesTags: (result) => {
-        const tags: ApiTagDescription[] = [
-          { type: 'MainModel', id: LIST_TAG },
-          'Model',
-        ];
+        const tags: ApiTagDescription[] = [{ type: 'MainModel', id: LIST_TAG }, 'Model'];
 
         if (result) {
           tags.push(
@@ -232,19 +205,11 @@ export const modelsApi = api.injectEndpoints({
         return tags;
       },
       transformResponse: (response: { models: MainModelConfig[] }) => {
-        const entities = createModelEntities<MainModelConfigEntity>(
-          response.models
-        );
-        return mainModelsAdapter.setAll(
-          mainModelsAdapter.getInitialState(),
-          entities
-        );
+        const entities = createModelEntities<MainModelConfigEntity>(response.models);
+        return mainModelsAdapter.setAll(mainModelsAdapter.getInitialState(), entities);
       },
     }),
-    updateMainModels: build.mutation<
-      UpdateMainModelResponse,
-      UpdateMainModelArg
-    >({
+    updateMainModels: build.mutation<UpdateMainModelResponse, UpdateMainModelArg>({
       query: ({ base_model, model_name, body }) => {
         return {
           url: `models/${base_model}/main/${model_name}`,
@@ -254,10 +219,7 @@ export const modelsApi = api.injectEndpoints({
       },
       invalidatesTags: ['Model'],
     }),
-    importMainModels: build.mutation<
-      ImportMainModelResponse,
-      ImportMainModelArg
-    >({
+    importMainModels: build.mutation<ImportMainModelResponse, ImportMainModelArg>({
       query: ({ body }) => {
         return {
           url: `models/import`,
@@ -277,10 +239,7 @@ export const modelsApi = api.injectEndpoints({
       },
       invalidatesTags: ['Model'],
     }),
-    deleteMainModels: build.mutation<
-      DeleteMainModelResponse,
-      DeleteMainModelArg
-    >({
+    deleteMainModels: build.mutation<DeleteMainModelResponse, DeleteMainModelArg>({
       query: ({ base_model, model_name, model_type }) => {
         return {
           url: `models/${base_model}/${model_type}/${model_name}`,
@@ -289,10 +248,7 @@ export const modelsApi = api.injectEndpoints({
       },
       invalidatesTags: ['Model'],
     }),
-    convertMainModels: build.mutation<
-      ConvertMainModelResponse,
-      ConvertMainModelArg
-    >({
+    convertMainModels: build.mutation<ConvertMainModelResponse, ConvertMainModelArg>({
       query: ({ base_model, model_name, convert_dest_directory }) => {
         return {
           url: `models/convert/${base_model}/main/${model_name}`,
@@ -321,16 +277,10 @@ export const modelsApi = api.injectEndpoints({
       },
       invalidatesTags: ['Model'],
     }),
-    getLoRAModels: build.query<
-      EntityState<LoRAModelConfigEntity, string>,
-      void
-    >({
+    getLoRAModels: build.query<EntityState<LoRAModelConfigEntity, string>, void>({
       query: () => ({ url: 'models/', params: { model_type: 'lora' } }),
       providesTags: (result) => {
-        const tags: ApiTagDescription[] = [
-          { type: 'LoRAModel', id: LIST_TAG },
-          'Model',
-        ];
+        const tags: ApiTagDescription[] = [{ type: 'LoRAModel', id: LIST_TAG }, 'Model'];
 
         if (result) {
           tags.push(
@@ -344,19 +294,11 @@ export const modelsApi = api.injectEndpoints({
         return tags;
       },
       transformResponse: (response: { models: LoRAModelConfig[] }) => {
-        const entities = createModelEntities<LoRAModelConfigEntity>(
-          response.models
-        );
-        return loraModelsAdapter.setAll(
-          loraModelsAdapter.getInitialState(),
-          entities
-        );
+        const entities = createModelEntities<LoRAModelConfigEntity>(response.models);
+        return loraModelsAdapter.setAll(loraModelsAdapter.getInitialState(), entities);
       },
     }),
-    updateLoRAModels: build.mutation<
-      UpdateLoRAModelResponse,
-      UpdateLoRAModelArg
-    >({
+    updateLoRAModels: build.mutation<UpdateLoRAModelResponse, UpdateLoRAModelArg>({
       query: ({ base_model, model_name, body }) => {
         return {
           url: `models/${base_model}/lora/${model_name}`,
@@ -366,10 +308,7 @@ export const modelsApi = api.injectEndpoints({
       },
       invalidatesTags: [{ type: 'LoRAModel', id: LIST_TAG }],
     }),
-    deleteLoRAModels: build.mutation<
-      DeleteLoRAModelResponse,
-      DeleteLoRAModelArg
-    >({
+    deleteLoRAModels: build.mutation<DeleteLoRAModelResponse, DeleteLoRAModelArg>({
       query: ({ base_model, model_name }) => {
         return {
           url: `models/${base_model}/lora/${model_name}`,
@@ -378,16 +317,10 @@ export const modelsApi = api.injectEndpoints({
       },
       invalidatesTags: [{ type: 'LoRAModel', id: LIST_TAG }],
     }),
-    getControlNetModels: build.query<
-      EntityState<ControlNetModelConfigEntity, string>,
-      void
-    >({
+    getControlNetModels: build.query<EntityState<ControlNetModelConfigEntity, string>, void>({
       query: () => ({ url: 'models/', params: { model_type: 'controlnet' } }),
       providesTags: (result) => {
-        const tags: ApiTagDescription[] = [
-          { type: 'ControlNetModel', id: LIST_TAG },
-          'Model',
-        ];
+        const tags: ApiTagDescription[] = [{ type: 'ControlNetModel', id: LIST_TAG }, 'Model'];
 
         if (result) {
           tags.push(
@@ -401,25 +334,14 @@ export const modelsApi = api.injectEndpoints({
         return tags;
       },
       transformResponse: (response: { models: ControlNetModelConfig[] }) => {
-        const entities = createModelEntities<ControlNetModelConfigEntity>(
-          response.models
-        );
-        return controlNetModelsAdapter.setAll(
-          controlNetModelsAdapter.getInitialState(),
-          entities
-        );
+        const entities = createModelEntities<ControlNetModelConfigEntity>(response.models);
+        return controlNetModelsAdapter.setAll(controlNetModelsAdapter.getInitialState(), entities);
       },
     }),
-    getIPAdapterModels: build.query<
-      EntityState<IPAdapterModelConfigEntity, string>,
-      void
-    >({
+    getIPAdapterModels: build.query<EntityState<IPAdapterModelConfigEntity, string>, void>({
       query: () => ({ url: 'models/', params: { model_type: 'ip_adapter' } }),
       providesTags: (result) => {
-        const tags: ApiTagDescription[] = [
-          { type: 'IPAdapterModel', id: LIST_TAG },
-          'Model',
-        ];
+        const tags: ApiTagDescription[] = [{ type: 'IPAdapterModel', id: LIST_TAG }, 'Model'];
 
         if (result) {
           tags.push(
@@ -433,25 +355,14 @@ export const modelsApi = api.injectEndpoints({
         return tags;
       },
       transformResponse: (response: { models: IPAdapterModelConfig[] }) => {
-        const entities = createModelEntities<IPAdapterModelConfigEntity>(
-          response.models
-        );
-        return ipAdapterModelsAdapter.setAll(
-          ipAdapterModelsAdapter.getInitialState(),
-          entities
-        );
+        const entities = createModelEntities<IPAdapterModelConfigEntity>(response.models);
+        return ipAdapterModelsAdapter.setAll(ipAdapterModelsAdapter.getInitialState(), entities);
       },
     }),
-    getT2IAdapterModels: build.query<
-      EntityState<T2IAdapterModelConfigEntity, string>,
-      void
-    >({
+    getT2IAdapterModels: build.query<EntityState<T2IAdapterModelConfigEntity, string>, void>({
       query: () => ({ url: 'models/', params: { model_type: 't2i_adapter' } }),
       providesTags: (result) => {
-        const tags: ApiTagDescription[] = [
-          { type: 'T2IAdapterModel', id: LIST_TAG },
-          'Model',
-        ];
+        const tags: ApiTagDescription[] = [{ type: 'T2IAdapterModel', id: LIST_TAG }, 'Model'];
 
         if (result) {
           tags.push(
@@ -465,22 +376,14 @@ export const modelsApi = api.injectEndpoints({
         return tags;
       },
       transformResponse: (response: { models: T2IAdapterModelConfig[] }) => {
-        const entities = createModelEntities<T2IAdapterModelConfigEntity>(
-          response.models
-        );
-        return t2iAdapterModelsAdapter.setAll(
-          t2iAdapterModelsAdapter.getInitialState(),
-          entities
-        );
+        const entities = createModelEntities<T2IAdapterModelConfigEntity>(response.models);
+        return t2iAdapterModelsAdapter.setAll(t2iAdapterModelsAdapter.getInitialState(), entities);
       },
     }),
     getVaeModels: build.query<EntityState<VaeModelConfigEntity, string>, void>({
       query: () => ({ url: 'models/', params: { model_type: 'vae' } }),
       providesTags: (result) => {
-        const tags: ApiTagDescription[] = [
-          { type: 'VaeModel', id: LIST_TAG },
-          'Model',
-        ];
+        const tags: ApiTagDescription[] = [{ type: 'VaeModel', id: LIST_TAG }, 'Model'];
 
         if (result) {
           tags.push(
@@ -494,25 +397,14 @@ export const modelsApi = api.injectEndpoints({
         return tags;
       },
       transformResponse: (response: { models: VaeModelConfig[] }) => {
-        const entities = createModelEntities<VaeModelConfigEntity>(
-          response.models
-        );
-        return vaeModelsAdapter.setAll(
-          vaeModelsAdapter.getInitialState(),
-          entities
-        );
+        const entities = createModelEntities<VaeModelConfigEntity>(response.models);
+        return vaeModelsAdapter.setAll(vaeModelsAdapter.getInitialState(), entities);
       },
     }),
-    getTextualInversionModels: build.query<
-      EntityState<TextualInversionModelConfigEntity, string>,
-      void
-    >({
+    getTextualInversionModels: build.query<EntityState<TextualInversionModelConfigEntity, string>, void>({
       query: () => ({ url: 'models/', params: { model_type: 'embedding' } }),
       providesTags: (result) => {
-        const tags: ApiTagDescription[] = [
-          { type: 'TextualInversionModel', id: LIST_TAG },
-          'Model',
-        ];
+        const tags: ApiTagDescription[] = [{ type: 'TextualInversionModel', id: LIST_TAG }, 'Model'];
 
         if (result) {
           tags.push(
@@ -525,16 +417,9 @@ export const modelsApi = api.injectEndpoints({
 
         return tags;
       },
-      transformResponse: (response: {
-        models: TextualInversionModelConfig[];
-      }) => {
-        const entities = createModelEntities<TextualInversionModelConfigEntity>(
-          response.models
-        );
-        return textualInversionModelsAdapter.setAll(
-          textualInversionModelsAdapter.getInitialState(),
-          entities
-        );
+      transformResponse: (response: { models: TextualInversionModelConfig[] }) => {
+        const entities = createModelEntities<TextualInversionModelConfigEntity>(response.models);
+        return textualInversionModelsAdapter.setAll(textualInversionModelsAdapter.getInitialState(), entities);
       },
     }),
     getModelsInFolder: build.query<SearchFolderResponse, SearchFolderArg>({
diff --git a/invokeai/frontend/web/src/services/api/endpoints/queue.ts b/invokeai/frontend/web/src/services/api/endpoints/queue.ts
index eb42b351ea..6c0798a936 100644
--- a/invokeai/frontend/web/src/services/api/endpoints/queue.ts
+++ b/invokeai/frontend/web/src/services/api/endpoints/queue.ts
@@ -1,8 +1,4 @@
-import type {
-  EntityState,
-  ThunkDispatch,
-  UnknownAction,
-} from '@reduxjs/toolkit';
+import type { EntityState, ThunkDispatch, UnknownAction } from '@reduxjs/toolkit';
 import { createEntityAdapter } from '@reduxjs/toolkit';
 import { getSelectorsOptions } from 'app/store/createMemoizedSelector';
 import { $queueId } from 'app/store/nanostores/queueId';
@@ -13,9 +9,7 @@ import type { components, paths } from 'services/api/schema';
 import type { ApiTagDescription } from '..';
 import { api } from '..';
 
-const getListQueueItemsUrl = (
-  queryArgs?: paths['/api/v1/queue/{queue_id}/list']['get']['parameters']['query']
-) => {
+const getListQueueItemsUrl = (queryArgs?: paths['/api/v1/queue/{queue_id}/list']['get']['parameters']['query']) => {
   const query = queryArgs
     ? queryString.stringify(queryArgs, {
         arrayFormat: 'none',
@@ -30,15 +24,10 @@ const getListQueueItemsUrl = (
 };
 
 export type SessionQueueItemStatus = NonNullable<
-  NonNullable<
-    paths['/api/v1/queue/{queue_id}/list']['get']['parameters']['query']
-  >['status']
+  NonNullable<paths['/api/v1/queue/{queue_id}/list']['get']['parameters']['query']>['status']
 >;
 
-export const queueItemsAdapter = createEntityAdapter<
-  components['schemas']['SessionQueueItemDTO'],
-  string
->({
+export const queueItemsAdapter = createEntityAdapter<components['schemas']['SessionQueueItemDTO'], string>({
   selectId: (queueItem) => String(queueItem.item_id),
   sortComparer: (a, b) => {
     // Sort by priority in descending order
@@ -60,10 +49,7 @@ export const queueItemsAdapter = createEntityAdapter<
     return 0;
   },
 });
-export const queueItemsAdapterSelectors = queueItemsAdapter.getSelectors(
-  undefined,
-  getSelectorsOptions
-);
+export const queueItemsAdapterSelectors = queueItemsAdapter.getSelectors(undefined, getSelectorsOptions);
 
 export const queueApi = api.injectEndpoints({
   endpoints: (build) => ({
@@ -76,11 +62,7 @@ export const queueApi = api.injectEndpoints({
         body: arg,
         method: 'POST',
       }),
-      invalidatesTags: [
-        'SessionQueueStatus',
-        'CurrentSessionQueueItem',
-        'NextSessionQueueItem',
-      ],
+      invalidatesTags: ['SessionQueueStatus', 'CurrentSessionQueueItem', 'NextSessionQueueItem'],
       onQueryStarted: async (arg, api) => {
         const { dispatch, queryFulfilled } = api;
         try {
@@ -164,10 +146,7 @@ export const queueApi = api.injectEndpoints({
         method: 'GET',
       }),
       providesTags: (result) => {
-        const tags: ApiTagDescription[] = [
-          'CurrentSessionQueueItem',
-          'FetchOnReconnect',
-        ];
+        const tags: ApiTagDescription[] = ['CurrentSessionQueueItem', 'FetchOnReconnect'];
         if (result) {
           tags.push({ type: 'SessionQueueItem', id: result.item_id });
         }
@@ -183,10 +162,7 @@ export const queueApi = api.injectEndpoints({
         method: 'GET',
       }),
       providesTags: (result) => {
-        const tags: ApiTagDescription[] = [
-          'NextSessionQueueItem',
-          'FetchOnReconnect',
-        ];
+        const tags: ApiTagDescription[] = ['NextSessionQueueItem', 'FetchOnReconnect'];
         if (result) {
           tags.push({ type: 'SessionQueueItem', id: result.item_id });
         }
@@ -247,20 +223,16 @@ export const queueApi = api.injectEndpoints({
         try {
           const { data } = await queryFulfilled;
           dispatch(
-            queueApi.util.updateQueryData(
-              'listQueueItems',
-              undefined,
-              (draft) => {
-                queueItemsAdapter.updateOne(draft, {
-                  id: String(item_id),
-                  changes: {
-                    status: data.status,
-                    completed_at: data.completed_at,
-                    updated_at: data.updated_at,
-                  },
-                });
-              }
-            )
+            queueApi.util.updateQueryData('listQueueItems', undefined, (draft) => {
+              queueItemsAdapter.updateOne(draft, {
+                id: String(item_id),
+                changes: {
+                  status: data.status,
+                  completed_at: data.completed_at,
+                  updated_at: data.updated_at,
+                },
+              });
+            })
           );
         } catch {
           // no-op
@@ -309,9 +281,7 @@ export const queueApi = api.injectEndpoints({
       serializeQueryArgs: () => {
         return `queue/${$queueId.get()}/list`;
       },
-      transformResponse: (
-        response: components['schemas']['CursorPaginatedResults_SessionQueueItemDTO_']
-      ) =>
+      transformResponse: (response: components['schemas']['CursorPaginatedResults_SessionQueueItemDTO_']) =>
         queueItemsAdapter.addMany(
           queueItemsAdapter.getInitialState({
             has_more: response.has_more,
@@ -319,10 +289,7 @@ export const queueApi = api.injectEndpoints({
           response.items
         ),
       merge: (cache, response) => {
-        queueItemsAdapter.addMany(
-          cache,
-          queueItemsAdapterSelectors.selectAll(response)
-        );
+        queueItemsAdapter.addMany(cache, queueItemsAdapterSelectors.selectAll(response));
         cache.has_more = response.has_more;
       },
       forceRefetch: ({ currentArg, previousArg }) => currentArg !== previousArg,
diff --git a/invokeai/frontend/web/src/services/api/endpoints/workflows.ts b/invokeai/frontend/web/src/services/api/endpoints/workflows.ts
index 0974187004..c382f7e111 100644
--- a/invokeai/frontend/web/src/services/api/endpoints/workflows.ts
+++ b/invokeai/frontend/web/src/services/api/endpoints/workflows.ts
@@ -9,19 +9,12 @@ export const workflowsApi = api.injectEndpoints({
       string
     >({
       query: (workflow_id) => `workflows/i/${workflow_id}`,
-      providesTags: (result, error, workflow_id) => [
-        { type: 'Workflow', id: workflow_id },
-        'FetchOnReconnect',
-      ],
+      providesTags: (result, error, workflow_id) => [{ type: 'Workflow', id: workflow_id }, 'FetchOnReconnect'],
       onQueryStarted: async (arg, api) => {
         const { dispatch, queryFulfilled } = api;
         try {
           await queryFulfilled;
-          dispatch(
-            workflowsApi.util.invalidateTags([
-              { type: 'WorkflowsRecent', id: LIST_TAG },
-            ])
-          );
+          dispatch(workflowsApi.util.invalidateTags([{ type: 'WorkflowsRecent', id: LIST_TAG }]));
         } catch {
           // no-op
         }
diff --git a/invokeai/frontend/web/src/services/api/hooks/useBoardTotal.ts b/invokeai/frontend/web/src/services/api/hooks/useBoardTotal.ts
index b8ea8a3080..49c49ac36a 100644
--- a/invokeai/frontend/web/src/services/api/hooks/useBoardTotal.ts
+++ b/invokeai/frontend/web/src/services/api/hooks/useBoardTotal.ts
@@ -1,10 +1,7 @@
 import { useAppSelector } from 'app/store/storeHooks';
 import type { BoardId } from 'features/gallery/store/types';
 import { useMemo } from 'react';
-import {
-  useGetBoardAssetsTotalQuery,
-  useGetBoardImagesTotalQuery,
-} from 'services/api/endpoints/boards';
+import { useGetBoardAssetsTotalQuery, useGetBoardImagesTotalQuery } from 'services/api/endpoints/boards';
 
 export const useBoardTotal = (board_id: BoardId) => {
   const galleryView = useAppSelector((s) => s.gallery.galleryView);
diff --git a/invokeai/frontend/web/src/services/api/hooks/useDebouncedImageWorkflow.ts b/invokeai/frontend/web/src/services/api/hooks/useDebouncedImageWorkflow.ts
index ce31e83d5d..2945de612c 100644
--- a/invokeai/frontend/web/src/services/api/hooks/useDebouncedImageWorkflow.ts
+++ b/invokeai/frontend/web/src/services/api/hooks/useDebouncedImageWorkflow.ts
@@ -5,18 +5,11 @@ import type { ImageDTO } from 'services/api/types';
 import { useDebounce } from 'use-debounce';
 
 export const useDebouncedImageWorkflow = (imageDTO?: ImageDTO | null) => {
-  const workflowFetchDebounce = useAppSelector(
-    (s) => s.config.workflowFetchDebounce ?? 300
-  );
+  const workflowFetchDebounce = useAppSelector((s) => s.config.workflowFetchDebounce ?? 300);
 
-  const [debouncedImageName] = useDebounce(
-    imageDTO?.has_workflow ? imageDTO.image_name : null,
-    workflowFetchDebounce
-  );
+  const [debouncedImageName] = useDebounce(imageDTO?.has_workflow ? imageDTO.image_name : null, workflowFetchDebounce);
 
-  const { data: workflow, isLoading } = useGetImageWorkflowQuery(
-    debouncedImageName ?? skipToken
-  );
+  const { data: workflow, isLoading } = useGetImageWorkflowQuery(debouncedImageName ?? skipToken);
 
   return { workflow, isLoading };
 };
diff --git a/invokeai/frontend/web/src/services/api/hooks/useDebouncedMetadata.ts b/invokeai/frontend/web/src/services/api/hooks/useDebouncedMetadata.ts
index 9a8fee31af..83f8728fd2 100644
--- a/invokeai/frontend/web/src/services/api/hooks/useDebouncedMetadata.ts
+++ b/invokeai/frontend/web/src/services/api/hooks/useDebouncedMetadata.ts
@@ -4,15 +4,11 @@ import { useGetImageMetadataQuery } from 'services/api/endpoints/images';
 import { useDebounce } from 'use-debounce';
 
 export const useDebouncedMetadata = (imageName?: string | null) => {
-  const metadataFetchDebounce = useAppSelector(
-    (s) => s.config.metadataFetchDebounce ?? 300
-  );
+  const metadataFetchDebounce = useAppSelector((s) => s.config.metadataFetchDebounce ?? 300);
 
   const [debouncedImageName] = useDebounce(imageName, metadataFetchDebounce);
 
-  const { data: metadata, isLoading } = useGetImageMetadataQuery(
-    debouncedImageName ?? skipToken
-  );
+  const { data: metadata, isLoading } = useGetImageMetadataQuery(debouncedImageName ?? skipToken);
 
   return { metadata, isLoading };
 };
diff --git a/invokeai/frontend/web/src/services/api/index.ts b/invokeai/frontend/web/src/services/api/index.ts
index 9679fabc3f..9b8aeee52e 100644
--- a/invokeai/frontend/web/src/services/api/index.ts
+++ b/invokeai/frontend/web/src/services/api/index.ts
@@ -1,9 +1,4 @@
-import type {
-  BaseQueryFn,
-  FetchArgs,
-  FetchBaseQueryError,
-  TagDescription,
-} from '@reduxjs/toolkit/query/react';
+import type { BaseQueryFn, FetchArgs, FetchBaseQueryError, TagDescription } from '@reduxjs/toolkit/query/react';
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 import { $authToken } from 'app/store/nanostores/authToken';
 import { $baseUrl } from 'app/store/nanostores/baseUrl';
@@ -47,19 +42,17 @@ export const tagTypes = [
 export type ApiTagDescription = TagDescription<(typeof tagTypes)[number]>;
 export const LIST_TAG = 'LIST';
 
-const dynamicBaseQuery: BaseQueryFn<
-  string | FetchArgs,
-  unknown,
-  FetchBaseQueryError
-> = async (args, api, extraOptions) => {
+const dynamicBaseQuery: BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError> = async (
+  args,
+  api,
+  extraOptions
+) => {
   const baseUrl = $baseUrl.get();
   const authToken = $authToken.get();
   const projectId = $projectId.get();
 
   const rawBaseQuery = fetchBaseQuery({
-    baseUrl: baseUrl
-      ? `${baseUrl}/api/v1`
-      : `${window.location.href.replace(/\/$/, '')}/api/v1`,
+    baseUrl: baseUrl ? `${baseUrl}/api/v1` : `${window.location.href.replace(/\/$/, '')}/api/v1`,
     prepareHeaders: (headers) => {
       if (authToken) {
         headers.set('Authorization', `Bearer ${authToken}`);
diff --git a/invokeai/frontend/web/src/services/api/thunks/schema.ts b/invokeai/frontend/web/src/services/api/thunks/schema.ts
index b4134f9690..3ba406d8ed 100644
--- a/invokeai/frontend/web/src/services/api/thunks/schema.ts
+++ b/invokeai/frontend/web/src/services/api/thunks/schema.ts
@@ -23,25 +23,18 @@ function getCircularReplacer() {
   };
 }
 
-export const receivedOpenAPISchema = createAsyncThunk(
-  'nodes/receivedOpenAPISchema',
-  async (_, { rejectWithValue }) => {
-    try {
-      const openAPISchemaUrl = $openAPISchemaUrl.get();
+export const receivedOpenAPISchema = createAsyncThunk('nodes/receivedOpenAPISchema', async (_, { rejectWithValue }) => {
+  try {
+    const openAPISchemaUrl = $openAPISchemaUrl.get();
 
-      const url = openAPISchemaUrl
-        ? openAPISchemaUrl
-        : `${window.location.href.replace(/\/$/, '')}/openapi.json`;
-      const response = await fetch(url);
-      const openAPISchema = await response.json();
+    const url = openAPISchemaUrl ? openAPISchemaUrl : `${window.location.href.replace(/\/$/, '')}/openapi.json`;
+    const response = await fetch(url);
+    const openAPISchema = await response.json();
 
-      const schemaJSON = JSON.parse(
-        JSON.stringify(openAPISchema, getCircularReplacer())
-      );
+    const schemaJSON = JSON.parse(JSON.stringify(openAPISchema, getCircularReplacer()));
 
-      return schemaJSON;
-    } catch (error) {
-      return rejectWithValue({ error });
-    }
+    return schemaJSON;
+  } catch (error) {
+    return rejectWithValue({ error });
   }
-);
+});
diff --git a/invokeai/frontend/web/src/services/api/types.ts b/invokeai/frontend/web/src/services/api/types.ts
index 63969d3a62..e8d2f1a863 100644
--- a/invokeai/frontend/web/src/services/api/types.ts
+++ b/invokeai/frontend/web/src/services/api/types.ts
@@ -7,21 +7,16 @@ type s = components['schemas'];
 
 export type ImageCache = EntityState<ImageDTO, string>;
 
-export type ListImagesArgs = NonNullable<
-  paths['/api/v1/images/']['get']['parameters']['query']
->;
+export type ListImagesArgs = NonNullable<paths['/api/v1/images/']['get']['parameters']['query']>;
 
 export type DeleteBoardResult =
   paths['/api/v1/boards/{board_id}']['delete']['responses']['200']['content']['application/json'];
 
-export type ListBoardsArg = NonNullable<
-  paths['/api/v1/boards/']['get']['parameters']['query']
->;
+export type ListBoardsArg = NonNullable<paths['/api/v1/boards/']['get']['parameters']['query']>;
 
-export type UpdateBoardArg =
-  paths['/api/v1/boards/{board_id}']['patch']['parameters']['path'] & {
-    changes: paths['/api/v1/boards/{board_id}']['patch']['requestBody']['content']['application/json'];
-  };
+export type UpdateBoardArg = paths['/api/v1/boards/{board_id}']['patch']['parameters']['path'] & {
+  changes: paths['/api/v1/boards/{board_id}']['patch']['requestBody']['content']['application/json'];
+};
 
 export type BatchConfig =
   paths['/api/v1/queue/{queue_id}/enqueue_batch']['post']['requestBody']['content']['application/json'];
@@ -45,17 +40,13 @@ export type ImageChanges = s['ImageRecordChanges'];
 export type ImageCategory = s['ImageCategory'];
 export type ResourceOrigin = s['ResourceOrigin'];
 export type ImageField = s['ImageField'];
-export type OffsetPaginatedResults_BoardDTO_ =
-  s['OffsetPaginatedResults_BoardDTO_'];
-export type OffsetPaginatedResults_ImageDTO_ =
-  s['OffsetPaginatedResults_ImageDTO_'];
+export type OffsetPaginatedResults_BoardDTO_ = s['OffsetPaginatedResults_BoardDTO_'];
+export type OffsetPaginatedResults_ImageDTO_ = s['OffsetPaginatedResults_ImageDTO_'];
 
 // Models
-export type ModelType =
-  s['invokeai__backend__model_management__models__base__ModelType'];
+export type ModelType = s['invokeai__backend__model_management__models__base__ModelType'];
 export type SubModelType = s['SubModelType'];
-export type BaseModelType =
-  s['invokeai__backend__model_management__models__base__BaseModelType'];
+export type BaseModelType = s['invokeai__backend__model_management__models__base__BaseModelType'];
 export type MainModelField = s['MainModelField'];
 export type VAEModelField = s['VAEModelField'];
 export type LoRAModelField = s['LoRAModelField'];
@@ -70,17 +61,12 @@ export type IPAdapterField = s['IPAdapterField'];
 // Model Configs
 export type LoRAModelConfig = s['LoRAModelConfig'];
 export type VaeModelConfig = s['VaeModelConfig'];
-export type ControlNetModelCheckpointConfig =
-  s['ControlNetModelCheckpointConfig'];
-export type ControlNetModelDiffusersConfig =
-  s['ControlNetModelDiffusersConfig'];
-export type ControlNetModelConfig =
-  | ControlNetModelCheckpointConfig
-  | ControlNetModelDiffusersConfig;
+export type ControlNetModelCheckpointConfig = s['ControlNetModelCheckpointConfig'];
+export type ControlNetModelDiffusersConfig = s['ControlNetModelDiffusersConfig'];
+export type ControlNetModelConfig = ControlNetModelCheckpointConfig | ControlNetModelDiffusersConfig;
 export type IPAdapterModelInvokeAIConfig = s['IPAdapterModelInvokeAIConfig'];
 export type IPAdapterModelConfig = IPAdapterModelInvokeAIConfig;
-export type T2IAdapterModelDiffusersConfig =
-  s['T2IAdapterModelDiffusersConfig'];
+export type T2IAdapterModelDiffusersConfig = s['T2IAdapterModelDiffusersConfig'];
 export type T2IAdapterModelConfig = T2IAdapterModelDiffusersConfig;
 export type TextualInversionModelConfig = s['TextualInversionModelConfig'];
 export type DiffusersModelConfig =
@@ -160,29 +146,19 @@ export type ControlNetInvocation = s['ControlNetInvocation'];
 export type T2IAdapterInvocation = s['T2IAdapterInvocation'];
 export type IPAdapterInvocation = s['IPAdapterInvocation'];
 export type CannyImageProcessorInvocation = s['CannyImageProcessorInvocation'];
-export type ColorMapImageProcessorInvocation =
-  s['ColorMapImageProcessorInvocation'];
-export type ContentShuffleImageProcessorInvocation =
-  s['ContentShuffleImageProcessorInvocation'];
-export type DepthAnythingImageProcessorInvocation =
-  s['DepthAnythingImageProcessorInvocation'];
+export type ColorMapImageProcessorInvocation = s['ColorMapImageProcessorInvocation'];
+export type ContentShuffleImageProcessorInvocation = s['ContentShuffleImageProcessorInvocation'];
+export type DepthAnythingImageProcessorInvocation = s['DepthAnythingImageProcessorInvocation'];
 export type HedImageProcessorInvocation = s['HedImageProcessorInvocation'];
-export type LineartAnimeImageProcessorInvocation =
-  s['LineartAnimeImageProcessorInvocation'];
-export type LineartImageProcessorInvocation =
-  s['LineartImageProcessorInvocation'];
-export type MediapipeFaceProcessorInvocation =
-  s['MediapipeFaceProcessorInvocation'];
-export type MidasDepthImageProcessorInvocation =
-  s['MidasDepthImageProcessorInvocation'];
+export type LineartAnimeImageProcessorInvocation = s['LineartAnimeImageProcessorInvocation'];
+export type LineartImageProcessorInvocation = s['LineartImageProcessorInvocation'];
+export type MediapipeFaceProcessorInvocation = s['MediapipeFaceProcessorInvocation'];
+export type MidasDepthImageProcessorInvocation = s['MidasDepthImageProcessorInvocation'];
 export type MlsdImageProcessorInvocation = s['MlsdImageProcessorInvocation'];
-export type NormalbaeImageProcessorInvocation =
-  s['NormalbaeImageProcessorInvocation'];
-export type OpenposeImageProcessorInvocation =
-  s['OpenposeImageProcessorInvocation'];
+export type NormalbaeImageProcessorInvocation = s['NormalbaeImageProcessorInvocation'];
+export type OpenposeImageProcessorInvocation = s['OpenposeImageProcessorInvocation'];
 export type PidiImageProcessorInvocation = s['PidiImageProcessorInvocation'];
-export type ZoeDepthImageProcessorInvocation =
-  s['ZoeDepthImageProcessorInvocation'];
+export type ZoeDepthImageProcessorInvocation = s['ZoeDepthImageProcessorInvocation'];
 
 // Node Outputs
 export type ImageOutput = s['ImageOutput'];
@@ -237,5 +213,4 @@ type TypeGuard<T> = {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type TypeGuardFor<T extends TypeGuard<any>> =
-  T extends TypeGuard<infer U> ? U : never;
+export type TypeGuardFor<T extends TypeGuard<any>> = T extends TypeGuard<infer U> ? U : never;
diff --git a/invokeai/frontend/web/src/services/api/util.ts b/invokeai/frontend/web/src/services/api/util.ts
index 7461e656bb..f7f36f4630 100644
--- a/invokeai/frontend/web/src/services/api/util.ts
+++ b/invokeai/frontend/web/src/services/api/util.ts
@@ -1,18 +1,12 @@
 import { createEntityAdapter } from '@reduxjs/toolkit';
 import { getSelectorsOptions } from 'app/store/createMemoizedSelector';
 import { dateComparator } from 'common/util/dateComparator';
-import {
-  ASSETS_CATEGORIES,
-  IMAGE_CATEGORIES,
-} from 'features/gallery/store/types';
+import { ASSETS_CATEGORIES, IMAGE_CATEGORIES } from 'features/gallery/store/types';
 import queryString from 'query-string';
 
 import type { ImageCache, ImageDTO, ListImagesArgs } from './types';
 
-export const getIsImageInDateRange = (
-  data: ImageCache | undefined,
-  imageDTO: ImageDTO
-) => {
+export const getIsImageInDateRange = (data: ImageCache | undefined, imageDTO: ImageDTO) => {
   if (!data) {
     return false;
   }
@@ -37,8 +31,7 @@ export const getIsImageInDateRange = (
   }
 
   if (imageDTO.starred) {
-    const lastStarredImage =
-      cachedStarredImages[cachedStarredImages.length - 1];
+    const lastStarredImage = cachedStarredImages[cachedStarredImages.length - 1];
     // if starring or already starred, want to look in list of starred images
     if (!lastStarredImage) {
       return true;
@@ -47,8 +40,7 @@ export const getIsImageInDateRange = (
     const oldestDate = new Date(lastStarredImage.created_at);
     return createdDate >= oldestDate;
   } else {
-    const lastUnstarredImage =
-      cachedUnstarredImages[cachedUnstarredImages.length - 1];
+    const lastUnstarredImage = cachedUnstarredImages[cachedUnstarredImages.length - 1];
     // if unstarring or already unstarred, want to look in list of unstarred images
     if (!lastUnstarredImage) {
       return false;
@@ -83,10 +75,7 @@ export const imagesAdapter = createEntityAdapter<ImageDTO, string>({
 });
 
 // Create selectors for the adapter.
-export const imagesSelectors = imagesAdapter.getSelectors(
-  undefined,
-  getSelectorsOptions
-);
+export const imagesSelectors = imagesAdapter.getSelectors(undefined, getSelectorsOptions);
 
 // Helper to create the url for the listImages endpoint. Also we use it to create the cache key.
 export const getListImagesUrl = (queryArgs: ListImagesArgs) =>
diff --git a/invokeai/frontend/web/src/services/events/actions.ts b/invokeai/frontend/web/src/services/events/actions.ts
index 411d7d413d..101e928f79 100644
--- a/invokeai/frontend/web/src/services/events/actions.ts
+++ b/invokeai/frontend/web/src/services/events/actions.ts
@@ -23,9 +23,7 @@ export const socketSubscribedSession = createAction<{
   sessionId: string;
 }>('socket/socketSubscribedSession');
 
-export const socketUnsubscribedSession = createAction<{ sessionId: string }>(
-  'socket/socketUnsubscribedSession'
-);
+export const socketUnsubscribedSession = createAction<{ sessionId: string }>('socket/socketUnsubscribedSession');
 
 export const socketInvocationStarted = createAction<{
   data: InvocationStartedEvent;
diff --git a/invokeai/frontend/web/src/services/events/types.ts b/invokeai/frontend/web/src/services/events/types.ts
index 46b8b066cc..9579b6abc1 100644
--- a/invokeai/frontend/web/src/services/events/types.ts
+++ b/invokeai/frontend/web/src/services/events/types.ts
@@ -1,11 +1,5 @@
 import type { components } from 'services/api/schema';
-import type {
-  BaseModelType,
-  Graph,
-  GraphExecutionState,
-  ModelType,
-  SubModelType,
-} from 'services/api/types';
+import type { BaseModelType, Graph, GraphExecutionState, ModelType, SubModelType } from 'services/api/types';
 
 /**
  * A progress image, we get one for each step in the generation
@@ -213,9 +207,7 @@ export type ServerToClientEvents = {
   invocation_complete: (payload: InvocationCompleteEvent) => void;
   invocation_error: (payload: InvocationErrorEvent) => void;
   invocation_started: (payload: InvocationStartedEvent) => void;
-  graph_execution_state_complete: (
-    payload: GraphExecutionStateCompleteEvent
-  ) => void;
+  graph_execution_state_complete: (payload: GraphExecutionStateCompleteEvent) => void;
   model_load_started: (payload: ModelLoadStartedEvent) => void;
   model_load_completed: (payload: ModelLoadCompletedEvent) => void;
   session_retrieval_error: (payload: SessionRetrievalErrorEvent) => void;
diff --git a/invokeai/frontend/web/src/services/events/util/setEventListeners.ts b/invokeai/frontend/web/src/services/events/util/setEventListeners.ts
index a333e27cea..c66defee60 100644
--- a/invokeai/frontend/web/src/services/events/util/setEventListeners.ts
+++ b/invokeai/frontend/web/src/services/events/util/setEventListeners.ts
@@ -16,10 +16,7 @@ import {
   socketQueueItemStatusChanged,
   socketSessionRetrievalError,
 } from 'services/events/actions';
-import type {
-  ClientToServerEvents,
-  ServerToClientEvents,
-} from 'services/events/types';
+import type { ClientToServerEvents, ServerToClientEvents } from 'services/events/types';
 import type { Socket } from 'socket.io-client';
 
 type SetEventListenersArg = {
@@ -41,9 +38,7 @@ export const setEventListeners = (arg: SetEventListenersArg) => {
 
   socket.on('connect_error', (error) => {
     if (error && error.message) {
-      const data: string | undefined = (
-        error as unknown as { data: string | undefined }
-      ).data;
+      const data: string | undefined = (error as unknown as { data: string | undefined }).data;
       if (data === 'ERR_UNAUTHENTICATED') {
         dispatch(
           addToast(
diff --git a/invokeai/frontend/web/tsconfig.node.json b/invokeai/frontend/web/tsconfig.node.json
index bbbd77a670..b5936d415c 100644
--- a/invokeai/frontend/web/tsconfig.node.json
+++ b/invokeai/frontend/web/tsconfig.node.json
@@ -5,10 +5,5 @@
     "moduleResolution": "Node",
     "allowSyntheticDefaultImports": true
   },
-  "include": [
-    "vite.config.mts",
-    "config/vite.app.config.mts",
-    "config/vite.package.config.mts",
-    "config/common.mts"
-  ]
+  "include": ["vite.config.mts", "config/vite.app.config.mts", "config/vite.package.config.mts", "config/common.mts"]
 }

From c3b36cb61d3c32d200ef1894ae213d0da0d471f4 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 27 Jan 2024 21:01:37 +1100
Subject: [PATCH 060/133] chore(ui): remove chakra CLI

It doesn't work now that the theme is external. I'm not sure how to fix it and not sure if it really did much (I don't think I ever got autocomplete...). Maybe it can be implemented in `@invoke-ai/ui-library`.
---
 invokeai/frontend/web/package.json   |   8 +-
 invokeai/frontend/web/pnpm-lock.yaml | 283 ---------------------------
 2 files changed, 2 insertions(+), 289 deletions(-)

diff --git a/invokeai/frontend/web/package.json b/invokeai/frontend/web/package.json
index ba99b5fdcb..a864d4c372 100644
--- a/invokeai/frontend/web/package.json
+++ b/invokeai/frontend/web/package.json
@@ -19,8 +19,8 @@
     "dist"
   ],
   "scripts": {
-    "dev": "concurrently \"vite dev\" \"pnpm run theme:watch\"",
-    "dev:host": "concurrently \"vite dev --host\" \"pnpm run theme:watch\"",
+    "dev": "vite dev",
+    "dev:host": "vite dev --host",
     "build": "pnpm run lint && vite build",
     "typegen": "node scripts/typegen.js",
     "preview": "vite preview",
@@ -31,8 +31,6 @@
     "lint": "concurrently -g -n eslint,prettier,tsc,madge -c cyan,green,magenta,yellow \"pnpm run lint:eslint\" \"pnpm run lint:prettier\" \"pnpm run lint:tsc\" \"pnpm run lint:madge\"",
     "fix": "eslint --fix . && prettier --log-level warn --write .",
     "preinstall": "npx only-allow pnpm",
-    "theme": "chakra-cli tokens node_modules/@invoke-ai/ui-library",
-    "theme:watch": "chakra-cli tokens node_modules/@invoke-ai/ui-library --watch",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "unimported": "npx unimported"
@@ -106,7 +104,6 @@
     "zod-validation-error": "^3.0.0"
   },
   "peerDependencies": {
-    "@chakra-ui/cli": "^2.4.1",
     "@chakra-ui/react": "^2.8.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -114,7 +111,6 @@
   },
   "devDependencies": {
     "@arthurgeron/eslint-plugin-react-usememo": "^2.2.3",
-    "@chakra-ui/cli": "^2.4.1",
     "@invoke-ai/eslint-config-react": "^0.0.11",
     "@invoke-ai/prettier-config-react": "^0.0.6",
     "@storybook/addon-docs": "^7.6.10",
diff --git a/invokeai/frontend/web/pnpm-lock.yaml b/invokeai/frontend/web/pnpm-lock.yaml
index ae1dd40d34..f7551bcec2 100644
--- a/invokeai/frontend/web/pnpm-lock.yaml
+++ b/invokeai/frontend/web/pnpm-lock.yaml
@@ -177,9 +177,6 @@ devDependencies:
   '@arthurgeron/eslint-plugin-react-usememo':
     specifier: ^2.2.3
     version: 2.2.3
-  '@chakra-ui/cli':
-    specifier: ^2.4.1
-    version: 2.4.1
   '@invoke-ai/eslint-config-react':
     specifier: ^0.0.11
     version: 0.0.11(@typescript-eslint/eslint-plugin@6.19.0)(@typescript-eslint/parser@6.19.0)(eslint-config-prettier@9.1.0)(eslint-plugin-i18next@6.0.3)(eslint-plugin-import@2.29.1)(eslint-plugin-react-hooks@4.6.0)(eslint-plugin-react-refresh@0.4.5)(eslint-plugin-react@7.33.2)(eslint-plugin-simple-import-sort@10.0.0)(eslint-plugin-storybook@0.6.15)(eslint-plugin-unused-imports@3.0.0)(eslint@8.56.0)
@@ -1858,19 +1855,6 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@chakra-ui/cli@2.4.1:
-    resolution: {integrity: sha512-GZZuHUA1cXJWpmYNiVTLPihvY4VhIssRl+AXgw/0IbeodTMop3jWlIioPKLAQeXu5CwvRA6iESyGjnu1V8Zykg==}
-    hasBin: true
-    dependencies:
-      chokidar: 3.5.3
-      cli-check-node: 1.3.4
-      cli-handle-unhandled: 1.1.1
-      cli-welcome: 2.2.2
-      commander: 9.5.0
-      esbuild: 0.17.19
-      prettier: 2.8.8
-    dev: true
-
   /@chakra-ui/clickable@2.1.0(react@18.2.0):
     resolution: {integrity: sha512-flRA/ClPUGPYabu+/GLREZVZr9j2uyyazCAUHAdrTUEdDYCr31SVGhgh7dgKdtq23bOvAQJpIJjw/0Bs0WvbXw==}
     peerDependencies:
@@ -3047,15 +3031,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/android-arm64@0.17.19:
-    resolution: {integrity: sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/android-arm64@0.18.20:
     resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==}
     engines: {node: '>=12'}
@@ -3074,15 +3049,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/android-arm@0.17.19:
-    resolution: {integrity: sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/android-arm@0.18.20:
     resolution: {integrity: sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==}
     engines: {node: '>=12'}
@@ -3101,15 +3067,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/android-x64@0.17.19:
-    resolution: {integrity: sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/android-x64@0.18.20:
     resolution: {integrity: sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==}
     engines: {node: '>=12'}
@@ -3128,15 +3085,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/darwin-arm64@0.17.19:
-    resolution: {integrity: sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/darwin-arm64@0.18.20:
     resolution: {integrity: sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==}
     engines: {node: '>=12'}
@@ -3155,15 +3103,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/darwin-x64@0.17.19:
-    resolution: {integrity: sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/darwin-x64@0.18.20:
     resolution: {integrity: sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==}
     engines: {node: '>=12'}
@@ -3182,15 +3121,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/freebsd-arm64@0.17.19:
-    resolution: {integrity: sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [freebsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/freebsd-arm64@0.18.20:
     resolution: {integrity: sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==}
     engines: {node: '>=12'}
@@ -3209,15 +3139,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/freebsd-x64@0.17.19:
-    resolution: {integrity: sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [freebsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/freebsd-x64@0.18.20:
     resolution: {integrity: sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==}
     engines: {node: '>=12'}
@@ -3236,15 +3157,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-arm64@0.17.19:
-    resolution: {integrity: sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/linux-arm64@0.18.20:
     resolution: {integrity: sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==}
     engines: {node: '>=12'}
@@ -3263,15 +3175,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-arm@0.17.19:
-    resolution: {integrity: sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/linux-arm@0.18.20:
     resolution: {integrity: sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==}
     engines: {node: '>=12'}
@@ -3290,15 +3193,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-ia32@0.17.19:
-    resolution: {integrity: sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/linux-ia32@0.18.20:
     resolution: {integrity: sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==}
     engines: {node: '>=12'}
@@ -3317,15 +3211,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-loong64@0.17.19:
-    resolution: {integrity: sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==}
-    engines: {node: '>=12'}
-    cpu: [loong64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/linux-loong64@0.18.20:
     resolution: {integrity: sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==}
     engines: {node: '>=12'}
@@ -3344,15 +3229,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-mips64el@0.17.19:
-    resolution: {integrity: sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==}
-    engines: {node: '>=12'}
-    cpu: [mips64el]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/linux-mips64el@0.18.20:
     resolution: {integrity: sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==}
     engines: {node: '>=12'}
@@ -3371,15 +3247,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-ppc64@0.17.19:
-    resolution: {integrity: sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/linux-ppc64@0.18.20:
     resolution: {integrity: sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==}
     engines: {node: '>=12'}
@@ -3398,15 +3265,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-riscv64@0.17.19:
-    resolution: {integrity: sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==}
-    engines: {node: '>=12'}
-    cpu: [riscv64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/linux-riscv64@0.18.20:
     resolution: {integrity: sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==}
     engines: {node: '>=12'}
@@ -3425,15 +3283,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-s390x@0.17.19:
-    resolution: {integrity: sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==}
-    engines: {node: '>=12'}
-    cpu: [s390x]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/linux-s390x@0.18.20:
     resolution: {integrity: sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==}
     engines: {node: '>=12'}
@@ -3452,15 +3301,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-x64@0.17.19:
-    resolution: {integrity: sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/linux-x64@0.18.20:
     resolution: {integrity: sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==}
     engines: {node: '>=12'}
@@ -3479,15 +3319,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/netbsd-x64@0.17.19:
-    resolution: {integrity: sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [netbsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/netbsd-x64@0.18.20:
     resolution: {integrity: sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==}
     engines: {node: '>=12'}
@@ -3506,15 +3337,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/openbsd-x64@0.17.19:
-    resolution: {integrity: sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [openbsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/openbsd-x64@0.18.20:
     resolution: {integrity: sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==}
     engines: {node: '>=12'}
@@ -3533,15 +3355,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/sunos-x64@0.17.19:
-    resolution: {integrity: sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [sunos]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/sunos-x64@0.18.20:
     resolution: {integrity: sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==}
     engines: {node: '>=12'}
@@ -3560,15 +3373,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-arm64@0.17.19:
-    resolution: {integrity: sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/win32-arm64@0.18.20:
     resolution: {integrity: sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==}
     engines: {node: '>=12'}
@@ -3587,15 +3391,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-ia32@0.17.19:
-    resolution: {integrity: sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/win32-ia32@0.18.20:
     resolution: {integrity: sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==}
     engines: {node: '>=12'}
@@ -3614,15 +3409,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-x64@0.17.19:
-    resolution: {integrity: sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/win32-x64@0.18.20:
     resolution: {integrity: sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==}
     engines: {node: '>=12'}
@@ -8004,17 +7790,6 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /clear-any-console@1.16.2:
-    resolution: {integrity: sha512-OL/7wZpNy9x0GBSzz3poWja84Nr7iaH8aYNsJ5Uet2BVLj6Lm1zvWpZN/yH46Vv3ae7YfHmLLMmfHj911fshJg==}
-    dev: true
-
-  /cli-check-node@1.3.4:
-    resolution: {integrity: sha512-iLGgQXm82iP8eH3R67qbOWs5qqUOLmNnMy5Lzl/RybcMh3y+H2zWU5POzuQ6oDUOdz4XWuxcFhP75szqd6frLg==}
-    dependencies:
-      chalk: 3.0.0
-      log-symbols: 3.0.0
-    dev: true
-
   /cli-cursor@3.1.0:
     resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
     engines: {node: '>=8'}
@@ -8022,19 +7797,6 @@ packages:
       restore-cursor: 3.1.0
     dev: true
 
-  /cli-handle-error@4.4.0:
-    resolution: {integrity: sha512-RyBCnKlc7xVr79cKb9RfBq+4fjwQeX8HKeNzIPnI/W+DWWIUUKh2ur576DpwJ3kZt2UGHlIAOF7N9txy+mgZsA==}
-    dependencies:
-      chalk: 3.0.0
-      log-symbols: 3.0.0
-    dev: true
-
-  /cli-handle-unhandled@1.1.1:
-    resolution: {integrity: sha512-Em91mJvU7VdgT2MxQpyY633vW1tDzRjPDbii6ZjEBHHLLh0xDoVkFt/wjvi9nSvJcz9rJmvtJSK8KL/hvF0Stg==}
-    dependencies:
-      cli-handle-error: 4.4.0
-    dev: true
-
   /cli-spinners@2.9.2:
     resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
     engines: {node: '>=6'}
@@ -8049,14 +7811,6 @@ packages:
       '@colors/colors': 1.5.0
     dev: true
 
-  /cli-welcome@2.2.2:
-    resolution: {integrity: sha512-LgDGS0TW4nIf8v81wpuZzfOEDPcy68u0jKR0Fy5IaWftqdminI6FoDiMFt1mjPylqKGNv/wFsZ7fCs93IeDMIw==}
-    dependencies:
-      chalk: 2.4.2
-      clear-any-console: 1.16.2
-      prettier: 2.8.8
-    dev: true
-
   /cliui@8.0.1:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
@@ -9013,36 +8767,6 @@ packages:
       - supports-color
     dev: true
 
-  /esbuild@0.17.19:
-    resolution: {integrity: sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==}
-    engines: {node: '>=12'}
-    hasBin: true
-    requiresBuild: true
-    optionalDependencies:
-      '@esbuild/android-arm': 0.17.19
-      '@esbuild/android-arm64': 0.17.19
-      '@esbuild/android-x64': 0.17.19
-      '@esbuild/darwin-arm64': 0.17.19
-      '@esbuild/darwin-x64': 0.17.19
-      '@esbuild/freebsd-arm64': 0.17.19
-      '@esbuild/freebsd-x64': 0.17.19
-      '@esbuild/linux-arm': 0.17.19
-      '@esbuild/linux-arm64': 0.17.19
-      '@esbuild/linux-ia32': 0.17.19
-      '@esbuild/linux-loong64': 0.17.19
-      '@esbuild/linux-mips64el': 0.17.19
-      '@esbuild/linux-ppc64': 0.17.19
-      '@esbuild/linux-riscv64': 0.17.19
-      '@esbuild/linux-s390x': 0.17.19
-      '@esbuild/linux-x64': 0.17.19
-      '@esbuild/netbsd-x64': 0.17.19
-      '@esbuild/openbsd-x64': 0.17.19
-      '@esbuild/sunos-x64': 0.17.19
-      '@esbuild/win32-arm64': 0.17.19
-      '@esbuild/win32-ia32': 0.17.19
-      '@esbuild/win32-x64': 0.17.19
-    dev: true
-
   /esbuild@0.18.20:
     resolution: {integrity: sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==}
     engines: {node: '>=12'}
@@ -10961,13 +10685,6 @@ packages:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
     dev: true
 
-  /log-symbols@3.0.0:
-    resolution: {integrity: sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==}
-    engines: {node: '>=8'}
-    dependencies:
-      chalk: 2.4.2
-    dev: true
-
   /log-symbols@4.1.0:
     resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
     engines: {node: '>=10'}

From f5d0721fa8245c2a6818b2a880e3807710e3543b Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sun, 28 Jan 2024 19:55:57 +1100
Subject: [PATCH 061/133] chore(ui): bump @invoke-ai/eslint-config-react

---
 invokeai/frontend/web/package.json   | 2 +-
 invokeai/frontend/web/pnpm-lock.yaml | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/invokeai/frontend/web/package.json b/invokeai/frontend/web/package.json
index a864d4c372..ecc27350bc 100644
--- a/invokeai/frontend/web/package.json
+++ b/invokeai/frontend/web/package.json
@@ -111,7 +111,7 @@
   },
   "devDependencies": {
     "@arthurgeron/eslint-plugin-react-usememo": "^2.2.3",
-    "@invoke-ai/eslint-config-react": "^0.0.11",
+    "@invoke-ai/eslint-config-react": "^0.0.12",
     "@invoke-ai/prettier-config-react": "^0.0.6",
     "@storybook/addon-docs": "^7.6.10",
     "@storybook/addon-essentials": "^7.6.10",
diff --git a/invokeai/frontend/web/pnpm-lock.yaml b/invokeai/frontend/web/pnpm-lock.yaml
index f7551bcec2..98a307c7d9 100644
--- a/invokeai/frontend/web/pnpm-lock.yaml
+++ b/invokeai/frontend/web/pnpm-lock.yaml
@@ -178,8 +178,8 @@ devDependencies:
     specifier: ^2.2.3
     version: 2.2.3
   '@invoke-ai/eslint-config-react':
-    specifier: ^0.0.11
-    version: 0.0.11(@typescript-eslint/eslint-plugin@6.19.0)(@typescript-eslint/parser@6.19.0)(eslint-config-prettier@9.1.0)(eslint-plugin-i18next@6.0.3)(eslint-plugin-import@2.29.1)(eslint-plugin-react-hooks@4.6.0)(eslint-plugin-react-refresh@0.4.5)(eslint-plugin-react@7.33.2)(eslint-plugin-simple-import-sort@10.0.0)(eslint-plugin-storybook@0.6.15)(eslint-plugin-unused-imports@3.0.0)(eslint@8.56.0)
+    specifier: ^0.0.12
+    version: 0.0.12(@typescript-eslint/eslint-plugin@6.19.0)(@typescript-eslint/parser@6.19.0)(eslint-config-prettier@9.1.0)(eslint-plugin-i18next@6.0.3)(eslint-plugin-import@2.29.1)(eslint-plugin-react-hooks@4.6.0)(eslint-plugin-react-refresh@0.4.5)(eslint-plugin-react@7.33.2)(eslint-plugin-simple-import-sort@10.0.0)(eslint-plugin-storybook@0.6.15)(eslint-plugin-unused-imports@3.0.0)(eslint@8.56.0)
   '@invoke-ai/prettier-config-react':
     specifier: ^0.0.6
     version: 0.0.6(prettier@3.2.4)
@@ -3551,8 +3551,8 @@ packages:
       '@swc/helpers': 0.5.3
     dev: false
 
-  /@invoke-ai/eslint-config-react@0.0.11(@typescript-eslint/eslint-plugin@6.19.0)(@typescript-eslint/parser@6.19.0)(eslint-config-prettier@9.1.0)(eslint-plugin-i18next@6.0.3)(eslint-plugin-import@2.29.1)(eslint-plugin-react-hooks@4.6.0)(eslint-plugin-react-refresh@0.4.5)(eslint-plugin-react@7.33.2)(eslint-plugin-simple-import-sort@10.0.0)(eslint-plugin-storybook@0.6.15)(eslint-plugin-unused-imports@3.0.0)(eslint@8.56.0):
-    resolution: {integrity: sha512-To3m1qd1XMOkBYAenVT6Zjb1iTvSwetoJZrCITD4DHAtYu/3srhYVykJrNEjslCvz7AGDRtDDCczcQMOIwUJOQ==}
+  /@invoke-ai/eslint-config-react@0.0.12(@typescript-eslint/eslint-plugin@6.19.0)(@typescript-eslint/parser@6.19.0)(eslint-config-prettier@9.1.0)(eslint-plugin-i18next@6.0.3)(eslint-plugin-import@2.29.1)(eslint-plugin-react-hooks@4.6.0)(eslint-plugin-react-refresh@0.4.5)(eslint-plugin-react@7.33.2)(eslint-plugin-simple-import-sort@10.0.0)(eslint-plugin-storybook@0.6.15)(eslint-plugin-unused-imports@3.0.0)(eslint@8.56.0):
+    resolution: {integrity: sha512-6IXENcSa7vv+YPO/TYmC8qXXJFQt3JqDY+Yc1AMf4/d3b3o+CA7/mqepXIhydG9Gqo5jTRknXdDmjSaLxgCJ/g==}
     peerDependencies:
       '@typescript-eslint/eslint-plugin': ^6.19.0
       '@typescript-eslint/parser': ^6.19.0

From 2f345d19769e6ce35c2737d160f2d27117289c9e Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sun, 28 Jan 2024 19:56:19 +1100
Subject: [PATCH 062/133] chore(ui): lint

---
 .../canvas/components/IAICanvasGrid.tsx        | 10 +++++-----
 .../subpanels/AddModelsPanel/AddModels.tsx     |  4 ++--
 .../subpanels/ImportModelsPanel.tsx            |  8 ++++----
 .../flow/AddNodePopover/AddNodePopover.tsx     |  6 +++---
 .../store/util/findConnectionToValidHandle.ts  | 18 +++++++++---------
 .../features/nodes/util/graph/addHrfToGraph.ts |  2 +-
 .../util/graph/addSeamlessToLinearGraph.ts     |  2 +-
 .../features/nodes/util/graph/addVAEToGraph.ts |  2 +-
 8 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasGrid.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasGrid.tsx
index 06925d90a3..b9105ce9dd 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasGrid.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasGrid.tsx
@@ -76,11 +76,11 @@ const IAICanvasGrid = () => {
     };
 
     const // find the x & y size of the grid
-      xSize = gridFullRect.x2 - gridFullRect.x1,
-      ySize = gridFullRect.y2 - gridFullRect.y1,
-      // compute the number of steps required on each axis.
-      xSteps = Math.round(xSize / gridSpacing) + 1,
-      ySteps = Math.round(ySize / gridSpacing) + 1;
+      xSize = gridFullRect.x2 - gridFullRect.x1;
+    const ySize = gridFullRect.y2 - gridFullRect.y1;
+    // compute the number of steps required on each axis.
+    const xSteps = Math.round(xSize / gridSpacing) + 1;
+    const ySteps = Math.round(ySize / gridSpacing) + 1;
 
     const strokeWidth = unscale(1);
 
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx
index 9796a0e6a3..cb50334c99 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx
@@ -13,10 +13,10 @@ const AddModels = () => {
   return (
     <Flex flexDirection="column" width="100%" overflow="scroll" maxHeight={window.innerHeight - 250} gap={4}>
       <ButtonGroup>
-        <Button size="sm" isChecked={addModelMode == 'simple'} onClick={handleAddModelSimple}>
+        <Button size="sm" isChecked={addModelMode === 'simple'} onClick={handleAddModelSimple}>
           {t('common.simple')}
         </Button>
-        <Button size="sm" isChecked={addModelMode == 'advanced'} onClick={handleAddModelAdvanced}>
+        <Button size="sm" isChecked={addModelMode === 'advanced'} onClick={handleAddModelAdvanced}>
           {t('common.advanced')}
         </Button>
       </ButtonGroup>
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ImportModelsPanel.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ImportModelsPanel.tsx
index 93cdd25a7e..18fcef9614 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/ImportModelsPanel.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ImportModelsPanel.tsx
@@ -17,16 +17,16 @@ const ImportModelsPanel = () => {
   return (
     <Flex flexDirection="column" gap={4} h="full">
       <ButtonGroup>
-        <Button onClick={handleClickAddTab} isChecked={addModelTab == 'add'} size="sm" width="100%">
+        <Button onClick={handleClickAddTab} isChecked={addModelTab === 'add'} size="sm" width="100%">
           {t('modelManager.addModel')}
         </Button>
-        <Button onClick={handleClickScanTab} isChecked={addModelTab == 'scan'} size="sm" width="100%" isDisabled>
+        <Button onClick={handleClickScanTab} isChecked={addModelTab === 'scan'} size="sm" width="100%" isDisabled>
           {t('modelManager.scanForModels')}
         </Button>
       </ButtonGroup>
 
-      {addModelTab == 'add' && <AddModels />}
-      {addModelTab == 'scan' && <ScanModels />}
+      {addModelTab === 'add' && <AddModels />}
+      {addModelTab === 'scan' && <ScanModels />}
     </Flex>
   );
 };
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx
index 5d2bb1f3d2..faa4c0b054 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx
@@ -58,11 +58,11 @@ const AddNodePopover = () => {
     // If we have a connection in progress, we need to filter the node choices
     const filteredNodeTemplates = fieldFilter
       ? filter(nodeTemplates.templates, (template) => {
-          const handles = handleFilter == 'source' ? template.inputs : template.outputs;
+          const handles = handleFilter === 'source' ? template.inputs : template.outputs;
 
           return some(handles, (handle) => {
-            const sourceType = handleFilter == 'source' ? fieldFilter : handle.type;
-            const targetType = handleFilter == 'target' ? fieldFilter : handle.type;
+            const sourceType = handleFilter === 'source' ? fieldFilter : handle.type;
+            const targetType = handleFilter === 'target' ? fieldFilter : handle.type;
 
             return validateSourceAndTargetTypes(sourceType, targetType);
           });
diff --git a/invokeai/frontend/web/src/features/nodes/store/util/findConnectionToValidHandle.ts b/invokeai/frontend/web/src/features/nodes/store/util/findConnectionToValidHandle.ts
index 49970a8f9e..9f2c37a2ad 100644
--- a/invokeai/frontend/web/src/features/nodes/store/util/findConnectionToValidHandle.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/util/findConnectionToValidHandle.ts
@@ -50,16 +50,16 @@ export const findConnectionToValidHandle = (
     return null;
   }
 
-  const handles = handleCurrentType == 'source' ? node.data.inputs : node.data.outputs;
+  const handles = handleCurrentType === 'source' ? node.data.inputs : node.data.outputs;
 
   //Prioritize handles whos name matches the node we're coming from
   if (handles[handleCurrentName]) {
     const handle = handles[handleCurrentName];
 
-    const sourceID = handleCurrentType == 'source' ? handleCurrentNodeId : node.id;
-    const targetID = handleCurrentType == 'source' ? node.id : handleCurrentNodeId;
-    const sourceHandle = handleCurrentType == 'source' ? handleCurrentName : handle.name;
-    const targetHandle = handleCurrentType == 'source' ? handle.name : handleCurrentName;
+    const sourceID = handleCurrentType === 'source' ? handleCurrentNodeId : node.id;
+    const targetID = handleCurrentType === 'source' ? node.id : handleCurrentNodeId;
+    const sourceHandle = handleCurrentType === 'source' ? handleCurrentName : handle.name;
+    const targetHandle = handleCurrentType === 'source' ? handle.name : handleCurrentName;
 
     const isGraphAcyclic = getIsGraphAcyclic(sourceID, targetID, nodes, edges);
 
@@ -78,10 +78,10 @@ export const findConnectionToValidHandle = (
   for (const handleName in handles) {
     const handle = handles[handleName];
 
-    const sourceID = handleCurrentType == 'source' ? handleCurrentNodeId : node.id;
-    const targetID = handleCurrentType == 'source' ? node.id : handleCurrentNodeId;
-    const sourceHandle = handleCurrentType == 'source' ? handleCurrentName : handle.name;
-    const targetHandle = handleCurrentType == 'source' ? handle.name : handleCurrentName;
+    const sourceID = handleCurrentType === 'source' ? handleCurrentNodeId : node.id;
+    const targetID = handleCurrentType === 'source' ? node.id : handleCurrentNodeId;
+    const sourceHandle = handleCurrentType === 'source' ? handleCurrentName : handle.name;
+    const targetHandle = handleCurrentType === 'source' ? handle.name : handleCurrentName;
 
     const isGraphAcyclic = getIsGraphAcyclic(sourceID, targetID, nodes, edges);
 
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addHrfToGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addHrfToGraph.ts
index 9e9fcefcb0..daa214364d 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/addHrfToGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/addHrfToGraph.ts
@@ -175,7 +175,7 @@ export const addHrfToGraph = (state: RootState, graph: NonNullableGraph): void =
     width: width,
     height: height,
   };
-  if (hrfMethod == 'ESRGAN') {
+  if (hrfMethod === 'ESRGAN') {
     let model_name: ESRGANInvocation['model_name'] = 'RealESRGAN_x2plus.pth';
     if ((width * height) / (hrfWidth * hrfHeight) > 2) {
       model_name = 'RealESRGAN_x4plus.pth';
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addSeamlessToLinearGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addSeamlessToLinearGraph.ts
index 89e8900644..850b2a65bd 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/addSeamlessToLinearGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/addSeamlessToLinearGraph.ts
@@ -96,7 +96,7 @@ export const addSeamlessToLinearGraph = (
   );
 
   if (
-    graph.id == CANVAS_INPAINT_GRAPH ||
+    graph.id === CANVAS_INPAINT_GRAPH ||
     graph.id === CANVAS_OUTPAINT_GRAPH ||
     graph.id === SDXL_CANVAS_INPAINT_GRAPH ||
     graph.id === SDXL_CANVAS_OUTPAINT_GRAPH
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addVAEToGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addVAEToGraph.ts
index c0b44d9100..b886c9b7d5 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/addVAEToGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/addVAEToGraph.ts
@@ -70,7 +70,7 @@ export const addVAEToGraph = (
     graph.id === CANVAS_TEXT_TO_IMAGE_GRAPH ||
     graph.id === CANVAS_IMAGE_TO_IMAGE_GRAPH ||
     graph.id === SDXL_CANVAS_TEXT_TO_IMAGE_GRAPH ||
-    graph.id == SDXL_CANVAS_IMAGE_TO_IMAGE_GRAPH
+    graph.id === SDXL_CANVAS_IMAGE_TO_IMAGE_GRAPH
   ) {
     graph.edges.push({
       source: {

From b5928fd4117bb6ed52e521f851a69cdeb179d08b Mon Sep 17 00:00:00 2001
From: Riccardo Giovanetti <riccardo.giovanetti@gmail.com>
Date: Sun, 28 Jan 2024 09:58:24 +0100
Subject: [PATCH 063/133] translationBot(ui): update translation (Italian)

Currently translated at 97.2% (1387 of 1426 strings)

Co-authored-by: Riccardo Giovanetti <riccardo.giovanetti@gmail.com>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/it/
Translation: InvokeAI/Web UI
---
 invokeai/frontend/web/public/locales/it.json | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/it.json b/invokeai/frontend/web/public/locales/it.json
index cd8e74258c..604b621ed8 100644
--- a/invokeai/frontend/web/public/locales/it.json
+++ b/invokeai/frontend/web/public/locales/it.json
@@ -384,7 +384,11 @@
             "desc": "Apre e chiude le opzioni e i pannelli della galleria",
             "title": "Attiva/disattiva le Opzioni e la Galleria"
         },
-        "clearSearch": "Cancella ricerca"
+        "clearSearch": "Cancella ricerca",
+        "remixImage": {
+            "desc": "Utilizza tutti i parametri tranne il seme dell'immagine corrente",
+            "title": "Remixa l'immagine"
+        }
     },
     "modelManager": {
         "modelManager": "Gestione Modelli",
@@ -670,7 +674,8 @@
         "aspect": "Aspetto",
         "setToOptimalSizeTooLarge": "$t(parameters.setToOptimalSize) (potrebbe essere troppo grande)",
         "boxBlur": "Box",
-        "gaussianBlur": "Gaussian"
+        "gaussianBlur": "Gaussian",
+        "remixImage": "Remixa l'immagine"
     },
     "settings": {
         "models": "Modelli",
@@ -1245,7 +1250,12 @@
         "scribble": "Scarabocchio",
         "amult": "Angolo di illuminazione",
         "coarse": "Approssimativo",
-        "resizeSimple": "Ridimensiona (semplice)"
+        "resizeSimple": "Ridimensiona (semplice)",
+        "large": "Grande",
+        "small": "Piccolo",
+        "depthAnythingDescription": "Generazione di mappe di profondità utilizzando la tecnica Depth Anything",
+        "modelSize": "Dimensioni del modello",
+        "base": ""
     },
     "queue": {
         "queueFront": "Aggiungi all'inizio della coda",
@@ -1677,7 +1687,9 @@
         "userWorkflows": "I miei flussi di lavoro",
         "newWorkflowCreated": "Nuovo flusso di lavoro creato",
         "downloadWorkflow": "Salva su file",
-        "uploadWorkflow": "Carica da file"
+        "uploadWorkflow": "Carica da file",
+        "projectWorkflows": "Flussi di lavoro del progetto",
+        "noWorkflows": "Nessun flusso di lavoro"
     },
     "app": {
         "storeNotInitialized": "Il negozio non è inizializzato"

From 7a1d0ec228e49eb239c9ad5db7b7aac37da95e5a Mon Sep 17 00:00:00 2001
From: Hosted Weblate <hosted@weblate.org>
Date: Sun, 28 Jan 2024 09:58:25 +0100
Subject: [PATCH 064/133] translationBot(ui): update translation files

Updated by "Remove blank strings" hook in Weblate.

Co-authored-by: Hosted Weblate <hosted@weblate.org>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/
Translation: InvokeAI/Web UI
---
 invokeai/frontend/web/public/locales/it.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/it.json b/invokeai/frontend/web/public/locales/it.json
index 604b621ed8..c7ba4b782b 100644
--- a/invokeai/frontend/web/public/locales/it.json
+++ b/invokeai/frontend/web/public/locales/it.json
@@ -1254,8 +1254,7 @@
         "large": "Grande",
         "small": "Piccolo",
         "depthAnythingDescription": "Generazione di mappe di profondità utilizzando la tecnica Depth Anything",
-        "modelSize": "Dimensioni del modello",
-        "base": ""
+        "modelSize": "Dimensioni del modello"
     },
     "queue": {
         "queueFront": "Aggiungi all'inizio della coda",

From 6a44697911574747ba549506c6a9b309b6b88012 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ufuk=20Sarp=20Sel=C3=A7ok?= <ilkel@live.com>
Date: Sun, 28 Jan 2024 09:58:27 +0100
Subject: [PATCH 065/133] translationBot(ui): update translation (Turkish)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Currently translated at 10.5% (151 of 1426 strings)

translationBot(ui): update translation (Turkish)

Currently translated at 8.1% (116 of 1426 strings)

translationBot(ui): update translation (Turkish)

Currently translated at 6.6% (95 of 1426 strings)

Co-authored-by: Ufuk Sarp Selçok <ilkel@live.com>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/tr/
Translation: InvokeAI/Web UI
---
 invokeai/frontend/web/public/locales/tr.json | 154 ++++++++++++++++---
 1 file changed, 133 insertions(+), 21 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/tr.json b/invokeai/frontend/web/public/locales/tr.json
index 0c222eecf7..8199f3306a 100644
--- a/invokeai/frontend/web/public/locales/tr.json
+++ b/invokeai/frontend/web/public/locales/tr.json
@@ -2,29 +2,35 @@
     "accessibility": {
         "invokeProgressBar": "Invoke ilerleme durumu",
         "nextImage": "Sonraki Resim",
-        "useThisParameter": "Kullanıcı parametreleri",
+        "useThisParameter": "Bu ayarları kullan",
         "copyMetadataJson": "Metadata verilerini kopyala (JSON)",
         "exitViewer": "Görüntüleme Modundan Çık",
         "zoomIn": "Yakınlaştır",
         "zoomOut": "Uzaklaştır",
-        "rotateCounterClockwise": "Döndür (Saat yönünün tersine)",
-        "rotateClockwise": "Döndür (Saat yönünde)",
+        "rotateCounterClockwise": "Saat yönünün tersine döndür",
+        "rotateClockwise": "Saat yönüne döndür",
         "flipHorizontally": "Yatay Çevir",
         "flipVertically": "Dikey Çevir",
         "modifyConfig": "Ayarları Değiştir",
-        "toggleAutoscroll": "Otomatik kaydırmayı aç/kapat",
-        "toggleLogViewer": "Günlük Görüntüleyici Aç/Kapa",
-        "showOptionsPanel": "Ayarlar Panelini Göster",
-        "modelSelect": "Model Seçin",
+        "toggleAutoscroll": "Otomatik kaydırmayı aç-kapa",
+        "toggleLogViewer": "Günlüğü Aç-Kapa",
+        "showOptionsPanel": "Yan Paneli Göster",
+        "modelSelect": "Model Seçimi",
         "reset": "Sıfırla",
         "uploadImage": "Resim Yükle",
         "previousImage": "Önceki Resim",
-        "menu": "Menü"
+        "menu": "Menü",
+        "about": "Hakkında",
+        "mode": "Kip",
+        "resetUI": "$t(accessibility.reset)Arayüz",
+        "showGalleryPanel": "Galeri Panelini Göster",
+        "loadMore": "Daha Getir",
+        "createIssue": "Sorun Bildir"
     },
     "common": {
         "hotkeysLabel": "Kısayol Tuşları",
-        "languagePickerLabel": "Dil Seçimi",
-        "reportBugLabel": "Hata Bildir",
+        "languagePickerLabel": "Dil",
+        "reportBugLabel": "Sorun Bildir",
         "githubLabel": "Github",
         "discordLabel": "Discord",
         "settingsLabel": "Ayarlar",
@@ -37,22 +43,128 @@
         "langJapanese": "Japonca",
         "langPolish": "Lehçe",
         "langPortuguese": "Portekizce",
-        "langBrPortuguese": "Portekizcr (Brezilya)",
+        "langBrPortuguese": "Portekizce (Brezilya)",
         "langRussian": "Rusça",
         "langSimplifiedChinese": "Çince (Basit)",
         "langUkranian": "Ukraynaca",
         "langSpanish": "İspanyolca",
-        "txt2img": "Metinden Resime",
-        "img2img": "Resimden Metine",
-        "linear": "Çizgisel",
-        "nodes": "Düğümler",
-        "postprocessing": "İşlem Sonrası",
-        "postProcessing": "İşlem Sonrası",
-        "postProcessDesc2": "Daha gelişmiş özellikler için ve iş akışını kolaylaştırmak için özel bir kullanıcı arayüzü çok yakında yayınlanacaktır.",
-        "postProcessDesc3": "Invoke AI komut satırı arayüzü, bir çok yeni özellik sunmaktadır.",
+        "txt2img": "Yazıdan Resime",
+        "img2img": "Resimden Resime",
+        "linear": "Doğrusal",
+        "nodes": "İş Akış Düzenleyici",
+        "postprocessing": "Rötuş",
+        "postProcessing": "Rötuş",
+        "postProcessDesc2": "Daha gelişmiş iş akışlarına olanak sağlayacak özel bir arayüz yakında yayınlanacaktır.",
+        "postProcessDesc3": "Invoke AI Komut Satırı Arayüzü, Embiggen dahil birçok yeni özellik sunmaktadır.",
         "langKorean": "Korece",
         "unifiedCanvas": "Akıllı Tuval",
-        "nodesDesc": "Görüntülerin oluşturulmasında hazırladığımız yeni bir sistem geliştirme aşamasındadır. Bu harika özellikler ve çok daha fazlası için bizi takip etmeye devam edin.",
-        "postProcessDesc1": "Invoke AI son kullanıcıya yönelik bir çok özellik sunar. Görüntü kalitesi yükseltme, yüz restorasyonu WebUI üzerinden kullanılabilir. Metinden resime ve resimden metne araçlarına gelişmiş seçenekler menüsünden ulaşabilirsiniz. İsterseniz mevcut görüntü ekranının üzerindeki veya görüntüleyicideki görüntüyü doğrudan düzenleyebilirsiniz."
+        "nodesDesc": "Resim oluşturmak için hazırladığımız çizge tabanlı sistem şu an geliştirme aşamasındadır. Bu harika özellik hakkındaki gelişmeler için bizi takip etmeye devam edin.",
+        "postProcessDesc1": "Invoke AI birçok rötuş (post-process) aracı sağlar. Resim büyütme ve yüz iyileştirme halihazırda WebUI üzerinden kullanılabilir. Bunlara Yazıdan Resime ve Resimden Resime sekmelerindeki Gelişmiş Ayarlar menüsünden ulaşabilirsiniz. İsterseniz mevcut görüntü ekranının üzerindeki veya görüntüleyicideki resmi doğrudan üstteki tuşlar yardımıyla düzenleyebilirsiniz.",
+        "batch": "Toplu İş Yöneticisi",
+        "accept": "Kabul et",
+        "cancel": "İptal et",
+        "advanced": "Gelişmiş",
+        "copyError": "$t(gallery.copy) Hata",
+        "on": "Açık",
+        "or": "ya da",
+        "aboutDesc": "Invoke'u iş için mi kullanıyorsunuz? Şuna bir göz atın:",
+        "advancedOptions": "Gelişmiş Ayarlar",
+        "ai": "yapay zeka",
+        "close": "Kapat",
+        "auto": "Otomatik",
+        "communityLabel": "Topluluk",
+        "back": "Geri",
+        "areYouSure": "Emin misiniz?",
+        "notInstalled": "$t(common.installed) Değil",
+        "openInNewTab": "Yeni Sekmede Aç",
+        "aboutHeading": "Yaratıcı Gücünüzün Sahibi Olun",
+        "lightMode": "Açık Tema",
+        "load": "Yükle",
+        "loading": "Yükleniyor",
+        "loadingInvokeAI": "Invoke AI Yükleniyor",
+        "localSystem": "Yerel Sistem",
+        "inpaint": "içboyama",
+        "modelManager": "Model Yöneticisi",
+        "orderBy": "Sırala",
+        "outpaint": "dışboyama",
+        "outputs": "Çıktılar",
+        "langHebrew": "İbranice",
+        "learnMore": "Bilgi Edin",
+        "nodeEditor": "Çizge Düzenleyici",
+        "save": "Kaydet",
+        "statusMergingModels": "Modeller Birleştiriliyor",
+        "statusGenerating": "Oluşturuluyor",
+        "statusGenerationComplete": "Oluşturma Tamamlandı",
+        "statusGeneratingOutpainting": "Dışboyama Oluşturuluyor",
+        "statusLoadingModel": "Model Yükleniyor",
+        "random": "Rastgele",
+        "simple": "Basit",
+        "preferencesLabel": "Seçenekler",
+        "statusConnected": "Bağlandı",
+        "statusMergedModels": "Modeller Birleştirildi",
+        "statusModelChanged": "Model Değişti",
+        "statusModelConverted": "Model Dönüştürüldü",
+        "statusPreparing": "Hazırlanıyor",
+        "statusProcessing": "İşleniyor",
+        "statusProcessingCanceled": "İşlem İptal Edildi",
+        "statusRestoringFacesCodeFormer": "Yüzler İyileştiriliyor (CodeFormer)",
+        "statusRestoringFacesGFPGAN": "Yüzler İyileştiriliyor (GFPGAN)",
+        "template": "Şablon",
+        "saveAs": "Farklı Kaydet",
+        "statusProcessingComplete": "İşlem Tamamlandı",
+        "statusSavingImage": "Resim Kaydediliyor",
+        "somethingWentWrong": "Bir sorun oluştu",
+        "statusConvertingModel": "Model Dönüştürülüyor",
+        "statusDisconnected": "Bağlantı Kesildi",
+        "statusError": "Hata",
+        "statusGeneratingImageToImage": "Resimden Resim Oluşturuluyor",
+        "statusGeneratingInpainting": "İçboyama Oluşturuluyor",
+        "statusRestoringFaces": "Yüzler İyileştiriliyor",
+        "statusUpscaling": "Büyütme",
+        "statusUpscalingESRGAN": "Büyütme (ESRGAN)",
+        "training": "Eğitim",
+        "statusGeneratingTextToImage": "Yazıdan Resim Oluşturuluyor"
+    },
+    "accordions": {
+        "generation": {
+            "title": "Oluşturma",
+            "modelTab": "Model",
+            "conceptsTab": "Konseptler"
+        },
+        "image": {
+            "title": "Resim"
+        },
+        "advanced": {
+            "title": "Gelişmiş"
+        },
+        "compositing": {
+            "title": "Birleştirme",
+            "coherenceTab": "Uyum Geçişi",
+            "infillTab": "Doldurma"
+        }
+    },
+    "boards": {
+        "autoAddBoard": "Panoya Otomatik Ekleme",
+        "cancel": "İptal et",
+        "clearSearch": "Aramayı Sıfırla",
+        "deleteBoard": "Panoyu Sil",
+        "loading": "Yükleniyor...",
+        "myBoard": "Panom",
+        "selectBoard": "Bir Pano Seç",
+        "addBoard": "Pano Ekle",
+        "deleteBoardAndImages": "Panoyu ve Resimleri Sil",
+        "deleteBoardOnly": "Sadece Panoyu Sil",
+        "deletedBoardsCannotbeRestored": "Silinen panolar geri getirilemez",
+        "menuItemAutoAdd": "Bu panoya otomatik olarak ekle",
+        "move": "Taşı",
+        "movingImagesToBoard_one": "{{count}} resmi şu panoya taşı:",
+        "movingImagesToBoard_other": "{{count}} resmi şu panoya taşı:",
+        "noMatching": "Eşleşen pano yok",
+        "searchBoard": "Pano Ara...",
+        "topMessage": "Bu pano, şu özelliklerde kullanılan resimler içeriyor:",
+        "downloadBoard": "Panoyu İndir",
+        "uncategorized": "Kategorisiz",
+        "changeBoard": "Panoyu Değiştir",
+        "bottomMessage": "Bu panoyu ve resimlerini silmek, bunları kullanan özelliklerin sıfırlanmasına neden olacaktır."
     }
 }

From dd7031a472532b031a62a1b23a0cb7865c769a86 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sun, 28 Jan 2024 21:34:01 +1100
Subject: [PATCH 066/133] docs(ui): update README.md

Also moved it to the frontend package root
---
 invokeai/frontend/web/README.md      | 150 +++++++++++++++++++++++++++
 invokeai/frontend/web/docs/README.md | 111 --------------------
 2 files changed, 150 insertions(+), 111 deletions(-)
 create mode 100644 invokeai/frontend/web/README.md
 delete mode 100644 invokeai/frontend/web/docs/README.md

diff --git a/invokeai/frontend/web/README.md b/invokeai/frontend/web/README.md
new file mode 100644
index 0000000000..0447bd5f97
--- /dev/null
+++ b/invokeai/frontend/web/README.md
@@ -0,0 +1,150 @@
+# Invoke UI
+
+<!-- @import "[TOC]" {cmd="toc" depthFrom=2 depthTo=3 orderedList=false} -->
+
+<!-- code_chunk_output -->
+
+- [Dev environment](#dev-environment)
+  - [Setup](#setup)
+  - [Package scripts](#package-scripts)
+  - [Type generation](#type-generation)
+  - [Localization](#localization)
+  - [VSCode](#vscode)
+- [Contributing](#contributing)
+  - [Check in before investing your time](#check-in-before-investing-your-time)
+  - [Commit format](#commit-format)
+  - [Submitting a PR](#submitting-a-pr)
+- [Other docs](#other-docs)
+
+<!-- /code_chunk_output -->
+
+Invoke's UI is made possible by many contributors and open-source libraries. Thank you!
+
+## Dev environment
+
+### Setup
+
+1. Install [node] and [pnpm].
+1. Run `pnpm i` to install all packages.
+
+#### Run in dev mode
+
+1. From `invokeai/frontend/web/`, run `pnpm dev`.
+1. From repo root, run `python scripts/invokeai-web.py`.
+1. Point your browser to the dev server address, e.g. <http://localhost:5173/>
+
+### Package scripts
+
+- `dev`: run the frontend in dev mode, enabling hot reloading
+- `build`: run all checks (madge, eslint, prettier, tsc) and then build the frontend
+- `typegen`: generate types from the OpenAPI schema (see [Type generation])
+- `lint:madge`: check frontend for circular dependencies
+- `lint:eslint`: check frontend for code quality
+- `lint:prettier`: check frontend for code formatting
+- `lint:tsc`: check frontend for type issues
+- `lint`: run all checks concurrently
+- `fix`: run `eslint` and `prettier`, fixing fixable issues
+
+### Type generation
+
+We use [openapi-typescript] to generate types from the app's OpenAPI schema.
+
+The generated types are committed to the repo in [schema.ts].
+
+```sh
+# from the repo root, start the server
+python scripts/invokeai-web.py
+# from invokeai/frontend/web/, run the script
+pnpm typegen
+```
+
+### Localization
+
+We use [i18next] for localization, but translation to languages other than English happens on our [Weblate] project.
+
+Only the English source strings should be changed on this repo.
+
+### VSCode
+
+#### Example debugger config
+
+```jsonc
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Invoke UI",
+      "url": "http://localhost:5173",
+      "webRoot": "${workspaceFolder}/invokeai/frontend/web",
+    },
+  ],
+}
+```
+
+#### Remote dev
+
+We've noticed an intermittent timeout issue with the VSCode remote dev port forwarding.
+
+We suggest disabling the editor's port forwarding feature and doing it manually via SSH:
+
+```sh
+ssh -L 9090:localhost:9090 -L 5173:localhost:5173 user@host
+```
+
+## Contributing Guidelines
+
+Thanks for your interest in contributing to the Invoke Web UI!
+
+Please follow these guidelines when contributing.
+
+### Check in before investing your time
+
+Please check in before you invest your time on anything besides a trivial fix, in case it conflicts with ongoing work or isn't aligned with the vision for the app.
+
+If a feature request or issue doesn't already exist for the thing you want to work on, please create one.
+
+Ping `@psychedelicious` on [discord] in the `#frontend-dev` channel or in the feature request / issue you want to work on - we're happy chat.
+
+### Code conventions
+
+- This is a fairly complex app with a deep component tree. Please use memoization (`useCallback`, `useMemo`, `memo`) with enthusiasm.
+- If you need to add some global, ephemeral state, please use [nanostores] if possible.
+- Be careful with your redux selectors. If they need to be parameterized, consider creating them inside a `useMemo`.
+- Feel free to use `lodash` (via `lodash-es`) to make the intent of your code clear.
+- Please add comments describing the "why", not the "how" (unless it is really arcane).
+
+### Commit format
+
+Please use the [conventional commits] spec for the web UI, with a scope of "ui":
+
+- `chore(ui): bump deps`
+- `chore(ui): lint`
+- `feat(ui): add some cool new feature`
+- `fix(ui): fix some bug`
+
+### Submitting a PR
+
+- Ensure your branch is tidy. Use an interactive rebase to clean up the commit history and reword the commit messages if they are not descriptive.
+- Run `pnpm lint`. Some issues are auto-fixable with `pnpm fix`.
+- Fill out the PR form when creating the PR.
+  - It doesn't need to be super detailed, but a screenshot or video is nice if you changed something visually.
+  - If a section isn't relevant, delete it. There are no UI tests at this time.
+
+## Other docs
+
+- [Workflows - Design and Implementation]
+- [State Management]
+
+[node]: https://nodejs.org/en/download/
+[pnpm]: https://github.com/pnpm/pnpm
+[discord]: https://discord.gg/ZmtBAhwWhy
+[i18next]: https://github.com/i18next/react-i18next
+[Weblate]: https://hosted.weblate.org/engage/invokeai/
+[openapi-typescript]: https://github.com/drwpow/openapi-typescript
+[Type generation]: #type-generation
+[schema.ts]: ../src/services/api/schema.ts
+[conventional commits]: https://www.conventionalcommits.org/en/v1.0.0/
+[Workflows - Design and Implementation]: ./docs/WORKFLOWS_DESIGN_IMPLEMENTATION.md
+[State Management]: ./docs/STATE_MGMT.md
diff --git a/invokeai/frontend/web/docs/README.md b/invokeai/frontend/web/docs/README.md
deleted file mode 100644
index 138aded3ab..0000000000
--- a/invokeai/frontend/web/docs/README.md
+++ /dev/null
@@ -1,111 +0,0 @@
-# Invoke UI
-
-<!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->
-
-<!-- code_chunk_output -->
-
-- [Invoke UI](#invoke-ui)
-  - [Core Libraries](#core-libraries)
-  - [Package Scripts](#package-scripts)
-    - [Client Types Generation](#client-types-generation)
-  - [Contributing](#contributing)
-    - [Localization](#localization)
-    - [Dev Environment](#dev-environment)
-    - [VSCode Remote Dev](#vscode-remote-dev)
-
-<!-- /code_chunk_output -->
-
-## Core Libraries
-
-Invoke's UI is made possible by a number of excellent open-source libraries. The most heavily-used are listed below, but there are many others.
-
-- [Redux Toolkit]
-- [redux-remember]
-- [Socket.IO]
-- [Chakra UI]
-- [KonvaJS]
-- [Vite]
-- [openapi-typescript]
-- [reactflow]
-- [zod]
-
-## Package Scripts
-
-See `package.json` for all scripts.
-
-Run with `pnpm <script name>`.
-
-- `dev`: run the frontend in dev mode, enabling hot reloading
-- `build`: run all checks (madge, eslint, prettier, tsc) and then build the frontend
-- `typegen`: generate types from the OpenAPI schema (see [Client Types Generation])
-- `lint:madge`: check frontend for circular dependencies
-- `lint:eslint`: check frontend for code quality
-- `lint:prettier`: check frontend for code formatting
-- `lint:tsc`: check frontend for type issues
-- `lint`: run all checks concurrently
-- `fix`: run `eslint` and `prettier`, fixing fixable issues
-
-### Client Types Generation
-
-We use [openapi-typescript] to generate types from the app's OpenAPI schema.
-
-The generated types are written to `invokeai/frontend/web/src/services/api/schema.d.ts`. This file is committed to the repo.
-
-The server must be started and available at <http://127.0.0.1:9090>.
-
-```sh
-# from the repo root, start the server
-python scripts/invokeai-web.py
-# from invokeai/frontend/web/, run the script
-pnpm typegen
-```
-
-## Contributing
-
-Thanks for your interest in contributing to the Invoke Web UI!
-
-We encourage you to ping @psychedelicious and @blessedcoolant on [discord] if you want to contribute, just to touch base and ensure your work doesn't conflict with anything else going on. The project is very active.
-
-### Localization
-
-We use [i18next] for localization, but translation to languages other than English happens on our [Weblate] project.
-
-**Only the English source strings should be changed on this repo.**
-
-### Dev Environment
-
-Install [node] and [pnpm].
-
-From `invokeai/frontend/web/` run `pnpm i` to get everything set up.
-
-Start everything in dev mode:
-
-1. From `invokeai/frontend/web/`: `pnpm dev`
-2. From repo root: `python scripts/invokeai-web.py`
-3. Point your browser to the dev server address e.g. <http://localhost:5173/>
-
-### VSCode Remote Dev
-
-We've noticed an intermittent issue with the VSCode Remote Dev port forwarding. If you use this feature of VSCode, you may intermittently click the Invoke button and then get nothing until the request times out.
-
-We suggest disabling the IDE's port forwarding feature and doing it manually via SSH:
-
-```sh
-ssh -L 9090:localhost:9090 -L 5173:localhost:5173 user@host
-```
-
-[node]: https://nodejs.org/en/download/
-[pnpm]: https://github.com/pnpm/pnpm
-[discord]: https://discord.gg/ZmtBAhwWhy
-[Redux Toolkit]: https://github.com/reduxjs/redux-toolkit
-[redux-remember]: https://github.com/zewish/redux-remember
-[Socket.IO]: https://github.com/socketio/socket.io
-[Chakra UI]: https://github.com/chakra-ui/chakra-ui
-[KonvaJS]: https://github.com/konvajs/react-konva
-[Vite]: https://github.com/vitejs/vite
-[i18next]: https://github.com/i18next/react-i18next
-[Weblate]: https://hosted.weblate.org/engage/invokeai/
-[openapi-typescript]: https://github.com/drwpow/openapi-typescript
-[reactflow]: https://github.com/xyflow/xyflow
-[zod]: https://github.com/colinhacks/zod
-[Client Types Generation]: #client-types-generation

From d048eb5b204f9fc92b392b53a2b8ab72dc1607a7 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sun, 28 Jan 2024 21:34:44 +1100
Subject: [PATCH 067/133] docs(ui): add STATE_MGMT.md

Supersedes the mini nanostores doc.
---
 invokeai/frontend/web/docs/STATE_MGMT.md      | 38 +++++++++++++++++++
 .../web/src/app/store/nanostores/README.md    |  3 --
 2 files changed, 38 insertions(+), 3 deletions(-)
 create mode 100644 invokeai/frontend/web/docs/STATE_MGMT.md
 delete mode 100644 invokeai/frontend/web/src/app/store/nanostores/README.md

diff --git a/invokeai/frontend/web/docs/STATE_MGMT.md b/invokeai/frontend/web/docs/STATE_MGMT.md
new file mode 100644
index 0000000000..443446c01c
--- /dev/null
+++ b/invokeai/frontend/web/docs/STATE_MGMT.md
@@ -0,0 +1,38 @@
+# State Management
+
+The app makes heavy use of Redux Toolkit, its Query library, and `nanostores`.
+
+## Redux
+
+TODO
+
+## `nanostores`
+
+[nanostores] is a tiny state management library. It provides both imperative and declarative APIs.
+
+### Example
+
+```ts
+export const $myStringOption = atom<string | null>(null);
+
+// Outside a component, or within a callback for performance-critical logic
+$myStringOption.get();
+$myStringOption.set('new value');
+
+// Inside a component
+const myStringOption = useStore($myStringOption);
+```
+
+### Where to put nanostores
+
+- For global application state, export your stores from `invokeai/frontend/web/src/app/store/nanostores/`.
+- For feature state, create a file for the stores next to the redux slice definition (e.g. `invokeai/frontend/web/src/features/myFeature/myFeatureNanostores.ts`).
+- For hooks with global state, export the store from the same file the hook is in, or put it next to the hook.
+
+### When to use nanostores
+
+- For non-serializable data that needs to be available throughout the app, use `nanostores` instead of a global.
+- For ephemeral global state (i.e. state that does not need to be persisted), use `nanostores` instead of redux.
+- For performance-critical code and in callbacks, redux selectors can be problematic due to the declarative reactivity system. Consider refactoring to use `nanostores` if there's a **measurable** performance issue.
+
+[nanostores]: https://github.com/nanostores/nanostores/
diff --git a/invokeai/frontend/web/src/app/store/nanostores/README.md b/invokeai/frontend/web/src/app/store/nanostores/README.md
deleted file mode 100644
index 9b85e586ba..0000000000
--- a/invokeai/frontend/web/src/app/store/nanostores/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# nanostores
-
-For non-serializable data that needs to be available throughout the app, or when redux is not appropriate, use nanostores.

From 3f5370b28427de854a9d486a953a266e6b12cfd1 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 29 Jan 2024 13:32:04 +1100
Subject: [PATCH 068/133] feat(ui): add a copy button to the about modal

This copies the dependencies as JSON.
---
 invokeai/frontend/web/public/locales/en.json  |  1 +
 .../components/AboutModal/AboutModal.tsx      | 35 ++++++++++++++-----
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index b2d873d6d5..57b69199df 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -86,6 +86,7 @@
         "back": "Back",
         "batch": "Batch Manager",
         "cancel": "Cancel",
+        "copy": "Copy",
         "copyError": "$t(gallery.copy) Error",
         "close": "Close",
         "on": "On",
diff --git a/invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx b/invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx
index 932af0298e..d333b64ebf 100644
--- a/invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx
+++ b/invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx
@@ -4,6 +4,7 @@ import {
   Grid,
   GridItem,
   Heading,
+  IconButton,
   Image,
   Modal,
   ModalBody,
@@ -12,7 +13,9 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
+  Spacer,
   Text,
+  Tooltip,
   useDisclosure,
 } from '@invoke-ai/ui-library';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
@@ -20,8 +23,9 @@ import { discordLink, githubLink, websiteLink } from 'features/system/store/cons
 import { map } from 'lodash-es';
 import InvokeLogoYellow from 'public/assets/images/invoke-tag-lrg.svg';
 import type { ReactElement } from 'react';
-import { cloneElement, memo } from 'react';
+import { cloneElement, memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { PiCopyBold } from 'react-icons/pi';
 import { useGetAppDepsQuery, useGetAppVersionQuery } from 'services/api/endpoints/appInfo';
 
 type AboutModalProps = {
@@ -32,13 +36,18 @@ type AboutModalProps = {
 const AboutModal = ({ children }: AboutModalProps) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { t } = useTranslation();
-  const { deps } = useGetAppDepsQuery(undefined, {
+  const { depsArray, depsObject } = useGetAppDepsQuery(undefined, {
     selectFromResult: ({ data }) => ({
-      deps: data ? map(data, (version, name) => ({ name, version })) : [],
+      depsObject: data,
+      depsArray: data ? map(data, (version, name) => ({ name, version })) : [],
     }),
   });
   const { data: appVersion } = useGetAppVersionQuery();
 
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(JSON.stringify(depsObject, null, 2));
+  }, [depsObject]);
+
   return (
     <>
       {cloneElement(children, {
@@ -46,17 +55,27 @@ const AboutModal = ({ children }: AboutModalProps) => {
       })}
       <Modal isOpen={isOpen} onClose={onClose} isCentered size="2xl">
         <ModalOverlay />
-        <ModalContent maxH="80vh" h="33rem">
+        <ModalContent maxH="80vh" h="34rem">
           <ModalHeader>{t('accessibility.about')}</ModalHeader>
           <ModalCloseButton />
           <ModalBody display="flex" flexDir="column" gap={4}>
             <Grid templateColumns="repeat(2, 1fr)" h="full">
               <GridItem backgroundColor="base.750" borderRadius="base" p="4" h="full">
                 <ScrollableContent>
-                  <Heading position="sticky" top="0" backgroundColor="base.750" size="md" p="1">
-                    {t('common.localSystem')}
-                  </Heading>
-                  {deps.map(({ name, version }, i) => (
+                  <Flex position="sticky" top="0" backgroundColor="base.750" p={1} alignItems="center">
+                    <Heading size="md">{t('common.localSystem')}</Heading>
+                    <Spacer />
+                    <Tooltip label={t('common.copy')}>
+                      <IconButton
+                        onClick={handleCopy}
+                        isDisabled={!depsObject}
+                        aria-label={t('common.copy')}
+                        icon={<PiCopyBold />}
+                        variant="ghost"
+                      />
+                    </Tooltip>
+                  </Flex>
+                  {depsArray.map(({ name, version }, i) => (
                     <Grid key={i} py="2" px="1" w="full" templateColumns="repeat(2, 1fr)">
                       <Text>{name}</Text>
                       <Text>{version ? version : t('common.notInstalled')}</Text>

From 13575642d87d35a6a2a2042f7679f28862a2e028 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 29 Jan 2024 13:47:09 +1100
Subject: [PATCH 069/133] chore: update issue template

- Improve spelling and grammar
- Add browser, GPU model, python deps fields
- Revise other fields
---
 .github/ISSUE_TEMPLATE/BUG_REPORT.yml | 98 ++++++++++++++++++---------
 1 file changed, 66 insertions(+), 32 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE/BUG_REPORT.yml b/.github/ISSUE_TEMPLATE/BUG_REPORT.yml
index a422b46625..26e1579f73 100644
--- a/.github/ISSUE_TEMPLATE/BUG_REPORT.yml
+++ b/.github/ISSUE_TEMPLATE/BUG_REPORT.yml
@@ -6,10 +6,6 @@ title: '[bug]: '
 
 labels: ['bug']
 
-# assignees:
-#   - moderator_bot
-#   - lstein
-
 body:
   - type: markdown
     attributes:
@@ -18,10 +14,9 @@ body:
 
   - type: checkboxes
     attributes:
-      label: Is there an existing issue for this?
+      label: Is there an existing issue for this problem?
       description: |
-        Please use the [search function](https://github.com/invoke-ai/InvokeAI/issues?q=is%3Aissue+is%3Aopen+label%3Abug)
-        irst to see if an issue already exists for the bug you encountered.
+        Please [search](https://github.com/invoke-ai/InvokeAI/issues) first to see if an issue already exists for the problem.
       options:
         - label: I have searched the existing issues
           required: true
@@ -33,80 +28,119 @@ body:
   - type: dropdown
     id: os_dropdown
     attributes:
-      label: OS
-      description: Which operating System did you use when the bug occured
+      label: Operating system
+      description: Your computer's operating system.
       multiple: false
       options:
         - 'Linux'
         - 'Windows'
         - 'macOS'
+        - 'other'
     validations:
       required: true
 
   - type: dropdown
     id: gpu_dropdown
     attributes:
-      label: GPU
-      description: Which kind of Graphic-Adapter is your System using
+      label: GPU vendor
+      description: Your GPU's vendor.
       multiple: false
       options:
-        - 'cuda'
-        - 'amd'
-        - 'mps'
-        - 'cpu'
+        - 'Nvidia (CUDA)'
+        - 'AMD (ROCm)'
+        - 'Apple Silicon (MPS)'
+        - 'None (CPU)'
     validations:
       required: true
 
+  - type: input
+    id: gpu_model
+    attributes:
+      label: GPU model
+      description: Your GPU's model. If on Apple Silicon, this is your Mac's chip. Leave blank if on CPU.
+      placeholder: ex. RTX 2080 Ti, Mac M1 Pro
+    validations:
+      required: false
+
   - type: input
     id: vram
     attributes:
-      label: VRAM
-      description: Size of the VRAM if known
+      label: GPU VRAM
+      description: Your GPU's VRAM. If on Apple Silicon, this is your Mac's unified memory. Leave blank if on CPU.
       placeholder: 8GB
     validations:
       required: false
-      
+
   - type: input
     id: version-number
     attributes:
-      label: What version did you experience this issue on?
+      label: Version number
       description: |
-        Please share the version of Invoke AI that you experienced the issue on. If this is not the latest version, please update first to confirm the issue still exists. If you are testing main, please include the commit hash instead.
-      placeholder: X.X.X
+        The version of Invoke you have installed. If it is not the latest version, please update and try again to confirm the issue still exists. If you are testing main, please include the commit hash instead.
+      placeholder: ex. 3.6.1
     validations:
       required: true
 
+  - type: input
+    id: browser-version
+    attributes:
+      label: Browser
+      description: Your web browser and version.
+      placeholder: ex. Firefox 123.0b3
+    validations:
+      required: true
+
+  - type: textarea
+    id: python-deps
+    attributes:
+      label: Python dependencies
+      description: |
+        If the problem occurred during image generation, click the gear icon at the bottom left corner, click "About", click the copy button and then paste here.
+    validations:
+      required: false
+
   - type: textarea
     id: what-happened
     attributes:
-      label: What happened?
+      label: What happened
       description: |
-        Briefly describe what happened, what you expected to happen and how to reproduce this bug.
-      placeholder: When using the webinterface and right-clicking on button X instead of the popup-menu there error Y appears
+        Describe what happened. Include any relevant error messages, stack traces and screenshots here.
+      placeholder: I clicked button X and then Y happened.
     validations:
       required: true
 
   - type: textarea
+    id: what-you-expected
     attributes:
-      label: Screenshots
-      description: If applicable, add screenshots to help explain your problem
-      placeholder: this is what the result looked like <screenshot>
+      label: What you expected to happen
+      description: Describe what you expected to happen.
+      placeholder: I expected Z to happen.
+    validations:
+      required: true
+
+  - type: textarea
+    id: how-to-repro
+    attributes:
+      label: How to reproduce the problem
+      description: List steps to reproduce the problem.
+      placeholder: Start the app, generate an image with these settings, then click button X.
     validations:
       required: false
 
   - type: textarea
+    id: additional-context
     attributes:
       label: Additional context
-      description: Add any other context about the problem here
+      description: Any other context that might help us to understand the problem.
       placeholder: Only happens when there is full moon and Friday the 13th on Christmas Eve 🎅🏻
     validations:
       required: false
 
   - type: input
-    id: contact
+    id: discord-username
     attributes:
-      label: Contact Details
-      description: __OPTIONAL__ How can we get in touch with you if we need more info (besides this issue)?
-      placeholder: ex. email@example.com, discordname, twitter, ...
+      label: Discord username
+      description: If you are on the Invoke discord and would prefer to be contacted there, please provide your username.
+      placeholder: supercoolusername123
     validations:
       required: false

From 7fde19730e337ccdab949e4250a79ca13f6a12b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ufuk=20Sarp=20Sel=C3=A7ok?= <ilkel@live.com>
Date: Mon, 29 Jan 2024 03:50:15 +0100
Subject: [PATCH 070/133] translationBot(ui): update translation (Turkish)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Currently translated at 22.8% (326 of 1426 strings)

Co-authored-by: Ufuk Sarp Selçok <ilkel@live.com>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/tr/
Translation: InvokeAI/Web UI
---
 invokeai/frontend/web/public/locales/tr.json | 244 +++++++++++++++++--
 1 file changed, 220 insertions(+), 24 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/tr.json b/invokeai/frontend/web/public/locales/tr.json
index 8199f3306a..77f13f291d 100644
--- a/invokeai/frontend/web/public/locales/tr.json
+++ b/invokeai/frontend/web/public/locales/tr.json
@@ -1,7 +1,7 @@
 {
     "accessibility": {
         "invokeProgressBar": "Invoke ilerleme durumu",
-        "nextImage": "Sonraki Resim",
+        "nextImage": "Sonraki İmaj",
         "useThisParameter": "Bu ayarları kullan",
         "copyMetadataJson": "Metadata verilerini kopyala (JSON)",
         "exitViewer": "Görüntüleme Modundan Çık",
@@ -12,13 +12,13 @@
         "flipHorizontally": "Yatay Çevir",
         "flipVertically": "Dikey Çevir",
         "modifyConfig": "Ayarları Değiştir",
-        "toggleAutoscroll": "Otomatik kaydırmayı aç-kapa",
-        "toggleLogViewer": "Günlüğü Aç-Kapa",
+        "toggleAutoscroll": "Otomatik kaydırmayı Aç-Kapat",
+        "toggleLogViewer": "Günlüğü Aç-Kapat",
         "showOptionsPanel": "Yan Paneli Göster",
         "modelSelect": "Model Seçimi",
-        "reset": "Sıfırla",
-        "uploadImage": "Resim Yükle",
-        "previousImage": "Önceki Resim",
+        "reset": "Resetle",
+        "uploadImage": "İmaj Yükle",
+        "previousImage": "Önceki İmaj",
         "menu": "Menü",
         "about": "Hakkında",
         "mode": "Kip",
@@ -48,8 +48,8 @@
         "langSimplifiedChinese": "Çince (Basit)",
         "langUkranian": "Ukraynaca",
         "langSpanish": "İspanyolca",
-        "txt2img": "Yazıdan Resime",
-        "img2img": "Resimden Resime",
+        "txt2img": "Yazıdan İmaj",
+        "img2img": "İmajdan İmaj",
         "linear": "Doğrusal",
         "nodes": "İş Akış Düzenleyici",
         "postprocessing": "Rötuş",
@@ -58,11 +58,11 @@
         "postProcessDesc3": "Invoke AI Komut Satırı Arayüzü, Embiggen dahil birçok yeni özellik sunmaktadır.",
         "langKorean": "Korece",
         "unifiedCanvas": "Akıllı Tuval",
-        "nodesDesc": "Resim oluşturmak için hazırladığımız çizge tabanlı sistem şu an geliştirme aşamasındadır. Bu harika özellik hakkındaki gelişmeler için bizi takip etmeye devam edin.",
-        "postProcessDesc1": "Invoke AI birçok rötuş (post-process) aracı sağlar. Resim büyütme ve yüz iyileştirme halihazırda WebUI üzerinden kullanılabilir. Bunlara Yazıdan Resime ve Resimden Resime sekmelerindeki Gelişmiş Ayarlar menüsünden ulaşabilirsiniz. İsterseniz mevcut görüntü ekranının üzerindeki veya görüntüleyicideki resmi doğrudan üstteki tuşlar yardımıyla düzenleyebilirsiniz.",
+        "nodesDesc": "İmaj oluşturmak için hazırladığımız çizge tabanlı sistem şu an geliştirme aşamasındadır. Bu harika özellik hakkındaki gelişmeler için bizi takip etmeye devam edin.",
+        "postProcessDesc1": "Invoke AI birçok rötuş (post-process) aracı sağlar. İmaj büyütme ve yüz iyileştirme halihazırda WebUI üzerinden kullanılabilir. Bunlara Yazıdan İmaj ve İmajdan İmaj sekmelerindeki Gelişmiş Ayarlar menüsünden ulaşabilirsiniz. İsterseniz mevcut görüntü ekranının üzerindeki veya görüntüleyicideki imajı doğrudan üstteki tuşlar yardımıyla düzenleyebilirsiniz.",
         "batch": "Toplu İş Yöneticisi",
-        "accept": "Kabul et",
-        "cancel": "İptal et",
+        "accept": "Onayla",
+        "cancel": "Vazgeç",
         "advanced": "Gelişmiş",
         "copyError": "$t(gallery.copy) Hata",
         "on": "Açık",
@@ -106,24 +106,48 @@
         "statusModelConverted": "Model Dönüştürüldü",
         "statusPreparing": "Hazırlanıyor",
         "statusProcessing": "İşleniyor",
-        "statusProcessingCanceled": "İşlem İptal Edildi",
+        "statusProcessingCanceled": "İşlemden Vazgeçildi",
         "statusRestoringFacesCodeFormer": "Yüzler İyileştiriliyor (CodeFormer)",
         "statusRestoringFacesGFPGAN": "Yüzler İyileştiriliyor (GFPGAN)",
         "template": "Şablon",
         "saveAs": "Farklı Kaydet",
         "statusProcessingComplete": "İşlem Tamamlandı",
-        "statusSavingImage": "Resim Kaydediliyor",
+        "statusSavingImage": "İmaj Kaydediliyor",
         "somethingWentWrong": "Bir sorun oluştu",
         "statusConvertingModel": "Model Dönüştürülüyor",
         "statusDisconnected": "Bağlantı Kesildi",
         "statusError": "Hata",
-        "statusGeneratingImageToImage": "Resimden Resim Oluşturuluyor",
+        "statusGeneratingImageToImage": "İmajdan İmaj Oluşturuluyor",
         "statusGeneratingInpainting": "İçboyama Oluşturuluyor",
         "statusRestoringFaces": "Yüzler İyileştiriliyor",
         "statusUpscaling": "Büyütme",
         "statusUpscalingESRGAN": "Büyütme (ESRGAN)",
         "training": "Eğitim",
-        "statusGeneratingTextToImage": "Yazıdan Resim Oluşturuluyor"
+        "statusGeneratingTextToImage": "Yazıdan İmaj Oluşturuluyor",
+        "imagePrompt": "Resim İstemi",
+        "unknown": "Bilinmeyen",
+        "green": "Yeşil",
+        "red": "Kırmızı",
+        "blue": "Mavi",
+        "alpha": "Alfa",
+        "file": "Dosya",
+        "folder": "Klasör",
+        "format": "biçim",
+        "details": "Ayrıntılar",
+        "error": "Hata",
+        "generate": "Oluştur",
+        "free": "Serbest",
+        "imageFailedToLoad": "İmaj Yüklenemedi",
+        "safetensors": "Safetensor",
+        "upload": "Yükle",
+        "nextPage": "Sonraki Sayfa",
+        "prevPage": "Önceki Sayfa",
+        "dontAskMeAgain": "Bir daha sorma",
+        "delete": "Kaldır",
+        "direction": "Yön",
+        "darkMode": "Koyu Tema",
+        "unsaved": "Kaydedilmemiş",
+        "unknownError": "Bilinmeyen Hata"
     },
     "accordions": {
         "generation": {
@@ -132,7 +156,7 @@
             "conceptsTab": "Konseptler"
         },
         "image": {
-            "title": "Resim"
+            "title": "İmaj"
         },
         "advanced": {
             "title": "Gelişmiş"
@@ -141,30 +165,202 @@
             "title": "Birleştirme",
             "coherenceTab": "Uyum Geçişi",
             "infillTab": "Doldurma"
+        },
+        "control": {
+            "ipTab": "Resim İstemleri"
         }
     },
     "boards": {
         "autoAddBoard": "Panoya Otomatik Ekleme",
-        "cancel": "İptal et",
-        "clearSearch": "Aramayı Sıfırla",
+        "cancel": "Vazgeç",
+        "clearSearch": "Aramayı Sil",
         "deleteBoard": "Panoyu Sil",
         "loading": "Yükleniyor...",
         "myBoard": "Panom",
         "selectBoard": "Bir Pano Seç",
         "addBoard": "Pano Ekle",
-        "deleteBoardAndImages": "Panoyu ve Resimleri Sil",
+        "deleteBoardAndImages": "Panoyu ve İmajları Sil",
         "deleteBoardOnly": "Sadece Panoyu Sil",
         "deletedBoardsCannotbeRestored": "Silinen panolar geri getirilemez",
         "menuItemAutoAdd": "Bu panoya otomatik olarak ekle",
         "move": "Taşı",
-        "movingImagesToBoard_one": "{{count}} resmi şu panoya taşı:",
-        "movingImagesToBoard_other": "{{count}} resmi şu panoya taşı:",
+        "movingImagesToBoard_one": "{{count}} imajı şu panoya taşı:",
+        "movingImagesToBoard_other": "{{count}} imajı şu panoya taşı:",
         "noMatching": "Eşleşen pano yok",
         "searchBoard": "Pano Ara...",
-        "topMessage": "Bu pano, şu özelliklerde kullanılan resimler içeriyor:",
+        "topMessage": "Bu pano, şu özelliklerde kullanılan imajlar içeriyor:",
         "downloadBoard": "Panoyu İndir",
         "uncategorized": "Kategorisiz",
         "changeBoard": "Panoyu Değiştir",
-        "bottomMessage": "Bu panoyu ve resimlerini silmek, bunları kullanan özelliklerin sıfırlanmasına neden olacaktır."
+        "bottomMessage": "Bu panoyu ve imajları silmek, bunları kullanan özelliklerin resetlemesine neden olacaktır."
+    },
+    "controlnet": {
+        "balanced": "Dengeli",
+        "contentShuffle": "İçerik Karma",
+        "contentShuffleDescription": "İmajın içeriğini karıştırır",
+        "depthZoe": "Derinlik (Zoe)",
+        "depthZoeDescription": "Zoe kullanarak derinlik haritası oluşturma",
+        "resizeMode": "Boyutlandırma Kipi",
+        "addControlNet": "$t(common.controlNet) Ekle",
+        "addIPAdapter": "$t(common.ipAdapter) Ekle",
+        "addT2IAdapter": "$t(common.t2iAdapter) Ekle",
+        "controlNetEnabledT2IDisabled": "$t(common.controlNet) etkin, $t(common.t2iAdapter)s etkin değil",
+        "t2iEnabledControlNetDisabled": "$t(common.t2iAdapter) etkin, $t(common.controlNet)s etkin değil",
+        "colorMap": "Renk",
+        "crop": "Kırpma",
+        "delete": "Kaldır",
+        "depthMidas": "Derinlik (Midas)",
+        "depthMidasDescription": "Midas kullanarak derinlik haritası oluşturma",
+        "detectResolution": "Çözünürlüğü Bul",
+        "none": "Hiçbiri",
+        "noneDescription": "Hiçbir işlem uygulanmamış",
+        "selectModel": "Model seçin",
+        "showAdvanced": "Gelişmiş Ayarları Göster",
+        "controlNetT2IMutexDesc": "$t(common.controlNet) ve $t(common.t2iAdapter)'nün beraber kullanımı henüz desteklenmiyor.",
+        "canny": "Canny",
+        "colorMapDescription": "İmajdan bir renk haritası oluşturur",
+        "handAndFace": "El ve Yüz",
+        "processor": "İşlemci",
+        "prompt": "İstem",
+        "duplicate": "Kopyala",
+        "large": "Büyük",
+        "modelSize": "Model Boyutu",
+        "resize": "Boyutlandır",
+        "resizeSimple": "Boyutlandır (Basit)",
+        "safe": "Güvenli",
+        "small": "Küçük",
+        "weight": "Etki",
+        "cannyDescription": "Canny kenar algılama",
+        "fill": "Doldur",
+        "highThreshold": "Üst Eşik",
+        "imageResolution": "İmaj Çözünürlüğü",
+        "colorMapTileSize": "Karo Boyutu",
+        "importImageFromCanvas": "Tuvalden İmajı içe Aktar",
+        "importMaskFromCanvas": "Tuvalden Maskeyi İçe Aktar",
+        "lowThreshold": "Alt Eşik",
+        "base": "Taban",
+        "depthAnythingDescription": "Depth Anything tekniği ile derinlik haritası oluşturma"
+    },
+    "queue": {
+        "queuedCount": "{{pending}} Sırada",
+        "resumeSucceeded": "İşlem Sürdürüldü",
+        "openQueue": "Sırayı Göster",
+        "cancelSucceeded": "Öğeden Vazgeçildi",
+        "cancelFailed": "Öğeden Vazgeçmede Sorun",
+        "prune": "Arındır",
+        "pruneTooltip": "{{item_count}} Bitmiş İşi Sil",
+        "resumeFailed": "İşlemi Sürdürmede Sorun",
+        "pauseFailed": "İşlemi Duraklatmada Sorun",
+        "cancelBatchSucceeded": "Toplu İşten Vazgeçildi",
+        "pruneSucceeded": "{{item_count}} Bitmiş İş Sıradan Kaldırıldı",
+        "in_progress": "İşleniyor",
+        "completed": "Bitti",
+        "canceled": "Vazgeçildi",
+        "back": "arka",
+        "queueFront": "Sıranın Başına Ekle",
+        "queueBack": "Sıraya Ekle",
+        "resumeTooltip": "İşlemi Sürdür",
+        "clearQueueAlertDialog2": "Sırayı boşaltmak istediğinizden emin misiniz?",
+        "batchQueuedDesc_one": "{{count}} iş sıranın {{direction}} eklendi",
+        "batchQueuedDesc_other": "{{count}} iş sıranın {{direction}} eklendi",
+        "batchFailedToQueue": "Toplu İş Sıraya Alınamadı",
+        "front": "ön",
+        "queue": "Sıra",
+        "resume": "Sürdür",
+        "queueTotal": "Toplam {{total}}",
+        "queueEmpty": "Sıra Boş",
+        "clearQueueAlertDialog": "Sırayı boşaltma tuşu halihazırdaki işlemi durdurur ve sırayı tamamen boşaltır.",
+        "current": "Şu Anki",
+        "time": "Süre",
+        "pause": "Duraklat",
+        "pauseTooltip": "İşlemi Duraklat",
+        "pruneFailed": "Sırayı Arındırmada Sorun",
+        "clearTooltip": "Vazgeç ve Tüm Öğeleri Sil",
+        "clear": "Boşalt",
+        "cancelBatchFailed": "Toplu İşten Vazgeçmede Sorun",
+        "next": "Sonraki",
+        "status": "Durum",
+        "failed": "Başarısız",
+        "item": "Öğe",
+        "enqueueing": "Toplu İş Sıraya Alınıyor",
+        "pauseSucceeded": "İşlem Duraklatıldı",
+        "cancel": "Vazgeç",
+        "cancelTooltip": "Şu Anki Öğeden Vazgeç",
+        "clearSucceeded": "Sıra Boşaltıldı",
+        "clearFailed": "Sırayı Boşaltmada Sorun",
+        "cancelBatch": "Toplu İşten Vazgeç",
+        "cancelItem": "Öğeden Vazgeç",
+        "total": "Toplam",
+        "pending": "Sırada",
+        "completedIn": "'de bitirildi",
+        "batch": "Toplu İş",
+        "session": "Oturum",
+        "batchQueued": "Toplu İş Sıraya Alındı",
+        "notReady": "Sıraya Alınamadı"
+    },
+    "invocationCache": {
+        "cacheSize": "Önbellek Boyutu",
+        "disable": "Kapat",
+        "clear": "Boşalt",
+        "maxCacheSize": "Maksimum Önbellek Boyutu",
+        "useCache": "Önbellek Kullan",
+        "enable": "Aç"
+    },
+    "gallery": {
+        "deleteImageBin": "Silinen imajlar işletim sisteminin çöp kutusuna gönderilir.",
+        "deleteImagePermanent": "Silinen imajlar geri getirilemez.",
+        "assets": "Özkaynaklar",
+        "autoAssignBoardOnClick": "Tıklanan Panoya Otomatik Atama",
+        "loading": "Yükleniyor",
+        "starImage": "Yıldız Koy",
+        "download": "İndir",
+        "deleteSelection": "Seçileni Sil",
+        "preparingDownloadFailed": "İndirme Hazırlanırken Sorun",
+        "problemDeletingImages": "İmaj Silmede Sorun",
+        "featuresWillReset": "Bu imajı silerseniz, o özellikler resetlenecektir.",
+        "galleryImageResetSize": "Boyutu Resetle",
+        "noImageSelected": "İmaj Seçili Değil",
+        "unstarImage": "Yıldızı Kaldır",
+        "uploads": "Yüklemeler",
+        "problemDeletingImagesDesc": "Bir ya da daha çok imaj silinemedi",
+        "gallerySettings": "Galeri Ayarları",
+        "image": "imaj",
+        "galleryImageSize": "İmaj Boyutu",
+        "allImagesLoaded": "Bütün İmajlar Yüklendi",
+        "copy": "Kopyala",
+        "noImagesInGallery": "Gösterilecek İmaj Yok",
+        "autoSwitchNewImages": "Yeni İmajı Biter Bitmez Gör",
+        "maintainAspectRatio": "En-Boy Oranını Koru",
+        "currentlyInUse": "Bu imaj şu an bu bölümlerde kullanımda:",
+        "deleteImage": "İmajı Sil",
+        "loadMore": "Daha Getir",
+        "setCurrentImage": "Çalışma İmajı Yap",
+        "unableToLoad": "Galeri Yüklenemedi",
+        "downloadSelection": "Seçileni İndir",
+        "preparingDownload": "İndirmeye Hazırlanıyor"
+    },
+    "hrf": {
+        "hrf": "Yüksek Çözünürlük Kürü",
+        "enableHrf": "Yüksek Çözünürlük Kürünü Aç",
+        "hrfStrength": "Yüksek Çözünürlük Kürü Etkisi",
+        "strengthTooltip": "Düşük değerler daha az detaya neden olsa da olası bozuklukları önleyebilir.",
+        "metadata": {
+            "enabled": "Yüksek Çözünürlük Kürü Açık",
+            "strength": "Yüksek Çözünürlük Kürü Etkisi",
+            "method": "Yüksek Çözünürlük Kürü Yöntemi"
+        },
+        "upscaleMethod": "Büyütme Yöntemi",
+        "enableHrfTooltip": "Daha düşük bir başlangıç çözünürlüğüyle oluşturup ana çözünürlüğe büyütür ve İmajdan İmaj yapar."
+    },
+    "hotkeys": {
+        "noHotkeysFound": "Kısayol Tuşu Bulanamadı",
+        "searchHotkeys": "Kısayol Tuşlarında Ara",
+        "clearSearch": "Aramayı Sil"
+    },
+    "embedding": {
+        "incompatibleModel": "Uyumsuz ana model:"
+    },
+    "unifiedCanvas": {
+        "accept": "Onayla"
     }
 }

From 287d3c2b0431299c8bfeb2016ad16eea8ae503d5 Mon Sep 17 00:00:00 2001
From: Mary Hipp Rogers <maryhipp@gmail.com>
Date: Mon, 29 Jan 2024 13:13:09 -0500
Subject: [PATCH 071/133] add UI library to rollup config (#5598)

* try rolling up ui library

* lint

---------

Co-authored-by: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
---
 invokeai/frontend/web/config/vite.package.config.mts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/config/vite.package.config.mts b/invokeai/frontend/web/config/vite.package.config.mts
index a317c701ef..3c05d52e00 100644
--- a/invokeai/frontend/web/config/vite.package.config.mts
+++ b/invokeai/frontend/web/config/vite.package.config.mts
@@ -22,12 +22,13 @@ export const packageConfig: UserConfig = {
       fileName: (format) => `invoke-ai-ui.${format}.js`,
     },
     rollupOptions: {
-      external: ['react', 'react-dom', '@emotion/react', '@chakra-ui/react'],
+      external: ['react', 'react-dom', '@emotion/react', '@chakra-ui/react', '@invoke-ai/ui-library'],
       output: {
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
           '@emotion/react': 'EmotionReact',
+          '@invoke-ai/ui-library': 'UiLibrary',
         },
       },
     },

From c4291f21366250efd172a2a895848bbb0387390c Mon Sep 17 00:00:00 2001
From: Thomas Mello <work.mello@gmail.com>
Date: Sun, 28 Jan 2024 03:09:11 +0300
Subject: [PATCH 072/133] fix(ui): block gallery navigation when staging images
 on canvas

---
 .../gallery/hooks/useGalleryHotkeys.ts        | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts
index f802b290cf..75df186dd7 100644
--- a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts
+++ b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts
@@ -1,11 +1,22 @@
+import { useAppSelector } from 'app/store/storeHooks';
+import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import { useGalleryImages } from 'features/gallery/hooks/useGalleryImages';
 import { useGalleryNavigation } from 'features/gallery/hooks/useGalleryNavigation';
+import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
+import { useMemo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 
 /**
  * Registers gallery hotkeys. This hook is a singleton.
  */
 export const useGalleryHotkeys = () => {
+  const activeTabName = useAppSelector(activeTabNameSelector);
+  const isStaging = useAppSelector(isStagingSelector);
+  // block navigation on Unified Canvas tab when staging new images
+  const canNavigateGallery = useMemo(() => {
+    return activeTabName !== 'unifiedCanvas' || !isStaging;
+  }, [activeTabName, isStaging]);
+
   const {
     areMoreImagesAvailable,
     handleLoadMoreImages,
@@ -18,14 +29,17 @@ export const useGalleryHotkeys = () => {
   useHotkeys(
     'left',
     () => {
-      handleLeftImage();
+      canNavigateGallery && handleLeftImage();
     },
-    [handleLeftImage]
+    [handleLeftImage, canNavigateGallery]
   );
 
   useHotkeys(
     'right',
     () => {
+      if (!canNavigateGallery) {
+        return;
+      }
       if (isOnLastImage && areMoreImagesAvailable && !isFetching) {
         handleLoadMoreImages();
         return;
@@ -34,7 +48,7 @@ export const useGalleryHotkeys = () => {
         handleRightImage();
       }
     },
-    [isOnLastImage, areMoreImagesAvailable, handleLoadMoreImages, isFetching, handleRightImage]
+    [isOnLastImage, areMoreImagesAvailable, handleLoadMoreImages, isFetching, handleRightImage, canNavigateGallery]
   );
 
   useHotkeys(

From 5ae80fab87731f830fe544af94dac0dffe66602e Mon Sep 17 00:00:00 2001
From: Thomas Mello <work.mello@gmail.com>
Date: Mon, 29 Jan 2024 00:51:10 +0300
Subject: [PATCH 073/133] fix(ui): accept staging image hotkey callback

---
 .../features/canvas/components/IAICanvasStagingAreaToolbar.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
index 486372d728..c775b1ef7b 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
@@ -74,7 +74,7 @@ const IAICanvasStagingAreaToolbar = () => {
     preventDefault: true,
   });
 
-  useHotkeys(['enter'], () => handleAccept, {
+  useHotkeys(['enter'], handleAccept, {
     enabled: () => true,
     preventDefault: true,
   });

From b01311813bad9e18601973f2e9b8d7ce8a5fc18d Mon Sep 17 00:00:00 2001
From: Thomas Mello <work.mello@gmail.com>
Date: Mon, 29 Jan 2024 01:01:44 +0300
Subject: [PATCH 074/133] fix(ui): activate move tool on pressing space

canvas element is not guaranteed to be in focus (e.g. after accepting new staging image) so we check for the active tab name instead
---
 .../features/canvas/hooks/useCanvasHotkeys.ts | 63 +++++++++----------
 .../canvas/util/isElChildOfCanvasTab.tsx      | 12 ----
 2 files changed, 29 insertions(+), 46 deletions(-)
 delete mode 100644 invokeai/frontend/web/src/features/canvas/util/isElChildOfCanvasTab.tsx

diff --git a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts
index 05ed0d7119..706be991bf 100644
--- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts
+++ b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts
@@ -14,7 +14,6 @@ import {
   setShouldShowBoundingBox,
   setShouldSnapToGrid,
 } from 'features/canvas/store/canvasSlice';
-import { isElChildOfCanvasTab } from 'features/canvas/util/isElChildOfCanvasTab';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { useCallback, useEffect } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -92,39 +91,35 @@ const useInpaintingCanvasHotkeys = () => {
     [activeTabName, shouldShowBoundingBox]
   );
 
-  const onKeyDown = useCallback((e: KeyboardEvent) => {
-    if (
-      e.repeat ||
-      e.key !== ' ' ||
-      isInputElement(e.target as HTMLElement) ||
-      !isElChildOfCanvasTab(e.target as HTMLElement)
-    ) {
-      return;
-    }
-    if ($toolStash.get() || $tool.get() === 'move') {
-      return;
-    }
-    $canvasStage.get()?.container().focus();
-    $toolStash.set($tool.get());
-    $tool.set('move');
-    resetToolInteractionState();
-  }, []);
-  const onKeyUp = useCallback((e: KeyboardEvent) => {
-    if (
-      e.repeat ||
-      e.key !== ' ' ||
-      isInputElement(e.target as HTMLElement) ||
-      !isElChildOfCanvasTab(e.target as HTMLElement)
-    ) {
-      return;
-    }
-    if (!$toolStash.get() || $tool.get() !== 'move') {
-      return;
-    }
-    $canvasStage.get()?.container().focus();
-    $tool.set($toolStash.get() ?? 'move');
-    $toolStash.set(null);
-  }, []);
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.repeat || e.key !== ' ' || isInputElement(e.target as HTMLElement) || activeTabName !== 'unifiedCanvas') {
+        return;
+      }
+      if ($toolStash.get() || $tool.get() === 'move') {
+        return;
+      }
+      $canvasStage.get()?.container().focus();
+      $toolStash.set($tool.get());
+      $tool.set('move');
+      resetToolInteractionState();
+    },
+    [activeTabName]
+  );
+  const onKeyUp = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.repeat || e.key !== ' ' || isInputElement(e.target as HTMLElement) || activeTabName !== 'unifiedCanvas') {
+        return;
+      }
+      if (!$toolStash.get() || $tool.get() !== 'move') {
+        return;
+      }
+      $canvasStage.get()?.container().focus();
+      $tool.set($toolStash.get() ?? 'move');
+      $toolStash.set(null);
+    },
+    [activeTabName]
+  );
 
   useEffect(() => {
     window.addEventListener('keydown', onKeyDown);
diff --git a/invokeai/frontend/web/src/features/canvas/util/isElChildOfCanvasTab.tsx b/invokeai/frontend/web/src/features/canvas/util/isElChildOfCanvasTab.tsx
deleted file mode 100644
index a59e780abc..0000000000
--- a/invokeai/frontend/web/src/features/canvas/util/isElChildOfCanvasTab.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { CANVAS_TAB_TESTID } from 'features/canvas/store/constants';
-
-/**
- * Determines if an element is a child of the canvas tab. Uses the canvas data-testid,
- * actually checking against the *parent* of that element, which is the canvas's
- * panel from `react-resizable-panels`. This panel element has dynamic children, so
- * it's safer to check the canvas tab and grab its parent.
- */
-export const isElChildOfCanvasTab = (el: HTMLElement) => {
-  const canvasContainerEl = document.querySelector(`[data-testid="${CANVAS_TAB_TESTID}"]`);
-  return Boolean(canvasContainerEl?.parentElement?.contains(el));
-};

From b93695b78f9ddb6342f96c18f15de6cb7bfde4f2 Mon Sep 17 00:00:00 2001
From: Thomas Mello <work.mello@gmail.com>
Date: Mon, 29 Jan 2024 01:36:02 +0300
Subject: [PATCH 075/133] feat(ui): discard all staging images in canvas on
 escape

---
 .../components/IAICanvasStagingAreaToolbar.tsx       | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
index c775b1ef7b..5c41626c95 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
@@ -79,6 +79,16 @@ const IAICanvasStagingAreaToolbar = () => {
     preventDefault: true,
   });
 
+  useHotkeys(
+    ['esc'],
+    () => {
+      handleDiscardStagingArea();
+    },
+    {
+      preventDefault: true,
+    }
+  );
+
   const { data: imageDTO } = useGetImageDTOQuery(currentStagingAreaImage?.imageName ?? skipToken);
 
   const handleToggleShouldShowStagingImage = useCallback(() => {
@@ -165,7 +175,7 @@ const IAICanvasStagingAreaToolbar = () => {
           colorScheme="invokeBlue"
         />
         <IconButton
-          tooltip={t('unifiedCanvas.discardAll')}
+          tooltip={`${t('unifiedCanvas.discardAll')} (Esc)`}
           aria-label={t('unifiedCanvas.discardAll')}
           icon={<PiXBold />}
           onClick={handleDiscardStagingArea}

From 30e11b4b422fef01ee2a16f424f768c64dec95a4 Mon Sep 17 00:00:00 2001
From: Thomas Mello <work.mello@gmail.com>
Date: Mon, 29 Jan 2024 02:50:02 +0300
Subject: [PATCH 076/133] feat(ui): save the current staging image with shift+s

---
 .../components/IAICanvasStagingAreaToolbar.tsx      | 13 ++++++++++++-
 .../IAICanvasToolbar/IAICanvasToolbar.tsx           |  6 +++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
index 5c41626c95..1a539a8909 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
@@ -107,6 +107,17 @@ const IAICanvasStagingAreaToolbar = () => {
     );
   }, [dispatch, imageDTO]);
 
+  useHotkeys(
+    ['shift+s'],
+    () => {
+      shouldShowStagingImage && handleSaveToGallery();
+    },
+    {
+      preventDefault: true,
+    },
+    [shouldShowStagingImage, handleSaveToGallery]
+  );
+
   const handleDiscardStagingArea = useCallback(() => {
     dispatch(discardStagedImages());
   }, [dispatch]);
@@ -167,7 +178,7 @@ const IAICanvasStagingAreaToolbar = () => {
           colorScheme="invokeBlue"
         />
         <IconButton
-          tooltip={t('unifiedCanvas.saveToGallery')}
+          tooltip={`${t('unifiedCanvas.saveToGallery')} (Shift+S)`}
           aria-label={t('unifiedCanvas.saveToGallery')}
           isDisabled={!imageDTO || !imageDTO.is_intermediate}
           icon={<PiFloppyDiskBold />}
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
index 65a46d580a..5642269bda 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
@@ -88,13 +88,13 @@ const IAICanvasToolbar = () => {
   useHotkeys(
     ['shift+s'],
     () => {
-      handleSaveToGallery();
+      !isStaging && handleSaveToGallery();
     },
     {
-      enabled: () => !isStaging,
+      enabled: true,
       preventDefault: true,
     },
-    []
+    [isStaging]
   );
 
   useHotkeys(

From 4477e04d591b19a904c0fbfbd443fa94d05d95a5 Mon Sep 17 00:00:00 2001
From: Thomas Mello <work.mello@gmail.com>
Date: Mon, 29 Jan 2024 23:39:07 +0300
Subject: [PATCH 077/133] fix(ui): filter out interactive targets when pressing
 space on canvas tab

Improve input filtering for better accessibility
---
 .../src/features/canvas/hooks/useCanvasHotkeys.ts   |  6 +++---
 .../src/features/canvas/util/isInteractiveTarget.ts | 13 +++++++++++++
 2 files changed, 16 insertions(+), 3 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/canvas/util/isInteractiveTarget.ts

diff --git a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts
index 706be991bf..4e10cbbde6 100644
--- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts
+++ b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts
@@ -1,5 +1,4 @@
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { isInputElement } from 'common/util/isInputElement';
 import {
   $canvasStage,
   $tool,
@@ -14,6 +13,7 @@ import {
   setShouldShowBoundingBox,
   setShouldSnapToGrid,
 } from 'features/canvas/store/canvasSlice';
+import { isInteractiveTarget } from 'features/canvas/util/isInteractiveTarget';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { useCallback, useEffect } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -93,7 +93,7 @@ const useInpaintingCanvasHotkeys = () => {
 
   const onKeyDown = useCallback(
     (e: KeyboardEvent) => {
-      if (e.repeat || e.key !== ' ' || isInputElement(e.target as HTMLElement) || activeTabName !== 'unifiedCanvas') {
+      if (e.repeat || e.key !== ' ' || isInteractiveTarget(e.target) || activeTabName !== 'unifiedCanvas') {
         return;
       }
       if ($toolStash.get() || $tool.get() === 'move') {
@@ -108,7 +108,7 @@ const useInpaintingCanvasHotkeys = () => {
   );
   const onKeyUp = useCallback(
     (e: KeyboardEvent) => {
-      if (e.repeat || e.key !== ' ' || isInputElement(e.target as HTMLElement) || activeTabName !== 'unifiedCanvas') {
+      if (e.repeat || e.key !== ' ' || isInteractiveTarget(e.target) || activeTabName !== 'unifiedCanvas') {
         return;
       }
       if (!$toolStash.get() || $tool.get() !== 'move') {
diff --git a/invokeai/frontend/web/src/features/canvas/util/isInteractiveTarget.ts b/invokeai/frontend/web/src/features/canvas/util/isInteractiveTarget.ts
new file mode 100644
index 0000000000..74a09aa8e4
--- /dev/null
+++ b/invokeai/frontend/web/src/features/canvas/util/isInteractiveTarget.ts
@@ -0,0 +1,13 @@
+import { isInputElement } from 'common/util/isInputElement';
+
+export const isInteractiveTarget = (target: EventTarget | null) => {
+  if (target instanceof HTMLElement) {
+    return (
+      target.tabIndex > -1 ||
+      isInputElement(target) ||
+      ['dialog', 'alertdialog'].includes(target.getAttribute('role') ?? '')
+    );
+  }
+
+  return false;
+};

From d7f16b7c878bf1d50df37f4b8b7760de7582fdcd Mon Sep 17 00:00:00 2001
From: Thomas Mello <work.mello@gmail.com>
Date: Tue, 30 Jan 2024 16:45:14 +0300
Subject: [PATCH 078/133] fix(ui): the bottom button on floating side panel
 clears all queue items

---
 .../features/queue/components/ClearQueueIconButton.tsx |  2 +-
 .../ui/components/FloatingParametersPanelButtons.tsx   | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx b/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx
index 6bc8cfb6a1..65f2008f53 100644
--- a/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx
@@ -12,7 +12,7 @@ type ClearQueueIconButtonProps = ClearQueueButtonProps & {
   onOpen: () => void;
 };
 
-const ClearAllQueueIconButton = ({ onOpen, ...props }: ClearQueueIconButtonProps) => {
+export const ClearAllQueueIconButton = ({ onOpen, ...props }: ClearQueueIconButtonProps) => {
   const { t } = useTranslation();
   const { isLoading, isDisabled } = useClearQueue();
 
diff --git a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
index 16500a1a79..926222b2aa 100644
--- a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
@@ -1,7 +1,8 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
-import { ButtonGroup, Flex, Icon, IconButton, Portal, spinAnimation } from '@invoke-ai/ui-library';
+import { ButtonGroup, Flex, Icon, IconButton, Portal, spinAnimation, useDisclosure } from '@invoke-ai/ui-library';
 import CancelCurrentQueueItemIconButton from 'features/queue/components/CancelCurrentQueueItemIconButton';
-import ClearQueueIconButton from 'features/queue/components/ClearQueueIconButton';
+import ClearQueueConfirmationAlertDialog from 'features/queue/components/ClearQueueConfirmationAlertDialog';
+import { ClearAllQueueIconButton } from 'features/queue/components/ClearQueueIconButton';
 import { QueueButtonTooltip } from 'features/queue/components/QueueButtonTooltip';
 import { useQueueBack } from 'features/queue/hooks/useQueueBack';
 import type { UsePanelReturn } from 'features/ui/hooks/usePanel';
@@ -35,6 +36,8 @@ const FloatingSidePanelButtons = (props: Props) => {
     [isDisabled, queueStatus?.processor.is_processing]
   );
 
+  const disclosure = useDisclosure();
+
   if (!props.panelApi.isCollapsed) {
     return null;
   }
@@ -71,7 +74,8 @@ const FloatingSidePanelButtons = (props: Props) => {
           />
           <CancelCurrentQueueItemIconButton sx={floatingButtonStyles} />
         </ButtonGroup>
-        <ClearQueueIconButton sx={floatingButtonStyles} />
+        <ClearAllQueueIconButton sx={floatingButtonStyles} onOpen={disclosure.onOpen} />
+        <ClearQueueConfirmationAlertDialog disclosure={disclosure} />
       </Flex>
     </Portal>
   );

From a04981b41861c99b03db4e1f59a176c3a16231a8 Mon Sep 17 00:00:00 2001
From: Brandon Rising <contact@brandonrising.com>
Date: Tue, 30 Jan 2024 21:32:08 -0500
Subject: [PATCH 079/133] This seems to work now

---
 invokeai/backend/model_management/models/sdxl.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/invokeai/backend/model_management/models/sdxl.py b/invokeai/backend/model_management/models/sdxl.py
index 53c080fa66..01e9420fed 100644
--- a/invokeai/backend/model_management/models/sdxl.py
+++ b/invokeai/backend/model_management/models/sdxl.py
@@ -141,7 +141,7 @@ class StableDiffusionXLModel(DiffusersModel):
                 version=base_model,
                 model_config=config,
                 output_path=output_path,
-                use_safetensors=False,  # corrupts sdxl models for some reason
+                use_safetensors=True,
                 **kwargs,
             )
         else:

From bb2787584d65e9d3121b14e1a439eeb04e588e06 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 30 Jan 2024 15:12:58 +0000
Subject: [PATCH 080/133] chore(deps-dev): bump vite in /invokeai/frontend/web

Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 5.0.11 to 5.0.12.
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/v5.0.12/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v5.0.12/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 invokeai/frontend/web/package.json   |  2 +-
 invokeai/frontend/web/pnpm-lock.yaml | 81 +++++++++++++---------------
 2 files changed, 37 insertions(+), 46 deletions(-)

diff --git a/invokeai/frontend/web/package.json b/invokeai/frontend/web/package.json
index ecc27350bc..d7399309d2 100644
--- a/invokeai/frontend/web/package.json
+++ b/invokeai/frontend/web/package.json
@@ -152,7 +152,7 @@
     "storybook": "^7.6.10",
     "ts-toolbelt": "^9.6.0",
     "typescript": "^5.3.3",
-    "vite": "^5.0.11",
+    "vite": "^5.0.12",
     "vite-plugin-css-injected-by-js": "^3.3.1",
     "vite-plugin-dts": "^3.7.1",
     "vite-plugin-eslint": "^1.8.1",
diff --git a/invokeai/frontend/web/pnpm-lock.yaml b/invokeai/frontend/web/pnpm-lock.yaml
index 98a307c7d9..a5ffce6809 100644
--- a/invokeai/frontend/web/pnpm-lock.yaml
+++ b/invokeai/frontend/web/pnpm-lock.yaml
@@ -209,7 +209,7 @@ devDependencies:
     version: 7.6.10(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)
   '@storybook/react-vite':
     specifier: ^7.6.10
-    version: 7.6.10(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)(vite@5.0.11)
+    version: 7.6.10(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)(vite@5.0.12)
   '@storybook/test':
     specifier: ^7.6.10
     version: 7.6.10
@@ -242,7 +242,7 @@ devDependencies:
     version: 6.19.0(eslint@8.56.0)(typescript@5.3.3)
   '@vitejs/plugin-react-swc':
     specifier: ^3.5.0
-    version: 3.5.0(vite@5.0.11)
+    version: 3.5.0(vite@5.0.12)
   concurrently:
     specifier: ^8.2.2
     version: 8.2.2
@@ -301,20 +301,20 @@ devDependencies:
     specifier: ^5.3.3
     version: 5.3.3
   vite:
-    specifier: ^5.0.11
-    version: 5.0.11(@types/node@20.11.5)
+    specifier: ^5.0.12
+    version: 5.0.12(@types/node@20.11.5)
   vite-plugin-css-injected-by-js:
     specifier: ^3.3.1
-    version: 3.3.1(vite@5.0.11)
+    version: 3.3.1(vite@5.0.12)
   vite-plugin-dts:
     specifier: ^3.7.1
-    version: 3.7.1(@types/node@20.11.5)(typescript@5.3.3)(vite@5.0.11)
+    version: 3.7.1(@types/node@20.11.5)(typescript@5.3.3)(vite@5.0.12)
   vite-plugin-eslint:
     specifier: ^1.8.1
-    version: 1.8.1(eslint@8.56.0)(vite@5.0.11)
+    version: 1.8.1(eslint@8.56.0)(vite@5.0.12)
   vite-tsconfig-paths:
     specifier: ^4.3.1
-    version: 4.3.1(typescript@5.3.3)(vite@5.0.11)
+    version: 4.3.1(typescript@5.3.3)(vite@5.0.12)
 
 packages:
 
@@ -3713,7 +3713,7 @@ packages:
       chalk: 4.1.2
     dev: true
 
-  /@joshwooding/vite-plugin-react-docgen-typescript@0.3.0(typescript@5.3.3)(vite@5.0.11):
+  /@joshwooding/vite-plugin-react-docgen-typescript@0.3.0(typescript@5.3.3)(vite@5.0.12):
     resolution: {integrity: sha512-2D6y7fNvFmsLmRt6UCOFJPvFoPMJGT0Uh1Wg0RaigUp7kdQPs6yYn8Dmx6GZkOH/NW0yMTwRz/p0SRMMRo50vA==}
     peerDependencies:
       typescript: '>= 4.3.x'
@@ -3727,7 +3727,7 @@ packages:
       magic-string: 0.27.0
       react-docgen-typescript: 2.2.2(typescript@5.3.3)
       typescript: 5.3.3
-      vite: 5.0.11(@types/node@20.11.5)
+      vite: 5.0.12(@types/node@20.11.5)
     dev: true
 
   /@jridgewell/gen-mapping@0.3.3:
@@ -4962,7 +4962,7 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/builder-vite@7.6.10(typescript@5.3.3)(vite@5.0.11):
+  /@storybook/builder-vite@7.6.10(typescript@5.3.3)(vite@5.0.12):
     resolution: {integrity: sha512-qxe19axiNJVdIKj943e1ucAmADwU42fTGgMSdBzzrvfH3pSOmx2057aIxRzd8YtBRnj327eeqpgCHYIDTunMYQ==}
     peerDependencies:
       '@preact/preset-vite': '*'
@@ -4994,7 +4994,7 @@ packages:
       magic-string: 0.30.5
       rollup: 3.29.4
       typescript: 5.3.3
-      vite: 5.0.11(@types/node@20.11.5)
+      vite: 5.0.12(@types/node@20.11.5)
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -5350,7 +5350,7 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /@storybook/react-vite@7.6.10(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)(vite@5.0.11):
+  /@storybook/react-vite@7.6.10(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)(vite@5.0.12):
     resolution: {integrity: sha512-YE2+J1wy8nO+c6Nv/hBMu91Edew3K184L1KSnfoZV8vtq2074k1Me/8pfe0QNuq631AncpfCYNb37yBAXQ/80w==}
     engines: {node: '>=16'}
     peerDependencies:
@@ -5358,16 +5358,16 @@ packages:
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
       vite: ^3.0.0 || ^4.0.0 || ^5.0.0
     dependencies:
-      '@joshwooding/vite-plugin-react-docgen-typescript': 0.3.0(typescript@5.3.3)(vite@5.0.11)
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.3.0(typescript@5.3.3)(vite@5.0.12)
       '@rollup/pluginutils': 5.1.0
-      '@storybook/builder-vite': 7.6.10(typescript@5.3.3)(vite@5.0.11)
+      '@storybook/builder-vite': 7.6.10(typescript@5.3.3)(vite@5.0.12)
       '@storybook/react': 7.6.10(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)
-      '@vitejs/plugin-react': 3.1.0(vite@5.0.11)
+      '@vitejs/plugin-react': 3.1.0(vite@5.0.12)
       magic-string: 0.30.5
       react: 18.2.0
       react-docgen: 7.0.3
       react-dom: 18.2.0(react@18.2.0)
-      vite: 5.0.11(@types/node@20.11.5)
+      vite: 5.0.12(@types/node@20.11.5)
     transitivePeerDependencies:
       - '@preact/preset-vite'
       - encoding
@@ -6442,18 +6442,18 @@ packages:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
     dev: true
 
-  /@vitejs/plugin-react-swc@3.5.0(vite@5.0.11):
+  /@vitejs/plugin-react-swc@3.5.0(vite@5.0.12):
     resolution: {integrity: sha512-1PrOvAaDpqlCV+Up8RkAh9qaiUjoDUcjtttyhXDKw53XA6Ve16SOp6cCOpRs8Dj8DqUQs6eTW5YkLcLJjrXAig==}
     peerDependencies:
       vite: ^4 || ^5
     dependencies:
       '@swc/core': 1.3.101
-      vite: 5.0.11(@types/node@20.11.5)
+      vite: 5.0.12(@types/node@20.11.5)
     transitivePeerDependencies:
       - '@swc/helpers'
     dev: true
 
-  /@vitejs/plugin-react@3.1.0(vite@5.0.11):
+  /@vitejs/plugin-react@3.1.0(vite@5.0.12):
     resolution: {integrity: sha512-AfgcRL8ZBhAlc3BFdigClmTUMISmmzHn7sB2h9U1odvc5U/MjWXsAaz18b/WoppUTDBzxOJwo2VdClfUcItu9g==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -6464,7 +6464,7 @@ packages:
       '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.7)
       magic-string: 0.27.0
       react-refresh: 0.14.0
-      vite: 5.0.11(@types/node@20.11.5)
+      vite: 5.0.12(@types/node@20.11.5)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -8405,7 +8405,7 @@ packages:
     dependencies:
       debug: 4.3.4
       is-url: 1.2.4
-      postcss: 8.4.32
+      postcss: 8.4.33
       postcss-values-parser: 2.0.1
     transitivePeerDependencies:
       - supports-color
@@ -8416,8 +8416,8 @@ packages:
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
     dependencies:
       is-url: 1.2.4
-      postcss: 8.4.32
-      postcss-values-parser: 6.0.2(postcss@8.4.32)
+      postcss: 8.4.33
+      postcss-values-parser: 6.0.2(postcss@8.4.33)
     dev: true
 
   /detective-sass@3.0.2:
@@ -11558,7 +11558,7 @@ packages:
       uniq: 1.0.1
     dev: true
 
-  /postcss-values-parser@6.0.2(postcss@8.4.32):
+  /postcss-values-parser@6.0.2(postcss@8.4.33):
     resolution: {integrity: sha512-YLJpK0N1brcNJrs9WatuJFtHaV9q5aAOj+S4DI5S7jgHlRfm0PIbDCAFRYMQD5SHq7Fy6xsDhyutgS0QOAs0qw==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -11566,19 +11566,10 @@ packages:
     dependencies:
       color-name: 1.1.4
       is-url-superb: 4.0.0
-      postcss: 8.4.32
+      postcss: 8.4.33
       quote-unquote: 1.0.0
     dev: true
 
-  /postcss@8.4.32:
-    resolution: {integrity: sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==}
-    engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: 3.3.7
-      picocolors: 1.0.0
-      source-map-js: 1.0.2
-    dev: true
-
   /postcss@8.4.33:
     resolution: {integrity: sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==}
     engines: {node: ^10 || ^12 || >=14}
@@ -13824,15 +13815,15 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
-  /vite-plugin-css-injected-by-js@3.3.1(vite@5.0.11):
+  /vite-plugin-css-injected-by-js@3.3.1(vite@5.0.12):
     resolution: {integrity: sha512-PjM/X45DR3/V1K1fTRs8HtZHEQ55kIfdrn+dzaqNBFrOYO073SeSNCxp4j7gSYhV9NffVHaEnOL4myoko0ePAg==}
     peerDependencies:
       vite: '>2.0.0-0'
     dependencies:
-      vite: 5.0.11(@types/node@20.11.5)
+      vite: 5.0.12(@types/node@20.11.5)
     dev: true
 
-  /vite-plugin-dts@3.7.1(@types/node@20.11.5)(typescript@5.3.3)(vite@5.0.11):
+  /vite-plugin-dts@3.7.1(@types/node@20.11.5)(typescript@5.3.3)(vite@5.0.12):
     resolution: {integrity: sha512-VZJckNFpVfRAkmOxhGT5OgTUVWVXxkNQqLpBUuiNGAr9HbtvmvsPLo2JB3Xhn+o/Z9+CT6YZfYa4bX9SGR5hNw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -13848,7 +13839,7 @@ packages:
       debug: 4.3.4
       kolorist: 1.8.0
       typescript: 5.3.3
-      vite: 5.0.11(@types/node@20.11.5)
+      vite: 5.0.12(@types/node@20.11.5)
       vue-tsc: 1.8.27(typescript@5.3.3)
     transitivePeerDependencies:
       - '@types/node'
@@ -13856,7 +13847,7 @@ packages:
       - supports-color
     dev: true
 
-  /vite-plugin-eslint@1.8.1(eslint@8.56.0)(vite@5.0.11):
+  /vite-plugin-eslint@1.8.1(eslint@8.56.0)(vite@5.0.12):
     resolution: {integrity: sha512-PqdMf3Y2fLO9FsNPmMX+//2BF5SF8nEWspZdgl4kSt7UvHDRHVVfHvxsD7ULYzZrJDGRxR81Nq7TOFgwMnUang==}
     peerDependencies:
       eslint: '>=7'
@@ -13866,10 +13857,10 @@ packages:
       '@types/eslint': 8.56.0
       eslint: 8.56.0
       rollup: 2.79.1
-      vite: 5.0.11(@types/node@20.11.5)
+      vite: 5.0.12(@types/node@20.11.5)
     dev: true
 
-  /vite-tsconfig-paths@4.3.1(typescript@5.3.3)(vite@5.0.11):
+  /vite-tsconfig-paths@4.3.1(typescript@5.3.3)(vite@5.0.12):
     resolution: {integrity: sha512-cfgJwcGOsIxXOLU/nELPny2/LUD/lcf1IbfyeKTv2bsupVbTH/xpFtdQlBmIP1GEK2CjjLxYhFfB+QODFAx5aw==}
     peerDependencies:
       vite: '*'
@@ -13880,14 +13871,14 @@ packages:
       debug: 4.3.4
       globrex: 0.1.2
       tsconfck: 3.0.1(typescript@5.3.3)
-      vite: 5.0.11(@types/node@20.11.5)
+      vite: 5.0.12(@types/node@20.11.5)
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: true
 
-  /vite@5.0.11(@types/node@20.11.5):
-    resolution: {integrity: sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==}
+  /vite@5.0.12(@types/node@20.11.5):
+    resolution: {integrity: sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:

From 1e855f829014f5bbe5d0d724de4b762261bfe4d9 Mon Sep 17 00:00:00 2001
From: Wubbbi <clari.skyrim63@gmail.com>
Date: Wed, 31 Jan 2024 05:54:56 +0100
Subject: [PATCH 081/133] Update safetensors and transformers to their latest
 versions (#5562)

* Update Safetensors to the lastest version

* Update Transformers while at it

* Update transformers again
---
 pyproject.toml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pyproject.toml b/pyproject.toml
index 10536e0c15..11c0e60dad 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -46,13 +46,13 @@ dependencies = [
   "onnxruntime==1.16.3",
   "opencv-python==4.9.0.80",
   "pytorch-lightning==2.1.3",
-  "safetensors==0.4.1",
+  "safetensors==0.4.2",
   "timm==0.6.13",               # needed to override timm latest in controlnet_aux, see  https://github.com/isl-org/ZoeDepth/issues/26
   "torch==2.1.2",
   "torchmetrics==0.11.4",
   "torchsde==0.2.6",
   "torchvision==0.16.2",
-  "transformers==4.37.0",
+  "transformers==4.37.2",
 
   # Core application dependencies, pinned for reproducible builds.
   "fastapi-events==0.10.0",

From 0d4de4cc632311f90b563fa63c94ac5dc2763632 Mon Sep 17 00:00:00 2001
From: Rohinish <92542124+rohinish404@users.noreply.github.com>
Date: Wed, 31 Jan 2024 10:27:16 +0530
Subject: [PATCH 082/133] changed hotkeys (#5542)

Adds adds ctrl/meta + scroll to change brush size on canvas.

* changed hotkeys

* new hotkey as an additional

* lint fixed"

* added ctrl scroll and removed hotkey

* using

* added fix

* feedbck_changes

* brush size change logic

* feat(ui): also check for meta key when modifying brush size

* feat(ui): add comment linking to where brush size algo was determined

---------

Co-authored-by: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
---
 .../features/canvas/hooks/useCanvasZoom.ts    | 71 +++++++++++--------
 1 file changed, 43 insertions(+), 28 deletions(-)

diff --git a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasZoom.ts b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasZoom.ts
index fbcc133f7f..bb1a90c50f 100644
--- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasZoom.ts
+++ b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasZoom.ts
@@ -1,7 +1,8 @@
+import { $ctrl, $meta } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { $isMoveStageKeyHeld } from 'features/canvas/store/canvasNanostore';
-import { setStageCoordinates, setStageScale } from 'features/canvas/store/canvasSlice';
+import { setBrushSize, setStageCoordinates, setStageScale } from 'features/canvas/store/canvasSlice';
 import { CANVAS_SCALE_BY, MAX_CANVAS_SCALE, MIN_CANVAS_SCALE } from 'features/canvas/util/constants';
 import type Konva from 'konva';
 import type { KonvaEventObject } from 'konva/lib/Node';
@@ -13,6 +14,7 @@ const useCanvasWheel = (stageRef: MutableRefObject<Konva.Stage | null>) => {
   const dispatch = useAppDispatch();
   const stageScale = useAppSelector((s) => s.canvas.stageScale);
   const isMoveStageKeyHeld = useStore($isMoveStageKeyHeld);
+  const brushSize = useAppSelector((s) => s.canvas.brushSize);
 
   return useCallback(
     (e: KonvaEventObject<WheelEvent>) => {
@@ -23,36 +25,49 @@ const useCanvasWheel = (stageRef: MutableRefObject<Konva.Stage | null>) => {
 
       e.evt.preventDefault();
 
-      const cursorPos = stageRef.current.getPointerPosition();
+      // checking for ctrl key is pressed or not,
+      // so that brush size can be controlled using ctrl + scroll up/down
 
-      if (!cursorPos) {
-        return;
+      if ($ctrl.get() || $meta.get()) {
+        // This equation was derived by fitting a curve to the desired brush sizes and deltas
+        // see https://github.com/invoke-ai/InvokeAI/pull/5542#issuecomment-1915847565
+        const targetDelta = Math.sign(e.evt.deltaY) * 0.7363 * Math.pow(1.0394, brushSize);
+        // This needs to be clamped to prevent the delta from getting too large
+        const finalDelta = clamp(targetDelta, -20, 20);
+        // The new brush size is also clamped to prevent it from getting too large or small
+        const newBrushSize = clamp(brushSize + finalDelta, 1, 500);
+
+        dispatch(setBrushSize(newBrushSize));
+      } else {
+        const cursorPos = stageRef.current.getPointerPosition();
+        let delta = e.evt.deltaY;
+
+        if (!cursorPos) {
+          return;
+        }
+
+        const mousePointTo = {
+          x: (cursorPos.x - stageRef.current.x()) / stageScale,
+          y: (cursorPos.y - stageRef.current.y()) / stageScale,
+        };
+        // when we zoom on trackpad, e.evt.ctrlKey is true
+        // in that case lets revert direction
+        if (e.evt.ctrlKey) {
+          delta = -delta;
+        }
+
+        const newScale = clamp(stageScale * CANVAS_SCALE_BY ** delta, MIN_CANVAS_SCALE, MAX_CANVAS_SCALE);
+
+        const newCoordinates = {
+          x: cursorPos.x - mousePointTo.x * newScale,
+          y: cursorPos.y - mousePointTo.y * newScale,
+        };
+
+        dispatch(setStageScale(newScale));
+        dispatch(setStageCoordinates(newCoordinates));
       }
-
-      const mousePointTo = {
-        x: (cursorPos.x - stageRef.current.x()) / stageScale,
-        y: (cursorPos.y - stageRef.current.y()) / stageScale,
-      };
-
-      let delta = e.evt.deltaY;
-
-      // when we zoom on trackpad, e.evt.ctrlKey is true
-      // in that case lets revert direction
-      if (e.evt.ctrlKey) {
-        delta = -delta;
-      }
-
-      const newScale = clamp(stageScale * CANVAS_SCALE_BY ** delta, MIN_CANVAS_SCALE, MAX_CANVAS_SCALE);
-
-      const newCoordinates = {
-        x: cursorPos.x - mousePointTo.x * newScale,
-        y: cursorPos.y - mousePointTo.y * newScale,
-      };
-
-      dispatch(setStageScale(newScale));
-      dispatch(setStageCoordinates(newCoordinates));
     },
-    [stageRef, isMoveStageKeyHeld, stageScale, dispatch]
+    [stageRef, isMoveStageKeyHeld, stageScale, dispatch, brushSize]
   );
 };
 

From f70c0936ca9ee1697be99d2cbd1967fc842a605c Mon Sep 17 00:00:00 2001
From: Josh Corbett <joshwcorbett@icloud.com>
Date: Tue, 30 Jan 2024 22:50:03 -0700
Subject: [PATCH 083/133] feat: :sparkles: disable/enable LoRas with a switch
 (#5591)

* feat: :sparkles: disable/enable LorRas with a switch

* feat: :sparkles: visually display previous weight when disabled

* style: :rotating_light: linting

* feat: :sparkles: lora badge count reflects active loras

* style: :rotating_light: linting

* feat: :sparkles: track disabled lora on state instead of weight

* style: :rotating_light: linting

* feat: :sparkles: it all works now

tracking isEnabled on lora state, disabled slider when disabled, removed disabled loras from graph, updated badge counting and renamed lora add function

* style: :rotating_light: linting

* fix: :bug: enabledLoRAs filter nullish coalescing

* refactor: :art: minor changes

renamed lora toggle action, removed errent comment, removed extraneous type annotation

* style: :rotating_light: linting
---
 .../src/features/lora/components/LoRACard.tsx | 35 +++++++++++++------
 .../web/src/features/lora/store/loraSlice.ts  | 23 ++++++++++--
 .../nodes/util/graph/addLoRAsToGraph.ts       |  8 ++---
 .../GenerationSettingsAccordion.tsx           |  5 +--
 4 files changed, 51 insertions(+), 20 deletions(-)

diff --git a/invokeai/frontend/web/src/features/lora/components/LoRACard.tsx b/invokeai/frontend/web/src/features/lora/components/LoRACard.tsx
index f0c8e3fcd3..caedde875a 100644
--- a/invokeai/frontend/web/src/features/lora/components/LoRACard.tsx
+++ b/invokeai/frontend/web/src/features/lora/components/LoRACard.tsx
@@ -4,12 +4,14 @@ import {
   CardHeader,
   CompositeNumberInput,
   CompositeSlider,
+  Flex,
   IconButton,
+  Switch,
   Text,
 } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import type { LoRA } from 'features/lora/store/loraSlice';
-import { loraRemoved, loraWeightChanged } from 'features/lora/store/loraSlice';
+import { loraIsEnabledChanged, loraRemoved, loraWeightChanged } from 'features/lora/store/loraSlice';
 import { memo, useCallback } from 'react';
 import { PiTrashSimpleBold } from 'react-icons/pi';
 
@@ -28,6 +30,10 @@ export const LoRACard = memo((props: LoRACardProps) => {
     [dispatch, lora.id]
   );
 
+  const handleSetLoraToggle = useCallback(() => {
+    dispatch(loraIsEnabledChanged({ id: lora.id, isEnabled: !lora.isEnabled }));
+  }, [dispatch, lora.id, lora.isEnabled]);
+
   const handleRemoveLora = useCallback(() => {
     dispatch(loraRemoved(lora.id));
   }, [dispatch, lora.id]);
@@ -35,16 +41,21 @@ export const LoRACard = memo((props: LoRACardProps) => {
   return (
     <Card variant="lora">
       <CardHeader>
-        <Text noOfLines={1} wordBreak="break-all" color="base.200">
-          {lora.model_name}
-        </Text>
-        <IconButton
-          aria-label="Remove LoRA"
-          variant="ghost"
-          size="sm"
-          onClick={handleRemoveLora}
-          icon={<PiTrashSimpleBold />}
-        />
+        <Flex alignItems="center" justifyContent="space-between" width="100%" gap={2}>
+          <Text noOfLines={1} wordBreak="break-all" color={lora.isEnabled ? 'base.200' : 'base.500'}>
+            {lora.model_name}
+          </Text>
+          <Flex alignItems="center" gap={2}>
+            <Switch size="sm" onChange={handleSetLoraToggle} isChecked={lora.isEnabled} />
+            <IconButton
+              aria-label="Remove LoRA"
+              variant="ghost"
+              size="sm"
+              onClick={handleRemoveLora}
+              icon={<PiTrashSimpleBold />}
+            />
+          </Flex>
+        </Flex>
       </CardHeader>
       <CardBody>
         <CompositeSlider
@@ -55,6 +66,7 @@ export const LoRACard = memo((props: LoRACardProps) => {
           step={0.01}
           marks={marks}
           defaultValue={0.75}
+          isDisabled={!lora.isEnabled}
         />
         <CompositeNumberInput
           value={lora.weight}
@@ -65,6 +77,7 @@ export const LoRACard = memo((props: LoRACardProps) => {
           w={20}
           flexShrink={0}
           defaultValue={0.75}
+          isDisabled={!lora.isEnabled}
         />
       </CardBody>
     </Card>
diff --git a/invokeai/frontend/web/src/features/lora/store/loraSlice.ts b/invokeai/frontend/web/src/features/lora/store/loraSlice.ts
index 8562090fbc..7906443d7f 100644
--- a/invokeai/frontend/web/src/features/lora/store/loraSlice.ts
+++ b/invokeai/frontend/web/src/features/lora/store/loraSlice.ts
@@ -7,10 +7,12 @@ import type { LoRAModelConfigEntity } from 'services/api/endpoints/models';
 export type LoRA = ParameterLoRAModel & {
   id: string;
   weight: number;
+  isEnabled?: boolean;
 };
 
-export const defaultLoRAConfig = {
+export const defaultLoRAConfig: Pick<LoRA, 'weight' | 'isEnabled'> = {
   weight: 0.75,
+  isEnabled: true,
 };
 
 export type LoraState = {
@@ -58,11 +60,26 @@ export const loraSlice = createSlice({
       }
       lora.weight = defaultLoRAConfig.weight;
     },
+    loraIsEnabledChanged: (state, action: PayloadAction<Pick<LoRA, 'id' | 'isEnabled'>>) => {
+      const { id, isEnabled } = action.payload;
+      const lora = state.loras[id];
+      if (!lora) {
+        return;
+      }
+      lora.isEnabled = isEnabled;
+    },
   },
 });
 
-export const { loraAdded, loraRemoved, loraWeightChanged, loraWeightReset, lorasCleared, loraRecalled } =
-  loraSlice.actions;
+export const {
+  loraAdded,
+  loraRemoved,
+  loraWeightChanged,
+  loraWeightReset,
+  loraIsEnabledChanged,
+  lorasCleared,
+  loraRecalled,
+} = loraSlice.actions;
 
 export default loraSlice.reducer;
 
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addLoRAsToGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addLoRAsToGraph.ts
index d1b5ddde84..3ed71b7529 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/addLoRAsToGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/addLoRAsToGraph.ts
@@ -1,5 +1,5 @@
 import type { RootState } from 'app/store/store';
-import { forEach, size } from 'lodash-es';
+import { filter, size } from 'lodash-es';
 import type { CoreMetadataInvocation, LoraLoaderInvocation, NonNullableGraph } from 'services/api/types';
 
 import {
@@ -28,8 +28,8 @@ export const addLoRAsToGraph = (
    * So we need to inject a LoRA chain into the graph.
    */
 
-  const { loras } = state.lora;
-  const loraCount = size(loras);
+  const enabledLoRAs = filter(state.lora.loras, (l) => l.isEnabled ?? false);
+  const loraCount = size(enabledLoRAs);
 
   if (loraCount === 0) {
     return;
@@ -47,7 +47,7 @@ export const addLoRAsToGraph = (
   let currentLoraIndex = 0;
   const loraMetadata: CoreMetadataInvocation['loras'] = [];
 
-  forEach(loras, (lora) => {
+  enabledLoRAs.forEach((lora) => {
     const { model_name, base_model, weight } = lora;
     const currentLoraNodeId = `${LORA_LOADER}_${model_name.replace('.', '_')}`;
 
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx
index d641ea9929..ea6fd3563d 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx
@@ -23,7 +23,7 @@ import ParamMainModelSelect from 'features/parameters/components/MainModel/Param
 import { selectGenerationSlice } from 'features/parameters/store/generationSlice';
 import { useExpanderToggle } from 'features/settingsAccordions/hooks/useExpanderToggle';
 import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle';
-import { size } from 'lodash-es';
+import { filter, size } from 'lodash-es';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -32,7 +32,8 @@ const formLabelProps: FormLabelProps = {
 };
 
 const badgesSelector = createMemoizedSelector(selectLoraSlice, selectGenerationSlice, (lora, generation) => {
-  const loraTabBadges = size(lora.loras) ? [size(lora.loras)] : [];
+  const enabledLoRAsCount = filter(lora.loras, (l) => !!l.isEnabled).length;
+  const loraTabBadges = size(lora.loras) ? [enabledLoRAsCount] : [];
   const accordionBadges: (string | number)[] = [];
   if (generation.model) {
     accordionBadges.push(generation.model.model_name);

From 4602efd59877e1dcce6cd08097ee735364bcc5e1 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 31 Jan 2024 21:51:57 +1100
Subject: [PATCH 084/133] feat: add profiler util (#5601)

* feat(config): add profiling config settings

- `profile_graphs` enables graph profiling with cProfile
- `profiles_dir` sets the output for profiles

* feat(nodes): add Profiler util

Simple wrapper around cProfile.

* feat(nodes): use Profiler in invocation processor

* scripts: add generate_profile_graphs.sh script

Helper to generate graphs for profiles.

* pkg: add snakeviz and gprof2dot to dev deps

These are useful for profiling.

* tests: add tests for profiler util

* fix(profiler): handle previous profile not stopped cleanly

* feat(profiler): add profile_prefix config setting

The prefix is used when writing profile output files. Useful to organise profiles into sessions.

* tidy(profiler): add `_` to private API

* feat(profiler): simplify API

* feat(profiler): use child logger for profiler logs

* chore(profiler): update docstrings

* feat(profiler): stop() returns output path

* chore(profiler): fix docstring

* tests(profiler): update tests

* chore: ruff
---
 .../app/services/config/config_default.py     |  9 +++
 .../invocation_processor_default.py           | 19 +++++-
 invokeai/app/util/profiler.py                 | 67 +++++++++++++++++++
 pyproject.toml                                |  2 +-
 scripts/generate_profile_graphs.sh            | 27 ++++++++
 tests/test_profiler.py                        | 53 +++++++++++++++
 6 files changed, 175 insertions(+), 2 deletions(-)
 create mode 100644 invokeai/app/util/profiler.py
 create mode 100755 scripts/generate_profile_graphs.sh
 create mode 100644 tests/test_profiler.py

diff --git a/invokeai/app/services/config/config_default.py b/invokeai/app/services/config/config_default.py
index 83a831524d..3af906bd04 100644
--- a/invokeai/app/services/config/config_default.py
+++ b/invokeai/app/services/config/config_default.py
@@ -251,7 +251,11 @@ class InvokeAIAppConfig(InvokeAISettings):
     log_level           : Literal["debug", "info", "warning", "error", "critical"] = Field(default="info", description="Emit logging messages at this level or  higher", json_schema_extra=Categories.Logging)
     log_sql             : bool = Field(default=False, description="Log SQL queries", json_schema_extra=Categories.Logging)
 
+    # Development
     dev_reload          : bool = Field(default=False, description="Automatically reload when Python sources are changed.", json_schema_extra=Categories.Development)
+    profile_graphs      : bool = Field(default=False, description="Enable graph profiling", json_schema_extra=Categories.Development)
+    profile_prefix      : Optional[str] = Field(default=None, description="An optional prefix for profile output files.", json_schema_extra=Categories.Development)
+    profiles_dir        : Path = Field(default=Path('profiles'), description="Directory for graph profiles", json_schema_extra=Categories.Development)
 
     version             : bool = Field(default=False, description="Show InvokeAI version and exit", json_schema_extra=Categories.Other)
 
@@ -449,6 +453,11 @@ class InvokeAIAppConfig(InvokeAISettings):
         disabled_in_config = not self.xformers_enabled
         return disabled_in_config and self.attention_type != "xformers"
 
+    @property
+    def profiles_path(self) -> Path:
+        """Path to the graph profiles directory."""
+        return self._resolve(self.profiles_dir)
+
     @staticmethod
     def find_root() -> Path:
         """Choose the runtime root directory when not specified on command line or init file."""
diff --git a/invokeai/app/services/invocation_processor/invocation_processor_default.py b/invokeai/app/services/invocation_processor/invocation_processor_default.py
index 09608dca2b..1cfb0c1822 100644
--- a/invokeai/app/services/invocation_processor/invocation_processor_default.py
+++ b/invokeai/app/services/invocation_processor/invocation_processor_default.py
@@ -6,6 +6,7 @@ from typing import Optional
 import invokeai.backend.util.logging as logger
 from invokeai.app.invocations.baseinvocation import InvocationContext
 from invokeai.app.services.invocation_queue.invocation_queue_common import InvocationQueueItem
+from invokeai.app.util.profiler import Profiler
 
 from ..invoker import Invoker
 from .invocation_processor_base import InvocationProcessorABC
@@ -18,7 +19,7 @@ class DefaultInvocationProcessor(InvocationProcessorABC):
     __invoker: Invoker
     __threadLimit: BoundedSemaphore
 
-    def start(self, invoker) -> None:
+    def start(self, invoker: Invoker) -> None:
         # if we do want multithreading at some point, we could make this configurable
         self.__threadLimit = BoundedSemaphore(1)
         self.__invoker = invoker
@@ -39,6 +40,16 @@ class DefaultInvocationProcessor(InvocationProcessorABC):
             self.__threadLimit.acquire()
             queue_item: Optional[InvocationQueueItem] = None
 
+            profiler = (
+                Profiler(
+                    logger=self.__invoker.services.logger,
+                    output_dir=self.__invoker.services.configuration.profiles_path,
+                    prefix=self.__invoker.services.configuration.profile_prefix,
+                )
+                if self.__invoker.services.configuration.profile_graphs
+                else None
+            )
+
             while not stop_event.is_set():
                 try:
                     queue_item = self.__invoker.services.queue.get()
@@ -49,6 +60,10 @@ class DefaultInvocationProcessor(InvocationProcessorABC):
                     # do not hammer the queue
                     time.sleep(0.5)
                     continue
+
+                if profiler and profiler.profile_id != queue_item.graph_execution_state_id:
+                    profiler.start(profile_id=queue_item.graph_execution_state_id)
+
                 try:
                     graph_execution_state = self.__invoker.services.graph_execution_manager.get(
                         queue_item.graph_execution_state_id
@@ -201,6 +216,8 @@ class DefaultInvocationProcessor(InvocationProcessorABC):
                         queue_id=queue_item.session_queue_id,
                         graph_execution_state_id=graph_execution_state.id,
                     )
+                    if profiler:
+                        profiler.stop()
 
         except KeyboardInterrupt:
             pass  # Log something? KeyboardInterrupt is probably not going to be seen by the processor
diff --git a/invokeai/app/util/profiler.py b/invokeai/app/util/profiler.py
new file mode 100644
index 0000000000..d1ce126b04
--- /dev/null
+++ b/invokeai/app/util/profiler.py
@@ -0,0 +1,67 @@
+import cProfile
+from logging import Logger
+from pathlib import Path
+from typing import Optional
+
+
+class Profiler:
+    """
+    Simple wrapper around cProfile.
+
+    Usage
+    ```
+      # Create a profiler
+      profiler = Profiler(logger, output_dir, "sql_query_perf")
+      # Start a new profile
+      profiler.start("my_profile")
+      # Do stuff
+      profiler.stop()
+    ```
+
+    Visualize a profile as a flamegraph with [snakeviz](https://jiffyclub.github.io/snakeviz/)
+    ```sh
+      snakeviz my_profile.prof
+    ```
+
+    Visualize a profile as directed graph with [graphviz](https://graphviz.org/download/) & [gprof2dot](https://github.com/jrfonseca/gprof2dot)
+    ```sh
+      gprof2dot -f pstats my_profile.prof | dot -Tpng -o my_profile.png
+      # SVG or PDF may be nicer - you can search for function names
+      gprof2dot -f pstats my_profile.prof | dot -Tsvg -o my_profile.svg
+      gprof2dot -f pstats my_profile.prof | dot -Tpdf -o my_profile.pdf
+    ```
+    """
+
+    def __init__(self, logger: Logger, output_dir: Path, prefix: Optional[str] = None) -> None:
+        self._logger = logger.getChild(f"profiler.{prefix}" if prefix else "profiler")
+        self._output_dir = output_dir
+        self._output_dir.mkdir(parents=True, exist_ok=True)
+        self._profiler: Optional[cProfile.Profile] = None
+        self._prefix = prefix
+
+        self.profile_id: Optional[str] = None
+
+    def start(self, profile_id: str) -> None:
+        if self._profiler:
+            self.stop()
+
+        self.profile_id = profile_id
+
+        self._profiler = cProfile.Profile()
+        self._profiler.enable()
+        self._logger.info(f"Started profiling {self.profile_id}.")
+
+    def stop(self) -> Path:
+        if not self._profiler:
+            raise RuntimeError("Profiler not initialized. Call start() first.")
+        self._profiler.disable()
+
+        filename = f"{self._prefix}_{self.profile_id}.prof" if self._prefix else f"{self.profile_id}.prof"
+        path = Path(self._output_dir, filename)
+
+        self._profiler.dump_stats(path)
+        self._logger.info(f"Stopped profiling, profile dumped to {path}.")
+        self._profiler = None
+        self.profile_id = None
+
+        return path
diff --git a/pyproject.toml b/pyproject.toml
index 11c0e60dad..b96a6756f3 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -109,7 +109,7 @@ dependencies = [
   "mkdocs-git-revision-date-localized-plugin",
   "mkdocs-redirects==1.2.0",
 ]
-"dev" = ["jurigged", "pudb"]
+"dev" = ["jurigged", "pudb", "snakeviz", "gprof2dot"]
 "test" = [
   "ruff==0.1.11",
   "ruff-lsp",
diff --git a/scripts/generate_profile_graphs.sh b/scripts/generate_profile_graphs.sh
new file mode 100755
index 0000000000..fa6cd9c103
--- /dev/null
+++ b/scripts/generate_profile_graphs.sh
@@ -0,0 +1,27 @@
+#!/bin/bash
+
+# Accepts a path to a directory containing .prof files and generates a graphs
+# for each of them. The default output format is pdf, but can be changed by
+# providing a second argument.
+
+# Usage: ./generate_profile_graphs.sh <path_to_profiles> <type>
+# <path_to_profiles> is the path to the directory containing the .prof files
+# <type> is the type of graph to generate. Defaults to 'pdf' if not provided.
+# Valid types are: 'svg', 'png' and 'pdf'.
+
+# Requires:
+# - graphviz: https://graphviz.org/download/
+# - gprof2dot: https://github.com/jrfonseca/gprof2dot
+
+if [ -z "$1" ]; then
+  echo "Missing path to profiles directory"
+  exit 1
+fi
+
+type=${2:-pdf}
+
+for file in $1/*.prof; do
+  base_name=$(basename "$file" .prof)
+  gprof2dot -f pstats "$file" | dot -T$type -Glabel="Session ID ${base_name}" -Glabelloc="t" -o "$1/$base_name.$type"
+  echo "Generated $1/$base_name.$type"
+done
diff --git a/tests/test_profiler.py b/tests/test_profiler.py
new file mode 100644
index 0000000000..ab152e1a2b
--- /dev/null
+++ b/tests/test_profiler.py
@@ -0,0 +1,53 @@
+import re
+from logging import Logger
+from pathlib import Path
+from tempfile import TemporaryDirectory
+
+import pytest
+
+from invokeai.app.util.profiler import Profiler
+
+
+def test_profiler_starts():
+    with TemporaryDirectory() as tempdir:
+        profiler = Profiler(logger=Logger("test_profiler"), output_dir=Path(tempdir))
+        assert not profiler._profiler
+        assert not profiler.profile_id
+        profiler.start("test")
+        assert profiler._profiler
+        assert profiler.profile_id == "test"
+        profiler.stop()
+        assert not profiler._profiler
+        assert not profiler.profile_id
+        profiler.start("test2")
+        assert profiler._profiler
+        assert profiler.profile_id == "test2"
+        profiler.stop()
+
+
+def test_profiler_profiles():
+    with TemporaryDirectory() as tempdir:
+        profiler = Profiler(logger=Logger("test_profiler"), output_dir=Path(tempdir))
+        profiler.start("test")
+        for _ in range(1000000):
+            pass
+        profiler.stop()
+        assert (Path(tempdir) / "test.prof").exists()
+
+
+def test_profiler_profiles_with_prefix():
+    with TemporaryDirectory() as tempdir:
+        profiler = Profiler(logger=Logger("test_profiler"), output_dir=Path(tempdir), prefix="prefix")
+        profiler.start("test")
+        for _ in range(1000000):
+            pass
+        profiler.stop()
+        assert (Path(tempdir) / "prefix_test.prof").exists()
+
+
+def test_profile_fails_if_not_set_up():
+    with TemporaryDirectory() as tempdir:
+        profiler = Profiler(logger=Logger("test_profiler"), output_dir=Path(tempdir))
+        match = re.escape("Profiler not initialized. Call start() first.")
+        with pytest.raises(RuntimeError, match=match):
+            profiler.stop()

From 8c6b3efd39edf51e8e07b3e48e5d310e4abbf847 Mon Sep 17 00:00:00 2001
From: Thomas Mello <work.mello@gmail.com>
Date: Wed, 31 Jan 2024 04:16:15 +0300
Subject: [PATCH 085/133] fix(ui): remove hard reset of cursor on canvas during
 state reset

Remove resetting cursor when resetting state letting event handlers to take care of presentation
---
 .../frontend/web/src/features/canvas/store/canvasNanostore.ts   | 2 --
 1 file changed, 2 deletions(-)

diff --git a/invokeai/frontend/web/src/features/canvas/store/canvasNanostore.ts b/invokeai/frontend/web/src/features/canvas/store/canvasNanostore.ts
index 81ed62addf..f971886d5e 100644
--- a/invokeai/frontend/web/src/features/canvas/store/canvasNanostore.ts
+++ b/invokeai/frontend/web/src/features/canvas/store/canvasNanostore.ts
@@ -22,7 +22,6 @@ export const $isModifyingBoundingBox = computed(
 export const resetCanvasInteractionState = () => {
   $cursorPosition.set(null);
   $isDrawing.set(false);
-  $isMouseOverBoundingBox.set(false);
   $isMoveBoundingBoxKeyHeld.set(false);
   $isMoveStageKeyHeld.set(false);
   $isMovingBoundingBox.set(false);
@@ -31,7 +30,6 @@ export const resetCanvasInteractionState = () => {
 
 export const resetToolInteractionState = () => {
   $isTransformingBoundingBox.set(false);
-  $isMouseOverBoundingBox.set(false);
   $isMovingBoundingBox.set(false);
   $isMovingStage.set(false);
 };

From 6aceae5c22f2fd4fed709e3f67cba9809c2b90d7 Mon Sep 17 00:00:00 2001
From: Riccardo Giovanetti <riccardo.giovanetti@gmail.com>
Date: Wed, 31 Jan 2024 10:01:57 +0100
Subject: [PATCH 086/133] translationBot(ui): update translation (Italian)

Currently translated at 97.2% (1388 of 1427 strings)

Co-authored-by: Riccardo Giovanetti <riccardo.giovanetti@gmail.com>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/it/
Translation: InvokeAI/Web UI
---
 invokeai/frontend/web/public/locales/it.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/public/locales/it.json b/invokeai/frontend/web/public/locales/it.json
index c7ba4b782b..c363ba1faf 100644
--- a/invokeai/frontend/web/public/locales/it.json
+++ b/invokeai/frontend/web/public/locales/it.json
@@ -125,7 +125,8 @@
         "localSystem": "Sistema locale",
         "green": "Verde",
         "blue": "Blu",
-        "alpha": "Alfa"
+        "alpha": "Alfa",
+        "copy": "Copia"
     },
     "gallery": {
         "generations": "Generazioni",

From 191203ea0c457939576bc1788b6452d3d31172a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ufuk=20Sarp=20Sel=C3=A7ok?= <ilkel@live.com>
Date: Wed, 31 Jan 2024 10:01:57 +0100
Subject: [PATCH 087/133] translationBot(ui): update translation (Turkish)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Currently translated at 36.1% (516 of 1427 strings)

Co-authored-by: Ufuk Sarp Selçok <ilkel@live.com>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/tr/
Translation: InvokeAI/Web UI
---
 invokeai/frontend/web/public/locales/tr.json | 446 ++++++++++++++++---
 1 file changed, 381 insertions(+), 65 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/tr.json b/invokeai/frontend/web/public/locales/tr.json
index 77f13f291d..7bb9985e77 100644
--- a/invokeai/frontend/web/public/locales/tr.json
+++ b/invokeai/frontend/web/public/locales/tr.json
@@ -1,10 +1,10 @@
 {
     "accessibility": {
-        "invokeProgressBar": "Invoke ilerleme durumu",
-        "nextImage": "Sonraki İmaj",
+        "invokeProgressBar": "Invoke durum çubuğu",
+        "nextImage": "Sonraki Görsel",
         "useThisParameter": "Bu ayarları kullan",
-        "copyMetadataJson": "Metadata verilerini kopyala (JSON)",
-        "exitViewer": "Görüntüleme Modundan Çık",
+        "copyMetadataJson": "Üstveriyi kopyala (JSON)",
+        "exitViewer": "Görüntüleyiciden Çık",
         "zoomIn": "Yakınlaştır",
         "zoomOut": "Uzaklaştır",
         "rotateCounterClockwise": "Saat yönünün tersine döndür",
@@ -17,8 +17,8 @@
         "showOptionsPanel": "Yan Paneli Göster",
         "modelSelect": "Model Seçimi",
         "reset": "Resetle",
-        "uploadImage": "İmaj Yükle",
-        "previousImage": "Önceki İmaj",
+        "uploadImage": "Görsel Yükle",
+        "previousImage": "Önceki Görsel",
         "menu": "Menü",
         "about": "Hakkında",
         "mode": "Kip",
@@ -48,18 +48,18 @@
         "langSimplifiedChinese": "Çince (Basit)",
         "langUkranian": "Ukraynaca",
         "langSpanish": "İspanyolca",
-        "txt2img": "Yazıdan İmaj",
-        "img2img": "İmajdan İmaj",
+        "txt2img": "Yazıdan Görsel",
+        "img2img": "Görselden Görsel",
         "linear": "Doğrusal",
-        "nodes": "İş Akış Düzenleyici",
+        "nodes": "İş Akışı Düzenleyici",
         "postprocessing": "Rötuş",
         "postProcessing": "Rötuş",
         "postProcessDesc2": "Daha gelişmiş iş akışlarına olanak sağlayacak özel bir arayüz yakında yayınlanacaktır.",
-        "postProcessDesc3": "Invoke AI Komut Satırı Arayüzü, Embiggen dahil birçok yeni özellik sunmaktadır.",
+        "postProcessDesc3": "Invoke AI Komut Satırı Arayüzü, içlerinde Embiggen da bulunan birçok özellik sunmaktadır.",
         "langKorean": "Korece",
-        "unifiedCanvas": "Akıllı Tuval",
-        "nodesDesc": "İmaj oluşturmak için hazırladığımız çizge tabanlı sistem şu an geliştirme aşamasındadır. Bu harika özellik hakkındaki gelişmeler için bizi takip etmeye devam edin.",
-        "postProcessDesc1": "Invoke AI birçok rötuş (post-process) aracı sağlar. İmaj büyütme ve yüz iyileştirme halihazırda WebUI üzerinden kullanılabilir. Bunlara Yazıdan İmaj ve İmajdan İmaj sekmelerindeki Gelişmiş Ayarlar menüsünden ulaşabilirsiniz. İsterseniz mevcut görüntü ekranının üzerindeki veya görüntüleyicideki imajı doğrudan üstteki tuşlar yardımıyla düzenleyebilirsiniz.",
+        "unifiedCanvas": "Tuval",
+        "nodesDesc": "Görsel oluşturmaya yardımcı çizge tabanlı sistem şimdilik geliştirme aşamasındadır. Bu süper özellik hakkındaki gelişmeler için kulağınız bizde olsun.",
+        "postProcessDesc1": "Invoke AI birçok rötuş (post-process) aracı sağlar. Görsel büyütme ve yüz iyileştirme WebUI üzerinden kullanıma uygun durumdadır. Bunlara Yazıdan Görsel ve Görselden Görsel sekmelerindeki Gelişmiş Ayarlar menüsünden ulaşabilirsiniz. Ayrıca var olan görseli üzerindeki düğmeler yardımıyla düzenleyebilirsiniz.",
         "batch": "Toplu İş Yöneticisi",
         "accept": "Onayla",
         "cancel": "Vazgeç",
@@ -94,7 +94,7 @@
         "save": "Kaydet",
         "statusMergingModels": "Modeller Birleştiriliyor",
         "statusGenerating": "Oluşturuluyor",
-        "statusGenerationComplete": "Oluşturma Tamamlandı",
+        "statusGenerationComplete": "Oluşturma Bitti",
         "statusGeneratingOutpainting": "Dışboyama Oluşturuluyor",
         "statusLoadingModel": "Model Yükleniyor",
         "random": "Rastgele",
@@ -111,20 +111,20 @@
         "statusRestoringFacesGFPGAN": "Yüzler İyileştiriliyor (GFPGAN)",
         "template": "Şablon",
         "saveAs": "Farklı Kaydet",
-        "statusProcessingComplete": "İşlem Tamamlandı",
-        "statusSavingImage": "İmaj Kaydediliyor",
+        "statusProcessingComplete": "İşlem Bitti",
+        "statusSavingImage": "Görsel Kaydediliyor",
         "somethingWentWrong": "Bir sorun oluştu",
         "statusConvertingModel": "Model Dönüştürülüyor",
         "statusDisconnected": "Bağlantı Kesildi",
         "statusError": "Hata",
-        "statusGeneratingImageToImage": "İmajdan İmaj Oluşturuluyor",
+        "statusGeneratingImageToImage": "Görselden Görsel Oluşturuluyor",
         "statusGeneratingInpainting": "İçboyama Oluşturuluyor",
         "statusRestoringFaces": "Yüzler İyileştiriliyor",
         "statusUpscaling": "Büyütme",
         "statusUpscalingESRGAN": "Büyütme (ESRGAN)",
         "training": "Eğitim",
-        "statusGeneratingTextToImage": "Yazıdan İmaj Oluşturuluyor",
-        "imagePrompt": "Resim İstemi",
+        "statusGeneratingTextToImage": "Yazıdan Görsel Oluşturuluyor",
+        "imagePrompt": "Görsel İstemi",
         "unknown": "Bilinmeyen",
         "green": "Yeşil",
         "red": "Kırmızı",
@@ -137,8 +137,8 @@
         "error": "Hata",
         "generate": "Oluştur",
         "free": "Serbest",
-        "imageFailedToLoad": "İmaj Yüklenemedi",
-        "safetensors": "Safetensor",
+        "imageFailedToLoad": "Görsel Yüklenemedi",
+        "safetensors": "Safetensors",
         "upload": "Yükle",
         "nextPage": "Sonraki Sayfa",
         "prevPage": "Önceki Sayfa",
@@ -147,16 +147,22 @@
         "direction": "Yön",
         "darkMode": "Koyu Tema",
         "unsaved": "Kaydedilmemiş",
-        "unknownError": "Bilinmeyen Hata"
+        "unknownError": "Bilinmeyen Hata",
+        "installed": "Yüklü",
+        "data": "Veri",
+        "input": "Giriş",
+        "copy": "Kopyala",
+        "created": "Yaratma",
+        "updated": "Güncelleme"
     },
     "accordions": {
         "generation": {
             "title": "Oluşturma",
             "modelTab": "Model",
-            "conceptsTab": "Konseptler"
+            "conceptsTab": "Kavramlar"
         },
         "image": {
-            "title": "İmaj"
+            "title": "Görsel"
         },
         "advanced": {
             "title": "Gelişmiş"
@@ -167,7 +173,7 @@
             "infillTab": "Doldurma"
         },
         "control": {
-            "ipTab": "Resim İstemleri"
+            "ipTab": "Görsel İstemleri"
         }
     },
     "boards": {
@@ -179,25 +185,25 @@
         "myBoard": "Panom",
         "selectBoard": "Bir Pano Seç",
         "addBoard": "Pano Ekle",
-        "deleteBoardAndImages": "Panoyu ve İmajları Sil",
+        "deleteBoardAndImages": "Panoyu ve Görselleri Sil",
         "deleteBoardOnly": "Sadece Panoyu Sil",
         "deletedBoardsCannotbeRestored": "Silinen panolar geri getirilemez",
         "menuItemAutoAdd": "Bu panoya otomatik olarak ekle",
         "move": "Taşı",
-        "movingImagesToBoard_one": "{{count}} imajı şu panoya taşı:",
-        "movingImagesToBoard_other": "{{count}} imajı şu panoya taşı:",
+        "movingImagesToBoard_one": "{{count}} görseli şu panoya taşı:",
+        "movingImagesToBoard_other": "{{count}} görseli şu panoya taşı:",
         "noMatching": "Eşleşen pano yok",
         "searchBoard": "Pano Ara...",
-        "topMessage": "Bu pano, şu özelliklerde kullanılan imajlar içeriyor:",
+        "topMessage": "Bu pano, şuralarda kullanılan görseller içeriyor:",
         "downloadBoard": "Panoyu İndir",
         "uncategorized": "Kategorisiz",
         "changeBoard": "Panoyu Değiştir",
-        "bottomMessage": "Bu panoyu ve imajları silmek, bunları kullanan özelliklerin resetlemesine neden olacaktır."
+        "bottomMessage": "Bu panoyu ve görselleri silmek, bunları kullanan özelliklerin resetlemesine neden olacaktır."
     },
     "controlnet": {
         "balanced": "Dengeli",
-        "contentShuffle": "İçerik Karma",
-        "contentShuffleDescription": "İmajın içeriğini karıştırır",
+        "contentShuffle": "İçerik Karıştırma",
+        "contentShuffleDescription": "Görselin içeriğini karıştırır",
         "depthZoe": "Derinlik (Zoe)",
         "depthZoeDescription": "Zoe kullanarak derinlik haritası oluşturma",
         "resizeMode": "Boyutlandırma Kipi",
@@ -216,9 +222,9 @@
         "noneDescription": "Hiçbir işlem uygulanmamış",
         "selectModel": "Model seçin",
         "showAdvanced": "Gelişmiş Ayarları Göster",
-        "controlNetT2IMutexDesc": "$t(common.controlNet) ve $t(common.t2iAdapter)'nün beraber kullanımı henüz desteklenmiyor.",
+        "controlNetT2IMutexDesc": "$t(common.controlNet) ve $t(common.t2iAdapter)'nün birlikte kullanımı şimdilik desteklenmiyor.",
         "canny": "Canny",
-        "colorMapDescription": "İmajdan bir renk haritası oluşturur",
+        "colorMapDescription": "Görselden renk haritası oluşturur",
         "handAndFace": "El ve Yüz",
         "processor": "İşlemci",
         "prompt": "İstem",
@@ -233,26 +239,26 @@
         "cannyDescription": "Canny kenar algılama",
         "fill": "Doldur",
         "highThreshold": "Üst Eşik",
-        "imageResolution": "İmaj Çözünürlüğü",
+        "imageResolution": "Görsel Çözünürlüğü",
         "colorMapTileSize": "Karo Boyutu",
-        "importImageFromCanvas": "Tuvalden İmajı içe Aktar",
+        "importImageFromCanvas": "Tuvaldeki Görseli Al",
         "importMaskFromCanvas": "Tuvalden Maskeyi İçe Aktar",
         "lowThreshold": "Alt Eşik",
         "base": "Taban",
-        "depthAnythingDescription": "Depth Anything tekniği ile derinlik haritası oluşturma"
+        "depthAnythingDescription": "Depth Anything yöntemi ile derinlik haritası oluşturma"
     },
     "queue": {
         "queuedCount": "{{pending}} Sırada",
         "resumeSucceeded": "İşlem Sürdürüldü",
         "openQueue": "Sırayı Göster",
-        "cancelSucceeded": "Öğeden Vazgeçildi",
-        "cancelFailed": "Öğeden Vazgeçmede Sorun",
+        "cancelSucceeded": "İş Geri Çekildi",
+        "cancelFailed": "İşi Geri Çekmede Sorun",
         "prune": "Arındır",
         "pruneTooltip": "{{item_count}} Bitmiş İşi Sil",
         "resumeFailed": "İşlemi Sürdürmede Sorun",
         "pauseFailed": "İşlemi Duraklatmada Sorun",
         "cancelBatchSucceeded": "Toplu İşten Vazgeçildi",
-        "pruneSucceeded": "{{item_count}} Bitmiş İş Sıradan Kaldırıldı",
+        "pruneSucceeded": "{{item_count}} Bitmiş İş Sıradan Silindi",
         "in_progress": "İşleniyor",
         "completed": "Bitti",
         "canceled": "Vazgeçildi",
@@ -269,34 +275,36 @@
         "resume": "Sürdür",
         "queueTotal": "Toplam {{total}}",
         "queueEmpty": "Sıra Boş",
-        "clearQueueAlertDialog": "Sırayı boşaltma tuşu halihazırdaki işlemi durdurur ve sırayı tamamen boşaltır.",
-        "current": "Şu Anki",
+        "clearQueueAlertDialog": "Sırayı boşaltma düğmesi geçerli işlemi durdurur ve sırayı boşaltır.",
+        "current": "Şimdiki",
         "time": "Süre",
         "pause": "Duraklat",
         "pauseTooltip": "İşlemi Duraklat",
         "pruneFailed": "Sırayı Arındırmada Sorun",
-        "clearTooltip": "Vazgeç ve Tüm Öğeleri Sil",
+        "clearTooltip": "Vazgeç ve Tüm İşleri Sil",
         "clear": "Boşalt",
         "cancelBatchFailed": "Toplu İşten Vazgeçmede Sorun",
         "next": "Sonraki",
         "status": "Durum",
         "failed": "Başarısız",
-        "item": "Öğe",
+        "item": "İş",
         "enqueueing": "Toplu İş Sıraya Alınıyor",
         "pauseSucceeded": "İşlem Duraklatıldı",
         "cancel": "Vazgeç",
-        "cancelTooltip": "Şu Anki Öğeden Vazgeç",
+        "cancelTooltip": "Bu İşi Geri Çek",
         "clearSucceeded": "Sıra Boşaltıldı",
         "clearFailed": "Sırayı Boşaltmada Sorun",
         "cancelBatch": "Toplu İşten Vazgeç",
-        "cancelItem": "Öğeden Vazgeç",
+        "cancelItem": "İşi Geri Çek",
         "total": "Toplam",
         "pending": "Sırada",
         "completedIn": "'de bitirildi",
         "batch": "Toplu İş",
         "session": "Oturum",
         "batchQueued": "Toplu İş Sıraya Alındı",
-        "notReady": "Sıraya Alınamadı"
+        "notReady": "Sıraya Alınamadı",
+        "batchFieldValues": "Toplu İş Değişkenleri",
+        "queueMaxExceeded": "Sıra sınırı {{max_queue_size}} aşıldı, {{skip}} atlanıyor"
     },
     "invocationCache": {
         "cacheSize": "Önbellek Boyutu",
@@ -307,8 +315,8 @@
         "enable": "Aç"
     },
     "gallery": {
-        "deleteImageBin": "Silinen imajlar işletim sisteminin çöp kutusuna gönderilir.",
-        "deleteImagePermanent": "Silinen imajlar geri getirilemez.",
+        "deleteImageBin": "Silinen görseller işletim sisteminin çöp kutusuna gönderilir.",
+        "deleteImagePermanent": "Silinen görseller geri getirilemez.",
         "assets": "Özkaynaklar",
         "autoAssignBoardOnClick": "Tıklanan Panoya Otomatik Atama",
         "loading": "Yükleniyor",
@@ -316,28 +324,32 @@
         "download": "İndir",
         "deleteSelection": "Seçileni Sil",
         "preparingDownloadFailed": "İndirme Hazırlanırken Sorun",
-        "problemDeletingImages": "İmaj Silmede Sorun",
-        "featuresWillReset": "Bu imajı silerseniz, o özellikler resetlenecektir.",
+        "problemDeletingImages": "Görsel Silmede Sorun",
+        "featuresWillReset": "Bu görseli silerseniz, o özellikler resetlenecektir.",
         "galleryImageResetSize": "Boyutu Resetle",
-        "noImageSelected": "İmaj Seçili Değil",
+        "noImageSelected": "Görsel Seçilmedi",
         "unstarImage": "Yıldızı Kaldır",
         "uploads": "Yüklemeler",
-        "problemDeletingImagesDesc": "Bir ya da daha çok imaj silinemedi",
+        "problemDeletingImagesDesc": "Bir ya da daha çok görsel silinemedi",
         "gallerySettings": "Galeri Ayarları",
-        "image": "imaj",
-        "galleryImageSize": "İmaj Boyutu",
-        "allImagesLoaded": "Bütün İmajlar Yüklendi",
+        "image": "görsel",
+        "galleryImageSize": "Görsel Boyutu",
+        "allImagesLoaded": "Tüm Görseller Yüklendi",
         "copy": "Kopyala",
-        "noImagesInGallery": "Gösterilecek İmaj Yok",
-        "autoSwitchNewImages": "Yeni İmajı Biter Bitmez Gör",
+        "noImagesInGallery": "Gösterilecek Görsel Yok",
+        "autoSwitchNewImages": "Yeni Görseli Biter Bitmez Gör",
         "maintainAspectRatio": "En-Boy Oranını Koru",
-        "currentlyInUse": "Bu imaj şu an bu bölümlerde kullanımda:",
-        "deleteImage": "İmajı Sil",
+        "currentlyInUse": "Bu görsel şurada kullanımda:",
+        "deleteImage": "Görseli Sil",
         "loadMore": "Daha Getir",
-        "setCurrentImage": "Çalışma İmajı Yap",
+        "setCurrentImage": "Çalışma Görseli Yap",
         "unableToLoad": "Galeri Yüklenemedi",
         "downloadSelection": "Seçileni İndir",
-        "preparingDownload": "İndirmeye Hazırlanıyor"
+        "preparingDownload": "İndirmeye Hazırlanıyor",
+        "singleColumnLayout": "Tek Sütun Düzen",
+        "generations": "Çıktılar",
+        "showUploads": "Yüklenenleri Göster",
+        "showGenerations": "Çıktıları Göster"
     },
     "hrf": {
         "hrf": "Yüksek Çözünürlük Kürü",
@@ -350,17 +362,321 @@
             "method": "Yüksek Çözünürlük Kürü Yöntemi"
         },
         "upscaleMethod": "Büyütme Yöntemi",
-        "enableHrfTooltip": "Daha düşük bir başlangıç çözünürlüğüyle oluşturup ana çözünürlüğe büyütür ve İmajdan İmaj yapar."
+        "enableHrfTooltip": "Daha düşük bir çözünürlükle oluşturmaya başlar, ana çözünürlüğe büyütür ve Görselden Görsel'i çalıştırır."
     },
     "hotkeys": {
         "noHotkeysFound": "Kısayol Tuşu Bulanamadı",
         "searchHotkeys": "Kısayol Tuşlarında Ara",
-        "clearSearch": "Aramayı Sil"
+        "clearSearch": "Aramayı Sil",
+        "colorPicker": {
+            "title": "Renk Seçici",
+            "desc": "Tuvalde renk seçiciye geçer"
+        },
+        "consoleToggle": {
+            "title": "Konsolu Aç-Kapat",
+            "desc": "Konsolu aç-kapat"
+        },
+        "hideMask": {
+            "desc": "Maskeyi gizle-göster",
+            "title": "Maskeyi Gizle"
+        },
+        "focusPrompt": {
+            "title": "İsteme Odaklan",
+            "desc": "Görsel istemi alanına odaklanır"
+        },
+        "keyboardShortcuts": "Kısayol Tuşları",
+        "nextImage": {
+            "title": "Sonraki Görsel",
+            "desc": "Galerideki sonraki görseli göster"
+        },
+        "maximizeWorkSpace": {
+            "desc": "Panelleri kapat ve çalışma alanını genişlet",
+            "title": "Çalışma Alanını Genişlet"
+        },
+        "pinOptions": {
+            "desc": "Ayar panelini iğnele",
+            "title": "Ayarları İğnele"
+        },
+        "nodesHotkeys": "Çizgeler",
+        "quickToggleMove": {
+            "desc": "Geçici olarak Kayma Aracına geçer",
+            "title": "Geçici Kayma"
+        },
+        "showHideBoundingBox": {
+            "title": "Sınırlayıcı Kutuyu Gizle/Göster",
+            "desc": "Sınırlayıcı kutunun görünürlüğünü değiştir"
+        },
+        "showInfo": {
+            "desc": "Seçili görselin üstverisini göster",
+            "title": "Bilgileri Göster"
+        },
+        "nextStagingImage": {
+            "desc": "Sonraki Görsel Parçayı Göster",
+            "title": "Sonraki Görsel Parça"
+        },
+        "acceptStagingImage": {
+            "desc": "Geçiçi Görsel Parçasını Onayla",
+            "title": "Geçiçi Görsel Parçasını Onayla"
+        },
+        "changeTabs": {
+            "desc": "Çalışma alanını değiştir",
+            "title": "Sekmeyi değiştir"
+        },
+        "closePanels": {
+            "title": "Panelleri Kapat",
+            "desc": "Açık panelleri kapat"
+        },
+        "decreaseBrushOpacity": {
+            "title": "Fırça Saydamlığını Artır",
+            "desc": "Tuval fırçasının saydamlığını artırır"
+        },
+        "clearMask": {
+            "title": "Maskeyi Sil",
+            "desc": "Tüm maskeyi sil"
+        },
+        "decreaseGalleryThumbSize": {
+            "desc": "Galerideki küçük görsel boyutunu düşürür",
+            "title": "Küçük Görsel Boyutunu Düşür"
+        },
+        "deleteImage": {
+            "desc": "Seçili görseli sil",
+            "title": "Görseli Sil"
+        },
+        "invoke": {
+            "desc": "Görsel Oluştur",
+            "title": "Invoke"
+        },
+        "increaseGalleryThumbSize": {
+            "title": "Küçük Görsel Boyutunu Artır",
+            "desc": "Galerideki küçük görsel boyutunu artırır"
+        },
+        "setParameters": {
+            "title": "Değişkenleri Kullan",
+            "desc": "Seçili görselin tüm değişkenlerini kullan"
+        },
+        "setPrompt": {
+            "desc": "Seçili görselin istemini kullan",
+            "title": "İstemi Kullan"
+        },
+        "toggleLayer": {
+            "desc": "Maske/Taban katmanları arasında geçiş yapar",
+            "title": "Katmanı Gizle-Göster"
+        },
+        "upscale": {
+            "title": "Büyüt",
+            "desc": "Seçili görseli büyüt"
+        },
+        "setSeed": {
+            "title": "Tohumu Kullan",
+            "desc": "Seçili görselin tohumunu kullan"
+        },
+        "appHotkeys": "Uygulama",
+        "cancel": {
+            "desc": "Geçerli İşi Sil",
+            "title": "Vazgeç"
+        },
+        "sendToImageToImage": {
+            "title": "Görselden Görsel'e Gönder",
+            "desc": "Seçili görseli Görselden Görsel'e gönder"
+        },
+        "fillBoundingBox": {
+            "title": "Sınırlayıcı Kutuyu Doldur",
+            "desc": "Sınırlayıcı kutuyu fırçadaki renkle doldurur"
+        },
+        "moveTool": {
+            "desc": "Tuvalde kaymayı sağlar",
+            "title": "Kayma Aracı"
+        },
+        "redoStroke": {
+            "desc": "Fırça vuruşunu yinele",
+            "title": "Vuruşu Yinele"
+        },
+        "increaseBrushOpacity": {
+            "title": "Fırçanın Saydamlığını Düşür",
+            "desc": "Tuval fırçasının saydamlığını düşürür"
+        },
+        "selectEraser": {
+            "desc": "Tuval silgisini kullan",
+            "title": "Silgiyi Kullan"
+        },
+        "toggleOptions": {
+            "desc": "Ayarlar panelini aç-kapat",
+            "title": "Ayarları Aç-Kapat"
+        },
+        "copyToClipboard": {
+            "desc": "Tuval içeriğini kopyala",
+            "title": "Kopyala"
+        },
+        "galleryHotkeys": "Galeri",
+        "generalHotkeys": "Genel",
+        "mergeVisible": {
+            "desc": "Tuvalin görünür tüm katmanlarını birleştir",
+            "title": "Katmanları Birleştir"
+        },
+        "toggleGallery": {
+            "title": "Galeriyi Aç-Kapat",
+            "desc": "Galeri panelini aç-kapat"
+        },
+        "downloadImage": {
+            "title": "Görseli İndir",
+            "desc": "Tuval içeriğini indir"
+        },
+        "previousStagingImage": {
+            "title": "Önceki Görsel Parça",
+            "desc": "Önceki Görsel Parçayı Göster"
+        },
+        "increaseBrushSize": {
+            "title": "Fırça Boyutunu Artır",
+            "desc": "Tuval fırçasının/silgisinin boyutunu artırır"
+        },
+        "previousImage": {
+            "desc": "Galerideki önceki görseli göster",
+            "title": "Önceki Görsel"
+        },
+        "toggleOptionsAndGallery": {
+            "title": "Ayarları ve Galeriyi Aç-Kapat",
+            "desc": "Ayarlar ve galeri panellerini aç-kapat"
+        },
+        "toggleSnap": {
+            "desc": "Kılavuza Uydur",
+            "title": "Kılavuza Uydur"
+        },
+        "resetView": {
+            "desc": "Tuval Görüşünü Resetle",
+            "title": "Görüşü Resetle"
+        },
+        "cancelAndClear": {
+            "desc": "Geçerli işi geri çek ve sıradaki tüm işleri sil",
+            "title": "Vazgeç ve Sil"
+        },
+        "decreaseBrushSize": {
+            "title": "Fırça Boyutunu Düşür",
+            "desc": "Tuval fırçasının/silgisinin boyutunu düşürür"
+        },
+        "resetOptionsAndGallery": {
+            "desc": "Ayarlar ve galeri panellerini resetler",
+            "title": "Ayarları ve Galeriyi Resetle"
+        },
+        "remixImage": {
+            "desc": "Seçili görselin tohumu hariç tüm değişkenlerini kullan",
+            "title": "Benzerini Türet"
+        },
+        "undoStroke": {
+            "title": "Vuruşu Geri Al",
+            "desc": "Fırça vuruşunu geri al"
+        },
+        "saveToGallery": {
+            "title": "Galeriye Gönder",
+            "desc": "Tuval içeriğini galeriye gönder"
+        },
+        "unifiedCanvasHotkeys": "Tuval",
+        "addNodes": {
+            "desc": "Çizge ekleme menüsünü açar",
+            "title": "Çizge Ekle"
+        },
+        "eraseBoundingBox": {
+            "desc": "Sınırlayıcı kutunun içini boşaltır",
+            "title": "Sınırlayıcı Kutuyu Boşalt"
+        },
+        "selectBrush": {
+            "desc": "Tuval fırçasını kullan",
+            "title": "Fırçayı Kullan"
+        }
     },
     "embedding": {
         "incompatibleModel": "Uyumsuz ana model:"
     },
     "unifiedCanvas": {
-        "accept": "Onayla"
+        "accept": "Onayla",
+        "emptyTempImagesFolderMessage": "Geçici görsel klasörünü boşaltmak Tuvali resetler. Yineleme ve geri alma geçmişi, görsel parçası bölümü ve tuval taban katmanı da dolayısıla resetlenir.",
+        "clearCanvasHistoryMessage": "Tuval geçmişini silmek tuvale dokunmaz, ancak yineleme ve geri alma geçmişini geri dönülemez bir biçimde siler."
+    },
+    "nodes": {
+        "unableToValidateWorkflow": "İş Akışı Doğrulanamadı",
+        "workflowContact": "İletişim",
+        "loadWorkflow": "İş Akışı Yükle",
+        "workflowNotes": "Notlar",
+        "workflow": "İş Akışı",
+        "notesDescription": "İş akışınız hakkında not düşün",
+        "workflowTags": "Etiketler",
+        "workflowDescription": "Kısa Tanım",
+        "workflowValidation": "İş Akışı Doğrulama Sorunu",
+        "workflowVersion": "Sürüm",
+        "newWorkflow": "Yeni İş Akışı",
+        "currentImageDescription": "İşlemdeki görseli Çizge Düzenleyicide gösterir",
+        "workflowAuthor": "Yaratıcı",
+        "workflowName": "Ad",
+        "workflowSettings": "İş Akışı Düzenleyici Ayarları",
+        "currentImage": "İşlemdeki Görsel",
+        "noWorkflow": "İş Akışı Yok",
+        "newWorkflowDesc": "Yeni iş akışı?",
+        "problemReadingWorkflow": "Görselden iş akışı çağrılamadı",
+        "downloadWorkflow": "İş Akışını İndir (JSON)",
+        "unableToMigrateWorkflow": "İş Akışı Aktarılamadı",
+        "unknownErrorValidatingWorkflow": "İş akışını doğrulamada bilinmeyen bir sorun",
+        "unableToGetWorkflowVersion": "İş akışı sürümüne ulaşılamadı",
+        "unrecognizedWorkflowVersion": "Tanınmayan iş akışı sürümü {{version}}",
+        "newWorkflowDesc2": "Geçerli iş akışında kaydedilmemiş değişiklikler var.",
+        "unableToLoadWorkflow": "İş Akışı Yüklenemedi"
+    },
+    "workflows": {
+        "searchWorkflows": "İş Akışlarında Ara",
+        "workflowName": "İş Akışı Adı",
+        "problemSavingWorkflow": "İş Akışını Kaydetmede Sorun",
+        "saveWorkflow": "İş Akışını Kaydet",
+        "uploadWorkflow": "Dosyadan Yükle",
+        "newWorkflowCreated": "Yeni İş Akışı Yaratıldı",
+        "problemLoading": "İş Akışlarını Yüklemede Sorun",
+        "loading": "İş Akışları Yükleniyor",
+        "noDescription": "Tanımsız",
+        "workflowIsOpen": "İş Akışı Açık",
+        "clearWorkflowSearchFilter": "İş Akışı Aramasını Resetle",
+        "workflowEditorMenu": "İş Akışı Düzenleyici Menüsü",
+        "downloadWorkflow": "İndir",
+        "saveWorkflowAs": "İş Akışını Farklı Kaydet",
+        "savingWorkflow": "İş Akışı Kaydediliyor...",
+        "userWorkflows": "İş Akışlarım",
+        "defaultWorkflows": "Varsayılan İş Akışları",
+        "workflows": "İş Akışları",
+        "workflowLibrary": "Depo",
+        "deleteWorkflow": "İş Akışını Sil",
+        "unnamedWorkflow": "Adsız İş Akışı",
+        "noWorkflows": "İş Akışı Yok",
+        "workflowSaved": "İş Akışı Kaydedildi"
+    },
+    "toast": {
+        "problemDownloadingCanvasDesc": "Taban katman indirilemedi",
+        "problemSavingMaskDesc": "Maske kaydedilemedi",
+        "problemSavingCanvasDesc": "Taban katman kaydedilemedi",
+        "problemRetrievingWorkflow": "İş Akışını Getirmede Sorun",
+        "workflowDeleted": "İş Akışı Silindi",
+        "loadedWithWarnings": "İş Akışı Yüklendi Ancak Uyarılar Var",
+        "problemImportingMaskDesc": "Maske aktarılamadı",
+        "problemMergingCanvasDesc": "Taban katman aktarılamadı",
+        "problemCopyingCanvasDesc": "Taban katman aktarılamadı",
+        "workflowLoaded": "İş Akışı Yüklendi",
+        "problemDeletingWorkflow": "İş Akışını Silmede Sorun"
+    },
+    "metadata": {
+        "generationMode": "",
+        "workflow": ""
+    },
+    "parameters": {
+        "invoke": {
+            "noPrompts": "İstem oluşturulmadı"
+        }
+    },
+    "modelManager": {
+        "baseModel": "Ana Model"
+    },
+    "dynamicPrompts": {
+        "loading": "Devimsel İstemler Oluşturuluyor...",
+        "combinatorial": "Birleşimsel Oluşturma"
+    },
+    "models": {
+        "incompatibleBaseModel": "Uyumsuz ana model"
+    },
+    "settings": {
+        "generation": "Oluşturma"
     }
 }

From 74ae4d7774dd07afc2caf188b1eb77413dfb7a6a Mon Sep 17 00:00:00 2001
From: Hosted Weblate <hosted@weblate.org>
Date: Wed, 31 Jan 2024 10:01:57 +0100
Subject: [PATCH 088/133] translationBot(ui): update translation files

Updated by "Remove blank strings" hook in Weblate.

Co-authored-by: Hosted Weblate <hosted@weblate.org>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/
Translation: InvokeAI/Web UI
---
 invokeai/frontend/web/public/locales/tr.json | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/tr.json b/invokeai/frontend/web/public/locales/tr.json
index 7bb9985e77..fae92daa3a 100644
--- a/invokeai/frontend/web/public/locales/tr.json
+++ b/invokeai/frontend/web/public/locales/tr.json
@@ -657,10 +657,6 @@
         "workflowLoaded": "İş Akışı Yüklendi",
         "problemDeletingWorkflow": "İş Akışını Silmede Sorun"
     },
-    "metadata": {
-        "generationMode": "",
-        "workflow": ""
-    },
     "parameters": {
         "invoke": {
             "noPrompts": "İstem oluşturulmadı"

From f48a2c5fd254f34c097fb35be55247371d6a815d Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 1 Feb 2024 00:02:39 +1100
Subject: [PATCH 089/133] fix(ui): workflow settings styling

Got borked in the redesign.
---
 .../TopRightPanel/WorkflowEditorSettings.tsx  | 80 ++++++++++++-------
 1 file changed, 49 insertions(+), 31 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx
index 152594f42a..cfb6c99043 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx
@@ -1,7 +1,9 @@
+import type { FormLabelProps } from '@invoke-ai/ui-library';
 import {
   Divider,
   Flex,
   FormControl,
+  FormControlGroup,
   FormHelperText,
   FormLabel,
   Heading,
@@ -30,6 +32,8 @@ import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SelectionMode } from 'reactflow';
 
+const formLabelProps: FormLabelProps = { flexGrow: 1 };
+
 const selector = createMemoizedSelector(selectNodesSlice, (nodes) => {
   const { shouldAnimateEdges, shouldValidateGraph, shouldSnapToGrid, shouldColorEdges, selectionMode } = nodes;
   return {
@@ -100,37 +104,51 @@ const WorkflowEditorSettings = ({ children }: Props) => {
           <ModalBody>
             <Flex flexDirection="column" gap={4} py={4}>
               <Heading size="sm">{t('parameters.general')}</Heading>
-              <FormControl>
-                <FormLabel>{t('nodes.animatedEdges')}</FormLabel>
-                <Switch onChange={handleChangeShouldAnimate} isChecked={shouldAnimateEdges} />
-                <FormHelperText>{t('nodes.animatedEdgesHelp')}</FormHelperText>
-              </FormControl>
-              <Divider />
-              <FormControl>
-                <FormLabel>{t('nodes.snapToGrid')}</FormLabel>
-                <Switch isChecked={shouldSnapToGrid} onChange={handleChangeShouldSnap} />
-                <FormHelperText>{t('nodes.snapToGridHelp')}</FormHelperText>
-              </FormControl>
-              <Divider />
-              <FormControl>
-                <FormLabel>{t('nodes.colorCodeEdges')}</FormLabel>
-                <Switch isChecked={shouldColorEdges} onChange={handleChangeShouldColor} />
-                <FormHelperText>{t('nodes.colorCodeEdgesHelp')}</FormHelperText>
-              </FormControl>
-              <Divider />
-              <FormControl>
-                <FormLabel>{t('nodes.fullyContainNodes')}</FormLabel>
-                <Switch isChecked={selectionModeIsChecked} onChange={handleChangeSelectionMode} />
-                <FormHelperText>{t('nodes.fullyContainNodesHelp')}</FormHelperText>
-              </FormControl>
-              <Heading size="sm" pt={4}>
-                {t('common.advanced')}
-              </Heading>
-              <FormControl>
-                <FormLabel>{t('nodes.validateConnections')}</FormLabel>
-                <Switch isChecked={shouldValidateGraph} onChange={handleChangeShouldValidate} />
-                <FormHelperText>{t('nodes.validateConnectionsHelp')}</FormHelperText>
-              </FormControl>
+              <FormControlGroup orientation="vertical" formLabelProps={formLabelProps}>
+                <FormControl>
+                  <Flex w="full">
+                    <FormLabel>{t('nodes.animatedEdges')}</FormLabel>
+                    <Switch onChange={handleChangeShouldAnimate} isChecked={shouldAnimateEdges} />
+                  </Flex>
+                  <FormHelperText>{t('nodes.animatedEdgesHelp')}</FormHelperText>
+                </FormControl>
+                <Divider />
+                <FormControl>
+                  <Flex w="full">
+                    <FormLabel>{t('nodes.snapToGrid')}</FormLabel>
+                    <Switch isChecked={shouldSnapToGrid} onChange={handleChangeShouldSnap} />
+                  </Flex>
+                  <FormHelperText>{t('nodes.snapToGridHelp')}</FormHelperText>
+                </FormControl>
+                <Divider />
+                <FormControl>
+                  <Flex w="full">
+                    <FormLabel>{t('nodes.colorCodeEdges')}</FormLabel>
+                    <Switch isChecked={shouldColorEdges} onChange={handleChangeShouldColor} />
+                  </Flex>
+                  <FormHelperText>{t('nodes.colorCodeEdgesHelp')}</FormHelperText>
+                </FormControl>
+                <Divider />
+                <FormControl>
+                  <Flex w="full">
+                    <FormLabel>{t('nodes.fullyContainNodes')}</FormLabel>
+                    <Switch isChecked={selectionModeIsChecked} onChange={handleChangeSelectionMode} />
+                  </Flex>
+                  <FormHelperText>{t('nodes.fullyContainNodesHelp')}</FormHelperText>
+                </FormControl>
+                <Divider />
+                <Heading size="sm" pt={4}>
+                  {t('common.advanced')}
+                </Heading>
+                <FormControl>
+                  <Flex w="full">
+                    <FormLabel>{t('nodes.validateConnections')}</FormLabel>
+                    <Switch isChecked={shouldValidateGraph} onChange={handleChangeShouldValidate} />
+                  </Flex>
+                  <FormHelperText>{t('nodes.validateConnectionsHelp')}</FormHelperText>
+                </FormControl>
+                <Divider />
+              </FormControlGroup>
               <ReloadNodeTemplatesButton />
             </Flex>
           </ModalBody>

From 14efc95707937264eadf052a5827aba06e0181e3 Mon Sep 17 00:00:00 2001
From: Brandon Rising <contact@brandonrising.com>
Date: Tue, 30 Jan 2024 20:35:01 -0500
Subject: [PATCH 090/133] Allow passing of a civit api key

---
 invokeai/backend/install/model_install_backend.py | 7 ++++++-
 invokeai/backend/util/util.py                     | 3 +--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/invokeai/backend/install/model_install_backend.py b/invokeai/backend/install/model_install_backend.py
index 2ffc1e6ff4..d412d0226f 100644
--- a/invokeai/backend/install/model_install_backend.py
+++ b/invokeai/backend/install/model_install_backend.py
@@ -104,12 +104,14 @@ class ModelInstall(object):
         prediction_type_helper: Optional[Callable[[Path], SchedulerPredictionType]] = None,
         model_manager: Optional[ModelManager] = None,
         access_token: Optional[str] = None,
+        civit_api_key: Optional[str] = None,
     ):
         self.config = config
         self.mgr = model_manager or ModelManager(config.model_conf_path)
         self.datasets = OmegaConf.load(Dataset_path)
         self.prediction_helper = prediction_type_helper
         self.access_token = access_token or HfFolder.get_token()
+        self.civit_api_key = civit_api_key or os.environ.get("CIVIT_API_KEY")
         self.reverse_paths = self._reverse_paths(self.datasets)
 
     def all_models(self) -> Dict[str, ModelLoadInfo]:
@@ -326,7 +328,10 @@ class ModelInstall(object):
 
     def _install_url(self, url: str) -> AddModelResult:
         with TemporaryDirectory(dir=self.config.models_path) as staging:
-            location = download_with_resume(url, Path(staging))
+            CIVITAI_RE = r".*civitai.com.*"
+            civit_url = re.match(CIVITAI_RE, url, re.IGNORECASE)
+            print(civit_url)
+            location = download_with_resume(url, Path(staging), access_token=self.civit_api_key if civit_url else None)
             if not location:
                 logger.error(f"Unable to download {url}. Skipping.")
             info = ModelProbe().heuristic_probe(location, self.prediction_helper)
diff --git a/invokeai/backend/util/util.py b/invokeai/backend/util/util.py
index 4612b42cb9..85a4488915 100644
--- a/invokeai/backend/util/util.py
+++ b/invokeai/backend/util/util.py
@@ -286,9 +286,8 @@ def download_with_resume(url: str, dest: Path, access_token: str = None) -> Path
     open_mode = "wb"
     exist_size = 0
 
-    resp = requests.get(url, header, stream=True)
+    resp = requests.get(url, headers=header, stream=True, allow_redirects=True)
     content_length = int(resp.headers.get("content-length", 0))
-
     if dest.is_dir():
         try:
             file_name = re.search('filename="(.+)"', resp.headers.get("Content-Disposition")).group(1)

From 088e3420e6883398f9bafac5fa1a0a1e687d7598 Mon Sep 17 00:00:00 2001
From: Brandon Rising <contact@brandonrising.com>
Date: Tue, 30 Jan 2024 20:46:42 -0500
Subject: [PATCH 091/133] Allow passing of civit api key via config

---
 invokeai/app/services/config/config_default.py    | 2 ++
 invokeai/backend/install/model_install_backend.py | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/invokeai/app/services/config/config_default.py b/invokeai/app/services/config/config_default.py
index 3af906bd04..c13900cfee 100644
--- a/invokeai/app/services/config/config_default.py
+++ b/invokeai/app/services/config/config_default.py
@@ -293,6 +293,8 @@ class InvokeAIAppConfig(InvokeAISettings):
     lora_dir            : Optional[Path] = Field(default=None, description='Path to a directory of LoRA/LyCORIS models to be imported on startup.', json_schema_extra=Categories.Paths)
     embedding_dir       : Optional[Path] = Field(default=None, description='Path to a directory of Textual Inversion embeddings to be imported on startup.', json_schema_extra=Categories.Paths)
     controlnet_dir      : Optional[Path] = Field(default=None, description='Path to a directory of ControlNet embeddings to be imported on startup.', json_schema_extra=Categories.Paths)
+
+    civit_api_key       : Optional[str] = Field(default=os.environ.get("CIVIT_API_KEY"), description="API key for Civit", json_schema_extra=Categories.Other)
     # this is not referred to in the source code and can be removed entirely
     #free_gpu_mem        : Optional[bool] = Field(default=None, description="If true, purge model from GPU after each generation.", json_schema_extra=Categories.MemoryPerformance)
 
diff --git a/invokeai/backend/install/model_install_backend.py b/invokeai/backend/install/model_install_backend.py
index d412d0226f..8f4fdece31 100644
--- a/invokeai/backend/install/model_install_backend.py
+++ b/invokeai/backend/install/model_install_backend.py
@@ -111,7 +111,7 @@ class ModelInstall(object):
         self.datasets = OmegaConf.load(Dataset_path)
         self.prediction_helper = prediction_type_helper
         self.access_token = access_token or HfFolder.get_token()
-        self.civit_api_key = civit_api_key or os.environ.get("CIVIT_API_KEY")
+        self.civit_api_key = civit_api_key or config.civit_api_key
         self.reverse_paths = self._reverse_paths(self.datasets)
 
     def all_models(self) -> Dict[str, ModelLoadInfo]:

From 5d773dc94c9ed7acc21cca3d7ee5b4d6490e8950 Mon Sep 17 00:00:00 2001
From: Brandon Rising <contact@brandonrising.com>
Date: Tue, 30 Jan 2024 20:47:36 -0500
Subject: [PATCH 092/133] Remove debug line

---
 invokeai/backend/install/model_install_backend.py | 1 -
 1 file changed, 1 deletion(-)

diff --git a/invokeai/backend/install/model_install_backend.py b/invokeai/backend/install/model_install_backend.py
index 8f4fdece31..5d7c39beb9 100644
--- a/invokeai/backend/install/model_install_backend.py
+++ b/invokeai/backend/install/model_install_backend.py
@@ -330,7 +330,6 @@ class ModelInstall(object):
         with TemporaryDirectory(dir=self.config.models_path) as staging:
             CIVITAI_RE = r".*civitai.com.*"
             civit_url = re.match(CIVITAI_RE, url, re.IGNORECASE)
-            print(civit_url)
             location = download_with_resume(url, Path(staging), access_token=self.civit_api_key if civit_url else None)
             if not location:
                 logger.error(f"Unable to download {url}. Skipping.")

From 2c5ef92979f92717b860f1e9156d95e97a8aa0c3 Mon Sep 17 00:00:00 2001
From: Brandon Rising <contact@brandonrising.com>
Date: Tue, 30 Jan 2024 21:05:15 -0500
Subject: [PATCH 093/133] Move location of config property, comment for
 explanation of use

---
 invokeai/app/services/config/config_default.py | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/invokeai/app/services/config/config_default.py b/invokeai/app/services/config/config_default.py
index c13900cfee..510e60d7bc 100644
--- a/invokeai/app/services/config/config_default.py
+++ b/invokeai/app/services/config/config_default.py
@@ -284,6 +284,9 @@ class InvokeAIAppConfig(InvokeAISettings):
     deny_nodes          : Optional[List[str]] = Field(default=None, description="List of nodes to deny. Omit to deny none.", json_schema_extra=Categories.Nodes)
     node_cache_size     : int = Field(default=512, description="How many cached nodes to keep in memory", json_schema_extra=Categories.Nodes)
 
+    # MODEL IMPORT
+    civit_api_key       : Optional[str] = Field(default=os.environ.get("CIVIT_API_KEY"), description="API key for Civit", json_schema_extra=Categories.Other)
+
     # DEPRECATED FIELDS - STILL HERE IN ORDER TO OBTAN VALUES FROM PRE-3.1 CONFIG FILES
     always_use_cpu      : bool = Field(default=False, description="If true, use the CPU for rendering even if a GPU is available.", json_schema_extra=Categories.MemoryPerformance)
     max_cache_size      : Optional[float] = Field(default=None, gt=0, description="Maximum memory amount used by model cache for rapid switching", json_schema_extra=Categories.MemoryPerformance)
@@ -294,7 +297,6 @@ class InvokeAIAppConfig(InvokeAISettings):
     embedding_dir       : Optional[Path] = Field(default=None, description='Path to a directory of Textual Inversion embeddings to be imported on startup.', json_schema_extra=Categories.Paths)
     controlnet_dir      : Optional[Path] = Field(default=None, description='Path to a directory of ControlNet embeddings to be imported on startup.', json_schema_extra=Categories.Paths)
 
-    civit_api_key       : Optional[str] = Field(default=os.environ.get("CIVIT_API_KEY"), description="API key for Civit", json_schema_extra=Categories.Other)
     # this is not referred to in the source code and can be removed entirely
     #free_gpu_mem        : Optional[bool] = Field(default=None, description="If true, purge model from GPU after each generation.", json_schema_extra=Categories.MemoryPerformance)
 

From a769f93be0218c1c4030c9c2a21748acf864c01b Mon Sep 17 00:00:00 2001
From: Brandon Rising <contact@brandonrising.com>
Date: Tue, 30 Jan 2024 21:06:17 -0500
Subject: [PATCH 094/133] Remove unnecessary change

---
 invokeai/backend/util/util.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/invokeai/backend/util/util.py b/invokeai/backend/util/util.py
index 85a4488915..13751e2770 100644
--- a/invokeai/backend/util/util.py
+++ b/invokeai/backend/util/util.py
@@ -288,6 +288,7 @@ def download_with_resume(url: str, dest: Path, access_token: str = None) -> Path
 
     resp = requests.get(url, headers=header, stream=True, allow_redirects=True)
     content_length = int(resp.headers.get("content-length", 0))
+
     if dest.is_dir():
         try:
             file_name = re.search('filename="(.+)"', resp.headers.get("Content-Disposition")).group(1)

From 522ff4a042007e1710645d3ad2cc6010f7704104 Mon Sep 17 00:00:00 2001
From: Brandon Rising <contact@brandonrising.com>
Date: Tue, 30 Jan 2024 22:25:23 -0500
Subject: [PATCH 095/133] civit -> civitai

---
 invokeai/app/services/config/config_default.py    | 2 +-
 invokeai/backend/install/model_install_backend.py | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/invokeai/app/services/config/config_default.py b/invokeai/app/services/config/config_default.py
index 510e60d7bc..65af5bc1c4 100644
--- a/invokeai/app/services/config/config_default.py
+++ b/invokeai/app/services/config/config_default.py
@@ -285,7 +285,7 @@ class InvokeAIAppConfig(InvokeAISettings):
     node_cache_size     : int = Field(default=512, description="How many cached nodes to keep in memory", json_schema_extra=Categories.Nodes)
 
     # MODEL IMPORT
-    civit_api_key       : Optional[str] = Field(default=os.environ.get("CIVIT_API_KEY"), description="API key for Civit", json_schema_extra=Categories.Other)
+    civitai_api_key       : Optional[str] = Field(default=os.environ.get("CIVITAI_API_KEY"), description="API key for CivitAI", json_schema_extra=Categories.Other)
 
     # DEPRECATED FIELDS - STILL HERE IN ORDER TO OBTAN VALUES FROM PRE-3.1 CONFIG FILES
     always_use_cpu      : bool = Field(default=False, description="If true, use the CPU for rendering even if a GPU is available.", json_schema_extra=Categories.MemoryPerformance)
diff --git a/invokeai/backend/install/model_install_backend.py b/invokeai/backend/install/model_install_backend.py
index 5d7c39beb9..601f83fc6f 100644
--- a/invokeai/backend/install/model_install_backend.py
+++ b/invokeai/backend/install/model_install_backend.py
@@ -104,14 +104,14 @@ class ModelInstall(object):
         prediction_type_helper: Optional[Callable[[Path], SchedulerPredictionType]] = None,
         model_manager: Optional[ModelManager] = None,
         access_token: Optional[str] = None,
-        civit_api_key: Optional[str] = None,
+        civitai_api_key: Optional[str] = None,
     ):
         self.config = config
         self.mgr = model_manager or ModelManager(config.model_conf_path)
         self.datasets = OmegaConf.load(Dataset_path)
         self.prediction_helper = prediction_type_helper
         self.access_token = access_token or HfFolder.get_token()
-        self.civit_api_key = civit_api_key or config.civit_api_key
+        self.civitai_api_key = civitai_api_key or config.civitai_api_key
         self.reverse_paths = self._reverse_paths(self.datasets)
 
     def all_models(self) -> Dict[str, ModelLoadInfo]:
@@ -330,7 +330,7 @@ class ModelInstall(object):
         with TemporaryDirectory(dir=self.config.models_path) as staging:
             CIVITAI_RE = r".*civitai.com.*"
             civit_url = re.match(CIVITAI_RE, url, re.IGNORECASE)
-            location = download_with_resume(url, Path(staging), access_token=self.civit_api_key if civit_url else None)
+            location = download_with_resume(url, Path(staging), access_token=self.civitai_api_key if civit_url else None)
             if not location:
                 logger.error(f"Unable to download {url}. Skipping.")
             info = ModelProbe().heuristic_probe(location, self.prediction_helper)

From a0996b1c0aaf27d39dfc60b1bd5910e2ff3c6159 Mon Sep 17 00:00:00 2001
From: Brandon Rising <contact@brandonrising.com>
Date: Tue, 30 Jan 2024 22:32:40 -0500
Subject: [PATCH 096/133] Fix ruff styling

---
 invokeai/backend/install/model_install_backend.py | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/invokeai/backend/install/model_install_backend.py b/invokeai/backend/install/model_install_backend.py
index 601f83fc6f..fdbe714f62 100644
--- a/invokeai/backend/install/model_install_backend.py
+++ b/invokeai/backend/install/model_install_backend.py
@@ -330,7 +330,9 @@ class ModelInstall(object):
         with TemporaryDirectory(dir=self.config.models_path) as staging:
             CIVITAI_RE = r".*civitai.com.*"
             civit_url = re.match(CIVITAI_RE, url, re.IGNORECASE)
-            location = download_with_resume(url, Path(staging), access_token=self.civitai_api_key if civit_url else None)
+            location = download_with_resume(
+                url, Path(staging), access_token=self.civitai_api_key if civit_url else None
+            )
             if not location:
                 logger.error(f"Unable to download {url}. Skipping.")
             info = ModelProbe().heuristic_probe(location, self.prediction_helper)

From f68f8898c0f053629cf28256b82f43d50421add9 Mon Sep 17 00:00:00 2001
From: Mary Hipp Rogers <maryhipp@gmail.com>
Date: Wed, 31 Jan 2024 08:32:31 -0500
Subject: [PATCH 097/133] Workflow navigation & save-as (#5607)

* redo top panel of workflow editor

* add checkbox option to save to project, integrate save-as flow into first time saving workflow

* remove log

* remove workflowLibrary as a feature that can be disabled

* lint

* feat(ui): make SaveWorkflowAsDialog a singleton

Fixes an issue where the workflow name would erroneously be an empty string (which it should show the current workflow name).

Also makes it easier to interact with this component.

- Extract the dialog state to a hook
- Render the dialog once in `<NodeEditor />`
- Use the hook in the various buttons that should open the dialog
- Fix a few wonkily named components (pre-existing issue)

* fix(ui): when saving a never-before-saved workflow, do not append " (copy)" to the name

* fix(ui): do not obscure workflow library button with add node popover

This component is kinda janky :/ the popover content somehow renders invisibly over the button. I think it's related to the `<PopoverAnchor />.

Need to redo this in the future, but for now, making the popover render lazily fixes this.

---------

Co-authored-by: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Co-authored-by: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
---
 invokeai/frontend/web/public/locales/en.json  |   5 +
 .../frontend/web/src/app/types/invokeai.ts    |   4 +-
 .../features/nodes/components/NodeEditor.tsx  |   2 +
 .../flow/AddNodePopover/AddNodePopover.tsx    |   1 +
 .../flow/panels/TopPanel/ClearFlowButton.tsx  |  64 +++++++++++
 .../panels/TopPanel/SaveWorkflowButton.tsx    |  42 ++++++++
 .../flow/panels/TopPanel/TopPanel.tsx         |  19 ++--
 .../panels/TopPanel/UpdateNodesButton.tsx     |  12 ++-
 .../flow/panels/TopPanel/WorkflowName.tsx     |  17 +--
 .../panels/TopRightPanel/TopRightPanel.tsx    |   5 +-
 .../src/features/nodes/store/workflowSlice.ts |   8 +-
 .../SaveWorkflowAsDialog.tsx                  | 102 ++++++++++++++++++
 .../useSaveWorkflowAsDialog.ts                |  52 +++++++++
 .../components/WorkflowLibraryButton.tsx      |  12 ++-
 .../SaveWorkflowAsMenuItem.tsx                |  53 ++-------
 .../SaveWorkflowMenuItem.tsx                  |  30 +++++-
 .../WorkflowLibraryMenu.tsx                   |  13 +--
 .../workflowLibrary/hooks/useSaveWorkflow.ts  |   3 +-
 .../hooks/useSaveWorkflowAs.ts                |  16 ++-
 19 files changed, 362 insertions(+), 98 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/ClearFlowButton.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/SaveWorkflowButton.tsx
 create mode 100644 invokeai/frontend/web/src/features/workflowLibrary/components/SaveWorkflowAsDialog/SaveWorkflowAsDialog.tsx
 create mode 100644 invokeai/frontend/web/src/features/workflowLibrary/components/SaveWorkflowAsDialog/useSaveWorkflowAsDialog.ts

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 57b69199df..3df56c10ac 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -1014,6 +1014,9 @@
         "newWorkflow": "New Workflow",
         "newWorkflowDesc": "Create a new workflow?",
         "newWorkflowDesc2": "Your current workflow has unsaved changes.",
+        "clearWorkflow": "Clear Workflow",
+        "clearWorkflowDesc": "Clear this workflow and start a new one?",
+        "clearWorkflowDesc2": "Your current workflow has unsaved changes.",
         "scheduler": "Scheduler",
         "schedulerDescription": "TODO",
         "sDXLMainModelField": "SDXL Model",
@@ -1698,6 +1701,7 @@
         "downloadWorkflow": "Save to File",
         "saveWorkflow": "Save Workflow",
         "saveWorkflowAs": "Save Workflow As",
+        "saveWorkflowToProject": "Save Workflow to Project",
         "savingWorkflow": "Saving Workflow...",
         "problemSavingWorkflow": "Problem Saving Workflow",
         "workflowSaved": "Workflow Saved",
@@ -1712,6 +1716,7 @@
         "clearWorkflowSearchFilter": "Clear Workflow Search Filter",
         "workflowName": "Workflow Name",
         "newWorkflowCreated": "New Workflow Created",
+        "workflowCleared": "Workflow Cleared",
         "workflowEditorMenu": "Workflow Editor Menu",
         "workflowIsOpen": "Workflow is Open"
     },
diff --git a/invokeai/frontend/web/src/app/types/invokeai.ts b/invokeai/frontend/web/src/app/types/invokeai.ts
index faee66a9a9..d511812cb4 100644
--- a/invokeai/frontend/web/src/app/types/invokeai.ts
+++ b/invokeai/frontend/web/src/app/types/invokeai.ts
@@ -23,9 +23,7 @@ export type AppFeature =
   | 'resumeQueue'
   | 'prependQueue'
   | 'invocationCache'
-  | 'bulkDownload'
-  | 'workflowLibrary';
-
+  | 'bulkDownload';
 /**
  * A disable-able Stable Diffusion feature
  */
diff --git a/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx b/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
index 501d263c38..bb801b6f39 100644
--- a/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
@@ -4,6 +4,7 @@ import { Flex } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import TopPanel from 'features/nodes/components/flow/panels/TopPanel/TopPanel';
+import { SaveWorkflowAsDialog } from 'features/workflowLibrary/components/SaveWorkflowAsDialog/SaveWorkflowAsDialog';
 import type { AnimationProps } from 'framer-motion';
 import { AnimatePresence, motion } from 'framer-motion';
 import type { CSSProperties } from 'react';
@@ -59,6 +60,7 @@ const NodeEditor = () => {
             <TopPanel />
             <BottomLeftPanel />
             <MinimapPanel />
+            <SaveWorkflowAsDialog />
           </motion.div>
         )}
       </AnimatePresence>
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx
index faa4c0b054..b24b52c6ab 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx
@@ -179,6 +179,7 @@ const AddNodePopover = () => {
       closeOnBlur={true}
       returnFocusOnClose={true}
       initialFocusRef={inputRef}
+      isLazy
     >
       <PopoverAnchor>
         <Flex position="absolute" top="15%" insetInlineStart="50%" pointerEvents="none" />
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/ClearFlowButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/ClearFlowButton.tsx
new file mode 100644
index 0000000000..3ea6c54c2c
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/ClearFlowButton.tsx
@@ -0,0 +1,64 @@
+import { ConfirmationAlertDialog, Flex, IconButton, Text, useDisclosure } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiTrashSimpleFill } from 'react-icons/pi';
+
+import { addToast } from '../../../../../system/store/systemSlice';
+import { makeToast } from '../../../../../system/util/makeToast';
+import { nodeEditorReset } from '../../../../store/nodesSlice';
+
+const ClearFlowButton = () => {
+  const dispatch = useAppDispatch();
+  const { t } = useTranslation();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const isTouched = useAppSelector((s) => s.workflow.isTouched);
+
+  const handleNewWorkflow = useCallback(() => {
+    dispatch(nodeEditorReset());
+
+    dispatch(
+      addToast(
+        makeToast({
+          title: t('workflows.workflowCleared'),
+          status: 'success',
+        })
+      )
+    );
+
+    onClose();
+  }, [dispatch, onClose, t]);
+
+  const onClick = useCallback(() => {
+    if (!isTouched) {
+      handleNewWorkflow();
+      return;
+    }
+    onOpen();
+  }, [handleNewWorkflow, isTouched, onOpen]);
+
+  return (
+    <>
+      <IconButton
+        tooltip={t('nodes.clearWorkflow')}
+        aria-label={t('nodes.clearWorkflow')}
+        icon={<PiTrashSimpleFill />}
+        onClick={onClick}
+        pointerEvents="auto"
+      />
+      <ConfirmationAlertDialog
+        isOpen={isOpen}
+        onClose={onClose}
+        title={t('nodes.clearWorkflow')}
+        acceptCallback={handleNewWorkflow}
+      >
+        <Flex flexDir="column" gap={2}>
+          <Text>{t('nodes.clearWorkflowDesc')}</Text>
+          <Text variant="subtext">{t('nodes.clearWorkflowDesc2')}</Text>
+        </Flex>
+      </ConfirmationAlertDialog>
+    </>
+  );
+};
+
+export default memo(ClearFlowButton);
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/SaveWorkflowButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/SaveWorkflowButton.tsx
new file mode 100644
index 0000000000..2d0abf3af5
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/SaveWorkflowButton.tsx
@@ -0,0 +1,42 @@
+import { IconButton } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import { useSaveWorkflowAsDialog } from 'features/workflowLibrary/components/SaveWorkflowAsDialog/useSaveWorkflowAsDialog';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiFloppyDiskBold } from 'react-icons/pi';
+
+import { isWorkflowWithID, useSaveLibraryWorkflow } from '../../../../../workflowLibrary/hooks/useSaveWorkflow';
+import { $builtWorkflow } from '../../../../hooks/useWorkflowWatcher';
+
+const SaveWorkflowButton = () => {
+  const { t } = useTranslation();
+  const isTouched = useAppSelector((s) => s.workflow.isTouched);
+  const { onOpen } = useSaveWorkflowAsDialog();
+  const { saveWorkflow } = useSaveLibraryWorkflow();
+
+  const handleClickSave = useCallback(async () => {
+    const builtWorkflow = $builtWorkflow.get();
+    if (!builtWorkflow) {
+      return;
+    }
+
+    if (isWorkflowWithID(builtWorkflow)) {
+      saveWorkflow();
+    } else {
+      onOpen();
+    }
+  }, [onOpen, saveWorkflow]);
+
+  return (
+    <IconButton
+      tooltip={t('workflows.saveWorkflow')}
+      aria-label={t('workflows.saveWorkflow')}
+      icon={<PiFloppyDiskBold />}
+      isDisabled={!isTouched}
+      onClick={handleClickSave}
+      pointerEvents="auto"
+    />
+  );
+};
+
+export default memo(SaveWorkflowButton);
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/TopPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/TopPanel.tsx
index 442b0d33b8..c87af124bf 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/TopPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/TopPanel.tsx
@@ -1,23 +1,28 @@
 import { Flex, Spacer } from '@invoke-ai/ui-library';
 import AddNodeButton from 'features/nodes/components/flow/panels/TopPanel/AddNodeButton';
+import ClearFlowButton from 'features/nodes/components/flow/panels/TopPanel/ClearFlowButton';
+import SaveWorkflowButton from 'features/nodes/components/flow/panels/TopPanel/SaveWorkflowButton';
 import UpdateNodesButton from 'features/nodes/components/flow/panels/TopPanel/UpdateNodesButton';
 import WorkflowName from 'features/nodes/components/flow/panels/TopPanel/WorkflowName';
-import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import WorkflowLibraryButton from 'features/workflowLibrary/components/WorkflowLibraryButton';
 import WorkflowLibraryMenu from 'features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu';
 import { memo } from 'react';
 
 const TopCenterPanel = () => {
-  const isWorkflowLibraryEnabled = useFeatureStatus('workflowLibrary').isFeatureEnabled;
-
   return (
-    <Flex gap={2} top={2} left={2} right={2} position="absolute" alignItems="center" pointerEvents="none">
-      <AddNodeButton />
-      <UpdateNodesButton />
+    <Flex gap={2} top={2} left={2} right={2} position="absolute" alignItems="flex-start" pointerEvents="none">
+      <Flex flexDir="column" gap="2">
+        <Flex gap="2">
+          <AddNodeButton />
+          <WorkflowLibraryButton />
+        </Flex>
+        <UpdateNodesButton />
+      </Flex>
       <Spacer />
       <WorkflowName />
       <Spacer />
-      {isWorkflowLibraryEnabled && <WorkflowLibraryButton />}
+      <ClearFlowButton />
+      <SaveWorkflowButton />
       <WorkflowLibraryMenu />
     </Flex>
   );
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/UpdateNodesButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/UpdateNodesButton.tsx
index 300eb19396..d356eaa4e1 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/UpdateNodesButton.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/UpdateNodesButton.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@invoke-ai/ui-library';
+import { IconButton } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useGetNodesNeedUpdate } from 'features/nodes/hooks/useGetNodesNeedUpdate';
 import { updateAllNodesRequested } from 'features/nodes/store/actions';
@@ -19,9 +19,13 @@ const UpdateNodesButton = () => {
   }
 
   return (
-    <Button leftIcon={<PiWarningBold />} onClick={handleClickUpdateNodes} pointerEvents="auto">
-      {t('nodes.updateAllNodes')}
-    </Button>
+    <IconButton
+      tooltip={t('nodes.updateAllNodes')}
+      aria-label={t('nodes.updateAllNodes')}
+      icon={<PiWarningBold />}
+      onClick={handleClickUpdateNodes}
+      pointerEvents="auto"
+    />
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/WorkflowName.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/WorkflowName.tsx
index 5573e89270..527147c67d 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/WorkflowName.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/WorkflowName.tsx
@@ -1,26 +1,13 @@
 import { Text } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
-import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
-import { memo, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { memo } from 'react';
 
 const TopCenterPanel = () => {
-  const { t } = useTranslation();
   const name = useAppSelector((s) => s.workflow.name);
-  const isTouched = useAppSelector((s) => s.workflow.isTouched);
-  const isWorkflowLibraryEnabled = useFeatureStatus('workflowLibrary').isFeatureEnabled;
-
-  const displayName = useMemo(() => {
-    let _displayName = name || t('workflows.unnamedWorkflow');
-    if (isTouched && isWorkflowLibraryEnabled) {
-      _displayName += ` (${t('common.unsaved')})`;
-    }
-    return _displayName;
-  }, [t, name, isTouched, isWorkflowLibraryEnabled]);
 
   return (
     <Text m={2} fontSize="lg" userSelect="none" noOfLines={1} wordBreak="break-all" fontWeight="semibold" opacity={0.8}>
-      {displayName}
+      {name}
     </Text>
   );
 };
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/TopRightPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/TopRightPanel.tsx
index f3c903bf4a..be939f35bd 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/TopRightPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/TopRightPanel.tsx
@@ -1,15 +1,12 @@
 import { Flex } from '@invoke-ai/ui-library';
-import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import WorkflowLibraryButton from 'features/workflowLibrary/components/WorkflowLibraryButton';
 import WorkflowLibraryMenu from 'features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu';
 import { memo } from 'react';
 
 const TopRightPanel = () => {
-  const isWorkflowLibraryEnabled = useFeatureStatus('workflowLibrary').isFeatureEnabled;
-
   return (
     <Flex gap={2} position="absolute" top={2} insetInlineEnd={2}>
-      {isWorkflowLibraryEnabled && <WorkflowLibraryButton />}
+      <WorkflowLibraryButton />
       <WorkflowLibraryMenu />
     </Flex>
   );
diff --git a/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts b/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
index 5f6859c623..f6ffa20f13 100644
--- a/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
@@ -5,7 +5,7 @@ import { workflowLoaded } from 'features/nodes/store/actions';
 import { isAnyNodeOrEdgeMutation, nodeEditorReset, nodesDeleted } from 'features/nodes/store/nodesSlice';
 import type { WorkflowsState as WorkflowState } from 'features/nodes/store/types';
 import type { FieldIdentifier } from 'features/nodes/types/field';
-import type { WorkflowV2 } from 'features/nodes/types/workflow';
+import type { WorkflowCategory, WorkflowV2 } from 'features/nodes/types/workflow';
 import { cloneDeep, isEqual, uniqBy } from 'lodash-es';
 
 export const blankWorkflow: Omit<WorkflowV2, 'nodes' | 'edges'> = {
@@ -46,6 +46,11 @@ const workflowSlice = createSlice({
       state.name = action.payload;
       state.isTouched = true;
     },
+    workflowCategoryChanged: (state, action: PayloadAction<WorkflowCategory | undefined>) => {
+      if (action.payload) {
+        state.meta.category = action.payload;
+      }
+    },
     workflowDescriptionChanged: (state, action: PayloadAction<string>) => {
       state.description = action.payload;
       state.isTouched = true;
@@ -102,6 +107,7 @@ export const {
   workflowExposedFieldAdded,
   workflowExposedFieldRemoved,
   workflowNameChanged,
+  workflowCategoryChanged,
   workflowDescriptionChanged,
   workflowTagsChanged,
   workflowAuthorChanged,
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/SaveWorkflowAsDialog/SaveWorkflowAsDialog.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/SaveWorkflowAsDialog/SaveWorkflowAsDialog.tsx
new file mode 100644
index 0000000000..74a8916475
--- /dev/null
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/SaveWorkflowAsDialog/SaveWorkflowAsDialog.tsx
@@ -0,0 +1,102 @@
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  Button,
+  Checkbox,
+  Flex,
+  FormControl,
+  FormLabel,
+  Input,
+} from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
+import { useSaveWorkflowAsDialog } from 'features/workflowLibrary/components/SaveWorkflowAsDialog/useSaveWorkflowAsDialog';
+import { t } from 'i18next';
+import type { ChangeEvent } from 'react';
+import { useCallback, useRef } from 'react';
+
+import { $workflowCategories } from '../../../../app/store/nanostores/workflowCategories';
+import { useSaveWorkflowAs } from '../../hooks/useSaveWorkflowAs';
+
+export const SaveWorkflowAsDialog = () => {
+  const { isOpen, onClose, workflowName, setWorkflowName, shouldSaveToProject, setShouldSaveToProject } =
+    useSaveWorkflowAsDialog();
+
+  const workflowCategories = useStore($workflowCategories);
+
+  const { saveWorkflowAs } = useSaveWorkflowAs();
+
+  const cancelRef = useRef<HTMLButtonElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const onChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      setWorkflowName(e.target.value);
+    },
+    [setWorkflowName]
+  );
+
+  const onChangeCheckbox = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      setShouldSaveToProject(e.target.checked);
+    },
+    [setShouldSaveToProject]
+  );
+
+  const clearAndClose = useCallback(() => {
+    onClose();
+  }, [onClose]);
+
+  const onSave = useCallback(async () => {
+    const category = shouldSaveToProject ? 'project' : 'user';
+    await saveWorkflowAs({
+      name: workflowName,
+      category,
+      onSuccess: clearAndClose,
+      onError: clearAndClose,
+    });
+  }, [workflowName, saveWorkflowAs, shouldSaveToProject, clearAndClose]);
+
+  return (
+    <AlertDialog isOpen={isOpen} onClose={onClose} leastDestructiveRef={cancelRef} isCentered={true}>
+      <AlertDialogOverlay>
+        <AlertDialogContent>
+          <AlertDialogHeader fontSize="lg" fontWeight="bold">
+            {t('workflows.saveWorkflowAs')}
+          </AlertDialogHeader>
+
+          <AlertDialogBody>
+            <FormControl alignItems="flex-start">
+              <FormLabel mt="2">{t('workflows.workflowName')}</FormLabel>
+              <Flex flexDir="column" width="full" gap="2">
+                <Input
+                  ref={inputRef}
+                  value={workflowName}
+                  onChange={onChange}
+                  placeholder={t('workflows.workflowName')}
+                />
+                {workflowCategories.includes('project') && (
+                  <Checkbox isChecked={shouldSaveToProject} onChange={onChangeCheckbox}>
+                    <FormLabel>{t('workflows.saveWorkflowToProject')}</FormLabel>
+                  </Checkbox>
+                )}
+              </Flex>
+            </FormControl>
+          </AlertDialogBody>
+
+          <AlertDialogFooter>
+            <Button ref={cancelRef} onClick={clearAndClose}>
+              {t('common.cancel')}
+            </Button>
+            <Button colorScheme="invokeBlue" onClick={onSave} ml={3} isDisabled={!workflowName || !workflowName.length}>
+              {t('common.saveAs')}
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialogOverlay>
+    </AlertDialog>
+  );
+};
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/SaveWorkflowAsDialog/useSaveWorkflowAsDialog.ts b/invokeai/frontend/web/src/features/workflowLibrary/components/SaveWorkflowAsDialog/useSaveWorkflowAsDialog.ts
new file mode 100644
index 0000000000..78f3e3f537
--- /dev/null
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/SaveWorkflowAsDialog/useSaveWorkflowAsDialog.ts
@@ -0,0 +1,52 @@
+import { useStore } from '@nanostores/react';
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectWorkflowSlice } from 'features/nodes/store/workflowSlice';
+import { getWorkflowCopyName } from 'features/workflowLibrary/util/getWorkflowCopyName';
+import { atom } from 'nanostores';
+import { useCallback } from 'react';
+
+const $isOpen = atom(false);
+const $workflowName = atom('');
+const $shouldSaveToProject = atom(false);
+
+const selectNewWorkflowName = createSelector(selectWorkflowSlice, ({ name, id }): string => {
+  // If the workflow has no ID, it's a new workflow that has never been saved to the server. The dialog should use
+  // whatever the user has entered in the workflow name field.
+  if (!id) {
+    return name;
+  }
+  // Else, the workflow is already saved to the server. The dialog should use the workflow's name with " (copy)"
+  // appended to it.
+  if (name.length) {
+    return getWorkflowCopyName(name);
+  }
+  // Else, we have a workflow that has been saved to the server, but has no name. This should never happen, but if
+  // it does, we just return an empty string and let the dialog use the default name.
+  return '';
+});
+
+export const useSaveWorkflowAsDialog = () => {
+  const newWorkflowName = useAppSelector(selectNewWorkflowName);
+
+  const isOpen = useStore($isOpen);
+  const onOpen = useCallback(() => {
+    $workflowName.set(newWorkflowName);
+    $isOpen.set(true);
+  }, [newWorkflowName]);
+  const onClose = useCallback(() => {
+    $isOpen.set(false);
+    $workflowName.set('');
+    $shouldSaveToProject.set(false);
+  }, []);
+
+  const workflowName = useStore($workflowName);
+  const setWorkflowName = useCallback((workflowName: string) => $workflowName.set(workflowName), []);
+
+  const shouldSaveToProject = useStore($shouldSaveToProject);
+  const setShouldSaveToProject = useCallback((shouldSaveToProject: boolean) => {
+    $shouldSaveToProject.set(shouldSaveToProject);
+  }, []);
+
+  return { workflowName, setWorkflowName, shouldSaveToProject, setShouldSaveToProject, isOpen, onOpen, onClose };
+};
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx
index f128505dbe..33c3cee2bb 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx
@@ -1,4 +1,4 @@
-import { Button, useDisclosure } from '@invoke-ai/ui-library';
+import { IconButton, useDisclosure } from '@invoke-ai/ui-library';
 import { WorkflowLibraryModalContext } from 'features/workflowLibrary/context/WorkflowLibraryModalContext';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -12,9 +12,13 @@ const WorkflowLibraryButton = () => {
 
   return (
     <WorkflowLibraryModalContext.Provider value={disclosure}>
-      <Button leftIcon={<PiBooksBold />} onClick={disclosure.onOpen} pointerEvents="auto">
-        {t('workflows.workflowLibrary')}
-      </Button>
+      <IconButton
+        aria-label={t('workflows.workflowLibrary')}
+        tooltip={t('workflows.workflowLibrary')}
+        icon={<PiBooksBold />}
+        onClick={disclosure.onOpen}
+        pointerEvents="auto"
+      />
       <WorkflowLibraryModal />
     </WorkflowLibraryModalContext.Provider>
   );
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowAsMenuItem.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowAsMenuItem.tsx
index 55add16267..bd8a909ace 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowAsMenuItem.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowAsMenuItem.tsx
@@ -1,53 +1,18 @@
-import { ConfirmationAlertDialog, FormControl, FormLabel, Input, MenuItem, useDisclosure } from '@invoke-ai/ui-library';
-import { useAppSelector } from 'app/store/storeHooks';
-import { useSaveWorkflowAs } from 'features/workflowLibrary/hooks/useSaveWorkflowAs';
-import { getWorkflowCopyName } from 'features/workflowLibrary/util/getWorkflowCopyName';
-import type { ChangeEvent } from 'react';
-import { memo, useCallback, useRef, useState } from 'react';
+import { MenuItem } from '@invoke-ai/ui-library';
+import { useSaveWorkflowAsDialog } from 'features/workflowLibrary/components/SaveWorkflowAsDialog/useSaveWorkflowAsDialog';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiCopyBold } from 'react-icons/pi';
 
-const SaveWorkflowAsButton = () => {
-  const currentName = useAppSelector((s) => s.workflow.name);
+const SaveWorkflowAsMenuItem = () => {
   const { t } = useTranslation();
-  const { saveWorkflowAs } = useSaveWorkflowAs();
-  const [name, setName] = useState(getWorkflowCopyName(currentName));
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const onOpenCallback = useCallback(() => {
-    setName(getWorkflowCopyName(currentName));
-    onOpen();
-    inputRef.current?.focus();
-  }, [currentName, onOpen]);
-
-  const onSave = useCallback(async () => {
-    saveWorkflowAs({ name, onSuccess: onClose, onError: onClose });
-  }, [name, onClose, saveWorkflowAs]);
-
-  const onChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-    setName(e.target.value);
-  }, []);
+  const { onOpen } = useSaveWorkflowAsDialog();
 
   return (
-    <>
-      <MenuItem as="button" icon={<PiCopyBold />} onClick={onOpenCallback}>
-        {t('workflows.saveWorkflowAs')}
-      </MenuItem>
-
-      <ConfirmationAlertDialog
-        isOpen={isOpen}
-        onClose={onClose}
-        title={t('workflows.saveWorkflowAs')}
-        acceptCallback={onSave}
-      >
-        <FormControl>
-          <FormLabel>{t('workflows.workflowName')}</FormLabel>
-          <Input ref={inputRef} value={name} onChange={onChange} placeholder={t('workflows.workflowName')} />
-        </FormControl>
-      </ConfirmationAlertDialog>
-    </>
+    <MenuItem as="button" icon={<PiCopyBold />} onClick={onOpen}>
+      {t('workflows.saveWorkflowAs')}
+    </MenuItem>
   );
 };
 
-export default memo(SaveWorkflowAsButton);
+export default memo(SaveWorkflowAsMenuItem);
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowMenuItem.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowMenuItem.tsx
index 1e2866cb77..3fc7cee257 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowMenuItem.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowMenuItem.tsx
@@ -1,17 +1,37 @@
 import { MenuItem } from '@invoke-ai/ui-library';
-import { useSaveLibraryWorkflow } from 'features/workflowLibrary/hooks/useSaveWorkflow';
-import { memo } from 'react';
+import { useSaveWorkflowAsDialog } from 'features/workflowLibrary/components/SaveWorkflowAsDialog/useSaveWorkflowAsDialog';
+import { isWorkflowWithID, useSaveLibraryWorkflow } from 'features/workflowLibrary/hooks/useSaveWorkflow';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiFloppyDiskBold } from 'react-icons/pi';
 
-const SaveLibraryWorkflowMenuItem = () => {
+import { useAppSelector } from '../../../../app/store/storeHooks';
+import { $builtWorkflow } from '../../../nodes/hooks/useWorkflowWatcher';
+
+const SaveWorkflowMenuItem = () => {
   const { t } = useTranslation();
   const { saveWorkflow } = useSaveLibraryWorkflow();
+  const { onOpen } = useSaveWorkflowAsDialog();
+  const isTouched = useAppSelector((s) => s.workflow.isTouched);
+
+  const handleClickSave = useCallback(async () => {
+    const builtWorkflow = $builtWorkflow.get();
+    if (!builtWorkflow) {
+      return;
+    }
+
+    if (isWorkflowWithID(builtWorkflow)) {
+      saveWorkflow();
+    } else {
+      onOpen();
+    }
+  }, [onOpen, saveWorkflow]);
+
   return (
-    <MenuItem as="button" icon={<PiFloppyDiskBold />} onClick={saveWorkflow}>
+    <MenuItem as="button" isDisabled={!isTouched} icon={<PiFloppyDiskBold />} onClick={handleClickSave}>
       {t('workflows.saveWorkflow')}
     </MenuItem>
   );
 };
 
-export default memo(SaveLibraryWorkflowMenuItem);
+export default memo(SaveWorkflowMenuItem);
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu.tsx
index 158eb73edc..73d0249d3d 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu.tsx
@@ -7,7 +7,6 @@ import {
   useDisclosure,
   useGlobalMenuClose,
 } from '@invoke-ai/ui-library';
-import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import DownloadWorkflowMenuItem from 'features/workflowLibrary/components/WorkflowLibraryMenu/DownloadWorkflowMenuItem';
 import NewWorkflowMenuItem from 'features/workflowLibrary/components/WorkflowLibraryMenu/NewWorkflowMenuItem';
 import SaveWorkflowAsMenuItem from 'features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowAsMenuItem';
@@ -22,9 +21,6 @@ const WorkflowLibraryMenu = () => {
   const { t } = useTranslation();
   const { isOpen, onOpen, onClose } = useDisclosure();
   useGlobalMenuClose(onClose);
-
-  const isWorkflowLibraryEnabled = useFeatureStatus('workflowLibrary').isFeatureEnabled;
-
   return (
     <Menu isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
       <MenuButton
@@ -34,11 +30,12 @@ const WorkflowLibraryMenu = () => {
         pointerEvents="auto"
       />
       <MenuList pointerEvents="auto">
-        {isWorkflowLibraryEnabled && <SaveWorkflowMenuItem />}
-        {isWorkflowLibraryEnabled && <SaveWorkflowAsMenuItem />}
-        <DownloadWorkflowMenuItem />
-        <UploadWorkflowMenuItem />
         <NewWorkflowMenuItem />
+        <UploadWorkflowMenuItem />
+        <MenuDivider />
+        <SaveWorkflowMenuItem />
+        <SaveWorkflowAsMenuItem />
+        <DownloadWorkflowMenuItem />
         <MenuDivider />
         <SettingsMenuItem />
       </MenuList>
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflow.ts b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflow.ts
index 15d0fc650e..78d7071c20 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflow.ts
+++ b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflow.ts
@@ -17,7 +17,8 @@ type UseSaveLibraryWorkflowReturn = {
 
 type UseSaveLibraryWorkflow = () => UseSaveLibraryWorkflowReturn;
 
-const isWorkflowWithID = (workflow: WorkflowV2): workflow is O.Required<WorkflowV2, 'id'> => Boolean(workflow.id);
+export const isWorkflowWithID = (workflow: WorkflowV2): workflow is O.Required<WorkflowV2, 'id'> =>
+  Boolean(workflow.id);
 
 export const useSaveLibraryWorkflow: UseSaveLibraryWorkflow = () => {
   const { t } = useTranslation();
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflowAs.ts b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflowAs.ts
index c24961b918..2bd7aabbe4 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflowAs.ts
+++ b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflowAs.ts
@@ -2,13 +2,21 @@ import type { ToastId } from '@invoke-ai/ui-library';
 import { useToast } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { $builtWorkflow } from 'features/nodes/hooks/useWorkflowWatcher';
-import { workflowIDChanged, workflowNameChanged, workflowSaved } from 'features/nodes/store/workflowSlice';
+import {
+  workflowCategoryChanged,
+  workflowIDChanged,
+  workflowNameChanged,
+  workflowSaved,
+} from 'features/nodes/store/workflowSlice';
 import { useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useCreateWorkflowMutation, workflowsApi } from 'services/api/endpoints/workflows';
 
+import type { WorkflowCategory } from '../../nodes/types/workflow';
+
 type SaveWorkflowAsArg = {
   name: string;
+  category: WorkflowCategory;
   onSuccess?: () => void;
   onError?: () => void;
 };
@@ -28,7 +36,7 @@ export const useSaveWorkflowAs: UseSaveWorkflowAs = () => {
   const toast = useToast();
   const toastRef = useRef<ToastId | undefined>();
   const saveWorkflowAs = useCallback(
-    async ({ name: newName, onSuccess, onError }: SaveWorkflowAsArg) => {
+    async ({ name: newName, category, onSuccess, onError }: SaveWorkflowAsArg) => {
       const workflow = $builtWorkflow.get();
       if (!workflow) {
         return;
@@ -42,10 +50,14 @@ export const useSaveWorkflowAs: UseSaveWorkflowAs = () => {
       try {
         workflow.id = undefined;
         workflow.name = newName;
+        workflow.meta.category = category;
+
         const data = await createWorkflow(workflow).unwrap();
         dispatch(workflowIDChanged(data.workflow.id));
         dispatch(workflowNameChanged(data.workflow.name));
+        dispatch(workflowCategoryChanged(data.workflow.meta.category));
         dispatch(workflowSaved());
+
         onSuccess && onSuccess();
         toast.update(toastRef.current, {
           title: t('workflows.workflowSaved'),

From 25291a2e016626ddf6a0a9af1e4600589eba7520 Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Wed, 31 Jan 2024 11:48:11 -0500
Subject: [PATCH 098/133] select first image if no selectedImageName

---
 .../listenerMiddleware/listeners/boardIdSelected.ts        | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardIdSelected.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardIdSelected.ts
index c93381f0f2..ebcb96d116 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardIdSelected.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardIdSelected.ts
@@ -36,10 +36,11 @@ export const addBoardIdSelectedListener = () => {
         const { data: boardImagesData } = imagesApi.endpoints.listImages.select(queryArgs)(getState());
 
         if (boardImagesData && boardIdSelected.match(action) && action.payload.selectedImageName) {
-          const firstImage = imagesSelectors.selectAll(boardImagesData)[0];
           const selectedImage = imagesSelectors.selectById(boardImagesData, action.payload.selectedImageName);
-
-          dispatch(imageSelected(selectedImage || firstImage || null));
+          dispatch(imageSelected(selectedImage || null));
+        } else if (boardImagesData) {
+          const firstImage = imagesSelectors.selectAll(boardImagesData)[0];
+          dispatch(imageSelected(firstImage || null));
         } else {
           // board has no images - deselect
           dispatch(imageSelected(null));

From b24e8dd829bcbe8ffdf75b360dece8e9b7e572a0 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 31 Jan 2024 21:31:38 +1100
Subject: [PATCH 099/133] feat(stats): refactor InvocationStatsService to
 output stats as dataclasses

This allows the stats to be written to disk as JSON and analyzed.

- Add dataclasses to hold stats.
- Move stats pretty-print logic to `__str__` of the new `InvocationStatsSummary` class.
- Add `get_stats` and `dump_stats` methods to `InvocationStatsServiceBase`.
- `InvocationStatsService` now throws if stats are requested for a session it doesn't know about. This avoids needing to do a lot of messy null checks.
- Update `DefaultInvocationProcessor` to use the new stats methods and suppresses the new errors.
---
 .../invocation_processor_default.py           |  34 +++--
 .../invocation_stats/invocation_stats_base.py |  28 +++-
 .../invocation_stats_common.py                | 135 +++++++++++++++---
 .../invocation_stats_default.py               |  89 +++++++++---
 4 files changed, 233 insertions(+), 53 deletions(-)

diff --git a/invokeai/app/services/invocation_processor/invocation_processor_default.py b/invokeai/app/services/invocation_processor/invocation_processor_default.py
index 1cfb0c1822..4951b51121 100644
--- a/invokeai/app/services/invocation_processor/invocation_processor_default.py
+++ b/invokeai/app/services/invocation_processor/invocation_processor_default.py
@@ -1,11 +1,15 @@
 import time
 import traceback
+from contextlib import suppress
 from threading import BoundedSemaphore, Event, Thread
 from typing import Optional
 
 import invokeai.backend.util.logging as logger
 from invokeai.app.invocations.baseinvocation import InvocationContext
 from invokeai.app.services.invocation_queue.invocation_queue_common import InvocationQueueItem
+from invokeai.app.services.invocation_stats.invocation_stats_common import (
+    GESStatsNotFoundError,
+)
 from invokeai.app.util.profiler import Profiler
 
 from ..invoker import Invoker
@@ -152,7 +156,8 @@ class DefaultInvocationProcessor(InvocationProcessorABC):
                     pass
 
                 except CanceledException:
-                    self.__invoker.services.performance_statistics.reset_stats(graph_execution_state.id)
+                    with suppress(GESStatsNotFoundError):
+                        self.__invoker.services.performance_statistics.reset_stats(graph_execution_state.id)
                     pass
 
                 except Exception as e:
@@ -177,7 +182,8 @@ class DefaultInvocationProcessor(InvocationProcessorABC):
                         error_type=e.__class__.__name__,
                         error=error,
                     )
-                    self.__invoker.services.performance_statistics.reset_stats(graph_execution_state.id)
+                    with suppress(GESStatsNotFoundError):
+                        self.__invoker.services.performance_statistics.reset_stats(graph_execution_state.id)
                     pass
 
                 # Check queue to see if this is canceled, and skip if so
@@ -209,15 +215,21 @@ class DefaultInvocationProcessor(InvocationProcessorABC):
                             error=traceback.format_exc(),
                         )
                 elif is_complete:
-                    self.__invoker.services.performance_statistics.log_stats(graph_execution_state.id)
-                    self.__invoker.services.events.emit_graph_execution_complete(
-                        queue_batch_id=queue_item.session_queue_batch_id,
-                        queue_item_id=queue_item.session_queue_item_id,
-                        queue_id=queue_item.session_queue_id,
-                        graph_execution_state_id=graph_execution_state.id,
-                    )
-                    if profiler:
-                        profiler.stop()
+                    with suppress(GESStatsNotFoundError):
+                        self.__invoker.services.performance_statistics.log_stats(graph_execution_state.id)
+                        self.__invoker.services.events.emit_graph_execution_complete(
+                            queue_batch_id=queue_item.session_queue_batch_id,
+                            queue_item_id=queue_item.session_queue_item_id,
+                            queue_id=queue_item.session_queue_id,
+                            graph_execution_state_id=graph_execution_state.id,
+                        )
+                        if profiler:
+                            profile_path = profiler.stop()
+                            stats_path = profile_path.with_suffix(".json")
+                            self.__invoker.services.performance_statistics.dump_stats(
+                                graph_execution_state_id=graph_execution_state.id, output_path=stats_path
+                            )
+                        self.__invoker.services.performance_statistics.reset_stats(graph_execution_state.id)
 
         except KeyboardInterrupt:
             pass  # Log something? KeyboardInterrupt is probably not going to be seen by the processor
diff --git a/invokeai/app/services/invocation_stats/invocation_stats_base.py b/invokeai/app/services/invocation_stats/invocation_stats_base.py
index 6e5b6a9f69..22624a6579 100644
--- a/invokeai/app/services/invocation_stats/invocation_stats_base.py
+++ b/invokeai/app/services/invocation_stats/invocation_stats_base.py
@@ -30,8 +30,10 @@ writes to the system log is stored in InvocationServices.performance_statistics.
 
 from abc import ABC, abstractmethod
 from contextlib import AbstractContextManager
+from pathlib import Path
 
 from invokeai.app.invocations.baseinvocation import BaseInvocation
+from invokeai.app.services.invocation_stats.invocation_stats_common import InvocationStatsSummary
 
 
 class InvocationStatsServiceBase(ABC):
@@ -61,8 +63,9 @@ class InvocationStatsServiceBase(ABC):
     @abstractmethod
     def reset_stats(self, graph_execution_state_id: str):
         """
-        Reset all statistics for the indicated graph
-        :param graph_execution_state_id
+        Reset all statistics for the indicated graph.
+        :param graph_execution_state_id: The id of the session whose stats to reset.
+        :raises GESStatsNotFoundError: if the graph isn't tracked in the stats.
         """
         pass
 
@@ -70,5 +73,26 @@ class InvocationStatsServiceBase(ABC):
     def log_stats(self, graph_execution_state_id: str):
         """
         Write out the accumulated statistics to the log or somewhere else.
+        :param graph_execution_state_id: The id of the session whose stats to log.
+        :raises GESStatsNotFoundError: if the graph isn't tracked in the stats.
+        """
+        pass
+
+    @abstractmethod
+    def get_stats(self, graph_execution_state_id: str) -> InvocationStatsSummary:
+        """
+        Gets the accumulated statistics for the indicated graph.
+        :param graph_execution_state_id: The id of the session whose stats to get.
+        :raises GESStatsNotFoundError: if the graph isn't tracked in the stats.
+        """
+        pass
+
+    @abstractmethod
+    def dump_stats(self, graph_execution_state_id: str, output_path: Path) -> None:
+        """
+        Write out the accumulated statistics to the indicated path as JSON.
+        :param graph_execution_state_id: The id of the session whose stats to dump.
+        :param output_path: The file to write the stats to.
+        :raises GESStatsNotFoundError: if the graph isn't tracked in the stats.
         """
         pass
diff --git a/invokeai/app/services/invocation_stats/invocation_stats_common.py b/invokeai/app/services/invocation_stats/invocation_stats_common.py
index 543edc076a..f4c906a58f 100644
--- a/invokeai/app/services/invocation_stats/invocation_stats_common.py
+++ b/invokeai/app/services/invocation_stats/invocation_stats_common.py
@@ -1,5 +1,91 @@
 from collections import defaultdict
-from dataclasses import dataclass
+from dataclasses import asdict, dataclass
+from typing import Any, Optional
+
+
+class GESStatsNotFoundError(Exception):
+    """Raised when execution stats are not found for a given Graph Execution State."""
+
+
+@dataclass
+class NodeExecutionStatsSummary:
+    """The stats for a specific type of node."""
+
+    node_type: str
+    num_calls: int
+    time_used_seconds: float
+    peak_vram_gb: float
+
+
+@dataclass
+class ModelCacheStatsSummary:
+    """The stats for the model cache."""
+
+    high_water_mark_gb: float
+    cache_size_gb: float
+    total_usage_gb: float
+    cache_hits: int
+    cache_misses: int
+    models_cached: int
+    models_cleared: int
+
+
+@dataclass
+class GraphExecutionStatsSummary:
+    """The stats for the graph execution state."""
+
+    graph_execution_state_id: str
+    execution_time_seconds: float
+    # `wall_time_seconds`, `ram_usage_gb` and `ram_change_gb` are derived from the node execution stats.
+    # In some situations, there are no node stats, so these values are optional.
+    wall_time_seconds: Optional[float]
+    ram_usage_gb: Optional[float]
+    ram_change_gb: Optional[float]
+
+
+@dataclass
+class InvocationStatsSummary:
+    """
+    The accumulated stats for a graph execution.
+    Its `__str__` method returns a human-readable stats summary.
+    """
+
+    vram_usage_gb: Optional[float]
+    graph_stats: GraphExecutionStatsSummary
+    model_cache_stats: ModelCacheStatsSummary
+    node_stats: list[NodeExecutionStatsSummary]
+
+    def __str__(self) -> str:
+        _str = ""
+        _str = f"Graph stats: {self.graph_stats.graph_execution_state_id}\n"
+        _str += f"{'Node':>30} {'Calls':>7} {'Seconds':>9} {'VRAM Used':>10}\n"
+
+        for summary in self.node_stats:
+            _str += f"{summary.node_type:>30} {summary.num_calls:>7} {summary.time_used_seconds:>8.3f}s {summary.peak_vram_gb:>9.3f}G\n"
+
+        _str += f"TOTAL GRAPH EXECUTION TIME: {self.graph_stats.execution_time_seconds:7.3f}s\n"
+
+        if self.graph_stats.wall_time_seconds is not None:
+            _str += f"TOTAL GRAPH WALL TIME: {self.graph_stats.wall_time_seconds:7.3f}s\n"
+
+        if self.graph_stats.ram_usage_gb is not None and self.graph_stats.ram_change_gb is not None:
+            _str += f"RAM used by InvokeAI process: {self.graph_stats.ram_usage_gb:4.2f}G ({self.graph_stats.ram_change_gb:+5.3f}G)\n"
+
+        _str += f"RAM used to load models: {self.model_cache_stats.total_usage_gb:4.2f}G\n"
+        if self.vram_usage_gb:
+            _str += f"VRAM in use: {self.vram_usage_gb:4.3f}G\n"
+        _str += "RAM cache statistics:\n"
+        _str += f"   Model cache hits: {self.model_cache_stats.cache_hits}\n"
+        _str += f"   Model cache misses: {self.model_cache_stats.cache_misses}\n"
+        _str += f"   Models cached: {self.model_cache_stats.models_cached}\n"
+        _str += f"   Models cleared from cache: {self.model_cache_stats.models_cleared}\n"
+        _str += f"   Cache high water mark: {self.model_cache_stats.high_water_mark_gb:4.2f}/{self.model_cache_stats.cache_size_gb:4.2f}G\n"
+
+        return _str
+
+    def as_dict(self) -> dict[str, Any]:
+        """Returns the stats as a dictionary."""
+        return asdict(self)
 
 
 @dataclass
@@ -55,12 +141,33 @@ class GraphExecutionStats:
 
         return last_node
 
-    def get_pretty_log(self, graph_execution_state_id: str) -> str:
-        log = f"Graph stats: {graph_execution_state_id}\n"
-        log += f"{'Node':>30} {'Calls':>7}{'Seconds':>9} {'VRAM Used':>10}\n"
+    def get_graph_stats_summary(self, graph_execution_state_id: str) -> GraphExecutionStatsSummary:
+        """Get a summary of the graph stats."""
+        first_node = self.get_first_node_stats()
+        last_node = self.get_last_node_stats()
 
-        # Log stats aggregated by node type.
+        wall_time_seconds: Optional[float] = None
+        ram_usage_gb: Optional[float] = None
+        ram_change_gb: Optional[float] = None
+
+        if last_node and first_node:
+            wall_time_seconds = last_node.end_time - first_node.start_time
+            ram_usage_gb = last_node.end_ram_gb
+            ram_change_gb = last_node.end_ram_gb - first_node.start_ram_gb
+
+        return GraphExecutionStatsSummary(
+            graph_execution_state_id=graph_execution_state_id,
+            execution_time_seconds=self.get_total_run_time(),
+            wall_time_seconds=wall_time_seconds,
+            ram_usage_gb=ram_usage_gb,
+            ram_change_gb=ram_change_gb,
+        )
+
+    def get_node_stats_summaries(self) -> list[NodeExecutionStatsSummary]:
+        """Get a summary of the node stats."""
+        summaries: list[NodeExecutionStatsSummary] = []
         node_stats_by_type: dict[str, list[NodeExecutionStats]] = defaultdict(list)
+
         for node_stats in self._node_stats_list:
             node_stats_by_type[node_stats.invocation_type].append(node_stats)
 
@@ -68,17 +175,9 @@ class GraphExecutionStats:
             num_calls = len(node_type_stats_list)
             time_used = sum([n.total_time() for n in node_type_stats_list])
             peak_vram = max([n.peak_vram_gb for n in node_type_stats_list])
-            log += f"{node_type:>30}  {num_calls:>4}   {time_used:7.3f}s     {peak_vram:4.3f}G\n"
+            summary = NodeExecutionStatsSummary(
+                node_type=node_type, num_calls=num_calls, time_used_seconds=time_used, peak_vram_gb=peak_vram
+            )
+            summaries.append(summary)
 
-        # Log stats for the entire graph.
-        log += f"TOTAL GRAPH EXECUTION TIME: {self.get_total_run_time():7.3f}s\n"
-
-        first_node = self.get_first_node_stats()
-        last_node = self.get_last_node_stats()
-        if first_node is not None and last_node is not None:
-            total_wall_time = last_node.end_time - first_node.start_time
-            ram_change = last_node.end_ram_gb - first_node.start_ram_gb
-            log += f"TOTAL GRAPH WALL TIME: {total_wall_time:7.3f}s\n"
-            log += f"RAM used by InvokeAI process: {last_node.end_ram_gb:4.2f}G ({ram_change:+5.3f}G)\n"
-
-        return log
+        return summaries
diff --git a/invokeai/app/services/invocation_stats/invocation_stats_default.py b/invokeai/app/services/invocation_stats/invocation_stats_default.py
index 93f396c2b9..a2652dabc3 100644
--- a/invokeai/app/services/invocation_stats/invocation_stats_default.py
+++ b/invokeai/app/services/invocation_stats/invocation_stats_default.py
@@ -1,5 +1,7 @@
+import json
 import time
 from contextlib import contextmanager
+from pathlib import Path
 
 import psutil
 import torch
@@ -10,7 +12,15 @@ from invokeai.app.services.invoker import Invoker
 from invokeai.backend.model_management.model_cache import CacheStats
 
 from .invocation_stats_base import InvocationStatsServiceBase
-from .invocation_stats_common import GraphExecutionStats, NodeExecutionStats
+from .invocation_stats_common import (
+    GESStatsNotFoundError,
+    GraphExecutionStats,
+    GraphExecutionStatsSummary,
+    InvocationStatsSummary,
+    ModelCacheStatsSummary,
+    NodeExecutionStats,
+    NodeExecutionStatsSummary,
+)
 
 # Size of 1GB in bytes.
 GB = 2**30
@@ -95,31 +105,66 @@ class InvocationStatsService(InvocationStatsServiceBase):
             del self._stats[graph_execution_state_id]
             del self._cache_stats[graph_execution_state_id]
         except KeyError as e:
-            logger.warning(f"Attempted to clear statistics for unknown graph {graph_execution_state_id}: {e}.")
+            msg = f"Attempted to clear statistics for unknown graph {graph_execution_state_id}: {e}."
+            logger.warning(msg)
+            raise GESStatsNotFoundError(msg)
 
-    def log_stats(self, graph_execution_state_id: str):
+    def get_stats(self, graph_execution_state_id: str) -> InvocationStatsSummary:
+        graph_stats_summary = self._get_graph_summary(graph_execution_state_id)
+        node_stats_summaries = self._get_node_summaries(graph_execution_state_id)
+        model_cache_stats_summary = self._get_model_cache_summary(graph_execution_state_id)
+        vram_usage_gb = torch.cuda.memory_allocated() / GB if torch.cuda.is_available() else None
+
+        return InvocationStatsSummary(
+            graph_stats=graph_stats_summary,
+            model_cache_stats=model_cache_stats_summary,
+            node_stats=node_stats_summaries,
+            vram_usage_gb=vram_usage_gb,
+        )
+
+    def log_stats(self, graph_execution_state_id: str) -> None:
+        stats = self.get_stats(graph_execution_state_id)
+        logger.info(str(stats))
+
+    def dump_stats(self, graph_execution_state_id: str, output_path: Path) -> None:
+        stats = self.get_stats(graph_execution_state_id)
+        with open(output_path, "w") as f:
+            f.write(json.dumps(stats.as_dict(), indent=2))
+
+    def _get_model_cache_summary(self, graph_execution_state_id: str) -> ModelCacheStatsSummary:
         try:
-            graph_stats = self._stats[graph_execution_state_id]
             cache_stats = self._cache_stats[graph_execution_state_id]
         except KeyError as e:
-            logger.warning(f"Attempted to log statistics for unknown graph {graph_execution_state_id}: {e}.")
-            return
+            msg = f"Attempted to get model cache statistics for unknown graph {graph_execution_state_id}: {e}."
+            logger.warning(msg)
+            raise GESStatsNotFoundError(msg)
 
-        log = graph_stats.get_pretty_log(graph_execution_state_id)
+        return ModelCacheStatsSummary(
+            cache_hits=cache_stats.hits,
+            cache_misses=cache_stats.misses,
+            high_water_mark_gb=cache_stats.high_watermark / GB,
+            cache_size_gb=cache_stats.cache_size / GB,
+            total_usage_gb=sum(list(cache_stats.loaded_model_sizes.values())) / GB,
+            models_cached=cache_stats.in_cache,
+            models_cleared=cache_stats.cleared,
+        )
 
-        hwm = cache_stats.high_watermark / GB
-        tot = cache_stats.cache_size / GB
-        loaded = sum(list(cache_stats.loaded_model_sizes.values())) / GB
-        log += f"RAM used to load models: {loaded:4.2f}G\n"
-        if torch.cuda.is_available():
-            log += f"VRAM in use: {(torch.cuda.memory_allocated() / GB):4.3f}G\n"
-        log += "RAM cache statistics:\n"
-        log += f"   Model cache hits: {cache_stats.hits}\n"
-        log += f"   Model cache misses: {cache_stats.misses}\n"
-        log += f"   Models cached: {cache_stats.in_cache}\n"
-        log += f"   Models cleared from cache: {cache_stats.cleared}\n"
-        log += f"   Cache high water mark: {hwm:4.2f}/{tot:4.2f}G\n"
-        logger.info(log)
+    def _get_graph_summary(self, graph_execution_state_id: str) -> GraphExecutionStatsSummary:
+        try:
+            graph_stats = self._stats[graph_execution_state_id]
+        except KeyError as e:
+            msg = f"Attempted to get graph statistics for unknown graph {graph_execution_state_id}: {e}."
+            logger.warning(msg)
+            raise GESStatsNotFoundError(msg)
 
-        del self._stats[graph_execution_state_id]
-        del self._cache_stats[graph_execution_state_id]
+        return graph_stats.get_graph_stats_summary(graph_execution_state_id)
+
+    def _get_node_summaries(self, graph_execution_state_id: str) -> list[NodeExecutionStatsSummary]:
+        try:
+            graph_stats = self._stats[graph_execution_state_id]
+        except KeyError as e:
+            msg = f"Attempted to get node statistics for unknown graph {graph_execution_state_id}: {e}."
+            logger.warning(msg)
+            raise GESStatsNotFoundError(msg)
+
+        return graph_stats.get_node_stats_summaries()

From 9f6b9d4d23fff6cf64bb1a16a748e0eaaabd9ad1 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 1 Feb 2024 08:18:57 +1100
Subject: [PATCH 100/133] fix(stats): preserve stack when raising
 GESStatsNotFoundError

---
 .../services/invocation_stats/invocation_stats_default.py | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/invokeai/app/services/invocation_stats/invocation_stats_default.py b/invokeai/app/services/invocation_stats/invocation_stats_default.py
index a2652dabc3..b7b221f411 100644
--- a/invokeai/app/services/invocation_stats/invocation_stats_default.py
+++ b/invokeai/app/services/invocation_stats/invocation_stats_default.py
@@ -107,7 +107,7 @@ class InvocationStatsService(InvocationStatsServiceBase):
         except KeyError as e:
             msg = f"Attempted to clear statistics for unknown graph {graph_execution_state_id}: {e}."
             logger.warning(msg)
-            raise GESStatsNotFoundError(msg)
+            raise GESStatsNotFoundError(msg) from e
 
     def get_stats(self, graph_execution_state_id: str) -> InvocationStatsSummary:
         graph_stats_summary = self._get_graph_summary(graph_execution_state_id)
@@ -137,7 +137,7 @@ class InvocationStatsService(InvocationStatsServiceBase):
         except KeyError as e:
             msg = f"Attempted to get model cache statistics for unknown graph {graph_execution_state_id}: {e}."
             logger.warning(msg)
-            raise GESStatsNotFoundError(msg)
+            raise GESStatsNotFoundError(msg) from e
 
         return ModelCacheStatsSummary(
             cache_hits=cache_stats.hits,
@@ -155,7 +155,7 @@ class InvocationStatsService(InvocationStatsServiceBase):
         except KeyError as e:
             msg = f"Attempted to get graph statistics for unknown graph {graph_execution_state_id}: {e}."
             logger.warning(msg)
-            raise GESStatsNotFoundError(msg)
+            raise GESStatsNotFoundError(msg) from e
 
         return graph_stats.get_graph_stats_summary(graph_execution_state_id)
 
@@ -165,6 +165,6 @@ class InvocationStatsService(InvocationStatsServiceBase):
         except KeyError as e:
             msg = f"Attempted to get node statistics for unknown graph {graph_execution_state_id}: {e}."
             logger.warning(msg)
-            raise GESStatsNotFoundError(msg)
+            raise GESStatsNotFoundError(msg) from e
 
         return graph_stats.get_node_stats_summaries()

From 4410ecf62c4206d2ea4432e16bb7b01fbb32aeb9 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 1 Feb 2024 08:19:38 +1100
Subject: [PATCH 101/133] fix(stats): log errors at error level

They were erroneously at warning before.
---
 .../services/invocation_stats/invocation_stats_default.py | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/invokeai/app/services/invocation_stats/invocation_stats_default.py b/invokeai/app/services/invocation_stats/invocation_stats_default.py
index b7b221f411..7f3ef3023d 100644
--- a/invokeai/app/services/invocation_stats/invocation_stats_default.py
+++ b/invokeai/app/services/invocation_stats/invocation_stats_default.py
@@ -106,7 +106,7 @@ class InvocationStatsService(InvocationStatsServiceBase):
             del self._cache_stats[graph_execution_state_id]
         except KeyError as e:
             msg = f"Attempted to clear statistics for unknown graph {graph_execution_state_id}: {e}."
-            logger.warning(msg)
+            logger.error(msg)
             raise GESStatsNotFoundError(msg) from e
 
     def get_stats(self, graph_execution_state_id: str) -> InvocationStatsSummary:
@@ -136,7 +136,7 @@ class InvocationStatsService(InvocationStatsServiceBase):
             cache_stats = self._cache_stats[graph_execution_state_id]
         except KeyError as e:
             msg = f"Attempted to get model cache statistics for unknown graph {graph_execution_state_id}: {e}."
-            logger.warning(msg)
+            logger.error(msg)
             raise GESStatsNotFoundError(msg) from e
 
         return ModelCacheStatsSummary(
@@ -154,7 +154,7 @@ class InvocationStatsService(InvocationStatsServiceBase):
             graph_stats = self._stats[graph_execution_state_id]
         except KeyError as e:
             msg = f"Attempted to get graph statistics for unknown graph {graph_execution_state_id}: {e}."
-            logger.warning(msg)
+            logger.error(msg)
             raise GESStatsNotFoundError(msg) from e
 
         return graph_stats.get_graph_stats_summary(graph_execution_state_id)
@@ -164,7 +164,7 @@ class InvocationStatsService(InvocationStatsServiceBase):
             graph_stats = self._stats[graph_execution_state_id]
         except KeyError as e:
             msg = f"Attempted to get node statistics for unknown graph {graph_execution_state_id}: {e}."
-            logger.warning(msg)
+            logger.error(msg)
             raise GESStatsNotFoundError(msg) from e
 
         return graph_stats.get_node_stats_summaries()

From 67ada70a26c9bf4ced202ce4f1833468e5164cb9 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 1 Feb 2024 14:33:14 +1100
Subject: [PATCH 102/133] docs: update link to frontend README

---
 docs/installation/020_INSTALL_MANUAL.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/installation/020_INSTALL_MANUAL.md b/docs/installation/020_INSTALL_MANUAL.md
index b395405ba3..1443433362 100644
--- a/docs/installation/020_INSTALL_MANUAL.md
+++ b/docs/installation/020_INSTALL_MANUAL.md
@@ -313,7 +313,7 @@ code for InvokeAI. For this to work, you will need to install the
 on your system, please see the [Git Installation
 Guide](https://github.com/git-guides/install-git)
 
-You will also need to install the [frontend development toolchain](https://github.com/invoke-ai/InvokeAI/blob/main/docs/contributing/contribution_guides/contributingToFrontend.md).
+You will also need to install the [frontend development toolchain](https://github.com/invoke-ai/InvokeAI/blob/main/invokeai/frontend/web/README.md).
 
 If you have a "normal" installation, you should create a totally separate virtual environment for the git-based installation, else the two may interfere.
 
@@ -361,7 +361,7 @@ installation protocol (important!)
     Be sure to pass `-e` (for an editable install) and don't forget the
     dot ("."). It is part of the command.
 
-5.  Install the [frontend toolchain](https://github.com/invoke-ai/InvokeAI/blob/main/docs/contributing/contribution_guides/contributingToFrontend.md) and do a production build of the UI as described.
+5.  Install the [frontend toolchain](https://github.com/invoke-ai/InvokeAI/blob/main/invokeai/frontend/web/README.md) and do a production build of the UI as described.
 
 6.  You can now run `invokeai` and its related commands. The code will be
     read from the repository, so that you can edit the .py source files

From 45bf2c7da654175ee6e94b87f88bb17b20875674 Mon Sep 17 00:00:00 2001
From: Eugene Brodsky <ebr@users.noreply.github.com>
Date: Thu, 25 Jan 2024 00:17:14 -0500
Subject: [PATCH 103/133] chore(updater): address deprecation of pkg_resources

as per module docstring:
This module is deprecated. Users are directed to importlib.resources,
importlib.metadata and packaging instead.
---
 invokeai/frontend/install/invokeai_update.py | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/invokeai/frontend/install/invokeai_update.py b/invokeai/frontend/install/invokeai_update.py
index c6f06533c5..8c6e8a7afc 100644
--- a/invokeai/frontend/install/invokeai_update.py
+++ b/invokeai/frontend/install/invokeai_update.py
@@ -5,8 +5,8 @@ pip install <path_to_git_source>.
 import os
 import platform
 from distutils.version import LooseVersion
+from importlib.metadata import PackageNotFoundError, distribution
 
-import pkg_resources
 import psutil
 import requests
 from rich import box, print
@@ -89,12 +89,11 @@ def welcome(latest_release: str, latest_prerelease: str):
 
 
 def get_extras():
-    extras = ""
     try:
-        _ = pkg_resources.get_distribution("xformers")
+        distribution("xformers")
         extras = "[xformers]"
-    except pkg_resources.DistributionNotFound:
-        pass
+    except PackageNotFoundError:
+        extras = ""
     return extras
 
 

From 701f14c1e3ffe236a049edeb1f7ebb8bc02b3a39 Mon Sep 17 00:00:00 2001
From: Eugene Brodsky <ebr@users.noreply.github.com>
Date: Thu, 25 Jan 2024 01:22:33 -0500
Subject: [PATCH 104/133] fix: add PyTorch extra-index-url to the updater
 command

---
 invokeai/frontend/install/invokeai_update.py | 69 +++++++++++++++++++-
 1 file changed, 66 insertions(+), 3 deletions(-)

diff --git a/invokeai/frontend/install/invokeai_update.py b/invokeai/frontend/install/invokeai_update.py
index 8c6e8a7afc..663969624d 100644
--- a/invokeai/frontend/install/invokeai_update.py
+++ b/invokeai/frontend/install/invokeai_update.py
@@ -5,14 +5,14 @@ pip install <path_to_git_source>.
 import os
 import platform
 from distutils.version import LooseVersion
-from importlib.metadata import PackageNotFoundError, distribution
+from importlib.metadata import PackageNotFoundError, distribution, distributions
 
 import psutil
 import requests
 from rich import box, print
 from rich.console import Console, group
 from rich.panel import Panel
-from rich.prompt import Prompt
+from rich.prompt import Confirm, Prompt
 from rich.style import Style
 
 from invokeai.version import __version__
@@ -61,6 +61,65 @@ def get_pypi_versions():
     return latest_version, latest_release_candidate, versions
 
 
+def get_torch_extra_index_url() -> str | None:
+    """
+    Determine torch wheel source URL and optional modules based on the user's OS.
+    """
+
+    resolved_url = None
+
+    # In all other cases (like MacOS (MPS) or Linux+CUDA), there is no need to specify the extra index URL.
+    torch_package_urls = {
+        "windows_cuda": "https://download.pytorch.org/whl/cu121",
+        "linux_rocm": "https://download.pytorch.org/whl/rocm5.6",
+        "linux_cpu": "https://download.pytorch.org/whl/cpu",
+    }
+
+    nvidia_packages_present = (
+        len([d.metadata["Name"] for d in distributions() if d.metadata["Name"].startswith("nvidia")]) > 0
+    )
+    device = "cuda" if nvidia_packages_present else None
+    manual_gpu_selection_prompt = (
+        "[bold]We tried and failed to guess your GPU capabilities[/] :thinking_face:. Please select the GPU type:"
+    )
+
+    if OS == "Linux":
+        if not device:
+            # do we even need to offer a CPU-only install option?
+            print(manual_gpu_selection_prompt)
+            print("1: NVIDIA (CUDA)")
+            print("2: AMD (ROCm)")
+            print("3: No GPU - CPU only")
+            answer = Prompt.ask("Choice:", choices=["1", "2", "3"], default="1")
+            match answer:
+                case "1":
+                    device = "cuda"
+                case "2":
+                    device = "rocm"
+                case "3":
+                    device = "cpu"
+
+        if device != "cuda":
+            resolved_url = torch_package_urls[f"linux_{device}"]
+
+    if OS == "Windows":
+        if not device:
+            print(manual_gpu_selection_prompt)
+            print("1: NVIDIA (CUDA)")
+            print("2: No GPU - CPU only")
+            answer = Prompt.ask("Your choice:", choices=["1", "2"], default="1")
+            match answer:
+                case "1":
+                    device = "cuda"
+                case "2":
+                    device = "cpu"
+
+        if device == "cuda":
+            resolved_url = torch_package_urls[f"windows_{device}"]
+
+    return resolved_url
+
+
 def welcome(latest_release: str, latest_prerelease: str):
     @group()
     def text():
@@ -123,9 +182,13 @@ def main():
             print(f":exclamation: [bold red]'{release}' is not a recognized InvokeAI release.[/red bold]")
 
     extras = get_extras()
+    flags = []
+    if (index_url := get_torch_extra_index_url()) is not None:
+        flags.append(f"--extra-index-url {index_url}")
+    flags = " ".join(flags)
 
     print(f":crossed_fingers: Upgrading to [yellow]{release}[/yellow]")
-    cmd = f'pip install "invokeai{extras}=={release}" --use-pep517 --upgrade'
+    cmd = f'pip install "invokeai{extras}=={release}" --use-pep517 --upgrade {flags}'
 
     print("")
     print("")

From d4ed64df7d76d6db4dc2bfc01e3859bfd5263285 Mon Sep 17 00:00:00 2001
From: Eugene Brodsky <ebr@users.noreply.github.com>
Date: Thu, 25 Jan 2024 01:24:33 -0500
Subject: [PATCH 105/133] feat: add force-reinstall option to the updater

---
 invokeai/frontend/install/invokeai_update.py | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/invokeai/frontend/install/invokeai_update.py b/invokeai/frontend/install/invokeai_update.py
index 663969624d..06c3520a89 100644
--- a/invokeai/frontend/install/invokeai_update.py
+++ b/invokeai/frontend/install/invokeai_update.py
@@ -182,9 +182,19 @@ def main():
             print(f":exclamation: [bold red]'{release}' is not a recognized InvokeAI release.[/red bold]")
 
     extras = get_extras()
+
+    console.line()
+    force_reinstall = Confirm.ask(
+        "[bold]Force reinstallation of all dependencies?[/] This [i]may[/] help fix a broken upgrade, but is usually not necessary.",
+        default=False,
+    )
+
+    console.line()
     flags = []
     if (index_url := get_torch_extra_index_url()) is not None:
         flags.append(f"--extra-index-url {index_url}")
+    if force_reinstall:
+        flags.append("--force-reinstall")
     flags = " ".join(flags)
 
     print(f":crossed_fingers: Upgrading to [yellow]{release}[/yellow]")

From 02bcff29e8402675771671e2a15088e622b00944 Mon Sep 17 00:00:00 2001
From: Eugene Brodsky <ebr@users.noreply.github.com>
Date: Thu, 25 Jan 2024 02:49:55 -0500
Subject: [PATCH 106/133] feat: update ROCm to 5.6 everywhere

---
 README.md                                      | 2 +-
 docs/installation/010_INSTALL_AUTOMATED.md     | 2 +-
 docs/installation/020_INSTALL_MANUAL.md        | 4 ++--
 docs/installation/030_INSTALL_CUDA_AND_ROCM.md | 2 +-
 installer/lib/installer.py                     | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index b1689af88a..0c9291272f 100644
--- a/README.md
+++ b/README.md
@@ -169,7 +169,7 @@ the command `npm install -g pnpm` if needed)
     _For Linux with an AMD GPU:_
 
     ```sh
-    pip install InvokeAI --use-pep517 --extra-index-url https://download.pytorch.org/whl/rocm5.4.2
+    pip install InvokeAI --use-pep517 --extra-index-url https://download.pytorch.org/whl/rocm5.6
     ```
 
     _For non-GPU systems:_
diff --git a/docs/installation/010_INSTALL_AUTOMATED.md b/docs/installation/010_INSTALL_AUTOMATED.md
index f6e799aac0..03b1e9be89 100644
--- a/docs/installation/010_INSTALL_AUTOMATED.md
+++ b/docs/installation/010_INSTALL_AUTOMATED.md
@@ -477,7 +477,7 @@ Then type the following commands:
 
 === "AMD System"
     ```bash
-    pip install torch torchvision --force-reinstall --extra-index-url https://download.pytorch.org/whl/rocm5.4.2
+    pip install torch torchvision --force-reinstall --extra-index-url https://download.pytorch.org/whl/rocm5.6
     ```
 
 ### Corrupted configuration file
diff --git a/docs/installation/020_INSTALL_MANUAL.md b/docs/installation/020_INSTALL_MANUAL.md
index 1443433362..a68039406c 100644
--- a/docs/installation/020_INSTALL_MANUAL.md
+++ b/docs/installation/020_INSTALL_MANUAL.md
@@ -154,7 +154,7 @@ manager, please follow these steps:
     === "ROCm (AMD)"
 
         ```bash
-        pip install InvokeAI --use-pep517 --extra-index-url https://download.pytorch.org/whl/rocm5.4.2
+        pip install InvokeAI --use-pep517 --extra-index-url https://download.pytorch.org/whl/rocm5.6
         ```
 
     === "CPU (Intel Macs & non-GPU systems)"
@@ -345,7 +345,7 @@ installation protocol (important!)
 
     === "ROCm (AMD)"
         ```bash
-        pip install -e . --use-pep517 --extra-index-url https://download.pytorch.org/whl/rocm5.4.2
+        pip install -e . --use-pep517 --extra-index-url https://download.pytorch.org/whl/rocm5.6
         ```
 
     === "CPU (Intel Macs & non-GPU systems)"
diff --git a/docs/installation/030_INSTALL_CUDA_AND_ROCM.md b/docs/installation/030_INSTALL_CUDA_AND_ROCM.md
index ca33eb5fed..48c1c526ca 100644
--- a/docs/installation/030_INSTALL_CUDA_AND_ROCM.md
+++ b/docs/installation/030_INSTALL_CUDA_AND_ROCM.md
@@ -134,7 +134,7 @@ recipes are available
 
 When installing torch and torchvision manually with `pip`, remember to provide
 the argument `--extra-index-url
-https://download.pytorch.org/whl/rocm5.4.2` as described in the [Manual
+https://download.pytorch.org/whl/rocm5.6` as described in the [Manual
 Installation Guide](020_INSTALL_MANUAL.md).
 
 This will be done automatically for you if you use the installer
diff --git a/installer/lib/installer.py b/installer/lib/installer.py
index 3bca5e108c..5227f181d8 100644
--- a/installer/lib/installer.py
+++ b/installer/lib/installer.py
@@ -455,7 +455,7 @@ def get_torch_source() -> (Union[str, None], str):
     optional_modules = "[onnx]"
     if OS == "Linux":
         if device == "rocm":
-            url = "https://download.pytorch.org/whl/rocm5.4.2"
+            url = "https://download.pytorch.org/whl/rocm5.6"
         elif device == "cpu":
             url = "https://download.pytorch.org/whl/cpu"
 

From c0240a85688d420a12206b7b30529752c4b54a42 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 1 Feb 2024 22:00:57 +1100
Subject: [PATCH 107/133] chore(ui): bump `@invoke-ai/eslint-config-react`

---
 invokeai/frontend/web/package.json   |  2 +-
 invokeai/frontend/web/pnpm-lock.yaml | 10 ++++------
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/invokeai/frontend/web/package.json b/invokeai/frontend/web/package.json
index d7399309d2..e583169af7 100644
--- a/invokeai/frontend/web/package.json
+++ b/invokeai/frontend/web/package.json
@@ -111,7 +111,7 @@
   },
   "devDependencies": {
     "@arthurgeron/eslint-plugin-react-usememo": "^2.2.3",
-    "@invoke-ai/eslint-config-react": "^0.0.12",
+    "@invoke-ai/eslint-config-react": "^0.0.13",
     "@invoke-ai/prettier-config-react": "^0.0.6",
     "@storybook/addon-docs": "^7.6.10",
     "@storybook/addon-essentials": "^7.6.10",
diff --git a/invokeai/frontend/web/pnpm-lock.yaml b/invokeai/frontend/web/pnpm-lock.yaml
index a5ffce6809..ba76a61275 100644
--- a/invokeai/frontend/web/pnpm-lock.yaml
+++ b/invokeai/frontend/web/pnpm-lock.yaml
@@ -178,8 +178,8 @@ devDependencies:
     specifier: ^2.2.3
     version: 2.2.3
   '@invoke-ai/eslint-config-react':
-    specifier: ^0.0.12
-    version: 0.0.12(@typescript-eslint/eslint-plugin@6.19.0)(@typescript-eslint/parser@6.19.0)(eslint-config-prettier@9.1.0)(eslint-plugin-i18next@6.0.3)(eslint-plugin-import@2.29.1)(eslint-plugin-react-hooks@4.6.0)(eslint-plugin-react-refresh@0.4.5)(eslint-plugin-react@7.33.2)(eslint-plugin-simple-import-sort@10.0.0)(eslint-plugin-storybook@0.6.15)(eslint-plugin-unused-imports@3.0.0)(eslint@8.56.0)
+    specifier: ^0.0.13
+    version: 0.0.13(@typescript-eslint/eslint-plugin@6.19.0)(@typescript-eslint/parser@6.19.0)(eslint-config-prettier@9.1.0)(eslint-plugin-import@2.29.1)(eslint-plugin-react-hooks@4.6.0)(eslint-plugin-react-refresh@0.4.5)(eslint-plugin-react@7.33.2)(eslint-plugin-simple-import-sort@10.0.0)(eslint-plugin-storybook@0.6.15)(eslint-plugin-unused-imports@3.0.0)(eslint@8.56.0)
   '@invoke-ai/prettier-config-react':
     specifier: ^0.0.6
     version: 0.0.6(prettier@3.2.4)
@@ -3551,14 +3551,13 @@ packages:
       '@swc/helpers': 0.5.3
     dev: false
 
-  /@invoke-ai/eslint-config-react@0.0.12(@typescript-eslint/eslint-plugin@6.19.0)(@typescript-eslint/parser@6.19.0)(eslint-config-prettier@9.1.0)(eslint-plugin-i18next@6.0.3)(eslint-plugin-import@2.29.1)(eslint-plugin-react-hooks@4.6.0)(eslint-plugin-react-refresh@0.4.5)(eslint-plugin-react@7.33.2)(eslint-plugin-simple-import-sort@10.0.0)(eslint-plugin-storybook@0.6.15)(eslint-plugin-unused-imports@3.0.0)(eslint@8.56.0):
-    resolution: {integrity: sha512-6IXENcSa7vv+YPO/TYmC8qXXJFQt3JqDY+Yc1AMf4/d3b3o+CA7/mqepXIhydG9Gqo5jTRknXdDmjSaLxgCJ/g==}
+  /@invoke-ai/eslint-config-react@0.0.13(@typescript-eslint/eslint-plugin@6.19.0)(@typescript-eslint/parser@6.19.0)(eslint-config-prettier@9.1.0)(eslint-plugin-import@2.29.1)(eslint-plugin-react-hooks@4.6.0)(eslint-plugin-react-refresh@0.4.5)(eslint-plugin-react@7.33.2)(eslint-plugin-simple-import-sort@10.0.0)(eslint-plugin-storybook@0.6.15)(eslint-plugin-unused-imports@3.0.0)(eslint@8.56.0):
+    resolution: {integrity: sha512-dfo9k+wPHdvpy1z6ABoYXR/Ttzs1FAnbC46ttIxVhZuqDq8K5cLWznivrOfl7f0hJb8Cb8HiuQb4pHDxhHBDqA==}
     peerDependencies:
       '@typescript-eslint/eslint-plugin': ^6.19.0
       '@typescript-eslint/parser': ^6.19.0
       eslint: ^8.56.0
       eslint-config-prettier: ^9.1.0
-      eslint-plugin-i18next: ^6.0.3
       eslint-plugin-import: ^2.29.1
       eslint-plugin-react: ^7.33.2
       eslint-plugin-react-hooks: ^4.6.0
@@ -3571,7 +3570,6 @@ packages:
       '@typescript-eslint/parser': 6.19.0(eslint@8.56.0)(typescript@5.3.3)
       eslint: 8.56.0
       eslint-config-prettier: 9.1.0(eslint@8.56.0)
-      eslint-plugin-i18next: 6.0.3
       eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.19.0)(eslint@8.56.0)
       eslint-plugin-react: 7.33.2(eslint@8.56.0)
       eslint-plugin-react-hooks: 4.6.0(eslint@8.56.0)

From 182dc859a0fe345378fa913d1f80fd582957b22c Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 1 Feb 2024 22:02:11 +1100
Subject: [PATCH 108/133] chore(ui): update eslint rules

- Add `i18next/no-literal-string` (was removed from upstream config)
- Restore `path/no-relative-imports`, this was lost in the shuffle a while ago
---
 invokeai/frontend/web/.eslintrc.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/invokeai/frontend/web/.eslintrc.js b/invokeai/frontend/web/.eslintrc.js
index 2d1f21a0f2..18a6e3a9b9 100644
--- a/invokeai/frontend/web/.eslintrc.js
+++ b/invokeai/frontend/web/.eslintrc.js
@@ -1,9 +1,26 @@
 module.exports = {
   extends: ['@invoke-ai/eslint-config-react'],
+  plugins: ['path', 'i18next'],
   rules: {
     // TODO(psyche): Enable this rule. Requires no default exports in components - many changes.
     'react-refresh/only-export-components': 'off',
     // TODO(psyche): Enable this rule. Requires a lot of eslint-disable-next-line comments.
     '@typescript-eslint/consistent-type-assertions': 'off',
+    // https://github.com/qdanik/eslint-plugin-path
+    'path/no-relative-imports': ['error', { maxDepth: 0 }],
+    // https://github.com/edvardchen/eslint-plugin-i18next/blob/HEAD/docs/rules/no-literal-string.md
+    'i18next/no-literal-string': 'error',
   },
+  overrides: [
+    /**
+     * Overrides for stories
+     */
+    {
+      files: ['*.stories.tsx'],
+      rules: {
+        // We may not have i18n available in stories.
+        'i18next/no-literal-string': 'off',
+      },
+    },
+  ],
 };

From a1a611f8cb5eda7fad280817803482b4cc1c3c35 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 1 Feb 2024 22:02:46 +1100
Subject: [PATCH 109/133] chore(ui): lint

---
 .../components/flow/panels/TopPanel/ClearFlowButton.tsx    | 7 +++----
 .../components/flow/panels/TopPanel/SaveWorkflowButton.tsx | 5 ++---
 .../SaveWorkflowAsDialog/SaveWorkflowAsDialog.tsx          | 5 ++---
 .../WorkflowLibraryMenu/SaveWorkflowMenuItem.tsx           | 5 ++---
 .../features/workflowLibrary/hooks/useSaveWorkflowAs.ts    | 3 +--
 5 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/ClearFlowButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/ClearFlowButton.tsx
index 3ea6c54c2c..9a675c7214 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/ClearFlowButton.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/ClearFlowButton.tsx
@@ -1,13 +1,12 @@
 import { ConfirmationAlertDialog, Flex, IconButton, Text, useDisclosure } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { nodeEditorReset } from 'features/nodes/store/nodesSlice';
+import { addToast } from 'features/system/store/systemSlice';
+import { makeToast } from 'features/system/util/makeToast';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiTrashSimpleFill } from 'react-icons/pi';
 
-import { addToast } from '../../../../../system/store/systemSlice';
-import { makeToast } from '../../../../../system/util/makeToast';
-import { nodeEditorReset } from '../../../../store/nodesSlice';
-
 const ClearFlowButton = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/SaveWorkflowButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/SaveWorkflowButton.tsx
index 2d0abf3af5..937c518aa4 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/SaveWorkflowButton.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/SaveWorkflowButton.tsx
@@ -1,13 +1,12 @@
 import { IconButton } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
+import { $builtWorkflow } from 'features/nodes/hooks/useWorkflowWatcher';
 import { useSaveWorkflowAsDialog } from 'features/workflowLibrary/components/SaveWorkflowAsDialog/useSaveWorkflowAsDialog';
+import { isWorkflowWithID, useSaveLibraryWorkflow } from 'features/workflowLibrary/hooks/useSaveWorkflow';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiFloppyDiskBold } from 'react-icons/pi';
 
-import { isWorkflowWithID, useSaveLibraryWorkflow } from '../../../../../workflowLibrary/hooks/useSaveWorkflow';
-import { $builtWorkflow } from '../../../../hooks/useWorkflowWatcher';
-
 const SaveWorkflowButton = () => {
   const { t } = useTranslation();
   const isTouched = useAppSelector((s) => s.workflow.isTouched);
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/SaveWorkflowAsDialog/SaveWorkflowAsDialog.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/SaveWorkflowAsDialog/SaveWorkflowAsDialog.tsx
index 74a8916475..218a9d1d2d 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/SaveWorkflowAsDialog/SaveWorkflowAsDialog.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/SaveWorkflowAsDialog/SaveWorkflowAsDialog.tsx
@@ -13,14 +13,13 @@ import {
   Input,
 } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
+import { $workflowCategories } from 'app/store/nanostores/workflowCategories';
 import { useSaveWorkflowAsDialog } from 'features/workflowLibrary/components/SaveWorkflowAsDialog/useSaveWorkflowAsDialog';
+import { useSaveWorkflowAs } from 'features/workflowLibrary/hooks/useSaveWorkflowAs';
 import { t } from 'i18next';
 import type { ChangeEvent } from 'react';
 import { useCallback, useRef } from 'react';
 
-import { $workflowCategories } from '../../../../app/store/nanostores/workflowCategories';
-import { useSaveWorkflowAs } from '../../hooks/useSaveWorkflowAs';
-
 export const SaveWorkflowAsDialog = () => {
   const { isOpen, onClose, workflowName, setWorkflowName, shouldSaveToProject, setShouldSaveToProject } =
     useSaveWorkflowAsDialog();
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowMenuItem.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowMenuItem.tsx
index 3fc7cee257..6ff744bc3b 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowMenuItem.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowMenuItem.tsx
@@ -1,13 +1,12 @@
 import { MenuItem } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import { $builtWorkflow } from 'features/nodes/hooks/useWorkflowWatcher';
 import { useSaveWorkflowAsDialog } from 'features/workflowLibrary/components/SaveWorkflowAsDialog/useSaveWorkflowAsDialog';
 import { isWorkflowWithID, useSaveLibraryWorkflow } from 'features/workflowLibrary/hooks/useSaveWorkflow';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiFloppyDiskBold } from 'react-icons/pi';
 
-import { useAppSelector } from '../../../../app/store/storeHooks';
-import { $builtWorkflow } from '../../../nodes/hooks/useWorkflowWatcher';
-
 const SaveWorkflowMenuItem = () => {
   const { t } = useTranslation();
   const { saveWorkflow } = useSaveLibraryWorkflow();
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflowAs.ts b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflowAs.ts
index 2bd7aabbe4..edf87e81ab 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflowAs.ts
+++ b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflowAs.ts
@@ -8,12 +8,11 @@ import {
   workflowNameChanged,
   workflowSaved,
 } from 'features/nodes/store/workflowSlice';
+import type { WorkflowCategory } from 'features/nodes/types/workflow';
 import { useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useCreateWorkflowMutation, workflowsApi } from 'services/api/endpoints/workflows';
 
-import type { WorkflowCategory } from '../../nodes/types/workflow';
-
 type SaveWorkflowAsArg = {
   name: string;
   category: WorkflowCategory;

From e9558f97c4e9715bfd1e11bb61e700a93da4f8df Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 1 Feb 2024 08:35:29 +1100
Subject: [PATCH 110/133] perf(config): change default png_compress_level to 1

This substantially reduces the time spent encoding PNGs. In workflows with many image outputs, this is a drastic improvement.

For a tiled upscaling workflow going from 512x512 to a scale factor of 4, this can provide over 15% speed increase.
---
 invokeai/app/services/config/config_default.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/invokeai/app/services/config/config_default.py b/invokeai/app/services/config/config_default.py
index 65af5bc1c4..c1364211ae 100644
--- a/invokeai/app/services/config/config_default.py
+++ b/invokeai/app/services/config/config_default.py
@@ -274,7 +274,7 @@ class InvokeAIAppConfig(InvokeAISettings):
     attention_type      : Literal["auto", "normal", "xformers", "sliced", "torch-sdp"] = Field(default="auto", description="Attention type", json_schema_extra=Categories.Generation)
     attention_slice_size: Literal["auto", "balanced", "max", 1, 2, 3, 4, 5, 6, 7, 8] = Field(default="auto", description='Slice size, valid when attention_type=="sliced"', json_schema_extra=Categories.Generation)
     force_tiled_decode  : bool = Field(default=False, description="Whether to enable tiled VAE decode (reduces memory consumption with some performance penalty)", json_schema_extra=Categories.Generation)
-    png_compress_level  : int = Field(default=6, description="The compress_level setting of PIL.Image.save(), used for PNG encoding. All settings are lossless. 0 = fastest, largest filesize, 9 = slowest, smallest filesize", json_schema_extra=Categories.Generation)
+    png_compress_level  : int = Field(default=1, description="The compress_level setting of PIL.Image.save(), used for PNG encoding. All settings are lossless. 0 = fastest, largest filesize, 9 = slowest, smallest filesize", json_schema_extra=Categories.Generation)
 
     # QUEUE
     max_queue_size      : int = Field(default=10000, gt=0, description="Maximum number of items in the session queue", json_schema_extra=Categories.Queue)

From e675983e20ee5bb8454a80c1eda4a55861467532 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 2 Feb 2024 07:25:01 +1100
Subject: [PATCH 111/133] fix(ui): download image opens in new tab (#5625)

* fix(ui): download image opens in new tab

In some environments, a simple `a` element cannot trigger a download of an image. Fetching the image directly can get around this and provide more reliable download functionality.

* use hook for imageUrlToBlob so token gets sent if needed

---------

Co-authored-by: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
---
 invokeai/frontend/web/public/locales/en.json  |  1 +
 .../web/src/common/hooks/useDownloadImage.ts  | 43 +++++++++++++++++++
 .../SingleSelectionMenuItems.tsx              | 16 +++----
 3 files changed, 51 insertions(+), 9 deletions(-)
 create mode 100644 invokeai/frontend/web/src/common/hooks/useDownloadImage.ts

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 3df56c10ac..41d6dd3572 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -1376,6 +1376,7 @@
         "problemCopyingCanvasDesc": "Unable to export base layer",
         "problemCopyingImage": "Unable to Copy Image",
         "problemCopyingImageLink": "Unable to Copy Image Link",
+        "problemDownloadingImage": "Unable to Download Image",
         "problemDownloadingCanvas": "Problem Downloading Canvas",
         "problemDownloadingCanvasDesc": "Unable to export base layer",
         "problemImportingMask": "Problem Importing Mask",
diff --git a/invokeai/frontend/web/src/common/hooks/useDownloadImage.ts b/invokeai/frontend/web/src/common/hooks/useDownloadImage.ts
new file mode 100644
index 0000000000..5c75549eac
--- /dev/null
+++ b/invokeai/frontend/web/src/common/hooks/useDownloadImage.ts
@@ -0,0 +1,43 @@
+import { useAppToaster } from 'app/components/Toaster';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useImageUrlToBlob } from './useImageUrlToBlob';
+
+export const useDownloadImage = () => {
+  const toaster = useAppToaster();
+  const { t } = useTranslation();
+  const imageUrlToBlob = useImageUrlToBlob();
+
+  const downloadImage = useCallback(
+    async (image_url: string, image_name: string) => {
+      try {
+        const blob = await imageUrlToBlob(image_url);
+
+        if (!blob) {
+          throw new Error('Unable to create Blob');
+        }
+
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.style.display = 'none';
+        a.href = url;
+        a.download = image_name;
+        document.body.appendChild(a);
+        a.click();
+        window.URL.revokeObjectURL(url);
+      } catch (err) {
+        toaster({
+          title: t('toast.problemDownloadingImage'),
+          description: String(err),
+          status: 'error',
+          duration: 2500,
+          isClosable: true,
+        });
+      }
+    },
+    [t, toaster, imageUrlToBlob]
+  );
+
+  return { downloadImage };
+};
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
index 4a9b9c6e8b..f4d9c7a840 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
@@ -4,6 +4,7 @@ import { useAppToaster } from 'app/components/Toaster';
 import { $customStarUI } from 'app/store/nanostores/customStarUI';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useCopyImageToClipboard } from 'common/hooks/useCopyImageToClipboard';
+import { useDownloadImage } from 'common/hooks/useDownloadImage';
 import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice';
 import { imagesToChangeSelected, isModalOpenChanged } from 'features/changeBoardModal/store/slice';
 import { imagesToDeleteSelected } from 'features/deleteImageModal/store/slice';
@@ -47,7 +48,7 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
   const toaster = useAppToaster();
   const isCanvasEnabled = useFeatureStatus('unifiedCanvas').isFeatureEnabled;
   const customStarUi = useStore($customStarUI);
-
+  const { downloadImage } = useDownloadImage();
   const { metadata, isLoading: isLoadingMetadata } = useDebouncedMetadata(imageDTO?.image_name);
 
   const { getAndLoadEmbeddedWorkflow, getAndLoadEmbeddedWorkflowResult } = useGetAndLoadEmbeddedWorkflow({});
@@ -143,6 +144,10 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
     }
   }, [unstarImages, imageDTO]);
 
+  const handleDownloadImage = useCallback(() => {
+    downloadImage(imageDTO.image_url, imageDTO.image_name);
+  }, [downloadImage, imageDTO.image_name, imageDTO.image_url]);
+
   return (
     <>
       <MenuItem as="a" href={imageDTO.image_url} target="_blank" icon={<PiShareFatBold />}>
@@ -153,14 +158,7 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
           {t('parameters.copyImage')}
         </MenuItem>
       )}
-      <MenuItem
-        as="a"
-        download={true}
-        href={imageDTO.image_url}
-        target="_blank"
-        icon={<PiDownloadSimpleBold />}
-        w="100%"
-      >
+      <MenuItem icon={<PiDownloadSimpleBold />} onClickCapture={handleDownloadImage}>
         {t('parameters.downloadImage')}
       </MenuItem>
       <MenuDivider />

From a4f892dcfb9e37e001cac8bf35e2a6476811f9b5 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 30 Jan 2024 19:09:18 +1100
Subject: [PATCH 112/133] tidy(nodes): remove unused `get_raw` method on
 ItemStorageABC

---
 .../app/services/item_storage/item_storage_base.py  |  7 +------
 .../services/item_storage/item_storage_sqlite.py    | 13 -------------
 2 files changed, 1 insertion(+), 19 deletions(-)

diff --git a/invokeai/app/services/item_storage/item_storage_base.py b/invokeai/app/services/item_storage/item_storage_base.py
index e94c049ee4..8f6f7315a3 100644
--- a/invokeai/app/services/item_storage/item_storage_base.py
+++ b/invokeai/app/services/item_storage/item_storage_base.py
@@ -1,5 +1,5 @@
 from abc import ABC, abstractmethod
-from typing import Callable, Generic, Optional, TypeVar
+from typing import Callable, Generic, TypeVar
 
 from pydantic import BaseModel
 
@@ -25,11 +25,6 @@ class ItemStorageABC(ABC, Generic[T]):
         """Gets the item, parsing it into a Pydantic model"""
         pass
 
-    @abstractmethod
-    def get_raw(self, item_id: str) -> Optional[str]:
-        """Gets the raw item as a string, skipping Pydantic parsing"""
-        pass
-
     @abstractmethod
     def set(self, item: T) -> None:
         """Sets the item"""
diff --git a/invokeai/app/services/item_storage/item_storage_sqlite.py b/invokeai/app/services/item_storage/item_storage_sqlite.py
index e02d3bdbb2..c49d91f3c0 100644
--- a/invokeai/app/services/item_storage/item_storage_sqlite.py
+++ b/invokeai/app/services/item_storage/item_storage_sqlite.py
@@ -81,19 +81,6 @@ class SqliteItemStorage(ItemStorageABC, Generic[T]):
 
         return self._parse_item(result[0])
 
-    def get_raw(self, id: str) -> Optional[str]:
-        try:
-            self._lock.acquire()
-            self._cursor.execute(f"""SELECT item FROM {self._table_name} WHERE id = ?;""", (str(id),))
-            result = self._cursor.fetchone()
-        finally:
-            self._lock.release()
-
-        if not result:
-            return None
-
-        return result[0]
-
     def delete(self, id: str):
         try:
             self._lock.acquire()

From 8bd32ee142b44b1009d679ff098a91f2431ab61f Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 30 Jan 2024 19:10:57 +1100
Subject: [PATCH 113/133] feat(nodes): add `delete` method to ItemStorageABC

---
 invokeai/app/services/item_storage/item_storage_base.py | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/invokeai/app/services/item_storage/item_storage_base.py b/invokeai/app/services/item_storage/item_storage_base.py
index 8f6f7315a3..5e7f1f7435 100644
--- a/invokeai/app/services/item_storage/item_storage_base.py
+++ b/invokeai/app/services/item_storage/item_storage_base.py
@@ -30,6 +30,11 @@ class ItemStorageABC(ABC, Generic[T]):
         """Sets the item"""
         pass
 
+    @abstractmethod
+    def delete(self, item_id: str) -> None:
+        """Deletes the item"""
+        pass
+
     @abstractmethod
     def list(self, page: int = 0, per_page: int = 10) -> PaginatedResults[T]:
         """Gets a paginated list of items"""

From 2965357d99f791d1b0f797ac497be9265f231234 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 30 Jan 2024 19:31:47 +1100
Subject: [PATCH 114/133] feat(nodes): add ItemStorageMemory

The sqlite item storage class can be swapped for this eliminate costly network calls.
---
 .../item_storage/item_storage_memory.py       | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 invokeai/app/services/item_storage/item_storage_memory.py

diff --git a/invokeai/app/services/item_storage/item_storage_memory.py b/invokeai/app/services/item_storage/item_storage_memory.py
new file mode 100644
index 0000000000..d86f8c6729
--- /dev/null
+++ b/invokeai/app/services/item_storage/item_storage_memory.py
@@ -0,0 +1,42 @@
+from typing import Generic, Optional, TypeVar
+
+from pydantic import BaseModel
+
+from invokeai.app.services.item_storage.item_storage_base import ItemStorageABC
+from invokeai.app.services.shared.pagination import PaginatedResults
+
+T = TypeVar("T", bound=BaseModel)
+
+
+class ItemStorageMemory(ItemStorageABC, Generic[T]):
+    def __init__(self, id_field: str = "id") -> None:
+        super().__init__()
+        self._id_field = id_field
+        self._items: dict[str, T] = {}
+
+    def get(self, item_id: str) -> Optional[T]:
+        return self._items.get(item_id)
+
+    def set(self, item: T) -> None:
+        self._items[getattr(item, self._id_field)] = item
+        self._on_changed(item)
+
+    def delete(self, item_id: str) -> None:
+        try:
+            del self._items[item_id]
+            self._on_deleted(item_id)
+        except KeyError:
+            pass
+
+    def list(self, page: int = 0, per_page: int = 10) -> PaginatedResults[T]:
+        # TODO: actually paginate?
+        return PaginatedResults(
+            items=list(self._items.values()), page=page, per_page=per_page, pages=1, total=len(self._items)
+        )
+
+    def search(self, query: str, page: int = 0, per_page: int = 10) -> PaginatedResults[T]:
+        # TODO: actually paginate?
+        # TODO: actually search?
+        return PaginatedResults(
+            items=list(self._items.values()), page=page, per_page=per_page, pages=1, total=len(self._items)
+        )

From 59279851a3673c8f20f4c2bb02942829fb6d60e5 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 31 Jan 2024 22:23:33 +1100
Subject: [PATCH 115/133] tidy(item_storage): remove unused list and search
 methods

---
 .../item_storage/item_storage_base.py         | 11 ---
 .../item_storage/item_storage_memory.py       | 14 ----
 .../item_storage/item_storage_sqlite.py       | 44 ----------
 tests/aa_nodes/test_sqlite.py                 | 80 -------------------
 4 files changed, 149 deletions(-)

diff --git a/invokeai/app/services/item_storage/item_storage_base.py b/invokeai/app/services/item_storage/item_storage_base.py
index 5e7f1f7435..bbe1b3dcff 100644
--- a/invokeai/app/services/item_storage/item_storage_base.py
+++ b/invokeai/app/services/item_storage/item_storage_base.py
@@ -3,8 +3,6 @@ from typing import Callable, Generic, TypeVar
 
 from pydantic import BaseModel
 
-from invokeai.app.services.shared.pagination import PaginatedResults
-
 T = TypeVar("T", bound=BaseModel)
 
 
@@ -35,15 +33,6 @@ class ItemStorageABC(ABC, Generic[T]):
         """Deletes the item"""
         pass
 
-    @abstractmethod
-    def list(self, page: int = 0, per_page: int = 10) -> PaginatedResults[T]:
-        """Gets a paginated list of items"""
-        pass
-
-    @abstractmethod
-    def search(self, query: str, page: int = 0, per_page: int = 10) -> PaginatedResults[T]:
-        pass
-
     def on_changed(self, on_changed: Callable[[T], None]) -> None:
         """Register a callback for when an item is changed"""
         self._on_changed_callbacks.append(on_changed)
diff --git a/invokeai/app/services/item_storage/item_storage_memory.py b/invokeai/app/services/item_storage/item_storage_memory.py
index d86f8c6729..1958c3ee8b 100644
--- a/invokeai/app/services/item_storage/item_storage_memory.py
+++ b/invokeai/app/services/item_storage/item_storage_memory.py
@@ -3,7 +3,6 @@ from typing import Generic, Optional, TypeVar
 from pydantic import BaseModel
 
 from invokeai.app.services.item_storage.item_storage_base import ItemStorageABC
-from invokeai.app.services.shared.pagination import PaginatedResults
 
 T = TypeVar("T", bound=BaseModel)
 
@@ -27,16 +26,3 @@ class ItemStorageMemory(ItemStorageABC, Generic[T]):
             self._on_deleted(item_id)
         except KeyError:
             pass
-
-    def list(self, page: int = 0, per_page: int = 10) -> PaginatedResults[T]:
-        # TODO: actually paginate?
-        return PaginatedResults(
-            items=list(self._items.values()), page=page, per_page=per_page, pages=1, total=len(self._items)
-        )
-
-    def search(self, query: str, page: int = 0, per_page: int = 10) -> PaginatedResults[T]:
-        # TODO: actually paginate?
-        # TODO: actually search?
-        return PaginatedResults(
-            items=list(self._items.values()), page=page, per_page=per_page, pages=1, total=len(self._items)
-        )
diff --git a/invokeai/app/services/item_storage/item_storage_sqlite.py b/invokeai/app/services/item_storage/item_storage_sqlite.py
index c49d91f3c0..99df5486a4 100644
--- a/invokeai/app/services/item_storage/item_storage_sqlite.py
+++ b/invokeai/app/services/item_storage/item_storage_sqlite.py
@@ -4,7 +4,6 @@ from typing import Generic, Optional, TypeVar, get_args
 
 from pydantic import BaseModel, TypeAdapter
 
-from invokeai.app.services.shared.pagination import PaginatedResults
 from invokeai.app.services.shared.sqlite.sqlite_database import SqliteDatabase
 
 from .item_storage_base import ItemStorageABC
@@ -89,46 +88,3 @@ class SqliteItemStorage(ItemStorageABC, Generic[T]):
         finally:
             self._lock.release()
         self._on_deleted(id)
-
-    def list(self, page: int = 0, per_page: int = 10) -> PaginatedResults[T]:
-        try:
-            self._lock.acquire()
-            self._cursor.execute(
-                f"""SELECT item FROM {self._table_name} LIMIT ? OFFSET ?;""",
-                (per_page, page * per_page),
-            )
-            result = self._cursor.fetchall()
-
-            items = [self._parse_item(r[0]) for r in result]
-
-            self._cursor.execute(f"""SELECT count(*) FROM {self._table_name};""")
-            count = self._cursor.fetchone()[0]
-        finally:
-            self._lock.release()
-
-        pageCount = int(count / per_page) + 1
-
-        return PaginatedResults[T](items=items, page=page, pages=pageCount, per_page=per_page, total=count)
-
-    def search(self, query: str, page: int = 0, per_page: int = 10) -> PaginatedResults[T]:
-        try:
-            self._lock.acquire()
-            self._cursor.execute(
-                f"""SELECT item FROM {self._table_name} WHERE item LIKE ? LIMIT ? OFFSET ?;""",
-                (f"%{query}%", per_page, page * per_page),
-            )
-            result = self._cursor.fetchall()
-
-            items = [self._parse_item(r[0]) for r in result]
-
-            self._cursor.execute(
-                f"""SELECT count(*) FROM {self._table_name} WHERE item LIKE ?;""",
-                (f"%{query}%",),
-            )
-            count = self._cursor.fetchone()[0]
-        finally:
-            self._lock.release()
-
-        pageCount = int(count / per_page) + 1
-
-        return PaginatedResults[T](items=items, page=page, pages=pageCount, per_page=per_page, total=count)
diff --git a/tests/aa_nodes/test_sqlite.py b/tests/aa_nodes/test_sqlite.py
index 32e8c98ac1..e61657e3cd 100644
--- a/tests/aa_nodes/test_sqlite.py
+++ b/tests/aa_nodes/test_sqlite.py
@@ -28,22 +28,6 @@ def test_sqlite_service_can_create_and_get(db: SqliteItemStorage[TestModel]):
     assert db.get("1") == TestModel(id="1", name="Test")
 
 
-def test_sqlite_service_can_list(db: SqliteItemStorage[TestModel]):
-    db.set(TestModel(id="1", name="Test"))
-    db.set(TestModel(id="2", name="Test"))
-    db.set(TestModel(id="3", name="Test"))
-    results = db.list()
-    assert results.page == 0
-    assert results.pages == 1
-    assert results.per_page == 10
-    assert results.total == 3
-    assert results.items == [
-        TestModel(id="1", name="Test"),
-        TestModel(id="2", name="Test"),
-        TestModel(id="3", name="Test"),
-    ]
-
-
 def test_sqlite_service_can_delete(db: SqliteItemStorage[TestModel]):
     db.set(TestModel(id="1", name="Test"))
     db.delete("1")
@@ -73,67 +57,3 @@ def test_sqlite_service_calls_delete_callback(db: SqliteItemStorage[TestModel]):
     db.set(TestModel(id="1", name="Test"))
     db.delete("1")
     assert called
-
-
-def test_sqlite_service_can_list_with_pagination(db: SqliteItemStorage[TestModel]):
-    db.set(TestModel(id="1", name="Test"))
-    db.set(TestModel(id="2", name="Test"))
-    db.set(TestModel(id="3", name="Test"))
-    results = db.list(page=0, per_page=2)
-    assert results.page == 0
-    assert results.pages == 2
-    assert results.per_page == 2
-    assert results.total == 3
-    assert results.items == [TestModel(id="1", name="Test"), TestModel(id="2", name="Test")]
-
-
-def test_sqlite_service_can_list_with_pagination_and_offset(db: SqliteItemStorage[TestModel]):
-    db.set(TestModel(id="1", name="Test"))
-    db.set(TestModel(id="2", name="Test"))
-    db.set(TestModel(id="3", name="Test"))
-    results = db.list(page=1, per_page=2)
-    assert results.page == 1
-    assert results.pages == 2
-    assert results.per_page == 2
-    assert results.total == 3
-    assert results.items == [TestModel(id="3", name="Test")]
-
-
-def test_sqlite_service_can_search(db: SqliteItemStorage[TestModel]):
-    db.set(TestModel(id="1", name="Test"))
-    db.set(TestModel(id="2", name="Test"))
-    db.set(TestModel(id="3", name="Test"))
-    results = db.search(query="Test")
-    assert results.page == 0
-    assert results.pages == 1
-    assert results.per_page == 10
-    assert results.total == 3
-    assert results.items == [
-        TestModel(id="1", name="Test"),
-        TestModel(id="2", name="Test"),
-        TestModel(id="3", name="Test"),
-    ]
-
-
-def test_sqlite_service_can_search_with_pagination(db: SqliteItemStorage[TestModel]):
-    db.set(TestModel(id="1", name="Test"))
-    db.set(TestModel(id="2", name="Test"))
-    db.set(TestModel(id="3", name="Test"))
-    results = db.search(query="Test", page=0, per_page=2)
-    assert results.page == 0
-    assert results.pages == 2
-    assert results.per_page == 2
-    assert results.total == 3
-    assert results.items == [TestModel(id="1", name="Test"), TestModel(id="2", name="Test")]
-
-
-def test_sqlite_service_can_search_with_pagination_and_offset(db: SqliteItemStorage[TestModel]):
-    db.set(TestModel(id="1", name="Test"))
-    db.set(TestModel(id="2", name="Test"))
-    db.set(TestModel(id="3", name="Test"))
-    results = db.search(query="Test", page=1, per_page=2)
-    assert results.page == 1
-    assert results.pages == 2
-    assert results.per_page == 2
-    assert results.total == 3
-    assert results.items == [TestModel(id="3", name="Test")]

From e73298aea24ab18a57ee8718303e94bb5040b18a Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 31 Jan 2024 22:24:29 +1100
Subject: [PATCH 116/133] tidy(item_storage): remove extraneous class attribute
 declarations

---
 .../app/services/item_storage/item_storage_sqlite.py     | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/invokeai/app/services/item_storage/item_storage_sqlite.py b/invokeai/app/services/item_storage/item_storage_sqlite.py
index 99df5486a4..114b1d9274 100644
--- a/invokeai/app/services/item_storage/item_storage_sqlite.py
+++ b/invokeai/app/services/item_storage/item_storage_sqlite.py
@@ -1,5 +1,3 @@
-import sqlite3
-import threading
 from typing import Generic, Optional, TypeVar, get_args
 
 from pydantic import BaseModel, TypeAdapter
@@ -12,13 +10,6 @@ T = TypeVar("T", bound=BaseModel)
 
 
 class SqliteItemStorage(ItemStorageABC, Generic[T]):
-    _table_name: str
-    _conn: sqlite3.Connection
-    _cursor: sqlite3.Cursor
-    _id_field: str
-    _lock: threading.RLock
-    _validator: Optional[TypeAdapter[T]]
-
     def __init__(self, db: SqliteDatabase, table_name: str, id_field: str = "id"):
         super().__init__()
 

From 30367deeca64698c19708f6d238c68dcfb369618 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 31 Jan 2024 23:06:35 +1100
Subject: [PATCH 117/133] feat(nodes): use memory item storage

---
 invokeai/app/api/dependencies.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/invokeai/app/api/dependencies.py b/invokeai/app/api/dependencies.py
index 0adcd677a2..c8309e1729 100644
--- a/invokeai/app/api/dependencies.py
+++ b/invokeai/app/api/dependencies.py
@@ -2,6 +2,7 @@
 
 from logging import Logger
 
+from invokeai.app.services.item_storage.item_storage_memory import ItemStorageMemory
 from invokeai.app.services.shared.sqlite.sqlite_util import init_db
 from invokeai.backend.model_manager.metadata import ModelMetadataStore
 from invokeai.backend.util.logging import InvokeAILogger
@@ -22,7 +23,6 @@ from ..services.invocation_queue.invocation_queue_memory import MemoryInvocation
 from ..services.invocation_services import InvocationServices
 from ..services.invocation_stats.invocation_stats_default import InvocationStatsService
 from ..services.invoker import Invoker
-from ..services.item_storage.item_storage_sqlite import SqliteItemStorage
 from ..services.latents_storage.latents_storage_disk import DiskLatentsStorage
 from ..services.latents_storage.latents_storage_forward_cache import ForwardCacheLatentsStorage
 from ..services.model_install import ModelInstallService
@@ -80,7 +80,7 @@ class ApiDependencies:
         board_records = SqliteBoardRecordStorage(db=db)
         boards = BoardService()
         events = FastAPIEventService(event_handler_id)
-        graph_execution_manager = SqliteItemStorage[GraphExecutionState](db=db, table_name="graph_executions")
+        graph_execution_manager = ItemStorageMemory[GraphExecutionState]()
         image_records = SqliteImageRecordStorage(db=db)
         images = ImageService()
         invocation_cache = MemoryInvocationCache(max_cache_size=config.node_cache_size)

From 198e8c9d55a5615bfcbe2e9c7e25d35f1949eb9f Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 31 Jan 2024 23:36:18 +1100
Subject: [PATCH 118/133] feat(db): add migration 5 to drop `graph_executions`
 table

---
 .../app/services/shared/sqlite/sqlite_util.py |  2 +
 .../sqlite_migrator/migrations/migration_5.py | 46 +++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 invokeai/app/services/shared/sqlite_migrator/migrations/migration_5.py

diff --git a/invokeai/app/services/shared/sqlite/sqlite_util.py b/invokeai/app/services/shared/sqlite/sqlite_util.py
index 202513fb40..d2ed1e2275 100644
--- a/invokeai/app/services/shared/sqlite/sqlite_util.py
+++ b/invokeai/app/services/shared/sqlite/sqlite_util.py
@@ -7,6 +7,7 @@ from invokeai.app.services.shared.sqlite_migrator.migrations.migration_1 import
 from invokeai.app.services.shared.sqlite_migrator.migrations.migration_2 import build_migration_2
 from invokeai.app.services.shared.sqlite_migrator.migrations.migration_3 import build_migration_3
 from invokeai.app.services.shared.sqlite_migrator.migrations.migration_4 import build_migration_4
+from invokeai.app.services.shared.sqlite_migrator.migrations.migration_5 import build_migration_5
 from invokeai.app.services.shared.sqlite_migrator.sqlite_migrator_impl import SqliteMigrator
 
 
@@ -31,6 +32,7 @@ def init_db(config: InvokeAIAppConfig, logger: Logger, image_files: ImageFileSto
     migrator.register_migration(build_migration_2(image_files=image_files, logger=logger))
     migrator.register_migration(build_migration_3(app_config=config, logger=logger))
     migrator.register_migration(build_migration_4())
+    migrator.register_migration(build_migration_5(logger=logger))
     migrator.run_migrations()
 
     return db
diff --git a/invokeai/app/services/shared/sqlite_migrator/migrations/migration_5.py b/invokeai/app/services/shared/sqlite_migrator/migrations/migration_5.py
new file mode 100644
index 0000000000..6c9b23560c
--- /dev/null
+++ b/invokeai/app/services/shared/sqlite_migrator/migrations/migration_5.py
@@ -0,0 +1,46 @@
+import sqlite3
+from logging import Logger
+from typing import cast
+
+from invokeai.app.services.shared.sqlite_migrator.sqlite_migrator_common import Migration
+
+
+class Migration5Callback:
+    def __init__(self, logger: Logger):
+        self._logger = logger
+
+    def __call__(self, cursor: sqlite3.Cursor) -> None:
+        self._drop_graph_executions(cursor)
+
+    def _drop_graph_executions(self, cursor: sqlite3.Cursor) -> None:
+        """Drops the `graph_executions` table."""
+
+        cursor.execute(
+            """--sql
+            SELECT COUNT(*) FROM graph_executions;
+            """
+        )
+        count = cast(int, cursor.fetchone()[0])
+        self._logger.info(f"Clearing {count} old sessions from database")
+        cursor.execute(
+            """--sql
+            DROP TABLE IF EXISTS graph_executions;
+            """
+        )
+
+
+def build_migration_5(logger: Logger) -> Migration:
+    """
+    Build the migration from database version 4 to 5.
+
+    Introduced in v3.6.3, this migration:
+    - Drops the `graph_executions` table. We are able to do this because we are moving the graph storage
+      to be purely in-memory.
+    """
+    migration_5 = Migration(
+        from_version=4,
+        to_version=5,
+        callback=Migration5Callback(logger=logger),
+    )
+
+    return migration_5

From d532073f5b646ab772ce5a60fe7cc970090b6ae4 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 31 Jan 2024 23:56:04 +1100
Subject: [PATCH 119/133] fix(db): check for `graph_executions` table before
 dropping

This is needed to not fail tests; see comment in code.
---
 .../sqlite_migrator/migrations/migration_5.py | 40 +++++++++++++++----
 1 file changed, 32 insertions(+), 8 deletions(-)

diff --git a/invokeai/app/services/shared/sqlite_migrator/migrations/migration_5.py b/invokeai/app/services/shared/sqlite_migrator/migrations/migration_5.py
index 6c9b23560c..ae0f54facb 100644
--- a/invokeai/app/services/shared/sqlite_migrator/migrations/migration_5.py
+++ b/invokeai/app/services/shared/sqlite_migrator/migrations/migration_5.py
@@ -15,19 +15,43 @@ class Migration5Callback:
     def _drop_graph_executions(self, cursor: sqlite3.Cursor) -> None:
         """Drops the `graph_executions` table."""
 
+        # Check if the table exists first. This shouldn't ever be an issue for users, but it is for tests.
+        #
+        # Unlike other database tables, whose schemas are managed by the migrator, `graph_executions`
+        # is created and managed by an instance of `SqliteItemStorage``. Specifically, it is created in the
+        # `__init__` of `SqliteItemStorage`.
+        #
+        # In tests, we don't always create an instance of `SqliteItemStorage`, so the table may not exist in
+        # the test memory db fixture.
+        #
+        # We _do_, however, run the migrator on the test memory db fixtures. So, we need to check if the
+        # table exists before dropping it, else unrelated tests will fail.
+        #
+        # This song and dance won't be necessary again, because we aren't using `SqliteItemStorage` for anything
+        # moving forward.
+
         cursor.execute(
             """--sql
-            SELECT COUNT(*) FROM graph_executions;
-            """
-        )
-        count = cast(int, cursor.fetchone()[0])
-        self._logger.info(f"Clearing {count} old sessions from database")
-        cursor.execute(
-            """--sql
-            DROP TABLE IF EXISTS graph_executions;
+            SELECT name FROM sqlite_master WHERE type='table' AND name='graph_executions';
             """
         )
 
+        if cursor.fetchone():
+            cursor.execute(
+                """--sql
+                SELECT COUNT(*) FROM graph_executions;
+                """
+            )
+            count = cast(int, cursor.fetchone()[0])
+            self._logger.info(f"Clearing {count} old sessions from database")
+            cursor.execute(
+                """--sql
+                DROP TABLE IF EXISTS graph_executions;
+                """
+            )
+        else:
+            self._logger.info("No 'graph_executions' table found.")
+
 
 def build_migration_5(logger: Logger) -> Migration:
     """

From a0eecaecd01dabe9d2678cd39ede8e74706cfb38 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 1 Feb 2024 07:40:56 +1100
Subject: [PATCH 120/133] feat(item_storage): implement item_storage_memory
 max_size

Implemented with unordered dict and set.
---
 .../item_storage/item_storage_memory.py       |  33 +++++-
 tests/test_item_storage_memory.py             | 111 ++++++++++++++++++
 2 files changed, 139 insertions(+), 5 deletions(-)
 create mode 100644 tests/test_item_storage_memory.py

diff --git a/invokeai/app/services/item_storage/item_storage_memory.py b/invokeai/app/services/item_storage/item_storage_memory.py
index 1958c3ee8b..e8846a01a7 100644
--- a/invokeai/app/services/item_storage/item_storage_memory.py
+++ b/invokeai/app/services/item_storage/item_storage_memory.py
@@ -1,3 +1,4 @@
+from contextlib import suppress
 from typing import Generic, Optional, TypeVar
 
 from pydantic import BaseModel
@@ -8,21 +9,43 @@ T = TypeVar("T", bound=BaseModel)
 
 
 class ItemStorageMemory(ItemStorageABC, Generic[T]):
-    def __init__(self, id_field: str = "id") -> None:
+    """
+    Provides a simple in-memory storage for items, with a maximum number of items to store.
+    An item is deleted when the maximum number of items is reached and a new item is added.
+    There is no guarantee about which item will be deleted.
+    """
+
+    def __init__(self, id_field: str = "id", max_items: int = 10) -> None:
         super().__init__()
+        if max_items < 1:
+            raise ValueError("max_items must be at least 1")
+        if not id_field:
+            raise ValueError("id_field must not be empty")
         self._id_field = id_field
         self._items: dict[str, T] = {}
+        self._item_ids: set[str] = set()
+        self._max_items = max_items
 
     def get(self, item_id: str) -> Optional[T]:
         return self._items.get(item_id)
 
     def set(self, item: T) -> None:
-        self._items[getattr(item, self._id_field)] = item
+        item_id = getattr(item, self._id_field)
+        assert isinstance(item_id, str)
+        if item_id in self._items or len(self._items) < self._max_items:
+            # If the item is already stored, or we have room for more items, we can just add it.
+            self._items[item_id] = item
+            self._item_ids.add(item_id)
+        else:
+            # Otherwise, we need to make room for it first.
+            self._items.pop(self._item_ids.pop())
+            self._items[item_id] = item
+            self._item_ids.add(item_id)
         self._on_changed(item)
 
     def delete(self, item_id: str) -> None:
-        try:
+        # Both of these are no-ops if the item doesn't exist.
+        with suppress(KeyError):
             del self._items[item_id]
+            self._item_ids.remove(item_id)
             self._on_deleted(item_id)
-        except KeyError:
-            pass
diff --git a/tests/test_item_storage_memory.py b/tests/test_item_storage_memory.py
new file mode 100644
index 0000000000..601bc5c889
--- /dev/null
+++ b/tests/test_item_storage_memory.py
@@ -0,0 +1,111 @@
+import re
+
+import pytest
+from pydantic import BaseModel
+
+from invokeai.app.services.item_storage.item_storage_memory import ItemStorageMemory
+
+
+class MockItemModel(BaseModel):
+    id: str
+    value: int
+
+
+@pytest.fixture
+def item_storage_memory():
+    return ItemStorageMemory[MockItemModel]()
+
+
+def test_item_storage_memory_initializes():
+    item_storage_memory = ItemStorageMemory()
+    assert item_storage_memory._items == {}
+    assert item_storage_memory._item_ids == set()
+    assert item_storage_memory._id_field == "id"
+    assert item_storage_memory._max_items == 10
+
+    item_storage_memory = ItemStorageMemory(id_field="bananas", max_items=20)
+    assert item_storage_memory._id_field == "bananas"
+    assert item_storage_memory._max_items == 20
+
+    with pytest.raises(ValueError, match=re.escape("max_items must be at least 1")):
+        item_storage_memory = ItemStorageMemory(max_items=0)
+    with pytest.raises(ValueError, match=re.escape("id_field must not be empty")):
+        item_storage_memory = ItemStorageMemory(id_field="")
+
+
+def test_item_storage_memory_sets(item_storage_memory: ItemStorageMemory[MockItemModel]):
+    item_1 = MockItemModel(id="1", value=1)
+    item_storage_memory.set(item_1)
+    assert item_storage_memory._items == {"1": item_1}
+    assert item_storage_memory._item_ids == {"1"}
+
+    item_2 = MockItemModel(id="2", value=2)
+    item_storage_memory.set(item_2)
+    assert item_storage_memory._items == {"1": item_1, "2": item_2}
+    assert item_storage_memory._item_ids == {"1", "2"}
+
+    # Updating value of existing item
+    item_2_updated = MockItemModel(id="2", value=9001)
+    item_storage_memory.set(item_2_updated)
+    assert item_storage_memory._items == {"1": item_1, "2": item_2_updated}
+    assert item_storage_memory._item_ids == {"1", "2"}
+
+
+def test_item_storage_memory_gets(item_storage_memory: ItemStorageMemory[MockItemModel]):
+    item_1 = MockItemModel(id="1", value=1)
+    item_storage_memory.set(item_1)
+    item = item_storage_memory.get("1")
+    assert item == item_1
+
+    item_2 = MockItemModel(id="2", value=2)
+    item_storage_memory.set(item_2)
+    item = item_storage_memory.get("2")
+    assert item == item_2
+
+    item = item_storage_memory.get("3")
+    assert item is None
+
+
+def test_item_storage_memory_deletes(item_storage_memory: ItemStorageMemory[MockItemModel]):
+    item_1 = MockItemModel(id="1", value=1)
+    item_2 = MockItemModel(id="2", value=2)
+    item_storage_memory.set(item_1)
+    item_storage_memory.set(item_2)
+
+    item_storage_memory.delete("2")
+    assert item_storage_memory._items == {"1": item_1}
+    assert item_storage_memory._item_ids == {"1"}
+
+
+def test_item_storage_memory_respects_max():
+    item_storage_memory = ItemStorageMemory(max_items=3)
+    for i in range(10):
+        item_storage_memory.set(MockItemModel(id=str(i), value=i))
+    assert len(item_storage_memory._items) == 3
+
+
+def test_item_storage_memory_calls_set_callback(item_storage_memory: ItemStorageMemory[MockItemModel]):
+    called_item = None
+    item = MockItemModel(id="1", value=1)
+
+    def on_changed(item: MockItemModel):
+        nonlocal called_item
+        called_item = item
+
+    item_storage_memory.on_changed(on_changed)
+    item_storage_memory.set(item)
+    assert called_item == item
+
+
+def test_item_storage_memory_calls_delete_callback(item_storage_memory: ItemStorageMemory[MockItemModel]):
+    called_item_id = None
+    item = MockItemModel(id="1", value=1)
+
+    def on_deleted(item_id: str):
+        nonlocal called_item_id
+        called_item_id = item_id
+
+    item_storage_memory.on_deleted(on_deleted)
+    item_storage_memory.set(item)
+    item_storage_memory.delete("1")
+    assert called_item_id == "1"

From 9f793bdae8e15d44e9040dff299b4139c2a58924 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 1 Feb 2024 07:47:50 +1100
Subject: [PATCH 121/133] feat(item_storage): implement item_storage_memory
 with LRU eviction strategy

Implemented with OrderedDict.
---
 .../item_storage/item_storage_memory.py       | 31 +++++++++----------
 tests/test_item_storage_memory.py             | 11 +++----
 2 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/invokeai/app/services/item_storage/item_storage_memory.py b/invokeai/app/services/item_storage/item_storage_memory.py
index e8846a01a7..028b4808cf 100644
--- a/invokeai/app/services/item_storage/item_storage_memory.py
+++ b/invokeai/app/services/item_storage/item_storage_memory.py
@@ -1,3 +1,4 @@
+from collections import OrderedDict
 from contextlib import suppress
 from typing import Generic, Optional, TypeVar
 
@@ -11,8 +12,7 @@ T = TypeVar("T", bound=BaseModel)
 class ItemStorageMemory(ItemStorageABC, Generic[T]):
     """
     Provides a simple in-memory storage for items, with a maximum number of items to store.
-    An item is deleted when the maximum number of items is reached and a new item is added.
-    There is no guarantee about which item will be deleted.
+    The storage uses the LRU strategy to evict items from storage when the max has been reached.
     """
 
     def __init__(self, id_field: str = "id", max_items: int = 10) -> None:
@@ -22,30 +22,29 @@ class ItemStorageMemory(ItemStorageABC, Generic[T]):
         if not id_field:
             raise ValueError("id_field must not be empty")
         self._id_field = id_field
-        self._items: dict[str, T] = {}
-        self._item_ids: set[str] = set()
+        self._items: OrderedDict[str, T] = OrderedDict()
         self._max_items = max_items
 
     def get(self, item_id: str) -> Optional[T]:
+        # If the item exists, move it to the end of the OrderedDict.
+        item = self._items.pop(item_id, None)
+        if item is not None:
+            self._items[item_id] = item
         return self._items.get(item_id)
 
     def set(self, item: T) -> None:
         item_id = getattr(item, self._id_field)
-        assert isinstance(item_id, str)
-        if item_id in self._items or len(self._items) < self._max_items:
-            # If the item is already stored, or we have room for more items, we can just add it.
-            self._items[item_id] = item
-            self._item_ids.add(item_id)
-        else:
-            # Otherwise, we need to make room for it first.
-            self._items.pop(self._item_ids.pop())
-            self._items[item_id] = item
-            self._item_ids.add(item_id)
+        if item_id in self._items:
+            # If item already exists, remove it and add it to the end
+            self._items.pop(item_id)
+        elif len(self._items) >= self._max_items:
+            # If cache is full, evict the least recently used item
+            self._items.popitem(last=False)
+        self._items[item_id] = item
         self._on_changed(item)
 
     def delete(self, item_id: str) -> None:
-        # Both of these are no-ops if the item doesn't exist.
+        # This is a no-op if the item doesn't exist.
         with suppress(KeyError):
             del self._items[item_id]
-            self._item_ids.remove(item_id)
             self._on_deleted(item_id)
diff --git a/tests/test_item_storage_memory.py b/tests/test_item_storage_memory.py
index 601bc5c889..cfd1ffb834 100644
--- a/tests/test_item_storage_memory.py
+++ b/tests/test_item_storage_memory.py
@@ -19,7 +19,6 @@ def item_storage_memory():
 def test_item_storage_memory_initializes():
     item_storage_memory = ItemStorageMemory()
     assert item_storage_memory._items == {}
-    assert item_storage_memory._item_ids == set()
     assert item_storage_memory._id_field == "id"
     assert item_storage_memory._max_items == 10
 
@@ -37,18 +36,15 @@ def test_item_storage_memory_sets(item_storage_memory: ItemStorageMemory[MockIte
     item_1 = MockItemModel(id="1", value=1)
     item_storage_memory.set(item_1)
     assert item_storage_memory._items == {"1": item_1}
-    assert item_storage_memory._item_ids == {"1"}
 
     item_2 = MockItemModel(id="2", value=2)
     item_storage_memory.set(item_2)
     assert item_storage_memory._items == {"1": item_1, "2": item_2}
-    assert item_storage_memory._item_ids == {"1", "2"}
 
     # Updating value of existing item
     item_2_updated = MockItemModel(id="2", value=9001)
     item_storage_memory.set(item_2_updated)
     assert item_storage_memory._items == {"1": item_1, "2": item_2_updated}
-    assert item_storage_memory._item_ids == {"1", "2"}
 
 
 def test_item_storage_memory_gets(item_storage_memory: ItemStorageMemory[MockItemModel]):
@@ -74,14 +70,17 @@ def test_item_storage_memory_deletes(item_storage_memory: ItemStorageMemory[Mock
 
     item_storage_memory.delete("2")
     assert item_storage_memory._items == {"1": item_1}
-    assert item_storage_memory._item_ids == {"1"}
 
 
 def test_item_storage_memory_respects_max():
     item_storage_memory = ItemStorageMemory(max_items=3)
     for i in range(10):
         item_storage_memory.set(MockItemModel(id=str(i), value=i))
-    assert len(item_storage_memory._items) == 3
+    assert item_storage_memory._items == {
+        "7": MockItemModel(id="7", value=7),
+        "8": MockItemModel(id="8", value=8),
+        "9": MockItemModel(id="9", value=9),
+    }
 
 
 def test_item_storage_memory_calls_set_callback(item_storage_memory: ItemStorageMemory[MockItemModel]):

From ee6fc4ab1d6276200a1a0e3dacda4a5af558d1ab Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 2 Feb 2024 08:57:32 +1100
Subject: [PATCH 122/133] chore(item_storage): excise SqliteItemStorage

---
 .../item_storage/item_storage_sqlite.py       | 81 -------------------
 tests/aa_nodes/test_graph_execution_state.py  |  9 +--
 tests/aa_nodes/test_invoker.py                | 11 +--
 tests/aa_nodes/test_sqlite.py                 | 59 --------------
 4 files changed, 5 insertions(+), 155 deletions(-)
 delete mode 100644 invokeai/app/services/item_storage/item_storage_sqlite.py
 delete mode 100644 tests/aa_nodes/test_sqlite.py

diff --git a/invokeai/app/services/item_storage/item_storage_sqlite.py b/invokeai/app/services/item_storage/item_storage_sqlite.py
deleted file mode 100644
index 114b1d9274..0000000000
--- a/invokeai/app/services/item_storage/item_storage_sqlite.py
+++ /dev/null
@@ -1,81 +0,0 @@
-from typing import Generic, Optional, TypeVar, get_args
-
-from pydantic import BaseModel, TypeAdapter
-
-from invokeai.app.services.shared.sqlite.sqlite_database import SqliteDatabase
-
-from .item_storage_base import ItemStorageABC
-
-T = TypeVar("T", bound=BaseModel)
-
-
-class SqliteItemStorage(ItemStorageABC, Generic[T]):
-    def __init__(self, db: SqliteDatabase, table_name: str, id_field: str = "id"):
-        super().__init__()
-
-        self._lock = db.lock
-        self._conn = db.conn
-        self._table_name = table_name
-        self._id_field = id_field  # TODO: validate that T has this field
-        self._cursor = self._conn.cursor()
-        self._validator: Optional[TypeAdapter[T]] = None
-
-        self._create_table()
-
-    def _create_table(self):
-        try:
-            self._lock.acquire()
-            self._cursor.execute(
-                f"""CREATE TABLE IF NOT EXISTS {self._table_name} (
-                item TEXT,
-                id TEXT GENERATED ALWAYS AS (json_extract(item, '$.{self._id_field}')) VIRTUAL NOT NULL);"""
-            )
-            self._cursor.execute(
-                f"""CREATE UNIQUE INDEX IF NOT EXISTS {self._table_name}_id ON {self._table_name}(id);"""
-            )
-        finally:
-            self._lock.release()
-
-    def _parse_item(self, item: str) -> T:
-        if self._validator is None:
-            """
-            We don't get access to `__orig_class__` in `__init__()`, and we need this before start(), so
-            we can create it when it is first needed instead.
-            __orig_class__ is technically an implementation detail of the typing module, not a supported API
-            """
-            self._validator = TypeAdapter(get_args(self.__orig_class__)[0])  # type: ignore [attr-defined]
-        return self._validator.validate_json(item)
-
-    def set(self, item: T):
-        try:
-            self._lock.acquire()
-            self._cursor.execute(
-                f"""INSERT OR REPLACE INTO {self._table_name} (item) VALUES (?);""",
-                (item.model_dump_json(warnings=False, exclude_none=True),),
-            )
-            self._conn.commit()
-        finally:
-            self._lock.release()
-        self._on_changed(item)
-
-    def get(self, id: str) -> Optional[T]:
-        try:
-            self._lock.acquire()
-            self._cursor.execute(f"""SELECT item FROM {self._table_name} WHERE id = ?;""", (str(id),))
-            result = self._cursor.fetchone()
-        finally:
-            self._lock.release()
-
-        if not result:
-            return None
-
-        return self._parse_item(result[0])
-
-    def delete(self, id: str):
-        try:
-            self._lock.acquire()
-            self._cursor.execute(f"""DELETE FROM {self._table_name} WHERE id = ?;""", (str(id),))
-            self._conn.commit()
-        finally:
-            self._lock.release()
-        self._on_deleted(id)
diff --git a/tests/aa_nodes/test_graph_execution_state.py b/tests/aa_nodes/test_graph_execution_state.py
index bb31161426..fab1fa4598 100644
--- a/tests/aa_nodes/test_graph_execution_state.py
+++ b/tests/aa_nodes/test_graph_execution_state.py
@@ -2,6 +2,8 @@ import logging
 
 import pytest
 
+from invokeai.app.services.item_storage.item_storage_memory import ItemStorageMemory
+
 # This import must happen before other invoke imports or test in other files(!!) break
 from .test_nodes import (  # isort: split
     PromptCollectionTestInvocation,
@@ -19,7 +21,6 @@ from invokeai.app.services.invocation_processor.invocation_processor_default imp
 from invokeai.app.services.invocation_queue.invocation_queue_memory import MemoryInvocationQueue
 from invokeai.app.services.invocation_services import InvocationServices
 from invokeai.app.services.invocation_stats.invocation_stats_default import InvocationStatsService
-from invokeai.app.services.item_storage.item_storage_sqlite import SqliteItemStorage
 from invokeai.app.services.session_queue.session_queue_common import DEFAULT_QUEUE_ID
 from invokeai.app.services.shared.graph import (
     CollectInvocation,
@@ -27,8 +28,6 @@ from invokeai.app.services.shared.graph import (
     GraphExecutionState,
     IterateInvocation,
 )
-from invokeai.backend.util.logging import InvokeAILogger
-from tests.fixtures.sqlite_database import create_mock_sqlite_database
 
 from .test_invoker import create_edge
 
@@ -48,10 +47,8 @@ def simple_graph():
 @pytest.fixture
 def mock_services() -> InvocationServices:
     configuration = InvokeAIAppConfig(use_memory_db=True, node_cache_size=0)
-    logger = InvokeAILogger.get_logger()
-    db = create_mock_sqlite_database(configuration, logger)
     # NOTE: none of these are actually called by the test invocations
-    graph_execution_manager = SqliteItemStorage[GraphExecutionState](db=db, table_name="graph_executions")
+    graph_execution_manager = ItemStorageMemory[GraphExecutionState]()
     return InvocationServices(
         board_image_records=None,  # type: ignore
         board_images=None,  # type: ignore
diff --git a/tests/aa_nodes/test_invoker.py b/tests/aa_nodes/test_invoker.py
index d4959282a1..2ae4eab58a 100644
--- a/tests/aa_nodes/test_invoker.py
+++ b/tests/aa_nodes/test_invoker.py
@@ -3,8 +3,7 @@ import logging
 import pytest
 
 from invokeai.app.services.config.config_default import InvokeAIAppConfig
-from invokeai.backend.util.logging import InvokeAILogger
-from tests.fixtures.sqlite_database import create_mock_sqlite_database
+from invokeai.app.services.item_storage.item_storage_memory import ItemStorageMemory
 
 # This import must happen before other invoke imports or test in other files(!!) break
 from .test_nodes import (  # isort: split
@@ -22,7 +21,6 @@ from invokeai.app.services.invocation_queue.invocation_queue_memory import Memor
 from invokeai.app.services.invocation_services import InvocationServices
 from invokeai.app.services.invocation_stats.invocation_stats_default import InvocationStatsService
 from invokeai.app.services.invoker import Invoker
-from invokeai.app.services.item_storage.item_storage_sqlite import SqliteItemStorage
 from invokeai.app.services.session_queue.session_queue_common import DEFAULT_QUEUE_ID
 from invokeai.app.services.shared.graph import Graph, GraphExecutionState, GraphInvocation
 
@@ -53,11 +51,6 @@ def graph_with_subgraph():
 @pytest.fixture
 def mock_services() -> InvocationServices:
     configuration = InvokeAIAppConfig(use_memory_db=True, node_cache_size=0)
-    logger = InvokeAILogger.get_logger()
-    db = create_mock_sqlite_database(configuration, logger)
-
-    # NOTE: none of these are actually called by the test invocations
-    graph_execution_manager = SqliteItemStorage[GraphExecutionState](db=db, table_name="graph_executions")
     return InvocationServices(
         board_image_records=None,  # type: ignore
         board_images=None,  # type: ignore
@@ -65,7 +58,7 @@ def mock_services() -> InvocationServices:
         boards=None,  # type: ignore
         configuration=configuration,
         events=TestEventService(),
-        graph_execution_manager=graph_execution_manager,
+        graph_execution_manager=ItemStorageMemory[GraphExecutionState](),
         image_files=None,  # type: ignore
         image_records=None,  # type: ignore
         images=None,  # type: ignore
diff --git a/tests/aa_nodes/test_sqlite.py b/tests/aa_nodes/test_sqlite.py
deleted file mode 100644
index e61657e3cd..0000000000
--- a/tests/aa_nodes/test_sqlite.py
+++ /dev/null
@@ -1,59 +0,0 @@
-import pytest
-from pydantic import BaseModel, Field
-
-from invokeai.app.services.config.config_default import InvokeAIAppConfig
-from invokeai.app.services.item_storage.item_storage_sqlite import SqliteItemStorage
-from invokeai.app.services.shared.sqlite.sqlite_database import SqliteDatabase
-from invokeai.backend.util.logging import InvokeAILogger
-
-
-class TestModel(BaseModel):
-    id: str = Field(description="ID")
-    name: str = Field(description="Name")
-    __test__ = False  # not a pytest test case
-
-
-@pytest.fixture
-def db() -> SqliteItemStorage[TestModel]:
-    config = InvokeAIAppConfig(use_memory_db=True)
-    logger = InvokeAILogger.get_logger()
-    db_path = None if config.use_memory_db else config.db_path
-    db = SqliteDatabase(db_path=db_path, logger=logger, verbose=config.log_sql)
-    sqlite_item_storage = SqliteItemStorage[TestModel](db=db, table_name="test", id_field="id")
-    return sqlite_item_storage
-
-
-def test_sqlite_service_can_create_and_get(db: SqliteItemStorage[TestModel]):
-    db.set(TestModel(id="1", name="Test"))
-    assert db.get("1") == TestModel(id="1", name="Test")
-
-
-def test_sqlite_service_can_delete(db: SqliteItemStorage[TestModel]):
-    db.set(TestModel(id="1", name="Test"))
-    db.delete("1")
-    assert db.get("1") is None
-
-
-def test_sqlite_service_calls_set_callback(db: SqliteItemStorage[TestModel]):
-    called = False
-
-    def on_changed(item: TestModel):
-        nonlocal called
-        called = True
-
-    db.on_changed(on_changed)
-    db.set(TestModel(id="1", name="Test"))
-    assert called
-
-
-def test_sqlite_service_calls_delete_callback(db: SqliteItemStorage[TestModel]):
-    called = False
-
-    def on_deleted(item_id: str):
-        nonlocal called
-        called = True
-
-    db.on_deleted(on_deleted)
-    db.set(TestModel(id="1", name="Test"))
-    db.delete("1")
-    assert called

From 1ac85fd049565e6805f539ea7dd390d36ab1344a Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 2 Feb 2024 09:08:58 +1100
Subject: [PATCH 123/133] tidy(migrator): remove logic to check if
 graph_executions exists in migration 5

Initially I wanted to show how many sessions were being deleted. In hindsight, this is not great:
- It requires extra logic in the migrator, which should be as simple as possible.
- It may be alarming to see "Clearing 224591 old sessions".

The app still reports on freed space during the DB startup logic.
---
 .../app/services/shared/sqlite/sqlite_util.py |  2 +-
 .../sqlite_migrator/migrations/migration_5.py | 42 ++-----------------
 2 files changed, 4 insertions(+), 40 deletions(-)

diff --git a/invokeai/app/services/shared/sqlite/sqlite_util.py b/invokeai/app/services/shared/sqlite/sqlite_util.py
index d2ed1e2275..6079b3f08d 100644
--- a/invokeai/app/services/shared/sqlite/sqlite_util.py
+++ b/invokeai/app/services/shared/sqlite/sqlite_util.py
@@ -32,7 +32,7 @@ def init_db(config: InvokeAIAppConfig, logger: Logger, image_files: ImageFileSto
     migrator.register_migration(build_migration_2(image_files=image_files, logger=logger))
     migrator.register_migration(build_migration_3(app_config=config, logger=logger))
     migrator.register_migration(build_migration_4())
-    migrator.register_migration(build_migration_5(logger=logger))
+    migrator.register_migration(build_migration_5())
     migrator.run_migrations()
 
     return db
diff --git a/invokeai/app/services/shared/sqlite_migrator/migrations/migration_5.py b/invokeai/app/services/shared/sqlite_migrator/migrations/migration_5.py
index ae0f54facb..b2e8c206d8 100644
--- a/invokeai/app/services/shared/sqlite_migrator/migrations/migration_5.py
+++ b/invokeai/app/services/shared/sqlite_migrator/migrations/migration_5.py
@@ -1,59 +1,23 @@
 import sqlite3
-from logging import Logger
-from typing import cast
 
 from invokeai.app.services.shared.sqlite_migrator.sqlite_migrator_common import Migration
 
 
 class Migration5Callback:
-    def __init__(self, logger: Logger):
-        self._logger = logger
-
     def __call__(self, cursor: sqlite3.Cursor) -> None:
         self._drop_graph_executions(cursor)
 
     def _drop_graph_executions(self, cursor: sqlite3.Cursor) -> None:
         """Drops the `graph_executions` table."""
 
-        # Check if the table exists first. This shouldn't ever be an issue for users, but it is for tests.
-        #
-        # Unlike other database tables, whose schemas are managed by the migrator, `graph_executions`
-        # is created and managed by an instance of `SqliteItemStorage``. Specifically, it is created in the
-        # `__init__` of `SqliteItemStorage`.
-        #
-        # In tests, we don't always create an instance of `SqliteItemStorage`, so the table may not exist in
-        # the test memory db fixture.
-        #
-        # We _do_, however, run the migrator on the test memory db fixtures. So, we need to check if the
-        # table exists before dropping it, else unrelated tests will fail.
-        #
-        # This song and dance won't be necessary again, because we aren't using `SqliteItemStorage` for anything
-        # moving forward.
-
         cursor.execute(
             """--sql
-            SELECT name FROM sqlite_master WHERE type='table' AND name='graph_executions';
+            DROP TABLE IF EXISTS graph_executions;
             """
         )
 
-        if cursor.fetchone():
-            cursor.execute(
-                """--sql
-                SELECT COUNT(*) FROM graph_executions;
-                """
-            )
-            count = cast(int, cursor.fetchone()[0])
-            self._logger.info(f"Clearing {count} old sessions from database")
-            cursor.execute(
-                """--sql
-                DROP TABLE IF EXISTS graph_executions;
-                """
-            )
-        else:
-            self._logger.info("No 'graph_executions' table found.")
 
-
-def build_migration_5(logger: Logger) -> Migration:
+def build_migration_5() -> Migration:
     """
     Build the migration from database version 4 to 5.
 
@@ -64,7 +28,7 @@ def build_migration_5(logger: Logger) -> Migration:
     migration_5 = Migration(
         from_version=4,
         to_version=5,
-        callback=Migration5Callback(logger=logger),
+        callback=Migration5Callback(),
     )
 
     return migration_5

From 88164447e951481a22cb84c6182cf70eb5588a50 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 2 Feb 2024 11:00:51 +1100
Subject: [PATCH 124/133] fix(ui): hide HRF if SDXL model selected

---
 .../ImageSettingsAccordion/ImageSettingsAccordion.tsx     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx
index 4b5cc9c1d3..2f778fe717 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx
@@ -26,7 +26,7 @@ import { ImageSizeLinear } from './ImageSizeLinear';
 const selector = createMemoizedSelector(
   [selectGenerationSlice, selectCanvasSlice, selectHrfSlice, activeTabNameSelector],
   (generation, canvas, hrf, activeTabName) => {
-    const { shouldRandomizeSeed } = generation;
+    const { shouldRandomizeSeed, model } = generation;
     const { hrfEnabled } = hrf;
     const badges: string[] = [];
 
@@ -56,7 +56,7 @@ const selector = createMemoizedSelector(
     if (hrfEnabled) {
       badges.push('HiRes Fix');
     }
-    return { badges, activeTabName };
+    return { badges, activeTabName, isSDXL: model?.base_model === 'sdxl' };
   }
 );
 
@@ -66,7 +66,7 @@ const scalingLabelProps: FormLabelProps = {
 
 export const ImageSettingsAccordion = memo(() => {
   const { t } = useTranslation();
-  const { badges, activeTabName } = useAppSelector(selector);
+  const { badges, activeTabName, isSDXL } = useAppSelector(selector);
   const { isOpen: isOpenAccordion, onToggle: onToggleAccordion } = useStandaloneAccordionToggle({
     id: 'image-settings',
     defaultIsOpen: true,
@@ -94,7 +94,7 @@ export const ImageSettingsAccordion = memo(() => {
             </Flex>
             {(activeTabName === 'img2img' || activeTabName === 'unifiedCanvas') && <ImageToImageStrength />}
             {activeTabName === 'img2img' && <ImageToImageFit />}
-            {activeTabName === 'txt2img' && <HrfSettings />}
+            {activeTabName === 'txt2img' && !isSDXL && <HrfSettings />}
             {activeTabName === 'unifiedCanvas' && (
               <>
                 <ParamScaleBeforeProcessing />

From b53e432b0f0d364d7905e169ddb7a978f4ab505a Mon Sep 17 00:00:00 2001
From: Alexander Eichhorn <pfannkuchensack@einfach-doof.de>
Date: Thu, 1 Feb 2024 17:01:49 +0100
Subject: [PATCH 125/133] translationBot(ui): update translation (German)

Currently translated at 60.8% (871 of 1432 strings)

Co-authored-by: Alexander Eichhorn <pfannkuchensack@einfach-doof.de>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/de/
Translation: InvokeAI/Web UI
---
 invokeai/frontend/web/public/locales/de.json | 41 +++++++++++++++-----
 1 file changed, 32 insertions(+), 9 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/de.json b/invokeai/frontend/web/public/locales/de.json
index 10b2ce2b0c..1444acba3a 100644
--- a/invokeai/frontend/web/public/locales/de.json
+++ b/invokeai/frontend/web/public/locales/de.json
@@ -98,7 +98,7 @@
         "outputs": "Ausgabe",
         "data": "Daten",
         "safetensors": "Safetensors",
-        "outpaint": "outpaint",
+        "outpaint": "Ausmalen",
         "details": "Details",
         "format": "Format",
         "unknown": "Unbekannt",
@@ -131,7 +131,8 @@
         "localSystem": "Lokales System",
         "orderBy": "Ordnen nach",
         "saveAs": "Speicher als",
-        "updated": "Aktualisiert"
+        "updated": "Aktualisiert",
+        "copy": "Kopieren"
     },
     "gallery": {
         "generations": "Erzeugungen",
@@ -161,7 +162,13 @@
         "currentlyInUse": "Dieses Bild wird derzeit in den folgenden Funktionen verwendet:",
         "deleteImagePermanent": "Gelöschte Bilder können nicht wiederhergestellt werden.",
         "autoAssignBoardOnClick": "Board per Klick automatisch zuweisen",
-        "noImageSelected": "Kein Bild ausgewählt"
+        "noImageSelected": "Kein Bild ausgewählt",
+        "problemDeletingImagesDesc": "Eins oder mehr Bilder könnten nicht gelöscht werden",
+        "starImage": "Bild markieren",
+        "assets": "Ressourcen",
+        "unstarImage": "Markierung Entfernen",
+        "image": "Bild",
+        "deleteSelection": "Lösche markierte"
     },
     "hotkeys": {
         "keyboardShortcuts": "Tastenkürzel",
@@ -365,7 +372,13 @@
         "addNodes": {
             "title": "Knotenpunkt hinzufügen",
             "desc": "Öffnet das Menü zum Hinzufügen von Knoten"
-        }
+        },
+        "cancelAndClear": {
+            "title": "Abbruch und leeren"
+        },
+        "noHotkeysFound": "Kein Hotkey gefunden",
+        "searchHotkeys": "Hotkeys durchsuchen",
+        "clearSearch": "Suche leeren"
     },
     "modelManager": {
         "modelAdded": "Model hinzugefügt",
@@ -832,7 +845,13 @@
         "hedDescription": "Ganzheitlich verschachtelte Kantenerkennung",
         "scribble": "Scribble",
         "maxFaces": "Maximal Anzahl Gesichter",
-        "resizeSimple": "Größe ändern (einfach)"
+        "resizeSimple": "Größe ändern (einfach)",
+        "large": "Groß",
+        "modelSize": "Modell Größe",
+        "small": "Klein",
+        "base": "Basis",
+        "depthAnything": "Depth Anything",
+        "depthAnythingDescription": "Erstellung einer Tiefenkarte mit der Depth Anything-Technik"
     },
     "queue": {
         "status": "Status",
@@ -865,7 +884,7 @@
         "item": "Auftrag",
         "notReady": "Warteschlange noch nicht bereit",
         "batchValues": "Stapel Werte",
-        "queueCountPrediction": "{{predicted}} zur Warteschlange hinzufügen",
+        "queueCountPrediction": "{{promptsCount}} Prompts × {{iterations}} Iterationen -> {{count}} Generationen",
         "queuedCount": "{{pending}} wartenden Elemente",
         "clearQueueAlertDialog": "Die Warteschlange leeren, stoppt den aktuellen Prozess und leert die Warteschlange komplett.",
         "completedIn": "Fertig in",
@@ -887,7 +906,9 @@
         "back": "Hinten",
         "resumeSucceeded": "Prozessor wieder aufgenommen",
         "resumeTooltip": "Prozessor wieder aufnehmen",
-        "time": "Zeit"
+        "time": "Zeit",
+        "batchQueuedDesc_one": "{{count}} Eintrage ans {{direction}} der Wartschlange hinzugefügt",
+        "batchQueuedDesc_other": "{{count}} Einträge ans {{direction}} der Wartschlange hinzugefügt"
     },
     "metadata": {
         "negativePrompt": "Negativ Beschreibung",
@@ -956,7 +977,8 @@
         "enable": "Aktivieren",
         "clear": "Leeren",
         "maxCacheSize": "Maximale Cache Größe",
-        "cacheSize": "Cache Größe"
+        "cacheSize": "Cache Größe",
+        "useCache": "Benutze Cache"
     },
     "embedding": {
         "noMatchingEmbedding": "Keine passenden Embeddings",
@@ -1042,7 +1064,8 @@
         },
         "compositing": {
             "coherenceTab": "Kohärenzpass",
-            "infillTab": "Füllung"
+            "infillTab": "Füllung",
+            "title": "Compositing"
         }
     }
 }

From c9b5f06c4216c1a8ca74cff250384484eb1d717c Mon Sep 17 00:00:00 2001
From: Wubbbi <clari.skyrim63@gmail.com>
Date: Thu, 1 Feb 2024 13:16:13 +0100
Subject: [PATCH 126/133] Update diffusers + hotfix

---
 invokeai/backend/util/hotfixes.py | 4 ++--
 pyproject.toml                    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/invokeai/backend/util/hotfixes.py b/invokeai/backend/util/hotfixes.py
index b0e31796d5..682da31a63 100644
--- a/invokeai/backend/util/hotfixes.py
+++ b/invokeai/backend/util/hotfixes.py
@@ -3,7 +3,7 @@ from typing import Any, Dict, List, Optional, Tuple, Union
 import diffusers
 import torch
 from diffusers.configuration_utils import ConfigMixin, register_to_config
-from diffusers.loaders import FromOriginalControlnetMixin
+from diffusers.loaders import FromOriginalControlNetMixin
 from diffusers.models.attention_processor import AttentionProcessor, AttnProcessor
 from diffusers.models.controlnet import ControlNetConditioningEmbedding, ControlNetOutput, zero_module
 from diffusers.models.embeddings import (
@@ -27,7 +27,7 @@ from invokeai.backend.util.logging import InvokeAILogger
 logger = InvokeAILogger.get_logger(__name__)
 
 
-class ControlNetModel(ModelMixin, ConfigMixin, FromOriginalControlnetMixin):
+class ControlNetModel(ModelMixin, ConfigMixin, FromOriginalControlNetMixin):
     """
     A ControlNet model.
 
diff --git a/pyproject.toml b/pyproject.toml
index b96a6756f3..8ad1da67b8 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -38,7 +38,7 @@ dependencies = [
   "clip_anytorch==2.5.2",       # replacing "clip @ https://github.com/openai/CLIP/archive/eaa22acb90a5876642d0507623e859909230a52d.zip",
   "compel==2.0.2",
   "controlnet-aux==0.0.7",
-  "diffusers[torch]==0.25.1",
+  "diffusers[torch]==0.26.0",
   "invisible-watermark==0.2.0", # needed to install SDXL base and refiner using their repo_ids
   "mediapipe==0.10.7",          # needed for "mediapipeface" controlnet model
   "numpy==1.26.3",              # >1.24.0 is needed to use the 'strict' argument to np.testing.assert_array_equal()

From 413fe566b84bd8566f21b1fafdc150136f58a033 Mon Sep 17 00:00:00 2001
From: Wubbbi <clari.skyrim63@gmail.com>
Date: Thu, 1 Feb 2024 14:29:01 +0100
Subject: [PATCH 127/133] Fix imports

---
 invokeai/backend/util/hotfixes.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/invokeai/backend/util/hotfixes.py b/invokeai/backend/util/hotfixes.py
index 682da31a63..426ef8e089 100644
--- a/invokeai/backend/util/hotfixes.py
+++ b/invokeai/backend/util/hotfixes.py
@@ -14,8 +14,8 @@ from diffusers.models.embeddings import (
     Timesteps,
 )
 from diffusers.models.modeling_utils import ModelMixin
-from diffusers.models.unet_2d_blocks import CrossAttnDownBlock2D, DownBlock2D, UNetMidBlock2DCrossAttn, get_down_block
-from diffusers.models.unet_2d_condition import UNet2DConditionModel
+from diffusers.models.unets.unet_2d_blocks import CrossAttnDownBlock2D, DownBlock2D, UNetMidBlock2DCrossAttn, get_down_block
+from diffusers.models.unets.unet_2d_condition import UNet2DConditionModel
 from torch import nn
 
 from invokeai.backend.util.logging import InvokeAILogger

From 5e1e50bd47b87a963ddf9e56b10a28d66a5cbe09 Mon Sep 17 00:00:00 2001
From: Wubbbi <clari.skyrim63@gmail.com>
Date: Thu, 1 Feb 2024 14:56:17 +0100
Subject: [PATCH 128/133] Fix hopefully last import

---
 .../stable_diffusion/diffusion/cross_attention_control.py    | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/invokeai/backend/stable_diffusion/diffusion/cross_attention_control.py b/invokeai/backend/stable_diffusion/diffusion/cross_attention_control.py
index 92a538ff70..91485b87ca 100644
--- a/invokeai/backend/stable_diffusion/diffusion/cross_attention_control.py
+++ b/invokeai/backend/stable_diffusion/diffusion/cross_attention_control.py
@@ -1,5 +1,4 @@
-# adapted from bloc97's CrossAttentionControl colab
-# https://github.com/bloc97/CrossAttentionControl
+# adapted from bloc97's CrossAttentionControl colab# https://github.com/bloc97/CrossAttentionControl
 
 
 import enum
@@ -12,7 +11,7 @@ import psutil
 import torch
 from compel.cross_attention_control import Arguments
 from diffusers.models.attention_processor import Attention, AttentionProcessor, AttnProcessor, SlicedAttnProcessor
-from diffusers.models.unet_2d_condition import UNet2DConditionModel
+from diffusers.models.unets.unet_2d_condition import UNet2DConditionModel
 from torch import nn
 
 import invokeai.backend.util.logging as logger

From 73a077956bcf88d25bd2d0b314104d08add5811f Mon Sep 17 00:00:00 2001
From: Wubbbi <clari.skyrim63@gmail.com>
Date: Thu, 1 Feb 2024 15:05:35 +0100
Subject: [PATCH 129/133] Why did my IDE change the comment?

---
 .../stable_diffusion/diffusion/cross_attention_control.py      | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/invokeai/backend/stable_diffusion/diffusion/cross_attention_control.py b/invokeai/backend/stable_diffusion/diffusion/cross_attention_control.py
index 91485b87ca..1741440bc2 100644
--- a/invokeai/backend/stable_diffusion/diffusion/cross_attention_control.py
+++ b/invokeai/backend/stable_diffusion/diffusion/cross_attention_control.py
@@ -1,4 +1,5 @@
-# adapted from bloc97's CrossAttentionControl colab# https://github.com/bloc97/CrossAttentionControl
+# adapted from bloc97's CrossAttentionControl colab
+# https://github.com/bloc97/CrossAttentionControl
 
 
 import enum

From 1057314508253c2c61aca192afa9c38408feb6dd Mon Sep 17 00:00:00 2001
From: Wubbbi <clari.skyrim63@gmail.com>
Date: Thu, 1 Feb 2024 18:02:07 +0100
Subject: [PATCH 130/133] Fix ruff?

---
 invokeai/backend/util/hotfixes.py | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/invokeai/backend/util/hotfixes.py b/invokeai/backend/util/hotfixes.py
index 426ef8e089..7e362fe958 100644
--- a/invokeai/backend/util/hotfixes.py
+++ b/invokeai/backend/util/hotfixes.py
@@ -14,7 +14,12 @@ from diffusers.models.embeddings import (
     Timesteps,
 )
 from diffusers.models.modeling_utils import ModelMixin
-from diffusers.models.unets.unet_2d_blocks import CrossAttnDownBlock2D, DownBlock2D, UNetMidBlock2DCrossAttn, get_down_block
+from diffusers.models.unets.unet_2d_blocks import (
+    CrossAttnDownBlock2D,
+    DownBlock2D,
+    UNetMidBlock2DCrossAttn,
+    get_down_block,
+)
 from diffusers.models.unets.unet_2d_condition import UNet2DConditionModel
 from torch import nn
 

From cf7a7928af448adb921d0f834b063b378a9a7b53 Mon Sep 17 00:00:00 2001
From: Kent Keirsey <31807370+hipsterusername@users.noreply.github.com>
Date: Thu, 1 Feb 2024 12:16:45 -0500
Subject: [PATCH 131/133] Update mkdocs.yml

---
 mkdocs.yml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/mkdocs.yml b/mkdocs.yml
index 24206bfa6a..bdd429fb93 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -107,7 +107,6 @@ plugins:
 extra_javascript:
   - https://unpkg.com/tablesort@5.3.0/dist/tablesort.min.js
   - javascripts/tablesort.js
-  - https://widget.kapa.ai/kapa-widget.bundle.js
   - javascript/init_kapa_widget.js
 
 extra:

From 60c3a4ad5ee02ba3d9f1ad0a1c0fb78595111e36 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Fri, 2 Feb 2024 13:44:31 +0530
Subject: [PATCH 132/133] chore: add Hand Refiner to communityNodes.md

---
 docs/nodes/communityNodes.md | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/docs/nodes/communityNodes.md b/docs/nodes/communityNodes.md
index ef1f154742..7dbcef3836 100644
--- a/docs/nodes/communityNodes.md
+++ b/docs/nodes/communityNodes.md
@@ -25,6 +25,7 @@ To use a community workflow, download the the `.json` node graph file and load i
     + [GPT2RandomPromptMaker](#gpt2randompromptmaker)
     + [Grid to Gif](#grid-to-gif)
     + [Halftone](#halftone)
+    + [Hand Refiner with MeshGraphormer](#hand-refiner-with-meshgraphormer)
     + [Image and Mask Composition Pack](#image-and-mask-composition-pack)
     + [Image Dominant Color](#image-dominant-color)
     + [Image to Character Art Image Nodes](#image-to-character-art-image-nodes)
@@ -196,6 +197,18 @@ CMYK Halftone Output:
 <img src="https://github.com/invoke-ai/InvokeAI/assets/34005131/c59c578f-db8e-4d66-8c66-2851752d75ea" width="300" />
 
 --------------------------------
+
+### Hand Refiner with MeshGraphormer
+
+**Description**: Hand Refiner takes in your image and automatically generates a fixed depth map for the hands along with a mask of the hands region that will conveniently allow you to use them along with ControlNet to fix the wonky hands generated by Stable Diffusion
+
+**Node Link:** https://github.com/blessedcoolant/invoke_meshgraphormer
+
+**View**
+<img src="https://raw.githubusercontent.com/blessedcoolant/invoke_meshgraphormer/main/assets/preview.jpg" />
+
+--------------------------------
+
 ### Image and Mask Composition Pack
 
 **Description:** This is a pack of nodes for composing masks and images, including a simple text mask creator and both image and latent offset nodes. The offsets wrap around, so these can be used in conjunction with the Seamless node to progressively generate centered on different parts of the seamless tiling.

From f2777f50967319fc0079eee819ee18ee473287c6 Mon Sep 17 00:00:00 2001
From: Lincoln Stein <lincoln.stein@gmail.com>
Date: Fri, 2 Feb 2024 12:18:47 -0500
Subject: [PATCH 133/133] Port the command-line tools to use model_manager2
 (#5546)

* Port the command-line tools to use model_manager2

1.Reimplement the following:

  - invokeai-model-install
  - invokeai-merge
  - invokeai-ti

  To avoid breaking the original modeal manager, the udpated tools
  have been renamed invokeai-model-install2 and invokeai-merge2. The
  textual inversion training script should continue to work with
  existing installations. The "starter" models now live in
  `invokeai/configs/INITIAL_MODELS2.yaml`.

  When the full model manager 2 is in place and working, I'll rename
  these files and commands.

2. Add the `merge` route to the web API. This will merge two or three models,
   resulting a new one.

   - Note that because the model installer selectively installs the `fp16` variant
     of models (rather than both 16- and 32-bit versions as previous),
     the diffusers merge script will choke on any huggingface diffuserse models
     that were downloaded with the new installer. Previously-downloaded models
     should continue to merge correctly. I have a PR
     upstream https://github.com/huggingface/diffusers/pull/6670 to fix
     this.

3. (more important!)
  During implementation of the CLI tools, found and fixed a number of small
  runtime bugs in the model_manager2 implementation:

  - During model database migration, if a registered models file was
    not found on disk, the migration would be aborted. Now the
    offending model is skipped with a log warning.

  - Caught and fixed a condition in which the installer would download the
    entire diffusers repo when the user provided a single `.safetensors`
    file URL.

  - Caught and fixed a condition in which the installer would raise an
    exception and stop the app when a request for an unknown model's metadata
    was passed to Civitai. Now an error is logged and the installer continues.

  - Replaced the LoWRA starter LoRA with FlatColor. The former has been removed
    from Civitai.

* fix ruff issue

---------

Co-authored-by: Lincoln Stein <lstein@gmail.com>
---
 invokeai/app/api/routers/model_records.py     |  57 +-
 .../app/services/download/download_default.py |   1 -
 .../model_install/model_install_base.py       |   4 +-
 .../model_install/model_install_default.py    |   7 +-
 .../migrations/util/migrate_yaml_config_1.py  |   7 +-
 invokeai/backend/install/install_helper.py    | 281 ++++++++
 .../backend/install/invokeai_configure.py     |   2 +-
 invokeai/backend/model_manager/merge.py       | 177 +++++
 .../model_manager/metadata/fetch/civitai.py   |   2 +
 .../training/textual_inversion_training.py    |  71 +-
 invokeai/configs/INITIAL_MODELS2.yaml         | 157 +++++
 .../frontend/install/invokeai_configure.py    |   2 +
 invokeai/frontend/install/model_install2.py   | 645 ++++++++++++++++++
 invokeai/frontend/merge/merge_diffusers2.py   | 438 ++++++++++++
 .../frontend/training/textual_inversion.py    |  68 +-
 .../frontend/training/textual_inversion2.py   | 454 ++++++++++++
 pyproject.toml                                |   2 +
 17 files changed, 2297 insertions(+), 78 deletions(-)
 create mode 100644 invokeai/backend/install/install_helper.py
 create mode 100644 invokeai/backend/model_manager/merge.py
 create mode 100644 invokeai/configs/INITIAL_MODELS2.yaml
 create mode 100644 invokeai/frontend/install/model_install2.py
 create mode 100644 invokeai/frontend/merge/merge_diffusers2.py
 create mode 100644 invokeai/frontend/training/textual_inversion2.py

diff --git a/invokeai/app/api/routers/model_records.py b/invokeai/app/api/routers/model_records.py
index 162d5b46e9..f9a3e40898 100644
--- a/invokeai/app/api/routers/model_records.py
+++ b/invokeai/app/api/routers/model_records.py
@@ -1,7 +1,7 @@
 # Copyright (c) 2023 Lincoln D. Stein
 """FastAPI route for model configuration records."""
 
-
+import pathlib
 from hashlib import sha1
 from random import randbytes
 from typing import Any, Dict, List, Optional, Set
@@ -27,6 +27,7 @@ from invokeai.backend.model_manager.config import (
     ModelFormat,
     ModelType,
 )
+from invokeai.backend.model_manager.merge import MergeInterpolationMethod, ModelMerger
 from invokeai.backend.model_manager.metadata import AnyModelRepoMetadata
 
 from ..dependencies import ApiDependencies
@@ -415,3 +416,57 @@ async def sync_models_to_config() -> Response:
     """
     ApiDependencies.invoker.services.model_install.sync_to_config()
     return Response(status_code=204)
+
+
+@model_records_router.put(
+    "/merge",
+    operation_id="merge",
+)
+async def merge(
+    keys: List[str] = Body(description="Keys for two to three models to merge", min_length=2, max_length=3),
+    merged_model_name: Optional[str] = Body(description="Name of destination model", default=None),
+    alpha: float = Body(description="Alpha weighting strength to apply to 2d and 3d models", default=0.5),
+    force: bool = Body(
+        description="Force merging of models created with different versions of diffusers",
+        default=False,
+    ),
+    interp: Optional[MergeInterpolationMethod] = Body(description="Interpolation method", default=None),
+    merge_dest_directory: Optional[str] = Body(
+        description="Save the merged model to the designated directory (with 'merged_model_name' appended)",
+        default=None,
+    ),
+) -> AnyModelConfig:
+    """
+    Merge diffusers models.
+
+        keys: List of 2-3 model keys to merge together. All models must use the same base type.
+        merged_model_name: Name for the merged model [Concat model names]
+        alpha: Alpha value (0.0-1.0). Higher values give more weight to the second model [0.5]
+        force: If true, force the merge even if the models were generated by different versions of the diffusers library [False]
+        interp: Interpolation method. One of "weighted_sum", "sigmoid", "inv_sigmoid" or "add_difference" [weighted_sum]
+        merge_dest_directory: Specify a directory to store the merged model in [models directory]
+    """
+    print(f"here i am, keys={keys}")
+    logger = ApiDependencies.invoker.services.logger
+    try:
+        logger.info(f"Merging models: {keys} into {merge_dest_directory or '<MODELS>'}/{merged_model_name}")
+        dest = pathlib.Path(merge_dest_directory) if merge_dest_directory else None
+        installer = ApiDependencies.invoker.services.model_install
+        merger = ModelMerger(installer)
+        model_names = [installer.record_store.get_model(x).name for x in keys]
+        response = merger.merge_diffusion_models_and_save(
+            model_keys=keys,
+            merged_model_name=merged_model_name or "+".join(model_names),
+            alpha=alpha,
+            interp=interp,
+            force=force,
+            merge_dest_directory=dest,
+        )
+    except UnknownModelException:
+        raise HTTPException(
+            status_code=404,
+            detail=f"One or more of the models '{keys}' not found",
+        )
+    except ValueError as e:
+        raise HTTPException(status_code=400, detail=str(e))
+    return response
diff --git a/invokeai/app/services/download/download_default.py b/invokeai/app/services/download/download_default.py
index 7c0dc0c452..7613c0893f 100644
--- a/invokeai/app/services/download/download_default.py
+++ b/invokeai/app/services/download/download_default.py
@@ -208,7 +208,6 @@ class DownloadQueueService(DownloadQueueServiceBase):
                 job = self._queue.get(timeout=1)
             except Empty:
                 continue
-
             try:
                 job.job_started = get_iso_timestamp()
                 self._do_download(job)
diff --git a/invokeai/app/services/model_install/model_install_base.py b/invokeai/app/services/model_install/model_install_base.py
index a863e14a65..635cb154d6 100644
--- a/invokeai/app/services/model_install/model_install_base.py
+++ b/invokeai/app/services/model_install/model_install_base.py
@@ -165,8 +165,8 @@ class ModelInstallJob(BaseModel):
     )
     source: ModelSource = Field(description="Source (URL, repo_id, or local path) of model")
     local_path: Path = Field(description="Path to locally-downloaded model; may be the same as the source")
-    bytes: Optional[int] = Field(
-        default=None, description="For a remote model, the number of bytes downloaded so far (may not be available)"
+    bytes: int = Field(
+        default=0, description="For a remote model, the number of bytes downloaded so far (may not be available)"
     )
     total_bytes: int = Field(default=0, description="Total size of the model to be installed")
     source_metadata: Optional[AnyModelRepoMetadata] = Field(
diff --git a/invokeai/app/services/model_install/model_install_default.py b/invokeai/app/services/model_install/model_install_default.py
index f66da3ce17..82c667f584 100644
--- a/invokeai/app/services/model_install/model_install_default.py
+++ b/invokeai/app/services/model_install/model_install_default.py
@@ -535,19 +535,19 @@ class ModelInstallService(ModelInstallServiceBase):
     def _import_from_url(self, source: URLModelSource, config: Optional[Dict[str, Any]]) -> ModelInstallJob:
         # URLs from Civitai or HuggingFace will be handled specially
         url_patterns = {
-            r"https?://civitai.com/": CivitaiMetadataFetch,
-            r"https?://huggingface.co/": HuggingFaceMetadataFetch,
+            r"^https?://civitai.com/": CivitaiMetadataFetch,
+            r"^https?://huggingface.co/[^/]+/[^/]+$": HuggingFaceMetadataFetch,
         }
         metadata = None
         for pattern, fetcher in url_patterns.items():
             if re.match(pattern, str(source.url), re.IGNORECASE):
                 metadata = fetcher(self._session).from_url(source.url)
                 break
+        self._logger.debug(f"metadata={metadata}")
         if metadata and isinstance(metadata, ModelMetadataWithFiles):
             remote_files = metadata.download_urls(session=self._session)
         else:
             remote_files = [RemoteModelFile(url=source.url, path=Path("."), size=0)]
-
         return self._import_remote_model(
             source=source,
             config=config,
@@ -586,6 +586,7 @@ class ModelInstallService(ModelInstallServiceBase):
         assert install_job.total_bytes is not None  # to avoid type checking complaints in the loop below
 
         self._logger.info(f"Queuing {source} for downloading")
+        self._logger.debug(f"remote_files={remote_files}")
         for model_file in remote_files:
             url = model_file.url
             path = model_file.path
diff --git a/invokeai/app/services/shared/sqlite_migrator/migrations/util/migrate_yaml_config_1.py b/invokeai/app/services/shared/sqlite_migrator/migrations/util/migrate_yaml_config_1.py
index 7a7565ba77..2da998a532 100644
--- a/invokeai/app/services/shared/sqlite_migrator/migrations/util/migrate_yaml_config_1.py
+++ b/invokeai/app/services/shared/sqlite_migrator/migrations/util/migrate_yaml_config_1.py
@@ -72,7 +72,12 @@ class MigrateModelYamlToDb1:
                 continue
 
             base_type, model_type, model_name = str(model_key).split("/")
-            hash = FastModelHash.hash(self.config.models_path / stanza.path)
+            try:
+                hash = FastModelHash.hash(self.config.models_path / stanza.path)
+            except OSError:
+                self.logger.warning(f"The model at {stanza.path} is not a valid file or directory. Skipping migration.")
+                continue
+
             assert isinstance(model_key, str)
             new_key = sha1(model_key.encode("utf-8")).hexdigest()
 
diff --git a/invokeai/backend/install/install_helper.py b/invokeai/backend/install/install_helper.py
new file mode 100644
index 0000000000..e54be527d9
--- /dev/null
+++ b/invokeai/backend/install/install_helper.py
@@ -0,0 +1,281 @@
+"""Utility (backend) functions used by model_install.py"""
+import re
+from logging import Logger
+from pathlib import Path
+from typing import Any, Dict, List, Optional
+
+import omegaconf
+from huggingface_hub import HfFolder
+from pydantic import BaseModel, Field
+from pydantic.dataclasses import dataclass
+from pydantic.networks import AnyHttpUrl
+from requests import HTTPError
+from tqdm import tqdm
+
+import invokeai.configs as configs
+from invokeai.app.services.config import InvokeAIAppConfig
+from invokeai.app.services.download import DownloadQueueService
+from invokeai.app.services.events.events_base import EventServiceBase
+from invokeai.app.services.image_files.image_files_disk import DiskImageFileStorage
+from invokeai.app.services.model_install import (
+    HFModelSource,
+    LocalModelSource,
+    ModelInstallService,
+    ModelInstallServiceBase,
+    ModelSource,
+    URLModelSource,
+)
+from invokeai.app.services.model_records import ModelRecordServiceBase, ModelRecordServiceSQL
+from invokeai.app.services.shared.sqlite.sqlite_util import init_db
+from invokeai.backend.model_manager import (
+    BaseModelType,
+    InvalidModelConfigException,
+    ModelType,
+)
+from invokeai.backend.model_manager.metadata import UnknownMetadataException
+from invokeai.backend.util.logging import InvokeAILogger
+
+# name of the starter models file
+INITIAL_MODELS = "INITIAL_MODELS2.yaml"
+
+
+def initialize_record_store(app_config: InvokeAIAppConfig) -> ModelRecordServiceBase:
+    """Return an initialized ModelConfigRecordServiceBase object."""
+    logger = InvokeAILogger.get_logger(config=app_config)
+    image_files = DiskImageFileStorage(f"{app_config.output_path}/images")
+    db = init_db(config=app_config, logger=logger, image_files=image_files)
+    obj: ModelRecordServiceBase = ModelRecordServiceSQL(db)
+    return obj
+
+
+def initialize_installer(
+    app_config: InvokeAIAppConfig, event_bus: Optional[EventServiceBase] = None
+) -> ModelInstallServiceBase:
+    """Return an initialized ModelInstallService object."""
+    record_store = initialize_record_store(app_config)
+    metadata_store = record_store.metadata_store
+    download_queue = DownloadQueueService()
+    installer = ModelInstallService(
+        app_config=app_config,
+        record_store=record_store,
+        metadata_store=metadata_store,
+        download_queue=download_queue,
+        event_bus=event_bus,
+    )
+    download_queue.start()
+    installer.start()
+    return installer
+
+
+class UnifiedModelInfo(BaseModel):
+    """Catchall class for information in INITIAL_MODELS2.yaml."""
+
+    name: Optional[str] = None
+    base: Optional[BaseModelType] = None
+    type: Optional[ModelType] = None
+    source: Optional[str] = None
+    subfolder: Optional[str] = None
+    description: Optional[str] = None
+    recommended: bool = False
+    installed: bool = False
+    default: bool = False
+    requires: List[str] = Field(default_factory=list)
+
+
+@dataclass
+class InstallSelections:
+    """Lists of models to install and remove."""
+
+    install_models: List[UnifiedModelInfo] = Field(default_factory=list)
+    remove_models: List[str] = Field(default_factory=list)
+
+
+class TqdmEventService(EventServiceBase):
+    """An event service to track downloads."""
+
+    def __init__(self) -> None:
+        """Create a new TqdmEventService object."""
+        super().__init__()
+        self._bars: Dict[str, tqdm] = {}
+        self._last: Dict[str, int] = {}
+
+    def dispatch(self, event_name: str, payload: Any) -> None:
+        """Dispatch an event by appending it to self.events."""
+        if payload["event"] == "model_install_downloading":
+            data = payload["data"]
+            dest = data["local_path"]
+            total_bytes = data["total_bytes"]
+            bytes = data["bytes"]
+            if dest not in self._bars:
+                self._bars[dest] = tqdm(desc=Path(dest).name, initial=0, total=total_bytes, unit="iB", unit_scale=True)
+                self._last[dest] = 0
+            self._bars[dest].update(bytes - self._last[dest])
+            self._last[dest] = bytes
+
+
+class InstallHelper(object):
+    """Capture information stored jointly in INITIAL_MODELS.yaml and the installed models db."""
+
+    def __init__(self, app_config: InvokeAIAppConfig, logger: Logger):
+        """Create new InstallHelper object."""
+        self._app_config = app_config
+        self.all_models: Dict[str, UnifiedModelInfo] = {}
+
+        omega = omegaconf.OmegaConf.load(Path(configs.__path__[0]) / INITIAL_MODELS)
+        assert isinstance(omega, omegaconf.dictconfig.DictConfig)
+
+        self._installer = initialize_installer(app_config, TqdmEventService())
+        self._initial_models = omega
+        self._installed_models: List[str] = []
+        self._starter_models: List[str] = []
+        self._default_model: Optional[str] = None
+        self._logger = logger
+        self._initialize_model_lists()
+
+    @property
+    def installer(self) -> ModelInstallServiceBase:
+        """Return the installer object used internally."""
+        return self._installer
+
+    def _initialize_model_lists(self) -> None:
+        """
+        Initialize our model slots.
+
+        Set up the following:
+        installed_models  -- list of installed model keys
+        starter_models -- list of starter model keys from INITIAL_MODELS
+        all_models -- dict of key => UnifiedModelInfo
+        default_model -- key to default model
+        """
+        # previously-installed models
+        for model in self._installer.record_store.all_models():
+            info = UnifiedModelInfo.parse_obj(model.dict())
+            info.installed = True
+            model_key = f"{model.base.value}/{model.type.value}/{model.name}"
+            self.all_models[model_key] = info
+            self._installed_models.append(model_key)
+
+        for key in self._initial_models.keys():
+            assert isinstance(key, str)
+            if key in self.all_models:
+                # we want to preserve the description
+                description = self.all_models[key].description or self._initial_models[key].get("description")
+                self.all_models[key].description = description
+            else:
+                base_model, model_type, model_name = key.split("/")
+                info = UnifiedModelInfo(
+                    name=model_name,
+                    type=ModelType(model_type),
+                    base=BaseModelType(base_model),
+                    source=self._initial_models[key].source,
+                    description=self._initial_models[key].get("description"),
+                    recommended=self._initial_models[key].get("recommended", False),
+                    default=self._initial_models[key].get("default", False),
+                    subfolder=self._initial_models[key].get("subfolder"),
+                    requires=list(self._initial_models[key].get("requires", [])),
+                )
+                self.all_models[key] = info
+            if not self.default_model():
+                self._default_model = key
+            elif self._initial_models[key].get("default", False):
+                self._default_model = key
+            self._starter_models.append(key)
+
+        # previously-installed models
+        for model in self._installer.record_store.all_models():
+            info = UnifiedModelInfo.parse_obj(model.dict())
+            info.installed = True
+            model_key = f"{model.base.value}/{model.type.value}/{model.name}"
+            self.all_models[model_key] = info
+            self._installed_models.append(model_key)
+
+    def recommended_models(self) -> List[UnifiedModelInfo]:
+        """List of the models recommended in INITIAL_MODELS.yaml."""
+        return [self._to_model(x) for x in self._starter_models if self._to_model(x).recommended]
+
+    def installed_models(self) -> List[UnifiedModelInfo]:
+        """List of models already installed."""
+        return [self._to_model(x) for x in self._installed_models]
+
+    def starter_models(self) -> List[UnifiedModelInfo]:
+        """List of starter models."""
+        return [self._to_model(x) for x in self._starter_models]
+
+    def default_model(self) -> Optional[UnifiedModelInfo]:
+        """Return the default model."""
+        return self._to_model(self._default_model) if self._default_model else None
+
+    def _to_model(self, key: str) -> UnifiedModelInfo:
+        return self.all_models[key]
+
+    def _add_required_models(self, model_list: List[UnifiedModelInfo]) -> None:
+        installed = {x.source for x in self.installed_models()}
+        reverse_source = {x.source: x for x in self.all_models.values()}
+        additional_models: List[UnifiedModelInfo] = []
+        for model_info in model_list:
+            for requirement in model_info.requires:
+                if requirement not in installed and reverse_source.get(requirement):
+                    additional_models.append(reverse_source[requirement])
+        model_list.extend(additional_models)
+
+    def _make_install_source(self, model_info: UnifiedModelInfo) -> ModelSource:
+        assert model_info.source
+        model_path_id_or_url = model_info.source.strip("\"' ")
+        model_path = Path(model_path_id_or_url)
+
+        if model_path.exists():  # local file on disk
+            return LocalModelSource(path=model_path.absolute(), inplace=True)
+        if re.match(r"^[^/]+/[^/]+$", model_path_id_or_url):  # hugging face repo_id
+            return HFModelSource(
+                repo_id=model_path_id_or_url,
+                access_token=HfFolder.get_token(),
+                subfolder=model_info.subfolder,
+            )
+        if re.match(r"^(http|https):", model_path_id_or_url):
+            return URLModelSource(url=AnyHttpUrl(model_path_id_or_url))
+        raise ValueError(f"Unsupported model source: {model_path_id_or_url}")
+
+    def add_or_delete(self, selections: InstallSelections) -> None:
+        """Add or delete selected models."""
+        installer = self._installer
+        self._add_required_models(selections.install_models)
+        for model in selections.install_models:
+            source = self._make_install_source(model)
+            config = (
+                {
+                    "description": model.description,
+                    "name": model.name,
+                }
+                if model.name
+                else None
+            )
+
+            try:
+                installer.import_model(
+                    source=source,
+                    config=config,
+                )
+            except (UnknownMetadataException, InvalidModelConfigException, HTTPError, OSError) as e:
+                self._logger.warning(f"{source}: {e}")
+
+        for model_to_remove in selections.remove_models:
+            parts = model_to_remove.split("/")
+            if len(parts) == 1:
+                base_model, model_type, model_name = (None, None, model_to_remove)
+            else:
+                base_model, model_type, model_name = parts
+            matches = installer.record_store.search_by_attr(
+                base_model=BaseModelType(base_model) if base_model else None,
+                model_type=ModelType(model_type) if model_type else None,
+                model_name=model_name,
+            )
+            if len(matches) > 1:
+                print(f"{model} is ambiguous. Please use model_type:model_name (e.g. main:my_model) to disambiguate.")
+            elif not matches:
+                print(f"{model}: unknown model")
+            else:
+                for m in matches:
+                    print(f"Deleting {m.type}:{m.name}")
+                    installer.delete(m.key)
+
+        installer.wait_for_installs()
diff --git a/invokeai/backend/install/invokeai_configure.py b/invokeai/backend/install/invokeai_configure.py
index 2621b811ac..3cb7db6c82 100755
--- a/invokeai/backend/install/invokeai_configure.py
+++ b/invokeai/backend/install/invokeai_configure.py
@@ -849,7 +849,7 @@ def migrate_if_needed(opt: Namespace, root: Path) -> bool:
 
 
 # -------------------------------------
-def main():
+def main() -> None:
     parser = argparse.ArgumentParser(description="InvokeAI model downloader")
     parser.add_argument(
         "--skip-sd-weights",
diff --git a/invokeai/backend/model_manager/merge.py b/invokeai/backend/model_manager/merge.py
new file mode 100644
index 0000000000..2c94af4af3
--- /dev/null
+++ b/invokeai/backend/model_manager/merge.py
@@ -0,0 +1,177 @@
+"""
+invokeai.backend.model_manager.merge exports:
+merge_diffusion_models() -- combine multiple models by location and return a pipeline object
+merge_diffusion_models_and_commit() -- combine multiple models by ModelManager ID and write to models.yaml
+
+Copyright (c) 2023 Lincoln Stein and the InvokeAI Development Team
+"""
+
+import warnings
+from enum import Enum
+from pathlib import Path
+from typing import Any, List, Optional, Set
+
+import torch
+from diffusers import AutoPipelineForText2Image
+from diffusers import logging as dlogging
+
+from invokeai.app.services.model_install import ModelInstallServiceBase
+from invokeai.backend.util.devices import choose_torch_device, torch_dtype
+
+from . import (
+    AnyModelConfig,
+    BaseModelType,
+    ModelType,
+    ModelVariantType,
+)
+from .config import MainDiffusersConfig
+
+
+class MergeInterpolationMethod(str, Enum):
+    WeightedSum = "weighted_sum"
+    Sigmoid = "sigmoid"
+    InvSigmoid = "inv_sigmoid"
+    AddDifference = "add_difference"
+
+
+class ModelMerger(object):
+    """Wrapper class for model merge function."""
+
+    def __init__(self, installer: ModelInstallServiceBase):
+        """
+        Initialize a ModelMerger object.
+
+        :param store: Underlying storage manager for the running process.
+        :param config: InvokeAIAppConfig object (if not provided, default will be selected).
+        """
+        self._installer = installer
+
+    def merge_diffusion_models(
+        self,
+        model_paths: List[Path],
+        alpha: float = 0.5,
+        interp: Optional[MergeInterpolationMethod] = None,
+        force: bool = False,
+        variant: Optional[str] = None,
+        **kwargs: Any,
+    ) -> Any:  # pipe.merge is an untyped function.
+        """
+        :param model_paths:  up to three models, designated by their local paths or HuggingFace repo_ids
+        :param alpha: The interpolation parameter. Ranges from 0 to 1.  It affects the ratio in which the checkpoints are merged. A 0.8 alpha
+                   would mean that the first model checkpoints would affect the final result far less than an alpha of 0.2
+        :param interp: The interpolation method to use for the merging. Supports "sigmoid", "inv_sigmoid", "add_difference" and None.
+                   Passing None uses the default interpolation which is weighted sum interpolation. For merging three checkpoints, only "add_difference" is supported.
+        :param force:  Whether to ignore mismatch in model_config.json for the current models. Defaults to False.
+
+        **kwargs - the default DiffusionPipeline.get_config_dict kwargs:
+             cache_dir, resume_download, force_download, proxies, local_files_only, use_auth_token, revision, torch_dtype, device_map
+        """
+        with warnings.catch_warnings():
+            warnings.simplefilter("ignore")
+            verbosity = dlogging.get_verbosity()
+            dlogging.set_verbosity_error()
+            dtype = torch.float16 if variant == "fp16" else torch_dtype(choose_torch_device())
+
+            # Note that checkpoint_merger will not work with downloaded HuggingFace fp16 models
+            # until upstream https://github.com/huggingface/diffusers/pull/6670 is merged and released.
+            pipe = AutoPipelineForText2Image.from_pretrained(
+                model_paths[0],
+                custom_pipeline="checkpoint_merger",
+                torch_dtype=dtype,
+                variant=variant,
+            )
+            merged_pipe = pipe.merge(
+                pretrained_model_name_or_path_list=model_paths,
+                alpha=alpha,
+                interp=interp.value if interp else None,  # diffusers API treats None as "weighted sum"
+                force=force,
+                torch_dtype=dtype,
+                variant=variant,
+                **kwargs,
+            )
+            dlogging.set_verbosity(verbosity)
+        return merged_pipe
+
+    def merge_diffusion_models_and_save(
+        self,
+        model_keys: List[str],
+        merged_model_name: str,
+        alpha: float = 0.5,
+        force: bool = False,
+        interp: Optional[MergeInterpolationMethod] = None,
+        merge_dest_directory: Optional[Path] = None,
+        variant: Optional[str] = None,
+        **kwargs: Any,
+    ) -> AnyModelConfig:
+        """
+        :param models: up to three models, designated by their InvokeAI models.yaml model name
+        :param merged_model_name: name for new model
+        :param alpha: The interpolation parameter. Ranges from 0 to 1.  It affects the ratio in which the checkpoints are merged. A 0.8 alpha
+                   would mean that the first model checkpoints would affect the final result far less than an alpha of 0.2
+        :param interp: The interpolation method to use for the merging. Supports "weighted_average", "sigmoid", "inv_sigmoid", "add_difference" and None.
+                   Passing None uses the default interpolation which is weighted sum interpolation. For merging three checkpoints, only "add_difference" is supported. Add_difference is A+(B-C).
+        :param force:  Whether to ignore mismatch in model_config.json for the current models. Defaults to False.
+        :param merge_dest_directory: Save the merged model to the designated directory (with 'merged_model_name' appended)
+        **kwargs - the default DiffusionPipeline.get_config_dict kwargs:
+             cache_dir, resume_download, force_download, proxies, local_files_only, use_auth_token, revision, torch_dtype, device_map
+        """
+        model_paths: List[Path] = []
+        model_names: List[str] = []
+        config = self._installer.app_config
+        store = self._installer.record_store
+        base_models: Set[BaseModelType] = set()
+        vae = None
+        variant = None if self._installer.app_config.full_precision else "fp16"
+
+        assert (
+            len(model_keys) <= 2 or interp == MergeInterpolationMethod.AddDifference
+        ), "When merging three models, only the 'add_difference' merge method is supported"
+
+        for key in model_keys:
+            info = store.get_model(key)
+            model_names.append(info.name)
+            assert isinstance(
+                info, MainDiffusersConfig
+            ), f"{info.name} ({info.key}) is not a diffusers model. It must be optimized before merging"
+            assert info.variant == ModelVariantType(
+                "normal"
+            ), f"{info.name} ({info.key}) is a {info.variant} model, which cannot currently be merged"
+
+            # pick up the first model's vae
+            if key == model_keys[0]:
+                vae = info.vae
+
+            # tally base models used
+            base_models.add(info.base)
+            model_paths.extend([config.models_path / info.path])
+
+        assert len(base_models) == 1, f"All models to merge must have same base model, but found bases {base_models}"
+        base_model = base_models.pop()
+
+        merge_method = None if interp == "weighted_sum" else MergeInterpolationMethod(interp)
+        merged_pipe = self.merge_diffusion_models(model_paths, alpha, merge_method, force, variant=variant, **kwargs)
+        dump_path = (
+            Path(merge_dest_directory)
+            if merge_dest_directory
+            else config.models_path / base_model.value / ModelType.Main.value
+        )
+        dump_path.mkdir(parents=True, exist_ok=True)
+        dump_path = dump_path / merged_model_name
+
+        dtype = torch.float16 if variant == "fp16" else torch_dtype(choose_torch_device())
+        merged_pipe.save_pretrained(dump_path.as_posix(), safe_serialization=True, torch_dtype=dtype, variant=variant)
+
+        # register model and get its unique key
+        key = self._installer.register_path(dump_path)
+
+        # update model's config
+        model_config = self._installer.record_store.get_model(key)
+        model_config.update(
+            {
+                "name": merged_model_name,
+                "description": f"Merge of models {', '.join(model_names)}",
+                "vae": vae,
+            }
+        )
+        self._installer.record_store.update_model(key, model_config)
+        return model_config
diff --git a/invokeai/backend/model_manager/metadata/fetch/civitai.py b/invokeai/backend/model_manager/metadata/fetch/civitai.py
index 4f52f6f930..6e41d6f11b 100644
--- a/invokeai/backend/model_manager/metadata/fetch/civitai.py
+++ b/invokeai/backend/model_manager/metadata/fetch/civitai.py
@@ -170,6 +170,8 @@ class CivitaiMetadataFetch(ModelMetadataFetchBase):
         if model_id is None:
             version_url = CIVITAI_VERSION_ENDPOINT + str(version_id)
             version = self._requests.get(version_url).json()
+            if error := version.get("error"):
+                raise UnknownMetadataException(error)
             model_id = version["modelId"]
 
         model_url = CIVITAI_MODEL_ENDPOINT + str(model_id)
diff --git a/invokeai/backend/training/textual_inversion_training.py b/invokeai/backend/training/textual_inversion_training.py
index 0d1b9a2d8c..e31ce959c2 100644
--- a/invokeai/backend/training/textual_inversion_training.py
+++ b/invokeai/backend/training/textual_inversion_training.py
@@ -11,6 +11,7 @@ import logging
 import math
 import os
 import random
+from argparse import Namespace
 from pathlib import Path
 from typing import Optional
 
@@ -30,8 +31,6 @@ from diffusers.optimization import get_scheduler
 from diffusers.utils import check_min_version
 from diffusers.utils.import_utils import is_xformers_available
 from huggingface_hub import HfFolder, Repository, whoami
-
-# TODO: remove and import from diffusers.utils when the new version of diffusers is released
 from packaging import version
 from PIL import Image
 from torch.utils.data import Dataset
@@ -41,8 +40,8 @@ from transformers import CLIPTextModel, CLIPTokenizer
 
 # invokeai stuff
 from invokeai.app.services.config import InvokeAIAppConfig, PagingArgumentParser
-from invokeai.app.services.model_manager import ModelManagerService
-from invokeai.backend.model_management.models import SubModelType
+from invokeai.backend.install.install_helper import initialize_record_store
+from invokeai.backend.model_manager import BaseModelType, ModelType
 
 if version.parse(version.parse(PIL.__version__).base_version) >= version.parse("9.1.0"):
     PIL_INTERPOLATION = {
@@ -77,7 +76,7 @@ def save_progress(text_encoder, placeholder_token_id, accelerator, placeholder_t
     torch.save(learned_embeds_dict, save_path)
 
 
-def parse_args():
+def parse_args() -> Namespace:
     config = InvokeAIAppConfig.get_config()
     parser = PagingArgumentParser(description="Textual inversion training")
     general_group = parser.add_argument_group("General")
@@ -444,7 +443,7 @@ class TextualInversionDataset(Dataset):
         self.templates = imagenet_style_templates_small if learnable_property == "style" else imagenet_templates_small
         self.flip_transform = transforms.RandomHorizontalFlip(p=self.flip_p)
 
-    def __len__(self):
+    def __len__(self) -> int:
         return self._length
 
     def __getitem__(self, i):
@@ -509,11 +508,10 @@ def do_textual_inversion_training(
     initializer_token: str,
     save_steps: int = 500,
     only_save_embeds: bool = False,
-    revision: str = None,
-    tokenizer_name: str = None,
+    tokenizer_name: Optional[str] = None,
     learnable_property: str = "object",
     repeats: int = 100,
-    seed: int = None,
+    seed: Optional[int] = None,
     resolution: int = 512,
     center_crop: bool = False,
     train_batch_size: int = 16,
@@ -530,18 +528,18 @@ def do_textual_inversion_training(
     adam_weight_decay: float = 1e-02,
     adam_epsilon: float = 1e-08,
     push_to_hub: bool = False,
-    hub_token: str = None,
+    hub_token: Optional[str] = None,
     logging_dir: Path = Path("logs"),
     mixed_precision: str = "fp16",
     allow_tf32: bool = False,
     report_to: str = "tensorboard",
     local_rank: int = -1,
     checkpointing_steps: int = 500,
-    resume_from_checkpoint: Path = None,
+    resume_from_checkpoint: Optional[Path] = None,
     enable_xformers_memory_efficient_attention: bool = False,
-    hub_model_id: str = None,
+    hub_model_id: Optional[str] = None,
     **kwargs,
-):
+) -> None:
     assert model, "Please specify a base model with --model"
     assert train_data_dir, "Please specify a directory containing the training images using --train_data_dir"
     assert placeholder_token, "Please specify a trigger term using --placeholder_token"
@@ -564,8 +562,6 @@ def do_textual_inversion_training(
         project_config=accelerator_config,
     )
 
-    model_manager = ModelManagerService(config, logger)
-
     # Make one log on every process with the configuration for debugging.
     logging.basicConfig(
         format="%(asctime)s - %(levelname)s - %(name)s - %(message)s",
@@ -603,44 +599,37 @@ def do_textual_inversion_training(
         elif output_dir is not None:
             os.makedirs(output_dir, exist_ok=True)
 
-    known_models = model_manager.model_names()
-    model_name = model.split("/")[-1]
-    model_meta = next((mm for mm in known_models if mm[0].endswith(model_name)), None)
-    assert model_meta is not None, f"Unknown model: {model}"
-    model_info = model_manager.model_info(*model_meta)
-    assert model_info["model_format"] == "diffusers", "This script only works with models of type 'diffusers'"
-    tokenizer_info = model_manager.get_model(*model_meta, submodel=SubModelType.Tokenizer)
-    noise_scheduler_info = model_manager.get_model(*model_meta, submodel=SubModelType.Scheduler)
-    text_encoder_info = model_manager.get_model(*model_meta, submodel=SubModelType.TextEncoder)
-    vae_info = model_manager.get_model(*model_meta, submodel=SubModelType.Vae)
-    unet_info = model_manager.get_model(*model_meta, submodel=SubModelType.UNet)
+    model_records = initialize_record_store(config)
+    base, type, name = model.split("/")  # note frontend still returns old-style keys
+    try:
+        model_config = model_records.search_by_attr(
+            model_name=name, model_type=ModelType(type), base_model=BaseModelType(base)
+        )[0]
+    except IndexError:
+        raise Exception(f"Unknown model {model}")
+    model_path = config.models_path / model_config.path
 
     pipeline_args = {"local_files_only": True}
     if tokenizer_name:
         tokenizer = CLIPTokenizer.from_pretrained(tokenizer_name, **pipeline_args)
     else:
-        tokenizer = CLIPTokenizer.from_pretrained(tokenizer_info.location, subfolder="tokenizer", **pipeline_args)
+        tokenizer = CLIPTokenizer.from_pretrained(model_path, subfolder="tokenizer", **pipeline_args)
 
     # Load scheduler and models
-    noise_scheduler = DDPMScheduler.from_pretrained(
-        noise_scheduler_info.location, subfolder="scheduler", **pipeline_args
-    )
+    noise_scheduler = DDPMScheduler.from_pretrained(model_path, subfolder="scheduler", **pipeline_args)
     text_encoder = CLIPTextModel.from_pretrained(
-        text_encoder_info.location,
+        model_path,
         subfolder="text_encoder",
-        revision=revision,
         **pipeline_args,
     )
     vae = AutoencoderKL.from_pretrained(
-        vae_info.location,
+        model_path,
         subfolder="vae",
-        revision=revision,
         **pipeline_args,
     )
     unet = UNet2DConditionModel.from_pretrained(
-        unet_info.location,
+        model_path,
         subfolder="unet",
-        revision=revision,
         **pipeline_args,
     )
 
@@ -728,7 +717,7 @@ def do_textual_inversion_training(
         max_train_steps = num_train_epochs * num_update_steps_per_epoch
         overrode_max_train_steps = True
 
-    lr_scheduler = get_scheduler(
+    scheduler = get_scheduler(
         lr_scheduler,
         optimizer=optimizer,
         num_warmup_steps=lr_warmup_steps * gradient_accumulation_steps,
@@ -737,7 +726,7 @@ def do_textual_inversion_training(
 
     # Prepare everything with our `accelerator`.
     text_encoder, optimizer, train_dataloader, lr_scheduler = accelerator.prepare(
-        text_encoder, optimizer, train_dataloader, lr_scheduler
+        text_encoder, optimizer, train_dataloader, scheduler
     )
 
     # For mixed precision training we cast the unet and vae weights to half-precision
@@ -863,7 +852,7 @@ def do_textual_inversion_training(
                 accelerator.backward(loss)
 
                 optimizer.step()
-                lr_scheduler.step()
+                scheduler.step()
                 optimizer.zero_grad()
 
                 # Let's make sure we don't update any embedding weights besides the newly added token
@@ -893,7 +882,7 @@ def do_textual_inversion_training(
                         accelerator.save_state(save_path)
                         logger.info(f"Saved state to {save_path}")
 
-            logs = {"loss": loss.detach().item(), "lr": lr_scheduler.get_last_lr()[0]}
+            logs = {"loss": loss.detach().item(), "lr": scheduler.get_last_lr()[0]}
             progress_bar.set_postfix(**logs)
             accelerator.log(logs, step=global_step)
 
@@ -910,7 +899,7 @@ def do_textual_inversion_training(
             save_full_model = not only_save_embeds
         if save_full_model:
             pipeline = StableDiffusionPipeline.from_pretrained(
-                unet_info.location,
+                model_path,
                 text_encoder=accelerator.unwrap_model(text_encoder),
                 vae=vae,
                 unet=unet,
diff --git a/invokeai/configs/INITIAL_MODELS2.yaml b/invokeai/configs/INITIAL_MODELS2.yaml
new file mode 100644
index 0000000000..ca2283ab81
--- /dev/null
+++ b/invokeai/configs/INITIAL_MODELS2.yaml
@@ -0,0 +1,157 @@
+# This file predefines a few models that the user may want to install.
+sd-1/main/stable-diffusion-v1-5:
+   description: Stable Diffusion version 1.5 diffusers model (4.27 GB)
+   source: runwayml/stable-diffusion-v1-5
+   recommended: True
+   default: True
+sd-1/main/stable-diffusion-v1-5-inpainting:
+   description: RunwayML SD 1.5 model optimized for inpainting, diffusers version (4.27 GB)
+   source: runwayml/stable-diffusion-inpainting
+   recommended: True
+sd-2/main/stable-diffusion-2-1:
+   description: Stable Diffusion version 2.1 diffusers model, trained on 768 pixel images (5.21 GB)
+   source: stabilityai/stable-diffusion-2-1
+   recommended: False
+sd-2/main/stable-diffusion-2-inpainting:
+   description: Stable Diffusion version 2.0 inpainting model (5.21 GB)
+   source: stabilityai/stable-diffusion-2-inpainting
+   recommended: False
+sdxl/main/stable-diffusion-xl-base-1-0:
+   description: Stable Diffusion XL base model (12 GB)
+   source: stabilityai/stable-diffusion-xl-base-1.0
+   recommended: True
+sdxl-refiner/main/stable-diffusion-xl-refiner-1-0:
+   description: Stable Diffusion XL refiner model (12 GB)
+   source: stabilityai/stable-diffusion-xl-refiner-1.0
+   recommended: False
+sdxl/vae/sdxl-vae-fp16-fix:
+   description: Version of the SDXL-1.0 VAE that works in half precision mode
+   source: madebyollin/sdxl-vae-fp16-fix
+   recommended: True
+sd-1/main/Analog-Diffusion:
+   description: An SD-1.5 model trained on diverse analog photographs (2.13 GB)
+   source: wavymulder/Analog-Diffusion
+   recommended: False
+sd-1/main/Deliberate:
+   description: Versatile model that produces detailed images up to 768px (4.27 GB)
+   source: XpucT/Deliberate
+   recommended: False
+sd-1/main/Dungeons-and-Diffusion:
+   description: Dungeons & Dragons characters (2.13 GB)
+   source: 0xJustin/Dungeons-and-Diffusion
+   recommended: False
+sd-1/main/dreamlike-photoreal-2:
+   description: A photorealistic model trained on 768 pixel images based on SD 1.5 (2.13 GB)
+   source: dreamlike-art/dreamlike-photoreal-2.0
+   recommended: False
+sd-1/main/Inkpunk-Diffusion:
+   description: Stylized illustrations inspired by Gorillaz, FLCL and Shinkawa; prompt with "nvinkpunk" (4.27 GB)
+   source: Envvi/Inkpunk-Diffusion
+   recommended: False
+sd-1/main/openjourney:
+   description: An SD 1.5 model fine tuned on Midjourney; prompt with "mdjrny-v4 style" (2.13 GB)
+   source: prompthero/openjourney
+   recommended: False
+sd-1/main/seek.art_MEGA:
+   source: coreco/seek.art_MEGA
+   description: A general use SD-1.5 "anything" model that supports multiple styles (2.1 GB)
+   recommended: False
+sd-1/main/trinart_stable_diffusion_v2:
+   description: An SD-1.5 model finetuned with ~40K assorted high resolution manga/anime-style images (2.13 GB)
+   source: naclbit/trinart_stable_diffusion_v2
+   recommended: False
+sd-1/controlnet/qrcode_monster:
+   source: monster-labs/control_v1p_sd15_qrcode_monster
+   subfolder: v2
+sd-1/controlnet/canny:
+   source: lllyasviel/control_v11p_sd15_canny
+   recommended: True
+sd-1/controlnet/inpaint:
+   source: lllyasviel/control_v11p_sd15_inpaint
+sd-1/controlnet/mlsd:
+   source: lllyasviel/control_v11p_sd15_mlsd
+sd-1/controlnet/depth:
+   source: lllyasviel/control_v11f1p_sd15_depth
+   recommended: True
+sd-1/controlnet/normal_bae:
+   source: lllyasviel/control_v11p_sd15_normalbae
+sd-1/controlnet/seg:
+   source: lllyasviel/control_v11p_sd15_seg
+sd-1/controlnet/lineart:
+   source: lllyasviel/control_v11p_sd15_lineart
+   recommended: True
+sd-1/controlnet/lineart_anime:
+   source: lllyasviel/control_v11p_sd15s2_lineart_anime
+sd-1/controlnet/openpose:
+   source: lllyasviel/control_v11p_sd15_openpose
+   recommended: True
+sd-1/controlnet/scribble:
+   source: lllyasviel/control_v11p_sd15_scribble
+   recommended: False
+sd-1/controlnet/softedge:
+   source: lllyasviel/control_v11p_sd15_softedge
+sd-1/controlnet/shuffle:
+   source: lllyasviel/control_v11e_sd15_shuffle
+sd-1/controlnet/tile:
+   source: lllyasviel/control_v11f1e_sd15_tile
+sd-1/controlnet/ip2p:
+   source: lllyasviel/control_v11e_sd15_ip2p
+sd-1/t2i_adapter/canny-sd15:
+   source: TencentARC/t2iadapter_canny_sd15v2
+sd-1/t2i_adapter/sketch-sd15:
+   source: TencentARC/t2iadapter_sketch_sd15v2
+sd-1/t2i_adapter/depth-sd15:
+   source: TencentARC/t2iadapter_depth_sd15v2
+sd-1/t2i_adapter/zoedepth-sd15:
+   source: TencentARC/t2iadapter_zoedepth_sd15v1
+sdxl/t2i_adapter/canny-sdxl:
+   source: TencentARC/t2i-adapter-canny-sdxl-1.0
+sdxl/t2i_adapter/zoedepth-sdxl:
+   source: TencentARC/t2i-adapter-depth-zoe-sdxl-1.0
+sdxl/t2i_adapter/lineart-sdxl:
+   source: TencentARC/t2i-adapter-lineart-sdxl-1.0
+sdxl/t2i_adapter/sketch-sdxl:
+   source: TencentARC/t2i-adapter-sketch-sdxl-1.0
+sd-1/embedding/EasyNegative:
+   source: https://huggingface.co/embed/EasyNegative/resolve/main/EasyNegative.safetensors
+   recommended: True
+   description: A textual inversion to use in the negative prompt to reduce bad anatomy
+sd-1/lora/FlatColor:
+   source: https://civitai.com/models/6433/loraflatcolor
+   recommended: True
+   description: A LoRA that generates scenery using solid blocks of color
+sd-1/lora/Ink scenery:
+   source: https://civitai.com/api/download/models/83390
+   description: Generate india ink-like landscapes
+sd-1/ip_adapter/ip_adapter_sd15:
+   source: InvokeAI/ip_adapter_sd15
+   recommended: True
+   requires:
+      - InvokeAI/ip_adapter_sd_image_encoder
+   description: IP-Adapter for SD 1.5 models
+sd-1/ip_adapter/ip_adapter_plus_sd15:
+   source: InvokeAI/ip_adapter_plus_sd15
+   recommended: False
+   requires:
+      - InvokeAI/ip_adapter_sd_image_encoder
+   description: Refined IP-Adapter for SD 1.5 models
+sd-1/ip_adapter/ip_adapter_plus_face_sd15:
+   source: InvokeAI/ip_adapter_plus_face_sd15
+   recommended: False
+   requires:
+      - InvokeAI/ip_adapter_sd_image_encoder
+   description: Refined IP-Adapter for SD 1.5 models, adapted for faces
+sdxl/ip_adapter/ip_adapter_sdxl:
+   source: InvokeAI/ip_adapter_sdxl
+   recommended: False
+   requires:
+      - InvokeAI/ip_adapter_sdxl_image_encoder
+   description: IP-Adapter for SDXL models
+any/clip_vision/ip_adapter_sd_image_encoder:
+   source: InvokeAI/ip_adapter_sd_image_encoder
+   recommended: False
+   description: Required model for using IP-Adapters with SD-1/2 models
+any/clip_vision/ip_adapter_sdxl_image_encoder:
+   source: InvokeAI/ip_adapter_sdxl_image_encoder
+   recommended: False
+   description: Required model for using IP-Adapters with SDXL models
diff --git a/invokeai/frontend/install/invokeai_configure.py b/invokeai/frontend/install/invokeai_configure.py
index d200d78555..2a62430b69 100644
--- a/invokeai/frontend/install/invokeai_configure.py
+++ b/invokeai/frontend/install/invokeai_configure.py
@@ -2,3 +2,5 @@
 Wrapper for invokeai.backend.configure.invokeai_configure
 """
 from ...backend.install.invokeai_configure import main as invokeai_configure  # noqa: F401
+
+__all__ = ["invokeai_configure"]
diff --git a/invokeai/frontend/install/model_install2.py b/invokeai/frontend/install/model_install2.py
new file mode 100644
index 0000000000..6eb480c8d9
--- /dev/null
+++ b/invokeai/frontend/install/model_install2.py
@@ -0,0 +1,645 @@
+#!/usr/bin/env python
+# Copyright (c) 2022 Lincoln D. Stein (https://github.com/lstein)
+# Before running stable-diffusion on an internet-isolated machine,
+# run this script from one with internet connectivity. The
+# two machines must share a common .cache directory.
+
+"""
+This is the npyscreen frontend to the model installation application.
+It is currently named model_install2.py, but will ultimately replace model_install.py.
+"""
+
+import argparse
+import curses
+import sys
+import traceback
+import warnings
+from argparse import Namespace
+from shutil import get_terminal_size
+from typing import Any, Dict, List, Optional, Set
+
+import npyscreen
+import torch
+from npyscreen import widget
+
+from invokeai.app.services.config import InvokeAIAppConfig
+from invokeai.app.services.model_install import ModelInstallService
+from invokeai.backend.install.install_helper import InstallHelper, InstallSelections, UnifiedModelInfo
+from invokeai.backend.model_manager import ModelType
+from invokeai.backend.util import choose_precision, choose_torch_device
+from invokeai.backend.util.logging import InvokeAILogger
+from invokeai.frontend.install.widgets import (
+    MIN_COLS,
+    MIN_LINES,
+    CenteredTitleText,
+    CyclingForm,
+    MultiSelectColumns,
+    SingleSelectColumns,
+    TextBox,
+    WindowTooSmallException,
+    set_min_terminal_size,
+)
+
+warnings.filterwarnings("ignore", category=UserWarning)  # noqa: E402
+config = InvokeAIAppConfig.get_config()
+logger = InvokeAILogger.get_logger("ModelInstallService")
+logger.setLevel("WARNING")
+# logger.setLevel('DEBUG')
+
+# build a table mapping all non-printable characters to None
+# for stripping control characters
+# from https://stackoverflow.com/questions/92438/stripping-non-printable-characters-from-a-string-in-python
+NOPRINT_TRANS_TABLE = {i: None for i in range(0, sys.maxunicode + 1) if not chr(i).isprintable()}
+
+# maximum number of installed models we can display before overflowing vertically
+MAX_OTHER_MODELS = 72
+
+
+def make_printable(s: str) -> str:
+    """Replace non-printable characters in a string."""
+    return s.translate(NOPRINT_TRANS_TABLE)
+
+
+class addModelsForm(CyclingForm, npyscreen.FormMultiPage):
+    """Main form for interactive TUI."""
+
+    # for responsive resizing set to False, but this seems to cause a crash!
+    FIX_MINIMUM_SIZE_WHEN_CREATED = True
+
+    # for persistence
+    current_tab = 0
+
+    def __init__(self, parentApp: npyscreen.NPSAppManaged, name: str, multipage: bool = False, **keywords: Any):
+        self.multipage = multipage
+        self.subprocess = None
+        super().__init__(parentApp=parentApp, name=name, **keywords)
+
+    def create(self) -> None:
+        self.installer = self.parentApp.install_helper.installer
+        self.model_labels = self._get_model_labels()
+        self.keypress_timeout = 10
+        self.counter = 0
+        self.subprocess_connection = None
+
+        window_width, window_height = get_terminal_size()
+
+        # npyscreen has no typing hints
+        self.nextrely -= 1  # type: ignore
+        self.add_widget_intelligent(
+            npyscreen.FixedText,
+            value="Use ctrl-N and ctrl-P to move to the <N>ext and <P>revious fields. Cursor keys navigate, and <space> selects.",
+            editable=False,
+            color="CAUTION",
+        )
+        self.nextrely += 1  # type: ignore
+        self.tabs = self.add_widget_intelligent(
+            SingleSelectColumns,
+            values=[
+                "STARTERS",
+                "MAINS",
+                "CONTROLNETS",
+                "T2I-ADAPTERS",
+                "IP-ADAPTERS",
+                "LORAS",
+                "TI EMBEDDINGS",
+            ],
+            value=[self.current_tab],
+            columns=7,
+            max_height=2,
+            relx=8,
+            scroll_exit=True,
+        )
+        self.tabs.on_changed = self._toggle_tables
+
+        top_of_table = self.nextrely  # type: ignore
+        self.starter_pipelines = self.add_starter_pipelines()
+        bottom_of_table = self.nextrely  # type: ignore
+
+        self.nextrely = top_of_table
+        self.pipeline_models = self.add_pipeline_widgets(
+            model_type=ModelType.Main, window_width=window_width, exclude=self.starter_models
+        )
+        # self.pipeline_models['autoload_pending'] = True
+        bottom_of_table = max(bottom_of_table, self.nextrely)
+
+        self.nextrely = top_of_table
+        self.controlnet_models = self.add_model_widgets(
+            model_type=ModelType.ControlNet,
+            window_width=window_width,
+        )
+        bottom_of_table = max(bottom_of_table, self.nextrely)
+
+        self.nextrely = top_of_table
+        self.t2i_models = self.add_model_widgets(
+            model_type=ModelType.T2IAdapter,
+            window_width=window_width,
+        )
+        bottom_of_table = max(bottom_of_table, self.nextrely)
+        self.nextrely = top_of_table
+        self.ipadapter_models = self.add_model_widgets(
+            model_type=ModelType.IPAdapter,
+            window_width=window_width,
+        )
+        bottom_of_table = max(bottom_of_table, self.nextrely)
+
+        self.nextrely = top_of_table
+        self.lora_models = self.add_model_widgets(
+            model_type=ModelType.Lora,
+            window_width=window_width,
+        )
+        bottom_of_table = max(bottom_of_table, self.nextrely)
+
+        self.nextrely = top_of_table
+        self.ti_models = self.add_model_widgets(
+            model_type=ModelType.TextualInversion,
+            window_width=window_width,
+        )
+        bottom_of_table = max(bottom_of_table, self.nextrely)
+
+        self.nextrely = bottom_of_table + 1
+
+        self.nextrely += 1
+        back_label = "BACK"
+        cancel_label = "CANCEL"
+        current_position = self.nextrely
+        if self.multipage:
+            self.back_button = self.add_widget_intelligent(
+                npyscreen.ButtonPress,
+                name=back_label,
+                when_pressed_function=self.on_back,
+            )
+        else:
+            self.nextrely = current_position
+            self.cancel_button = self.add_widget_intelligent(
+                npyscreen.ButtonPress, name=cancel_label, when_pressed_function=self.on_cancel
+            )
+            self.nextrely = current_position
+
+        label = "APPLY CHANGES"
+        self.nextrely = current_position
+        self.done = self.add_widget_intelligent(
+            npyscreen.ButtonPress,
+            name=label,
+            relx=window_width - len(label) - 15,
+            when_pressed_function=self.on_done,
+        )
+
+        # This restores the selected page on return from an installation
+        for _i in range(1, self.current_tab + 1):
+            self.tabs.h_cursor_line_down(1)
+        self._toggle_tables([self.current_tab])
+
+    ############# diffusers tab ##########
+    def add_starter_pipelines(self) -> dict[str, npyscreen.widget]:
+        """Add widgets responsible for selecting diffusers models"""
+        widgets: Dict[str, npyscreen.widget] = {}
+
+        all_models = self.all_models  # master dict of all models, indexed by key
+        model_list = [x for x in self.starter_models if all_models[x].type in ["main", "vae"]]
+        model_labels = [self.model_labels[x] for x in model_list]
+
+        widgets.update(
+            label1=self.add_widget_intelligent(
+                CenteredTitleText,
+                name="Select from a starter set of Stable Diffusion models from HuggingFace and Civitae.",
+                editable=False,
+                labelColor="CAUTION",
+            )
+        )
+
+        self.nextrely -= 1
+        # if user has already installed some initial models, then don't patronize them
+        # by showing more recommendations
+        show_recommended = len(self.installed_models) == 0
+
+        checked = [
+            model_list.index(x)
+            for x in model_list
+            if (show_recommended and all_models[x].recommended) or all_models[x].installed
+        ]
+        widgets.update(
+            models_selected=self.add_widget_intelligent(
+                MultiSelectColumns,
+                columns=1,
+                name="Install Starter Models",
+                values=model_labels,
+                value=checked,
+                max_height=len(model_list) + 1,
+                relx=4,
+                scroll_exit=True,
+            ),
+            models=model_list,
+        )
+
+        self.nextrely += 1
+        return widgets
+
+    ############# Add a set of model install widgets ########
+    def add_model_widgets(
+        self,
+        model_type: ModelType,
+        window_width: int = 120,
+        install_prompt: Optional[str] = None,
+        exclude: Optional[Set[str]] = None,
+    ) -> dict[str, npyscreen.widget]:
+        """Generic code to create model selection widgets"""
+        if exclude is None:
+            exclude = set()
+        widgets: Dict[str, npyscreen.widget] = {}
+        all_models = self.all_models
+        model_list = sorted(
+            [x for x in all_models if all_models[x].type == model_type and x not in exclude],
+            key=lambda x: all_models[x].name or "",
+        )
+        model_labels = [self.model_labels[x] for x in model_list]
+
+        show_recommended = len(self.installed_models) == 0
+        truncated = False
+        if len(model_list) > 0:
+            max_width = max([len(x) for x in model_labels])
+            columns = window_width // (max_width + 8)  # 8 characters for "[x] " and padding
+            columns = min(len(model_list), columns) or 1
+            prompt = (
+                install_prompt
+                or f"Select the desired {model_type.value.title()} models to install. Unchecked models will be purged from disk."
+            )
+
+            widgets.update(
+                label1=self.add_widget_intelligent(
+                    CenteredTitleText,
+                    name=prompt,
+                    editable=False,
+                    labelColor="CAUTION",
+                )
+            )
+
+            if len(model_labels) > MAX_OTHER_MODELS:
+                model_labels = model_labels[0:MAX_OTHER_MODELS]
+                truncated = True
+
+            widgets.update(
+                models_selected=self.add_widget_intelligent(
+                    MultiSelectColumns,
+                    columns=columns,
+                    name=f"Install {model_type} Models",
+                    values=model_labels,
+                    value=[
+                        model_list.index(x)
+                        for x in model_list
+                        if (show_recommended and all_models[x].recommended) or all_models[x].installed
+                    ],
+                    max_height=len(model_list) // columns + 1,
+                    relx=4,
+                    scroll_exit=True,
+                ),
+                models=model_list,
+            )
+
+        if truncated:
+            widgets.update(
+                warning_message=self.add_widget_intelligent(
+                    npyscreen.FixedText,
+                    value=f"Too many models to display (max={MAX_OTHER_MODELS}). Some are not displayed.",
+                    editable=False,
+                    color="CAUTION",
+                )
+            )
+
+        self.nextrely += 1
+        widgets.update(
+            download_ids=self.add_widget_intelligent(
+                TextBox,
+                name="Additional URLs, or HuggingFace repo_ids to install (Space separated. Use shift-control-V to paste):",
+                max_height=6,
+                scroll_exit=True,
+                editable=True,
+            )
+        )
+        return widgets
+
+    ### Tab for arbitrary diffusers widgets ###
+    def add_pipeline_widgets(
+        self,
+        model_type: ModelType = ModelType.Main,
+        window_width: int = 120,
+        **kwargs,
+    ) -> dict[str, npyscreen.widget]:
+        """Similar to add_model_widgets() but adds some additional widgets at the bottom
+        to support the autoload directory"""
+        widgets = self.add_model_widgets(
+            model_type=model_type,
+            window_width=window_width,
+            install_prompt=f"Installed {model_type.value.title()} models. Unchecked models in the InvokeAI root directory will be deleted. Enter URLs, paths or repo_ids to import.",
+            **kwargs,
+        )
+
+        return widgets
+
+    def resize(self) -> None:
+        super().resize()
+        if s := self.starter_pipelines.get("models_selected"):
+            if model_list := self.starter_pipelines.get("models"):
+                s.values = [self.model_labels[x] for x in model_list]
+
+    def _toggle_tables(self, value: List[int]) -> None:
+        selected_tab = value[0]
+        widgets = [
+            self.starter_pipelines,
+            self.pipeline_models,
+            self.controlnet_models,
+            self.t2i_models,
+            self.ipadapter_models,
+            self.lora_models,
+            self.ti_models,
+        ]
+
+        for group in widgets:
+            for _k, v in group.items():
+                try:
+                    v.hidden = True
+                    v.editable = False
+                except Exception:
+                    pass
+        for _k, v in widgets[selected_tab].items():
+            try:
+                v.hidden = False
+                if not isinstance(v, (npyscreen.FixedText, npyscreen.TitleFixedText, CenteredTitleText)):
+                    v.editable = True
+            except Exception:
+                pass
+        self.__class__.current_tab = selected_tab  # for persistence
+        self.display()
+
+    def _get_model_labels(self) -> dict[str, str]:
+        """Return a list of trimmed labels for all models."""
+        window_width, window_height = get_terminal_size()
+        checkbox_width = 4
+        spacing_width = 2
+        result = {}
+
+        models = self.all_models
+        label_width = max([len(models[x].name or "") for x in self.starter_models])
+        description_width = window_width - label_width - checkbox_width - spacing_width
+
+        for key in self.all_models:
+            description = models[key].description
+            description = (
+                description[0 : description_width - 3] + "..."
+                if description and len(description) > description_width
+                else description
+                if description
+                else ""
+            )
+            result[key] = f"%-{label_width}s %s" % (models[key].name, description)
+
+        return result
+
+    def _get_columns(self) -> int:
+        window_width, window_height = get_terminal_size()
+        cols = 4 if window_width > 240 else 3 if window_width > 160 else 2 if window_width > 80 else 1
+        return min(cols, len(self.installed_models))
+
+    def confirm_deletions(self, selections: InstallSelections) -> bool:
+        remove_models = selections.remove_models
+        if remove_models:
+            model_names = [self.all_models[x].name or "" for x in remove_models]
+            mods = "\n".join(model_names)
+            is_ok = npyscreen.notify_ok_cancel(
+                f"These unchecked models will be deleted from disk. Continue?\n---------\n{mods}"
+            )
+            assert isinstance(is_ok, bool)  # npyscreen doesn't have return type annotations
+            return is_ok
+        else:
+            return True
+
+    @property
+    def all_models(self) -> Dict[str, UnifiedModelInfo]:
+        # npyscreen doesn't having typing hints
+        return self.parentApp.install_helper.all_models  # type: ignore
+
+    @property
+    def starter_models(self) -> List[str]:
+        return self.parentApp.install_helper._starter_models  # type: ignore
+
+    @property
+    def installed_models(self) -> List[str]:
+        return self.parentApp.install_helper._installed_models  # type: ignore
+
+    def on_back(self) -> None:
+        self.parentApp.switchFormPrevious()
+        self.editing = False
+
+    def on_cancel(self) -> None:
+        self.parentApp.setNextForm(None)
+        self.parentApp.user_cancelled = True
+        self.editing = False
+
+    def on_done(self) -> None:
+        self.marshall_arguments()
+        if not self.confirm_deletions(self.parentApp.install_selections):
+            return
+        self.parentApp.setNextForm(None)
+        self.parentApp.user_cancelled = False
+        self.editing = False
+
+    def marshall_arguments(self) -> None:
+        """
+        Assemble arguments and store as attributes of the application:
+        .starter_models: dict of model names to install from INITIAL_CONFIGURE.yaml
+                         True  => Install
+                         False => Remove
+        .scan_directory: Path to a directory of models to scan and import
+        .autoscan_on_startup:  True if invokeai should scan and import at startup time
+        .import_model_paths:   list of URLs, repo_ids and file paths to import
+        """
+        selections = self.parentApp.install_selections
+        all_models = self.all_models
+
+        # Defined models (in INITIAL_CONFIG.yaml or models.yaml) to add/remove
+        ui_sections = [
+            self.starter_pipelines,
+            self.pipeline_models,
+            self.controlnet_models,
+            self.t2i_models,
+            self.ipadapter_models,
+            self.lora_models,
+            self.ti_models,
+        ]
+        for section in ui_sections:
+            if "models_selected" not in section:
+                continue
+            selected = {section["models"][x] for x in section["models_selected"].value}
+            models_to_install = [x for x in selected if not self.all_models[x].installed]
+            models_to_remove = [x for x in section["models"] if x not in selected and self.all_models[x].installed]
+            selections.remove_models.extend(models_to_remove)
+            selections.install_models.extend([all_models[x] for x in models_to_install])
+
+        # models located in the 'download_ids" section
+        for section in ui_sections:
+            if downloads := section.get("download_ids"):
+                models = [UnifiedModelInfo(source=x) for x in downloads.value.split()]
+                selections.install_models.extend(models)
+
+
+class AddModelApplication(npyscreen.NPSAppManaged):  # type: ignore
+    def __init__(self, opt: Namespace, install_helper: InstallHelper):
+        super().__init__()
+        self.program_opts = opt
+        self.user_cancelled = False
+        self.install_selections = InstallSelections()
+        self.install_helper = install_helper
+
+    def onStart(self) -> None:
+        npyscreen.setTheme(npyscreen.Themes.DefaultTheme)
+        self.main_form = self.addForm(
+            "MAIN",
+            addModelsForm,
+            name="Install Stable Diffusion Models",
+            cycle_widgets=False,
+        )
+
+
+def list_models(installer: ModelInstallService, model_type: ModelType):
+    """Print out all models of type model_type."""
+    models = installer.record_store.search_by_attr(model_type=model_type)
+    print(f"Installed models of type `{model_type}`:")
+    for model in models:
+        path = (config.models_path / model.path).resolve()
+        print(f"{model.name:40}{model.base.value:14}{path}")
+
+
+# --------------------------------------------------------
+def select_and_download_models(opt: Namespace) -> None:
+    """Prompt user for install/delete selections and execute."""
+    precision = "float32" if opt.full_precision else choose_precision(torch.device(choose_torch_device()))
+    # unsure how to avoid a typing complaint in the next line: config.precision is an enumerated Literal
+    config.precision = precision  # type: ignore
+    install_helper = InstallHelper(config, logger)
+    installer = install_helper.installer
+
+    if opt.list_models:
+        list_models(installer, opt.list_models)
+
+    elif opt.add or opt.delete:
+        selections = InstallSelections(
+            install_models=[UnifiedModelInfo(source=x) for x in (opt.add or [])], remove_models=opt.delete or []
+        )
+        install_helper.add_or_delete(selections)
+
+    elif opt.default_only:
+        selections = InstallSelections(install_models=[install_helper.default_model()])
+        install_helper.add_or_delete(selections)
+
+    elif opt.yes_to_all:
+        selections = InstallSelections(install_models=install_helper.recommended_models())
+        install_helper.add_or_delete(selections)
+
+    # this is where the TUI is called
+    else:
+        if not set_min_terminal_size(MIN_COLS, MIN_LINES):
+            raise WindowTooSmallException(
+                "Could not increase terminal size. Try running again with a larger window or smaller font size."
+            )
+
+        installApp = AddModelApplication(opt, install_helper)
+        try:
+            installApp.run()
+        except KeyboardInterrupt:
+            print("Aborted...")
+            sys.exit(-1)
+
+        install_helper.add_or_delete(installApp.install_selections)
+
+
+# -------------------------------------
+def main() -> None:
+    parser = argparse.ArgumentParser(description="InvokeAI model downloader")
+    parser.add_argument(
+        "--add",
+        nargs="*",
+        help="List of URLs, local paths or repo_ids of models to install",
+    )
+    parser.add_argument(
+        "--delete",
+        nargs="*",
+        help="List of names of models to delete. Use type:name to disambiguate, as in `controlnet:my_model`",
+    )
+    parser.add_argument(
+        "--full-precision",
+        dest="full_precision",
+        action=argparse.BooleanOptionalAction,
+        type=bool,
+        default=False,
+        help="use 32-bit weights instead of faster 16-bit weights",
+    )
+    parser.add_argument(
+        "--yes",
+        "-y",
+        dest="yes_to_all",
+        action="store_true",
+        help='answer "yes" to all prompts',
+    )
+    parser.add_argument(
+        "--default_only",
+        action="store_true",
+        help="Only install the default model",
+    )
+    parser.add_argument(
+        "--list-models",
+        choices=[x.value for x in ModelType],
+        help="list installed models",
+    )
+    parser.add_argument(
+        "--root_dir",
+        dest="root",
+        type=str,
+        default=None,
+        help="path to root of install directory",
+    )
+    opt = parser.parse_args()
+
+    invoke_args = []
+    if opt.root:
+        invoke_args.extend(["--root", opt.root])
+    if opt.full_precision:
+        invoke_args.extend(["--precision", "float32"])
+    config.parse_args(invoke_args)
+    logger = InvokeAILogger().get_logger(config=config)
+
+    if not config.model_conf_path.exists():
+        logger.info("Your InvokeAI root directory is not set up. Calling invokeai-configure.")
+        from invokeai.frontend.install.invokeai_configure import invokeai_configure
+
+        invokeai_configure()
+        sys.exit(0)
+
+    try:
+        select_and_download_models(opt)
+    except AssertionError as e:
+        logger.error(e)
+        sys.exit(-1)
+    except KeyboardInterrupt:
+        curses.nocbreak()
+        curses.echo()
+        curses.endwin()
+        logger.info("Goodbye! Come back soon.")
+    except WindowTooSmallException as e:
+        logger.error(str(e))
+    except widget.NotEnoughSpaceForWidget as e:
+        if str(e).startswith("Height of 1 allocated"):
+            logger.error("Insufficient vertical space for the interface. Please make your window taller and try again")
+        input("Press any key to continue...")
+    except Exception as e:
+        if str(e).startswith("addwstr"):
+            logger.error(
+                "Insufficient horizontal space for the interface. Please make your window wider and try again."
+            )
+        else:
+            print(f"An exception has occurred: {str(e)} Details:")
+            print(traceback.format_exc(), file=sys.stderr)
+        input("Press any key to continue...")
+
+
+# -------------------------------------
+if __name__ == "__main__":
+    main()
diff --git a/invokeai/frontend/merge/merge_diffusers2.py b/invokeai/frontend/merge/merge_diffusers2.py
new file mode 100644
index 0000000000..b365198f87
--- /dev/null
+++ b/invokeai/frontend/merge/merge_diffusers2.py
@@ -0,0 +1,438 @@
+"""
+invokeai.frontend.merge exports a single function called merge_diffusion_models().
+
+It merges 2-3 models together and create a new InvokeAI-registered diffusion model.
+
+Copyright (c) 2023-24 Lincoln Stein and the InvokeAI Development Team
+"""
+import argparse
+import curses
+import re
+import sys
+from argparse import Namespace
+from pathlib import Path
+from typing import List, Optional, Tuple
+
+import npyscreen
+from npyscreen import widget
+
+import invokeai.backend.util.logging as logger
+from invokeai.app.services.config import InvokeAIAppConfig
+from invokeai.app.services.model_install import ModelInstallServiceBase
+from invokeai.app.services.model_records import ModelRecordServiceBase
+from invokeai.backend.install.install_helper import initialize_installer
+from invokeai.backend.model_manager import (
+    BaseModelType,
+    ModelFormat,
+    ModelType,
+    ModelVariantType,
+)
+from invokeai.backend.model_manager.merge import ModelMerger
+from invokeai.frontend.install.widgets import FloatTitleSlider, SingleSelectColumns, TextBox
+
+config = InvokeAIAppConfig.get_config()
+
+BASE_TYPES = [
+    (BaseModelType.StableDiffusion1, "Models Built on SD-1.x"),
+    (BaseModelType.StableDiffusion2, "Models Built on SD-2.x"),
+    (BaseModelType.StableDiffusionXL, "Models Built on SDXL"),
+]
+
+
+def _parse_args() -> Namespace:
+    parser = argparse.ArgumentParser(description="InvokeAI model merging")
+    parser.add_argument(
+        "--root_dir",
+        type=Path,
+        default=config.root,
+        help="Path to the invokeai runtime directory",
+    )
+    parser.add_argument(
+        "--front_end",
+        "--gui",
+        dest="front_end",
+        action="store_true",
+        default=False,
+        help="Activate the text-based graphical front end for collecting parameters. Aside from --root_dir, other parameters will be ignored.",
+    )
+    parser.add_argument(
+        "--models",
+        dest="model_names",
+        type=str,
+        nargs="+",
+        help="Two to three model names to be merged",
+    )
+    parser.add_argument(
+        "--base_model",
+        type=str,
+        choices=[x[0].value for x in BASE_TYPES],
+        help="The base model shared by the models to be merged",
+    )
+    parser.add_argument(
+        "--merged_model_name",
+        "--destination",
+        dest="merged_model_name",
+        type=str,
+        help="Name of the output model. If not specified, will be the concatenation of the input model names.",
+    )
+    parser.add_argument(
+        "--alpha",
+        type=float,
+        default=0.5,
+        help="The interpolation parameter, ranging from 0 to 1. It affects the ratio in which the checkpoints are merged. Higher values give more weight to the 2d and 3d models",
+    )
+    parser.add_argument(
+        "--interpolation",
+        dest="interp",
+        type=str,
+        choices=["weighted_sum", "sigmoid", "inv_sigmoid", "add_difference"],
+        default="weighted_sum",
+        help='Interpolation method to use. If three models are present, only "add_difference" will work.',
+    )
+    parser.add_argument(
+        "--force",
+        action="store_true",
+        help="Try to merge models even if they are incompatible with each other",
+    )
+    parser.add_argument(
+        "--clobber",
+        "--overwrite",
+        dest="clobber",
+        action="store_true",
+        help="Overwrite the merged model if --merged_model_name already exists",
+    )
+    return parser.parse_args()
+
+
+# ------------------------- GUI HERE -------------------------
+class mergeModelsForm(npyscreen.FormMultiPageAction):
+    interpolations = ["weighted_sum", "sigmoid", "inv_sigmoid"]
+
+    def __init__(self, parentApp, name):
+        self.parentApp = parentApp
+        self.ALLOW_RESIZE = True
+        self.FIX_MINIMUM_SIZE_WHEN_CREATED = False
+        super().__init__(parentApp, name)
+
+    @property
+    def model_record_store(self) -> ModelRecordServiceBase:
+        installer: ModelInstallServiceBase = self.parentApp.installer
+        return installer.record_store
+
+    def afterEditing(self) -> None:
+        self.parentApp.setNextForm(None)
+
+    def create(self) -> None:
+        window_height, window_width = curses.initscr().getmaxyx()
+        self.current_base = 0
+        self.models = self.get_models(BASE_TYPES[self.current_base][0])
+        self.model_names = [x[1] for x in self.models]
+        max_width = max([len(x) for x in self.model_names])
+        max_width += 6
+        horizontal_layout = max_width * 3 < window_width
+
+        self.add_widget_intelligent(
+            npyscreen.FixedText,
+            color="CONTROL",
+            value="Select two models to merge and optionally a third.",
+            editable=False,
+        )
+        self.add_widget_intelligent(
+            npyscreen.FixedText,
+            color="CONTROL",
+            value="Use up and down arrows to move, <space> to select an item, <tab> and <shift-tab> to move from one field to the next.",
+            editable=False,
+        )
+        self.nextrely += 1
+        self.base_select = self.add_widget_intelligent(
+            SingleSelectColumns,
+            values=[x[1] for x in BASE_TYPES],
+            value=[self.current_base],
+            columns=4,
+            max_height=2,
+            relx=8,
+            scroll_exit=True,
+        )
+        self.base_select.on_changed = self._populate_models
+        self.add_widget_intelligent(
+            npyscreen.FixedText,
+            value="MODEL 1",
+            color="GOOD",
+            editable=False,
+            rely=6 if horizontal_layout else None,
+        )
+        self.model1 = self.add_widget_intelligent(
+            npyscreen.SelectOne,
+            values=self.model_names,
+            value=0,
+            max_height=len(self.model_names),
+            max_width=max_width,
+            scroll_exit=True,
+            rely=7,
+        )
+        self.add_widget_intelligent(
+            npyscreen.FixedText,
+            value="MODEL 2",
+            color="GOOD",
+            editable=False,
+            relx=max_width + 3 if horizontal_layout else None,
+            rely=6 if horizontal_layout else None,
+        )
+        self.model2 = self.add_widget_intelligent(
+            npyscreen.SelectOne,
+            name="(2)",
+            values=self.model_names,
+            value=1,
+            max_height=len(self.model_names),
+            max_width=max_width,
+            relx=max_width + 3 if horizontal_layout else None,
+            rely=7 if horizontal_layout else None,
+            scroll_exit=True,
+        )
+        self.add_widget_intelligent(
+            npyscreen.FixedText,
+            value="MODEL 3",
+            color="GOOD",
+            editable=False,
+            relx=max_width * 2 + 3 if horizontal_layout else None,
+            rely=6 if horizontal_layout else None,
+        )
+        models_plus_none = self.model_names.copy()
+        models_plus_none.insert(0, "None")
+        self.model3 = self.add_widget_intelligent(
+            npyscreen.SelectOne,
+            name="(3)",
+            values=models_plus_none,
+            value=0,
+            max_height=len(self.model_names) + 1,
+            max_width=max_width,
+            scroll_exit=True,
+            relx=max_width * 2 + 3 if horizontal_layout else None,
+            rely=7 if horizontal_layout else None,
+        )
+        for m in [self.model1, self.model2, self.model3]:
+            m.when_value_edited = self.models_changed
+        self.merged_model_name = self.add_widget_intelligent(
+            TextBox,
+            name="Name for merged model:",
+            labelColor="CONTROL",
+            max_height=3,
+            value="",
+            scroll_exit=True,
+        )
+        self.force = self.add_widget_intelligent(
+            npyscreen.Checkbox,
+            name="Force merge of models created by different diffusers library versions",
+            labelColor="CONTROL",
+            value=True,
+            scroll_exit=True,
+        )
+        self.nextrely += 1
+        self.merge_method = self.add_widget_intelligent(
+            npyscreen.TitleSelectOne,
+            name="Merge Method:",
+            values=self.interpolations,
+            value=0,
+            labelColor="CONTROL",
+            max_height=len(self.interpolations) + 1,
+            scroll_exit=True,
+        )
+        self.alpha = self.add_widget_intelligent(
+            FloatTitleSlider,
+            name="Weight (alpha) to assign to second and third models:",
+            out_of=1.0,
+            step=0.01,
+            lowest=0,
+            value=0.5,
+            labelColor="CONTROL",
+            scroll_exit=True,
+        )
+        self.model1.editing = True
+
+    def models_changed(self) -> None:
+        models = self.model1.values
+        selected_model1 = self.model1.value[0]
+        selected_model2 = self.model2.value[0]
+        selected_model3 = self.model3.value[0]
+        merged_model_name = f"{models[selected_model1]}+{models[selected_model2]}"
+        self.merged_model_name.value = merged_model_name
+
+        if selected_model3 > 0:
+            self.merge_method.values = ["add_difference ( A+(B-C) )"]
+            self.merged_model_name.value += f"+{models[selected_model3 -1]}"  # In model3 there is one more element in the list (None). So we have to subtract one.
+        else:
+            self.merge_method.values = self.interpolations
+        self.merge_method.value = 0
+
+    def on_ok(self) -> None:
+        if self.validate_field_values() and self.check_for_overwrite():
+            self.parentApp.setNextForm(None)
+            self.editing = False
+            self.parentApp.merge_arguments = self.marshall_arguments()
+            npyscreen.notify("Starting the merge...")
+        else:
+            self.editing = True
+
+    def on_cancel(self) -> None:
+        sys.exit(0)
+
+    def marshall_arguments(self) -> dict:
+        model_keys = [x[0] for x in self.models]
+        models = [
+            model_keys[self.model1.value[0]],
+            model_keys[self.model2.value[0]],
+        ]
+        if self.model3.value[0] > 0:
+            models.append(model_keys[self.model3.value[0] - 1])
+            interp = "add_difference"
+        else:
+            interp = self.interpolations[self.merge_method.value[0]]
+
+        args = {
+            "model_keys": models,
+            "alpha": self.alpha.value,
+            "interp": interp,
+            "force": self.force.value,
+            "merged_model_name": self.merged_model_name.value,
+        }
+        return args
+
+    def check_for_overwrite(self) -> bool:
+        model_out = self.merged_model_name.value
+        if model_out not in self.model_names:
+            return True
+        else:
+            result: bool = npyscreen.notify_yes_no(
+                f"The chosen merged model destination, {model_out}, is already in use. Overwrite?"
+            )
+            return result
+
+    def validate_field_values(self) -> bool:
+        bad_fields = []
+        model_names = self.model_names
+        selected_models = {model_names[self.model1.value[0]], model_names[self.model2.value[0]]}
+        if self.model3.value[0] > 0:
+            selected_models.add(model_names[self.model3.value[0] - 1])
+        if len(selected_models) < 2:
+            bad_fields.append(f"Please select two or three DIFFERENT models to compare. You selected {selected_models}")
+        if len(bad_fields) > 0:
+            message = "The following problems were detected and must be corrected:"
+            for problem in bad_fields:
+                message += f"\n* {problem}"
+            npyscreen.notify_confirm(message)
+            return False
+        else:
+            return True
+
+    def get_models(self, base_model: Optional[BaseModelType] = None) -> List[Tuple[str, str]]:  # key to name
+        models = [
+            (x.key, x.name)
+            for x in self.model_record_store.search_by_attr(model_type=ModelType.Main, base_model=base_model)
+            if x.format == ModelFormat("diffusers")
+            and hasattr(x, "variant")
+            and x.variant == ModelVariantType("normal")
+        ]
+        return sorted(models, key=lambda x: x[1])
+
+    def _populate_models(self, value: List[int]) -> None:
+        base_model = BASE_TYPES[value[0]][0]
+        self.models = self.get_models(base_model)
+        self.model_names = [x[1] for x in self.models]
+
+        models_plus_none = self.model_names.copy()
+        models_plus_none.insert(0, "None")
+        self.model1.values = self.model_names
+        self.model2.values = self.model_names
+        self.model3.values = models_plus_none
+
+        self.display()
+
+
+# npyscreen is untyped and causes mypy to get naggy
+class Mergeapp(npyscreen.NPSAppManaged):  # type: ignore
+    def __init__(self, installer: ModelInstallServiceBase):
+        """Initialize the npyscreen application."""
+        super().__init__()
+        self.installer = installer
+
+    def onStart(self) -> None:
+        npyscreen.setTheme(npyscreen.Themes.ElegantTheme)
+        self.main = self.addForm("MAIN", mergeModelsForm, name="Merge Models Settings")
+
+
+def run_gui(args: Namespace) -> None:
+    installer = initialize_installer(config)
+    mergeapp = Mergeapp(installer)
+    mergeapp.run()
+    merge_args = mergeapp.merge_arguments
+    merger = ModelMerger(installer)
+    merger.merge_diffusion_models_and_save(**merge_args)
+    logger.info(f'Models merged into new model: "{merge_args.merged_model_name}".')
+
+
+def run_cli(args: Namespace) -> None:
+    assert args.alpha >= 0 and args.alpha <= 1.0, "alpha must be between 0 and 1"
+    assert (
+        args.model_names and len(args.model_names) >= 1 and len(args.model_names) <= 3
+    ), "Please provide the --models argument to list 2 to 3 models to merge. Use --help for full usage."
+
+    if not args.merged_model_name:
+        args.merged_model_name = "+".join(args.model_names)
+        logger.info(f'No --merged_model_name provided. Defaulting to "{args.merged_model_name}"')
+
+    installer = initialize_installer(config)
+    store = installer.record_store
+    assert (
+        len(store.search_by_attr(args.merged_model_name, args.base_model, ModelType.Main)) == 0 or args.clobber
+    ), f'A model named "{args.merged_model_name}" already exists. Use --clobber to overwrite.'
+
+    merger = ModelMerger(installer)
+    model_keys = []
+    for name in args.model_names:
+        if len(name) == 32 and re.match(r"^[0-9a-f]$", name):
+            model_keys.append(name)
+        else:
+            models = store.search_by_attr(
+                model_name=name, model_type=ModelType.Main, base_model=BaseModelType(args.base_model)
+            )
+            assert len(models) > 0, f"{name}: Unknown model"
+            assert len(models) < 2, f"{name}: More than one model by this name. Please specify the model key instead."
+            model_keys.append(models[0].key)
+
+    merger.merge_diffusion_models_and_save(
+        alpha=args.alpha,
+        model_keys=model_keys,
+        merged_model_name=args.merged_model_name,
+        interp=args.interp,
+        force=args.force,
+    )
+    logger.info(f'Models merged into new model: "{args.merged_model_name}".')
+
+
+def main() -> None:
+    args = _parse_args()
+    if args.root_dir:
+        config.parse_args(["--root", str(args.root_dir)])
+    else:
+        config.parse_args([])
+
+    try:
+        if args.front_end:
+            run_gui(args)
+        else:
+            run_cli(args)
+    except widget.NotEnoughSpaceForWidget as e:
+        if str(e).startswith("Height of 1 allocated"):
+            logger.error("You need to have at least two diffusers models defined in models.yaml in order to merge")
+        else:
+            logger.error("Not enough room for the user interface. Try making this window larger.")
+        sys.exit(-1)
+    except Exception as e:
+        logger.error(str(e))
+        sys.exit(-1)
+    except KeyboardInterrupt:
+        sys.exit(-1)
+
+
+if __name__ == "__main__":
+    main()
diff --git a/invokeai/frontend/training/textual_inversion.py b/invokeai/frontend/training/textual_inversion.py
index 556f216e97..81b1081bb8 100755
--- a/invokeai/frontend/training/textual_inversion.py
+++ b/invokeai/frontend/training/textual_inversion.py
@@ -3,7 +3,7 @@
 """
 This is the frontend to "textual_inversion_training.py".
 
-Copyright (c) 2023 Lincoln Stein and the InvokeAI Development Team
+Copyright (c) 2023-24 Lincoln Stein and the InvokeAI Development Team
 """
 
 
@@ -14,7 +14,7 @@ import sys
 import traceback
 from argparse import Namespace
 from pathlib import Path
-from typing import List, Tuple
+from typing import Dict, List, Optional, Tuple
 
 import npyscreen
 from npyscreen import widget
@@ -22,8 +22,9 @@ from omegaconf import OmegaConf
 
 import invokeai.backend.util.logging as logger
 from invokeai.app.services.config import InvokeAIAppConfig
-
-from ...backend.training import do_textual_inversion_training, parse_args
+from invokeai.backend.install.install_helper import initialize_installer
+from invokeai.backend.model_manager import ModelType
+from invokeai.backend.training import do_textual_inversion_training, parse_args
 
 TRAINING_DATA = "text-inversion-training-data"
 TRAINING_DIR = "text-inversion-output"
@@ -44,19 +45,21 @@ class textualInversionForm(npyscreen.FormMultiPageAction):
     precisions = ["no", "fp16", "bf16"]
     learnable_properties = ["object", "style"]
 
-    def __init__(self, parentApp, name, saved_args=None):
+    def __init__(self, parentApp: npyscreen.NPSAppManaged, name: str, saved_args: Optional[Dict[str, str]] = None):
         self.saved_args = saved_args or {}
         super().__init__(parentApp, name)
 
-    def afterEditing(self):
+    def afterEditing(self) -> None:
         self.parentApp.setNextForm(None)
 
-    def create(self):
+    def create(self) -> None:
         self.model_names, default = self.get_model_names()
         default_initializer_token = "★"
         default_placeholder_token = ""
         saved_args = self.saved_args
 
+        assert config is not None
+
         try:
             default = self.model_names.index(saved_args["model"])
         except Exception:
@@ -71,7 +74,7 @@ class textualInversionForm(npyscreen.FormMultiPageAction):
         self.model = self.add_widget_intelligent(
             npyscreen.TitleSelectOne,
             name="Model Name:",
-            values=self.model_names,
+            values=sorted(self.model_names),
             value=default,
             max_height=len(self.model_names) + 1,
             scroll_exit=True,
@@ -236,7 +239,7 @@ class textualInversionForm(npyscreen.FormMultiPageAction):
         )
         self.model.editing = True
 
-    def initializer_changed(self):
+    def initializer_changed(self) -> None:
         placeholder = self.placeholder_token.value
         self.prompt_token.value = f"(Trigger by using <{placeholder}> in your prompts)"
         self.train_data_dir.value = str(config.root_dir / TRAINING_DATA / placeholder)
@@ -275,10 +278,13 @@ class textualInversionForm(npyscreen.FormMultiPageAction):
             return True
 
     def get_model_names(self) -> Tuple[List[str], int]:
-        conf = OmegaConf.load(config.root_dir / "configs/models.yaml")
-        model_names = [idx for idx in sorted(conf.keys()) if conf[idx].get("format", None) == "diffusers"]
-        defaults = [idx for idx in range(len(model_names)) if "default" in conf[model_names[idx]]]
-        default = defaults[0] if len(defaults) > 0 else 0
+        global config
+        assert config is not None
+        installer = initialize_installer(config)
+        store = installer.record_store
+        main_models = store.search_by_attr(model_type=ModelType.Main)
+        model_names = [f"{x.base.value}/{x.type.value}/{x.name}" for x in main_models if x.format == "diffusers"]
+        default = 0
         return (model_names, default)
 
     def marshall_arguments(self) -> dict:
@@ -326,7 +332,7 @@ class textualInversionForm(npyscreen.FormMultiPageAction):
 
 
 class MyApplication(npyscreen.NPSAppManaged):
-    def __init__(self, saved_args=None):
+    def __init__(self, saved_args: Optional[Dict[str, str]] = None):
         super().__init__()
         self.ti_arguments = None
         self.saved_args = saved_args
@@ -341,11 +347,12 @@ class MyApplication(npyscreen.NPSAppManaged):
         )
 
 
-def copy_to_embeddings_folder(args: dict):
+def copy_to_embeddings_folder(args: Dict[str, str]) -> None:
     """
     Copy learned_embeds.bin into the embeddings folder, and offer to
     delete the full model and checkpoints.
     """
+    assert config is not None
     source = Path(args["output_dir"], "learned_embeds.bin")
     dest_dir_name = args["placeholder_token"].strip("<>")
     destination = config.root_dir / "embeddings" / dest_dir_name
@@ -358,10 +365,11 @@ def copy_to_embeddings_folder(args: dict):
         logger.info(f'Keeping {args["output_dir"]}')
 
 
-def save_args(args: dict):
+def save_args(args: dict) -> None:
     """
     Save the current argument values to an omegaconf file
     """
+    assert config is not None
     dest_dir = config.root_dir / TRAINING_DIR
     os.makedirs(dest_dir, exist_ok=True)
     conf_file = dest_dir / CONF_FILE
@@ -373,6 +381,7 @@ def previous_args() -> dict:
     """
     Get the previous arguments used.
     """
+    assert config is not None
     conf_file = config.root_dir / TRAINING_DIR / CONF_FILE
     try:
         conf = OmegaConf.load(conf_file)
@@ -383,24 +392,26 @@ def previous_args() -> dict:
     return conf
 
 
-def do_front_end(args: Namespace):
+def do_front_end() -> None:
+    global config
     saved_args = previous_args()
     myapplication = MyApplication(saved_args=saved_args)
     myapplication.run()
 
-    if args := myapplication.ti_arguments:
-        os.makedirs(args["output_dir"], exist_ok=True)
+    if my_args := myapplication.ti_arguments:
+        os.makedirs(my_args["output_dir"], exist_ok=True)
 
         # Automatically add angle brackets around the trigger
-        if not re.match("^<.+>$", args["placeholder_token"]):
-            args["placeholder_token"] = f"<{args['placeholder_token']}>"
+        if not re.match("^<.+>$", my_args["placeholder_token"]):
+            my_args["placeholder_token"] = f"<{my_args['placeholder_token']}>"
 
-        args["only_save_embeds"] = True
-        save_args(args)
+        my_args["only_save_embeds"] = True
+        save_args(my_args)
 
         try:
-            do_textual_inversion_training(InvokeAIAppConfig.get_config(), **args)
-            copy_to_embeddings_folder(args)
+            print(my_args)
+            do_textual_inversion_training(config, **my_args)
+            copy_to_embeddings_folder(my_args)
         except Exception as e:
             logger.error("An exception occurred during training. The exception was:")
             logger.error(str(e))
@@ -408,11 +419,12 @@ def do_front_end(args: Namespace):
             logger.error(traceback.format_exc())
 
 
-def main():
+def main() -> None:
     global config
 
-    args = parse_args()
+    args: Namespace = parse_args()
     config = InvokeAIAppConfig.get_config()
+    config.parse_args([])
 
     # change root if needed
     if args.root_dir:
@@ -420,7 +432,7 @@ def main():
 
     try:
         if args.front_end:
-            do_front_end(args)
+            do_front_end()
         else:
             do_textual_inversion_training(config, **vars(args))
     except AssertionError as e:
diff --git a/invokeai/frontend/training/textual_inversion2.py b/invokeai/frontend/training/textual_inversion2.py
new file mode 100644
index 0000000000..81b1081bb8
--- /dev/null
+++ b/invokeai/frontend/training/textual_inversion2.py
@@ -0,0 +1,454 @@
+#!/usr/bin/env python
+
+"""
+This is the frontend to "textual_inversion_training.py".
+
+Copyright (c) 2023-24 Lincoln Stein and the InvokeAI Development Team
+"""
+
+
+import os
+import re
+import shutil
+import sys
+import traceback
+from argparse import Namespace
+from pathlib import Path
+from typing import Dict, List, Optional, Tuple
+
+import npyscreen
+from npyscreen import widget
+from omegaconf import OmegaConf
+
+import invokeai.backend.util.logging as logger
+from invokeai.app.services.config import InvokeAIAppConfig
+from invokeai.backend.install.install_helper import initialize_installer
+from invokeai.backend.model_manager import ModelType
+from invokeai.backend.training import do_textual_inversion_training, parse_args
+
+TRAINING_DATA = "text-inversion-training-data"
+TRAINING_DIR = "text-inversion-output"
+CONF_FILE = "preferences.conf"
+config = None
+
+
+class textualInversionForm(npyscreen.FormMultiPageAction):
+    resolutions = [512, 768, 1024]
+    lr_schedulers = [
+        "linear",
+        "cosine",
+        "cosine_with_restarts",
+        "polynomial",
+        "constant",
+        "constant_with_warmup",
+    ]
+    precisions = ["no", "fp16", "bf16"]
+    learnable_properties = ["object", "style"]
+
+    def __init__(self, parentApp: npyscreen.NPSAppManaged, name: str, saved_args: Optional[Dict[str, str]] = None):
+        self.saved_args = saved_args or {}
+        super().__init__(parentApp, name)
+
+    def afterEditing(self) -> None:
+        self.parentApp.setNextForm(None)
+
+    def create(self) -> None:
+        self.model_names, default = self.get_model_names()
+        default_initializer_token = "★"
+        default_placeholder_token = ""
+        saved_args = self.saved_args
+
+        assert config is not None
+
+        try:
+            default = self.model_names.index(saved_args["model"])
+        except Exception:
+            pass
+
+        self.add_widget_intelligent(
+            npyscreen.FixedText,
+            value="Use ctrl-N and ctrl-P to move to the <N>ext and <P>revious fields, cursor arrows to make a selection, and space to toggle checkboxes.",
+            editable=False,
+        )
+
+        self.model = self.add_widget_intelligent(
+            npyscreen.TitleSelectOne,
+            name="Model Name:",
+            values=sorted(self.model_names),
+            value=default,
+            max_height=len(self.model_names) + 1,
+            scroll_exit=True,
+        )
+        self.placeholder_token = self.add_widget_intelligent(
+            npyscreen.TitleText,
+            name="Trigger Term:",
+            value="",  # saved_args.get('placeholder_token',''), # to restore previous term
+            scroll_exit=True,
+        )
+        self.placeholder_token.when_value_edited = self.initializer_changed
+        self.nextrely -= 1
+        self.nextrelx += 30
+        self.prompt_token = self.add_widget_intelligent(
+            npyscreen.FixedText,
+            name="Trigger term for use in prompt",
+            value="",
+            editable=False,
+            scroll_exit=True,
+        )
+        self.nextrelx -= 30
+        self.initializer_token = self.add_widget_intelligent(
+            npyscreen.TitleText,
+            name="Initializer:",
+            value=saved_args.get("initializer_token", default_initializer_token),
+            scroll_exit=True,
+        )
+        self.resume_from_checkpoint = self.add_widget_intelligent(
+            npyscreen.Checkbox,
+            name="Resume from last saved checkpoint",
+            value=False,
+            scroll_exit=True,
+        )
+        self.learnable_property = self.add_widget_intelligent(
+            npyscreen.TitleSelectOne,
+            name="Learnable property:",
+            values=self.learnable_properties,
+            value=self.learnable_properties.index(saved_args.get("learnable_property", "object")),
+            max_height=4,
+            scroll_exit=True,
+        )
+        self.train_data_dir = self.add_widget_intelligent(
+            npyscreen.TitleFilename,
+            name="Data Training Directory:",
+            select_dir=True,
+            must_exist=False,
+            value=str(
+                saved_args.get(
+                    "train_data_dir",
+                    config.root_dir / TRAINING_DATA / default_placeholder_token,
+                )
+            ),
+            scroll_exit=True,
+        )
+        self.output_dir = self.add_widget_intelligent(
+            npyscreen.TitleFilename,
+            name="Output Destination Directory:",
+            select_dir=True,
+            must_exist=False,
+            value=str(
+                saved_args.get(
+                    "output_dir",
+                    config.root_dir / TRAINING_DIR / default_placeholder_token,
+                )
+            ),
+            scroll_exit=True,
+        )
+        self.resolution = self.add_widget_intelligent(
+            npyscreen.TitleSelectOne,
+            name="Image resolution (pixels):",
+            values=self.resolutions,
+            value=self.resolutions.index(saved_args.get("resolution", 512)),
+            max_height=4,
+            scroll_exit=True,
+        )
+        self.center_crop = self.add_widget_intelligent(
+            npyscreen.Checkbox,
+            name="Center crop images before resizing to resolution",
+            value=saved_args.get("center_crop", False),
+            scroll_exit=True,
+        )
+        self.mixed_precision = self.add_widget_intelligent(
+            npyscreen.TitleSelectOne,
+            name="Mixed Precision:",
+            values=self.precisions,
+            value=self.precisions.index(saved_args.get("mixed_precision", "fp16")),
+            max_height=4,
+            scroll_exit=True,
+        )
+        self.num_train_epochs = self.add_widget_intelligent(
+            npyscreen.TitleSlider,
+            name="Number of training epochs:",
+            out_of=1000,
+            step=50,
+            lowest=1,
+            value=saved_args.get("num_train_epochs", 100),
+            scroll_exit=True,
+        )
+        self.max_train_steps = self.add_widget_intelligent(
+            npyscreen.TitleSlider,
+            name="Max Training Steps:",
+            out_of=10000,
+            step=500,
+            lowest=1,
+            value=saved_args.get("max_train_steps", 3000),
+            scroll_exit=True,
+        )
+        self.train_batch_size = self.add_widget_intelligent(
+            npyscreen.TitleSlider,
+            name="Batch Size (reduce if you run out of memory):",
+            out_of=50,
+            step=1,
+            lowest=1,
+            value=saved_args.get("train_batch_size", 8),
+            scroll_exit=True,
+        )
+        self.gradient_accumulation_steps = self.add_widget_intelligent(
+            npyscreen.TitleSlider,
+            name="Gradient Accumulation Steps (may need to decrease this to resume from a checkpoint):",
+            out_of=10,
+            step=1,
+            lowest=1,
+            value=saved_args.get("gradient_accumulation_steps", 4),
+            scroll_exit=True,
+        )
+        self.lr_warmup_steps = self.add_widget_intelligent(
+            npyscreen.TitleSlider,
+            name="Warmup Steps:",
+            out_of=100,
+            step=1,
+            lowest=0,
+            value=saved_args.get("lr_warmup_steps", 0),
+            scroll_exit=True,
+        )
+        self.learning_rate = self.add_widget_intelligent(
+            npyscreen.TitleText,
+            name="Learning Rate:",
+            value=str(
+                saved_args.get("learning_rate", "5.0e-04"),
+            ),
+            scroll_exit=True,
+        )
+        self.scale_lr = self.add_widget_intelligent(
+            npyscreen.Checkbox,
+            name="Scale learning rate by number GPUs, steps and batch size",
+            value=saved_args.get("scale_lr", True),
+            scroll_exit=True,
+        )
+        self.enable_xformers_memory_efficient_attention = self.add_widget_intelligent(
+            npyscreen.Checkbox,
+            name="Use xformers acceleration",
+            value=saved_args.get("enable_xformers_memory_efficient_attention", False),
+            scroll_exit=True,
+        )
+        self.lr_scheduler = self.add_widget_intelligent(
+            npyscreen.TitleSelectOne,
+            name="Learning rate scheduler:",
+            values=self.lr_schedulers,
+            max_height=7,
+            value=self.lr_schedulers.index(saved_args.get("lr_scheduler", "constant")),
+            scroll_exit=True,
+        )
+        self.model.editing = True
+
+    def initializer_changed(self) -> None:
+        placeholder = self.placeholder_token.value
+        self.prompt_token.value = f"(Trigger by using <{placeholder}> in your prompts)"
+        self.train_data_dir.value = str(config.root_dir / TRAINING_DATA / placeholder)
+        self.output_dir.value = str(config.root_dir / TRAINING_DIR / placeholder)
+        self.resume_from_checkpoint.value = Path(self.output_dir.value).exists()
+
+    def on_ok(self):
+        if self.validate_field_values():
+            self.parentApp.setNextForm(None)
+            self.editing = False
+            self.parentApp.ti_arguments = self.marshall_arguments()
+            npyscreen.notify("Launching textual inversion training. This will take a while...")
+        else:
+            self.editing = True
+
+    def ok_cancel(self):
+        sys.exit(0)
+
+    def validate_field_values(self) -> bool:
+        bad_fields = []
+        if self.model.value is None:
+            bad_fields.append("Model Name must correspond to a known model in models.yaml")
+        if not re.match("^[a-zA-Z0-9.-]+$", self.placeholder_token.value):
+            bad_fields.append("Trigger term must only contain alphanumeric characters, the dot and hyphen")
+        if self.train_data_dir.value is None:
+            bad_fields.append("Data Training Directory cannot be empty")
+        if self.output_dir.value is None:
+            bad_fields.append("The Output Destination Directory cannot be empty")
+        if len(bad_fields) > 0:
+            message = "The following problems were detected and must be corrected:"
+            for problem in bad_fields:
+                message += f"\n* {problem}"
+            npyscreen.notify_confirm(message)
+            return False
+        else:
+            return True
+
+    def get_model_names(self) -> Tuple[List[str], int]:
+        global config
+        assert config is not None
+        installer = initialize_installer(config)
+        store = installer.record_store
+        main_models = store.search_by_attr(model_type=ModelType.Main)
+        model_names = [f"{x.base.value}/{x.type.value}/{x.name}" for x in main_models if x.format == "diffusers"]
+        default = 0
+        return (model_names, default)
+
+    def marshall_arguments(self) -> dict:
+        args = {}
+
+        # the choices
+        args.update(
+            model=self.model_names[self.model.value[0]],
+            resolution=self.resolutions[self.resolution.value[0]],
+            lr_scheduler=self.lr_schedulers[self.lr_scheduler.value[0]],
+            mixed_precision=self.precisions[self.mixed_precision.value[0]],
+            learnable_property=self.learnable_properties[self.learnable_property.value[0]],
+        )
+
+        # all the strings and booleans
+        for attr in (
+            "initializer_token",
+            "placeholder_token",
+            "train_data_dir",
+            "output_dir",
+            "scale_lr",
+            "center_crop",
+            "enable_xformers_memory_efficient_attention",
+        ):
+            args[attr] = getattr(self, attr).value
+
+        # all the integers
+        for attr in (
+            "train_batch_size",
+            "gradient_accumulation_steps",
+            "num_train_epochs",
+            "max_train_steps",
+            "lr_warmup_steps",
+        ):
+            args[attr] = int(getattr(self, attr).value)
+
+        # the floats (just one)
+        args.update(learning_rate=float(self.learning_rate.value))
+
+        # a special case
+        if self.resume_from_checkpoint.value and Path(self.output_dir.value).exists():
+            args["resume_from_checkpoint"] = "latest"
+
+        return args
+
+
+class MyApplication(npyscreen.NPSAppManaged):
+    def __init__(self, saved_args: Optional[Dict[str, str]] = None):
+        super().__init__()
+        self.ti_arguments = None
+        self.saved_args = saved_args
+
+    def onStart(self):
+        npyscreen.setTheme(npyscreen.Themes.DefaultTheme)
+        self.main = self.addForm(
+            "MAIN",
+            textualInversionForm,
+            name="Textual Inversion Settings",
+            saved_args=self.saved_args,
+        )
+
+
+def copy_to_embeddings_folder(args: Dict[str, str]) -> None:
+    """
+    Copy learned_embeds.bin into the embeddings folder, and offer to
+    delete the full model and checkpoints.
+    """
+    assert config is not None
+    source = Path(args["output_dir"], "learned_embeds.bin")
+    dest_dir_name = args["placeholder_token"].strip("<>")
+    destination = config.root_dir / "embeddings" / dest_dir_name
+    os.makedirs(destination, exist_ok=True)
+    logger.info(f"Training completed. Copying learned_embeds.bin into {str(destination)}")
+    shutil.copy(source, destination)
+    if (input("Delete training logs and intermediate checkpoints? [y] ") or "y").startswith(("y", "Y")):
+        shutil.rmtree(Path(args["output_dir"]))
+    else:
+        logger.info(f'Keeping {args["output_dir"]}')
+
+
+def save_args(args: dict) -> None:
+    """
+    Save the current argument values to an omegaconf file
+    """
+    assert config is not None
+    dest_dir = config.root_dir / TRAINING_DIR
+    os.makedirs(dest_dir, exist_ok=True)
+    conf_file = dest_dir / CONF_FILE
+    conf = OmegaConf.create(args)
+    OmegaConf.save(config=conf, f=conf_file)
+
+
+def previous_args() -> dict:
+    """
+    Get the previous arguments used.
+    """
+    assert config is not None
+    conf_file = config.root_dir / TRAINING_DIR / CONF_FILE
+    try:
+        conf = OmegaConf.load(conf_file)
+        conf["placeholder_token"] = conf["placeholder_token"].strip("<>")
+    except Exception:
+        conf = None
+
+    return conf
+
+
+def do_front_end() -> None:
+    global config
+    saved_args = previous_args()
+    myapplication = MyApplication(saved_args=saved_args)
+    myapplication.run()
+
+    if my_args := myapplication.ti_arguments:
+        os.makedirs(my_args["output_dir"], exist_ok=True)
+
+        # Automatically add angle brackets around the trigger
+        if not re.match("^<.+>$", my_args["placeholder_token"]):
+            my_args["placeholder_token"] = f"<{my_args['placeholder_token']}>"
+
+        my_args["only_save_embeds"] = True
+        save_args(my_args)
+
+        try:
+            print(my_args)
+            do_textual_inversion_training(config, **my_args)
+            copy_to_embeddings_folder(my_args)
+        except Exception as e:
+            logger.error("An exception occurred during training. The exception was:")
+            logger.error(str(e))
+            logger.error("DETAILS:")
+            logger.error(traceback.format_exc())
+
+
+def main() -> None:
+    global config
+
+    args: Namespace = parse_args()
+    config = InvokeAIAppConfig.get_config()
+    config.parse_args([])
+
+    # change root if needed
+    if args.root_dir:
+        config.root = args.root_dir
+
+    try:
+        if args.front_end:
+            do_front_end()
+        else:
+            do_textual_inversion_training(config, **vars(args))
+    except AssertionError as e:
+        logger.error(e)
+        sys.exit(-1)
+    except KeyboardInterrupt:
+        pass
+    except (widget.NotEnoughSpaceForWidget, Exception) as e:
+        if str(e).startswith("Height of 1 allocated"):
+            logger.error("You need to have at least one diffusers models defined in models.yaml in order to train")
+        elif str(e).startswith("addwstr"):
+            logger.error("Not enough window space for the interface. Please make your window larger and try again.")
+        else:
+            logger.error(e)
+        sys.exit(-1)
+
+
+if __name__ == "__main__":
+    main()
diff --git a/pyproject.toml b/pyproject.toml
index 8ad1da67b8..ee55720283 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -137,8 +137,10 @@ dependencies = [
 # full commands
 "invokeai-configure" = "invokeai.frontend.install.invokeai_configure:invokeai_configure"
 "invokeai-merge" = "invokeai.frontend.merge:invokeai_merge_diffusers"
+"invokeai-merge2" = "invokeai.frontend.merge.merge_diffusers2:main"
 "invokeai-ti" = "invokeai.frontend.training:invokeai_textual_inversion"
 "invokeai-model-install" = "invokeai.frontend.install.model_install:main"
+"invokeai-model-install2" = "invokeai.frontend.install.model_install2:main"  # will eventually be renamed to invokeai-model-install
 "invokeai-migrate3" = "invokeai.backend.install.migrate_to_3:main"
 "invokeai-update" = "invokeai.frontend.install.invokeai_update:main"
 "invokeai-metadata" = "invokeai.backend.image_util.invoke_metadata:main"