chore(ui): clean up unused files/packages

2024-08-30 20:32:17 +00:00 · 2023-05-15 22:48:06 +10:00 · 2023-05-15 22:48:06 +10:00 · 513eb11616
commit 513eb11616
parent d2c9140e69
61 changed files with 61 additions and 2297 deletions
--- a/invokeai/frontend/web/package.json
+++ b/invokeai/frontend/web/package.json
@ -89,18 +89,13 @@
    "react-i18next": "^12.2.2",
    "react-icons": "^4.7.1",
    "react-konva": "^18.2.7",
-    "react-konva-utils": "^1.0.4",
    "react-redux": "^8.0.5",
    "react-resizable-panels": "^0.0.42",
-    "react-rnd": "^10.4.1",
-    "react-transition-group": "^4.4.5",
    "react-use": "^17.4.0",
    "react-virtuoso": "^4.3.5",
    "react-zoom-pan-pinch": "^3.0.7",
    "reactflow": "^11.7.0",
-    "redux-deep-persist": "^1.0.7",
    "redux-dynamic-middlewares": "^2.2.0",
-    "redux-persist": "^6.0.0",
    "redux-remember": "^3.3.1",
    "roarr": "^7.15.0",
    "serialize-error": "^11.0.0",
--- a/invokeai/frontend/web/patches/redux-deep-persist+1.0.7.patch
+++ b/invokeai/frontend/web/patches/redux-deep-persist+1.0.7.patch
@ -1,24 +0,0 @@
-diff --git a/node_modules/redux-deep-persist/lib/types.d.ts b/node_modules/redux-deep-persist/lib/types.d.ts
-index b67b8c2..7fc0fa1 100644
--- a/node_modules/redux-deep-persist/lib/types.d.ts
-+++ b/node_modules/redux-deep-persist/lib/types.d.ts
-@@ -35,6 +35,7 @@ export interface PersistConfig<S, RS = any, HSS = any, ESS = any> {
-     whitelist?: Array<string>;
-     transforms?: Array<Transform<HSS, ESS, S, RS>>;
-     throttle?: number;
-+    debounce?: number;
-     migrate?: PersistMigrate;
-     stateReconciler?: false | StateReconciler<S>;
-     getStoredState?: (config: PersistConfig<S, RS, HSS, ESS>) => Promise<PersistedState>;
-diff --git a/node_modules/redux-deep-persist/src/types.ts b/node_modules/redux-deep-persist/src/types.ts
-index 398ac19..cbc5663 100644
--- a/node_modules/redux-deep-persist/src/types.ts
-+++ b/node_modules/redux-deep-persist/src/types.ts
-@@ -91,6 +91,7 @@ export interface PersistConfig<S, RS = any, HSS = any, ESS = any> {
-     whitelist?: Array<string>;
-     transforms?: Array<Transform<HSS, ESS, S, RS>>;
-     throttle?: number;
-+    debounce?: number;
-     migrate?: PersistMigrate;
-     stateReconciler?: false | StateReconciler<S>;
-     /**
--- a/invokeai/frontend/web/patches/redux-persist+6.0.0.patch
+++ b/invokeai/frontend/web/patches/redux-persist+6.0.0.patch
@ -1,116 +0,0 @@
-diff --git a/node_modules/redux-persist/es/createPersistoid.js b/node_modules/redux-persist/es/createPersistoid.js
-index 8b43b9a..184faab 100644
--- a/node_modules/redux-persist/es/createPersistoid.js
-+++ b/node_modules/redux-persist/es/createPersistoid.js
-@@ -6,6 +6,7 @@ export default function createPersistoid(config) {
-   var whitelist = config.whitelist || null;
-   var transforms = config.transforms || [];
-   var throttle = config.throttle || 0;
-+  var debounce = config.debounce || 0;
-   var storageKey = "".concat(config.keyPrefix !== undefined ? config.keyPrefix : KEY_PREFIX).concat(config.key);
-   var storage = config.storage;
-   var serialize;
-@@ -28,30 +29,37 @@ export default function createPersistoid(config) {
-   var timeIterator = null;
-   var writePromise = null;
- 
-  var update = function update(state) {
-    // add any changed keys to the queue
-    Object.keys(state).forEach(function (key) {
-      if (!passWhitelistBlacklist(key)) return; // is keyspace ignored? noop
-+  // Timer for debounced `update()`
-+  let timer = 0;
- 
-      if (lastState[key] === state[key]) return; // value unchanged? noop
-+  function update(state) {
-+    // Debounce the update
-+    clearTimeout(timer);
-+    timer = setTimeout(() => {
-+      // add any changed keys to the queue
-+      Object.keys(state).forEach(function (key) {
-+        if (!passWhitelistBlacklist(key)) return; // is keyspace ignored? noop
- 
-      if (keysToProcess.indexOf(key) !== -1) return; // is key already queued? noop
-+        if (lastState[key] === state[key]) return; // value unchanged? noop
- 
-      keysToProcess.push(key); // add key to queue
-    }); //if any key is missing in the new state which was present in the lastState,
-    //add it for processing too
-+        if (keysToProcess.indexOf(key) !== -1) return; // is key already queued? noop
- 
-    Object.keys(lastState).forEach(function (key) {
-      if (state[key] === undefined && passWhitelistBlacklist(key) && keysToProcess.indexOf(key) === -1 && lastState[key] !== undefined) {
-        keysToProcess.push(key);
-      }
-    }); // start the time iterator if not running (read: throttle)
-+        keysToProcess.push(key); // add key to queue
-+      }); //if any key is missing in the new state which was present in the lastState,
-+      //add it for processing too
- 
-    if (timeIterator === null) {
-      timeIterator = setInterval(processNextKey, throttle);
-    }
-+      Object.keys(lastState).forEach(function (key) {
-+        if (state[key] === undefined && passWhitelistBlacklist(key) && keysToProcess.indexOf(key) === -1 && lastState[key] !== undefined) {
-+          keysToProcess.push(key);
-+        }
-+      }); // start the time iterator if not running (read: throttle)
-+
-+      if (timeIterator === null) {
-+        timeIterator = setInterval(processNextKey, throttle);
-+      }
- 
-    lastState = state;
-+      lastState = state;
-+    }, debounce)
-   };
- 
-   function processNextKey() {
-diff --git a/node_modules/redux-persist/es/types.js.flow b/node_modules/redux-persist/es/types.js.flow
-index c50d3cd..39d8be2 100644
--- a/node_modules/redux-persist/es/types.js.flow
-+++ b/node_modules/redux-persist/es/types.js.flow
-@@ -19,6 +19,7 @@ export type PersistConfig = {
-   whitelist?: Array<string>,
-   transforms?: Array<Transform>,
-   throttle?: number,
-+  debounce?: number,
-   migrate?: (PersistedState, number) => Promise<PersistedState>,
-   stateReconciler?: false | Function,
-   getStoredState?: PersistConfig => Promise<PersistedState>, // used for migrations
-diff --git a/node_modules/redux-persist/lib/types.js.flow b/node_modules/redux-persist/lib/types.js.flow
-index c50d3cd..39d8be2 100644
--- a/node_modules/redux-persist/lib/types.js.flow
-+++ b/node_modules/redux-persist/lib/types.js.flow
-@@ -19,6 +19,7 @@ export type PersistConfig = {
-   whitelist?: Array<string>,
-   transforms?: Array<Transform>,
-   throttle?: number,
-+  debounce?: number,
-   migrate?: (PersistedState, number) => Promise<PersistedState>,
-   stateReconciler?: false | Function,
-   getStoredState?: PersistConfig => Promise<PersistedState>, // used for migrations
-diff --git a/node_modules/redux-persist/src/types.js b/node_modules/redux-persist/src/types.js
-index c50d3cd..39d8be2 100644
--- a/node_modules/redux-persist/src/types.js
-+++ b/node_modules/redux-persist/src/types.js
-@@ -19,6 +19,7 @@ export type PersistConfig = {
-   whitelist?: Array<string>,
-   transforms?: Array<Transform>,
-   throttle?: number,
-+  debounce?: number,
-   migrate?: (PersistedState, number) => Promise<PersistedState>,
-   stateReconciler?: false | Function,
-   getStoredState?: PersistConfig => Promise<PersistedState>, // used for migrations
-diff --git a/node_modules/redux-persist/types/types.d.ts b/node_modules/redux-persist/types/types.d.ts
-index b3733bc..2a1696c 100644
--- a/node_modules/redux-persist/types/types.d.ts
-+++ b/node_modules/redux-persist/types/types.d.ts
-@@ -35,6 +35,7 @@ declare module "redux-persist/es/types" {
-     whitelist?: Array<string>;
-     transforms?: Array<Transform<HSS, ESS, S, RS>>;
-     throttle?: number;
-+    debounce?: number;
-     migrate?: PersistMigrate;
-     stateReconciler?: false | StateReconciler<S>;
-     /**
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasGraphBuilt.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasGraphBuilt.ts
@ -1,31 +0,0 @@
-import { canvasGraphBuilt } from 'features/nodes/store/actions';
-import { startAppListening } from '..';
-import {
-  canvasSessionIdChanged,
-  stagingAreaInitialized,
-} from 'features/canvas/store/canvasSlice';
-import { sessionInvoked } from 'services/thunks/session';
-
-export const addCanvasGraphBuiltListener = () =>
-  startAppListening({
-    actionCreator: canvasGraphBuilt,
-    effect: async (action, { dispatch, getState, take }) => {
-      const [{ meta }] = await take(sessionInvoked.fulfilled.match);
-      const { sessionId } = meta.arg;
-      const state = getState();
-
-      if (!state.canvas.layerState.stagingArea.boundingBox) {
-        dispatch(
-          stagingAreaInitialized({
-            sessionId,
-            boundingBox: {
-              ...state.canvas.boundingBoxCoordinates,
-              ...state.canvas.boundingBoxDimensions,
-            },
-          })
-        );
-      }
-
-      dispatch(canvasSessionIdChanged(sessionId));
-    },
-  });
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/userInvokedCanvas.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/userInvokedCanvas.ts
@ -1,6 +1,6 @@
 import { startAppListening } from '..';
 import { sessionCreated, sessionInvoked } from 'services/thunks/session';
-import { buildCanvasGraphAndBlobs } from 'features/nodes/util/graphBuilders/buildCanvasGraph';
+import { buildCanvasGraphComponents } from 'features/nodes/util/graphBuilders/buildCanvasGraph';
 import { log } from 'app/logging/useLogger';
 import { canvasGraphBuilt } from 'features/nodes/store/actions';
 import { imageUploaded } from 'services/thunks/image';
@ -11,9 +11,17 @@ import {
  stagingAreaInitialized,
 } from 'features/canvas/store/canvasSlice';
 import { userInvoked } from 'app/store/actions';
+import { getCanvasData } from 'features/canvas/util/getCanvasData';
+import { getCanvasGenerationMode } from 'features/canvas/util/getCanvasGenerationMode';
+import { blobToDataURL } from 'features/canvas/util/blobToDataURL';
+import openBase64ImageInTab from 'common/util/openBase64ImageInTab';

 const moduleLog = log.child({ namespace: 'invoke' });

+/**
+ * This listener is responsible for building the canvas graph and blobs when the user invokes the canvas.
+ * It is also responsible for uploading the base and mask layers to the server.
+ */
 export const addUserInvokedCanvasListener = () => {
  startAppListening({
    predicate: (action): action is ReturnType<typeof userInvoked> =>
@ -21,25 +29,49 @@ export const addUserInvokedCanvasListener = () => {
    effect: async (action, { getState, dispatch, take }) => {
      const state = getState();

-      const data = await buildCanvasGraphAndBlobs(state);
+      // Build canvas blobs
+      const canvasBlobsAndImageData = await getCanvasData(state);

-      if (!data) {
+      if (!canvasBlobsAndImageData) {
+        moduleLog.error('Unable to create canvas data');
+        return;
+      }
+
+      const { baseBlob, baseImageData, maskBlob, maskImageData } =
+        canvasBlobsAndImageData;
+
+      // Determine the generation mode
+      const generationMode = getCanvasGenerationMode(
+        baseImageData,
+        maskImageData
+      );
+
+      if (state.system.enableImageDebugging) {
+        const baseDataURL = await blobToDataURL(baseBlob);
+        const maskDataURL = await blobToDataURL(maskBlob);
+        openBase64ImageInTab([
+          { base64: maskDataURL, caption: 'mask b64' },
+          { base64: baseDataURL, caption: 'image b64' },
+        ]);
+      }
+
+      moduleLog.debug(`Generation mode: ${generationMode}`);
+
+      // Build the canvas graph
+      const graphComponents = await buildCanvasGraphComponents(
+        state,
+        generationMode
+      );
+
+      if (!graphComponents) {
        moduleLog.error('Problem building graph');
        return;
      }

-      const {
-        rangeNode,
-        iterateNode,
-        baseNode,
-        edges,
-        baseBlob,
-        maskBlob,
-        generationMode,
-      } = data;
+      const { rangeNode, iterateNode, baseNode, edges } = graphComponents;

+      // Upload the base layer, to be used as init image
      const baseFilename = `${uuidv4()}.png`;
-      const maskFilename = `${uuidv4()}.png`;

      dispatch(
        imageUploaded({
@ -66,6 +98,9 @@ export const addUserInvokedCanvasListener = () => {
        };
      }

+      // Upload the mask layer image
+      const maskFilename = `${uuidv4()}.png`;
+
      if (baseNode.type === 'inpaint') {
        dispatch(
          imageUploaded({
@ -103,9 +138,12 @@ export const addUserInvokedCanvasListener = () => {
      dispatch(canvasGraphBuilt(graph));
      moduleLog({ data: graph }, 'Canvas graph built');

+      // Actually create the session
      dispatch(sessionCreated({ graph }));

+      // Wait for the session to be invoked (this is just the HTTP request to start processing)
      const [{ meta }] = await take(sessionInvoked.fulfilled.match);
+
      const { sessionId } = meta.arg;

      if (!state.canvas.layerState.stagingArea.boundingBox) {
--- a/invokeai/frontend/web/src/common/components/WorkInProgress/PostProcessingWIP.tsx
+++ b/invokeai/frontend/web/src/common/components/WorkInProgress/PostProcessingWIP.tsx
@ -1,29 +0,0 @@
-import { Flex, Heading, Text, VStack } from '@chakra-ui/react';
-import { useTranslation } from 'react-i18next';
-import WorkInProgress from './WorkInProgress';
-
-export const PostProcessingWIP = () => {
-  const { t } = useTranslation();
-  return (
-    <WorkInProgress>
-      <Flex
-        sx={{
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          w: '100%',
-          h: '100%',
-          gap: 4,
-          textAlign: 'center',
-        }}
-      >
-        <Heading>{t('common.postProcessing')}</Heading>
-        <VStack maxW="50rem" gap={4}>
-          <Text>{t('common.postProcessDesc1')}</Text>
-          <Text>{t('common.postProcessDesc2')}</Text>
-          <Text>{t('common.postProcessDesc3')}</Text>
-        </VStack>
-      </Flex>
-    </WorkInProgress>
-  );
-};
--- a/invokeai/frontend/web/src/common/components/WorkInProgress/Training.tsx
+++ b/invokeai/frontend/web/src/common/components/WorkInProgress/Training.tsx
@ -1,28 +0,0 @@
-import { Flex, Heading, Text, VStack } from '@chakra-ui/react';
-import { useTranslation } from 'react-i18next';
-import WorkInProgress from './WorkInProgress';
-
-export default function TrainingWIP() {
-  const { t } = useTranslation();
-  return (
-    <WorkInProgress>
-      <Flex
-        sx={{
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          w: '100%',
-          h: '100%',
-          gap: 4,
-          textAlign: 'center',
-        }}
-      >
-        <Heading>{t('common.training')}</Heading>
-        <VStack maxW="50rem" gap={4}>
-          <Text>{t('common.trainingDesc1')}</Text>
-          <Text>{t('common.trainingDesc2')}</Text>
-        </VStack>
-      </Flex>
-    </WorkInProgress>
-  );
-}
--- a/invokeai/frontend/web/src/common/components/WorkInProgress/WorkInProgress.tsx
+++ b/invokeai/frontend/web/src/common/components/WorkInProgress/WorkInProgress.tsx
@ -1,26 +0,0 @@
-import { Flex } from '@chakra-ui/react';
-import { ReactNode } from 'react';
-
-type WorkInProgressProps = {
-  children: ReactNode;
-};
-
-const WorkInProgress = (props: WorkInProgressProps) => {
-  const { children } = props;
-
-  return (
-    <Flex
-      sx={{
-        width: '100%',
-        height: '100%',
-        bg: 'base.850',
-        borderRadius: 'base',
-        position: 'relative',
-      }}
-    >
-      {children}
-    </Flex>
-  );
-};
-
-export default WorkInProgress;
--- a/invokeai/frontend/web/src/common/hooks/useClickOutsideWatcher.ts
+++ b/invokeai/frontend/web/src/common/hooks/useClickOutsideWatcher.ts
@ -1,35 +0,0 @@
-import { RefObject, useEffect } from 'react';
-
-const watchers: {
-  ref: RefObject<HTMLElement>;
-  enable: boolean;
-  callback: () => void;
-}[] = [];
-
-const useClickOutsideWatcher = () => {
-  useEffect(() => {
-    function handleClickOutside(e: MouseEvent) {
-      watchers.forEach(({ ref, enable, callback }) => {
-        if (enable && ref.current && !ref.current.contains(e.target as Node)) {
-          callback();
-        }
-      });
-    }
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-
-  return {
-    addWatcher: (watcher: {
-      ref: RefObject<HTMLElement>;
-      callback: () => void;
-      enable: boolean;
-    }) => {
-      watchers.push(watcher);
-    },
-  };
-};
-
-export default useClickOutsideWatcher;
--- a/invokeai/frontend/web/src/common/hooks/useUpdateTranslations.ts
+++ b/invokeai/frontend/web/src/common/hooks/useUpdateTranslations.ts
@ -1,17 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-export default function useUpdateTranslations(fn: () => void) {
-  const { i18n } = useTranslation();
-  const currentLang = localStorage.getItem('i18nextLng');
-
-  React.useEffect(() => {
-    fn();
-  }, [fn]);
-
-  React.useEffect(() => {
-    i18n.on('languageChanged', () => {
-      fn();
-    });
-  }, [fn, i18n, currentLang]);
-}
--- a/invokeai/frontend/web/src/common/icons/ImageToImageIcon.tsx
+++ b/invokeai/frontend/web/src/common/icons/ImageToImageIcon.tsx
@ -1,20 +0,0 @@
-import { createIcon } from '@chakra-ui/react';
-
-const ImageToImageIcon = createIcon({
-  displayName: 'ImageToImageIcon',
-  viewBox: '0 0 3543 3543',
-  path: (
-    <g transform="matrix(1.10943,0,0,1.10943,-206.981,-213.533)">
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M688.533,2405.95L542.987,2405.95C349.532,2405.95 192.47,2248.89 192.47,2055.44L192.47,542.987C192.47,349.532 349.532,192.47 542.987,192.47L2527.88,192.47C2721.33,192.47 2878.4,349.532 2878.4,542.987L2878.4,1172.79L3023.94,1172.79C3217.4,1172.79 3374.46,1329.85 3374.46,1523.3C3374.46,1523.3 3374.46,3035.75 3374.46,3035.75C3374.46,3229.21 3217.4,3386.27 3023.94,3386.27L1039.05,3386.27C845.595,3386.27 688.533,3229.21 688.533,3035.75L688.533,2405.95ZM3286.96,2634.37L3286.96,1523.3C3286.96,1378.14 3169.11,1260.29 3023.94,1260.29C3023.94,1260.29 1039.05,1260.29 1039.05,1260.29C893.887,1260.29 776.033,1378.14 776.033,1523.3L776.033,2489.79L1440.94,1736.22L2385.83,2775.59L2880.71,2200.41L3286.96,2634.37ZM2622.05,1405.51C2778.5,1405.51 2905.51,1532.53 2905.51,1688.98C2905.51,1845.42 2778.5,1972.44 2622.05,1972.44C2465.6,1972.44 2338.58,1845.42 2338.58,1688.98C2338.58,1532.53 2465.6,1405.51 2622.05,1405.51ZM2790.9,1172.79L1323.86,1172.79L944.882,755.906L279.97,1509.47L279.97,542.987C279.97,397.824 397.824,279.97 542.987,279.97C542.987,279.97 2527.88,279.97 2527.88,279.97C2673.04,279.97 2790.9,397.824 2790.9,542.987L2790.9,1172.79ZM2125.98,425.197C2282.43,425.197 2409.45,552.213 2409.45,708.661C2409.45,865.11 2282.43,992.126 2125.98,992.126C1969.54,992.126 1842.52,865.11 1842.52,708.661C1842.52,552.213 1969.54,425.197 2125.98,425.197Z"
-      />
-    </g>
-  ),
-  defaultProps: {
-    boxSize: '24px',
-  },
-});
-export default ImageToImageIcon;
--- a/invokeai/frontend/web/src/common/icons/InpaintIcon.tsx
+++ b/invokeai/frontend/web/src/common/icons/InpaintIcon.tsx
--- a/invokeai/frontend/web/src/common/icons/NodesIcon.tsx
+++ b/invokeai/frontend/web/src/common/icons/NodesIcon.tsx
@ -1,19 +0,0 @@
-import { createIcon } from '@chakra-ui/react';
-
-const NodesIcon = createIcon({
-  displayName: 'NodesIcon',
-  viewBox: '0 0 3543 3543',
-  path: (
-    <path
-      fill="currentColor"
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M3543.31,770.787C3543.31,515.578 3336.11,308.38 3080.9,308.38L462.407,308.38C207.197,308.38 0,515.578 0,770.787L0,2766.03C0,3021.24 207.197,3228.44 462.407,3228.44L3080.9,3228.44C3336.11,3228.44 3543.31,3021.24 3543.31,2766.03C3543.31,2766.03 3543.31,770.787 3543.31,770.787ZM3427.88,770.787L3427.88,2766.03C3427.88,2957.53 3272.4,3113.01 3080.9,3113.01C3080.9,3113.01 462.407,3113.01 462.407,3113.01C270.906,3113.01 115.431,2957.53 115.431,2766.03L115.431,770.787C115.431,579.286 270.906,423.812 462.407,423.812L3080.9,423.812C3272.4,423.812 3427.88,579.286 3427.88,770.787ZM1214.23,1130.69L1321.47,1130.69C1324.01,1130.69 1326.54,1130.53 1329.05,1130.2C1329.05,1130.2 1367.3,1125.33 1397.94,1149.8C1421.63,1168.72 1437.33,1204.3 1437.33,1265.48L1437.33,2078.74L1220.99,2078.74C1146.83,2078.74 1086.61,2138.95 1086.61,2213.12L1086.61,2762.46C1086.61,2836.63 1146.83,2896.84 1220.99,2896.84L1770.34,2896.84C1844.5,2896.84 1904.71,2836.63 1904.71,2762.46L1904.71,2213.12C1904.71,2138.95 1844.5,2078.74 1770.34,2078.74L1554,2078.74L1554,1604.84C1625.84,1658.19 1703.39,1658.1 1703.39,1658.1C1703.54,1658.1 1703.69,1658.11 1703.84,1658.11L2362.2,1658.11L2362.2,1874.44C2362.2,1948.61 2422.42,2008.82 2496.58,2008.82L3045.93,2008.82C3120.09,2008.82 3180.3,1948.61 3180.3,1874.44L3180.3,1325.1C3180.3,1250.93 3120.09,1190.72 3045.93,1190.72L2496.58,1190.72C2422.42,1190.72 2362.2,1250.93 2362.2,1325.1L2362.2,1558.97L2362.2,1541.44L1704.23,1541.44C1702.2,1541.37 1650.96,1539.37 1609.51,1499.26C1577.72,1468.49 1554,1416.47 1554,1331.69L1554,1265.48C1554,1153.86 1513.98,1093.17 1470.76,1058.64C1411.24,1011.1 1338.98,1012.58 1319.15,1014.03L1214.23,1014.03L1214.23,796.992C1214.23,722.828 1154.02,662.617 1079.85,662.617L530.507,662.617C456.343,662.617 396.131,722.828 396.131,796.992L396.131,1346.34C396.131,1420.5 456.343,1480.71 530.507,1480.71L1079.85,1480.71C1154.02,1480.71 1214.23,1420.5 1214.23,1346.34L1214.23,1130.69Z"
-    />
-  ),
-  defaultProps: {
-    boxSize: '24px',
-  },
-});
-
-export default NodesIcon;
--- a/invokeai/frontend/web/src/common/icons/OutpaintIcon.tsx
+++ b/invokeai/frontend/web/src/common/icons/OutpaintIcon.tsx
--- a/invokeai/frontend/web/src/common/icons/PostprocessingIcon.tsx
+++ b/invokeai/frontend/web/src/common/icons/PostprocessingIcon.tsx
@ -1,19 +0,0 @@
-import { createIcon } from '@chakra-ui/react';
-
-const PostprocessingIcon = createIcon({
-  displayName: 'PostprocessingIcon',
-  viewBox: '0 0 3543 3543',
-  path: (
-    <path
-      fill="currentColor"
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M709.477,1596.53L992.591,1275.66L2239.09,2646.81L2891.95,1888.03L3427.88,2460.51L3427.88,994.78C3427.88,954.66 3421.05,916.122 3408.5,880.254L3521.9,855.419C3535.8,899.386 3543.31,946.214 3543.31,994.78L3543.31,2990.02C3543.31,3245.23 3336.11,3452.43 3080.9,3452.43C3080.9,3452.43 462.407,3452.43 462.407,3452.43C207.197,3452.43 -0,3245.23 -0,2990.02L-0,994.78C-0,739.571 207.197,532.373 462.407,532.373L505.419,532.373L504.644,532.546L807.104,600.085C820.223,601.729 832.422,607.722 841.77,617.116C850.131,625.517 855.784,636.21 858.055,647.804L462.407,647.804C270.906,647.804 115.431,803.279 115.431,994.78L115.431,2075.73L-0,2101.5L115.431,2127.28L115.431,2269.78L220.47,2150.73L482.345,2209.21C503.267,2211.83 522.722,2221.39 537.63,2236.37C552.538,2251.35 562.049,2270.9 564.657,2291.93L671.84,2776.17L779.022,2291.93C781.631,2270.9 791.141,2251.35 806.05,2236.37C820.958,2221.39 840.413,2211.83 861.334,2209.21L1353.15,2101.5L861.334,1993.8C840.413,1991.18 820.958,1981.62 806.05,1966.64C791.141,1951.66 781.631,1932.11 779.022,1911.08L709.477,1596.53ZM671.84,1573.09L725.556,2006.07C726.863,2016.61 731.63,2026.4 739.101,2033.91C746.573,2041.42 756.323,2046.21 766.808,2047.53L1197.68,2101.5L766.808,2155.48C756.323,2156.8 746.573,2161.59 739.101,2169.09C731.63,2176.6 726.863,2186.4 725.556,2196.94L671.84,2629.92L618.124,2196.94C616.817,2186.4 612.05,2176.6 604.579,2169.09C597.107,2161.59 587.357,2156.8 576.872,2155.48L146.001,2101.5L576.872,2047.53C587.357,2046.21 597.107,2041.42 604.579,2033.91C612.05,2026.4 616.817,2016.61 618.124,2006.07L671.84,1573.09ZM609.035,1710.36L564.657,1911.08C562.049,1932.11 552.538,1951.66 537.63,1966.64C522.722,1981.62 503.267,1991.18 482.345,1993.8L328.665,2028.11L609.035,1710.36ZM2297.12,938.615L2451.12,973.003C2480.59,976.695 2507.99,990.158 2528.99,1011.26C2549.99,1032.37 2563.39,1059.9 2567.07,1089.52L2672.73,1566.9C2634.5,1580.11 2593.44,1587.29 2550.72,1587.29C2344.33,1587.29 2176.77,1419.73 2176.77,1213.34C2176.77,1104.78 2223.13,1006.96 2297.12,938.615ZM2718.05,76.925L2793.72,686.847C2795.56,701.69 2802.27,715.491 2812.8,726.068C2823.32,736.644 2837.06,743.391 2851.83,745.242L3458.78,821.28L2851.83,897.318C2837.06,899.168 2823.32,905.916 2812.8,916.492C2802.27,927.068 2795.56,940.87 2793.72,955.712L2718.05,1565.63L2642.38,955.712C2640.54,940.87 2633.83,927.068 2623.3,916.492C2612.78,905.916 2599.04,899.168 2584.27,897.318L1977.32,821.28L2584.27,745.242C2599.04,743.391 2612.78,736.644 2623.3,726.068C2633.83,715.491 2640.54,701.69 2642.38,686.847L2718.05,76.925ZM2883.68,1043.06C2909.88,1094.13 2924.67,1152.02 2924.67,1213.34C2924.67,1335.4 2866.06,1443.88 2775.49,1512.14L2869.03,1089.52C2871.07,1073.15 2876.07,1057.42 2883.68,1043.06ZM925.928,201.2L959.611,472.704C960.431,479.311 963.42,485.455 968.105,490.163C972.79,494.871 978.904,497.875 985.479,498.698L1255.66,532.546L985.479,566.395C978.904,567.218 972.79,570.222 968.105,574.93C963.42,579.638 960.431,585.781 959.611,592.388L925.928,863.893L892.245,592.388C891.425,585.781 888.436,579.638 883.751,574.93C879.066,570.222 872.952,567.218 866.378,566.395L596.195,532.546L866.378,498.698C872.952,497.875 879.066,494.871 883.751,490.163C888.436,485.455 891.425,479.311 892.245,472.704L925.928,201.2ZM2864.47,532.373L3080.9,532.373C3258.7,532.373 3413.2,632.945 3490.58,780.281L3319.31,742.773C3257.14,683.925 3173.2,647.804 3080.9,647.804L2927.07,647.804C2919.95,642.994 2913.25,637.473 2907.11,631.298C2886.11,610.194 2872.71,582.655 2869.03,553.04L2864.47,532.373ZM1352.36,532.373L2571.64,532.373L2567.07,553.04C2563.39,582.655 2549.99,610.194 2528.99,631.298C2522.85,637.473 2516.16,642.994 2509.03,647.804L993.801,647.804C996.072,636.21 1001.73,625.517 1010.09,617.116C1019.43,607.722 1031.63,601.729 1044.75,600.085L1353.15,532.546L1352.36,532.373Z"
-    />
-  ),
-  defaultProps: {
-    boxSize: '24px',
-  },
-});
-
-export default PostprocessingIcon;
--- a/invokeai/frontend/web/src/common/icons/TextToImageIcon.tsx
+++ b/invokeai/frontend/web/src/common/icons/TextToImageIcon.tsx
--- a/invokeai/frontend/web/src/common/icons/TrainingIcon.tsx
+++ b/invokeai/frontend/web/src/common/icons/TrainingIcon.tsx
@ -1,19 +0,0 @@
-import { createIcon } from '@chakra-ui/react';
-
-const TrainingIcon = createIcon({
-  displayName: 'TrainingIcon',
-  viewBox: '0 0 3544 3544',
-  path: (
-    <path
-      fill="currentColor"
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M0,768.593L0,2774.71C0,2930.6 78.519,3068.3 198.135,3150.37C273.059,3202.68 364.177,3233.38 462.407,3233.38C462.407,3233.38 3080.9,3233.38 3080.9,3233.38C3179.13,3233.38 3270.25,3202.68 3345.17,3150.37C3464.79,3068.3 3543.31,2930.6 3543.31,2774.71L3543.31,768.593C3543.31,517.323 3339.31,313.324 3088.04,313.324L455.269,313.324C203.999,313.324 0,517.323 0,768.593ZM3427.88,775.73L3427.88,2770.97C3427.88,2962.47 3272.4,3117.95 3080.9,3117.95L462.407,3117.95C270.906,3117.95 115.431,2962.47 115.431,2770.97C115.431,2770.97 115.431,775.73 115.431,775.73C115.431,584.229 270.906,428.755 462.407,428.755C462.407,428.755 3080.9,428.755 3080.9,428.755C3272.4,428.755 3427.88,584.229 3427.88,775.73ZM796.24,1322.76L796.24,1250.45C796.24,1199.03 836.16,1157.27 885.331,1157.27C885.331,1157.27 946.847,1157.27 946.847,1157.27C996.017,1157.27 1035.94,1199.03 1035.94,1250.45L1035.94,1644.81L2507.37,1644.81L2507.37,1250.45C2507.37,1199.03 2547.29,1157.27 2596.46,1157.27C2596.46,1157.27 2657.98,1157.27 2657.98,1157.27C2707.15,1157.27 2747.07,1199.03 2747.07,1250.45L2747.07,1322.76C2756.66,1319.22 2767.02,1317.29 2777.83,1317.29C2777.83,1317.29 2839.34,1317.29 2839.34,1317.29C2888.51,1317.29 2928.43,1357.21 2928.43,1406.38L2928.43,1527.32C2933.51,1526.26 2938.77,1525.71 2944.16,1525.71L2995.3,1525.71C3036.18,1525.71 3069.37,1557.59 3069.37,1596.86C3069.37,1596.86 3069.37,1946.44 3069.37,1946.44C3069.37,1985.72 3036.18,2017.6 2995.3,2017.6C2995.3,2017.6 2944.16,2017.6 2944.16,2017.6C2938.77,2017.6 2933.51,2017.04 2928.43,2015.99L2928.43,2136.92C2928.43,2186.09 2888.51,2226.01 2839.34,2226.01L2777.83,2226.01C2767.02,2226.01 2756.66,2224.08 2747.07,2220.55L2747.07,2292.85C2747.07,2344.28 2707.15,2386.03 2657.98,2386.03C2657.98,2386.03 2596.46,2386.03 2596.46,2386.03C2547.29,2386.03 2507.37,2344.28 2507.37,2292.85L2507.37,1898.5L1035.94,1898.5L1035.94,2292.85C1035.94,2344.28 996.017,2386.03 946.847,2386.03C946.847,2386.03 885.331,2386.03 885.331,2386.03C836.16,2386.03 796.24,2344.28 796.24,2292.85L796.24,2220.55C786.651,2224.08 776.29,2226.01 765.482,2226.01L703.967,2226.01C654.796,2226.01 614.876,2186.09 614.876,2136.92L614.876,2015.99C609.801,2017.04 604.539,2017.6 599.144,2017.6C599.144,2017.6 548.003,2017.6 548.003,2017.6C507.125,2017.6 473.937,1985.72 473.937,1946.44C473.937,1946.44 473.937,1596.86 473.937,1596.86C473.937,1557.59 507.125,1525.71 548.003,1525.71L599.144,1525.71C604.539,1525.71 609.801,1526.26 614.876,1527.32L614.876,1406.38C614.876,1357.21 654.796,1317.29 703.967,1317.29C703.967,1317.29 765.482,1317.29 765.482,1317.29C776.29,1317.29 786.651,1319.22 796.24,1322.76ZM977.604,1250.45C977.604,1232.7 963.822,1218.29 946.847,1218.29L885.331,1218.29C868.355,1218.29 854.573,1232.7 854.573,1250.45L854.573,2292.85C854.573,2310.61 868.355,2325.02 885.331,2325.02L946.847,2325.02C963.822,2325.02 977.604,2310.61 977.604,2292.85L977.604,1250.45ZM2565.7,1250.45C2565.7,1232.7 2579.49,1218.29 2596.46,1218.29L2657.98,1218.29C2674.95,1218.29 2688.73,1232.7 2688.73,1250.45L2688.73,2292.85C2688.73,2310.61 2674.95,2325.02 2657.98,2325.02L2596.46,2325.02C2579.49,2325.02 2565.7,2310.61 2565.7,2292.85L2565.7,1250.45ZM673.209,1406.38L673.209,2136.92C673.209,2153.9 686.991,2167.68 703.967,2167.68L765.482,2167.68C782.458,2167.68 796.24,2153.9 796.24,2136.92L796.24,1406.38C796.24,1389.41 782.458,1375.63 765.482,1375.63L703.967,1375.63C686.991,1375.63 673.209,1389.41 673.209,1406.38ZM2870.1,1406.38L2870.1,2136.92C2870.1,2153.9 2856.32,2167.68 2839.34,2167.68L2777.83,2167.68C2760.85,2167.68 2747.07,2153.9 2747.07,2136.92L2747.07,1406.38C2747.07,1389.41 2760.85,1375.63 2777.83,1375.63L2839.34,1375.63C2856.32,1375.63 2870.1,1389.41 2870.1,1406.38ZM614.876,1577.5C610.535,1574.24 605.074,1572.3 599.144,1572.3L548.003,1572.3C533.89,1572.3 522.433,1583.3 522.433,1596.86L522.433,1946.44C522.433,1960 533.89,1971.01 548.003,1971.01L599.144,1971.01C605.074,1971.01 610.535,1969.07 614.876,1965.81L614.876,1577.5ZM2928.43,1965.81L2928.43,1577.5C2932.77,1574.24 2938.23,1572.3 2944.16,1572.3L2995.3,1572.3C3009.42,1572.3 3020.87,1583.3 3020.87,1596.86L3020.87,1946.44C3020.87,1960 3009.42,1971.01 2995.3,1971.01L2944.16,1971.01C2938.23,1971.01 2932.77,1969.07 2928.43,1965.81ZM2507.37,1703.14L1035.94,1703.14L1035.94,1840.16L2507.37,1840.16L2507.37,1898.38L2507.37,1659.46L2507.37,1703.14Z"
-    />
-  ),
-  defaultProps: {
-    boxSize: '24px',
-  },
-});
-
-export default TrainingIcon;
--- a/invokeai/frontend/web/src/common/icons/UnifiedCanvas.afdesign
+++ b/invokeai/frontend/web/src/common/icons/UnifiedCanvas.afdesign
--- a/invokeai/frontend/web/src/common/icons/UnifiedCanvasIcon.tsx
+++ b/invokeai/frontend/web/src/common/icons/UnifiedCanvasIcon.tsx
--- a/invokeai/frontend/web/src/common/icons/design_files/BaseImage.afdesign
+++ b/invokeai/frontend/web/src/common/icons/design_files/BaseImage.afdesign
--- a/invokeai/frontend/web/src/common/icons/design_files/ImageToImage.afdesign
+++ b/invokeai/frontend/web/src/common/icons/design_files/ImageToImage.afdesign
--- a/invokeai/frontend/web/src/common/icons/design_files/ImageToImage.svg
+++ b/invokeai/frontend/web/src/common/icons/design_files/ImageToImage.svg
@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 3543 3543" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(1.10943,0,0,1.10943,-206.981,-213.533)">
-        <path d="M688.533,2405.95L542.987,2405.95C349.532,2405.95 192.47,2248.89 192.47,2055.44L192.47,542.987C192.47,349.532 349.532,192.47 542.987,192.47L2527.88,192.47C2721.33,192.47 2878.4,349.532 2878.4,542.987L2878.4,1172.79L3023.94,1172.79C3217.4,1172.79 3374.46,1329.85 3374.46,1523.3C3374.46,1523.3 3374.46,3035.75 3374.46,3035.75C3374.46,3229.21 3217.4,3386.27 3023.94,3386.27L1039.05,3386.27C845.595,3386.27 688.533,3229.21 688.533,3035.75L688.533,2405.95ZM3286.96,2634.37L3286.96,1523.3C3286.96,1378.14 3169.11,1260.29 3023.94,1260.29C3023.94,1260.29 1039.05,1260.29 1039.05,1260.29C893.887,1260.29 776.033,1378.14 776.033,1523.3L776.033,2489.79L1440.94,1736.22L2385.83,2775.59L2880.71,2200.41L3286.96,2634.37ZM2622.05,1405.51C2778.5,1405.51 2905.51,1532.53 2905.51,1688.98C2905.51,1845.42 2778.5,1972.44 2622.05,1972.44C2465.6,1972.44 2338.58,1845.42 2338.58,1688.98C2338.58,1532.53 2465.6,1405.51 2622.05,1405.51ZM2790.9,1172.79L1323.86,1172.79L944.882,755.906L279.97,1509.47L279.97,542.987C279.97,397.824 397.824,279.97 542.987,279.97C542.987,279.97 2527.88,279.97 2527.88,279.97C2673.04,279.97 2790.9,397.824 2790.9,542.987L2790.9,1172.79ZM2125.98,425.197C2282.43,425.197 2409.45,552.213 2409.45,708.661C2409.45,865.11 2282.43,992.126 2125.98,992.126C1969.54,992.126 1842.52,865.11 1842.52,708.661C1842.52,552.213 1969.54,425.197 2125.98,425.197Z"/>
-    </g>
-</svg>
--- a/invokeai/frontend/web/src/common/icons/design_files/Inpaint.afdesign
+++ b/invokeai/frontend/web/src/common/icons/design_files/Inpaint.afdesign
--- a/invokeai/frontend/web/src/common/icons/design_files/Inpaint.svg
+++ b/invokeai/frontend/web/src/common/icons/design_files/Inpaint.svg
--- a/invokeai/frontend/web/src/common/icons/design_files/Nodes.afdesign
+++ b/invokeai/frontend/web/src/common/icons/design_files/Nodes.afdesign
--- a/invokeai/frontend/web/src/common/icons/design_files/Nodes.svg
+++ b/invokeai/frontend/web/src/common/icons/design_files/Nodes.svg
@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 3543 3543" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <path d="M3543.31,770.787C3543.31,515.578 3336.11,308.38 3080.9,308.38L462.407,308.38C207.197,308.38 0,515.578 0,770.787L0,2766.03C0,3021.24 207.197,3228.44 462.407,3228.44L3080.9,3228.44C3336.11,3228.44 3543.31,3021.24 3543.31,2766.03C3543.31,2766.03 3543.31,770.787 3543.31,770.787ZM3427.88,770.787L3427.88,2766.03C3427.88,2957.53 3272.4,3113.01 3080.9,3113.01C3080.9,3113.01 462.407,3113.01 462.407,3113.01C270.906,3113.01 115.431,2957.53 115.431,2766.03L115.431,770.787C115.431,579.286 270.906,423.812 462.407,423.812L3080.9,423.812C3272.4,423.812 3427.88,579.286 3427.88,770.787ZM1214.23,1130.69L1321.47,1130.69C1324.01,1130.69 1326.54,1130.53 1329.05,1130.2C1329.05,1130.2 1367.3,1125.33 1397.94,1149.8C1421.63,1168.72 1437.33,1204.3 1437.33,1265.48L1437.33,2078.74L1220.99,2078.74C1146.83,2078.74 1086.61,2138.95 1086.61,2213.12L1086.61,2762.46C1086.61,2836.63 1146.83,2896.84 1220.99,2896.84L1770.34,2896.84C1844.5,2896.84 1904.71,2836.63 1904.71,2762.46L1904.71,2213.12C1904.71,2138.95 1844.5,2078.74 1770.34,2078.74L1554,2078.74L1554,1604.84C1625.84,1658.19 1703.39,1658.1 1703.39,1658.1C1703.54,1658.1 1703.69,1658.11 1703.84,1658.11L2362.2,1658.11L2362.2,1874.44C2362.2,1948.61 2422.42,2008.82 2496.58,2008.82L3045.93,2008.82C3120.09,2008.82 3180.3,1948.61 3180.3,1874.44L3180.3,1325.1C3180.3,1250.93 3120.09,1190.72 3045.93,1190.72L2496.58,1190.72C2422.42,1190.72 2362.2,1250.93 2362.2,1325.1L2362.2,1558.97L2362.2,1541.44L1704.23,1541.44C1702.2,1541.37 1650.96,1539.37 1609.51,1499.26C1577.72,1468.49 1554,1416.47 1554,1331.69L1554,1265.48C1554,1153.86 1513.98,1093.17 1470.76,1058.64C1411.24,1011.1 1338.98,1012.58 1319.15,1014.03L1214.23,1014.03L1214.23,796.992C1214.23,722.828 1154.02,662.617 1079.85,662.617L530.507,662.617C456.343,662.617 396.131,722.828 396.131,796.992L396.131,1346.34C396.131,1420.5 456.343,1480.71 530.507,1480.71L1079.85,1480.71C1154.02,1480.71 1214.23,1420.5 1214.23,1346.34L1214.23,1130.69Z"/>
-</svg>
--- a/invokeai/frontend/web/src/common/icons/design_files/Outpaint.afdesign
+++ b/invokeai/frontend/web/src/common/icons/design_files/Outpaint.afdesign
--- a/invokeai/frontend/web/src/common/icons/design_files/Outpaint.svg
+++ b/invokeai/frontend/web/src/common/icons/design_files/Outpaint.svg
--- a/invokeai/frontend/web/src/common/icons/design_files/Postprocessing.afdesign
+++ b/invokeai/frontend/web/src/common/icons/design_files/Postprocessing.afdesign
--- a/invokeai/frontend/web/src/common/icons/design_files/Postprocessing.svg
+++ b/invokeai/frontend/web/src/common/icons/design_files/Postprocessing.svg
@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 3543 3543" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
-    <path d="M709.477,1596.53L992.591,1275.66L2239.09,2646.81L2891.95,1888.03L3427.88,2460.51L3427.88,994.78C3427.88,954.66 3421.05,916.122 3408.5,880.254L3521.9,855.419C3535.8,899.386 3543.31,946.214 3543.31,994.78L3543.31,2990.02C3543.31,3245.23 3336.11,3452.43 3080.9,3452.43C3080.9,3452.43 462.407,3452.43 462.407,3452.43C207.197,3452.43 -0,3245.23 -0,2990.02L-0,994.78C-0,739.571 207.197,532.373 462.407,532.373L505.419,532.373L504.644,532.546L807.104,600.085C820.223,601.729 832.422,607.722 841.77,617.116C850.131,625.517 855.784,636.21 858.055,647.804L462.407,647.804C270.906,647.804 115.431,803.279 115.431,994.78L115.431,2075.73L-0,2101.5L115.431,2127.28L115.431,2269.78L220.47,2150.73L482.345,2209.21C503.267,2211.83 522.722,2221.39 537.63,2236.37C552.538,2251.35 562.049,2270.9 564.657,2291.93L671.84,2776.17L779.022,2291.93C781.631,2270.9 791.141,2251.35 806.05,2236.37C820.958,2221.39 840.413,2211.83 861.334,2209.21L1353.15,2101.5L861.334,1993.8C840.413,1991.18 820.958,1981.62 806.05,1966.64C791.141,1951.66 781.631,1932.11 779.022,1911.08L709.477,1596.53ZM671.84,1573.09L725.556,2006.07C726.863,2016.61 731.63,2026.4 739.101,2033.91C746.573,2041.42 756.323,2046.21 766.808,2047.53L1197.68,2101.5L766.808,2155.48C756.323,2156.8 746.573,2161.59 739.101,2169.09C731.63,2176.6 726.863,2186.4 725.556,2196.94L671.84,2629.92L618.124,2196.94C616.817,2186.4 612.05,2176.6 604.579,2169.09C597.107,2161.59 587.357,2156.8 576.872,2155.48L146.001,2101.5L576.872,2047.53C587.357,2046.21 597.107,2041.42 604.579,2033.91C612.05,2026.4 616.817,2016.61 618.124,2006.07L671.84,1573.09ZM609.035,1710.36L564.657,1911.08C562.049,1932.11 552.538,1951.66 537.63,1966.64C522.722,1981.62 503.267,1991.18 482.345,1993.8L328.665,2028.11L609.035,1710.36ZM2297.12,938.615L2451.12,973.003C2480.59,976.695 2507.99,990.158 2528.99,1011.26C2549.99,1032.37 2563.39,1059.9 2567.07,1089.52L2672.73,1566.9C2634.5,1580.11 2593.44,1587.29 2550.72,1587.29C2344.33,1587.29 2176.77,1419.73 2176.77,1213.34C2176.77,1104.78 2223.13,1006.96 2297.12,938.615ZM2718.05,76.925L2793.72,686.847C2795.56,701.69 2802.27,715.491 2812.8,726.068C2823.32,736.644 2837.06,743.391 2851.83,745.242L3458.78,821.28L2851.83,897.318C2837.06,899.168 2823.32,905.916 2812.8,916.492C2802.27,927.068 2795.56,940.87 2793.72,955.712L2718.05,1565.63L2642.38,955.712C2640.54,940.87 2633.83,927.068 2623.3,916.492C2612.78,905.916 2599.04,899.168 2584.27,897.318L1977.32,821.28L2584.27,745.242C2599.04,743.391 2612.78,736.644 2623.3,726.068C2633.83,715.491 2640.54,701.69 2642.38,686.847L2718.05,76.925ZM2883.68,1043.06C2909.88,1094.13 2924.67,1152.02 2924.67,1213.34C2924.67,1335.4 2866.06,1443.88 2775.49,1512.14L2869.03,1089.52C2871.07,1073.15 2876.07,1057.42 2883.68,1043.06ZM925.928,201.2L959.611,472.704C960.431,479.311 963.42,485.455 968.105,490.163C972.79,494.871 978.904,497.875 985.479,498.698L1255.66,532.546L985.479,566.395C978.904,567.218 972.79,570.222 968.105,574.93C963.42,579.638 960.431,585.781 959.611,592.388L925.928,863.893L892.245,592.388C891.425,585.781 888.436,579.638 883.751,574.93C879.066,570.222 872.952,567.218 866.378,566.395L596.195,532.546L866.378,498.698C872.952,497.875 879.066,494.871 883.751,490.163C888.436,485.455 891.425,479.311 892.245,472.704L925.928,201.2ZM2864.47,532.373L3080.9,532.373C3258.7,532.373 3413.2,632.945 3490.58,780.281L3319.31,742.773C3257.14,683.925 3173.2,647.804 3080.9,647.804L2927.07,647.804C2919.95,642.994 2913.25,637.473 2907.11,631.298C2886.11,610.194 2872.71,582.655 2869.03,553.04L2864.47,532.373ZM1352.36,532.373L2571.64,532.373L2567.07,553.04C2563.39,582.655 2549.99,610.194 2528.99,631.298C2522.85,637.473 2516.16,642.994 2509.03,647.804L993.801,647.804C996.072,636.21 1001.73,625.517 1010.09,617.116C1019.43,607.722 1031.63,601.729 1044.75,600.085L1353.15,532.546L1352.36,532.373Z" style="stroke:white;stroke-opacity:0;stroke-width:1px;"/>
-</svg>
--- a/invokeai/frontend/web/src/common/icons/design_files/TextToImage.afdesign
+++ b/invokeai/frontend/web/src/common/icons/design_files/TextToImage.afdesign
--- a/invokeai/frontend/web/src/common/icons/design_files/TextToImage.svg
+++ b/invokeai/frontend/web/src/common/icons/design_files/TextToImage.svg
--- a/invokeai/frontend/web/src/common/icons/design_files/Training.afdesign
+++ b/invokeai/frontend/web/src/common/icons/design_files/Training.afdesign
--- a/invokeai/frontend/web/src/common/icons/design_files/Training.svg
+++ b/invokeai/frontend/web/src/common/icons/design_files/Training.svg
@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 3544 3544" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <path d="M0,768.593L0,2774.71C0,2930.6 78.519,3068.3 198.135,3150.37C273.059,3202.68 364.177,3233.38 462.407,3233.38C462.407,3233.38 3080.9,3233.38 3080.9,3233.38C3179.13,3233.38 3270.25,3202.68 3345.17,3150.37C3464.79,3068.3 3543.31,2930.6 3543.31,2774.71L3543.31,768.593C3543.31,517.323 3339.31,313.324 3088.04,313.324L455.269,313.324C203.999,313.324 0,517.323 0,768.593ZM3427.88,775.73L3427.88,2770.97C3427.88,2962.47 3272.4,3117.95 3080.9,3117.95L462.407,3117.95C270.906,3117.95 115.431,2962.47 115.431,2770.97C115.431,2770.97 115.431,775.73 115.431,775.73C115.431,584.229 270.906,428.755 462.407,428.755C462.407,428.755 3080.9,428.755 3080.9,428.755C3272.4,428.755 3427.88,584.229 3427.88,775.73ZM796.24,1322.76L796.24,1250.45C796.24,1199.03 836.16,1157.27 885.331,1157.27C885.331,1157.27 946.847,1157.27 946.847,1157.27C996.017,1157.27 1035.94,1199.03 1035.94,1250.45L1035.94,1644.81L2507.37,1644.81L2507.37,1250.45C2507.37,1199.03 2547.29,1157.27 2596.46,1157.27C2596.46,1157.27 2657.98,1157.27 2657.98,1157.27C2707.15,1157.27 2747.07,1199.03 2747.07,1250.45L2747.07,1322.76C2756.66,1319.22 2767.02,1317.29 2777.83,1317.29C2777.83,1317.29 2839.34,1317.29 2839.34,1317.29C2888.51,1317.29 2928.43,1357.21 2928.43,1406.38L2928.43,1527.32C2933.51,1526.26 2938.77,1525.71 2944.16,1525.71L2995.3,1525.71C3036.18,1525.71 3069.37,1557.59 3069.37,1596.86C3069.37,1596.86 3069.37,1946.44 3069.37,1946.44C3069.37,1985.72 3036.18,2017.6 2995.3,2017.6C2995.3,2017.6 2944.16,2017.6 2944.16,2017.6C2938.77,2017.6 2933.51,2017.04 2928.43,2015.99L2928.43,2136.92C2928.43,2186.09 2888.51,2226.01 2839.34,2226.01L2777.83,2226.01C2767.02,2226.01 2756.66,2224.08 2747.07,2220.55L2747.07,2292.85C2747.07,2344.28 2707.15,2386.03 2657.98,2386.03C2657.98,2386.03 2596.46,2386.03 2596.46,2386.03C2547.29,2386.03 2507.37,2344.28 2507.37,2292.85L2507.37,1898.5L1035.94,1898.5L1035.94,2292.85C1035.94,2344.28 996.017,2386.03 946.847,2386.03C946.847,2386.03 885.331,2386.03 885.331,2386.03C836.16,2386.03 796.24,2344.28 796.24,2292.85L796.24,2220.55C786.651,2224.08 776.29,2226.01 765.482,2226.01L703.967,2226.01C654.796,2226.01 614.876,2186.09 614.876,2136.92L614.876,2015.99C609.801,2017.04 604.539,2017.6 599.144,2017.6C599.144,2017.6 548.003,2017.6 548.003,2017.6C507.125,2017.6 473.937,1985.72 473.937,1946.44C473.937,1946.44 473.937,1596.86 473.937,1596.86C473.937,1557.59 507.125,1525.71 548.003,1525.71L599.144,1525.71C604.539,1525.71 609.801,1526.26 614.876,1527.32L614.876,1406.38C614.876,1357.21 654.796,1317.29 703.967,1317.29C703.967,1317.29 765.482,1317.29 765.482,1317.29C776.29,1317.29 786.651,1319.22 796.24,1322.76ZM977.604,1250.45C977.604,1232.7 963.822,1218.29 946.847,1218.29L885.331,1218.29C868.355,1218.29 854.573,1232.7 854.573,1250.45L854.573,2292.85C854.573,2310.61 868.355,2325.02 885.331,2325.02L946.847,2325.02C963.822,2325.02 977.604,2310.61 977.604,2292.85L977.604,1250.45ZM2565.7,1250.45C2565.7,1232.7 2579.49,1218.29 2596.46,1218.29L2657.98,1218.29C2674.95,1218.29 2688.73,1232.7 2688.73,1250.45L2688.73,2292.85C2688.73,2310.61 2674.95,2325.02 2657.98,2325.02L2596.46,2325.02C2579.49,2325.02 2565.7,2310.61 2565.7,2292.85L2565.7,1250.45ZM673.209,1406.38L673.209,2136.92C673.209,2153.9 686.991,2167.68 703.967,2167.68L765.482,2167.68C782.458,2167.68 796.24,2153.9 796.24,2136.92L796.24,1406.38C796.24,1389.41 782.458,1375.63 765.482,1375.63L703.967,1375.63C686.991,1375.63 673.209,1389.41 673.209,1406.38ZM2870.1,1406.38L2870.1,2136.92C2870.1,2153.9 2856.32,2167.68 2839.34,2167.68L2777.83,2167.68C2760.85,2167.68 2747.07,2153.9 2747.07,2136.92L2747.07,1406.38C2747.07,1389.41 2760.85,1375.63 2777.83,1375.63L2839.34,1375.63C2856.32,1375.63 2870.1,1389.41 2870.1,1406.38ZM614.876,1577.5C610.535,1574.24 605.074,1572.3 599.144,1572.3L548.003,1572.3C533.89,1572.3 522.433,1583.3 522.433,1596.86L522.433,1946.44C522.433,1960 533.89,1971.01 548.003,1971.01L599.144,1971.01C605.074,1971.01 610.535,1969.07 614.876,1965.81L614.876,1577.5ZM2928.43,1965.81L2928.43,1577.5C2932.77,1574.24 2938.23,1572.3 2944.16,1572.3L2995.3,1572.3C3009.42,1572.3 3020.87,1583.3 3020.87,1596.86L3020.87,1946.44C3020.87,1960 3009.42,1971.01 2995.3,1971.01L2944.16,1971.01C2938.23,1971.01 2932.77,1969.07 2928.43,1965.81ZM2507.37,1703.14L1035.94,1703.14L1035.94,1840.16L2507.37,1840.16L2507.37,1898.38L2507.37,1659.46L2507.37,1703.14Z"/>
-</svg>
--- a/invokeai/frontend/web/src/common/icons/design_files/UnifiedCanvas.afdesign
+++ b/invokeai/frontend/web/src/common/icons/design_files/UnifiedCanvas.afdesign
--- a/invokeai/frontend/web/src/common/icons/design_files/UnifiedCanvas.svg
+++ b/invokeai/frontend/web/src/common/icons/design_files/UnifiedCanvas.svg
--- a/invokeai/frontend/web/src/common/util/parameterTranslation.ts
+++ b/invokeai/frontend/web/src/common/util/parameterTranslation.ts
@ -1,348 +0,0 @@
-import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from 'app/constants';
-import { Dimensions } from 'features/canvas/store/canvasTypes';
-import { GenerationState } from 'features/parameters/store/generationSlice';
-import { SystemState } from 'features/system/store/systemSlice';
-import { Vector2d } from 'konva/lib/types';
-
-import {
-  CanvasState,
-  isCanvasMaskLine,
-} from 'features/canvas/store/canvasTypes';
-import createMaskStage from 'features/canvas/util/generateMask';
-import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';
-import type {
-  FacetoolType,
-  UpscalingLevel,
-} from 'features/parameters/store/postprocessingSlice';
-import { PostprocessingState } from 'features/parameters/store/postprocessingSlice';
-import { InvokeTabName } from 'features/ui/store/tabMap';
-import openBase64ImageInTab from './openBase64ImageInTab';
-import randomInt from './randomInt';
-import { stringToSeedWeightsArray } from './seedWeightPairs';
-import { getIsImageDataTransparent, getIsImageDataWhite } from './arrayBuffer';
-
-export type FrontendToBackendParametersConfig = {
-  generationMode: InvokeTabName;
-  generationState: GenerationState;
-  postprocessingState: PostprocessingState;
-  canvasState: CanvasState;
-  systemState: SystemState;
-  imageToProcessUrl?: string;
-};
-
-export type BackendGenerationParameters = {
-  prompt: string;
-  iterations: number;
-  steps: number;
-  cfg_scale: number;
-  threshold: number;
-  perlin: number;
-  height: number;
-  width: number;
-  sampler_name: string;
-  seed: number;
-  progress_images: boolean;
-  progress_latents: boolean;
-  save_intermediates: number;
-  generation_mode: InvokeTabName;
-  init_mask: string;
-  init_img?: string;
-  fit?: boolean;
-  seam_size?: number;
-  seam_blur?: number;
-  seam_strength?: number;
-  seam_steps?: number;
-  tile_size?: number;
-  infill_method?: string;
-  force_outpaint?: boolean;
-  seamless?: boolean;
-  hires_fix?: boolean;
-  strength?: number;
-  invert_mask?: boolean;
-  inpaint_replace?: number;
-  bounding_box?: Vector2d & Dimensions;
-  inpaint_width?: number;
-  inpaint_height?: number;
-  with_variations?: Array<Array<number>>;
-  variation_amount?: number;
-  enable_image_debugging?: boolean;
-  h_symmetry_time_pct?: number;
-  v_symmetry_time_pct?: number;
-};
-
-export type BackendEsrGanParameters = {
-  level: UpscalingLevel;
-  denoise_str: number;
-  strength: number;
-};
-
-export type BackendFacetoolParameters = {
-  type: FacetoolType;
-  strength: number;
-  codeformer_fidelity?: number;
-};
-
-export type BackendParameters = {
-  generationParameters: BackendGenerationParameters;
-  esrganParameters: false | BackendEsrGanParameters;
-  facetoolParameters: false | BackendFacetoolParameters;
-};
-
-/**
- * Translates/formats frontend state into parameters suitable
- * for consumption by the API.
- */
-export const frontendToBackendParameters = (
-  config: FrontendToBackendParametersConfig
-): BackendParameters => {
-  const canvasBaseLayer = getCanvasBaseLayer();
-
-  const {
-    generationMode,
-    generationState,
-    postprocessingState,
-    canvasState,
-    systemState,
-  } = config;
-
-  const {
-    codeformerFidelity,
-    facetoolStrength,
-    facetoolType,
-    hiresFix,
-    hiresStrength,
-    shouldRunESRGAN,
-    shouldRunFacetool,
-    upscalingLevel,
-    upscalingStrength,
-    upscalingDenoising,
-  } = postprocessingState;
-
-  const {
-    cfgScale,
-    height,
-    img2imgStrength,
-    infillMethod,
-    initialImage,
-    iterations,
-    perlin,
-    prompt,
-    negativePrompt,
-    sampler,
-    seamBlur,
-    seamless,
-    seamSize,
-    seamSteps,
-    seamStrength,
-    seed,
-    seedWeights,
-    shouldFitToWidthHeight,
-    shouldGenerateVariations,
-    shouldRandomizeSeed,
-    steps,
-    threshold,
-    tileSize,
-    variationAmount,
-    width,
-    shouldUseSymmetry,
-    horizontalSymmetrySteps,
-    verticalSymmetrySteps,
-  } = generationState;
-
-  const {
-    shouldDisplayInProgressType,
-    saveIntermediatesInterval,
-    enableImageDebugging,
-  } = systemState;
-
-  const generationParameters: BackendGenerationParameters = {
-    prompt,
-    iterations,
-    steps,
-    cfg_scale: cfgScale,
-    threshold,
-    perlin,
-    height,
-    width,
-    sampler_name: sampler,
-    seed,
-    progress_images: shouldDisplayInProgressType === 'full-res',
-    progress_latents: shouldDisplayInProgressType === 'latents',
-    save_intermediates: saveIntermediatesInterval,
-    generation_mode: generationMode,
-    init_mask: '',
-  };
-
-  let esrganParameters: false | BackendEsrGanParameters = false;
-  let facetoolParameters: false | BackendFacetoolParameters = false;
-
-  if (negativePrompt !== '') {
-    generationParameters.prompt = `${prompt} [${negativePrompt}]`;
-  }
-
-  generationParameters.seed = shouldRandomizeSeed
-    ? randomInt(NUMPY_RAND_MIN, NUMPY_RAND_MAX)
-    : seed;
-
-  // Symmetry Settings
-  if (shouldUseSymmetry) {
-    if (horizontalSymmetrySteps > 0) {
-      generationParameters.h_symmetry_time_pct = Math.max(
-        0,
-        Math.min(1, horizontalSymmetrySteps / steps)
-      );
-    }
-
-    if (verticalSymmetrySteps > 0) {
-      generationParameters.v_symmetry_time_pct = Math.max(
-        0,
-        Math.min(1, verticalSymmetrySteps / steps)
-      );
-    }
-  }
-
-  // txt2img exclusive parameters
-  if (generationMode === 'txt2img') {
-    generationParameters.hires_fix = hiresFix;
-
-    if (hiresFix) generationParameters.strength = hiresStrength;
-  }
-
-  // parameters common to txt2img and img2img
-  if (['txt2img', 'img2img'].includes(generationMode)) {
-    generationParameters.seamless = seamless;
-
-    if (shouldRunESRGAN) {
-      esrganParameters = {
-        level: upscalingLevel,
-        denoise_str: upscalingDenoising,
-        strength: upscalingStrength,
-      };
-    }
-
-    if (shouldRunFacetool) {
-      facetoolParameters = {
-        type: facetoolType,
-        strength: facetoolStrength,
-      };
-      if (facetoolType === 'codeformer') {
-        facetoolParameters.codeformer_fidelity = codeformerFidelity;
-      }
-    }
-  }
-
-  // img2img exclusive parameters
-  if (generationMode === 'img2img' && initialImage) {
-    generationParameters.init_img =
-      typeof initialImage === 'string' ? initialImage : initialImage.url;
-    generationParameters.strength = img2imgStrength;
-    generationParameters.fit = shouldFitToWidthHeight;
-  }
-
-  // inpainting exclusive parameters
-  if (generationMode === 'unifiedCanvas' && canvasBaseLayer) {
-    const {
-      layerState: { objects },
-      boundingBoxCoordinates,
-      boundingBoxDimensions,
-      stageScale,
-      isMaskEnabled,
-      shouldPreserveMaskedArea,
-      boundingBoxScaleMethod: boundingBoxScale,
-      scaledBoundingBoxDimensions,
-    } = canvasState;
-
-    const boundingBox = {
-      ...boundingBoxCoordinates,
-      ...boundingBoxDimensions,
-    };
-
-    const { dataURL: maskDataURL, imageData: maskImageData } = createMaskStage(
-      isMaskEnabled ? objects.filter(isCanvasMaskLine) : [],
-      boundingBox
-    );
-
-    generationParameters.init_mask = maskDataURL;
-
-    generationParameters.fit = false;
-
-    generationParameters.strength = img2imgStrength;
-
-    generationParameters.invert_mask = shouldPreserveMaskedArea;
-
-    generationParameters.bounding_box = boundingBox;
-
-    const tempScale = canvasBaseLayer.scale();
-
-    canvasBaseLayer.scale({
-      x: 1 / stageScale,
-      y: 1 / stageScale,
-    });
-
-    const absPos = canvasBaseLayer.getAbsolutePosition();
-
-    const imageDataURL = canvasBaseLayer.toDataURL({
-      x: boundingBox.x + absPos.x,
-      y: boundingBox.y + absPos.y,
-      width: boundingBox.width,
-      height: boundingBox.height,
-    });
-
-    const ctx = canvasBaseLayer.getContext();
-    const imageData = ctx.getImageData(
-      boundingBox.x + absPos.x,
-      boundingBox.y + absPos.y,
-      boundingBox.width,
-      boundingBox.height
-    );
-
-    const doesBaseHaveTransparency = getIsImageDataTransparent(imageData);
-    const doesMaskHaveTransparency = getIsImageDataWhite(maskImageData);
-
-    if (enableImageDebugging) {
-      openBase64ImageInTab([
-        { base64: maskDataURL, caption: 'mask sent as init_mask' },
-        { base64: imageDataURL, caption: 'image sent as init_img' },
-      ]);
-    }
-
-    canvasBaseLayer.scale(tempScale);
-
-    generationParameters.init_img = imageDataURL;
-
-    generationParameters.progress_images = false;
-
-    if (boundingBoxScale !== 'none') {
-      generationParameters.inpaint_width = scaledBoundingBoxDimensions.width;
-      generationParameters.inpaint_height = scaledBoundingBoxDimensions.height;
-    }
-
-    generationParameters.seam_size = seamSize;
-    generationParameters.seam_blur = seamBlur;
-    generationParameters.seam_strength = seamStrength;
-    generationParameters.seam_steps = seamSteps;
-    generationParameters.tile_size = tileSize;
-    generationParameters.infill_method = infillMethod;
-    generationParameters.force_outpaint = false;
-  }
-
-  if (shouldGenerateVariations) {
-    generationParameters.variation_amount = variationAmount;
-    if (seedWeights) {
-      generationParameters.with_variations =
-        stringToSeedWeightsArray(seedWeights);
-    }
-  } else {
-    generationParameters.variation_amount = 0;
-  }
-
-  if (enableImageDebugging) {
-    generationParameters.enable_image_debugging = enableImageDebugging;
-  }
-
-  return {
-    generationParameters,
-    esrganParameters,
-    facetoolParameters,
-  };
-};
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
@ -21,7 +21,6 @@ import {
  CanvasLayer,
  LAYER_NAMES_DICT,
 } from 'features/canvas/store/canvasTypes';
-import { mergeAndUploadCanvas } from 'features/canvas/store/thunks/mergeAndUploadCanvas';
 import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import { isEqual } from 'lodash-es';
--- a/invokeai/frontend/web/src/features/canvas/store/thunks/mergeAndUploadCanvas.ts
+++ b/invokeai/frontend/web/src/features/canvas/store/thunks/mergeAndUploadCanvas.ts
@ -1,172 +0,0 @@
-import { AnyAction, ThunkAction } from '@reduxjs/toolkit';
-import * as InvokeAI from 'app/types/invokeai';
-import { RootState } from 'app/store/store';
-// import { addImage } from 'features/gallery/store/gallerySlice';
-import {
-  addToast,
-  setCurrentStatus,
-  setIsCancelable,
-  setIsProcessing,
-  setProcessingIndeterminateTask,
-} from 'features/system/store/systemSlice';
-import i18n from 'i18n';
-import { v4 as uuidv4 } from 'uuid';
-import copyImage from '../../util/copyImage';
-import downloadFile from '../../util/downloadFile';
-import { getCanvasBaseLayer } from '../../util/konvaInstanceProvider';
-import layerToDataURL from '../../util/layerToDataURL';
-import { setMergedCanvas } from '../canvasSlice';
-import { CanvasState } from '../canvasTypes';
-
-type MergeAndUploadCanvasConfig = {
-  cropVisible?: boolean;
-  cropToBoundingBox?: boolean;
-  shouldSaveToGallery?: boolean;
-  shouldDownload?: boolean;
-  shouldCopy?: boolean;
-  shouldSetAsInitialImage?: boolean;
-};
-
-const defaultConfig: MergeAndUploadCanvasConfig = {
-  cropVisible: false,
-  cropToBoundingBox: false,
-  shouldSaveToGallery: false,
-  shouldDownload: false,
-  shouldCopy: false,
-  shouldSetAsInitialImage: true,
-};
-
-export const mergeAndUploadCanvas =
-  (config = defaultConfig): ThunkAction<void, RootState, unknown, AnyAction> =>
-  async (dispatch, getState) => {
-    const {
-      cropVisible,
-      cropToBoundingBox,
-      shouldSaveToGallery,
-      shouldDownload,
-      shouldCopy,
-      shouldSetAsInitialImage,
-    } = config;
-
-    dispatch(setProcessingIndeterminateTask('Exporting Image'));
-    dispatch(setIsCancelable(false));
-
-    const state = getState() as RootState;
-
-    const {
-      stageScale,
-      boundingBoxCoordinates,
-      boundingBoxDimensions,
-      stageCoordinates,
-    } = state.canvas as CanvasState;
-
-    const canvasBaseLayer = getCanvasBaseLayer();
-
-    if (!canvasBaseLayer) {
-      dispatch(setIsProcessing(false));
-      dispatch(setIsCancelable(true));
-
-      return;
-    }
-
-    const { dataURL, boundingBox: originalBoundingBox } = layerToDataURL(
-      canvasBaseLayer,
-      stageScale,
-      stageCoordinates,
-      cropToBoundingBox
-        ? { ...boundingBoxCoordinates, ...boundingBoxDimensions }
-        : undefined
-    );
-
-    if (!dataURL) {
-      dispatch(setIsProcessing(false));
-      dispatch(setIsCancelable(true));
-      return;
-    }
-
-    const formData = new FormData();
-
-    formData.append(
-      'data',
-      JSON.stringify({
-        dataURL,
-        filename: 'merged_canvas.png',
-        kind: shouldSaveToGallery ? 'result' : 'temp',
-        cropVisible,
-      })
-    );
-
-    const response = await fetch(`${window.location.origin}/upload`, {
-      method: 'POST',
-      body: formData,
-    });
-
-    const image = (await response.json()) as InvokeAI.ImageUploadResponse;
-
-    const { url, width, height } = image;
-
-    const newImage: InvokeAI._Image = {
-      uuid: uuidv4(),
-      category: shouldSaveToGallery ? 'result' : 'user',
-      ...image,
-    };
-
-    if (shouldDownload) {
-      downloadFile(url);
-      dispatch(
-        addToast({
-          title: i18n.t('toast.downloadImageStarted'),
-          status: 'success',
-          duration: 2500,
-          isClosable: true,
-        })
-      );
-    }
-
-    if (shouldCopy) {
-      copyImage(url, width, height);
-      dispatch(
-        addToast({
-          title: i18n.t('toast.imageCopied'),
-          status: 'success',
-          duration: 2500,
-          isClosable: true,
-        })
-      );
-    }
-
-    if (shouldSaveToGallery) {
-      dispatch(addImage({ image: newImage, category: 'result' }));
-      dispatch(
-        addToast({
-          title: i18n.t('toast.imageSavedToGallery'),
-          status: 'success',
-          duration: 2500,
-          isClosable: true,
-        })
-      );
-    }
-
-    if (shouldSetAsInitialImage) {
-      dispatch(
-        setMergedCanvas({
-          kind: 'image',
-          layer: 'base',
-          ...originalBoundingBox,
-          image: newImage,
-        })
-      );
-      dispatch(
-        addToast({
-          title: i18n.t('toast.canvasMerged'),
-          status: 'success',
-          duration: 2500,
-          isClosable: true,
-        })
-      );
-    }
-
-    dispatch(setIsProcessing(false));
-    dispatch(setCurrentStatus(i18n.t('common.statusConnected')));
-    dispatch(setIsCancelable(true));
-  };
--- a/invokeai/frontend/web/src/features/canvas/util/copyImage.ts
+++ b/invokeai/frontend/web/src/features/canvas/util/copyImage.ts
@ -1,34 +0,0 @@
-/**
- * Copies an image to the clipboard by drawing it to a canvas and then
- * calling toBlob() on the canvas.
- */
-const copyImage = (url: string, width: number, height: number) => {
-  const imageElement = document.createElement('img');
-
-  imageElement.addEventListener('load', () => {
-    const canvas = document.createElement('canvas');
-    canvas.width = width;
-    canvas.height = height;
-    const context = canvas.getContext('2d');
-
-    if (!context) return;
-
-    context.drawImage(imageElement, 0, 0);
-
-    canvas.toBlob((blob) => {
-      blob &&
-        navigator.clipboard.write([
-          new ClipboardItem({
-            [blob.type]: blob,
-          }),
-        ]);
-    });
-
-    canvas.remove();
-    imageElement.remove();
-  });
-
-  imageElement.src = url;
-};
-
-export default copyImage;
--- a/invokeai/frontend/web/src/features/canvas/util/downloadFile.ts
+++ b/invokeai/frontend/web/src/features/canvas/util/downloadFile.ts
@ -1,14 +0,0 @@
-/**
- * Downloads a file, given its URL.
- */
-const downloadFile = (url: string) => {
-  const a = document.createElement('a');
-  a.href = url;
-  a.download = '';
-  document.body.appendChild(a);
-  a.click();
-  document.body.removeChild(a);
-  a.remove();
-};
-
-export default downloadFile;
--- a/invokeai/frontend/web/src/features/canvas/util/layerToDataURL.ts
+++ b/invokeai/frontend/web/src/features/canvas/util/layerToDataURL.ts
@ -1,53 +0,0 @@
-import Konva from 'konva';
-import { IRect, Vector2d } from 'konva/lib/types';
-
-const layerToDataURL = (
-  layer: Konva.Layer,
-  stageScale: number,
-  stageCoordinates: Vector2d,
-  boundingBox?: IRect
-) => {
-  const tempScale = layer.scale();
-
-  const relativeClientRect = layer.getClientRect({
-    relativeTo: layer.getParent(),
-  });
-
-  // Scale the canvas before getting it as a Blob
-  layer.scale({
-    x: 1 / stageScale,
-    y: 1 / stageScale,
-  });
-
-  const { x, y, width, height } = layer.getClientRect();
-  const dataURLBoundingBox = boundingBox
-    ? {
-        x: boundingBox.x + stageCoordinates.x,
-        y: boundingBox.y + stageCoordinates.y,
-        width: boundingBox.width,
-        height: boundingBox.height,
-      }
-    : {
-        x: x,
-        y: y,
-        width: width,
-        height: height,
-      };
-
-  const dataURL = layer.toDataURL(dataURLBoundingBox);
-
-  // Unscale the canvas
-  layer.scale(tempScale);
-
-  return {
-    dataURL,
-    boundingBox: {
-      x: relativeClientRect.x,
-      y: relativeClientRect.y,
-      width: width,
-      height: height,
-    },
-  };
-};
-
-export default layerToDataURL;
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGallery.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGallery.tsx
@ -1,442 +0,0 @@
-// import { NumberSize, Resizable } from 're-resizable';
-
-// import {
-//   Box,
-//   ButtonGroup,
-//   Flex,
-//   Grid,
-//   Icon,
-//   chakra,
-//   useTheme,
-// } from '@chakra-ui/react';
-// import { requestImages } from 'app/socketio/actions';
-// import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-// import IAIButton from 'common/components/IAIButton';
-// import IAICheckbox from 'common/components/IAICheckbox';
-// import IAIIconButton from 'common/components/IAIIconButton';
-// import IAIPopover from 'common/components/IAIPopover';
-// import IAISlider from 'common/components/IAISlider';
-// import { setDoesCanvasNeedScaling } from 'features/canvas/store/canvasSlice';
-// import { imageGallerySelector } from 'features/gallery/store/gallerySelectors';
-// import {
-//   selectNextImage,
-//   selectPrevImage,
-//   setCurrentCategory,
-//   setGalleryImageMinimumWidth,
-//   setGalleryImageObjectFit,
-//   setGalleryWidth,
-//   setShouldAutoSwitchToNewImages,
-//   setShouldHoldGalleryOpen,
-//   setShouldUseSingleGalleryColumn,
-// } from 'features/gallery/store/gallerySlice';
-// import {
-//   setShouldPinGallery,
-//   setShouldShowGallery,
-// } from 'features/ui/store/uiSlice';
-// import { InvokeTabName } from 'features/ui/store/tabMap';
-
-// import { clamp } from 'lodash-es';
-// import { Direction } from 're-resizable/lib/resizer';
-// import React, {
-//   ChangeEvent,
-//   useCallback,
-//   useEffect,
-//   useRef,
-//   useState,
-// } from 'react';
-// import { useHotkeys } from 'react-hotkeys-hook';
-// import { useTranslation } from 'react-i18next';
-// import { BsPinAngle, BsPinAngleFill } from 'react-icons/bs';
-// import { FaImage, FaUser, FaWrench } from 'react-icons/fa';
-// import { MdPhotoLibrary } from 'react-icons/md';
-// import { CSSTransition } from 'react-transition-group';
-// import HoverableImage from './HoverableImage';
-// import { APP_GALLERY_HEIGHT_PINNED } from 'theme/util/constants';
-
-// import './ImageGallery.css';
-// import { no_scrollbar } from 'theme/components/scrollbar';
-// import ImageGalleryContent from './ImageGalleryContent';
-
-// const ChakraResizeable = chakra(Resizable, {
-//   shouldForwardProp: (prop) => !['sx'].includes(prop),
-// });
-
-// const GALLERY_SHOW_BUTTONS_MIN_WIDTH = 320;
-// const GALLERY_IMAGE_WIDTH_OFFSET = 40;
-
-// const GALLERY_TAB_WIDTHS: Record<
-//   InvokeTabName,
-//   { galleryMinWidth: number; galleryMaxWidth: number }
-// > = {
-//   txt2img: { galleryMinWidth: 200, galleryMaxWidth: 500 },
-//   img2img: { galleryMinWidth: 200, galleryMaxWidth: 500 },
-//   unifiedCanvas: { galleryMinWidth: 200, galleryMaxWidth: 200 },
-//   nodes: { galleryMinWidth: 200, galleryMaxWidth: 500 },
-//   postprocess: { galleryMinWidth: 200, galleryMaxWidth: 500 },
-//   training: { galleryMinWidth: 200, galleryMaxWidth: 500 },
-// };
-
-// const LIGHTBOX_GALLERY_WIDTH = 400;
-
-// export default function ImageGallery() {
-//   const dispatch = useAppDispatch();
-//   const { direction } = useTheme();
-
-//   const { t } = useTranslation();
-
-//   const {
-//     images,
-//     currentCategory,
-//     currentImageUuid,
-//     shouldPinGallery,
-//     shouldShowGallery,
-//     galleryImageMinimumWidth,
-//     galleryGridTemplateColumns,
-//     activeTabName,
-//     galleryImageObjectFit,
-//     shouldHoldGalleryOpen,
-//     shouldAutoSwitchToNewImages,
-//     areMoreImagesAvailable,
-//     galleryWidth,
-//     isLightboxOpen,
-//     isStaging,
-//     shouldEnableResize,
-//     shouldUseSingleGalleryColumn,
-//   } = useAppSelector(imageGallerySelector);
-
-//   const { galleryMinWidth, galleryMaxWidth } = isLightboxOpen
-//     ? {
-//         galleryMinWidth: LIGHTBOX_GALLERY_WIDTH,
-//         galleryMaxWidth: LIGHTBOX_GALLERY_WIDTH,
-//       }
-//     : GALLERY_TAB_WIDTHS[activeTabName];
-
-//   const [shouldShowButtons, setShouldShowButtons] = useState<boolean>(
-//     galleryWidth >= GALLERY_SHOW_BUTTONS_MIN_WIDTH
-//   );
-
-//   const [isResizing, setIsResizing] = useState(false);
-//   const [galleryResizeHeight, setGalleryResizeHeight] = useState(0);
-
-//   const galleryRef = useRef<HTMLDivElement>(null);
-//   const galleryContainerRef = useRef<HTMLDivElement>(null);
-//   const timeoutIdRef = useRef<number | null>(null);
-
-//   useEffect(() => {
-//     setShouldShowButtons(galleryWidth >= GALLERY_SHOW_BUTTONS_MIN_WIDTH);
-//   }, [galleryWidth]);
-
-//   const handleSetShouldPinGallery = () => {
-//     !shouldPinGallery && dispatch(setShouldShowGallery(true));
-//     dispatch(setShouldPinGallery(!shouldPinGallery));
-//     dispatch(setDoesCanvasNeedScaling(true));
-//   };
-
-//   const handleToggleGallery = () => {
-//     shouldShowGallery ? handleCloseGallery() : handleOpenGallery();
-//   };
-
-//   const handleOpenGallery = () => {
-//     dispatch(setShouldShowGallery(true));
-//     shouldPinGallery && dispatch(setDoesCanvasNeedScaling(true));
-//   };
-
-//   const handleCloseGallery = useCallback(() => {
-//     dispatch(setShouldShowGallery(false));
-//     dispatch(setShouldHoldGalleryOpen(false));
-//     setTimeout(
-//       () => shouldPinGallery && dispatch(setDoesCanvasNeedScaling(true)),
-//       400
-//     );
-//   }, [dispatch, shouldPinGallery]);
-
-//   const handleClickLoadMore = () => {
-//     dispatch(requestImages(currentCategory));
-//   };
-
-//   const handleChangeGalleryImageMinimumWidth = (v: number) => {
-//     dispatch(setGalleryImageMinimumWidth(v));
-//   };
-
-//   const setCloseGalleryTimer = () => {
-//     if (shouldHoldGalleryOpen) return;
-//     timeoutIdRef.current = window.setTimeout(() => handleCloseGallery(), 500);
-//   };
-
-//   const cancelCloseGalleryTimer = () => {
-//     timeoutIdRef.current && window.clearTimeout(timeoutIdRef.current);
-//   };
-
-//   useHotkeys(
-//     'g',
-//     () => {
-//       handleToggleGallery();
-//     },
-//     [shouldShowGallery, shouldPinGallery]
-//   );
-
-//   useHotkeys(
-//     'left',
-//     () => {
-//       dispatch(selectPrevImage());
-//     },
-//     {
-//       enabled: !isStaging || activeTabName !== 'unifiedCanvas',
-//     },
-//     [isStaging]
-//   );
-
-//   useHotkeys(
-//     'right',
-//     () => {
-//       dispatch(selectNextImage());
-//     },
-//     {
-//       enabled: !isStaging || activeTabName !== 'unifiedCanvas',
-//     },
-//     [isStaging]
-//   );
-
-//   useHotkeys(
-//     'shift+g',
-//     () => {
-//       handleSetShouldPinGallery();
-//     },
-//     [shouldPinGallery]
-//   );
-
-//   useHotkeys(
-//     'esc',
-//     () => {
-//       dispatch(setShouldShowGallery(false));
-//     },
-//     {
-//       enabled: () => !shouldPinGallery,
-//       preventDefault: true,
-//     },
-//     [shouldPinGallery]
-//   );
-
-//   const IMAGE_SIZE_STEP = 32;
-
-//   useHotkeys(
-//     'shift+up',
-//     () => {
-//       if (galleryImageMinimumWidth < 256) {
-//         const newMinWidth = clamp(
-//           galleryImageMinimumWidth + IMAGE_SIZE_STEP,
-//           32,
-//           256
-//         );
-//         dispatch(setGalleryImageMinimumWidth(newMinWidth));
-//       }
-//     },
-//     [galleryImageMinimumWidth]
-//   );
-
-//   useHotkeys(
-//     'shift+down',
-//     () => {
-//       if (galleryImageMinimumWidth > 32) {
-//         const newMinWidth = clamp(
-//           galleryImageMinimumWidth - IMAGE_SIZE_STEP,
-//           32,
-//           256
-//         );
-//         dispatch(setGalleryImageMinimumWidth(newMinWidth));
-//       }
-//     },
-//     [galleryImageMinimumWidth]
-//   );
-
-//   useEffect(() => {
-//     function handleClickOutside(e: MouseEvent) {
-//       if (
-//         !shouldPinGallery &&
-//         galleryRef.current &&
-//         !galleryRef.current.contains(e.target as Node)
-//       ) {
-//         handleCloseGallery();
-//       }
-//     }
-//     document.addEventListener('mousedown', handleClickOutside);
-//     return () => {
-//       document.removeEventListener('mousedown', handleClickOutside);
-//     };
-//   }, [handleCloseGallery, shouldPinGallery]);
-
-//   return (
-//     <CSSTransition
-//       nodeRef={galleryRef}
-//       in={shouldShowGallery || shouldHoldGalleryOpen}
-//       unmountOnExit
-//       timeout={200}
-//       classNames={`${direction}-image-gallery-css-transition`}
-//     >
-//       <Box
-//         className={`${direction}-image-gallery-css-transition`}
-//         sx={
-//           shouldPinGallery
-//             ? { zIndex: 1, insetInlineEnd: 0 }
-//             : {
-//                 zIndex: 100,
-//                 position: 'fixed',
-//                 height: '100vh',
-//                 top: 0,
-//                 insetInlineEnd: 0,
-//               }
-//         }
-//         ref={galleryRef}
-//         onMouseLeave={!shouldPinGallery ? setCloseGalleryTimer : undefined}
-//         onMouseEnter={!shouldPinGallery ? cancelCloseGalleryTimer : undefined}
-//         onMouseOver={!shouldPinGallery ? cancelCloseGalleryTimer : undefined}
-//       >
-//         <ChakraResizeable
-//           sx={{
-//             padding: 4,
-//             display: 'flex',
-//             flexDirection: 'column',
-//             rowGap: 4,
-//             borderRadius: shouldPinGallery ? 'base' : 0,
-//             borderInlineStartWidth: 5,
-//             // boxShadow: '0 0 1rem blackAlpha.700',
-//             bg: 'base.850',
-//             borderColor: 'base.700',
-//           }}
-//           minWidth={galleryMinWidth}
-//           maxWidth={shouldPinGallery ? galleryMaxWidth : window.innerWidth}
-//           data-pinned={shouldPinGallery}
-//           handleStyles={
-//             direction === 'rtl'
-//               ? {
-//                   right: {
-//                     width: '15px',
-//                   },
-//                 }
-//               : {
-//                   left: {
-//                     width: '15px',
-//                   },
-//                 }
-//           }
-//           enable={
-//             direction === 'rtl'
-//               ? {
-//                   right: shouldEnableResize,
-//                 }
-//               : {
-//                   left: shouldEnableResize,
-//                 }
-//           }
-//           size={{
-//             width: galleryWidth,
-//             height: shouldPinGallery ? '100%' : '100vh',
-//           }}
-//           onResizeStart={(
-//             _event:
-//               | React.MouseEvent<HTMLElement>
-//               | React.TouchEvent<HTMLElement>,
-//             _direction: Direction,
-//             elementRef: HTMLElement
-//           ) => {
-//             setGalleryResizeHeight(elementRef.clientHeight);
-//             elementRef.style.height = `${elementRef.clientHeight}px`;
-//             if (shouldPinGallery) {
-//               elementRef.style.position = 'fixed';
-//               elementRef.style.insetInlineEnd = '1rem';
-//               setIsResizing(true);
-//             }
-//           }}
-//           onResizeStop={(
-//             _event: MouseEvent | TouchEvent,
-//             _direction: Direction,
-//             elementRef: HTMLElement,
-//             delta: NumberSize
-//           ) => {
-//             const newWidth = shouldPinGallery
-//               ? clamp(
-//                   Number(galleryWidth) + delta.width,
-//                   galleryMinWidth,
-//                   Number(galleryMaxWidth)
-//                 )
-//               : Number(galleryWidth) + delta.width;
-//             dispatch(setGalleryWidth(newWidth));
-
-//             elementRef.removeAttribute('data-resize-alert');
-
-//             if (shouldPinGallery) {
-//               console.log('unpin');
-//               elementRef.style.position = 'relative';
-//               elementRef.style.removeProperty('inset-inline-end');
-//               elementRef.style.setProperty(
-//                 'height',
-//                 shouldPinGallery ? '100%' : '100vh'
-//               );
-//               setIsResizing(false);
-//               dispatch(setDoesCanvasNeedScaling(true));
-//             }
-//           }}
-//           onResize={(
-//             _event: MouseEvent | TouchEvent,
-//             _direction: Direction,
-//             elementRef: HTMLElement,
-//             delta: NumberSize
-//           ) => {
-//             const newWidth = clamp(
-//               Number(galleryWidth) + delta.width,
-//               galleryMinWidth,
-//               Number(
-//                 shouldPinGallery ? galleryMaxWidth : 0.95 * window.innerWidth
-//               )
-//             );
-
-//             if (
-//               newWidth >= GALLERY_SHOW_BUTTONS_MIN_WIDTH &&
-//               !shouldShowButtons
-//             ) {
-//               setShouldShowButtons(true);
-//             } else if (
-//               newWidth < GALLERY_SHOW_BUTTONS_MIN_WIDTH &&
-//               shouldShowButtons
-//             ) {
-//               setShouldShowButtons(false);
-//             }
-
-//             if (
-//               galleryImageMinimumWidth >
-//               newWidth - GALLERY_IMAGE_WIDTH_OFFSET
-//             ) {
-//               dispatch(
-//                 setGalleryImageMinimumWidth(
-//                   newWidth - GALLERY_IMAGE_WIDTH_OFFSET
-//                 )
-//               );
-//             }
-
-//             if (shouldPinGallery) {
-//               if (newWidth >= galleryMaxWidth) {
-//                 elementRef.setAttribute('data-resize-alert', 'true');
-//               } else {
-//                 elementRef.removeAttribute('data-resize-alert');
-//               }
-//             }
-
-//             elementRef.style.height = `${galleryResizeHeight}px`;
-//           }}
-//         >
-//           <ImageGalleryContent />
-//         </ChakraResizeable>
-//         {isResizing && (
-//           <Box
-//             style={{
-//               width: `${galleryWidth}px`,
-//               height: '100%',
-//             }}
-//           />
-//         )}
-//       </Box>
-//     </CSSTransition>
-//   );
-// }
-
-export default {};
--- a/invokeai/frontend/web/src/features/gallery/hooks/useGetImageByUuid.ts
+++ b/invokeai/frontend/web/src/features/gallery/hooks/useGetImageByUuid.ts
@ -1,28 +0,0 @@
-import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/store/storeHooks';
-import { gallerySelector } from '../store/gallerySelectors';
-
-const selector = createSelector(gallerySelector, (gallery) => ({
-  resultImages: gallery.categories.result.images,
-  userImages: gallery.categories.user.images,
-}));
-
-const useGetImageByUuid = () => {
-  const { resultImages, userImages } = useAppSelector(selector);
-
-  return (uuid: string) => {
-    const resultImagesResult = resultImages.find(
-      (image) => image.uuid === uuid
-    );
-    if (resultImagesResult) {
-      return resultImagesResult;
-    }
-
-    const userImagesResult = userImages.find((image) => image.uuid === uuid);
-    if (userImagesResult) {
-      return userImagesResult;
-    }
-  };
-};
-
-export default useGetImageByUuid;
--- a/invokeai/frontend/web/src/features/nodes/examples/iterationGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/examples/iterationGraph.ts
@ -1,52 +0,0 @@
-export const iterationGraph = {
-  nodes: {
-    '0': {
-      id: '0',
-      type: 'range',
-      start: 0,
-      stop: 5,
-      step: 1,
-    },
-    '1': {
-      collection: [],
-      id: '1',
-      index: 0,
-      type: 'iterate',
-    },
-    '2': {
-      cfg_scale: 7.5,
-      height: 512,
-      id: '2',
-      model: '',
-      progress_images: false,
-      prompt: 'dog',
-      sampler_name: 'lms',
-      seamless: false,
-      steps: 11,
-      type: 'txt2img',
-      width: 512,
-    },
-  },
-  edges: [
-    {
-      source: {
-        field: 'collection',
-        node_id: '0',
-      },
-      destination: {
-        field: 'collection',
-        node_id: '1',
-      },
-    },
-    {
-      source: {
-        field: 'item',
-        node_id: '1',
-      },
-      destination: {
-        field: 'seed',
-        node_id: '2',
-      },
-    },
-  ],
-};
--- a/invokeai/frontend/web/src/features/nodes/store/selectors/invocationTemplatesSelector.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/selectors/invocationTemplatesSelector.ts
@ -1,7 +0,0 @@
-import { createSelector } from '@reduxjs/toolkit';
-import { RootState } from 'app/store/store';
-
-export const invocationTemplatesSelector = createSelector(
-  (state: RootState) => state.nodes,
-  (nodes) => nodes.invocationTemplates
-);
--- a/invokeai/frontend/web/src/features/nodes/util/getGenerationMode.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/getGenerationMode.ts
@ -1,19 +0,0 @@
-export const getGenerationMode = (
-  baseIsPartiallyTransparent: boolean,
-  baseIsFullyTransparent: boolean,
-  doesMaskHaveBlackPixels: boolean
-): 'txt2img' | `img2img` | 'inpaint' | 'outpaint' => {
-  if (baseIsPartiallyTransparent) {
-    if (baseIsFullyTransparent) {
-      return 'txt2img';
-    }
-
-    return 'outpaint';
-  } else {
-    if (doesMaskHaveBlackPixels) {
-      return 'inpaint';
-    }
-
-    return 'img2img';
-  }
-};
--- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasGraph.ts
@ -13,12 +13,8 @@ import { buildTxt2ImgNode } from '../nodeBuilders/buildTextToImageNode';
 import { buildRangeNode } from '../nodeBuilders/buildRangeNode';
 import { buildIterateNode } from '../nodeBuilders/buildIterateNode';
 import { buildEdges } from '../edgeBuilders/buildEdges';
-import { getCanvasData } from 'features/canvas/util/getCanvasData';
 import { log } from 'app/logging/useLogger';
 import { buildInpaintNode } from '../nodeBuilders/buildInpaintNode';
-import { getCanvasGenerationMode } from 'features/canvas/util/getCanvasGenerationMode';
-import { blobToDataURL } from 'features/canvas/util/blobToDataURL';
-import openBase64ImageInTab from 'common/util/openBase64ImageInTab';

 const moduleLog = log.child({ namespace: 'buildCanvasGraph' });

@ -46,8 +42,9 @@ const buildBaseNode = (
 /**
 * Builds the Canvas workflow graph and image blobs.
 */
-export const buildCanvasGraphAndBlobs = async (
-  state: RootState
+export const buildCanvasGraphComponents = async (
+  state: RootState,
+  generationMode: 'txt2img' | 'img2img' | 'inpaint' | 'outpaint'
 ): Promise<
  | {
      rangeNode: RangeInvocation | RandomRangeInvocation;
@ -57,34 +54,9 @@ export const buildCanvasGraphAndBlobs = async (
        | ImageToImageInvocation
        | InpaintInvocation;
      edges: Edge[];
-      baseBlob: Blob;
-      maskBlob: Blob;
-      generationMode: 'txt2img' | 'img2img' | 'inpaint' | 'outpaint';
    }
  | undefined
 > => {
-  const canvasData = await getCanvasData(state);
-
-  if (!canvasData) {
-    moduleLog.error('Unable to create canvas data');
-    return;
-  }
-
-  const { baseBlob, baseImageData, maskBlob, maskImageData } = canvasData;
-
-  const generationMode = getCanvasGenerationMode(baseImageData, maskImageData);
-
-  if (state.system.enableImageDebugging) {
-    const baseDataURL = await blobToDataURL(baseBlob);
-    const maskDataURL = await blobToDataURL(maskBlob);
-    openBase64ImageInTab([
-      { base64: maskDataURL, caption: 'mask b64' },
-      { base64: baseDataURL, caption: 'image b64' },
-    ]);
-  }
-
-  moduleLog.debug(`Generation mode: ${generationMode}`);
-
  // The base node is a txt2img, img2img or inpaint node
  const baseNode = buildBaseNode(generationMode, state);

@ -130,8 +102,5 @@ export const buildCanvasGraphAndBlobs = async (
    iterateNode,
    baseNode,
    edges,
-    baseBlob,
-    maskBlob,
-    generationMode,
  };
 };
--- a/invokeai/frontend/web/src/features/parameters/components/ProgressImage.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ProgressImage.tsx
@ -1,67 +0,0 @@
-import { Flex, Icon, Image } from '@chakra-ui/react';
-import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/store/storeHooks';
-import { systemSelector } from 'features/system/store/systemSelectors';
-import { isEqual } from 'lodash-es';
-import { memo } from 'react';
-import { FaImage } from 'react-icons/fa';
-
-const selector = createSelector(
-  [systemSelector],
-  (system) => {
-    const { progressImage } = system;
-
-    return {
-      progressImage,
-    };
-  },
-  {
-    memoizeOptions: {
-      resultEqualityCheck: isEqual,
-    },
-  }
-);
-
-const ProgressImage = () => {
-  const { progressImage } = useAppSelector(selector);
-  return progressImage ? (
-    <Flex
-      sx={{
-        position: 'relative',
-        w: 'full',
-        h: 'full',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <Image
-        draggable={false}
-        src={progressImage.dataURL}
-        width={progressImage.width}
-        height={progressImage.height}
-        sx={{
-          position: 'absolute',
-          objectFit: 'contain',
-          maxWidth: '100%',
-          maxHeight: '100%',
-          height: 'auto',
-          borderRadius: 'base',
-          p: 2,
-        }}
-      />
-    </Flex>
-  ) : (
-    <Flex
-      sx={{
-        w: 'full',
-        h: 'full',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <Icon color="base.400" boxSize={32} as={FaImage} />
-    </Flex>
-  );
-};
-
-export default memo(ProgressImage);
--- a/invokeai/frontend/web/src/features/parameters/components/_ProgressImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/_ProgressImagePreview.tsx
@ -1,159 +0,0 @@
-import { Flex, Text } from '@chakra-ui/react';
-import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { systemSelector } from 'features/system/store/systemSelectors';
-import { memo } from 'react';
-import { FaStopwatch } from 'react-icons/fa';
-import { uiSelector } from 'features/ui/store/uiSelectors';
-import IAIIconButton from 'common/components/IAIIconButton';
-import { CloseIcon } from '@chakra-ui/icons';
-import { useTranslation } from 'react-i18next';
-import {
-  floatingProgressImageMoved,
-  floatingProgressImageResized,
-  setShouldShowProgressImages,
-} from 'features/ui/store/uiSlice';
-import { Rnd } from 'react-rnd';
-import { Rect } from 'features/ui/store/uiTypes';
-import { isEqual } from 'lodash-es';
-import ProgressImage from './ProgressImage';
-
-const selector = createSelector(
-  [systemSelector, uiSelector],
-  (system, ui) => {
-    const { isProcessing } = system;
-    const {
-      floatingProgressImageRect,
-      shouldShowProgressImages,
-      shouldAutoShowProgressImages,
-    } = ui;
-
-    const showProgressWindow =
-      shouldAutoShowProgressImages && isProcessing
-        ? true
-        : shouldShowProgressImages;
-
-    return {
-      floatingProgressImageRect,
-      showProgressWindow,
-    };
-  },
-  {
-    memoizeOptions: {
-      resultEqualityCheck: isEqual,
-    },
-  }
-);
-
-const ProgressImagePreview = () => {
-  const dispatch = useAppDispatch();
-
-  const { showProgressWindow, floatingProgressImageRect } =
-    useAppSelector(selector);
-
-  const { t } = useTranslation();
-
-  return (
-    <>
-      <IAIIconButton
-        onClick={() =>
-          dispatch(setShouldShowProgressImages(!showProgressWindow))
-        }
-        tooltip={t('ui.showProgressImages')}
-        isChecked={showProgressWindow}
-        sx={{
-          position: 'absolute',
-          bottom: 4,
-          insetInlineStart: 4,
-        }}
-        aria-label={t('ui.showProgressImages')}
-        icon={<FaStopwatch />}
-      />
-      {showProgressWindow && (
-        <Rnd
-          bounds="window"
-          minHeight={200}
-          minWidth={200}
-          size={{
-            width: floatingProgressImageRect.width,
-            height: floatingProgressImageRect.height,
-          }}
-          position={{
-            x: floatingProgressImageRect.x,
-            y: floatingProgressImageRect.y,
-          }}
-          onDragStop={(e, d) => {
-            dispatch(floatingProgressImageMoved({ x: d.x, y: d.y }));
-          }}
-          onResizeStop={(e, direction, ref, delta, position) => {
-            const newRect: Partial<Rect> = {};
-
-            if (ref.style.width) {
-              newRect.width = ref.style.width;
-            }
-            if (ref.style.height) {
-              newRect.height = ref.style.height;
-            }
-            if (position.x) {
-              newRect.x = position.x;
-            }
-            if (position.x) {
-              newRect.y = position.y;
-            }
-
-            dispatch(floatingProgressImageResized(newRect));
-          }}
-        >
-          <Flex
-            sx={{
-              position: 'relative',
-              w: 'full',
-              h: 'full',
-              alignItems: 'center',
-              justifyContent: 'center',
-              flexDir: 'column',
-              boxShadow: 'dark-lg',
-              bg: 'base.800',
-              borderRadius: 'base',
-            }}
-          >
-            <Flex
-              sx={{
-                w: 'full',
-                alignItems: 'center',
-                justifyContent: 'center',
-                p: 1.5,
-                pl: 4,
-                pr: 3,
-                bg: 'base.700',
-                borderTopRadius: 'base',
-              }}
-            >
-              <Flex
-                sx={{
-                  flexGrow: 1,
-                  userSelect: 'none',
-                  cursor: 'move',
-                }}
-              >
-                <Text fontSize="sm" fontWeight={500}>
-                  Progress Images
-                </Text>
-              </Flex>
-              <IAIIconButton
-                onClick={() => dispatch(setShouldShowProgressImages(false))}
-                aria-label={t('ui.hideProgressImages')}
-                size="xs"
-                icon={<CloseIcon />}
-                variant="ghost"
-              />
-            </Flex>
-            <ProgressImage />
-          </Flex>
-        </Rnd>
-      )}
-    </>
-  );
-};
-
-export default memo(ProgressImagePreview);
--- a/invokeai/frontend/web/src/features/parameters/store/hiresSlice.ts
+++ b/invokeai/frontend/web/src/features/parameters/store/hiresSlice.ts
@ -1,97 +0,0 @@
-import type { PayloadAction } from '@reduxjs/toolkit';
-import { createSlice } from '@reduxjs/toolkit';
-
-export interface HiresState {
-  codeformerFidelity: number;
-  facetoolStrength: number;
-  facetoolType: FacetoolType;
-  hiresFix: boolean;
-  hiresStrength: number;
-  shouldLoopback: boolean;
-  shouldRunESRGAN: boolean;
-  shouldRunFacetool: boolean;
-  upscalingLevel: UpscalingLevel;
-  upscalingDenoising: number;
-  upscalingStrength: number;
-}
-
-export const initialHiresState: HiresState = {
-  codeformerFidelity: 0.75,
-  facetoolStrength: 0.75,
-  facetoolType: 'gfpgan',
-  hiresFix: false,
-  hiresStrength: 0.75,
-  hiresSteps: 30,
-  hiresWidth: 512,
-  hiresHeight: 512,
-  hiresModel: '',
-  shouldLoopback: false,
-  shouldRunESRGAN: false,
-  shouldRunFacetool: false,
-  upscalingLevel: 4,
-  upscalingDenoising: 0.75,
-  upscalingStrength: 0.75,
-};
-
-export const postprocessingSlice = createSlice({
-  name: 'postprocessing',
-  initialState: initialPostprocessingState,
-  reducers: {
-    setFacetoolStrength: (state, action: PayloadAction<number>) => {
-      state.facetoolStrength = action.payload;
-    },
-    setCodeformerFidelity: (state, action: PayloadAction<number>) => {
-      state.codeformerFidelity = action.payload;
-    },
-    setUpscalingLevel: (state, action: PayloadAction<UpscalingLevel>) => {
-      state.upscalingLevel = action.payload;
-    },
-    setUpscalingDenoising: (state, action: PayloadAction<number>) => {
-      state.upscalingDenoising = action.payload;
-    },
-    setUpscalingStrength: (state, action: PayloadAction<number>) => {
-      state.upscalingStrength = action.payload;
-    },
-    setHiresFix: (state, action: PayloadAction<boolean>) => {
-      state.hiresFix = action.payload;
-    },
-    setHiresStrength: (state, action: PayloadAction<number>) => {
-      state.hiresStrength = action.payload;
-    },
-    resetPostprocessingState: (state) => {
-      return {
-        ...state,
-        ...initialPostprocessingState,
-      };
-    },
-    setShouldRunFacetool: (state, action: PayloadAction<boolean>) => {
-      state.shouldRunFacetool = action.payload;
-    },
-    setFacetoolType: (state, action: PayloadAction<FacetoolType>) => {
-      state.facetoolType = action.payload;
-    },
-    setShouldRunESRGAN: (state, action: PayloadAction<boolean>) => {
-      state.shouldRunESRGAN = action.payload;
-    },
-    setShouldLoopback: (state, action: PayloadAction<boolean>) => {
-      state.shouldLoopback = action.payload;
-    },
-  },
-});
-
-export const {
-  resetPostprocessingState,
-  setCodeformerFidelity,
-  setFacetoolStrength,
-  setFacetoolType,
-  setHiresFix,
-  setHiresStrength,
-  setShouldLoopback,
-  setShouldRunESRGAN,
-  setShouldRunFacetool,
-  setUpscalingLevel,
-  setUpscalingDenoising,
-  setUpscalingStrength,
-} = postprocessingSlice.actions;
-
-export default postprocessingSlice.reducer;
--- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
@ -90,12 +90,6 @@ type SettingsModalProps = {
  children: ReactElement;
 };

-/**
- * Modal for app settings. Also provides Reset functionality in which the
- * app's localstorage is wiped via redux-persist.
- *
- * Secondary post-reset modal is included here.
- */
 const SettingsModal = ({ children }: SettingsModalProps) => {
  const dispatch = useAppDispatch();
  const { t } = useTranslation();
--- a/invokeai/frontend/web/src/features/system/hooks/useIsTabDisabled.ts
+++ b/invokeai/frontend/web/src/features/system/hooks/useIsTabDisabled.ts
@ -1,17 +0,0 @@
-import { RootState } from 'app/store/store';
-import { useAppSelector } from 'app/store/storeHooks';
-import { InvokeTabName } from 'features/ui/store/tabMap';
-import { useCallback } from 'react';
-
-export const useIsTabDisabled = () => {
-  const disabledTabs = useAppSelector(
-    (state: RootState) => state.config.disabledTabs
-  );
-
-  const isTabDisabled = useCallback(
-    (tab: InvokeTabName) => disabledTabs.includes(tab),
-    [disabledTabs]
-  );
-
-  return isTabDisabled;
-};
--- a/invokeai/frontend/web/src/features/ui/components/common/Scrollable.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/common/Scrollable.tsx
@ -1,88 +0,0 @@
-import { Box, ChakraProps } from '@chakra-ui/react';
-import { throttle } from 'lodash-es';
-import { ReactNode, useEffect, useRef } from 'react';
-
-const scrollShadowBaseStyles: ChakraProps['sx'] = {
-  position: 'absolute',
-  width: 'full',
-  height: 24,
-  left: 0,
-  pointerEvents: 'none',
-  transition: 'opacity 0.2s ease-in-out',
-};
-
-type ScrollableProps = {
-  children: ReactNode;
-};
-
-const Scrollable = ({ children }: ScrollableProps) => {
-  const scrollableRef = useRef<HTMLDivElement>(null);
-  const topShadowRef = useRef<HTMLDivElement>(null);
-  const bottomShadowRef = useRef<HTMLDivElement>(null);
-
-  const updateScrollShadowOpacity = throttle(
-    () => {
-      if (
-        !scrollableRef.current ||
-        !topShadowRef.current ||
-        !bottomShadowRef.current
-      ) {
-        return;
-      }
-      const { scrollTop, scrollHeight, offsetHeight } = scrollableRef.current;
-
-      if (scrollTop > 0) {
-        topShadowRef.current.style.opacity = '1';
-      } else {
-        topShadowRef.current.style.opacity = '0';
-      }
-
-      if (scrollTop >= scrollHeight - offsetHeight) {
-        bottomShadowRef.current.style.opacity = '0';
-      } else {
-        bottomShadowRef.current.style.opacity = '1';
-      }
-    },
-    33,
-    { leading: true }
-  );
-
-  useEffect(() => {
-    updateScrollShadowOpacity();
-  }, [updateScrollShadowOpacity]);
-
-  return (
-    <Box position="relative" w="full" h="full">
-      <Box
-        ref={scrollableRef}
-        position="absolute"
-        w="full"
-        h="full"
-        overflowY="scroll"
-        onScroll={updateScrollShadowOpacity}
-      >
-        {children}
-      </Box>
-      <Box
-        ref={bottomShadowRef}
-        sx={{
-          ...scrollShadowBaseStyles,
-          bottom: 0,
-          boxShadow:
-            'inset 0 -3.5rem 2rem -2rem var(--invokeai-colors-base-900)',
-        }}
-      ></Box>
-      <Box
-        ref={topShadowRef}
-        sx={{
-          ...scrollShadowBaseStyles,
-          top: 0,
-          boxShadow:
-            'inset 0 3.5rem 2rem -2rem var(--invokeai-colors-base-900)',
-        }}
-      ></Box>
-    </Box>
-  );
-};
-
-export default Scrollable;
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasMergeVisible.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasMergeVisible.tsx
@ -3,7 +3,6 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { canvasMerged } from 'features/canvas/store/actions';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
-import { mergeAndUploadCanvas } from 'features/canvas/store/thunks/mergeAndUploadCanvas';
 import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasWorkarea.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasWorkarea.tsx
@ -1,19 +0,0 @@
-import { useAppSelector } from 'app/store/storeHooks';
-import { memo } from 'react';
-import { RootState } from 'app/store/store';
-import UnifiedCanvasContentBeta from './UnifiedCanvasBeta/UnifiedCanvasContentBeta';
-import UnifiedCanvasContent from './UnifiedCanvasContent';
-
-const CanvasWorkspace = () => {
-  const shouldUseCanvasBetaLayout = useAppSelector(
-    (state: RootState) => state.ui.shouldUseCanvasBetaLayout
-  );
-
-  return shouldUseCanvasBetaLayout ? (
-    <UnifiedCanvasContentBeta />
-  ) : (
-    <UnifiedCanvasContent />
-  );
-};
-
-export default memo(CanvasWorkspace);
--- a/invokeai/frontend/web/src/features/ui/hooks/useDirection.ts
+++ b/invokeai/frontend/web/src/features/ui/hooks/useDirection.ts
@ -1,14 +0,0 @@
-import { useTheme } from '@chakra-ui/react';
-import { useMemo } from 'react';
-import { LangDirection } from '../components/common/ResizableDrawer/types';
-
-export const useLangDirection = () => {
-  const theme = useTheme();
-
-  const langDirection = useMemo(
-    () => theme.direction as LangDirection,
-    [theme.direction]
-  );
-
-  return langDirection;
-};
--- a/invokeai/frontend/web/src/services/fixtures/request.ts
+++ b/invokeai/frontend/web/src/services/fixtures/request.ts
@ -3,12 +3,14 @@
 /* eslint-disable */

 /**
+ * DO NOT DELETE EVEN THOUGH IT IS NOT USED!
+ *
 * Custom `request.ts` file for OpenAPI code generator.
 *
 * Patches the request logic in such a way that we can extract headers from requests.
 *
 * Copied from https://github.com/ferdikoomen/openapi-typescript-codegen/issues/829#issuecomment-1228224477
- * 
+ *
 * This file should be excluded in `tsconfig.json` and ignored by prettier/eslint!
 */

--- a/invokeai/frontend/web/src/services/util/makeGraphOfXImages.ts
+++ b/invokeai/frontend/web/src/services/util/makeGraphOfXImages.ts
@ -1,24 +0,0 @@
-import { Graph, TextToImageInvocation } from '../api';
-
-/**
- * Make a graph of however many images
- */
-export const makeGraphOfXImages = (numberOfImages: string) =>
-  Array.from(Array(numberOfImages))
-    .map(
-      (_val, i): TextToImageInvocation => ({
-        id: i.toString(),
-        type: 'txt2img',
-        prompt: 'pizza',
-        steps: 50,
-        seed: 123,
-        scheduler: 'ddim',
-      })
-    )
-    .reduce(
-      (acc, val: TextToImageInvocation) => {
-        if (acc.nodes) acc.nodes[val.id] = val;
-        return acc;
-      },
-      { nodes: {} } as Graph
-    );
--- a/invokeai/frontend/web/src/theme/themeTypes.d.ts
+++ b/invokeai/frontend/web/src/theme/themeTypes.d.ts
@ -1,4 +1,4 @@
-export declare type InvokeAIThemeColors = {
+export type InvokeAIThemeColors = {
  base: Partial<InvokeAIPaletteSteps>;
  accent: Partial<InvokeAIPaletteSteps>;
  working: Partial<InvokeAIPaletteSteps>;
@ -8,7 +8,7 @@ export declare type InvokeAIThemeColors = {
  gridLineColor: string;
 };

-export declare type InvokeAIPaletteSteps = {
+export type InvokeAIPaletteSteps = {
  0: string;
  50: string;
  100: string;
--- a/invokeai/frontend/web/yarn.lock
+++ b/invokeai/frontend/web/yarn.lock
@ -50,7 +50,7 @@
  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.4.tgz#94003fdfc520bbe2875d4ae557b43ddb6d880f17"
  integrity sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw==

-"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.19.4", "@babel/runtime@^7.20.6", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.19.4", "@babel/runtime@^7.20.6", "@babel/runtime@^7.9.2":
  version "7.21.0"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673"
  integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==
@ -2613,11 +2613,6 @@ clone@^1.0.2:
  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
  integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==

-clsx@^1.1.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
-  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
-
 code-block-writer@^12.0.0:
  version "12.0.0"
  resolved "https://registry.yarnpkg.com/code-block-writer/-/code-block-writer-12.0.0.tgz#4dd58946eb4234105aff7f0035977b2afdc2a770"
@ -3140,14 +3135,6 @@ doctrine@^3.0.0:
  dependencies:
    esutils "^2.0.2"

-dom-helpers@^5.0.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
-  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
-  dependencies:
-    "@babel/runtime" "^7.8.7"
-    csstype "^3.0.2"
-
 dot-prop@^5.2.0:
  version "5.3.0"
  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88"
@ -3575,11 +3562,6 @@ fast-loops@^1.1.3:
  resolved "https://registry.yarnpkg.com/fast-loops/-/fast-loops-1.1.3.tgz#ce96adb86d07e7bf9b4822ab9c6fac9964981f75"
  integrity sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g==

-fast-memoize@^2.5.1:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/fast-memoize/-/fast-memoize-2.5.2.tgz#79e3bb6a4ec867ea40ba0e7146816f6cdce9b57e"
-  integrity sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw==
-
 fast-printf@^1.6.9:
  version "1.6.9"
  resolved "https://registry.yarnpkg.com/fast-printf/-/fast-printf-1.6.9.tgz#212f56570d2dc8ccdd057ee93d50dd414d07d676"
@ -5458,13 +5440,6 @@ rc@1.2.8, rc@^1.2.7, rc@^1.2.8:
    minimist "^1.2.0"
    strip-json-comments "~2.0.1"

-re-resizable@6.9.6:
-  version "6.9.6"
-  resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.9.6.tgz#b95d37e3821481b56ddfb1e12862940a791e827d"
-  integrity sha512-0xYKS5+Z0zk+vICQlcZW+g54CcJTTmHluA7JUUgvERDxnKAnytylcyPsA+BSFi759s5hPlHmBRegFrwXs2FuBQ==
-  dependencies:
-    fast-memoize "^2.5.1"
-
 re-resizable@^6.9.9:
  version "6.9.9"
  resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.9.9.tgz#99e8b31c67a62115dc9c5394b7e55892265be216"
@ -5490,14 +5465,6 @@ react-dom@^18.2.0:
    loose-envify "^1.1.0"
    scheduler "^0.23.0"

-react-draggable@4.4.5:
-  version "4.4.5"
-  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.5.tgz#9e37fe7ce1a4cf843030f521a0a4cc41886d7e7c"
-  integrity sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==
-  dependencies:
-    clsx "^1.1.1"
-    prop-types "^15.8.1"
-
 react-dropzone@^14.2.3:
  version "14.2.3"
  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-14.2.3.tgz#0acab68308fda2d54d1273a1e626264e13d4e84b"
@ -5562,15 +5529,7 @@ react-is@^18.0.0:
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==

-react-konva-utils@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/react-konva-utils/-/react-konva-utils-1.0.4.tgz#bce739a207f02fc5f0246f6ab16a0e295f5544af"
-  integrity sha512-K1J1K9MoVNGFrUxYt+dn7TUVqpppW3Y0fRcf42Ws1wzTQ2Od4qicCom9jnGxLiwh8zyhYaHAUn3hztgfTyYF7g==
-  dependencies:
-    react-konva "^18.0.0-0"
-    use-image "^1.1.0"
-
-react-konva@^18.0.0-0, react-konva@^18.2.7:
+react-konva@^18.2.7:
  version "18.2.7"
  resolved "https://registry.yarnpkg.com/react-konva/-/react-konva-18.2.7.tgz#f01735ac9ae35a7cd0f3ca359a898374ce791d04"
  integrity sha512-Q52ghaIR+2g3x14V5aIyt7VWNqPnWRotILo0Nj4YWVbNQisozrTJJ3/w68qb5Ar2fsYo7yXb4T6Nt4yZcGd2yg==
@ -5624,15 +5583,6 @@ react-resizable-panels@^0.0.42:
  resolved "https://registry.yarnpkg.com/react-resizable-panels/-/react-resizable-panels-0.0.42.tgz#e1a5d7fde7be4d18f32d0e021a0b4edb28b9edfe"
  integrity sha512-nOaN9DeUTsmKjN3MFGaLd35kngGyO29SHRLdBRafYR1SV2F/LbWbpVUKVPwL2fBBTnQe2/rqOQwT4k+3cKeK+w==

-react-rnd@^10.4.1:
-  version "10.4.1"
-  resolved "https://registry.yarnpkg.com/react-rnd/-/react-rnd-10.4.1.tgz#9e1c3f244895d7862ef03be98b2a620848c3fba1"
-  integrity sha512-0m887AjQZr6p2ADLNnipquqsDq4XJu/uqVqI3zuoGD19tRm6uB83HmZWydtkilNp5EWsOHbLGF4IjWMdd5du8Q==
-  dependencies:
-    re-resizable "6.9.6"
-    react-draggable "4.4.5"
-    tslib "2.3.1"
-
 react-style-singleton@^2.2.1:
  version "2.2.1"
  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
@ -5642,16 +5592,6 @@ react-style-singleton@^2.2.1:
    invariant "^2.2.4"
    tslib "^2.0.0"

-react-transition-group@^4.4.5:
-  version "4.4.5"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
-  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    dom-helpers "^5.0.1"
-    loose-envify "^1.4.0"
-    prop-types "^15.6.2"
-
 react-universal-interface@^0.6.2:
  version "0.6.2"
  resolved "https://registry.yarnpkg.com/react-universal-interface/-/react-universal-interface-0.6.2.tgz#5e8d438a01729a4dbbcbeeceb0b86be146fe2b3b"
@ -5722,21 +5662,11 @@ readdirp@~3.6.0:
  dependencies:
    picomatch "^2.2.1"

-redux-deep-persist@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/redux-deep-persist/-/redux-deep-persist-1.0.7.tgz#fbbd00dcee6111b42624c9d8590b7e124b94476e"
-  integrity sha512-PsD5UXbfCFvDruIPIHKAyaZ3wPhEWBMU8Rtcr/c1pXJT8aYoKbgKUS8JBkaWc3EB1ONlnLTdDDmnC/TOD39hqA==
-
 redux-dynamic-middlewares@^2.2.0:
  version "2.2.0"
  resolved "https://registry.yarnpkg.com/redux-dynamic-middlewares/-/redux-dynamic-middlewares-2.2.0.tgz#6835dd6d4f2fd975266376b45dcae0141320ae97"
  integrity sha512-GHESQC+Y0PV98ZBoaC6br6cDOsNiM1Cu4UleGMqMWCXX03jIr3BoozYVrRkLVVAl4sC216chakMnZOu6SwNdGA==

-redux-persist@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-6.0.0.tgz#b4d2972f9859597c130d40d4b146fecdab51b3a8"
-  integrity sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==
-
 redux-remember@^3.3.1:
  version "3.3.1"
  resolved "https://registry.yarnpkg.com/redux-remember/-/redux-remember-3.3.1.tgz#fad0b3af81458d8e40a54cd30be148c17e40bda9"
@ -6510,11 +6440,6 @@ tsconfig-paths@^4.0.0:
    minimist "^1.2.6"
    strip-bom "^3.0.0"

-tslib@2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
-  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
-
 tslib@2.4.0:
  version "2.4.0"
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"