From 5159fcbc33728bc1ceb8df2ff860c08aec967015 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Sun, 16 Jun 2024 00:13:24 +1000 Subject: [PATCH] refactor(ui): update components & logic to use new unified slice (again) --- .../components/QueueIterationsNumberInput.tsx | 2 +- .../SDXLRefiner/ParamSDXLRefinerCFGScale.tsx | 2 +- .../ParamSDXLRefinerModelSelect.tsx | 7 +-- ...ParamSDXLRefinerNegativeAestheticScore.tsx | 2 +- ...ParamSDXLRefinerPositiveAestheticScore.tsx | 2 +- .../SDXLRefiner/ParamSDXLRefinerScheduler.tsx | 2 +- .../SDXLRefiner/ParamSDXLRefinerStart.tsx | 2 +- .../SDXLRefiner/ParamSDXLRefinerSteps.tsx | 2 +- .../AdvancedSettingsAccordion.tsx | 22 +++---- .../ImageSettingsAccordion.tsx | 63 ++++++++----------- .../RefinerSettingsAccordion.tsx | 6 +- 11 files changed, 51 insertions(+), 61 deletions(-) diff --git a/invokeai/frontend/web/src/features/queue/components/QueueIterationsNumberInput.tsx b/invokeai/frontend/web/src/features/queue/components/QueueIterationsNumberInput.tsx index f0b3c9b674..61278d9a2c 100644 --- a/invokeai/frontend/web/src/features/queue/components/QueueIterationsNumberInput.tsx +++ b/invokeai/frontend/web/src/features/queue/components/QueueIterationsNumberInput.tsx @@ -1,7 +1,7 @@ import { CompositeNumberInput } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; -import { setIterations } from 'features/canvas/store/canvasSlice'; +import { setIterations } from 'features/controlLayers/store/canvasV2Slice'; import { memo, useCallback } from 'react'; export const QueueIterationsNumberInput = memo(() => { diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale.tsx index c206b8a7b1..e110a770e3 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale.tsx @@ -1,7 +1,7 @@ import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; -import { setRefinerCFGScale } from 'features/sdxl/store/sdxlSlice'; +import { setRefinerCFGScale } from 'features/controlLayers/store/canvasV2Slice'; import { memo, useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx index e18ccbfbb2..6e175b1762 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx @@ -1,22 +1,19 @@ import { Box, Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; -import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import { useModelCombobox } from 'common/hooks/useModelCombobox'; +import { refinerModelChanged } from 'features/controlLayers/store/canvasV2Slice'; import { zModelIdentifierField } from 'features/nodes/types/common'; -import { refinerModelChanged, selectSdxlSlice } from 'features/sdxl/store/sdxlSlice'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { useRefinerModels } from 'services/api/hooks/modelsByType'; import type { MainModelConfig } from 'services/api/types'; -const selectModel = createMemoizedSelector(selectSdxlSlice, (sdxl) => sdxl.refinerModel); - const optionsFilter = (model: MainModelConfig) => model.base === 'sdxl-refiner'; const ParamSDXLRefinerModelSelect = () => { const dispatch = useAppDispatch(); - const model = useAppSelector(selectModel); + const model = useAppSelector((s) => s.canvasV2.params.refinerModel); const { t } = useTranslation(); const [modelConfigs, { isLoading }] = useRefinerModels(); const _onChange = useCallback( diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerNegativeAestheticScore.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerNegativeAestheticScore.tsx index 4cbf5beff6..a98eae78e7 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerNegativeAestheticScore.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerNegativeAestheticScore.tsx @@ -1,7 +1,7 @@ import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; -import { setRefinerNegativeAestheticScore } from 'features/sdxl/store/sdxlSlice'; +import { setRefinerNegativeAestheticScore } from 'features/controlLayers/store/canvasV2Slice'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerPositiveAestheticScore.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerPositiveAestheticScore.tsx index 202a65acf4..61ff4de925 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerPositiveAestheticScore.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerPositiveAestheticScore.tsx @@ -1,7 +1,7 @@ import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; -import { setRefinerPositiveAestheticScore } from 'features/sdxl/store/sdxlSlice'; +import { setRefinerPositiveAestheticScore } from 'features/controlLayers/store/canvasV2Slice'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerScheduler.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerScheduler.tsx index a88a7009cf..7e0f0acfd5 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerScheduler.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerScheduler.tsx @@ -2,9 +2,9 @@ import type { ComboboxOnChange } from '@invoke-ai/ui-library'; import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; +import { setRefinerScheduler } from 'features/controlLayers/store/canvasV2Slice'; import { SCHEDULER_OPTIONS } from 'features/parameters/types/constants'; import { isParameterScheduler } from 'features/parameters/types/parameterSchemas'; -import { setRefinerScheduler } from 'features/sdxl/store/sdxlSlice'; import { memo, useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart.tsx index 0ff791fee5..fc364ab1a8 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart.tsx @@ -1,7 +1,7 @@ import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; -import { setRefinerStart } from 'features/sdxl/store/sdxlSlice'; +import { setRefinerStart } from 'features/controlLayers/store/canvasV2Slice'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerSteps.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerSteps.tsx index 01a7fed4f4..49018932ed 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerSteps.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerSteps.tsx @@ -1,7 +1,7 @@ import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; -import { setRefinerSteps } from 'features/sdxl/store/sdxlSlice'; +import { setRefinerSteps } from 'features/controlLayers/store/canvasV2Slice'; import { memo, useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; 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 8655cdc740..2ca7c926b0 100644 --- a/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx +++ b/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx @@ -3,6 +3,7 @@ import { Flex, FormControlGroup, StandaloneAccordion } from '@invoke-ai/ui-libra import { skipToken } from '@reduxjs/toolkit/query'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; +import { selectCanvasV2Slice } from 'features/controlLayers/store/canvasV2Slice'; import ParamCFGRescaleMultiplier from 'features/parameters/components/Advanced/ParamCFGRescaleMultiplier'; import ParamClipSkip from 'features/parameters/components/Advanced/ParamClipSkip'; import ParamSeamlessXAxis from 'features/parameters/components/Seamless/ParamSeamlessXAxis'; @@ -12,7 +13,6 @@ import { ParamSeedRandomize } from 'features/parameters/components/Seed/ParamSee 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/canvas/store/canvasSlice'; import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { memo, useMemo } from 'react'; @@ -34,24 +34,24 @@ export const AdvancedSettingsAccordion = memo(() => { const selectBadges = useMemo( () => - createMemoizedSelector(selectGenerationSlice, (generation) => { + createMemoizedSelector(selectCanvasV2Slice, ({ params }) => { const badges: (string | number)[] = []; if (vaeConfig) { let vaeBadge = vaeConfig.name; - if (generation.vaePrecision === 'fp16') { - vaeBadge += ` ${generation.vaePrecision}`; + if (params.vaePrecision === 'fp16') { + vaeBadge += ` ${params.vaePrecision}`; } badges.push(vaeBadge); - } else if (generation.vaePrecision === 'fp16') { - badges.push(`VAE ${generation.vaePrecision}`); + } else if (params.vaePrecision === 'fp16') { + badges.push(`VAE ${params.vaePrecision}`); } - if (generation.clipSkip) { - badges.push(`Skip ${generation.clipSkip}`); + if (params.clipSkip) { + badges.push(`Skip ${params.clipSkip}`); } - if (generation.cfgRescaleMultiplier) { - badges.push(`Rescale ${generation.cfgRescaleMultiplier}`); + if (params.cfgRescaleMultiplier) { + badges.push(`Rescale ${params.cfgRescaleMultiplier}`); } - if (generation.seamlessXAxis || generation.seamlessYAxis) { + if (params.seamlessXAxis || params.seamlessYAxis) { badges.push('seamless'); } if (activeTabName === 'upscaling' && !generation.shouldRandomizeSeed) { diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx index ef1d524584..1518e0ec2d 100644 --- a/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx +++ b/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx @@ -12,41 +12,36 @@ import ParamImageToImageStrength from 'features/parameters/components/Canvas/Par 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 { selectGenerationSlice } from 'features/canvas/store/canvasSlice'; import { useExpanderToggle } from 'features/settingsAccordions/hooks/useExpanderToggle'; import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle'; -import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; import { ImageSizeLinear } from './ImageSizeLinear'; -const selector = createMemoizedSelector( - [selectGenerationSlice, selectHrfSlice, selectCanvasV2Slice, activeTabNameSelector], - (generation, hrf, canvasV2, activeTabName) => { - const { shouldRandomizeSeed, model } = generation; - const { hrfEnabled } = hrf; - const badges: string[] = []; - const isSDXL = model?.base === 'sdxl'; +const selector = createMemoizedSelector([selectHrfSlice, selectCanvasV2Slice], (hrf, canvasV2) => { + const { shouldRandomizeSeed, model } = canvasV2.params; + const { hrfEnabled } = hrf; + const badges: string[] = []; + const isSDXL = model?.base === 'sdxl'; - const { aspectRatio, width, height } = canvasV2.document; - badges.push(`${width}×${height}`); - badges.push(aspectRatio.id); + const { aspectRatio, width, height } = canvasV2.document; + badges.push(`${width}×${height}`); + badges.push(aspectRatio.id); - if (aspectRatio.isLocked) { - badges.push('locked'); - } - - if (!shouldRandomizeSeed) { - badges.push('Manual Seed'); - } - - if (hrfEnabled && !isSDXL) { - badges.push('HiRes Fix'); - } - return { badges, activeTabName, isSDXL }; + if (aspectRatio.isLocked) { + badges.push('locked'); } -); + + if (!shouldRandomizeSeed) { + badges.push('Manual Seed'); + } + + if (hrfEnabled && !isSDXL) { + badges.push('HiRes Fix'); + } + return { badges, isSDXL }; +}); const scalingLabelProps: FormLabelProps = { minW: '4.5rem', @@ -54,7 +49,7 @@ const scalingLabelProps: FormLabelProps = { export const ImageSettingsAccordion = memo(() => { const { t } = useTranslation(); - const { badges, activeTabName, isSDXL } = useAppSelector(selector); + const { badges, isSDXL } = useAppSelector(selector); const { isOpen: isOpenAccordion, onToggle: onToggleAccordion } = useStandaloneAccordionToggle({ id: 'image-settings', defaultIsOpen: true, @@ -83,16 +78,12 @@ export const ImageSettingsAccordion = memo(() => { - {activeTabName === 'generation' && !isSDXL && } - {activeTabName === 'canvas' && ( - <> - - - - - - - )} + {!isSDXL && } + + + + + diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx index dcff42c7e0..76f7ebe684 100644 --- a/invokeai/frontend/web/src/features/settingsAccordions/components/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx +++ b/invokeai/frontend/web/src/features/settingsAccordions/components/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx @@ -2,6 +2,7 @@ import type { FormLabelProps } from '@invoke-ai/ui-library'; import { Flex, FormControlGroup, StandaloneAccordion, Text } from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; +import { selectCanvasV2Slice } from 'features/controlLayers/store/canvasV2Slice'; import ParamSDXLRefinerCFGScale from 'features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale'; import ParamSDXLRefinerModelSelect from 'features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect'; import ParamSDXLRefinerNegativeAestheticScore from 'features/sdxl/components/SDXLRefiner/ParamSDXLRefinerNegativeAestheticScore'; @@ -9,7 +10,6 @@ import ParamSDXLRefinerPositiveAestheticScore from 'features/sdxl/components/SDX import ParamSDXLRefinerScheduler from 'features/sdxl/components/SDXLRefiner/ParamSDXLRefinerScheduler'; import ParamSDXLRefinerStart from 'features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart'; import ParamSDXLRefinerSteps from 'features/sdxl/components/SDXLRefiner/ParamSDXLRefinerSteps'; -import { selectSdxlSlice } from 'features/sdxl/store/sdxlSlice'; import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle'; import { isNil } from 'lodash-es'; import { memo } from 'react'; @@ -24,7 +24,9 @@ const stepsScaleLabelProps: FormLabelProps = { minW: '5rem', }; -const selectBadges = createMemoizedSelector(selectSdxlSlice, (sdxl) => (sdxl.refinerModel ? ['Enabled'] : undefined)); +const selectBadges = createMemoizedSelector(selectCanvasV2Slice, ({ params }) => + params.refinerModel ? ['Enabled'] : undefined +); export const RefinerSettingsAccordion: React.FC = memo(() => { const { t } = useTranslation();