From 2847f1b5ac8f2960b92a8a1416964b30e8e5573a Mon Sep 17 00:00:00 2001 From: Mary Hipp Date: Thu, 18 Jul 2024 16:48:57 -0400 Subject: [PATCH] add vae toggle, lint fix --- .../listeners/enqueueRequestedUpscale.ts | 21 +++--------------- .../listeners/imageDropped.ts | 2 +- .../listeners/imageUploaded.ts | 2 +- .../listeners/modelsLoaded.ts | 2 +- invokeai/frontend/web/src/app/store/store.ts | 2 +- .../src/common/hooks/useIsReadyToEnqueue.ts | 4 ++-- .../SingleSelectionMenuItems.tsx | 2 +- .../graph/buildMultidiffusionUpscaleGraph.ts | 18 +++++++++------ .../components/Upscale/ParamSpandrelModel.tsx | 8 +++---- .../Upscale/ParamTiledVAEToggle.tsx | 22 +++++++++++++++++++ .../parameters/hooks/useIsAllowedToUpscale.ts | 2 +- .../features/parameters/store/upscaleSlice.ts | 14 +++++++----- .../AdvancedSettingsAccordion.tsx | 8 +++---- .../UpscaleInitialImage.tsx | 14 ++++++------ .../UpscaleSettingsAccordion.tsx | 19 +++++++++------- .../UpscaleSizeDetails.tsx | 2 +- .../src/features/ui/components/InvokeTabs.tsx | 2 +- .../ParametersPanelUpscale.tsx | 7 ++---- 18 files changed, 83 insertions(+), 68 deletions(-) create mode 100644 invokeai/frontend/web/src/features/parameters/components/Upscale/ParamTiledVAEToggle.tsx diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedUpscale.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedUpscale.ts index f94075d3ce..6c3831208d 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedUpscale.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedUpscale.ts @@ -2,41 +2,26 @@ import { enqueueRequested } from 'app/store/actions'; import type { AppStartListening } from 'app/store/middleware/listenerMiddleware'; import { isImageViewerOpenChanged } from 'features/gallery/store/gallerySlice'; import { prepareLinearUIBatch } from 'features/nodes/util/graph/buildLinearBatchConfig'; +import { buildMultidiffusionUpscsaleGraph } from 'features/nodes/util/graph/buildMultidiffusionUpscaleGraph'; import { queueApi } from 'services/api/endpoints/queue'; -import { createIsAllowedToUpscaleSelector } from '../../../../../features/parameters/hooks/useIsAllowedToUpscale'; -import { toast } from '../../../../../features/toast/toast'; -import { t } from 'i18next'; -import { logger } from '../../../../logging/logger'; -import { useAppSelector } from '../../../storeHooks'; -import { buildMultidiffusionUpscsaleGraph } from '../../../../../features/nodes/util/graph/buildMultidiffusionUpscaleGraph'; export const addEnqueueRequestedUpscale = (startAppListening: AppStartListening) => { startAppListening({ predicate: (action): action is ReturnType => enqueueRequested.match(action) && action.payload.tabName === 'upscaling', effect: async (action, { getState, dispatch }) => { - console.log("in listener") - const log = logger('session'); const state = getState(); const { shouldShowProgressInViewer } = state.ui; - const model = state.generation.model; const { prepend } = action.payload; const graph = await buildMultidiffusionUpscsaleGraph(state) - - - // const batchConfig = prepareLinearUIBatch(state, graph, prepend); + const batchConfig = prepareLinearUIBatch(state, graph, prepend); const req = dispatch( - queueApi.endpoints.enqueueBatch.initiate({ - batch: { - graph, - runs: 1, - }, - }, { + queueApi.endpoints.enqueueBatch.initiate(batchConfig, { fixedCacheKey: 'enqueueBatch', }) ); diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDropped.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDropped.ts index eac8922a79..a65c31b7cd 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDropped.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDropped.ts @@ -23,8 +23,8 @@ import { } from 'features/gallery/store/gallerySlice'; import { fieldImageValueChanged } from 'features/nodes/store/nodesSlice'; import { selectOptimalDimension } from 'features/parameters/store/generationSlice'; +import { upscaleInitialImageChanged } from 'features/parameters/store/upscaleSlice'; import { imagesApi } from 'services/api/endpoints/images'; -import { upscaleInitialImageChanged } from '../../../../../features/parameters/store/upscaleSlice'; export const dndDropped = createAction<{ overData: TypesafeDroppableData; diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts index 5a4d5dc078..8ffe0f2633 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts @@ -14,12 +14,12 @@ import { import { selectListBoardsQueryArgs } from 'features/gallery/store/gallerySelectors'; import { fieldImageValueChanged } from 'features/nodes/store/nodesSlice'; import { selectOptimalDimension } from 'features/parameters/store/generationSlice'; +import { upscaleInitialImageChanged } from 'features/parameters/store/upscaleSlice'; import { toast } from 'features/toast/toast'; import { t } from 'i18next'; import { omit } from 'lodash-es'; import { boardsApi } from 'services/api/endpoints/boards'; import { imagesApi } from 'services/api/endpoints/images'; -import { upscaleInitialImageChanged } from '../../../../../features/parameters/store/upscaleSlice'; export const addImageUploadedFulfilledListener = (startAppListening: AppStartListening) => { startAppListening({ diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelsLoaded.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelsLoaded.ts index eef1f8f49f..fd9c80d563 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelsLoaded.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelsLoaded.ts @@ -10,6 +10,7 @@ import { heightChanged, widthChanged } from 'features/controlLayers/store/contro import { loraRemoved } from 'features/lora/store/loraSlice'; import { calculateNewSize } from 'features/parameters/components/ImageSize/calculateNewSize'; import { modelChanged, vaeSelected } from 'features/parameters/store/generationSlice'; +import { upscaleModelChanged } from 'features/parameters/store/upscaleSlice'; import { zParameterModel, zParameterVAEModel } from 'features/parameters/types/parameterSchemas'; import { getIsSizeOptimal, getOptimalDimension } from 'features/parameters/util/optimalDimension'; import { refinerModelChanged } from 'features/sdxl/store/sdxlSlice'; @@ -18,7 +19,6 @@ import type { Logger } from 'roarr'; import { modelConfigsAdapterSelectors, modelsApi } from 'services/api/endpoints/models'; import type { AnyModelConfig } from 'services/api/types'; import { isNonRefinerMainModelConfig, isRefinerMainModelModelConfig, isSpandrelImageToImageModelConfig, isVAEModelConfig } from 'services/api/types'; -import { upscaleModelChanged } from '../../../../../features/parameters/store/upscaleSlice'; export const addModelsLoadedListener = (startAppListening: AppStartListening) => { startAppListening({ diff --git a/invokeai/frontend/web/src/app/store/store.ts b/invokeai/frontend/web/src/app/store/store.ts index 804d3629ab..d73e67d635 100644 --- a/invokeai/frontend/web/src/app/store/store.ts +++ b/invokeai/frontend/web/src/app/store/store.ts @@ -26,6 +26,7 @@ import { workflowSettingsPersistConfig, workflowSettingsSlice } from 'features/n import { workflowPersistConfig, workflowSlice } from 'features/nodes/store/workflowSlice'; import { generationPersistConfig, generationSlice } from 'features/parameters/store/generationSlice'; import { postprocessingPersistConfig, postprocessingSlice } from 'features/parameters/store/postprocessingSlice'; +import { upscalePersistConfig, upscaleSlice } from 'features/parameters/store/upscaleSlice'; import { queueSlice } from 'features/queue/store/queueSlice'; import { sdxlPersistConfig, sdxlSlice } from 'features/sdxl/store/sdxlSlice'; import { configSlice } from 'features/system/store/configSlice'; @@ -46,7 +47,6 @@ import { actionSanitizer } from './middleware/devtools/actionSanitizer'; import { actionsDenylist } from './middleware/devtools/actionsDenylist'; import { stateSanitizer } from './middleware/devtools/stateSanitizer'; import { listenerMiddleware } from './middleware/listenerMiddleware'; -import { upscalePersistConfig, upscaleSlice } from '../../features/parameters/store/upscaleSlice'; const allReducers = { [canvasSlice.name]: canvasSlice.reducer, diff --git a/invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts b/invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts index ba78a02ab3..d1876484b6 100644 --- a/invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts +++ b/invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts @@ -15,13 +15,13 @@ import type { Templates } from 'features/nodes/store/types'; import { selectWorkflowSettingsSlice } from 'features/nodes/store/workflowSettingsSlice'; import { isInvocationNode } from 'features/nodes/types/invocation'; import { selectGenerationSlice } from 'features/parameters/store/generationSlice'; +import { selectUpscalelice } from 'features/parameters/store/upscaleSlice'; import { selectSystemSlice } from 'features/system/store/systemSlice'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import i18n from 'i18next'; import { forEach, upperFirst } from 'lodash-es'; import { useMemo } from 'react'; import { getConnectedEdges } from 'reactflow'; -import { selectUpscalelice } from '../../features/parameters/store/upscaleSlice'; const LAYER_TYPE_TO_TKEY: Record = { initial_image_layer: 'controlLayers.globalInitialImage', @@ -196,7 +196,7 @@ const createSelector = (templates: Templates) => reasons.push({ prefix, content }); } }); - } else if (activeTabName == "upscaling") { + } else if (activeTabName === "upscaling") { if (!upscale.upscaleInitialImage) { reasons.push({ content: "No Initial image" }) } diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx index 3b99a88229..d0084ab416 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx @@ -13,6 +13,7 @@ import { sentImageToCanvas, sentImageToImg2Img } from 'features/gallery/store/ac import { imageToCompareChanged } from 'features/gallery/store/gallerySlice'; import { $templates } from 'features/nodes/store/nodesSlice'; import { selectOptimalDimension } from 'features/parameters/store/generationSlice'; +import { upscaleInitialImageChanged } from 'features/parameters/store/upscaleSlice'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { toast } from 'features/toast/toast'; import { setActiveTab } from 'features/ui/store/uiSlice'; @@ -38,7 +39,6 @@ import { } from 'react-icons/pi'; import { useStarImagesMutation, useUnstarImagesMutation } from 'services/api/endpoints/images'; import type { ImageDTO } from 'services/api/types'; -import { upscaleInitialImageChanged } from '../../../parameters/store/upscaleSlice'; type SingleSelectionMenuItemsProps = { imageDTO: ImageDTO; diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildMultidiffusionUpscaleGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildMultidiffusionUpscaleGraph.ts index bfc1444063..b839de3b65 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graph/buildMultidiffusionUpscaleGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildMultidiffusionUpscaleGraph.ts @@ -7,7 +7,7 @@ import { assert } from 'tsafe'; import { CLIP_SKIP, CONTROL_NET_COLLECT, ESRGAN, IMAGE_TO_LATENTS, LATENTS_TO_IMAGE, MAIN_MODEL_LOADER, NEGATIVE_CONDITIONING, NOISE, POSITIVE_CONDITIONING, RESIZE, SDXL_MODEL_LOADER, TILED_MULTI_DIFFUSION_DENOISE_LATENTS, UNSHARP_MASK, VAE_LOADER } from './constants'; import { addLoRAs } from './generation/addLoRAs'; import { addSDXLLoRas } from './generation/addSDXLLoRAs'; -import { getSDXLStylePrompts } from './graphBuilderUtils'; +import { getBoardField, getSDXLStylePrompts } from './graphBuilderUtils'; export const buildMultidiffusionUpscsaleGraph = async (state: RootState): Promise => { @@ -21,7 +21,7 @@ export const buildMultidiffusionUpscsaleGraph = async (state: RootState): Promis vae, } = state.generation; const { positivePrompt, negativePrompt } = state.controlLayers.present; - const { upscaleModel, upscaleInitialImage, sharpness, structure, creativity } = state.upscale; + const { upscaleModel, upscaleInitialImage, sharpness, structure, creativity, tiledVAE } = state.upscale; assert(model, 'No model found in state'); assert(upscaleModel, 'No upscale model found in state'); @@ -80,8 +80,8 @@ export const buildMultidiffusionUpscsaleGraph = async (state: RootState): Promis const i2lNode = g.addNode({ id: IMAGE_TO_LATENTS, type: "i2l", - is_intermediate: false, - fp32: vaePrecision === "fp32" + fp32: vaePrecision === "fp32", + tiled: tiledVAE }) g.addEdge(resizeNode, 'image', i2lNode, "image") @@ -89,7 +89,11 @@ export const buildMultidiffusionUpscsaleGraph = async (state: RootState): Promis const l2iNode = g.addNode({ type: "l2i", id: LATENTS_TO_IMAGE, - fp32: vaePrecision === "fp32" + fp32: vaePrecision === "fp32", + tiled: tiledVAE, + board: getBoardField(state), + is_intermediate: false, + }) const tiledMultidiffusionNode = g.addNode({ @@ -179,8 +183,8 @@ export const buildMultidiffusionUpscsaleGraph = async (state: RootState): Promis const controlnetTileModel = { // TODO: figure out how to handle this, can't assume name is `tile` or that they have it installed - key: "8fe0b31e-89bd-4db0-b305-df36732a9939", - "hash": "random:72b7863348e3b038c17d1a8c49fe6ebc91053cb5e1da69d122552e59b2495f2a", + key: "8fe0b31e-89bd-4db0-b305-df36732a9939", //mary's key + "hash": "random:72b7863348e3b038c17d1a8c49fe6ebc91053cb5e1da69d122552e59b2495f2a", //mary's hash type: "controlnet" as any, name: "tile", base: model.base diff --git a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSpandrelModel.tsx b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSpandrelModel.tsx index 8ef4e7203b..287f8a98d1 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSpandrelModel.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSpandrelModel.tsx @@ -1,11 +1,11 @@ import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { useModelCombobox } from 'common/hooks/useModelCombobox'; +import { upscaleModelChanged } from 'features/parameters/store/upscaleSlice'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; -import { useSpandrelImageToImageModels } from '../../../../services/api/hooks/modelsByType'; -import { useModelCombobox } from '../../../../common/hooks/useModelCombobox'; -import { SpandrelImageToImageModelConfig } from '../../../../services/api/types'; -import { upscaleModelChanged } from '../../store/upscaleSlice'; +import { useSpandrelImageToImageModels } from 'services/api/hooks/modelsByType'; +import type { SpandrelImageToImageModelConfig } from 'services/api/types'; const ParamSpandrelModel = () => { const { t } = useTranslation(); diff --git a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamTiledVAEToggle.tsx b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamTiledVAEToggle.tsx new file mode 100644 index 0000000000..6e9ee16ca3 --- /dev/null +++ b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamTiledVAEToggle.tsx @@ -0,0 +1,22 @@ +import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library'; +import { useAppDispatch, useAppSelector } from '../../../../app/store/storeHooks'; +import { useCallback } from 'react'; +import { tiledVAEChanged } from '../../store/upscaleSlice'; + +export const ParamTiledVAEToggle = () => { + const tiledVAE = useAppSelector((s) => s.upscale.tiledVAE); + const dispatch = useAppDispatch(); + + const handleChange = useCallback( + (event: React.ChangeEvent) => { + dispatch(tiledVAEChanged(event.target.checked)); + }, + [dispatch] + ); + return ( + + + Tiled VAE + + ); +}; diff --git a/invokeai/frontend/web/src/features/parameters/hooks/useIsAllowedToUpscale.ts b/invokeai/frontend/web/src/features/parameters/hooks/useIsAllowedToUpscale.ts index 9043207817..7cae5ee630 100644 --- a/invokeai/frontend/web/src/features/parameters/hooks/useIsAllowedToUpscale.ts +++ b/invokeai/frontend/web/src/features/parameters/hooks/useIsAllowedToUpscale.ts @@ -5,7 +5,7 @@ import { selectConfigSlice } from 'features/system/store/configSlice'; import { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import type { ImageDTO } from 'services/api/types'; -import { useSpandrelImageToImageModels } from '../../../services/api/hooks/modelsByType'; + const getUpscaledPixels = (imageDTO?: ImageDTO, maxUpscalePixels?: number) => { if (!imageDTO) { diff --git a/invokeai/frontend/web/src/features/parameters/store/upscaleSlice.ts b/invokeai/frontend/web/src/features/parameters/store/upscaleSlice.ts index 67972e9660..1dd0de6d58 100644 --- a/invokeai/frontend/web/src/features/parameters/store/upscaleSlice.ts +++ b/invokeai/frontend/web/src/features/parameters/store/upscaleSlice.ts @@ -1,8 +1,8 @@ import type { PayloadAction } from '@reduxjs/toolkit'; import { createSlice } from '@reduxjs/toolkit'; import type { PersistConfig, RootState } from 'app/store/store'; -import { ParameterSpandrelImageToImageModel } from '../types/parameterSchemas'; -import { ImageDTO } from '../../../services/api/types'; +import type { ParameterSpandrelImageToImageModel } from 'features/parameters/types/parameterSchemas'; +import type { ImageDTO } from 'services/api/types'; interface UpscaleState { @@ -12,6 +12,7 @@ interface UpscaleState { sharpness: number; structure: number; creativity: number; + tiledVAE: boolean; } const initialUpscaleState: UpscaleState = { @@ -20,8 +21,8 @@ const initialUpscaleState: UpscaleState = { upscaleInitialImage: null, sharpness: 0, structure: 0, - creativity: 0 - + creativity: 0, + tiledVAE: false }; export const upscaleSlice = createSlice({ @@ -34,10 +35,13 @@ export const upscaleSlice = createSlice({ upscaleInitialImageChanged: (state, action: PayloadAction) => { state.upscaleInitialImage = action.payload; }, + tiledVAEChanged: (state, action: PayloadAction) => { + state.tiledVAE = action.payload; + }, }, }); -export const { upscaleModelChanged, upscaleInitialImageChanged } = upscaleSlice.actions; +export const { upscaleModelChanged, upscaleInitialImageChanged, tiledVAEChanged } = upscaleSlice.actions; export const selectUpscalelice = (state: RootState) => state.upscale; diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx index ee358df188..682878187f 100644 --- a/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx +++ b/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx @@ -7,17 +7,17 @@ import ParamCFGRescaleMultiplier from 'features/parameters/components/Advanced/P import ParamClipSkip from 'features/parameters/components/Advanced/ParamClipSkip'; import ParamSeamlessXAxis from 'features/parameters/components/Seamless/ParamSeamlessXAxis'; import ParamSeamlessYAxis from 'features/parameters/components/Seamless/ParamSeamlessYAxis'; +import { ParamSeedNumberInput } from 'features/parameters/components/Seed/ParamSeedNumberInput'; +import { ParamSeedRandomize } from 'features/parameters/components/Seed/ParamSeedRandomize'; +import { ParamSeedShuffle } from 'features/parameters/components/Seed/ParamSeedShuffle'; import ParamVAEModelSelect from 'features/parameters/components/VAEModel/ParamVAEModelSelect'; import ParamVAEPrecision from 'features/parameters/components/VAEModel/ParamVAEPrecision'; import { selectGenerationSlice } from 'features/parameters/store/generationSlice'; import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle'; +import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { memo, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { useGetModelConfigQuery } from 'services/api/endpoints/models'; -import { activeTabNameSelector } from '../../../ui/store/uiSelectors'; -import { ParamSeedNumberInput } from '../../../parameters/components/Seed/ParamSeedNumberInput'; -import { ParamSeedRandomize } from '../../../parameters/components/Seed/ParamSeedRandomize'; -import { ParamSeedShuffle } from '../../../parameters/components/Seed/ParamSeedShuffle'; const formLabelProps: FormLabelProps = { minW: '9.2rem', diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleInitialImage.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleInitialImage.tsx index bb3c57e01e..4f40adfdb3 100644 --- a/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleInitialImage.tsx +++ b/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleInitialImage.tsx @@ -1,13 +1,13 @@ import { Flex } from '@invoke-ai/ui-library'; -import { useCallback, useMemo } from 'react'; -import IAIDndImage from '../../../../common/components/IAIDndImage'; -import { PostUploadAction } from '../../../../services/api/types'; -import { TypesafeDroppableData } from '../../../dnd/types'; -import { useAppDispatch, useAppSelector } from '../../../../app/store/storeHooks'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import IAIDndImage from 'common/components/IAIDndImage'; +import IAIDndImageIcon from 'common/components/IAIDndImageIcon'; +import type { TypesafeDroppableData } from 'features/dnd/types'; +import { upscaleInitialImageChanged } from 'features/parameters/store/upscaleSlice'; import { t } from 'i18next'; +import { useCallback, useMemo } from 'react'; import { PiArrowCounterClockwiseBold } from 'react-icons/pi'; -import IAIDndImageIcon from '../../../../common/components/IAIDndImageIcon'; -import { upscaleInitialImageChanged } from '../../../parameters/store/upscaleSlice'; +import type { PostUploadAction } from 'services/api/types'; export const UpscaleInitialImage = () => { const dispatch = useAppDispatch(); diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleSettingsAccordion.tsx index e7d45d043d..c7dc8f312d 100644 --- a/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleSettingsAccordion.tsx +++ b/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleSettingsAccordion.tsx @@ -1,17 +1,19 @@ import { Expander, Flex, StandaloneAccordion } from '@invoke-ai/ui-library'; +import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; +import { useAppSelector } from 'app/store/storeHooks'; +import ParamCreativity from 'features/parameters/components/Upscale/ParamCreativity'; +import ParamSharpness from 'features/parameters/components/Upscale/ParamSharpness'; +import ParamSpandrelModel from 'features/parameters/components/Upscale/ParamSpandrelModel'; +import ParamStructure from 'features/parameters/components/Upscale/ParamStructure'; +import { selectUpscalelice } from 'features/parameters/store/upscaleSlice'; +import { useExpanderToggle } from 'features/settingsAccordions/hooks/useExpanderToggle'; import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; -import ParamSpandrelModel from '../../../parameters/components/Upscale/ParamSpandrelModel'; + import { UpscaleInitialImage } from './UpscaleInitialImage'; import { UpscaleSizeDetails } from './UpscaleSizeDetails'; -import { useExpanderToggle } from '../../hooks/useExpanderToggle'; -import ParamSharpness from '../../../parameters/components/Upscale/ParamSharpness'; -import ParamCreativity from '../../../parameters/components/Upscale/ParamCreativity'; -import ParamStructure from '../../../parameters/components/Upscale/ParamStructure'; -import { selectUpscalelice } from '../../../parameters/store/upscaleSlice'; -import { createMemoizedSelector } from '../../../../app/store/createMemoizedSelector'; -import { useAppSelector } from '../../../../app/store/storeHooks'; +import { ParamTiledVAEToggle } from '../../../parameters/components/Upscale/ParamTiledVAEToggle'; const selector = createMemoizedSelector([selectUpscalelice], (upscale) => { const badges: string[] = []; @@ -51,6 +53,7 @@ export const UpscaleSettingsAccordion = memo(() => { + diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleSizeDetails.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleSizeDetails.tsx index 2f071d77a6..e1dc7e31b1 100644 --- a/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleSizeDetails.tsx +++ b/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleSizeDetails.tsx @@ -1,5 +1,5 @@ import { Flex, Text } from '@invoke-ai/ui-library'; -import { useAppSelector } from '../../../../app/store/storeHooks'; +import { useAppSelector } from 'app/store/storeHooks'; import { useMemo } from 'react'; export const UpscaleSizeDetails = () => { diff --git a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx index c16eee5619..b98d713b80 100644 --- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx +++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx @@ -35,9 +35,9 @@ import type { ImperativePanelGroupHandle } from 'react-resizable-panels'; import { Panel, PanelGroup } from 'react-resizable-panels'; import ParametersPanelCanvas from './ParametersPanels/ParametersPanelCanvas'; +import ParametersPanelUpscale from './ParametersPanels/ParametersPanelUpscale'; import ResizeHandle from './tabs/ResizeHandle'; import UpscalingTab from './tabs/UpscalingTab'; -import ParametersPanelUpscale from './ParametersPanels/ParametersPanelUpscale'; type TabData = { id: InvokeTabName; diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersPanels/ParametersPanelUpscale.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersPanels/ParametersPanelUpscale.tsx index 44d99b3abd..19979dea2f 100644 --- a/invokeai/frontend/web/src/features/ui/components/ParametersPanels/ParametersPanelUpscale.tsx +++ b/invokeai/frontend/web/src/features/ui/components/ParametersPanels/ParametersPanelUpscale.tsx @@ -1,4 +1,4 @@ -import { Box, Divider, Flex } from '@invoke-ai/ui-library'; +import { Box, Flex } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants'; import { Prompts } from 'features/parameters/components/Prompts/Prompts'; @@ -6,11 +6,10 @@ import QueueControls from 'features/queue/components/QueueControls'; import { SDXLPrompts } from 'features/sdxl/components/SDXLPrompts/SDXLPrompts'; import { AdvancedSettingsAccordion } from 'features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion'; import { GenerationSettingsAccordion } from 'features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion'; +import { UpscaleSettingsAccordion } from 'features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleSettingsAccordion'; import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'; import type { CSSProperties } from 'react'; import { memo } from 'react'; -import { useTranslation } from 'react-i18next'; -import { UpscaleSettingsAccordion } from '../../../settingsAccordions/components/UpscaleSettingsAccordion/UpscaleSettingsAccordion'; const overlayScrollbarsStyles: CSSProperties = { height: '100%', @@ -18,8 +17,6 @@ const overlayScrollbarsStyles: CSSProperties = { }; const ParametersPanelUpscale = () => { - const { t } = useTranslation(); - const isSDXL = useAppSelector((s) => s.generation.model?.base === 'sdxl'); return (