From a26f050cbbab0c06bf80670b45416fd693fd1db7 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Wed, 24 Jul 2024 07:32:33 +1000 Subject: [PATCH] feat(ui): rename ad-hoc upscale stuff to post-processing --- invokeai/frontend/web/public/locales/en.json | 13 +++-- .../Upscale/ParamPostProcessingModel.tsx | 57 +++++++++++++++++++ .../components/Upscale/ParamSpandrelModel.tsx | 18 ++---- .../Upscale/ParamUpscaleSettings.tsx | 10 ++-- .../components/HotkeysModal/useHotkeyData.ts | 4 +- 5 files changed, 76 insertions(+), 26 deletions(-) create mode 100644 invokeai/frontend/web/src/features/parameters/components/Upscale/ParamPostProcessingModel.tsx diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index 9ba7428e7b..f7543d71e6 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -636,9 +636,9 @@ "title": "Undo Stroke" }, "unifiedCanvasHotkeys": "Unified Canvas", - "upscale": { - "desc": "Upscale the current image", - "title": "Upscale" + "postProcess": { + "desc": "Process the current image using the selected post-processing model", + "title": "Process Image" }, "toggleViewer": { "desc": "Switches between the Image Viewer and workspace for the current tab.", @@ -1035,8 +1035,8 @@ "symmetry": "Symmetry", "tileSize": "Tile Size", "type": "Type", - "upscale": "Upscale (Shift + U)", - "upscaleImage": "Upscale Image", + "postProcessing": "Post-Processing (Shift + U)", + "processImage": "Process Image", "upscaling": "Upscaling", "useAll": "Use All", "useSize": "Use Size", @@ -1645,8 +1645,9 @@ "creativity": "Creativity", "structure": "Structure", "upscaleModel": "Upscale Model", + "postProcessingModel": "Post-Processing Model", "scale": "Scale", - "simpleUpscaleMissingModelWarning": "Visit the Model Manager to install an upscale (image to image) model.", + "simpleUpscaleMissingModelWarning": "Visit the Model Manager to install a post-processing (image to image) model.", "missingModelsWarning": "Visit the Model Manager to install the required models:", "mainModelDesc": "Main model (SD1.5 or SDXL architecture)", "tileControlNetModelDesc": "Tile ControlNet model for the chosen main model architecture", diff --git a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamPostProcessingModel.tsx b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamPostProcessingModel.tsx new file mode 100644 index 0000000000..89556ce1b4 --- /dev/null +++ b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamPostProcessingModel.tsx @@ -0,0 +1,57 @@ +import { Box, Combobox, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui-library'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { useModelCombobox } from 'common/hooks/useModelCombobox'; +import { simpleUpscaleModelChanged } from 'features/parameters/store/upscaleSlice'; +import { memo, useCallback, useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useSpandrelImageToImageModels } from 'services/api/hooks/modelsByType'; +import type { SpandrelImageToImageModelConfig } from 'services/api/types'; + +const ParamPostProcessingModel = () => { + const { t } = useTranslation(); + const [modelConfigs, { isLoading }] = useSpandrelImageToImageModels(); + + const model = useAppSelector((s) => s.upscale.simpleUpscaleModel); + const dispatch = useAppDispatch(); + + const tooltipLabel = useMemo(() => { + if (!modelConfigs.length || !model) { + return; + } + return modelConfigs.find((m) => m.key === model?.key)?.description; + }, [modelConfigs, model]); + + const _onChange = useCallback( + (v: SpandrelImageToImageModelConfig | null) => { + dispatch(simpleUpscaleModelChanged(v)); + }, + [dispatch] + ); + + const { options, value, onChange, placeholder, noOptionsMessage } = useModelCombobox({ + modelConfigs, + onChange: _onChange, + selectedModel: model, + isLoading, + }); + + return ( + + {t('upscaling.postProcessingModel')} + + + + + + + ); +}; + +export default memo(ParamPostProcessingModel); 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 28c7b89c90..7b4fb2bfef 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSpandrelModel.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSpandrelModel.tsx @@ -1,21 +1,17 @@ import { Box, Combobox, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useModelCombobox } from 'common/hooks/useModelCombobox'; -import { simpleUpscaleModelChanged, upscaleModelChanged } from 'features/parameters/store/upscaleSlice'; +import { upscaleModelChanged } from 'features/parameters/store/upscaleSlice'; import { memo, useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { useSpandrelImageToImageModels } from 'services/api/hooks/modelsByType'; import type { SpandrelImageToImageModelConfig } from 'services/api/types'; -interface Props { - isMultidiffusion: boolean; -} - -const ParamSpandrelModel = ({ isMultidiffusion }: Props) => { +const ParamSpandrelModel = () => { const { t } = useTranslation(); const [modelConfigs, { isLoading }] = useSpandrelImageToImageModels(); - const model = useAppSelector((s) => (isMultidiffusion ? s.upscale.upscaleModel : s.upscale.simpleUpscaleModel)); + const model = useAppSelector((s) => s.upscale.upscaleModel); const dispatch = useAppDispatch(); const tooltipLabel = useMemo(() => { @@ -27,13 +23,9 @@ const ParamSpandrelModel = ({ isMultidiffusion }: Props) => { const _onChange = useCallback( (v: SpandrelImageToImageModelConfig | null) => { - if (isMultidiffusion) { - dispatch(upscaleModelChanged(v)); - } else { - dispatch(simpleUpscaleModelChanged(v)); - } + dispatch(upscaleModelChanged(v)); }, - [isMultidiffusion, dispatch] + [dispatch] ); const { options, value, onChange, placeholder, noOptionsMessage } = useModelCombobox({ diff --git a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx index 535ad35d5b..6dee594d50 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx @@ -12,6 +12,7 @@ import { import { upscaleRequested } from 'app/store/middleware/listenerMiddleware/listeners/upscaleRequested'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { $installModelsTab } from 'features/modelManagerV2/subpanels/InstallModels'; +import ParamPostProcessingModel from 'features/parameters/components/Upscale/ParamPostProcessingModel'; import { useIsQueueMutationInProgress } from 'features/queue/hooks/useIsQueueMutationInProgress'; import { setActiveTab } from 'features/ui/store/uiSlice'; import { memo, useCallback } from 'react'; @@ -19,7 +20,6 @@ import { Trans, useTranslation } from 'react-i18next'; import { PiFrameCornersBold } from 'react-icons/pi'; import type { ImageDTO } from 'services/api/types'; -import ParamSpandrelModel from './ParamSpandrelModel'; type Props = { imageDTO?: ImageDTO }; @@ -43,19 +43,19 @@ const ParamUpscalePopover = (props: Props) => { } - aria-label={t('parameters.upscale')} + aria-label={t('parameters.postProcessing')} /> - + {!simpleUpscaleModel && } diff --git a/invokeai/frontend/web/src/features/system/components/HotkeysModal/useHotkeyData.ts b/invokeai/frontend/web/src/features/system/components/HotkeysModal/useHotkeyData.ts index 79d957d7d3..76590db443 100644 --- a/invokeai/frontend/web/src/features/system/components/HotkeysModal/useHotkeyData.ts +++ b/invokeai/frontend/web/src/features/system/components/HotkeysModal/useHotkeyData.ts @@ -102,8 +102,8 @@ export const useHotkeyData = (): HotkeyGroup[] => { hotkeys: [['A']], }, { - title: t('hotkeys.upscale.title'), - desc: t('hotkeys.upscale.desc'), + title: t('hotkeys.postProcess.title'), + desc: t('hotkeys.postProcess.desc'), hotkeys: [['Shift', 'U']], }, {