diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx index b3452f5587..456d8622f0 100644 --- a/invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx @@ -19,8 +19,6 @@ import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice'; import { GalleryState } from 'features/gallery/store/gallerySlice'; import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors'; import { setIsLightboxOpen } from 'features/lightbox/store/lightboxSlice'; -import FaceRestoreSettings from 'features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreSettings'; -import UpscaleSettings from 'features/parameters/components/AdvancedParameters/Upscale/UpscaleSettings'; import { initialImageChanged, setAllParameters, @@ -69,6 +67,8 @@ import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { useParameters } from 'features/parameters/hooks/useParameters'; import { initialImageSelected } from 'features/parameters/store/actions'; import { requestedImageDeletion } from '../store/actions'; +import FaceRestoreSettings from 'features/parameters/components/Parameters/FaceRestore/FaceRestoreSettings'; +import UpscaleSettings from 'features/parameters/components/Parameters/Upscale/UpscaleSettings'; const currentImageButtonsSelector = createSelector( [ diff --git a/invokeai/frontend/web/src/features/parameters/components/AccordionItems/InvokeAccordionItem.tsx b/invokeai/frontend/web/src/features/parameters/components/AccordionItems/InvokeAccordionItem.tsx deleted file mode 100644 index ccf0a8ed26..0000000000 --- a/invokeai/frontend/web/src/features/parameters/components/AccordionItems/InvokeAccordionItem.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { - AccordionButton, - AccordionIcon, - AccordionItem, - AccordionPanel, - Box, - Flex, -} from '@chakra-ui/react'; -import GuideIcon from 'common/components/GuideIcon'; -import { ParametersAccordionItem } from '../ParametersAccordion'; - -type InvokeAccordionItemProps = { - accordionItem: ParametersAccordionItem; -}; - -export default function InvokeAccordionItem({ - accordionItem, -}: InvokeAccordionItemProps) { - const { header, feature, content, additionalHeaderComponents } = - accordionItem; - - return ( - - - - - {header} - - {additionalHeaderComponents} - {/* {feature && } */} - - - - {content} - - ); -} diff --git a/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Canvas/BoundingBox/BoundingBoxSettings.tsx b/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Canvas/BoundingBox/BoundingBoxSettings.tsx deleted file mode 100644 index 35a325e74e..0000000000 --- a/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Canvas/BoundingBox/BoundingBoxSettings.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import { Box, VStack } from '@chakra-ui/react'; -import { createSelector } from '@reduxjs/toolkit'; -import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import IAISlider from 'common/components/IAISlider'; -import { canvasSelector } from 'features/canvas/store/canvasSelectors'; -import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice'; -import { isEqual } from 'lodash-es'; - -import { useTranslation } from 'react-i18next'; - -const selector = createSelector( - canvasSelector, - (canvas) => { - const { boundingBoxDimensions, boundingBoxScaleMethod: boundingBoxScale } = - canvas; - return { - boundingBoxDimensions, - boundingBoxScale, - }; - }, - { - memoizeOptions: { - resultEqualityCheck: isEqual, - }, - } -); - -const BoundingBoxSettings = () => { - const dispatch = useAppDispatch(); - const { boundingBoxDimensions } = useAppSelector(selector); - - const { t } = useTranslation(); - - const handleChangeWidth = (v: number) => { - dispatch( - setBoundingBoxDimensions({ - ...boundingBoxDimensions, - width: Math.floor(v), - }) - ); - }; - - const handleChangeHeight = (v: number) => { - dispatch( - setBoundingBoxDimensions({ - ...boundingBoxDimensions, - height: Math.floor(v), - }) - ); - }; - - const handleResetWidth = () => { - dispatch( - setBoundingBoxDimensions({ - ...boundingBoxDimensions, - width: Math.floor(512), - }) - ); - }; - - const handleResetHeight = () => { - dispatch( - setBoundingBoxDimensions({ - ...boundingBoxDimensions, - height: Math.floor(512), - }) - ); - }; - - return ( - - - - - ); -}; - -export default BoundingBoxSettings; - -export const BoundingBoxSettingsHeader = () => { - const { t } = useTranslation(); - return ( - - {t('parameters.boundingBoxHeader')} - - ); -}; diff --git a/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Canvas/InfillAndScalingSettings.tsx b/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Canvas/InfillAndScalingSettings.tsx deleted file mode 100644 index d578361624..0000000000 --- a/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Canvas/InfillAndScalingSettings.tsx +++ /dev/null @@ -1,174 +0,0 @@ -import { VStack } from '@chakra-ui/react'; -import { createSelector } from '@reduxjs/toolkit'; -import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import IAISelect from 'common/components/IAISelect'; -import IAISlider from 'common/components/IAISlider'; -import { canvasSelector } from 'features/canvas/store/canvasSelectors'; -import { - setBoundingBoxScaleMethod, - setScaledBoundingBoxDimensions, -} from 'features/canvas/store/canvasSlice'; -import { - BoundingBoxScale, - BOUNDING_BOX_SCALES_DICT, -} from 'features/canvas/store/canvasTypes'; -import { generationSelector } from 'features/parameters/store/generationSelectors'; -import { - setInfillMethod, - setTileSize, -} from 'features/parameters/store/generationSlice'; -import { systemSelector } from 'features/system/store/systemSelectors'; -import { isEqual } from 'lodash-es'; - -import { ChangeEvent } from 'react'; -import { useTranslation } from 'react-i18next'; - -const selector = createSelector( - [generationSelector, systemSelector, canvasSelector], - (parameters, system, canvas) => { - const { tileSize, infillMethod } = parameters; - - const { infillMethods } = system; - - const { - boundingBoxScaleMethod: boundingBoxScale, - scaledBoundingBoxDimensions, - } = canvas; - - return { - boundingBoxScale, - scaledBoundingBoxDimensions, - tileSize, - infillMethod, - infillMethods, - isManual: boundingBoxScale === 'manual', - }; - }, - { - memoizeOptions: { - resultEqualityCheck: isEqual, - }, - } -); - -const InfillAndScalingSettings = () => { - const dispatch = useAppDispatch(); - const { - tileSize, - infillMethod, - infillMethods, - boundingBoxScale, - isManual, - scaledBoundingBoxDimensions, - } = useAppSelector(selector); - - const { t } = useTranslation(); - - const handleChangeScaledWidth = (v: number) => { - dispatch( - setScaledBoundingBoxDimensions({ - ...scaledBoundingBoxDimensions, - width: Math.floor(v), - }) - ); - }; - - const handleChangeScaledHeight = (v: number) => { - dispatch( - setScaledBoundingBoxDimensions({ - ...scaledBoundingBoxDimensions, - height: Math.floor(v), - }) - ); - }; - - const handleResetScaledWidth = () => { - dispatch( - setScaledBoundingBoxDimensions({ - ...scaledBoundingBoxDimensions, - width: Math.floor(512), - }) - ); - }; - - const handleResetScaledHeight = () => { - dispatch( - setScaledBoundingBoxDimensions({ - ...scaledBoundingBoxDimensions, - height: Math.floor(512), - }) - ); - }; - - const handleChangeBoundingBoxScaleMethod = ( - e: ChangeEvent - ) => { - dispatch(setBoundingBoxScaleMethod(e.target.value as BoundingBoxScale)); - }; - - return ( - - - - - dispatch(setInfillMethod(e.target.value))} - /> - { - dispatch(setTileSize(v)); - }} - withInput - withSliderMarks - withReset - handleReset={() => { - dispatch(setTileSize(32)); - }} - /> - - ); -}; - -export default InfillAndScalingSettings; diff --git a/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Canvas/SeamCorrection/SeamCorrectionSettings.tsx b/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Canvas/SeamCorrection/SeamCorrectionSettings.tsx deleted file mode 100644 index a49eac26a1..0000000000 --- a/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Canvas/SeamCorrection/SeamCorrectionSettings.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { VStack } from '@chakra-ui/react'; -import ParamSeamBlur from './ParamSeamBlur'; -import ParamSeamSize from './ParamSeamSize'; -import ParamSeamSteps from './ParamSeamSteps'; -import ParamSeamStrength from './ParamSeamStrength'; - -const SeamCorrectionSettings = () => { - return ( - - - - - - - ); -}; - -export default SeamCorrectionSettings; diff --git a/invokeai/frontend/web/src/features/parameters/components/AnimatedImageToImagePanel.tsx b/invokeai/frontend/web/src/features/parameters/components/AnimatedImageToImagePanel.tsx deleted file mode 100644 index 8778e043e6..0000000000 --- a/invokeai/frontend/web/src/features/parameters/components/AnimatedImageToImagePanel.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { memo, useState } from 'react'; -import { AnimatePresence, motion } from 'framer-motion'; - -import ImageToImageSettings from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageSettings'; -import { useAppSelector } from 'app/store/storeHooks'; -import { RootState } from 'app/store/store'; -import { Box } from '@chakra-ui/react'; - -const AnimatedImageToImagePanel = () => { - const isImageToImageEnabled = useAppSelector( - (state: RootState) => state.generation.isImageToImageEnabled - ); - - return ( - - {isImageToImageEnabled && ( - - - - - - )} - - ); -}; - -export default memo(AnimatedImageToImagePanel); diff --git a/invokeai/frontend/web/src/features/parameters/components/MainParameters/MainHeight.tsx b/invokeai/frontend/web/src/features/parameters/components/MainParameters/MainHeight.tsx deleted file mode 100644 index e3a312f706..0000000000 --- a/invokeai/frontend/web/src/features/parameters/components/MainParameters/MainHeight.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { HEIGHTS } from 'app/constants'; -import { RootState } from 'app/store/store'; -import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import IAISelect from 'common/components/IAISelect'; -import IAISlider from 'common/components/IAISlider'; -import { setHeight } from 'features/parameters/store/generationSlice'; -import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; - -import { useTranslation } from 'react-i18next'; - -export default function MainHeight() { - const height = useAppSelector((state: RootState) => state.generation.height); - const shouldUseSliders = useAppSelector( - (state: RootState) => state.ui.shouldUseSliders - ); - const activeTabName = useAppSelector(activeTabNameSelector); - const dispatch = useAppDispatch(); - const { t } = useTranslation(); - - return shouldUseSliders ? ( - dispatch(setHeight(v))} - handleReset={() => dispatch(setHeight(512))} - withInput - withReset - withSliderMarks - sliderNumberInputProps={{ max: 15360 }} - /> - ) : ( - dispatch(setHeight(Number(e.target.value)))} - validValues={HEIGHTS} - /> - ); -} diff --git a/invokeai/frontend/web/src/features/parameters/components/MainParameters/MainSettings.tsx b/invokeai/frontend/web/src/features/parameters/components/MainParameters/MainSettings.tsx deleted file mode 100644 index d7f918e1f0..0000000000 --- a/invokeai/frontend/web/src/features/parameters/components/MainParameters/MainSettings.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { memo } from 'react'; -import { Box, Flex, VStack } from '@chakra-ui/react'; -import { RootState } from 'app/store/store'; -import { useAppSelector } from 'app/store/storeHooks'; - -import ModelSelect from 'features/system/components/ModelSelect'; -import ParamHeight from 'features/parameters/components/Parameters/ParamHeight'; -import ParamCFGScale from 'features/parameters/components/Parameters/ParamCFGScale'; -import ParamIterations from 'features/parameters/components/Parameters/ParamIterations'; -import ParamScheduler from 'features/parameters/components/Parameters/ParamScheduler'; -import ParamSteps from 'features/parameters/components/Parameters/ParamSteps'; -import ParamWidth from 'features/parameters/components/Parameters/ParamWidth'; - -const MainSettings = () => { - const shouldUseSliders = useAppSelector( - (state: RootState) => state.ui.shouldUseSliders - ); - - return shouldUseSliders ? ( - - - - - - - - - - - - - - - - ) : ( - - - - - - - - - - - - - - - - - - ); -}; - -export default memo(MainSettings); diff --git a/invokeai/frontend/web/src/features/parameters/components/MainParameters/MainWidth.tsx b/invokeai/frontend/web/src/features/parameters/components/MainParameters/MainWidth.tsx deleted file mode 100644 index 7a8534147c..0000000000 --- a/invokeai/frontend/web/src/features/parameters/components/MainParameters/MainWidth.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { WIDTHS } from 'app/constants'; -import { RootState } from 'app/store/store'; -import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import IAISelect from 'common/components/IAISelect'; -import IAISlider from 'common/components/IAISlider'; -import { setWidth } from 'features/parameters/store/generationSlice'; -import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; -import { useTranslation } from 'react-i18next'; - -export default function MainWidth() { - const width = useAppSelector((state: RootState) => state.generation.width); - const shouldUseSliders = useAppSelector( - (state: RootState) => state.ui.shouldUseSliders - ); - const activeTabName = useAppSelector(activeTabNameSelector); - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - return shouldUseSliders ? ( - dispatch(setWidth(v))} - handleReset={() => dispatch(setWidth(512))} - withInput - withReset - withSliderMarks - inputReadOnly - sliderNumberInputProps={{ max: 15360 }} - /> - ) : ( - dispatch(setWidth(Number(e.target.value)))} - validValues={WIDTHS} - /> - ); -} diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxCollapse.tsx new file mode 100644 index 0000000000..fea0d8330a --- /dev/null +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxCollapse.tsx @@ -0,0 +1,26 @@ +import { Flex, useDisclosure } from '@chakra-ui/react'; +import { useTranslation } from 'react-i18next'; +import IAICollapse from 'common/components/IAICollapse'; +import { memo } from 'react'; +import ParamBoundingBoxWidth from './ParamBoundingBoxWidth'; +import ParamBoundingBoxHeight from './ParamBoundingBoxHeight'; + +const ParamBoundingBoxCollapse = () => { + const { t } = useTranslation(); + const { isOpen, onToggle } = useDisclosure(); + + return ( + + + + + + + ); +}; + +export default memo(ParamBoundingBoxCollapse); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx new file mode 100644 index 0000000000..75ec70f257 --- /dev/null +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx @@ -0,0 +1,64 @@ +import { createSelector } from '@reduxjs/toolkit'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; +import IAISlider from 'common/components/IAISlider'; +import { canvasSelector } from 'features/canvas/store/canvasSelectors'; +import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice'; +import { memo } from 'react'; + +import { useTranslation } from 'react-i18next'; + +const selector = createSelector( + canvasSelector, + (canvas) => { + const { boundingBoxDimensions } = canvas; + return { + boundingBoxDimensions, + }; + }, + defaultSelectorOptions +); + +const ParamBoundingBoxWidth = () => { + const dispatch = useAppDispatch(); + const { boundingBoxDimensions } = useAppSelector(selector); + + const { t } = useTranslation(); + + const handleChangeHeight = (v: number) => { + dispatch( + setBoundingBoxDimensions({ + ...boundingBoxDimensions, + height: Math.floor(v), + }) + ); + }; + + const handleResetHeight = () => { + dispatch( + setBoundingBoxDimensions({ + ...boundingBoxDimensions, + height: Math.floor(512), + }) + ); + }; + + return ( + + ); +}; + +export default memo(ParamBoundingBoxWidth); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx new file mode 100644 index 0000000000..cf6ccff852 --- /dev/null +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx @@ -0,0 +1,64 @@ +import { createSelector } from '@reduxjs/toolkit'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; +import IAISlider from 'common/components/IAISlider'; +import { canvasSelector } from 'features/canvas/store/canvasSelectors'; +import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice'; +import { memo } from 'react'; + +import { useTranslation } from 'react-i18next'; + +const selector = createSelector( + canvasSelector, + (canvas) => { + const { boundingBoxDimensions } = canvas; + return { + boundingBoxDimensions, + }; + }, + defaultSelectorOptions +); + +const ParamBoundingBoxWidth = () => { + const dispatch = useAppDispatch(); + const { boundingBoxDimensions } = useAppSelector(selector); + + const { t } = useTranslation(); + + const handleChangeWidth = (v: number) => { + dispatch( + setBoundingBoxDimensions({ + ...boundingBoxDimensions, + width: Math.floor(v), + }) + ); + }; + + const handleResetWidth = () => { + dispatch( + setBoundingBoxDimensions({ + ...boundingBoxDimensions, + width: Math.floor(512), + }) + ); + }; + + return ( + + ); +}; + +export default memo(ParamBoundingBoxWidth); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse.tsx new file mode 100644 index 0000000000..78a8995bee --- /dev/null +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse.tsx @@ -0,0 +1,33 @@ +import { Flex, useDisclosure } from '@chakra-ui/react'; +import { memo } from 'react'; +import { useTranslation } from 'react-i18next'; + +import IAICollapse from 'common/components/IAICollapse'; +import ParamInfillMethod from './ParamInfillMethod'; +import ParamInfillTilesize from './ParamInfillTilesize'; +import ParamScaleBeforeProcessing from './ParamScaleBeforeProcessing'; +import ParamScaledWidth from './ParamScaledWidth'; +import ParamScaledHeight from './ParamScaledHeight'; + +const ParamInfillCollapse = () => { + const { t } = useTranslation(); + const { isOpen, onToggle } = useDisclosure(); + + return ( + + + + + + + + + + ); +}; + +export default memo(ParamInfillCollapse); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillMethod.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillMethod.tsx new file mode 100644 index 0000000000..00812f458a --- /dev/null +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillMethod.tsx @@ -0,0 +1,49 @@ +import { createSelector } from '@reduxjs/toolkit'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; +import IAISelect from 'common/components/IAISelect'; +import { generationSelector } from 'features/parameters/store/generationSelectors'; +import { setInfillMethod } from 'features/parameters/store/generationSlice'; +import { systemSelector } from 'features/system/store/systemSelectors'; + +import { ChangeEvent, memo, useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; + +const selector = createSelector( + [generationSelector, systemSelector], + (parameters, system) => { + const { infillMethod } = parameters; + const { infillMethods } = system; + + return { + infillMethod, + infillMethods, + }; + }, + defaultSelectorOptions +); + +const ParamInfillMethod = () => { + const dispatch = useAppDispatch(); + const { infillMethod, infillMethods } = useAppSelector(selector); + + const { t } = useTranslation(); + + const handleChange = useCallback( + (e: ChangeEvent) => { + dispatch(setInfillMethod(e.target.value)); + }, + [dispatch] + ); + + return ( + + ); +}; + +export default memo(ParamInfillMethod); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillTilesize.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillTilesize.tsx new file mode 100644 index 0000000000..fc6f02184c --- /dev/null +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillTilesize.tsx @@ -0,0 +1,58 @@ +import { createSelector } from '@reduxjs/toolkit'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; +import IAISlider from 'common/components/IAISlider'; +import { generationSelector } from 'features/parameters/store/generationSelectors'; +import { setTileSize } from 'features/parameters/store/generationSlice'; +import { memo, useCallback } from 'react'; + +import { useTranslation } from 'react-i18next'; + +const selector = createSelector( + [generationSelector], + (parameters) => { + const { tileSize, infillMethod } = parameters; + + return { + tileSize, + infillMethod, + }; + }, + defaultSelectorOptions +); + +const ParamInfillTileSize = () => { + const dispatch = useAppDispatch(); + const { tileSize, infillMethod } = useAppSelector(selector); + + const { t } = useTranslation(); + + const handleChange = useCallback( + (v: number) => { + dispatch(setTileSize(v)); + }, + [dispatch] + ); + + const handleReset = useCallback(() => { + dispatch(setTileSize(32)); + }, [dispatch]); + + return ( + + ); +}; + +export default memo(ParamInfillTileSize); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx new file mode 100644 index 0000000000..8164371b56 --- /dev/null +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx @@ -0,0 +1,49 @@ +import { createSelector } from '@reduxjs/toolkit'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; +import IAISelect from 'common/components/IAISelect'; +import { canvasSelector } from 'features/canvas/store/canvasSelectors'; +import { setBoundingBoxScaleMethod } from 'features/canvas/store/canvasSlice'; +import { + BoundingBoxScale, + BOUNDING_BOX_SCALES_DICT, +} from 'features/canvas/store/canvasTypes'; + +import { ChangeEvent, memo } from 'react'; +import { useTranslation } from 'react-i18next'; + +const selector = createSelector( + [canvasSelector], + (canvas) => { + const { boundingBoxScaleMethod: boundingBoxScale } = canvas; + + return { + boundingBoxScale, + }; + }, + defaultSelectorOptions +); + +const ParamScaleBeforeProcessing = () => { + const dispatch = useAppDispatch(); + const { boundingBoxScale } = useAppSelector(selector); + + const { t } = useTranslation(); + + const handleChangeBoundingBoxScaleMethod = ( + e: ChangeEvent + ) => { + dispatch(setBoundingBoxScaleMethod(e.target.value as BoundingBoxScale)); + }; + + return ( + + ); +}; + +export default memo(ParamScaleBeforeProcessing); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledHeight.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledHeight.tsx new file mode 100644 index 0000000000..a7e4a926b8 --- /dev/null +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledHeight.tsx @@ -0,0 +1,68 @@ +import { createSelector } from '@reduxjs/toolkit'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; +import IAISlider from 'common/components/IAISlider'; +import { canvasSelector } from 'features/canvas/store/canvasSelectors'; +import { setScaledBoundingBoxDimensions } from 'features/canvas/store/canvasSlice'; +import { generationSelector } from 'features/parameters/store/generationSelectors'; +import { systemSelector } from 'features/system/store/systemSelectors'; +import { memo } from 'react'; +import { useTranslation } from 'react-i18next'; + +const selector = createSelector( + [generationSelector, systemSelector, canvasSelector], + (parameters, system, canvas) => { + const { scaledBoundingBoxDimensions, boundingBoxScaleMethod } = canvas; + + return { + scaledBoundingBoxDimensions, + isManual: boundingBoxScaleMethod === 'manual', + }; + }, + defaultSelectorOptions +); + +const ParamScaledHeight = () => { + const dispatch = useAppDispatch(); + const { isManual, scaledBoundingBoxDimensions } = useAppSelector(selector); + + const { t } = useTranslation(); + + const handleChangeScaledHeight = (v: number) => { + dispatch( + setScaledBoundingBoxDimensions({ + ...scaledBoundingBoxDimensions, + height: Math.floor(v), + }) + ); + }; + + const handleResetScaledHeight = () => { + dispatch( + setScaledBoundingBoxDimensions({ + ...scaledBoundingBoxDimensions, + height: Math.floor(512), + }) + ); + }; + + return ( + + ); +}; + +export default memo(ParamScaledHeight); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledWidth.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledWidth.tsx new file mode 100644 index 0000000000..8104140808 --- /dev/null +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledWidth.tsx @@ -0,0 +1,66 @@ +import { createSelector } from '@reduxjs/toolkit'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; +import IAISlider from 'common/components/IAISlider'; +import { canvasSelector } from 'features/canvas/store/canvasSelectors'; +import { setScaledBoundingBoxDimensions } from 'features/canvas/store/canvasSlice'; +import { memo } from 'react'; +import { useTranslation } from 'react-i18next'; + +const selector = createSelector( + [canvasSelector], + (canvas) => { + const { boundingBoxScaleMethod, scaledBoundingBoxDimensions } = canvas; + + return { + scaledBoundingBoxDimensions, + isManual: boundingBoxScaleMethod === 'manual', + }; + }, + defaultSelectorOptions +); + +const ParamScaledWidth = () => { + const dispatch = useAppDispatch(); + const { isManual, scaledBoundingBoxDimensions } = useAppSelector(selector); + + const { t } = useTranslation(); + + const handleChangeScaledWidth = (v: number) => { + dispatch( + setScaledBoundingBoxDimensions({ + ...scaledBoundingBoxDimensions, + width: Math.floor(v), + }) + ); + }; + + const handleResetScaledWidth = () => { + dispatch( + setScaledBoundingBoxDimensions({ + ...scaledBoundingBoxDimensions, + width: Math.floor(512), + }) + ); + }; + + return ( + + ); +}; + +export default memo(ParamScaledWidth); diff --git a/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Canvas/SeamCorrection/ParamSeamBlur.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamCorrection/ParamSeamBlur.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Canvas/SeamCorrection/ParamSeamBlur.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamCorrection/ParamSeamBlur.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamCorrection/ParamSeamCorrectionCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamCorrection/ParamSeamCorrectionCollapse.tsx new file mode 100644 index 0000000000..992e8b6d02 --- /dev/null +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamCorrection/ParamSeamCorrectionCollapse.tsx @@ -0,0 +1,28 @@ +import ParamSeamBlur from './ParamSeamBlur'; +import ParamSeamSize from './ParamSeamSize'; +import ParamSeamSteps from './ParamSeamSteps'; +import ParamSeamStrength from './ParamSeamStrength'; +import { useDisclosure } from '@chakra-ui/react'; +import { useTranslation } from 'react-i18next'; +import IAICollapse from 'common/components/IAICollapse'; +import { memo } from 'react'; + +const ParamSeamCorrectionCollapse = () => { + const { t } = useTranslation(); + const { isOpen, onToggle } = useDisclosure(); + + return ( + + + + + + + ); +}; + +export default memo(ParamSeamCorrectionCollapse); diff --git a/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Canvas/SeamCorrection/ParamSeamSize.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamCorrection/ParamSeamSize.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Canvas/SeamCorrection/ParamSeamSize.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamCorrection/ParamSeamSize.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Canvas/SeamCorrection/ParamSeamSteps.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamCorrection/ParamSeamSteps.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Canvas/SeamCorrection/ParamSeamSteps.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamCorrection/ParamSeamSteps.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Canvas/SeamCorrection/ParamSeamStrength.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamCorrection/ParamSeamStrength.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Canvas/SeamCorrection/ParamSeamStrength.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamCorrection/ParamSeamStrength.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/ParamCFGScale.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamCFGScale.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/Parameters/ParamCFGScale.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamCFGScale.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/ParamHeight.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamHeight.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/Parameters/ParamHeight.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamHeight.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/ParamIterations.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamIterations.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/Parameters/ParamIterations.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamIterations.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/ParamNegativeConditioning.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamNegativeConditioning.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/Parameters/ParamNegativeConditioning.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamNegativeConditioning.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/ParamPositiveConditioning.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/Parameters/ParamPositiveConditioning.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/ParamScheduler.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSampler.tsx similarity index 92% rename from invokeai/frontend/web/src/features/parameters/components/Parameters/ParamScheduler.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSampler.tsx index ef1574b64c..5a20f54438 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/ParamScheduler.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSampler.tsx @@ -6,7 +6,7 @@ import { setSampler } from 'features/parameters/store/generationSlice'; import { ChangeEvent, memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; -const ParamScheduler = () => { +const ParamSampler = () => { const sampler = useAppSelector( (state: RootState) => state.generation.sampler ); @@ -29,4 +29,4 @@ const ParamScheduler = () => { ); }; -export default memo(ParamScheduler); +export default memo(ParamSampler); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/ParamSteps.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSteps.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/Parameters/ParamSteps.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSteps.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/ParamWidth.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamWidth.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/Parameters/ParamWidth.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamWidth.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/FaceRestore/CodeformerFidelity.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/FaceRestore/CodeformerFidelity.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/FaceRestore/CodeformerFidelity.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/FaceRestore/CodeformerFidelity.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreSettings.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/FaceRestore/FaceRestoreSettings.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreSettings.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/FaceRestore/FaceRestoreSettings.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreStrength.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/FaceRestore/FaceRestoreStrength.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreStrength.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/FaceRestore/FaceRestoreStrength.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreToggle.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/FaceRestore/FaceRestoreToggle.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreToggle.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/FaceRestore/FaceRestoreToggle.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreType.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/FaceRestore/FaceRestoreType.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreType.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/FaceRestore/FaceRestoreType.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageFit.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/ImageToImageFit.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageFit.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/ImageToImageFit.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageSettings.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/ImageToImageSettings.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageSettings.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/ImageToImageSettings.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageStrength.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/ImageToImageStrength.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageStrength.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/ImageToImageStrength.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageToggle.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/ImageToImageToggle.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageToggle.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/ImageToImageToggle.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/ImageToImage/InitialImageDisplay.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImageDisplay.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/ImageToImage/InitialImageDisplay.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImageDisplay.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/ImageToImage/InitialImagePreview.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImagePreview.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/ImageToImage/InitialImagePreview.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImagePreview.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/OtherSettings.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/OtherSettings.tsx deleted file mode 100644 index b41b0690e1..0000000000 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/OtherSettings.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { VStack } from '@chakra-ui/react'; -import ParamSeamlessToggle from './Seamless/ParamSeamlessToggle'; -// import ParamSeamlessAxes from '../../Parameters/Seamless/ParamSeamlessAxes'; -import { ParamHiresToggle } from './Hires/ParamHiresToggle'; -import { ParamHiresStrength } from './Hires/ParamHiresStrength'; - -const OtherSettings = () => { - return ( - - - {/* */} - - - - ); -}; - -export default OtherSettings; diff --git a/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Upscale/UpscaleDenoisingStrength.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Upscale/UpscaleDenoisingStrength.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Upscale/UpscaleDenoisingStrength.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/Upscale/UpscaleDenoisingStrength.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Upscale/UpscaleScale.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Upscale/UpscaleScale.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Upscale/UpscaleScale.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/Upscale/UpscaleScale.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Upscale/UpscaleSettings.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Upscale/UpscaleSettings.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Upscale/UpscaleSettings.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/Upscale/UpscaleSettings.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Upscale/UpscaleStrength.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Upscale/UpscaleStrength.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Upscale/UpscaleStrength.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/Upscale/UpscaleStrength.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Upscale/UpscaleToggle.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Upscale/UpscaleToggle.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Upscale/UpscaleToggle.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/Upscale/UpscaleToggle.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageDimensions/AspectRatioPreview.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/_ImageDimensions/AspectRatioPreview.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/ImageDimensions/AspectRatioPreview.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/_ImageDimensions/AspectRatioPreview.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageDimensions/DimensionsSettings.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/_ImageDimensions/DimensionsSettings.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/ImageDimensions/DimensionsSettings.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/_ImageDimensions/DimensionsSettings.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/ParametersAccordion.tsx b/invokeai/frontend/web/src/features/parameters/components/ParametersAccordion.tsx deleted file mode 100644 index 22d7a6228e..0000000000 --- a/invokeai/frontend/web/src/features/parameters/components/ParametersAccordion.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import { Accordion } from '@chakra-ui/react'; -import { createSelector } from '@reduxjs/toolkit'; -import { Feature } from 'app/features'; -import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { tabMap } from 'features/ui/store/tabMap'; -import { uiSelector } from 'features/ui/store/uiSelectors'; -import { openAccordionItemsChanged } from 'features/ui/store/uiSlice'; -import { map } from 'lodash-es'; -import { ReactNode, useCallback } from 'react'; -import InvokeAccordionItem from './AccordionItems/InvokeAccordionItem'; - -const parametersAccordionSelector = createSelector([uiSelector], (uiSlice) => { - const { - activeTab, - openLinearAccordionItems, - openUnifiedCanvasAccordionItems, - } = uiSlice; - - let openAccordions: number[] = []; - - if (tabMap[activeTab] === 'generate') { - openAccordions = openLinearAccordionItems; - } - - if (tabMap[activeTab] === 'unifiedCanvas') { - openAccordions = openUnifiedCanvasAccordionItems; - } - - return { - openAccordions, - }; -}); - -export type ParametersAccordionItem = { - name: string; - header: string; - content: ReactNode; - feature?: Feature; - additionalHeaderComponents?: ReactNode; -}; - -export type ParametersAccordionItems = { - [parametersAccordionKey: string]: ParametersAccordionItem; -}; - -type ParametersAccordionProps = { - accordionItems: ParametersAccordionItems; -}; - -/** - * Main container for generation and processing parameters. - */ -const ParametersAccordion = ({ accordionItems }: ParametersAccordionProps) => { - const { openAccordions } = useAppSelector(parametersAccordionSelector); - - const dispatch = useAppDispatch(); - - const handleChangeAccordionState = (openAccordions: number | number[]) => { - dispatch( - openAccordionItemsChanged( - Array.isArray(openAccordions) ? openAccordions : [openAccordions] - ) - ); - }; - - // Render function for accordion items - const renderAccordionItems = useCallback( - () => - map(accordionItems, (accordionItem) => ( - - )), - [accordionItems] - ); - - return ( - - {renderAccordionItems()} - - ); -}; - -export default ParametersAccordion; diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx index 512d43bcd6..5219d5b1e8 100644 --- a/invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx +++ b/invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx @@ -14,10 +14,10 @@ import { import { setShouldShowParametersPanel } from 'features/ui/store/uiSlice'; import ResizableDrawer from './common/ResizableDrawer/ResizableDrawer'; import PinParametersPanelButton from './PinParametersPanelButton'; -import TextTabParametersDrawer from './tabs/text/TextTabParametersDrawer'; import TextTabParameters from './tabs/text/TextTabParameters'; import ImageTabParameters from './tabs/image/ImageTabParameters'; import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; +import UnifiedCanvasParameters from './tabs/UnifiedCanvas/UnifiedCanvasParameters'; const selector = createSelector( [uiSelector, activeTabNameSelector, lightboxSelector], @@ -59,18 +59,26 @@ const ParametersDrawer = () => { } if (activeTabName === 'unifiedCanvas') { - return null; + return ; } + + return null; }, [activeTabName]); + if (shouldPinParametersPanel) { + return null; + } + return ( - + { - - {drawerContent} - + {drawerContent} diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersPinnedWrapper.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersPinnedWrapper.tsx new file mode 100644 index 0000000000..82bf38f26c --- /dev/null +++ b/invokeai/frontend/web/src/features/ui/components/ParametersPinnedWrapper.tsx @@ -0,0 +1,39 @@ +import { Box, Flex } from '@chakra-ui/react'; +import { PropsWithChildren, memo } from 'react'; +import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants'; +import OverlayScrollable from './common/OverlayScrollable'; +import PinParametersPanelButton from './PinParametersPanelButton'; + +type ParametersPinnedWrapperProps = PropsWithChildren; + +const ParametersPinnedWrapper = (props: ParametersPinnedWrapperProps) => { + return ( + + + + {props.children} + + + + + ); +}; + +export default memo(ParametersPinnedWrapper); diff --git a/invokeai/frontend/web/src/features/ui/components/common/OverlayScrollable.tsx b/invokeai/frontend/web/src/features/ui/components/common/OverlayScrollable.tsx index af4f65f011..71413fd01a 100644 --- a/invokeai/frontend/web/src/features/ui/components/common/OverlayScrollable.tsx +++ b/invokeai/frontend/web/src/features/ui/components/common/OverlayScrollable.tsx @@ -5,7 +5,7 @@ const OverlayScrollable = (props: PropsWithChildren) => { return ( { ); }; -export default UnifiedCanvasContent; +export default memo(UnifiedCanvasContent); diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx new file mode 100644 index 0000000000..cc03ef560d --- /dev/null +++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx @@ -0,0 +1,83 @@ +import { memo } from 'react'; +import { Box, Flex } from '@chakra-ui/react'; +import { createSelector } from '@reduxjs/toolkit'; +import { uiSelector } from 'features/ui/store/uiSelectors'; +import { useAppSelector } from 'app/store/storeHooks'; +import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; +import ModelSelect from 'features/system/components/ModelSelect'; +import ParamIterations from 'features/parameters/components/Parameters/Core/ParamIterations'; +import ParamSteps from 'features/parameters/components/Parameters/Core/ParamSteps'; +import ParamCFGScale from 'features/parameters/components/Parameters/Core/ParamCFGScale'; +import ParamWidth from 'features/parameters/components/Parameters/Core/ParamWidth'; +import ParamHeight from 'features/parameters/components/Parameters/Core/ParamHeight'; +import ImageToImageStrength from 'features/parameters/components/Parameters/ImageToImage/ImageToImageStrength'; +import ImageToImageFit from 'features/parameters/components/Parameters/ImageToImage/ImageToImageFit'; +import ParamSampler from 'features/parameters/components/Parameters/Core/ParamSampler'; + +const selector = createSelector( + uiSelector, + (ui) => { + const { shouldUseSliders } = ui; + + return { shouldUseSliders }; + }, + defaultSelectorOptions +); + +const UnifiedCanvasCoreParameters = () => { + const { shouldUseSliders } = useAppSelector(selector); + + return ( + + {shouldUseSliders ? ( + + + + + + + + + + + + + + + + + + ) : ( + + + + + + + + + + + + + + + + + + + + )} + + ); +}; + +export default memo(UnifiedCanvasCoreParameters); diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx index 3c4ccb10b6..4aa68ad56a 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx @@ -1,101 +1,30 @@ -import { Flex } from '@chakra-ui/react'; -import { Feature } from 'app/features'; -import BoundingBoxSettings from 'features/parameters/components/AdvancedParameters/Canvas/BoundingBox/BoundingBoxSettings'; -import InfillAndScalingSettings from 'features/parameters/components/AdvancedParameters/Canvas/InfillAndScalingSettings'; -import SeamCorrectionSettings from 'features/parameters/components/AdvancedParameters/Canvas/SeamCorrection/SeamCorrectionSettings'; -import ImageToImageStrength from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageStrength'; -import MainSettings from 'features/parameters/components/MainParameters/MainSettings'; -import ParametersAccordion, { - ParametersAccordionItems, -} from 'features/parameters/components/ParametersAccordion'; import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons'; -import { useTranslation } from 'react-i18next'; -import OverlayScrollable from '../../common/OverlayScrollable'; -// import ParamSeedSettings from 'features/parameters/components/Parameters/Seed/ParamSeedSettings'; -// import ParamVariationSettings from 'features/parameters/components/Parameters/Variations/ParamVariationSettings'; -// import ParamSymmetrySettings from 'features/parameters/components/Parameters/Symmetry/ParamSymmetrySettings'; -// import ParamVariationToggle from 'features/parameters/components/Parameters/Variations/ParamVariationToggle'; -// import ParamSymmetryToggle from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryToggle'; -import ParamPositiveConditioning from 'features/parameters/components/Parameters/ParamPositiveConditioning'; -import ParamNegativeConditioning from 'features/parameters/components/Parameters/ParamNegativeConditioning'; import ParamSeedCollapse from 'features/parameters/components/Parameters/Seed/ParamSeedCollapse'; import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse'; import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse'; +import ParamBoundingBoxCollapse from 'features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxCollapse'; +import ParamInfillAndScalingCollapse from 'features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse'; +import ParamSeamCorrectionCollapse from 'features/parameters/components/Parameters/Canvas/SeamCorrection/ParamSeamCorrectionCollapse'; +import UnifiedCanvasCoreParameters from './UnifiedCanvasCoreParameters'; +import { memo } from 'react'; +import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning'; +import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning'; -export default function UnifiedCanvasParameters() { - const { t } = useTranslation(); - - const unifiedCanvasAccordions: ParametersAccordionItems = { - general: { - name: 'general', - header: `${t('parameters.general')}`, - feature: undefined, - content: , - }, - unifiedCanvasImg2Img: { - name: 'unifiedCanvasImg2Img', - header: `${t('parameters.imageToImage')}`, - feature: undefined, - content: , - }, - // seed: { - // name: 'seed', - // header: `${t('parameters.seed')}`, - // feature: Feature.SEED, - // content: , - // }, - boundingBox: { - name: 'boundingBox', - header: `${t('parameters.boundingBoxHeader')}`, - feature: Feature.BOUNDING_BOX, - content: , - }, - seamCorrection: { - name: 'seamCorrection', - header: `${t('parameters.seamCorrectionHeader')}`, - feature: Feature.SEAM_CORRECTION, - content: , - }, - infillAndScaling: { - name: 'infillAndScaling', - header: `${t('parameters.infillScalingHeader')}`, - feature: Feature.INFILL_AND_SCALING, - content: , - }, - // variations: { - // name: 'variations', - // header: `${t('parameters.variations')}`, - // feature: Feature.VARIATIONS, - // content: , - // additionalHeaderComponents: , - // }, - // symmetry: { - // name: 'symmetry', - // header: `${t('parameters.symmetry')}`, - // content: , - // additionalHeaderComponents: , - // }, - }; - +const UnifiedCanvasParameters = () => { return ( - - - - - - - - - - - + <> + + + + + + + + + + + ); -} +}; + +export default memo(UnifiedCanvasParameters); diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasTab.tsx index d0f509b651..999adb1d91 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasTab.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasTab.tsx @@ -1,4 +1,4 @@ -import { TabPanel } from '@chakra-ui/react'; +import { Box, Flex, TabPanel } from '@chakra-ui/react'; import { memo } from 'react'; import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels'; import PinParametersPanelButton from '../../PinParametersPanelButton'; @@ -11,6 +11,8 @@ import UnifiedCanvasContent from './UnifiedCanvasContent'; import ResizeHandle from '../ResizeHandle'; import UnifiedCanvasParameters from './UnifiedCanvasParameters'; import UnifiedCanvasContentBeta from './UnifiedCanvasBeta/UnifiedCanvasContentBeta'; +import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants'; +import ParametersPinnedWrapper from '../../ParametersPinnedWrapper'; const selector = createSelector(uiSelector, (ui) => { const { @@ -41,42 +43,18 @@ const UnifiedCanvasTab = () => { } = useAppSelector(selector); return ( - + {shouldPinParametersPanel && shouldShowParametersPanel && ( - <> - - - - - - + + + )} - { - dispatch(requestCanvasRescale()); - }} - > - {shouldUseCanvasBetaLayout ? ( - - ) : ( - - )} - - + {shouldUseCanvasBetaLayout ? ( + + ) : ( + + )} + ); }; diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTab.tsx index b906ec4d97..c9dfb47720 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTab.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTab.tsx @@ -14,10 +14,10 @@ import ResizeHandle from '../ResizeHandle'; import ImageTabParameters from './ImageTabParameters'; import ImageTabImageParameters from './ImageTabImageParameters'; import TextTabMain from '../text/TextTabMain'; -import InitialImagePreview from 'features/parameters/components/AdvancedParameters/ImageToImage/InitialImagePreview'; -import InitialImageDisplay from 'features/parameters/components/AdvancedParameters/ImageToImage/InitialImageDisplay'; import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants'; import { ImperativePanelGroupHandle } from 'react-resizable-panels'; +import ParametersPinnedWrapper from '../../ParametersPinnedWrapper'; +import InitialImageDisplay from 'features/parameters/components/Parameters/ImageToImage/InitialImageDisplay'; const selector = createSelector(uiSelector, (ui) => { const { @@ -60,19 +60,9 @@ const TextTab = () => { return ( {shouldPinParametersPanel && shouldShowParametersPanel && ( - + - - + )} { + const { shouldUseSliders } = ui; + + return { shouldUseSliders }; + }, + defaultSelectorOptions +); + +const ImageTabCoreParameters = () => { + const { shouldUseSliders } = useAppSelector(selector); + + return ( + + {shouldUseSliders ? ( + + + + + + + + + + + + + + + + + + ) : ( + + + + + + + + + + + + + + + + + + + + )} + + ); +}; + +export default memo(ImageTabCoreParameters); diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTabParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTabParameters.tsx index 09181b6669..60b9d11822 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTabParameters.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTabParameters.tsx @@ -1,112 +1,27 @@ -import { Box, Flex } from '@chakra-ui/react'; -import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons'; import { memo } from 'react'; -import OverlayScrollable from '../../common/OverlayScrollable'; -import ParamPositiveConditioning from 'features/parameters/components/Parameters/ParamPositiveConditioning'; -import ParamNegativeConditioning from 'features/parameters/components/Parameters/ParamNegativeConditioning'; -import { createSelector } from '@reduxjs/toolkit'; -import { uiSelector } from 'features/ui/store/uiSelectors'; -import { useAppSelector } from 'app/store/storeHooks'; -import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; -import ParamIterations from 'features/parameters/components/Parameters/ParamIterations'; -import ParamSteps from 'features/parameters/components/Parameters/ParamSteps'; -import ParamCFGScale from 'features/parameters/components/Parameters/ParamCFGScale'; -import ParamWidth from 'features/parameters/components/Parameters/ParamWidth'; -import ParamHeight from 'features/parameters/components/Parameters/ParamHeight'; -import ParamScheduler from 'features/parameters/components/Parameters/ParamScheduler'; -import ModelSelect from 'features/system/components/ModelSelect'; +import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons'; +import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning'; +import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning'; import ParamSeedCollapse from 'features/parameters/components/Parameters/Seed/ParamSeedCollapse'; import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse'; import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse'; import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse'; -import ParamHiresCollapse from 'features/parameters/components/Parameters/Hires/ParamHiresCollapse'; import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse'; -import ImageToImageStrength from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageStrength'; -import ImageToImageFit from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageFit'; - -const selector = createSelector( - uiSelector, - (ui) => { - const { shouldUseSliders } = ui; - - return { shouldUseSliders }; - }, - defaultSelectorOptions -); +import ImageTabCoreParameters from './ImageTabCoreParameters'; const ImageTabParameters = () => { - const { shouldUseSliders } = useAppSelector(selector); - return ( - - - - - - - {shouldUseSliders ? ( - - - - - - - - - - - - - - - - - - ) : ( - - - - - - - - - - - - - - - - - - - - )} - - - - - - - - + <> + + + + + + + + + + ); }; diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTab.tsx index 4582a8a242..e05f1fd11e 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTab.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTab.tsx @@ -10,6 +10,7 @@ import TextTabMain from './TextTabMain'; import ResizeHandle from '../ResizeHandle'; import TextTabParameters from './TextTabParameters'; import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants'; +import ParametersPinnedWrapper from '../../ParametersPinnedWrapper'; const selector = createSelector(uiSelector, (ui) => { const { @@ -42,19 +43,9 @@ const TextTab = () => { return ( {shouldPinParametersPanel && shouldShowParametersPanel && ( - + - - + )} diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTabCoreParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTabCoreParameters.tsx new file mode 100644 index 0000000000..1b463a777b --- /dev/null +++ b/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTabCoreParameters.tsx @@ -0,0 +1,77 @@ +import ParamIterations from 'features/parameters/components/Parameters/Core/ParamIterations'; +import ParamSteps from 'features/parameters/components/Parameters/Core/ParamSteps'; +import ParamCFGScale from 'features/parameters/components/Parameters/Core/ParamCFGScale'; +import ParamWidth from 'features/parameters/components/Parameters/Core/ParamWidth'; +import ParamHeight from 'features/parameters/components/Parameters/Core/ParamHeight'; +import ParamSampler from 'features/parameters/components/Parameters/Core/ParamSampler'; +import ModelSelect from 'features/system/components/ModelSelect'; +import { Box, Flex } from '@chakra-ui/react'; +import { useAppSelector } from 'app/store/storeHooks'; +import { createSelector } from '@reduxjs/toolkit'; +import { uiSelector } from 'features/ui/store/uiSelectors'; +import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; +import { memo } from 'react'; + +const selector = createSelector( + uiSelector, + (ui) => { + const { shouldUseSliders } = ui; + + return { shouldUseSliders }; + }, + defaultSelectorOptions +); + +const TextTabCoreParameters = () => { + const { shouldUseSliders } = useAppSelector(selector); + + return ( + + {shouldUseSliders ? ( + + + + + + + + + + + + + + + + ) : ( + + + + + + + + + + + + + + + + + + )} + + ); +}; + +export default memo(TextTabCoreParameters); diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTabParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTabParameters.tsx index 84f7295bd3..1977fd9fa1 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTabParameters.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTabParameters.tsx @@ -1,107 +1,29 @@ -import { Box, Flex } from '@chakra-ui/react'; import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons'; import { memo } from 'react'; -import OverlayScrollable from '../../common/OverlayScrollable'; -import ParamPositiveConditioning from 'features/parameters/components/Parameters/ParamPositiveConditioning'; -import ParamNegativeConditioning from 'features/parameters/components/Parameters/ParamNegativeConditioning'; -import { createSelector } from '@reduxjs/toolkit'; -import { uiSelector } from 'features/ui/store/uiSelectors'; -import { useAppSelector } from 'app/store/storeHooks'; -import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; -import ParamIterations from 'features/parameters/components/Parameters/ParamIterations'; -import ParamSteps from 'features/parameters/components/Parameters/ParamSteps'; -import ParamCFGScale from 'features/parameters/components/Parameters/ParamCFGScale'; -import ParamWidth from 'features/parameters/components/Parameters/ParamWidth'; -import ParamHeight from 'features/parameters/components/Parameters/ParamHeight'; -import ParamScheduler from 'features/parameters/components/Parameters/ParamScheduler'; -import ModelSelect from 'features/system/components/ModelSelect'; +import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning'; +import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning'; import ParamSeedCollapse from 'features/parameters/components/Parameters/Seed/ParamSeedCollapse'; import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse'; import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse'; import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse'; import ParamHiresCollapse from 'features/parameters/components/Parameters/Hires/ParamHiresCollapse'; import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse'; -import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants'; - -const selector = createSelector( - uiSelector, - (ui) => { - const { shouldUseSliders } = ui; - - return { shouldUseSliders }; - }, - defaultSelectorOptions -); +import TextTabCoreParameters from './TextTabCoreParameters'; const TextTabParameters = () => { - const { shouldUseSliders } = useAppSelector(selector); - return ( - - - - - - - {shouldUseSliders ? ( - - - - - - - - - - - - - - - - ) : ( - - - - - - - - - - - - - - - - - - )} - - - - - - - - - + <> + + + + + + + + + + + ); };