ui: restore canvas and upload functionality (#3414)

- refactor image uploading, fix init image upload button 
- refactor toast and hotkey hooks into logical components
- restore canvas save/download/copy/merge functionality
- clean up unused files and packages
- fix canvas rendering issue resulting from fractional stage coords

invokeai/frontend/web/docs/PACKAGE_SCRIPTS.md

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

invokeai/frontend/web/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",

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>;
-     /**

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>;
-     /**

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

@@ -552,8 +552,8 @@
         "canceled": "Processing Canceled",
         "tempFoldersEmptied": "Temp Folder Emptied",
         "uploadFailed": "Upload failed",
-        "uploadFailedMultipleImagesDesc": "Multiple images pasted, may only upload one image at a time",
         "uploadFailedUnableToLoadDesc": "Unable to load file",
+        "uploadFailedInvalidUploadDesc": "Must be single PNG or JPEG image",
         "downloadImageStarted": "Image Download Started",
         "imageCopied": "Image Copied",
         "imageLinkCopied": "Image Link Copied",

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

@@ -2,9 +2,6 @@ import ImageUploader from 'common/components/ImageUploader';
 import SiteHeader from 'features/system/components/SiteHeader';
 import ProgressBar from 'features/system/components/ProgressBar';
 import InvokeTabs from 'features/ui/components/InvokeTabs';
-
-import useToastWatcher from 'features/system/hooks/useToastWatcher';
-
 import FloatingGalleryButton from 'features/ui/components/FloatingGalleryButton';
 import FloatingParametersPanelButtons from 'features/ui/components/FloatingParametersPanelButtons';
 import { Box, Flex, Grid, Portal } from '@chakra-ui/react';
@@ -17,13 +14,15 @@ import { motion, AnimatePresence } from 'framer-motion';
 import Loading from 'common/components/Loading/Loading';
 import { useIsApplicationReady } from 'features/system/hooks/useIsApplicationReady';
 import { PartialAppConfig } from 'app/types/invokeai';
-import { useGlobalHotkeys } from 'common/hooks/useGlobalHotkeys';
 import { configChanged } from 'features/system/store/configSlice';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { useLogger } from 'app/logging/useLogger';
 import ParametersDrawer from 'features/ui/components/ParametersDrawer';
 import { languageSelector } from 'features/system/store/systemSelectors';
 import i18n from 'i18n';
+import Toaster from './Toaster';
+import GlobalHotkeys from './GlobalHotkeys';
+import AuxiliaryProgressIndicator from './AuxiliaryProgressIndicator';
 
 const DEFAULT_CONFIG = {};
 
@@ -38,9 +37,6 @@ const App = ({
   headerComponent,
   setIsReady,
 }: Props) => {
-  useToastWatcher();
-  useGlobalHotkeys();
-
   const language = useAppSelector(languageSelector);
 
   const log = useLogger();
@@ -77,65 +73,69 @@ const App = ({
   }, [isApplicationReady, setIsReady]);
 
   return (
-    <Grid w="100vw" h="100vh" position="relative" overflow="hidden">
+    <>
-      {isLightboxEnabled && <Lightbox />}
+      <Grid w="100vw" h="100vh" position="relative" overflow="hidden">
-      <ImageUploader>
+        {isLightboxEnabled && <Lightbox />}
-        <ProgressBar />
+        <ImageUploader>
-        <Grid
+          <ProgressBar />
-          gap={4}
+          <Grid
-          p={4}
-          gridAutoRows="min-content auto"
-          w={APP_WIDTH}
-          h={APP_HEIGHT}
-        >
-          {headerComponent || <SiteHeader />}
-          <Flex
             gap={4}
-            w={{ base: '100vw', xl: 'full' }}
+            p={4}
-            h="full"
+            gridAutoRows="min-content auto"
-            flexDir={{ base: 'column', xl: 'row' }}
+            w={APP_WIDTH}
+            h={APP_HEIGHT}
           >
-            <InvokeTabs />
+            {headerComponent || <SiteHeader />}
-          </Flex>
+            <Flex
-        </Grid>
+              gap={4}
-      </ImageUploader>
+              w={{ base: '100vw', xl: 'full' }}
+              h="full"
+              flexDir={{ base: 'column', xl: 'row' }}
+            >
+              <InvokeTabs />
+            </Flex>
+          </Grid>
+        </ImageUploader>
 
-      <GalleryDrawer />
+        <GalleryDrawer />
-      <ParametersDrawer />
+        <ParametersDrawer />
 
-      <AnimatePresence>
+        <AnimatePresence>
-        {!isApplicationReady && !loadingOverridden && (
+          {!isApplicationReady && !loadingOverridden && (
-          <motion.div
+            <motion.div
-            key="loading"
+              key="loading"
-            initial={{ opacity: 1 }}
+              initial={{ opacity: 1 }}
-            animate={{ opacity: 1 }}
+              animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
+              exit={{ opacity: 0 }}
-            transition={{ duration: 0.3 }}
+              transition={{ duration: 0.3 }}
-            style={{ zIndex: 3 }}
+              style={{ zIndex: 3 }}
-          >
+            >
-            <Box position="absolute" top={0} left={0} w="100vw" h="100vh">
+              <Box position="absolute" top={0} left={0} w="100vw" h="100vh">
-              <Loading />
+                <Loading />
-            </Box>
+              </Box>
-            <Box
+              <Box
-              onClick={handleOverrideClicked}
+                onClick={handleOverrideClicked}
-              position="absolute"
+                position="absolute"
-              top={0}
+                top={0}
-              right={0}
+                right={0}
-              cursor="pointer"
+                cursor="pointer"
-              w="2rem"
+                w="2rem"
-              h="2rem"
+                h="2rem"
-            />
+              />
-          </motion.div>
+            </motion.div>
-        )}
+          )}
-      </AnimatePresence>
+        </AnimatePresence>
 
-      <Portal>
+        <Portal>
-        <FloatingParametersPanelButtons />
+          <FloatingParametersPanelButtons />
-      </Portal>
+        </Portal>
-      <Portal>
+        <Portal>
-        <FloatingGalleryButton />
+          <FloatingGalleryButton />
-      </Portal>
+        </Portal>
-    </Grid>
+      </Grid>
+      <Toaster />
+      <GlobalHotkeys />
+    </>
   );
 };
 

invokeai/frontend/web/src/app/components/AuxiliaryProgressIndicator.tsx

@@ -0,0 +1,44 @@
+import { Flex, Spinner, Tooltip } from '@chakra-ui/react';
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store/storeHooks';
+import { systemSelector } from 'features/system/store/systemSelectors';
+import { memo } from 'react';
+
+const selector = createSelector(systemSelector, (system) => {
+  const { isUploading } = system;
+
+  let tooltip = '';
+
+  if (isUploading) {
+    tooltip = 'Uploading...';
+  }
+
+  return {
+    tooltip,
+    shouldShow: isUploading,
+  };
+});
+
+export const AuxiliaryProgressIndicator = () => {
+  const { shouldShow, tooltip } = useAppSelector(selector);
+
+  if (!shouldShow) {
+    return null;
+  }
+
+  return (
+    <Flex
+      sx={{
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: 'base.600',
+      }}
+    >
+      <Tooltip label={tooltip} placement="right" hasArrow>
+        <Spinner />
+      </Tooltip>
+    </Flex>
+  );
+};
+
+export default memo(AuxiliaryProgressIndicator);

invokeai/frontend/web/src/app/components/GlobalHotkeys.ts

@@ -10,6 +10,7 @@ import {
   togglePinParametersPanel,
 } from 'features/ui/store/uiSlice';
 import { isEqual } from 'lodash-es';
+import React, { memo } from 'react';
 import { isHotkeyPressed, useHotkeys } from 'react-hotkeys-hook';
 
 const globalHotkeysSelector = createSelector(
@@ -27,7 +28,11 @@ const globalHotkeysSelector = createSelector(
 
 // TODO: Does not catch keypresses while focused in an input. Maybe there is a way?
 
-export const useGlobalHotkeys = () => {
+/**
+ * Logical component. Handles app-level global hotkeys.
+ * @returns null
+ */
+const GlobalHotkeys: React.FC = () => {
   const dispatch = useAppDispatch();
   const { shift } = useAppSelector(globalHotkeysSelector);
 
@@ -75,4 +80,8 @@ export const useGlobalHotkeys = () => {
   useHotkeys('4', () => {
     dispatch(setActiveTab('nodes'));
   });
+
+  return null;
 };
+
+export default memo(GlobalHotkeys);

invokeai/frontend/web/src/app/components/Toaster.ts

@@ -0,0 +1,65 @@
+import { useToast, UseToastOptions } from '@chakra-ui/react';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { toastQueueSelector } from 'features/system/store/systemSelectors';
+import { addToast, clearToastQueue } from 'features/system/store/systemSlice';
+import { useCallback, useEffect } from 'react';
+
+export type MakeToastArg = string | UseToastOptions;
+
+/**
+ * Makes a toast from a string or a UseToastOptions object.
+ * If a string is passed, the toast will have the status 'info' and will be closable with a duration of 2500ms.
+ */
+export const makeToast = (arg: MakeToastArg): UseToastOptions => {
+  if (typeof arg === 'string') {
+    return {
+      title: arg,
+      status: 'info',
+      isClosable: true,
+      duration: 2500,
+    };
+  }
+
+  return { status: 'info', isClosable: true, duration: 2500, ...arg };
+};
+
+/**
+ * Logical component. Watches the toast queue and makes toasts when the queue is not empty.
+ * @returns null
+ */
+const Toaster = () => {
+  const dispatch = useAppDispatch();
+  const toastQueue = useAppSelector(toastQueueSelector);
+  const toast = useToast();
+  useEffect(() => {
+    toastQueue.forEach((t) => {
+      toast(t);
+    });
+    toastQueue.length > 0 && dispatch(clearToastQueue());
+  }, [dispatch, toast, toastQueue]);
+
+  return null;
+};
+
+/**
+ * Returns a function that can be used to make a toast.
+ * @example
+ * const toaster = useAppToaster();
+ * toaster('Hello world!');
+ * toaster({ title: 'Hello world!', status: 'success' });
+ * @returns A function that can be used to make a toast.
+ * @see makeToast
+ * @see MakeToastArg
+ * @see UseToastOptions
+ */
+export const useAppToaster = () => {
+  const dispatch = useAppDispatch();
+  const toaster = useCallback(
+    (arg: MakeToastArg) => dispatch(addToast(makeToast(arg))),
+    [dispatch]
+  );
+
+  return toaster;
+};
+
+export default Toaster;

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

@@ -15,6 +15,10 @@ import { addUserInvokedCanvasListener } from './listeners/userInvokedCanvas';
 import { addUserInvokedNodesListener } from './listeners/userInvokedNodes';
 import { addUserInvokedTextToImageListener } from './listeners/userInvokedTextToImage';
 import { addUserInvokedImageToImageListener } from './listeners/userInvokedImageToImage';
+import { addCanvasSavedToGalleryListener } from './listeners/canvasSavedToGallery';
+import { addCanvasDownloadedAsImageListener } from './listeners/canvasDownloadedAsImage';
+import { addCanvasCopiedToClipboardListener } from './listeners/canvasCopiedToClipboard';
+import { addCanvasMergedListener } from './listeners/canvasMerged';
 
 export const listenerMiddleware = createListenerMiddleware();
 
@@ -43,3 +47,8 @@ addUserInvokedCanvasListener();
 addUserInvokedNodesListener();
 addUserInvokedTextToImageListener();
 addUserInvokedImageToImageListener();
+
+addCanvasSavedToGalleryListener();
+addCanvasDownloadedAsImageListener();
+addCanvasCopiedToClipboardListener();
+addCanvasMergedListener();

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

@@ -0,0 +1,33 @@
+import { canvasCopiedToClipboard } from 'features/canvas/store/actions';
+import { startAppListening } from '..';
+import { log } from 'app/logging/useLogger';
+import { getBaseLayerBlob } from 'features/canvas/util/getBaseLayerBlob';
+import { addToast } from 'features/system/store/systemSlice';
+import { copyBlobToClipboard } from 'features/canvas/util/copyBlobToClipboard';
+
+const moduleLog = log.child({ namespace: 'canvasCopiedToClipboardListener' });
+
+export const addCanvasCopiedToClipboardListener = () => {
+  startAppListening({
+    actionCreator: canvasCopiedToClipboard,
+    effect: async (action, { dispatch, getState }) => {
+      const state = getState();
+
+      const blob = await getBaseLayerBlob(state);
+
+      if (!blob) {
+        moduleLog.error('Problem getting base layer blob');
+        dispatch(
+          addToast({
+            title: 'Problem Copying Canvas',
+            description: 'Unable to export base layer',
+            status: 'error',
+          })
+        );
+        return;
+      }
+
+      copyBlobToClipboard(blob);
+    },
+  });
+};

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

@@ -0,0 +1,33 @@
+import { canvasDownloadedAsImage } from 'features/canvas/store/actions';
+import { startAppListening } from '..';
+import { log } from 'app/logging/useLogger';
+import { downloadBlob } from 'features/canvas/util/downloadBlob';
+import { getBaseLayerBlob } from 'features/canvas/util/getBaseLayerBlob';
+import { addToast } from 'features/system/store/systemSlice';
+
+const moduleLog = log.child({ namespace: 'canvasSavedToGalleryListener' });
+
+export const addCanvasDownloadedAsImageListener = () => {
+  startAppListening({
+    actionCreator: canvasDownloadedAsImage,
+    effect: async (action, { dispatch, getState }) => {
+      const state = getState();
+
+      const blob = await getBaseLayerBlob(state);
+
+      if (!blob) {
+        moduleLog.error('Problem getting base layer blob');
+        dispatch(
+          addToast({
+            title: 'Problem Downloading Canvas',
+            description: 'Unable to export base layer',
+            status: 'error',
+          })
+        );
+        return;
+      }
+
+      downloadBlob(blob, 'mergedCanvas.png');
+    },
+  });
+};

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));
-    },
-  });

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

@@ -0,0 +1,88 @@
+import { canvasMerged } from 'features/canvas/store/actions';
+import { startAppListening } from '..';
+import { log } from 'app/logging/useLogger';
+import { getBaseLayerBlob } from 'features/canvas/util/getBaseLayerBlob';
+import { addToast } from 'features/system/store/systemSlice';
+import { imageUploaded } from 'services/thunks/image';
+import { v4 as uuidv4 } from 'uuid';
+import { deserializeImageResponse } from 'services/util/deserializeImageResponse';
+import { setMergedCanvas } from 'features/canvas/store/canvasSlice';
+import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';
+
+const moduleLog = log.child({ namespace: 'canvasCopiedToClipboardListener' });
+
+export const addCanvasMergedListener = () => {
+  startAppListening({
+    actionCreator: canvasMerged,
+    effect: async (action, { dispatch, getState, take }) => {
+      const state = getState();
+
+      const blob = await getBaseLayerBlob(state, true);
+
+      if (!blob) {
+        moduleLog.error('Problem getting base layer blob');
+        dispatch(
+          addToast({
+            title: 'Problem Merging Canvas',
+            description: 'Unable to export base layer',
+            status: 'error',
+          })
+        );
+        return;
+      }
+
+      const canvasBaseLayer = getCanvasBaseLayer();
+
+      if (!canvasBaseLayer) {
+        moduleLog.error('Problem getting canvas base layer');
+        dispatch(
+          addToast({
+            title: 'Problem Merging Canvas',
+            description: 'Unable to export base layer',
+            status: 'error',
+          })
+        );
+        return;
+      }
+
+      const baseLayerRect = canvasBaseLayer.getClientRect({
+        relativeTo: canvasBaseLayer.getParent(),
+      });
+
+      const filename = `mergedCanvas_${uuidv4()}.png`;
+
+      dispatch(
+        imageUploaded({
+          imageType: 'intermediates',
+          formData: {
+            file: new File([blob], filename, { type: 'image/png' }),
+          },
+        })
+      );
+
+      const [{ payload }] = await take(
+        (action): action is ReturnType<typeof imageUploaded.fulfilled> =>
+          imageUploaded.fulfilled.match(action) &&
+          action.meta.arg.formData.file.name === filename
+      );
+
+      const mergedCanvasImage = deserializeImageResponse(payload.response);
+
+      dispatch(
+        setMergedCanvas({
+          kind: 'image',
+          layer: 'base',
+          image: mergedCanvasImage,
+          ...baseLayerRect,
+        })
+      );
+
+      dispatch(
+        addToast({
+          title: 'Canvas Merged',
+          status: 'success',
+        })
+      );
+    },
+  });
+};

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

@@ -0,0 +1,40 @@
+import { canvasSavedToGallery } from 'features/canvas/store/actions';
+import { startAppListening } from '..';
+import { log } from 'app/logging/useLogger';
+import { imageUploaded } from 'services/thunks/image';
+import { getBaseLayerBlob } from 'features/canvas/util/getBaseLayerBlob';
+import { addToast } from 'features/system/store/systemSlice';
+
+const moduleLog = log.child({ namespace: 'canvasSavedToGalleryListener' });
+
+export const addCanvasSavedToGalleryListener = () => {
+  startAppListening({
+    actionCreator: canvasSavedToGallery,
+    effect: async (action, { dispatch, getState }) => {
+      const state = getState();
+
+      const blob = await getBaseLayerBlob(state);
+
+      if (!blob) {
+        moduleLog.error('Problem getting base layer blob');
+        dispatch(
+          addToast({
+            title: 'Problem Saving Canvas',
+            description: 'Unable to export base layer',
+            status: 'error',
+          })
+        );
+        return;
+      }
+
+      dispatch(
+        imageUploaded({
+          imageType: 'results',
+          formData: {
+            file: new File([blob], 'mergedCanvas.png', { type: 'image/png' }),
+          },
+        })
+      );
+    },
+  });
+};

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

@@ -3,6 +3,10 @@ import { startAppListening } from '..';
 import { uploadAdded } from 'features/gallery/store/uploadsSlice';
 import { imageSelected } from 'features/gallery/store/gallerySlice';
 import { imageUploaded } from 'services/thunks/image';
+import { addToast } from 'features/system/store/systemSlice';
+import { initialImageSelected } from 'features/parameters/store/actions';
+import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice';
+import { resultAdded } from 'features/gallery/store/resultsSlice';
 
 export const addImageUploadedListener = () => {
   startAppListening({
@@ -11,14 +15,31 @@ export const addImageUploadedListener = () => {
       action.payload.response.image_type !== 'intermediates',
     effect: (action, { dispatch, getState }) => {
       const { response } = action.payload;
+      const { imageType } = action.meta.arg;
 
       const state = getState();
       const image = deserializeImageResponse(response);
 
-      dispatch(uploadAdded(image));
+      if (imageType === 'uploads') {
+        dispatch(uploadAdded(image));
 
-      if (state.gallery.shouldAutoSwitchToNewImages) {
+        dispatch(addToast({ title: 'Image Uploaded', status: 'success' }));
-        dispatch(imageSelected(image));
+
+        if (state.gallery.shouldAutoSwitchToNewImages) {
+          dispatch(imageSelected(image));
+        }
+
+        if (action.meta.arg.activeTabName === 'img2img') {
+          dispatch(initialImageSelected(image));
+        }
+
+        if (action.meta.arg.activeTabName === 'unifiedCanvas') {
+          dispatch(setInitialCanvasImage(image));
+        }
+      }
+
+      if (imageType === 'results') {
+        dispatch(resultAdded(image));
       }
     },
   });

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

@@ -2,11 +2,11 @@ import { initialImageChanged } from 'features/parameters/store/generationSlice';
 import { Image, isInvokeAIImage } from 'app/types/invokeai';
 import { selectResultsById } from 'features/gallery/store/resultsSlice';
 import { selectUploadsById } from 'features/gallery/store/uploadsSlice';
-import { makeToast } from 'features/system/hooks/useToastWatcher';
 import { t } from 'i18next';
 import { addToast } from 'features/system/store/systemSlice';
 import { startAppListening } from '..';
 import { initialImageSelected } from 'features/parameters/store/actions';
+import { makeToast } from 'app/components/Toaster';
 
 export const addInitialImageSelectedListener = () => {
   startAppListening({

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 {
+      const { rangeNode, iterateNode, baseNode, edges } = graphComponents;
-        rangeNode,
-        iterateNode,
-        baseNode,
-        edges,
-        baseBlob,
-        maskBlob,
-        generationMode,
-      } = data;
 
+      // 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) {

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

@@ -5,6 +5,7 @@ import {
   Input,
   InputProps,
 } from '@chakra-ui/react';
+import { stopPastePropagation } from 'common/util/stopPastePropagation';
 import { ChangeEvent, memo } from 'react';
 
 interface IAIInputProps extends InputProps {
@@ -31,7 +32,7 @@ const IAIInput = (props: IAIInputProps) => {
       {...formControlProps}
     >
       {label !== '' && <FormLabel>{label}</FormLabel>}
-      <Input {...rest} />
+      <Input {...rest} onPaste={stopPastePropagation} />
     </FormControl>
   );
 };

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

@@ -14,6 +14,7 @@ import {
   Tooltip,
   TooltipProps,
 } from '@chakra-ui/react';
+import { stopPastePropagation } from 'common/util/stopPastePropagation';
 import { clamp } from 'lodash-es';
 
 import { FocusEvent, memo, useEffect, useState } from 'react';
@@ -125,6 +126,7 @@ const IAINumberInput = (props: Props) => {
           onChange={handleOnChange}
           onBlur={handleBlur}
           {...rest}
+          onPaste={stopPastePropagation}
         >
           <NumberInputField {...numberInputFieldProps} />
           {showStepper && (

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

@@ -0,0 +1,9 @@
+import { Textarea, TextareaProps, forwardRef } from '@chakra-ui/react';
+import { stopPastePropagation } from 'common/util/stopPastePropagation';
+import { memo } from 'react';
+
+const IAITextarea = forwardRef((props: TextareaProps, ref) => {
+  return <Textarea ref={ref} onPaste={stopPastePropagation} {...props} />;
+});
+
+export default memo(IAITextarea);

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

@@ -1,4 +1,4 @@
-import { Box, useToast } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import { ImageUploaderTriggerContext } from 'app/contexts/ImageUploaderTriggerContext';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import useImageUploader from 'common/hooks/useImageUploader';
@@ -10,12 +10,33 @@ import {
   ReactNode,
   useCallback,
   useEffect,
+  useMemo,
+  useRef,
   useState,
 } from 'react';
 import { FileRejection, useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
 import { imageUploaded } from 'services/thunks/image';
 import ImageUploadOverlay from './ImageUploadOverlay';
+import { useAppToaster } from 'app/components/Toaster';
+import { filter, map, some } from 'lodash-es';
+import { createSelector } from '@reduxjs/toolkit';
+import { systemSelector } from 'features/system/store/systemSelectors';
+import { ErrorCode } from 'react-dropzone';
+
+const selector = createSelector(
+  [systemSelector, activeTabNameSelector],
+  (system, activeTabName) => {
+    const { isConnected, isUploading } = system;
+
+    const isUploaderDisabled = !isConnected || isUploading;
+
+    return {
+      isUploaderDisabled,
+      activeTabName,
+    };
+  }
+);
 
 type ImageUploaderProps = {
   children: ReactNode;
@@ -24,38 +45,49 @@ type ImageUploaderProps = {
 const ImageUploader = (props: ImageUploaderProps) => {
   const { children } = props;
   const dispatch = useAppDispatch();
-  const activeTabName = useAppSelector(activeTabNameSelector);
+  const { isUploaderDisabled, activeTabName } = useAppSelector(selector);
-  const toast = useToast({});
+  const toaster = useAppToaster();
   const { t } = useTranslation();
   const [isHandlingUpload, setIsHandlingUpload] = useState<boolean>(false);
-  const { setOpenUploader } = useImageUploader();
+  const { setOpenUploaderFunction } = useImageUploader();
 
   const fileRejectionCallback = useCallback(
     (rejection: FileRejection) => {
       setIsHandlingUpload(true);
-      const msg = rejection.errors.reduce(
+
-        (acc: string, cur: { message: string }) => `${acc}\n${cur.message}`,
+      toaster({
-        ''
-      );
-      toast({
         title: t('toast.uploadFailed'),
-        description: msg,
+        description: rejection.errors.map((error) => error.message).join('\n'),
         status: 'error',
-        isClosable: true,
       });
     },
-    [t, toast]
+    [t, toaster]
   );
 
   const fileAcceptedCallback = useCallback(
     async (file: File) => {
-      dispatch(imageUploaded({ imageType: 'uploads', formData: { file } }));
+      dispatch(
+        imageUploaded({
+          imageType: 'uploads',
+          formData: { file },
+          activeTabName,
+        })
+      );
     },
-    [dispatch]
+    [dispatch, activeTabName]
   );
 
   const onDrop = useCallback(
     (acceptedFiles: Array<File>, fileRejections: Array<FileRejection>) => {
+      if (fileRejections.length > 1) {
+        toaster({
+          title: t('toast.uploadFailed'),
+          description: t('toast.uploadFailedInvalidUploadDesc'),
+          status: 'error',
+        });
+        return;
+      }
+
       fileRejections.forEach((rejection: FileRejection) => {
         fileRejectionCallback(rejection);
       });
@@ -64,7 +96,7 @@ const ImageUploader = (props: ImageUploaderProps) => {
         fileAcceptedCallback(file);
       });
     },
-    [fileAcceptedCallback, fileRejectionCallback]
+    [t, toaster, fileAcceptedCallback, fileRejectionCallback]
   );
 
   const {
@@ -73,92 +105,73 @@ const ImageUploader = (props: ImageUploaderProps) => {
     isDragAccept,
     isDragReject,
     isDragActive,
+    inputRef,
     open,
   } = useDropzone({
     accept: { 'image/png': ['.png'], 'image/jpeg': ['.jpg', '.jpeg', '.png'] },
     noClick: true,
     onDrop,
     onDragOver: () => setIsHandlingUpload(true),
-    maxFiles: 1,
+    disabled: isUploaderDisabled,
+    multiple: false,
   });
 
-  setOpenUploader(open);
-
   useEffect(() => {
-    const pasteImageListener = (e: ClipboardEvent) => {
+    // This is a hack to allow pasting images into the uploader
-      const dataTransferItemList = e.clipboardData?.items;
+    const handlePaste = async (e: ClipboardEvent) => {
-      if (!dataTransferItemList) return;
+      if (!inputRef.current) {
-
-      const imageItems: Array<DataTransferItem> = [];
-
-      for (const item of dataTransferItemList) {
-        if (
-          item.kind === 'file' &&
-          ['image/png', 'image/jpg'].includes(item.type)
-        ) {
-          imageItems.push(item);
-        }
-      }
-
-      if (!imageItems.length) return;
-
-      e.stopImmediatePropagation();
-
-      if (imageItems.length > 1) {
-        toast({
-          description: t('toast.uploadFailedMultipleImagesDesc'),
-          status: 'error',
-          isClosable: true,
-        });
         return;
       }
 
-      const file = imageItems[0].getAsFile();
+      if (e.clipboardData?.files) {
-
+        // Set the files on the inputRef
-      if (!file) {
+        inputRef.current.files = e.clipboardData.files;
-        toast({
+        // Dispatch the change event, dropzone catches this and we get to use its own validation
-          description: t('toast.uploadFailedUnableToLoadDesc'),
+        inputRef.current?.dispatchEvent(new Event('change', { bubbles: true }));
-          status: 'error',
-          isClosable: true,
-        });
-        return;
       }
-
-      dispatch(imageUploaded({ imageType: 'uploads', formData: { file } }));
     };
-    document.addEventListener('paste', pasteImageListener);
+
+    // Set the open function so we can open the uploader from anywhere
+    setOpenUploaderFunction(open);
+
+    // Add the paste event listener
+    document.addEventListener('paste', handlePaste);
+
     return () => {
-      document.removeEventListener('paste', pasteImageListener);
+      document.removeEventListener('paste', handlePaste);
+      setOpenUploaderFunction(() => {
+        return;
+      });
     };
-  }, [t, dispatch, toast, activeTabName]);
+  }, [inputRef, open, setOpenUploaderFunction]);
 
-  const overlaySecondaryText = ['img2img', 'unifiedCanvas'].includes(
+  const overlaySecondaryText = useMemo(() => {
-    activeTabName
+    if (['img2img', 'unifiedCanvas'].includes(activeTabName)) {
-  )
+      return ` to ${String(t(`common.${activeTabName}` as ResourceKey))}`;
-    ? ` to ${String(t(`common.${activeTabName}` as ResourceKey))}`
+    }
-    : ``;
+
+    return '';
+  }, [t, activeTabName]);
 
   return (
-    <ImageUploaderTriggerContext.Provider value={open}>
+    <Box
-      <Box
+      {...getRootProps({ style: {} })}
-        {...getRootProps({ style: {} })}
+      onKeyDown={(e: KeyboardEvent) => {
-        onKeyDown={(e: KeyboardEvent) => {
+        // Bail out if user hits spacebar - do not open the uploader
-          // Bail out if user hits spacebar - do not open the uploader
+        if (e.key === ' ') return;
-          if (e.key === ' ') return;
+      }}
-        }}
+    >
-      >
+      <input {...getInputProps()} />
-        <input {...getInputProps()} />
+      {children}
-        {children}
+      {isDragActive && isHandlingUpload && (
-        {isDragActive && isHandlingUpload && (
+        <ImageUploadOverlay
-          <ImageUploadOverlay
+          isDragAccept={isDragAccept}
-            isDragAccept={isDragAccept}
+          isDragReject={isDragReject}
-            isDragReject={isDragReject}
+          overlaySecondaryText={overlaySecondaryText}
-            overlaySecondaryText={overlaySecondaryText}
+          setIsHandlingUpload={setIsHandlingUpload}
-            setIsHandlingUpload={setIsHandlingUpload}
+        />
-          />
+      )}
-        )}
+    </Box>
-      </Box>
-    </ImageUploaderTriggerContext.Provider>
   );
 };
 

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

@@ -1,6 +1,5 @@
 import { Flex, Heading, Icon } from '@chakra-ui/react';
-import { ImageUploaderTriggerContext } from 'app/contexts/ImageUploaderTriggerContext';
+import useImageUploader from 'common/hooks/useImageUploader';
-import { useContext } from 'react';
 import { FaUpload } from 'react-icons/fa';
 
 type ImageUploaderButtonProps = {
@@ -9,11 +8,7 @@ type ImageUploaderButtonProps = {
 
 const ImageUploaderButton = (props: ImageUploaderButtonProps) => {
   const { styleClass } = props;
-  const open = useContext(ImageUploaderTriggerContext);
+  const { openUploader } = useImageUploader();
-
-  const handleClickUpload = () => {
-    open && open();
-  };
 
   return (
     <Flex
@@ -26,7 +21,7 @@ const ImageUploaderButton = (props: ImageUploaderButtonProps) => {
       className={styleClass}
     >
       <Flex
-        onClick={handleClickUpload}
+        onClick={openUploader}
         sx={{
           display: 'flex',
           flexDirection: 'column',

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

@@ -1,19 +1,18 @@
-import { ImageUploaderTriggerContext } from 'app/contexts/ImageUploaderTriggerContext';
-import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaUpload } from 'react-icons/fa';
 import IAIIconButton from './IAIIconButton';
+import useImageUploader from 'common/hooks/useImageUploader';
 
 const ImageUploaderIconButton = () => {
   const { t } = useTranslation();
-  const openImageUploader = useContext(ImageUploaderTriggerContext);
+  const { openUploader } = useImageUploader();
 
   return (
     <IAIIconButton
       aria-label={t('accessibility.uploadImage')}
       tooltip="Upload Image"
       icon={<FaUpload />}
-      onClick={openImageUploader || undefined}
+      onClick={openUploader}
     />
   );
 };

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

@@ -6,10 +6,12 @@ import { FaUndo, FaUpload } from 'react-icons/fa';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useCallback } from 'react';
 import { clearInitialImage } from 'features/parameters/store/generationSlice';
+import useImageUploader from 'common/hooks/useImageUploader';
 
 const InitialImageButtons = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
+  const { openUploader } = useImageUploader();
 
   const handleResetInitialImage = useCallback(() => {
     dispatch(clearInitialImage());
@@ -27,7 +29,11 @@ const InitialImageButtons = () => {
           aria-label={t('accessibility.reset')}
           onClick={handleResetInitialImage}
         />
-        <IAIIconButton icon={<FaUpload />} aria-label={t('common.upload')} />
+        <IAIIconButton
+          icon={<FaUpload />}
+          onClick={openUploader}
+          aria-label={t('common.upload')}
+        />
       </ButtonGroup>
     </Flex>
   );

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

@@ -24,7 +24,6 @@ const Loading = () => {
         height="24px !important"
         right="1.5rem"
         bottom="1.5rem"
-        speed="1.2s"
       />
     </Flex>
   );

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>
-  );
-};

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>
-  );
-}

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;

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;

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

@@ -1,13 +1,22 @@
-let openFunction: () => void;
+import { useCallback } from 'react';
+
+let openUploader = () => {
+  return;
+};
 
 const useImageUploader = () => {
-  return {
+  const setOpenUploaderFunction = useCallback(
-    setOpenUploader: (open?: () => void) => {
+    (openUploaderFunction?: () => void) => {
-      if (open) {
+      if (openUploaderFunction) {
-        openFunction = open;
+        openUploader = openUploaderFunction;
       }
     },
-    openUploader: openFunction,
+    []
+  );
+
+  return {
+    setOpenUploaderFunction,
+    openUploader,
   };
 };
 

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]);
-}

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;

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;

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;

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;

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>

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>

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>

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>

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 generateMask 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 } = generateMask(
-      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,
-  };
-};

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

@@ -0,0 +1,5 @@
+import { ClipboardEvent } from 'react';
+
+export const stopPastePropagation = (e: ClipboardEvent) => {
+  e.stopPropagation();
+};

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

@@ -81,7 +81,7 @@ const IAICanvasResizer = () => {
         height: '100%',
       }}
     >
-      <Spinner thickness="2px" speed="1s" size="xl" />
+      <Spinner thickness="2px" size="xl" />
     </Flex>
   );
 };

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';
@@ -44,6 +43,12 @@ import IAICanvasRedoButton from './IAICanvasRedoButton';
 import IAICanvasSettingsButtonPopover from './IAICanvasSettingsButtonPopover';
 import IAICanvasToolChooserOptions from './IAICanvasToolChooserOptions';
 import IAICanvasUndoButton from './IAICanvasUndoButton';
+import {
+  canvasCopiedToClipboard,
+  canvasDownloadedAsImage,
+  canvasMerged,
+  canvasSavedToGallery,
+} from 'features/canvas/store/actions';
 
 export const selector = createSelector(
   [systemSelector, canvasSelector, isStagingSelector],
@@ -70,14 +75,8 @@ export const selector = createSelector(
 
 const IAICanvasToolbar = () => {
   const dispatch = useAppDispatch();
-  const {
+  const { isProcessing, isStaging, isMaskEnabled, layer, tool } =
-    isProcessing,
+    useAppSelector(selector);
-    isStaging,
-    isMaskEnabled,
-    layer,
-    tool,
-    shouldCropToBoundingBoxOnSave,
-  } = useAppSelector(selector);
   const canvasBaseLayer = getCanvasBaseLayer();
 
   const { t } = useTranslation();
@@ -183,42 +182,19 @@ const IAICanvasToolbar = () => {
   };
 
   const handleMergeVisible = () => {
-    dispatch(
+    dispatch(canvasMerged());
-      mergeAndUploadCanvas({
-        cropVisible: false,
-        shouldSetAsInitialImage: true,
-      })
-    );
   };
 
   const handleSaveToGallery = () => {
-    dispatch(
+    dispatch(canvasSavedToGallery());
-      mergeAndUploadCanvas({
-        cropVisible: shouldCropToBoundingBoxOnSave ? false : true,
-        cropToBoundingBox: shouldCropToBoundingBoxOnSave,
-        shouldSaveToGallery: true,
-      })
-    );
   };
 
   const handleCopyImageToClipboard = () => {
-    dispatch(
+    dispatch(canvasCopiedToClipboard());
-      mergeAndUploadCanvas({
-        cropVisible: shouldCropToBoundingBoxOnSave ? false : true,
-        cropToBoundingBox: shouldCropToBoundingBoxOnSave,
-        shouldCopy: true,
-      })
-    );
   };
 
   const handleDownloadAsImage = () => {
-    dispatch(
+    dispatch(canvasDownloadedAsImage());
-      mergeAndUploadCanvas({
-        cropVisible: shouldCropToBoundingBoxOnSave ? false : true,
-        cropToBoundingBox: shouldCropToBoundingBoxOnSave,
-        shouldDownload: true,
-      })
-    );
   };
 
   const handleChangeLayer = (e: ChangeEvent<HTMLSelectElement>) => {

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

@@ -0,0 +1,13 @@
+import { createAction } from '@reduxjs/toolkit';
+
+export const canvasSavedToGallery = createAction('canvas/canvasSavedToGallery');
+
+export const canvasCopiedToClipboard = createAction(
+  'canvas/canvasCopiedToClipboard'
+);
+
+export const canvasDownloadedAsImage = createAction(
+  'canvas/canvasDownloadedAsImage'
+);
+
+export const canvasMerged = createAction('canvas/canvasMerged');

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));
-  };

invokeai/frontend/web/src/features/canvas/util/blobToDataURL.ts

@@ -0,0 +1,9 @@
+export const blobToDataURL = (blob: Blob): Promise<string> => {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (_e) => resolve(reader.result as string);
+    reader.onerror = (_e) => reject(reader.error);
+    reader.onabort = (_e) => reject(new Error('Read aborted'));
+    reader.readAsDataURL(blob);
+  });
+};

invokeai/frontend/web/src/features/canvas/util/calculateCoordinates.ts

@@ -9,8 +9,12 @@ const calculateCoordinates = (
   contentHeight: number,
   scale: number
 ): Vector2d => {
-  const x = containerWidth / 2 - (containerX + contentWidth / 2) * scale;
+  const x = Math.floor(
-  const y = containerHeight / 2 - (containerY + contentHeight / 2) * scale;
+    containerWidth / 2 - (containerX + contentWidth / 2) * scale
+  );
+  const y = Math.floor(
+    containerHeight / 2 - (containerY + contentHeight / 2) * scale
+  );
   return { x, y };
 };
 

invokeai/frontend/web/src/features/canvas/util/copyBlobToClipboard.ts

@@ -0,0 +1,10 @@
+/**
+ * Copies a blob to the clipboard by calling navigator.clipboard.write().
+ */
+export const copyBlobToClipboard = (blob: Blob) => {
+  navigator.clipboard.write([
+    new ClipboardItem({
+      [blob.type]: blob,
+    }),
+  ]);
+};

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;

invokeai/frontend/web/src/features/canvas/util/createMaskStage.ts

@@ -0,0 +1,61 @@
+import { CanvasMaskLine } from 'features/canvas/store/canvasTypes';
+import Konva from 'konva';
+import { IRect } from 'konva/lib/types';
+
+/**
+ * Creates a stage from array of mask objects.
+ * We cannot just convert the mask layer to a blob because it uses a texture with transparent areas.
+ * So instead we create a new stage with the mask layer and composite it onto a white background.
+ */
+const createMaskStage = async (
+  lines: CanvasMaskLine[],
+  boundingBox: IRect
+): Promise<Konva.Stage> => {
+  // create an offscreen canvas and add the mask to it
+  const { width, height } = boundingBox;
+
+  const offscreenContainer = document.createElement('div');
+
+  const maskStage = new Konva.Stage({
+    container: offscreenContainer,
+    width: width,
+    height: height,
+  });
+
+  const baseLayer = new Konva.Layer();
+  const maskLayer = new Konva.Layer();
+
+  // composite the image onto the mask layer
+  baseLayer.add(
+    new Konva.Rect({
+      ...boundingBox,
+      fill: 'white',
+    })
+  );
+
+  lines.forEach((line) =>
+    maskLayer.add(
+      new Konva.Line({
+        points: line.points,
+        stroke: 'black',
+        strokeWidth: line.strokeWidth * 2,
+        tension: 0,
+        lineCap: 'round',
+        lineJoin: 'round',
+        shadowForStrokeEnabled: false,
+        globalCompositeOperation:
+          line.tool === 'brush' ? 'source-over' : 'destination-out',
+      })
+    )
+  );
+
+  maskStage.add(baseLayer);
+  maskStage.add(maskLayer);
+
+  // you'd think we can't do this until we finish with the maskStage, but we can
+  offscreenContainer.remove();
+
+  return maskStage;
+};
+
+export default createMaskStage;

invokeai/frontend/web/src/features/canvas/util/downloadBlob.ts

@@ -0,0 +1,11 @@
+/** Download a blob as a file */
+export const downloadBlob = (blob: Blob, fileName: string) => {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = fileName;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  a.remove();
+};

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;

invokeai/frontend/web/src/features/canvas/util/generateMask.ts

@@ -1,170 +0,0 @@
-// import { CanvasMaskLine } from 'features/canvas/store/canvasTypes';
-// import Konva from 'konva';
-// import { Stage } from 'konva/lib/Stage';
-// import { IRect } from 'konva/lib/types';
-
-// /**
-//  * Generating a mask image from InpaintingCanvas.tsx is not as simple
-//  * as calling toDataURL() on the canvas, because the mask may be represented
-//  * by colored lines or transparency, or the user may have inverted the mask
-//  * display.
-//  *
-//  * So we need to regenerate the mask image by creating an offscreen canvas,
-//  * drawing the mask and compositing everything correctly to output a valid
-//  * mask image.
-//  */
-// export const getStageDataURL = (stage: Stage, boundingBox: IRect): string => {
-//   // create an offscreen canvas and add the mask to it
-//   // const { stage, offscreenContainer } = buildMaskStage(lines, boundingBox);
-
-//   const dataURL = stage.toDataURL({ ...boundingBox });
-
-//   // const imageData = stage
-//   //   .toCanvas()
-//   //   .getContext('2d')
-//   //   ?.getImageData(
-//   //     boundingBox.x,
-//   //     boundingBox.y,
-//   //     boundingBox.width,
-//   //     boundingBox.height
-//   //   );
-
-//   // offscreenContainer.remove();
-
-//   // return { dataURL, imageData };
-
-//   return dataURL;
-// };
-
-// export const getStageImageData = (
-//   stage: Stage,
-//   boundingBox: IRect
-// ): ImageData | undefined => {
-//   const imageData = stage
-//     .toCanvas()
-//     .getContext('2d')
-//     ?.getImageData(
-//       boundingBox.x,
-//       boundingBox.y,
-//       boundingBox.width,
-//       boundingBox.height
-//     );
-
-//   return imageData;
-// };
-
-// export const buildMaskStage = (
-//   lines: CanvasMaskLine[],
-//   boundingBox: IRect
-// ): { stage: Stage; offscreenContainer: HTMLDivElement } => {
-//   // create an offscreen canvas and add the mask to it
-//   const { width, height } = boundingBox;
-
-//   const offscreenContainer = document.createElement('div');
-
-//   const stage = new Konva.Stage({
-//     container: offscreenContainer,
-//     width: width,
-//     height: height,
-//   });
-
-//   const baseLayer = new Konva.Layer();
-//   const maskLayer = new Konva.Layer();
-
-//   // composite the image onto the mask layer
-//   baseLayer.add(
-//     new Konva.Rect({
-//       ...boundingBox,
-//       fill: 'white',
-//     })
-//   );
-
-//   lines.forEach((line) =>
-//     maskLayer.add(
-//       new Konva.Line({
-//         points: line.points,
-//         stroke: 'black',
-//         strokeWidth: line.strokeWidth * 2,
-//         tension: 0,
-//         lineCap: 'round',
-//         lineJoin: 'round',
-//         shadowForStrokeEnabled: false,
-//         globalCompositeOperation:
-//           line.tool === 'brush' ? 'source-over' : 'destination-out',
-//       })
-//     )
-//   );
-
-//   stage.add(baseLayer);
-//   stage.add(maskLayer);
-
-//   return { stage, offscreenContainer };
-// };
-
-import { CanvasMaskLine } from 'features/canvas/store/canvasTypes';
-import Konva from 'konva';
-import { IRect } from 'konva/lib/types';
-import { canvasToBlob } from './canvasToBlob';
-
-/**
- * Generating a mask image from InpaintingCanvas.tsx is not as simple
- * as calling toDataURL() on the canvas, because the mask may be represented
- * by colored lines or transparency, or the user may have inverted the mask
- * display.
- *
- * So we need to regenerate the mask image by creating an offscreen canvas,
- * drawing the mask and compositing everything correctly to output a valid
- * mask image.
- */
-const generateMask = async (lines: CanvasMaskLine[], boundingBox: IRect) => {
-  // create an offscreen canvas and add the mask to it
-  const { width, height } = boundingBox;
-
-  const offscreenContainer = document.createElement('div');
-
-  const stage = new Konva.Stage({
-    container: offscreenContainer,
-    width: width,
-    height: height,
-  });
-
-  const baseLayer = new Konva.Layer();
-  const maskLayer = new Konva.Layer();
-
-  // composite the image onto the mask layer
-  baseLayer.add(
-    new Konva.Rect({
-      ...boundingBox,
-      fill: 'white',
-    })
-  );
-
-  lines.forEach((line) =>
-    maskLayer.add(
-      new Konva.Line({
-        points: line.points,
-        stroke: 'black',
-        strokeWidth: line.strokeWidth * 2,
-        tension: 0,
-        lineCap: 'round',
-        lineJoin: 'round',
-        shadowForStrokeEnabled: false,
-        globalCompositeOperation:
-          line.tool === 'brush' ? 'source-over' : 'destination-out',
-      })
-    )
-  );
-
-  stage.add(baseLayer);
-  stage.add(maskLayer);
-
-  const maskDataURL = stage.toDataURL(boundingBox);
-
-  const maskBlob = await canvasToBlob(stage.toCanvas(boundingBox));
-
-  offscreenContainer.remove();
-
-  return { maskDataURL, maskBlob };
-};
-
-export default generateMask;

invokeai/frontend/web/src/features/canvas/util/getBaseLayerBlob.ts

@@ -0,0 +1,38 @@
+import { getCanvasBaseLayer } from './konvaInstanceProvider';
+import { RootState } from 'app/store/store';
+import { konvaNodeToBlob } from './konvaNodeToBlob';
+
+export const getBaseLayerBlob = async (
+  state: RootState,
+  withoutBoundingBox?: boolean
+) => {
+  const canvasBaseLayer = getCanvasBaseLayer();
+
+  if (!canvasBaseLayer) {
+    return;
+  }
+
+  const {
+    shouldCropToBoundingBoxOnSave,
+    boundingBoxCoordinates,
+    boundingBoxDimensions,
+  } = state.canvas;
+
+  const clonedBaseLayer = canvasBaseLayer.clone();
+
+  clonedBaseLayer.scale({ x: 1, y: 1 });
+
+  const absPos = clonedBaseLayer.getAbsolutePosition();
+
+  const boundingBox =
+    shouldCropToBoundingBoxOnSave && !withoutBoundingBox
+      ? {
+          x: boundingBoxCoordinates.x + absPos.x,
+          y: boundingBoxCoordinates.y + absPos.y,
+          width: boundingBoxDimensions.width,
+          height: boundingBoxDimensions.height,
+        }
+      : clonedBaseLayer.getClientRect();
+
+  return konvaNodeToBlob(clonedBaseLayer, boundingBox);
+};

invokeai/frontend/web/src/features/canvas/util/getCanvasData.ts

@@ -2,17 +2,15 @@ import { RootState } from 'app/store/store';
 import { getCanvasBaseLayer, getCanvasStage } from './konvaInstanceProvider';
 import { isCanvasMaskLine } from '../store/canvasTypes';
 import { log } from 'app/logging/useLogger';
-import {
+import createMaskStage from './createMaskStage';
-  areAnyPixelsBlack,
+import { konvaNodeToImageData } from './konvaNodeToImageData';
-  getImageDataTransparency,
+import { konvaNodeToBlob } from './konvaNodeToBlob';
-} from 'common/util/arrayBuffer';
-import openBase64ImageInTab from 'common/util/openBase64ImageInTab';
-import generateMask from './generateMask';
-import { dataURLToImageData } from './dataURLToImageData';
-import { canvasToBlob } from './canvasToBlob';
 
 const moduleLog = log.child({ namespace: 'getCanvasDataURLs' });
 
+/**
+ * Gets Blob and ImageData objects for the base and mask layers
+ */
 export const getCanvasData = async (state: RootState) => {
   const canvasBaseLayer = getCanvasBaseLayer();
   const canvasStage = getCanvasStage();
@@ -26,11 +24,7 @@ export const getCanvasData = async (state: RootState) => {
     layerState: { objects },
     boundingBoxCoordinates,
     boundingBoxDimensions,
-    stageScale,
     isMaskEnabled,
-    shouldPreserveMaskedArea,
-    boundingBoxScaleMethod: boundingBoxScale,
-    scaledBoundingBoxDimensions,
   } = state.canvas;
 
   const boundingBox = {
@@ -38,22 +32,14 @@ export const getCanvasData = async (state: RootState) => {
     ...boundingBoxDimensions,
   };
 
-  // generationParameters.fit = false;
+  // Clone the base layer so we don't affect the visible base layer
+  const clonedBaseLayer = canvasBaseLayer.clone();
 
-  // generationParameters.strength = img2imgStrength;
+  // Scale it to 100% so we get full resolution
+  clonedBaseLayer.scale({ x: 1, y: 1 });
 
-  // generationParameters.invert_mask = shouldPreserveMaskedArea;
+  // absolute position is needed to get the bounding box coords relative to the base layer
-
+  const absPos = clonedBaseLayer.getAbsolutePosition();
-  // generationParameters.bounding_box = boundingBox;
-
-  const tempScale = canvasBaseLayer.scale();
-
-  canvasBaseLayer.scale({
-    x: 1 / stageScale,
-    y: 1 / stageScale,
-  });
-
-  const absPos = canvasBaseLayer.getAbsolutePosition();
 
   const offsetBoundingBox = {
     x: boundingBox.x + absPos.x,
@@ -62,67 +48,25 @@ export const getCanvasData = async (state: RootState) => {
     height: boundingBox.height,
   };
 
-  const baseDataURL = canvasBaseLayer.toDataURL(offsetBoundingBox);
+  // For the base layer, use the offset boundingBox
-  const baseBlob = await canvasToBlob(
+  const baseBlob = await konvaNodeToBlob(clonedBaseLayer, offsetBoundingBox);
-    canvasBaseLayer.toCanvas(offsetBoundingBox)
+  const baseImageData = await konvaNodeToImageData(
+    clonedBaseLayer,
+    offsetBoundingBox
   );
 
-  canvasBaseLayer.scale(tempScale);
+  // For the mask layer, use the normal boundingBox
-
+  const maskStage = await createMaskStage(
-  const { maskDataURL, maskBlob } = await generateMask(
+    isMaskEnabled ? objects.filter(isCanvasMaskLine) : [], // only include mask lines, and only if mask is enabled
-    isMaskEnabled ? objects.filter(isCanvasMaskLine) : [],
     boundingBox
   );
-
+  const maskBlob = await konvaNodeToBlob(maskStage, boundingBox);
-  const baseImageData = await dataURLToImageData(
+  const maskImageData = await konvaNodeToImageData(maskStage, boundingBox);
-    baseDataURL,
-    boundingBox.width,
-    boundingBox.height
-  );
-
-  const maskImageData = await dataURLToImageData(
-    maskDataURL,
-    boundingBox.width,
-    boundingBox.height
-  );
-
-  const {
-    isPartiallyTransparent: baseIsPartiallyTransparent,
-    isFullyTransparent: baseIsFullyTransparent,
-  } = getImageDataTransparency(baseImageData.data);
-
-  const doesMaskHaveBlackPixels = areAnyPixelsBlack(maskImageData.data);
-
-  if (state.system.enableImageDebugging) {
-    openBase64ImageInTab([
-      { base64: maskDataURL, caption: 'mask b64' },
-      { base64: baseDataURL, caption: 'image b64' },
-    ]);
-  }
-
-  // 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;
 
   return {
-    baseDataURL,
     baseBlob,
-    maskDataURL,
+    baseImageData,
     maskBlob,
-    baseIsPartiallyTransparent,
+    maskImageData,
-    baseIsFullyTransparent,
-    doesMaskHaveBlackPixels,
   };
 };

invokeai/frontend/web/src/features/canvas/util/getCanvasGenerationMode.ts

@@ -0,0 +1,31 @@
+import {
+  areAnyPixelsBlack,
+  getImageDataTransparency,
+} from 'common/util/arrayBuffer';
+
+export const getCanvasGenerationMode = (
+  baseImageData: ImageData,
+  maskImageData: ImageData
+) => {
+  const {
+    isPartiallyTransparent: baseIsPartiallyTransparent,
+    isFullyTransparent: baseIsFullyTransparent,
+  } = getImageDataTransparency(baseImageData.data);
+
+  // check mask for black
+  const doesMaskHaveBlackPixels = areAnyPixelsBlack(maskImageData.data);
+
+  if (baseIsPartiallyTransparent) {
+    if (baseIsFullyTransparent) {
+      return 'txt2img';
+    }
+
+    return 'outpaint';
+  } else {
+    if (doesMaskHaveBlackPixels) {
+      return 'inpaint';
+    }
+
+    return 'img2img';
+  }
+};

invokeai/frontend/web/src/features/canvas/util/konvaNodeToBlob.ts

@@ -0,0 +1,16 @@
+import Konva from 'konva';
+import { IRect } from 'konva/lib/types';
+import { canvasToBlob } from './canvasToBlob';
+
+/**
+ * Converts a Konva node to a Blob
+ * @param node - The Konva node to convert to a Blob
+ * @param boundingBox - The bounding box to crop to
+ * @returns A Promise that resolves with Blob of the node cropped to the bounding box
+ */
+export const konvaNodeToBlob = async (
+  node: Konva.Node,
+  boundingBox: IRect
+): Promise<Blob> => {
+  return await canvasToBlob(node.toCanvas(boundingBox));
+};

invokeai/frontend/web/src/features/canvas/util/konvaNodeToDataURL.ts

@@ -0,0 +1,16 @@
+import Konva from 'konva';
+import { IRect } from 'konva/lib/types';
+
+/**
+ * Converts a Konva node to a dataURL
+ * @param node - The Konva node to convert to a dataURL
+ * @param boundingBox - The bounding box to crop to
+ * @returns A dataURL of the node cropped to the bounding box
+ */
+export const konvaNodeToDataURL = (
+  node: Konva.Node,
+  boundingBox: IRect
+): string => {
+  // get a dataURL of the bbox'd region
+  return node.toDataURL(boundingBox);
+};

invokeai/frontend/web/src/features/canvas/util/konvaNodeToImageData.ts

@@ -0,0 +1,23 @@
+import Konva from 'konva';
+import { IRect } from 'konva/lib/types';
+import { dataURLToImageData } from './dataURLToImageData';
+
+/**
+ * Converts a Konva node to an ImageData object
+ * @param node - The Konva node to convert to an ImageData object
+ * @param boundingBox - The bounding box to crop to
+ * @returns A Promise that resolves with ImageData object of the node cropped to the bounding box
+ */
+export const konvaNodeToImageData = async (
+  node: Konva.Node,
+  boundingBox: IRect
+): Promise<ImageData> => {
+  // get a dataURL of the bbox'd region
+  const dataURL = node.toDataURL(boundingBox);
+
+  return await dataURLToImageData(
+    dataURL,
+    boundingBox.width,
+    boundingBox.height
+  );
+};

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;

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

@@ -5,15 +5,8 @@ import {
   ButtonGroup,
   Flex,
   FlexProps,
-  IconButton,
   Link,
-  Menu,
-  MenuButton,
-  MenuItemOption,
-  MenuList,
-  MenuOptionGroup,
   useDisclosure,
-  useToast,
 } from '@chakra-ui/react';
 // import { runESRGAN, runFacetool } from 'app/socketio/actions';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
@@ -70,6 +63,7 @@ import FaceRestoreSettings from 'features/parameters/components/Parameters/FaceR
 import UpscaleSettings from 'features/parameters/components/Parameters/Upscale/UpscaleSettings';
 import { allParametersSet } from 'features/parameters/store/generationSlice';
 import DeleteImageButton from './ImageActionButtons/DeleteImageButton';
+import { useAppToaster } from 'app/components/Toaster';
 
 const currentImageButtonsSelector = createSelector(
   [
@@ -164,7 +158,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
     onClose: onDeleteDialogClose,
   } = useDisclosure();
 
-  const toast = useToast();
+  const toaster = useAppToaster();
   const { t } = useTranslation();
 
   const { recallPrompt, recallSeed, recallAllParameters } = useParameters();
@@ -213,7 +207,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
     const url = getImageUrl();
 
     if (!url) {
-      toast({
+      toaster({
         title: t('toast.problemCopyingImageLink'),
         status: 'error',
         duration: 2500,
@@ -224,14 +218,14 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
     }
 
     navigator.clipboard.writeText(url).then(() => {
-      toast({
+      toaster({
         title: t('toast.imageLinkCopied'),
         status: 'success',
         duration: 2500,
         isClosable: true,
       });
     });
-  }, [toast, shouldTransformUrls, getUrl, t, image]);
+  }, [toaster, shouldTransformUrls, getUrl, t, image]);
 
   const handlePreviewVisibility = useCallback(() => {
     dispatch(setShouldHidePreview(!shouldHidePreview));
@@ -346,13 +340,13 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
       dispatch(setActiveTab('unifiedCanvas'));
     }
 
-    toast({
+    toaster({
       title: t('toast.sentToUnifiedCanvas'),
       status: 'success',
       duration: 2500,
       isClosable: true,
     });
-  }, [image, isLightboxOpen, dispatch, activeTabName, toast, t]);
+  }, [image, isLightboxOpen, dispatch, activeTabName, toaster, t]);
 
   useHotkeys(
     'i',
@@ -360,7 +354,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
       if (image) {
         handleClickShowImageDetails();
       } else {
-        toast({
+        toaster({
           title: t('toast.metadataLoadFailed'),
           status: 'error',
           duration: 2500,
@@ -368,7 +362,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
         });
       }
     },
-    [image, shouldShowImageDetails]
+    [image, shouldShowImageDetails, toaster]
   );
 
   const handleDelete = useCallback(() => {

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

@@ -62,7 +62,10 @@ const GalleryProgressImage = () => {
           imageRendering: shouldAntialiasProgressImage ? 'auto' : 'pixelated',
         }}
       />
-      <Spinner sx={{ position: 'absolute', top: 1, right: 1, opacity: 0.7 }} />
+      <Spinner
+        sx={{ position: 'absolute', top: 1, right: 1, opacity: 0.7 }}
+        speed="1.2s"
+      />
     </Flex>
   );
 };

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

@@ -6,7 +6,6 @@ import {
   MenuItem,
   MenuList,
   useDisclosure,
-  useToast,
 } from '@chakra-ui/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { imageSelected } from 'features/gallery/store/gallerySlice';
@@ -35,6 +34,7 @@ import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { useParameters } from 'features/parameters/hooks/useParameters';
 import { initialImageSelected } from 'features/parameters/store/actions';
 import { requestedImageDeletion } from '../store/actions';
+import { useAppToaster } from 'app/components/Toaster';
 
 export const selector = createSelector(
   [gallerySelector, systemSelector, lightboxSelector, activeTabNameSelector],
@@ -101,7 +101,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
 
   const [isHovered, setIsHovered] = useState<boolean>(false);
 
-  const toast = useToast();
+  const toaster = useAppToaster();
 
   const { t } = useTranslation();
 
@@ -176,7 +176,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
       dispatch(setActiveTab('unifiedCanvas'));
     }
 
-    toast({
+    toaster({
       title: t('toast.sentToUnifiedCanvas'),
       status: 'success',
       duration: 2500,

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 {};

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;

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

@@ -13,10 +13,9 @@ import { nodeAdded } from '../store/nodesSlice';
 import { map } from 'lodash-es';
 import { RootState } from 'app/store/store';
 import { useBuildInvocation } from '../hooks/useBuildInvocation';
-import { addToast } from 'features/system/store/systemSlice';
-import { makeToast } from 'features/system/hooks/useToastWatcher';
 import { AnyInvocationType } from 'services/events/types';
 import IAIIconButton from 'common/components/IAIIconButton';
+import { useAppToaster } from 'app/components/Toaster';
 
 const AddNodeMenu = () => {
   const dispatch = useAppDispatch();
@@ -27,22 +26,23 @@ const AddNodeMenu = () => {
 
   const buildInvocation = useBuildInvocation();
 
+  const toaster = useAppToaster();
+
   const addNode = useCallback(
     (nodeType: AnyInvocationType) => {
       const invocation = buildInvocation(nodeType);
 
       if (!invocation) {
-        const toast = makeToast({
+        toaster({
           status: 'error',
           title: `Unknown Invocation type ${nodeType}`,
         });
-        dispatch(addToast(toast));
         return;
       }
 
       dispatch(nodeAdded(invocation));
     },
-    [dispatch, buildInvocation]
+    [dispatch, buildInvocation, toaster]
   );
 
   return (

invokeai/frontend/web/src/features/nodes/components/search/NodeSearch.tsx

@@ -16,11 +16,11 @@ import {
 import { Tooltip } from '@chakra-ui/tooltip';
 import { AnyInvocationType } from 'services/events/types';
 import { useBuildInvocation } from 'features/nodes/hooks/useBuildInvocation';
-import { makeToast } from 'features/system/hooks/useToastWatcher';
 import { addToast } from 'features/system/store/systemSlice';
 import { nodeAdded } from '../../store/nodesSlice';
 import Fuse from 'fuse.js';
 import { InvocationTemplate } from 'features/nodes/types/types';
+import { useAppToaster } from 'app/components/Toaster';
 
 interface NodeListItemProps {
   title: string;
@@ -63,6 +63,7 @@ const NodeSearch = () => {
 
   const buildInvocation = useBuildInvocation();
   const dispatch = useAppDispatch();
+  const toaster = useAppToaster();
 
   const [searchText, setSearchText] = useState<string>('');
   const [showNodeList, setShowNodeList] = useState<boolean>(false);
@@ -89,17 +90,16 @@ const NodeSearch = () => {
       const invocation = buildInvocation(nodeType);
 
       if (!invocation) {
-        const toast = makeToast({
+        toaster({
           status: 'error',
           title: `Unknown Invocation type ${nodeType}`,
         });
-        dispatch(addToast(toast));
         return;
       }
 
       dispatch(nodeAdded(invocation));
     },
-    [dispatch, buildInvocation]
+    [dispatch, buildInvocation, toaster]
   );
 
   const renderNodeList = () => {

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',
-      },
-    },
-  ],
-};

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
-);

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';
-  }
-};

invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasGraph.ts

@@ -13,8 +13,6 @@ 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 { getGenerationMode } from '../getGenerationMode';
 import { log } from 'app/logging/useLogger';
 import { buildInpaintNode } from '../nodeBuilders/buildInpaintNode';
 
@@ -44,8 +42,9 @@ const buildBaseNode = (
 /**
  * Builds the Canvas workflow graph and image blobs.
  */
-export const buildCanvasGraphAndBlobs = async (
+export const buildCanvasGraphComponents = async (
-  state: RootState
+  state: RootState,
+  generationMode: 'txt2img' | 'img2img' | 'inpaint' | 'outpaint'
 ): Promise<
   | {
       rangeNode: RangeInvocation | RandomRangeInvocation;
@@ -55,46 +54,9 @@ export const buildCanvasGraphAndBlobs = async (
         | ImageToImageInvocation
         | InpaintInvocation;
       edges: Edge[];
-      baseBlob: Blob;
-      maskBlob: Blob;
-      generationMode: 'txt2img' | 'img2img' | 'inpaint' | 'outpaint';
     }
   | undefined
 > => {
-  const c = await getCanvasData(state);
-
-  if (!c) {
-    moduleLog.error('Unable to create canvas graph');
-    return;
-  }
-
-  const {
-    baseBlob,
-    maskBlob,
-    baseIsPartiallyTransparent,
-    baseIsFullyTransparent,
-    doesMaskHaveBlackPixels,
-  } = c;
-
-  moduleLog.debug(
-    {
-      data: {
-        baseIsPartiallyTransparent,
-        baseIsFullyTransparent,
-        doesMaskHaveBlackPixels,
-      },
-    },
-    'Built canvas data'
-  );
-
-  const generationMode = getGenerationMode(
-    baseIsPartiallyTransparent,
-    baseIsFullyTransparent,
-    doesMaskHaveBlackPixels
-  );
-
-  moduleLog.debug(`Generation mode: ${generationMode}`);
-
   // The base node is a txt2img, img2img or inpaint node
   const baseNode = buildBaseNode(generationMode, state);
 
@@ -104,8 +66,14 @@ export const buildCanvasGraphAndBlobs = async (
   }
 
   if (baseNode.type === 'inpaint') {
-    const { seamSize, seamBlur, seamSteps, seamStrength, tileSize } =
+    const {
-      state.generation;
+      seamSize,
+      seamBlur,
+      seamSteps,
+      seamStrength,
+      tileSize,
+      infillMethod,
+    } = state.generation;
 
     // generationParameters.invert_mask = shouldPreserveMaskedArea;
     // if (boundingBoxScale !== 'none') {
@@ -117,7 +85,7 @@ export const buildCanvasGraphAndBlobs = async (
     baseNode.seam_strength = seamStrength;
     baseNode.seam_steps = seamSteps;
     baseNode.tile_size = tileSize;
-    // baseNode.infill_method = infillMethod;
+    baseNode.infill_method = infillMethod as InpaintInvocation['infill_method'];
     // baseNode.force_outpaint = false;
   }
 
@@ -134,8 +102,5 @@ export const buildCanvasGraphAndBlobs = async (
     iterateNode,
     baseNode,
     edges,
-    baseBlob,
-    maskBlob,
-    generationMode,
   };
 };

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamNegativeConditioning.tsx

@@ -1,6 +1,7 @@
-import { FormControl, Textarea } from '@chakra-ui/react';
+import { FormControl } from '@chakra-ui/react';
 import type { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAITextarea from 'common/components/IAITextarea';
 import { setNegativePrompt } from 'features/parameters/store/generationSlice';
 import { useTranslation } from 'react-i18next';
 
@@ -14,7 +15,7 @@ const ParamNegativeConditioning = () => {
 
   return (
     <FormControl>
-      <Textarea
+      <IAITextarea
         id="negativePrompt"
         name="negativePrompt"
         value={negativePrompt}

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx

@@ -1,4 +1,4 @@
-import { Box, FormControl, Textarea } from '@chakra-ui/react';
+import { Box, FormControl } from '@chakra-ui/react';
 import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { ChangeEvent, KeyboardEvent, useCallback, useRef } from 'react';
@@ -16,6 +16,7 @@ import { isEqual } from 'lodash-es';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { userInvoked } from 'app/store/actions';
+import IAITextarea from 'common/components/IAITextarea';
 
 const promptInputSelector = createSelector(
   [(state: RootState) => state.generation, activeTabNameSelector],
@@ -72,7 +73,7 @@ const ParamPositiveConditioning = () => {
       <FormControl
         isInvalid={prompt.length === 0 || Boolean(prompt.match(/^[\s\r\n]+$/))}
       >
-        <Textarea
+        <IAITextarea
           id="prompt"
           name="prompt"
           placeholder={t('parameters.promptPlaceholder')}

invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/ImageToImageSettings.tsx

@@ -1,20 +0,0 @@
-import { VStack } from '@chakra-ui/react';
-
-import ImageToImageFit from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageFit';
-import ImageToImageStrength from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageStrength';
-
-import { useTranslation } from 'react-i18next';
-import InitialImagePreview from './InitialImagePreview';
-import InitialImageButtons from 'common/components/ImageToImageButtons';
-
-export default function ImageToImageSettings() {
-  const { t } = useTranslation();
-  return (
-    <VStack gap={2} w="full" alignItems="stretch">
-      <InitialImageButtons />
-      <InitialImagePreview />
-      <ImageToImageStrength />
-      <ImageToImageFit />
-    </VStack>
-  );
-}

invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImageDisplay.tsx

@@ -1,6 +1,6 @@
 import { Flex } from '@chakra-ui/react';
 import InitialImagePreview from './InitialImagePreview';
-import InitialImageButtons from 'common/components/ImageToImageButtons';
+import InitialImageButtons from 'common/components/InitialImageButtons';
 
 const InitialImageDisplay = () => {
   return (

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);

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);

invokeai/frontend/web/src/features/parameters/hooks/useParameters.ts

@@ -1,4 +1,3 @@
-import { useToast } from '@chakra-ui/react';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { isFinite, isString } from 'lodash-es';
 import { useCallback } from 'react';
@@ -10,10 +9,11 @@ import { NUMPY_RAND_MAX } from 'app/constants';
 import { initialImageSelected } from '../store/actions';
 import { Image } from 'app/types/invokeai';
 import { setActiveTab } from 'features/ui/store/uiSlice';
+import { useAppToaster } from 'app/components/Toaster';
 
 export const useParameters = () => {
   const dispatch = useAppDispatch();
-  const toast = useToast();
+  const toaster = useAppToaster();
   const { t } = useTranslation();
   const setBothPrompts = useSetBothPrompts();
 
@@ -23,7 +23,7 @@ export const useParameters = () => {
   const recallPrompt = useCallback(
     (prompt: unknown) => {
       if (!isString(prompt)) {
-        toast({
+        toaster({
           title: t('toast.promptNotSet'),
           description: t('toast.promptNotSetDesc'),
           status: 'warning',
@@ -34,14 +34,14 @@ export const useParameters = () => {
       }
 
       setBothPrompts(prompt);
-      toast({
+      toaster({
         title: t('toast.promptSet'),
         status: 'info',
         duration: 2500,
         isClosable: true,
       });
     },
-    [t, toast, setBothPrompts]
+    [t, toaster, setBothPrompts]
   );
 
   /**
@@ -51,7 +51,7 @@ export const useParameters = () => {
     (seed: unknown) => {
       const s = Number(seed);
       if (!isFinite(s) || (isFinite(s) && !(s >= 0 && s <= NUMPY_RAND_MAX))) {
-        toast({
+        toaster({
           title: t('toast.seedNotSet'),
           description: t('toast.seedNotSetDesc'),
           status: 'warning',
@@ -62,14 +62,14 @@ export const useParameters = () => {
       }
 
       dispatch(setSeed(s));
-      toast({
+      toaster({
         title: t('toast.seedSet'),
         status: 'info',
         duration: 2500,
         isClosable: true,
       });
     },
-    [t, toast, dispatch]
+    [t, toaster, dispatch]
   );
 
   /**
@@ -78,7 +78,7 @@ export const useParameters = () => {
   const recallInitialImage = useCallback(
     async (image: unknown) => {
       if (!isImageField(image)) {
-        toast({
+        toaster({
           title: t('toast.initialImageNotSet'),
           description: t('toast.initialImageNotSetDesc'),
           status: 'warning',
@@ -91,14 +91,14 @@ export const useParameters = () => {
       dispatch(
         initialImageSelected({ name: image.image_name, type: image.image_type })
       );
-      toast({
+      toaster({
         title: t('toast.initialImageSet'),
         status: 'info',
         duration: 2500,
         isClosable: true,
       });
     },
-    [t, toast, dispatch]
+    [t, toaster, dispatch]
   );
 
   /**
@@ -123,14 +123,14 @@ export const useParameters = () => {
           dispatch(setActiveTab('txt2img'));
         }
 
-        toast({
+        toaster({
           title: t('toast.parametersSet'),
           status: 'success',
           duration: 2500,
           isClosable: true,
         });
       } else {
-        toast({
+        toaster({
           title: t('toast.parametersNotSet'),
           description: t('toast.parametersNotSetDesc'),
           status: 'error',
@@ -139,7 +139,7 @@ export const useParameters = () => {
         });
       }
     },
-    [t, toast, dispatch]
+    [t, toaster, dispatch]
   );
 
   return {

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;

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();

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;
-};