Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): organize parameters panels

Browse Source
This commit is contained in:
psychedelicious
2023-05-09 18:12:34 +10:00
parent ec6c8e2a38
commit c565812723
64 changed files with 880 additions and 996 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
invokeai/frontend/web/src/features/parameters/components/AccordionItems/InvokeAccordionItem.tsx
View File

@ -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 (
<AccordionItem>
<AccordionButton>
<Flex width="100%" gap={2} align="center">
<Box flexGrow={1} textAlign="start">
{header}
</Box>
{additionalHeaderComponents}
{/* {feature && <GuideIcon feature={feature} />} */}
<AccordionIcon />
</Flex>
</AccordionButton>
<AccordionPanel p={4}>{content}</AccordionPanel>
</AccordionItem>
);
}

113
invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Canvas/BoundingBox/BoundingBoxSettings.tsx
View File

@ -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 (
<VStack gap={2} alignItems="stretch">
<IAISlider
label={t('parameters.width')}
min={64}
max={1024}
step={64}
value={boundingBoxDimensions.width}
onChange={handleChangeWidth}
sliderNumberInputProps={{ max: 4096 }}
withSliderMarks
withInput
inputReadOnly
withReset
handleReset={handleResetWidth}
/>
<IAISlider
label={t('parameters.height')}
min={64}
max={1024}
step={64}
value={boundingBoxDimensions.height}
onChange={handleChangeHeight}
sliderNumberInputProps={{ max: 4096 }}
withSliderMarks
withInput
inputReadOnly
withReset
handleReset={handleResetHeight}
/>
</VStack>
);
};
export default BoundingBoxSettings;
export const BoundingBoxSettingsHeader = () => {
const { t } = useTranslation();
return (
<Box flex="1" textAlign="start">
{t('parameters.boundingBoxHeader')}
</Box>
);
};

174
invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Canvas/InfillAndScalingSettings.tsx
View File

@ -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<HTMLSelectElement>
) => {
dispatch(setBoundingBoxScaleMethod(e.target.value as BoundingBoxScale));
};
return (
<VStack gap={2} alignItems="stretch">
<IAISelect
label={t('parameters.scaleBeforeProcessing')}
validValues={BOUNDING_BOX_SCALES_DICT}
value={boundingBoxScale}
onChange={handleChangeBoundingBoxScaleMethod}
/>
<IAISlider
isDisabled={!isManual}
label={t('parameters.scaledWidth')}
min={64}
max={1024}
step={64}
value={scaledBoundingBoxDimensions.width}
onChange={handleChangeScaledWidth}
sliderNumberInputProps={{ max: 4096 }}
withSliderMarks
withInput
inputReadOnly
withReset
handleReset={handleResetScaledWidth}
/>
<IAISlider
isDisabled={!isManual}
label={t('parameters.scaledHeight')}
min={64}
max={1024}
step={64}
value={scaledBoundingBoxDimensions.height}
onChange={handleChangeScaledHeight}
sliderNumberInputProps={{ max: 4096 }}
withSliderMarks
withInput
inputReadOnly
withReset
handleReset={handleResetScaledHeight}
/>
<IAISelect
label={t('parameters.infillMethod')}
value={infillMethod}
validValues={infillMethods}
onChange={(e) => dispatch(setInfillMethod(e.target.value))}
/>
<IAISlider
isDisabled={infillMethod !== 'tile'}
label={t('parameters.tileSize')}
min={16}
max={64}
sliderNumberInputProps={{ max: 256 }}
value={tileSize}
onChange={(v) => {
dispatch(setTileSize(v));
}}
withInput
withSliderMarks
withReset
handleReset={() => {
dispatch(setTileSize(32));
}}
/>
</VStack>
);
};
export default InfillAndScalingSettings;

18
invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Canvas/SeamCorrection/SeamCorrectionSettings.tsx
View File

@ -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 (
<VStack gap={2} alignItems="stretch">
<ParamSeamSize />
<ParamSeamBlur />
<ParamSeamStrength />
<ParamSeamSteps />
</VStack>
);
};
export default SeamCorrectionSettings;

32
invokeai/frontend/web/src/features/parameters/components/AnimatedImageToImagePanel.tsx
View File

@ -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 (
<AnimatePresence>
{isImageToImageEnabled && (
<motion.div
initial={{ opacity: 0, scale: 0, width: 0 }}
animate={{ opacity: 1, scale: 1, width: '28rem' }}
exit={{ opacity: 0, scale: 0, width: 0 }}
transition={{ type: 'spring', bounce: 0, duration: 0.35 }}
>
<Box sx={{ h: 'full', w: 'full' }}>
<ImageToImageSettings />
</Box>
</motion.div>
)}
</AnimatePresence>
);
};
export default memo(AnimatedImageToImagePanel);

45
invokeai/frontend/web/src/features/parameters/components/MainParameters/MainHeight.tsx
View File

@ -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 ? (
<IAISlider
isDisabled={activeTabName === 'unifiedCanvas'}
label={t('parameters.height')}
value={height}
min={64}
step={8}
max={2048}
onChange={(v) => dispatch(setHeight(v))}
handleReset={() => dispatch(setHeight(512))}
withInput
withReset
withSliderMarks
sliderNumberInputProps={{ max: 15360 }}
/>
) : (
<IAISelect
isDisabled={activeTabName === 'unifiedCanvas'}
label={t('parameters.height')}
value={height}
flexGrow={1}
onChange={(e) => dispatch(setHeight(Number(e.target.value)))}
validValues={HEIGHTS}
/>
);
}

56
invokeai/frontend/web/src/features/parameters/components/MainParameters/MainSettings.tsx
View File

@ -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 ? (
<VStack gap={2}>
<ParamIterations />
<ParamSteps />
<ParamCFGScale />
<ParamWidth />
<ParamHeight />
<Flex gap={3} w="full">
<Box flexGrow={2}>
<ParamScheduler />
</Box>
<Box flexGrow={3}>
<ModelSelect />
</Box>
</Flex>
</VStack>
) : (
<Flex gap={3} flexDirection="column">
<Flex gap={3}>
<ParamIterations />
<ParamSteps />
<ParamCFGScale />
</Flex>
<ParamWidth />
<ParamHeight />
<Flex gap={3} w="full">
<Box flexGrow={2}>
<ParamScheduler />
</Box>
<Box flexGrow={3}>
<ModelSelect />
</Box>
</Flex>
</Flex>
);
};
export default memo(MainSettings);

46
invokeai/frontend/web/src/features/parameters/components/MainParameters/MainWidth.tsx
View File

@ -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 ? (
<IAISlider
isDisabled={activeTabName === 'unifiedCanvas'}
label={t('parameters.width')}
value={width}
min={8}
step={64}
max={2048}
onChange={(v) => dispatch(setWidth(v))}
handleReset={() => dispatch(setWidth(512))}
withInput
withReset
withSliderMarks
inputReadOnly
sliderNumberInputProps={{ max: 15360 }}
/>
) : (
<IAISelect
isDisabled={activeTabName === 'unifiedCanvas'}
label={t('parameters.width')}
value={width}
flexGrow={1}
onChange={(e) => dispatch(setWidth(Number(e.target.value)))}
validValues={WIDTHS}
/>
);
}

26
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxCollapse.tsx Normal file
View File

@ -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 (
<IAICollapse
label={t('parameters.boundingBoxHeader')}
isOpen={isOpen}
onToggle={onToggle}
>
<Flex sx={{ gap: 2, flexDirection: 'column' }}>
<ParamBoundingBoxWidth />
<ParamBoundingBoxHeight />
</Flex>
</IAICollapse>
);
};
export default memo(ParamBoundingBoxCollapse);

64
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx Normal file
View File

@ -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 (
<IAISlider
label={t('parameters.height')}
min={64}
max={1024}
step={64}
value={boundingBoxDimensions.height}
onChange={handleChangeHeight}
sliderNumberInputProps={{ max: 4096 }}
withSliderMarks
withInput
inputReadOnly
withReset
handleReset={handleResetHeight}
/>
);
};
export default memo(ParamBoundingBoxWidth);

64
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx Normal file
View File

@ -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 (
<IAISlider
label={t('parameters.width')}
min={64}
max={1024}
step={64}
value={boundingBoxDimensions.width}
onChange={handleChangeWidth}
sliderNumberInputProps={{ max: 4096 }}
withSliderMarks
withInput
inputReadOnly
withReset
handleReset={handleResetWidth}
/>
);
};
export default memo(ParamBoundingBoxWidth);

33
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse.tsx Normal file
View File

@ -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 (
<IAICollapse
label={t('parameters.boundingBoxHeader')}
isOpen={isOpen}
onToggle={onToggle}
>
<Flex sx={{ gap: 2, flexDirection: 'column' }}>
<ParamInfillMethod />
<ParamInfillTilesize />
<ParamScaleBeforeProcessing />
<ParamScaledWidth />
<ParamScaledHeight />
</Flex>
</IAICollapse>
);
};
export default memo(ParamInfillCollapse);

49
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillMethod.tsx Normal file
View File

@ -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<HTMLSelectElement>) => {
dispatch(setInfillMethod(e.target.value));
},
[dispatch]
);
return (
<IAISelect
label={t('parameters.infillMethod')}
value={infillMethod}
validValues={infillMethods}
onChange={handleChange}
/>
);
};
export default memo(ParamInfillMethod);

58
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillTilesize.tsx Normal file
View File

@ -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 (
<IAISlider
isDisabled={infillMethod !== 'tile'}
label={t('parameters.tileSize')}
min={16}
max={64}
sliderNumberInputProps={{ max: 256 }}
value={tileSize}
onChange={handleChange}
withInput
withSliderMarks
withReset
handleReset={handleReset}
/>
);
};
export default memo(ParamInfillTileSize);

49
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx Normal file
View File

@ -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<HTMLSelectElement>
) => {
dispatch(setBoundingBoxScaleMethod(e.target.value as BoundingBoxScale));
};
return (
<IAISelect
label={t('parameters.scaleBeforeProcessing')}
validValues={BOUNDING_BOX_SCALES_DICT}
value={boundingBoxScale}
onChange={handleChangeBoundingBoxScaleMethod}
/>
);
};
export default memo(ParamScaleBeforeProcessing);

68
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledHeight.tsx Normal file
View File

@ -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 (
<IAISlider
isDisabled={!isManual}
label={t('parameters.scaledHeight')}
min={64}
max={1024}
step={64}
value={scaledBoundingBoxDimensions.height}
onChange={handleChangeScaledHeight}
sliderNumberInputProps={{ max: 4096 }}
withSliderMarks
withInput
inputReadOnly
withReset
handleReset={handleResetScaledHeight}
/>
);
};
export default memo(ParamScaledHeight);

66
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledWidth.tsx Normal file
View File

@ -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 (
<IAISlider
isDisabled={!isManual}
label={t('parameters.scaledWidth')}
min={64}
max={1024}
step={64}
value={scaledBoundingBoxDimensions.width}
onChange={handleChangeScaledWidth}
sliderNumberInputProps={{ max: 4096 }}
withSliderMarks
withInput
inputReadOnly
withReset
handleReset={handleResetScaledWidth}
/>
);
};
export default memo(ParamScaledWidth);

0
invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Canvas/SeamCorrection/ParamSeamBlur.tsx → invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamCorrection/ParamSeamBlur.tsx
View File

28
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamCorrection/ParamSeamCorrectionCollapse.tsx Normal file
View File

@ -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 (
<IAICollapse
label={t('parameters.seamCorrectionHeader')}
isOpen={isOpen}
onToggle={onToggle}
>
<ParamSeamSize />
<ParamSeamBlur />
<ParamSeamStrength />
<ParamSeamSteps />
</IAICollapse>
);
};
export default memo(ParamSeamCorrectionCollapse);

0
invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Canvas/SeamCorrection/ParamSeamSize.tsx → invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamCorrection/ParamSeamSize.tsx
View File

0
invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Canvas/SeamCorrection/ParamSeamSteps.tsx → invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamCorrection/ParamSeamSteps.tsx
View File

0
invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Canvas/SeamCorrection/ParamSeamStrength.tsx → invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamCorrection/ParamSeamStrength.tsx
View File

0
invokeai/frontend/web/src/features/parameters/components/Parameters/ParamCFGScale.tsx → invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamCFGScale.tsx
View File

0
invokeai/frontend/web/src/features/parameters/components/Parameters/ParamHeight.tsx → invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamHeight.tsx
View File

0
invokeai/frontend/web/src/features/parameters/components/Parameters/ParamIterations.tsx → invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamIterations.tsx
View File

0
invokeai/frontend/web/src/features/parameters/components/Parameters/ParamNegativeConditioning.tsx → invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamNegativeConditioning.tsx
View File

0
invokeai/frontend/web/src/features/parameters/components/Parameters/ParamPositiveConditioning.tsx → invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx
View File

4
invokeai/frontend/web/src/features/parameters/components/Parameters/ParamScheduler.tsx → invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSampler.tsx
View File

@ -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);

0
invokeai/frontend/web/src/features/parameters/components/Parameters/ParamSteps.tsx → invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSteps.tsx
View File

0
invokeai/frontend/web/src/features/parameters/components/Parameters/ParamWidth.tsx → invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamWidth.tsx
View File

0
invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/FaceRestore/CodeformerFidelity.tsx → invokeai/frontend/web/src/features/parameters/components/Parameters/FaceRestore/CodeformerFidelity.tsx
View File

0
invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreSettings.tsx → invokeai/frontend/web/src/features/parameters/components/Parameters/FaceRestore/FaceRestoreSettings.tsx
View File

0
invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreStrength.tsx → invokeai/frontend/web/src/features/parameters/components/Parameters/FaceRestore/FaceRestoreStrength.tsx
View File

0
invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreToggle.tsx → invokeai/frontend/web/src/features/parameters/components/Parameters/FaceRestore/FaceRestoreToggle.tsx
View File

0
invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreType.tsx → invokeai/frontend/web/src/features/parameters/components/Parameters/FaceRestore/FaceRestoreType.tsx
View File

0
invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageFit.tsx → invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/ImageToImageFit.tsx
View File

0
invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageSettings.tsx → invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/ImageToImageSettings.tsx
View File

0
invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageStrength.tsx → invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/ImageToImageStrength.tsx
View File

0
invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageToggle.tsx → invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/ImageToImageToggle.tsx
View File

0
invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/ImageToImage/InitialImageDisplay.tsx → invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImageDisplay.tsx
View File

0
invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/ImageToImage/InitialImagePreview.tsx → invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImagePreview.tsx
View File

18
invokeai/frontend/web/src/features/parameters/components/Parameters/OtherSettings.tsx
View File

@ -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 (
<VStack gap={2} alignItems="stretch">
<ParamSeamlessToggle />
{/* <ParamSeamlessAxes /> */}
<ParamHiresToggle />
<ParamHiresStrength />
</VStack>
);
};
export default OtherSettings;

0
invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Upscale/UpscaleDenoisingStrength.tsx → invokeai/frontend/web/src/features/parameters/components/Parameters/Upscale/UpscaleDenoisingStrength.tsx
View File

0
invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Upscale/UpscaleScale.tsx → invokeai/frontend/web/src/features/parameters/components/Parameters/Upscale/UpscaleScale.tsx
View File

0
invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Upscale/UpscaleSettings.tsx → invokeai/frontend/web/src/features/parameters/components/Parameters/Upscale/UpscaleSettings.tsx
View File

0
invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Upscale/UpscaleStrength.tsx → invokeai/frontend/web/src/features/parameters/components/Parameters/Upscale/UpscaleStrength.tsx
View File

0
invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/Upscale/UpscaleToggle.tsx → invokeai/frontend/web/src/features/parameters/components/Parameters/Upscale/UpscaleToggle.tsx
View File

0
invokeai/frontend/web/src/features/parameters/components/ImageDimensions/AspectRatioPreview.tsx → invokeai/frontend/web/src/features/parameters/components/Parameters/_ImageDimensions/AspectRatioPreview.tsx
View File

0
invokeai/frontend/web/src/features/parameters/components/ImageDimensions/DimensionsSettings.tsx → invokeai/frontend/web/src/features/parameters/components/Parameters/_ImageDimensions/DimensionsSettings.tsx
View File

94
invokeai/frontend/web/src/features/parameters/components/ParametersAccordion.tsx
View File

@ -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) => (
<InvokeAccordionItem
key={accordionItem.name}
accordionItem={accordionItem}
/>
)),
[accordionItems]
);
return (
<Accordion
defaultIndex={openAccordions}
allowMultiple
onChange={handleChangeAccordionState}
sx={{
display: 'flex',
flexDirection: 'column',
gap: 2,
}}
>
{renderAccordionItems()}
</Accordion>
);
};
export default ParametersAccordion;