build(ui): treeshake lodash via lodash-es

invokeai/frontend/web/config/vite.app.config.ts

@@ -5,10 +5,36 @@ import eslint from 'vite-plugin-eslint';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
 export const appConfig: UserConfig = {
+  base: './',
   plugins: [
     react(),
     eslint(),
     tsconfigPaths(),
     visualizer() as unknown as PluginOption,
   ],
+  build: {
+    chunkSizeWarningLimit: 1500,
+  },
+  server: {
+    // Proxy HTTP requests to the flask server
+    proxy: {
+      // Proxy socket.io to the nodes socketio server
+      '/ws/socket.io': {
+        target: 'ws://127.0.0.1:9090',
+        ws: true,
+      },
+      // Proxy openapi schema definiton
+      '/openapi.json': {
+        target: 'http://127.0.0.1:9090/openapi.json',
+        rewrite: (path) => path.replace(/^\/openapi.json/, ''),
+        changeOrigin: true,
+      },
+      // proxy nodes api
+      '/api/v1': {
+        target: 'http://127.0.0.1:9090/api/v1',
+        rewrite: (path) => path.replace(/^\/api\/v1/, ''),
+        changeOrigin: true,
+      },
+    },
+  },
 };

invokeai/frontend/web/config/vite.common.config.ts

@@ -1,50 +0,0 @@
-import { UserConfig } from 'vite';
-
-export const commonConfig: UserConfig = {
-  base: './',
-  server: {
-    // Proxy HTTP requests to the flask server
-    proxy: {
-      '/outputs': {
-        target: 'http://127.0.0.1:9090/outputs',
-        changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/outputs/, ''),
-      },
-      '/upload': {
-        target: 'http://127.0.0.1:9090/upload',
-        changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/upload/, ''),
-      },
-      '/flaskwebgui-keep-server-alive': {
-        target: 'http://127.0.0.1:9090/flaskwebgui-keep-server-alive',
-        changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/flaskwebgui-keep-server-alive/, ''),
-      },
-      // Proxy socket.io to the flask-socketio server
-      '/socket.io': {
-        target: 'ws://127.0.0.1:9090',
-        ws: true,
-      },
-      // Proxy socket.io to the nodes socketio server
-      '/ws/socket.io': {
-        target: 'ws://127.0.0.1:9090',
-        ws: true,
-      },
-      // Proxy openapi schema definiton
-      '/openapi.json': {
-        target: 'http://127.0.0.1:9090/openapi.json',
-        rewrite: (path) => path.replace(/^\/openapi.json/, ''),
-        changeOrigin: true,
-      },
-      // proxy nodes api
-      '/api/v1': {
-        target: 'http://127.0.0.1:9090/api/v1',
-        rewrite: (path) => path.replace(/^\/api\/v1/, ''),
-        changeOrigin: true,
-      },
-    },
-  },
-  build: {
-    chunkSizeWarningLimit: 1500,
-  },
-};

invokeai/frontend/web/config/vite.package.config.ts

@@ -2,11 +2,12 @@ import react from '@vitejs/plugin-react-swc';
 import path from 'path';
 import { visualizer } from 'rollup-plugin-visualizer';
 import { PluginOption, UserConfig } from 'vite';
+import dts from 'vite-plugin-dts';
 import eslint from 'vite-plugin-eslint';
 import tsconfigPaths from 'vite-tsconfig-paths';
-import dts from 'vite-plugin-dts';
 
 export const packageConfig: UserConfig = {
+  base: './',
   plugins: [
     react(),
     eslint(),
@@ -17,6 +18,7 @@ export const packageConfig: UserConfig = {
     }),
   ],
   build: {
+    chunkSizeWarningLimit: 1500,
     lib: {
       entry: path.resolve(__dirname, '../src/index.ts'),
       name: 'InvokeAIUI',

invokeai/frontend/web/package.json

@@ -72,7 +72,7 @@
     "i18next-browser-languagedetector": "^7.0.1",
     "i18next-http-backend": "^2.2.0",
     "konva": "^9.0.1",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "patch-package": "^7.0.0",
     "re-resizable": "^6.9.9",
     "react": "^18.2.0",
@@ -101,7 +101,7 @@
   },
   "devDependencies": {
     "@types/dateformat": "^5.0.0",
-    "@types/lodash": "^4.14.194",
+    "@types/lodash-es": "^4.14.194",
     "@types/node": "^18.16.2",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.1",

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

@@ -4,7 +4,7 @@ import { initialCanvasImageSelector } from 'features/canvas/store/canvasSelector
 import { generationSelector } from 'features/parameters/store/generationSelectors';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 export const readinessSelector = createSelector(
   [

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

@@ -14,7 +14,7 @@ import {
   Tooltip,
   TooltipProps,
 } from '@chakra-ui/react';
-import { clamp } from 'lodash';
+import { clamp } from 'lodash-es';
 
 import { FocusEvent, memo, useEffect, useState } from 'react';
 

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

@@ -23,7 +23,7 @@ import {
   Tooltip,
   TooltipProps,
 } from '@chakra-ui/react';
-import { clamp } from 'lodash';
+import { clamp } from 'lodash-es';
 
 import { useTranslation } from 'react-i18next';
 import {

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

@@ -2,7 +2,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 import { isHotkeyPressed, useHotkeys } from 'react-hotkeys-hook';
 
 const globalHotkeysSelector = createSelector(

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

@@ -1,4 +1,4 @@
-import { forEach, size } from 'lodash';
+import { forEach, size } from 'lodash-es';
 import { ImageField, LatentsField } from 'services/api';
 
 const OBJECT_TYPESTRING = '[object Object]';

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

@@ -8,7 +8,7 @@ import {
 import Konva from 'konva';
 import { KonvaEventObject } from 'konva/lib/Node';
 import { Vector2d } from 'konva/lib/types';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { useCallback, useRef } from 'react';
 import { Layer, Stage } from 'react-konva';

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

@@ -1,6 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { Group, Rect } from 'react-konva';
 import { canvasSelector } from '../store/canvasSelectors';

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

@@ -5,7 +5,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { RootState } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
-import { isEqual, range } from 'lodash';
+import { isEqual, range } from 'lodash-es';
 
 import { ReactNode, useCallback, useLayoutEffect, useState } from 'react';
 import { Group, Line as KonvaLine } from 'react-konva';

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

@@ -4,7 +4,7 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { useGetUrl } from 'common/util/getUrl';
 import { GalleryState } from 'features/gallery/store/gallerySlice';
 import { ImageConfig } from 'konva/lib/shapes/Image';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { useEffect, useState } from 'react';
 import { Image as KonvaImage } from 'react-konva';

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

@@ -6,7 +6,7 @@ import { Rect } from 'react-konva';
 
 import { rgbaColorToString } from 'features/canvas/util/colorToString';
 import Konva from 'konva';
-import { isNumber } from 'lodash';
+import { isNumber } from 'lodash-es';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 export const canvasMaskCompositerSelector = createSelector(

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

@@ -2,7 +2,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import { GroupConfig } from 'konva/lib/Group';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { Group, Line } from 'react-konva';
 import { isCanvasMaskLine } from '../store/canvasTypes';

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

@@ -3,7 +3,7 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { useGetUrl } from 'common/util/getUrl';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import { rgbaColorToString } from 'features/canvas/util/colorToString';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { Group, Line, Rect } from 'react-konva';
 import {

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

@@ -3,7 +3,7 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { useGetUrl } from 'common/util/getUrl';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import { GroupConfig } from 'konva/lib/Group';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { Group, Rect } from 'react-konva';
 import IAICanvasImage from './IAICanvasImage';

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

@@ -12,7 +12,7 @@ import {
   setShouldShowStagingImage,
   setShouldShowStagingOutline,
 } from 'features/canvas/store/canvasSlice';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';

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

@@ -2,7 +2,7 @@ import { Box, Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { useTranslation } from 'react-i18next';
 import roundToHundreth from '../util/roundToHundreth';

invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx

@@ -3,7 +3,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import roundToHundreth from 'features/canvas/util/roundToHundreth';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { useTranslation } from 'react-i18next';
 

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

@@ -3,7 +3,7 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import { rgbaColorToString } from 'features/canvas/util/colorToString';
 import { GroupConfig } from 'konva/lib/Group';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { Circle, Group } from 'react-konva';
 import {

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx

@@ -16,7 +16,7 @@ import Konva from 'konva';
 import { GroupConfig } from 'konva/lib/Group';
 import { KonvaEventObject } from 'konva/lib/Node';
 import { Vector2d } from 'konva/lib/types';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Group, Rect, Transformer } from 'react-konva';

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx

@@ -18,7 +18,7 @@ import {
   setShouldPreserveMaskedArea,
 } from 'features/canvas/store/canvasSlice';
 import { rgbaColorToString } from 'features/canvas/util/colorToString';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx

@@ -9,7 +9,7 @@ import { FaRedo } from 'react-icons/fa';
 import { redo } from 'features/canvas/store/canvasSlice';
 import { systemSelector } from 'features/system/store/systemSelectors';
 
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 import { useTranslation } from 'react-i18next';
 
 const canvasRedoSelector = createSelector(

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx

@@ -16,7 +16,7 @@ import {
   setShouldSnapToGrid,
 } from 'features/canvas/store/canvasSlice';
 import EmptyTempFolderButtonModal from 'features/system/components/ClearTempFolderButtonModal';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { ChangeEvent } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx

@@ -17,7 +17,7 @@ import {
   setTool,
 } from 'features/canvas/store/canvasSlice';
 import { systemSelector } from 'features/system/store/systemSelectors';
-import { clamp, isEqual } from 'lodash';
+import { clamp, isEqual } from 'lodash-es';
 
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';

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

@@ -24,7 +24,7 @@ import {
 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';
+import { isEqual } from 'lodash-es';
 
 import { ChangeEvent } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx

@@ -9,7 +9,7 @@ import { undo } from 'features/canvas/store/canvasSlice';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 import { useTranslation } from 'react-i18next';
 
 const canvasUndoSelector = createSelector(

invokeai/frontend/web/src/features/canvas/hooks/useCanvasDragMove.ts

@@ -9,7 +9,7 @@ import {
   setStageCoordinates,
 } from 'features/canvas/store/canvasSlice';
 import { KonvaEventObject } from 'konva/lib/Node';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { useCallback } from 'react';
 

invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts

@@ -13,7 +13,7 @@ import {
   setTool,
 } from 'features/canvas/store/canvasSlice';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { useRef } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';

invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseDown.ts

@@ -12,7 +12,7 @@ import {
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import Konva from 'konva';
 import { KonvaEventObject } from 'konva/lib/Node';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { MutableRefObject, useCallback } from 'react';
 import getScaledCursorPosition from '../util/getScaledCursorPosition';

invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseMove.ts

@@ -11,7 +11,7 @@ import {
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import Konva from 'konva';
 import { Vector2d } from 'konva/lib/types';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { MutableRefObject, useCallback } from 'react';
 import getScaledCursorPosition from '../util/getScaledCursorPosition';

invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseUp.ts

@@ -12,7 +12,7 @@ import {
 } from 'features/canvas/store/canvasSlice';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import Konva from 'konva';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { MutableRefObject, useCallback } from 'react';
 import getScaledCursorPosition from '../util/getScaledCursorPosition';

invokeai/frontend/web/src/features/canvas/hooks/useCanvasZoom.ts

@@ -7,7 +7,7 @@ import {
 } from 'features/canvas/store/canvasSlice';
 import Konva from 'konva';
 import { KonvaEventObject } from 'konva/lib/Node';
-import { clamp, isEqual } from 'lodash';
+import { clamp, isEqual } from 'lodash-es';
 
 import { MutableRefObject, useCallback } from 'react';
 import {

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

@@ -6,7 +6,7 @@ import {
   roundToMultiple,
 } from 'common/util/roundDownToMultiple';
 import { IRect, Vector2d } from 'konva/lib/types';
-import { clamp, cloneDeep } from 'lodash';
+import { clamp, cloneDeep } from 'lodash-es';
 //
 import { RgbaColor } from 'react-colorful';
 import calculateCoordinates from '../util/calculateCoordinates';

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

@@ -1,6 +1,6 @@
 import { AppDispatch, AppGetState } from 'app/store/store';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import { debounce } from 'lodash';
+import { debounce } from 'lodash-es';
 import { setDoesCanvasNeedScaling } from '../canvasSlice';
 
 const debouncedCanvasScale = debounce((dispatch: AppDispatch) => {

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

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import {
   ButtonGroup,

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

@@ -2,7 +2,7 @@ import { Flex, Icon } 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';
+import { isEqual } from 'lodash-es';
 
 import { MdPhoto } from 'react-icons/md';
 import { selectedImageSelector } from '../store/gallerySelectors';

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

@@ -4,7 +4,7 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { useGetUrl } from 'common/util/getUrl';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import { uiSelector } from 'features/ui/store/uiSelectors';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { selectedImageSelector } from '../store/gallerySelectors';
 import CurrentImageFallback from './CurrentImageFallback';

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

@@ -15,7 +15,7 @@ import IAISwitch from 'common/components/IAISwitch';
 import { configSelector } from 'features/system/store/configSelectors';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import { setShouldConfirmOnDelete } from 'features/system/store/systemSlice';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { ChangeEvent, memo, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';

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

@@ -53,7 +53,7 @@ import { systemSelector } from 'features/system/store/systemSelectors';
 import { configSelector } from 'features/system/store/configSelectors';
 import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 export const selector = createSelector(
   [
@@ -151,8 +151,8 @@ const HoverableImage = memo((props: HoverableImageProps) => {
   };
 
   const handleUsePrompt = () => {
-    if (image.metadata?.sd_metadata?.prompt) {
+    if (typeof image.metadata?.invokeai?.node?.prompt === 'string') {
-      setBothPrompts(image.metadata?.sd_metadata?.prompt);
+      setBothPrompts(image.metadata?.invokeai?.node?.prompt);
     }
     toast({
       title: t('toast.promptSet'),
@@ -163,8 +163,8 @@ const HoverableImage = memo((props: HoverableImageProps) => {
   };
 
   const handleUseSeed = () => {
-    image.metadata.sd_metadata &&
+    typeof image.metadata.invokeai?.node?.seed === 'number' &&
-      dispatch(setSeed(image.metadata.sd_metadata.image.seed));
+      dispatch(setSeed(image.metadata.invokeai?.node?.seed));
     toast({
       title: t('toast.seedSet'),
       status: 'success',
@@ -195,38 +195,39 @@ const HoverableImage = memo((props: HoverableImageProps) => {
   };
 
   const handleUseAllParameters = () => {
-    metadata.sd_metadata && dispatch(setAllParameters(metadata.sd_metadata));
+    // metadata.invokeai?.node &&
-    toast({
+    //   dispatch(setAllParameters(metadata.invokeai?.node));
-      title: t('toast.parametersSet'),
+    // toast({
-      status: 'success',
+    //   title: t('toast.parametersSet'),
-      duration: 2500,
+    //   status: 'success',
-      isClosable: true,
+    //   duration: 2500,
-    });
+    //   isClosable: true,
+    // });
   };
 
   const handleUseInitialImage = async () => {
-    if (metadata.sd_metadata?.image?.init_image_path) {
+    // if (metadata.invokeai?.node?.image?.init_image_path) {
-      const response = await fetch(
+    //   const response = await fetch(
-        metadata.sd_metadata?.image?.init_image_path
+    //     metadata.invokeai?.node?.image?.init_image_path
-      );
+    //   );
-      if (response.ok) {
+    //   if (response.ok) {
-        dispatch(setAllImageToImageParameters(metadata?.sd_metadata));
+    //     dispatch(setAllImageToImageParameters(metadata?.invokeai?.node));
-        toast({
+    //     toast({
-          title: t('toast.initialImageSet'),
+    //       title: t('toast.initialImageSet'),
-          status: 'success',
+    //       status: 'success',
-          duration: 2500,
+    //       duration: 2500,
-          isClosable: true,
+    //       isClosable: true,
-        });
+    //     });
-        return;
+    //     return;
-      }
+    //   }
-    }
+    // }
-    toast({
+    // toast({
-      title: t('toast.initialImageNotSet'),
+    //   title: t('toast.initialImageNotSet'),
-      description: t('toast.initialImageNotSetDesc'),
+    //   description: t('toast.initialImageNotSetDesc'),
-      status: 'error',
+    //   status: 'error',
-      duration: 2500,
+    //   duration: 2500,
-      isClosable: true,
+    //   isClosable: true,
-    });
+    // });
   };
 
   const handleSelectImage = () => {
@@ -268,7 +269,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
             <MenuItem
               icon={<IoArrowUndoCircleOutline />}
               onClickCapture={handleUsePrompt}
-              isDisabled={image?.metadata?.sd_metadata?.prompt === undefined}
+              isDisabled={image?.metadata?.invokeai?.node?.prompt === undefined}
             >
               {t('parameters.usePrompt')}
             </MenuItem>
@@ -276,14 +277,14 @@ const HoverableImage = memo((props: HoverableImageProps) => {
             <MenuItem
               icon={<IoArrowUndoCircleOutline />}
               onClickCapture={handleUseSeed}
-              isDisabled={image?.metadata?.sd_metadata?.seed === undefined}
+              isDisabled={image?.metadata?.invokeai?.node?.seed === undefined}
             >
               {t('parameters.useSeed')}
             </MenuItem>
             <MenuItem
               icon={<IoArrowUndoCircleOutline />}
               onClickCapture={handleUseInitialImage}
-              isDisabled={image?.metadata?.sd_metadata?.type !== 'img2img'}
+              isDisabled={image?.metadata?.invokeai?.node?.type !== 'img2img'}
             >
               {t('parameters.useInitImg')}
             </MenuItem>
@@ -292,7 +293,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
               onClickCapture={handleUseAllParameters}
               isDisabled={
                 !['txt2img', 'img2img'].includes(
-                  image?.metadata?.sd_metadata?.type
+                  String(image?.metadata?.invokeai?.node?.type)
                 )
               }
             >

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

@@ -35,7 +35,7 @@
 // } from 'features/ui/store/uiSlice';
 // import { InvokeTabName } from 'features/ui/store/tabMap';
 
-// import { clamp } from 'lodash';
+// import { clamp } from 'lodash-es';
 // import { Direction } from 're-resizable/lib/resizer';
 // import React, {
 //   ChangeEvent,

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

@@ -7,7 +7,7 @@ import {
 } from 'features/gallery/store/gallerySlice';
 import { InvokeTabName } from 'features/ui/store/tabMap';
 
-import { clamp, isEqual } from 'lodash';
+import { clamp, isEqual } from 'lodash-es';
 import { useHotkeys } from 'react-hotkeys-hook';
 
 import './ImageGallery.css';

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

@@ -1,7 +1,7 @@
 import { ChakraProps, Flex, Grid, IconButton } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';

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

@@ -7,7 +7,7 @@ import {
   activeTabNameSelector,
   uiSelector,
 } from 'features/ui/store/uiSelectors';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 import {
   selectResultsAll,
   selectResultsById,

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

@@ -4,7 +4,7 @@ import * as InvokeAI from 'app/types/invokeai';
 import { invocationComplete } from 'services/events/actions';
 import { InvokeTabName } from 'features/ui/store/tabMap';
 import { IRect } from 'konva/lib/types';
-import { clamp } from 'lodash';
+import { clamp } from 'lodash-es';
 import { isImageOutput } from 'services/types/guards';
 import { deserializeImageResponse } from 'services/util/deserializeImageResponse';
 import { imageUploaded } from 'services/thunks/image';

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

@@ -10,7 +10,7 @@ import { gallerySelector } from 'features/gallery/store/gallerySelectors';
 import { setIsLightboxOpen } from 'features/lightbox/store/lightboxSlice';
 import { uiSelector } from 'features/ui/store/uiSelectors';
 import { AnimatePresence, motion } from 'framer-motion';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { BiExit } from 'react-icons/bi';
 import { TransformWrapper } from 'react-zoom-pan-pinch';

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

@@ -1,6 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { RootState } from 'app/store/store';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 export const lightboxSelector = createSelector(
   (state: RootState) => state.lightbox,

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

@@ -13,7 +13,7 @@ import {
 import { FaEllipsisV, FaPlus } from 'react-icons/fa';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { nodeAdded } from '../store/nodesSlice';
-import { cloneDeep, map } from 'lodash';
+import { cloneDeep, map } from 'lodash-es';
 import { RootState } from 'app/store/store';
 import { useBuildInvocation } from '../hooks/useBuildInvocation';
 import { addToast } from 'features/system/store/systemSlice';

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

@@ -1,6 +1,6 @@
 import 'reactflow/dist/style.css';
 import { Tooltip, Badge, Flex } from '@chakra-ui/react';
-import { map } from 'lodash';
+import { map } from 'lodash-es';
 import { FIELDS } from '../types/constants';
 import { memo } from 'react';
 

invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeInputs.tsx

@@ -4,7 +4,7 @@ import {
   InvocationTemplate,
 } from 'features/nodes/types/types';
 import { memo, ReactNode, useCallback } from 'react';
-import { map } from 'lodash';
+import { map } from 'lodash-es';
 import { useAppSelector } from 'app/store/storeHooks';
 import { RootState } from 'app/store/store';
 import {

invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeOutputs.tsx

@@ -4,7 +4,7 @@ import {
   OutputFieldValue,
 } from 'features/nodes/types/types';
 import { memo, ReactNode, useCallback } from 'react';
-import { map } from 'lodash';
+import { map } from 'lodash-es';
 import { useAppSelector } from 'app/store/storeHooks';
 import { RootState } from 'app/store/store';
 import { Box, Flex, FormControl, FormLabel, HStack } from '@chakra-ui/react';

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

@@ -11,7 +11,7 @@ import {
   selectModelsById,
   selectModelsIds,
 } from 'features/system/store/modelSlice';
-import { isEqual, map } from 'lodash';
+import { isEqual, map } from 'lodash-es';
 import { ChangeEvent, memo } from 'react';
 import { FieldComponentProps } from './types';
 

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

@@ -3,7 +3,7 @@ import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIInput from 'common/components/IAIInput';
 import { Panel } from 'reactflow';
-import { map } from 'lodash';
+import { map } from 'lodash-es';
 import {
   ChangeEvent,
   FocusEvent,

invokeai/frontend/web/src/features/nodes/hooks/useBuildInvocation.ts

@@ -1,7 +1,7 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { RootState } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { reduce } from 'lodash';
+import { reduce } from 'lodash-es';
 import { useCallback } from 'react';
 import { Node, useReactFlow } from 'reactflow';
 import { AnyInvocationType } from 'services/events/types';

invokeai/frontend/web/src/features/nodes/hooks/useIsValidConnection.ts

@@ -14,77 +14,77 @@ export const useIsValidConnection = () => {
 
       return true;
 
-      // Connection must have valid targets
+      // // Connection must have valid targets
-      if (!(source && sourceHandle && target && targetHandle)) {
+      // if (!(source && sourceHandle && target && targetHandle)) {
-        return false;
+      //   return false;
-      }
+      // }
 
-      // Connection is invalid if target already has a connection
+      // // Connection is invalid if target already has a connection
-      if (
+      // if (
-        edges.find((edge) => {
+      //   edges.find((edge) => {
-          return edge.target === target && edge.targetHandle === targetHandle;
+      //     return edge.target === target && edge.targetHandle === targetHandle;
-        })
+      //   })
-      ) {
+      // ) {
-        return false;
+      //   return false;
-      }
+      // }
 
-      // Find the source and target nodes
+      // // Find the source and target nodes
-      const sourceNode = flow.getNode(source) as Node<InvocationValue>;
+      // const sourceNode = flow.getNode(source) as Node<InvocationValue>;
 
-      const targetNode = flow.getNode(target) as Node<InvocationValue>;
+      // const targetNode = flow.getNode(target) as Node<InvocationValue>;
 
-      // Conditional guards against undefined nodes/handles
+      // // Conditional guards against undefined nodes/handles
-      if (!(sourceNode && targetNode && sourceNode.data && targetNode.data)) {
+      // if (!(sourceNode && targetNode && sourceNode.data && targetNode.data)) {
-        return false;
+      //   return false;
-      }
+      // }
 
-      // Connection types must be the same for a connection
+      // // Connection types must be the same for a connection
-      if (
+      // if (
-        sourceNode.data.outputs[sourceHandle].type !==
+      //   sourceNode.data.outputs[sourceHandle].type !==
-        targetNode.data.inputs[targetHandle].type
+      //   targetNode.data.inputs[targetHandle].type
-      ) {
+      // ) {
-        return false;
+      //   return false;
-      }
+      // }
 
-      // Graphs much be acyclic (no loops!)
+      // // Graphs much be acyclic (no loops!)
 
-      /**
+      // /**
-       * TODO: use `graphlib.alg.findCycles()` to identify strong connections
+      //  * TODO: use `graphlib.alg.findCycles()` to identify strong connections
-       *
+      //  *
-       * this validation func only runs when the cursor hits the second handle of the connection,
+      //  * this validation func only runs when the cursor hits the second handle of the connection,
-       * and only on that second handle - so it cannot tell us exhaustively which connections
+      //  * and only on that second handle - so it cannot tell us exhaustively which connections
-       * are valid.
+      //  * are valid.
-       *
+      //  *
-       * ideally, we check when the connection starts to calculate all invalid handles at once.
+      //  * ideally, we check when the connection starts to calculate all invalid handles at once.
-       *
+      //  *
-       * requires making a new graphlib graph - and calling `findCycles()` - for each potential
+      //  * requires making a new graphlib graph - and calling `findCycles()` - for each potential
-       * handle. instead of using the `isValidConnection` prop, it would use the `onConnectStart`
+      //  * handle. instead of using the `isValidConnection` prop, it would use the `onConnectStart`
-       * prop.
+      //  * prop.
-       *
+      //  *
-       * the strong connections should be stored in global state.
+      //  * the strong connections should be stored in global state.
-       *
+      //  *
-       * then, `isValidConnection` would simple loop through the strong connections and if the
+      //  * then, `isValidConnection` would simple loop through the strong connections and if the
-       * source and target are in a single strong connection, return false.
+      //  * source and target are in a single strong connection, return false.
-       *
+      //  *
-       * and also, we can use this knowledge to style every handle when a connection starts,
+      //  * and also, we can use this knowledge to style every handle when a connection starts,
-       * which is otherwise not possible.
+      //  * which is otherwise not possible.
-       */
+      //  */
 
-      // build a graphlib graph
+      // // build a graphlib graph
-      const g = new graphlib.Graph();
+      // const g = new graphlib.Graph();
 
-      nodes.forEach((n) => {
+      // nodes.forEach((n) => {
-        g.setNode(n.id);
+      //   g.setNode(n.id);
-      });
+      // });
 
-      edges.forEach((e) => {
+      // edges.forEach((e) => {
-        g.setEdge(e.source, e.target);
+      //   g.setEdge(e.source, e.target);
-      });
+      // });
 
-      // Add the candidate edge to the graph
+      // // Add the candidate edge to the graph
-      g.setEdge(source, target);
+      // g.setEdge(source, target);
 
-      return graphlib.alg.isAcyclic(g);
+      // return graphlib.alg.isAcyclic(g);
     },
     [flow]
   );

invokeai/frontend/web/src/features/nodes/util/fieldTemplateBuilders.ts

@@ -1,4 +1,4 @@
-import { reduce } from 'lodash';
+import { reduce } from 'lodash-es';
 import { OpenAPIV3 } from 'openapi-types';
 import { FIELD_TYPE_MAP } from '../types/constants';
 import { isSchemaObject } from '../types/typeGuards';

invokeai/frontend/web/src/features/nodes/util/nodesGraphBuilder/buildNodesGraph.ts

@@ -1,6 +1,6 @@
 import { Graph } from 'services/api';
 import { v4 as uuidv4 } from 'uuid';
-import { reduce } from 'lodash';
+import { reduce } from 'lodash-es';
 import { RootState } from 'app/store/store';
 import { AnyInvocation } from 'services/events/types';
 

invokeai/frontend/web/src/features/nodes/util/parseSchema.ts

@@ -1,4 +1,4 @@
-import { filter, reduce } from 'lodash';
+import { filter, reduce } from 'lodash-es';
 import { OpenAPIV3 } from 'openapi-types';
 import { isSchemaObject } from '../types/typeGuards';
 import {

invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Canvas/BoundingBox/BoundingBoxSettings.tsx

@@ -4,7 +4,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAISlider from 'common/components/IAISlider';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { useTranslation } from 'react-i18next';
 

invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Canvas/InfillAndScalingSettings.tsx

@@ -18,7 +18,7 @@ import {
   setTileSize,
 } from 'features/parameters/store/generationSlice';
 import { systemSelector } from 'features/system/store/systemSelectors';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { ChangeEvent } from 'react';
 import { useTranslation } from 'react-i18next';

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

@@ -29,7 +29,7 @@ export default function ImageToImageSettings() {
     <VStack gap={2} w="full" alignItems="stretch">
       <ImageToImageSettingsHeader />
       <InitialImagePreview />
-      <ImageToImageStrength label={t('parameters.img2imgStrength')} />
+      <ImageToImageStrength />
       <ImageFit />
     </VStack>
   );

invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/ImageToImage/InitialImagePreview.tsx

@@ -11,7 +11,7 @@ import {
   initialImageSelected,
 } from 'features/parameters/store/generationSlice';
 import { addToast } from 'features/system/store/systemSlice';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 import { DragEvent, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ImageType } from 'services/api';

invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Output/HiresSettings.tsx

@@ -8,7 +8,7 @@ import {
   setHiresFix,
   setHiresStrength,
 } from 'features/parameters/store/postprocessingSlice';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 import { ChangeEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 

invokeai/frontend/web/src/features/parameters/components/ParametersAccordion.tsx

@@ -5,7 +5,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { tabMap } from 'features/ui/store/tabMap';
 import { uiSelector } from 'features/ui/store/uiSelectors';
 import { openAccordionItemsChanged } from 'features/ui/store/uiSlice';
-import { map } from 'lodash';
+import { map } from 'lodash-es';
 import { ReactNode, useCallback } from 'react';
 import InvokeAccordionItem from './AccordionItems/InvokeAccordionItem';
 

invokeai/frontend/web/src/features/parameters/components/ProcessButtons/CancelButton.tsx

@@ -12,7 +12,7 @@ import {
   cancelTypeChanged,
   CancelType,
 } from 'features/system/store/systemSlice';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 import { useEffect, useCallback, memo } from 'react';
 import {
   ButtonSpinner,
@@ -170,7 +170,7 @@ const CancelButton = (
 
       <Menu closeOnSelect={false}>
         <MenuButton
-          as={IconButton}
+          as={IAIIconButton}
           tooltip={t('parameters.cancel.setType')}
           aria-label={t('parameters.cancel.setType')}
           icon={<BiChevronDown />}

invokeai/frontend/web/src/features/parameters/components/ProcessButtons/ProcessButtons.tsx

@@ -14,7 +14,7 @@ const ProcessButtons = () => {
   return (
     <Flex gap={2}>
       <InvokeButton />
-      {activeTabName === 'img2img' && <LoopbackButton />}
+      {/* {activeTabName === 'img2img' && <LoopbackButton />} */}
       <CancelButton />
     </Flex>
   );

invokeai/frontend/web/src/features/parameters/components/PromptInput/PromptInput.tsx

@@ -12,7 +12,7 @@ import {
 } from 'features/parameters/store/generationSlice';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 

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

@@ -6,7 +6,7 @@ import {
   selectResultsEntities,
 } from 'features/gallery/store/resultsSlice';
 import { selectUploadsById } from 'features/gallery/store/uploadsSlice';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 export const generationSelector = (state: RootState) => state.generation;
 

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

@@ -4,7 +4,7 @@ import * as InvokeAI from 'app/types/invokeai';
 import { getPromptAndNegative } from 'common/util/getPromptAndNegative';
 import promptToString from 'common/util/promptToString';
 import { seedWeightsToString } from 'common/util/seedWeightPairs';
-import { clamp } from 'lodash';
+import { clamp } from 'lodash-es';
 
 export interface GenerationState {
   cfgScale: number;
@@ -179,136 +179,126 @@ export const generationSlice = createSlice({
       state,
       action: PayloadAction<InvokeAI.Metadata>
     ) => {
-      const {
+      // const {
-        sampler,
+      //   sampler,
-        prompt,
+      //   prompt,
-        seed,
+      //   seed,
-        variations,
+      //   variations,
-        steps,
+      //   steps,
-        cfg_scale,
+      //   cfg_scale,
-        threshold,
+      //   threshold,
-        perlin,
+      //   perlin,
-        seamless,
+      //   seamless,
-        _hires_fix,
+      //   _hires_fix,
-        width,
+      //   width,
-        height,
+      //   height,
-      } = action.payload.image;
+      // } = action.payload.image;
-
+      // if (variations && variations.length > 0) {
-      if (variations && variations.length > 0) {
+      //   state.seedWeights = seedWeightsToString(variations);
-        state.seedWeights = seedWeightsToString(variations);
+      //   state.shouldGenerateVariations = true;
-        state.shouldGenerateVariations = true;
+      //   state.variationAmount = 0;
-        state.variationAmount = 0;
+      // } else {
-      } else {
+      //   state.shouldGenerateVariations = false;
-        state.shouldGenerateVariations = false;
+      // }
-      }
+      // if (seed) {
-
+      //   state.seed = seed;
-      if (seed) {
+      //   state.shouldRandomizeSeed = false;
-        state.seed = seed;
+      // }
-        state.shouldRandomizeSeed = false;
+      // if (prompt) state.prompt = promptToString(prompt);
-      }
+      // if (sampler) state.sampler = sampler;
-
+      // if (steps) state.steps = steps;
-      if (prompt) state.prompt = promptToString(prompt);
+      // if (cfg_scale) state.cfgScale = cfg_scale;
-      if (sampler) state.sampler = sampler;
+      // if (typeof threshold === 'undefined') {
-      if (steps) state.steps = steps;
+      //   state.threshold = 0;
-      if (cfg_scale) state.cfgScale = cfg_scale;
+      // } else {
-      if (typeof threshold === 'undefined') {
+      //   state.threshold = threshold;
-        state.threshold = 0;
+      // }
-      } else {
+      // if (typeof perlin === 'undefined') {
-        state.threshold = threshold;
+      //   state.perlin = 0;
-      }
+      // } else {
-      if (typeof perlin === 'undefined') {
+      //   state.perlin = perlin;
-        state.perlin = 0;
+      // }
-      } else {
+      // if (typeof seamless === 'boolean') state.seamless = seamless;
-        state.perlin = perlin;
+      // // if (typeof hires_fix === 'boolean') state.hiresFix = hires_fix; // TODO: Needs to be fixed after reorg
-      }
+      // if (width) state.width = width;
-      if (typeof seamless === 'boolean') state.seamless = seamless;
+      // if (height) state.height = height;
-      // if (typeof hires_fix === 'boolean') state.hiresFix = hires_fix; // TODO: Needs to be fixed after reorg
-      if (width) state.width = width;
-      if (height) state.height = height;
     },
     setAllImageToImageParameters: (
       state,
       action: PayloadAction<InvokeAI.Metadata>
     ) => {
-      const { type, strength, fit, init_image_path, mask_image_path } =
+      //   const { type, strength, fit, init_image_path, mask_image_path } =
-        action.payload.image;
+      //     action.payload.image;
-
+      //   if (type === 'img2img') {
-      if (type === 'img2img') {
+      //     if (init_image_path) state.initialImage = init_image_path;
-        if (init_image_path) state.initialImage = init_image_path;
+      //     if (mask_image_path) state.maskPath = mask_image_path;
-        if (mask_image_path) state.maskPath = mask_image_path;
+      //     if (strength) state.img2imgStrength = strength;
-        if (strength) state.img2imgStrength = strength;
+      //     if (typeof fit === 'boolean') state.shouldFitToWidthHeight = fit;
-        if (typeof fit === 'boolean') state.shouldFitToWidthHeight = fit;
+      //   }
-      }
     },
     setAllParameters: (state, action: PayloadAction<InvokeAI.Metadata>) => {
-      const {
+      //   const {
-        type,
+      //     type,
-        sampler,
+      //     sampler,
-        prompt,
+      //     prompt,
-        seed,
+      //     seed,
-        variations,
+      //     variations,
-        steps,
+      //     steps,
-        cfg_scale,
+      //     cfg_scale,
-        threshold,
+      //     threshold,
-        perlin,
+      //     perlin,
-        seamless,
+      //     seamless,
-        _hires_fix,
+      //     _hires_fix,
-        width,
+      //     width,
-        height,
+      //     height,
-        strength,
+      //     strength,
-        fit,
+      //     fit,
-        init_image_path,
+      //     init_image_path,
-        mask_image_path,
+      //     mask_image_path,
-      } = action.payload.image;
+      //   } = action.payload.image;
-
+      //   if (type === 'img2img') {
-      if (type === 'img2img') {
+      //     if (init_image_path) state.initialImage = init_image_path;
-        if (init_image_path) state.initialImage = init_image_path;
+      //     if (mask_image_path) state.maskPath = mask_image_path;
-        if (mask_image_path) state.maskPath = mask_image_path;
+      //     if (strength) state.img2imgStrength = strength;
-        if (strength) state.img2imgStrength = strength;
+      //     if (typeof fit === 'boolean') state.shouldFitToWidthHeight = fit;
-        if (typeof fit === 'boolean') state.shouldFitToWidthHeight = fit;
+      //   }
-      }
+      //   if (variations && variations.length > 0) {
-
+      //     state.seedWeights = seedWeightsToString(variations);
-      if (variations && variations.length > 0) {
+      //     state.shouldGenerateVariations = true;
-        state.seedWeights = seedWeightsToString(variations);
+      //     state.variationAmount = 0;
-        state.shouldGenerateVariations = true;
+      //   } else {
-        state.variationAmount = 0;
+      //     state.shouldGenerateVariations = false;
-      } else {
+      //   }
-        state.shouldGenerateVariations = false;
+      //   if (seed) {
-      }
+      //     state.seed = seed;
-
+      //     state.shouldRandomizeSeed = false;
-      if (seed) {
+      //   }
-        state.seed = seed;
+      //   if (prompt) {
-        state.shouldRandomizeSeed = false;
+      //     const [promptOnly, negativePrompt] = getPromptAndNegative(prompt);
-      }
+      //     if (promptOnly) state.prompt = promptOnly;
-
+      //     negativePrompt
-      if (prompt) {
+      //       ? (state.negativePrompt = negativePrompt)
-        const [promptOnly, negativePrompt] = getPromptAndNegative(prompt);
+      //       : (state.negativePrompt = '');
-        if (promptOnly) state.prompt = promptOnly;
+      //   }
-        negativePrompt
+      //   if (sampler) state.sampler = sampler;
-          ? (state.negativePrompt = negativePrompt)
+      //   if (steps) state.steps = steps;
-          : (state.negativePrompt = '');
+      //   if (cfg_scale) state.cfgScale = cfg_scale;
-      }
+      //   if (typeof threshold === 'undefined') {
-
+      //     state.threshold = 0;
-      if (sampler) state.sampler = sampler;
+      //   } else {
-      if (steps) state.steps = steps;
+      //     state.threshold = threshold;
-      if (cfg_scale) state.cfgScale = cfg_scale;
+      //   }
-      if (typeof threshold === 'undefined') {
+      //   if (typeof perlin === 'undefined') {
-        state.threshold = 0;
+      //     state.perlin = 0;
-      } else {
+      //   } else {
-        state.threshold = threshold;
+      //     state.perlin = perlin;
-      }
+      //   }
-      if (typeof perlin === 'undefined') {
+      //   if (typeof seamless === 'boolean') state.seamless = seamless;
-        state.perlin = 0;
+      //   // if (typeof hires_fix === 'boolean') state.hiresFix = hires_fix; // TODO: Needs to be fixed after reorg
-      } else {
+      //   if (width) state.width = width;
-        state.perlin = perlin;
+      //   if (height) state.height = height;
-      }
+      //   // state.shouldRunESRGAN = false; // TODO: Needs to be fixed after reorg
-      if (typeof seamless === 'boolean') state.seamless = seamless;
+      //   // state.shouldRunFacetool = false; // TODO: Needs to be fixed after reorg
-      // if (typeof hires_fix === 'boolean') state.hiresFix = hires_fix; // TODO: Needs to be fixed after reorg
-      if (width) state.width = width;
-      if (height) state.height = height;
-
-      // state.shouldRunESRGAN = false; // TODO: Needs to be fixed after reorg
-      // state.shouldRunFacetool = false; // TODO: Needs to be fixed after reorg
     },
     resetParametersState: (state) => {
       return {

invokeai/frontend/web/src/features/system/components/Console.tsx

@@ -7,7 +7,7 @@ import {
   setShouldShowLogViewer,
   SystemState,
 } from 'features/system/store/systemSlice';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 import { Resizable } from 're-resizable';
 import { useLayoutEffect, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';

invokeai/frontend/web/src/features/system/components/ModelManager/CheckpointModelEdit.tsx

@@ -24,7 +24,7 @@ import { useTranslation } from 'react-i18next';
 import type { InvokeModelConfigProps } from 'app/types/invokeai';
 import type { RootState } from 'app/store/store';
 import type { FieldInputProps, FormikProps } from 'formik';
-import { isEqual, pickBy } from 'lodash';
+import { isEqual, pickBy } from 'lodash-es';
 import ModelConvert from './ModelConvert';
 import IAIFormHelperText from 'common/components/IAIForms/IAIFormHelperText';
 import IAIFormErrorMessage from 'common/components/IAIForms/IAIFormErrorMessage';

invokeai/frontend/web/src/features/system/components/ModelManager/DiffusersModelEdit.tsx

@@ -15,7 +15,7 @@ import { useTranslation } from 'react-i18next';
 
 import type { InvokeDiffusersModelConfigProps } from 'app/types/invokeai';
 import type { RootState } from 'app/store/store';
-import { isEqual, pickBy } from 'lodash';
+import { isEqual, pickBy } from 'lodash-es';
 import IAIFormHelperText from 'common/components/IAIForms/IAIFormHelperText';
 import IAIFormErrorMessage from 'common/components/IAIForms/IAIFormErrorMessage';
 import IAIForm from 'common/components/IAIForm';

invokeai/frontend/web/src/features/system/components/ModelManager/ModelList.tsx

@@ -12,7 +12,7 @@ import { useTranslation } from 'react-i18next';
 import { createSelector } from '@reduxjs/toolkit';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import type { SystemState } from 'features/system/store/systemSlice';
-import { isEqual, map } from 'lodash';
+import { isEqual, map } from 'lodash-es';
 
 import React, { useMemo, useState, useTransition } from 'react';
 import type { ChangeEvent, ReactNode } from 'react';

invokeai/frontend/web/src/features/system/components/ModelManager/SearchModels.tsx

@@ -31,7 +31,7 @@ import type { FoundModel } from 'app/types/invokeai';
 import type { RootState } from 'app/store/store';
 import IAIInput from 'common/components/IAIInput';
 import { Field, Formik } from 'formik';
-import { forEach, remove } from 'lodash';
+import { forEach, remove } from 'lodash-es';
 import type { ChangeEvent, ReactNode } from 'react';
 import IAIForm from 'common/components/IAIForm';
 

invokeai/frontend/web/src/features/system/components/ModelSelect.tsx

@@ -1,6 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { ChangeEvent, memo } from 'react';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 import { useTranslation } from 'react-i18next';
 
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';

invokeai/frontend/web/src/features/system/components/ProgressBar.tsx

@@ -2,7 +2,7 @@ import { Progress } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import { SystemState } from 'features/system/store/systemSlice';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 import { useTranslation } from 'react-i18next';
 import { PROGRESS_BAR_THICKNESS } from 'theme/util/constants';
 import { systemSelector } from '../store/systemSelectors';

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx

@@ -37,7 +37,7 @@ import {
   setShouldUseSliders,
 } from 'features/ui/store/uiSlice';
 import { UIState } from 'features/ui/store/uiTypes';
-import { isEqual, map } from 'lodash';
+import { isEqual, map } from 'lodash-es';
 import { persistor } from 'app/store/persistor';
 import { ChangeEvent, cloneElement, ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';

invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx

@@ -2,7 +2,7 @@ import { Text, Tooltip } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { errorSeen, SystemState } from 'features/system/store/systemSlice';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 import { useTranslation } from 'react-i18next';
 import { systemSelector } from '../store/systemSelectors';
 

invokeai/frontend/web/src/features/system/store/configSlice.ts

@@ -1,7 +1,7 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 import { AppConfig, PartialAppConfig } from 'app/types/invokeai';
-import { merge } from 'lodash';
+import { merge } from 'lodash-es';
 
 const initialConfigState: AppConfig = {
   shouldTransformUrls: false,

invokeai/frontend/web/src/features/system/store/modelSelectors.ts

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { RootState } from 'app/store/store';
-import { reduce } from 'lodash';
+import { reduce } from 'lodash-es';
 
 export const modelSelector = (state: RootState) => state.models;

invokeai/frontend/web/src/features/system/store/modelSlice.ts

@@ -1,7 +1,7 @@
 import { createEntityAdapter, PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 import { RootState } from 'app/store/store';
-import { keys, sample } from 'lodash';
+import { keys, sample } from 'lodash-es';
 import { CkptModelInfo, DiffusersModelInfo } from 'services/api';
 import { receivedModels } from 'services/thunks/model';
 

invokeai/frontend/web/src/features/system/store/systemSelectors.ts

@@ -1,6 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { RootState } from 'app/store/store';
-import { isEqual, reduce, pickBy } from 'lodash';
+import { isEqual, reduce, pickBy } from 'lodash-es';
 
 export const systemSelector = (state: RootState) => state.system;
 

invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx

@@ -4,7 +4,7 @@ import IAIIconButton from 'common/components/IAIIconButton';
 import { useTranslation } from 'react-i18next';
 import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
 import { setShouldShowGallery } from 'features/ui/store/uiSlice';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 import { MdPhotoLibrary } from 'react-icons/md';
 import { activeTabNameSelector, uiSelector } from '../store/uiSelectors';
 

invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx

@@ -10,7 +10,7 @@ import {
   uiSelector,
 } from 'features/ui/store/uiSelectors';
 import { setShouldShowParametersPanel } from 'features/ui/store/uiSlice';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 import { useTranslation } from 'react-i18next';
 
 import { FaSlidersH } from 'react-icons/fa';

invokeai/frontend/web/src/features/ui/components/InvokeWorkarea.tsx

@@ -10,7 +10,7 @@ import { DragEvent, ReactNode } from 'react';
 
 import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice';
 import useGetImageByUuid from 'features/gallery/hooks/useGetImageByUuid';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 import { APP_CONTENT_HEIGHT } from 'theme/util/constants';
 import ParametersPanel from './ParametersPanel';
 

invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx

@@ -17,7 +17,7 @@ import PinParametersPanelButton from './PinParametersPanelButton';
 import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
 import { createSelector } from '@reduxjs/toolkit';
 import { activeTabNameSelector, uiSelector } from '../store/uiSelectors';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
 import useResolution from 'common/hooks/useResolution';
 

invokeai/frontend/web/src/features/ui/components/common/ParametersSlide.tsx

@@ -3,7 +3,7 @@ import { Slide } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { uiSelector } from 'features/ui/store/uiSelectors';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 import { memo, PropsWithChildren, useRef } from 'react';
 import PinParametersPanelButton from 'features/ui/components/PinParametersPanelButton';
 import {

invokeai/frontend/web/src/features/ui/components/common/Scrollable.tsx

@@ -1,5 +1,5 @@
 import { Box, ChakraProps } from '@chakra-ui/react';
-import { throttle } from 'lodash';
+import { throttle } from 'lodash-es';
 import { ReactNode, useEffect, useRef } from 'react';
 
 const scrollShadowBaseStyles: ChakraProps['sx'] = {

invokeai/frontend/web/src/features/ui/components/tabs/Generate/GenerateParameters.tsx

@@ -29,7 +29,7 @@ import ParametersAccordion, {
 import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
 import NegativePromptInput from 'features/parameters/components/PromptInput/NegativePromptInput';
 import PromptInput from 'features/parameters/components/PromptInput/PromptInput';
-import { findIndex } from 'lodash';
+import { findIndex } from 'lodash-es';
 import { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants';

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasContentBeta.tsx

@@ -6,7 +6,7 @@ import IAICanvas from 'features/canvas/components/IAICanvas';
 import IAICanvasResizer from 'features/canvas/components/IAICanvasResizer';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 import { useLayoutEffect } from 'react';
 import UnifiedCanvasToolbarBeta from './UnifiedCanvasToolbarBeta';
 import UnifiedCanvasToolSettingsBeta from './UnifiedCanvasToolSettingsBeta';

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasColorPicker.tsx

@@ -8,7 +8,7 @@ import {
   isStagingSelector,
 } from 'features/canvas/store/canvasSelectors';
 import { setBrushColor, setMaskColor } from 'features/canvas/store/canvasSlice';
-import { clamp, isEqual } from 'lodash';
+import { clamp, isEqual } from 'lodash-es';
 
 import { useHotkeys } from 'react-hotkeys-hook';
 

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasSettings.tsx

@@ -16,7 +16,7 @@ import EmptyTempFolderButtonModal from 'features/system/components/ClearTempFold
 import { FaWrench } from 'react-icons/fa';
 
 import ClearCanvasHistoryButtonModal from 'features/canvas/components/ClearCanvasHistoryButtonModal';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 import { useTranslation } from 'react-i18next';
 
 export const canvasControlsSelector = createSelector(

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettingsBeta.tsx

@@ -3,7 +3,7 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 
 import { Flex } from '@chakra-ui/react';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 import UnifiedCanvasBaseBrushSettings from './UnifiedCanvasToolSettings/UnifiedCanvasBaseBrushSettings';
 import UnifiedCanvasMaskBrushSettings from './UnifiedCanvasToolSettings/UnifiedCanvasMaskBrushSettings';
 import UnifiedCanvasMoveSettings from './UnifiedCanvasToolSettings/UnifiedCanvasMoveSettings';

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasLayerSelect.tsx

@@ -10,7 +10,7 @@ import {
   CanvasLayer,
   LAYER_NAMES_DICT,
 } from 'features/canvas/store/canvasTypes';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { ChangeEvent } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasToolSelect.tsx

@@ -12,7 +12,7 @@ import {
   setTool,
 } from 'features/canvas/store/canvasSlice';
 import { systemSelector } from 'features/system/store/systemSelectors';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasContent.tsx

@@ -7,7 +7,7 @@ import IAICanvasResizer from 'features/canvas/components/IAICanvasResizer';
 import IAICanvasToolbar from 'features/canvas/components/IAICanvasToolbar/IAICanvasToolbar';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { useLayoutEffect } from 'react';
 

invokeai/frontend/web/src/features/ui/store/uiSelectors.ts

@@ -1,6 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { RootState } from 'app/store/store';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { tabMap } from './tabMap';
 import { UIState } from './uiTypes';

invokeai/frontend/web/src/services/thunks/image.ts

@@ -1,7 +1,7 @@
 import { isFulfilled, isRejected } from '@reduxjs/toolkit';
 import { createAppAsyncThunk } from 'app/store/storeUtils';
 import { imageSelected } from 'features/gallery/store/gallerySlice';
-import { clamp } from 'lodash';
+import { clamp } from 'lodash-es';
 import { ImagesService } from 'services/api';
 import { getHeaders } from 'services/util/getHeaders';
 

invokeai/frontend/web/src/services/thunks/model.ts

@@ -1,6 +1,6 @@
 import { createAppAsyncThunk } from 'app/store/storeUtils';
 import { Model } from 'features/system/store/modelSlice';
-import { reduce } from 'lodash';
+import { reduce } from 'lodash-es';
 import { ModelsService } from 'services/api';
 
 export const IMAGES_PER_PAGE = 20;