diff --git a/invokeai/frontend/web/package.json b/invokeai/frontend/web/package.json index 404d20d937..317929c6a4 100644 --- a/invokeai/frontend/web/package.json +++ b/invokeai/frontend/web/package.json @@ -89,18 +89,13 @@ "react-i18next": "^12.2.2", "react-icons": "^4.7.1", "react-konva": "^18.2.7", - "react-konva-utils": "^1.0.4", "react-redux": "^8.0.5", "react-resizable-panels": "^0.0.42", - "react-rnd": "^10.4.1", - "react-transition-group": "^4.4.5", "react-use": "^17.4.0", "react-virtuoso": "^4.3.5", "react-zoom-pan-pinch": "^3.0.7", "reactflow": "^11.7.0", - "redux-deep-persist": "^1.0.7", "redux-dynamic-middlewares": "^2.2.0", - "redux-persist": "^6.0.0", "redux-remember": "^3.3.1", "roarr": "^7.15.0", "serialize-error": "^11.0.0", diff --git a/invokeai/frontend/web/patches/redux-deep-persist+1.0.7.patch b/invokeai/frontend/web/patches/redux-deep-persist+1.0.7.patch deleted file mode 100644 index 47a62e6aac..0000000000 --- a/invokeai/frontend/web/patches/redux-deep-persist+1.0.7.patch +++ /dev/null @@ -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 { - whitelist?: Array; - transforms?: Array>; - throttle?: number; -+ debounce?: number; - migrate?: PersistMigrate; - stateReconciler?: false | StateReconciler; - getStoredState?: (config: PersistConfig) => Promise; -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 { - whitelist?: Array; - transforms?: Array>; - throttle?: number; -+ debounce?: number; - migrate?: PersistMigrate; - stateReconciler?: false | StateReconciler; - /** diff --git a/invokeai/frontend/web/patches/redux-persist+6.0.0.patch b/invokeai/frontend/web/patches/redux-persist+6.0.0.patch deleted file mode 100644 index 9e0a8492db..0000000000 --- a/invokeai/frontend/web/patches/redux-persist+6.0.0.patch +++ /dev/null @@ -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, - transforms?: Array, - throttle?: number, -+ debounce?: number, - migrate?: (PersistedState, number) => Promise, - stateReconciler?: false | Function, - getStoredState?: PersistConfig => Promise, // 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, - transforms?: Array, - throttle?: number, -+ debounce?: number, - migrate?: (PersistedState, number) => Promise, - stateReconciler?: false | Function, - getStoredState?: PersistConfig => Promise, // 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, - transforms?: Array, - throttle?: number, -+ debounce?: number, - migrate?: (PersistedState, number) => Promise, - stateReconciler?: false | Function, - getStoredState?: PersistConfig => Promise, // 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; - transforms?: Array>; - throttle?: number; -+ debounce?: number; - migrate?: PersistMigrate; - stateReconciler?: false | StateReconciler; - /** diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasGraphBuilt.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasGraphBuilt.ts deleted file mode 100644 index 532bac3eee..0000000000 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasGraphBuilt.ts +++ /dev/null @@ -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)); - }, - }); diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/userInvokedCanvas.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/userInvokedCanvas.ts index cdb2c83e12..2ebd3684e9 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/userInvokedCanvas.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/userInvokedCanvas.ts @@ -1,6 +1,6 @@ import { startAppListening } from '..'; import { sessionCreated, sessionInvoked } from 'services/thunks/session'; -import { buildCanvasGraphAndBlobs } from 'features/nodes/util/graphBuilders/buildCanvasGraph'; +import { buildCanvasGraphComponents } from 'features/nodes/util/graphBuilders/buildCanvasGraph'; import { log } from 'app/logging/useLogger'; import { canvasGraphBuilt } from 'features/nodes/store/actions'; import { imageUploaded } from 'services/thunks/image'; @@ -11,9 +11,17 @@ import { stagingAreaInitialized, } from 'features/canvas/store/canvasSlice'; import { userInvoked } from 'app/store/actions'; +import { getCanvasData } from 'features/canvas/util/getCanvasData'; +import { getCanvasGenerationMode } from 'features/canvas/util/getCanvasGenerationMode'; +import { blobToDataURL } from 'features/canvas/util/blobToDataURL'; +import openBase64ImageInTab from 'common/util/openBase64ImageInTab'; const moduleLog = log.child({ namespace: 'invoke' }); +/** + * This listener is responsible for building the canvas graph and blobs when the user invokes the canvas. + * It is also responsible for uploading the base and mask layers to the server. + */ export const addUserInvokedCanvasListener = () => { startAppListening({ predicate: (action): action is ReturnType => @@ -21,25 +29,49 @@ export const addUserInvokedCanvasListener = () => { effect: async (action, { getState, dispatch, take }) => { const state = getState(); - const data = await buildCanvasGraphAndBlobs(state); + // Build canvas blobs + const canvasBlobsAndImageData = await getCanvasData(state); - if (!data) { + if (!canvasBlobsAndImageData) { + moduleLog.error('Unable to create canvas data'); + return; + } + + const { baseBlob, baseImageData, maskBlob, maskImageData } = + canvasBlobsAndImageData; + + // Determine the generation mode + const generationMode = getCanvasGenerationMode( + baseImageData, + maskImageData + ); + + if (state.system.enableImageDebugging) { + const baseDataURL = await blobToDataURL(baseBlob); + const maskDataURL = await blobToDataURL(maskBlob); + openBase64ImageInTab([ + { base64: maskDataURL, caption: 'mask b64' }, + { base64: baseDataURL, caption: 'image b64' }, + ]); + } + + moduleLog.debug(`Generation mode: ${generationMode}`); + + // Build the canvas graph + const graphComponents = await buildCanvasGraphComponents( + state, + generationMode + ); + + if (!graphComponents) { moduleLog.error('Problem building graph'); return; } - const { - rangeNode, - iterateNode, - baseNode, - edges, - baseBlob, - maskBlob, - generationMode, - } = data; + const { rangeNode, iterateNode, baseNode, edges } = graphComponents; + // Upload the base layer, to be used as init image const baseFilename = `${uuidv4()}.png`; - const maskFilename = `${uuidv4()}.png`; dispatch( imageUploaded({ @@ -66,6 +98,9 @@ export const addUserInvokedCanvasListener = () => { }; } + // Upload the mask layer image + const maskFilename = `${uuidv4()}.png`; + if (baseNode.type === 'inpaint') { dispatch( imageUploaded({ @@ -103,9 +138,12 @@ export const addUserInvokedCanvasListener = () => { dispatch(canvasGraphBuilt(graph)); moduleLog({ data: graph }, 'Canvas graph built'); + // Actually create the session dispatch(sessionCreated({ graph })); + // Wait for the session to be invoked (this is just the HTTP request to start processing) const [{ meta }] = await take(sessionInvoked.fulfilled.match); + const { sessionId } = meta.arg; if (!state.canvas.layerState.stagingArea.boundingBox) { diff --git a/invokeai/frontend/web/src/common/components/WorkInProgress/PostProcessingWIP.tsx b/invokeai/frontend/web/src/common/components/WorkInProgress/PostProcessingWIP.tsx deleted file mode 100644 index c98fa5a82b..0000000000 --- a/invokeai/frontend/web/src/common/components/WorkInProgress/PostProcessingWIP.tsx +++ /dev/null @@ -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 ( - - - {t('common.postProcessing')} - - {t('common.postProcessDesc1')} - {t('common.postProcessDesc2')} - {t('common.postProcessDesc3')} - - - - ); -}; diff --git a/invokeai/frontend/web/src/common/components/WorkInProgress/Training.tsx b/invokeai/frontend/web/src/common/components/WorkInProgress/Training.tsx deleted file mode 100644 index 23c3209932..0000000000 --- a/invokeai/frontend/web/src/common/components/WorkInProgress/Training.tsx +++ /dev/null @@ -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 ( - - - {t('common.training')} - - {t('common.trainingDesc1')} - {t('common.trainingDesc2')} - - - - ); -} diff --git a/invokeai/frontend/web/src/common/components/WorkInProgress/WorkInProgress.tsx b/invokeai/frontend/web/src/common/components/WorkInProgress/WorkInProgress.tsx deleted file mode 100644 index 385796d53b..0000000000 --- a/invokeai/frontend/web/src/common/components/WorkInProgress/WorkInProgress.tsx +++ /dev/null @@ -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 ( - - {children} - - ); -}; - -export default WorkInProgress; diff --git a/invokeai/frontend/web/src/common/hooks/useClickOutsideWatcher.ts b/invokeai/frontend/web/src/common/hooks/useClickOutsideWatcher.ts deleted file mode 100644 index 3dd4c7cfc7..0000000000 --- a/invokeai/frontend/web/src/common/hooks/useClickOutsideWatcher.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { RefObject, useEffect } from 'react'; - -const watchers: { - ref: RefObject; - 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; - callback: () => void; - enable: boolean; - }) => { - watchers.push(watcher); - }, - }; -}; - -export default useClickOutsideWatcher; diff --git a/invokeai/frontend/web/src/common/hooks/useUpdateTranslations.ts b/invokeai/frontend/web/src/common/hooks/useUpdateTranslations.ts deleted file mode 100644 index e23a9881af..0000000000 --- a/invokeai/frontend/web/src/common/hooks/useUpdateTranslations.ts +++ /dev/null @@ -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]); -} diff --git a/invokeai/frontend/web/src/common/icons/ImageToImageIcon.tsx b/invokeai/frontend/web/src/common/icons/ImageToImageIcon.tsx deleted file mode 100644 index 4898eee899..0000000000 --- a/invokeai/frontend/web/src/common/icons/ImageToImageIcon.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { createIcon } from '@chakra-ui/react'; - -const ImageToImageIcon = createIcon({ - displayName: 'ImageToImageIcon', - viewBox: '0 0 3543 3543', - path: ( - - - - ), - defaultProps: { - boxSize: '24px', - }, -}); -export default ImageToImageIcon; diff --git a/invokeai/frontend/web/src/common/icons/InpaintIcon.tsx b/invokeai/frontend/web/src/common/icons/InpaintIcon.tsx deleted file mode 100644 index 4f412e96bb..0000000000 --- a/invokeai/frontend/web/src/common/icons/InpaintIcon.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { createIcon } from '@chakra-ui/react'; - -const InpaintIcon = createIcon({ - displayName: 'InpaintIcon', - viewBox: '0 0 3543 3543', - path: ( - - ), -}); - -export default InpaintIcon; diff --git a/invokeai/frontend/web/src/common/icons/NodesIcon.tsx b/invokeai/frontend/web/src/common/icons/NodesIcon.tsx deleted file mode 100644 index 539c33f998..0000000000 --- a/invokeai/frontend/web/src/common/icons/NodesIcon.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { createIcon } from '@chakra-ui/react'; - -const NodesIcon = createIcon({ - displayName: 'NodesIcon', - viewBox: '0 0 3543 3543', - path: ( - - ), - defaultProps: { - boxSize: '24px', - }, -}); - -export default NodesIcon; diff --git a/invokeai/frontend/web/src/common/icons/OutpaintIcon.tsx b/invokeai/frontend/web/src/common/icons/OutpaintIcon.tsx deleted file mode 100644 index dcfc62ad8f..0000000000 --- a/invokeai/frontend/web/src/common/icons/OutpaintIcon.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { createIcon } from '@chakra-ui/react'; - -const OutpaintIcon = createIcon({ - displayName: 'OutpaintIcon', - viewBox: '0 0 3543 3543', - path: ( - - ), -}); - -export default OutpaintIcon; diff --git a/invokeai/frontend/web/src/common/icons/PostprocessingIcon.tsx b/invokeai/frontend/web/src/common/icons/PostprocessingIcon.tsx deleted file mode 100644 index b4000568b2..0000000000 --- a/invokeai/frontend/web/src/common/icons/PostprocessingIcon.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { createIcon } from '@chakra-ui/react'; - -const PostprocessingIcon = createIcon({ - displayName: 'PostprocessingIcon', - viewBox: '0 0 3543 3543', - path: ( - - ), - defaultProps: { - boxSize: '24px', - }, -}); - -export default PostprocessingIcon; diff --git a/invokeai/frontend/web/src/common/icons/TextToImageIcon.tsx b/invokeai/frontend/web/src/common/icons/TextToImageIcon.tsx deleted file mode 100644 index 325ea54dda..0000000000 --- a/invokeai/frontend/web/src/common/icons/TextToImageIcon.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { createIcon } from '@chakra-ui/react'; - -const TextToImageIcon = createIcon({ - displayName: 'TextToImageIcon', - viewBox: '0 0 3543 3543', - path: ( - - - - ), - defaultProps: { - boxSize: '24px', - }, -}); - -export default TextToImageIcon; diff --git a/invokeai/frontend/web/src/common/icons/TrainingIcon.tsx b/invokeai/frontend/web/src/common/icons/TrainingIcon.tsx deleted file mode 100644 index f925013138..0000000000 --- a/invokeai/frontend/web/src/common/icons/TrainingIcon.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { createIcon } from '@chakra-ui/react'; - -const TrainingIcon = createIcon({ - displayName: 'TrainingIcon', - viewBox: '0 0 3544 3544', - path: ( - - ), - defaultProps: { - boxSize: '24px', - }, -}); - -export default TrainingIcon; diff --git a/invokeai/frontend/web/src/common/icons/UnifiedCanvas.afdesign b/invokeai/frontend/web/src/common/icons/UnifiedCanvas.afdesign deleted file mode 100644 index d4f7b149ce..0000000000 Binary files a/invokeai/frontend/web/src/common/icons/UnifiedCanvas.afdesign and /dev/null differ diff --git a/invokeai/frontend/web/src/common/icons/UnifiedCanvasIcon.tsx b/invokeai/frontend/web/src/common/icons/UnifiedCanvasIcon.tsx deleted file mode 100644 index 3cedec04a4..0000000000 --- a/invokeai/frontend/web/src/common/icons/UnifiedCanvasIcon.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { createIcon } from '@chakra-ui/react'; - -const UnifiedCanvasIcon = createIcon({ - displayName: 'UnifiedCanvasIcon', - viewBox: '0 0 3544 3544', - path: ( - - ), - defaultProps: { - boxSize: '24px', - }, -}); - -export default UnifiedCanvasIcon; diff --git a/invokeai/frontend/web/src/common/icons/design_files/BaseImage.afdesign b/invokeai/frontend/web/src/common/icons/design_files/BaseImage.afdesign deleted file mode 100644 index 5c1ff31286..0000000000 Binary files a/invokeai/frontend/web/src/common/icons/design_files/BaseImage.afdesign and /dev/null differ diff --git a/invokeai/frontend/web/src/common/icons/design_files/ImageToImage.afdesign b/invokeai/frontend/web/src/common/icons/design_files/ImageToImage.afdesign deleted file mode 100644 index c744eeab3c..0000000000 Binary files a/invokeai/frontend/web/src/common/icons/design_files/ImageToImage.afdesign and /dev/null differ diff --git a/invokeai/frontend/web/src/common/icons/design_files/ImageToImage.svg b/invokeai/frontend/web/src/common/icons/design_files/ImageToImage.svg deleted file mode 100644 index 14842fabbe..0000000000 --- a/invokeai/frontend/web/src/common/icons/design_files/ImageToImage.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/invokeai/frontend/web/src/common/icons/design_files/Inpaint.afdesign b/invokeai/frontend/web/src/common/icons/design_files/Inpaint.afdesign deleted file mode 100644 index 8447c567e1..0000000000 Binary files a/invokeai/frontend/web/src/common/icons/design_files/Inpaint.afdesign and /dev/null differ diff --git a/invokeai/frontend/web/src/common/icons/design_files/Inpaint.svg b/invokeai/frontend/web/src/common/icons/design_files/Inpaint.svg deleted file mode 100644 index d5bc25a777..0000000000 --- a/invokeai/frontend/web/src/common/icons/design_files/Inpaint.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/invokeai/frontend/web/src/common/icons/design_files/Nodes.afdesign b/invokeai/frontend/web/src/common/icons/design_files/Nodes.afdesign deleted file mode 100644 index 7972051171..0000000000 Binary files a/invokeai/frontend/web/src/common/icons/design_files/Nodes.afdesign and /dev/null differ diff --git a/invokeai/frontend/web/src/common/icons/design_files/Nodes.svg b/invokeai/frontend/web/src/common/icons/design_files/Nodes.svg deleted file mode 100644 index 51785024e1..0000000000 --- a/invokeai/frontend/web/src/common/icons/design_files/Nodes.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/invokeai/frontend/web/src/common/icons/design_files/Outpaint.afdesign b/invokeai/frontend/web/src/common/icons/design_files/Outpaint.afdesign deleted file mode 100644 index d9dccfb34b..0000000000 Binary files a/invokeai/frontend/web/src/common/icons/design_files/Outpaint.afdesign and /dev/null differ diff --git a/invokeai/frontend/web/src/common/icons/design_files/Outpaint.svg b/invokeai/frontend/web/src/common/icons/design_files/Outpaint.svg deleted file mode 100644 index 042b89864e..0000000000 --- a/invokeai/frontend/web/src/common/icons/design_files/Outpaint.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/invokeai/frontend/web/src/common/icons/design_files/Postprocessing.afdesign b/invokeai/frontend/web/src/common/icons/design_files/Postprocessing.afdesign deleted file mode 100644 index ca28156d0e..0000000000 Binary files a/invokeai/frontend/web/src/common/icons/design_files/Postprocessing.afdesign and /dev/null differ diff --git a/invokeai/frontend/web/src/common/icons/design_files/Postprocessing.svg b/invokeai/frontend/web/src/common/icons/design_files/Postprocessing.svg deleted file mode 100644 index f45b81e6b1..0000000000 --- a/invokeai/frontend/web/src/common/icons/design_files/Postprocessing.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/invokeai/frontend/web/src/common/icons/design_files/TextToImage.afdesign b/invokeai/frontend/web/src/common/icons/design_files/TextToImage.afdesign deleted file mode 100644 index f88d56034e..0000000000 Binary files a/invokeai/frontend/web/src/common/icons/design_files/TextToImage.afdesign and /dev/null differ diff --git a/invokeai/frontend/web/src/common/icons/design_files/TextToImage.svg b/invokeai/frontend/web/src/common/icons/design_files/TextToImage.svg deleted file mode 100644 index 3584538485..0000000000 --- a/invokeai/frontend/web/src/common/icons/design_files/TextToImage.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/invokeai/frontend/web/src/common/icons/design_files/Training.afdesign b/invokeai/frontend/web/src/common/icons/design_files/Training.afdesign deleted file mode 100644 index 4d1a39d738..0000000000 Binary files a/invokeai/frontend/web/src/common/icons/design_files/Training.afdesign and /dev/null differ diff --git a/invokeai/frontend/web/src/common/icons/design_files/Training.svg b/invokeai/frontend/web/src/common/icons/design_files/Training.svg deleted file mode 100644 index d8e2df0e0a..0000000000 --- a/invokeai/frontend/web/src/common/icons/design_files/Training.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/invokeai/frontend/web/src/common/icons/design_files/UnifiedCanvas.afdesign b/invokeai/frontend/web/src/common/icons/design_files/UnifiedCanvas.afdesign deleted file mode 100644 index 4248d3a41d..0000000000 Binary files a/invokeai/frontend/web/src/common/icons/design_files/UnifiedCanvas.afdesign and /dev/null differ diff --git a/invokeai/frontend/web/src/common/icons/design_files/UnifiedCanvas.svg b/invokeai/frontend/web/src/common/icons/design_files/UnifiedCanvas.svg deleted file mode 100644 index fe9a9b800e..0000000000 --- a/invokeai/frontend/web/src/common/icons/design_files/UnifiedCanvas.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/invokeai/frontend/web/src/common/util/parameterTranslation.ts b/invokeai/frontend/web/src/common/util/parameterTranslation.ts deleted file mode 100644 index 918d5caab3..0000000000 --- a/invokeai/frontend/web/src/common/util/parameterTranslation.ts +++ /dev/null @@ -1,348 +0,0 @@ -import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from 'app/constants'; -import { Dimensions } from 'features/canvas/store/canvasTypes'; -import { GenerationState } from 'features/parameters/store/generationSlice'; -import { SystemState } from 'features/system/store/systemSlice'; -import { Vector2d } from 'konva/lib/types'; - -import { - CanvasState, - isCanvasMaskLine, -} from 'features/canvas/store/canvasTypes'; -import createMaskStage from 'features/canvas/util/generateMask'; -import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider'; -import type { - FacetoolType, - UpscalingLevel, -} from 'features/parameters/store/postprocessingSlice'; -import { PostprocessingState } from 'features/parameters/store/postprocessingSlice'; -import { InvokeTabName } from 'features/ui/store/tabMap'; -import openBase64ImageInTab from './openBase64ImageInTab'; -import randomInt from './randomInt'; -import { stringToSeedWeightsArray } from './seedWeightPairs'; -import { getIsImageDataTransparent, getIsImageDataWhite } from './arrayBuffer'; - -export type FrontendToBackendParametersConfig = { - generationMode: InvokeTabName; - generationState: GenerationState; - postprocessingState: PostprocessingState; - canvasState: CanvasState; - systemState: SystemState; - imageToProcessUrl?: string; -}; - -export type BackendGenerationParameters = { - prompt: string; - iterations: number; - steps: number; - cfg_scale: number; - threshold: number; - perlin: number; - height: number; - width: number; - sampler_name: string; - seed: number; - progress_images: boolean; - progress_latents: boolean; - save_intermediates: number; - generation_mode: InvokeTabName; - init_mask: string; - init_img?: string; - fit?: boolean; - seam_size?: number; - seam_blur?: number; - seam_strength?: number; - seam_steps?: number; - tile_size?: number; - infill_method?: string; - force_outpaint?: boolean; - seamless?: boolean; - hires_fix?: boolean; - strength?: number; - invert_mask?: boolean; - inpaint_replace?: number; - bounding_box?: Vector2d & Dimensions; - inpaint_width?: number; - inpaint_height?: number; - with_variations?: Array>; - variation_amount?: number; - enable_image_debugging?: boolean; - h_symmetry_time_pct?: number; - v_symmetry_time_pct?: number; -}; - -export type BackendEsrGanParameters = { - level: UpscalingLevel; - denoise_str: number; - strength: number; -}; - -export type BackendFacetoolParameters = { - type: FacetoolType; - strength: number; - codeformer_fidelity?: number; -}; - -export type BackendParameters = { - generationParameters: BackendGenerationParameters; - esrganParameters: false | BackendEsrGanParameters; - facetoolParameters: false | BackendFacetoolParameters; -}; - -/** - * Translates/formats frontend state into parameters suitable - * for consumption by the API. - */ -export const frontendToBackendParameters = ( - config: FrontendToBackendParametersConfig -): BackendParameters => { - const canvasBaseLayer = getCanvasBaseLayer(); - - const { - generationMode, - generationState, - postprocessingState, - canvasState, - systemState, - } = config; - - const { - codeformerFidelity, - facetoolStrength, - facetoolType, - hiresFix, - hiresStrength, - shouldRunESRGAN, - shouldRunFacetool, - upscalingLevel, - upscalingStrength, - upscalingDenoising, - } = postprocessingState; - - const { - cfgScale, - height, - img2imgStrength, - infillMethod, - initialImage, - iterations, - perlin, - prompt, - negativePrompt, - sampler, - seamBlur, - seamless, - seamSize, - seamSteps, - seamStrength, - seed, - seedWeights, - shouldFitToWidthHeight, - shouldGenerateVariations, - shouldRandomizeSeed, - steps, - threshold, - tileSize, - variationAmount, - width, - shouldUseSymmetry, - horizontalSymmetrySteps, - verticalSymmetrySteps, - } = generationState; - - const { - shouldDisplayInProgressType, - saveIntermediatesInterval, - enableImageDebugging, - } = systemState; - - const generationParameters: BackendGenerationParameters = { - prompt, - iterations, - steps, - cfg_scale: cfgScale, - threshold, - perlin, - height, - width, - sampler_name: sampler, - seed, - progress_images: shouldDisplayInProgressType === 'full-res', - progress_latents: shouldDisplayInProgressType === 'latents', - save_intermediates: saveIntermediatesInterval, - generation_mode: generationMode, - init_mask: '', - }; - - let esrganParameters: false | BackendEsrGanParameters = false; - let facetoolParameters: false | BackendFacetoolParameters = false; - - if (negativePrompt !== '') { - generationParameters.prompt = `${prompt} [${negativePrompt}]`; - } - - generationParameters.seed = shouldRandomizeSeed - ? randomInt(NUMPY_RAND_MIN, NUMPY_RAND_MAX) - : seed; - - // Symmetry Settings - if (shouldUseSymmetry) { - if (horizontalSymmetrySteps > 0) { - generationParameters.h_symmetry_time_pct = Math.max( - 0, - Math.min(1, horizontalSymmetrySteps / steps) - ); - } - - if (verticalSymmetrySteps > 0) { - generationParameters.v_symmetry_time_pct = Math.max( - 0, - Math.min(1, verticalSymmetrySteps / steps) - ); - } - } - - // txt2img exclusive parameters - if (generationMode === 'txt2img') { - generationParameters.hires_fix = hiresFix; - - if (hiresFix) generationParameters.strength = hiresStrength; - } - - // parameters common to txt2img and img2img - if (['txt2img', 'img2img'].includes(generationMode)) { - generationParameters.seamless = seamless; - - if (shouldRunESRGAN) { - esrganParameters = { - level: upscalingLevel, - denoise_str: upscalingDenoising, - strength: upscalingStrength, - }; - } - - if (shouldRunFacetool) { - facetoolParameters = { - type: facetoolType, - strength: facetoolStrength, - }; - if (facetoolType === 'codeformer') { - facetoolParameters.codeformer_fidelity = codeformerFidelity; - } - } - } - - // img2img exclusive parameters - if (generationMode === 'img2img' && initialImage) { - generationParameters.init_img = - typeof initialImage === 'string' ? initialImage : initialImage.url; - generationParameters.strength = img2imgStrength; - generationParameters.fit = shouldFitToWidthHeight; - } - - // inpainting exclusive parameters - if (generationMode === 'unifiedCanvas' && canvasBaseLayer) { - const { - layerState: { objects }, - boundingBoxCoordinates, - boundingBoxDimensions, - stageScale, - isMaskEnabled, - shouldPreserveMaskedArea, - boundingBoxScaleMethod: boundingBoxScale, - scaledBoundingBoxDimensions, - } = canvasState; - - const boundingBox = { - ...boundingBoxCoordinates, - ...boundingBoxDimensions, - }; - - const { dataURL: maskDataURL, imageData: maskImageData } = createMaskStage( - isMaskEnabled ? objects.filter(isCanvasMaskLine) : [], - boundingBox - ); - - generationParameters.init_mask = maskDataURL; - - generationParameters.fit = false; - - generationParameters.strength = img2imgStrength; - - generationParameters.invert_mask = shouldPreserveMaskedArea; - - generationParameters.bounding_box = boundingBox; - - const tempScale = canvasBaseLayer.scale(); - - canvasBaseLayer.scale({ - x: 1 / stageScale, - y: 1 / stageScale, - }); - - const absPos = canvasBaseLayer.getAbsolutePosition(); - - const imageDataURL = canvasBaseLayer.toDataURL({ - x: boundingBox.x + absPos.x, - y: boundingBox.y + absPos.y, - width: boundingBox.width, - height: boundingBox.height, - }); - - const ctx = canvasBaseLayer.getContext(); - const imageData = ctx.getImageData( - boundingBox.x + absPos.x, - boundingBox.y + absPos.y, - boundingBox.width, - boundingBox.height - ); - - const doesBaseHaveTransparency = getIsImageDataTransparent(imageData); - const doesMaskHaveTransparency = getIsImageDataWhite(maskImageData); - - if (enableImageDebugging) { - openBase64ImageInTab([ - { base64: maskDataURL, caption: 'mask sent as init_mask' }, - { base64: imageDataURL, caption: 'image sent as init_img' }, - ]); - } - - canvasBaseLayer.scale(tempScale); - - generationParameters.init_img = imageDataURL; - - generationParameters.progress_images = false; - - if (boundingBoxScale !== 'none') { - generationParameters.inpaint_width = scaledBoundingBoxDimensions.width; - generationParameters.inpaint_height = scaledBoundingBoxDimensions.height; - } - - generationParameters.seam_size = seamSize; - generationParameters.seam_blur = seamBlur; - generationParameters.seam_strength = seamStrength; - generationParameters.seam_steps = seamSteps; - generationParameters.tile_size = tileSize; - generationParameters.infill_method = infillMethod; - generationParameters.force_outpaint = false; - } - - if (shouldGenerateVariations) { - generationParameters.variation_amount = variationAmount; - if (seedWeights) { - generationParameters.with_variations = - stringToSeedWeightsArray(seedWeights); - } - } else { - generationParameters.variation_amount = 0; - } - - if (enableImageDebugging) { - generationParameters.enable_image_debugging = enableImageDebugging; - } - - return { - generationParameters, - esrganParameters, - facetoolParameters, - }; -}; diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx index e111715e39..69eed2b46a 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx @@ -21,7 +21,6 @@ import { CanvasLayer, LAYER_NAMES_DICT, } from 'features/canvas/store/canvasTypes'; -import { mergeAndUploadCanvas } from 'features/canvas/store/thunks/mergeAndUploadCanvas'; import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider'; import { systemSelector } from 'features/system/store/systemSelectors'; import { isEqual } from 'lodash-es'; diff --git a/invokeai/frontend/web/src/features/canvas/store/thunks/mergeAndUploadCanvas.ts b/invokeai/frontend/web/src/features/canvas/store/thunks/mergeAndUploadCanvas.ts deleted file mode 100644 index e14871e11b..0000000000 --- a/invokeai/frontend/web/src/features/canvas/store/thunks/mergeAndUploadCanvas.ts +++ /dev/null @@ -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 => - 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)); - }; diff --git a/invokeai/frontend/web/src/features/canvas/util/copyImage.ts b/invokeai/frontend/web/src/features/canvas/util/copyImage.ts deleted file mode 100644 index 06abbe47fe..0000000000 --- a/invokeai/frontend/web/src/features/canvas/util/copyImage.ts +++ /dev/null @@ -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; diff --git a/invokeai/frontend/web/src/features/canvas/util/downloadFile.ts b/invokeai/frontend/web/src/features/canvas/util/downloadFile.ts deleted file mode 100644 index abb902d019..0000000000 --- a/invokeai/frontend/web/src/features/canvas/util/downloadFile.ts +++ /dev/null @@ -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; diff --git a/invokeai/frontend/web/src/features/canvas/util/layerToDataURL.ts b/invokeai/frontend/web/src/features/canvas/util/layerToDataURL.ts deleted file mode 100644 index 14d402c08c..0000000000 --- a/invokeai/frontend/web/src/features/canvas/util/layerToDataURL.ts +++ /dev/null @@ -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; diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGallery.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGallery.tsx deleted file mode 100644 index 706ff215dc..0000000000 --- a/invokeai/frontend/web/src/features/gallery/components/ImageGallery.tsx +++ /dev/null @@ -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( -// galleryWidth >= GALLERY_SHOW_BUTTONS_MIN_WIDTH -// ); - -// const [isResizing, setIsResizing] = useState(false); -// const [galleryResizeHeight, setGalleryResizeHeight] = useState(0); - -// const galleryRef = useRef(null); -// const galleryContainerRef = useRef(null); -// const timeoutIdRef = useRef(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 ( -// -// -// -// | React.TouchEvent, -// _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`; -// }} -// > -// -// -// {isResizing && ( -// -// )} -// -// -// ); -// } - -export default {}; diff --git a/invokeai/frontend/web/src/features/gallery/hooks/useGetImageByUuid.ts b/invokeai/frontend/web/src/features/gallery/hooks/useGetImageByUuid.ts deleted file mode 100644 index 27b2635e31..0000000000 --- a/invokeai/frontend/web/src/features/gallery/hooks/useGetImageByUuid.ts +++ /dev/null @@ -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; diff --git a/invokeai/frontend/web/src/features/nodes/examples/iterationGraph.ts b/invokeai/frontend/web/src/features/nodes/examples/iterationGraph.ts deleted file mode 100644 index 3a5b6fb888..0000000000 --- a/invokeai/frontend/web/src/features/nodes/examples/iterationGraph.ts +++ /dev/null @@ -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', - }, - }, - ], -}; diff --git a/invokeai/frontend/web/src/features/nodes/store/selectors/invocationTemplatesSelector.ts b/invokeai/frontend/web/src/features/nodes/store/selectors/invocationTemplatesSelector.ts deleted file mode 100644 index 803cdbfb74..0000000000 --- a/invokeai/frontend/web/src/features/nodes/store/selectors/invocationTemplatesSelector.ts +++ /dev/null @@ -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 -); diff --git a/invokeai/frontend/web/src/features/nodes/util/getGenerationMode.ts b/invokeai/frontend/web/src/features/nodes/util/getGenerationMode.ts deleted file mode 100644 index 28b316be40..0000000000 --- a/invokeai/frontend/web/src/features/nodes/util/getGenerationMode.ts +++ /dev/null @@ -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'; - } -}; diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasGraph.ts index 227e4b3a12..88ccc375c5 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasGraph.ts @@ -13,12 +13,8 @@ import { buildTxt2ImgNode } from '../nodeBuilders/buildTextToImageNode'; import { buildRangeNode } from '../nodeBuilders/buildRangeNode'; import { buildIterateNode } from '../nodeBuilders/buildIterateNode'; import { buildEdges } from '../edgeBuilders/buildEdges'; -import { getCanvasData } from 'features/canvas/util/getCanvasData'; import { log } from 'app/logging/useLogger'; import { buildInpaintNode } from '../nodeBuilders/buildInpaintNode'; -import { getCanvasGenerationMode } from 'features/canvas/util/getCanvasGenerationMode'; -import { blobToDataURL } from 'features/canvas/util/blobToDataURL'; -import openBase64ImageInTab from 'common/util/openBase64ImageInTab'; const moduleLog = log.child({ namespace: 'buildCanvasGraph' }); @@ -46,8 +42,9 @@ const buildBaseNode = ( /** * Builds the Canvas workflow graph and image blobs. */ -export const buildCanvasGraphAndBlobs = async ( - state: RootState +export const buildCanvasGraphComponents = async ( + state: RootState, + generationMode: 'txt2img' | 'img2img' | 'inpaint' | 'outpaint' ): Promise< | { rangeNode: RangeInvocation | RandomRangeInvocation; @@ -57,34 +54,9 @@ export const buildCanvasGraphAndBlobs = async ( | ImageToImageInvocation | InpaintInvocation; edges: Edge[]; - baseBlob: Blob; - maskBlob: Blob; - generationMode: 'txt2img' | 'img2img' | 'inpaint' | 'outpaint'; } | undefined > => { - const canvasData = await getCanvasData(state); - - if (!canvasData) { - moduleLog.error('Unable to create canvas data'); - return; - } - - const { baseBlob, baseImageData, maskBlob, maskImageData } = canvasData; - - const generationMode = getCanvasGenerationMode(baseImageData, maskImageData); - - if (state.system.enableImageDebugging) { - const baseDataURL = await blobToDataURL(baseBlob); - const maskDataURL = await blobToDataURL(maskBlob); - openBase64ImageInTab([ - { base64: maskDataURL, caption: 'mask b64' }, - { base64: baseDataURL, caption: 'image b64' }, - ]); - } - - moduleLog.debug(`Generation mode: ${generationMode}`); - // The base node is a txt2img, img2img or inpaint node const baseNode = buildBaseNode(generationMode, state); @@ -130,8 +102,5 @@ export const buildCanvasGraphAndBlobs = async ( iterateNode, baseNode, edges, - baseBlob, - maskBlob, - generationMode, }; }; diff --git a/invokeai/frontend/web/src/features/parameters/components/ProgressImage.tsx b/invokeai/frontend/web/src/features/parameters/components/ProgressImage.tsx deleted file mode 100644 index 869f4dbc63..0000000000 --- a/invokeai/frontend/web/src/features/parameters/components/ProgressImage.tsx +++ /dev/null @@ -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 ? ( - - - - ) : ( - - - - ); -}; - -export default memo(ProgressImage); diff --git a/invokeai/frontend/web/src/features/parameters/components/_ProgressImagePreview.tsx b/invokeai/frontend/web/src/features/parameters/components/_ProgressImagePreview.tsx deleted file mode 100644 index 09fad6acda..0000000000 --- a/invokeai/frontend/web/src/features/parameters/components/_ProgressImagePreview.tsx +++ /dev/null @@ -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 ( - <> - - dispatch(setShouldShowProgressImages(!showProgressWindow)) - } - tooltip={t('ui.showProgressImages')} - isChecked={showProgressWindow} - sx={{ - position: 'absolute', - bottom: 4, - insetInlineStart: 4, - }} - aria-label={t('ui.showProgressImages')} - icon={} - /> - {showProgressWindow && ( - { - dispatch(floatingProgressImageMoved({ x: d.x, y: d.y })); - }} - onResizeStop={(e, direction, ref, delta, position) => { - const newRect: Partial = {}; - - 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)); - }} - > - - - - - Progress Images - - - dispatch(setShouldShowProgressImages(false))} - aria-label={t('ui.hideProgressImages')} - size="xs" - icon={} - variant="ghost" - /> - - - - - )} - - ); -}; - -export default memo(ProgressImagePreview); diff --git a/invokeai/frontend/web/src/features/parameters/store/hiresSlice.ts b/invokeai/frontend/web/src/features/parameters/store/hiresSlice.ts deleted file mode 100644 index 89827270d1..0000000000 --- a/invokeai/frontend/web/src/features/parameters/store/hiresSlice.ts +++ /dev/null @@ -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) => { - state.facetoolStrength = action.payload; - }, - setCodeformerFidelity: (state, action: PayloadAction) => { - state.codeformerFidelity = action.payload; - }, - setUpscalingLevel: (state, action: PayloadAction) => { - state.upscalingLevel = action.payload; - }, - setUpscalingDenoising: (state, action: PayloadAction) => { - state.upscalingDenoising = action.payload; - }, - setUpscalingStrength: (state, action: PayloadAction) => { - state.upscalingStrength = action.payload; - }, - setHiresFix: (state, action: PayloadAction) => { - state.hiresFix = action.payload; - }, - setHiresStrength: (state, action: PayloadAction) => { - state.hiresStrength = action.payload; - }, - resetPostprocessingState: (state) => { - return { - ...state, - ...initialPostprocessingState, - }; - }, - setShouldRunFacetool: (state, action: PayloadAction) => { - state.shouldRunFacetool = action.payload; - }, - setFacetoolType: (state, action: PayloadAction) => { - state.facetoolType = action.payload; - }, - setShouldRunESRGAN: (state, action: PayloadAction) => { - state.shouldRunESRGAN = action.payload; - }, - setShouldLoopback: (state, action: PayloadAction) => { - state.shouldLoopback = action.payload; - }, - }, -}); - -export const { - resetPostprocessingState, - setCodeformerFidelity, - setFacetoolStrength, - setFacetoolType, - setHiresFix, - setHiresStrength, - setShouldLoopback, - setShouldRunESRGAN, - setShouldRunFacetool, - setUpscalingLevel, - setUpscalingDenoising, - setUpscalingStrength, -} = postprocessingSlice.actions; - -export default postprocessingSlice.reducer; diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx index aa3d274dc3..54556124c9 100644 --- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx +++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx @@ -90,12 +90,6 @@ type SettingsModalProps = { children: ReactElement; }; -/** - * Modal for app settings. Also provides Reset functionality in which the - * app's localstorage is wiped via redux-persist. - * - * Secondary post-reset modal is included here. - */ const SettingsModal = ({ children }: SettingsModalProps) => { const dispatch = useAppDispatch(); const { t } = useTranslation(); diff --git a/invokeai/frontend/web/src/features/system/hooks/useIsTabDisabled.ts b/invokeai/frontend/web/src/features/system/hooks/useIsTabDisabled.ts deleted file mode 100644 index 1d14ac2243..0000000000 --- a/invokeai/frontend/web/src/features/system/hooks/useIsTabDisabled.ts +++ /dev/null @@ -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; -}; diff --git a/invokeai/frontend/web/src/features/ui/components/common/Scrollable.tsx b/invokeai/frontend/web/src/features/ui/components/common/Scrollable.tsx deleted file mode 100644 index 91a9b14e31..0000000000 --- a/invokeai/frontend/web/src/features/ui/components/common/Scrollable.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import { Box, ChakraProps } from '@chakra-ui/react'; -import { throttle } from 'lodash-es'; -import { ReactNode, useEffect, useRef } from 'react'; - -const scrollShadowBaseStyles: ChakraProps['sx'] = { - position: 'absolute', - width: 'full', - height: 24, - left: 0, - pointerEvents: 'none', - transition: 'opacity 0.2s ease-in-out', -}; - -type ScrollableProps = { - children: ReactNode; -}; - -const Scrollable = ({ children }: ScrollableProps) => { - const scrollableRef = useRef(null); - const topShadowRef = useRef(null); - const bottomShadowRef = useRef(null); - - const updateScrollShadowOpacity = throttle( - () => { - if ( - !scrollableRef.current || - !topShadowRef.current || - !bottomShadowRef.current - ) { - return; - } - const { scrollTop, scrollHeight, offsetHeight } = scrollableRef.current; - - if (scrollTop > 0) { - topShadowRef.current.style.opacity = '1'; - } else { - topShadowRef.current.style.opacity = '0'; - } - - if (scrollTop >= scrollHeight - offsetHeight) { - bottomShadowRef.current.style.opacity = '0'; - } else { - bottomShadowRef.current.style.opacity = '1'; - } - }, - 33, - { leading: true } - ); - - useEffect(() => { - updateScrollShadowOpacity(); - }, [updateScrollShadowOpacity]); - - return ( - - - {children} - - - - - ); -}; - -export default Scrollable; diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasMergeVisible.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasMergeVisible.tsx index bf47673231..e836766f1a 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasMergeVisible.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasMergeVisible.tsx @@ -3,7 +3,6 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import IAIIconButton from 'common/components/IAIIconButton'; import { canvasMerged } from 'features/canvas/store/actions'; import { isStagingSelector } from 'features/canvas/store/canvasSelectors'; -import { mergeAndUploadCanvas } from 'features/canvas/store/thunks/mergeAndUploadCanvas'; import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider'; import { useHotkeys } from 'react-hotkeys-hook'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasWorkarea.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasWorkarea.tsx deleted file mode 100644 index dbf4041edf..0000000000 --- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasWorkarea.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { useAppSelector } from 'app/store/storeHooks'; -import { memo } from 'react'; -import { RootState } from 'app/store/store'; -import UnifiedCanvasContentBeta from './UnifiedCanvasBeta/UnifiedCanvasContentBeta'; -import UnifiedCanvasContent from './UnifiedCanvasContent'; - -const CanvasWorkspace = () => { - const shouldUseCanvasBetaLayout = useAppSelector( - (state: RootState) => state.ui.shouldUseCanvasBetaLayout - ); - - return shouldUseCanvasBetaLayout ? ( - - ) : ( - - ); -}; - -export default memo(CanvasWorkspace); diff --git a/invokeai/frontend/web/src/features/ui/hooks/useDirection.ts b/invokeai/frontend/web/src/features/ui/hooks/useDirection.ts deleted file mode 100644 index b5fcb499fa..0000000000 --- a/invokeai/frontend/web/src/features/ui/hooks/useDirection.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { useTheme } from '@chakra-ui/react'; -import { useMemo } from 'react'; -import { LangDirection } from '../components/common/ResizableDrawer/types'; - -export const useLangDirection = () => { - const theme = useTheme(); - - const langDirection = useMemo( - () => theme.direction as LangDirection, - [theme.direction] - ); - - return langDirection; -}; diff --git a/invokeai/frontend/web/src/services/fixtures/request.ts b/invokeai/frontend/web/src/services/fixtures/request.ts index 745f687743..51c5f0f708 100644 --- a/invokeai/frontend/web/src/services/fixtures/request.ts +++ b/invokeai/frontend/web/src/services/fixtures/request.ts @@ -3,12 +3,14 @@ /* eslint-disable */ /** + * DO NOT DELETE EVEN THOUGH IT IS NOT USED! + * * Custom `request.ts` file for OpenAPI code generator. * * Patches the request logic in such a way that we can extract headers from requests. * * Copied from https://github.com/ferdikoomen/openapi-typescript-codegen/issues/829#issuecomment-1228224477 - * + * * This file should be excluded in `tsconfig.json` and ignored by prettier/eslint! */ diff --git a/invokeai/frontend/web/src/services/util/makeGraphOfXImages.ts b/invokeai/frontend/web/src/services/util/makeGraphOfXImages.ts deleted file mode 100644 index 837a053664..0000000000 --- a/invokeai/frontend/web/src/services/util/makeGraphOfXImages.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { Graph, TextToImageInvocation } from '../api'; - -/** - * Make a graph of however many images - */ -export const makeGraphOfXImages = (numberOfImages: string) => - Array.from(Array(numberOfImages)) - .map( - (_val, i): TextToImageInvocation => ({ - id: i.toString(), - type: 'txt2img', - prompt: 'pizza', - steps: 50, - seed: 123, - scheduler: 'ddim', - }) - ) - .reduce( - (acc, val: TextToImageInvocation) => { - if (acc.nodes) acc.nodes[val.id] = val; - return acc; - }, - { nodes: {} } as Graph - ); diff --git a/invokeai/frontend/web/src/theme/themeTypes.d.ts b/invokeai/frontend/web/src/theme/themeTypes.d.ts index aeb7ae0411..dce386168d 100644 --- a/invokeai/frontend/web/src/theme/themeTypes.d.ts +++ b/invokeai/frontend/web/src/theme/themeTypes.d.ts @@ -1,4 +1,4 @@ -export declare type InvokeAIThemeColors = { +export type InvokeAIThemeColors = { base: Partial; accent: Partial; working: Partial; @@ -8,7 +8,7 @@ export declare type InvokeAIThemeColors = { gridLineColor: string; }; -export declare type InvokeAIPaletteSteps = { +export type InvokeAIPaletteSteps = { 0: string; 50: string; 100: string; diff --git a/invokeai/frontend/web/yarn.lock b/invokeai/frontend/web/yarn.lock index de2925ae8c..0df6d3c9a3 100644 --- a/invokeai/frontend/web/yarn.lock +++ b/invokeai/frontend/web/yarn.lock @@ -50,7 +50,7 @@ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.4.tgz#94003fdfc520bbe2875d4ae557b43ddb6d880f17" integrity sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw== -"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.19.4", "@babel/runtime@^7.20.6", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.19.4", "@babel/runtime@^7.20.6", "@babel/runtime@^7.9.2": version "7.21.0" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673" integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw== @@ -2613,11 +2613,6 @@ clone@^1.0.2: resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e" integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg== -clsx@^1.1.1: - version "1.2.1" - resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12" - integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== - code-block-writer@^12.0.0: version "12.0.0" resolved "https://registry.yarnpkg.com/code-block-writer/-/code-block-writer-12.0.0.tgz#4dd58946eb4234105aff7f0035977b2afdc2a770" @@ -3140,14 +3135,6 @@ doctrine@^3.0.0: dependencies: esutils "^2.0.2" -dom-helpers@^5.0.1: - version "5.2.1" - resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902" - integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA== - dependencies: - "@babel/runtime" "^7.8.7" - csstype "^3.0.2" - dot-prop@^5.2.0: version "5.3.0" resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88" @@ -3575,11 +3562,6 @@ fast-loops@^1.1.3: resolved "https://registry.yarnpkg.com/fast-loops/-/fast-loops-1.1.3.tgz#ce96adb86d07e7bf9b4822ab9c6fac9964981f75" integrity sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g== -fast-memoize@^2.5.1: - version "2.5.2" - resolved "https://registry.yarnpkg.com/fast-memoize/-/fast-memoize-2.5.2.tgz#79e3bb6a4ec867ea40ba0e7146816f6cdce9b57e" - integrity sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw== - fast-printf@^1.6.9: version "1.6.9" resolved "https://registry.yarnpkg.com/fast-printf/-/fast-printf-1.6.9.tgz#212f56570d2dc8ccdd057ee93d50dd414d07d676" @@ -5458,13 +5440,6 @@ rc@1.2.8, rc@^1.2.7, rc@^1.2.8: minimist "^1.2.0" strip-json-comments "~2.0.1" -re-resizable@6.9.6: - version "6.9.6" - resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.9.6.tgz#b95d37e3821481b56ddfb1e12862940a791e827d" - integrity sha512-0xYKS5+Z0zk+vICQlcZW+g54CcJTTmHluA7JUUgvERDxnKAnytylcyPsA+BSFi759s5hPlHmBRegFrwXs2FuBQ== - dependencies: - fast-memoize "^2.5.1" - re-resizable@^6.9.9: version "6.9.9" resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.9.9.tgz#99e8b31c67a62115dc9c5394b7e55892265be216" @@ -5490,14 +5465,6 @@ react-dom@^18.2.0: loose-envify "^1.1.0" scheduler "^0.23.0" -react-draggable@4.4.5: - version "4.4.5" - resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.5.tgz#9e37fe7ce1a4cf843030f521a0a4cc41886d7e7c" - integrity sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g== - dependencies: - clsx "^1.1.1" - prop-types "^15.8.1" - react-dropzone@^14.2.3: version "14.2.3" resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-14.2.3.tgz#0acab68308fda2d54d1273a1e626264e13d4e84b" @@ -5562,15 +5529,7 @@ react-is@^18.0.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== -react-konva-utils@^1.0.4: - version "1.0.4" - resolved "https://registry.yarnpkg.com/react-konva-utils/-/react-konva-utils-1.0.4.tgz#bce739a207f02fc5f0246f6ab16a0e295f5544af" - integrity sha512-K1J1K9MoVNGFrUxYt+dn7TUVqpppW3Y0fRcf42Ws1wzTQ2Od4qicCom9jnGxLiwh8zyhYaHAUn3hztgfTyYF7g== - dependencies: - react-konva "^18.0.0-0" - use-image "^1.1.0" - -react-konva@^18.0.0-0, react-konva@^18.2.7: +react-konva@^18.2.7: version "18.2.7" resolved "https://registry.yarnpkg.com/react-konva/-/react-konva-18.2.7.tgz#f01735ac9ae35a7cd0f3ca359a898374ce791d04" integrity sha512-Q52ghaIR+2g3x14V5aIyt7VWNqPnWRotILo0Nj4YWVbNQisozrTJJ3/w68qb5Ar2fsYo7yXb4T6Nt4yZcGd2yg== @@ -5624,15 +5583,6 @@ react-resizable-panels@^0.0.42: resolved "https://registry.yarnpkg.com/react-resizable-panels/-/react-resizable-panels-0.0.42.tgz#e1a5d7fde7be4d18f32d0e021a0b4edb28b9edfe" integrity sha512-nOaN9DeUTsmKjN3MFGaLd35kngGyO29SHRLdBRafYR1SV2F/LbWbpVUKVPwL2fBBTnQe2/rqOQwT4k+3cKeK+w== -react-rnd@^10.4.1: - version "10.4.1" - resolved "https://registry.yarnpkg.com/react-rnd/-/react-rnd-10.4.1.tgz#9e1c3f244895d7862ef03be98b2a620848c3fba1" - integrity sha512-0m887AjQZr6p2ADLNnipquqsDq4XJu/uqVqI3zuoGD19tRm6uB83HmZWydtkilNp5EWsOHbLGF4IjWMdd5du8Q== - dependencies: - re-resizable "6.9.6" - react-draggable "4.4.5" - tslib "2.3.1" - react-style-singleton@^2.2.1: version "2.2.1" resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4" @@ -5642,16 +5592,6 @@ react-style-singleton@^2.2.1: invariant "^2.2.4" tslib "^2.0.0" -react-transition-group@^4.4.5: - version "4.4.5" - resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1" - integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g== - dependencies: - "@babel/runtime" "^7.5.5" - dom-helpers "^5.0.1" - loose-envify "^1.4.0" - prop-types "^15.6.2" - react-universal-interface@^0.6.2: version "0.6.2" resolved "https://registry.yarnpkg.com/react-universal-interface/-/react-universal-interface-0.6.2.tgz#5e8d438a01729a4dbbcbeeceb0b86be146fe2b3b" @@ -5722,21 +5662,11 @@ readdirp@~3.6.0: dependencies: picomatch "^2.2.1" -redux-deep-persist@^1.0.7: - version "1.0.7" - resolved "https://registry.yarnpkg.com/redux-deep-persist/-/redux-deep-persist-1.0.7.tgz#fbbd00dcee6111b42624c9d8590b7e124b94476e" - integrity sha512-PsD5UXbfCFvDruIPIHKAyaZ3wPhEWBMU8Rtcr/c1pXJT8aYoKbgKUS8JBkaWc3EB1ONlnLTdDDmnC/TOD39hqA== - redux-dynamic-middlewares@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/redux-dynamic-middlewares/-/redux-dynamic-middlewares-2.2.0.tgz#6835dd6d4f2fd975266376b45dcae0141320ae97" integrity sha512-GHESQC+Y0PV98ZBoaC6br6cDOsNiM1Cu4UleGMqMWCXX03jIr3BoozYVrRkLVVAl4sC216chakMnZOu6SwNdGA== -redux-persist@^6.0.0: - version "6.0.0" - resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-6.0.0.tgz#b4d2972f9859597c130d40d4b146fecdab51b3a8" - integrity sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ== - redux-remember@^3.3.1: version "3.3.1" resolved "https://registry.yarnpkg.com/redux-remember/-/redux-remember-3.3.1.tgz#fad0b3af81458d8e40a54cd30be148c17e40bda9" @@ -6510,11 +6440,6 @@ tsconfig-paths@^4.0.0: minimist "^1.2.6" strip-bom "^3.0.0" -tslib@2.3.1: - version "2.3.1" - resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01" - integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw== - tslib@2.4.0: version "2.4.0" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"